/* KW Atelier – Listen-Widget (kwat_list, Phase 4/Aufgabe 4). Ein Datensatz, vier
 * Darstellungen aus EINEM Markup: Häkchen-Liste, Bühnen-Raster, Ablauf/Schritte,
 * Galerie mit Bildwechsel. Jeder Stil frei gestaltbar: Rahmen (Karten bzw.
 * Passepartout) und Glanz (leuchtende Haken/Medaillons/Marker) als Modifier.
 * Reines CSS – nur die Galerie nutzt listing.js. Alle Farben aus Tokens; lokale
 * --kwat-list-* mit Marken-Fallback, vom Stil-Tab überschreibbar. Kein !important.
 *
 * Hover transformiert nie das Item selbst (nur Kind-Elemente/Schatten) – sonst
 * kollidiert es mit dem Reveal, das das Item-transform belegt.
 */

/* Spalten-Obergrenze als typisierte Ganzzahl (Default 99 = „unbegrenzt", die
   Mindestbreite regelt dann allein). „Automatisch" liefert keinen Integer und
   fällt sauber auf diesen Default zurück. */
@property --kwat-list-cap {
	syntax: "<integer>";
	inherits: true;
	initial-value: 99;
}

.kwat-list {
	--kwat-list-accent: var(--kwat-color-accent);
	--kwat-list-accent-hi: var(--kwat-color-accent-hi);
	--kwat-list-surface: var(--kwat-color-surface);
	--kwat-list-text: var(--kwat-color-text);
	--kwat-list-gap: var(--kwat-space-4);
	--kwat-list-radius: var(--kwat-radius-md);
	--kwat-list-min: 16rem;

	color: var(--kwat-list-text);
	font-family: var(--kwat-font-body);
	font-size: var(--kwat-text-base);
	line-height: 1.5;

	/* Gleichmäßiger Abstand zwischen Sektions-Überschrift und Liste (wie .kwat-faq). */
	display: flex;
	flex-direction: column;
	gap: var(--kwat-space-6);
}

/* Theme-Margins neutralisieren (Null-Spezifität; eigene Regeln gewinnen). */
.kwat-list :where(h2, h3, h4, p, figure, ul, ol) {
	margin: 0;
}

/* ── Raster (Häkchen + Bühnen-Raster) – Spaltenzahl als Obergrenze ──────────── */
.kwat-list--checks .kwat-list__items,
.kwat-list--feature .kwat-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--kwat-list-gap);
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			max(
				var(--kwat-list-min),
				calc((100% - (var(--kwat-list-cap) - 1) * var(--kwat-list-gap)) / var(--kwat-list-cap))
			),
			1fr
		)
	);
}

.kwat-list__item {
	min-inline-size: 0;
}

.kwat-list__body {
	display: flex;
	flex-direction: column;
	gap: var(--kwat-space-1);
	min-inline-size: 0;
}

.kwat-list__title {
	font-family: var(--kwat-font-heading);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	text-wrap: balance;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.kwat-list__desc {
	color: var(--kwat-color-text-muted);
	font-size: var(--kwat-text-sm);
	line-height: 1.5;
	text-wrap: pretty;
	overflow-wrap: break-word;
}

.kwat-list__glyph {
	display: block;
}

/* ══ Stil: Häkchen-Liste (schlicht, Gold-Haken) ══════════════════════════════ */
.kwat-list--checks {
	--kwat-list-min: 18rem;
}

.kwat-list--checks .kwat-list__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--kwat-space-3);
	padding-block: var(--kwat-space-2);
}

.kwat-list--checks .kwat-list__mark {
	flex: none;
	inline-size: 1.7rem;
	block-size: 1.7rem;
	margin-block-start: 0.12em;
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	color: var(--kwat-list-accent);
	background: color-mix(in srgb, var(--kwat-list-accent) 15%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kwat-list-accent) 34%, transparent);
	transition: transform var(--kwat-duration-base) var(--kwat-ease-emphasis),
		background-color var(--kwat-duration-base) var(--kwat-ease-standard);
}

.kwat-list--checks .kwat-list__mark .kwat-list__glyph {
	inline-size: 0.95rem;
	block-size: 0.95rem;
}

.kwat-list--checks .kwat-list__title {
	font-size: var(--kwat-text-base);
}

