/**
 * 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                                                           */
/* ------------------------------------------------------------------ */

/*
 * Erscheinungsbild „Himmel“ (seit 1.25.0).
 *
 * Flache Flächen, keine Effekte, Farbe nur mit Bedeutung: Grün heißt
 * „passt“, Blau heißt Wasser, Rot heißt Warnung, Ocker heißt Sonne und
 * Strom. Farbe und Bewegung gibt es nur im Kopfbereich, dem Himmel; er
 * richtet sich nach Wetter und Tageszeit (siehe `.clim-sky`). Darunter
 * bleibt alles ruhig.
 *
 * Die Namen der Variablen stammen aus dem Vorgänger und bleiben, damit
 * nicht jede Regel umgeschrieben werden muss: `--c-glass` ist jetzt eine
 * flache, deckende Fläche, `--c-cyan` das Akzentblau.
 */

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

	--c-void: #F3F5F8;
	--c-canvas: #FFFFFF;
	--c-canvas-2: #FFFFFF;

	--c-glass: #F4F6F9;
	--c-glass-strong: #EDF0F4;
	--c-line: #E7EAEE;
	--c-line-strong: #D3D9E1;
	--c-inner-light: transparent;
	--c-dot: transparent;

	--c-text: #14181F;
	--c-text-2: #5C6470;
	--c-text-3: #646C78;

	--c-cyan: #1F5FBF;
	--c-cyan-dim: rgba(31, 95, 191, 0.10);
	--c-green: #2E9B5F;
	--c-green-dim: rgba(46, 155, 95, 0.12);
	--c-amber: #B87708;
	--c-amber-dim: rgba(217, 154, 30, 0.15);
	--c-rose: #C8372D;
	--c-rose-dim: rgba(200, 55, 45, 0.10);
	/*
	 * Schriftfarben auf den getönten Pillen, seit 1.30.0. Grün und Ocker
	 * sind als Flächen und Linien gewählt; als kleine Schrift auf ihrer
	 * eigenen Tönung kamen sie im hellen Modus nur auf etwa 3 zu 1 und
	 * damit unter die 4,5, die kleine Schrift braucht. Die dunkleren Töne
	 * liegen bei 4,7 bis 5,5.
	 */
	--c-green-ink: #1D7343;
	--c-amber-ink: #8A5A00;
	--c-rose-ink: #B02E25;
	--c-violet: #1F5FBF;
	--c-violet-dim: rgba(31, 95, 191, 0.10);
	--c-blue: #2F6FD0;
	--c-blue-2: #A9C4EE;
	--c-blue-hatch: rgba(47, 111, 208, 0.16);
	--c-night-shade: rgba(20, 35, 65, 0.06);

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

	/* Typo: eine Schrift, Zahlen in Tabellenziffern statt Monospace. */
	--font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--font-mono: var(--font-sans);

	--fs-micro: 0.75rem;
	--fs-xs: 0.78rem;
	--fs-sm: 0.875rem;
	--fs-base: 0.9375rem;
	--fs-lg: 1.0625rem;
	--fs-xl: 1.375rem;
	--fs-2xl: 1.75rem;
	--fs-3xl: 2.75rem;
	--fs-hero: clamp(3.5rem, 15vw, 4.5rem);

	--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;

	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 16px;
	--r-xl: 22px;
	--r-pill: 999px;

	--blur: 0px;
	--shadow: none;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);

	/* Der Himmel; die Werte je Wetterlage stehen bei `.clim-sky`. */
	--sky-top: #A3C6E8;
	--sky-bot: #DCE9F5;
	--sky-text: #0F2340;
	--sky-text-2: #3F5677;
	--sky-chip: rgba(255, 255, 255, 0.6);
}

/* Dunkel heißt Nachtblau, nicht Schwarz. */
[data-theme="dark"] {
	color-scheme: dark;

	--c-void: #0B1524;
	--c-canvas: #0F1A2B;
	--c-canvas-2: #13213A;

	--c-glass: #15233A;
	--c-glass-strong: #1A2A44;
	--c-line: #22324A;
	--c-line-strong: #30456A;

	--c-text: #EEF2F7;
	--c-text-2: #A3B2C8;
	--c-text-3: #8495AD;

	--c-cyan: #8DB8FF;
	--c-cyan-dim: rgba(141, 184, 255, 0.14);
	--c-green: #4CC285;
	--c-green-dim: rgba(76, 194, 133, 0.16);
	--c-amber: #F0B84A;
	--c-amber-dim: rgba(240, 184, 74, 0.16);
	--c-rose: #FF8576;
	--c-rose-dim: rgba(255, 133, 118, 0.14);
	--c-green-ink: var(--c-green);
	--c-amber-ink: var(--c-amber);
	--c-rose-ink: var(--c-rose);
	--c-violet: #8DB8FF;
	--c-violet-dim: rgba(141, 184, 255, 0.14);
	--c-blue: #6EA2F0;
	--c-blue-2: #33507C;
	--c-blue-hatch: rgba(110, 162, 240, 0.18);
	--c-night-shade: rgba(0, 0, 0, 0.22);
}

/* ------------------------------------------------------------------ */
/* 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;
}

/*
 * Farbnebel und Punktraster sind seit 1.25.0 entfallen. Die Elemente stehen
 * in älteren, zwischengespeicherten Seiten womöglich noch im Markup.
 */
.clim-mesh,
.clim-grid {
	display: none;
}

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

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

/*
 * `hidden` muss verbergen — überall, nicht nur da, wo es zufällig wirkt.
 *
 * Das Attribut bekommt sein `display: none` aus dem Browser-Standard, und
 * jede Regel des Autors schlägt den Standard, ganz gleich wie spezifisch sie
 * ist. Ein `.clim-field { display: flex }` machte damit jedes Feld sichtbar,
 * das im Skript mit `.hidden = true` weggeschaltet wurde. Sichtbar wurde das
 * an der Ortswahl im Pflanzenformular: Sie soll nur erscheinen, wenn es
 * mehrere Orte gibt, stand aber immer da — mit einer leeren Liste, weil es
 * nichts zu wählen gab.
 *
 * Einmal für alle Elemente, statt wie bisher je Bauteil nachgereicht. Das
 * `!important` ist hier kein Holzhammer, sondern die einzige Möglichkeit:
 * Die Regel muss jede Anzeigeart überstimmen, die ein Bauteil für sich
 * festlegt.
 */
[hidden] {
	display: none !important;
}

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);
}

.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);
	/*
	 * iOS legt die Statusleiste über die App, sobald sie als PWA im
	 * Vollbild läuft (viewport-fit=cover plus black-translucent).
	 * Die Kopfzeile bekommt oben deshalb den Platz der Statusleiste
	 * dazu, links und rechts den der abgerundeten Ecken.
	 */
	padding: calc(var(--sp-3) + env(safe-area-inset-top, 0px)) calc(var(--sp-5) + env(safe-area-inset-right, 0px)) var(--sp-3) calc(var(--sp-5) + env(safe-area-inset-left, 0px));
	border-bottom: 1px solid var(--c-line);
	background: color-mix(in srgb, var(--c-canvas) 78%, transparent);
}

.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);

	/*
	 * "dense" füllt eine entstandene Lücke mit einer späteren, schmaleren
	 * Kachel auf. Ohne das bleibt jede Reihe, die nicht auf zwölf Spalten
	 * aufgeht, offen stehen, und das passiert regelmäßig: Die Kachel "Luft
	 * und Pollen" blendet sich je nach Datenlage ein und aus, die
	 * Ereigniskacheln ebenso, und wer die Reihenfolge selbst sortiert, trifft
	 * die Zwölf nur zufällig. Der Preis ist, dass die Reihenfolge dabei
	 * leicht von der eingestellten abweichen kann. Für ein Kachelraster ist
	 * das der richtige Tausch.
	 */
	grid-auto-flow: row dense;
}

/*
 * Aufgezogene Radarkachel.
 *
 * Bis 1.9.6 gab es dafür einen eigenen Menüpunkt, der aber genau dieselbe
 * Kachel zeigte, nur ohne Nachbarn. Aufziehen an Ort und Stelle leistet
 * dasselbe, ohne die Navigation um einen Punkt zu verlängern, der nichts
 * hinzufügt.
 */
.clim-radar__expand {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-3);
	z-index: 500;
}

.clim-tile.is-expanded {
	grid-column: span 12;
}

/* Die Karte selbst hat die feste Höhe, nicht ihr Container. */
.clim-tile.is-expanded /* ------------------------------------------------------------------ */
/* Der Jahresrückblick                                                 */
/* ------------------------------------------------------------------ */

.clim-review__value {
	font-size: var(--fs-lg);
	font-weight: 650;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.clim-review__pick {
	width: auto;
	max-width: 8rem;
}

.clim-review__months {
	margin-top: var(--sp-2);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

/*
 * Eine Zeile je Monat: Name, Temperatur, Regenbalken, Summe.
 *
 * Der Balken zeigt nur den Niederschlag. Für die Temperatur wäre er falsch —
 * sie hat keinen Nullpunkt, an dem ein Balken sinnvoll ansetzt, und ein
 * Balken von −3 auf 18 Grad behauptet eine Größenordnung, die es nicht gibt.
 */
.clim-review__month {
	display: grid;
	grid-template-columns: 6.5rem 4.5rem 1fr 4rem auto;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-sm);
}

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

.clim-review__temp,
.clim-review__rain {
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--c-text-2);
}

.clim-review__track {
	height: 8px;
	border-radius: 999px;
	background: var(--c-glass);
	overflow: hidden;
}

.clim-review__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--c-accent, #4aa8ff);
}

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

/* Am Telefon wird aus der Zeile ein Zweizeiler. */
@media (max-width: 560px) {
	.clim-review__month {
		grid-template-columns: 5rem 4rem 1fr;
	}

	.clim-review__rain,
	.clim-review__part {
		grid-column: 2 / -1;
		text-align: left;
	}
}

/* ------------------------------------------------------------------ */
/* Das Gartenjahr                                                      */
/* ------------------------------------------------------------------ */

/*
 * Die eine große Zahl je Abschnitt. Temperatursumme und Jahreszeit sind das,
 * weswegen jemand auf die Kachel sieht — sie stehen groß, alles andere ist
 * Erklärung darunter.
 */
.clim-season__now {
	font-size: var(--fs-xl);
	font-weight: 650;
	letter-spacing: -0.02em;
	margin: 0.1rem 0 0.2rem;
}

/*
 * Die Frage nach der Zeigerpflanze. Abgesetzt, weil sie etwas verlangt,
 * während der Rest der Kachel nur berichtet.
 */
.clim-season__ask {
	margin-top: var(--sp-4);
	padding: var(--sp-4);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	background: var(--c-glass);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	align-items: flex-start;
}

/*
 * Die Frage ist das Wichtigste in dem Kasten und darf so aussehen. Der
 * Hinweis darunter erklärt, woran man es erkennt, und bleibt leiser.
 */
.clim-season__question {
	font-size: var(--fs-md, 0.9375rem);
	font-weight: 600;
	line-height: 1.35;
}

.clim-season__ask .clim-btn {
	margin-top: 0.3rem;
}

.clim-season__ask .clim-hint {
	margin-top: 0.1rem;
}

/* Das Nachtragen steht unter der Frage, abgesetzt und leiser. */
/*
 * Was noch kommt, tritt zurück.
 *
 * Im Lauf des Jahres stehen alle zehn Jahreszeiten, auch die, deren Fenster
 * erst im Oktober aufgeht. Sie gehören dorthin — ohne sie fehlten Herbst und
 * Winter ganz —, sollen aber nicht wie eine offene Aufgabe aussehen.
 */
.clim-care__item.is-muted {
	opacity: 0.55;
}

.clim-season__later {
	width: 100%;
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--c-line);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.clim-radar {
	height: min(70vh, 40rem);
}

/*
 * Das Zahnrad in der Kachelüberschrift. Es öffnet die Einstellungen genau
 * dort, wo die Frage aufkommt: Wer auf der Aufgabenseite eine Aufgabe
 * stummschalten will, soll dafür nicht den Bereich wechseln müssen.
 */
.clim-tile__gear {
	flex: 0 0 auto;
	padding: 0.3rem 0.6rem;
	line-height: 1;
	font-size: 1rem;
	opacity: 0.65;
}

.clim-tile__gear:hover,
.clim-tile__gear:focus-visible {
	opacity: 1;
}

.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);
	overflow: hidden;
}

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

