/* KW Atelier – Hülle: Seitenkopf (Unterseiten). Bedingt geladen (pagehead_enabled). Gescoped .kwat-*. Doku: assets/css/frontend/CLAUDE.md */

/* ── Seitenkopf (Unterseiten): kompaktes Band – Signaturleiste · Breadcrumb · Titel · Beschreibung · Zicklinde ── */
.kwat-pagehead,
.kwat-pagehead *,
.kwat-pagehead *::before,
.kwat-pagehead *::after {
	box-sizing: border-box;
}

.kwat-pagehead {
	position: relative;
	display: flex;
	align-items: center;
	overflow: clip;
	/* Bewusst niedrig gehalten (kein bildschirmfüllender Kopf) – fluide, ab 320px stabil. */
	min-height: clamp(5.5rem, 4.5rem + 3vw, 7rem);
	font-family: var(--kwat-font-body);
	border-bottom: 1px solid color-mix(in srgb, var(--kwat-color-accent) 24%, transparent);
	background:
		radial-gradient(680px 260px at 88% -10%, color-mix(in srgb, var(--kwat-color-accent) 12%, transparent), transparent 62%),
		linear-gradient(158deg, color-mix(in srgb, var(--kwat-color-surface) 94%, #fff 3%), var(--kwat-color-bg) 78%, color-mix(in srgb, var(--kwat-color-bg) 90%, #000));
}

/* Feine „Papier"-Textur – kaum sichtbar, gibt Wärme (Atelier). Lokales Data-URI-SVG, GPU. */
.kwat-pagehead::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.05;
	mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.kwat-pagehead__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--kwat-shell-max);
	margin-inline: auto;
	padding-block: clamp(1.1rem, 0.9rem + 1.4vw, 1.7rem);
	padding-inline: var(--kwat-shell-pad);
	/* Platz links für die Signaturleiste. */
	padding-inline-start: calc(var(--kwat-shell-pad) + 0.9rem);
}

/* Inset-gerundete Gold-Signaturleiste (Verlauf blendet nach unten aus) – bewusstes
   Lesezeichen-Detail statt eines durchgehenden Kanten-Balkens. */
.kwat-pagehead__bar {
	position: absolute;
	inset-block: clamp(1rem, 1.4vw, 1.5rem);
	inset-inline-start: 0;
	width: 4px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--kwat-color-accent-hi), var(--kwat-color-accent) 45%, transparent);
}

/* ── Breadcrumb ── */
.kwat-pagehead__crumb {
	margin-bottom: var(--kwat-space-2);
	font-size: var(--kwat-text-sm);
	color: var(--kwat-color-text-muted);
}

.kwat-pagehead__crumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kwat-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kwat-pagehead__crumb-item {
	display: inline-flex;
	align-items: center;
	gap: var(--kwat-space-2);
}

.kwat-pagehead__chev {
	color: color-mix(in srgb, var(--kwat-color-accent) 45%, var(--kwat-color-text-muted));
}

.kwat-pagehead__crumb-link {
	color: var(--kwat-color-accent);
	text-decoration: none;
}

@media (hover: hover) {
	.kwat-pagehead__crumb-link:hover {
		color: var(--kwat-color-accent-hover);
		text-decoration: underline;
		text-underline-offset: 0.18em;
	}
}

.kwat-pagehead__crumb-current {
	color: var(--kwat-color-text);
}

/* ── Titel & Beschreibung ── */
.kwat-pagehead__title {
	margin: 0;
	font-family: var(--kwat-font-heading);
	font-weight: 700;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
	line-height: 1.08;
	color: var(--kwat-color-text);
	text-wrap: balance;
}

.kwat-pagehead__desc {
	margin: var(--kwat-space-2) 0 0;
	max-width: 60ch;
	color: var(--kwat-color-text-muted);
	font-size: var(--kwat-text-base);
	line-height: 1.5;
	text-wrap: pretty;
}

/* ── Zicklinde-Gastgeber (dekorativ, unten bündig – HÖHE an den Kopf gekoppelt) ──
   Kernregel gegen „verschwindet unter dem Menü": die Figur ist etwas KLEINER als der Kopf
   und sitzt tief mit Luft nach oben – sie füllt den Kopf nicht mehr fast ganz aus. Dadurch
   cramt sie nie an die sticky Navigation und gleitet beim Scrollen nur allmählich weg statt
   sofort halb zu verschwinden. Zwei Deckel via min(): 1. nie höher als der Kopf minus fluidem
   Sicherheitsabstand (bindet an die Kopfhöhe), 2. fluider Größendeckel (kein fixer Wert mehr).
   Breite folgt automatisch (auto) → keine Verzerrung.
   POSITION: am rechten Rand des zentrierten Inhaltsblocks (max --kwat-shell-max), NICHT am
   Viewport-Rand – sonst schwebt sie auf breiten Schirmen weit rechts „außerhalb" des Kopfes,
   losgelöst vom Lesefluss (gleiche Ausrichtung wie das Footer-Maskottchen). */
.kwat-pagehead__mascot {
	position: absolute;
	z-index: 1;
	inset-inline-end: calc(max(0px, (100% - var(--kwat-shell-max)) / 2) + var(--kwat-shell-pad));
	inset-block-end: 0;
	block-size: min(calc(100% - clamp(1rem, 0.4rem + 2vw, 1.6rem)), clamp(4.5rem, 3rem + 5vw, 6.5rem));
	inline-size: auto;
	pointer-events: none;
	user-select: none;
}

.kwat-pagehead__mascot-img {
	display: block;
	block-size: 100%;
	inline-size: auto;
	transform-origin: bottom center;
	transform: rotate(3deg);
	filter: drop-shadow(0 8px 16px color-mix(in srgb, #000 55%, transparent));
	animation: kwat-pagehead-nudge 6s var(--kwat-ease-standard) 1.4s infinite;
}

@keyframes kwat-pagehead-nudge {
	0%, 90%, 100% { transform: rotate(3deg); }
	94% { transform: rotate(-2deg); }
	97% { transform: rotate(5deg); }
}

/* Platz rechts, damit der Text (v. a. die Beschreibung) NICHT unter die Figur läuft. */
.kwat-pagehead:has(.kwat-pagehead__mascot) .kwat-pagehead__inner {
	padding-inline-end: clamp(6rem, 3rem + 9vw, 9rem);
}

/* Mini-Handys (≤480px): Figur aus (sonst wird der Text zu eng) – Platz zurückgeben. */
@media (max-width: 480px) {
	.kwat-pagehead__mascot {
		display: none;
	}
	.kwat-pagehead:has(.kwat-pagehead__mascot) .kwat-pagehead__inner {
		padding-inline-end: var(--kwat-shell-pad);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kwat-pagehead__mascot-img {
		animation: none;
	}
}

@media (forced-colors: active) {
	.kwat-pagehead {
		border-bottom: 1px solid CanvasText;
	}
}

/* Doppelten Seitentitel des Themes entfernen – Seitenkopf bzw. Hero liefern das
   maßgebliche <h1>. body-gescopt; bewusste Ausnahme von „nur .kwat-*" (fremdes Markup).
   Bringt der Startseiten-Inhalt ein eigenes <h1> mit, lässt sich der Hero per Filter
   `kw_atelier/hero/heading_level` auf <h2> reduzieren. */
body.kwat-has-pagehead :is(.entry-title, .page-title) {
	display: none;
}