/* ==========================================================================
   HeroImage Widget (#34) — Full-Width Hero mit zeitgesteuerten Bild-Sets.
   Crossfade, Feature-Boxen, Glassmorphism, IntersectionObserver-Animationen.
   ========================================================================== */

/* --- Custom Properties (Hero) ------------------------------------------- */

.kw-hero {
	--kwl-hero-height: 40svh;
	--kwl-hero-min-height: 240px;
	--kwl-hero-crossfade: 800ms;
	--kwl-hero-easing: var(--kwl-ease-default);
	--kwl-hero-object-position: center center;
	--kwl-hero-autoplay-duration: 6s;

	/* Overlay */
	--kwl-hero-overlay-color: var(--kwl-primary, #00315d);
	--kwl-hero-overlay-opacity: 0.3;

	/* Content Overlay (Titel, Untertitel, CTA) */
	--kwl-hero-title-color: #ffffff;
	--kwl-hero-title-shadow-color: rgba(0, 0, 0, 0.7);
	--kwl-hero-subtitle-color: rgba(255, 255, 255, 0.85);
	--kwl-hero-subtitle-shadow-color: rgba(0, 0, 0, 0.6);
	--kwl-hero-cta-bg: var(--kwl-accent, #BD9B5C);
	--kwl-hero-cta-text: var(--kwl-accent-contrast, #00315d);
	--kwl-hero-cta-hover-bg: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 85%, black);
	--kwl-hero-title-max-width: 600px;

	/* Ken Burns */
	--kwl-hero-kenburns-scale: 1.06;
	--kwl-hero-kenburns-duration: 8s;

	/* Progress-Indikator (Balken statt Kreise) */
	--kwl-hero-dot-bar-width: 32px;
	--kwl-hero-dot-bar-height: 3px;
	--kwl-hero-dot-color: rgba(255, 255, 255, 0.3);
	--kwl-hero-dot-active: #ffffff;

	/* Focus */
	--kwl-hero-focus: var(--kwl-focus, #7B6835);
}

/* --- Custom Properties (Feature Boxes) ---------------------------------- */

.kw-hero__boxes {
	--kwl-hero-box-bg: var(--kwl-bg, #ffffff);
	--kwl-hero-box-border: var(--kwl-border, #e2e8f0);
	--kwl-hero-box-text: var(--kwl-text, #1a202c);
	--kwl-hero-box-icon-color: var(--kwl-accent, #BD9B5C);
	--kwl-hero-box-link-color: var(--kwl-primary, #00315d);
	--kwl-hero-box-shadow: var(--kwl-shadow-md);

	/* Glassmorphism — dunkle Basis fuer garantierten Kontrast mit weissem Text.
	   0.55 als Default sichert >=4.5:1 fuer #fff auf hellen Hero-Bildern (Schnee/Strand). */
	--kwl-hero-glass-blur: blur(16px);
	--kwl-hero-glass-bg: rgba(0, 0, 0, 0.55);
	--kwl-hero-glass-bg-hover: rgba(0, 0, 0, 0.65);
	--kwl-hero-glass-border: rgba(255, 255, 255, 0.15);
	--kwl-hero-glass-text: #ffffff;
	--kwl-hero-glass-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

	/* Hover-Glow (Akzent-Schimmer um Card/Glass) — im Dark-Mode kraeftiger */
	--kwl-hero-box-hover-glow: 0 0 16px 0 rgba(189, 155, 92, 0.15);
}

/* Horizontalen Overflow durch 100vw-Breakout verhindern (100vw schliesst Scrollbar-Breite ein).
   body-Level noetig weil Elementor-Container auf Mobile anders verschachtelt sind.
   clip statt hidden: erzeugt keinen Scroll-Container, keine Seiteneffekte. */
body:has(.kw-hero) {
	overflow-x: clip;
}

/* --- Container (Full Viewport Width) ------------------------------------ */

.kw-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	height: var(--kwl-hero-height);
	min-height: var(--kwl-hero-min-height);
	overflow: hidden;
}

/* --- Slides ------------------------------------------------------------- */

.kw-hero__slides {
	position: relative;
	height: 100%;
	overflow: hidden;
}

.kw-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--kwl-hero-crossfade) var(--kwl-hero-easing);
	margin: 0;
}

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

/* Spezifitaet (0,2,0) noetig: Elementor setzt global .elementor-widget img { height: auto } (0,1,1) */
.kw-hero .kw-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--kwl-hero-object-position);
	transform: scale(1);
	transition: transform var(--kwl-hero-kenburns-duration) linear;
}

/* Ken Burns — dezenter Zoom, 5 verschiedene Richtungen pro Slide */
.kw-hero__slide:nth-child(5n+1) .kw-hero__image {
	transform-origin: 30% 60%;
}

.kw-hero__slide:nth-child(5n+2) .kw-hero__image {
	transform-origin: 70% 40%;
}

.kw-hero__slide:nth-child(5n+3) .kw-hero__image {
	transform-origin: 50% 30%;
}

.kw-hero__slide:nth-child(5n+4) .kw-hero__image {
	transform-origin: 80% 70%;
}

.kw-hero__slide:nth-child(5n+5) .kw-hero__image {
	transform-origin: 20% 35%;
}

.kw-hero__slide.is-active .kw-hero__image {
	will-change: transform;
	transform: scale(var(--kwl-hero-kenburns-scale));
}

/* --- Gradient Overlay — opacity-Ansatz statt color-mix(var()) ----------- */

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

.kw-hero__overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		transparent 30%,
		var(--kwl-hero-overlay-color)
	);
	opacity: var(--kwl-hero-overlay-opacity);
}

/* --- Content Overlay (pro Slide: Heading + Subtitle + CTA) -------------- */

.kw-hero__content {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-xs, 0.25rem);
	padding: var(--kwl-space-md, 1rem);
	max-width: min(var(--kwl-hero-title-max-width), calc(100vw - 2rem));
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Scrim — halbtransparenter Hintergrund hinter dem Textbereich (Frosted Glass) */
.kw-hero__content--scrim {
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: var(--kwl-radius-md, 12px);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Lichtreflex — Funkeln an der oberen rechten Ecke (Licht trifft Glaskante) */
.kw-hero__content--scrim::after {
	content: '';
	position: absolute;
	top: -4px;
	right: -4px;
	width: 24px;
	height: 24px;
	background: radial-gradient(
		circle at center,
		rgba(255, 255, 255, 0.9) 0%,
		rgba(255, 255, 255, 0.3) 30%,
		transparent 70%
	);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.kw-hero__slide.is-active .kw-hero__content--scrim::after {
	animation: kwl-hero-scrim-sparkle 600ms ease-out 900ms both;
}

/* CTA-Link braucht pointer-events */
.kw-hero__content a {
	pointer-events: auto;
}

/* Vertikale Position */
.kw-hero__content--top-left,
.kw-hero__content--top-center,
.kw-hero__content--top-right {
	top: var(--kwl-space-md, 1rem);
}

.kw-hero__content--center-left,
.kw-hero__content--center,
.kw-hero__content--center-right {
	top: 50%;
	transform: translateY(-50%);
}

.kw-hero__content--bottom-left,
.kw-hero__content--bottom-center,
.kw-hero__content--bottom-right {
	bottom: var(--kwl-space-xl, 3rem);
}

/* Horizontale Position */
.kw-hero__content--top-left,
.kw-hero__content--center-left,
.kw-hero__content--bottom-left {
	left: var(--kwl-space-md, 1rem);
	align-items: flex-start;
	text-align: left;
}

.kw-hero__content--top-center,
.kw-hero__content--center,
.kw-hero__content--bottom-center {
	left: 50%;
	transform: translateX(-50%);
	align-items: center;
	text-align: center;
}

/* Center-Mitte braucht beide Transforms */
.kw-hero__content--center {
	transform: translate(-50%, -50%);
}

.kw-hero__content--top-right,
.kw-hero__content--center-right,
.kw-hero__content--bottom-right {
	right: var(--kwl-space-md, 1rem);
	align-items: flex-end;
	text-align: right;
}

.kw-hero__heading {
	margin: 0;
	color: var(--kwl-hero-title-color);
	font-family: var(--kwl-font-heading);
	font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
	font-weight: var(--kwl-fw-bold);
	letter-spacing: var(--kwl-ls-light);
	text-shadow:
		0 1px 3px var(--kwl-hero-title-shadow-color),
		0 2px 16px var(--kwl-hero-title-shadow-color),
		0 0 60px rgba(0, 0, 0, 0.3);
	line-height: var(--kwl-lh-tight);
}

/* Dekorative Akzent-Linie unter der Ueberschrift */
.kw-hero__heading::after {
	content: '';
	display: block;
	width: 60px;
	height: 2px;
	background: linear-gradient(
		90deg,
		var(--kwl-accent, #BD9B5C),
		color-mix(in srgb, var(--kwl-accent, #BD9B5C) 30%, transparent)
	);
	margin-top: 0.75rem;
	border-radius: 1px;
	transform-origin: left;
}

/* Akzent-Linie zentriert bei zentriertem Content */
.kw-hero__content--top-center .kw-hero__heading::after,
.kw-hero__content--center .kw-hero__heading::after,
.kw-hero__content--bottom-center .kw-hero__heading::after {
	margin-inline: auto;
	transform-origin: center;
}

/* Akzent-Linie rechts bei rechtsbuendigem Content */
.kw-hero__content--top-right .kw-hero__heading::after,
.kw-hero__content--center-right .kw-hero__heading::after,
.kw-hero__content--bottom-right .kw-hero__heading::after {
	margin-left: auto;
	transform-origin: right;
}

.kw-hero__subtitle {
	margin: 0;
	color: var(--kwl-hero-subtitle-color);
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-h4, clamp(1rem, 0.9rem + 0.5vw, 1.25rem));
	font-weight: var(--kwl-fw-light);
	letter-spacing: var(--kwl-ls-wide);
	text-shadow:
		0 1px 2px var(--kwl-hero-subtitle-shadow-color),
		0 2px 12px var(--kwl-hero-subtitle-shadow-color),
		0 0 40px rgba(0, 0, 0, 0.2);
	line-height: var(--kwl-lh-body);
}

/* --- Gestaffelte Einblendung (Heading → Subtitle → CTA) --------------- */

.kw-hero__slide.is-active .kw-hero__heading {
	animation: kwl-hero-content-in 700ms var(--kwl-hero-easing) 200ms both;
}

.kw-hero__slide.is-active .kw-hero__heading::after {
	animation: kwl-hero-accent-in 500ms var(--kwl-hero-easing) 500ms both;
}

.kw-hero__slide.is-active .kw-hero__subtitle {
	animation: kwl-hero-content-in 700ms var(--kwl-hero-easing) 450ms both;
}

.kw-hero__slide.is-active .kw-hero__cta {
	animation: kwl-hero-content-in 700ms var(--kwl-hero-easing) 650ms both;
}

/* CTA-Button — Delegates to shared [data-kwl-btn="gradient"] */
.kw-hero .kw-hero__cta {
	margin-top: var(--kwl-space-sm, 0.75rem);
	padding: 0.875rem 2.25rem;
	min-height: 44px;
	text-transform: uppercase;
	letter-spacing: var(--kwl-ls-widest);
	white-space: nowrap;
	font-size: var(--kwl-fsize-body, 1rem);
}

/* Bridge: Widget-Tokens → Shared Gradient-Button-Component */
.kw-hero [data-kwl-btn="gradient"] {
	--kwl-btn-bg: var(--kwl-hero-cta-bg, var(--kwl-accent, #BD9B5C));
	--kwl-btn-color: var(--kwl-hero-cta-text, var(--kwl-btn-text, #ffffff));
}

@media (hover: hover) {
	.kw-hero [data-kwl-btn="gradient"]:hover {
		--kwl-btn-bg: var(--kwl-hero-cta-hover-bg, color-mix(in srgb, var(--kwl-accent, #BD9B5C) 85%, black));
	}
}

/* Dots nach unten verschieben wenn Titel oben positioniert ist */
.kw-hero:has(.kw-hero__content[class*="--top"]) .kw-hero__dots {
	top: auto;
	bottom: var(--kwl-space-md, 1rem);
}

/* --- Embed-Bereich (nur Desktop/Tablet) -------------------------------- */

.kw-hero__embed {
	display: none;
	max-width: 1200px;
	margin: calc(var(--kwl-space-md, 1rem) * -1) auto var(--kwl-space-md, 1rem);
	padding: 0 var(--kwl-space-md, 1rem);
	position: relative;
	z-index: 5;
}

.kw-hero__embed--dirs21 {
	min-height: 120px;
}

.kw-hero__embed-loading {
	text-align: center;
	color: var(--kwl-text-muted, #718096);
	font-size: var(--kwl-fsize-small, 0.875rem);
	padding: var(--kwl-space-md, 1rem) 0;
}

/* Mobile: fluide Font-Size erzwingen, hoehere Spezifitaet als Elementor (0,2,0 > 0,1,1) */
@media (max-width: 767px) {
	.kw-hero .kw-hero__heading {
		font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
	}

	.kw-hero .kw-hero__subtitle {
		font-size: var(--kwl-fsize-small, 0.875rem);
	}

	/* Dots auf Mobile ausblenden (Platz sparen, Pause-Button reicht) */
	.kw-hero__dots {
		display: none;
	}

	/* Pause-Button in die obere rechte Ecke (Boxen verdecken den unteren Bereich) */
	.kw-hero__pause {
		bottom: auto;
		top: var(--kwl-space-md, 1rem);
	}
}

/* --- Navigation Dots ---------------------------------------------------- */

.kw-hero__dots {
	position: absolute;
	top: var(--kwl-space-md, 1rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: var(--kwl-space-xs, 0.5rem);
}

.kw-hero__dot {
	position: relative;
	width: var(--kwl-hero-dot-bar-width);
	height: var(--kwl-hero-dot-bar-height);
	border-radius: 2px;
	border: none;
	background: var(--kwl-hero-dot-color);
	padding: 0;
	cursor: pointer;
	overflow: hidden;
	transition: background-color 200ms ease, transform 300ms var(--kwl-ease-decel);
}

.kw-hero__dot.is-active {
	background: var(--kwl-hero-dot-color);
}

/* Progress-Fuellung auf aktivem Balken */
.kw-hero__dot.is-active::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--kwl-hero-dot-active);
	border-radius: inherit;
	transform-origin: left;
	animation: kwl-hero-progress var(--kwl-hero-autoplay-duration, 6s) linear forwards;
}

/* Progress pausieren wenn Autoplay pausiert */
.kw-hero[data-autoplay-paused] .kw-hero__dot.is-active::after {
	animation-play-state: paused;
}

.kw-hero__dot:focus-visible {
	outline: 3px solid var(--kwl-hero-focus);
	outline-offset: 2px;
}

.kw-hero__dot:focus:not(:hover) {
	background: var(--kwl-hero-dot-color);
}

.kw-hero__dot:active {
	transform: scaleY(1.5);
	background: var(--kwl-hero-dot-active);
}

/* Touch-Target min. 44x44 */
.kw-hero__dot::before {
	content: "";
	position: absolute;
	inset: -16px;
}

/* --- Pause/Play Button (WCAG 2.2.2) ------------------------------------- */

/* Spezifitaet (0,2,0) gegen Elementor .elementor-kit-X button (0,1,1) */
.kw-hero .kw-hero__pause {
	position: absolute;
	bottom: var(--kwl-space-md, 1rem);
	right: var(--kwl-space-md, 1rem);
	z-index: 3;
	width: 44px;
	height: 44px;
	border: 2px solid var(--kwl-hero-dot-active);
	border-radius: var(--kwl-radius-full, 9999px);
	background: color-mix(in srgb, var(--kwl-primary, #00315d) 60%, transparent);
	color: var(--kwl-hero-dot-active);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color 200ms ease, transform 200ms ease;
}

.kw-hero .kw-hero__pause:focus-visible {
	outline: 3px solid var(--kwl-hero-focus);
	outline-offset: 2px;
}

.kw-hero .kw-hero__pause:focus:not(:hover) {
	background: color-mix(in srgb, var(--kwl-primary, #00315d) 60%, transparent);
	border-color: var(--kwl-hero-dot-active);
	color: var(--kwl-hero-dot-active);
}

/* Pause-Icon (zwei Balken) */
.kw-hero__pause-icon {
	display: flex;
	gap: 3px;
	transition: gap 250ms var(--kwl-ease-decel);
}

.kw-hero__pause-icon::before,
.kw-hero__pause-icon::after {
	content: "";
	width: 4px;
	height: 14px;
	background: var(--kwl-hero-dot-active);
	border-radius: 1px;
}

/* Play-Icon (Dreieck) */
.kw-hero__pause[aria-pressed="true"] .kw-hero__pause-icon {
	gap: 0;
}

.kw-hero__pause[aria-pressed="true"] .kw-hero__pause-icon::before {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent var(--kwl-hero-dot-active);
	background: transparent;
	border-radius: 0;
}

.kw-hero__pause[aria-pressed="true"] .kw-hero__pause-icon::after {
	display: none;
}

/* ==========================================================================
   Feature Boxes — CSS-Grid mit count-aware Spalten via [data-kw-hero-box-count].
   Default = 3 Boxen (Original-Look), 1-2 schrumpfen den Container, 4-5 packen
   mehr Spalten in den 1200px-Container (Boxen werden kleiner).
   align-items: stretch (Grid-Default) garantiert gleiche Hoehe in jeder Reihe.
   ========================================================================== */

.kw-hero__boxes {
	position: relative;
	z-index: 4;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--kwl-space-sm, 0.75rem);
	max-width: 1200px;
	margin-inline: auto;
	padding: 0 var(--kwl-space-md, 1rem);
	margin-top: calc(var(--kwl-space-xl, 2rem) * -2);
}

/* --- Mobile: quadratische Kacheln (Original-Look fuer 1-3 Boxen) -------- */

.kw-hero__box {
	--kwl-link-color: var(--kwl-hero-box-text);
	--kwl-link-hover-color: var(--kwl-hero-box-text);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--kwl-space-xs, 0.5rem);
	aspect-ratio: 1;
	padding: var(--kwl-space-sm, 0.75rem);
	color: var(--kwl-hero-box-text);
	text-align: center;
	transition: box-shadow 300ms ease, scale 80ms ease;
}

/* --- Count-aware Mobile-Layouts ---------------------------------------- */

/* N=1: 1 Spalte mit 1/3-Breite, zentriert (so gross wie 1 von 3 bei N=3) */
.kw-hero__boxes[data-kw-hero-box-count="1"] {
	grid-template-columns: minmax(0, calc(100% / 3));
	justify-content: center;
}

/* N=2: 2 Spalten mit 1/3-Breite, zentriert (so gross wie 2 von 3 bei N=3) */
.kw-hero__boxes[data-kw-hero-box-count="2"] {
	grid-template-columns: repeat(2, minmax(0, calc(100% / 3)));
	justify-content: center;
}

/* N=4 Mobile: 2x2 (mehr Reihen, leicht groesser pro Box als bei 3, aber 44px-touch-tauglich) */
.kw-hero__boxes[data-kw-hero-box-count="4"] {
	grid-template-columns: repeat(2, 1fr);
}

.kw-hero__boxes[data-kw-hero-box-count="4"] .kw-hero__box {
	aspect-ratio: auto;
	min-height: 140px;
}

/* N=5 Mobile: 2x2 + 5te Box zentriert mit halber Breite (alle gleich breit -> gleich hoch) */
.kw-hero__boxes[data-kw-hero-box-count="5"] {
	grid-template-columns: repeat(2, 1fr);
}

.kw-hero__boxes[data-kw-hero-box-count="5"] .kw-hero__box {
	aspect-ratio: auto;
	min-height: 140px;
}

.kw-hero__boxes[data-kw-hero-box-count="5"] .kw-hero__box:nth-child(5) {
	grid-column: 1 / -1;
	max-width: calc(50% - var(--kwl-space-sm, 0.75rem) / 2);
	justify-self: center;
}

/* Bridge: Widget-Tokens → Shared Card-Component (nur nicht-Glass) */
.kw-hero__box[data-kwl-card] {
	--kwl-card-bg: var(--kwl-hero-box-bg, var(--kwl-bg, #ffffff));
	--kwl-card-border: var(--kwl-hero-box-border, var(--kwl-border, #e2e8f0));
	--kwl-card-radius: var(--kwl-radius-md, 8px);
}

/* === Click/Focus/Active-State-Triade (BFSG + V4-Pink-Defense) ===========
   Globaler [data-kwl-link][data-kwl-link]:hover/:active/:focus-Reset in
   kwl-shared-components.css setzt BG/Border/Shadow auf transparent — fuer
   normale Text-Links korrekt, fuer Card-/Glass-Boxen aber Optik-Killer.
   Spezifitaet (0,3,1) schlaegt globalen (0,2,0) und V4-Kit (0,2,1).
   ======================================================================== */

/* Mausklick erzeugt sticky :focus aber NICHT :focus-visible -> kein sichtbares
   Outline (verhindert UA-/V4-Pink-Outline-Leak nach Klick) */
.kw-hero__boxes a.kw-hero__box:focus:not(:focus-visible) {
	outline: none;
}

/* Tastatur-Fokus: sichtbares Gold-Outline */
.kw-hero__boxes a.kw-hero__box:focus-visible {
	outline: 3px solid var(--kwl-hero-focus, var(--kwl-focus, #7B6835));
	outline-offset: 2px;
}

/* Glass: Goldline-Top im Focus-Visible (analog Hover) */
.kw-hero__boxes a.kw-hero__box--glass:focus-visible {
	border-top: 3px solid var(--kwl-accent, #BD9B5C);
}

/* Sticky-Focus nach Klick (kein Hover): Resting-Optik wiederherstellen,
   weil globaler [data-kwl-link]-Reset BG/Border/Shadow leerraeumt. */
.kw-hero__boxes a.kw-hero__box--glass:focus:not(:hover) {
	background: var(--kwl-hero-glass-bg);
	border-top: 3px solid var(--kwl-accent, #BD9B5C);
	box-shadow: var(--kwl-shadow-lg);
}

.kw-hero__boxes a.kw-hero__box[data-kwl-card]:focus:not(:hover) {
	--kwl-card-bg: var(--kwl-hero-box-bg, var(--kwl-bg, #ffffff));
	--kwl-card-border: var(--kwl-hero-box-border, var(--kwl-border, #e2e8f0));
	box-shadow: var(--kwl-shadow-md);
}

/* Active (waehrend Mausdruck): leicht intensivierte Optik analog Hover */
.kw-hero__boxes a.kw-hero__box--glass:active {
	background: var(--kwl-hero-glass-bg-hover);
	border-top: 3px solid var(--kwl-accent, #BD9B5C);
}

.kw-hero__boxes a.kw-hero__box[data-kwl-card]:active {
	--kwl-card-bg: var(--kwl-hero-box-bg, var(--kwl-bg, #ffffff));
	--kwl-card-border: var(--kwl-hero-box-border, var(--kwl-border, #e2e8f0));
}

/* Glassmorphism-Variante — Spezifitaet (0,2,0) gegen Elementor-Kit Farb-Overrides */
.kw-hero__boxes .kw-hero__box--glass {
	position: relative;
	overflow: hidden;
	background: var(--kwl-hero-glass-bg);
	backdrop-filter: var(--kwl-hero-glass-blur);
	-webkit-backdrop-filter: var(--kwl-hero-glass-blur);
	border: 1px solid var(--kwl-hero-glass-border);
	border-top: 3px solid var(--kwl-accent, #BD9B5C);
	color: var(--kwl-hero-glass-text);
	box-shadow: var(--kwl-shadow-lg);
}

/* Lichtreflex — dezenter Streifen der ueber die Glasflaeche wandert */
.kw-hero__box--glass::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		110deg,
		transparent 30%,
		rgba(255, 255, 255, 0.03) 40%,
		rgba(255, 255, 255, 0.06) 50%,
		rgba(255, 255, 255, 0.03) 60%,
		transparent 70%
	);
	transform: translateX(-200%);
	pointer-events: none;
	animation: kwl-hero-glass-reflex 12s ease-in-out 2s infinite;
}

.kw-hero__box--glass:nth-child(2)::before {
	animation-delay: 4s;
}

.kw-hero__box--glass:nth-child(3)::before {
	animation-delay: 6s;
}

.kw-hero__box--glass:nth-child(4)::before {
	animation-delay: 8s;
}

.kw-hero__box--glass:nth-child(5)::before {
	animation-delay: 10s;
}

/* Titel + Icon-Farbe explizit erzwingen (Elementor ueberschreibt geerbte Farben).
   text-shadow sichert Lesbarkeit auf hellen Hero-Bildern, falls backdrop-filter ausfaellt. */
.kw-hero__boxes .kw-hero__box--glass .kw-hero__box-title,
.kw-hero__boxes .kw-hero__box--glass .kw-hero__box-desc {
	color: var(--kwl-hero-glass-text);
	text-shadow: var(--kwl-hero-glass-text-shadow);
}

.kw-hero__boxes .kw-hero__box--glass .kw-hero__box-icon {
	color: var(--kwl-accent, #BD9B5C);
}

.kw-hero__box-icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--kwl-hero-box-icon-color);
}

.kw-hero__box-icon-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.kw-hero__box-title {
	margin: 0;
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-caption, 0.75rem);
	font-weight: var(--kwl-fw-semibold);
	line-height: var(--kwl-lh-snug);
}

/* Beschreibung + Link-Text auf Mobile ausgeblendet */
.kw-hero__box-desc {
	display: none;
}

.kw-hero__box-link {
	display: none;
}

/* --- Box Animations (IntersectionObserver) ------------------------------ */

/* Safe Default: Sichtbar ohne JS (AdBlocker, Fehler, etc.) */
.kw-hero__box--animated {
	opacity: 1;
}

/* Erst wenn JS bereit ist, Boxen fuer Animation verstecken */
.kw-hero__boxes--js-ready .kw-hero__box--animated {
	opacity: 0;
}

/* Fade Up */
.kw-hero__boxes--js-ready .kw-hero__box--animated:not(.is-visible) {
	transform: translateY(24px);
}

.kw-hero__box--animated.is-visible {
	animation: kwl-hero-fade-up 600ms var(--kwl-ease-default) forwards;
}

/* Staggered Delay (1-5 Boxen) */
.kw-hero__box--animated:nth-child(2).is-visible {
	animation-delay: 150ms;
}

.kw-hero__box--animated:nth-child(3).is-visible {
	animation-delay: 300ms;
}

.kw-hero__box--animated:nth-child(4).is-visible {
	animation-delay: 450ms;
}

.kw-hero__box--animated:nth-child(5).is-visible {
	animation-delay: 600ms;
}

@keyframes kwl-hero-fade-up {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes kwl-hero-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes kwl-hero-slide-left {
	from {
		opacity: 0;
		transform: translateX(-32px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes kwl-hero-content-in {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes kwl-hero-accent-in {
	from {
		opacity: 0;
		transform: scaleX(0);
	}

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

@keyframes kwl-hero-progress {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

@keyframes kwl-hero-scrim-sparkle {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}

	35% {
		opacity: 0.9;
		transform: scale(1.2);
	}

	100% {
		opacity: 0;
		transform: scale(0.8);
	}
}

@keyframes kwl-hero-glass-reflex {
	0%, 80% {
		transform: translateX(-200%);
	}

	95%, 100% {
		transform: translateX(200%);
	}
}

@keyframes kwl-hero-icon-lift {
	0%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-4px);
	}

	60% {
		transform: translateY(-2px);
	}
}

/* Animation-Typ-Varianten via data-Attribut auf der Boxen-Section */
[data-kw-hero-animation="fade-in"] .kw-hero__box--animated.is-visible {
	animation-name: kwl-hero-fade-in;
}

[data-kw-hero-animation="slide-left"] .kw-hero__box--animated.is-visible {
	animation-name: kwl-hero-slide-left;
}

/* --- Active-Feedback (Touch + Maus) ------------------------------------- */

/* scale (nicht transform) — unabhaengig von der Box-Einblend-Animation die transform blockiert */
.kw-hero__box:active {
	scale: 0.97;
}

/* --- Hover (nur mit Maus) ----------------------------------------------- */

@media (hover: hover) {
	/* Spezifitaet (0,3,1): schlaegt V4-Kit .elementor-kit-X a:hover (0,2,1).
	   border-top muss mit, weil V4-Hover sonst die Goldline entfernt. */
	.kw-hero__boxes a.kw-hero__box--glass:hover {
		background: var(--kwl-hero-glass-bg-hover);
		border-top: 3px solid var(--kwl-accent, #BD9B5C);
		box-shadow: var(--kwl-shadow-hover), var(--kwl-hero-box-hover-glow);
	}

	/* Non-Glass Card-Hover */
	.kw-hero__boxes a.kw-hero__box[data-kwl-card]:hover {
		--kwl-card-lift: -2px;
		box-shadow: var(--kwl-shadow-hover), var(--kwl-hero-box-hover-glow);
	}

	.kw-hero__boxes a.kw-hero__box:hover .kw-hero__box-icon {
		animation: kwl-hero-icon-lift 400ms ease;
	}

	.kw-hero__dot:hover {
		background: var(--kwl-accent, #BD9B5C);
		transform: scaleX(1.5);
	}

	.kw-hero .kw-hero__pause:hover {
		background: color-mix(in srgb, var(--kwl-primary, #00315d) 80%, transparent);
		color: var(--kwl-hero-dot-active);
		transform: scale(1.05);
	}
}

/* Pressed-Feedback (alle Geraete) */
.kw-hero .kw-hero__pause:active {
	transform: scale(0.9);
}

/* ==========================================================================
   Responsive — Kleine Phones <360px: Original-Wrap fuer N=3 + kompakteres Padding
   ========================================================================== */

@media (max-width: 359px) {
	.kw-hero__box {
		padding: var(--kwl-space-xs, 0.5rem);
	}

	/* N=3: 2 Spalten + Box 3 volle Breite (Original-Special-Case) */
	.kw-hero__boxes[data-kw-hero-box-count="3"] {
		grid-template-columns: repeat(2, 1fr);
	}

	.kw-hero__boxes[data-kw-hero-box-count="3"] .kw-hero__box:nth-child(3) {
		grid-column: 1 / -1;
		aspect-ratio: auto;
		min-height: 120px;
	}
}

/* ==========================================================================
   Responsive — Desktop: groesserer Hero, breitere Card-Optik
   ========================================================================== */

@media (min-width: 768px) {
	.kw-hero {
		--kwl-hero-height: 70svh;
		--kwl-hero-min-height: 400px;
	}

	.kw-hero__content {
		padding: var(--kwl-space-lg, 2rem);
		gap: var(--kwl-space-sm, 0.5rem);
	}

	.kw-hero__content--top-left,
	.kw-hero__content--top-center,
	.kw-hero__content--top-right {
		top: var(--kwl-space-xl, 3rem);
	}

	.kw-hero__content--bottom-left,
	.kw-hero__content--bottom-center,
	.kw-hero__content--bottom-right {
		bottom: var(--kwl-space-xl, 3rem);
	}

	.kw-hero__dots {
		top: var(--kwl-space-lg, 1.5rem);
	}

	.kw-hero:has(.kw-hero__content[class*="--top"]) .kw-hero__dots {
		top: auto;
		bottom: var(--kwl-space-lg, 1.5rem);
	}

	/* Embed-Bereich auf Desktop/Tablet sichtbar */
	.kw-hero__embed {
		display: block;
	}

	/* --- Feature Boxes: Card-Grid, count-aware --------------------------- */
	.kw-hero__boxes {
		gap: var(--kwl-space-md, 1rem);
		margin-top: calc(var(--kwl-space-xl, 3rem) * -2);
	}

	/* Spezifitaet (0,2,0) noetig: schlaegt Mobile-count-Overrides
	   wie [data-kw-hero-box-count="4"] .kw-hero__box (0,2,0) per Cascade. */
	.kw-hero__boxes .kw-hero__box {
		aspect-ratio: auto;
		min-height: 180px;
		padding: var(--kwl-space-xl, 2rem) var(--kwl-space-md, 1rem);
	}

	/* N=1: 1 Spalte, Container schrumpft auf 1/3 -> Box-Breite identisch zu 1 von 3 bei N=3.
	   +Padding-Compensation, damit innere Spalten-Breite mit N=3 matcht. */
	.kw-hero__boxes[data-kw-hero-box-count="1"] {
		grid-template-columns: 1fr;
		max-width: calc(1200px / 3 + var(--kwl-space-md, 1rem) * 2);
	}

	/* N=2: 2 Spalten, Container schrumpft auf 2/3 -> Boxen identisch zu 2 von 3 bei N=3. */
	.kw-hero__boxes[data-kw-hero-box-count="2"] {
		grid-template-columns: repeat(2, 1fr);
		max-width: calc(1200px * 2 / 3 + var(--kwl-space-md, 1rem) * 2);
	}

	/* N=3: Default greift (3 Spalten 1fr, Container 1200px) */

	/* N=4: 4 Spalten -> Box ~280px */
	.kw-hero__boxes[data-kw-hero-box-count="4"] {
		grid-template-columns: repeat(4, 1fr);
	}

	/* N=5: 5 Spalten -> Box ~221px */
	.kw-hero__boxes[data-kw-hero-box-count="5"] {
		grid-template-columns: repeat(5, 1fr);
	}

	/* N=5 Desktop: 5te Box NICHT mehr volle Breite (Mobile-Override resetten) */
	.kw-hero__boxes[data-kw-hero-box-count="5"] .kw-hero__box:nth-child(5) {
		grid-column: auto;
		max-width: none;
		justify-self: stretch;
	}

	.kw-hero__box-icon {
		width: 48px;
		height: 48px;
	}

	.kw-hero__box-title {
		font-size: var(--kwl-fsize-h4, 1.125rem);
	}

	.kw-hero__box-desc {
		display: block;
		margin: 0;
		font-size: var(--kwl-fsize-small, 0.875rem);
		opacity: 0.85;
		line-height: var(--kwl-lh-body);
	}

	.kw-hero__box-link {
		display: block;
		font-size: var(--kwl-fsize-small, 0.875rem);
		color: var(--kwl-hero-box-link-color);
		letter-spacing: var(--kwl-ls-wide);
		text-transform: uppercase;
		font-weight: var(--kwl-fw-semibold);
	}

	.kw-hero__box--glass .kw-hero__box-link {
		color: var(--kwl-accent, #BD9B5C);
	}

}


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

@media (prefers-color-scheme: dark) {
	.kw-hero {
		--kwl-hero-overlay-opacity: 0.5;
	}

	.kw-hero__boxes {
		/* Glass-Dark-Mode-Overrides */
		--kwl-hero-glass-border: rgba(255, 255, 255, 0.1);
		--kwl-hero-glass-bg: rgba(0, 0, 0, 0.6);
		--kwl-hero-glass-bg-hover: rgba(0, 0, 0, 0.7);

		/* Hover-Glow im Dark kraeftiger — 0.15 ist auf dunklem Hero-Bild kaum sichtbar */
		--kwl-hero-box-hover-glow: 0 0 16px 0 rgba(189, 155, 92, 0.30);
	}
}

/* --- Forced Colors (Windows High-Contrast / Kontrastdesigns) ----------- */
/* HC-Mode ersetzt color-mix()-Shadows, Glass-rgba-BG und Hover-Glow durch
   System-Substitutionen (oft grau/unsichtbar). Wir setzen explizit System-
   Colors fuer garantierte Erkennbarkeit. Pattern aus CLAUDE.md §321. */

@media (forced-colors: active) {
	.kw-hero__boxes .kw-hero__box {
		background: Canvas;
		color: CanvasText;
		border: 1px solid CanvasText;
	}

	.kw-hero__boxes .kw-hero__box--glass {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-top: 3px solid Highlight;
	}

	.kw-hero__boxes .kw-hero__box--glass .kw-hero__box-title,
	.kw-hero__boxes .kw-hero__box--glass .kw-hero__box-desc {
		color: CanvasText;
		text-shadow: none;
	}

	.kw-hero__boxes .kw-hero__box-icon {
		color: Highlight;
	}

	.kw-hero__boxes a.kw-hero__box:focus-visible {
		outline: 3px solid Highlight;
	}

	/* Hover/Focus/Active: HC-Mode hat kein color-mix/Glow, dafuer Highlight */
	.kw-hero__boxes a.kw-hero__box:hover,
	.kw-hero__boxes a.kw-hero__box:focus:not(:hover),
	.kw-hero__boxes a.kw-hero__box:active {
		background: Canvas;
		color: CanvasText;
		border-color: Highlight;
		box-shadow: none;
	}

	/* Glass-Reflex-Animation deaktivieren — pures dekoratives Element */
	.kw-hero__box--glass::before {
		display: none;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.kw-hero__slide {
		transition: none;
	}

	.kw-hero__box--animated {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.kw-hero__box--animated.is-visible {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.kw-hero__dot,
	.kw-hero__pause,
	.kw-hero__pause-icon {
		transition: none;
	}

	/* Ken Burns deaktivieren */
	.kw-hero .kw-hero__image {
		transition: none;
		transform: none;
	}

	.kw-hero__slide.is-active .kw-hero__image {
		transform: none;
	}

	/* Content-Stagger deaktivieren */
	.kw-hero__slide.is-active .kw-hero__heading,
	.kw-hero__slide.is-active .kw-hero__heading::after,
	.kw-hero__slide.is-active .kw-hero__subtitle,
	.kw-hero__slide.is-active .kw-hero__cta {
		animation: none;
		opacity: 1;
		transform: none;
	}

	/* Progress-Balken sofort gefuellt */
	.kw-hero__dot.is-active::after {
		animation: none;
		transform: scaleX(1);
	}

	/* Scrim-Sparkle + Glassmorphism-Lichtreflex deaktivieren */
	.kw-hero__content--scrim::after,
	.kw-hero__box--glass::before {
		animation: none;
	}

	/* Icon-Lift deaktivieren */
	a.kw-hero__box:hover .kw-hero__box-icon {
		animation: none;
	}

	/* Dot-Expansion deaktivieren */
	.kw-hero__dot:hover {
		transform: none;
	}
}

/* ==========================================================================
   Bewertungs-Wimpel (oben rechts, optional)

   - 3 Formen via clip-path/mask: dovetail · bookmark · scalloped
   - 3 Farbschemata via Custom-Property-Stack: burgundy · navy · emerald
   - Plastik-Wirkung durch 3-Stop-Verlauf + diagonalen Lichtreflex (::before)
     + Innenschatten oben + Außenschatten + optionale gestrichelte Naht (::after)
   - Fluide via clamp() mit vw-Anteil — vermeidet container-type auf .kw-hero
     (Gotcha: container-type stört Layout am Widget-Root)
   - BFSG: White-on-mid-Stop ≥ 7,5 : 1 (AAA) in Light + Dark für alle 3 Farben
   ========================================================================== */

.kw-hero__pennant {
	/* Default = Burgunder (Light). Color-Modifier überschreiben Mid+Top+Bot. */
	--kwl-pennant-text: #ffffff;
	--kwl-pennant-bg-top: #7A1F2A;
	--kwl-pennant-bg-mid: #5C1721;
	--kwl-pennant-bg-bot: #3D0E15;
	--kwl-pennant-stitch: rgba(255, 255, 255, 0.32);
	--kwl-pennant-shadow: var(--kwl-shadow-md, 0 6px 16px rgba(0, 0, 0, 0.18));

	/* V4-Bridge: shared-components.css setzt color via [data-kwl-link]
	   (Spezifität 0,1,1) — wir überschreiben dort die Tokens, statt
	   gegen die Spezifität anzukämpfen. Wirkt fuer Default + Hover + Focus. */
	--kwl-link-color: var(--kwl-pennant-text);
	--kwl-link-hover-color: var(--kwl-pennant-text);
	--kwl-link-underline: none;

	position: absolute;
	inset-block-start: 0;
	z-index: 5;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(2px, 0.4vw, 6px);

	/* Padding: oben/seiten kompakt, unten extra Platz für Form-Cut.
	   Mobile-First: kompakte Werte als Default, Desktop hebt via @media nach. */
	padding-block: clamp(12px, 2vw, 22px) clamp(24px, 4vw, 40px);
	padding-inline: clamp(8px, 1.4vw, 18px);
	width: clamp(96px, 26vw, 120px);
	inset-inline-end: 12px;
	min-height: 44px; /* BFSG Touch-Target */
	box-sizing: border-box;

	color: var(--kwl-pennant-text);
	text-align: center;
	text-decoration: none;
	font-family: var(--kwl-font-body, inherit);

	background:
		linear-gradient(
			180deg,
			var(--kwl-pennant-bg-top) 0%,
			var(--kwl-pennant-bg-mid) 45%,
			var(--kwl-pennant-bg-bot) 100%
		);

	/* Plastik: Innenkante hell oben (Stoffkante) + weicher Außenschatten */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.30),
		var(--kwl-pennant-shadow);

	transition:
		transform var(--kwl-transition, 200ms ease),
		filter var(--kwl-transition, 200ms ease);
}

/* Diagonaler Lichtreflex (::before) — folgt clip-path/mask des Wimpels */
.kw-hero__pennant::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.18) 0%,
			rgba(255, 255, 255, 0.04) 35%,
			transparent 60%
		);
	pointer-events: none;
}

/* Inhalts-Stack — typografische Hierarchie */
.kw-hero__pennant-intro {
	font-family: var(--kwl-font-body, inherit);
	font-size: clamp(0.62rem, 0.95vw, 0.78rem);
	font-weight: var(--kwl-fw-semibold, 600);
	line-height: var(--kwl-lh-snug, 1.25);
	letter-spacing: var(--kwl-ls-wide, 0.06em);
	text-transform: uppercase;
	opacity: 0.92;
}

.kw-hero__pennant-score {
	display: inline-flex;
	align-items: baseline;
	font-family: var(--kwl-font-heading, inherit);
	font-size: clamp(2.25rem, 3.6vw, 3.25rem);
	font-weight: var(--kwl-fw-bold, 700);
	line-height: var(--kwl-lh-none, 1);
	letter-spacing: var(--kwl-ls-tight, -0.01em);
	font-variant-numeric: tabular-nums;
	margin-block-start: clamp(2px, 0.5vw, 6px);
	/* Bewusst rgba() statt Token: Score-Schatten ist Plastik-Effekt auf
	   gradierter Fläche, kein semantischer Schatten. Token-Schatten
	   (--kwl-shadow-*) wären zu weich und würden den Lesbarkeits-Boost verfehlen. */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.kw-hero__pennant-scale {
	font-family: var(--kwl-font-body, inherit);
	font-size: clamp(0.75rem, 1.2vw, 1rem);
	font-weight: var(--kwl-fw-medium, 500);
	letter-spacing: 0;
	margin-inline-start: 2px;
	opacity: 0.78;
}

.kw-hero__pennant-count {
	font-family: var(--kwl-font-body, inherit);
	font-size: clamp(0.6rem, 0.85vw, 0.72rem);
	font-weight: var(--kwl-fw-medium, 500);
	line-height: var(--kwl-lh-snug, 1.3);
	letter-spacing: var(--kwl-ls-wide, 0.04em);
	font-variant-numeric: tabular-nums;
	opacity: 0.82;
	margin-block-start: clamp(2px, 0.4vw, 4px);
}

/* --- Form-Modifier -----------------------------------------------------
   Schwalbenschwanz (echter Wimpel-Look): zwei Außenpunkte am Bodenrand
   + inverse V-Kerbe in der Mitte, die nach oben in den Wimpel reicht.
   Lesezeichen: einzelne V-Spitze in der Mitte nach unten. */

.kw-hero__pennant--dovetail {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
	/* Notch reicht bis y=82% — Inhalt braucht Bottom-Padding ≥ 18% Höhe,
	   sonst überlappt Text-Bottom mit der V-Kerbe in der Mitte. */
	padding-block-end: clamp(32px, 5vw, 48px);
}

.kw-hero__pennant--bookmark {
	clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
}

/* Wellenkante: 4 Halbkreis-Aussparungen am unteren Rand */
.kw-hero__pennant--scalloped {
	--kwl-pennant-scallop: 11px;

	mask:
		radial-gradient(
			circle var(--kwl-pennant-scallop) at calc(var(--kwl-pennant-scallop) * 1) 100%,
			transparent calc(var(--kwl-pennant-scallop) - 0.5px),
			#000 var(--kwl-pennant-scallop)
		)
		0 0 / calc(var(--kwl-pennant-scallop) * 2) 100%;
	-webkit-mask:
		radial-gradient(
			circle var(--kwl-pennant-scallop) at calc(var(--kwl-pennant-scallop) * 1) 100%,
			transparent calc(var(--kwl-pennant-scallop) - 0.5px),
			#000 var(--kwl-pennant-scallop)
		)
		0 0 / calc(var(--kwl-pennant-scallop) * 2) 100%;
}

/* --- Farb-Modifier ----------------------------------------------------- */

.kw-hero__pennant--burgundy {
	--kwl-pennant-bg-top: #7A1F2A;
	--kwl-pennant-bg-mid: #5C1721;
	--kwl-pennant-bg-bot: #3D0E15;
}

.kw-hero__pennant--navy {
	--kwl-pennant-bg-top: #1E3A5F;
	--kwl-pennant-bg-mid: #00315D;
	--kwl-pennant-bg-bot: #001D3D;
}

.kw-hero__pennant--emerald {
	--kwl-pennant-bg-top: #1A5C3A;
	--kwl-pennant-bg-mid: #0D4429;
	--kwl-pennant-bg-bot: #062818;
}

/* --- Naht (::after) — gestrichelte Linie folgt der Wimpel-Form ---------
   Pattern: SVG-Pfad als mask-image, eingefärbt durch background-color.
   Pro Form ein eigener Pfad, der die Außenkontur (clip-path/mask) nachzeichnet,
   inset um ~4 viewBox-Einheiten. `vector-effect=non-scaling-stroke` hält die
   Linienstärke bei beliebiger Wimpel-Größe konstant bei 1px, `stroke-dasharray`
   liefert den Naht-Effekt. `preserveAspectRatio=none` streckt den Pfad auf
   die tatsächliche Wimpel-Größe.
   ---------------------------------------------------------------------- */

.kw-hero__pennant--stitched::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--kwl-pennant-stitch);
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	mask-position: center;
	pointer-events: none;
}

/* Schwalbenschwanz: Pfad folgt der echten Wimpel-Form mit zwei Außenpunkten
   bei (96,96)/(4,96) und nach oben gerichteter Kerbe bei (50,78). 4 viewBox-
   Einheiten Inset gegen die Form-Außenkante. */
.kw-hero__pennant--dovetail.kw-hero__pennant--stitched::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M4 4 L96 4 L96 96 L50 78 L4 96 Z' fill='none' stroke='%23000' stroke-width='1' stroke-dasharray='3 3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M4 4 L96 4 L96 96 L50 78 L4 96 Z' fill='none' stroke='%23000' stroke-width='1' stroke-dasharray='3 3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* Lesezeichen: Pfad mit flacherer V-Spitze unten */
.kw-hero__pennant--bookmark.kw-hero__pennant--stitched::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M4 4 L96 4 L96 83 L50 94 L4 83 Z' fill='none' stroke='%23000' stroke-width='1' stroke-dasharray='3 3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M4 4 L96 4 L96 83 L50 94 L4 83 Z' fill='none' stroke='%23000' stroke-width='1' stroke-dasharray='3 3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* Wellenkante: 5 Quadratic-Bezier-Bögen am unteren Rand, Peaks bei y=95
   (4 Einheiten vom Form-Boden y=100), Tröge bei y=87.5 (Bezier-Midpoint:
   0.25·95 + 0.5·80 + 0.25·95 = 87.5). Bei typischer Wimpel-Breite 120-156px
   ergibt das 5 Bögen, was mit den ~5-7 Form-Scallops gut harmoniert. */
.kw-hero__pennant--scalloped.kw-hero__pennant--stitched::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M4 4 L96 4 L96 95 Q87 80 78 95 Q68 80 59 95 Q50 80 41 95 Q32 80 22 95 Q13 80 4 95 Z' fill='none' stroke='%23000' stroke-width='1' stroke-dasharray='3 3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M4 4 L96 4 L96 95 Q87 80 78 95 Q68 80 59 95 Q50 80 41 95 Q32 80 22 95 Q13 80 4 95 Z' fill='none' stroke='%23000' stroke-width='1' stroke-dasharray='3 3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* --- Hover / Active / Focus (BFSG) ------------------------------------- */

@media (hover: hover) {
	a.kw-hero__pennant:hover {
		filter: brightness(1.08);
		transform: translateY(-2px);
	}
}

a.kw-hero__pennant:active {
	transform: translateY(0);
	filter: brightness(0.95);
}

/* :focus-visible-Outline kommt aus shared-components ([data-kwl-link][data-kwl-link]:focus-visible)
   mit 3px Gold + offset 2px + radius 4px — bewusst NICHT überschrieben. Outline rendert auf
   Bounding-Box (clip-path beschneidet sie nicht), bleibt also über Hero-Bild garantiert sichtbar. */

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

@media (prefers-color-scheme: dark) {
	.kw-hero__pennant {
		--kwl-pennant-shadow: var(--kwl-shadow-lg, 0 12px 28px rgba(0, 0, 0, 0.45));
	}

	.kw-hero__pennant--burgundy {
		--kwl-pennant-bg-top: #8B2331;
		--kwl-pennant-bg-mid: #6E1C28;
		--kwl-pennant-bg-bot: #4A111A;
	}

	.kw-hero__pennant--navy {
		--kwl-pennant-bg-top: #2D4F7D;
		--kwl-pennant-bg-mid: #1E3A5F;
		--kwl-pennant-bg-bot: #00315D;
	}

	.kw-hero__pennant--emerald {
		--kwl-pennant-bg-top: #2D8358;
		--kwl-pennant-bg-mid: #1A5C3A;
		--kwl-pennant-bg-bot: #0D4429;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.kw-hero__pennant {
		transition: none;
	}

	a.kw-hero__pennant:hover,
	a.kw-hero__pennant:active {
		transform: none;
		filter: none;
	}
}

/* --- Forced Colors (Windows High Contrast) ----------------------------- */

@media (forced-colors: active) {
	.kw-hero__pennant {
		background: Canvas;
		color: CanvasText;
		border: 2px solid CanvasText;
		box-shadow: none;
		clip-path: none;
		mask: none;
		-webkit-mask: none;
		forced-color-adjust: none;
	}

	.kw-hero__pennant::before,
	.kw-hero__pennant::after {
		display: none;
	}

	a.kw-hero__pennant {
		color: LinkText;
		border-color: LinkText;
	}

	a.kw-hero__pennant:focus-visible {
		outline: 3px solid Highlight;
	}
}

/* --- Tablet+ Aufwertung (Mobile-First) --------------------------------
   Untere Grenzen matchen die oberen Grenzen der Mobile-Defaults, damit
   beim Crossing des Breakpoints kein sichtbarer Größen-Sprung entsteht. */

@media (min-width: 481px) {
	.kw-hero__pennant {
		inset-inline-end: clamp(12px, 3vw, 32px);
		width: clamp(120px, 14vw, 156px);
	}
}