.clim-tile__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	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;
}

/*
 * Die Kategorieleiste über den Empfehlungen. Neben der Überschrift blieben
 * ihr 60 Prozent der Breite, und auf einem Telefon war das vierte Wort
 * angeschnitten ("Gesundhei..."). Ein angeschnittenes Wort sieht aus wie ein
 * Fehler, nicht wie ein Hinweis zum Wischen. Ab hier bekommt sie schmal eine
 * eigene Zeile.
 */

.clim-places--filter {
	max-width: 60%;
}

@media (max-width: 760px) {
	.clim-places--filter {
		flex: 1 0 100%;
		max-width: 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);
}

/*
 * Vergangene Stunden treten zurück.
 *
 * Die Reihe beginnt drei Stunden vor jetzt, damit "hat es eben geregnet?"
 * beantwortet ist. Ohne diesen Unterschied lasen sich die gefallenen
 * Millimeter wie eine Vorhersage und widersprachen der Kachel darüber.
 */
.clim-hour.is-past {
	opacity: 0.45;
	border-style: dashed;
}

.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-ink);
}

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

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

.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-usable { background: color-mix(in srgb, var(--c-green) 55%, var(--c-amber)); }
.clim-advisor__spark i.is-amber { background: var(--c-amber); }
.clim-advisor__spark i.is-red { background: var(--c-rose); }

/*
 * Verlauf mit Achse. Ohne Uhrzeit unter den Balken ist die Kurve Dekoration:
 * Man sieht, dass es besser und schlechter wird, aber nicht wann.
 */

.clim-advisor__course {
	margin-top: auto;
}

.clim-advisor__course .clim-advisor__spark {
	margin-top: 0;
}

.clim-advisor__axis {
	display: flex;
	gap: 1px;
	margin-top: 0.25rem;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	color: var(--c-text-3);
}

.clim-advisor__axis span {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
}

/*
 * Tagesertrag der Photovoltaik. Statt einer Stundenkurve vier Balken: Die
 * Frage lautet "heute waschen oder morgen", nicht "um wie viel Uhr".
 */

.clim-yield {
	display: flex;
	align-items: flex-end;
	gap: var(--sp-2);
	margin-top: auto;
	padding-top: var(--sp-3);
}

.clim-yield__day {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	min-width: 0;
}

.clim-yield__bar {
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 40px;
	border-radius: 3px;
	background: var(--c-glass);
}

.clim-yield__bar i {
	width: 100%;
	border-radius: 3px;
	background: var(--c-line-strong);
}

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

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

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

/* Die Zahlen, die die Note gemacht haben. */

.clim-advisor__metrics {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.7rem;
	margin-top: var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--c-text-2);
}

.clim-advisor__metric b {
	font-family: var(--font-mono);
	font-weight: 600;
	color: var(--c-text-1);
}

.clim-advisor__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
	font-size: var(--fs-micro);
	color: var(--c-text-3);
}

.clim-advisor__trust::before {
	content: "";
	display: inline-block;
	width: 0.4rem;
	height: 0.4rem;
	margin-right: 0.35rem;
	border-radius: 50%;
	background: var(--c-amber);
	vertical-align: middle;
}

.clim-advisor__trust.is-firm::before {
	background: var(--c-green);
}

/* Sichtbarer Hinweis, dass die Karte sich öffnen lässt. */

.clim-advisor__more {
	opacity: 0.7;
}

.clim-advisor__more::after {
	content: " ›";
}

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

.clim-pill__score {
	font-weight: 500;
	opacity: 0.75;
}

/*
 * Was heute nichts wird, steht hinter einem Klick. Weg ist es nicht:
 * "Segeln geht heute nicht" ist eine Antwort, nur keine zum Scrollen.
 */

.clim-more {
	grid-column: 1 / -1;
	padding: var(--sp-3);
	border: 1px dashed var(--c-line);
	border-radius: var(--r-lg);
	background: none;
	color: var(--c-text-2);
	font: inherit;
	font-size: var(--fs-xs);
	cursor: pointer;
}

.clim-more:hover {
	border-color: var(--c-line-strong);
	color: var(--c-text-1);
}

/* 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;
}

/*
 * Die freie Grundkarte beruhigen.
 *
 * Ohne CARTO-Schlüssel liegen die Standardkacheln von OpenStreetMap darunter,
 * und die sind für sich gedacht, nicht als Untergrund: gelbe Straßen, grüne
 * Wälder, rote Autobahnen. Über all dem wäre der Regen kaum auszumachen.
 * Entsättigt und aufgehellt bleibt genug übrig, um sich zu orientieren.
 *
 * Im Dunkelmodus wird zusätzlich invertiert und der Farbkreis zurückgedreht —
 * der übliche Weg zu einer dunklen Karte ohne eigene dunkle Kacheln. Wasser
 * bleibt dabei blau, statt orange zu werden.
 */
.clim-basemap--plain {
	filter: saturate(0.3) contrast(0.85) brightness(1.05);
}

:root:not([data-theme='light']) .clim-basemap--plain {
	filter: saturate(0.25) brightness(0.85) invert(1) hue-rotate(180deg);
}

.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);
}

.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);
}

.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);
}

/*
 * Antippbare Zeile der Aufgabenliste.
 *
 * Ein <button>, damit Tastatur und Vorlesen ihn finden, aber ohne
 * Knopf-Aussehen: Er ist die Zeile, nicht ein Knopf darin. Bis 1.11.0 war es
 * ein <div>, und alles Weitere stand ausgeklappt darunter.
 */
.clim-care__item--tap {
	width: 100%;
	text-align: left;
	font: inherit;
	color: inherit;
	cursor: pointer;
	align-items: center;
}

.clim-care__item--tap:hover,
.clim-care__item--tap:focus-visible {
	border-color: var(--c-accent);
}

.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);
}

/* Die Woche */

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

.clim-week__day {
	display: grid;
	grid-template-columns: minmax(9rem, 14rem) 1fr;
	gap: var(--sp-3);
	padding: var(--sp-3) 0;
	border-top: 1px solid var(--c-line);
}

.clim-week__day:first-child {
	border-top: 0;
}

.clim-week__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-2);
}

.clim-week__name {
	min-width: 5.5rem;
}

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

.clim-week__weather {
	display: flex;
	align-items: baseline;
	gap: var(--sp-2);
}

.clim-week__rain {
	color: var(--c-cyan);
}

.clim-week__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.clim-week__item {
	display: flex;
	align-items: baseline;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
}

.clim-week__item.is-clickable {
	cursor: pointer;
}

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

.clim-week__item--amber .clim-week__glyph {
	color: var(--c-amber);
}

.clim-week__item--red .clim-week__glyph {
	color: var(--c-rose);
}

.clim-week__glyph {
	flex: 0 0 1.2rem;
}

.clim-week__time {
	margin-left: auto;
	white-space: nowrap;
}

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

/*
 * Auf dem Telefon reicht die Breite nicht für zwei Spalten. Der Tag steht
 * dann über seinem Inhalt statt daneben.
 */
@media (max-width: 640px) {
	.clim-week__day {
		grid-template-columns: 1fr;
		gap: var(--sp-2);
	}
}

/* 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);
}

/* Der Tag, an dem jemand gegossen hat. */
.clim-water__col.is-watered .clim-water__day {
	color: var(--c-cyan);
	font-weight: 600;
}

/* 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);
	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%; }
}

/* Ladeband
 *
 * Liegt fest am oberen Rand über allem anderen und ist nur zu sehen, solange
 * mindestens ein Abruf läuft. Bewusst schmal und ohne Fortschrittswert: Wie
 * weit eine Antwort ist, weiß niemand, dass sie unterwegs ist, schon. */

.clim-progress {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 60;
	height: 3px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	background: linear-gradient(90deg, transparent 0%, var(--c-accent, #38bdf8) 45%, var(--c-accent, #38bdf8) 55%, transparent 100%);
	background-size: 40% 100%;
	background-repeat: no-repeat;
}

.is-loading .clim-progress {
	opacity: 1;
	animation: clim-progress 1.1s ease-in-out infinite;
}

@keyframes clim-progress {
	0% { background-position: -40% 0; }
	100% { background-position: 140% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.is-loading .clim-progress {
		animation: none;
		background-position: 0 0;
		background-size: 100% 100%;
		opacity: 0.6;
	}

	.clim-skeleton {
		animation: none;
	}
}

/* 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);
	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-current="page"] {
	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);
}

.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);
}

.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;
}

.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;
	}
}

/* ------------------------------------------------------------------ */
/* 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);
}

/*
 * Die Zeitraum-Leiste über den Empfehlungen. Sie dreht die Frage um: nicht
 * "wann heute", sondern "was geht Dienstag ab 17 Uhr".
 */

.clim-when {
	margin-bottom: var(--sp-4);
}

.clim-when:empty {
	display: none;
}

.clim-when__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
}

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

.clim-when__reset {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: var(--fs-micro);
	color: var(--c-text-3);
	text-decoration: underline;
	cursor: pointer;
}

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

/*
 * Der Dauer-Regler im Detail-Fenster. Die Dauer stand fest in der Regel, und
 * wer nur eine Stunde radeln wollte, bekam trotzdem das Zwei-Stunden-Fenster.
 */

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

.clim-duration__label {
	font-size: var(--fs-xs);
	color: var(--c-text-3);
	white-space: nowrap;
}

.clim-duration input[type="range"] {
	flex: 1;
	min-width: 0;
	accent-color: var(--c-accent);
}

.clim-duration__value {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	white-space: nowrap;
	min-width: 6.5ch;
	text-align: right;
}

/*
 * Die Rückfrage am Ende des Detail-Fensters. Freiwillig, klein, ohne Druck:
 * Wer sie überliest, verliert nichts.
 */

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

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

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

.clim-verdict__thanks {
	flex: 1 0 100%;
	font-size: var(--fs-micro);
	color: var(--c-text-3);
}

/*
 * Das kleine i mit Erklärung. Kein Dialog, kein title-Attribut (das gibt es
 * auf dem Telefon nicht), sondern ein Kasten, der darunter aufklappt.
 */

.clim-briefing__age {
	opacity: 0.75;
	white-space: nowrap;
}

.clim-info {
	display: inline-block;
	margin-left: 0.35rem;
	vertical-align: middle;
}

.clim-info__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.05rem;
	height: 1.05rem;
	padding: 0;
	border: 1px solid var(--c-line-strong);
	border-radius: 50%;
	background: none;
	color: var(--c-text-3);
	font: inherit;
	font-size: 0.65rem;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.clim-info__button:hover,
.clim-info__button[aria-expanded="true"] {
	border-color: var(--c-accent);
	color: var(--c-accent);
}

/*
 * Die Blase hängt am Bildschirm, nicht am Knopf.
 *
 * Absolut positioniert lief sie in 1.9.12 aus dem Bild: Der Knopf steht in
 * einer schmalen Beschriftung, und `right: 0` schob den Kasten nach links
 * über den Rand hinaus. Dazu wird sie in einer Karte mit overflow ohnehin
 * abgeschnitten. Mit `fixed` und einer Position aus dem Skript kann das
 * beides nicht passieren.
 */

.clim-info__bubble {
	position: fixed;
	z-index: 60;
	top: 0;
	left: 0;
	display: block;
	max-width: min(32ch, calc(100vw - 2rem));
	padding: var(--sp-3);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-md);
	background: var(--c-canvas-2);
	box-shadow: var(--shadow);
	color: var(--c-text-1);
	font-size: var(--fs-xs);
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	white-space: normal;
	text-align: left;
}

/*
 * Ohne diese Zeile blieb der Kasten dauerhaft stehen: Die Regel oben setzt
 * `display: block`, und eine Regel des Autors schlägt das `hidden`-Attribut
 * aus dem Browser-Standard. Das Umschalten im Skript hatte damit keine
 * sichtbare Wirkung.
 */
.clim-info__bubble[hidden] {
	display: none;
}

/*
 * Absätze in der Erklärblase. Die längeren Texte zu Aufgaben und
 * Empfehlungen brauchen Luft, sonst liest sie niemand zu Ende.
 */
.clim-info__text {
	margin: 0 0 var(--sp-2);
}

.clim-info__text:last-of-type {
	margin-bottom: var(--sp-3);
}

/* Die Blase darf länger werden, wenn wirklich etwas zu erklären ist. */
.clim-info__bubble {
	max-height: min(60vh, 30rem);
	overflow-y: auto;
}

.clim-info__close {
	display: block;
	margin-top: var(--sp-2);
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-text-3);
	font: inherit;
	font-size: var(--fs-micro);
	text-decoration: underline;
	cursor: pointer;
}

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

