/**
 * Climaletic – Liquid Tech design system.
 *
 * Aufbau:
 *   1. Tokens (Farben, Typo, Abstände, Radien)
 *   2. Hintergrund (Mesh-Gradient + Punktraster)
 *   3. Grundelemente (Typo, Buttons, Felder)
 *   4. Layout (Shell, Bento-Grid)
 *   5. Komponenten
 *   6. Auth-Seiten
 *   7. Responsive
 *
 * Farbentscheidung gegenüber dem Entwurf: Die reinen Neontöne (#00F0FF, #00FF66)
 * flimmern auf großen Flächen und fallen bei Text unter die Kontrastschwelle.
 * Sie sind hier minimal abgedunkelt und entsättigt – der Eindruck bleibt,
 * die Lesbarkeit steigt deutlich.
 */

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                           */
/* ------------------------------------------------------------------ */

:root {
	color-scheme: dark;

	/* Canvas */
	--c-void: #05060a;
	--c-canvas: #080a10;
	--c-canvas-2: #0d1018;

	/* Glass */
	--c-glass: rgba(255, 255, 255, 0.045);
	--c-glass-strong: rgba(255, 255, 255, 0.075);
	--c-line: rgba(255, 255, 255, 0.09);
	--c-line-strong: rgba(255, 255, 255, 0.16);
	--c-inner-light: rgba(255, 255, 255, 0.07);
	--c-dot: rgba(255, 255, 255, 0.12);

	/* Text */
	--c-text: #eef2f8;
	--c-text-2: #a3aec4;
	--c-text-3: #6b7794;

	/* Akzente */
	--c-cyan: #3ce0f5;
	--c-cyan-dim: rgba(60, 224, 245, 0.14);
	--c-green: #3ddc84;
	--c-green-dim: rgba(61, 220, 132, 0.14);
	--c-amber: #ffc24b;
	--c-amber-dim: rgba(255, 194, 75, 0.14);
	--c-rose: #ff5c7a;
	--c-rose-dim: rgba(255, 92, 122, 0.14);
	--c-violet: #8b7bff;
	--c-violet-dim: rgba(139, 123, 255, 0.14);

	--c-accent: var(--c-cyan);
	--c-accent-dim: var(--c-cyan-dim);

	/* Mesh (wird per JS überschrieben) */
	--mesh-1: #10305c;
	--mesh-2: #0b3c52;
	--mesh-3: #1a1140;
	--mesh-alpha: 0.55;

	/* Typo */
	--font-sans: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--fs-micro: 0.6875rem;
	--fs-xs: 0.75rem;
	--fs-sm: 0.8125rem;
	--fs-base: 0.9375rem;
	--fs-lg: 1.0625rem;
	--fs-xl: 1.375rem;
	--fs-2xl: 1.875rem;
	--fs-3xl: 2.75rem;
	--fs-hero: clamp(3.25rem, 12vw, 5.25rem);

	/* Abstände */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.25rem;
	--sp-6: 1.5rem;
	--sp-8: 2rem;
	--sp-10: 2.5rem;
	--sp-12: 3rem;

	/* Radien */
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 18px;
	--r-xl: 24px;
	--r-pill: 999px;

	--blur: 24px;
	--shadow: 0 20px 60px -24px rgba(0, 0, 0, 0.85);
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="light"] {
	color-scheme: light;

	--c-void: #eef1f7;
	--c-canvas: #f4f6fb;
	--c-canvas-2: #ffffff;

	--c-glass: rgba(255, 255, 255, 0.72);
	--c-glass-strong: rgba(255, 255, 255, 0.9);
	--c-line: rgba(15, 23, 42, 0.09);
	--c-line-strong: rgba(15, 23, 42, 0.18);
	--c-inner-light: rgba(255, 255, 255, 0.9);
	--c-dot: rgba(15, 23, 42, 0.16);

	--c-text: #0f1626;
	--c-text-2: #46536e;
	--c-text-3: #6f7c96;

	--c-cyan: #0b8fa8;
	--c-cyan-dim: rgba(11, 143, 168, 0.12);
	--c-green: #0f9d58;
	--c-green-dim: rgba(15, 157, 88, 0.12);
	--c-amber: #b8710a;
	--c-amber-dim: rgba(184, 113, 10, 0.12);
	--c-rose: #d92b52;
	--c-rose-dim: rgba(217, 43, 82, 0.12);
	--c-violet: #5b4bd6;
	--c-violet-dim: rgba(91, 75, 214, 0.12);

	--mesh-1: #b9d4f5;
	--mesh-2: #cfe9ee;
	--mesh-3: #ded6f7;
	/* Im Hellmodus reicht ein Hauch Farbe – sonst wirkt der Hintergrund fleckig. */
	--mesh-alpha: 0.45;

	--shadow: 0 18px 48px -28px rgba(15, 23, 42, 0.4);
}

/* ------------------------------------------------------------------ */
/* 2. Hintergrund                                                      */
/* ------------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
}

body.climaletic {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--c-canvas);
	color: var(--c-text);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Mesh-Gradient: drei weiche Farbfelder, die sich dem Wetter anpassen. */
.clim-mesh {
	position: fixed;
	inset: -20vmax;
	z-index: -2;
	opacity: var(--mesh-alpha);
	filter: blur(60px) saturate(120%);
	transition: opacity 1.2s var(--ease);
	pointer-events: none;
	background:
		radial-gradient(42vmax 42vmax at 18% 12%, var(--mesh-1) 0%, transparent 62%),
		radial-gradient(38vmax 38vmax at 82% 26%, var(--mesh-2) 0%, transparent 60%),
		radial-gradient(46vmax 46vmax at 46% 92%, var(--mesh-3) 0%, transparent 64%);
	animation: clim-drift 42s var(--ease) infinite alternate;
}

