/*
 * Wetter Signage – Vollbild-Wetterdashboard
 *
 * Maßeinheit: Alle Größen hängen an --ws-scale, das JavaScript aus der
 * tatsächlichen Displaygröße berechnet. Dadurch sieht das Dashboard auf
 * 1080p, 4K und im Hochformat identisch proportioniert aus.
 */

.ws-root {
	--ws-scale: 1;
	--u: calc(1px * var(--ws-scale));

	/* Stimmung – wird je Wetterlage überschrieben. */
	--sky-1: #0b2545;
	--sky-2: #14375e;
	--sky-3: #1d5c8f;
	--sky-4: #0a1a2f;
	--accent: #6ec6ff;
	--accent-2: #a8e8ff;
	--ink: #ffffff;
	--ink-soft: rgba(255, 255, 255, 0.88);
	--ink-faint: rgba(255, 255, 255, 0.8);
	/* Der dunkle Anteil sichert weiße Schrift auch vor hellem Sommerhimmel. */
	--card: linear-gradient(158deg, rgba(255, 255, 255, 0.16), rgba(6, 14, 26, 0.34));
	--card-line: rgba(255, 255, 255, 0.18);
	--cloud-tint: rgba(255, 255, 255, 0.14);
	--glow: rgba(120, 200, 255, 0.35);
	/* Schleier über der Kulisse. Je heller der Himmel, desto kräftiger –
	   ohne ihn läge weiße Schrift vor einem Sommerhimmel bei 1,7:1. */
	--scrim: 0.22;

	position: relative;
	isolation: isolate;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--sky-4);
	color: var(--ink);
	font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	font-feature-settings: "tnum" 1, "lnum" 1;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	contain: layout paint style;
}

.ws-root.is-fullscreen {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	aspect-ratio: auto;
	z-index: 2147483000;
}

.ws-root.hide-cursor,
.ws-root.hide-cursor * {
	cursor: none;
}

.ws-root *,
.ws-root *::before,
.ws-root *::after {
	box-sizing: border-box;
}

.ws-root p,
.ws-root h1,
.ws-root ul,
.ws-root li {
	margin: 0;
	padding: 0;
	list-style: none;
}