/*
 * Die eigene Reihenfolge der Karten. Pfeile statt Ziehen: Ziehen in einer
 * scrollenden Liste ist auf dem Telefon ein Glücksspiel.
 */

.clim-order {
	display: grid;
	gap: 2px;
	margin-top: var(--sp-3);
}

.clim-order__item {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	background: var(--c-glass);
}

.clim-order__pos {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	color: var(--c-text-3);
	min-width: 2ch;
}

.clim-order__label {
	flex: 1;
	min-width: 0;
	font-size: var(--fs-sm);
}

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

.clim-order__move {
	width: 1.8rem;
	height: 1.8rem;
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	background: none;
	color: var(--c-text-2);
	font: inherit;
	cursor: pointer;
}

.clim-order__move:hover:not([disabled]) {
	border-color: var(--c-accent);
	color: var(--c-text-1);
}

.clim-order__move[disabled] {
	opacity: 0.3;
	cursor: default;
}

/* Knopfreihe am Ende eines Dialogs. */

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

.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;
}

/*
 * Brauchbar, aber nicht gut: 55 bis 69 Punkte. Vorher war dieser Chip
 * farblos, und farblos heißt für den Leser gar nichts.
 */
.clim-slots__item.is-usable {
	border-color: color-mix(in srgb, var(--c-amber) 45%, transparent);
	color: var(--c-amber);
	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;
}

/* ---------------------------------------------------------------------- */
/* Wetterhinweise                                                          */
/* ---------------------------------------------------------------------- */

/*
 * Die Hinweise unter der aktuellen Lage: Schirm, Glätte, Schnee, Böen,
 * Hitze, UV, Nebel. Bewusst schmal gehalten, sie sind eine Ergänzung der
 * Kachel und nicht ihr Hauptinhalt.
 */
/*
 * Kleidungsvorschlag unter der Temperatur. Sieht aus wie eine Zeile, ist aber
 * eine Schaltfläche: Antippen öffnet die Tipps.
 */

.clim-wear {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
	width: 100%;
	margin-top: var(--sp-4);
	padding: var(--sp-3) 0 0;
	border: 0;
	border-top: 1px solid var(--c-line);
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.clim-wear[disabled] {
	cursor: default;
}

.clim-wear__icon {
	font-size: 1.1rem;
	line-height: 1;
}

.clim-wear__body {
	flex: 1;
	min-width: 0;
	font-size: var(--fs-sm);
}

.clim-wear__body b {
	font-weight: 600;
}

.clim-wear__detail {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--fs-xs);
	color: var(--c-text-2);
}

.clim-wear__more {
	flex: 0 0 auto;
	font-size: var(--fs-micro);
	color: var(--c-text-3);
}

.clim-wear__more::after {
	content: " ›";
}

.clim-wear:hover .clim-wear__more {
	color: var(--c-text-1);
}

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

.clim-hintrow {
	display: grid;
	grid-template-columns: 1.4rem 1fr;
	gap: var(--sp-3);
	align-items: start;
	font-size: var(--fs-sm);
	line-height: 1.45;
	color: var(--c-text-2);
}

.clim-hintrow__icon {
	font-size: 1rem;
	line-height: 1.45;
	text-align: center;
}

.clim-hintrow__day {
	display: inline-block;
	margin-right: 0.4rem;
	padding: 0.05rem 0.4rem;
	border-radius: var(--r-sm);
	background: var(--c-glass-strong);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	color: var(--c-text-3);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Was morgen kommt, tritt einen Schritt zurück. */
.clim-hintrow.is-next {
	color: var(--c-text-3);
}

/*
 * Eine Zeile, die ihre Karte öffnet (Wetterfühligkeit). Sie sieht aus wie
 * die anderen; nur der Pfeil und der Zeiger sagen, dass dahinter mehr steht.
 */
.clim-hintrow.is-link {
	cursor: pointer;
	border-radius: var(--r-sm);
}

.clim-hintrow.is-link:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

.clim-hintrow__more {
	margin-left: 0.35rem;
	color: var(--c-text-3);
}

@media (hover: hover) {
	.clim-hintrow.is-link:hover .clim-hintrow__text {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}

/*
 * Am Himmel, seit 1.29.0. Zeilen wie in einer Liste, kein Kasten je
 * Ereignis: Die Kachel soll ruhig bleiben, auch wenn ein Polarlicht ansteht.
 */
.clim-skylist {
	display: grid;
	gap: var(--sp-1);
}

.clim-skyrow {
	display: grid;
	grid-template-columns: 1.6rem 1fr auto;
	gap: var(--sp-3);
	align-items: start;
	width: 100%;
	padding: 0.55rem 0;
	border: 0;
	border-bottom: 1px solid var(--c-line);
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

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

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

.clim-skyrow__icon {
	color: var(--c-text-3);
	line-height: 1;
	padding-top: 0.1rem;
}

.clim-skyrow.is-aurora .clim-skyrow__icon {
	color: var(--c-green, var(--c-accent));
}

.clim-skyrow__body {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.clim-skyrow__head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.5rem;
	align-items: baseline;
}

.clim-skyrow__when {
	font-size: var(--fs-micro);
	color: var(--c-text-3);
	font-variant-numeric: tabular-nums;
}

.clim-skyrow__title {
	font-weight: 600;
}

.clim-skyrow__note,
.clim-skyrow__text {
	font-size: var(--fs-sm);
	line-height: 1.45;
	color: var(--c-text-2);
}

.clim-skyrow .clim-pill {
	white-space: nowrap;
	align-self: center;
}

.clim-skyfoot {
	margin-top: var(--sp-3);
}

.clim-skyfoot .clim-hint + .clim-hint {
	margin-top: var(--sp-1);
}

/* Ungelesene Meldung in der Liste. */
.clim-care__item.is-unread {
	border-color: var(--c-accent);
	box-shadow: inset 2px 0 0 var(--c-accent);
}

/* ---------------------------------------------------------------------- */
/* Ausklappbare Analyse, Luft und Pollen                                   */
/* ---------------------------------------------------------------------- */

.clim-briefing__more {
	margin-top: var(--sp-3);
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-accent);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: 600;
	cursor: pointer;
}

.clim-briefing__more:hover {
	text-decoration: underline;
}

.clim-briefing__detail {
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--c-line);
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--c-text-2);
}

.clim-air__index {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
	margin-bottom: var(--sp-3);
}

/*
 * Die Skala unter der Zahl. "34 ordentlich" allein sagt nicht, ob das nah an
 * gut oder nah an schlecht liegt. Die Farben sind dieselben fünf Stufen, die
 * der europäische Index verwendet.
 */

.clim-air__scale {
	position: relative;
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(90deg,
		var(--c-green) 0%,
		var(--c-green) 20%,
		var(--c-amber) 40%,
		var(--c-amber) 60%,
		var(--c-rose) 80%,
		var(--c-rose) 100%);
}

.clim-air__scale i {
	position: absolute;
	top: -3px;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	border: 2px solid var(--c-canvas);
	border-radius: 50%;
	background: var(--c-text-1);
}

.clim-air__legend {
	display: flex;
	justify-content: space-between;
	margin-top: 0.3rem;
	font-size: 0.6875rem;
	color: var(--c-text-3);
}

.clim-air__advice {
	margin-top: var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--c-text-1);
	line-height: 1.5;
}

.clim-air__value {
	font-family: var(--font-mono);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
}

.clim-air__word {
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

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

.clim-pollen__row {
	display: grid;
	grid-template-columns: 5.5rem 1fr auto;
	gap: var(--sp-3);
	align-items: center;
	font-size: var(--fs-sm);
}

.clim-pollen__bar {
	display: block;
	height: 0.4rem;
	border-radius: 999px;
	background: var(--c-glass-strong);
	overflow: hidden;
}

.clim-pollen__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--c-green);
}

.clim-pollen__fill.is-level-2 { background: var(--c-amber); }
.clim-pollen__fill.is-level-3 { background: var(--c-rose); }

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

/* ------------------------------------------------------------------ */
/* Photovoltaik (seit 1.23.0)                                          */
/* ------------------------------------------------------------------ */

/*
 * Eine Farbe für die Tagesbalken. Grün hieße "guter Tag", und das hängt an
 * der Jahreszeit, nicht an der Anlage.
 */
.clim-yield__bar i.is-accent { background: var(--c-accent); }

.clim-pv__days .clim-yield__bar {
	height: 64px;
}

.clim-pv__daypick {
	flex-wrap: wrap;
	margin: 0;
}

.clim-pv__surplus {
	align-items: center;
}

.clim-week__pv {
	color: var(--c-amber);
}

/*
 * Tagesverlauf: je Stunde ein Balken aus zwei Teilen. Unten, was die
 * Grundlast deckt, oben, was darüber liegt. Die Linie ist die Grundlast.
 */
.clim-pv__chart {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 160px;
	padding-top: var(--sp-2);
}

.clim-pv__col {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	min-width: 0;
}

.clim-pv__col i {
	display: block;
	width: 100%;
}

.clim-pv__low {
	background: var(--c-accent-dim);
	border-radius: 0 0 2px 2px;
}

.clim-pv__high {
	background: var(--c-green);
	border-radius: 2px 2px 0 0;
}

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

.clim-pv__col.is-clipped .clim-pv__high {
	box-shadow: inset 0 3px 0 var(--c-amber);
}

.clim-pv__base {
	position: absolute;
	left: 0;
	right: 0;
	height: 0;
	border-top: 1px dashed var(--c-text-3);
	pointer-events: none;
}

.clim-pv__axis span {
	text-align: left;
}

.clim-pv__swatch {
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 2px;
	vertical-align: -0.05rem;
}

.clim-pv__swatch.is-high { background: var(--c-green); }
.clim-pv__swatch.is-low { background: var(--c-accent-dim); border: 1px solid var(--c-accent); }

/* Formular */

.clim-pv__face {
	margin: 0 0 var(--sp-4);
	padding: var(--sp-3);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	min-width: 0;
}

.clim-pv__face legend {
	padding: 0 var(--sp-2);
}

.clim-pv__advanced {
	margin: var(--sp-3) 0 var(--sp-4);
}

.clim-pv__advanced summary {
	cursor: pointer;
	color: var(--c-text-2);
	font-size: var(--fs-sm);
	margin-bottom: var(--sp-3);
}

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

/*
 * Regnet es gleich? Die Balken aus dem Radar stehen voll, die aus dem Modell
 * danach gedämpft. Es sind zwei Arten von Aussage, und das soll man sehen.
 */
.clim-nowcast.has-radar .clim-nowcast__bar:not(.is-radar):not(.is-empty) {
	opacity: 0.5;
}

.clim-result__precision {
	margin-left: var(--sp-2);
	vertical-align: middle;
	font-size: var(--fs-micro);
}

/*
 * Orte im Konto. Zwei Knöpfe neben der Koordinate werden auf dem Telefon zu
 * breit, dann stehen sie darunter.
 */
.clim-place > div:first-child {
	min-width: 0;
	overflow-wrap: anywhere;
}

.clim-place__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--sp-2);
}

@media (max-width: 560px) {
	.clim-care__item.clim-place {
		grid-template-columns: 1fr;
	}

	.clim-place__actions {
		justify-content: flex-start;
	}
}

/* ------------------------------------------------------------------ */
/* 8. Himmel (seit 1.25.0)                                             */
/*                                                                     */
/* Steht am Ende, damit es die älteren Regeln weiter oben überstimmt,  */
/* ohne dass jede einzeln umgeschrieben werden muss.                   */
/* ------------------------------------------------------------------ */

body.climaletic {
	background: var(--c-canvas);
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
}

/* Beschriftungen in Satzschrift statt gesperrter Versalien. */
.clim-label,
.clim-field > label,
.clim-readout__label,
.clim-briefing__source,
.clim-radar__note,
.clim-care__group,
.clim-hintrow__day,
.clim-feature__metric small,
.clim-hero__eyebrow,
.clim-auth__divider {
	text-transform: none;
	letter-spacing: 0;
}

.clim-label {
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--c-text-3);
}

.clim-field > label {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-text-2);
}

h1,
h2,
h3,
h4 {
	font-weight: 600;
	letter-spacing: -0.015em;
}

