.climate-native {
		padding: 1rem;
		background: color-mix(in srgb, var(--panel) 92%, #eef6ff);
	}
	.climate-native-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		margin-bottom: 0.85rem;
		color: var(--text);
	}
	.climate-native-head-meta-only {
		justify-content: flex-end;
	}
	.climate-native-title {
		margin: 0;
		font-size: 1rem;
		font-weight: 700;
	}
	.climate-native-meta {
		color: var(--muted);
		font-size: 0.78rem;
		font-weight: 600;
		text-align: right;
	}
	.climate-native-meta-station {
		color: #111827;
	}
	.climate-native-meta-ref {
		color: #6b7280;
	}
	.climate-station-select-wrap {
		display: inline-flex;
		align-items: center;
		gap: 0.42rem;
		margin-top: 0.42rem;
		color: var(--muted);
		font-size: 0.78rem;
		font-weight: 600;
	}
	.climate-station-select {
		width: min(16rem, 54vw);
		height: 30px;
		padding: 0 1.8rem 0 0.58rem;
		border: 1px solid var(--border);
		border-radius: 8px;
		background: var(--panel);
		color: var(--text);
		font: inherit;
		font-size: 0.78rem;
	}
	.climate-native-meta-break {
		display: none;
	}
	.climate-native-meta-separator {
		display: inline;
		margin-right: 0.25em;
	}
	.climate-card-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}
	.climate-card {
		min-width: 0;
		padding: 0.72rem;
		border: 1px solid var(--border);
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.82);
		box-shadow: 0 5px 16px rgba(19, 36, 58, 0.08);
		overflow-x: auto;
	}
	.climate-card h3 {
		margin: 0 0 0.42rem;
		color: var(--text);
		font-size: 0.82rem;
		font-weight: 700;
		text-align: center;
	}
	.climate-legend {
		display: flex;
		flex-wrap: wrap;
		gap: 0.24rem 0.55rem;
		margin-bottom: 0.32rem;
		font-size: 0.68rem;
		color: var(--text);
	}
	.climate-control-row {
		display: flex;
		flex-wrap: wrap;
		gap: 0.38rem;
		margin-bottom: 0.45rem;
	}
	.climate-control-row label {
		display: grid;
		gap: 0.14rem;
		color: var(--text);
		font-size: 0.62rem;
		font-weight: 600;
	}
	.climate-control-row select {
		min-width: 7.5rem;
		height: 30px;
		border: 1px solid var(--chip-active);
		border-radius: 0;
		background: #ffffff;
		color: var(--text);
		font: inherit;
		font-size: 0.68rem;
		padding: 0 0.45rem;
	}
	.climate-control-row select:disabled {
		opacity: 1;
		color: var(--text);
	}
	.climate-dot {
		display: inline-block;
		width: 0.48rem;
		height: 0.48rem;
		margin-right: 0.22rem;
		border-radius: 50%;
		vertical-align: 0.02rem;
	}
	.climate-svg {
		display: block;
		width: 100%;
		height: auto;
		overflow: visible;
		font-family: inherit;
	}
	.climate-svg .axis {
		stroke: rgba(15, 23, 42, 0.42);
		stroke-width: 1;
	}
	.climate-svg .grid {
		stroke: rgba(148, 163, 184, 0.28);
		stroke-width: 1;
	}
	.climate-svg text {
		fill: var(--text);
		font-size: 8px;
	}
	.climate-svg .climate-axis-label {
		cursor: pointer;
		user-select: none;
	}
	.climate-svg .climate-axis-label.is-excluded {
		opacity: 0.35;
		text-decoration: line-through;
	}
	.climate-svg .climate-hotspot {
		fill: transparent;
		cursor: crosshair;
		pointer-events: all;
	}
	.climate-svg .hover-line {
		display: none;
		stroke: color-mix(in srgb, var(--chip-active) 72%, #111827);
		stroke-width: 1.2;
		stroke-dasharray: 3 3;
		pointer-events: none;
	}
	.climate-svg .hover-point {
		display: none;
		fill: #ffffff;
		stroke: var(--chip-active);
		stroke-width: 1.8;
		pointer-events: none;
	}
	.climate-readout {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		margin-top: 0.36rem;
		border: 1px solid rgba(148, 163, 184, 0.34);
		border-collapse: separate;
		border-spacing: 0;
		table-layout: fixed;
		border-radius: 6px;
		overflow: visible;
		isolation: isolate;
		background: rgba(248, 250, 252, 0.82);
		color: var(--text);
		font-size: 0.68rem;
		font-weight: 600;
	}
	.climate-summary-table {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		margin-top: 0.48rem;
		border: 1px solid rgba(148, 163, 184, 0.34);
		border-collapse: separate;
		border-spacing: 0;
		table-layout: fixed;
		border-radius: 6px;
		overflow: hidden;
		background: rgba(248, 250, 252, 0.68);
		font-size: 0.68rem;
	}
	.climate-readout th,
	.climate-readout td,
	.climate-summary-table th,
	.climate-summary-table td {
		padding: 0.28rem 0.42rem;
		border-bottom: 1px solid rgba(148, 163, 184, 0.34);
		text-align: right;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.climate-walter-card .climate-readout th,
	.climate-walter-card .climate-readout td,
	.climate-walter-card .climate-summary-table th,
	.climate-walter-card .climate-summary-table td {
		font-weight: 700;
	}
	.climate-readout tr:last-child th,
	.climate-readout tr:last-child td,
	.climate-summary-table tr:last-child th,
	.climate-summary-table tr:last-child td {
		border-bottom: 0;
	}
	.climate-readout th,
	.climate-summary-table th:first-child,
	.climate-summary-table td:first-child {
		text-align: left;
	}
	.climate-readout th {
		width: 52%;
	}
	.climate-summary-table th:first-child,
	.climate-summary-table td:first-child {
		width: 38%;
	}
	.climate-readout th,
	.climate-summary-table th,
	.climate-summary-table td:first-child {
		font-weight: 700;
		color: var(--muted);
	}
	.climate-status {
		padding: 1rem;
		color: var(--muted);
		font-weight: 600;
		text-align: center;
	}
	body.dark-mode .climate-native {
		background: color-mix(in srgb, var(--panel) 90%, #0f172a);
	}
	body.dark-mode .climate-card {
		background: rgba(15, 23, 42, 0.72);
	}
	body.dark-mode .climate-control-row select {
		background: rgba(15, 23, 42, 0.82);
	}
	body.dark-mode .climate-svg .axis {
		stroke: rgba(226, 232, 240, 0.45);
	}
	body.dark-mode .climate-svg .grid {
		stroke: rgba(148, 163, 184, 0.22);
	}
	body.dark-mode .climate-readout {
		background: rgba(15, 23, 42, 0.62);
	}
	body.dark-mode .climate-summary-table {
		background: rgba(15, 23, 42, 0.42);
	}
	body.dark-mode .climate-native-meta-station {
		color: #f8fafc;
	}
	body.dark-mode .climate-native-meta-ref {
		color: #94a3b8;
	}
	body.dark-mode .climate-station-select {
		background: rgba(15, 23, 42, 0.72);
		color: #e2e8f0;
		border-color: rgba(148, 163, 184, 0.26);
	}
	body.dark-mode .climate-readout th,
	body.dark-mode .climate-summary-table th,
	body.dark-mode .climate-summary-table td:first-child {
		color: #94a3b8;
	}
	@media (max-width: 1180px) {
		.climate-native {
			padding: 0.75rem;
		}
		.climate-native-head {
			align-items: flex-start;
			flex-direction: column;
			gap: 0.35rem;
		}
		.climate-native-head-meta-only {
			justify-content: flex-start;
		}
		.climate-native-meta {
			text-align: left;
		}
		.climate-station-select-wrap {
			width: 100%;
			justify-content: space-between;
		}
		.climate-station-select {
			width: min(18rem, 56vw);
		}
		.climate-native-meta-break {
			display: block;
		}
		.climate-native-meta-separator {
			display: none;
		}
		.climate-card-grid {
			grid-template-columns: 1fr;
			gap: 0.68rem;
		}
		.climate-card {
			padding: 0.66rem;
		}
		.climate-readout,
		.climate-summary-table {
			table-layout: fixed;
			font-size: 0.64rem;
		}
		.climate-readout th,
		.climate-readout td,
		.climate-summary-table th,
		.climate-summary-table td {
			padding: 0.24rem 0.32rem;
		}
		.climate-svg text {
			font-size: 7.5px;
		}
	}

@media (max-width: 760px) {
		.climate-native {
			padding: 0.75rem;
		}
		.climate-native-head {
			align-items: flex-start;
			flex-direction: column;
			gap: 0.35rem;
		}
		.climate-native-head-meta-only {
			justify-content: flex-start;
		}
		.climate-native-meta {
			text-align: left;
		}
		.climate-station-select-wrap {
			width: 100%;
			justify-content: space-between;
		}
		.climate-station-select {
			width: min(18rem, 56vw);
		}
		.climate-native-meta-break {
			display: block;
		}
		.climate-native-meta-separator {
			display: none;
		}
		.climate-card-grid {
			grid-template-columns: 1fr;
			gap: 0.68rem;
		}
		.climate-card {
			padding: 0.66rem;
		}
		.climate-readout,
		.climate-summary-table {
			table-layout: fixed;
			font-size: 0.64rem;
		}
		.climate-readout th,
		.climate-readout td,
		.climate-summary-table th,
		.climate-summary-table td {
			padding: 0.24rem 0.32rem;
		}
		.climate-svg text {
			font-size: 7.5px;
		}
	}

	@media (max-width: 760px) {
		#tabs { display: none; }
		#view-graph .chart-box svg {
			cursor: default;
			touch-action: auto;
		}
		.graph-lightbox {
			height: 100dvh;
			min-height: 100vh;
		}
		.graph-lightbox-media {
			padding: 0.35rem;
		}
		.graph-lightbox svg {
			border-radius: 8px;
		}
		.home-widget-toolbar {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			flex-wrap: wrap;
			gap: 0.24rem 0.44rem;
			margin: -0.08rem 0 0.38rem;
		}
		.home-widget-title {
			margin: 0;
			font-size: 0.68rem;
			line-height: 1.12;
			letter-spacing: 0;
		}
		.home-widget-top {
			display: inline-flex;
			align-items: center;
			justify-content: flex-end;
			gap: 0.18rem;
			min-height: 26px;
		}
		.home-widget-actions {
			flex: 1 0 100%;
			justify-content: flex-end;
			flex-wrap: nowrap;
			gap: 0.34rem;
			overflow-x: auto;
			overflow-y: hidden;
			padding-bottom: 0.12rem;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: thin;
		}
		.home-widget-menu-btn {
			width: 26px;
			min-width: 26px;
			height: 26px;
			font-size: 0.95rem;
		}
		.home-widget-toolbar.menu-open .home-widget-reset-btn,
		.home-widget-toolbar.menu-open .home-widget-all-btn,
		.home-widget-toolbar.menu-open .home-widget-none-btn,
		.home-widget-toolbar.menu-open .home-widget-sparkline-btn {
			width: auto;
			min-width: max-content;
			height: 28px;
			padding: 0 0.66rem;
			border-radius: 999px;
			font-size: 0.72rem;
			line-height: 1;
			white-space: nowrap;
		}
		.home-widget-tile-btn {
			display: inline-flex;
			width: 46px;
			min-width: 46px;
			font-size: 0.54rem;
		}
		.topbar { padding: 0.65rem 0.55rem 0.25rem; }
		.topbar-inner { gap: 0.45rem; }
		.layout { padding: 0.2rem 0.55rem 0.5rem; }
		.titlebar {
			gap: 0.45rem;
			padding: 0.75rem;
		}
		.brand {
			font-size: 1.02rem;
			flex: 1;
			text-align: center;
		}
		.controlbar {
			grid-template-columns: 1fr;
			padding: 0.5rem;
			gap: 0.45rem;
		}
		.actions {
			justify-content: flex-end;
		}
		.control-hint {
			text-align: right;
			line-height: 1.35;
			font-size: 0.78rem;
		}
		.controlbar .search-input {
			height: 36px;
			font-size: 0.86rem;
			font-weight: 400;
		}
		.hero { grid-template-columns: 1fr; }
		.hero h1 {
			font-size: 0.98rem;
			line-height: 1.3;
		}
		.status { justify-self: start; }
		.view-wrap { padding: 0.58rem; }
		.map-main-frame {
			height: 72vh;
			min-height: 340px;
		}
		.map-extra {
			gap: 0.72rem;
			margin-top: 0.72rem;
		}
		.map-embed-panel {
			padding: 0.5rem;
		}
		.map-section-heading {
			gap: 0.52rem;
			margin-bottom: 0.5rem;
			font-size: 0.72rem;
			letter-spacing: 0.08em;
		}
		.windy-frame-wrap {
			border-radius: 0.62rem;
		}
		.windy-embed {
			height: clamp(340px, 72vh, 460px);
		}
		.climate-native {
			padding: 0.62rem;
		}
		.climate-native-head {
			align-items: flex-start;
			flex-direction: column;
			gap: 0.25rem;
		}
		.climate-native-head-meta-only {
			justify-content: flex-start;
		}
		.climate-native-meta {
			text-align: left;
		}
		.climate-station-select-wrap {
			width: 100%;
			justify-content: space-between;
			gap: 0.38rem;
		}
		.climate-station-select {
			width: min(13.5rem, 62vw);
		}
		.climate-native-meta-break {
			display: block;
		}
		.climate-native-meta-separator {
			display: none;
		}
		.climate-card-grid {
			grid-template-columns: 1fr;
			gap: 0.58rem;
		}
		.climate-card {
			padding: 0.58rem;
		}

}

#climateNativeView[hidden] { display: none !important; }
#climateNativeView { border-radius: 14px; min-width: 0; }
#climateNativeView .climate-control-row select { width: auto; max-width: 100%; }
#climateNativeView .climate-native-meta { max-width: 100%; }
body.mode-klimaportal #dateModeControls,
body.mode-klimaportal #label-datum,
body.mode-klimaportal #datum,
body.mode-klimaportal #vergleichDateModeControls { display: none !important; }
@media print {
    .climate-card-grid { display: block; }
    .climate-card { break-inside: avoid; margin-bottom: 12px; }
}