/*
 * Kampfsport-Quiz -- Gestaltung
 *
 * WARUM DIESE DATEI
 * -----------------
 * Das Quiz ist ein eigener Block mit eigenem Zustand (Fortschritt,
 * Auswahlkacheln, Ergebniskarten). Diese Regeln in main.css zu legen hiesse,
 * sie auf jeder Seite auszuliefern -- auch auf den neunzehn, die das Quiz
 * nie zeigen. Deshalb eine eigene Datei, geladen nur dort, wo der Shortcode
 * [kampfsport_quiz] wirklich steht (shouraki_quiz_assets() im PHP).
 *
 * WOHER DIE OPTIK KOMMT
 * ---------------------
 * Ausschliesslich aus den Tokens in main.css (:root). Keine eigene Farbe,
 * keine eigene Schrift, kein eigener Radius -- alles ueber var(). Wer das
 * Theme umfaerbt, faerbt das Quiz mit um. Die Formensprache der
 * Auswahlkacheln folgt dem Kursfinder (kursfinder.css): dunkle Einlassung,
 * heller Rahmen am Bedienelement, Gold als Zustand "gewaehlt", harte
 * Kanten statt runder Kacheln.
 *
 * MOBILE ZUERST
 * -------------
 * Die Grundregeln gelten fuer schmale Bildschirme; die Medienabfragen
 * weiter unten fuegen nur hinzu, was auf breiteren Bildschirmen Sinn
 * ergibt. Bei 400 Pixeln Breite steht alles einspaltig, die Schaltflaechen
 * sind mindestens 44 Pixel hoch (Fingerziel) und nichts laeuft seitlich
 * aus dem Bild.
 */

.sk-quiz {
	/* Eigene Farbtoene, abgeleitet aus den Theme-Tokens -- gleiche Namen
	   und gleiche Werte wie im Kursfinder, damit beide Bloecke auf einer
	   Seite nicht auseinanderfallen. */
	--sk-quiz-linie: var(--sk-color-border);
	--sk-quiz-linie-sanft: rgba(226, 232, 240, 0.09);
	--sk-quiz-einlass: rgba(3, 6, 23, 0.72);
	--sk-quiz-feld: rgba(226, 232, 240, 0.24);

	margin-block-start: var(--sk-space-lg);
	container-type: inline-size;
}

/* ============================================================
   Kopf: Zaehler und Fortschrittsbalken
   ============================================================ */

.sk-quiz__kopf {
	display: flex;
	flex-direction: column;
	gap: var(--sk-space-2xs);
	margin-block-end: var(--sk-space-md);
}

.sk-quiz__zaehler {
	margin: 0;
	font-family: var(--sk-font-heading);
	font-size: var(--sk-fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--sk-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sk-color-gold);
}

.sk-quiz__balken {
	height: 6px;
	background-color: var(--sk-quiz-einlass);
	border: 1px solid var(--sk-quiz-linie);
	border-radius: var(--sk-radius-sm);
	overflow: hidden;
}

.sk-quiz__balken-fuellung {
	width: 0;
	height: 100%;
	background-image: var(--sk-gradient-gold-btn);
	transition: width var(--sk-transition);
}

/* ============================================================
   Buehne: der wechselnde Teil
   ============================================================ */