/* Knöpfe: flach, ohne Verlauf und ohne Schein. */
.clim-btn {
	background: var(--c-glass);
	border-color: var(--c-line);
	border-radius: var(--r-md);
}

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

.clim-btn--primary,
[data-theme="light"] .clim-btn--primary {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: #FFFFFF;
	box-shadow: none;
}

[data-theme="dark"] .clim-btn--primary {
	color: #0F1A2B;
}

.clim-btn--primary:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
	opacity: 0.9;
}

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

.clim-input,
.clim-select,
textarea.clim-input,
[data-theme="light"] .clim-input,
[data-theme="light"] .clim-select {
	background: var(--c-canvas);
	border-color: var(--c-line-strong);
}

[data-theme="dark"] .clim-input,
[data-theme="dark"] .clim-select {
	background: var(--c-glass);
}

.clim-icon {
	display: block;
	flex: none;
}

/* ------------------------------------------------------------------ */
/* Der Himmel                                                          */
/* ------------------------------------------------------------------ */

.clim-sky {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: var(--sky-text);
	background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 100%);
	border-radius: 0 0 28px 28px;
	padding-bottom: var(--sp-5);
	transition: background 1.2s var(--ease);
}

.clim-sky > .clim-topbar,
.clim-sky__body {
	position: relative;
	z-index: 2;
}