html.ws-locked,
body.ws-locked {
	overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Wetterstimmungen
 * ------------------------------------------------------------------ */

.ws-root[data-theme="clear"] {
	--scrim: 0.28;
	--sky-1: #1878c8;
	--sky-2: #1a7bb2;
	--sky-3: #117ea5;
	--sky-4: #0d4a86;
	--accent: #ffd76e;
	--accent-2: #fff3c4;
	--glow: rgba(255, 214, 110, 0.45);
	--cloud-tint: rgba(255, 255, 255, 0.28);
}

.ws-root[data-theme="golden"] {
	--scrim: 0.28;
	--sky-1: #7a2f6d;
	--sky-2: #cf4347;
	--sky-3: #c74f00;
	--sky-4: #2b1440;
	--accent: #ffc46b;
	--accent-2: #ffe6b8;
	--glow: rgba(255, 150, 80, 0.5);
	--cloud-tint: rgba(255, 200, 170, 0.26);
}

.ws-root[data-theme="partly"] {
	--scrim: 0.28;
	--sky-1: #14639f;
	--sky-2: #257bae;
	--sky-3: #237cab;
	--sky-4: #0a3c66;
	--accent: #ffdf8a;
	--accent-2: #fff4cf;
	--glow: rgba(255, 223, 138, 0.36);
	--cloud-tint: rgba(255, 255, 255, 0.3);
}

.ws-root[data-theme="cloudy"] {
	--scrim: 0.22;
	--sky-1: #3c4a5c;
	--sky-2: #566577;
	--sky-3: #687687;
	--sky-4: #232c38;
	--accent: #cfe2f2;
	--accent-2: #eef5fb;
	--glow: rgba(200, 220, 240, 0.22);
	--cloud-tint: rgba(255, 255, 255, 0.2);
}

.ws-root[data-theme="fog"] {
	--scrim: 0.22;
	--sky-1: #4a5158;
	--sky-2: #6d757d;
	--sky-3: #6b767f;
	--sky-4: #2b3035;
	--accent: #dfe6ea;
	--accent-2: #f4f8fa;
	--glow: rgba(220, 230, 236, 0.2);
	--cloud-tint: rgba(255, 255, 255, 0.24);
}

.ws-root[data-theme="wind"] {
	--scrim: 0.22;
	--sky-1: #2b5a63;
	--sky-2: #3d7e85;
	--sky-3: #457e80;
	--sky-4: #16353c;
	--accent: #b9f0e6;
	--accent-2: #e4fbf6;
	--glow: rgba(150, 230, 215, 0.28);
}

.ws-root[data-theme="rain"] {
	--scrim: 0.18;
	--sky-1: #1c3a4f;
	--sky-2: #2b5670;
	--sky-3: #3f7591;
	--sky-4: #101f2c;
	--accent: #7fd0ff;
	--accent-2: #c8ecff;
	--glow: rgba(100, 180, 230, 0.28);
	--cloud-tint: rgba(220, 235, 245, 0.18);
}

.ws-root[data-theme="sleet"],
.ws-root[data-theme="hail"] {
	--scrim: 0.22;
	--sky-1: #26404f;
	--sky-2: #3a5f70;
	--sky-3: #537a8d;
	--sky-4: #14232c;
	--accent: #b7e6ff;
	--accent-2: #e2f5ff;
	--glow: rgba(150, 210, 240, 0.3);
}

.ws-root[data-theme="snow"] {
	--scrim: 0.22;
	--sky-1: #244a72;
	--sky-2: #3a6d99;
	--sky-3: #4579a4;
	--sky-4: #142c46;
	--accent: #e8f6ff;
	--accent-2: #ffffff;
	--glow: rgba(210, 235, 255, 0.34);
	--cloud-tint: rgba(255, 255, 255, 0.26);
}

.ws-root[data-theme="storm"] {
	--scrim: 0.08;
	--sky-1: #241d3d;
	--sky-2: #35284f;
	--sky-3: #4a3a63;
	--sky-4: #0f0a1c;
	--accent: #c9a4ff;
	--accent-2: #ecdcff;
	--glow: rgba(160, 120, 255, 0.3);
	--cloud-tint: rgba(200, 190, 220, 0.16);
}

/* Nachtabsenkung: gleiche Stimmung, deutlich dunkler und kühler. */
.ws-root[data-day="0"] {
	--scrim: 0.06;
	--sky-1: #0d1b33;
	--sky-2: #142949;
	--sky-3: #1e3c66;
	--sky-4: #050a16;
	--accent: #9fd4ff;
	--accent-2: #d9eeff;
	--glow: rgba(120, 170, 240, 0.24);
	--cloud-tint: rgba(180, 200, 230, 0.12);
}

.ws-root[data-day="0"][data-theme="rain"] {
	--sky-1: #0b1e2c;
	--sky-2: #123246;
	--sky-3: #1b4459;
	--sky-4: #040c14;
}

.ws-root[data-day="0"][data-theme="storm"] {
	--sky-1: #150f26;
	--sky-2: #1f1738;
	--sky-3: #2c2049;
	--sky-4: #05030d;
	--accent: #c9a4ff;
}

.ws-root[data-day="0"][data-theme="snow"] {
	--sky-1: #16294a;
	--sky-2: #21406b;
	--sky-3: #35598a;
	--sky-4: #0a1730;
}

/* ------------------------------------------------------------------ *
 * Bühne: Himmel, Gestirn, Wolken, Effekte
 * ------------------------------------------------------------------ */

.ws-stage {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Reihenfolge der Bühnenebenen von unten nach oben. */
.ws-sky { z-index: 1; }
.ws-glow { z-index: 2; }
.ws-stars { z-index: 3; }
.ws-celestial { z-index: 4; }
.ws-clouds { z-index: 5; }
.ws-scrim { z-index: 6; }
.ws-fx--precip { z-index: 7; }
.ws-fx--glass { z-index: 8; }
.ws-flash { z-index: 9; }
.ws-warnwash { z-index: 10; }
.ws-grain { z-index: 11; }
.ws-vignette { z-index: 12; }

/* Dämpft Himmel, Sonne und Wolken, damit die Schrift trägt. Der Niederschlag
   liegt darüber und bleibt dadurch klar sichtbar. */
.ws-scrim {
	position: absolute;
	inset: 0;
	background: #050c16;
	opacity: var(--scrim, 0.22);
	transition: opacity 1.6s ease;
}

.ws-sky {
	position: absolute;
	inset: -10%;
	background:
		radial-gradient(120% 90% at 78% 8%, var(--sky-3) 0%, transparent 58%),
		radial-gradient(140% 100% at 12% 100%, var(--sky-1) 0%, transparent 62%),
		linear-gradient(168deg, var(--sky-2) 0%, var(--sky-1) 46%, var(--sky-4) 100%);
	animation: ws-sky-breathe 46s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes ws-sky-breathe {
	0% {
		transform: scale(1) translate3d(0, 0, 0);
	}
	100% {
		transform: scale(1.07) translate3d(calc(-14 * var(--u)), calc(-10 * var(--u)), 0);
	}
}

.ws-glow {
	position: absolute;
	top: -18%;
	right: -8%;
	width: 62%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, var(--glow) 0%, transparent 66%);
	filter: blur(calc(28 * var(--u)));
	animation: ws-glow-pulse 11s ease-in-out infinite alternate;
	will-change: opacity, transform;
}

@keyframes ws-glow-pulse {
	0% {
		opacity: 0.62;
		transform: scale(1);
	}
	100% {
		opacity: 1;
		transform: scale(1.12);
	}
}

/* --- Sternenfeld (nur nachts) --- */

.ws-stars {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 2.4s ease;
	background-image:
		radial-gradient(1.6px 1.6px at 18% 22%, rgba(255, 255, 255, 0.9) 50%, transparent 51%),
		radial-gradient(1.2px 1.2px at 62% 12%, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
		radial-gradient(1.8px 1.8px at 84% 34%, rgba(255, 255, 255, 0.85) 50%, transparent 51%),
		radial-gradient(1.1px 1.1px at 34% 58%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 8% 68%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
		radial-gradient(1.3px 1.3px at 72% 74%, rgba(255, 255, 255, 0.65) 50%, transparent 51%),
		radial-gradient(1.7px 1.7px at 46% 30%, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
		radial-gradient(1.1px 1.1px at 92% 62%, rgba(255, 255, 255, 0.55) 50%, transparent 51%);
	background-size: 42% 46%, 37% 41%, 51% 55%, 33% 38%, 45% 49%, 39% 44%, 47% 52%, 35% 40%;
	animation: ws-twinkle 7s ease-in-out infinite alternate;
}

.ws-root[data-day="0"] .ws-stars {
	opacity: 1;
}

.ws-root[data-day="0"][data-theme="rain"] .ws-stars,
.ws-root[data-day="0"][data-theme="storm"] .ws-stars,
.ws-root[data-day="0"][data-theme="snow"] .ws-stars,
.ws-root[data-day="0"][data-theme="fog"] .ws-stars,
.ws-root[data-day="0"][data-theme="cloudy"] .ws-stars {
	opacity: 0.18;
}

@keyframes ws-twinkle {
	0% {
		opacity: 0.55;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.7;
	}
}

/* --- Sonne / Mond --- */

.ws-celestial {
	position: absolute;
	top: 9%;
	right: 13%;
	width: calc(190 * var(--u));
	height: calc(190 * var(--u));
	opacity: 0;
	transition: opacity 1.6s ease;
}

.ws-root[data-theme="clear"] .ws-celestial,
.ws-root[data-theme="partly"] .ws-celestial,
.ws-root[data-theme="golden"] .ws-celestial,
.ws-root[data-theme="wind"] .ws-celestial {
	opacity: 1;
}

.ws-celestial__body {
	position: absolute;
	inset: 24%;
	border-radius: 50%;
	background: radial-gradient(circle at 36% 32%, var(--accent-2), var(--accent) 62%, transparent 74%);
	box-shadow:
		0 0 calc(60 * var(--u)) calc(14 * var(--u)) var(--glow),
		0 0 calc(160 * var(--u)) calc(50 * var(--u)) var(--glow);
	animation: ws-sun-pulse 6.5s ease-in-out infinite alternate;
}

/* Strahlenkranz */
.ws-celestial::before {
	content: "";
	position: absolute;
	inset: -20%;
	border-radius: 50%;
	background: repeating-conic-gradient(
		from 0deg,
		var(--accent) 0deg 1.6deg,
		transparent 1.6deg 15deg
	);
	-webkit-mask-image: radial-gradient(circle, transparent 33%, #000 40%, #000 62%, transparent 72%);
	mask-image: radial-gradient(circle, transparent 33%, #000 40%, #000 62%, transparent 72%);
	opacity: 0.4;
	filter: blur(calc(1.2 * var(--u)));
	animation: ws-rays 90s linear infinite;
}

/* Zweiter, gegenläufiger Kranz für lebendigeres Funkeln */
.ws-celestial::after {
	content: "";
	position: absolute;
	inset: -6%;
	border-radius: 50%;
	background: repeating-conic-gradient(
		from 12deg,
		var(--accent-2) 0deg 0.9deg,
		transparent 0.9deg 9deg
	);
	-webkit-mask-image: radial-gradient(circle, transparent 36%, #000 44%, transparent 58%);
	mask-image: radial-gradient(circle, transparent 36%, #000 44%, transparent 58%);
	opacity: 0.32;
	animation: ws-rays 58s linear infinite reverse;
}

.ws-root[data-day="0"] .ws-celestial {
	opacity: 1;
}

.ws-root[data-day="0"] .ws-celestial::before,
.ws-root[data-day="0"] .ws-celestial::after {
	opacity: 0.1;
	animation-duration: 180s;
}

/* Mondsichel durch einen versetzten Schatten */
.ws-root[data-day="0"] .ws-celestial__body {
	background: radial-gradient(circle at 38% 34%, #ffffff, #dfe9f7 58%, #b8c9e0 78%);
	box-shadow:
		inset calc(-26 * var(--u)) calc(-8 * var(--u)) 0 calc(-4 * var(--u)) var(--sky-4),
		0 0 calc(50 * var(--u)) calc(8 * var(--u)) rgba(200, 220, 255, 0.28),
		0 0 calc(130 * var(--u)) calc(36 * var(--u)) rgba(160, 190, 240, 0.18);
	animation: ws-moon-pulse 9s ease-in-out infinite alternate;
}

.ws-root[data-day="0"][data-theme="rain"] .ws-celestial,
.ws-root[data-day="0"][data-theme="storm"] .ws-celestial,
.ws-root[data-day="0"][data-theme="snow"] .ws-celestial,
.ws-root[data-day="0"][data-theme="fog"] .ws-celestial {
	opacity: 0.28;
}

@keyframes ws-rays {
	to {
		transform: rotate(360deg);
	}
}

@keyframes ws-sun-pulse {
	0% {
		transform: scale(1);
		filter: brightness(1);
	}
	100% {
		transform: scale(1.05);
		filter: brightness(1.14);
	}
}

@keyframes ws-moon-pulse {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.03);
	}
}

/* --- Wolken --- */

.ws-clouds {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 2s ease;
}

.ws-root[data-theme="partly"] .ws-clouds {
	opacity: 0.75;
}

.ws-root[data-theme="cloudy"] .ws-clouds,
.ws-root[data-theme="rain"] .ws-clouds,
.ws-root[data-theme="storm"] .ws-clouds,
.ws-root[data-theme="snow"] .ws-clouds,
.ws-root[data-theme="sleet"] .ws-clouds,
.ws-root[data-theme="hail"] .ws-clouds,
.ws-root[data-theme="fog"] .ws-clouds,
.ws-root[data-theme="wind"] .ws-clouds,
.ws-root[data-theme="golden"] .ws-clouds {
	opacity: 1;
}

.ws-cloud {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 58%, var(--cloud-tint) 0%, transparent 68%);
	filter: blur(calc(14 * var(--u)));
	will-change: transform;
}

.ws-cloud--1 {
	top: 4%;
	left: -30%;
	width: 58%;
	height: 34%;
	animation: ws-drift 132s linear infinite;
}

.ws-cloud--2 {
	top: 20%;
	left: -46%;
	width: 74%;
	height: 42%;
	opacity: 0.72;
	animation: ws-drift 188s linear infinite -60s;
}

.ws-cloud--3 {
	top: -6%;
	left: -24%;
	width: 44%;
	height: 30%;
	opacity: 0.55;
	animation: ws-drift 96s linear infinite -30s;
}

.ws-cloud--4 {
	top: 36%;
	left: -60%;
	width: 92%;
	height: 50%;
	opacity: 0.34;
	filter: blur(calc(30 * var(--u)));
	animation: ws-drift 246s linear infinite -120s;
}

@keyframes ws-drift {
	to {
		transform: translate3d(230%, 0, 0);
	}
}

/* Nebel: dichte, langsam wabernde Schwaden */
.ws-root[data-theme="fog"] .ws-cloud {
	filter: blur(calc(40 * var(--u)));
	background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.3) 0%, transparent 72%);
}

/* Sturm: tiefhängende, schnellere Wolken */
.ws-root[data-theme="storm"] .ws-cloud,
.ws-root[data-theme="wind"] .ws-cloud {
	animation-duration: 54s;
}

.ws-root[data-theme="storm"] .ws-cloud--2 {
	animation-duration: 76s;
}

/* --- Effekt-Ebenen --- */

.ws-fx {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.ws-fx--glass {
	z-index: 2;
	opacity: 0.95;
}

.ws-flash {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(190, 210, 255, 0.45) 40%, transparent 78%);
	opacity: 0;
	mix-blend-mode: screen;
}

.ws-flash.is-firing {
	animation: ws-lightning 900ms ease-out;
}

@keyframes ws-lightning {
	0% {
		opacity: 0;
	}
	4% {
		opacity: 0.9;
	}
	9% {
		opacity: 0.1;
	}
	14% {
		opacity: 0.75;
	}
	22% {
		opacity: 0.04;
	}
	30% {
		opacity: 0.42;
	}
	100% {
		opacity: 0;
	}
}

.ws-grain {
	position: absolute;
	inset: 0;
	opacity: 0.035;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ws-vignette {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(130% 96% at 50% 42%, transparent 54%, rgba(0, 0, 0, 0.32) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 24%),
		linear-gradient(0deg, rgba(0, 0, 0, 0.26), transparent 34%);
}

/* ------------------------------------------------------------------ *
 * Inhalt: fester Rahmen + Slide-Stapel
 * ------------------------------------------------------------------ */

.ws-content {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: calc(14 * var(--u));
	height: 100%;
	padding: calc(38 * var(--u)) calc(54 * var(--u)) calc(30 * var(--u));
	transition: opacity 520ms ease;
	overflow: hidden;
}

/* Ohne diese Freigabe zieht ein einziger nicht umbrechender Text (etwa die
   Quellenangabe) die gesamte Rasterspalte breiter als das Display. */
.ws-content > * {
	min-width: 0;
}

.ws-content.is-swapping {
	opacity: 0;
}

.ws-root.has-shift .ws-content {
	animation: ws-burnin 900s ease-in-out infinite;
}

@keyframes ws-burnin {
	0%,
	100% {
		transform: translate3d(0, 0, 0);
	}
	25% {
		transform: translate3d(calc(7 * var(--u)), calc(-5 * var(--u)), 0);
	}
	50% {
		transform: translate3d(calc(-6 * var(--u)), calc(6 * var(--u)), 0);
	}
	75% {
		transform: translate3d(calc(5 * var(--u)), calc(4 * var(--u)), 0);
	}
}

/* --- Kopfzeile (bleibt über alle Slides stehen) --- */

.ws-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: calc(28 * var(--u));
	animation: ws-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ws-place__name {
	font-size: calc(52 * var(--u));
	font-weight: 700;
	line-height: 1;
	letter-spacing: calc(-1.2 * var(--u));
	text-shadow: 0 calc(3 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.4);
}

.ws-place__date {
	margin-top: calc(8 * var(--u));
	font-size: calc(23 * var(--u));
	font-weight: 500;
	color: var(--ink-soft);
	letter-spacing: calc(0.3 * var(--u));
	text-shadow: 0 calc(2 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0.5);
}

.ws-top__side {
	display: flex;
	align-items: center;
	gap: calc(16 * var(--u));
	flex: 0 0 auto;
}

.ws-badge {
	display: inline-block;
	margin-left: calc(14 * var(--u));
	padding: calc(3 * var(--u)) calc(12 * var(--u));
	border-radius: 999px;
	font-size: calc(15 * var(--u));
	font-weight: 600;
	letter-spacing: calc(0.4 * var(--u));
	text-transform: uppercase;
	vertical-align: calc(3 * var(--u));
}

.ws-badge--stale {
	background: rgba(255, 190, 90, 0.2);
	border: 1px solid rgba(255, 190, 90, 0.45);
	color: #ffd79a;
}

/* Dauerhafter Hinweis, dass eine Warnung vorliegt – auch während der
   anderen Slides. */
.ws-warnchip {
	display: flex;
	align-items: center;
	gap: calc(9 * var(--u));
	padding: calc(9 * var(--u)) calc(18 * var(--u));
	border-radius: 999px;
	background: var(--alert-c);
	color: #12161c;
	font-size: calc(20 * var(--u));
	font-weight: 700;
	letter-spacing: calc(0.6 * var(--u));
	text-transform: uppercase;
	white-space: nowrap;
	animation: ws-chip-pulse 2.4s ease-in-out infinite;
}

.ws-warnchip svg {
	width: calc(24 * var(--u));
	height: calc(24 * var(--u));
	stroke-width: 2.2;
}

.ws-warnchip--l1 { --alert-c: #f2c94c; }
.ws-warnchip--l2 { --alert-c: #f2994a; }
.ws-warnchip--l3 { --alert-c: #eb5757; color: #fff; }
.ws-warnchip--l4 { --alert-c: #b14ae0; color: #fff; }

@keyframes ws-chip-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
	50% {
		box-shadow: 0 0 calc(26 * var(--u)) calc(1 * var(--u)) var(--alert-c);
	}
}

.ws-clock {
	display: flex;
	align-items: baseline;
	gap: calc(8 * var(--u));
	padding: calc(9 * var(--u)) calc(22 * var(--u));
	border-radius: calc(20 * var(--u));
	background: var(--card);
	border: 1px solid var(--card-line);
	-webkit-backdrop-filter: blur(calc(18 * var(--u))) brightness(0.6);
	backdrop-filter: blur(calc(18 * var(--u))) brightness(0.6);
}

.ws-clock__time {
	font-size: calc(58 * var(--u));
	font-weight: 300;
	line-height: 1;
	letter-spacing: calc(-1 * var(--u));
	font-variant-numeric: tabular-nums;
}

.ws-clock__sec {
	font-size: calc(25 * var(--u));
	font-weight: 400;
	color: var(--ink-faint);
	font-variant-numeric: tabular-nums;
}

/* --- Slide-Stapel --- */

.ws-deck {
	position: relative;
	display: grid;
	min-height: 0;
	overflow: hidden;
}

.ws-slide {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 0;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, calc(30 * var(--u)), 0);
	transition: opacity 700ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 900ms;
	pointer-events: none;
}

.ws-slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 700ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

/* Der abgehende Slide zieht nach oben ab, der neue kommt von unten. */
.ws-slide.is-leaving {
	transform: translate3d(0, calc(-26 * var(--u)), 0);
}

.ws-slide__kicker {
	font-size: calc(24 * var(--u));
	font-weight: 700;
	letter-spacing: calc(4 * var(--u));
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: calc(10 * var(--u));
}

/* ------------------------------------------------------------------ *
 * Slide 1: aktuelles Wetter
 * ------------------------------------------------------------------ */

.ws-now {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: calc(34 * var(--u));
	min-height: 0;
}

.ws-now__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(40 * var(--u));
	min-width: 0;
}

.ws-now__icon {
	flex: 0 0 auto;
	width: calc(348 * var(--u));
	height: calc(348 * var(--u));
	filter: drop-shadow(0 calc(12 * var(--u)) calc(42 * var(--u)) rgba(0, 0, 0, 0.45));
	animation: ws-pop 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ws-now__readout {
	min-width: 0;
}

.ws-now__temp {
	display: flex;
	align-items: flex-start;
	line-height: 0.82;
	/* Kräftige Striche statt Haarlinien: bei 390 Pixeln Schriftgröße
	   entscheidet auf Distanz die Strichstärke über die Lesbarkeit, nicht
	   die Größe. Der enge Schatten schärft die Kante, statt sie zu umnebeln. */
	font-weight: 600;
	letter-spacing: calc(-8 * var(--u));
	text-shadow:
		0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.45),
		0 calc(8 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.5);
}

/* Deckendes Weiß statt Verlauf: ein Verlauf mit durchscheinendem Ende lässt
   den Hintergrund durch die Ziffern hindurchschimmern und kostet Kontrast. */
.ws-now__value {
	font-size: calc(390 * var(--u));
	font-variant-numeric: tabular-nums;
	color: #ffffff;
}

.ws-now__deg {
	font-size: calc(205 * var(--u));
	font-weight: 500;
	color: var(--accent);
	margin-top: calc(10 * var(--u));
	/* Das Gradzeichen bringt eine breite Vorbreite mit – ohne den Zug nach
	   links stünde es sonst weit abgesetzt neben der Zahl. */
	margin-left: calc(-26 * var(--u));
	letter-spacing: 0;
}

.ws-now__label {
	margin-top: calc(12 * var(--u));
	font-size: calc(92 * var(--u));
	font-weight: 650;
	letter-spacing: calc(-1.4 * var(--u));
	line-height: 1.04;
}

.ws-now__sub {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: calc(10 * var(--u)) calc(28 * var(--u));
	margin-top: calc(16 * var(--u));
	font-size: calc(42 * var(--u));
	color: var(--ink-soft);
}

.ws-now__feels strong {
	font-weight: 650;
	color: var(--ink);
}

.ws-now__range {
	display: flex;
	align-items: center;
	gap: calc(12 * var(--u));
	font-weight: 600;
}

.ws-now__range .ws-sep {
	width: calc(30 * var(--u));
	height: calc(2 * var(--u));
	background: var(--ink-faint);
	border-radius: 2px;
}

.ws-hi {
	color: var(--ink);
}

.ws-lo {
	color: var(--ink-faint);
}

@keyframes ws-pop {
	from {
		opacity: 0;
		transform: scale(0.86);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------ *
 * Slide 2: Einzelwerte
 *
 * Fünf Werte auf einer eigenen Fläche. Drei oben, zwei darunter – jeder
 * Zahlenwert so groß, dass er aus einigen Metern noch trägt.
 * ------------------------------------------------------------------ */

.ws-slide--values {
	justify-content: center;
}

.ws-values {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* Beide Reihen teilen sich die volle Höhe – sonst bliebe die untere
	   Hälfte des Bildschirms leer und die Zahlen kleiner als nötig. */
	align-content: stretch;
	flex: 1 1 auto;
	gap: calc(20 * var(--u));
	min-height: 0;
}

.ws-value {
	flex: 0 1 calc(33.333% - calc(14 * var(--u)));
	display: flex;
	flex-direction: column;
	/* Oben ausgerichtet, damit Beschriftung und Zahl über eine Reihe hinweg
	   auf einer Linie liegen – auch wenn eine Kachel keine Zusatzzeile hat. */
	justify-content: flex-start;
	gap: calc(8 * var(--u));
	min-width: 0;
	padding: calc(28 * var(--u)) calc(30 * var(--u));
	border-radius: calc(26 * var(--u));
	background: var(--card);
	border: 1px solid var(--card-line);
	-webkit-backdrop-filter: blur(calc(16 * var(--u))) brightness(0.6);
	backdrop-filter: blur(calc(16 * var(--u))) brightness(0.6);
	animation: ws-rise 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(160ms + var(--ws-delay, 0ms));
}

.ws-value__head {
	display: flex;
	align-items: center;
	gap: calc(12 * var(--u));
	color: var(--accent);
	min-width: 0;
}

.ws-value__head svg {
	width: calc(34 * var(--u));
	height: calc(34 * var(--u));
	flex: 0 0 auto;
}

.ws-value__label {
	font-size: calc(28 * var(--u));
	font-weight: 700;
	letter-spacing: calc(1.4 * var(--u));
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ws-value__figure {
	display: flex;
	align-items: baseline;
	/* Sicherheitsnetz: passt die Einheit nicht mehr neben die Zahl, rutscht
	   sie in die nächste Zeile, statt abgeschnitten zu werden. */
	flex-wrap: wrap;
	gap: 0 calc(12 * var(--u));
	min-width: 0;
}

.ws-value__number {
	font-size: calc(124 * var(--u));
	font-weight: 650;
	line-height: 1;
	letter-spacing: calc(-3 * var(--u));
	font-variant-numeric: tabular-nums;
	text-shadow: 0 calc(4 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.35);
}

.ws-value__unit {
	font-size: calc(46 * var(--u));
	font-weight: 500;
	color: var(--ink-soft);
	white-space: nowrap;
}

.ws-value__note {
	margin-top: auto;
	font-size: calc(28 * var(--u));
	color: var(--ink-faint);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ------------------------------------------------------------------ *
 * Slide 2: amtliche Warnung
 * ------------------------------------------------------------------ */

.ws-slide--alert {
	justify-content: center;
}

.ws-warn--l1 { --wc: #f2c94c; --wc-ink: #12161c; }
.ws-warn--l2 { --wc: #f2994a; --wc-ink: #12161c; }
.ws-warn--l3 { --wc: #eb5757; --wc-ink: #ffffff; }
.ws-warn--l4 { --wc: #b14ae0; --wc-ink: #ffffff; }

.ws-warn {
	position: relative;
	/* Die Karte füllt die Fläche, damit ihr Rahmen beim Blättern zwischen den
	   Seiten einer Warnung nicht springt. */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: calc(34 * var(--u)) calc(44 * var(--u));
	border-radius: calc(28 * var(--u));
	border-left: calc(12 * var(--u)) solid var(--wc);
	background: linear-gradient(100deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.2) 70%);
	-webkit-backdrop-filter: blur(calc(12 * var(--u))) brightness(0.6);
	backdrop-filter: blur(calc(12 * var(--u))) brightness(0.6);
	box-shadow: 0 0 calc(60 * var(--u)) calc(-10 * var(--u)) var(--wc);
	min-width: 0;
}

.ws-warn__top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: calc(18 * var(--u));
	margin-bottom: calc(14 * var(--u));
}

.ws-warn__sign {
	display: block;
	width: calc(74 * var(--u));
	height: calc(74 * var(--u));
	color: var(--wc);
	flex: 0 0 auto;
	animation: ws-warn-blink 1.8s ease-in-out infinite;
}

.ws-warn__sign svg {
	width: 100%;
	height: 100%;
	stroke-width: 1.8;
}

@keyframes ws-warn-blink {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.5;
		transform: scale(0.93);
	}
}

.ws-warn__step {
	padding: calc(7 * var(--u)) calc(22 * var(--u));
	border-radius: 999px;
	background: var(--wc);
	color: var(--wc-ink);
	font-size: calc(26 * var(--u));
	font-weight: 700;
	letter-spacing: calc(1.6 * var(--u));
	text-transform: uppercase;
	white-space: nowrap;
}

.ws-warn__when {
	font-size: calc(34 * var(--u));
	font-weight: 600;
	color: var(--ink);
}

/* Der Textblock nimmt den freien Raum zwischen Kopfzeile und Quellenangabe
   ein und zentriert sich darin. Dadurch sitzt der Text auf jeder Seite einer
   Warnung an derselben Stelle, egal wie lang er ist. */
.ws-warn__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 0;
}

/* Der amtliche Ereignisname – aus zehn Metern lesbar. */
.ws-warn__event {
	font-size: calc(112 * var(--u));
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: calc(-2 * var(--u));
	text-transform: uppercase;
	color: var(--wc);
	text-shadow: 0 calc(6 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, 0.55);
	overflow-wrap: break-word;
}

.ws-warn__headline {
	margin-top: calc(12 * var(--u));
	font-size: calc(54 * var(--u));
	font-weight: 650;
	line-height: 1.12;
	color: var(--ink);
}

.ws-warn__text {
	margin-top: calc(20 * var(--u));
	font-size: calc(48 * var(--u));
	line-height: 1.3;
	font-weight: 500;
	color: var(--ink);
}

.ws-warn__hint {
	margin-top: calc(6 * var(--u));
	font-size: calc(48 * var(--u));
	font-weight: 600;
	line-height: 1.28;
	color: var(--ink);
}

/* Überschrift über dem Verhaltenshinweis. */
.ws-warn__hintlabel {
	margin-top: calc(22 * var(--u));
	font-size: calc(28 * var(--u));
	font-weight: 700;
	letter-spacing: calc(2.4 * var(--u));
	text-transform: uppercase;
	color: var(--wc);
}

.ws-warn__meta {
	flex: 0 0 auto;
	padding-top: calc(22 * var(--u));
	font-size: calc(24 * var(--u));
	color: var(--ink-faint);
}

/* Seitenzähler bei mehrseitigen Warnungen. */
.ws-warn__page {
	margin-left: auto;
	padding: calc(6 * var(--u)) calc(18 * var(--u));
	border-radius: 999px;
	border: calc(2 * var(--u)) solid var(--wc);
	font-size: calc(26 * var(--u));
	font-weight: 700;
	color: var(--wc);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Auf Folgeseiten tritt der Ereignisname etwas zurück und macht dem Text
   Platz – die Schlagzeile ist dann schon bekannt. */
.ws-warn.is-continued .ws-warn__event,
.ws-slide--alert.is-continued .ws-warn__event {
	font-size: calc(74 * var(--u));
}

/* Farbwäsche über der Bühne, solange eine Warnung läuft. */
.ws-warnwash {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 900ms ease;
	background: radial-gradient(130% 80% at 50% 108%, var(--wash, transparent) 0%, transparent 64%);
	mix-blend-mode: screen;
}

.ws-root[data-warn="1"] { --wash: rgba(242, 201, 76, 0.6); }
.ws-root[data-warn="2"] { --wash: rgba(242, 153, 74, 0.65); }
.ws-root[data-warn="3"] { --wash: rgba(235, 87, 87, 0.7); }
.ws-root[data-warn="4"] { --wash: rgba(177, 74, 224, 0.7); }

.ws-root[data-warn] .ws-warnwash {
	opacity: 0.4;
}

/* ------------------------------------------------------------------ *
 * Slide 3: Vorhersage
 * ------------------------------------------------------------------ */

.ws-slide--forecast {
	justify-content: center;
}

.ws-fc {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(16 * var(--u));
	/* Die Karten nehmen die verbleibende Höhe ein – so tragen die Zahlen
	   so weit wie möglich. */
	flex: 1 1 auto;
	min-height: 0;
}

.ws-fcday {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(2 * var(--u));
	padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));
	border-radius: calc(26 * var(--u));
	background: var(--card);
	border: 1px solid var(--card-line);
	-webkit-backdrop-filter: blur(calc(16 * var(--u))) brightness(0.6);
	backdrop-filter: blur(calc(16 * var(--u))) brightness(0.6);
	text-align: center;
	min-width: 0;
	animation: ws-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(140ms + var(--ws-delay, 0ms));
}

.ws-fcday.is-today {
	background: linear-gradient(158deg, rgba(255, 255, 255, 0.26), rgba(8, 18, 32, 0.24));
	border-color: rgba(255, 255, 255, 0.34);
}

.ws-fcday__title {
	font-size: calc(58 * var(--u));
	font-weight: 700;
	letter-spacing: calc(-1 * var(--u));
	line-height: 1.02;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.ws-fcday__sub {
	font-size: calc(24 * var(--u));
	color: var(--ink-faint);
	white-space: nowrap;
}

.ws-fcday__icon {
	width: calc(158 * var(--u));
	height: calc(158 * var(--u));
	margin: calc(4 * var(--u)) 0;
	filter: drop-shadow(0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.36));
}

/* Wetterlage und Zusatzangabe in einer Zeile – spart Höhe für die Zahlen. */
.ws-fcday__meta {
	margin-top: calc(4 * var(--u));
	font-size: calc(34 * var(--u));
	font-weight: 600;
	color: var(--ink-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.ws-fcday__temps {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: calc(14 * var(--u));
	margin-top: calc(2 * var(--u));
	font-variant-numeric: tabular-nums;
}

.ws-fcday__temps .ws-hi {
	font-size: calc(142 * var(--u));
	font-weight: 650;
	letter-spacing: calc(-4.5 * var(--u));
	line-height: 1;
	text-shadow: 0 calc(4 * var(--u)) calc(26 * var(--u)) rgba(0, 0, 0, 0.35);
}

.ws-fcday__temps .ws-lo {
	font-size: calc(72 * var(--u));
	font-weight: 500;
	letter-spacing: calc(-1.8 * var(--u));
}

/* --- Tagesverlauf --- */

.ws-chart {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	height: calc(118 * var(--u));
	margin-top: calc(12 * var(--u));
	padding: calc(14 * var(--u)) calc(22 * var(--u)) calc(8 * var(--u));
	border-radius: calc(24 * var(--u));
	background: var(--card);
	border: 1px solid var(--card-line);
	-webkit-backdrop-filter: blur(calc(16 * var(--u))) brightness(0.6);
	backdrop-filter: blur(calc(16 * var(--u))) brightness(0.6);
	overflow: hidden;
	animation: ws-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) 480ms both;
}

.ws-chart__title {
	font-size: calc(17 * var(--u));
	font-weight: 600;
	letter-spacing: calc(1.4 * var(--u));
	text-transform: uppercase;
	color: var(--ink-faint);
}

.ws-chart__plot {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

.ws-chart__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.ws-chart__line {
	fill: none;
	stroke: var(--accent);
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.34));
	stroke-dasharray: 2000;
	stroke-dashoffset: 2000;
	animation: ws-draw 2s cubic-bezier(0.4, 0, 0.2, 1) 760ms forwards;
	vector-effect: non-scaling-stroke;
}

@keyframes ws-draw {
	to {
		stroke-dashoffset: 0;
	}
}

.ws-chart__stop0 {
	stop-color: var(--accent);
	stop-opacity: 0.36;
}

.ws-chart__stop1 {
	stop-color: var(--accent);
	stop-opacity: 0;
}

.ws-chart__area {
	stroke: none;
	opacity: 0;
	animation: ws-fade-in 1.4s ease 1.6s forwards;
}

.ws-chart__bar {
	fill: var(--accent-2);
	opacity: 0.42;
}

.ws-chart__peak {
	position: absolute;
	display: flex;
	align-items: center;
	gap: calc(6 * var(--u));
	font-size: calc(21 * var(--u));
	font-weight: 650;
	color: var(--ink);
	white-space: nowrap;
	transform: translate(-50%, -140%);
	opacity: 0;
	animation: ws-fade-in 700ms ease 2.2s forwards;
	text-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.5);
}

.ws-chart__peak i {
	width: calc(9 * var(--u));
	height: calc(9 * var(--u));
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 calc(2.5 * var(--u)) var(--accent);
}

/* Der Tiefstwert steht unter der Kurve, damit er die Linie nicht verdeckt. */
.ws-chart__peak--lo {
	color: var(--ink-soft);
	font-weight: 600;
	transform: translate(-50%, 25%);
}

.ws-chart__axis {
	position: relative;
	flex: 0 0 auto;
	height: calc(20 * var(--u));
	margin-top: calc(2 * var(--u));
}

.ws-chart__tick {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	font-size: calc(16 * var(--u));
	font-weight: 500;
	color: var(--ink-faint);
	font-variant-numeric: tabular-nums;
}

@keyframes ws-fade-in {
	to {
		opacity: 1;
	}
}

/* ------------------------------------------------------------------ *
 * Fußzeile und Fortschritt
 * ------------------------------------------------------------------ */

.ws-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: calc(10 * var(--u)) calc(30 * var(--u));
	padding-top: calc(14 * var(--u));
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	animation: ws-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) 700ms both;
}

.ws-sponsor {
	display: flex;
	align-items: center;
	gap: calc(22 * var(--u));
	min-width: 0;
}

.ws-sponsor__text {
	font-size: calc(21 * var(--u));
	font-weight: 500;
	color: var(--ink-soft);
	letter-spacing: calc(0.2 * var(--u));
	white-space: nowrap;
}

.ws-sponsor__logo {
	display: block;
	width: auto;
	height: calc(58 * var(--u));
	max-width: calc(340 * var(--u));
	object-fit: contain;
	/* Logos liegen meist in Markenfarben vor – ein weicher Schein hebt sie
	   vom bewegten Hintergrund ab, ohne die Farben zu verfälschen. */
	filter: drop-shadow(0 calc(2 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.45));
}

.ws-sponsor__name {
	font-size: calc(32 * var(--u));
	font-weight: 700;
	letter-spacing: calc(-0.4 * var(--u));
}

.ws-meta {
	font-size: calc(17 * var(--u));
	color: var(--ink-faint);
	text-align: right;
	min-width: 0;
}

/* Laufbalken am unteren Bildrand: zeigt, wann der nächste Slide kommt. */
.ws-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(5 * var(--u));
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.ws-progress.is-idle {
	opacity: 0;
}

.ws-progress__fill {
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
	box-shadow: 0 0 calc(14 * var(--u)) var(--accent);
}

.ws-root[data-warn] .ws-progress__fill {
	background: var(--wash, var(--accent));
	box-shadow: none;
}

/* --- Störungsanzeige --- */

.ws-offline {
	grid-row: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(16 * var(--u));
	text-align: center;
}

.ws-offline__icon {
	width: calc(110 * var(--u));
	height: calc(110 * var(--u));
	color: var(--accent);
	opacity: 0.7;
}

.ws-offline__icon svg {
	width: 100%;
	height: 100%;
}

.ws-offline__title {
	font-size: calc(58 * var(--u));
	font-weight: 650;
}

.ws-offline__text {
	font-size: calc(28 * var(--u));
	color: var(--ink-soft);
	max-width: calc(880 * var(--u));
}

.ws-offline__hint {
	font-size: calc(21 * var(--u));
	color: var(--ink-faint);
}

/* ------------------------------------------------------------------ *
 * Wettersymbole
 * ------------------------------------------------------------------ */

.ws-icon {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

.ws-i-disc {
	fill: var(--accent);
}

.ws-icon--clear-day .ws-i-disc,
.ws-icon--partly-cloudy-day .ws-i-disc {
	fill: url(#none);
	fill: #ffd45e;
}

.ws-i-corona {
	fill: var(--accent);
	opacity: 0.18;
	/* Ohne Weichzeichner wirkt der Hof wie ein aufgelegter Teller. Die
	   Einheit bezieht sich auf das 100er-Koordinatensystem des Symbols. */
	filter: blur(6px);
	animation: ws-corona 4.2s ease-in-out infinite alternate;
	transform-origin: center;
}

@keyframes ws-corona {
	0% {
		opacity: 0.12;
		transform: scale(0.92);
	}
	100% {
		opacity: 0.3;
		transform: scale(1.08);
	}
}

.ws-i-rays {
	stroke: #ffd45e;
	stroke-width: 6;
	stroke-linecap: round;
	animation: ws-spin 26s linear infinite;
}

.ws-icon--partly-cloudy-day .ws-i-rays {
	stroke-width: 5;
	animation-duration: 34s;
}

@keyframes ws-spin {
	to {
		transform: rotate(360deg);
	}
}

.ws-i-moon .ws-i-disc {
	fill: #e8f0fb;
}

.ws-i-moon .ws-i-corona {
	fill: #cfe0f5;
}

.ws-i-star {
	fill: #fff;
	animation: ws-star 2.6s ease-in-out infinite alternate;
}

.ws-i-star--1 {
	animation-delay: 0.7s;
}

.ws-i-star--2 {
	animation-delay: 1.4s;
}

@keyframes ws-star {
	0% {
		opacity: 0.25;
		transform: scale(0.8);
	}
	100% {
		opacity: 1;
		transform: scale(1.15);
	}
}

.ws-i-cloud {
	fill: #f2f6fb;
	animation: ws-cloud-bob 6.5s ease-in-out infinite alternate;
}

.ws-i-cloud--solid {
	fill: #ffffff;
}

.ws-i-cloud--back {
	fill: #c3d2e2;
	opacity: 0.72;
	animation-duration: 9s;
	animation-direction: alternate-reverse;
}

.ws-icon--rain .ws-i-cloud,
.ws-icon--sleet .ws-i-cloud,
.ws-icon--snow .ws-i-cloud,
.ws-icon--hail .ws-i-cloud,
.ws-icon--thunderstorm .ws-i-cloud,
.ws-icon--fog .ws-i-cloud {
	fill: #d9e4ef;
}

@keyframes ws-cloud-bob {
	0% {
		transform: translateX(calc(-2 * 1px));
	}
	100% {
		transform: translateX(calc(3 * 1px));
	}
}

.ws-i-drop {
	fill: #7fd0ff;
	animation: ws-drop-fall 1.5s cubic-bezier(0.5, 0, 0.9, 0.6) infinite;
	transform-box: fill-box;
	transform-origin: center top;
}

.ws-i-drop--1 { animation-delay: 0.36s; }
.ws-i-drop--2 { animation-delay: 0.72s; }
.ws-i-drop--3 { animation-delay: 1.08s; }

@keyframes ws-drop-fall {
	0% {
		opacity: 0;
		transform: translateY(-8px) scaleY(0.7);
	}
	18% {
		opacity: 1;
	}
	72% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(16px) scaleY(1.15);
	}
}

.ws-i-flake {
	stroke: #eaf6ff;
	stroke-width: 2.4;
	stroke-linecap: round;
	animation: ws-flake-fall 3.4s linear infinite;
	transform-box: fill-box;
}

.ws-i-flake--1 { animation-delay: 0.85s; }
.ws-i-flake--2 { animation-delay: 1.7s; }
.ws-i-flake--3 { animation-delay: 2.55s; }

@keyframes ws-flake-fall {
	0% {
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.ws-i-flakes .ws-i-flake {
	animation-name: ws-flake-drift;
}

@keyframes ws-flake-drift {
	0% {
		opacity: 0;
		transform: translate(0, -6px) rotate(0deg);
	}
	18% {
		opacity: 1;
	}
	78% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translate(3px, 14px) rotate(160deg);
	}
}

.ws-i-stone {
	fill: #dff1ff;
	animation: ws-hail-fall 1.1s cubic-bezier(0.45, 0, 0.9, 0.55) infinite;
	transform-box: fill-box;
}

.ws-i-stone--1 { animation-delay: 0.27s; }
.ws-i-stone--2 { animation-delay: 0.54s; }
.ws-i-stone--3 { animation-delay: 0.81s; }

@keyframes ws-hail-fall {
	0% {
		opacity: 0;
		transform: translateY(-6px);
	}
	20% {
		opacity: 1;
	}
	78% {
		opacity: 1;
		transform: translateY(12px);
	}
	100% {
		opacity: 0;
		transform: translateY(9px) scale(0.7);
	}
}

.ws-i-bolt {
	fill: #ffd84d;
	filter: drop-shadow(0 0 6px rgba(255, 216, 77, 0.8));
	animation: ws-bolt-strike 3.1s steps(1, end) infinite;
	transform-box: fill-box;
	transform-origin: center;
}

@keyframes ws-bolt-strike {
	0%, 8% { opacity: 1; }
	9%, 13% { opacity: 0.15; }
	14%, 20% { opacity: 1; }
	21%, 100% { opacity: 0.28; }
}

.ws-i-fogline {
	fill: #e6edf4;
	animation: ws-fog-slide 5.5s ease-in-out infinite alternate;
}

.ws-i-fogline--1 {
	animation-delay: 0.8s;
	animation-duration: 7s;
}

.ws-i-fogline--2 {
	animation-delay: 1.7s;
	animation-duration: 6.2s;
}

@keyframes ws-fog-slide {
	0% {
		transform: translateX(-7px);
		opacity: 0.55;
	}
	100% {
		transform: translateX(7px);
		opacity: 1;
	}
}

.ws-i-gust {
	fill: none;
	stroke: #dff3f7;
	stroke-width: 6;
	stroke-linecap: round;
	stroke-dasharray: 90;
	animation: ws-gust 3.2s ease-in-out infinite;
}

.ws-i-gust--1 { animation-delay: 0.45s; }
.ws-i-gust--2 { animation-delay: 0.9s; }

@keyframes ws-gust {
	0% {
		stroke-dashoffset: 90;
		opacity: 0.2;
	}
	40% {
		opacity: 1;
	}
	60% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
	100% {
		stroke-dashoffset: -90;
		opacity: 0.2;
	}
}

.ws-ui-icon {
	width: 100%;
	height: 100%;
	display: block;
}

/* ------------------------------------------------------------------ *
 * Einblend-Bewegungen
 * ------------------------------------------------------------------ */

@keyframes ws-rise {
	from {
		opacity: 0;
		transform: translateY(calc(26 * var(--u)));
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ws-rise-right {
	from {
		opacity: 0;
		transform: translate3d(calc(34 * var(--u)), calc(10 * var(--u)), 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------ *
 * Hochformat
 * ------------------------------------------------------------------ */

.ws-root.is-portrait .ws-content {
	padding: calc(56 * var(--u)) calc(52 * var(--u)) calc(44 * var(--u));
}

/* Symbol über die Temperatur statt daneben – im Hochformat ist Höhe da,
   Breite nicht. */
.ws-root.is-portrait .ws-now__head {
	flex-direction: column;
	gap: calc(10 * var(--u));
	text-align: center;
}

.ws-root.is-portrait .ws-now__icon {
	width: calc(360 * var(--u));
	height: calc(360 * var(--u));
}

.ws-root.is-portrait .ws-now__temp {
	justify-content: center;
}

.ws-root.is-portrait .ws-now__label {
	margin-top: calc(14 * var(--u));
	font-size: calc(80 * var(--u));
}

.ws-root.is-portrait .ws-now__sub {
	justify-content: center;
}

/* Im Hochformat zwei Werte nebeneinander – so bleiben die Zahlen groß.
   Die Kacheln behalten dabei ihre Inhaltshöhe, statt sich über drei Reihen
   zu dehnen und innen leer zu wirken. */
.ws-root.is-portrait .ws-values {
	gap: calc(18 * var(--u));
}

/* Im Hochformat sind die Kacheln hoch – der Inhalt sitzt deshalb mittig,
   sonst klebt er oben und darunter bliebe eine leere Fläche. */
.ws-root.is-portrait .ws-value {
	justify-content: center;
}

.ws-root.is-portrait .ws-value__note {
	margin-top: calc(4 * var(--u));
}

.ws-root.is-portrait .ws-value {
	flex: 0 1 calc(50% - calc(9 * var(--u)));
}

.ws-root.is-portrait .ws-value__number {
	font-size: calc(104 * var(--u));
}

/* Die drei Tage untereinander statt nebeneinander – und sie teilen sich die
   verfügbare Höhe, sonst steht auf einer Stele die halbe Fläche leer. */
.ws-root.is-portrait .ws-fc {
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: 1fr;
	flex: 1 1 auto;
	min-height: 0;
	gap: calc(16 * var(--u));
}

/* Im Hochformat als Zeile: links Tag und Wetterlage, dann Symbol, rechts die
   Temperaturen. Als reine Flexzeile wurde der Tagesname abgeschnitten – das
   Raster gibt jedem Teil eine feste Spur. */
.ws-root.is-portrait .ws-fcday {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	grid-template-areas:
		"title icon temps"
		"meta  icon temps";
	align-items: center;
	/* Ohne dies zögen die beiden Textzeilen auseinander, weil die Rasterzeilen
	   sonst die volle Kartenhöhe unter sich aufteilen. */
	align-content: center;
	column-gap: calc(18 * var(--u));
	row-gap: calc(2 * var(--u));
	padding: calc(16 * var(--u)) calc(28 * var(--u));
	text-align: left;
}

.ws-root.is-portrait .ws-fcday__title {
	grid-area: title;
	font-size: calc(44 * var(--u));
}

.ws-root.is-portrait .ws-fcday__sub {
	display: none;
}

.ws-root.is-portrait .ws-fcday__meta {
	grid-area: meta;
	margin-top: 0;
	font-size: calc(26 * var(--u));
}

.ws-root.is-portrait .ws-fcday__icon {
	grid-area: icon;
	width: calc(120 * var(--u));
	height: calc(120 * var(--u));
	margin: 0;
}

.ws-root.is-portrait .ws-fcday__temps {
	grid-area: temps;
	margin-top: 0;
	gap: calc(10 * var(--u));
}

.ws-root.is-portrait .ws-fcday__temps .ws-hi {
	font-size: calc(118 * var(--u));
}

.ws-root.is-portrait .ws-fcday__temps .ws-lo {
	font-size: calc(60 * var(--u));
}

.ws-root.is-portrait .ws-warn__event {
	font-size: calc(132 * var(--u));
}

/* Im Hochformat ist nebeneinander zu eng – Sponsor und Quelle stapeln sich. */
.ws-root.is-portrait .ws-bottom {
	flex-direction: column;
	align-items: flex-start;
	gap: calc(12 * var(--u));
}

.ws-root.is-portrait .ws-meta {
	text-align: left;
}

/* Sehr breite Displays (z. B. Stretch-Panels) */
.ws-root.is-wide .ws-now__icon {
	width: calc(260 * var(--u));
	height: calc(260 * var(--u));
}

.ws-root.is-wide .ws-warn__event {
	font-size: calc(96 * var(--u));
}

/* ------------------------------------------------------------------ *
 * Sparsame Bewegung
 * ------------------------------------------------------------------ */

.ws-root[data-anim="reduced"] .ws-grain,
.ws-root[data-anim="reduced"] .ws-celestial::before,
.ws-root[data-anim="reduced"] .ws-celestial::after {
	display: none;
}

.ws-root[data-anim="reduced"] .ws-value,
.ws-root[data-anim="reduced"] .ws-fcday,
.ws-root[data-anim="reduced"] .ws-chart,
.ws-root[data-anim="reduced"] .ws-warn,
.ws-root[data-anim="reduced"] .ws-clock {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: rgba(10, 22, 38, 0.34);
}

.ws-root.no-anim .ws-stage *,
.ws-root.no-anim .ws-content * {
	animation: none !important;
	transition: none !important;
}

.ws-root.no-anim .ws-fx {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.ws-root:not([data-anim="full"]) .ws-sky,
	.ws-root:not([data-anim="full"]) .ws-glow,
	.ws-root:not([data-anim="full"]) .ws-cloud {
		animation: none;
	}
}