/* ==========================================================================
   DayAtHotel Widget (#28) — Cinematic Scroll-Timeline
   10 Lichtphasen, Sonnen/Mond-Bahn, Sternenhimmel, Wolkendrift,
   Lichtstrahlen, Goldene-Stunde-Shimmer, Glühwürmchen, Horizont-Silhouette
   ========================================================================== */

/* --- @property Deklarationen (ermöglicht CSS-Transition auf Custom Properties) --- */
@property --kwl-day-glow {
	syntax: '<color>';
	inherits: true;
	initial-value: transparent;
}

@property --kwl-day-overlay-opacity {
	syntax: '<number>';
	inherits: true;
	initial-value: 0.45;
}

@property --kwl-day-time-color {
	syntax: '<color>';
	inherits: true;
	initial-value: #BD9B5C;
}

@property --kwl-day-current-text {
	syntax: '<color>';
	inherits: true;
	initial-value: #1a202c;
}

@property --kwl-day-horizon-color {
	syntax: '<color>';
	inherits: true;
	initial-value: #0a0a12;
}

@property --kwl-day-horizon-base-opacity {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

/* --- Overflow-Fix: Atmosphären-Elemente können den Body nicht verbreitern --- */
body:has(.kw-day) {
	overflow-x: clip;
}

/* --- CSS Custom Properties (Defaults) --- */
.kw-day {
	--kwl-day-card-bg: var(--kwl-bg, #ffffff);
	--kwl-day-text: var(--kwl-text, #1a202c);
	--kwl-day-text-muted: var(--kwl-text-muted, #718096);
	--kwl-day-overlay: rgba(0, 0, 0, 0.45);
	--kwl-day-badge-bg: var(--kwl-accent, #BD9B5C);
	--kwl-day-badge-color: #ffffff;
	--kwl-day-time-color: var(--kwl-accent, #BD9B5C);
	--kwl-day-link-color: var(--kwl-primary, #00315d);
	--kwl-day-progress-color: var(--kwl-accent, #BD9B5C);
	--kwl-day-progress-track: rgba(255, 255, 255, 0.25);
	--kwl-day-progress-height: 6px;
	--kwl-day-transition: 200ms ease;

	/* Licht-Engine: Zwei-Farben-Gradient (JS setzt per-Frame via RGB-Interpolation) */
	--kwl-day-sky-top: #4a98d4;
	--kwl-day-sky-bottom: #c8e0f0;
	--kwl-day-current-text: var(--kwl-day-text);
	--kwl-day-overlay-opacity: 0.45;

	/* Atmosphärischer Glow (Position folgt Sonne/Mond via JS) */
	--kwl-day-glow: transparent;
	--kwl-day-glow-x: 50%;
	--kwl-day-glow-y: 50%;

	/* Floating Frame: Bilder als gerundete Cards mit Glassmorphism */
	--kwl-day-frame-radius: var(--kwl-radius-lg, 12px);
	--kwl-day-frame-glass-bg: rgba(255, 255, 255, 0.08);
	--kwl-day-frame-border: rgba(255, 255, 255, 0.15);

	/* Himmelskörper (JS berechnet Position + Sichtbarkeit) */
	--kwl-day-sun-x: 50%;
	--kwl-day-sun-y: 50%;
	--kwl-day-sun-scale: 0;
	--kwl-day-moon-x: 50%;
	--kwl-day-moon-y: 30%;
	--kwl-day-moon-scale: 0;

	position: relative;
	height: calc(100svh * (var(--kwl-day-slot-count, 5) + 1));
	contain: style;

	/* Full-viewport breakout aus Elementor-Container */
	width: 100vw;
	margin-left: calc(-50vw + 50%);
}

/* Elementor Wrapper-Fix: overflow darf sticky nicht brechen */
.elementor-widget-kw_day_at_hotel {
	overflow: visible;
}


/* ==========================================================================
   STICKY VIEWPORT
   ========================================================================== */

.kw-day__viewport {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
	background: linear-gradient(180deg, var(--kwl-day-sky-top), var(--kwl-day-sky-bottom));
	color: var(--kwl-day-current-text);
	display: flex;
	flex-direction: column;
	contain: layout style;
	isolation: isolate;
	/* @property-gestützte Transitions für phasenabhängige Werte */
	transition:
		--kwl-day-glow 1.2s ease,
		--kwl-day-overlay-opacity 1s ease,
		--kwl-day-current-text 1s ease,
		color 0.6s ease;
}

/* Atmosphärischer Licht-Glow — folgt Sonne/Mond (JS setzt Position per Frame) */
.kw-day__viewport::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(
		ellipse 120% 80% at var(--kwl-day-glow-x) var(--kwl-day-glow-y),
		var(--kwl-day-glow) 0%,
		transparent 70%
	);
}

/* Atmosphärischer Dunst — mix-blend-mode: soft-light für natürliche Lichtstreuung */
.kw-day__viewport::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	mix-blend-mode: soft-light;
	transition: opacity 1.5s ease;
}


/* ==========================================================================
   HIMMELSKÖRPER — Sonne + Mond
   ========================================================================== */

.kw-day__sun {
	position: absolute;
	left: var(--kwl-day-sun-x);
	top: var(--kwl-day-sun-y);
	width: clamp(40px, 5vw, 80px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, #fffbe6 20%, #ffd700 50%, transparent 70%);
	transform: translate(-50%, -50%) scale(var(--kwl-day-sun-scale));
	filter: blur(2px);
	z-index: 1;
	pointer-events: none;
	animation: kw-day-sun-pulse 4s ease-in-out infinite;
}

@keyframes kw-day-sun-pulse {
	0%, 100% { box-shadow: 0 0 40px 15px rgba(255, 215, 0, 0.3), 0 0 80px 30px rgba(255, 180, 0, 0.15); }
	50% { box-shadow: 0 0 60px 25px rgba(255, 215, 0, 0.45), 0 0 120px 50px rgba(255, 180, 0, 0.2); }
}

.kw-day__moon {
	position: absolute;
	left: var(--kwl-day-moon-x);
	top: var(--kwl-day-moon-y);
	width: clamp(24px, 3vw, 48px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #f0f0ff 20%, #d0d0e8 60%, transparent 70%);
	transform: translate(-50%, -50%) scale(var(--kwl-day-moon-scale));
	z-index: 1;
	pointer-events: none;
	animation: kw-day-moon-glow 5s ease-in-out infinite;
}

@keyframes kw-day-moon-glow {
	0%, 100% { box-shadow: 0 0 20px 5px rgba(200, 200, 255, 0.2), 0 0 50px 15px rgba(180, 180, 240, 0.08); }
	50% { box-shadow: 0 0 30px 10px rgba(200, 200, 255, 0.35), 0 0 70px 25px rgba(180, 180, 240, 0.15); }
}


/* ==========================================================================
   STERNENHIMMEL — box-shadow Partikelsystem
   ========================================================================== */

.kw-day__stars {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 2s ease;
}

/* Kleine Sterne (~30 Stück) */
.kw-day__stars::before {
	content: '';
	position: absolute;
	width: 1px;
	height: 1px;
	border-radius: 50%;
	background: transparent;
	box-shadow:
		12vw 8vh 0 0.5px rgba(255, 255, 255, 0.8),
		25vw 5vh 0 0.5px rgba(255, 255, 255, 0.6),
		38vw 12vh 0 0.5px rgba(255, 255, 255, 0.7),
		52vw 6vh 0 0.5px rgba(255, 255, 255, 0.5),
		65vw 10vh 0 0.5px rgba(255, 255, 255, 0.8),
		78vw 4vh 0 0.5px rgba(255, 255, 255, 0.6),
		88vw 14vh 0 0.5px rgba(255, 255, 255, 0.7),
		5vw 22vh 0 0.5px rgba(255, 255, 255, 0.5),
		18vw 28vh 0 0.5px rgba(255, 255, 255, 0.7),
		32vw 20vh 0 0.5px rgba(255, 255, 255, 0.6),
		48vw 25vh 0 0.5px rgba(255, 255, 255, 0.8),
		62vw 18vh 0 0.5px rgba(255, 255, 255, 0.5),
		75vw 30vh 0 0.5px rgba(255, 255, 255, 0.7),
		90vw 22vh 0 0.5px rgba(255, 255, 255, 0.6),
		8vw 38vh 0 0.5px rgba(255, 255, 255, 0.8),
		22vw 42vh 0 0.5px rgba(255, 255, 255, 0.5),
		35vw 35vh 0 0.5px rgba(255, 255, 255, 0.7),
		55vw 40vh 0 0.5px rgba(255, 255, 255, 0.6),
		68vw 36vh 0 0.5px rgba(255, 255, 255, 0.8),
		82vw 45vh 0 0.5px rgba(255, 255, 255, 0.5),
		15vw 52vh 0 0.5px rgba(255, 255, 255, 0.7),
		42vw 55vh 0 0.5px rgba(255, 255, 255, 0.6),
		58vw 48vh 0 0.5px rgba(255, 255, 255, 0.5),
		72vw 52vh 0 0.5px rgba(255, 255, 255, 0.8),
		85vw 58vh 0 0.5px rgba(255, 255, 255, 0.6),
		3vw 62vh 0 0.5px rgba(255, 255, 255, 0.7),
		28vw 65vh 0 0.5px rgba(255, 255, 255, 0.5),
		95vw 8vh 0 0.5px rgba(255, 255, 255, 0.7),
		45vw 68vh 0 0.5px rgba(255, 255, 255, 0.6),
		92vw 35vh 0 0.5px rgba(255, 255, 255, 0.5);
	animation: kw-day-star-twinkle 4s ease-in-out infinite alternate;
}

/* Größere Sterne (~15 Stück) */
.kw-day__stars::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: transparent;
	box-shadow:
		10vw 15vh 0 1px rgba(255, 255, 255, 0.9),
		30vw 8vh 0 1px rgba(255, 255, 255, 0.7),
		50vw 20vh 0 1px rgba(255, 255, 255, 0.8),
		70vw 12vh 0 1px rgba(255, 255, 255, 0.6),
		85vw 25vh 0 1px rgba(255, 255, 255, 0.9),
		20vw 35vh 0 1px rgba(255, 255, 255, 0.7),
		40vw 30vh 0 1px rgba(255, 255, 255, 0.8),
		60vw 38vh 0 1px rgba(255, 255, 255, 0.6),
		80vw 42vh 0 1px rgba(255, 255, 255, 0.9),
		15vw 48vh 0 1px rgba(255, 255, 255, 0.7),
		55vw 55vh 0 1px rgba(255, 255, 255, 0.8),
		35vw 58vh 0 1px rgba(255, 255, 255, 0.6),
		75vw 50vh 0 1px rgba(255, 255, 255, 0.7),
		90vw 60vh 0 1px rgba(255, 255, 255, 0.8),
		5vw 55vh 0 1px rgba(255, 255, 255, 0.6);
	animation: kw-day-star-twinkle 5s ease-in-out 1s infinite alternate;
}

@keyframes kw-day-star-twinkle {
	0% { opacity: 0.6; }
	100% { opacity: 1; }
}

/* ==========================================================================
   WOLKEN-DRIFT — transluzente Formen via radial-gradient
   ========================================================================== */

.kw-day__clouds {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
	transition: opacity 2s ease;
}

/* Hohe, dünne Wolken — langsam */
.kw-day__clouds::before {
	content: '';
	position: absolute;
	top: 5%;
	left: -20%;
	width: 140%;
	height: 35%;
	background:
		radial-gradient(ellipse 28% 65% at 18% 50%, rgba(255, 255, 255, 0.28), transparent 70%),
		radial-gradient(ellipse 35% 55% at 50% 40%, rgba(255, 255, 255, 0.22), transparent 70%),
		radial-gradient(ellipse 24% 70% at 78% 55%, rgba(255, 255, 255, 0.25), transparent 70%);
	animation: kw-day-cloud-slow 50s linear infinite;
	will-change: transform;
}

/* Niedrigere, dichtere Wolken — schneller */
.kw-day__clouds::after {
	content: '';
	position: absolute;
	top: 18%;
	left: -15%;
	width: 130%;
	height: 26%;
	background:
		radial-gradient(ellipse 32% 60% at 28% 50%, rgba(255, 255, 255, 0.22), transparent 70%),
		radial-gradient(ellipse 26% 70% at 65% 45%, rgba(255, 255, 255, 0.18), transparent 70%);
	animation: kw-day-cloud-fast 35s linear infinite;
	will-change: transform;
}

@keyframes kw-day-cloud-slow {
	from { transform: translateX(0); }
	to { transform: translateX(-14%); }
}

@keyframes kw-day-cloud-fast {
	from { transform: translateX(0); }
	to { transform: translateX(-20%); }
}


/* ==========================================================================
   LICHTSTRAHLEN (GOD RAYS) — conic-gradient vom Sonnenpunkt
   ========================================================================== */

.kw-day__godrays {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.5s ease;
	background: conic-gradient(
		from 0deg at var(--kwl-day-sun-x, 50%) var(--kwl-day-sun-y, 50%),
		transparent 0deg,
		rgba(255, 220, 150, 0.18) 12deg,
		transparent 28deg,
		rgba(255, 220, 150, 0.12) 48deg,
		transparent 62deg,
		rgba(255, 220, 150, 0.15) 85deg,
		transparent 100deg,
		rgba(255, 220, 150, 0.1) 125deg,
		transparent 142deg,
		rgba(255, 220, 150, 0.16) 168deg,
		transparent 185deg,
		rgba(255, 220, 150, 0.12) 210deg,
		transparent 230deg,
		rgba(255, 220, 150, 0.14) 260deg,
		transparent 280deg,
		rgba(255, 220, 150, 0.1) 310deg,
		transparent 330deg,
		rgba(255, 220, 150, 0.16) 350deg,
		transparent 360deg
	);
	mask-image: radial-gradient(
		ellipse 80% 70% at var(--kwl-day-sun-x, 50%) var(--kwl-day-sun-y, 50%),
		black 10%, transparent 70%
	);
	-webkit-mask-image: radial-gradient(
		ellipse 80% 70% at var(--kwl-day-sun-x, 50%) var(--kwl-day-sun-y, 50%),
		black 10%, transparent 70%
	);
}


/* ==========================================================================
   GOLDENE-STUNDE-SHIMMER — wandernder Lichtstreifen
   ========================================================================== */

.kw-day__shimmer {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.5s ease;
	background: linear-gradient(
		105deg,
		transparent 40%,
		rgba(255, 220, 160, 0.15) 44%,
		rgba(255, 240, 200, 0.28) 50%,
		rgba(255, 220, 160, 0.15) 56%,
		transparent 60%
	);
	background-size: 250% 100%;
}

@keyframes kw-day-shimmer {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}


/* ==========================================================================
   GLÜHWÜRMCHEN — CSS-Partikel mit organischer Drift-Animation
   ========================================================================== */

.kw-day__fireflies {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	transition: opacity 2s ease;
}

.kw-day__firefly {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #ffeebb;
	box-shadow:
		0 0 4px 2px rgba(255, 220, 120, 0.6),
		0 0 12px 6px rgba(255, 200, 80, 0.3),
		0 0 24px 10px rgba(255, 180, 40, 0.1);
}

.kw-day__firefly:nth-of-type(1) {
	top: 25%; left: 15%;
	animation:
		kw-fly-x1 11s ease-in-out infinite alternate,
		kw-fly-y1 7s ease-in-out infinite alternate,
		kw-fly-blink 3.5s ease-in-out infinite;
}

.kw-day__firefly:nth-of-type(2) {
	top: 45%; left: 70%;
	animation:
		kw-fly-x2 14s ease-in-out infinite alternate,
		kw-fly-y2 9s ease-in-out infinite alternate,
		kw-fly-blink 4.5s ease-in-out 0.8s infinite;
}

.kw-day__firefly:nth-of-type(3) {
	top: 60%; left: 35%;
	animation:
		kw-fly-x1 12s ease-in-out infinite alternate,
		kw-fly-y2 8s ease-in-out infinite alternate,
		kw-fly-blink 3s ease-in-out 1.5s infinite;
}

.kw-day__firefly:nth-of-type(4) {
	top: 35%; left: 55%;
	animation:
		kw-fly-x2 10s ease-in-out infinite alternate,
		kw-fly-y1 11s ease-in-out infinite alternate,
		kw-fly-blink 5s ease-in-out 0.3s infinite;
}

.kw-day__firefly:nth-of-type(5) {
	top: 70%; left: 80%;
	animation:
		kw-fly-x1 13s ease-in-out infinite alternate,
		kw-fly-y1 10s ease-in-out infinite alternate,
		kw-fly-blink 4s ease-in-out 2s infinite;
}

.kw-day__firefly:nth-of-type(6) {
	top: 20%; left: 45%;
	animation:
		kw-fly-x2 15s ease-in-out infinite alternate,
		kw-fly-y2 12s ease-in-out infinite alternate,
		kw-fly-blink 3.8s ease-in-out 1s infinite;
}

@keyframes kw-fly-x1 { from { transform: translateX(0); } to { transform: translateX(50px); } }
@keyframes kw-fly-x2 { from { transform: translateX(0); } to { transform: translateX(-40px); } }
@keyframes kw-fly-y1 { from { transform: translateY(0); } to { transform: translateY(-35px); } }
@keyframes kw-fly-y2 { from { transform: translateY(0); } to { transform: translateY(30px); } }
@keyframes kw-fly-blink {
	0%, 100% { opacity: 0.15; }
	50% { opacity: 1; }
}


/* ==========================================================================
   HORIZONTALE TIEFE — 3 gestaffelte Silhouetten + Morgennebel + Vögel
   Ferne Hügel → Waldlinie → Stadtsilhouette (mit Fensterlichtern)
   Farb-Atmosphäre via color-mix() für automatische Luftperspektive
   ========================================================================== */

/* Basis-Styles für alle 3 Horizont-Ebenen */
.kw-day__horizon {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	pointer-events: none;
	transition:
		--kwl-day-horizon-color 1.5s ease,
		--kwl-day-horizon-base-opacity 1.5s ease;
}

/* Ferne Hügel — weite, sanfte Kuppen, atmosphärisch in den Himmel verblassend */
.kw-day__horizon--far {
	height: 28%;
	z-index: 1;
	background: color-mix(in srgb, var(--kwl-day-horizon-color, #0a0a12) 40%, var(--kwl-day-sky-bottom, #c8e0f0));
	opacity: calc(var(--kwl-day-horizon-base-opacity, 0) * 0.55);
	clip-path: polygon(
		0% 100%,
		0% 62%, 3% 58%, 7% 52%, 12% 48%, 16% 45%,
		20% 42%, 24% 44%, 28% 48%, 32% 52%, 35% 48%,
		38% 44%, 42% 40%, 46% 42%, 50% 46%, 54% 42%,
		58% 38%, 62% 40%, 66% 44%, 70% 48%, 74% 45%,
		78% 42%, 82% 46%, 86% 50%, 90% 48%, 94% 44%,
		97% 48%, 100% 52%, 100% 100%
	);
}

/* Waldlinie — gezackte Baumkronen mit markanten Nadelbäumen */
.kw-day__horizon--mid {
	height: 22%;
	z-index: 1;
	background: color-mix(in srgb, var(--kwl-day-horizon-color, #0a0a12) 70%, var(--kwl-day-sky-bottom, #c8e0f0));
	opacity: calc(var(--kwl-day-horizon-base-opacity, 0) * 0.75);
	clip-path: polygon(
		0% 100%,
		0% 58%, 1.5% 50%, 2.5% 58%, 4% 48%, 5% 55%, 6.5% 42%, 7.5% 52%,
		9% 44%, 10% 55%, 11.5% 40%, 12.5% 50%, 14% 36%, 15% 48%,
		16.5% 42%, 18% 55%, 19.5% 44%, 20.5% 38%, 21.5% 48%, 23% 55%,
		24.5% 46%, 26% 40%, 27% 50%, 28.5% 44%, 30% 36%, 31% 46%,
		32.5% 55%, 34% 42%, 35% 35%, 36% 45%, 37.5% 55%, 39% 48%,
		40.5% 40%, 42% 52%, 43.5% 44%, 45% 38%, 46% 48%, 47.5% 55%,
		49% 42%, 50.5% 36%, 51.5% 46%, 53% 55%, 54.5% 44%, 56% 38%,
		57% 48%, 58.5% 42%, 60% 34%, 61% 44%, 62.5% 55%, 64% 46%,
		65.5% 40%, 67% 50%, 68.5% 44%, 70% 38%, 71% 48%, 72.5% 55%,
		74% 46%, 75.5% 40%, 77% 52%, 78.5% 44%, 80% 36%, 81% 46%,
		82.5% 55%, 84% 48%, 85.5% 42%, 87% 50%, 88.5% 44%, 90% 38%,
		91% 48%, 92.5% 55%, 94% 46%, 95.5% 40%, 97% 50%, 98.5% 44%,
		100% 52%, 100% 100%
	);
}

/* Stadtsilhouette — markante Architektur mit Kirchturm und Hotelgebäude */
.kw-day__horizon--near {
	height: 18%;
	z-index: 2;
	background: var(--kwl-day-horizon-color, #0a0a12);
	opacity: var(--kwl-day-horizon-base-opacity, 0);
	clip-path: polygon(
		0% 100%,
		/* Wohnhäuser links */
		0% 62%, 2% 58%, 3.5% 62%, 5% 55%, 6% 60%, 7.5% 52%, 9% 58%,
		/* Kirchturm — markante Spitze */
		10% 50%, 11% 44%, 11.8% 36%, 12.3% 22%, 12.5% 10%, 13% 10%, 13.2% 22%,
		13.7% 36%, 14.5% 44%, 15.5% 50%,
		/* Übergang Altstadt */
		17% 56%, 18.5% 50%, 20% 55%, 21.5% 48%, 23% 54%, 24.5% 58%,
		/* Tiefe Passage (Parkanlage/Garten) */
		26% 64%, 28% 68%, 30% 65%,
		/* Hotel-Hauptgebäude — breiter Block mit Turm */
		32% 56%, 34% 48%, 36% 42%, 37.5% 36%, 39% 30%, 39.8% 22%,
		40% 14%, 40.5% 14%, 41% 22%, 41.2% 30%, 42.5% 36%,
		44% 42%, 46% 48%, 48% 56%,
		/* Stadtmitte — vielfältige Gebäudehöhen */
		50% 52%, 51.5% 46%, 53% 50%, 54.5% 44%, 55.5% 40%, 56.5% 44%,
		58% 50%, 59.5% 56%,
		/* Rathausturm — schlank und markant */
		61% 48%, 62% 40%, 62.5% 32%, 63% 24%, 63.5% 24%,
		64% 32%, 64.5% 40%, 65.5% 48%,
		/* Auslaufende Bebauung */
		67% 54%, 68.5% 58%, 70% 54%, 72% 50%, 73.5% 55%, 75% 58%,
		/* Wasserturm / Schornstein */
		77% 52%, 78% 44%, 78.5% 36%, 79% 36%, 79.5% 44%, 80.5% 52%,
		/* Gewerbehäuser Richtung Stadtrand */
		82% 56%, 84% 52%, 85.5% 48%, 87% 52%, 88.5% 56%,
		90% 60%, 92% 56%, 93.5% 52%, 95% 56%, 96.5% 60%,
		98% 56%, 100% 60%, 100% 100%
	);
}

/* Fensterlichter — glühende Punkte in den Gebäude-Silhouetten (nur nachts) */
.kw-day__horizon--near::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 2s ease;
	background:
		/* Kirchturm — spärliches Licht */
		radial-gradient(3px 4px at 12.8% 30%, rgba(255, 220, 120, 0.95), transparent 6px),
		radial-gradient(3px 4px at 12.7% 42%, rgba(255, 210, 100, 0.8), transparent 6px),
		/* Hotel-Turm — hell erleuchtet */
		radial-gradient(3px 4px at 40.2% 24%, rgba(255, 230, 140, 1), transparent 6px),
		radial-gradient(3px 4px at 40.8% 24%, rgba(255, 230, 140, 0.9), transparent 6px),
		radial-gradient(3px 4px at 40.2% 32%, rgba(255, 220, 120, 0.95), transparent 6px),
		radial-gradient(3px 4px at 40.8% 32%, rgba(255, 210, 100, 0.85), transparent 6px),
		radial-gradient(3px 4px at 40.2% 40%, rgba(255, 220, 120, 0.9), transparent 6px),
		radial-gradient(3px 4px at 40.8% 40%, rgba(255, 210, 100, 0.8), transparent 6px),
		radial-gradient(3px 4px at 39.5% 48%, rgba(255, 220, 120, 0.7), transparent 6px),
		radial-gradient(3px 4px at 41.5% 48%, rgba(255, 210, 100, 0.75), transparent 6px),
		/* Rathausturm */
		radial-gradient(3px 4px at 63.2% 32%, rgba(255, 220, 120, 0.9), transparent 6px),
		radial-gradient(3px 4px at 63.3% 42%, rgba(255, 210, 100, 0.8), transparent 6px),
		/* Wohnhäuser verstreut */
		radial-gradient(3px 4px at 18.5% 54%, rgba(255, 220, 120, 0.8), transparent 5px),
		radial-gradient(3px 4px at 23% 52%, rgba(255, 210, 100, 0.7), transparent 5px),
		radial-gradient(3px 4px at 51.5% 50%, rgba(255, 220, 120, 0.85), transparent 5px),
		radial-gradient(3px 4px at 55.5% 44%, rgba(255, 210, 100, 0.8), transparent 5px),
		radial-gradient(3px 4px at 72% 54%, rgba(255, 220, 120, 0.7), transparent 5px),
		radial-gradient(3px 4px at 85% 52%, rgba(255, 210, 100, 0.75), transparent 5px),
		/* Warme Lichtspiegelung am Gebäudesockel */
		radial-gradient(40px 15px at 40.5% 50%, rgba(255, 200, 100, 0.12), transparent),
		radial-gradient(25px 12px at 13% 48%, rgba(255, 200, 100, 0.08), transparent),
		radial-gradient(30px 12px at 63.3% 48%, rgba(255, 200, 100, 0.1), transparent);
}

@keyframes kw-day-window-flicker {
	0%, 100% { opacity: 0.75; }
	25% { opacity: 1; }
	50% { opacity: 0.85; }
	75% { opacity: 0.95; }
}


/* ==========================================================================
   VÖGEL — CSS-only Silhouetten, fliegen tagsüber über den Himmel
   ========================================================================== */

.kw-day__birds {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
	transition: opacity 2s ease;
}

.kw-day__bird {
	position: absolute;
	left: 0;
	width: 16px;
	height: 8px;
}

/* Zwei Flügel bilden eine V-Silhouette */
.kw-day__bird::before,
.kw-day__bird::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 50%;
	height: 3px;
	background: rgba(0, 10, 30, 0.55);
	border-radius: 1px;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

.kw-day__bird::before {
	left: 0;
	transform-origin: 100% 50%;
	animation: kw-day-wing-left 0.6s ease-in-out infinite;
}

.kw-day__bird::after {
	right: 0;
	transform-origin: 0% 50%;
	animation: kw-day-wing-right 0.6s ease-in-out infinite;
}

/* 5 Vögel mit unterschiedlichen Höhen, Geschwindigkeiten, Größen */
.kw-day__bird:nth-of-type(1) {
	top: 14%;
	width: 32px;
	height: 14px;
	animation: kw-day-bird-fly 20s linear infinite;
}

.kw-day__bird:nth-of-type(2) {
	top: 24%;
	width: 24px;
	height: 10px;
	animation: kw-day-bird-fly 26s linear -9s infinite;
}

.kw-day__bird:nth-of-type(3) {
	top: 10%;
	width: 28px;
	height: 12px;
	animation: kw-day-bird-fly 23s linear -16s infinite;
}

.kw-day__bird:nth-of-type(4) {
	top: 30%;
	width: 20px;
	height: 9px;
	animation: kw-day-bird-fly 30s linear -5s infinite;
}

.kw-day__bird:nth-of-type(5) {
	top: 18%;
	width: 26px;
	height: 11px;
	animation: kw-day-bird-fly 18s linear -12s infinite;
}

/* Unterschiedliche Flügelschlag-Geschwindigkeiten */
.kw-day__bird:nth-of-type(1)::before, .kw-day__bird:nth-of-type(1)::after { animation-duration: 0.5s; }
.kw-day__bird:nth-of-type(2)::before, .kw-day__bird:nth-of-type(2)::after { animation-duration: 0.7s; }
.kw-day__bird:nth-of-type(3)::before, .kw-day__bird:nth-of-type(3)::after { animation-duration: 0.55s; }
.kw-day__bird:nth-of-type(4)::before, .kw-day__bird:nth-of-type(4)::after { animation-duration: 0.8s; }
.kw-day__bird:nth-of-type(5)::before, .kw-day__bird:nth-of-type(5)::after { animation-duration: 0.45s; }

@keyframes kw-day-bird-fly {
	from { transform: translateX(110vw); }
	to { transform: translateX(-20vw); }
}

@keyframes kw-day-wing-left {
	0%, 100% { transform: rotate(-28deg); }
	50% { transform: rotate(-3deg); }
}

@keyframes kw-day-wing-right {
	0%, 100% { transform: rotate(28deg); }
	50% { transform: rotate(3deg); }
}


/* Morgennebel — atmosphärischer Dunst am Horizont, löst sich vormittags auf */
.kw-day__mist {
	position: absolute;
	bottom: 0;
	left: -5%;
	right: -5%;
	height: 35%;
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	transition: opacity 2.5s ease;
	background: linear-gradient(
		to top,
		rgba(255, 255, 255, 0.3) 0%,
		rgba(255, 255, 255, 0.12) 35%,
		transparent 70%
	);
	mix-blend-mode: soft-light;
}


/* ==========================================================================
   ÜBERSCHRIFT
   ========================================================================== */

.kw-day__heading {
	position: absolute;
	top: clamp(1rem, 3vh, 2rem);
	left: clamp(1.5rem, 4vw, 3rem);
	right: clamp(1.5rem, 4vw, 3rem);
	margin: 0;
	font-family: var(--kwl-font-heading);
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	font-weight: var(--kwl-fw-semibold);
	color: inherit;
	z-index: 5;
	opacity: 0.7;
	pointer-events: none;
	letter-spacing: var(--kwl-ls-wide);
	text-transform: uppercase;
}


/* ==========================================================================
   FORTSCHRITTSLEISTE
   ========================================================================== */

.kw-day__progress {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--kwl-day-progress-height);
	background: var(--kwl-day-progress-track);
	z-index: 6;
}

.kw-day__progress-fill {
	height: 100%;
	width: 0%;
	background: var(--kwl-day-progress-color);
	transition: width 0.1s linear;
	will-change: width;
	border-radius: 0 var(--kwl-radius-full, 9999px) var(--kwl-radius-full, 9999px) 0;
}


/* ==========================================================================
   SLOT-NAVIGATION (Dots, nur Desktop)
   ========================================================================== */

.kw-day__slot-nav {
	position: absolute;
	right: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: none;
	flex-direction: column;
	gap: 0.625rem;
}

@media (min-width: 768px) {
	.kw-day__slot-nav {
		display: flex;
	}
}

.kw-day__slot-dot {
	width: 10px;
	height: 10px;
	border-radius: var(--kwl-radius-full, 9999px);
	border: 2px solid var(--kwl-accent, #BD9B5C);
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
	position: relative;
}

/* Touch-Target 44px */
.kw-day__slot-dot::before {
	content: "";
	position: absolute;
	inset: -17px;
}

.kw-day__slot-dot.is-active {
	background: var(--kwl-accent, #BD9B5C);
	transform: scale(1.3);
}

.kw-day__slot-dot:active {
	transform: scale(0.85);
}

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

@media (hover: hover) {
	.kw-day__slot-dot:not(.is-active):hover {
		background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 40%, transparent);
		transform: scale(1.15);
	}
}

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

	.kw-day__slot-dot:active,
	.kw-day__now-badge:active {
		transform: none;
	}
}

/* ==========================================================================
   MOBILE-ONLY ELEMENTE — Desktop versteckt
   ========================================================================== */

.kw-day__mobile-nav {
	display: none;
}

.kw-day__snap-bg {
	display: none;
}

/* ==========================================================================
   SCROLL-HINWEIS — Maus (Desktop) / Wisch-Geste (Tablet)
   Auf Mobile (< 768px) ausgeblendet — dort kein Sticky-Scroll-Erlebnis.
   ========================================================================== */

.kw-day__scroll-hint {
	position: absolute;
	top: clamp(4rem, 9vh, 6rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	color: var(--kwl-day-current-text);
	transition: opacity 300ms ease, color 0.6s ease;
}

@media (min-width: 768px) {
	.kw-day__scroll-hint {
		display: flex;
	}
}

.kw-day__scroll-label {
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-small);
	font-weight: var(--kwl-fw-semibold);
	letter-spacing: var(--kwl-ls-wider);
	text-transform: uppercase;
}

.kw-day__scroll-hint {
	animation: kw-day-hint-pulse 2s ease infinite;
}

@keyframes kw-day-hint-pulse {
	0%, 100% { transform: translateX(-50%) scale(1); }
	50% { transform: translateX(-50%) scale(1.12); }
}

/* Maus-Icon: nur ab 1024px (echte Desktop-Nutzer mit Maus) */
.kw-day__scroll-mouse {
	display: none;
}

@media (min-width: 1024px) {
	.kw-day__scroll-mouse {
		display: block;
	}

	.kw-day__scroll-swipe {
		display: none;
	}
}

/* Scroll-Rad-Animation: Linie wandert nach unten und verblasst */
.kw-day__scroll-wheel {
	animation: kw-day-scroll-wheel 2s ease infinite;
}

@keyframes kw-day-scroll-wheel {
	0% { opacity: 1; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(4px); }
	75% { opacity: 0; transform: translateY(10px); }
	76% { opacity: 0; transform: translateY(0); }
	100% { opacity: 1; transform: translateY(0); }
}

/* Wisch-Geste-Animation: gesamtes Icon bewegt sich leicht nach oben */
.kw-day__scroll-swipe {
	animation: kw-day-swipe 1.8s ease infinite;
}

@keyframes kw-day-swipe {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
	.kw-day__scroll-hint,
	.kw-day__scroll-wheel,
	.kw-day__scroll-swipe {
		animation: none;
	}
}

/* ==========================================================================
   UHR
   ========================================================================== */

.kw-day__clock {
	position: absolute;
	top: clamp(1rem, 3vh, 2rem);
	right: clamp(1.5rem, 4vw, 3rem);
	z-index: 5;
	font-family: var(--kwl-font-heading);
	font-size: clamp(1rem, 1.8vw, 1.375rem);
	font-weight: var(--kwl-fw-bold);
	pointer-events: none;
	letter-spacing: var(--kwl-ls-widest);
	font-variant-numeric: tabular-nums;
	/* Hintergrund-Pill für Lesbarkeit in allen Lichtphasen */
	background: rgba(0, 0, 0, 0.2);
	padding: 0.25rem 0.75rem;
	border-radius: var(--kwl-radius-full, 9999px);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}


/* ==========================================================================
   NOW-BADGE (Viewport-Ebene)
   ========================================================================== */

.kw-day__now-badge {
	/* Button-Reset */
	border: none;
	cursor: pointer;

	position: absolute;
	top: clamp(1rem, 3vh, 2rem);
	left: 50%;
	transform: translateX(-50%);
	background: var(--kwl-accent, #BD9B5C);
	color: #ffffff;
	padding: 0.375rem 1.25rem;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	border-radius: var(--kwl-radius-full, 9999px);
	font-size: clamp(0.75rem, 1.2vw, 0.875rem);
	font-weight: var(--kwl-fw-bold);
	z-index: 6;
	letter-spacing: var(--kwl-ls-wide);
	box-shadow: var(--kwl-shadow-md);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kw-day__now-badge:active {
	transform: translateX(-50%) scale(0.95);
}

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

.kw-day__now-badge[hidden] {
	display: none;
}


/* ==========================================================================
   SLOTS CONTAINER + CROSSFADE
   ========================================================================== */

.kw-day__slots {
	flex: 1;
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
}

.kw-day__slot {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1.5rem, 4vw, 3rem);
	position: relative;
	z-index: 1;
}

.kw-day__slot[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	z-index: 2;
}

/* Per-Phase Farb-Overrides (Backend-gesteuert via Custom Properties) */
.kw-day__slot[style*="--kwl-day-color-text"] {
	color: var(--kwl-day-color-text);
}

.kw-day__slot[style*="--kwl-day-color-accent"] .kw-day__badge {
	background: var(--kwl-day-color-accent);
}

/* Spring-Modus: CSS-Transitions deaktiviert, JS Web Animations API übernimmt */
.kw-day--spring .kw-day__slot {
	transition: none;
	transform: none;
}


/* ==========================================================================
   LAYOUT: Hero — Vollbild-Bild mit Text-Overlay
   ========================================================================== */

.kw-day__slot--hero {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--kwl-space-lg, 1.5rem);
	padding: clamp(2rem, 5vw, 4rem);
}

.kw-day__media--hero {
	position: relative;
	max-width: min(70%, 48rem);
	max-height: 45vh;
	border-radius: var(--kwl-day-frame-radius);
	overflow: hidden;
	z-index: 0;
	box-shadow:
		0 8px 32px color-mix(in srgb, var(--kwl-day-sky-top) 30%, transparent),
		0 2px 8px rgba(0, 0, 0, 0.15);
	/* Ränder faden sanft in den Himmel aus */
	mask-image: radial-gradient(ellipse 90% 85% at center, #000 60%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 90% 85% at center, #000 60%, transparent 100%);
}

.kw-day__media--hero .kw-day__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kw-day__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--kwl-day-overlay) 0%, transparent 60%);
	opacity: var(--kwl-day-overlay-opacity);
	z-index: 1;
}

/* Glass-Panel unter dem Bild (nur wenn Bild vorhanden) */
.kw-day__slot--hero:has(.kw-day__img) .kw-day__content--hero {
	background: var(--kwl-day-frame-glass-bg);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--kwl-day-frame-border);
	border-radius: var(--kwl-day-frame-radius);
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.kw-day__content--hero {
	position: relative;
	z-index: 2;
	padding: clamp(2rem, 5vw, 4rem);
	color: #ffffff;
	max-width: min(70%, 48rem);
}

/* Hero OHNE Bild: Content zentriert, Phasenfarbe als Text */
.kw-day__slot--hero:not(:has(.kw-day__img)) {
	justify-content: center;
}

.kw-day__slot--hero:not(:has(.kw-day__img)) .kw-day__content--hero {
	color: inherit;
	text-align: center;
	align-items: center;
	display: flex;
	flex-direction: column;
	padding-bottom: clamp(2rem, 5vw, 4rem);
}

.kw-day__slot--hero:not(:has(.kw-day__img)) .kw-day__overlay {
	display: none;
}

/* Hero-Titel: extra groß */
.kw-day__content--hero .kw-day__title {
	font-size: clamp(2.5rem, 6vw, 4rem);
	line-height: var(--kwl-lh-tight);
	margin-bottom: var(--kwl-space-sm, 0.5rem);
}


/* ==========================================================================
   LAYOUT: Split — Bild + Text nebeneinander
   ========================================================================== */

.kw-day__slot--split {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: var(--kwl-space-lg, 1.5rem);
	padding: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
}

.kw-day__slot--split.kw-day__slot--img-right {
	direction: rtl;
}

.kw-day__slot--split.kw-day__slot--img-right > * {
	direction: ltr;
}

.kw-day__media--split {
	overflow: hidden;
	border-radius: var(--kwl-day-frame-radius);
	aspect-ratio: 3 / 4;
	box-shadow:
		0 8px 32px color-mix(in srgb, var(--kwl-day-sky-top) 30%, transparent),
		0 2px 8px rgba(0, 0, 0, 0.15);
	/* Ränder faden sanft in den Himmel aus */
	mask-image: radial-gradient(ellipse 85% 90% at center, #000 55%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 85% 90% at center, #000 55%, transparent 100%);
}

.kw-day__media--split .kw-day__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Glass-Panel neben dem Bild (nur wenn Bild vorhanden) */
.kw-day__slot--split:has(.kw-day__img) .kw-day__content--split {
	background: var(--kwl-day-frame-glass-bg);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--kwl-day-frame-border);
	border-radius: var(--kwl-day-frame-radius);
}

.kw-day__content--split {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2rem, 4vw, 4rem);
	max-width: none;
}

/* Split OHNE Bild: volle Breite */
.kw-day__slot--split:not(:has(.kw-day__img)) {
	grid-template-columns: 1fr;
}

.kw-day__slot--split:not(:has(.kw-day__img)) .kw-day__media--split {
	display: none;
}

.kw-day__slot--split:not(:has(.kw-day__img)) .kw-day__content--split {
	padding: clamp(2rem, 5vw, 5rem) clamp(3rem, 10vw, 12rem);
}


/* ==========================================================================
   LAYOUT: Kompakt — Icon + Text
   ========================================================================== */

.kw-day__slot--compact {
	justify-content: center;
	text-align: center;
}

.kw-day__content--compact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kwl-space-md, 1rem);
	max-width: 36rem;
}

.kw-day__icon {
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: var(--kwl-lh-none);
	color: var(--kwl-day-time-color);
}


/* ==========================================================================
   LAYOUT: Zitat — atmosphärisch, zentriert
   ========================================================================== */

.kw-day__slot--quote {
	justify-content: center;
	text-align: center;
}

.kw-day__content--quote {
	max-width: 44rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kwl-space-lg, 1.5rem);
}

.kw-day__quote {
	margin: 0;
	padding: 0;
}

.kw-day__quote p {
	font-family: var(--kwl-font-heading);
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: var(--kwl-fw-light);
	font-style: italic;
	line-height: var(--kwl-lh-snug);
	margin: 0;
}

.kw-day__cite {
	display: block;
	margin-top: var(--kwl-space-xs, 0.25rem);
	font-size: clamp(0.875rem, 1.2vw, 1.125rem);
	font-style: normal;
	opacity: 0.65;
	letter-spacing: var(--kwl-ls-normal);
}


/* ==========================================================================
   GEMEINSAME ELEMENTE — Typografie
   ========================================================================== */

.kw-day__time {
	display: inline-block;
	font-family: var(--kwl-font-heading);
	font-size: clamp(0.875rem, 1.5vw, 1.125rem);
	font-weight: var(--kwl-fw-semibold);
	color: var(--kwl-day-current-text);
	margin-bottom: var(--kwl-space-sm, 0.5rem);
	letter-spacing: var(--kwl-ls-ultra);
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-color: var(--kwl-accent, #BD9B5C);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.4em;
	text-decoration-skip-ink: none;
}

.kw-day__content--hero .kw-day__time {
	font-size: clamp(1rem, 1.8vw, 1.375rem);
}

.kw-day__title {
	margin: 0 0 var(--kwl-space-sm, 0.5rem);
	font-family: var(--kwl-font-heading);
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: var(--kwl-fw-bold);
	line-height: var(--kwl-lh-tight);
}

.kw-day__desc {
	margin: 0;
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	line-height: var(--kwl-lh-prose);
	opacity: 0.8;
	max-width: 36rem;
}

/* Text-Schatten für bessere Lesbarkeit auf Bild-Overlays */
.kw-day__slot--hero:has(.kw-day__img) .kw-day__content--hero .kw-day__time,
.kw-day__slot--hero:has(.kw-day__img) .kw-day__content--hero .kw-day__title,
.kw-day__slot--hero:has(.kw-day__img) .kw-day__content--hero .kw-day__desc {
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}


/* --- Badge --- */
.kw-day__badge {
	position: absolute;
	top: var(--kwl-space-md, 1rem);
	right: var(--kwl-space-md, 1rem);
	background: var(--kwl-day-badge-bg);
	color: var(--kwl-day-badge-color);
	padding: 0.25rem 0.75rem;
	border-radius: var(--kwl-radius-full, 9999px);
	font-size: var(--kwl-fsize-caption, 0.875rem);
	font-weight: var(--kwl-fw-semibold);
	z-index: 3;
}


/* --- Link --- */
.kw-day__link {
	--kwl-link-color: var(--kwl-day-link-color);
	--kwl-link-hover-color: var(--kwl-day-link-color);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--kwl-space-md, 1rem);
	font-weight: var(--kwl-fw-semibold);
	font-size: clamp(0.875rem, 1.3vw, 1.125rem);
	padding: 0.5rem 0;
	min-height: 44px;
	min-width: 44px;
	transition: color 200ms ease, opacity var(--kwl-day-transition);
}

.kw-day__content--hero .kw-day__link {
	--kwl-link-color: #ffffff;
	--kwl-link-hover-color: #ffffff;
}


/* --- Geheimer Slot --- */
.kw-day__hidden-slot {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--kwl-space-lg, 1.5rem);
	text-align: center;
	padding: var(--kwl-space-xl, 2rem);
	opacity: 0;
	transform: scale(0.95);
	transition: opacity 0.8s ease, transform 0.8s ease;
	z-index: 1;
}

.kw-day__hidden-slot.is-visible {
	opacity: 1;
	transform: scale(1);
}

.kw-day__hidden-slot[hidden] {
	display: none;
}

.kw-day__hidden-icon {
	font-size: clamp(2.5rem, 5vw, 4rem);
	color: var(--kwl-accent, #BD9B5C);
}

.kw-day__hidden-text {
	margin: 0;
	font-family: var(--kwl-font-heading);
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: var(--kwl-fw-semibold);
	max-width: 28rem;
	line-height: var(--kwl-lh-relaxed);
}


/* ==========================================================================
   LICHT-ENGINE — 10 Phasen via data-kw-day-phase

   Steuert: Glow, Overlay, Textfarbe, Atmosphären-Sichtbarkeit.
   Himmel-Gradient wird von JS per-Frame via RGB-Interpolation gesetzt.
   ========================================================================== */

/* --- Nacht (0:00–5:00 + 22:00–24:00) --- */
.kw-day__viewport[data-kw-day-phase="night"] {
	--kwl-day-current-text: #94a8c4;
	--kwl-day-overlay-opacity: 0.6;
	--kwl-day-glow: transparent;
}

.kw-day__viewport[data-kw-day-phase="night"] .kw-day__stars { opacity: 1; }
.kw-day__viewport[data-kw-day-phase="night"] .kw-day__fireflies { opacity: 1; }
.kw-day__viewport[data-kw-day-phase="night"] .kw-day__horizon { --kwl-day-horizon-base-opacity: 0.95; --kwl-day-horizon-color: #030508; }
.kw-day__viewport[data-kw-day-phase="night"] .kw-day__horizon--near::after { opacity: 1; animation: kw-day-window-flicker 4s ease-in-out infinite; }

/* --- Morgenröte (5:00–7:00) --- */
.kw-day__viewport[data-kw-day-phase="dawn"] {
	--kwl-day-current-text: #3a2018;
	--kwl-day-overlay-opacity: 0.35;
	--kwl-day-glow: rgba(244, 180, 100, 0.4);
}

.kw-day__viewport[data-kw-day-phase="dawn"] .kw-day__godrays { opacity: 0.5; }
.kw-day__viewport[data-kw-day-phase="dawn"] .kw-day__horizon { --kwl-day-horizon-base-opacity: 0.7; --kwl-day-horizon-color: #1a1018; }
.kw-day__viewport[data-kw-day-phase="dawn"] .kw-day__mist { opacity: 0.8; }
.kw-day__viewport[data-kw-day-phase="dawn"]::after {
	opacity: 0.4;
	background:
		radial-gradient(ellipse 100% 40% at 50% 100%, rgba(255, 200, 140, 0.5), transparent),
		radial-gradient(ellipse 60% 60% at 30% 70%, rgba(220, 180, 255, 0.3), transparent);
}

/* --- Morgen (7:00–10:00) --- */
.kw-day__viewport[data-kw-day-phase="morning"] {
	--kwl-day-current-text: #1a202c;
	--kwl-day-overlay-opacity: 0.4;
	--kwl-day-glow: rgba(255, 255, 240, 0.25);
}

.kw-day__viewport[data-kw-day-phase="morning"] .kw-day__clouds { opacity: 1; }
.kw-day__viewport[data-kw-day-phase="morning"] .kw-day__birds { opacity: 0.6; }
.kw-day__viewport[data-kw-day-phase="morning"] .kw-day__horizon { --kwl-day-horizon-base-opacity: 0.2; --kwl-day-horizon-color: #1a2a20; }
.kw-day__viewport[data-kw-day-phase="morning"] .kw-day__mist { opacity: 0.5; }
.kw-day__viewport[data-kw-day-phase="morning"]::after {
	opacity: 0.2;
	background: radial-gradient(ellipse 80% 60% at 60% 20%, rgba(255, 255, 240, 0.3), transparent);
}

/* --- Später Vormittag (10:00–12:00) --- */
.kw-day__viewport[data-kw-day-phase="late_morning"] {
	--kwl-day-current-text: #1a202c;
	--kwl-day-overlay-opacity: 0.4;
	--kwl-day-glow: rgba(255, 255, 220, 0.3);
}

.kw-day__viewport[data-kw-day-phase="late_morning"] .kw-day__clouds { opacity: 1; }
.kw-day__viewport[data-kw-day-phase="late_morning"] .kw-day__birds { opacity: 0.8; }
.kw-day__viewport[data-kw-day-phase="late_morning"] .kw-day__horizon { --kwl-day-horizon-base-opacity: 0.12; --kwl-day-horizon-color: #182818; }
.kw-day__viewport[data-kw-day-phase="late_morning"] .kw-day__mist { opacity: 0.15; }

/* --- Mittag (12:00–14:00) --- */
.kw-day__viewport[data-kw-day-phase="midday"] {
	--kwl-day-current-text: #1a202c;
	--kwl-day-overlay-opacity: 0.45;
	--kwl-day-glow: rgba(255, 255, 220, 0.35);
}

.kw-day__viewport[data-kw-day-phase="midday"] .kw-day__clouds { opacity: 0.8; }
.kw-day__viewport[data-kw-day-phase="midday"] .kw-day__birds { opacity: 1; }
.kw-day__viewport[data-kw-day-phase="midday"] .kw-day__horizon { --kwl-day-horizon-base-opacity: 0.08; --kwl-day-horizon-color: #202820; }
.kw-day__viewport[data-kw-day-phase="midday"]::after {
	opacity: 0.2;
	background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 255, 240, 0.5), transparent);
}

/* --- Nachmittag (14:00–16:00) --- */
.kw-day__viewport[data-kw-day-phase="afternoon"] {
	--kwl-day-current-text: #28180a;
	--kwl-day-overlay-opacity: 0.4;
	--kwl-day-glow: rgba(210, 170, 80, 0.25);
}

.kw-day__viewport[data-kw-day-phase="afternoon"] .kw-day__clouds { opacity: 0.7; }
.kw-day__viewport[data-kw-day-phase="afternoon"] .kw-day__birds { opacity: 0.7; }
.kw-day__viewport[data-kw-day-phase="afternoon"] .kw-day__godrays { opacity: 0.3; }
.kw-day__viewport[data-kw-day-phase="afternoon"] .kw-day__horizon { --kwl-day-horizon-base-opacity: 0.15; --kwl-day-horizon-color: #201a10; }

/* --- Goldene Stunde (16:00–18:00) --- */
.kw-day__viewport[data-kw-day-phase="golden_hour"] {
	--kwl-day-current-text: #281808;
	--kwl-day-overlay-opacity: 0.4;
	--kwl-day-glow: rgba(220, 160, 60, 0.4);
}

.kw-day__viewport[data-kw-day-phase="golden_hour"] .kw-day__clouds { opacity: 0.5; }
.kw-day__viewport[data-kw-day-phase="golden_hour"] .kw-day__godrays { opacity: 0.6; }
.kw-day__viewport[data-kw-day-phase="golden_hour"] .kw-day__shimmer { opacity: 1; animation: kw-day-shimmer 8s ease-in-out infinite; }
.kw-day__viewport[data-kw-day-phase="golden_hour"] .kw-day__horizon { --kwl-day-horizon-base-opacity: 0.35; --kwl-day-horizon-color: #181008; }
.kw-day__viewport[data-kw-day-phase="golden_hour"]::after {
	opacity: 0.5;
	background:
		radial-gradient(ellipse 120% 50% at 70% 80%, rgba(255, 180, 80, 0.4), transparent),
		radial-gradient(ellipse 60% 60% at 30% 50%, rgba(200, 140, 60, 0.2), transparent);
}

/* Warme Wolken bei goldener Stunde */
.kw-day__viewport[data-kw-day-phase="golden_hour"] .kw-day__clouds::before {
	background:
		radial-gradient(ellipse 22% 55% at 18% 50%, rgba(255, 200, 120, 0.15), transparent),
		radial-gradient(ellipse 30% 45% at 50% 40%, rgba(255, 180, 100, 0.1), transparent),
		radial-gradient(ellipse 18% 60% at 78% 55%, rgba(255, 190, 110, 0.12), transparent);
}

/* --- Sonnenuntergang (18:00–20:00) --- */
.kw-day__viewport[data-kw-day-phase="sunset"] {
	--kwl-day-current-text: #ffe8d8;
	--kwl-day-overlay-opacity: 0.5;
	--kwl-day-glow: rgba(255, 120, 40, 0.5);
}

.kw-day__viewport[data-kw-day-phase="sunset"] .kw-day__godrays { opacity: 0.8; }
.kw-day__viewport[data-kw-day-phase="sunset"] .kw-day__shimmer { opacity: 0.7; animation: kw-day-shimmer 10s ease-in-out infinite; }
.kw-day__viewport[data-kw-day-phase="sunset"] .kw-day__horizon { --kwl-day-horizon-base-opacity: 0.85; --kwl-day-horizon-color: #0a0510; }
.kw-day__viewport[data-kw-day-phase="sunset"] .kw-day__horizon--near::after { opacity: 0.3; }
.kw-day__viewport[data-kw-day-phase="sunset"]::after {
	opacity: 0.6;
	background:
		radial-gradient(ellipse 120% 50% at 50% 100%, rgba(255, 100, 50, 0.4), transparent),
		radial-gradient(ellipse 80% 60% at 30% 40%, rgba(180, 50, 180, 0.2), transparent);
}

/* Glühende Wolken bei Sonnenuntergang */
.kw-day__viewport[data-kw-day-phase="sunset"] .kw-day__clouds { opacity: 0.6; }
.kw-day__viewport[data-kw-day-phase="sunset"] .kw-day__clouds::before {
	background:
		radial-gradient(ellipse 22% 55% at 18% 50%, rgba(255, 130, 80, 0.2), transparent),
		radial-gradient(ellipse 30% 45% at 50% 40%, rgba(255, 100, 60, 0.15), transparent),
		radial-gradient(ellipse 18% 60% at 78% 55%, rgba(200, 80, 120, 0.12), transparent);
}

/* --- Abenddämmerung (20:00–22:00) --- */
.kw-day__viewport[data-kw-day-phase="twilight"] {
	--kwl-day-current-text: #b0b8d0;
	--kwl-day-overlay-opacity: 0.5;
	--kwl-day-glow: rgba(80, 60, 140, 0.2);
}

.kw-day__viewport[data-kw-day-phase="twilight"] .kw-day__stars { opacity: 0.6; }
.kw-day__viewport[data-kw-day-phase="twilight"] .kw-day__fireflies { opacity: 0.7; }
.kw-day__viewport[data-kw-day-phase="twilight"] .kw-day__horizon { --kwl-day-horizon-base-opacity: 0.9; --kwl-day-horizon-color: #050810; }
.kw-day__viewport[data-kw-day-phase="twilight"] .kw-day__horizon--near::after { opacity: 0.6; }

/* Link-Farbe für dunkle Phasen */
.kw-day__viewport[data-kw-day-phase="sunset"] .kw-day__link,
.kw-day__viewport[data-kw-day-phase="twilight"] .kw-day__link,
.kw-day__viewport[data-kw-day-phase="night"] .kw-day__link {
	color: var(--kwl-accent, #BD9B5C);
}


/* ==========================================================================
   EASTER EGGS — Mikro-Animationen
   ========================================================================== */

.kw-day__easter-egg {
	position: absolute;
	pointer-events: none;
	z-index: 3;
	opacity: 0;
	transition: opacity 0.8s ease;
}

.kw-day__slot[aria-hidden="false"] .kw-day__easter-egg {
	opacity: 1;
}

.kw-day__easter-egg--steam {
	bottom: 20%;
	right: 15%;
	color: var(--kwl-day-current-text);
}

.kw-day__easter-egg--stars {
	top: 10%;
	left: 10%;
	color: var(--kwl-day-current-text);
}

.kw-day__easter-egg--waves {
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	color: var(--kwl-day-current-text);
}

/* Dampf-Animation */
@keyframes kw-day-steam-rise {
	0% { transform: translateY(0); opacity: 0; }
	30% { opacity: 0.6; }
	100% { transform: translateY(-20px); opacity: 0; }
}

.kw-day__steam-wisp--1 { animation: kw-day-steam-rise 3s ease-in-out infinite; }
.kw-day__steam-wisp--2 { animation: kw-day-steam-rise 3.5s ease-in-out 0.5s infinite; }
.kw-day__steam-wisp--3 { animation: kw-day-steam-rise 2.8s ease-in-out 1s infinite; }

/* Stern-Twinkle (Easter Egg) */
@keyframes kw-day-ee-twinkle {
	0%, 100% { opacity: 0.3; transform: scale(0.8); }
	50% { opacity: 1; transform: scale(1.2); }
}

.kw-day__star--1 { animation: kw-day-ee-twinkle 2.5s ease-in-out infinite; }
.kw-day__star--2 { animation: kw-day-ee-twinkle 3s ease-in-out 0.5s infinite; }
.kw-day__star--3 { animation: kw-day-ee-twinkle 2s ease-in-out 1s infinite; }
.kw-day__star--4 { animation: kw-day-ee-twinkle 3.5s ease-in-out 1.5s infinite; }
.kw-day__star--5 { animation: kw-day-ee-twinkle 2.8s ease-in-out 0.8s infinite; }

/* Wellen-Animation */
@keyframes kw-day-wave-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

.kw-day__wave--1 { animation: kw-day-wave-float 3s ease-in-out infinite; }
.kw-day__wave--2 { animation: kw-day-wave-float 4s ease-in-out 0.5s infinite; }
.kw-day__wave--3 { animation: kw-day-wave-float 3.5s ease-in-out 1s infinite; }


/* ==========================================================================
   PARALLAX-TIEFE (Desktop, JS setzt --kwl-day-slot-offset)
   ========================================================================== */

.kw-day[data-kw-day-parallax="true"] .kw-day__media--hero .kw-day__img,
.kw-day[data-kw-day-parallax="true"] .kw-day__media--split .kw-day__img {
	transform: translateY(calc(var(--kwl-day-slot-offset, 0) * -30px));
	will-change: transform;
	transition: transform 0.1s linear;
}


/* ==========================================================================
   HOVER-REVEALS (nur Desktop mit echtem Hover)
   ========================================================================== */

@media (hover: hover) {
	.kw-day .kw-day__now-badge:hover {
		transform: translateX(-50%) scale(1.06);
		box-shadow: 0 4px 20px color-mix(in srgb, var(--kwl-accent, #BD9B5C) 60%, transparent);
		background: var(--kwl-accent, #BD9B5C);
		color: #ffffff;
	}

	.kw-day__slot--hero .kw-day__media--hero .kw-day__img {
		transition: transform 0.6s ease;
	}
	.kw-day__slot--hero:hover .kw-day__media--hero .kw-day__img {
		transform: scale(1.03);
	}

	/* Beschreibung + Cite immer sichtbar — Hover nur als Enhancement, nicht als Gate */
	.kw-day__slot--split .kw-day__desc {
		transition: opacity 0.5s ease, transform 0.5s ease;
	}
	.kw-day__slot--split:hover .kw-day__desc,
	.kw-day__slot--split:focus-within .kw-day__desc {
		opacity: 0.95;
		transform: translateY(-2px);
	}

	.kw-day__cite {
		transition: opacity 0.5s ease 0.1s;
	}
	.kw-day__slot--quote:hover .kw-day__cite,
	.kw-day__slot--quote:focus-within .kw-day__cite {
		opacity: 0.85;
	}

	.kw-day__link:hover {
		opacity: 0.7;
	}
}


/* ==========================================================================
   DARK MODE
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE — Mobil (320–767px): Fullscreen Snap-Cards
   Jeder Slot wird eine bildschirmfüllende Karte mit Vollbild-Foto.
   CSS scroll-snap für Einrasten, animation-timeline: view() für Entry.
   ========================================================================== */

@media (max-width: 767px) {

	/* ── A. Root & Viewport Reset ── */

	.kw-day {
		height: auto;
		width: 100%;
		margin-left: 0;
		contain: none;
	}

	.kw-day__viewport {
		position: relative;
		height: auto;
		overflow: visible;
		background: transparent;
		transition: none;
		contain: none;
		isolation: auto;
	}

	/* Atmosphären-Layer + Desktop-UI ausblenden */
	.kw-day__viewport::before,
	.kw-day__viewport::after,
	.kw-day__sun, .kw-day__moon, .kw-day__stars, .kw-day__clouds,
	.kw-day__godrays, .kw-day__shimmer, .kw-day__fireflies,
	.kw-day__birds, .kw-day__horizon, .kw-day__mist {
		display: none;
	}

	.kw-day__progress,
	.kw-day__clock,
	.kw-day__slot-nav,
	.kw-day__scroll-hint,
	.kw-day__heading,
	.kw-day__now-badge {
		display: none;
	}

	/* Scroll-Hinweis: Wisch-Geste oben auf der ersten Card */
	.kw-day .kw-day__viewport .kw-day__scroll-hint {
		display: flex;
		position: absolute;
		top: 5svh;
		bottom: auto;
		z-index: 5;
		animation: none;
		color: var(--kwl-day-current-text);
		transition: opacity 300ms ease;
	}

	/* ── B. Slots-Container (normaler Seitenfluss, kein Scroll-Container) ── */

	.kw-day__slots {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 0;
	}

	/* ── C. Fullscreen Cards ── */

	.kw-day__slot {
		grid-area: auto;
		opacity: 1;
		visibility: visible;
		transform: none;
		position: relative;
		height: 100svh;
		border-radius: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		box-shadow: none;
		border: none;
	}

	/* Phasen-Gradienten als Fallback für bildlose Slots */
	.kw-day__slot[data-kw-day-phase="night"]         { background: linear-gradient(180deg, #060d1f, #0f1b2d); color: #94a8c4; }
	.kw-day__slot[data-kw-day-phase="dawn"]           { background: linear-gradient(180deg, #7b5ea7, #f0b07a); color: #3a2018; }
	.kw-day__slot[data-kw-day-phase="morning"]        { background: linear-gradient(180deg, #4a98d4, #c8e0f0); color: #1a202c; }
	.kw-day__slot[data-kw-day-phase="late_morning"]   { background: linear-gradient(180deg, #3888c8, #b8d4e8); color: #1a202c; }
	.kw-day__slot[data-kw-day-phase="midday"]         { background: linear-gradient(180deg, #2878b8, #d0e8f8); color: #1a202c; }
	.kw-day__slot[data-kw-day-phase="afternoon"]      { background: linear-gradient(180deg, #5a8ab4, #d8d0be); color: #28180a; }
	.kw-day__slot[data-kw-day-phase="golden_hour"]    { background: linear-gradient(180deg, #a87030, #f0c080); color: #281808; }
	.kw-day__slot[data-kw-day-phase="sunset"]         { background: linear-gradient(180deg, #301848, #c85838); color: #ffe8d8; }
	.kw-day__slot[data-kw-day-phase="twilight"]       { background: linear-gradient(180deg, #0a1028, #1e2848); color: #b0b8d0; }

	/* ── D. Snap-Background (Vollbild-Foto) ── */

	.kw-day__snap-bg {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 0;
		overflow: hidden;
		pointer-events: none;
	}

	.kw-day__snap-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Overlay-Gradient für Text-Lesbarkeit auf Bild-Karten */
	.kw-day__slot:has(.kw-day__snap-bg)::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.75) 0%,
			rgba(0, 0, 0, 0.4) 35%,
			transparent 65%
		);
		pointer-events: none;
	}

	/* Bild-Karten: weißer Text */
	.kw-day__slot:has(.kw-day__snap-bg) {
		color: #ffffff;
	}

	/* ── E. Desktop-Layout-Elemente ausblenden (Bild steckt im Snap-Bg) ── */

	.kw-day__media--hero,
	.kw-day__media--split,
	.kw-day__polaroid-grid,
	.kw-day__filmstrip,
	.kw-day__overlay {
		display: none;
	}

	/* ── F. Text-Panel ── */

	.kw-day__slot [class*="kw-day__content"] {
		position: relative;
		z-index: 2;
		margin-top: auto;
		padding: var(--kwl-space-lg, 1.5rem) var(--kwl-space-md, 1rem);
		padding-bottom: max(var(--kwl-space-xl, 2rem), env(safe-area-inset-bottom));
		max-width: 100%;
	}

	/* Glassmorphism auf Bild-Karten */
	.kw-day__slot:has(.kw-day__snap-bg) [class*="kw-day__content"]::before {
		content: '';
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-radius: var(--kwl-radius-lg, 12px) var(--kwl-radius-lg, 12px) 0 0;
		z-index: -1;
	}

	/* Bildlose Karten: Text vertikal zentriert */
	.kw-day__slot:not(:has(.kw-day__snap-bg)) [class*="kw-day__content"] {
		margin-top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		text-align: center;
	}

	/* ── G. Typografie ── */

	.kw-day__time {
		display: inline-block;
		background: rgba(255, 255, 255, 0.15);
		padding: 0.25rem 0.75rem;
		border-radius: var(--kwl-radius-sm, 4px);
		font-size: clamp(0.75rem, 3vw, 0.875rem);
		margin-bottom: var(--kwl-space-sm, 0.5rem);
	}

	.kw-day__slot:has(.kw-day__snap-bg) .kw-day__time {
		background: rgba(0, 0, 0, 0.55);
		color: #ffffff;
	}

	.kw-day__title {
		font-size: clamp(1.5rem, 6vw, 2.25rem);
	}

	.kw-day__desc {
		font-size: clamp(0.875rem, 3.5vw, 1rem);
		line-height: var(--kwl-lh-body);
	}

	/* Beschreibung auf Bild-Karten begrenzen */
	.kw-day__slot:has(.kw-day__snap-bg) .kw-day__desc {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Zitate */
	.kw-day__cite {
		opacity: 0.65;
		transform: none;
	}

	.kw-day__slot--split .kw-day__desc {
		opacity: 0.8;
		transform: none;
	}

	/* Easter-Eggs: kleiner */
	.kw-day__easter-egg {
		transform: scale(0.7);
	}

	/* ── H. Mobile Progress-Dots ── */

	.kw-day__mobile-nav {
		display: flex;
		justify-content: center;
		gap: 0.5rem;
		padding: var(--kwl-space-sm, 0.5rem) var(--kwl-space-md, 1rem);
		position: sticky;
		top: 0;
		z-index: 10;
		margin-bottom: -44px;
	}

	.kw-day__mobile-nav[hidden] {
		display: none;
	}

	.kw-day__mobile-dot {
		width: 8px;
		height: 8px;
		border-radius: var(--kwl-radius-full, 9999px);
		border: none;
		background: rgba(255, 255, 255, 0.4);
		padding: 0;
		cursor: pointer;
		position: relative;
		transition: background-color 200ms ease, transform 200ms ease;
	}

	.kw-day__mobile-dot::before {
		content: '';
		position: absolute;
		inset: -18px;
	}

	.kw-day__mobile-dot.is-active {
		background: #ffffff;
		transform: scale(1.4);
	}

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

	/* ── I. Hidden Slot ── */

	.kw-day__hidden-slot {
		height: 100svh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: var(--kwl-space-lg, 1.5rem);
	}
}

/* ── J. CSS Scroll-Driven Entry-Animation (Mobile, @supports-gated) ── */

@keyframes kw-day-snap-entry {
	from {
		opacity: 0.3;
		transform: scale(0.92);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@media (max-width: 767px) {
	@supports (animation-timeline: view()) {
		@media (prefers-reduced-motion: no-preference) {
			.kw-day__slot {
				animation: kw-day-snap-entry linear both;
				animation-timeline: view();
				animation-range: entry 10% entry 50%;
			}
		}
	}
}

/* ── K. Reduced Motion (Mobile) ── */

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.kw-day__mobile-dot {
		transition: none;
	}
}

/* --- Tablet (768–1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
	.kw-day__media--hero {
		max-width: 80%;
		max-height: 45vh;
	}

	.kw-day__content--hero {
		max-width: 80%;
	}

	.kw-day__sun,
	.kw-day__moon {
		transform: scale(clamp(0.6, 5vw, 0.85));
	}

	.kw-day__clouds::before,
	.kw-day__clouds::after {
		width: 120%;
	}

	.kw-day__horizon--far {
		height: 22%;
	}

	.kw-day__horizon--mid {
		height: 18%;
	}

	.kw-day__horizon--near {
		height: 14%;
	}

	.kw-day__content--split {
		padding: var(--kwl-space-lg, 1.5rem);
	}
}


/* ==========================================================================
   BARRIEREFREIHEIT — Reduced Motion
   ========================================================================== */

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

	.kw-day__slot {
		transition: none;
	}

	.kw-day__progress-fill {
		transition: none;
	}

	.kw-day__hidden-slot {
		transition: none;
	}

	.kw-day__slot {
		transform: none;
	}

	/* Alle atmosphärischen Animationen aus */
	.kw-day__sun,
	.kw-day__moon,
	.kw-day__stars,
	.kw-day__stars::before,
	.kw-day__stars::after,
	.kw-day__clouds::before,
	.kw-day__clouds::after,
	.kw-day__shimmer,
	.kw-day__fireflies,
	.kw-day__firefly,
	.kw-day__birds,
	.kw-day__bird,
	.kw-day__bird::before,
	.kw-day__bird::after,
	.kw-day__horizon,
	.kw-day__horizon--near::after,
	.kw-day__mist {
		animation: none;
		transition: none;
	}

	/* Easter-Egg-Animationen aus */
	.kw-day__steam-wisp--1,
	.kw-day__steam-wisp--2,
	.kw-day__steam-wisp--3,
	.kw-day__star--1,
	.kw-day__star--2,
	.kw-day__star--3,
	.kw-day__star--4,
	.kw-day__star--5,
	.kw-day__wave--1,
	.kw-day__wave--2,
	.kw-day__wave--3 {
		animation: none;
	}

	.kw-day__easter-egg {
		transition: none;
	}

	.kw-day[data-kw-day-parallax="true"] .kw-day__media--hero .kw-day__img,
	.kw-day[data-kw-day-parallax="true"] .kw-day__media--split .kw-day__img {
		transform: none;
		will-change: auto;
		transition: none;
	}
}

/* sr-only Klasse (Projektstandard) */
.kw-day .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Focus-Visible */
.kw-day__link:active,
.kw-day a:active {
	opacity: 0.8;
}

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

/* ==========================================================================
   Polaroid-Layout — Gestreute Foto-Karten
   ========================================================================== */
.kw-day__slot--polaroid {
	flex-direction: column;
	align-items: center;
}

.kw-day__content--polaroid {
	text-align: center;
	margin-bottom: 1.5rem;
}

.kw-day__polaroid-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	padding: 1rem;
}

.kw-day__polaroid-card {
	background: #fff;
	padding: 8px 8px 24px;
	border-radius: 2px;
	box-shadow: var(--kwl-shadow-md, 0 4px 12px rgb(0 0 0 / 0.12));
	transform: rotate(var(--kwl-day-card-rotate, 0deg));
	transition: transform 400ms ease, box-shadow 400ms ease;
}

.kw-day__polaroid-card:nth-of-type(1) { --kwl-day-card-rotate: -3deg; }
.kw-day__polaroid-card:nth-of-type(2) { --kwl-day-card-rotate: 2deg; }
.kw-day__polaroid-card:nth-of-type(3) { --kwl-day-card-rotate: -1.5deg; }
.kw-day__polaroid-card:nth-of-type(4) { --kwl-day-card-rotate: 3.5deg; }
.kw-day__polaroid-card:nth-of-type(5) { --kwl-day-card-rotate: -2.5deg; }

@media (hover: hover) {
	.kw-day__polaroid-card:hover {
		transform: rotate(0deg) scale(1.05);
		box-shadow: var(--kwl-shadow-lg, 0 8px 25px rgb(0 0 0 / 0.18));
	}
}

.kw-day__polaroid-img {
	display: block;
	width: clamp(120px, 18vw, 200px);
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* Raster-Variante */
.kw-day__polaroid-grid--grid .kw-day__polaroid-card {
	--kwl-day-card-rotate: 0deg;
}

/* ==========================================================================
   Filmstrip-Layout — Horizontaler Bildstreifen
   ========================================================================== */
.kw-day__slot--filmstrip {
	flex-direction: column;
	align-items: center;
}

.kw-day__content--filmstrip {
	text-align: center;
	margin-bottom: 1rem;
}

.kw-day__filmstrip {
	display: flex;
	gap: 0.5rem;
	overflow: hidden;
	border-top: 3px solid var(--kwl-accent, #BD9B5C);
	padding-top: 0.75rem;
}

.kw-day__filmstrip-img {
	width: clamp(100px, 12vw, 160px);
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--kwl-radius-sm, 4px);
	transition: transform 300ms ease;
}

@media (hover: hover) {
	.kw-day__filmstrip-img:hover {
		transform: scale(1.08);
	}
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	.kw-day__polaroid-card,
	.kw-day__filmstrip-img {
		transition: none;
	}
}

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