/*
 * Alles-Holz-Quiz — Frontend
 *
 * Farben kommen aus dem Child-Theme (--ah-green, --ah-brown …). Die Fallbacks
 * hinter jedem var() sind Absicht: Wird der Shortcode einmal auf einer Seite
 * ohne Theme-Variablen gerendert (Vorschau, fremdes Theme), sieht das Quiz
 * trotzdem richtig aus statt schwarz auf weiß.
 *
 * Mobile first: Die Besucher kommen über einen QR-Code vom Flyer, also fast
 * alle mit dem Handy in der Hand.
 */

.ah-quiz {
	--q-sand: var(--ah-sand, #FCEFE7);
	--q-brown: var(--ah-brown, #894F21);
	--q-brown-mid: var(--ah-brown-mid, #EDE9D0);
	--q-brown-light: var(--ah-brown-light, #FBFAF6);
	--q-green: var(--ah-green, #74B239);
	--q-green-dark: var(--ah-green-dark, #2C4F17);
	--q-green-mid: var(--ah-green-mid, #57893E);
	--q-green-hl: var(--ah-green-highlight, #D6DE23);
	--q-pink: var(--ah-pink, #FF3B5F);
	--q-pink-dark: var(--ah-pink-dark, #AB0120);
	--q-ink: var(--ah-gray-dark, #484848);
	--q-ink-soft: var(--ah-gray-mid, #827D7A);
	--q-line: var(--ah-gray-light, #EAEAEA);
	--q-blue: var(--ah-blue, #196ABA);
	--q-head: var(--ah-font-heading, inherit);
	--q-radius: 18px;
	--q-radius-lg: 26px;

	max-width: 560px;
	margin: 0 auto;
	color: var(--q-ink);
	font-family: var(--ah-font-body, inherit);
}

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

/* ---------- Kopf mit Fortschritt ---------- */

.ah-quiz-top {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 16px;
}
.ah-quiz-top[hidden] { display: none; }

.ah-quiz-brand {
	font-family: var(--q-head);
	font-weight: 700;
	font-size: 15px;
	color: var(--q-brown);
	white-space: nowrap;
}

.ah-quiz-progress {
	flex: 1;
	height: 12px;
	border-radius: 99px;
	background: #fff;
	border: 2px solid var(--q-brown-mid);
	overflow: hidden;
}
.ah-quiz-progress > span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--q-green), var(--q-green-hl));
	transition: width .45s cubic-bezier(.4, 1.3, .5, 1);
}

.ah-quiz-counter {
	font-weight: 700;
	font-size: 14px;
	color: var(--q-ink-soft);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---------- Karten & Bildschirme ---------- */

.ah-quiz-card {
	background: #fff;
	border: 3px solid var(--q-brown-mid);
	border-radius: var(--q-radius-lg);
	padding: 26px 22px;
	box-shadow: 0 10px 0 -4px rgba(137, 79, 33, .07);
}

.ah-quiz-screen { display: none; }
.ah-quiz-screen.is-active {
	display: block;
	animation: ah-quiz-rise .4s ease both;
}

@keyframes ah-quiz-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

/* ---------- Startbildschirm ---------- */

.ah-quiz-start { text-align: center; }

.ah-quiz-start h2 {
	font-family: var(--q-head);
	color: var(--q-brown);
	font-size: clamp(28px, 7vw, 38px);
	line-height: 1.1;
	text-wrap: balance;
	margin: 0 0 12px;
}

.ah-quiz-start p {
	margin: 0 auto 24px;
	max-width: 34ch;
	line-height: 1.55;
}

.ah-quiz-slice-deco { display: block; margin: 0 auto 16px; }
.ah-quiz-deco-fill { fill: var(--q-brown-mid); stroke: var(--q-brown); stroke-width: 3; }
.ah-quiz-deco-ring { fill: none; stroke: var(--q-brown); stroke-width: 2; opacity: .5; }
.ah-quiz-deco-core { fill: var(--q-green); }

.ah-quiz-facts {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}
.ah-quiz-fact {
	background: var(--q-brown-mid);
	color: var(--q-brown);
	font-weight: 700;
	font-size: 14px;
	padding: 7px 14px;
	border-radius: 99px;
}

/* ---------- Frage ---------- */

.ah-quiz-qnum {
	font-family: var(--q-head);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--q-green-mid);
	margin: 0 0 8px;
}

.ah-quiz-qtext {
	font-family: var(--q-head);
	color: var(--q-brown);
	font-size: clamp(21px, 5.4vw, 26px);
	line-height: 1.25;
	text-wrap: balance;
	margin: 0 0 22px;
}

.ah-quiz-answers {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ah-quiz-answer {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	width: 100%;
	text-align: left;
	font: inherit;
	color: inherit;
	background: var(--q-brown-light);
	border: 3px solid var(--q-brown-mid);
	border-radius: var(--q-radius);
	padding: 15px 16px;
	cursor: pointer;
	line-height: 1.45;
	transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.ah-quiz-answer:hover { border-color: var(--q-green); background: #fff; }
.ah-quiz-answer:active { transform: scale(.985); }
.ah-quiz-answer:focus-visible { outline: 3px solid var(--q-blue); outline-offset: 2px; }
.ah-quiz-answer.is-picked { border-color: var(--q-green); background: #F3F9EC; }

.ah-quiz-letter {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #fff;
	border: 2px solid var(--q-brown-mid);
	font-family: var(--q-head);
	font-weight: 700;
	font-size: 15px;
	color: var(--q-brown);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ah-quiz-answer.is-picked .ah-quiz-letter {
	background: var(--q-green);
	border-color: var(--q-green);
	color: #fff;
}

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

.ah-quiz-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}
/* display:flex schlaegt das [hidden] des Browsers — ohne diese Zeile stand
   die leere „Weitermachen"-Pille auf JEDEM Startbildschirm (wie schon bei
   .ah-quiz-top und .ah-quiz-error). */
.ah-quiz-row[hidden] { display: none; }

.ah-quiz-btn {
	font-family: var(--q-head);
	font-weight: 700;
	font-size: 18px;
	border: none;
	border-radius: 99px;
	padding: 15px 30px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	transition: transform .12s ease, background .15s ease;
}
.ah-quiz-btn:focus-visible { outline: 3px solid var(--q-blue); outline-offset: 3px; }
.ah-quiz-btn:active { transform: translateY(2px); }

.ah-quiz-btn-main {
	flex: 1;
	background: var(--q-pink);
	color: #fff;
	box-shadow: 0 4px 0 var(--q-pink-dark);
}
.ah-quiz-btn-main:hover { background: var(--q-pink-dark); color: #fff; }
.ah-quiz-btn-main:disabled {
	background: var(--q-line);
	color: var(--q-ink-soft);
	box-shadow: 0 4px 0 #d8d8d8;
	cursor: not-allowed;
}

.ah-quiz-btn-ghost {
	background: transparent;
	color: var(--q-brown);
	border: 3px solid var(--q-brown-mid);
	font-size: 16px;
	padding: 12px 20px;
}
.ah-quiz-btn-ghost:hover { border-color: var(--q-brown); color: var(--q-brown); }

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

.ah-quiz-result { text-align: center; }

.ah-quiz-result h2 {
	font-family: var(--q-head);
	color: var(--q-brown);
	font-size: clamp(26px, 6.6vw, 33px);
	line-height: 1.15;
	text-wrap: balance;
	margin: 0 0 10px;
}

.ah-quiz-verdict {
	max-width: 32ch;
	margin: 0 auto 22px;
	line-height: 1.55;
}

.ah-quiz-slice-wrap {
	position: relative;
	width: 224px;
	height: 224px;
	margin: 4px auto 20px;
}
.ah-quiz-slice-center {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	text-align: center;
}
.ah-quiz-pct {
	font-family: var(--q-head);
	font-weight: 800;
	font-size: 46px;
	line-height: 1;
	color: var(--q-brown);
	font-variant-numeric: tabular-nums;
}
.ah-quiz-pct span { font-size: 26px; }

.ah-quiz-score {
	font-weight: 700;
	font-size: 14px;
	color: var(--q-ink-soft);
	margin-top: 3px;
}

.ah-quiz-ring { transform-origin: 112px 112px; }
.ah-quiz-ring.grow { animation: ah-quiz-ring-in .5s cubic-bezier(.3, 1.4, .5, 1) both; }

@keyframes ah-quiz-ring-in {
	from { opacity: 0; transform: scale(.55); }
	to { opacity: 1; transform: scale(1); }
}

/* ---------- Auflösung ---------- */

.ah-quiz-review {
	margin-top: 22px;
	text-align: left;
	border-top: 2px dashed var(--q-brown-mid);
	padding-top: 16px;
}
.ah-quiz-review > summary {
	font-family: var(--q-head);
	font-weight: 700;
	font-size: 17px;
	color: var(--q-brown);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
}
.ah-quiz-review > summary::-webkit-details-marker { display: none; }
.ah-quiz-review > summary::after {
	content: "▾";
	font-size: 14px;
	transition: transform .2s ease;
}
.ah-quiz-review[open] > summary::after { transform: rotate(180deg); }
.ah-quiz-review > summary:focus-visible { outline: 3px solid var(--q-blue); outline-offset: 3px; }

.ah-quiz-review-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 16px;
}

.ah-quiz-review-kapitel {
	font-family: var(--q-head);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--q-green-mid);
	margin-top: 6px;
}
.ah-quiz-review-kapitel:first-child { margin-top: 0; }

.ah-quiz-review-item {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 15px;
	line-height: 1.45;
}
.ah-quiz-mark {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 13px;
	font-weight: 800;
	color: #fff;
	margin-top: 1px;
}
.ah-quiz-mark.ok { background: var(--q-green); }
.ah-quiz-mark.bad { background: var(--q-pink); }

.ah-quiz-review-q { font-weight: 700; }
.ah-quiz-review-a { color: var(--q-ink-soft); }
.ah-quiz-review-a b { color: var(--q-green-mid); }
.ah-quiz-review-note { color: var(--q-brown); font-style: italic; }

/* ---------- Abschluss-CTA & Fehler ---------- */

.ah-quiz-cta {
	margin-top: 22px;
	background: var(--q-brown-mid);
	border-radius: var(--q-radius);
	padding: 18px;
}
.ah-quiz-cta p {
	margin: 0 0 14px;
	font-weight: 700;
	color: var(--q-brown);
}
.ah-quiz-cta .ah-quiz-btn { display: block; }

.ah-quiz-error {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: var(--q-radius);
	background: #FFF1F3;
	border: 2px solid var(--q-pink);
	color: var(--q-pink-dark);
	font-weight: 600;
}
.ah-quiz-error[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.ah-quiz *,
	.ah-quiz *::before,
	.ah-quiz *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}