/* ══ Stil: Bühnen-Raster (zentriertes Medaillon-Symbol + Gold-Unterstrich) ═══ */
.kwat-list--feature {
	--kwat-list-min: 14rem;
	--kwat-list-gap: var(--kwat-space-6);
}

.kwat-list--feature .kwat-list__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--kwat-space-4);
	padding: var(--kwat-space-2);
}

.kwat-list--feature .kwat-list__plaque {
	position: relative;
	flex: none;
	inline-size: 4.4rem;
	block-size: 4.4rem;
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	color: var(--kwat-list-accent);
	background: color-mix(in srgb, var(--kwat-list-accent) 14%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kwat-list-accent) 24%, transparent);
	transition: transform var(--kwat-duration-base) var(--kwat-ease-standard),
		background-color var(--kwat-duration-base) var(--kwat-ease-standard);
}

.kwat-list--feature .kwat-list__plaque svg {
	inline-size: 2.1rem;
	block-size: 2.1rem;
	display: block;
}

/* dezenter Ring, blendet beim Hover ein */
.kwat-list--feature .kwat-list__plaque::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 1px dashed color-mix(in srgb, var(--kwat-list-accent) 30%, transparent);
	opacity: 0;
	transform: scale(0.9);
	transition: opacity var(--kwat-duration-base) var(--kwat-ease-standard),
		transform var(--kwat-duration-base) var(--kwat-ease-standard);
}

.kwat-list--feature .kwat-list__body {
	align-items: center;
}

.kwat-list--feature .kwat-list__title {
	font-size: var(--kwat-text-lg);
}

/* Gold-Unterstrich (skaliert per transform – kein Layout-Reflow) */
.kwat-list--feature .kwat-list__title::after {
	content: "";
	display: block;
	inline-size: 3.4rem;
	block-size: 2px;
	margin: var(--kwat-space-2) auto 0;
	border-radius: 2px;
	transform: scaleX(0.58);
	transform-origin: center;
	background: linear-gradient(
		90deg,
		var(--kwat-list-accent),
		color-mix(in srgb, var(--kwat-list-accent) 30%, transparent)
	);
	transition: transform var(--kwat-duration-base) var(--kwat-ease-standard);
}

/* ══ Stil: Ablauf / Schritte (Marker + Verbindungslinie) ═════════════════════ */
.kwat-list--steps {
	--kwat-list-marker: 2.7rem;
}

.kwat-list--steps .kwat-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kwat-list--steps .kwat-list__item {
	position: relative;
	display: grid;
	grid-template-columns: var(--kwat-list-marker) 1fr;
	column-gap: var(--kwat-space-5);
	align-items: start;
	padding-block-end: var(--kwat-space-6);
}

.kwat-list--steps .kwat-list__item:last-child {
	padding-block-end: 0;
}

/* durchgehende Verbindungslinie von Marker zu Marker */
.kwat-list--steps .kwat-list__item:not(:last-child)::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(var(--kwat-list-marker) / 2 - 1px);
	inset-block-start: var(--kwat-list-marker);
	inset-block-end: 0;
	inline-size: 2px;
	background: color-mix(in srgb, var(--kwat-list-accent) 30%, transparent);
}