.sk-quiz__schritt {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Zustand waehrend des Austauschs -- das Skript setzt und loest ihn. */
.sk-quiz__schritt.is-weg {
	opacity: 0;
	transform: translateY(8px);
}

/* Die Ueberschriften bekommen den Fokus, damit die Vorlesestimme und die
   Tastatur nach jedem Schritt an der richtigen Stelle stehen. Ein sichtbarer
   Rahmen waere dort falsch -- niemand hat geklickt. Der Umriss erscheint
   nur bei echter Tastaturbedienung (:focus-visible aus main.css). */
.sk-quiz__frage-titel:focus,
.sk-quiz__ergebnis-titel:focus {
	outline: none;
}

/* ============================================================
   Frage und Antworten
   ============================================================ */

.sk-quiz__frage-titel {
	margin: 0;
	font-size: var(--sk-fs-h3);
	text-wrap: balance;
}

.sk-quiz__frage-hilfe {
	margin: var(--sk-space-2xs) 0 0;
	font-size: var(--sk-fs-small);
	color: var(--sk-color-text-dim);
	max-width: var(--sk-measure-tight);
}

.sk-quiz__antworten {
	display: grid;
	gap: var(--sk-space-2xs);
	margin-block-start: var(--sk-space-md);
}

.sk-quiz__antwort {
	display: flex;
	align-items: center;
	gap: var(--sk-space-xs);
	width: 100%;
	min-height: 56px;
	padding: var(--sk-space-xs) var(--sk-space-sm);
	border: 1px solid var(--sk-quiz-feld);
	border-radius: var(--sk-radius);
	background-color: var(--sk-quiz-einlass);
	background-image: none;
	color: var(--sk-color-text);
	font-family: var(--sk-font-body);
	font-size: var(--sk-fs-base);
	line-height: 1.35;
	text-align: start;
	cursor: pointer;
	transition:
		background-color var(--sk-transition),
		border-color var(--sk-transition),
		color var(--sk-transition);
}

.sk-quiz__antwort:hover {
	border-color: var(--sk-color-gold);
	background-color: var(--sk-color-panel-raised);
	color: var(--sk-color-heading);
}

/* Die Ziffer links: zugleich Bedienhinweis (die Zifferntasten waehlen die
   Antwort) und optischer Anker fuer die Kachel. */
.sk-quiz__antwort-marke {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--sk-quiz-linie);
	border-radius: var(--sk-radius-sm);
	background-color: rgba(var(--sk-color-dark-rgb), 0.6);
	font-family: var(--sk-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--sk-color-text-dim);
	transition:
		background-color var(--sk-transition),
		border-color var(--sk-transition),
		color var(--sk-transition);
}

.sk-quiz__antwort:hover .sk-quiz__antwort-marke {
	border-color: var(--sk-color-gold);
	color: var(--sk-color-gold);
}

.sk-quiz__antwort-text {
	flex: 1 1 auto;
	min-width: 0;
}

/* Gewaehlt: derselbe Goldverlauf wie bei den aktiven Chips des Kursfinders.
   Dunkle Schrift auf Gold, Kontrast 9,6:1 an der dunkelsten Stelle. */
.sk-quiz__antwort.is-gewaehlt {
	border-color: var(--sk-color-gold);
	background-color: var(--sk-color-gold);
	background-image: var(--sk-gradient-gold-btn);
	color: var(--sk-color-ink);
	font-weight: 600;
}

.sk-quiz__antwort.is-gewaehlt .sk-quiz__antwort-marke {
	border-color: rgba(var(--sk-color-dark-rgb), 0.45);
	background-color: rgba(var(--sk-color-dark-rgb), 0.12);
	color: var(--sk-color-ink);
}

/* ============================================================
   Fuss: Zurueck
   ============================================================ */

.sk-quiz__fuss {
	display: flex;
	margin-block-start: var(--sk-space-md);
}

.sk-quiz__zurueck:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.sk-quiz__zurueck:disabled:hover {
	background-color: transparent;
	background-image: none;
	border-color: var(--sk-color-gold);
	color: var(--sk-color-gold);
}

/* ============================================================
   Ergebnis
   ============================================================ */

.sk-quiz__ergebnis-titel {
	margin: 0 0 var(--sk-space-md);
	font-size: var(--sk-fs-h3);
}

.sk-quiz__karte {
	padding: var(--sk-space-sm);
	border: 1px solid var(--sk-quiz-linie);
	border-radius: var(--sk-radius-lg);
	background-color: var(--sk-color-panel);
	background-image: var(--sk-gradient-panel);
}

.sk-quiz__karte + .sk-quiz__karte {
	margin-block-start: var(--sk-space-sm);
}

/* Die erste Empfehlung traegt die Goldkante -- ein Blick genuegt, um zu
   sehen, welche der beiden Karten die Antwort auf die Frage ist. */
.sk-quiz__karte--top {
	border-color: var(--sk-color-gold);
	box-shadow: var(--sk-shadow-gold);
}

.sk-quiz__karte-rolle {
	display: flex;
	align-items: center;
	gap: var(--sk-space-3xs);
	margin: 0;
	font-family: var(--sk-font-heading);
	font-size: var(--sk-fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--sk-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sk-color-gold);
}

.sk-quiz__karte-name {
	margin: var(--sk-space-3xs) 0 0;
	font-size: var(--sk-fs-h4);
}

.sk-quiz__karte-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-space-3xs) var(--sk-space-2xs);
	margin: var(--sk-space-2xs) 0 0;
	font-size: var(--sk-fs-small);
}

.sk-quiz__karte-kurs,
.sk-quiz__karte-alter {
	padding: 2px var(--sk-space-2xs);
	border: 1px solid var(--sk-quiz-linie);
	border-radius: var(--sk-radius-sm);
	background-color: var(--sk-quiz-einlass);
	color: var(--sk-color-text-dim);
}