.clim-sky__fx {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

/* Wetterlagen. Je Lage Verlauf, Schriftfarben und die Fläche der Chips. */
.clim-sky[data-sky="clear-day"] { --sky-top: #6FB1EA; --sky-bot: #CDE4F8; --sky-text: #0E2A4A; --sky-text-2: #36597F; --sky-chip: rgba(255, 255, 255, 0.6); }
.clim-sky[data-sky="partly-day"] { --sky-top: #A3C6E8; --sky-bot: #DCE9F5; --sky-text: #0F2340; --sky-text-2: #3F5677; --sky-chip: rgba(255, 255, 255, 0.6); }
.clim-sky[data-sky="cloudy-day"] { --sky-top: #A7B4C5; --sky-bot: #D6DDE6; --sky-text: #16243A; --sky-text-2: #46566C; --sky-chip: rgba(255, 255, 255, 0.58); }
.clim-sky[data-sky="rain-day"] { --sky-top: #7F8FA3; --sky-bot: #BCC6D2; --sky-text: #132132; --sky-text-2: #34465C; --sky-chip: rgba(255, 255, 255, 0.62); }
.clim-sky[data-sky="storm-day"] { --sky-top: #4E5868; --sky-bot: #8E98A7; --sky-text: #F4F6FA; --sky-text-2: #D9DFE8; --sky-chip: rgba(255, 255, 255, 0.16); }
.clim-sky[data-sky="snow-day"] { --sky-top: #B7C7DA; --sky-bot: #EBF1F7; --sky-text: #172840; --sky-text-2: #4A5C74; --sky-chip: rgba(255, 255, 255, 0.62); }
.clim-sky[data-sky="fog-day"] { --sky-top: #BFC7D0; --sky-bot: #E7EAED; --sky-text: #1C2733; --sky-text-2: #4E5A67; --sky-chip: rgba(255, 255, 255, 0.6); }
.clim-sky[data-sky="dawn"] { --sky-top: #8796CC; --sky-bot: #F6D2B0; --sky-text: #1B1F3C; --sky-text-2: #454B6E; --sky-chip: rgba(255, 255, 255, 0.5); }
.clim-sky[data-sky="dusk"] { --sky-top: #6E7DB7; --sky-bot: #F2BE98; --sky-text: #191C36; --sky-text-2: #424866; --sky-chip: rgba(255, 255, 255, 0.45); }
.clim-sky[data-sky="clear-night"] { --sky-top: #0B1730; --sky-bot: #1C2D4C; --sky-text: #F1F4FA; --sky-text-2: #A9B7CF; --sky-chip: rgba(255, 255, 255, 0.11); }
.clim-sky[data-sky="partly-night"] { --sky-top: #0F1C35; --sky-bot: #233350; --sky-text: #F1F4FA; --sky-text-2: #A9B7CF; --sky-chip: rgba(255, 255, 255, 0.11); }
.clim-sky[data-sky="cloudy-night"] { --sky-top: #171F30; --sky-bot: #2B3548; --sky-text: #EEF1F6; --sky-text-2: #A6B1C3; --sky-chip: rgba(255, 255, 255, 0.1); }
.clim-sky[data-sky="rain-night"] { --sky-top: #141C2B; --sky-bot: #283244; --sky-text: #EEF1F6; --sky-text-2: #A6B1C3; --sky-chip: rgba(255, 255, 255, 0.1); }
.clim-sky[data-sky="storm-night"] { --sky-top: #100E1C; --sky-bot: #282437; --sky-text: #F1EFF7; --sky-text-2: #B4AECB; --sky-chip: rgba(255, 255, 255, 0.1); }
.clim-sky[data-sky="snow-night"] { --sky-top: #1C273C; --sky-bot: #38455E; --sky-text: #F1F4FA; --sky-text-2: #B3BFD3; --sky-chip: rgba(255, 255, 255, 0.12); }
.clim-sky[data-sky="fog-night"] { --sky-top: #202833; --sky-bot: #39424E; --sky-text: #EEF1F5; --sky-text-2: #ABB4C1; --sky-chip: rgba(255, 255, 255, 0.11); }

/*
 * Dunkelmodus am Tag: Wer „immer dunkel“ gewählt hat, bekommt auch tagsüber
 * einen gedämpften Himmel. Sonst stünde ein hellgrauer Kopf über einer
 * nachtblauen Seite. Die Lage bleibt erkennbar, nur in der Dämmerung der
 * Seite. (Seit 1.26.0)
 */
[data-theme="dark"] .clim-sky[data-sky="clear-day"] { --sky-top: #1C3A62; --sky-bot: #2C527F; }
[data-theme="dark"] .clim-sky[data-sky="partly-day"] { --sky-top: #1E3352; --sky-bot: #314A70; }
[data-theme="dark"] .clim-sky[data-sky="cloudy-day"] { --sky-top: #222C3B; --sky-bot: #364254; }
[data-theme="dark"] .clim-sky[data-sky="rain-day"] { --sky-top: #1C2533; --sky-bot: #2F3B4D; }
[data-theme="dark"] .clim-sky[data-sky="storm-day"] { --sky-top: #17172A; --sky-bot: #303247; }
[data-theme="dark"] .clim-sky[data-sky="snow-day"] { --sky-top: #24324A; --sky-bot: #3F4F68; }
[data-theme="dark"] .clim-sky[data-sky="fog-day"] { --sky-top: #232B36; --sky-bot: #3B4450; }
[data-theme="dark"] .clim-sky[data-sky="dawn"] { --sky-top: #262A4E; --sky-bot: #5E4553; }
[data-theme="dark"] .clim-sky[data-sky="dusk"] { --sky-top: #22264A; --sky-bot: #5C4150; }

[data-theme="dark"] .clim-sky[data-phase="day"],
[data-theme="dark"] .clim-sky[data-phase="dawn"],
[data-theme="dark"] .clim-sky[data-phase="dusk"] {
	--sky-text: #F1F4FA;
	--sky-text-2: #B4C1D4;
	--sky-chip: rgba(255, 255, 255, 0.1);
}

/* Kopfzeile im Himmel */
.clim-sky .clim-topbar {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	padding: calc(var(--sp-3) + env(safe-area-inset-top, 0px)) calc(var(--sp-5) + env(safe-area-inset-right, 0px)) var(--sp-1) calc(var(--sp-5) + env(safe-area-inset-left, 0px));
	border-bottom: 0;
	background: transparent;
	color: var(--sky-text);
	gap: var(--sp-2);
}

.clim-sky .clim-brand {
	gap: 0.5rem;
	color: var(--sky-text);
}

.clim-brand__name {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.clim-sky .clim-brand__mark,
svg.clim-brand__mark {
	width: 24px;
	height: 24px;
	border-radius: 0;
	background: none;
	color: currentColor;
}

.clim-iconbtn {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--sky-text);
	cursor: pointer;
	transition: background 0.16s var(--ease);
}

.clim-iconbtn:hover {
	background: var(--sky-chip);
	opacity: 1;
}

.clim-iconbtn__badge {
	position: absolute;
	top: 3px;
	right: 2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: var(--r-pill);
	background: #E5483B;
	color: #FFFFFF;
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.clim-sky .clim-topnav__link {
	color: var(--sky-text-2);
}

.clim-sky .clim-topnav__link[aria-current="page"],
.clim-sky .clim-topnav__link:hover {
	color: var(--sky-text);
	background: var(--sky-chip);
}

.clim-sky__body {
	max-width: 1440px;
	margin: 0 auto;
	padding: var(--sp-2) calc(var(--sp-5) + env(safe-area-inset-right, 0px)) 0 calc(var(--sp-5) + env(safe-area-inset-left, 0px));
}

.clim-sky .clim-place {
	border: 0;
	background: transparent;
	color: var(--sky-text-2);
	padding: 0.4rem 0.8rem;
}

.clim-sky .clim-place[aria-selected="true"] {
	background: var(--sky-chip);
	color: var(--sky-text);
}

/* Die Lage */
.clim-lage {
	max-width: 760px;
	padding-top: var(--sp-3);
}

.clim-lage__meta {
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--sky-text-2);
}

.clim-lage__title {
	margin: 0.3rem 0 0.5rem;
	font-size: clamp(1.45rem, 5.4vw, 2.05rem);
	line-height: 1.18;
	font-weight: 600;
	letter-spacing: -0.022em;
	max-width: 30ch;
	text-wrap: balance;
}

.clim-lage__lead {
	max-width: 52ch;
	margin-bottom: var(--sp-2);
	color: var(--sky-text-2);
	font-size: var(--fs-base);
	line-height: 1.45;
}

.clim-lage__now {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	margin-top: var(--sp-3);
}

.clim-lage__temp {
	font-size: var(--fs-hero);
	line-height: 0.9;
	font-weight: 500;
	letter-spacing: -0.045em;
}

.clim-lage__cond {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	font-size: var(--fs-sm);
	color: var(--sky-text-2);
}

.clim-lage__state {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--sky-text);
}

.clim-lage__range {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.clim-sky__art {
	flex: none;
	width: 112px;
	height: 99px;
	margin: -8px -8px -8px auto;
	pointer-events: none;
}

.clim-sky__art svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.clim-lage__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: var(--sp-4);
}

.clim-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 5px 10px;
	border-radius: var(--r-pill);
	background: var(--sky-chip);
	font-size: 0.8125rem;
	color: var(--sky-text-2);
	white-space: nowrap;
}

.clim-chip__value {
	font-weight: 600;
	color: var(--sky-text);
}

.clim-lage__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin-top: var(--sp-3);
	font-size: 0.8125rem;
	color: var(--sky-text-2);
}

.clim-sky .clim-confidence {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sky-text-2);
	font-family: inherit;
	font-size: inherit;
	letter-spacing: 0;
}

.clim-sky .clim-confidence__dots {
	display: inline-flex;
	gap: 3px;
}

.clim-sky .clim-confidence__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sky-text);
	opacity: 0.22;
}

.clim-sky .clim-confidence__dot.is-on {
	opacity: 1;
	background: var(--sky-text);
	box-shadow: none;
}

.clim-lage__source {
	display: block;
	min-width: 0;
}

.clim-lage__refresh {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin-left: -4px;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--sky-text-2);
	cursor: pointer;
}

.clim-lage__refresh:hover {
	background: var(--sky-chip);
	color: var(--sky-text);
}

.clim-lage__refresh[disabled] {
	opacity: 0.4;
	cursor: default;
}

.clim-sky .clim-briefing__more {
	margin-top: var(--sp-2);
	padding: 0;
	border: 0;
	background: none;
	color: var(--sky-text);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.clim-sky .clim-briefing__detail {
	max-width: 60ch;
	margin-top: var(--sp-2);
	color: var(--sky-text-2);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.clim-sky .clim-wear {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	width: 100%;
	max-width: 520px;
	margin-top: var(--sp-3);
	padding: 0.6rem 0.8rem;
	border: 0;
	border-radius: var(--r-md);
	background: var(--sky-chip);
	color: var(--sky-text);
	font: inherit;
	font-size: var(--fs-sm);
	text-align: left;
}

.clim-sky .clim-wear__detail,
.clim-sky .clim-wear__more {
	color: var(--sky-text-2);
}

.clim-sky .clim-hints {
	max-width: 520px;
	margin-top: var(--sp-3);
	border: 0;
	background: none;
	padding: 0;
}

.clim-sky .clim-hintrow {
	color: var(--sky-text);
	border-color: transparent;
	background: none;
	padding: 0.25rem 0;
}

.clim-sky .clim-hintrow__icon,
.clim-sky .clim-hintrow__more {
	color: var(--sky-text-2);
}

/* Amtliche Warnungen im Himmel */
.clim-sky__warnings {
	max-width: 760px;
	margin-top: var(--sp-4);
}

.clim-sky .clim-warning {
	display: flex;
	gap: var(--sp-3);
	margin-bottom: var(--sp-2);
	padding: 0.75rem 0.9rem;
	border: 0;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.72);
	color: #14181F;
	box-shadow: none;
}

.clim-sky[data-phase="night"] .clim-warning,
[data-theme="dark"] .clim-sky .clim-warning,
.clim-sky[data-family="storm"] .clim-warning {
	background: rgba(255, 255, 255, 0.92);
}

.clim-sky .clim-warning__bar {
	flex: none;
	width: 3px;
	border-radius: 2px;
	background: #D9822B;
}

.clim-sky .clim-warning:not(.clim-warning--moderate) .clim-warning__bar {
	background: #C8372D;
}

.clim-sky .clim-warning__title {
	font-weight: 600;
	color: #14181F;
}

.clim-sky .clim-warning__text,
.clim-sky .clim-warning__time {
	color: #4A5260;
	font-family: inherit;
	font-size: var(--fs-sm);
}

/* Auf den übrigen Seiten nur die kurze Zeile mit Temperatur und Wetter. */
body.climaletic:not(.climaletic--app):not(.climaletic--landing) .clim-lage__meta,
body.climaletic:not(.climaletic--app):not(.climaletic--landing) .clim-lage__title,
body.climaletic:not(.climaletic--app):not(.climaletic--landing) .clim-lage__lead,
body.climaletic:not(.climaletic--app):not(.climaletic--landing) .clim-lage__chips,
body.climaletic:not(.climaletic--app):not(.climaletic--landing) .clim-lage__trust,
body.climaletic:not(.climaletic--app):not(.climaletic--landing) .clim-briefing__more,
body.climaletic:not(.climaletic--app):not(.climaletic--landing) .clim-briefing__detail,
body.climaletic:not(.climaletic--app):not(.climaletic--landing) .clim-sky .clim-wear,
body.climaletic:not(.climaletic--app):not(.climaletic--landing) .clim-sky .clim-hints {
	display: none !important;
}

body.climaletic:not(.climaletic--app):not(.climaletic--landing) .clim-lage__now {
	margin-top: var(--sp-2);
}

body.climaletic:not(.climaletic--app):not(.climaletic--landing) .clim-lage__temp {
	font-size: 2.4rem;
}

body.climaletic:not(.climaletic--app):not(.climaletic--landing) .clim-sky__art {
	width: 80px;
	height: 70px;
}

/* Illustration */
.clim-sky__sun { fill: #FFCF4D; }
.clim-sky__sun--low { fill: #FFB25E; }
.clim-sky__sun--veiled { fill: #FFF4D6; opacity: 0.75; }
.clim-sky__moon { fill: #F4EBC8; }
.clim-sky__halo--moon { fill: #F4EBC8; opacity: 0.1; }
.clim-sky__cloud { fill: #FFFFFF; opacity: 0.97; }
.clim-sky__cloud--back { opacity: 0.7; }
.clim-sky[data-family="cloudy"] .clim-sky__cloud,
.clim-sky[data-family="rain"] .clim-sky__cloud,
.clim-sky[data-family="snow"] .clim-sky__cloud { fill: #F3F6F9; }
.clim-sky[data-family="rain"] .clim-sky__cloud--back,
.clim-sky[data-family="cloudy"] .clim-sky__cloud--back { fill: #DCE2E9; opacity: 0.9; }
.clim-sky[data-family="storm"] .clim-sky__cloud { fill: #A9B2BF; }
.clim-sky[data-family="storm"] .clim-sky__cloud--back { fill: #7F8896; opacity: 0.9; }
.clim-sky[data-phase="night"] .clim-sky__cloud { fill: #56657F; opacity: 0.92; }
.clim-sky[data-phase="night"] .clim-sky__cloud--back { fill: #3E4B63; opacity: 0.9; }
[data-theme="dark"] .clim-sky:not([data-phase="night"]) .clim-sky__cloud { fill: #7D8BA2; opacity: 0.95; }
[data-theme="dark"] .clim-sky:not([data-phase="night"]) .clim-sky__cloud--back { fill: #5A6880; opacity: 0.9; }
[data-theme="dark"] .clim-sky:not([data-phase="night"]) .clim-sky__sun--veiled { fill: #F4E7B5; opacity: 0.55; }
.clim-sky__bolt { fill: #FFE07A; opacity: 0; animation: clim-bolt 11s infinite; }

.clim-sky__halo {
	transform-box: fill-box;
	transform-origin: center;
	animation: clim-pulse 7s ease-in-out infinite alternate;
}

.is-drift { animation: clim-cloud 26s ease-in-out infinite alternate; }
.is-drift-slow { animation: clim-cloud 34s ease-in-out infinite alternate-reverse; }

/* Effekte */
.clim-sky__rain {
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg stroke='white' stroke-width='1.4' stroke-linecap='round' opacity='.9'%3E%3Cpath d='M8 2l-3 12'/%3E%3Cpath d='M30 20l-3 12'/%3E%3Cpath d='M52 6l-3 12'/%3E%3Cpath d='M18 40l-3 12'/%3E%3Cpath d='M44 44l-3 12'/%3E%3Cpath d='M60 30l-3 12'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 64px 64px;
	opacity: 0.36;
	animation: clim-rain 0.9s linear infinite;
	-webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
}

.clim-sky__flash {
	position: absolute;
	inset: 0;
	background: #FFFFFF;
	opacity: 0;
	animation: clim-flash 11s infinite;
}

.clim-sky__snow {
	position: absolute;
	inset: -10px 0 0;
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1.7px, transparent 2.2px),
		radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 1.2px, transparent 1.7px);
	background-size: 58px 58px, 36px 36px;
	background-position: 0 0, 18px 22px;
	animation: clim-snow 10s linear infinite, clim-sway 6s ease-in-out infinite alternate;
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

.clim-sky__snow--far {
	opacity: 0.55;
	background-size: 40px 40px, 26px 26px;
	animation-duration: 16s, 9s;
}

.clim-sky[data-sky="snow-day"] .clim-sky__snow {
	filter: drop-shadow(0 0 1px rgba(23, 40, 64, 0.25));
}

.clim-sky__fog {
	position: absolute;
	left: -15%;
	right: -15%;
	top: 20%;
	height: 34%;
	background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
	animation: clim-fog 28s ease-in-out infinite alternate;
}

.clim-sky__fog--2 {
	top: 55%;
	height: 30%;
	opacity: 0.75;
	animation-duration: 38s;
	animation-direction: alternate-reverse;
}

.clim-sky[data-phase="night"] .clim-sky__fog,
[data-theme="dark"] .clim-sky__fog {
	background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%);
}

.clim-sky__stars i {
	position: absolute;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: #FFFFFF;
	animation: clim-twinkle 4.5s ease-in-out infinite alternate;
}

.clim-sky__stars i.is-big {
	width: 3px;
	height: 3px;
}

@keyframes clim-pulse { from { transform: scale(0.94); } to { transform: scale(1.06); } }
@keyframes clim-cloud { from { transform: translateX(-6px); } to { transform: translateX(8px); } }
@keyframes clim-rain { from { background-position: 0 0; } to { background-position: -16px 64px; } }
@keyframes clim-snow { from { background-position: 0 0, 18px 22px; } to { background-position: 0 58px, 18px 58px; } }
@keyframes clim-sway { from { transform: translateX(-5px); } to { transform: translateX(5px); } }
@keyframes clim-fog { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
@keyframes clim-twinkle { from { opacity: 0.15; } to { opacity: 0.9; } }
@keyframes clim-flash { 0%, 91%, 100% { opacity: 0; } 92% { opacity: 0.12; } 93% { opacity: 0; } 94.5% { opacity: 0.07; } 95.5% { opacity: 0; } }
@keyframes clim-bolt { 0%, 91%, 100% { opacity: 0; } 92%, 95% { opacity: 1; } }

/*
 * Wer in seinem System „Bewegung reduzieren“ eingestellt hat, sieht den
 * Himmel still. Das Aufblitzen beim Gewitter entfällt dann ganz.
 */
@media (prefers-reduced-motion: reduce) {
	.clim-sky *,
	.clim-sky {
		animation: none !important;
		transition: none !important;
	}

	.clim-sky__flash {
		display: none;
	}

	.clim-sky__bolt {
		opacity: 1;
	}
}

/* ------------------------------------------------------------------ */
/* Unter dem Himmel: ruhige Abschnitte statt Glaskacheln              */
/* ------------------------------------------------------------------ */

.clim-main {
	padding: var(--sp-2) calc(var(--sp-5) + env(safe-area-inset-right, 0px)) calc(var(--sp-12) + 40px) calc(var(--sp-5) + env(safe-area-inset-left, 0px));
}

.clim-tile,
[data-theme="light"] .clim-tile {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--c-line);
	border-radius: 0;
	box-shadow: none;
	padding: var(--sp-5) 0 var(--sp-2);
}

.clim-tile:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--c-line);
}

.clim-tile--flush {
	padding: var(--sp-5) 0 var(--sp-2);
	overflow: visible;
}

.clim-tile__head {
	margin-bottom: var(--sp-3);
}

.clim-tile__title {
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.clim-tile__gear {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--c-text-3);
}

.clim-tile__gear:hover {
	background: var(--c-glass);
	color: var(--c-text);
}

/* Regnet es gleich? Ohne Niederschlag nur der Satz. */
.clim-tile.is-dry #clim-nowcast-text {
	margin-bottom: 0;
}

#clim-nowcast-text {
	font-size: var(--fs-base);
	color: var(--c-text);
}

.clim-nowcast__bar {
	background: var(--c-blue-2);
	box-shadow: none;
}

.clim-nowcast__bar.is-radar {
	background: var(--c-blue);
}

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

/* Stunden mit Himmelsstreifen */
.clim-hours {
	padding-top: 14px;
	background-image: var(--sky-strip, none);
	background-repeat: no-repeat;
	background-size: calc(100% - 12px) 6px;
	background-position: 6px 0;
	background-attachment: local;
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
}

.clim-hours {
	gap: 2px;
}

.clim-hour,
[data-theme="light"] .clim-hour {
	flex: 0 0 46px;
	min-width: 46px;
	padding: 8px 2px 6px;
	border: 0;
	border-radius: var(--r-md);
	background: transparent;
	box-shadow: none;
}

.clim-hour.is-now {
	background: var(--c-glass);
	border: 0;
	box-shadow: none;
}

.clim-hour.is-past {
	opacity: 0.4;
	border: 0;
	background: transparent;
}

.clim-hour__time {
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--c-text-3);
}

.clim-hour.is-now .clim-hour__time {
	color: var(--c-text);
	font-weight: 600;
}

.clim-hour__icon {
	display: flex;
	justify-content: center;
	color: var(--c-text);
	font-size: 0;
}

.clim-hour__temp {
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
}

.clim-hour__precip {
	font-family: inherit;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--c-blue);
}

/* Tagesliste */
.clim-day__icon {
	display: flex;
	justify-content: center;
	color: var(--c-text);
	font-size: 0;
}

.clim-day__range {
	background: var(--c-line);
}

.clim-day__bar {
	background: var(--c-text);
	opacity: 0.8;
	box-shadow: none;
}

.clim-day__temps {
	font-family: inherit;
}

/* Tagesband */
.clim-band {
	position: relative;
}

.clim-band__over {
	position: absolute;
	left: 156px;
	right: 0;
	top: 0;
	bottom: 44px;
	z-index: 0;
	pointer-events: none;
}

.clim-band__night {
	position: absolute;
	top: -4px;
	bottom: 0;
	background: var(--c-night-shade);
	border-radius: 6px;
}

.clim-band__rain {
	position: absolute;
	top: -4px;
	bottom: 0;
	border-radius: 8px;
	background: repeating-linear-gradient(-45deg, var(--c-blue-hatch) 0 3px, transparent 3px 7px);
}

.clim-band__rain span {
	position: absolute;
	right: 6px;
	top: 3px;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--c-blue);
}

.clim-band__now {
	position: absolute;
	top: -6px;
	bottom: -4px;
	border-left: 2px solid var(--c-text);
}

.clim-band__now::before {
	content: "";
	position: absolute;
	top: -4px;
	left: -5px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c-text);
}

.clim-band__row {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 112px 44px 1fr;
	align-items: center;
	width: 100%;
	height: 34px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.clim-band__row:hover .clim-band__track {
	background: var(--c-line-strong);
}

.clim-band__name {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	overflow: hidden;
	font-size: var(--fs-sm);
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.clim-band__name .clim-icon {
	color: var(--c-text-3);
}

.clim-band__time {
	font-size: 0.75rem;
	color: var(--c-text-2);
}

.clim-band__track {
	position: relative;
	height: 8px;
	border-radius: 4px;
	background: var(--c-line);
}

.clim-band__bar {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 4px;
	background: var(--c-green);
}

.clim-band__bar.is-ok {
	background: color-mix(in srgb, var(--c-green) 55%, transparent);
}

.clim-band__bar.is-pv {
	background: var(--c-amber);
}

.clim-band__axis {
	height: 22px;
	cursor: default;
}

.clim-band__ticks {
	height: 14px;
	background: none;
}

.clim-band__ticks > span {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	font-size: 0.6875rem;
	color: var(--c-text-3);
	white-space: nowrap;
}

.clim-band__sun {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--c-amber) !important;
	font-weight: 600;
}

/* Untere Leiste: ruhig, ohne Glas */
.clim-tabbar {
	background: var(--c-canvas);
	border-top: 1px solid var(--c-line);
	box-shadow: none;
}

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

.clim-tabbar__btn[aria-current="page"] {
	color: var(--c-accent);
	background: transparent;
}

.clim-tabbar__icon {
	display: flex;
	justify-content: center;
	font-size: 0;
}

/* Blätter (Dialoge) flach */
.clim-sheet__panel {
	background: var(--c-canvas);
	border-color: var(--c-line);
	box-shadow: 0 -8px 30px -20px rgba(15, 23, 42, 0.35);
}

.clim-sheet {
	background: rgba(15, 23, 42, 0.35);
}

/* Desktop: der Himmel bekommt mehr Luft, die Illustration mehr Platz. */
@media (min-width: 900px) {
	.clim-sky {
		border-radius: 0 0 36px 36px;
		padding-bottom: var(--sp-8);
	}

	.clim-sky__art {
		width: 170px;
		height: 150px;
	}

	.clim-lage__chips,
	.clim-lage__trust {
		max-width: 760px;
	}
}

/* Photovoltaik trägt Ocker, die Farbe von Sonne und Strom. */
.clim-pv__days .clim-yield__bar i,
.clim-pv__days .clim-yield__bar .is-accent {
	background: var(--c-amber);
}

.clim-plant__glyph {
	display: grid;
	place-items: center;
	color: var(--c-text-3);
}

/* ------------------------------------------------------------------ */
/* Startseite im Himmel (seit 1.25.0)                                  */
/* ------------------------------------------------------------------ */

.clim-landing {
	max-width: none;
	padding: 0;
}

.clim-landing__sky {
	padding-bottom: var(--sp-8);
}

.clim-landing__sky .clim-topbar,
.clim-landing__hero,
.clim-landing__main {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
}

.clim-landing__login {
	padding: 0.45rem 0.95rem;
	border-radius: var(--r-pill);
	background: var(--sky-chip);
	color: var(--sky-text);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.clim-landing__login:hover {
	opacity: 1;
	color: var(--sky-text);
	background: rgba(255, 255, 255, 0.8);
}

.clim-sky[data-phase="night"] .clim-landing__login:hover,
.clim-sky[data-family="storm"] .clim-landing__login:hover {
	background: rgba(255, 255, 255, 0.2);
}

.clim-landing__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-8);
	padding: var(--sp-6) var(--sp-5) 0;
}

.clim-landing__eyebrow {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--sky-text-2);
}

.clim-landing__title {
	margin-top: var(--sp-2);
	max-width: 15ch;
	font-size: clamp(2rem, 6.4vw, 3.5rem);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: var(--sky-text);
}

.clim-landing__sub {
	margin-top: var(--sp-4);
	max-width: 46ch;
	font-size: var(--fs-lg);
	line-height: 1.55;
	color: var(--sky-text-2);
}

.clim-landing__hero .clim-hero__actions {
	margin-top: var(--sp-6);
}

.clim-landing__second {
	border-color: transparent;
	background: var(--sky-chip);
	color: var(--sky-text);
}

.clim-landing__hero .clim-hero__google,
.clim-landing__note {
	color: var(--sky-text-2);
}

.clim-landing__note {
	margin-top: var(--sp-5);
	font-size: var(--fs-sm);
}

/* Das Beispiel: eine ruhige Fläche im Himmel, kein Kasten mit Schatten. */
.clim-landing__demo {
	align-self: center;
	padding: var(--sp-5);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 22px;
	background: var(--sky-chip);
	color: var(--sky-text);
}

.clim-landing__demo-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--sky-text-2);
}

.clim-landing__live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
}

.clim-landing__live::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #2E9B5F;
	animation: clim-pulse 2.4s ease-in-out infinite;
}

.clim-landing__demo .clim-lage__now {
	margin-top: var(--sp-2);
}

.clim-landing__demo .clim-sky__art {
	width: 104px;
	height: 92px;
}

.clim-landing__hours {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 2px;
	margin-top: var(--sp-4);
	padding-top: var(--sp-4);
	border-top: 1px solid rgba(127, 140, 160, 0.25);
	text-align: center;
}

.clim-landing__hour {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
	font-size: 0.75rem;
	color: var(--sky-text-2);
	font-variant-numeric: tabular-nums;
}

.clim-landing__hour .clim-icon {
	color: var(--sky-text);
}

.clim-landing__hour b {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--sky-text);
}

.clim-landing__hour small {
	font-size: 0.6875rem;
	color: var(--c-blue, #1F5FBF);
	white-space: nowrap;
}

.clim-sky[data-phase="night"] .clim-landing__hour small {
	color: #8DB8F2;
}

.clim-landing__demo .clim-lage__trust {
	margin-top: var(--sp-4);
	color: var(--sky-text-2);
}

/* Auf schmalen Telefonen nur sechs Stunden, sonst wird es eng. */
@media (max-width: 420px) {
	.clim-landing__hours {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.clim-landing__hour:nth-child(n+7) {
		display: none;
	}
}

.clim-landing__main {
	padding: var(--sp-8) var(--sp-5) var(--sp-12);
}

.clim-landing__main .clim-features {
	padding-top: 0;
}

.clim-feature {
	border: 0;
	border-top: 3px solid var(--c-blue, #1F5FBF);
	border-radius: 16px;
	box-shadow: none;
}

.clim-feature__metric {
	font-family: inherit;
	color: var(--c-text);
	font-variant-numeric: tabular-nums;
}

.clim-feature__metric span {
	font-weight: 600;
	letter-spacing: -0.03em;
}

.clim-feature__metric small {
	color: var(--c-text-3);
}

.clim-cta {
	box-shadow: none;
}

@media (min-width: 900px) {
	.clim-landing__sky {
		padding-bottom: var(--sp-12);
	}

	.clim-landing__hero {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		gap: var(--sp-12);
		padding-top: var(--sp-10);
	}

	.clim-landing__demo {
		padding: var(--sp-6);
	}

	.clim-landing__demo .clim-sky__art {
		width: 140px;
		height: 124px;
	}
}

/* Anmelden und Registrieren: das Zeichen der App statt des alten Logos. */
.clim-auth__brand {
	margin-bottom: var(--sp-8);
}

.clim-auth__aside.clim-sky {
	border-right: 0;
	border-radius: 0;
	padding-bottom: var(--sp-12);
	color: var(--sky-text);
}

.clim-auth__aside.clim-sky > div:not(.clim-sky__fx):not(.clim-auth__art),
.clim-auth__aside.clim-sky > p {
	position: relative;
	z-index: 2;
}

.clim-auth__aside.clim-sky .clim-brand,
.clim-auth__aside.clim-sky .clim-auth__claim,
.clim-auth__aside.clim-sky .clim-auth__points b {
	color: var(--sky-text);
}

.clim-auth__aside.clim-sky .clim-auth__points li,
.clim-auth__aside.clim-sky .clim-hint {
	color: var(--sky-text-2);
}

.clim-auth__aside.clim-sky .clim-auth__dot {
	background: currentColor;
	opacity: 0.6;
}

.clim-auth__art {
	position: absolute;
	top: var(--sp-10);
	right: var(--sp-8);
	z-index: 1;
	width: 240px;
	height: 212px;
	margin: 0;
}

/* Wolken im Beispiel heben sich am Tag sonst nicht von der hellen Fläche ab. */
.clim-sky[data-phase="day"] .clim-landing__demo .clim-sky__cloud {
	fill: #D3DCE8;
	opacity: 1;
}

.clim-sky[data-phase="day"] .clim-landing__demo .clim-sky__cloud--back {
	fill: #E4EAF2;
}

@media (max-width: 480px) {
	.clim-landing__demo .clim-sky__art {
		width: 76px;
		height: 68px;
	}
}

/* Die Beschriftung im Kachelkopf steht rechts, nicht mittig. */
.clim-tile__head > .clim-label {
	margin-left: auto;
}

/* Der Knopf zum Neuladen steht neben Datum und Uhrzeit, nicht allein in
   einer eigenen Zeile unter der Herkunft. (Seit 1.26.0) */
.clim-lage__meta {
	display: flex;
	align-items: center;
	gap: 6px;
}

.clim-lage__meta .clim-lage__refresh {
	margin: 0;
}

/* Lange Namen im Tagesband kürzen statt in die Uhrzeit zu laufen. */
.clim-band__name {
	padding-right: 6px;
}

.clim-band__label {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Ein Lagetext, der älter als drei Stunden ist, tritt einen Schritt zurück. */
.clim-lage__title.is-stale,
.clim-lage__lead.is-stale {
	opacity: 0.7;
}

.clim-briefing__age.is-stale {
	color: var(--sky-text);
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Übersicht, kürzer (seit 1.27.0)                                     */
/* ------------------------------------------------------------------ */

/* „Heute zu tun“ als eine Zeile, die in den Garten führt. */
.clim-todo {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--c-glass);
	color: var(--c-text);
	font-size: var(--fs-sm);
	line-height: 1.4;
}

.clim-todo:hover {
	opacity: 1;
	background: var(--c-line);
}

.clim-todo > .clim-icon {
	flex: none;
	color: var(--c-text-3);
}

.clim-todo.is-overdue > .clim-icon:first-child {
	color: var(--c-rose);
}

.clim-todo__text {
	flex: 1;
	min-width: 0;
	color: var(--c-text-2);
}

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

.clim-care__advice {
	display: flex;
	align-items: center;
	gap: 5px;
}

.clim-care__advice .clim-icon {
	flex: none;
	color: var(--c-amber);
}

/* Luft und Pollen kurz: Zahl, Wort und Satz in einer Zeile, darunter die Pollen. */
.clim-air__summary .clim-air__index {
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin-bottom: var(--sp-2);
}

.clim-air__summary .clim-air__value {
	font-family: inherit;
	font-size: 1.6rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.clim-air__summary .clim-air__advice {
	flex-basis: 100%;
	margin: 0;
	color: var(--c-text-2);
}

.clim-air__pollen {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

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

.clim-air__more {
	margin-top: var(--sp-3);
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-blue, #1F5FBF);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: 600;
	cursor: pointer;
}

[data-theme="dark"] .clim-air__more {
	color: #8DB8F2;
}

.clim-air__details {
	margin-top: var(--sp-3);
}

.clim-pill--icon {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.clim-season__toggle {
	display: block;
	margin: var(--sp-4) 0 var(--sp-2);
}

/* Knöpfe, die nur ein Symbol tragen, und die Glocke in den Schaltern. */
.clim-btn--icon {
	display: inline-grid;
	place-items: center;
	padding: 0.4rem;
	line-height: 0;
}

.clim-bell {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.clim-week__pv {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

/* ------------------------------------------------------------------ */
/* Der Rückblick, kompakt (seit 1.27.1)                                */
/* ------------------------------------------------------------------ */

.clim-review__note {
	margin: 0 0 var(--sp-3);
}

/* Kennzahlen als Raster: zwei Spalten am Telefon, eine Zeile am Desktop. */
.clim-review__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px;
	border-radius: 14px;
	overflow: hidden;
}

.clim-review__stat {
	padding: 10px 12px;
	background: var(--c-glass);
	min-width: 0;
}

.clim-review__statvalue {
	font-size: var(--fs-lg);
	font-weight: 600;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.clim-review__statlabel {
	display: flex;
	align-items: center;
	gap: 2px;
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

.clim-review__statnote {
	margin-top: 2px;
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--c-text-3);
}

/* Fünf Werte bei zwei Spalten: der letzte nimmt die ganze Breite. */
.clim-review__stat:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

@media (min-width: 900px) {
	.clim-review__stats {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}

	.clim-review__stat:last-child:nth-child(odd) {
		grid-column: auto;
	}
}

/* Rekorde: Name links, Wert und Datum rechts. */
.clim-review__records {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 6px 12px;
	margin: var(--sp-4) 0 0;
	font-size: var(--fs-sm);
}

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

.clim-review__records dd {
	margin: 0;
	text-align: right;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--c-text);
}

/* Regen je Monat als Säulen. */
.clim-review__chart-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
}

.clim-review__chart-sub {
	font-size: 0.75rem;
	color: var(--c-text-3);
}

.clim-review__cols {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 2px;
	margin-top: var(--sp-2);
}

.clim-review__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
	padding: 4px 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.clim-review__col:hover,
.clim-review__col:focus-visible {
	background: var(--c-glass);
}

.clim-review__coltemp,
.clim-review__colname {
	font-size: 0.6875rem;
	font-variant-numeric: tabular-nums;
	color: var(--c-text-2);
	white-space: nowrap;
}

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

.clim-review__coltrack {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 96px;
	border-bottom: 1px solid var(--c-line);
}

.clim-review__colbar {
	position: relative;
	width: min(18px, 70%);
	border-radius: 4px 4px 0 0;
	background: #2F6FD0;
}

[data-theme="dark"] .clim-review__colbar {
	background: #5F95E8;
}

/* Angebrochener Monat: heller, damit die kurze Säule nicht als trocken gilt. */
.clim-review__col.is-partial .clim-review__colbar {
	opacity: 0.45;
}

.clim-review__colvalue {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 2px;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--c-text);
	white-space: nowrap;
}

.clim-review__readout {
	margin-top: var(--sp-2);
	min-height: 1.4em;
}

/* Das Gartenjahr, ohne Fragen (seit 1.27.2). */
.clim-season__todo {
	margin: var(--sp-2) 0 0;
	font-weight: 600;
	color: var(--c-text);
}

.clim-season__now--small {
	font-size: var(--fs-lg);
}

.clim-season__when {
	white-space: nowrap;
}

/*
 * Kästchen mit Messwerten (PV, Luft): Die Beschriftung bricht um, statt über
 * den Rand zu laufen. „Grundverbrauch“ war auf dem Tablet breiter als sein
 * Kästchen. (Seit 1.27.4)
 */
.clim-readout {
	min-width: 0;
}

.clim-readout .clim-label,
.clim-readout__label {
	font-size: var(--fs-sm);
	line-height: 1.3;
	overflow-wrap: break-word;
	hyphens: manual;
}

/* ------------------------------------------------------------------ */
/* 1.30.0                                                              */
/* ------------------------------------------------------------------ */

/*
 * Vormerken. Pille und Knopf stehen rechts übereinander, damit die Zeile
 * auf dem Telefon nicht in drei schmale Spalten zerfällt.
 */
.clim-slot__side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--sp-2);
}

.clim-watch__btn {
	padding: 0.4rem 0.75rem;
	font-size: var(--fs-xs);
	min-height: 2.25rem;
}

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

.clim-watch__note {
	margin: var(--sp-3) 0;
}

.clim-watches {
	margin: var(--sp-6) 0;
}

.clim-watches .clim-care__item > .clim-btn {
	align-self: center;
}

.clim-care__item.is-off .clim-care__label {
	color: var(--c-text-3);
}

/* Mehrere Pflanzen auf einmal gießen. */
.clim-bulk {
	margin: var(--sp-2) 0 var(--sp-3);
}

.clim-bulk__panel {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
	padding: var(--sp-4);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	background: var(--c-glass);
}

.clim-bulk__item {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: var(--sp-3);
	padding: var(--sp-2) 0;
	cursor: pointer;
}

.clim-bulk__item input {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.1rem;
	accent-color: var(--c-accent);
}

.clim-bulk__item .clim-care__label,
.clim-bulk__item .clim-care__meta {
	display: block;
}

/* Vorlagen für die Reihenfolge auf „Heute“. */
.clim-presets {
	margin-bottom: var(--sp-4);
}

/*
 * Das „i“ im Himmel. Die Farben der Kacheln darunter sind auf dem Verlauf
 * oben zu blass; dort gilt die Schrift des Himmels.
 */
.clim-sky .clim-info__button {
	border-color: currentColor;
	color: var(--sky-text-2);
}

.clim-sky .clim-info__button:hover,
.clim-sky .clim-info__button[aria-expanded="true"] {
	color: var(--sky-text);
}

.clim-sky .clim-confidence .clim-info {
	margin-left: 0;
}

/* ------------------------------------------------------------------ */
/* Startseite 1.30.1: Zahlen, Bereiche mit Ausschnitten, Weiteres      */
/*                                                                    */
/* Die Ausschnitte zeigen die App mit Beispieldaten. Wo es das Bauteil */
/* als reines Markup gibt (Tagesband, Regenbalken, Pillen), kommt es   */
/* aus der App; der Rest ist hier nachgebaut, mit denselben Farben.    */
/* ------------------------------------------------------------------ */

:root,
[data-theme="light"] {
	--shot-sky-a: #D7E7F7;
	--shot-sky-b: #F1F6FB;
	--shot-shadow: 0 22px 44px -30px rgba(20, 45, 85, 0.45);
}

[data-theme="dark"] {
	--shot-sky-a: #1E3352;
	--shot-sky-b: #13213A;
	--shot-shadow: 0 22px 44px -30px rgba(0, 0, 0, 0.7);
}

/* Zahlen */
.clim-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-5) var(--sp-4);
	padding-bottom: var(--sp-6);
}

.clim-fact {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.clim-fact__value {
	font-size: 2rem;
	font-weight: 650;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--c-text);
}

.clim-fact__label {
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

/* Sprungmarken zu den Bereichen */
.clim-jump {
	display: flex;
	gap: var(--sp-2);
	margin: 0 calc(-1 * var(--sp-5));
	padding: var(--sp-2) var(--sp-5) var(--sp-4);
	overflow-x: auto;
	scrollbar-width: none;
}

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

.clim-jump__link {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.5rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	color: var(--c-text);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.clim-jump__link .clim-icon {
	color: var(--c-text-3);
}

.clim-jump__link:hover,
.clim-jump__link:focus-visible {
	border-color: var(--c-accent);
	color: var(--c-accent);
}

/* Ein Bereich: Text und Ausschnitt */
.clim-showcase {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-6);
	padding: var(--sp-10) 0;
	border-top: 1px solid var(--c-line);
	scroll-margin-top: var(--sp-4);
}

.clim-showcase__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--fs-sm);
	font-weight: 650;
	color: var(--c-accent);
}

.clim-showcase__title {
	margin-top: var(--sp-2);
	font-size: clamp(1.5rem, 3.4vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--c-text);
}

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

.clim-showcase__points {
	margin: var(--sp-5) 0 0;
	padding: 0;
	list-style: none;
}

.clim-showcase__points li {
	position: relative;
	margin-bottom: var(--sp-2);
	padding-left: 1.4rem;
	font-size: var(--fs-base);
	line-height: 1.5;
	color: var(--c-text);
}

.clim-showcase__points li::before {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 0.55em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--c-green);
}

.clim-showcase__shot {
	min-width: 0;
	padding: var(--sp-4);
	border-radius: 28px;
	background: linear-gradient(160deg, var(--shot-sky-a), var(--shot-sky-b));
}

/* Am Himmel steht der Ausschnitt in der Nacht, in beiden Modi. */
#himmel .clim-showcase__shot {
	background: linear-gradient(160deg, #0B1730, #2A3550);
}

/* Der Ausschnitt selbst: eine Kachel der App */
.clim-shot {
	margin: 0 auto;
	max-width: 520px;
	padding: var(--sp-5);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	background: var(--c-canvas);
	box-shadow: var(--shot-shadow);
	color: var(--c-text);
}

[data-theme="dark"] .clim-shot {
	background: var(--c-canvas-2);
}

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

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

.clim-shot__tag {
	padding: 0.1rem 0.55rem;
	border: 1px dashed var(--c-line-strong);
	border-radius: var(--r-pill);
	font-size: var(--fs-micro);
	color: var(--c-text-3);
}

.clim-shot__lead {
	margin: 0;
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: 1.35;
}

.clim-shot__meta {
	margin: calc(-1 * var(--sp-2)) 0 var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--c-text-3);
}

.clim-shot__note {
	margin: var(--sp-2) 0 0;
	font-size: var(--fs-sm);
	line-height: 1.45;
	color: var(--c-text-2);
}

.clim-shot__hours {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--sp-2);
	margin-top: var(--sp-4);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-line);
}

.clim-shot__hour {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	font-variant-numeric: tabular-nums;
}

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

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

.clim-shot__hour small {
	font-size: var(--fs-micro);
	color: var(--c-blue);
}

.clim-shot__trust,
.clim-shot__wear {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

.clim-shot__trust {
	margin-top: var(--sp-4);
}

.clim-shot__wear .clim-icon {
	color: var(--c-text-3);
}

.clim-shot__dots {
	display: inline-flex;
	gap: 3px;
}

.clim-shot__dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-text);
	opacity: 0.2;
}

.clim-shot__dots i.is-on {
	opacity: 1;
}

/* Tagesband im Ausschnitt: nur ansehen, nicht antippen. */
.clim-shot .clim-band__row {
	cursor: default;
}

.clim-shot .clim-band__row:hover .clim-band__track {
	background: var(--c-line);
}

.clim-shot__slot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-top: var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
}

.clim-shot__slot b,
.clim-shot__item b,
.clim-shot__event b,
.clim-shot__msg b {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 650;
}

.clim-shot__slot span,
.clim-shot__item span span,
.clim-shot__event span span,
.clim-shot__msg span {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--fs-micro);
	line-height: 1.4;
	color: var(--c-text-3);
}

.clim-shot__watch {
	flex: none;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--c-accent);
	border-radius: var(--r-md);
	background: var(--c-accent-dim);
	color: var(--c-accent);
	font-size: var(--fs-xs);
	font-weight: 600;
	white-space: nowrap;
}

.clim-shot__push {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	margin-top: var(--sp-3);
	padding: var(--sp-3);
	border-radius: 16px;
	background: var(--c-glass-strong);
}

.clim-shot__app {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--c-accent);
	color: #fff;
}

[data-theme="dark"] .clim-shot__app {
	color: #0B1524;
}

.clim-shot__msg span {
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

/* Wasser im Topf */
.clim-shot__water {
	padding: var(--sp-4);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	background: var(--c-glass);
}

.clim-shot__water-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

.clim-shot__water-head b {
	font-size: var(--fs-lg);
	color: var(--c-text);
	font-variant-numeric: tabular-nums;
}

.clim-shot__gauge {
	position: relative;
	height: 10px;
	margin: var(--sp-2) 0;
	border-radius: var(--r-pill);
	background: var(--c-line);
}

.clim-shot__fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-radius: var(--r-pill);
	background: var(--c-blue);
}

.clim-shot__fill.is-low {
	background: var(--c-amber);
}

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

.clim-shot__event {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	margin-top: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid color-mix(in srgb, var(--c-rose) 35%, transparent);
	border-radius: var(--r-md);
	background: var(--c-rose-dim);
}

.clim-shot__event-icon {
	color: var(--c-rose-ink);
}

.clim-shot__list {
	margin-top: var(--sp-2);
}

.clim-shot__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) 0;
	border-top: 1px solid var(--c-line);
}

.clim-shot__item:first-child {
	border-top: 0;
}

.clim-shot__item--icon {
	grid-template-columns: auto minmax(0, 1fr) auto;
}

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

.clim-shot__item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--c-glass-strong);
	color: var(--c-text-2);
}

/* Photovoltaik */
.clim-shot__big b {
	display: block;
	font-size: var(--fs-2xl);
	font-weight: 650;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.clim-shot__big span {
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

.clim-shot__pv {
	display: block;
	width: 100%;
	height: auto;
	margin-top: var(--sp-3);
	overflow: visible;
}

.clim-shot__pv-window {
	fill: color-mix(in srgb, var(--c-green) 14%, transparent);
}

.clim-shot__pv-area {
	fill: color-mix(in srgb, var(--c-amber) 24%, transparent);
}

.clim-shot__pv-line {
	fill: none;
	stroke: var(--c-amber);
	stroke-width: 2;
	stroke-linejoin: round;
}

.clim-shot__pv-base {
	stroke: var(--c-text-3);
	stroke-width: 1.2;
	stroke-dasharray: 4 4;
}

.clim-shot__pv-tick {
	fill: var(--c-text-3);
	font-size: 11px;
	font-family: var(--font-sans);
}

.clim-shot__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
	margin-top: var(--sp-2);
	font-size: var(--fs-xs);
	color: var(--c-text-2);
}

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

.clim-shot__legend i {
	display: inline-block;
	width: 12px;
	height: 10px;
	border-radius: 3px;
}

.clim-shot__legend i.is-sun {
	background: var(--c-amber);
}

.clim-shot__legend i.is-base {
	height: 0;
	border-top: 2px dashed var(--c-text-3);
	border-radius: 0;
}

.clim-shot__legend i.is-window {
	background: color-mix(in srgb, var(--c-green) 30%, transparent);
}

/* Was sonst dazugehört */
.clim-extras {
	padding: var(--sp-10) 0;
	border-top: 1px solid var(--c-line);
}

.clim-extras__title {
	font-size: clamp(1.35rem, 2.8vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.clim-extras__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-5) var(--sp-6);
	margin-top: var(--sp-6);
}

.clim-extra {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--sp-3);
}

.clim-extra__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--c-accent-dim);
	color: var(--c-accent);
}

.clim-extra__title {
	font-size: var(--fs-base);
	font-weight: 650;
}

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

@media (min-width: 640px) {
	.clim-extras__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.clim-facts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding-bottom: var(--sp-8);
	}

	.clim-fact__value {
		font-size: 2.6rem;
	}

	.clim-jump {
		margin: 0;
		padding: 0 0 var(--sp-6);
		flex-wrap: wrap;
		overflow: visible;
	}

	.clim-showcase {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--sp-12);
		padding: var(--sp-12) 0;
	}

	.clim-showcase.is-flip .clim-showcase__text {
		order: 2;
	}

	.clim-showcase__shot {
		padding: var(--sp-8);
	}
}

@media (min-width: 1080px) {
	.clim-extras__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Auf dem Telefon steht der Ausschnitt fast ohne Rahmen, sonst bleibt für
 * die Zeitachse des Tagesbands kaum Platz. Dort auch nur jede zweite Uhrzeit.
 */
@media (max-width: 899px) {
	.clim-showcase__shot {
		padding: var(--sp-2);
		border-radius: 24px;
	}
}

@media (max-width: 479px) {
	.clim-shot {
		padding: var(--sp-4);
	}

	.clim-shot .clim-band__row {
		grid-template-columns: 104px 40px 1fr;
	}

	.clim-shot .clim-band__over {
		left: 144px;
	}

	.clim-shot .clim-band__ticks > span:nth-child(even) {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.clim-landing) {
		scroll-behavior: smooth;
	}
}

/* ------------------------------------------------------------------ */
/* Wissen und häufige Fragen (seit 1.31.0)                             */
/* ------------------------------------------------------------------ */

.clim-landing__nav {
	padding: 0.45rem 0.7rem;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--sky-text);
}

.clim-landing__nav[aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.clim-wissen__head {
	position: relative;
	z-index: 2;
	max-width: 1240px;
	margin: 0 auto;
	padding: var(--sp-6) var(--sp-5) 0;
}

.clim-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	font-size: var(--fs-sm);
	color: var(--sky-text-2);
}

.clim-crumbs a {
	color: var(--sky-text-2);
	font-weight: 600;
}

.clim-wissen__title {
	margin-top: var(--sp-3);
	max-width: 26ch;
	font-size: clamp(1.85rem, 5.2vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--sky-text);
	text-wrap: balance;
}

.clim-wissen__meta,
.clim-wissen__lead {
	margin-top: var(--sp-3);
	max-width: 60ch;
	font-size: var(--fs-base);
	line-height: 1.55;
	color: var(--sky-text-2);
}

.clim-wissen__lead {
	font-size: var(--fs-lg);
}

.clim-article {
	max-width: 46rem;
	margin: 0 auto;
}

.clim-answer {
	padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
	border-left: 4px solid var(--c-green);
	border-radius: var(--r-md);
	background: var(--c-green-dim);
}

.clim-answer__label,
.clim-toc__label {
	display: block;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-green-ink);
}

[data-theme="dark"] .clim-answer__label {
	color: var(--c-green);
}

.clim-answer__text {
	margin-top: var(--sp-2);
	font-size: var(--fs-lg);
	line-height: 1.6;
	color: var(--c-text);
}

.clim-toc {
	margin-top: var(--sp-6);
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
}

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

.clim-toc ol {
	margin: var(--sp-2) 0 0;
	padding-left: 1.2rem;
	font-size: var(--fs-base);
	line-height: 1.7;
}

.clim-prose {
	margin-top: var(--sp-6);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--c-text);
}

.clim-prose > * + * {
	margin-top: 1.1em;
}

.clim-prose h2 {
	margin-top: 2.2em;
	font-size: clamp(1.35rem, 3vw, 1.7rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	scroll-margin-top: var(--sp-6);
}

.clim-prose h3 {
	margin-top: 1.8em;
	font-size: 1.15rem;
	font-weight: 650;
	line-height: 1.35;
}

.clim-prose h2 + *,
.clim-prose h3 + * {
	margin-top: 0.6em;
}

.clim-prose ul,
.clim-prose ol {
	padding-left: 1.3rem;
}

.clim-prose li + li {
	margin-top: 0.35em;
}

.clim-prose a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.clim-prose strong {
	font-weight: 650;
}

.clim-prose blockquote {
	margin-left: 0;
	padding-left: var(--sp-4);
	border-left: 3px solid var(--c-line-strong);
	color: var(--c-text-2);
}

.clim-prose img,
.clim-prose video {
	max-width: 100%;
	height: auto;
	border-radius: var(--r-md);
}

.clim-prose figure {
	margin-left: 0;
	margin-right: 0;
}

.clim-prose figcaption {
	margin-top: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--c-text-3);
}

.clim-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-base);
	font-variant-numeric: tabular-nums;
}

