@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
	src: url("fonts/ibmplexsans-latin.woff2") format("woff2");
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fonts/opensans-latin.woff2") format("woff2");
}

:root {

	--grafiek-font: IBM Plex Sans;
	--grafiek-schaal: 1.06;
	--grafiek-rand: #d9dee5;
	--grafiek-tooltip: #1f2d3d;
	--ink: #15171a;
	--ink-2: #4a5361;
	--ink-3: #687180;
	--line: #e3e7ec;
	--line-2: #eceff3;
	--surface: #ffffff;
	--page: #cde2f8;
	--card-line: #c3d6ec;
	--brand: #0068e0;
	--brand-dark: #1f2d3d;
	--brand-soft: #e6f0fe;
	--sun: #ff9900;
	--mark-low: #2f6fb8;
	--mark-mid: #d9811a;
	--mark-high: #c8402f;
	--ok: #1c7f4b;
	--ok-soft: #e6f5ec;
	--danger: #a82a1c;
	--danger-soft: #fce9e6;
	--radius: 4px;
	--shadow: none;
	--font: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;
}

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

html {

	font-size-adjust: 0.546;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
	-webkit-text-size-adjust: 100%;
}

html body {
	margin: 0;
	background: var(--page);
	color: var(--ink);
	font-family: var(--font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;

	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

h1, h2, h3, p, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { max-width: 100%; }
font { color: inherit !important; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.wrap {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.skiplink {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 200;
	padding: 8px 14px;
	background: var(--brand-dark);
	color: #fff;
	border-radius: 4px;
}
.skiplink:focus { top: 8px; }

.topbar {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.topbar-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 72px;
}

.logo { display: block; flex: none; line-height: 0; }

.logo img { width: 265px; height: auto; }

.mainnav {
	display: flex;
	gap: 2px;
}

.mainnav a {
	padding: 7px 11px;
	border-radius: 4px;
	color: var(--ink-2);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}
.mainnav a:hover { background: var(--line-2); color: var(--ink); text-decoration: none; }
.mainnav a.is-active { background: var(--brand-soft); color: #0055b8; }

.alleen-actueel .uitgebreid { display: none !important; }

.alleen-actueel main.wrap { padding-bottom: 32px; }
.regelbreuk { display: none; }

.schakelaar {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-2);
	cursor: pointer;
	white-space: nowrap;
	user-select: none;
}
.schakelaar input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.schakelaar-baan {
	position: relative;
	flex: none;
	width: 34px;
	height: 20px;
	border-radius: 4px;
	background: #c9d0d9;
	transition: background .2s;
}
.schakelaar-baan::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 31, 51, .25);
	transition: transform .2s;
}
.schakelaar input:checked + .schakelaar-baan { background: var(--brand); }
.schakelaar input:checked + .schakelaar-baan::after { transform: translateX(14px); }
.schakelaar input:checked ~ .schakelaar-tekst { color: var(--ink); }
.schakelaar input:focus-visible + .schakelaar-baan { outline: 2px solid var(--brand); outline-offset: 2px; }

.nav-actueel { display: inline-flex; align-items: center; flex: none; border-radius: 4px; }
.nav-actueel a { padding-right: 6px; }
.nav-actueel-aan { display: none; }
.alleen-actueel .nav-actueel-aan { display: inline; }
.alleen-actueel .nav-actueel-uit { display: none; }
.nav-actueel:has(a.is-active) { background: var(--brand-soft); }
.nav-actueel a.is-active { background: transparent; }
.schakelaar-mini { padding: 4px 9px 4px 0; }
.schakelaar-mini .schakelaar-baan { width: 26px; height: 16px; border-radius: 4px; }
.schakelaar-mini .schakelaar-baan::after { width: 12px; height: 12px; }
.schakelaar-mini input:checked + .schakelaar-baan::after { transform: translateX(10px); }

.schakelaar-op-slot .schakelaar-baan { opacity: .45; }

.tijdchip {
	flex: none;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 6px 12px;
	border: 1px solid var(--line);
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-2);
}
.tijd-waarde { font-variant-numeric: tabular-nums; color: var(--ink); }

.thema-knop {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-left: -18px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: transparent;
	color: var(--ink-2);
	cursor: pointer;
}
.thema-knop:hover { color: var(--ink); background: var(--line-2); }
.thema-knop svg { display: block; width: 16px; height: 16px; }
.thema-knop .icoon-zon, .donker .thema-knop .icoon-maan { display: none; }
.donker .thema-knop .icoon-zon { display: block; }
.logo-donker, .donker .logo-licht { display: none; }
.donker .logo-donker { display: block; }

main.wrap { flex: 1 0 auto; padding-top: 20px; padding-bottom: 56px; }

.notice {
	margin-bottom: 12px;
	padding: 12px 16px;
	background: transparent;
	border: 1px solid #b3261e;
	color: #b3261e;
	border-radius: 4px;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
}

.mededeling {
	margin-bottom: 12px;
	padding: 11px 16px;
	background: var(--surface);
	border: 1px solid var(--card-line);
	border-left: 4px solid var(--brand);
	border-radius: 4px;
	box-shadow: var(--shadow);
	color: var(--ink);
	font-size: 14px;
	line-height: 1.5;
}
.mededeling a { color: var(--brand); }

.fade-blink { animation: fade-blink-animation 5.5s ease-in-out infinite; }
.notice .fade-blink { color: inherit; }

@keyframes fade-blink-animation {
	0%, 61.54% { opacity: 1; }
	76.92% { opacity: 0; }
	92.31%, 100% { opacity: 1; }
}

.alarm {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 16px;
	padding: 11px 16px;
	border: 1px solid transparent;
	border-radius: 4px;
	box-shadow: var(--shadow);
	font-size: 14px;
}
.alarm-text { flex: 1; min-width: 0; font-weight: 500; }
.alarm-text div[style] { font-size: inherit !important; font-weight: inherit !important; display: block !important; }
.alarm-text p { margin: 2px 0; }
.alarm-text p + p { margin-top: 6px; }
.alarm-text .knmi-tijd { font-size: 12px; font-weight: 400; opacity: .85; }
.alarm-source { flex: none; font-size: 12.5px; color: inherit; opacity: .85; }

.alarm-icon { flex: none; width: 18px; height: 18px; border-radius: 50%; background: currentColor; position: relative; }
.alarm-icon::after { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }

.alarm-ok { background: var(--ok-soft); border-color: #b5dfc5; color: #155f39; }
.alarm-ok .alarm-icon::after { content: "\2713"; }
.alarm-yellow, .alarm-orange, .alarm-red { align-items: flex-start; }
.alarm-yellow .alarm-icon::after, .alarm-orange .alarm-icon::after, .alarm-red .alarm-icon::after { content: "!"; }
.alarm-yellow { background: #fff7cf; border-color: #ecdc8b; color: #665400; }
.alarm-orange { background: #ffe8d1; border-color: #f4c596; color: #94460a; }
.alarm-red { background: var(--danger-soft); border-color: #f0b8b0; color: var(--danger); }

.alarm-info { align-items: flex-start; background: var(--brand-soft); border-color: #b8d3fb; color: #0055b8; }
.alarm-info .alarm-icon::after { content: "i"; font-style: italic; }

.alarm-onbekend { background: var(--line-2); border-color: var(--line); color: var(--ink-2); }
.alarm-onbekend .alarm-icon::after { content: "?"; }

.wa-hier + .wa-hier { margin-top: 10px; padding-top: 10px; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 25%, transparent); }
.wa-kop { font-weight: 700; }
.wa-titel { font-weight: 600; }
.wa-tijd { font-size: 12.5px; font-weight: 600; }
.alarm-text .wa-hier p:not(.wa-kop):not(.wa-titel):not(.wa-tijd):not(.wa-uitlegkop) { font-weight: 400; }
.wa-code { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; vertical-align: 1px; }
.wa-yellow { background: #ffd31a; color: #332b00; }
.wa-orange { background: #ff8a00; color: #2b1600; }
.wa-red { background: #d01c1c; color: #fff; }
.wa-mogelijk { border: 1px dashed currentColor; padding: 0 6px; font-weight: 600; }
.wa-geen { font-weight: 600; }
.wa-subkop { margin-top: 10px !important; font-weight: 600; }
.wa-hier + .wa-subkop { padding-top: 10px; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.wa-lijst { list-style: none; margin: 4px 0 0; padding: 0; font-weight: 400; }
.wa-lijst li { margin: 6px 0; }
.wa-waar { font-size: 12.5px; }
.alarm-text details { margin-top: 6px; font-weight: 400; }
.alarm-text summary { cursor: pointer; font-weight: 600; }

.alarm-text .wa-meer > summary { display: inline-flex; align-items: center; gap: 5px; list-style: none; font-size: 13px; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.alarm-text .wa-meer > summary::-webkit-details-marker { display: none; }
.alarm-text .wa-meer > summary::before { content: ""; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s; }
.alarm-text .wa-meer[open] > summary::before { transform: rotate(90deg); }
.alarm-text .wa-meer[open] > summary { margin-bottom: 4px; }
.alarm-text .wa-meer > p { margin: 2px 0; }
.alarm-text .wa-meer > p + p { margin-top: 6px; }
.alarm-text .wa-meer > p.wa-uitlegkop { margin-top: 10px; font-weight: 600; }
.wa-voorbeeld { display: inline-block; margin-bottom: 6px !important; padding: 1px 7px; border: 1px solid currentColor; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }

.hero {
	display: grid;
	grid-template-columns: 1.9fr 1fr;
	background: #2b3d52;
	border-top: 4px solid var(--sun);
	color: #fff;
	border-radius: 4px;
	overflow: hidden;
}

.hero-main, .hero-side { display: flex; flex-direction: column; justify-content: center; }
.hero-main { padding: 24px 30px; }

.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #ffb733; }

.hero-figure {
	display: flex;
	align-items: flex-start;
	margin: 2px 0 22px;
	font-size: 76px;
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.03em;
}
.hero-unit { margin: 9px 0 0 5px; font-size: 30px; font-weight: 500; letter-spacing: 0; color: #dde3ea; }
.hero-figure .trend { align-self: center; margin-left: 16px; letter-spacing: 0; }

.hero-side {
	padding: 24px;
	border-left: 1px solid rgba(255, 255, 255, .13);
	background: rgba(255, 255, 255, .04);
}
.hero-title { margin-bottom: 8px; font-size: 14px; font-weight: 500; color: #b3bfcc; }

.almanac-row {
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr;
	align-items: center;
	gap: 8px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .11);
}
.almanac-head { padding: 0 0 4px; font-size: 12px; color: #b3bfcc; }
.almanac-name { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #e8edf2; }
.almanac-name svg { flex: none; }
.almanac-row strong { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.almanac-daylight { margin-top: 11px; font-size: 13px; color: #e8edf2; }
.almanac-daylight em { font-style: normal; color: #b3bfcc; }

.gauge { position: relative; padding-top: 11px; }
.gauge-marks { position: absolute; top: 0; left: 0; right: 0; height: 10px; }
.gauge-mark {
	position: absolute;
	top: 1px;
	width: 0;
	height: 0;
	margin-left: -5px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 8px solid var(--mark-high);
	transition: left .5s ease;
}
.gauge-mark.low { border-top-color: var(--mark-low); }
.gauge-mark.mid { border-top-color: var(--mark-mid); }

.gauge-track {
	position: relative;
	height: 12px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--line-2);
}
.gauge-bg, .gauge-fill { position: absolute; inset: 0; }
.gauge-bg { opacity: .3; }
.gauge-fill { transition: clip-path .5s ease; }

.gauge-ticks { position: relative; height: 18px; margin-top: 4px; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gauge-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.gauge-ticks span:first-child { transform: none; }
.gauge-ticks span:last-child { transform: translateX(-100%); }

.hero .gauge-track { background: rgba(255, 255, 255, .13); }
.hero .gauge-bg { opacity: .35; }
.hero .gauge-ticks { color: #b3bfcc; }
.hero .gauge-mark { border-top-color: #ff9d8c; }
.hero .gauge-mark.low { border-top-color: #9fd0ff; }

.marks-key {
	display: flex;
	flex-wrap: wrap;
	gap: 3px 16px;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--ink-2);
}
.marks-key li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.marks-key strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.mark { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--mark-high); }
.mark-low { border-top-color: var(--mark-low); }
.mark-mid { border-top-color: var(--mark-mid); }

.hero .marks-key { color: #c6d0dc; }
.hero .marks-key strong { color: #fff; }
.hero .mark-high { border-top-color: #ff9d8c; }
.hero .mark-low { border-top-color: #9fd0ff; }

.tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 16px;
}

.tile, .card {
	background: var(--surface);
	border: 1px solid var(--card-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.tile { padding: 16px 20px 15px; }

.tile-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 28px;
}
.tile-head h2 { font-size: 14px; font-weight: 500; color: var(--ink-2); }

.tile-value {
	margin: 2px 0 11px;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.02em;
}
.tile-value small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.tile-extra { margin-left: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }

.trend { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.trend svg { display: block; }
.hero .trend { font-size: 14px; color: #dde3ea; }

.winddir { display: inline-flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 600; line-height: 1; color: var(--ink); }
#windPijl { width: 26px; height: 26px; transition: transform .5s ease; color: var(--brand); }

.is-changed { color: #32cd32 !important; transition: color .3s; }

.more {
	margin-top: 16px;
	padding: 13px 20px;
	background: var(--surface);
	border: 1px solid var(--card-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.more-list { display: grid; grid-template-columns: 1fr 1fr 1fr 1.6fr; gap: 10px 24px; }
.more-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.more-list > div + div { padding-left: 24px; border-left: 1px solid #c9d0d9; }
.more-list dt { font-size: 13px; color: var(--ink-2); }
.more-list dt small { display: block; font-size: 11.5px; color: var(--ink-3); }
.more-list dd { flex: none; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

section { margin-top: 40px; }
section#live { margin-top: 0; }

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 20px;
	margin-bottom: 14px;
}
.section-head h2 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.section-head p { font-size: 13.5px; color: var(--ink-2); }

.grid-2, .grid-3 { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.card { min-width: 0; overflow: hidden; }

.card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--line-2);
}
.card-head h3 { font-size: 14.5px; font-weight: 600; }
.card-head a { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.card-head a:hover { color: var(--brand); }

.chart-card { padding: 18px 20px 14px; }

.segmented { display: flex; flex-wrap: wrap; gap: 4px; }
.segmented button {
	padding: 6px 12px;
	border: 1px solid transparent;
	border-radius: 4px;
	background: var(--line-2);
	color: var(--ink-2);
	font: 500 13px var(--font);
	cursor: pointer;
}
.segmented button:hover { background: var(--line); color: var(--ink); }
.segmented button[aria-pressed="true"] { background: var(--brand); color: #fff; }

.segmented button.auto-gekozen { background: var(--brand-soft); border-color: var(--brand); color: #0055b8; }

.chart-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }

.schaalkeuze { display: inline-flex; flex: none; align-items: center; gap: 8px; }
.schaal-label { font-size: 12.5px; color: var(--ink-2); }
.schaal-knoppen { display: inline-flex; padding: 3px; border-radius: 4px; background: var(--line-2); }
.schaal-knoppen button {
	-webkit-appearance: none;
	appearance: none;
	padding: 4px 11px;
	border: 0;
	border-radius: 3px;
	background: transparent;
	color: var(--ink-2);
	font: 500 12.5px var(--font);
	cursor: pointer;
}
.schaal-knoppen button:hover { color: var(--ink); }
.schaal-knoppen button[aria-pressed="true"] {
	background: #fff;
	color: var(--ink);
	box-shadow: 0 1px 2px rgba(15, 31, 51, .16);
}

.chart-box { position: relative; height: 300px; margin-top: 16px; }
.chart-card iframe { border: 0; }

.map iframe:focus, .map iframe:focus-visible { outline: none; }

.verwachting-stapel { grid-template-columns: 1fr; }
.card:has(> .verwachting-tegel) { display: flex; flex-direction: column; }
.verwachting-tegel { flex: 1; min-height: 200px; padding: 12px 18px 14px; display: flex; flex-direction: column; }
.vw-samenvatting { font-size: 14px; font-weight: 500; margin-bottom: 12px; }
.vw-voet { margin-top: auto; padding-top: 10px; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.vw-melding { margin: auto; color: var(--ink-3); font-size: 14px; }

.vw-icoonvak { display: flex; }
.vw-icoon { display: block; width: 30px; height: 30px; overflow: visible; }
.vw-icoon .i-zon { fill: var(--sun); stroke: var(--sun); stroke-width: 2.2; stroke-linecap: round; }
.vw-icoon .i-zon circle { stroke: none; }
.vw-icoon .i-maan { fill: #9db0cc; }
.vw-icoon .i-wolk { fill: #dbe4ef; stroke: #fff; stroke-width: 1.5; }
.vw-icoon .i-wolk-vol { fill: #b9c7d8; }
.vw-icoon .i-wolk-donker { fill: #8396ae; }
.vw-icoon .i-regen { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; }
.vw-icoon .i-druppel { fill: var(--brand); }
.vw-icoon .i-sneeuw { fill: #fff; stroke: #7d9cc4; stroke-width: 1.2; }
.vw-icoon .i-bliksem { fill: #f5b400; }
.vw-icoon .i-mist { fill: none; stroke: #9aa8bb; stroke-width: 2; stroke-linecap: round; }

.vw-wind { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vw-pijl { width: 11px; height: 11px; fill: var(--ink-2); flex: none; }

.verwachting-tegel { --vw-label: 118px; --vw-zebra: #f4f6f8; --vw-temp: #d9564b; --vw-drukkleur: #3c9a66; --vw-regen: #3f7fe0; }
.vw-kolommen { display: grid; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vw-kolommen-12 { --rijen: 6; grid-template-columns: var(--vw-label) repeat(12, minmax(0, 1fr)); }
.vw-kolommen-7 { --rijen: 8; grid-template-columns: var(--vw-label) repeat(7, minmax(0, 1fr)); }
.vw-kolom, .vw-labels { grid-row: span var(--rijen); display: grid; grid-template-rows: subgrid; white-space: nowrap; }
.vw-kolom > *, .vw-labels > * { display: flex; align-items: center; justify-content: center; min-height: 28px; padding: 3px 2px; }
.vw-labels > * { justify-content: flex-start; padding-left: 10px; font-size: 11.5px; color: var(--ink-3); }
.vw-kolom > :nth-child(even), .vw-labels > :nth-child(even) { background: var(--vw-zebra); }
.vw-labels > :nth-child(even) { border-radius: 7px 0 0 7px; }
.vw-kolom:last-child > :nth-child(even) { border-radius: 0 7px 7px 0; }

.vw-kolom > :first-child, .vw-labels > :first-child { border-bottom: 1px solid var(--line); margin-bottom: 3px; padding-bottom: 6px; }
.vw-tijd { flex-direction: column; gap: 1px; line-height: 1.15; }
.vw-tijd b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.vw-tijd small { font-size: 10.5px; font-weight: 500; color: var(--ink-3); }
.vw-kolommen-7 .vw-tijd b { text-transform: capitalize; }
.vw-kort { display: none; }
.vw-temp { font-size: 15.5px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.vw-min { color: var(--ink-3); font-weight: 500; }
.vw-mm { color: var(--vw-regen); font-weight: 600; }
.vw-mm-nul { color: #a3adbd; font-weight: 400; }
.vw-kans { font-size: 11.5px; color: var(--ink-3); }
.vw-druk { color: var(--vw-drukkleur); font-weight: 500; }

@media (hover: hover) {
	.vw-kolom > * { transition: box-shadow .15s; }
	.vw-kolom:hover > * { box-shadow: inset 0 0 0 999px rgba(0, 104, 224, .06); }
	.vw-kolom:hover > :first-child { box-shadow: inset 0 0 0 999px rgba(0, 104, 224, .06), inset 0 -2px 0 var(--brand); }
}
.vw-scroll, .vw-scroll-inhoud { flex: 1; display: flex; flex-direction: column; }

.vw-grafiekrij { flex: 1; display: grid; grid-template-columns: var(--vw-label) 1fr; margin-top: 14px; }
.vw-legenda { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 6px 0 0 10px; font-size: 11.5px; color: var(--ink-3); }
.vw-legenda > span { display: inline-flex; align-items: center; gap: 7px; padding-right: 8px; line-height: 1.25; }
.vw-legenda i { flex: none; }
.vw-l-temp, .vw-l-druk { width: 14px; height: 3px; border-radius: 2px; background: var(--vw-temp); }
.vw-l-druk { background: var(--vw-drukkleur); }
.vw-l-mm { width: 6px; height: 10px; border-radius: 2px 2px 0 0; background: var(--vw-regen); opacity: .7; margin: 0 4px; }
.vw-l-nacht { width: 14px; height: 10px; border-radius: 2px; background: #e8ecf1; }
.vw-verloop { position: relative; min-height: 160px; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-2); }
.vw-verloop svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.vw-v-nacht { fill: #eff2f5; }
.vw-v-raster { stroke: rgba(31, 45, 61, .06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vw-v-lijn { fill: none; stroke: var(--vw-temp); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.vw-v-druklijn { stroke: var(--vw-drukkleur); stroke-width: 1.75; }
.vw-v-neerslag { fill: var(--vw-regen); opacity: .8; }

.vw-v-punt { position: absolute; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid var(--surface); box-sizing: content-box; }
.vw-v-label { position: absolute; transform: translate(-50%, calc(-100% - 7px)); padding: 1px 6px; font-size: 11px; font-weight: 600; line-height: 1.3; color: #fff; border-radius: 999px; white-space: nowrap; box-shadow: 0 1px 2px rgba(15, 31, 51, .15); }
.vw-v-temp { background: var(--vw-temp); }
.vw-v-druk { background: var(--vw-drukkleur); }

@media (max-width: 480px) {
	.verwachting-tegel { --vw-label: 30px; }
	.vw-lang { display: none; }
	.vw-kort { display: inline; }
	.vw-labels > * { padding-left: 0; padding-right: 2px; font-size: 10.5px; }
	.vw-scroll { flex: none; overflow-x: auto; overscroll-behavior-x: contain; margin: 0 -18px; padding: 0 18px 6px 0; }
	.vw-scroll-inhoud { min-width: 600px; }

	.vw-scroll .vw-labels { position: sticky; left: 0; z-index: 2; background: var(--surface); box-shadow: 4px 0 6px -4px rgba(15, 31, 51, .18); }
	.vw-scroll .vw-labels > * { padding-left: 18px; border-radius: 0; }

	.vw-scroll .vw-grafiekrij::before { content: ""; position: sticky; left: 0; z-index: 2; grid-column: 1; grid-row: 1; background: var(--surface); box-shadow: 4px 0 6px -4px rgba(15, 31, 51, .18); }
	.vw-scroll .vw-kolommen-12 { grid-template-columns: calc(var(--vw-label) + 18px) repeat(12, minmax(0, 1fr)); }
	.vw-scroll .vw-grafiekrij { grid-template-columns: calc(var(--vw-label) + 18px) 1fr; }
	.vw-scroll .vw-legenda { position: sticky; left: 18px; width: max-content; max-width: calc(100vw - 80px); }
	.vw-kolommen-7 { font-size: 11.5px; }
	.vw-kolommen-7 .vw-temp { font-size: 14px; }
	.vw-kolommen-7 .vw-tijd small { font-size: 9.5px; }
	.vw-grafiekrij { row-gap: 8px; }
	.vw-legenda { order: 2; grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; padding: 0; }
	.vw-legenda > span { padding-right: 0; white-space: nowrap; }
	.vw-verloop { grid-column: 2; min-height: 0; height: 170px; }
}

#grafiekReserve { display: block; margin-top: 12px; border: 0; }

.map { display: block; position: relative; aspect-ratio: 1; overflow: hidden; background: var(--line-2); }

.map-radar iframe {
	position: absolute;
	border: 0;
	pointer-events: none;
	transform-origin: 0 0;
	transition: opacity .3s;
}

.map-sat { background: #0d1626; }
.map-sat img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.map-sat img.sat-zichtbaar { opacity: 1; }

.map-sat img.sat-meren { opacity: 1; pointer-events: none; }

.sat-tijd {
	font-size-adjust: none;
	--s: var(--sat-schaal, 1);
	position: absolute; top: calc(6px * var(--s)); left: calc(3px * var(--s)); z-index: 2;
	padding: calc(4px * var(--s)) calc(10px * var(--s)); border-radius: calc(6px * var(--s));
	background: rgba(255, 255, 255, .9);
	font-family: "Open Sans", sans-serif;
	font-size: calc(16px * var(--s)); line-height: calc(24px * var(--s)); color: #333; white-space: nowrap;

	font-variant-numeric: tabular-nums;
}
.sat-tijd b { font-weight: 700; }
.sat-tijd span { font-size: calc(14px * var(--s)); font-weight: 500; color: #666; }

.sat-plaats { position: absolute; top: 53.87%; left: 50%; z-index: 1; width: 6px; height: 6px; border-radius: 50%; background: #e0643c; border: 1.5px solid #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); opacity: .8; }
.sat-melding { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 16px; text-align: center; font-size: 14px; color: #c9d4e3; }

.map-pressure { background: #fff; }
.map-pressure .kaart-melding { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 16px; text-align: center; font-size: 14px; color: var(--ink-3); }
.map-pressure img {
	position: absolute;
	top: 55%;
	left: 50%;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% center;
	transform: translate(-50%, -50%) scale(1.11);
}

.map-radar::after,
.map-wind::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.map-wind iframe {
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
	transform-origin: 0 0;
	pointer-events: none;
}

.wd-data { display: table; width: 100%; border-collapse: collapse; }
.wd-data-row { display: table-row; }

.wd-data-cell-titel, .wd-data-cell {
	display: table-cell;
	padding: 9px 12px;
	font-size: 13.5px;
	vertical-align: middle;
}
.wd-data-cell-titel { padding-left: 18px; color: var(--ink-2); }
.wd-data-cell {
	text-align: right;
	font-weight: 600;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.wd-data-cell:last-child { padding-right: 18px; }

.wd-data-row:nth-child(odd):not(:first-child) > div { background: #f5f7f9; }

.wd-data-row:first-child > div {
	padding-top: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.wd-data-row:first-child b { font-weight: 600; }
.kop-min::before, .kop-mid::before, .kop-max::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	border-radius: 2px;
	vertical-align: 0;
}
.kop-min::before { background: var(--mark-low); }
.kop-mid::before { background: var(--mark-mid); }
.kop-max::before { background: var(--mark-high); }

.wd-data .when { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }

.wd-data-cell.zonder-datum { padding-top: 18px; padding-bottom: 18px; }
.wd-data sup { vertical-align: top; font-size: smaller; }

.archive {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 20px 48px;
	padding: 22px 24px;
}
.archive h2 { margin-bottom: 4px; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.archive p { max-width: 62ch; font-size: 14px; color: var(--ink-2); }
.archive-form label { display: block; margin-bottom: 4px; font-size: 12.5px; color: var(--ink-2); }
.archive-controls { display: flex; align-items: flex-end; gap: 8px; }
#jaarSelect { width: 92px; }
#monthSelect { width: 140px; }

select {
	height: 38px;
	padding: 0 10px;
	border: 1px solid #ccd3dc;
	border-radius: 4px;
	background: #fff;
	color: var(--ink);
	font: 400 14px var(--font);
}

.btn {
	height: 38px;
	padding: 0 18px;
	border: 0;
	border-radius: 4px;
	background: var(--brand);
	color: #fff;
	font: 500 14px var(--font);
	cursor: pointer;
}
.btn:hover { background: #175fbb; }
.btn-quiet { background: var(--line-2); color: var(--ink); }
.btn-quiet:hover { background: var(--line); }

.archive-dialog {
	width: min(900px, calc(100vw - 32px));
	padding: 0;
	border: 0;
	border-radius: 4px;
	box-shadow: 0 20px 60px rgba(15, 31, 51, .3);
}
.archive-dialog::backdrop { background: rgba(15, 31, 51, .5); }
.archive-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.archive-dialog-head strong { margin-right: auto; }
.archive-terug { margin-right: 14px; }
.archive-body { position: relative; }
#modalIframe { display: block; width: 100%; height: 70vh; border: 0; }

.archive-beeld { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; overflow: auto; background: var(--surface); }
.archive-beeld[hidden] { display: none; }
.archive-beeld img { max-width: 100%; height: auto; }

.footer { border-top: 1px solid var(--line); background: #fff; font-size: 13px; color: var(--ink-2); }
.footer .footer-inner { padding-top: 24px; padding-bottom: 24px; text-align: center; }
.footer p + p { margin-top: 8px; }
.footer-kolommen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 40px;
	margin-top: 10px;
}
.footer .footer-kolommen p { margin: 0; }

.footer .footer-kolommen p + p { margin-left: -20px; padding-left: 20px; border-left: 1px solid #c9d0d9; }
.footer-line { height: 0; margin: 14px 0; border: 0; border-top: 1px solid #c9d0d9; }
.footer strong { color: var(--ink); font-weight: 600; }
.footer a { font-weight: 500; }
.footer .heel { white-space: nowrap; }

.alarm-kort { display: none; }

.dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin: 0 0 0 5px;
	border-radius: 50%;
	vertical-align: 0;
}
.up { background: #22a35e; }
.down { background: var(--mark-high); }

#scrollBtn {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: none;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: var(--brand-dark);
	color: #fff;
	box-shadow: 0 4px 14px rgba(15, 31, 51, .3);
	cursor: pointer;
}
#scrollBtn.is-visible { display: grid; }

@media (max-width: 1120px) {
	.topbar-inner { gap: 16px; }
	.mainnav a { padding: 7px 8px; }
	.nav-actueel a { padding-right: 5px; }
	.thema-knop { margin-left: -8px; }
}

@media (max-width: 1020px) {
	.tijd-label { display: none; }
}

@media (max-width: 900px) {
	.topbar .topbar-inner { flex-wrap: wrap; gap: 0 16px; padding-top: 8px; }
	.tijdchip { margin-left: auto; }
	.regelbreuk { display: block; order: 2; flex-basis: 100%; height: 0; }
	.mainnav {
		order: 3;
		flex: 1 1 0;
		min-width: 0;
		margin: 6px 0 6px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.mainnav::-webkit-scrollbar { display: none; }
	html { scroll-padding-top: 124px; }
}

@media (max-width: 1100px) {
	.more-list { grid-template-columns: repeat(2, 1fr); }
	.more-list > div:nth-child(odd) { padding-left: 0; border-left: 0; }
}

@media (max-width: 1040px) {
	.hero { grid-template-columns: 1.4fr 1fr; }

	.tiles, .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {

	.archive-dialog-head { flex-wrap: wrap; row-gap: 10px; }
	.archive-dialog-head:has(.archive-terug:not([hidden])) strong { order: -1; flex-basis: 100%; }
	.archive-terug { margin-right: auto; }
	.archive-dialog-head .btn { padding: 0 12px; }

	.wrap { padding: 0 16px; }

	html { scroll-padding-top: 124px; }

	.logo img { width: min(265px, calc(100vw - 165px)); }
	.thema-knop { width: 28px; height: 28px; margin-left: -8px; }
	.tijdchip { padding: 4px 9px; font-size: 12px; }
	.tijd-label { display: none; }
	.alarm-lang { display: none; }
	.alarm-kort { display: inline; }

	main.wrap { padding-top: 12px; padding-bottom: 40px; }
	.alarm { flex-wrap: wrap; }
	.alarm-text { flex-basis: calc(100% - 30px); }
	.alarm-source { margin-left: 29px; }

	.hero { grid-template-columns: 1fr; }
	.hero-main { padding: 20px 18px; }
	.hero-side { padding: 18px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .13); }
	.hero-figure { font-size: 64px; }

	.hero-side { padding: 12px 18px 14px; }
	.hero-title { margin-bottom: 2px; font-size: 12.5px; }
	.almanac-head { padding-bottom: 2px; font-size: 11px; }
	.almanac-row { padding: 5px 0; }
	.almanac-name { gap: 6px; font-size: 13px; }
	.almanac-name svg { width: 15px; height: 15px; }
	.almanac-row strong { font-size: 15px; }
	.almanac-daylight { margin-top: 7px; font-size: 12px; }

	.more-list { grid-template-columns: 1fr; gap: 0; }
	.more-list > div, .more-list > div + div { padding: 8px 0; border-left: 0; border-top: 1px solid var(--line-2); }
	.more-list > div:first-child { border-top: 0; }

	.tiles, .grid-2, .grid-3 { grid-template-columns: 1fr; }
	.tile { padding: 14px 16px; }

	section { margin-top: 32px; }
	.chart-card { padding: 14px 12px 10px; }
	.segmented { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px 2px; scrollbar-width: none; }
	.segmented::-webkit-scrollbar { display: none; }
	.segmented button { flex: none; }
	.chart-toolbar { display: block; }
	.chart-toolbar .schaalkeuze { margin-top: 10px; }
	.chart-box { height: 250px; margin-top: 12px; }

	.archive { grid-template-columns: 1fr; padding: 18px; }
	#jaarSelect { width: 84px; }
	.archive-field:nth-child(2) { flex: 1; min-width: 0; }
	#monthSelect { width: 100%; }
	.footer-kolommen { grid-template-columns: 1fr; }
	.footer .footer-kolommen p + p { margin-left: 0; padding-left: 0; border-left: 0; }

	.footer .footer-inner { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*:not(.fade-blink), *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
	.topbar { position: static; }
	#scrollBtn, .mainnav { display: none !important; }
}

html.donker {
	color-scheme: dark;
	--grafiek-rand: #2c3848;
	--grafiek-tooltip: #0b121b;
	--ink: #e6ebf1;
	--ink-2: #aab5c3;
	--ink-3: #8a96a6;
	--line: #2c3848;
	--line-2: #222d3b;
	--surface: #18222f;
	--page: #0e1621;
	--card-line: #27354a;
	--brand: #4d9bff;
	--brand-dark: #1f2d3d;
	--brand-soft: #1a2e4a;
	--ok: #4cc283;
	--ok-soft: #12291c;
	--danger: #ff8a7a;
	--danger-soft: #3a1a17;
}
html.donker .hero { background: #223247; }
html.donker .hero-side { background: rgba(0, 0, 0, .12); }
html.donker .mainnav a.is-active,
html.donker .segmented button.auto-gekozen { color: #9cc5ff; }
html.donker .schakelaar-baan { background: #3a4757; }
html.donker .notice { border-color: var(--danger); color: var(--danger); }
html.donker .alarm-ok { border-color: #24543a; color: #8fe0b3; }
html.donker .alarm-yellow { background: #322b0e; border-color: #6b5b17; color: #ffe58a; }
html.donker .alarm-orange { background: #3a220f; border-color: #7a4416; color: #ffc58f; }
html.donker .alarm-red { border-color: #6e2a22; }
html.donker .alarm-info { border-color: #2c4f80; color: #9cc5ff; }
html.donker .more-list > div + div,
html.donker .footer .footer-kolommen p + p { border-left-color: var(--line); }
html.donker .footer-line { border-top-color: var(--line); }
html.donker .footer { background: var(--surface); }
html.donker .schaal-knoppen button[aria-pressed="true"] { background: #2e3b4d; box-shadow: none; }
html.donker select { border-color: var(--line); background: var(--surface); }
html.donker .verwachting-tegel { --vw-zebra: #1d2835; }
html.donker .vw-mm-nul { color: #6b7787; }
html.donker .vw-l-nacht { background: #243041; }
html.donker .vw-v-nacht { fill: #1c2633; }
html.donker .vw-v-raster { stroke: rgba(255, 255, 255, .06); }
html.donker .vw-icoon .i-wolk { stroke: var(--surface); }
html.donker .vw-kolom:hover > * { box-shadow: inset 0 0 0 999px rgba(77, 155, 255, .08); }
html.donker .vw-kolom:hover > :first-child { box-shadow: inset 0 0 0 999px rgba(77, 155, 255, .08), inset 0 -2px 0 var(--brand); }
html.donker .vw-scroll .vw-labels,
html.donker .vw-scroll .vw-grafiekrij::before { box-shadow: 4px 0 6px -4px rgba(0, 0, 0, .5); }
html.donker .wd-data-row:nth-child(odd):not(:first-child) > div { background: #1d2835; }
html.donker .archive-dialog { background: var(--surface); color: var(--ink); }