.kwat-list--steps .kwat-list__marker {
	position: relative;
	z-index: 1;
	inline-size: var(--kwat-list-marker);
	block-size: var(--kwat-list-marker);
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	background: radial-gradient(
		circle at 50% 30%,
		color-mix(in srgb, var(--kwat-list-accent) 22%, var(--kwat-list-surface)),
		var(--kwat-color-page) 92%
	);
	box-shadow: inset 0 1px 0 color-mix(in srgb, #ffe9b8 60%, transparent),
		inset 0 0 0 1.5px color-mix(in srgb, var(--kwat-list-accent) 42%, transparent),
		var(--kwat-shadow-sm);
	color: #fff;
	font-family: var(--kwat-font-heading);
	font-weight: 700;
	font-size: var(--kwat-text-lg);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.kwat-list--steps .kwat-list__marker .kwat-list__glyph {
	inline-size: 1.4rem;
	block-size: 1.4rem;
	color: var(--kwat-list-accent-hi);
}

.kwat-list--steps .kwat-list__body {
	padding-block-start: calc((var(--kwat-list-marker) - 1.5em) / 2);
}

.kwat-list--steps .kwat-list__title {
	font-size: var(--kwat-text-lg);
}

/* ══ Modifier: Rahmen (Karten) für Häkchen / Bühnen-Raster / Ablauf ══════════ */
.kwat-list--checks.kwat-list--frame .kwat-list__item {
	padding: var(--kwat-space-4);
	background-color: var(--kwat-list-surface);
	border: 1px solid var(--kwat-color-border);
	border-radius: var(--kwat-list-radius);
	box-shadow: var(--kwat-shadow-sm);
}

.kwat-list--feature.kwat-list--frame .kwat-list__item {
	background: var(--kwat-list-surface);
	border: 1px solid var(--kwat-color-border);
	border-radius: var(--kwat-radius-lg);
	padding: var(--kwat-space-6) var(--kwat-space-5);
	box-shadow: var(--kwat-shadow-sm);
}

.kwat-list--steps.kwat-list--frame .kwat-list__body {
	background: var(--kwat-list-surface);
	border: 1px solid var(--kwat-color-border);
	border-radius: var(--kwat-list-radius);
	padding: var(--kwat-space-4) var(--kwat-space-5);
	box-shadow: var(--kwat-shadow-sm);
}

.kwat-list--frame.kwat-list--glow .kwat-list__item,
.kwat-list--steps.kwat-list--frame.kwat-list--glow .kwat-list__body {
	border-color: color-mix(in srgb, var(--kwat-list-accent) 28%, var(--kwat-color-border));
}

/* ══ Modifier: Glanz (leuchtende Haken / Medaillons / Marker) ════════════════ */
.kwat-list--checks.kwat-list--glow .kwat-list__mark {
	color: var(--kwat-list-accent-hi);
	background: radial-gradient(
		circle at 50% 30%,
		color-mix(in srgb, var(--kwat-list-accent) 45%, var(--kwat-list-surface)),
		color-mix(in srgb, var(--kwat-list-accent) 16%, transparent)
	);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kwat-list-accent) 55%, transparent),
		0 0 14px color-mix(in srgb, var(--kwat-list-accent) 32%, transparent);
}

.kwat-list--feature.kwat-list--glow .kwat-list__plaque {
	color: var(--kwat-list-accent-hi);
	background: radial-gradient(
		circle at 50% 30%,
		color-mix(in srgb, var(--kwat-list-accent) 42%, var(--kwat-list-surface)),
		color-mix(in srgb, var(--kwat-list-accent) 14%, transparent)
	);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kwat-list-accent) 55%, transparent),
		0 0 18px color-mix(in srgb, var(--kwat-list-accent) 30%, transparent);
}

