/* KW Atelier – Hülle: Hero „Die Tafel" (Startseite). Bedingt geladen (hero_enabled).
   Gescoped .kwat-*. Doku: assets/css/frontend/CLAUDE.md

   Genau ZWEI Dinge: ein großes Foto und eine Tafel (Schieferplatte in Messingfassung).
   Alles hängt AN der Tafel – nichts schwebt frei im Bild. Deshalb ist die Anordnung auf
   jeder Breite dieselbe: EIN Block, der nur seinen Platz wechselt.

   Vier Stapel wechseln im Gleichtakt (hero-slider.js), je ein Eintrag pro Folie: Foto,
   Folieninhalt, Fußzeilen-Notiz, Zicklinde. */

.kwat-hero,
.kwat-hero *,
.kwat-hero *::before,
.kwat-hero *::after {
	box-sizing: border-box;
}

.kwat-hero {
	/* Lokale Tokens: nur der Schiefer ist markenfremd (zwei Werte), alles andere kommt
	   aus Gold und der Grauskala. KEIN Marineblau – im Plugin faktisch ungenutzt. */
	--kwat-hero-h: max(26rem, min(78dvh, 58rem));
	--kwat-hero-slate: #23241f;
	--kwat-hero-slate-hi: #2f312a;

	/* Breite der Messingfassung – die Schraube leitet sich DARAUS ab. Eine feste
	   Schraubenposition rutschte bei fluider Fassung auf dem Handy heraus. */
	--kwat-hero-frame: clamp(0.7rem, 0.95vw, 0.95rem);
	--kwat-hero-screw: calc(var(--kwat-hero-frame) * 0.82);

	/* Tafelbreite, im Tab „Hero" wählbar. Durchgehend fluid: bei 1024px etwa 46 % der
	   Breite, bei 1920px 31 % – auf breiten Schirmen wird immer mehr Foto frei. Ein
	   springendes min(37rem, 58%) verdeckte auf Tablet-Breite zu viel. */
	--kwat-hero-tafel-w: clamp(19rem, 15.6rem + 21.6vw, 37rem);

	/* Höhe der Zicklinde. Steht bewusst HIER und wird direkt am Bild gesetzt – siehe
	   die Begründung am Maskottchen-Stapel. */
	--kwat-hero-mascot-h: clamp(4.5rem, 11dvh, 7.5rem);

	position: relative;
	display: grid;
	align-items: center;
	min-height: var(--kwat-hero-h);
	overflow: hidden;
	background: var(--kwat-color-page);
	border-block-end: 1px solid color-mix(in srgb, var(--kwat-color-accent) 30%, transparent);
	font-family: var(--kwat-font-body);
}

.kwat-hero--tafel-narrow {
	--kwat-hero-tafel-w: clamp(17rem, 13.4rem + 17vw, 30rem);
}

.kwat-hero--tafel-wide {
	--kwat-hero-tafel-w: clamp(20rem, 16.6rem + 25vw, 43rem);
}

/* ── Das Foto: volle Fläche, kein Overlay über dem Motiv ─────────────────── */
.kwat-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.kwat-hero__bg-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--kwat-duration-slow) ease;
}

.kwat-hero__bg-slide.is-active {
	opacity: 1;
}

.kwat-hero__bg-slide :where(img) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Nur zur Textseite hin abdunkeln, gerichtet – nicht das ganze Motiv. Liegt an der
   Foto-Schicht insgesamt, damit beim Folienwechsel nichts mit-überblendet. */
.kwat-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		97deg,
		color-mix(in srgb, var(--kwat-color-page) 72%, transparent) 0,
		color-mix(in srgb, var(--kwat-color-page) 30%, transparent) 40%,
		transparent 66%
	);
}

/* Format je Folie (Standard „Bereich füllen" = cover). */
.kwat-hero__bg-slide--fit-contain :where(img) {
	object-fit: contain;
}

/* Bildausschnitt je Folie bzw. für Konzertbilder (Standard Mitte). */
.kwat-hero__bg-slide--pos-top :where(img) {
	object-position: top;
}

.kwat-hero__bg-slide--pos-bottom :where(img) {
	object-position: bottom;
}

.kwat-hero__bg-slide--pos-left :where(img) {
	object-position: left;
}

.kwat-hero__bg-slide--pos-right :where(img) {
	object-position: right;
}

/* ── Das Sims ────────────────────────────────────────────────────────────
   Die Messingkante der Tafel läuft nach BEIDEN Seiten über die ganze Hero-Breite
   weiter. Dadurch ist die Tafel im Bildraum verzahnt statt darauf gelegt – ein
   erweitertes Objekt, kein zusätzliches Element. */
