/* ═══════════════════════════════════════════════════════════════════════════
   KW Atelier · Widget „Highlights der Woche" (week-highlight.css, Phase 6/2a)
   Getränk der Woche als gerahmtes Atelier-Exponat: Passepartout + Gold-Eckwinkel
   (wie das Posten-Detail), Messing-Kabinettschild, Zicklinde als Kuratorin. Ein
   Posten → Solo, zwei → Doppel-Hängung. Hängt an menu-shared (Kennzeichnung).
   Reines CSS – Reveal (View Timeline) + Firnis (Hover) JS-frei.

   Passepartout- & Messing-Töne sind bewusst marken-fremde LOKALE Tokens (warmer
   Galerie-Look wie die Detail-Staffelei), sonst durchgehend --kwat-*.
   ═══════════════════════════════════════════════════════════════════════════ */

.kwat-wh {
	--kwat-wh-slate: #22282a;   /* dunkler Schiefer (Wand), wie die Wochen-Tafel */
	--kwat-wh-mat: #e8e2d4;     /* Passepartout-Karton, warm-neutral */
	--kwat-wh-mat-edge: #cdc4ae;
	--kwat-wh-mat-ink: #2a2620;
	--kwat-wh-brass: #3a3327;   /* Kabinettschild (graviertes Messing) */
	--kwat-wh-brass-hi: #e7cf95;

	position: relative;
	padding: clamp(1.5rem, 1.1rem + 2.2vw, 2.85rem);
	border-radius: var(--kwat-radius-lg);
	overflow: hidden;
	background:
		radial-gradient(120% 100% at 50% -10%, color-mix(in srgb, #2f3a38 80%, transparent), var(--kwat-wh-slate) 70%),
		var(--kwat-wh-slate);
	box-shadow:
		inset 0 0 0 2px color-mix(in srgb, var(--kwat-color-accent) 34%, transparent),
		inset 0 0 0 10px color-mix(in srgb, #000 22%, transparent),
		var(--kwat-shadow-lg);
}

/* Feiner Wand-/Kreidestaub (wie die Wochen-Tafel). */
.kwat-wh::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.5;
	mix-blend-mode: soft-light;
	background:
		radial-gradient(60% 45% at 18% 10%, rgba(255, 255, 255, 0.06), transparent 60%),
		radial-gradient(50% 40% at 88% 92%, rgba(255, 255, 255, 0.05), transparent 60%);
}

/* ── Kopf ─────────────────────────────────────────────────────────────────── */
.kwat-wh__head {
	position: relative;
	text-align: center;
	padding-block-end: var(--kwat-space-4);
	margin-block-end: var(--kwat-space-1);
	border-block-end: 2px dashed color-mix(in srgb, var(--kwat-color-accent) 34%, transparent);
}

.kwat-wh__eyebrow {
	font-family: var(--kwat-font-heading);
	font-style: italic;
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
	color: var(--kwat-color-accent-hi);
}

.kwat-wh__theme {
	font-family: var(--kwat-font-heading);
	font-weight: 700;
	line-height: 1.12;
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
	color: #fff;
	margin: 0.1rem 0 var(--kwat-space-2);
	text-shadow: 0 2px 18px color-mix(in srgb, #000 40%, transparent);
}

.kwat-wh__valid {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--kwat-text-xs);
	color: color-mix(in srgb, var(--kwat-color-text-muted) 92%, #fff);
}

.kwat-wh__valid-ico {
	width: 1em;
	height: 1em;
	flex: none;
	color: var(--kwat-color-accent);
}

/* ── Bühne (Layout wird je Solo/Paar unten gesetzt) ───────────────────────── */
.kwat-wh__stage {
	position: relative;
	margin-block-start: var(--kwat-space-5);
}

.kwat-wh__exhibit {
	margin: 0;
}

/* ── Exponat-Rahmen: Passepartout + Gold-Eckwinkel (umschließt nur das Bild) ── */
.kwat-wh__frame {
	position: relative;
	padding: clamp(0.75rem, 0.6rem + 0.5vw, 1.1rem);
	border-radius: 8px;
	isolation: isolate;
	background: linear-gradient(158deg, var(--kwat-wh-mat), var(--kwat-wh-mat-edge));
	box-shadow:
		0 2px 0 color-mix(in srgb, #000 30%, transparent),
		var(--kwat-shadow-lg),
		inset 0 0 0 1px color-mix(in srgb, var(--kwat-wh-mat-ink) 22%, transparent);
}

.kwat-wh__mat {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--kwat-wh-mat-ink) 32%, transparent),
		inset 0 3px 10px color-mix(in srgb, var(--kwat-wh-mat-ink) 45%, transparent);
}

.kwat-wh__art {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Gold-Eckwinkel (Signatur, wie das Posten-Detail). */
.kwat-wh__corner {
	position: absolute;
	width: 1.6rem;
	height: 1.6rem;
	border: 2px solid var(--kwat-color-accent);
	z-index: 3;
	pointer-events: none;
}

.kwat-wh__corner--tl {
	top: 0.5rem;
	inset-inline-start: 0.5rem;
	border-inline-end: 0;
	border-block-end: 0;
	border-start-start-radius: 5px;
}

.kwat-wh__corner--tr {
	top: 0.5rem;
	inset-inline-end: 0.5rem;
	border-inline-start: 0;
	border-block-end: 0;
	border-start-end-radius: 5px;
}

.kwat-wh__corner--bl {
	bottom: 0.5rem;
	inset-inline-start: 0.5rem;
	border-inline-end: 0;
	border-block-start: 0;
	border-end-start-radius: 5px;
}

.kwat-wh__corner--br {
	bottom: 0.5rem;
	inset-inline-end: 0.5rem;
	border-inline-start: 0;
	border-block-start: 0;
	border-end-end-radius: 5px;
}

/* Wandernder Firnis-Glanz bei Hover/Fokus (wie Licht über das Bild). */
.kwat-wh__sheen {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
	transform: translateX(-60%);
	transition: opacity var(--kwat-duration-base) var(--kwat-ease-standard);
}

@media (hover: hover) {
	.kwat-wh__frame:hover .kwat-wh__sheen,
	.kwat-wh__exhibit:focus-within .kwat-wh__sheen {
		opacity: 1;
		animation: kwat-wh-sheen var(--kwat-duration-slow) var(--kwat-ease-emphasis);
	}
}

@keyframes kwat-wh-sheen {
	from {
		transform: translateX(-60%);
	}

	to {
		transform: translateX(60%);
	}
}

/* ── Foto-Fallback: gemaltes Namensschild ─────────────────────────────────── */
.kwat-wh__art--nofoto {
	display: grid;
	place-content: center;
	gap: var(--kwat-space-2);
	text-align: center;
	padding: var(--kwat-space-5);
	background: repeating-linear-gradient(135deg, #efe9db, #efe9db 12px, #e9e2d1 12px, #e9e2d1 24px);
}

.kwat-wh__np-kicker {
	font-size: var(--kwat-text-xs);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--kwat-wh-mat-ink) 80%, #fff);
}

.kwat-wh__np-name {
	font-family: var(--kwat-font-heading);
	font-weight: 700;
	line-height: 1.06;
	font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.1rem);
	color: var(--kwat-wh-mat-ink);
}

.kwat-wh__np-rule {
	width: 3.25rem;
	height: 3px;
	margin: 0.15rem auto 0;
	border-radius: 2px;
	background: var(--kwat-color-accent);
}

/* ── Kabinettschild (graviertes Messing) ──────────────────────────────────── */
.kwat-wh__plate {
	position: relative;
	padding: var(--kwat-space-4) var(--kwat-space-5);
	border-radius: 8px;
	background: linear-gradient(160deg, color-mix(in srgb, var(--kwat-wh-brass) 88%, #000), var(--kwat-wh-brass));
	border: 1px solid color-mix(in srgb, var(--kwat-wh-brass-hi) 34%, transparent);
	box-shadow: var(--kwat-shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--kwat-wh-brass-hi) 28%, transparent);
}

/* Gravur-Innenlinie. */
.kwat-wh__plate::before {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 5px;
	pointer-events: none;
	border: 1px solid color-mix(in srgb, var(--kwat-wh-brass-hi) 26%, transparent);
}

.kwat-wh__cat {
	font-size: var(--kwat-text-xs);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--kwat-wh-brass-hi) 82%, #fff);
}

.kwat-wh__name {
	font-family: var(--kwat-font-heading);
	font-weight: 700;
	line-height: 1.12;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
	color: #fff;
	margin: 0.15rem 0 0.1rem;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

.kwat-wh__desc {
	margin-block-start: var(--kwat-space-2);
	font-size: var(--kwat-text-sm);
	line-height: 1.55;
	color: color-mix(in srgb, var(--kwat-wh-mat) 84%, var(--kwat-wh-brass));
	text-wrap: pretty;
}

/* Kennzeichnung (geteilte .kwat-menu__meta) auf dem Messing-Grund lesbar halten:
   die muted-Texte ohne eigene Fläche bekommen hier den hellen Messing-Ton. */
.kwat-wh__plate .kwat-menu__codes,
.kwat-wh__plate .kwat-menu__abv {
	color: color-mix(in srgb, var(--kwat-wh-mat) 80%, var(--kwat-wh-brass));
}

.kwat-wh__plate .kwat-menu__codes b {
	color: var(--kwat-wh-brass-hi);
}

.kwat-wh__plate .kwat-menu__abv-dots i.is-on {
	background: var(--kwat-wh-brass-hi);
}

/* ── Ausschank-Größen / Preis (variant_rows als Kacheln) ──────────────────── */
.kwat-wh__pours {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--kwat-space-2);
	margin-block-start: var(--kwat-space-4);
	padding-block-start: var(--kwat-space-3);
	border-block-start: 1px dashed color-mix(in srgb, var(--kwat-wh-brass-hi) 26%, transparent);
}

.kwat-wh__pour {
	display: inline-flex;
	flex-direction: column;
	gap: 1px;
	padding: 0.4em 0.8em;
	border-radius: 8px;
	background: color-mix(in srgb, #000 22%, transparent);
	border: 1px solid color-mix(in srgb, var(--kwat-wh-brass-hi) 22%, transparent);
}

.kwat-wh__pour-size {
	font-size: var(--kwat-text-xs);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--kwat-wh-brass-hi) 80%, #fff);
}

.kwat-wh__pour-price {
	font-family: var(--kwat-font-heading);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: var(--kwat-text-base);
	color: var(--kwat-wh-brass-hi);
}

/* ── Zicklinde als Kuratorin ──────────────────────────────────────────────── */
.kwat-wh__curator {
	display: flex;
	align-items: center;
	gap: var(--kwat-space-4);
	margin-block-start: var(--kwat-space-5);
	padding: var(--kwat-space-3) var(--kwat-space-4);
	border-radius: var(--kwat-radius-md);
	background: color-mix(in srgb, #000 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--kwat-color-accent) 24%, transparent);
}

.kwat-wh__curator-img {
	width: clamp(3.25rem, 8vw, 4.25rem);
	height: auto;
	flex: none;
	filter: drop-shadow(0 8px 14px color-mix(in srgb, #000 45%, transparent));
}

.kwat-wh__curator-note {
	margin: 0;
	font-size: var(--kwat-text-sm);
	line-height: 1.5;
	color: color-mix(in srgb, var(--kwat-color-text-muted) 94%, #fff);
}

.kwat-wh__curator-label {
	font-family: var(--kwat-font-heading);
	font-weight: 700;
	color: var(--kwat-color-accent-hi);
}

.kwat-wh__foot {
	position: relative;
	margin-block-start: var(--kwat-space-5);
	text-align: center;
	font-size: var(--kwat-text-xs);
	color: var(--kwat-color-text-muted);
}

/* ── Reveal beim Scrollen (View Timeline, JS-frei) ────────────────────────── */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.kwat-wh__exhibit {
			animation: kwat-wh-rise linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 26%;
		}
	}
}

@keyframes kwat-wh-rise {
	from {
		opacity: 0;
		transform: translateY(1.6rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ── Layout A · Solo – Exponat ist die Bühne: Bild | Schild ────────────────── */
.kwat-wh--solo .kwat-wh__exhibit {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	gap: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);
	align-items: center;
}

.kwat-wh--solo .kwat-wh__frame {
	max-width: 26rem;
	width: 100%;
	margin-inline: auto;
}

@media (max-width: 50rem) {
	.kwat-wh--solo .kwat-wh__exhibit {
		grid-template-columns: 1fr;
		gap: var(--kwat-space-5);
	}

	.kwat-wh--solo .kwat-wh__frame {
		max-width: 21rem;
	}
}

/* ── Layout B · Paar – zwei Exponate: Bild über Schild, gleich hoch ────────── */
.kwat-wh--pair .kwat-wh__stage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.15rem, 0.8rem + 1.6vw, 2rem);
	align-items: stretch;
}

.kwat-wh--pair .kwat-wh__exhibit {
	display: flex;
	flex-direction: column;
	gap: var(--kwat-space-3);
}

/* Schild füllt den Rest → beide Exponate schließen bündig ab. */
.kwat-wh--pair .kwat-wh__plate {
	flex: 1 1 auto;
}

.kwat-wh--pair .kwat-wh__art {
	aspect-ratio: 1 / 1;
}

@media (max-width: 45rem) {
	.kwat-wh--pair .kwat-wh__stage {
		grid-template-columns: 1fr;
		max-width: 24rem;
		margin-inline: auto;
	}
}

/* ── Kontrastmodus (Windows) ──────────────────────────────────────────────── */
@media (forced-colors: active) {
	.kwat-wh__frame,
	.kwat-wh__plate,
	.kwat-wh__pour,
	.kwat-wh__curator {
		border: 1px solid CanvasText;
	}

	.kwat-wh__corner {
		border-color: Highlight;
	}
}