.clim-mesh::after {
	content: "";
	position: absolute;
	inset: 0;
	background: inherit;
	opacity: 0.5;
	transform: scale(1.15) rotate(8deg);
}

@keyframes clim-drift {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	50% {
		transform: translate3d(2%, -2%, 0) scale(1.06);
	}
	100% {
		transform: translate3d(-2%, 2%, 0) scale(1.02);
	}
}

/* Punktraster: bricht die Weichheit und gibt den Instrumenten-Charakter. */
.clim-grid {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.5;
	background-image: radial-gradient(circle at center, var(--c-dot) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: radial-gradient(ellipse 120% 90% at 50% 20%, #000 30%, transparent 85%);
	-webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 20%, #000 30%, transparent 85%);
}

@media (prefers-reduced-motion: reduce) {
	.clim-mesh {
		animation: none;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------------------------ */
/* 3. Grundelemente                                                    */
/* ------------------------------------------------------------------ */

h1,
h2,
h3,
h4 {
	margin: 0;
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

p {
	margin: 0;
}

a {
	color: var(--c-accent);
	text-decoration: none;
	transition: opacity 0.18s var(--ease);
}

a:hover {
	opacity: 0.78;
}

:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}

.mono,
.clim-metric {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.clim-label {
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-text-3);
}

.clim-muted {
	color: var(--c-text-2);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Buttons */

.clim-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: 0.7rem 1.15rem;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-md);
	background: var(--c-glass-strong);
	color: var(--c-text);
	font: inherit;
	font-weight: 600;
	font-size: var(--fs-sm);
	cursor: pointer;
	transition: transform 0.16s var(--ease), border-color 0.16s var(--ease), background 0.16s var(--ease);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.clim-btn:hover {
	border-color: var(--c-accent);
	transform: translateY(-1px);
}

.clim-btn:active {
	transform: translateY(0);
}

.clim-btn--primary {
	background: linear-gradient(135deg, var(--c-accent), var(--c-violet));
	border-color: transparent;
	color: #04070d;
	box-shadow: 0 8px 30px -12px var(--c-accent);
}

[data-theme="light"] .clim-btn--primary {
	color: #fff;
}

.clim-btn--ghost {
	background: transparent;
	border-color: var(--c-line);
}

.clim-btn--block {
	width: 100%;
}

.clim-btn--google {
	background: var(--c-glass);
	border-color: var(--c-line-strong);
}

.clim-btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* Felder */

.clim-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: var(--sp-4);
}

.clim-field > label {
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-text-3);
}

.clim-input,
.clim-select,
textarea.clim-input {
	width: 100%;
	padding: 0.8rem 0.95rem;
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	background: rgba(0, 0, 0, 0.22);
	color: var(--c-text);
	font: inherit;
	font-size: var(--fs-base);
	transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

[data-theme="light"] .clim-input,
[data-theme="light"] .clim-select {
	background: rgba(255, 255, 255, 0.85);
}

.clim-input::placeholder {
	color: var(--c-text-3);
}

.clim-input:focus,
.clim-select:focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px var(--c-accent-dim);
}

.clim-check {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--c-text-2);
	cursor: pointer;
}

.clim-check input {
	margin-top: 0.2rem;
	accent-color: var(--c-accent);
	width: 1rem;
	height: 1rem;
}

.clim-hint {
	font-size: var(--fs-xs);
	color: var(--c-text-3);
}

/* Meldungen */

.clim-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: 0.8rem 1rem;
	margin-bottom: var(--sp-4);
	border: 1px solid var(--c-line);
	border-left-width: 3px;
	border-radius: var(--r-md);
	background: var(--c-glass);
	font-size: var(--fs-sm);
	line-height: 1.45;
}

.clim-notice--error {
	border-left-color: var(--c-rose);
	background: var(--c-rose-dim);
}

.clim-notice--success {
	border-left-color: var(--c-green);
	background: var(--c-green-dim);
}

.clim-notice--info {
	border-left-color: var(--c-cyan);
	background: var(--c-cyan-dim);
}

/* ------------------------------------------------------------------ */
/* 4. Layout                                                           */
/* ------------------------------------------------------------------ */

.clim-shell {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

.clim-topbar {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-3) var(--sp-5);
	border-bottom: 1px solid var(--c-line);
	background: color-mix(in srgb, var(--c-canvas) 78%, transparent);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
	backdrop-filter: blur(var(--blur)) saturate(150%);
}

.clim-brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 750;
	letter-spacing: -0.03em;
	font-size: var(--fs-lg);
	color: var(--c-text);
}

.clim-brand__mark {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: linear-gradient(140deg, var(--c-cyan), var(--c-violet));
	color: #04070d;
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 0.9rem;
}

.clim-topbar__spacer {
	flex: 1;
}

.clim-main {
	flex: 1;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: var(--sp-6) var(--sp-5) var(--sp-12);
}

/* Bento-Grid: 12 Spalten, Kacheln belegen Spannen. */
.clim-bento {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--sp-4);
}

.clim-tile {
	position: relative;
	grid-column: span 12;
	padding: var(--sp-5);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	background: var(--c-glass);
	box-shadow: var(--shadow), inset 0 1px 0 var(--c-inner-light);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
	backdrop-filter: blur(var(--blur)) saturate(150%);
	overflow: hidden;
}

.clim-tile--flush {
	padding: 0;
}

