/**
 * Infografik „Klima". Nutzt die Basis-Tokens aus assets/basis.css
 * (auf .rwif-grafik gesetzt) und ergänzt eine Städte-Palette sowie Karten-
 * und Meerfarben. Aktions-Buttons/Zitierbox kommen aus assets/export.css.
 */
.rwif-k {
	--c-man:#1E5C3C; --c-abj:#C4632A; --c-mum:#7B4FA0; --c-kl:#2F6F9E; --c-kis:#B0862F; --c-ber:#8A968C;
	--rwif-sea:#CBD8DA; --rwif-land:#DCE2D3;
}
@media ( prefers-color-scheme: dark ) {
	.rwif-k {
		--c-man:#56AA78; --c-abj:#E08A54; --c-mum:#B589D6; --c-kl:#5C9BC8; --c-kis:#D2A24C; --c-ber:#9DAA9C;
		--rwif-sea:#1B262A; --rwif-land:#26302A;
	}
}

/* — Bedienleiste: zwei bündige Boxen (Karte + Ansicht) — */
.rwif-k-switchbar { display:flex; flex-wrap:wrap; gap:14px; align-items:stretch; margin:0; }
.rwif-k-box {
	background:var(--rwif-paper-2); border:1px solid var(--rwif-line);
	border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:12px;
}
/* Karte links (wächst), Ansicht-Box rechts (feste Breite). Erst auf schmalen
   Screens stapeln sie untereinander. */
.rwif-k-col-map { flex:1 1 0; min-width:0; }
.rwif-k-col-ctrl { flex:0 0 250px; }
@media ( max-width: 600px ) {
	.rwif-k-col-map, .rwif-k-col-ctrl { flex-basis:100%; }
}
.rwif-k-grp-lbl {
	font-family:var(--rwif-ui); font-size:11px; letter-spacing:.06em;
	text-transform:uppercase; color:var(--rwif-ink-faint);
}

/* — Karte — */
.rwif-k-map { width:100%; height:auto; display:block; }
.rwif-k-mapfoot { font-family:var(--rwif-ui); font-size:11px; color:var(--rwif-ink-soft); }
.rwif-k-mapfoot i {
	display:inline-block; width:18px; height:9px; border-radius:3px;
	background:var(--rwif-leaf); opacity:.16; vertical-align:middle; margin-right:5px;
}
.rwif-k-city { cursor:pointer; }
.rwif-k-city text {
	font-family:var(--rwif-ui); font-size:11px; font-weight:700;
	paint-order:stroke; stroke:var(--rwif-sea); stroke-width:2.6px;
}

/* — Umschalter + Häkchen — */
/* Chips wie in der Landwirtschafts-Grafik (Einheitlichkeit). */
.rwif-k-toggle { display:flex; flex-wrap:wrap; gap:7px; }
.rwif-k-toggle button {
	font-family:var(--rwif-ui); font-size:13px; line-height:1; padding:6px 12px;
	border:1.5px solid var(--rwif-line); border-radius:999px;
	background:var(--rwif-on-ground); color:var(--rwif-ink-soft); cursor:pointer;
	display:inline-flex; align-items:center; gap:7px;
	transition:background .12s, color .12s, border-color .12s;
}
.rwif-k-toggle .rwif-k-dot { width:9px; height:9px; border-radius:50%; background:currentColor; opacity:.5; }
.rwif-k-toggle button.on { background:var(--rwif-titel); color:#fff; border-color:transparent; }
.rwif-k-toggle button.on .rwif-k-dot { opacity:1; background:rgba( 255, 255, 255, .9 ); }
.rwif-k-toggle button[disabled] { opacity:.4; cursor:default; }
.rwif-k-check {
	display:flex; align-items:center; gap:8px;
	font-family:var(--rwif-ui); font-size:13px; color:var(--rwif-ink-soft);
}
.rwif-k-check input { width:16px; height:16px; accent-color:var(--rwif-titel); }
.rwif-k-check.disabled { opacity:.45; }

/* — Diagramm — */
.rwif-k-charttitle { font-family:var(--rwif-ui); font-size:16px; font-weight:700; color:var(--rwif-titel); margin-bottom:8px; }
.rwif-k-hint {
	font-family:var(--rwif-ui); font-size:12px; color:var(--rwif-ink-soft);
	background:var(--rwif-paper-2); padding:8px 11px; border-radius:6px; margin:0 0 10px;
}
.rwif-k-chart { width:100%; height:auto; display:block; overflow:visible; }
.rwif-k-chart .rwif-k-ax { font-family:var(--rwif-ui); font-size:12.5px; font-weight:600; fill:var(--rwif-ink-soft); }
.rwif-k-chart .rwif-k-grid { stroke:var(--rwif-line); stroke-width:1; }

/* — Legende — */
.rwif-k-legend {
	display:flex; flex-wrap:wrap; gap:14px; font-family:var(--rwif-ui);
	font-size:13px; color:var(--rwif-ink-soft); margin-top:8px;
}
.rwif-k-legend span { display:inline-flex; align-items:center; gap:6px; }
.rwif-k-legend i { width:15px; height:12px; border-radius:2px; display:inline-block; }
.rwif-k-legend i.ln { height:3px; }

.rwif-k-note { font-family:var(--rwif-ui); font-size:12px; color:var(--rwif-ink-faint); margin-top:10px; }

/* Tooltip beim Überfahren von Linienpunkten und Balken. */
.rwif-k-tooltip {
	position:fixed; pointer-events:none; background:var(--rwif-ink,#17211B); color:var(--rwif-paper,#EFF1EC);
	font-family:var(--rwif-ui); font-size:12px; padding:6px 9px; border-radius:6px;
	opacity:0; transition:opacity .1s; z-index:9999; box-shadow:var(--rwif-shadow);
}
.rwif-k-chart .rwif-k-hit { cursor:default; }

/* — Rohdaten-Tabelle — */
.rwif-k-datatable { margin-top:10px; overflow-x:auto; }
.rwif-k-datatable[hidden] { display:none; }
.rwif-k-datatable table { border-collapse:collapse; width:100%; font-family:var(--rwif-ui); font-size:13px; }
.rwif-k-datatable th, .rwif-k-datatable td {
	border:1px solid var(--rwif-line); padding:5px 9px; text-align:right; white-space:nowrap;
}
.rwif-k-datatable th { background:var(--rwif-paper-2); color:var(--rwif-ink-soft); font-weight:600; }
.rwif-k-datatable td:first-child, .rwif-k-datatable th:first-child { text-align:left; }