/* ============================================================
   RETTUNGSGASSE QUIZ — Styles (Mobile First)
   Uses theme CSS custom properties from custom.css
   ============================================================ */

.rg-quiz {
	--quiz-correct: #2d8f4e;
	--quiz-correct-bg: #edf7f0;
	--quiz-wrong: #d4760a;
	--quiz-wrong-bg: #fef5ec;
	--quiz-radius: 12px;
	--quiz-transition: .3s ease;
	font-family: 'Open Sans', sans-serif;
	color: var(--text-dunkel, #1a1a2e);
}

/* ============================================================
   SECTION WRAPPER (matches theme .section pattern)
   ============================================================ */
.section-quiz {
	background: var(--offwhite, #f4f5fa);
}

/* ============================================================
   IDLE STATE — Teaser Card
   ============================================================ */
.rg-quiz-idle {
	text-align: center;
	padding: 2rem 0;
}
.rg-quiz-idle h2 {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	color: var(--ci-blau, #2a3287);
	margin-bottom: .5rem;
	line-height: 1.2;
}
.rg-quiz-idle p {
	color: var(--text-grau, #4a4a5a);
	font-size: 1.05rem;
	margin-bottom: 2rem;
}
.rg-quiz-start-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 1rem 2.5rem;
	background: var(--ci-blau, #2a3287);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--quiz-transition), transform .2s, box-shadow .3s;
	font-family: inherit;
}
.rg-quiz-start-btn:hover {
	background: var(--ci-blau-hell, #3a45a0);
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(42, 50, 135, .25);
}
.rg-quiz-start-btn:active {
	transform: translateY(0) scale(.98);
}

/* ============================================================
   INTRO STATE — Name Input
   ============================================================ */
.rg-quiz-intro {
	text-align: center;
	max-width: 400px;
	margin: 0 auto;
	padding: 2rem 0;
}
.rg-quiz-intro label {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ci-blau, #2a3287);
	margin-bottom: 1rem;
}
.rg-quiz-name-input {
	width: 100%;
	padding: .875rem 1.25rem;
	font-size: 1.1rem;
	border: 2px solid var(--hellgrau, #e8e9f0);
	border-radius: 8px;
	outline: none;
	font-family: inherit;
	color: var(--text-dunkel, #1a1a2e);
	transition: border-color var(--quiz-transition), box-shadow var(--quiz-transition);
	text-align: center;
}
.rg-quiz-name-input:focus {
	border-color: var(--ci-blau, #2a3287);
	box-shadow: 0 0 0 4px rgba(42, 50, 135, .1);
}
.rg-quiz-name-input::placeholder {
	color: var(--text-grau, #4a4a5a);
	opacity: .5;
}
.rg-quiz-go-btn {
	margin-top: 1.25rem;
	width: 100%;
	padding: 1rem;
	background: var(--ci-blau, #2a3287);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: background var(--quiz-transition), opacity var(--quiz-transition);
}
.rg-quiz-go-btn:disabled {
	opacity: .4;
	cursor: not-allowed;
}
.rg-quiz-go-btn:not(:disabled):hover {
	background: var(--ci-blau-hell, #3a45a0);
}

/* ============================================================
   PLAYING STATE — Header (progress + timer)
   ============================================================ */
.rg-quiz-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
	gap: 1rem;
}
.rg-quiz-progress-text {
	font-size: .875rem;
	font-weight: 600;
	color: var(--ci-blau, #2a3287);
}
.rg-quiz-timer {
	font-size: .875rem;
	font-weight: 700;
	color: var(--text-grau, #4a4a5a);
	font-variant-numeric: tabular-nums;
	background: var(--offwhite, #f4f5fa);
	padding: .35rem .75rem;
	border-radius: 6px;
}
.rg-quiz-progress-bar {
	height: 6px;
	background: var(--hellgrau, #e8e9f0);
	border-radius: 3px;
	margin-bottom: 2rem;
	overflow: hidden;
}
.rg-quiz-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--ci-blau, #2a3287), var(--ci-blau-hell, #3a45a0));
	border-radius: 3px;
	transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   QUESTION CARD
   ============================================================ */
.rg-quiz-question {
	opacity: 1;
	transform: translateX(0);
	transition: opacity .3s ease, transform .3s ease;
}
.rg-quiz-question.entering {
	opacity: 0;
	transform: translateX(30px);
}
.rg-quiz-question.exiting {
	opacity: 0;
	transform: translateX(-30px);
}
.rg-quiz-question-text {
	font-size: clamp(1.05rem, 2.5vw, 1.25rem);
	font-weight: 600;
	color: var(--text-dunkel, #1a1a2e);
	margin-bottom: 1.5rem;
	line-height: 1.45;
}
.rg-quiz-hint-text {
	font-size: .8125rem;
	color: var(--text-grau, #4a4a5a);
	margin-bottom: 1rem;
	font-weight: 600;
}

/* ============================================================
   ANSWER OPTIONS — Single/Multiple Choice Cards
   ============================================================ */
.rg-quiz-options {
	display: flex;
	flex-direction: column;
	gap: .625rem;
}
.rg-quiz-option {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: 1rem 1.25rem;
	background: #fff;
	border: 2px solid var(--hellgrau, #e8e9f0);
	border-radius: var(--quiz-radius);
	cursor: pointer;
	transition: border-color var(--quiz-transition), background var(--quiz-transition), transform .15s;
	min-height: 56px;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
.rg-quiz-option:hover {
	border-color: var(--ci-blau, #2a3287);
	background: rgba(42, 50, 135, .03);
}
.rg-quiz-option:active {
	transform: scale(.98);
}
.rg-quiz-option.selected {
	border-color: var(--ci-blau, #2a3287);
	background: rgba(42, 50, 135, .06);
}
.rg-quiz-option.correct {
	border-color: var(--quiz-correct);
	background: var(--quiz-correct-bg);
	pointer-events: none;
}
.rg-quiz-option.wrong {
	border-color: var(--quiz-wrong);
	background: var(--quiz-wrong-bg);
	pointer-events: none;
}
.rg-quiz-option.disabled {
	pointer-events: none;
	opacity: .6;
}
.rg-quiz-option.correct.highlight {
	border-color: var(--quiz-correct);
	background: var(--quiz-correct-bg);
	opacity: 1;
}

/* Option indicator (radio/checkbox circle) */
.rg-quiz-option-indicator {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border: 2px solid var(--hellgrau, #e8e9f0);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
	transition: border-color var(--quiz-transition), background var(--quiz-transition);
}
.rg-quiz-option[data-type="multiple"] .rg-quiz-option-indicator {
	border-radius: 4px;
}
.rg-quiz-option.selected .rg-quiz-option-indicator {
	border-color: var(--ci-blau, #2a3287);
	background: var(--ci-blau, #2a3287);
}
.rg-quiz-option.correct .rg-quiz-option-indicator {
	border-color: var(--quiz-correct);
	background: var(--quiz-correct);
}
.rg-quiz-option.wrong .rg-quiz-option-indicator {
	border-color: var(--quiz-wrong);
	background: var(--quiz-wrong);
}
.rg-quiz-option-indicator::after {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	opacity: 0;
	transition: opacity .15s;
}
.rg-quiz-option[data-type="multiple"] .rg-quiz-option-indicator::after {
	content: '✓';
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}
.rg-quiz-option.selected .rg-quiz-option-indicator::after,
.rg-quiz-option.correct .rg-quiz-option-indicator::after,
.rg-quiz-option.wrong .rg-quiz-option-indicator::after {
	opacity: 1;
}

.rg-quiz-option-text {
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--text-dunkel, #1a1a2e);
}

/* ============================================================
   VEHICLE SELECTION — Icon Grid
   ============================================================ */
.rg-quiz-vehicles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .75rem;
}
.rg-quiz-vehicle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	padding: 1rem .5rem;
	background: #fff;
	border: 2px solid var(--hellgrau, #e8e9f0);
	border-radius: var(--quiz-radius);
	cursor: pointer;
	transition: border-color var(--quiz-transition), background var(--quiz-transition), transform .15s;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	text-align: center;
	min-height: 100px;
}
.rg-quiz-vehicle:hover {
	border-color: var(--ci-blau, #2a3287);
}
.rg-quiz-vehicle:active {
	transform: scale(.96);
}
.rg-quiz-vehicle.selected {
	border-color: var(--ci-blau, #2a3287);
	background: rgba(42, 50, 135, .06);
}
.rg-quiz-vehicle.correct {
	border-color: var(--quiz-correct);
	background: var(--quiz-correct-bg);
	pointer-events: none;
}
.rg-quiz-vehicle.wrong {
	border-color: var(--quiz-wrong);
	background: var(--quiz-wrong-bg);
	pointer-events: none;
}
.rg-quiz-vehicle.disabled {
	pointer-events: none;
	opacity: .6;
}
.rg-quiz-vehicle.correct.highlight {
	opacity: 1;
	border-color: var(--quiz-correct);
	background: var(--quiz-correct-bg);
}
.rg-quiz-vehicle-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
}
.rg-quiz-vehicle-text {
	font-size: .6875rem;
	font-weight: 600;
	color: var(--text-grau, #4a4a5a);
	line-height: 1.3;
}

/* ============================================================
   FEEDBACK — Correct/Wrong Message
   ============================================================ */
.rg-quiz-feedback {
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
	border-radius: var(--quiz-radius);
	font-size: .9375rem;
	line-height: 1.5;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .3s ease, transform .3s ease;
}
.rg-quiz-feedback.visible {
	opacity: 1;
	transform: translateY(0);
}
.rg-quiz-feedback.correct {
	background: var(--quiz-correct-bg);
	border-left: 4px solid var(--quiz-correct);
	color: #1a5c32;
}
.rg-quiz-feedback.wrong {
	background: var(--quiz-wrong-bg);
	border-left: 4px solid var(--quiz-wrong);
	color: #7a4106;
}
.rg-quiz-feedback-title {
	font-weight: 700;
	margin-bottom: .25rem;
}
.rg-quiz-feedback-text {
	font-size: .875rem;
}

/* ============================================================
   ACTION BUTTONS (Check / Next / Finish)
   ============================================================ */
.rg-quiz-actions {
	margin-top: 1.5rem;
	display: flex;
	justify-content: flex-end;
}
.rg-quiz-action-btn {
	padding: .875rem 2rem;
	background: var(--ci-blau, #2a3287);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: background var(--quiz-transition), transform .15s;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .3s ease, transform .3s ease, background .2s;
}
.rg-quiz-action-btn.visible {
	opacity: 1;
	transform: translateY(0);
}
.rg-quiz-action-btn:hover {
	background: var(--ci-blau-hell, #3a45a0);
}
.rg-quiz-action-btn:active {
	transform: scale(.97);
}
.rg-quiz-action-btn:disabled {
	opacity: .4;
	cursor: not-allowed;
}

/* ============================================================
   RESULTS STATE
   ============================================================ */
.rg-quiz-results {
	text-align: center;
	padding: 1rem 0;
}
.rg-quiz-results-title {
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 700;
	color: var(--ci-blau, #2a3287);
	margin-bottom: .5rem;
}

/* Score Ring */
.rg-quiz-score-ring {
	position: relative;
	width: 160px;
	height: 160px;
	margin: 1.5rem auto;
}
.rg-quiz-score-ring svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}
.rg-quiz-score-ring-bg {
	fill: none;
	stroke: var(--hellgrau, #e8e9f0);
	stroke-width: 8;
}
.rg-quiz-score-ring-fill {
	fill: none;
	stroke: var(--ci-blau, #2a3287);
	stroke-width: 8;
	stroke-linecap: round;
	stroke-dasharray: 408;
	stroke-dashoffset: 408;
	transition: stroke-dashoffset 1.5s cubic-bezier(.4, 0, .2, 1);
}
.rg-quiz-score-ring-fill.perfect {
	stroke: var(--quiz-correct);
}
.rg-quiz-score-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.rg-quiz-score-number {
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--ci-blau, #2a3287);
	line-height: 1;
}
.rg-quiz-score-total {
	font-size: 1rem;
	color: var(--text-grau, #4a4a5a);
}
.rg-quiz-results-time {
	font-size: .9375rem;
	color: var(--text-grau, #4a4a5a);
	margin-bottom: .5rem;
}
.rg-quiz-results-rating {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--ci-blau, #2a3287);
	margin-bottom: 2rem;
}

/* Category Breakdown */
.rg-quiz-categories {
	text-align: left;
	margin: 1.5rem 0;
}
.rg-quiz-categories-title {
	font-size: .875rem;
	font-weight: 700;
	color: var(--ci-blau, #2a3287);
	margin-bottom: .75rem;
}
.rg-quiz-category-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .5rem 0;
	border-bottom: 1px solid var(--hellgrau, #e8e9f0);
	font-size: .8125rem;
}
.rg-quiz-category-name {
	color: var(--text-grau, #4a4a5a);
}
.rg-quiz-category-score {
	font-weight: 700;
}
.rg-quiz-category-score.pass { color: var(--quiz-correct); }
.rg-quiz-category-score.fail { color: var(--quiz-wrong); }

/* Learning Hints */
.rg-quiz-hints {
	text-align: left;
	margin: 1.5rem 0;
}
.rg-quiz-hints-title {
	font-size: .875rem;
	font-weight: 700;
	color: var(--ci-blau, #2a3287);
	margin-bottom: .75rem;
}
.rg-quiz-hint-item {
	padding: .75rem 1rem;
	background: var(--quiz-wrong-bg);
	border-left: 3px solid var(--quiz-wrong);
	border-radius: 0 8px 8px 0;
	margin-bottom: .5rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--text-dunkel, #1a1a2e);
}

/* Results Action Buttons */
.rg-quiz-results-actions {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	margin-top: 2rem;
}
.rg-quiz-results-actions .rg-quiz-action-btn {
	opacity: 1;
	transform: none;
	width: 100%;
	text-align: center;
}
.rg-quiz-results-actions .rg-quiz-btn-secondary {
	background: transparent;
	color: var(--ci-blau, #2a3287);
	border: 2px solid var(--ci-blau, #2a3287);
}
.rg-quiz-results-actions .rg-quiz-btn-secondary:hover {
	background: rgba(42, 50, 135, .06);
}

/* Email form (inline on results) */
.rg-quiz-email-form {
	display: flex;
	gap: 0;
	margin-top: .75rem;
	border: 2px solid var(--hellgrau, #e8e9f0);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color var(--quiz-transition);
}
.rg-quiz-email-form:focus-within {
	border-color: var(--ci-blau, #2a3287);
}
.rg-quiz-email-form input {
	flex: 1;
	padding: .75rem 1rem;
	border: none;
	outline: none;
	font-size: .9375rem;
	font-family: inherit;
	min-width: 0;
}
.rg-quiz-email-form button {
	padding: .75rem 1.25rem;
	background: var(--ci-blau, #2a3287);
	color: #fff;
	border: none;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
}

/* ============================================================
   COMPETITION FORM
   ============================================================ */
.rg-quiz-competition {
	text-align: left;
	max-width: 480px;
	margin: 0 auto;
	padding: 1rem 0;
}
.rg-quiz-competition-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ci-blau, #2a3287);
	margin-bottom: 1.5rem;
	text-align: center;
}
.rg-quiz-form-group {
	margin-bottom: 1rem;
}
.rg-quiz-form-group label {
	display: block;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--text-dunkel, #1a1a2e);
	margin-bottom: .35rem;
}
.rg-quiz-form-group input,
.rg-quiz-form-group select {
	width: 100%;
	padding: .75rem 1rem;
	border: 2px solid var(--hellgrau, #e8e9f0);
	border-radius: 8px;
	font-size: .9375rem;
	font-family: inherit;
	color: var(--text-dunkel, #1a1a2e);
	outline: none;
	transition: border-color var(--quiz-transition);
}
.rg-quiz-form-group input:focus,
.rg-quiz-form-group select:focus {
	border-color: var(--ci-blau, #2a3287);
}
.rg-quiz-form-row {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: .75rem;
}
.rg-quiz-form-checkbox {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin-bottom: .75rem;
	cursor: pointer;
}
.rg-quiz-form-checkbox input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: var(--ci-blau, #2a3287);
}
.rg-quiz-form-checkbox span {
	font-size: .8125rem;
	color: var(--text-grau, #4a4a5a);
	line-height: 1.4;
}
.rg-quiz-form-checkbox a {
	color: var(--ci-blau, #2a3287);
	text-decoration: underline;
}
/* Honeypot */
.rg-quiz-hp { position: absolute; left: -9999px; }
.rg-quiz-form-error {
	color: var(--quiz-wrong);
	font-size: .8125rem;
	font-weight: 600;
	margin-top: .75rem;
	text-align: center;
}

/* ============================================================
   THANK YOU STATE
   ============================================================ */
.rg-quiz-thankyou {
	text-align: center;
	padding: 2rem 0;
}
.rg-quiz-thankyou-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ci-blau, #2a3287);
	margin-bottom: .5rem;
}
.rg-quiz-thankyou p {
	color: var(--text-grau, #4a4a5a);
	margin-bottom: 1.5rem;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes quiz-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-4px); }
	40% { transform: translateX(4px); }
	60% { transform: translateX(-2px); }
	80% { transform: translateX(2px); }
}
.rg-quiz-option.wrong-shake {
	animation: quiz-shake .4s ease;
}
@keyframes quiz-pop {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}
.rg-quiz-option.correct-pop {
	animation: quiz-pop .3s ease;
}
@keyframes quiz-fade-in {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}
.rg-quiz-fade-in {
	animation: quiz-fade-in .5s ease forwards;
}

/* ============================================================
   MOBILE FIRST — Base is mobile, scale up for larger
   ============================================================ */

/* Mobile: Action buttons always full width */
.rg-quiz-actions {
	margin-top: 1.25rem;
}
.rg-quiz-actions .rg-quiz-action-btn {
	width: 100%;
	text-align: center;
	padding: 1rem;
	font-size: 1.05rem;
	min-height: 52px;
}

/* Mobile: Email form stacks */
.rg-quiz-email-form {
	flex-direction: column;
}
.rg-quiz-email-form button {
	padding: .875rem;
	width: 100%;
}

/* Mobile: Form inputs larger touch targets */
.rg-quiz-form-group input,
.rg-quiz-form-group select {
	min-height: 48px;
	font-size: 1rem;
}

/* Mobile: Competition form full-width submit */
.rg-quiz-competition .rg-quiz-action-btn {
	min-height: 52px;
	font-size: 1.05rem;
}

/* Mobile: safe area padding */
.rg-quiz {
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
}

/* ============================================================
   TABLET+ (640px)
   ============================================================ */
@media (min-width: 640px) {
	.rg-quiz-vehicles {
		grid-template-columns: repeat(4, 1fr);
	}
	.rg-quiz-results-actions {
		flex-direction: row;
		justify-content: center;
	}
	.rg-quiz-results-actions .rg-quiz-action-btn {
		width: auto;
	}
	.rg-quiz-email-form {
		flex-direction: row;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}
	.rg-quiz-email-form button {
		width: auto;
	}
	.rg-quiz-actions .rg-quiz-action-btn {
		width: auto;
		float: right;
	}
}

/* ============================================================
   SMALL PHONES (380px)
   ============================================================ */
@media (max-width: 380px) {
	.rg-quiz-vehicles {
		grid-template-columns: repeat(2, 1fr);
	}
	.rg-quiz-option {
		padding: .875rem 1rem;
	}
	.rg-quiz-question-text {
		font-size: 1rem;
	}
	.rg-quiz-vehicle-text {
		font-size: .625rem;
	}
	.rg-quiz-form-row {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.rg-quiz, .rg-quiz * {
		animation: none !important;
		transition-duration: 0s !important;
	}
	.rg-quiz-question { opacity: 1; transform: none; }
	.rg-quiz-feedback { opacity: 1; transform: none; }
	.rg-quiz-action-btn { opacity: 1; transform: none; }
}