.kwat-list--steps.kwat-list--glow .kwat-list__marker {
	color: var(--kwat-list-accent-hi);
	background: radial-gradient(
		circle at 50% 30%,
		color-mix(in srgb, var(--kwat-list-accent) 45%, var(--kwat-list-surface)),
		color-mix(in srgb, var(--kwat-list-accent) 16%, transparent)
	);
	box-shadow: inset 0 1px 0 color-mix(in srgb, #ffe9b8 60%, transparent),
		inset 0 0 0 1.5px color-mix(in srgb, var(--kwat-list-accent) 60%, transparent),
		0 0 16px color-mix(in srgb, var(--kwat-list-accent) 34%, transparent);
}

/* ══ Modifier: Scheinwerfer (Hover-Glanz) ════════════════════════════════════ */

/* Häkchen-Sweep – gehört zum Scheinwerfer, nicht zum Grundstil. Die Verlaufsfläche
   ist 220 % breit und steht in Ruhe bei -100 % vollständig RECHTS außerhalb des
   Eintrags; erst der Hover schiebt sie ganz nach links durch. (Bis 2026-07-28 hing
   der Verlauf am Grundstil und stand bei 160 % – dort ragen die linken 28 % herein,
   also ein stehender Schimmer mit harter Kante direkt am Häkchen.) */
.kwat-list--spotlight.kwat-list--checks .kwat-list__item {
	background-image: linear-gradient(
		100deg,
		transparent 0%,
		color-mix(in srgb, var(--kwat-list-accent) 9%, transparent) 50%,
		transparent 100%
	);
	background-size: 220% 100%;
	background-position: -100% 0;
	background-repeat: no-repeat;
	transition: background-position 0.6s var(--kwat-ease-standard);
}

/* Ohne Rahmen hat der Eintrag kein seitliches Polster – der Sweep liefe sonst hart
   am Häkchen aus. Das Negativ-Margin holt die Fläche wieder heraus, damit der Text
   bündig zu Überschrift und Nachbar-Widgets stehen bleibt. */
.kwat-list--spotlight.kwat-list--checks:not(.kwat-list--frame) .kwat-list__item {
	padding-inline: var(--kwat-space-2);
	margin-inline: calc(var(--kwat-space-2) * -1);
	border-radius: var(--kwat-list-radius);
}

@media (hover: hover) {
	.kwat-list--spotlight.kwat-list--checks .kwat-list__item:hover {
		background-position: 200% 0;
	}
	.kwat-list--spotlight.kwat-list--checks .kwat-list__item:hover .kwat-list__mark {
		transform: scale(1.12);
	}
	.kwat-list--spotlight.kwat-list--feature .kwat-list__item:hover .kwat-list__plaque {
		transform: translateY(-4px) scale(1.05);
		background: color-mix(in srgb, var(--kwat-list-accent) 20%, transparent);
	}
	.kwat-list--spotlight.kwat-list--feature .kwat-list__item:hover .kwat-list__plaque::after {
		opacity: 1;
		transform: scale(1);
	}
	.kwat-list--spotlight.kwat-list--feature .kwat-list__item:hover .kwat-list__title::after {
		transform: scaleX(1);
	}
}

/* ══ Stil: Galerie mit Bildwechsel ══════════════════════════════════════════ */
.kwat-list__gallery {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(22px, 3vw, 44px);
	align-items: start;
}

.kwat-list__gallery-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.kwat-list__gallery-item {
	inline-size: 100%;
	text-align: start;
	font: inherit;
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: var(--kwat-list-radius);
	display: flex;
	align-items: center;
	gap: var(--kwat-space-3);
	padding: var(--kwat-space-3) var(--kwat-space-4);
	color: var(--kwat-color-text-muted);
	position: relative;
	transition: background-color var(--kwat-duration-base) var(--kwat-ease-standard),
		color var(--kwat-duration-base) var(--kwat-ease-standard);
}

.kwat-list__gallery-item::before {
	content: "";
	position: absolute;
	inset-block: 10px;
	inset-inline-start: 0;
	inline-size: 3px;
	border-radius: 3px;
	background: var(--kwat-list-accent);
	transform: scaleY(0);
	transform-origin: center;
	transition: transform var(--kwat-duration-base) var(--kwat-ease-emphasis);
}

.kwat-list__gallery-label {
	min-inline-size: 0;
}

.kwat-list__gallery-eyebrow {
	display: block;
	font-size: var(--kwat-text-xs);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--kwat-color-text-muted) 85%, transparent);
}

.kwat-list__gallery-title {
	display: block;
	font-family: var(--kwat-font-heading);
	font-weight: 700;
	font-size: var(--kwat-text-lg);
	color: var(--kwat-list-text);
	line-height: 1.2;
	transition: color var(--kwat-duration-base) var(--kwat-ease-standard);
}

.kwat-list__gallery-flag {
	margin-inline-start: auto;
	flex: none;
	inline-size: 26px;
	block-size: 26px;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0.55;
	transition: opacity var(--kwat-duration-base) var(--kwat-ease-standard);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--kwat-list-accent) 45%, transparent);
}

.kwat-list__gallery-flag img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	filter: saturate(0.82) brightness(0.97);
}

.kwat-list__gallery-item:hover,
.kwat-list__gallery-item:focus-visible {
	background: color-mix(in srgb, var(--kwat-list-accent) 8%, transparent);
	color: var(--kwat-list-text);
	outline: none;
}

.kwat-list__gallery-item.is-active {
	background: color-mix(in srgb, var(--kwat-list-accent) 12%, transparent);
}

.kwat-list__gallery-item.is-active::before {
	transform: scaleY(1);
}

.kwat-list__gallery-item.is-active .kwat-list__gallery-title {
	color: #fff;
}

.kwat-list__gallery-item.is-active .kwat-list__gallery-flag {
	opacity: 1;
}

.kwat-list__gallery-item:focus-visible {
	outline: var(--kwat-focus-width) solid var(--kwat-color-focus);
	outline-offset: -3px;
}

.kwat-list__stagewrap {
	position: sticky;
	top: 88px;
}

.kwat-list__stage {
	position: relative;
	aspect-ratio: 5 / 4;
	border-radius: var(--kwat-list-radius);
	overflow: hidden;
	background: color-mix(in srgb, var(--kwat-color-page) 60%, var(--kwat-list-surface));
	box-shadow: var(--kwat-shadow-lg);
}