.kwat-hero__ledge {
	position: absolute;
	inset-inline: 0;
	bottom: calc(50% - 0.5px);
	z-index: 1;
	block-size: 0;
	pointer-events: none;
}

.kwat-hero__ledge::before,
.kwat-hero__ledge::after {
	content: "";
	position: absolute;
	top: 0;
	block-size: 2px;
	/* Ein Hauch Schatten unter der Kante – sonst ist es ein Strich, keine Kante. */
	box-shadow: 0 2px 5px color-mix(in srgb, #000 58%, transparent);
}

.kwat-hero__ledge::before {
	inset-inline-start: 0;
	inline-size: 52%;
	background: linear-gradient(90deg, transparent, var(--kwat-color-accent) 82%);
}

.kwat-hero__ledge::after {
	inset-inline-end: 0;
	inline-size: 52%;
	background: linear-gradient(270deg, transparent, var(--kwat-color-accent) 82%);
}

/* ── Die Tafel ───────────────────────────────────────────────────────────── */
.kwat-hero__inner {
	position: relative;
	z-index: 2;
	inline-size: 100%;
	max-inline-size: var(--kwat-shell-max);
	margin-inline: auto;
	padding: var(--kwat-space-6) var(--kwat-shell-pad);
}

.kwat-hero__tafel {
	position: relative;
	inline-size: var(--kwat-hero-tafel-w);
	padding: clamp(1.5rem, 2.6vw, 2.5rem) clamp(1.5rem, 2.6vw, 2.5rem) clamp(1.25rem, 2vw, 1.9rem);
	background:
		/* Farbreflex: warmes Licht des Fotos fällt von der Bildseite auf den Schiefer.
		   Ohne ihn bleiben Tafel und Foto zwei getrennte Dinge. */
		radial-gradient(76% 118% at 106% 42%, color-mix(in srgb, var(--kwat-color-accent) 15%, transparent), transparent 60%),
		radial-gradient(130% 100% at 82% 4%, color-mix(in srgb, #fff 5%, transparent), transparent 56%),
		linear-gradient(200deg, var(--kwat-hero-slate-hi), var(--kwat-hero-slate) 72%);
	border: var(--kwat-hero-frame) solid transparent;
	border-image: linear-gradient(
			200deg,
			color-mix(in srgb, var(--kwat-color-accent-hi) 92%, #fff),
			var(--kwat-color-accent) 38%,
			color-mix(in srgb, var(--kwat-color-accent) 46%, #000) 78%,
			color-mix(in srgb, var(--kwat-color-accent) 72%, #000)
		)
		1;
	/* ZWEI Schatten verankern die Tafel: ein naher, harter für den Kontakt zur
	   Bildfläche, ein weiter, weicher für die Streuung. Ein einzelner weicher Schatten
	   ließ sie schweben. Beide neutral, nicht farbig. */
	box-shadow:
		-5px 7px 11px color-mix(in srgb, #000 54%, transparent),
		-22px 28px 54px color-mix(in srgb, #000 62%, transparent);
	animation: kwat-tafel-in var(--kwat-duration-slow) var(--kwat-ease-emphasis) both;
}

@keyframes kwat-tafel-in {
	from {
		opacity: 0;
		translate: 0 12px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

/* Geprägte Goldlinie innen. */
.kwat-hero__tafel::before {
	content: "";
	position: absolute;
	inset: clamp(0.4rem, 0.7vw, 0.7rem);
	z-index: 3;
	pointer-events: none;
	border: 1px solid color-mix(in srgb, var(--kwat-color-accent) 34%, transparent);
	box-shadow: inset 0 1px 0 color-mix(in srgb, #000 40%, transparent);
}

/* Vier Schrauben in den Ecken der Fassung – MIT SCHLITZ. Ohne ihn sind sie runde
   Goldpunkte und von der Ansichtswahl nicht zu unterscheiden; ein Gast klickt darauf. */
.kwat-hero__screw {
	/* Mittig IM RAHMEN, aus Fassung und Schraubengröße berechnet – dadurch sitzt sie auf
	   JEDER Breite gleich. `top: 0` wäre die Innenkante, deshalb der halbe Versatz. */
	--kwat-hero-screw-pos: calc(-1 * (var(--kwat-hero-frame) + var(--kwat-hero-screw)) / 2);

	position: absolute;
	z-index: 4;
	inline-size: var(--kwat-hero-screw);
	block-size: var(--kwat-hero-screw);
	border-radius: 50%;
	background: radial-gradient(
		circle at 34% 28%,
		#fff1c9,
		var(--kwat-color-accent) 52%,
		color-mix(in srgb, var(--kwat-color-accent) 38%, #000)
	);
	box-shadow:
		0 1px 2px color-mix(in srgb, #000 72%, transparent),
		inset 0 -1px 1px color-mix(in srgb, #000 40%, transparent);
}

.kwat-hero__screw::before {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline: calc(var(--kwat-hero-screw) * 0.16);
	block-size: max(1.5px, calc(var(--kwat-hero-screw) * 0.17));
	translate: 0 -50%;
	border-radius: 1px;
	background: color-mix(in srgb, #000 58%, transparent);
}

.kwat-hero__screw:nth-of-type(1) {
	top: var(--kwat-hero-screw-pos);
	left: var(--kwat-hero-screw-pos);
}

.kwat-hero__screw:nth-of-type(2) {
	top: var(--kwat-hero-screw-pos);
	right: var(--kwat-hero-screw-pos);
}

.kwat-hero__screw:nth-of-type(3) {
	bottom: var(--kwat-hero-screw-pos);
	left: var(--kwat-hero-screw-pos);
}

.kwat-hero__screw:nth-of-type(4) {
	bottom: var(--kwat-hero-screw-pos);
	right: var(--kwat-hero-screw-pos);
}

/* Jede Schraube in einem anderen Winkel – wie von Hand eingedreht. */
.kwat-hero__screw:nth-of-type(1)::before {
	rotate: 26deg;
}

.kwat-hero__screw:nth-of-type(2)::before {
	rotate: -41deg;
}

.kwat-hero__screw:nth-of-type(3)::before {
	rotate: 68deg;
}

.kwat-hero__screw:nth-of-type(4)::before {
	rotate: -9deg;
}

/* ── Die Folien: in dieselbe Rasterzelle gestapelt ────────────────────────
   Höhe = höchste Folie, damit die Tafel beim Wechseln nicht springt. */
.kwat-hero__slides {
	display: grid;
}

/* Als Spalte, damit die Knopfreihe unten verankert werden kann (siehe `__actions`). */
.kwat-hero__slide {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	opacity: 0;
	transition: opacity var(--kwat-transition);
}

.kwat-hero__slide.is-active {
	opacity: 1;
}

/* Bricht die Kennzeile um (auf dem Handy tut sie das), muss der Punkt an der ERSTEN
   Zeile bleiben – mit `align-items: center` wanderte er in die zweite. */
.kwat-hero__eyebrow {
	display: flex;
	align-items: flex-start;
	gap: var(--kwat-space-2);
	margin-block-end: var(--kwat-space-3);
	color: var(--kwat-color-accent-hi);
	font-size: var(--kwat-text-sm);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.kwat-hero__eyebrow-dot {
	flex: 0 0 auto;
	inline-size: 7px;
	block-size: 7px;
	margin-block-start: 0.55em;
	border-radius: 50%;
	background: var(--kwat-color-accent);
}

/* Der Titel ist ein `<p>` (alle Folien liegen gleichzeitig im Markup – als Überschrift
   gäbe das mehrere `<h1>`). Sein Abstand muss deshalb HIER stehen: der Browser gibt `<p>`
   1em, der früheren `<h1>` 0.67em – ungesetzt wäre die Tafel um ~2,3rem gewachsen. Die
   Folie ist ein Flex-Container, die Margins der Nachbarn fallen also nicht zusammen. */
.kwat-hero__title {
	margin-block: 0.67em;
	font-family: var(--kwat-font-heading);
	font-weight: 700;
	font-size: clamp(2rem, 1.2rem + 2.9vw, 3.5rem);
	line-height: 1.02;
	color: color-mix(in srgb, var(--kwat-color-text) 92%, #f5f2ea);
	text-wrap: balance;
}

/* Konzertnamen sind länger als „Willkommen im …" und dürfen die Tafel nicht aufblähen:
   Alle Folien liegen im selben Rasterstapel, die höchste bestimmt die Höhe ALLER. Ein
   dreizeiliger Bandname zog sonst auch die Willkommens-Folie in die Länge. Der Name
   braucht auch keine Markengröße – er steht ohnehin allein im Titel. */
.kwat-hero__slide--concert .kwat-hero__title {
	font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.75rem);
	line-height: 1.08;
}

.kwat-hero__title-accent {
	font-style: normal;
	color: var(--kwat-color-accent-hi);
}

.kwat-hero__lede {
	margin-block: var(--kwat-space-4) var(--kwat-space-5);
	max-inline-size: 44ch;
	color: color-mix(in srgb, var(--kwat-color-text) 82%, var(--kwat-color-text-muted));
	font-size: var(--kwat-text-base);
}

/* `margin-block-start: auto` schiebt die Knöpfe an den unteren Rand der Folie.
   Alle Folien liegen in derselben Rasterzelle und sind damit gleich hoch – ohne diese
   Zeile klaffte auf der kürzeren Folie eine Lücke UNTER den Knöpfen (live gesehen: die
   Konzert-Folie hatte eine leere Fläche in der Mitte). So sitzt die Knopfreihe auf jeder
   Folie auf derselben Linie, direkt über der Fußzeile. */
.kwat-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kwat-space-3);
	margin-block-start: auto;
}

.kwat-hero__ghost {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--kwat-space-5);
	color: color-mix(in srgb, var(--kwat-color-text) 92%, #f5f2ea);
	font-weight: 600;
	text-decoration: none;
	background: color-mix(in srgb, #fff 6%, transparent);
	border: 1px solid color-mix(in srgb, var(--kwat-color-accent) 58%, transparent);
	border-radius: var(--kwat-radius-md);
	transition: border-color var(--kwat-transition);
}

@media (hover: hover) {
	.kwat-hero__ghost:hover {
		border-color: var(--kwat-color-accent-hi);
	}
}

/* ── Zicklinde: sie lehnt VOR der Fassung, gehört also ZUR Tafel ──────────
   Kein Boden, keine Szene – sie hängt am selben Block wie alles andere und verhält sich
   damit auf jeder Breite gleich. Eigener Stapel, damit sie mit der Folie wechseln kann
   (Rockstar auf Konzert-Folien), ohne dass ein Bildwechsel per src flackert.
   z-index über Goldlinie (3) und Schrauben (4): ihr Fuß ragt in die Tafel hinein und
   würde sonst von beiden überzeichnet (Auftraggeber-Entscheidung 2026-07-26: davor). */
.kwat-hero__mascots {
	position: absolute;
	z-index: 5;
	bottom: calc(100% - clamp(1.25rem, 2.2vw, 2rem));
	inset-inline-end: clamp(1rem, 4vw, 3.5rem);
	display: grid;
	justify-items: end;
	pointer-events: none;
	animation: kwat-mascot-in var(--kwat-duration-slow) var(--kwat-ease-emphasis) 220ms both;
}

@keyframes kwat-mascot-in {
	from {
		opacity: 0;
		translate: 0 14px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

.kwat-hero__mascot {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity var(--kwat-transition);
}

.kwat-hero__mascot.is-active {
	opacity: 1;
}

/* ⚠️ Die Höhe steht DIREKT am Bild, nicht als `block-size: 100%` über zwei Ebenen.
   Eine Prozenthöhe gegen eine automatisch hohe Rasterzeile ist eine Zirkelbeziehung und
   fällt auf `auto` zurück – also auf die natürliche Bildgröße. Gemessen: 512×512 statt
   65px hoch, wodurch Zicklinde bei 320px um 232px aus dem Bild ragte. */
.kwat-hero__mascot-img {
	display: block;
	block-size: var(--kwat-hero-mascot-h);
	inline-size: auto;
	filter: drop-shadow(-6px 6px 7px color-mix(in srgb, #000 58%, transparent));
}

/* ── Fußzeile der Tafel: Notiz links, Ansichtswahl rechts ─────────────────
   Beides sitzt IN der Tafel, hinter einer Trennlinie – nicht als schwebende Pille und
   nicht als Punktreihe irgendwo im Bild. */
.kwat-hero__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kwat-space-3) var(--kwat-space-5);
	margin-block-start: var(--kwat-space-5);
	padding-block-start: var(--kwat-space-4);
	border-block-start: 1px solid color-mix(in srgb, var(--kwat-color-accent) 24%, transparent);
}

/* Zweiter Gleichtakt-Stapel: eine Notiz je Folie, in dieselbe Zelle gestapelt. */
.kwat-hero__notes {
	display: grid;
	flex: 1 1 14rem;
	min-inline-size: 0;
}

.kwat-hero__note {
	grid-area: 1 / 1;
	display: inline-flex;
	align-items: center;
	gap: var(--kwat-space-2);
	min-inline-size: 0;
	opacity: 0;
	color: color-mix(in srgb, var(--kwat-color-accent-hi) 82%, #fff);
	font-size: var(--kwat-text-sm);
	transition: opacity var(--kwat-transition);
}

.kwat-hero__note.is-active {
	opacity: 1;
}

/* Die Ankündigung ist bis zur Zeitraum-Prüfung durch hero.js `hidden`. Eine Klasse mit
   `display: inline-flex` schlägt die Vorgabe des Browsers – ohne diese Regel bliebe sie
   trotz `hidden` sichtbar. */
.kwat-hero__note[hidden] {
	display: none;
}

.kwat-hero__note-dot {
	flex: 0 0 auto;
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: var(--kwat-color-accent);
}

.kwat-hero__note-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kwat-hero__views {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--kwat-space-1);
}

/* `hidden` muss die Klassen-`display` schlagen – der Slider blendet abgelaufene
   Konzert-Folien und (bei nur einer gültigen Folie) die ganze Ansichtswahl aus. */
.kwat-hero__views[hidden],
.kwat-hero__view[hidden] {
	display: none;
}

/* Striche statt Punkte: runde Goldpunkte wären von den Schrauben nicht zu unterscheiden.
   28px Klickfläche bei zartem Strich – die alten Folienpunkte waren 8px und verfehlten
   WCAG 2.2, Kriterium 2.5.8. */
.kwat-hero__view {
	display: grid;
	place-items: center;
	inline-size: 28px;
	block-size: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
}

.kwat-hero__view::before {
	content: "";
	inline-size: 16px;
	block-size: 3px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--kwat-color-text) 34%, transparent);
	transition:
		background var(--kwat-transition),
		inline-size var(--kwat-transition);
}

.kwat-hero__view[aria-current="true"]::before {
	inline-size: 24px;
	background: var(--kwat-color-accent);
}

@media (hover: hover) {
	.kwat-hero__view:hover::before {
		background: var(--kwat-color-accent-hi);
	}
}

/* ── Schmal: dieselbe Tafel, nur unter dem Foto ───────────────────────────
   Das Foto wird flacher und gegen die FENSTERHÖHE gedeckelt, die Tafel überlappt seine
   Unterkante. Kein Element verschwindet, keins zieht um. */
@media (max-width: 1023px) {
	.kwat-hero {
		display: block;
		min-height: 0;
	}

	/* ⚠️ `inline-size: 100%` ist Pflicht. `aspect-ratio` ZUSAMMEN mit einem Höhendeckel
	   schrumpft sonst auch die BREITE mit, weil das Verhältnis erhalten bleibt: bei 768px
	   war das Foto nur 600px breit und rechts blieb eine leere Fläche stehen. Die Breite
	   muss gewinnen, gedeckelt wird allein die Höhe – das Verhältnis wird dann flacher
	   als 4:3, was `object-fit: cover` abfängt. */
	.kwat-hero__bg {
		position: relative;
		inset: auto;
		inline-size: 100%;
		aspect-ratio: 4 / 3;
		max-block-size: clamp(13rem, 44dvh, 27rem);
	}

	.kwat-hero__bg::after {
		background: linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--kwat-color-page) 58%, transparent));
	}

	.kwat-hero__ledge {
		display: none;
	}

	.kwat-hero__inner {
		padding-block: 0 var(--kwat-space-6);
	}

	.kwat-hero__tafel {
		inline-size: auto;
		margin-block-start: calc(-1 * clamp(1.5rem, 4vw, 3rem));
	}

	.kwat-hero {
		--kwat-hero-mascot-h: clamp(3.75rem, 9dvh, 5.5rem);
	}

	.kwat-hero__mascots {
		inset-inline-end: clamp(0.75rem, 4vw, 2rem);
	}
}

@media (max-width: 479px) {
	.kwat-hero__bg {
		max-block-size: clamp(9.5rem, 27dvh, 15rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kwat-hero__tafel,
	.kwat-hero__mascots {
		animation: none;
	}
}

/* ── Windows-Kontrastmodus ───────────────────────────────────────────────── */
@media (forced-colors: active) {
	.kwat-hero__bg::after {
		display: none;
	}

	.kwat-hero__tafel {
		background: Canvas;
		border: 2px solid CanvasText;
	}

	.kwat-hero__screw {
		display: none;
	}
}

/* Doppelten Seitentitel des Themes auf der Startseite entfernen – der Hero liefert
   das maßgebliche <h1>. body-gescopt; bewusste Ausnahme von „nur .kwat-*" (fremdes
   Markup). Pendant zu page-header.css (Unterseiten). */
body.kwat-has-hero :is(.entry-title, .page-title) {
	display: none;
}