.clim-tile__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
}

.clim-tile__title {
	font-size: var(--fs-sm);
	font-weight: 650;
	letter-spacing: 0.02em;
}

.span-3 { grid-column: span 12; }
.span-4 { grid-column: span 12; }
.span-5 { grid-column: span 12; }
.span-6 { grid-column: span 12; }
.span-7 { grid-column: span 12; }
.span-8 { grid-column: span 12; }
.span-9 { grid-column: span 12; }

/* ------------------------------------------------------------------ */
/* 5. Komponenten                                                      */
/* ------------------------------------------------------------------ */

/* Ortswechsler */

.clim-places {
	display: flex;
	gap: var(--sp-2);
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 2px;
}

.clim-places::-webkit-scrollbar {
	display: none;
}

.clim-place {
	flex: 0 0 auto;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--c-line);
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--c-text-2);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.16s var(--ease);
}

.clim-place[aria-selected="true"] {
	border-color: var(--c-accent);
	background: var(--c-accent-dim);
	color: var(--c-text);
}

/* Aktuelle Lage */

.clim-now {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
	align-items: start;
}

.clim-now__temp {
	display: flex;
	align-items: flex-start;
	gap: 0.15rem;
	font-family: var(--font-mono);
	font-size: var(--fs-hero);
	font-weight: 300;
	line-height: 0.92;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
}

.clim-now__unit {
	font-size: 0.32em;
	font-weight: 500;
	margin-top: 0.55em;
	color: var(--c-text-2);
}

.clim-now__state {
	margin-top: var(--sp-2);
	font-size: var(--fs-lg);
	font-weight: 600;
}

.clim-now__meta {
	margin-top: 0.2rem;
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

.clim-readouts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: var(--sp-3);
}

.clim-readout {
	padding: var(--sp-3);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	background: rgba(0, 0, 0, 0.16);
}

[data-theme="light"] .clim-readout {
	background: rgba(255, 255, 255, 0.6);
}

.clim-readout__value {
	font-family: var(--font-mono);
	font-size: var(--fs-lg);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
}

.clim-readout__label {
	margin-top: 0.15rem;
	font-size: var(--fs-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-text-3);
}

/* Vertrauensanzeige */

.clim-confidence {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--c-line);
	border-radius: var(--r-pill);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	color: var(--c-text-2);
}

.clim-confidence__dots {
	display: flex;
	gap: 2px;
}

.clim-confidence__dot {
	width: 4px;
	height: 10px;
	border-radius: 2px;
	background: var(--c-line-strong);
}

.clim-confidence__dot.is-on {
	background: var(--c-accent);
}

/* Briefing */

.clim-briefing {
	font-size: var(--fs-lg);
	line-height: 1.55;
	letter-spacing: -0.01em;
}

.clim-briefing__source {
	margin-top: var(--sp-3);
	font-size: var(--fs-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-text-3);
}

/* Nowcast-Streifen */

.clim-nowcast {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 68px;
	margin-top: var(--sp-3);
}

.clim-nowcast__bar {
	flex: 1;
	min-height: 3px;
	border-radius: 3px 3px 1px 1px;
	background: linear-gradient(180deg, var(--c-cyan), rgba(60, 224, 245, 0.28));
	transition: height 0.4s var(--ease);
}

.clim-nowcast__bar.is-empty {
	background: var(--c-line);
	height: 3px;
}

.clim-nowcast__axis {
	display: flex;
	justify-content: space-between;
	margin-top: var(--sp-2);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	color: var(--c-text-3);
}

/* Stundenleiste */

.clim-hours {
	display: flex;
	gap: var(--sp-2);
	overflow-x: auto;
	padding-bottom: var(--sp-2);
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	/* Weiche Kante rechts: zeigt, dass es weitergeht, statt hart abzuschneiden. */
	mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent 100%);
}

.clim-hour {
	flex: 0 0 76px;
	scroll-snap-align: start;
	padding: var(--sp-3) var(--sp-2);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	background: rgba(0, 0, 0, 0.14);
	text-align: center;
}

[data-theme="light"] .clim-hour {
	background: rgba(255, 255, 255, 0.6);
}

.clim-hour.is-now {
	border-color: var(--c-accent);
	background: var(--c-accent-dim);
}

.clim-hour__time {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--c-text-3);
}

.clim-hour__icon {
	margin: 0.35rem 0;
	font-size: 1.2rem;
	line-height: 1;
}

.clim-hour__temp {
	font-family: var(--font-mono);
	font-size: var(--fs-base);
	font-weight: 500;
}

.clim-hour__precip {
	margin-top: 0.15rem;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	color: var(--c-cyan);
	min-height: 1em;
}

/* Tagesliste */

.clim-days {
	display: flex;
	flex-direction: column;
}

.clim-day {
	display: grid;
	grid-template-columns: 3.2rem 1.6rem 1fr 5.4rem;
	align-items: center;
	gap: var(--sp-3);
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--c-line);
}

.clim-day:last-child {
	border-bottom: 0;
}

.clim-day__name {
	font-size: var(--fs-sm);
	font-weight: 600;
}

.clim-day__icon {
	font-size: 1.05rem;
	text-align: center;
}

.clim-day__range {
	position: relative;
	height: 5px;
	border-radius: 3px;
	background: var(--c-line);
	overflow: hidden;
}

.clim-day__bar {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--c-cyan), var(--c-amber));
}

.clim-day__temps {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.clim-day__temps span {
	color: var(--c-text-3);
}

/* Advisor-Karten */

.clim-advisors {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--sp-3);
}

