/* ==========================================================================
   PageHeader Widget (#39) — Seitenkopf mit Breadcrumbs, TOC-Popover, Lesedauer.
   Full-Width-Breakout, Gradient-Overlay, Parallax (CSS-only),
   Scroll-Progress (CSS-only), Glassmorphism-Badges + TOC-Popover.
   ========================================================================== */

/* --- Custom Properties --------------------------------------------------- */

.kw-ph {
	--kwl-ph-min-height: clamp(160px, 120px + 8vw, 240px);
	--kwl-ph-bg-position: center center;

	/* Overlay (2-Schicht: helle Basis + Primärfarben-Tint) */
	--kwl-ph-overlay-base: var(--kwl-page-bg, #F5F0E8);
	--kwl-ph-overlay-color: var(--kwl-primary, #00315d);
	--kwl-ph-overlay-opacity: 0.75;
	--kwl-ph-overlay-tint: 0.08;

	/* Titel — dunkel auf hell, 11.7:1 vs #F5F0E8 */
	--kwl-ph-title-color: var(--kwl-primary, #00315d);
	--kwl-ph-title-shadow: none;
	--kwl-ph-subtitle-color: #4a5568;

	/* Breadcrumbs — 6.6:1 (current) / 11.7:1 (links) vs #F5F0E8 */
	--kwl-ph-breadcrumb-color: #4a5568;
	--kwl-ph-breadcrumb-link: var(--kwl-primary, #00315d);

	/* Badges (Glassmorphism) — hell */
	--kwl-ph-glass-blur: blur(16px);
	--kwl-ph-glass-bg: rgba(255, 255, 255, 0.6);
	--kwl-ph-glass-border: rgba(0, 49, 93, 0.12);
	--kwl-ph-glass-text: var(--kwl-primary, #00315d);

	/* TOC-Popover — hell */
	--kwl-ph-toc-bg: rgba(255, 255, 255, 0.96);
	--kwl-ph-toc-border: rgba(0, 49, 93, 0.1);
	--kwl-ph-toc-text: var(--kwl-text, #1a202c);
	--kwl-ph-toc-link: var(--kwl-primary, #00315d);
	--kwl-ph-toc-active: var(--kwl-accent, #BD9B5C);
	--kwl-ph-toc-subtext: #4a5568;
	--kwl-ph-toc-empty: var(--kwl-text-muted, #718096);
	--kwl-ph-toc-hover-bg: rgba(0, 49, 93, 0.04);
	--kwl-ph-toc-shadow-alpha: 0.12;

	/* Scroll-Progress */
	--kwl-ph-progress-color: var(--kwl-accent, #BD9B5C);
	--kwl-ph-progress-height: 3px;

	/* Transition */
	--kwl-ph-transition: var(--kwl-transition, 200ms ease);
}

/* --- Full-Width-Breakout ------------------------------------------------- */

body:has(.kw-ph) {
	overflow-x: clip;
}

.kw-ph {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: var(--kwl-ph-min-height);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: visible;
	isolation: isolate;
	/* z-index 1000: schlaegt Leaflet-Panes (max ~700), bleibt unter Navigation (9999).
	   Noetig, damit das TOC-Popover nicht von der Karte ueberlagert wird. */
	z-index: 1000;
}

.kw-ph--has-image {
	background: var(--kwl-page-bg, #F5F0E8);
}

/* Ohne Bild: Warmer Gradient mit dezenter Primärfarbe */
.kw-ph:not(.kw-ph--has-image) {
	background: linear-gradient(
		135deg,
		var(--kwl-page-bg, #F5F0E8) 0%,
		color-mix(in srgb, var(--kwl-page-bg, #F5F0E8) 85%, var(--kwl-primary, #00315d)) 100%
	);
}

/* --- Hintergrundbild ----------------------------------------------------- */

.kw-ph__image-wrap {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

/* Spezifität (0,2,0) — überschreibt Elementor V4 .elementor-widget img { height: auto } (0,1,1) */
.kw-ph .kw-ph__image {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: var(--kwl-ph-bg-fit, cover);
	object-position: var(--kwl-ph-bg-position);
}


/* --- Gradient-Overlay ---------------------------------------------------- */

.kw-ph__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* Zwei Schichten: Basis (Aufhellung/Abdunklung) + Primärfarbe (Markentönung) */
.kw-ph__overlay::before,
.kw-ph__overlay::after {
	content: '';
	position: absolute;
	inset: 0;
}

/* Schicht 1: Basis — Light: warmes Beige / Dark: Schwarz */
.kw-ph__overlay::before {
	background: var(--kwl-ph-overlay-base);
	opacity: var(--kwl-ph-overlay-opacity);
}

/* Schicht 2: Primärfarbe als dezenter Markentint */
.kw-ph__overlay::after {
	background: var(--kwl-ph-overlay-color);
	opacity: var(--kwl-ph-overlay-tint);
}

/* --- Content-Bereich ----------------------------------------------------- */

/* Mobile-First: kompakteres Padding als Basis (< 481px), ab 481px var(--kwl-space-lg), ab 769px var(--kwl-space-xl) */
.kw-ph__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--kwl-space-md, 1rem) var(--kwl-space-sm, 0.5rem);
	max-width: 800px;
	width: 100%;
	gap: var(--kwl-space-sm, 0.5rem);
}

@media (min-width: 481px) {
	.kw-ph__content {
		padding: var(--kwl-space-lg, 1.5rem) var(--kwl-space-md, 1rem);
	}
}

/* --- Breadcrumbs --------------------------------------------------------- */

.kw-ph__breadcrumb {
	font-size: clamp(0.7rem, 0.6rem + 0.4vw, 0.875rem);
	line-height: var(--kwl-lh-body);
}

.kw-ph__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kw-ph__breadcrumb-item {
	display: inline-flex;
	align-items: center;
}

.kw-ph__breadcrumb-item a {
	--kwl-link-color: var(--kwl-ph-breadcrumb-link);
	--kwl-link-hover-color: var(--kwl-ph-title-color);
	transition: color var(--kwl-ph-transition);
}

.kw-ph__breadcrumb-item a:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
	border-radius: 2px;
}

.kw-ph__breadcrumb-item span[aria-current] {
	color: var(--kwl-ph-breadcrumb-color);
}

.kw-ph__breadcrumb-sep {
	color: var(--kwl-accent, #BD9B5C);
	margin-inline: 0.5em;
	font-weight: var(--kwl-fw-semibold);
	opacity: 0.8;
}

@media (hover: hover) {
	.kw-ph__breadcrumb-item a:hover {
		color: var(--kwl-ph-title-color);
	}
}

.kw-ph__breadcrumb-item a:active {
	color: var(--kwl-ph-title-color);
	opacity: 0.8;
}

/* --- Gold-Separator ------------------------------------------------------ */

.kw-ph__separator {
	width: clamp(40px, 30px + 3vw, 80px);
	margin-block: var(--kwl-space-xs, 0.25rem);
}

/* --- Titel (Fluid: 1.25rem auf 320px → 2.75rem auf 1200px) -------------- */

.kw-ph__title {
	font-family: var(--kwl-font-heading);
	font-size: clamp(1.25rem, 0.9rem + 1.7vw, 2.75rem);
	font-weight: var(--kwl-fw-bold);
	line-height: var(--kwl-lh-heading, 1.2);
	color: var(--kwl-ph-title-color);
	text-shadow: var(--kwl-ph-title-shadow);
	margin: 0;
	letter-spacing: var(--kwl-ls-normal);
	text-wrap: balance;
}

/* --- Untertitel (Fluid: 0.8125rem → 1rem) -------------------------------- */

.kw-ph__subtitle {
	font-family: var(--kwl-font-body);
	font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 1rem);
	line-height: var(--kwl-lh-body);
	color: var(--kwl-ph-subtitle-color);
	margin: 0;
	max-width: 600px;
	text-wrap: balance;
}

/* --- Badges (Glassmorphism) ---------------------------------------------- */

.kw-ph__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kwl-space-sm, 0.5rem);
	justify-content: center;
	margin-top: var(--kwl-space-xs, 0.25rem);
}

.kw-ph__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0.8em;
	min-height: 44px;
	background: var(--kwl-ph-glass-bg);
	border: 1px solid var(--kwl-ph-glass-border);
	border-radius: var(--kwl-radius-full, 9999px);
	color: var(--kwl-ph-glass-text);
	font-size: clamp(0.75rem, 0.65rem + 0.4vw, 0.875rem);
	font-family: var(--kwl-font-body);
	line-height: var(--kwl-lh-none);
	white-space: nowrap;
	transition: background var(--kwl-ph-transition), box-shadow var(--kwl-ph-transition);
}

.kw-ph__badge-icon {
	flex-shrink: 0;
	opacity: 0.85;
}

/* --- TOC-Trigger Button (Elementor V4 Pink-Override Fix) ----------------- */

/* Spezifität (0,2,0) — überschreibt Elementor V4 button-Styles */
.kw-ph .kw-ph__badge--toc-trigger {
	cursor: pointer;
	font-weight: var(--kwl-fw-semibold);
	color: var(--kwl-ph-glass-text);
	background: var(--kwl-ph-glass-bg);
	border: 1px solid var(--kwl-ph-glass-border);
}

.kw-ph .kw-ph__badge--toc-trigger:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

@media (hover: hover) {
	.kw-ph .kw-ph__badge--toc-trigger:not(.is-empty):hover {
		background: rgba(255, 255, 255, 0.85);
		box-shadow: var(--kwl-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
		color: var(--kwl-ph-glass-text);
	}
}

.kw-ph .kw-ph__badge--toc-trigger:not(.is-empty):active {
	transform: scale(0.97);
}

/* Empty-State: Badge bleibt sichtbar (kein Layout Shift), wird gedimmt */
.kw-ph .kw-ph__badge--toc-trigger.is-empty {
	opacity: 0.6;
	cursor: default;
	transition: opacity 400ms ease;
}

/* Gold-Puls beim ersten Scroll — macht den Trigger als interaktiv erkennbar */
@keyframes kw-ph-toc-glow {
	0%, 100% { box-shadow: 0 0 0 0 transparent; }
	50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--kwl-accent, #BD9B5C) 50%, transparent); }
}

.kw-ph .kw-ph__badge--toc-trigger.is-discovered {
	animation: kw-ph-toc-glow 1.5s ease 2;
	border-color: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 60%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.kw-ph .kw-ph__badge--toc-trigger.is-discovered {
		animation: none;
		border-color: var(--kwl-accent, #BD9B5C);
	}
}

/* --- TOC-Anchor (Positionierungs-Container) ------------------------------ */

.kw-ph__toc-anchor {
	position: relative;
	display: inline-flex;
}

/* --- TOC-Popover --------------------------------------------------------- */

.kw-ph__toc-popover {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-4px);
	z-index: 100;
	margin-top: 8px;
	min-width: 240px;
	max-width: calc(100vw - 2rem);
	width: max-content;
	background: var(--kwl-ph-toc-bg);
	border: 1px solid var(--kwl-ph-toc-border);
	border-radius: var(--kwl-radius-lg, 12px);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, var(--kwl-ph-toc-shadow-alpha)),
		0 2px 8px rgba(0, 0, 0, calc(var(--kwl-ph-toc-shadow-alpha) / 2));
	color: var(--kwl-ph-toc-text);
	padding: var(--kwl-space-md, 1rem);
	text-align: left;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease, transform 200ms ease;
}

@media (min-width: 481px) {
	.kw-ph__toc-popover {
		min-width: 280px;
		max-width: 380px;
	}
}

.kw-ph__toc-popover:not([hidden]) {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.kw-ph__toc-popover::before {
	content: '';
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 12px;
	height: 12px;
	background: var(--kwl-ph-toc-bg);
	border-top: 1px solid var(--kwl-ph-toc-border);
	border-left: 1px solid var(--kwl-ph-toc-border);
}

/* Header-Zeile (Titel + Close) */
.kw-ph__toc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--kwl-space-sm, 0.5rem);
	padding-bottom: var(--kwl-space-xs, 0.25rem);
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(90deg, var(--kwl-accent, #BD9B5C) 0%, transparent 100%) 1;
}

.kw-ph__toc-title {
	font-weight: var(--kwl-fw-bold);
	font-size: var(--kwl-fsize-small, 0.875rem);
	color: var(--kwl-accent, #BD9B5C);
	letter-spacing: var(--kwl-ls-normal);
}

.kw-ph__toc-close[data-kwl-btn] {
	--kwl-btn-color: var(--kwl-ph-toc-text);
	--kwl-btn-bg: var(--kwl-ph-toc-hover-bg);
	--kwl-btn-radius: var(--kwl-radius-full, 9999px);
	padding: 0;
	border-width: 1px;
}

/* --- TOC-Liste (hierarchisch, Gold-Akzente) ------------------------------ */

.kw-ph__toc-list {
	--kwl-link-color: var(--kwl-ph-toc-link);
	--kwl-link-hover-color: var(--kwl-ph-toc-active);
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 50vh;
	overflow-y: auto;
	counter-reset: toc-h2;
	text-align: left;

	/* Schlanker Custom-Scrollbar */
	scrollbar-width: thin;
	scrollbar-color: rgba(189, 155, 92, 0.4) transparent;
}

.kw-ph__toc-list::-webkit-scrollbar {
	width: 4px;
}

.kw-ph__toc-list::-webkit-scrollbar-track {
	background: transparent;
}

.kw-ph__toc-list::-webkit-scrollbar-thumb {
	background: rgba(189, 155, 92, 0.4);
	border-radius: var(--kwl-radius-full, 9999px);
}

/* H2-Einträge (Top-Level) — Gold-Counter + Akzentlinie */
.kw-ph__toc-list > li {
	counter-increment: toc-h2;
	position: relative;
	padding: 0.35em 0 0.35em 0.5em;
	border-left: 2px solid transparent;
	transition: border-color 250ms ease, background 250ms ease;
}

/* Gold-Nummer vor H2: "1." "2." etc. */
.kw-ph__toc-list > li::before {
	content: counter(toc-h2) '.';
	color: var(--kwl-accent, #BD9B5C);
	font-weight: var(--kwl-fw-bold);
	font-size: 0.8em;
	margin-right: 0.4em;
	opacity: 0.5;
	transition: opacity 250ms ease;
}

/* Gelesener Abschnitt: Nummer volle Sichtbarkeit */
.kw-ph__toc-list > li.is-read::before {
	opacity: 1;
}

/* Aktiver H2-Eintrag: Gold-Linie links + Hintergrund */
.kw-ph__toc-list > li.is-active-parent {
	border-left-color: var(--kwl-accent, #BD9B5C);
	background: rgba(189, 155, 92, 0.08);
	border-radius: 0 4px 4px 0;
}

.kw-ph__toc-list > li.is-active-parent::before {
	opacity: 1;
}

/* H2-Links */
.kw-ph__toc-list a {
	color: var(--kwl-ph-toc-link);
	text-decoration: none;
	font-size: var(--kwl-fsize-small, 0.875rem);
	line-height: var(--kwl-lh-prose);
	display: inline-block;
	padding: 1px 4px;
	border-radius: 2px;
	transition: color 200ms ease;
}

.kw-ph__toc-list > li > a {
	font-weight: var(--kwl-fw-medium);
}

.kw-ph__toc-list a:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

/* Aktiver Link: Gold + fett */
.kw-ph__toc-list a.is-active {
	color: var(--kwl-ph-toc-active);
	font-weight: var(--kwl-fw-semibold);
}

.kw-ph__toc-list a:active {
	color: var(--kwl-ph-toc-active);
}

@media (hover: hover) {
	.kw-ph__toc-list a:hover {
		color: var(--kwl-ph-toc-active);
	}

	.kw-ph__toc-list > li:hover {
		background: var(--kwl-ph-toc-hover-bg);
		border-radius: 0 4px 4px 0;
	}
}

/* H3-Unterliste (eingerückt, verschachtelte Nummerierung: 1.1, 1.2) */
.kw-ph__toc-sublist {
	margin: 0.15em 0 0;
	padding: 0 0 0 1.2em;
	list-style: none;
	counter-reset: toc-h3;
}

.kw-ph__toc-sublist li {
	counter-increment: toc-h3;
	position: relative;
	padding: 0.15em 0 0.15em 0;
}

/* Verschachtelte Nummer: "1.1" "1.2" etc. */
.kw-ph__toc-sublist li::before {
	content: counter(toc-h2) '.' counter(toc-h3);
	color: var(--kwl-accent, #BD9B5C);
	font-weight: var(--kwl-fw-semibold);
	font-size: 0.75em;
	margin-right: 0.4em;
	opacity: 0.4;
	transition: opacity 250ms ease;
}

.kw-ph__toc-sublist li.is-read::before {
	opacity: 1;
}

.kw-ph__toc-sublist a {
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	color: var(--kwl-ph-toc-subtext);
	font-weight: var(--kwl-fw-regular);
}

/* Leer-Meldung */
.kw-ph__toc-empty {
	font-size: var(--kwl-fsize-small, 0.875rem);
	color: var(--kwl-ph-toc-empty);
	font-style: italic;
	margin: 0;
	padding: var(--kwl-space-sm, 0.5rem) 0;
}

/* --- Scroll-Progress (CSS-only, nur mit scroll-driven animations) -------- */

.kw-ph__progress {
	display: none;
}

@supports (animation-timeline: scroll()) {
	.kw-ph__progress {
		display: block;
		position: relative;
		width: 100%;
		height: var(--kwl-ph-progress-height);
		background: transparent;
		z-index: 2;
		margin-top: auto;
	}

	.kw-ph__progress-bar {
		height: 100%;
		background: linear-gradient(
			90deg,
			var(--kwl-ph-progress-color) 0%,
			color-mix(in srgb, var(--kwl-ph-progress-color) 80%, white) 100%
		);
		transform-origin: left;
		transform: scaleX(0);
		animation: kw-ph-scroll-progress linear;
		animation-timeline: scroll(root);
	}

	@keyframes kw-ph-scroll-progress {
		from {
			transform: scaleX(0);
		}

		to {
			transform: scaleX(1);
		}
	}
}

/* --- Responsive — Mobile-First ------------------------------------------- */

/* Desktop (>= 769px) */
@media (min-width: 769px) {
	.kw-ph__content {
		padding: var(--kwl-space-xl, 2rem) var(--kwl-space-lg, 1.5rem);
	}

}

/* --- Dark Mode ----------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	.kw-ph {
		--kwl-ph-overlay-base: #000;
		--kwl-ph-overlay-opacity: 0.6;
		--kwl-ph-overlay-tint: 0.25;

		--kwl-ph-title-color: #ffffff;
		--kwl-ph-title-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
		--kwl-ph-subtitle-color: rgba(255, 255, 255, 0.85);

		--kwl-ph-breadcrumb-color: rgba(255, 255, 255, 0.75);
		--kwl-ph-breadcrumb-link: rgba(255, 255, 255, 0.9);

		--kwl-ph-glass-bg: rgba(0, 0, 0, 0.5);
		--kwl-ph-glass-border: rgba(255, 255, 255, 0.1);
		--kwl-ph-glass-text: #ffffff;

		--kwl-ph-toc-bg: rgba(10, 15, 30, 0.94);
		--kwl-ph-toc-border: rgba(255, 255, 255, 0.08);
		--kwl-ph-toc-text: rgba(255, 255, 255, 0.9);
		--kwl-ph-toc-link: rgba(255, 255, 255, 0.8);
		--kwl-ph-toc-subtext: rgba(255, 255, 255, 0.6);
		--kwl-ph-toc-empty: rgba(255, 255, 255, 0.5);
		--kwl-ph-toc-hover-bg: rgba(255, 255, 255, 0.04);
		--kwl-ph-toc-shadow-alpha: 0.4;
	}

	.kw-ph--has-image {
		background: var(--kwl-primary, #00315d);
	}

	/* Ohne Bild: Dunklerer Gradient */
	.kw-ph:not(.kw-ph--has-image) {
		background: linear-gradient(
			135deg,
			color-mix(in srgb, var(--kwl-primary, #63b3ed) 20%, #1a202c) 0%,
			#0f1219 100%
		);
	}

	.kw-ph__breadcrumb-item a {
		text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	}

	.kw-ph__breadcrumb-item span[aria-current] {
		text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	}

	.kw-ph__badge:focus-visible,
	.kw-ph__breadcrumb-item a:focus-visible,
	.kw-ph__toc-list a:focus-visible,
	.kw-ph .kw-ph__badge--toc-trigger:focus-visible {
		outline-color: var(--kwl-focus, #c9a84c);
	}
}

@media (prefers-color-scheme: dark) and (hover: hover) {
	.kw-ph .kw-ph__badge--toc-trigger:not(.is-empty):hover {
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
	}
}

/* --- Reduced Motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	@supports (animation-timeline: scroll()) {
		.kw-ph__progress-bar {
			animation: none;
			transform: scaleX(1);
			opacity: 0.3;
		}
	}

	.kw-ph__badge,
	.kw-ph .kw-ph__badge--toc-trigger.is-empty,
	.kw-ph__breadcrumb-item a,
	.kw-ph__toc-list a,
	.kw-ph__toc-popover {
		transition: none;
	}
}

/* --- Elementor Flex-Container + V4 Editor Korrekturen -------------------- */

.e-con > .elementor-widget.elementor-widget-kw_page_header {
	align-self: stretch;
	width: 100%;
}

/* Elementor V4 Editor: Widget-Wrapper darf keinen eigenen Hintergrund haben */
.elementor-widget.elementor-widget-kw_page_header {
	background: transparent;
}

/* V4 Pink-Reset: zentral via [data-kwl-link] / [data-kwl-link-scope] (§281) */

/* --- Placeholder (Elementor Editor) -------------------------------------- */

.kw-ph-placeholder {
	padding: var(--kwl-space-lg, 1.5rem);
	text-align: center;
	color: var(--kwl-text-muted, #718096);
	font-style: italic;
	background: var(--kwl-bg-alt, #f7fafc);
	border: 2px dashed var(--kwl-border, #e2e8f0);
	border-radius: var(--kwl-radius-md, 8px);
}