.clim-prose .wp-block-table {
	overflow-x: auto;
}

/* Gegen die Tabellenregeln des Block-Editors, die WordPress je Block nachlädt. */
.clim-prose .wp-block-table thead,
.clim-prose .wp-block-table tfoot {
	border: 0;
}

.clim-prose th,
.clim-prose td,
.clim-prose .wp-block-table th,
.clim-prose .wp-block-table td {
	padding: 0.55rem 0.7rem;
	border: 0;
	border-bottom: 1px solid var(--c-line);
	text-align: left;
	vertical-align: top;
}

.clim-prose th,
.clim-prose .wp-block-table th {
	font-weight: 650;
	color: var(--c-text-2);
	border-bottom-color: var(--c-line-strong);
}

.clim-wissen__app {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--sp-4);
	margin-top: var(--sp-10);
	padding: var(--sp-6);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	background: var(--c-glass);
}

.clim-wissen__app-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--c-green-dim);
	color: var(--c-green);
}

.clim-wissen__app-title {
	font-size: var(--fs-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

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

.clim-wissen__app .clim-hero__actions {
	margin-top: var(--sp-4);
}

.clim-wissen-teaser {
	padding: var(--sp-10) 0;
	border-top: 1px solid var(--c-line);
}

.clim-wissen__main .clim-wissen-teaser {
	max-width: 46rem;
	margin: var(--sp-10) auto 0;
}

.clim-wissen-teaser__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
}

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

.clim-wissen-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-4);
	margin-top: var(--sp-6);
}