.sk-quiz__karte-grund {
	margin: var(--sk-space-sm) 0 0;
	font-size: var(--sk-fs-lead);
	line-height: 1.5;
	color: var(--sk-color-heading);
	text-wrap: pretty;
}

.sk-quiz__karte-text {
	margin: var(--sk-space-2xs) 0 0;
	color: var(--sk-color-text-muted);
	max-width: var(--sk-measure);
}

.sk-quiz__merkmale {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-space-2xs);
	margin: var(--sk-space-sm) 0 0;
	padding: 0;
	list-style: none;
}

.sk-quiz__merkmal {
	display: flex;
	align-items: center;
	gap: var(--sk-space-3xs);
	padding: 3px var(--sk-space-2xs);
	border: 1px solid var(--sk-quiz-linie-sanft);
	border-radius: var(--sk-radius-sm);
	background-color: var(--sk-quiz-einlass);
	font-size: var(--sk-fs-small);
	color: var(--sk-color-text-dim);
}

.sk-quiz__merkmal .sk-quiz__icon {
	color: var(--sk-color-gold);
}

.sk-quiz__karte-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-space-3xs);
	margin-block-start: var(--sk-space-sm);
	font-family: var(--sk-font-heading);
	font-weight: 600;
	color: var(--sk-color-gold);
	text-decoration: none;
	border-block-end: 1px solid transparent;
	transition: border-color var(--sk-transition);
}

.sk-quiz__karte-link:hover,
.sk-quiz__karte-link:focus-visible {
	border-block-end-color: var(--sk-color-gold);
}

.sk-quiz__hinweis {
	margin: var(--sk-space-md) 0 0;
	font-size: var(--sk-fs-small);
	color: var(--sk-color-text-dim);
	max-width: var(--sk-measure-tight);
}

.sk-quiz__aktionen {
	display: flex;
	flex-direction: column;
	gap: var(--sk-space-2xs);
	margin-block-start: var(--sk-space-md);
}

/* Auf schmalen Bildschirmen stehen die Knoepfe untereinander und fuellen
   die Breite -- daumenfreundlich und ohne Zeilenumbruch in der Beschriftung. */
.sk-quiz__aktionen > .sk-btn {
	width: 100%;
}

/* Symbole sitzen auf der Schriftlinie und erben die Farbe ihres Knopfes. */
.sk-quiz__icon {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

/* ============================================================
   Ohne JavaScript
   ============================================================ */

.sk-quiz__ohne-js {
	padding: var(--sk-space-sm);
	border: 1px solid var(--sk-quiz-linie);
	border-radius: var(--sk-radius-lg);
	background-color: var(--sk-color-panel);
}

.sk-quiz__liste {
	margin: var(--sk-space-md) 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--sk-space-2xs);
}

.sk-quiz__liste li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sk-space-2xs);
	padding-block-end: var(--sk-space-2xs);
	border-block-end: 1px solid var(--sk-quiz-linie-sanft);
}

.sk-quiz__liste-alter {
	font-size: var(--sk-fs-small);
	color: var(--sk-color-text-dim);
}

/* ============================================================
   Breitere Bildschirme
   ============================================================ */

@container (min-width: 34rem) {
	.sk-quiz__karte {
		padding: var(--sk-space-md);
	}

	.sk-quiz__aktionen {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.sk-quiz__aktionen > .sk-btn {
		width: auto;
	}
}

/*
 * Rueckfall fuer Browser ohne Container-Abfragen: dieselbe Schwelle, nur
 * am Sichtfenster gemessen. Der Block steht auf der Seite ohnehin in der
 * Containerbreite, das Ergebnis ist praktisch dasselbe.
 */
@supports not (container-type: inline-size) {
	@media (min-width: 36rem) {
		.sk-quiz__karte {
			padding: var(--sk-space-md);
		}

		.sk-quiz__aktionen {
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
		}

		.sk-quiz__aktionen > .sk-btn {
			width: auto;
		}
	}
}

/* ============================================================
   Weniger Bewegung
   ============================================================ */

/*
 * Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt den
 * Schrittwechsel ohne Ueberblendung. Das Skript prueft dieselbe Einstellung
 * und setzt den neuen Inhalt dann sofort ein, statt 150 Millisekunden zu
 * warten -- beides muss zusammenpassen, sonst blitzt der Wechsel.
 */
@media (prefers-reduced-motion: reduce) {
	.sk-quiz__schritt,
	.sk-quiz__balken-fuellung {
		transition: none;
	}

	.sk-quiz__schritt.is-weg {
		opacity: 1;
		transform: none;
	}
}