.clim-advisor {
	position: relative;
	padding: var(--sp-4);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	background: rgba(0, 0, 0, 0.16);
	transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
	width: 100%;
	/* Spalte, damit die Sparkline in jeder Karte auf gleicher Höhe abschließt. */
	display: flex;
	flex-direction: column;
}

[data-theme="light"] .clim-advisor {
	background: rgba(255, 255, 255, 0.6);
}

.clim-advisor:hover {
	transform: translateY(-2px);
	border-color: var(--c-line-strong);
}

.clim-advisor__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	margin-bottom: var(--sp-3);
}

.clim-advisor__name {
	font-size: var(--fs-sm);
	font-weight: 650;
}

.clim-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.18rem 0.55rem;
	border-radius: var(--r-pill);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.04em;
	border: 1px solid transparent;
}

.clim-pill--green {
	background: var(--c-green-dim);
	border-color: color-mix(in srgb, var(--c-green) 35%, transparent);
	color: var(--c-green);
}

.clim-pill--amber {
	background: var(--c-amber-dim);
	border-color: color-mix(in srgb, var(--c-amber) 35%, transparent);
	color: var(--c-amber);
}

.clim-pill--red {
	background: var(--c-rose-dim);
	border-color: color-mix(in srgb, var(--c-rose) 35%, transparent);
	color: var(--c-rose);
}

.clim-pill--grey {
	background: var(--c-glass);
	border-color: var(--c-line);
	color: var(--c-text-3);
}

.clim-advisor__headline {
	font-size: var(--fs-sm);
	font-weight: 600;
	margin-bottom: 0.2rem;
}

.clim-advisor__body {
	font-size: var(--fs-xs);
	color: var(--c-text-2);
	line-height: 1.5;
}

.clim-advisor__spark {
	display: flex;
	align-items: flex-end;
	gap: 1px;
	height: 26px;
	margin-top: auto;
	padding-top: var(--sp-3);
}

.clim-advisor__spark i {
	flex: 1;
	border-radius: 1px;
	background: var(--c-line-strong);
	min-height: 2px;
}

.clim-advisor__spark i.is-green { background: var(--c-green); }
.clim-advisor__spark i.is-amber { background: var(--c-amber); }
.clim-advisor__spark i.is-red { background: var(--c-rose); }

/* Warnungen */

.clim-warning {
	display: flex;
	gap: var(--sp-3);
	padding: var(--sp-4);
	border: 1px solid color-mix(in srgb, var(--c-rose) 40%, transparent);
	border-radius: var(--r-lg);
	background: var(--c-rose-dim);
	margin-bottom: var(--sp-3);
}

.clim-warning--moderate {
	border-color: color-mix(in srgb, var(--c-amber) 40%, transparent);
	background: var(--c-amber-dim);
}

.clim-warning__bar {
	width: 3px;
	border-radius: 2px;
	background: var(--c-rose);
	flex: 0 0 3px;
}

.clim-warning--moderate .clim-warning__bar {
	background: var(--c-amber);
}

.clim-warning__title {
	font-size: var(--fs-sm);
	font-weight: 700;
	margin-bottom: 0.2rem;
}

.clim-warning__text {
	font-size: var(--fs-xs);
	color: var(--c-text-2);
	line-height: 1.5;
}

.clim-warning__time {
	margin-top: var(--sp-2);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	color: var(--c-text-3);
}

/* Radar */

.clim-radar {
	position: relative;
	height: 420px;
	border-radius: var(--r-xl);
	overflow: hidden;
	background: var(--c-canvas-2);
}

.clim-radar__map {
	position: absolute;
	inset: 0;
}

.clim-radar__controls {
	position: absolute;
	left: var(--sp-4);
	right: var(--sp-4);
	bottom: var(--sp-4);
	z-index: 500;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	background: color-mix(in srgb, var(--c-canvas) 82%, transparent);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}

.clim-radar__time {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	min-width: 5.4rem;
}

.clim-radar__time.is-forecast {
	color: var(--c-amber);
}

.clim-radar__slider {
	flex: 1;
	accent-color: var(--c-accent);
}

.clim-radar__note {
	position: absolute;
	top: var(--sp-4);
	left: var(--sp-4);
	z-index: 500;
	padding: 0.3rem 0.7rem;
	border-radius: var(--r-pill);
	border: 1px solid var(--c-line);
	background: color-mix(in srgb, var(--c-canvas) 82%, transparent);
	font-size: var(--fs-micro);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-text-2);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.clim-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-3);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	color: var(--c-text-3);
}

.clim-legend span {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.clim-legend i {
	width: 10px;
	height: 10px;
	border-radius: 2px;
}

/* Quellen */

.clim-sources {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.clim-source {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.28rem 0.65rem;
	border: 1px solid var(--c-line);
	border-radius: var(--r-pill);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	color: var(--c-text-2);
}

.clim-source b {
	color: var(--c-text);
	font-weight: 600;
}

/* Pflege-Log */

.clim-care {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.clim-care__item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--sp-3);
	padding: var(--sp-4);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	background: rgba(0, 0, 0, 0.14);
}

[data-theme="light"] .clim-care__item {
	background: rgba(255, 255, 255, 0.6);
}

.clim-care__label {
	font-size: var(--fs-sm);
	font-weight: 650;
	margin-bottom: 0.15rem;
}

.clim-care__meta {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	color: var(--c-text-3);
}

.clim-care__suggestion {
	margin-top: var(--sp-2);
	padding: var(--sp-2) var(--sp-3);
	border-left: 2px solid var(--c-green);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	background: var(--c-green-dim);
	font-size: var(--fs-xs);
	line-height: 1.5;
}

/* Aufgaben und Pflanzen */

.clim-care__group {
	margin: var(--sp-4) 0 var(--sp-2);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-text-3);
}