.kwat-list__frameinner {
	position: absolute;
	inset: 0;
	border-radius: var(--kwat-list-radius);
	overflow: hidden;
}

.kwat-list__img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity var(--kwat-duration-slow) var(--kwat-ease-standard),
		transform var(--kwat-duration-slow) var(--kwat-ease-emphasis);
}

.kwat-list__img.is-active {
	opacity: 1;
	transform: none;
}

/* Bild füllt den Rahmen zuverlässig – höhere Spezifität als Theme-/Elementor-Regeln
   wie `.elementor img { height: auto }` (die sonst nur die Höhe kapern, object-fit
   & Position aber greifen lassen → Bild füllt nicht). Kein !important nötig. */
.kwat-list .kwat-list__frameinner .kwat-list__img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
}

/* Länder-Medaillon (Emaille-Pin) – nur sichtbar, wenn der aktive Eintrag eine Flagge hat */
.kwat-list__medal {
	position: absolute;
	inset-block-start: -6px;
	inset-inline-start: -6px;
	z-index: 5;
	inline-size: clamp(56px, 7vw, 70px);
	block-size: clamp(56px, 7vw, 70px);
	display: none;
	place-items: center;
	border-radius: 14px;
	background: radial-gradient(
		circle at 50% 30%,
		color-mix(in srgb, var(--kwat-list-accent) 20%, var(--kwat-list-surface)),
		var(--kwat-color-page) 88%
	);
	box-shadow: inset 0 1px 0 #ffe9b8,
		inset 0 -3px 8px color-mix(in srgb, #000 55%, transparent),
		var(--kwat-shadow-md);
}

.kwat-list__medal:has(.kwat-list__medal-flag.is-active) {
	display: grid;
}

.kwat-list__medal-flag {
	grid-area: 1 / 1;
	display: none;
}

.kwat-list__medal-flag.is-active {
	display: block;
}

.kwat-list__medal-flag img {
	inline-size: clamp(32px, 4.4vw, 42px);
	block-size: clamp(32px, 4.4vw, 42px);
	border-radius: 50%;
	object-fit: cover;
	filter: saturate(0.82) brightness(0.97);
	box-shadow: 0 0 0 2px var(--kwat-list-surface),
		0 0 0 3px color-mix(in srgb, var(--kwat-list-accent) 70%, transparent),
		0 4px 10px color-mix(in srgb, #000 45%, transparent);
}

.kwat-list__cap {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 4;
	padding: 64px 20px 16px;
	pointer-events: none;
	/* Kräftiger, hoher Verlauf + Textschatten → Untertitel bleibt auf hellen wie
	   dunklen Fotos gut lesbar (WCAG-Kontrast unabhängig vom Bildinhalt). */
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--kwat-color-page) 97%, transparent) 0%,
		color-mix(in srgb, var(--kwat-color-page) 72%, transparent) 42%,
		transparent 100%
	);
	color: #fff;
	font-family: var(--kwat-font-heading);
	font-weight: 700;
	font-size: var(--kwat-text-lg);
	text-shadow: 0 1px 8px color-mix(in srgb, #000 70%, transparent);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--kwat-duration-base) var(--kwat-ease-standard),
		transform var(--kwat-duration-base) var(--kwat-ease-standard);
}

.kwat-list__cap.is-shown {
	opacity: 1;
	transform: none;
}

.kwat-list__cap-eyebrow {
	display: block;
	font-family: var(--kwat-font-body);
	font-weight: 800;
	font-size: var(--kwat-text-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kwat-list-accent-hi);
	margin-block-end: 3px;
}