.clim-wissen-card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-5);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	background: var(--c-canvas);
	color: var(--c-text);
	transition: border-color 0.18s var(--ease);
}

.clim-wissen-card:hover {
	opacity: 1;
	border-color: var(--c-accent);
}

.clim-wissen-card__title {
	font-size: var(--fs-lg);
	font-weight: 650;
	line-height: 1.3;
	color: var(--c-text);
}

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

.clim-wissen-card__meta {
	margin-top: auto;
	font-size: var(--fs-xs);
	color: var(--c-text-3);
}

.clim-wissen-cards--list {
	margin-top: 0;
}

.clim-wissen__empty {
	padding: var(--sp-10) 0;
	color: var(--c-text-2);
}

.clim-pages ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: var(--sp-8) 0 0;
	padding: 0;
	list-style: none;
}

.clim-pages .page-numbers {
	display: inline-block;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--c-line);
	border-radius: var(--r-pill);
	font-size: var(--fs-sm);
}

.clim-pages .page-numbers.current {
	border-color: var(--c-accent);
	color: var(--c-accent);
	font-weight: 650;
}

.clim-faq {
	padding: var(--sp-10) 0;
	border-top: 1px solid var(--c-line);
	scroll-margin-top: var(--sp-4);
}

.clim-faq__list {
	max-width: 52rem;
	margin-top: var(--sp-5);
	border-top: 1px solid var(--c-line);
}