.clim-care__group:first-child {
	margin-top: 0;
}

.clim-plants {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--sp-3);
}

.clim-plants__empty {
	grid-column: 1 / -1;
	padding: var(--sp-4);
	border: 1px dashed var(--c-line);
	border-radius: var(--r-lg);
}

.clim-plant {
	display: grid;
	grid-template-columns: 64px 1fr;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	background: rgba(0, 0, 0, 0.14);
	color: inherit;
	text-align: left;
	font: inherit;
	cursor: pointer;
	transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}

[data-theme="light"] .clim-plant {
	background: rgba(255, 255, 255, 0.6);
}

.clim-plant:hover,
.clim-plant:focus-visible {
	border-color: var(--c-accent);
	transform: translateY(-1px);
}

.clim-plant__photo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--r-md);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
}

.clim-plant__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.clim-plant__glyph {
	font-size: 1.5rem;
	color: var(--c-text-3);
}

.clim-plant__label {
	font-size: var(--fs-sm);
	font-weight: 650;
	margin-bottom: 0.15rem;
}

.clim-plant__meta {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	color: var(--c-text-3);
	margin-bottom: 0.35rem;
}

.clim-plant__hero {
	width: 100%;
	max-height: 220px;
	object-fit: cover;
	border-radius: var(--r-lg);
	margin-bottom: var(--sp-3);
}

.clim-plant__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-line);
}

/* Wasserbilanz */

.clim-water {
	padding: var(--sp-4);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	background: rgba(0, 0, 0, 0.14);
}

[data-theme="light"] .clim-water {
	background: rgba(255, 255, 255, 0.6);
}

.clim-water__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	flex-wrap: wrap;
	margin-bottom: var(--sp-2);
}

.clim-water__head strong {
	font-size: var(--fs-lg, 1.25rem);
	font-variant-numeric: tabular-nums;
}

.clim-water__bar {
	position: relative;
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
	margin-bottom: var(--sp-2);
}

[data-theme="light"] .clim-water__bar {
	background: rgba(0, 0, 0, 0.08);
}

.clim-water__fill {
	height: 100%;
	border-radius: 999px;
	background: var(--c-cyan, #35d0e0);
	transition: width 0.3s var(--ease);
}

.clim-water__fill.is-low {
	background: var(--c-amber, #e0a23a);
}

.clim-water__mark {
	position: absolute;
	top: -2px;
	bottom: -2px;
	width: 2px;
	background: var(--c-text-3);
	opacity: 0.7;
}

.clim-water__mini {
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	overflow: hidden;
	margin: 0.35rem 0 0.2rem;
}

[data-theme="light"] .clim-water__mini {
	background: rgba(0, 0, 0, 0.08);
}

.clim-water__mini-fill {
	height: 100%;
	background: var(--c-cyan, #35d0e0);
}

.clim-water__mini-fill.is-low {
	background: var(--c-amber, #e0a23a);
}

.clim-water__chart {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 84px;
	margin: var(--sp-3) 0 var(--sp-2);
}

.clim-water__col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
}

.clim-water__value {
	width: 100%;
	border-radius: var(--r-sm) var(--r-sm) 0 0;
	background: var(--c-cyan, #35d0e0);
	min-height: 2px;
}

.clim-water__value.is-past {
	opacity: 0.45;
}

.clim-water__value.is-low {
	background: var(--c-amber, #e0a23a);
}

.clim-water__day {
	margin-top: 0.25rem;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	color: var(--c-text-3);
}

/* Fehlerband */

.clim-alertbar {
	margin-top: var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--c-rose);
	border-radius: var(--r-lg);
	background: var(--c-rose-dim);
	font-size: var(--fs-sm);
}

/* Ereignisse */

.clim-event {
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--c-line);
	border-left-width: 3px;
	border-radius: var(--r-lg);
	background: rgba(0, 0, 0, 0.14);
	margin-bottom: var(--sp-2);
}

[data-theme="light"] .clim-event {
	background: rgba(255, 255, 255, 0.6);
}

.clim-event--info {
	border-left-color: var(--c-cyan);
}

.clim-event--moderate {
	border-left-color: var(--c-amber);
	background: var(--c-amber-dim);
}

.clim-event--severe {
	border-left-color: var(--c-rose);
	background: var(--c-rose-dim);
}

.clim-event__head {
	display: flex;
	align-items: baseline;
	gap: var(--sp-2);
	margin-bottom: 0.25rem;
}

.clim-event__glyph {
	font-size: var(--fs-lg);
	line-height: 1;
}

.clim-event__title {
	font-size: var(--fs-sm);
	font-weight: 700;
}

.clim-event__body {
	font-size: var(--fs-xs);
	line-height: 1.55;
	margin-bottom: 0.35rem;
}

/* Modal / Sheet */

.clim-sheet {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: var(--sp-4);
	background: rgba(3, 5, 10, 0.68);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	animation: clim-fade 0.2s var(--ease);
}

.clim-sheet[hidden] {
	display: none;
}

@keyframes clim-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.clim-sheet__panel {
	width: min(560px, 100%);
	max-height: 86dvh;
	overflow-y: auto;
	padding: var(--sp-6);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-xl);
	background: var(--c-canvas-2);
	box-shadow: var(--shadow);
}

.clim-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--sp-5);
}

/* Suchergebnisse */

.clim-results {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: var(--sp-3);
}

