/* KW Atelier – Produkt-Präsentation (kwat_showcase, Phase 4/Aufgabe 3).
   Ein Widget, zwei Darstellungen: Galerie (Ausstellungs-Rundgang) + Passepartout
   (gerahmtes Karten-Raster). Reines CSS. Tokens `--kwat-sc-*` mit Marken-Fallback;
   die per-Kategorie-Akzentfarbe (`--kwat-sc-cat-accent`) sticht durch. Ecken,
   Strich, Stempel, Medaillon = CSS + eingebettete SVG. */

.kwat-sc {
	--kwat-sc-accent: var(--kwat-color-accent);
	--kwat-sc-accent-hi: var(--kwat-color-accent-hi);
	--kwat-sc-surface: var(--kwat-color-surface);
	--kwat-sc-radius: var(--kwat-radius-lg);
}

/* Theme-Margins auf Titeln/Absätzen neutralisieren (`:where()` = Null-Spezifität,
   die eigenen `margin-block-start`-Regeln unten gewinnen) – sonst schlägt z. B. die
   Theme-`h3`-margin-bottom als zu großer Abstand Titel→Beschreibung durch. */
.kwat-sc :where(h2, h3, p, figure) {
	margin: 0;
}

/* Effektive Akzentfarbe je Kategorie (per-Kategorie-Override gewinnt). */
.kwat-sc__spread,
.kwat-sc__card {
	--sc-acc: var(--kwat-sc-cat-accent, var(--kwat-sc-accent));
	--sc-acc-hi: var(--kwat-sc-cat-accent, var(--kwat-sc-accent-hi));
}

/* ── Sektions-Kopf ───────────────────────────────────────────────────────── */
.kwat-sc__head {
	margin-block-end: clamp(28px, 4vw, 48px);
	max-inline-size: 720px;
}

.kwat-sc__head-title {
	font-family: var(--kwat-font-heading);
	font-weight: 700;
	color: #fff;
	font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
	line-height: 1.12;
	margin-block: 6px 0;
}

.kwat-sc__head-intro {
	color: var(--kwat-color-text-muted);
	font-size: var(--kwat-text-base);
	margin-block-start: 10px;
}

/* ── Foto-Block (in beiden Layouts) ──────────────────────────────────────── */
.kwat-sc__art {
	position: relative;
}

.kwat-sc__mount {
	position: relative;
	overflow: hidden;
	box-shadow: var(--kwat-shadow-lg);
	background: color-mix(in srgb, var(--kwat-color-page) 60%, var(--kwat-sc-surface));
	margin: 0;
}

/* Das Seitenverhältnis + object-fit liegen AUF dem Bild (nicht auf dem Rahmen):
   so füllt/beschneidet das Foto zuverlässig – unabhängig von Theme-`img`-Regeln
   (z. B. `img{height:auto}`). „auto" (Originalverhältnis) = natürliche Bildhöhe. */
.kwat-sc__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	object-fit: var(--kwat-img-fit, cover);
	object-position: var(--kwat-img-pos, center);
	transition: transform var(--kwat-duration-slow) var(--kwat-ease-emphasis), filter var(--kwat-duration-base) var(--kwat-ease-standard);
}