/* Zicklinde lugt aus der unteren rechten Bild-Ecke (frisst keinen Platz) */
.kwat-list__mascot {
	position: absolute;
	z-index: 6;
	inset-inline-end: -6px;
	inset-block-end: -10px;
	inline-size: clamp(78px, 9vw, 116px);
	pointer-events: none;
	filter: drop-shadow(0 12px 20px color-mix(in srgb, #000 55%, transparent));
}

.kwat-list__mascot .kwat-list__mascot-img,
.kwat-list__mascot img {
	inline-size: 100%;
	block-size: auto;
}

/* Galerie-Rahmen (Passepartout + Fotoecken) */
.kwat-list--frame .kwat-list__stage {
	padding: 10px;
	border-radius: calc(var(--kwat-list-radius) + 5px);
	background: linear-gradient(180deg, color-mix(in srgb, var(--kwat-color-bg) 88%, #000), var(--kwat-color-page));
	box-shadow: inset 0 0 0 1px var(--kwat-color-border),
		inset 0 0 0 8px color-mix(in srgb, var(--kwat-color-page) 70%, transparent),
		inset 0 0 0 9px color-mix(in srgb, var(--kwat-list-accent) 26%, transparent),
		var(--kwat-shadow-lg);
}

.kwat-list--frame .kwat-list__frameinner {
	inset: 10px;
	border-radius: var(--kwat-radius-sm);
}

.kwat-list--frame .kwat-list__medal {
	inset-block-start: 6px;
	inset-inline-start: 6px;
}

.kwat-list--frame .kwat-list__cap {
	inset-inline: 10px;
	inset-block-end: 10px;
}

.kwat-list__foto {
	position: absolute;
	z-index: 3;
	inline-size: 26px;
	block-size: 26px;
	pointer-events: none;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--kwat-list-accent) 62%, var(--kwat-color-page)),
		color-mix(in srgb, var(--kwat-color-page) 84%, transparent)
	);
	box-shadow: 0 2px 5px color-mix(in srgb, #000 45%, transparent);
}

.kwat-list__foto--tl { inset-block-start: 0; inset-inline-start: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.kwat-list__foto--tr { inset-block-start: 0; inset-inline-end: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.kwat-list__foto--bl { inset-block-end: 0; inset-inline-start: 0; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.kwat-list__foto--br { inset-block-end: 0; inset-inline-end: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

@media (hover: hover) {
	.kwat-list--spotlight .kwat-list__gallery:hover .kwat-list__stage,
	.kwat-list--spotlight .kwat-list__gallery:focus-within .kwat-list__stage {
		box-shadow: var(--kwat-shadow-lg),
			0 0 0 1px color-mix(in srgb, var(--kwat-list-accent) 40%, transparent),
			0 22px 60px color-mix(in srgb, var(--kwat-list-accent) 18%, transparent);
	}
}

@media (max-width: 820px) {
	.kwat-list__gallery {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.kwat-list__stagewrap {
		position: relative;
		top: auto;
		order: -1;
	}
	.kwat-list__stage {
		aspect-ratio: 16 / 10;
	}
	.kwat-list__cap {
		opacity: 1;
		transform: none;
	}
	.kwat-list__mascot {
		inline-size: 84px;
	}
}

/* ── Fokus sichtbar (Sicherheit für künftige Links/Buttons) ─────────────────── */
.kwat-list :where(a, button):focus-visible {
	outline: var(--kwat-focus-width) solid var(--kwat-color-focus);
	outline-offset: var(--kwat-focus-offset);
}

/* ── Scroll-Reveal: View Timeline (CSS, kein JS) ─────────────────────────────── */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.kwat-list--reveal .kwat-list__item {
			animation: kwat-list-rise linear both;
			animation-timeline: view();
			animation-range: entry 5% entry 40%;
		}
		.kwat-list--reveal .kwat-list__gallery {
			animation: kwat-list-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 42%;
		}
	}
}

@keyframes kwat-list-rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ── Windows-Kontrastmodus ──────────────────────────────────────────────────── */
@media (forced-colors: active) {
	.kwat-list--frame .kwat-list__item,
	.kwat-list--steps.kwat-list--frame .kwat-list__body,
	.kwat-list__stage,
	.kwat-list__medal,
	.kwat-list--feature .kwat-list__plaque,
	.kwat-list--checks .kwat-list__mark,
	.kwat-list--steps .kwat-list__marker {
		border: 1px solid CanvasText;
	}
	.kwat-list__foto {
		forced-color-adjust: none;
	}
	.kwat-list__gallery-item.is-active {
		outline: 2px solid Highlight;
	}
}

/* ── Bewegung reduzieren (BFSG) ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.kwat-list--reveal .kwat-list__item,
	.kwat-list--reveal .kwat-list__gallery {
		animation: none;
		opacity: 1;
		transform: none;
	}
	.kwat-list__img {
		transform: none;
	}
	.kwat-list__item,
	.kwat-list__mark,
	.kwat-list__plaque,
	.kwat-list__title::after,
	.kwat-list__gallery-item,
	.kwat-list__img,
	.kwat-list__cap {
		transition: none;
	}
}