.clim-result {
	display: block;
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid transparent;
	border-radius: var(--r-md);
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.clim-result:hover {
	background: var(--c-glass);
	border-color: var(--c-line);
}

.clim-result small {
	display: block;
	color: var(--c-text-3);
	font-size: var(--fs-xs);
}

/* Skeletons */

.clim-skeleton {
	border-radius: var(--r-md);
	background: linear-gradient(90deg, var(--c-glass) 25%, var(--c-glass-strong) 37%, var(--c-glass) 63%);
	background-size: 400% 100%;
	animation: clim-shimmer 1.4s ease-in-out infinite;
	min-height: 1rem;
}

@keyframes clim-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

/* Untere Navigation (mobil) */

.clim-tabbar {
	position: sticky;
	bottom: 0;
	z-index: 45;
	display: none;
	border-top: 1px solid var(--c-line);
	background: color-mix(in srgb, var(--c-canvas) 88%, transparent);
	-webkit-backdrop-filter: blur(var(--blur));
	backdrop-filter: blur(var(--blur));
	padding: 0.4rem 0 calc(0.4rem + env(safe-area-inset-bottom));
}

.clim-tabbar__btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 0.4rem 0;
	border: 0;
	background: none;
	color: var(--c-text-3);
	font: inherit;
	font-size: var(--fs-micro);
	font-weight: 600;
	cursor: pointer;
}

.clim-tabbar__btn[aria-selected="true"] {
	color: var(--c-accent);
}

.clim-tabbar__icon {
	font-size: 1.05rem;
	line-height: 1;
}

/* ------------------------------------------------------------------ */
/* 6. Auth                                                             */
/* ------------------------------------------------------------------ */

.clim-auth {
	display: grid;
	grid-template-columns: 1fr;
	min-height: 100dvh;
}

.clim-auth__aside {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--sp-12) var(--sp-10);
	border-right: 1px solid var(--c-line);
}

.clim-auth__claim {
	font-size: var(--fs-2xl);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.15;
	max-width: 18ch;
}

.clim-auth__points {
	list-style: none;
	margin: var(--sp-8) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.clim-auth__points li {
	display: flex;
	gap: var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--c-text-2);
	line-height: 1.5;
}

.clim-auth__points b {
	display: block;
	color: var(--c-text);
	font-weight: 650;
}

.clim-auth__dot {
	flex: 0 0 6px;
	width: 6px;
	height: 6px;
	margin-top: 0.5rem;
	border-radius: 50%;
	background: var(--c-accent);
}

.clim-auth__main {
	display: grid;
	place-items: center;
	padding: var(--sp-8) var(--sp-5);
}

.clim-auth__card {
	width: min(420px, 100%);
	padding: var(--sp-8);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	background: var(--c-glass);
	box-shadow: var(--shadow), inset 0 1px 0 var(--c-inner-light);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
	backdrop-filter: blur(var(--blur)) saturate(150%);
}

.clim-auth__title {
	font-size: var(--fs-xl);
	margin-bottom: 0.35rem;
}

.clim-auth__sub {
	font-size: var(--fs-sm);
	color: var(--c-text-2);
	margin-bottom: var(--sp-6);
}

.clim-auth__divider {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin: var(--sp-5) 0;
	font-size: var(--fs-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-text-3);
}

.clim-auth__divider::before,
.clim-auth__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--c-line);
}

.clim-auth__foot {
	margin-top: var(--sp-6);
	font-size: var(--fs-sm);
	color: var(--c-text-2);
	text-align: center;
}

.clim-auth__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-5);
	font-size: var(--fs-sm);
}

.clim-strength {
	height: 3px;
	margin-top: 0.45rem;
	border-radius: 2px;
	background: var(--c-line);
	overflow: hidden;
}

.clim-strength__fill {
	height: 100%;
	width: 0;
	border-radius: 2px;
	background: var(--c-rose);
	transition: width 0.25s var(--ease), background 0.25s var(--ease);
}

.clim-hp {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	width: 0;
}

/* ------------------------------------------------------------------ */
/* 6b. Startseite                                                      */
/* ------------------------------------------------------------------ */

.clim-landing {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: var(--sp-5) var(--sp-5) var(--sp-12);
}

.clim-landing__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-3) 0 var(--sp-8);
}

.clim-landing__bar-actions {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

/* Held: Text links, Live-Kachel rechts. */
.clim-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-8);
	align-items: center;
	padding: var(--sp-6) 0 var(--sp-12);
}

.clim-hero__eyebrow {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	margin-bottom: var(--sp-5);
	border: 1px solid var(--c-line);
	border-radius: var(--r-pill);
	background: var(--c-glass);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-text-2);
}

.clim-hero__title {
	font-size: clamp(2.25rem, 6.5vw, 3.9rem);
	font-weight: 750;
	letter-spacing: -0.04em;
	line-height: 1.04;
	max-width: 16ch;
	background: linear-gradient(150deg, var(--c-text) 40%, var(--c-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.clim-hero__sub {
	margin-top: var(--sp-5);
	max-width: 52ch;
	font-size: var(--fs-lg);
	line-height: 1.6;
	color: var(--c-text-2);
}

.clim-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-8);
}

.clim-btn--lg {
	padding: 0.95rem 1.7rem;
	font-size: var(--fs-base);
	border-radius: var(--r-lg);
}

.clim-hero__google {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--sp-5);
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

.clim-hero__google:hover {
	color: var(--c-text);
	opacity: 1;
}

.clim-hero__demo .clim-tile {
	box-shadow: var(--shadow), inset 0 1px 0 var(--c-inner-light), 0 0 90px -40px var(--c-accent);
}

.clim-hero__confidence {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-4);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-line);
}