/* Fotoecken (montierter Abzug) – hugging */
.kwat-sc__foto {
	position: absolute;
	inline-size: 30px;
	block-size: 30px;
	z-index: 4;
	pointer-events: none;
	background: linear-gradient(135deg, color-mix(in srgb, var(--kwat-sc-ecken, var(--sc-acc)) 60%, 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-sc__foto--tl { inset-block-start: 0; inset-inline-start: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.kwat-sc__foto--tr { inset-block-start: 0; inset-inline-end: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.kwat-sc__foto--bl { inset-block-end: 0; inset-inline-start: 0; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.kwat-sc__foto--br { inset-block-end: 0; inset-inline-end: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* Länder-Medaillon (Emaille-Pin, getönt) */
.kwat-sc__medal {
	position: absolute;
	inset-block-start: -2px;
	inset-inline-start: -2px;
	z-index: 5;
	inline-size: clamp(56px, 7vw, 72px);
	block-size: clamp(56px, 7vw, 72px);
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--kwat-sc-medal, var(--sc-acc)) 20%, var(--kwat-sc-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-sc__medal img {
	inline-size: clamp(34px, 4.4vw, 44px);
	block-size: clamp(34px, 4.4vw, 44px);
	border-radius: 50%;
	object-fit: cover;
	filter: saturate(0.82) brightness(0.97);
	box-shadow:
		0 0 0 2px var(--kwat-sc-surface),
		0 0 0 3px color-mix(in srgb, var(--kwat-sc-medal, var(--sc-acc)) 70%, transparent),
		inset 0 -3px 5px color-mix(in srgb, #000 45%, transparent),
		0 4px 10px color-mix(in srgb, #000 45%, transparent);
}

/* Wachsstempel */
.kwat-sc__stamp {
	position: absolute;
	inset-block-end: -12px;
	inset-inline-start: -12px;
	z-index: 6;
	inline-size: 84px;
	block-size: 84px;
	display: grid;
	place-items: center;
	text-align: center;
	transform: rotate(-8deg);
	color: var(--kwat-sc-stamp, var(--sc-acc-hi));
}

.kwat-sc__stamp svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0.85; }

.kwat-sc__stamp-txt {
	position: relative;
	font-family: var(--kwat-font-heading);
	font-weight: 700;
	font-size: 11px;
	line-height: 1.02;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	max-inline-size: 74%;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Zicklinde-Gast */
.kwat-sc__mascot {
	position: absolute;
	inset-block-end: -4px;
	inset-inline-end: -6px;
	z-index: 6;
	inline-size: clamp(88px, 12vw, 118px);
	pointer-events: none;
	filter: drop-shadow(0 12px 20px color-mix(in srgb, #000 55%, transparent));
}

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

/* ── GALERIE ─────────────────────────────────────────────────────────────── */
.kwat-sc__gallery {
	display: flex;
	flex-direction: column;
	gap: clamp(46px, 7vw, 96px);
}

.kwat-sc__spread {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(26px, 4vw, 60px);
	align-items: center;
}

.kwat-sc__spread:nth-child(even) .kwat-sc__art { order: 2; }

.kwat-sc--gallery .kwat-sc__mount {
	border-radius: 9px;
}

.kwat-sc--gallery .kwat-sc__img {
	aspect-ratio: var(--kwat-sc-ratio, 5 / 4);
}

.kwat-sc__txt { position: relative; min-inline-size: 0; }

.kwat-sc__index {
	font-family: var(--kwat-font-heading);
	font-weight: 700;
	font-size: clamp(2.4rem, 1.4rem + 4vw, 4.2rem);
	line-height: 0.8;
	color: color-mix(in srgb, var(--sc-acc) 32%, transparent);
	margin-block-end: 10px;
}

.kwat-sc__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.kwat-sc__flag-badge {
	display: inline-flex;
	inline-size: 24px;
	block-size: 24px;
	border-radius: 50%;
	overflow: hidden;
	flex: none;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc-acc) 55%, transparent);
}

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

.kwat-sc__title {
	font-family: var(--kwat-font-heading);
	font-weight: 700;
	color: #fff;
	font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.9rem);
	line-height: 1.12;
}

.kwat-sc__accent { color: var(--sc-acc-hi); }

.kwat-sc__brush {
	display: block;
	inline-size: min(320px, 86%);
	block-size: 15px;
	color: var(--kwat-sc-brush, var(--sc-acc));
	margin-block-start: 12px;
	-webkit-mask: linear-gradient(90deg, #000 62%, transparent);
	mask: linear-gradient(90deg, #000 62%, transparent);
}

.kwat-sc__brush svg { inline-size: 100%; block-size: 100%; display: block; }

.kwat-sc__lead {
	color: var(--kwat-color-text-muted);
	font-size: var(--kwat-text-base);
	margin-block-start: 16px;
	max-inline-size: 46ch;
}

.kwat-sc__traits {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin-block-start: 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kwat-sc-brush, var(--sc-acc-hi));
	text-shadow: 0 1px 0 color-mix(in srgb, #000 45%, transparent);
}

.kwat-sc__traits::before {
	content: "";
	inline-size: 26px;
	block-size: 1px;
	flex: none;
	background: linear-gradient(90deg, var(--kwat-sc-brush, var(--sc-acc)), transparent);
}

.kwat-sc__dot { color: color-mix(in srgb, var(--kwat-color-text-muted) 75%, transparent); font-weight: 400; }

.kwat-sc__cta { margin-block-start: 24px; }

@media (max-width: 820px) {
	.kwat-sc__spread { grid-template-columns: 1fr; gap: 26px; }
	.kwat-sc__spread:nth-child(even) .kwat-sc__art { order: 0; }
}

/* ── PASSEPARTOUT ────────────────────────────────────────────────────────── */
.kwat-sc__frame {
	position: relative;
	padding: clamp(20px, 3vw, 40px);
	border-radius: calc(var(--kwat-sc-radius) + 6px);
	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 7px color-mix(in srgb, var(--kwat-color-page) 70%, transparent),
		inset 0 0 0 8px color-mix(in srgb, var(--kwat-sc-accent) 26%, transparent),
		var(--kwat-shadow-lg);
}

.kwat-sc__ornament {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: clamp(58px, 7vw, 82px);
	block-size: clamp(58px, 7vw, 82px);
	color: var(--kwat-sc-ornament, var(--kwat-sc-accent));
	pointer-events: none;
}

.kwat-sc__ornament svg { inline-size: 100%; block-size: 100%; display: block; }

.kwat-sc__grid {
	display: grid;
	grid-template-columns: repeat(var(--kwat-sc-cols, 3), minmax(0, 1fr));
	gap: 20px;
	margin-block-start: 8px;
}

.kwat-sc__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--kwat-sc-surface);
	border: 1px solid var(--kwat-color-border);
	border-radius: var(--kwat-sc-radius);
	box-shadow: var(--kwat-shadow-lg);
}

.kwat-sc--passepartout .kwat-sc__mount {
	border-radius: var(--kwat-sc-radius) var(--kwat-sc-radius) 0 0;
}

.kwat-sc--passepartout .kwat-sc__img {
	aspect-ratio: var(--kwat-sc-ratio, 4 / 3);
}

.kwat-sc__cardbody {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.kwat-sc__cardtitle {
	font-family: var(--kwat-font-heading);
	font-weight: 700;
	color: #fff;
	font-size: 1.25rem;
	line-height: 1.15;
}

.kwat-sc__cardtext { color: var(--kwat-color-text-muted); font-size: var(--kwat-text-sm); }

.kwat-sc__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 4px; }

.kwat-sc__chip {
	display: inline-flex;
	align-items: center;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 4px 11px;
	border-radius: 999px;
	color: var(--sc-acc-hi);
	background: color-mix(in srgb, var(--sc-acc) 16%, var(--kwat-color-page));
	border: 1px solid color-mix(in srgb, var(--sc-acc) 34%, transparent);
}

.kwat-sc--passepartout .kwat-sc__cta { margin-block-start: 12px; align-self: flex-start; }

@media (max-width: 900px) { .kwat-sc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kwat-sc__grid { grid-template-columns: 1fr; } }

/* ── Scheinwerfer (Hover/Fokus) ──────────────────────────────────────────── */
@media (hover: hover) {
	.kwat-sc--spotlight .kwat-sc__spread:hover .kwat-sc__art,
	.kwat-sc--spotlight .kwat-sc__card:hover .kwat-sc__art {
		transform: translateY(-4px);
		transition: transform var(--kwat-duration-slow) var(--kwat-ease-emphasis);
	}

	.kwat-sc--spotlight .kwat-sc__spread:hover .kwat-sc__img,
	.kwat-sc--spotlight .kwat-sc__card:hover .kwat-sc__img {
		filter: brightness(1.05) saturate(1.05);
	}
}

.kwat-sc--spotlight .kwat-sc__spread:hover .kwat-sc__mount,
.kwat-sc--spotlight .kwat-sc__spread:focus-within .kwat-sc__mount,
.kwat-sc--spotlight .kwat-sc__card:hover .kwat-sc__mount,
.kwat-sc--spotlight .kwat-sc__card:focus-within .kwat-sc__mount {
	box-shadow:
		var(--kwat-shadow-lg),
		0 0 0 1px color-mix(in srgb, var(--sc-acc) 45%, transparent),
		0 22px 60px color-mix(in srgb, var(--sc-acc) 20%, transparent);
}

/* ── Einblenden beim Scrollen (scroll-driven, JS-frei) ───────────────────── */
@media (prefers-reduced-motion: no-preference) {
	.kwat-sc--reveal .kwat-sc__spread,
	.kwat-sc--reveal .kwat-sc__card {
		animation-name: kwat-sc-reveal;
		animation-fill-mode: both;
		animation-timing-function: linear;
		animation-timeline: view();
		animation-range: entry 0% entry 42%;
	}

	@keyframes kwat-sc-reveal {
		from { opacity: 0; transform: translateY(24px); }
		to   { opacity: 1; transform: none; }
	}
}

/* ── Windows-Kontrastmodus ───────────────────────────────────────────────── */
@media (forced-colors: active) {
	.kwat-sc__mount,
	.kwat-sc__card,
	.kwat-sc__medal { border: 1px solid CanvasText; }

	.kwat-sc__foto,
	.kwat-sc__brush svg,
	.kwat-sc__stamp svg,
	.kwat-sc__ornament svg { forced-color-adjust: none; }
}