.clim-faq__item {
	border-bottom: 1px solid var(--c-line);
}

.clim-faq__q {
	position: relative;
	padding: var(--sp-4) var(--sp-8) var(--sp-4) 0;
	font-size: var(--fs-lg);
	font-weight: 650;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

.clim-faq__q::-webkit-details-marker {
	display: none;
}

.clim-faq__q::after {
	content: "";
	position: absolute;
	right: 0.35rem;
	top: 50%;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid var(--c-text-3);
	border-bottom: 2px solid var(--c-text-3);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.18s var(--ease);
}

.clim-faq__item[open] .clim-faq__q::after {
	transform: translateY(-30%) rotate(-135deg);
}

.clim-faq__a {
	max-width: 68ch;
	padding-bottom: var(--sp-5);
	font-size: var(--fs-base);
	line-height: 1.65;
	color: var(--c-text-2);
}

@media (min-width: 720px) {
	.clim-wissen-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

	.clim-wissen__main .clim-wissen-teaser .clim-wissen-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 479px) {
	.clim-landing__nav {
		padding-left: 0.35rem;
		padding-right: 0.35rem;
	}

	.clim-wissen__app {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--sp-5);
	}
}

/* Pflanzenlexikon (seit 1.32.0) */
.clim-facts-table th {
	width: 40%;
	font-weight: 600;
}

.clim-lexikon__group {
	padding: var(--sp-8) 0 var(--sp-2);
	border-top: 1px solid var(--c-line);
	scroll-margin-top: var(--sp-4);
}

.clim-lexikon__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-2) var(--sp-6);
	margin: var(--sp-4) 0 0;
	padding: 0;
	list-style: none;
}

.clim-lexikon__list li {
	padding: var(--sp-2) 0;
	border-bottom: 1px solid var(--c-line);
	font-size: var(--fs-base);
}

.clim-lexikon__list a {
	font-weight: 600;
}

.clim-lexikon__list span {
	display: block;
	font-size: var(--fs-sm);
	font-style: italic;
	color: var(--c-text-3);
}

.clim-lexikon .clim-jump {
	padding-bottom: var(--sp-6);
}

@media (min-width: 640px) {
	.clim-lexikon__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.clim-lexikon__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 479px) {
	.clim-wissen .clim-topbar .clim-landing__nav + .clim-landing__nav {
		display: none;
	}
}

/* Verweis im Fließtext der App (seit 1.33.0) */
.clim-link {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Freiwilliger Beitrag (seit 1.33.0) */
.clim-support {
	max-width: 46rem;
	margin: var(--sp-10) auto 0;
	padding: var(--sp-6);
	border: 1px dashed var(--c-line-strong);
	border-radius: var(--r-xl);
	text-align: center;
}

.clim-support__title {
	font-size: var(--fs-lg);
	font-weight: 700;
}

.clim-support__text {
	max-width: 52ch;
	margin: var(--sp-2) auto var(--sp-4);
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--c-text-2);
}