/* Funktionen als Bento-Reihe. */
.clim-features {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	padding: var(--sp-6) 0;
}

.clim-feature {
	padding: var(--sp-6);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	background: var(--c-glass);
	box-shadow: inset 0 1px 0 var(--c-inner-light);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
	backdrop-filter: blur(var(--blur)) saturate(150%);
}

.clim-feature__metric {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin-bottom: var(--sp-4);
	font-family: var(--font-mono);
	color: var(--c-accent);
}

.clim-feature__metric span {
	font-size: 2.2rem;
	font-weight: 300;
	letter-spacing: -0.05em;
	line-height: 1;
}

.clim-feature__metric small {
	font-size: var(--fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-text-3);
}

.clim-feature__title {
	font-size: var(--fs-lg);
	margin-bottom: var(--sp-2);
}

.clim-feature__text {
	font-size: var(--fs-sm);
	line-height: 1.62;
	color: var(--c-text-2);
}

.clim-strip {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-6) 0 var(--sp-10);
}

.clim-cta {
	padding: var(--sp-12) var(--sp-6);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	background: var(--c-glass);
	text-align: center;
	-webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
	backdrop-filter: blur(var(--blur)) saturate(150%);
}

.clim-cta__title {
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	letter-spacing: -0.035em;
}

.clim-cta__text {
	max-width: 46ch;
	margin: var(--sp-4) auto 0;
	font-size: var(--fs-base);
	color: var(--c-text-2);
	line-height: 1.6;
}

.clim-landing__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
	margin-top: var(--sp-10);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--c-line);
	font-size: var(--fs-sm);
	color: var(--c-text-3);
}

.clim-landing__foot > span:first-child {
	font-weight: 650;
	color: var(--c-text-2);
}

.clim-landing__links {
	display: flex;
	gap: var(--sp-4);
	margin-left: auto;
}

/* ------------------------------------------------------------------ */
/* 7. Responsive                                                       */
/* ------------------------------------------------------------------ */

/* Kompaktmodus: alles gestapelt, Briefing und Advisors zuerst. */
@media (max-width: 719px) {
	.clim-main {
		padding: var(--sp-4) var(--sp-4) var(--sp-8);
	}

	.clim-tabbar {
		display: flex;
	}

	.clim-tile {
		padding: var(--sp-4);
		border-radius: var(--r-lg);
	}

	.clim-radar {
		height: 320px;
	}

	.clim-now__temp {
		font-size: clamp(3rem, 20vw, 4.5rem);
	}
}

/* Dashboard-Modus: mehrspaltig statt in die Breite gezogen. */
@media (min-width: 720px) {
	.span-3 { grid-column: span 6; }
	.span-4 { grid-column: span 6; }
	.span-5 { grid-column: span 6; }
	.span-6 { grid-column: span 6; }
	.span-7 { grid-column: span 12; }
	.span-8 { grid-column: span 12; }
	.span-9 { grid-column: span 12; }

	.clim-now {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		align-items: center;
	}

	.clim-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {
	.span-3 { grid-column: span 3; }
	.span-4 { grid-column: span 4; }
	.span-5 { grid-column: span 5; }
	.span-6 { grid-column: span 6; }
	.span-7 { grid-column: span 7; }
	.span-8 { grid-column: span 8; }
	.span-9 { grid-column: span 9; }

	.clim-auth {
		grid-template-columns: 1.05fr 1fr;
	}

	.clim-auth__aside {
		display: flex;
	}

	.clim-radar {
		height: 520px;
	}

	.clim-hero {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: var(--sp-10);
	}

	.clim-features {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media print {
	.clim-mesh,
	.clim-grid,
	.clim-tabbar,
	.clim-topbar {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Marke: Die Topbar bleibt in beiden Modi dunkel, damit das Logo mit  */
/* seiner weißen Schrift immer lesbar ist.                            */
/* ------------------------------------------------------------------ */

.clim-topbar {
	background: color-mix(in srgb, #080a10 88%, transparent);
	border-bottom-color: rgba(255, 255, 255, 0.09);
	color: #e8edf6;
}

[data-theme="light"] .clim-topbar {
	background: color-mix(in srgb, #080a10 92%, transparent);
	border-bottom-color: rgba(255, 255, 255, 0.12);
	color: #e8edf6;
}

.clim-topbar .clim-btn--ghost {
	color: #e8edf6;
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.05);
}

.clim-topbar .clim-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.11);
}

.clim-brand {
	gap: 0;
	min-width: 0;
}

.clim-brand__logo {
	display: block;
	height: 30px;
	width: auto;
	max-width: 62vw;
}

@media (max-width: 560px) {
	.clim-brand__logo {
		height: 24px;
	}
}

/* Login, Registrierung und Startseite tragen dasselbe Logo. */
.clim-auth__logo,
.clim-landing__logo {
	display: block;
	height: 46px;
	width: auto;
	max-width: 100%;
	margin-bottom: var(--sp-5);
}

[data-theme="light"] .clim-auth__logo,
[data-theme="light"] .clim-landing__logo {
	padding: var(--sp-3) var(--sp-4);
	border-radius: 14px;
	background: #080a10;
	box-sizing: content-box;
}

/* ------------------------------------------------------------------ */
/* Die WordPress-Adminleiste hat in der App nichts verloren.           */
/* Das Stylesheet ist die Rückfalllinie, falls ein anderes Plugin sie  */
/* trotz des Filters wieder einblendet.                               */
/* ------------------------------------------------------------------ */

body.climaletic #wpadminbar {
	display: none !important;
}

html.climaletic-app,
body.climaletic {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

@media screen and (max-width: 782px) {
	html.climaletic-app {
		margin-top: 0 !important;
	}
}

/* ------------------------------------------------------------------ */
/* Einstellungen: Blöcke sortieren und ein- oder ausblenden           */
/* ------------------------------------------------------------------ */

.clim-arrange {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
}

.clim-arrange__item {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--c-line);
	border-radius: 14px;
	background: var(--c-surface);
	cursor: grab;
}

.clim-arrange__item.is-dragging {
	opacity: 0.45;
	cursor: grabbing;
}

.clim-arrange__item.is-over {
	border-color: var(--c-cyan);
	box-shadow: 0 0 0 1px var(--c-cyan) inset;
}

.clim-arrange__item.is-off .clim-arrange__label {
	opacity: 0.45;
	text-decoration: line-through;
}

.clim-arrange__grip {
	font-family: var(--font-mono);
	opacity: 0.5;
	cursor: grab;
	user-select: none;
}

.clim-arrange__label {
	flex: 1;
	min-width: 0;
	font-weight: 650;
}

.clim-arrange__hint {
	display: block;
	font-weight: 400;
	font-size: var(--fs-sm);
	opacity: 0.65;
}

.clim-arrange__actions {
	display: flex;
	gap: var(--sp-2);
	flex-shrink: 0;
}

.clim-arrange__actions .clim-btn {
	padding: 0.25rem 0.6rem;
	font-size: var(--fs-sm);
}

.clim-choice {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
}

.clim-choice__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	background: var(--c-surface);
	cursor: pointer;
	font-size: var(--fs-sm);
}

.clim-choice__item[aria-pressed="true"] {
	border-color: var(--c-cyan);
	color: var(--c-cyan);
}

.clim-care__interval {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--sp-3);
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px dashed var(--c-line);
}

.clim-care__interval .clim-field {
	margin: 0;
	min-width: 9rem;
}

.clim-care__interval .clim-input,
.clim-care__interval .clim-select {
	min-width: 9rem;
}

/* ------------------------------------------------------------------ */
/* Empfohlene Zeiträume auf der Empfehlungs-Kachel                    */
/* ------------------------------------------------------------------ */

.clim-slots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-top: var(--sp-3);
}

.clim-slots__label {
	font-size: var(--fs-sm);
	opacity: 0.6;
}

.clim-slots__item {
	padding: 0.15rem 0.55rem;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	white-space: nowrap;
	opacity: 0.8;
}

.clim-slots__item.is-good {
	border-color: color-mix(in srgb, var(--c-green) 55%, transparent);
	color: var(--c-green);
	opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Radar: Auswahl des Vorschau-Zeitraums                              */
/* ------------------------------------------------------------------ */

.clim-radar__ranges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-bottom: var(--sp-4);
}

.clim-radar__ranges-label {
	font-size: var(--fs-sm);
	opacity: 0.65;
	margin-right: 0.2rem;
}

.clim-radar__ranges-note {
	font-size: var(--fs-sm);
	opacity: 0.5;
	margin-left: 0.2rem;
}

/* ------------------------------------------------------------------ */
/* Pflege: Datum des Erledigens direkt an der Aufgabe                 */
/* ------------------------------------------------------------------ */

.clim-care__done {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
	min-width: 11rem;
	text-align: left;
}

.clim-care__done-label {
	font-size: var(--fs-sm);
	opacity: 0.65;
}

.clim-care__done .clim-input {
	width: 100%;
}

@media (max-width: 640px) {
	.clim-care__done {
		min-width: 0;
	}
}

/* ------------------------------------------------------------------ */
/* Benachrichtigungen: Ruhezeit und Auswahl je Empfehlung             */
/* ------------------------------------------------------------------ */

.clim-quiet {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--sp-3);
	margin-top: var(--sp-3);
}

.clim-quiet .clim-field {
	margin: 0;
	min-width: 8rem;
}

.clim-bell {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	background: var(--c-surface);
	cursor: pointer;
	font-size: var(--fs-sm);
}

.clim-bell[aria-pressed="true"] {
	border-color: var(--c-cyan);
	color: var(--c-cyan);
}

.clim-bell[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}

/* ------------------------------------------------------------------ */
/* Navigation in der Kopfzeile (Desktop)                              */
/* ------------------------------------------------------------------ */

.clim-topnav {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	margin-left: var(--sp-4);
	overflow-x: auto;
	scrollbar-width: none;
}

.clim-topnav::-webkit-scrollbar {
	display: none;
}

.clim-topnav__link {
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	white-space: nowrap;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: rgba(232, 237, 246, 0.72);
	text-decoration: none;
}

.clim-topnav__link:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #e8edf6;
}

.clim-topnav__link[aria-current="page"] {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* Unter 720 Pixel übernimmt die Leiste am unteren Rand. */
@media (max-width: 719px) {
	.clim-topnav {
		display: none;
	}
}

@media print {
	.clim-topnav {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Praxistipps im Detail-Fenster einer Empfehlung                     */
/* ------------------------------------------------------------------ */

.clim-tips {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin-top: var(--sp-3);
}

.clim-tips__item {
	padding: var(--sp-4);
	border: 1px solid var(--c-line);
	border-left: 3px solid var(--c-cyan);
	border-radius: 0 14px 14px 0;
	background: var(--c-surface);
}

.clim-tips__title {
	font-weight: 700;
	margin-bottom: 0.35rem;
}

.clim-tips__text {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.6;
	opacity: 0.85;
}