/* brugopen.deslimmebrug.nl, paginastijl (uit index.html gehaald) */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
body {
background:
radial-gradient(1200px 600px at 78% -8%, rgba(255,107,44,.05), transparent 60%),
var(--dsb-navy-900);
color: var(--dsb-ink);
font-family: var(--dsb-font-body);
-webkit-font-smoothing: antialiased;
letter-spacing: .003em;
}
.mono { font-family: var(--dsb-font-mono); }
.eyebrow {
font-family: var(--dsb-font-mono); font-size: var(--dsb-text-xs);
letter-spacing: .14em; text-transform: uppercase; color: var(--dsb-ink-faint);
}
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
/* ───────── header ───────── */
header.top {
position: sticky; top: 0; z-index: 40;
background: var(--top-bg, rgba(8,20,33,.82));
border-bottom: 1px solid var(--dsb-line);
backdrop-filter: blur(8px);
}
.top__row { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 18px; }
.brand { display: flex; align-items: center; gap: 13px; flex: none; text-decoration: none; color: var(--dsb-ink); cursor: pointer; transition: opacity .2s ease; }
a.brand:hover { opacity: .82; }
.brand svg { width: 46px; height: auto; display: block; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--dsb-font-display); font-weight: 800; font-size: 15px; letter-spacing: .02em; white-space: nowrap; }
.brand__tag { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dsb-ink-faint); margin-top: 4px; white-space: nowrap; }
.sync { display: flex; align-items: center; gap: 9px; font-family: var(--dsb-font-mono); font-size: 11px; color: var(--dsb-ink-faint); letter-spacing: .04em; white-space: nowrap; flex: none; }
@media (max-width: 1399px) { header.top .sync .sync__lbl { display: none; } }
@media (max-width: 1279px) { header.top .sync { display: none; } }
.sync b { color: var(--dsb-ink-dim); font-weight: 500; }
.top__right { display: flex; align-items: center; gap: 16px; }
.theme-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: var(--dsb-radius-sm);
background: var(--dsb-navy-700); border: 1px solid var(--dsb-line);
color: var(--dsb-ink-dim); cursor: pointer; padding: 0;
transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.theme-btn:hover { color: var(--dsb-ink); border-color: var(--dsb-ink-faint); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .ico-sun { display: none; }
body.light .theme-btn .ico-sun { display: block; }
body.light .theme-btn .ico-moon { display: none; }
/* sectienavigatie */
html { scroll-behavior: smooth; }
#kaart, #bruggen, #insights, #vergelijk, #waarom, #businesscase, #aanpak, #faq { scroll-margin-top: 84px; }
.top-nav { display: flex; gap: 1px; margin-left: 2px; }
.top-nav a { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--dsb-ink-faint); text-decoration: none; padding: 7px 6px 5px; border-bottom: 2px solid transparent; transition: color .24s ease, border-color .24s ease; white-space: nowrap; }bottom: 2px solid transparent; transition: color .24s ease, border-color .24s ease; }
.top-nav a:hover { color: var(--dsb-ink); }
.top-nav a.actief { color: var(--dsb-ink); border-bottom-color: var(--dsb-orange); }
@media (max-width: 1240px) { .top-nav { display: none; } }
/* schakelaar bij de bruggen */
.switch-stage { margin: 2px 0 28px; }
/* zoeken op de kaart */
.map-zoek { flex: none; width: 220px; min-width: 0; }
@media (max-width: 720px) { .map-zoek { width: 100%; } }
/* mini-CTA na de vergelijking */
.compare__cta { text-align: center; margin-top: 20px; }
.compare__cta a { display: inline-block; font-family: var(--dsb-font-mono); font-size: 12px; letter-spacing: .06em; color: var(--dsb-orange); text-decoration: none; border: 1px solid rgba(255,107,44,.4); border-radius: var(--dsb-radius-sm); padding: 11px 20px; transition: border-color .24s ease, background .24s ease; }
.compare__cta a:hover { border-color: var(--dsb-orange); background: rgba(255,107,44,.08); }
/* doelgroepkaarten binnen 'waarom' */
.waarom .voorwie__grid { margin: 0 0 28px; }
/* compacte schakelaar in de header */
.switch-mini__hint { display: none; font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dsb-orange); white-space: nowrap; }
.switch-mini__hint.show { display: inline; }
@media (max-width: 1029px), (min-width: 1200px) { .switch-mini__hint.show { display: none; } }
@media (max-width: 819px) { .brand__tag { display: none; } }
@media (max-width: 659px) { header.top .top-cta { display: none; } }
.switch-mini { position: relative; display: grid; grid-template-columns: repeat(3,1fr); background: var(--dsb-navy-700); border: 1px solid var(--dsb-line); border-radius: 100px; padding: 4px; cursor: pointer; user-select: none; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.switch-mini.show { opacity: 1; transform: none; pointer-events: auto; }
.switch-mini__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px)/3); border-radius: 100px; background: var(--dsb-navy-800); box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: transform .35s cubic-bezier(.2,.7,.25,1), background .35s ease; }
body.t0 .switch-mini__thumb { transform: translateX(0); }
body.t1 .switch-mini__thumb { transform: translateX(100%); background: linear-gradient(180deg,#ff7838,#e8541a); box-shadow: 0 3px 12px rgba(255,107,44,.35); }
body.t2 .switch-mini__thumb { transform: translateX(200%); background: linear-gradient(180deg,#ff7838,#e8541a); box-shadow: 0 3px 12px rgba(255,107,44,.35); }
body.light .switch-mini__thumb { background: #fff; }
body.light.t1 .switch-mini__thumb, body.light.t2 .switch-mini__thumb { background: linear-gradient(180deg,#ff7838,#e8541a); }
.switch-mini__opt { position: relative; z-index: 2; border: none; background: none; cursor: pointer; font-family: var(--dsb-font-display); font-weight: 700; font-size: 11.5px; letter-spacing: .01em; padding: 6px 11px; color: var(--dsb-ink-faint); transition: color .3s ease; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
body.t0 .switch-mini__opt[data-mini="0"], body.t1 .switch-mini__opt[data-mini="1"], body.t2 .switch-mini__opt[data-mini="2"] { color: var(--dsb-ink); }
body.t2 .switch-mini__opt[data-mini="2"], body.t1 .switch-mini__opt[data-mini="1"] { color: #fff; }
.mini-heart { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }
body.t2 .mini-heart { opacity: 1; animation: beat 1.8s ease-in-out infinite; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dsb-ok); box-shadow: 0 0 0 0 rgba(63,178,127,.5); animation: pulse 1.8s var(--dsb-ease, ease) infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(63,178,127,.45)} 70%{box-shadow:0 0 0 7px rgba(63,178,127,0)} 100%{box-shadow:0 0 0 0 rgba(63,178,127,0)} }
/* ───────── toggle ───────── */
.toggle-band { padding: 40px 0 30px; }
.toggle-lead { text-align: center; margin: 26px 0 0; }
.toggle-lead h1 { font-family: var(--dsb-font-display); font-weight: 800; font-size: 30px; letter-spacing: -.02em; margin: 10px 0 8px; text-wrap: balance; }
.toggle-lead p { color: var(--dsb-ink-dim); font-size: 16px; max-width: none; margin: 0 auto; line-height: 1.6; }
/* positionering bovenaan */
.positioning { text-align: center; max-width: 980px; margin: 0 auto 26px; }
.positioning h2 { font-family: var(--dsb-font-display); font-weight: 800; font-size: clamp(24px, 3.4vw, 38px); line-height: 1.12; letter-spacing: -.02em; margin: 0; color: var(--dsb-ink); text-wrap: balance; }
.positioning h2 b { color: var(--dsb-orange); font-weight: 800; }
.positioning p { margin: 14px auto 0; max-width: 640px; font-size: 15.5px; line-height: 1.6; color: var(--dsb-ink-dim); }
/* doelgroep-strip */
.voorwie { padding-top: 8px; padding-bottom: 6px; }
.voorwie__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vw { background: var(--dsb-navy-800); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-lg); padding: 20px 22px; }
.vw__ico { width: 30px; height: 30px; color: var(--dsb-orange); }
.vw h3 { font-family: var(--dsb-font-display); font-weight: 700; font-size: 15px; margin: 12px 0 6px; color: var(--dsb-ink); }
.vw p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--dsb-ink-dim); text-wrap: pretty; }
.vw p b { color: var(--dsb-ink); font-weight: 600; }
body.light .vw { background: #fff; }
/* simulatie-tooltip + toegankelijkheid */
.sim-chip, .card-sim { cursor: help; }
:focus-visible { outline: 2px solid var(--dsb-orange); outline-offset: 2px; border-radius: 3px; }
.skip { position: absolute; left: 12px; top: -52px; z-index: 200; background: var(--dsb-orange); color: #fff; padding: 11px 18px; border-radius: 0 0 8px 8px; font-family: var(--dsb-font-display); font-weight: 700; font-size: 13px; text-decoration: none; transition: top .2s ease; }
.skip:focus { top: 0; }
.bridge, .nu-chip, .map-item { cursor: pointer; }
.switch {
position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
width: min(860px, 100%); margin: 0 auto;
background: var(--dsb-navy-800); border: 1px solid var(--dsb-line);
border-radius: 100px; padding: 7px; gap: 0; cursor: pointer; user-select: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.switch__thumb {
position: absolute; top: 7px; bottom: 7px; left: 7px; width: calc((100% - 14px)/3);
border-radius: 100px; background: var(--dsb-navy-700);
box-shadow: 0 6px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
transition: transform .42s cubic-bezier(.2,.7,.25,1), background .42s ease;
}
body.t0 .switch__thumb { transform: translateX(0); }
body.t1 .switch__thumb { transform: translateX(100%); background: linear-gradient(180deg,#ff7838,#e8541a); box-shadow: 0 8px 26px rgba(255,107,44,.32), inset 0 1px 0 rgba(255,255,255,.18); }
body.t2 .switch__thumb { transform: translateX(200%); background: linear-gradient(180deg,#ff7838,#e8541a); box-shadow: 0 8px 26px rgba(255,107,44,.32), inset 0 1px 0 rgba(255,255,255,.18); }
.switch__opt {
position: relative; z-index: 2; text-align: center; padding: 13px 10px;
font-family: var(--dsb-font-display); font-weight: 800; font-size: clamp(11px, 1.6vw, 15px);
letter-spacing: .01em; color: var(--dsb-ink-faint); transition: color .3s ease;
display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; background: none; border: none;
}
.switch__opt small { display: block; font-family: var(--dsb-font-mono); font-weight: 500; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-top: 3px; }
.switch__opt .lbl { display: flex; flex-direction: column; align-items: center; line-height: 1.08; }
body.t0 .switch__opt[data-tier="0"], body.t1 .switch__opt[data-tier="1"], body.t2 .switch__opt[data-tier="2"] { color: var(--dsb-ink); }
body.t2 .switch__opt[data-tier="2"], body.t1 .switch__opt[data-tier="1"] { color: #fff; }
.switch__opt .heart { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .55; flex-shrink: 0; }
body.t2 .switch__opt[data-tier="2"] .heart { opacity: 1; animation: beat 1.8s ease-in-out infinite; }
@keyframes beat { 0%,100%{transform:scale(1)} 14%{transform:scale(1.55)} 28%{transform:scale(1)} 42%{transform:scale(1.3)} 56%{transform:scale(1)} }
/* ───────── 'dit mist u nu' checklist onder de schakelaar ───────── */
.missen { display: flex; gap: 8px 22px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.mis { display: inline-flex; align-items: center; gap: 7px; font-family: var(--dsb-font-mono); font-size: 11px; letter-spacing: .03em; color: var(--dsb-ink-faint); transition: color .35s ease; }
.mis svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mis .x { color: #c75644; }
.mis .ok { display: none; color: var(--dsb-orange); }
body.t1 .mis.v1, body.t2 .mis.v1, body.t2 .mis.v2 { color: var(--dsb-ink-dim); }
body.t1 .mis.v1 .x, body.t2 .mis.v1 .x, body.t2 .mis.v2 .x { display: none; }
body.t1 .mis.v1 .ok, body.t2 .mis.v1 .ok, body.t2 .mis.v2 .ok { display: block; }
/* sticky contact-knop in de header */
.top-cta {
display: inline-flex; align-items: center; white-space: nowrap;
font-family: var(--dsb-font-display); font-weight: 700; font-size: 12.5px;
background: linear-gradient(180deg,#ff7838,#e8541a); color: #fff; text-decoration: none;
border-radius: var(--dsb-radius-sm); padding: 9px 15px;
opacity: 0; transform: translateY(-6px); pointer-events: none;
transition: opacity .3s ease, transform .3s ease;
}
.top-cta.show { opacity: 1; transform: none; pointer-events: auto; }
/* ───────── hero / aggregaat ───────── */
.hero { padding: 8px 0 34px; }
.hero__panel {
background: var(--dsb-navy-800); border: 1px solid var(--dsb-line);
border-radius: var(--dsb-radius-lg); padding: 24px 28px;
display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
position: relative; overflow: hidden; transition: border-color .4s ease;
}
body.met .hero__panel { border-color: rgba(255,107,44,.28); }
.hero__glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease;
background: radial-gradient(420px 200px at 84% 120%, rgba(255,107,44,.10), transparent 70%); }
body.met .hero__glow { opacity: 1; }
.agg { display: flex; flex-wrap: wrap; gap: 30px 38px; align-items: flex-end; }
.agg__item { display: flex; flex-direction: column; gap: 6px; }
.agg__k { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.agg__v { font-family: var(--dsb-font-display); font-weight: 900; font-size: 38px; line-height: .9; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 7px; }
.agg__v u { font-style: normal; text-decoration: none; font-family: var(--dsb-font-body); font-weight: 500; font-size: 13px; color: var(--dsb-ink-dim); letter-spacing: 0; }
.agg__sub { font-size: 12px; color: var(--dsb-ink-dim); }
.dot-row { display: flex; gap: 14px; flex-wrap: wrap; }
.dot-row span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--dsb-ink-dim); }
.dot-row i { width: 9px; height: 9px; border-radius: 50%; }
.met-only { transition: opacity .4s ease, max-width .4s ease; }
body:not(.met) .met-only { display: none !important; }
.zonder-only { }
body.met .zonder-only { display: none !important; }
.plus-only { }
body:not(.plus) .plus-only { display: none !important; }
.card-sensor { }
body:not(.plus) .card-sensor { display: none; }
/* heartbeat */
.heartbeat { width: 340px; max-width: 38vw; }
.heartbeat__cap { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.heartbeat__cap .k { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.heartbeat__cap .v { font-family: var(--dsb-font-mono); font-size: 11px; color: var(--dsb-orange); }
.heartbeat svg { width: 100%; height: 70px; display: block; }
/* ───────── simulatie-labels ───────── */
.sim-chip {
display: inline-flex; align-items: center; font-family: var(--dsb-font-mono);
font-size: 9px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
color: var(--dsb-amber); border: 1px solid rgba(201,138,27,.45); border-radius: 100px;
padding: 2px 8px; vertical-align: middle;
}
.sim-note {
display: flex; gap: 10px; align-items: flex-start;
background: rgba(201,138,27,.07); border: 1px solid rgba(201,138,27,.3);
border-radius: var(--dsb-radius-sm); padding: 11px 14px;
font-size: 12.5px; color: var(--dsb-ink-dim); line-height: 1.55;
}
.sim-note b { color: var(--dsb-amber); font-weight: 600; }
.sim-note a { color: var(--dsb-ink); }
.card-sim { margin-top: 11px; font-family: var(--dsb-font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--dsb-amber); }
/* ───────── verkooptrigger onder het bruggenoverzicht ───────── */
.ontsluit {
display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
margin-top: 18px; padding: 20px 24px;
background: var(--dsb-navy-800); border: 1px dashed rgba(255,107,44,.45);
border-radius: var(--dsb-radius-lg);
}
.ontsluit__txt b { display: block; font-family: var(--dsb-font-display); font-weight: 700; font-size: 16px; color: var(--dsb-ink); }
.ontsluit__txt p { margin: 5px 0 0; font-size: 13.5px; color: var(--dsb-ink-dim); line-height: 1.6; max-width: 62ch; text-wrap: pretty; }
.ontsluit__btn {
display: inline-flex; align-items: center; flex: none;
font-family: var(--dsb-font-display); font-weight: 700; font-size: 13.5px;
background: linear-gradient(180deg,#ff7838,#e8541a); color: #fff; text-decoration: none;
border-radius: var(--dsb-radius-sm); padding: 11px 20px;
transition: transform .24s cubic-bezier(.2,.7,.25,1), box-shadow .24s ease;
}
.ontsluit__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,107,44,.3); }
body.light .ontsluit { background: #fff; }
/* ───────── donkere cijferbanden (spits + voorspelling): één stramien ───────── */
.spits-band, .vraag-band {
display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
margin-top: 26px; padding: 26px 30px;
background:
radial-gradient(420px 220px at 0% 50%, rgba(255,107,44,.10), transparent 70%),
#04101D;
border: 1px solid rgba(255,107,44,.3); border-radius: var(--dsb-radius-lg);
}
.spits-band .nr, .vraag-band .nr { flex: none; min-width: 118px; text-align: center; padding-right: 26px; border-right: 1px solid rgba(255,255,255,.12); font-family: var(--dsb-font-display); font-weight: 800; font-size: 46px; color: var(--dsb-orange); line-height: 1; }
.spits-band .nr small, .vraag-band .nr small { display: block; margin-top: 7px; font-family: var(--dsb-font-mono); font-weight: 500; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(232,237,242,.55); }
.spits-band .tx, .vraag-band__tx { flex: 1 1 380px; min-width: 0; }
.spits-band .tx b, .vraag-band__tx b { display: block; font-family: var(--dsb-font-display); font-weight: 700; font-size: 17px; color: #F4F7FA; line-height: 1.4; }
.spits-band .tx b .sim-chip, .vraag-band__tx b .sim-chip { margin-left: 8px; vertical-align: 2px; }
.spits-band .tx p, .vraag-band__tx p { margin: 5px 0 0; font-size: 14px; color: rgba(232,237,242,.72); line-height: 1.6; max-width: 88ch; }
.vraag-band > .ontsluit__btn { flex: none; margin-left: auto; }
/* ───────── waarom: vergelijkingstabel ───────── */
.waarom { padding-top: 34px; padding-bottom: 6px; }
.cmpt-wrap { background: var(--dsb-navy-800); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-lg); overflow: hidden; }
.cmpt { width: 100%; border-collapse: collapse; }
.cmpt th { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dsb-ink-faint); padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--dsb-line); }
.cmpt th:first-child { text-align: left; width: 42%; }
.cmpt th.dsb { color: var(--dsb-orange); }
.cmpt td { padding: 10px 16px; border-bottom: 1px solid var(--dsb-line); font-size: 13.5px; color: var(--dsb-ink-dim); }
.cmpt tbody tr:last-child td { border-bottom: none; }
.cmpt td.j, .cmpt td.n { text-align: center; }
.cmpt td.j::after { content: ""; display: inline-block; width: 15px; height: 15px;
background-color: var(--dsb-ink-faint);
-webkit-mask: url('data:image/svg+xml,') center/contain no-repeat;
mask: url('data:image/svg+xml,') center/contain no-repeat; }
.cmpt td.j.dsb::after { background-color: var(--dsb-orange); }
.cmpt td.n::after { content: "-"; color: var(--dsb-ink-faint); opacity: .45; font-size: 13px; }
.cmpt td.a { text-align: center; }
.cmpt td.a::after { content: "op aanvraag"; display: inline-block; font-family: var(--dsb-font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--dsb-orange); border: 1px solid rgba(255,107,44,.4); border-radius: 100px; padding: 2px 9px; }
.cmpt td.dsb { background: rgba(255,107,44,.045); }
.cmpt-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 16px 18px; border-top: 1px solid var(--dsb-line); }
.cmpt-foot span { font-size: 13.5px; color: var(--dsb-ink-dim); max-width: 56ch; line-height: 1.6; }
/* ───────── waarom: scenario ───────── */
.scen { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; position: relative; }
.scen__col { background: var(--dsb-navy-800); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-lg); padding: 20px 22px; }
.scen__col.met { border-color: rgba(255,107,44,.4); }
.scen__h { font-family: var(--dsb-font-display); font-weight: 700; font-size: 15px; color: var(--dsb-ink); margin-bottom: 16px; }
.scen__h.zonder { color: var(--dsb-ink-dim); }
.scen__col.met .scen__h { color: var(--dsb-orange); }
.scen__item { display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 9px 0; border-top: 1px dashed var(--dsb-line); }
.scen__item .t { font-family: var(--dsb-font-mono); font-size: 11.5px; color: var(--dsb-ink-faint); padding-top: 2px; }
.scen__item p { margin: 0; font-size: 13.5px; color: var(--dsb-ink-dim); line-height: 1.55; }
.scen__col.met .scen__item p { color: var(--dsb-ink); }
.scen__note { position: absolute; right: 4px; bottom: -20px; font-family: var(--dsb-font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dsb-ink-faint); }
/* ───────── waarom: roi ───────── */
.roi { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: center; margin-top: 34px; background: var(--dsb-navy-800); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-lg); padding: 24px 28px; }
.roi__lead b { display: block; font-family: var(--dsb-font-display); font-weight: 700; font-size: 17px; color: var(--dsb-ink); }
.roi__lead p { margin: 7px 0 0; font-size: 13.5px; color: var(--dsb-ink-dim); line-height: 1.65; text-wrap: pretty; }
.roi__calc label { display: block; font-family: var(--dsb-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dsb-ink-faint); margin-bottom: 8px; }
.roi__calc label b { color: var(--dsb-orange); font-size: 13px; }
.roi__calc input[type="range"] { width: 100%; accent-color: var(--dsb-orange-500, #DA5612); }
.roi__out { margin: 12px 0 16px; font-size: 14px; color: var(--dsb-ink-dim); line-height: 1.6; }
.roi__out b { color: var(--dsb-ink); }
/* ───────── business case ───────── */
.bcase { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; align-items: stretch; margin-top: 12px; }
.bcase__panel { background: var(--dsb-navy-800); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-lg); padding: 26px 28px; }
.bcase__lead b { display: block; font-family: var(--dsb-font-display); font-weight: 700; font-size: 18px; color: var(--dsb-ink); }
.bcase__lead p { margin: 8px 0 0; font-size: 13.5px; color: var(--dsb-ink-dim); line-height: 1.65; text-wrap: pretty; max-width: 54ch; }
.bcase__ctrl { margin-top: 24px; }
.bcase__ctrl label { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-family: var(--dsb-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dsb-ink-faint); margin-bottom: 12px; }
.bcase__ctrl label b { font-family: var(--dsb-font-display); font-weight: 800; font-size: 18px; color: var(--dsb-orange); letter-spacing: 0; flex: none; }
.bcase__ctrl input[type="range"] { width: 100%; accent-color: var(--dsb-orange); height: 4px; cursor: pointer; }
.bcase__out { background: var(--dsb-navy-900); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-lg); padding: 22px 26px; display: flex; flex-direction: column; gap: 16px; }
.bcase__out-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bcase__out-k { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.bc-metric { border-top: 1px dashed var(--dsb-line); padding-top: 14px; }
.bc-metric .k { display: block; font-family: var(--dsb-font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.bc-metric .v { display: block; font-family: var(--dsb-font-display); font-weight: 900; font-size: 34px; line-height: 1.05; margin-top: 6px; color: var(--dsb-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bc-metric .v b { color: var(--dsb-orange); font-weight: 900; }
.bcase__assume { margin: 14px 0 0; font-family: var(--dsb-font-mono); font-size: 11px; letter-spacing: .01em; color: var(--dsb-ink-faint); line-height: 1.75; max-width: 92ch; }
.bcase__foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 16px; padding: 16px 20px; background: var(--dsb-navy-800); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-lg); }
.bcase__foot span { font-size: 13.5px; color: var(--dsb-ink); font-weight: 500; max-width: 64ch; line-height: 1.6; }
body.light .bcase__out { background: #faf7f2; }
@media (max-width: 860px){ .bcase { grid-template-columns: 1fr; } }
/* ───────── faq ───────── */
.faq { display: grid; gap: 10px; margin-top: 10px; max-width: 920px; }
.faq__item { background: var(--dsb-navy-800); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-md); overflow: hidden; transition: border-color .24s ease; }
.faq__item[open] { border-color: rgba(255,107,44,.4); }
.faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; font-family: var(--dsb-font-display); font-weight: 700; font-size: 15.5px; color: var(--dsb-ink); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q .ic { flex: none; width: 20px; height: 20px; color: var(--dsb-ink-faint); transition: transform .24s cubic-bezier(.2,.7,.25,1), color .24s ease; }
.faq__item[open] .faq__q .ic { transform: rotate(45deg); color: var(--dsb-orange); }
.faq__a { padding: 0 22px 20px; margin: 0; font-size: 14px; color: var(--dsb-ink-dim); line-height: 1.7; text-wrap: pretty; max-width: 78ch; }
.faq__a b { color: var(--dsb-ink); font-weight: 600; }
body.light .cmpt-wrap, body.light .scen__col, body.light .roi { background: #fff; }
body.light .spits-band { background: #062A4A; }
/* ───────── modules op aanvraag (cliffhanger) ───────── */
.modt { width: 100%; border-collapse: collapse; background: var(--dsb-navy-800); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-lg); overflow: hidden; }
.modt td { padding: 12px 16px; border-bottom: 1px solid var(--dsb-line); font-size: 13.5px; vertical-align: middle; }
.modt tr:last-child td { border-bottom: none; }
.modt td:first-child { font-family: var(--dsb-font-display); font-weight: 700; color: var(--dsb-ink); white-space: nowrap; }
.modt td:nth-child(2) { color: var(--dsb-ink-dim); }
.modt td:last-child { text-align: right; white-space: nowrap; }
.modt td a { font-family: var(--dsb-font-mono); font-size: 11px; letter-spacing: .04em; color: var(--dsb-orange); text-decoration: none; }
.modt td a:hover { text-decoration: underline; }
body.light .modt { background: #fff; }
.mods { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; margin-top: 34px; align-items: stretch; }
.mods__h h3 { font-family: var(--dsb-font-display); font-weight: 700; font-size: 19px; margin: 0 0 6px; color: var(--dsb-ink); }
.mods__h p { margin: 0 0 16px; font-size: 13.5px; color: var(--dsb-ink-dim); line-height: 1.6; max-width: 58ch; }
.mods__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mod {
position: relative; display: block; text-decoration: none;
background: var(--dsb-navy-800); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-md);
padding: 14px 38px 14px 16px; transition: border-color .24s ease;
}
.mod:hover { border-color: rgba(255,107,44,.5); }
.mod__ico { width: 20px; height: 20px; fill: none; stroke: var(--dsb-orange); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: block; margin-bottom: 9px; }
.mod b { display: block; font-family: var(--dsb-font-display); font-weight: 700; font-size: 13.5px; color: var(--dsb-ink); }
.mod span { display: block; font-size: 12px; color: var(--dsb-ink-faint); margin-top: 3px; line-height: 1.45; }
.mod__lock { position: absolute; top: 13px; right: 13px; width: 14px; height: 14px; fill: none; stroke: var(--dsb-ink-faint); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mod:hover .mod__lock { stroke: var(--dsb-orange); }
.mods__side { display: flex; flex-direction: column; gap: 10px; }
.blurbox { position: relative; flex: 1; background: var(--dsb-navy-800); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-md); overflow: hidden; min-height: 230px; }
.blurbox__inner { position: absolute; inset: 0; padding: 16px 18px; filter: blur(5px) saturate(.8); opacity: .75; pointer-events: none; user-select: none; }
.bb-h { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dsb-ink-faint); margin-bottom: 12px; }
.bb-row { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 10px; align-items: center; padding: 6px 0; }
.bb-row span { font-size: 12.5px; color: var(--dsb-ink-dim); white-space: nowrap; }
.bb-row i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg,#ff7838,#e8541a); }
.bb-row i.w25{width:25%} .bb-row i.w35{width:35%} .bb-row i.w45{width:45%} .bb-row i.w50{width:50%} .bb-row i.w60{width:60%} .bb-row i.w80{width:80%}
.bb-row b { font-family: var(--dsb-font-mono); font-size: 11px; color: var(--dsb-ink); }
.blurbox__over { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; background: rgba(8,20,33,.35); }
.blurbox__over svg { width: 22px; height: 22px; fill: none; stroke: var(--dsb-ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.blurbox__over p { margin: 0; font-size: 13px; color: var(--dsb-ink); max-width: 26ch; line-height: 1.55; font-weight: 500; }
.predikt { background: var(--dsb-navy-800); border: 1px solid rgba(255,107,44,.4); border-radius: var(--dsb-radius-md); padding: 14px 16px; }
.predikt__k { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dsb-orange); }
.predikt__v { font-size: 13px; color: var(--dsb-ink-dim); margin-top: 6px; line-height: 1.5; }
.predikt__v b { color: var(--dsb-ink); }
.predikt__more { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--dsb-line); font-family: var(--dsb-font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--dsb-ink-faint); }
.predikt__more svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.75; flex: none; }
/* ───────── vraag-band: stijl gedeeld met .spits-band hierboven ───────── */
/* detail: module-chips per brug */
.md-mods { margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--dsb-line); }
.md-mods .k { font-family: var(--dsb-font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.md-mods .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.md-mod {
display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
font-family: var(--dsb-font-mono); font-size: 11px; letter-spacing: .03em; color: var(--dsb-ink-dim);
background: var(--dsb-navy-700); border: 1px solid var(--dsb-line); border-radius: 100px; padding: 7px 13px;
transition: border-color .24s ease, color .24s ease;
}
.md-mod:hover { border-color: rgba(255,107,44,.5); color: var(--dsb-ink); }
.md-mod svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.75; flex: none; }
.md-mods .s { display: block; margin-top: 9px; font-size: 11.5px; color: var(--dsb-ink-faint); }
body.light .mod, body.light .blurbox, body.light .predikt { background: #fff; }
body.light .blurbox__over { background: rgba(249,245,241,.4); }
body.light .vraag-band { background: #062A4A; }
body.light .md-mod { background: #fff; }
/* ───────── planning vs werkelijkheid ───────── */
.pvw { margin-top: 34px; }
.pvw__lead { margin-bottom: 16px; }
.pvw__lead h3 { font-family: var(--dsb-font-display); font-weight: 700; font-size: clamp(19px, 2.4vw, 24px); margin: 8px 0 0; letter-spacing: -.01em; color: var(--dsb-ink); text-wrap: pretty; }
.pvw__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pvw__col { background: var(--dsb-navy-800); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-lg); padding: 22px 24px; }
.pvw__col.met { border-color: rgba(255,107,44,.4); border-top: 2px solid var(--dsb-orange); }
.pvw__h { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.pvw__col.met .pvw__h { color: var(--dsb-orange); }
.pvw__big { font-family: var(--dsb-font-display); font-weight: 800; font-size: 38px; line-height: 1.05; margin-top: 12px; color: var(--dsb-ink-dim); letter-spacing: -.02em; }
.pvw__col.met .pvw__big { color: var(--dsb-orange); font-variant-numeric: tabular-nums; }
.pvw__sub { font-family: var(--dsb-font-mono); font-size: 11px; letter-spacing: .04em; color: var(--dsb-ink-faint); margin-top: 4px; }
.pvw__col p { margin: 14px 0 0; font-size: 13.5px; color: var(--dsb-ink-dim); line-height: 1.65; text-wrap: pretty; }
.pvw__col.met p { color: var(--dsb-ink); }
.pvw__foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 16px; padding: 16px 20px; background: var(--dsb-navy-800); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-lg); }
.pvw__foot span { font-size: 13.5px; color: var(--dsb-ink); font-weight: 500; max-width: 60ch; line-height: 1.6; }
body.light .pvw__col, body.light .pvw__foot { background: #fff; }
@media (max-width: 860px) {
.scen, .roi { grid-template-columns: 1fr; }
/* vergelijking als veegbare vensters */
.compare__hint { display: block; }
.compare__grid {
grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%;
overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
margin: 0 -18px; padding: 4px 18px 16px; scrollbar-width: none;
}
.compare__grid::-webkit-scrollbar { display: none; }
.cmp { scroll-snap-align: center; }
.mods { grid-template-columns: 1fr; }
.pvw__cols { grid-template-columns: 1fr; }
.voorwie__grid { grid-template-columns: 1fr; }
.cmpt th { padding: 11px 8px; font-size: 9px; }
.cmpt td { padding: 9px 8px; font-size: 12.5px; }
.cmpt-wrap { overflow-x: auto; }
.cmpt { min-width: 480px; }
}
/* ───────── bruggen ───────── */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 0 16px; gap: 16px; }
.section-head h2 { font-family: var(--dsb-font-display); font-weight: 700; font-size: 18px; margin: 0; letter-spacing: -.01em; }
.section-head .note { font-size: 12.5px; color: var(--dsb-ink-faint); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(388px, 1fr)); gap: 18px; padding-bottom: 60px; }
.bridge {
background: var(--dsb-navy-800); border: 1px solid var(--dsb-line);
border-radius: var(--dsb-radius-lg); padding: 18px 18px 16px;
display: flex; flex-direction: column; transition: border-color .4s ease, box-shadow .4s ease; cursor: pointer;
}
.bridge:hover { border-color: var(--dsb-ink-faint); }
body.plus .bridge[data-health="afwijkend"] { border-color: rgba(255,107,44,.4); }
body.plus .bridge[data-health="letop"] { border-color: rgba(244,183,64,.32); }
.bridge__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bridge__type { font-family: var(--dsb-font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.bridge__name { font-family: var(--dsb-font-display); font-weight: 700; font-size: 19px; margin: 5px 0 3px; letter-spacing: -.01em; }
.bridge__owner { font-size: 12.5px; color: var(--dsb-ink-dim); }
.bridge__badges { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; }
.dsb-badge, .dsb-health { font-weight: 500; text-transform: lowercase; white-space: nowrap; }
.bridge__meta { display: flex; gap: 16px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--dsb-line); }
.bridge__meta div { display: flex; flex-direction: column; gap: 3px; }
.bridge__meta .k { font-family: var(--dsb-font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.bridge__meta .v { font-family: var(--dsb-font-mono); font-size: 12.5px; color: var(--dsb-ink-dim); }
/* locked (zonder) */
.locked {
margin-top: 14px; border: 1px dashed var(--dsb-line); border-radius: var(--dsb-radius-md);
padding: 18px; text-align: center; color: var(--dsb-ink-faint);
font-family: var(--dsb-font-mono); font-size: 11px; letter-spacing: .06em;
display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.locked svg { width: 18px; height: 18px; opacity: .5; }
body.met .locked { display: none; }
/* extra (met): animated reveal */
.extra { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2,.7,.25,1); }
body.met .extra { grid-template-rows: 1fr; }
.extra__inner { overflow: hidden; opacity: 0; transform: translateY(6px); transition: opacity .4s ease .12s, transform .4s ease .12s; }
body.met .extra__inner { opacity: 1; transform: none; }
body:not(.met) .extra { display: none; }
/* trend-sparkline (DSB Basis, niveau 1+) */
.spark { margin-top: 12px; background: var(--dsb-navy-900); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-sm); padding: 10px 12px 8px; }
.spark__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 6px; }
.spark__cap .k { font-family: var(--dsb-font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.spark__cap .v { font-family: var(--dsb-font-mono); font-size: 10.5px; color: var(--dsb-ink-dim); }
.spark__cap .v b { color: var(--dsb-ink); font-weight: 600; }
.spark__delta.meer { color: var(--dsb-orange); }
.spark__delta.minder { color: var(--dsb-ok); }
.spark svg { display: block; width: 100%; height: 40px; }
body.light .spark { background: var(--dsb-cream, #F9F5F1); }
.profile { margin-top: 15px; }
.profile__cap { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.profile__cap .t { font-family: var(--dsb-font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.profile__cap .legend { display: flex; gap: 12px; }
.profile__cap .legend span { display: inline-flex; align-items: center; gap: 5px; font-family: var(--dsb-font-mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.profile__cap .legend i { width: 12px; height: 2px; border-radius: 2px; }
.profile svg { width: 100%; height: 96px; display: block; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 13px; }
.metric { background: var(--dsb-navy-900); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-md); padding: 10px 11px; display: flex; flex-direction: column; }
.metric .k { font-family: var(--dsb-font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.metric .v { font-family: var(--dsb-font-display); font-weight: 800; font-size: 19px; margin-top: auto; padding-top: 6px; line-height: 1; }
.metric .v u { font-style: normal; text-decoration: none; font-size: 11px; font-weight: 500; color: var(--dsb-ink-faint); font-family: var(--dsb-font-body); margin-left: 1px; }
.ctx { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.ctx__card { background: var(--dsb-navy-900); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-md); padding: 11px 12px; display: flex; align-items: center; gap: 11px; }
.ctx__card svg { width: 19px; height: 19px; color: var(--dsb-blue); flex-shrink: 0; }
.ctx__card.traffic svg { color: var(--dsb-ink-dim); }
.ctx__card.ship svg, .ctx__card.ov svg { color: var(--dsb-ink-dim); }
.ctx__card.water svg { color: var(--dsb-blue); }
.ctx__card .ctx-buien { margin-top: 4px; font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .05em; color: var(--dsb-ink-faint); }
.ctx__v--lock { display: inline-flex; align-items: center; gap: 6px; color: var(--dsb-ink-faint); font-weight: 600; }
.ctx__v--lock svg { width: 13px; height: 13px; color: var(--dsb-ink-faint); }
.ctx--3 { grid-template-columns: 1fr 1fr 1fr; }
.live-groen { color: var(--dsb-ok); }
.md-zon { margin-top: 9px; font-family: var(--dsb-font-mono); font-size: 10.5px; letter-spacing: .05em; color: var(--dsb-ink-faint); }
.md-windwarn { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; background: rgba(201,138,27,.09); border: 1px solid rgba(201,138,27,.4); border-radius: var(--dsb-radius-sm); padding: 12px 14px; font-size: 13px; color: var(--dsb-ink-dim); line-height: 1.55; }
.md-windwarn svg { width: 18px; height: 18px; flex: none; color: var(--dsb-amber); }
.md-windwarn b { color: var(--dsb-ink); }
.md-windwarn .bron { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .06em; color: var(--dsb-ink-faint); }
.md-knmiwarn.knmi-oranje { background: rgba(218,86,18,.10); border-color: rgba(218,86,18,.45); }
.md-knmiwarn.knmi-oranje svg, .md-knmiwarn.knmi-rood svg { color: var(--dsb-orange); }
.md-knmiwarn.knmi-rood { background: rgba(201,42,42,.12); border-color: rgba(201,42,42,.5); }
.md-knmiwarn.knmi-rood b { color: var(--dsb-ink); }
.md-meldingen { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.meld { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--dsb-ink-dim); }
.meld i { width: 8px; height: 8px; border-radius: 50%; background: var(--dsb-amber); flex: none; }
.meld.ok i { background: var(--dsb-ok); }
.meld b { color: var(--dsb-ink); font-weight: 600; }
.meld-bron { font-family: var(--dsb-font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.meld-gepland { margin-top: 8px; padding-top: 9px; border-top: 1px dashed var(--dsb-line); display: flex; flex-direction: column; gap: 6px; }
.meld-gepland__h { font-family: var(--dsb-font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.meld.gepl i { background: var(--dsb-blue); }
.dsb-monument { background: rgba(201,138,27,.14); color: var(--dsb-amber); border: 1px solid rgba(201,138,27,.4); }
.ctx__body { min-width: 0; }
.ctx__k { font-family: var(--dsb-font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.ctx__v { font-family: var(--dsb-font-mono); font-size: 12px; color: var(--dsb-ink-dim); margin-top: 3px; }
.ctx__v b { color: var(--dsb-ink); font-weight: 600; }
.predict {
margin-top: 11px; border-radius: var(--dsb-radius-md); padding: 12px 14px;
display: flex; gap: 12px; align-items: flex-start;
background: rgba(244,183,64,.07); border: 1px solid rgba(244,183,64,.22);
}
.predict[data-sev="afwijkend"] { background: rgba(255,107,44,.08); border-color: rgba(255,107,44,.3); }
.predict__ico { flex-shrink: 0; margin-top: 1px; }
.predict__ico svg { width: 18px; height: 18px; color: var(--dsb-amber); }
.predict[data-sev="afwijkend"] .predict__ico svg { color: var(--dsb-orange); }
.predict__k { font-family: var(--dsb-font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dsb-amber); }
.predict[data-sev="afwijkend"] .predict__k { color: var(--dsb-orange); }
.predict__msg { font-size: 13px; color: var(--dsb-ink); margin-top: 4px; line-height: 1.5; }
.predict__msg b { font-family: var(--dsb-font-mono); font-weight: 600; }
/* flash on live update */
.flash { animation: flashOrange .9s ease; }
@keyframes flashOrange { 0%{color:var(--dsb-orange)} 100%{} }
/* commerciële secties (CTA, aanpak, vertrouwen, over ons) */
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; justify-content: center; }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-family: var(--dsb-font-display); font-weight: 700; font-size: 15px; color: #fff; background: var(--dsb-orange); border: 1px solid var(--dsb-orange); border-radius: var(--dsb-radius-sm); padding: 13px 22px; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(218,86,18,.28); }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-family: var(--dsb-font-display); font-weight: 600; font-size: 15px; color: var(--dsb-ink); background: transparent; border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-sm); padding: 13px 22px; transition: border-color .2s; }
.btn-ghost:hover { border-color: var(--dsb-ink-faint); }
.lead-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--dsb-navy-900); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-md); padding: 22px 26px; }
.lead-strip p { margin: 6px 0 0; max-width: 62ch; color: var(--dsb-ink-dim); line-height: 1.6; }
.lead-strip .btn-primary { flex: none; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.step { background: var(--dsb-navy-900); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-md); padding: 22px; }
.step__n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--dsb-orange); color: #fff; font-family: var(--dsb-font-mono); font-weight: 600; font-size: 14px; }
.step h3 { margin: 14px 0 6px; font-size: 18px; }
.step p { margin: 0; color: var(--dsb-ink-dim); line-height: 1.6; }
.steps__cta { margin-top: 18px; }
.trust { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.trust__card { background: var(--dsb-navy-900); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-md); padding: 20px; }
.trust__card svg { width: 22px; height: 22px; color: var(--dsb-orange); }
.trust__card h3 { margin: 12px 0 6px; font-size: 15.5px; }
.trust__card p { margin: 0; font-size: 13.5px; color: var(--dsb-ink-dim); line-height: 1.55; }
.over__lead { max-width: 70ch; color: var(--dsb-ink-dim); line-height: 1.8; font-size: 16px; margin: 0 0 24px; }
.team { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.team__card { display: flex; align-items: center; gap: 14px; background: var(--dsb-navy-900); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-md); padding: 16px; }
.team__ph { width: 52px; height: 52px; border-radius: 50%; background: var(--dsb-navy-700); display: grid; place-items: center; color: var(--dsb-ink-faint); font-family: var(--dsb-font-mono); font-size: 22px; flex: none; }
.team__nm { font-weight: 700; }
.team__role { font-size: 13px; color: var(--dsb-ink-dim); }
body.light .step, body.light .trust__card, body.light .team__card, body.light .lead-strip { background: #faf7f2; }
@media (max-width: 860px){ .steps, .trust, .team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .steps, .trust, .team { grid-template-columns: 1fr; } .lead-strip .btn-primary { width: 100%; justify-content: center; } }
footer { border-top: 1px solid var(--dsb-line); padding: 26px 0 46px; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot__src { font-family: var(--dsb-font-mono); font-size: 11px; color: var(--dsb-ink-faint); letter-spacing: .04em; line-height: 1.7; }
.foot__tag { font-family: var(--dsb-font-display); font-weight: 600; font-size: 13px; color: var(--dsb-ink-dim); display: flex; align-items: center; gap: 9px; }
.foot__tag .hb { width: 8px; height: 8px; border-radius: 50%; background: var(--dsb-orange); }
/* ───────── contact-cta ───────── */
.cta {
display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;
background:
radial-gradient(560px 280px at 12% 50%, rgba(255,107,44,.13), transparent 70%),
#04101D;
border: 1px solid rgba(255,255,255,.1); border-radius: var(--dsb-radius-xl, 16px);
padding: 34px 38px; margin: 34px 0 10px;
}
.cta__pulse { width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(255,107,44,.35); display: grid; place-items: center; flex: none; }
.cta__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--dsb-orange); box-shadow: 0 0 0 0 rgba(255,107,44,.5); animation: pulse-o 1.8s ease-out infinite; }
.cta__txt h2 { font-family: var(--dsb-font-display); font-weight: 800; font-size: 26px; margin: 8px 0 8px; letter-spacing: -.01em; color: #F4F7FA; }
.cta__txt p { margin: 0; max-width: 64ch; font-size: 14.5px; line-height: 1.7; color: rgba(232,237,242,.78); text-wrap: pretty; }
.cta__acts { display: flex; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.cta__btn {
display: inline-flex; align-items: center; font-family: var(--dsb-font-display); font-weight: 700; font-size: 14px;
background: linear-gradient(180deg,#ff7838,#e8541a); color: #fff; text-decoration: none;
border-radius: var(--dsb-radius-sm); padding: 12px 22px;
transition: transform .24s cubic-bezier(.2,.7,.25,1), box-shadow .24s ease;
}
.cta__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,107,44,.3); }
.cta__link { font-family: var(--dsb-font-mono); font-size: 12px; letter-spacing: .04em; color: rgba(232,237,242,.6); text-decoration: none; border-bottom: 1px solid rgba(232,237,242,.25); padding-bottom: 2px; }
.cta__link:hover { color: #F4F7FA; }
body.light .cta { background: radial-gradient(560px 280px at 12% 50%, rgba(255,107,44,.18), transparent 70%), #062A4A; border-color: transparent; }
@media (max-width: 720px) {
.cta { grid-template-columns: 1fr; padding: 26px 22px; gap: 16px; }
.cta__pulse { display: none; }
}
@media (max-width: 720px) {
.wrap { padding: 0 18px; }
.spits-band .nr, .vraag-band .nr { border-right: none; padding-right: 0; min-width: 0; text-align: left; }
.top__row { gap: 10px; height: 60px; }
.brand { gap: 9px; }
.brand svg { width: 34px; }
.brand__tag { display: none; }
.switch-mini__opt { padding: 6px 10px; font-size: 11px; }
.hero__panel { grid-template-columns: 1fr; }
.heartbeat { width: 100%; max-width: 100%; }
.grid { grid-template-columns: 1fr; }
.metrics { grid-template-columns: repeat(2, 1fr); }
.sync { display: none; }
.switch-mini__opt { padding: 6px 13px; }
.mapframe__layout { grid-template-columns: 1fr; }
.switch__opt { padding: 11px 6px; font-size: 11px; }
.switch__opt small { font-size: 8px; }
.missen { gap: 6px 14px; }
.map { min-height: 360px; }
.mappanel { max-height: none; }
.md-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
.brand__txt { display: none; }
.top__row { gap: 8px; }
.switch-mini__opt { padding: 6px 8px; font-size: 10.5px; letter-spacing: 0; }
.mini-heart { display: none; }
}
/* ───────── 'nu open' banner ───────── */
.dev-band { background: rgba(244,183,64,.10); border-bottom: 1px solid rgba(244,183,64,.30); }
.dev-band .wrap { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.dev-band__dot { width: 8px; height: 8px; border-radius: 50%; background: #f4b740; flex: 0 0 auto; }
.dev-band__tx { font-family: var(--dsb-font-mono); font-size: 11px; letter-spacing: .03em; color: var(--dsb-ink-dim); line-height: 1.5; }
.dev-band__tx b { color: var(--dsb-ink); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.nu-band { padding: 18px 0 0; }
.nu-open {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
background: rgba(255,107,44,.08); border: 1px solid rgba(255,107,44,.24);
border-radius: var(--dsb-radius-lg); padding: 13px 18px;
}
.nu-open__lead { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nu-open__leadbtn { width: 100%; background: none; border: none; padding: 0; cursor: pointer; text-align: left; font: inherit; }
.nu-open__chev { margin-left: auto; font-family: var(--dsb-font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--dsb-orange); white-space: nowrap; }
.nu-open:not(.uitgeklapt) .nu-open__hint, .nu-open:not(.uitgeklapt) .nu-open__list { display: none; }
.nu-open__pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--dsb-orange); box-shadow: 0 0 0 0 rgba(255,107,44,.5); animation: pulse-o 1.8s ease-out infinite; }
@keyframes pulse-o { 0%{box-shadow:0 0 0 0 rgba(255,107,44,.5)} 70%{box-shadow:0 0 0 8px rgba(255,107,44,0)} 100%{box-shadow:0 0 0 0 rgba(255,107,44,0)} }
.nu-open__lead b { font-family: var(--dsb-font-display); font-weight: 800; font-size: 15px; color: var(--dsb-ink); }
.nu-open__lead span { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dsb-orange); }
.nu-open__hint { flex-basis: 100%; font-size: 12px; color: var(--dsb-ink-dim); line-height: 1.5; margin: -4px 0 2px; }
.nu-open__hint b { color: var(--dsb-ink); font-weight: 600; }
.nu-open__list { display: flex; gap: 10px; flex-wrap: wrap; flex-basis: 100%; }
.nu-open__list--grp { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; align-items: start; }
.nu-grp { background: rgba(255,255,255,.04); border: 1px solid rgba(255,107,44,.18); border-radius: var(--dsb-radius-md); padding: 11px 12px; min-width: 0; }
.nu-grp__lbl { display: block; margin-bottom: 8px; font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.nu-grp__chips { display: flex; flex-direction: column; gap: 6px; }
.nu-grp .nu-chip { width: 100%; justify-content: space-between; }
.nu-grp .nu-chip b { min-width: 0; }
.nu-grp .nu-chip span { flex: none; white-space: nowrap; }
.nu-open__list--grp .nu-more { align-self: center; justify-self: start; }
.nu-chip { display: flex; align-items: center; gap: 9px; background: var(--dsb-navy-800); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-md); padding: 7px 12px; cursor: pointer; transition: border-color .25s ease; }
.nu-chip:hover { border-color: var(--dsb-orange); }
.nu-chip b { font-family: var(--dsb-font-body); font-weight: 600; font-size: 13px; color: var(--dsb-ink); }
.nu-chip span { font-family: var(--dsb-font-mono); font-size: 11px; color: var(--dsb-ink-dim); }
.nu-chip span u { font-style: normal; text-decoration: none; color: var(--dsb-ink-faint); }
/* ───────── voorproefje / cliffhangers ───────── */
.cliffs { padding-top: 26px; padding-bottom: 6px; }
.hitte-band { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; background: rgba(201,138,27,.09); border: 1px solid rgba(201,138,27,.4); border-radius: var(--dsb-radius-lg); padding: 14px 18px; font-size: 13.5px; color: var(--dsb-ink-dim); line-height: 1.6; }
.hitte-band svg { width: 18px; height: 18px; flex: none; color: var(--dsb-amber); margin-top: 2px; }
.hitte-band b { color: var(--dsb-ink); }
.hitte-band a { color: var(--dsb-orange); font-family: var(--dsb-font-mono); font-size: 11px; letter-spacing: .05em; text-decoration: none; }
.cliff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cliff { position: relative; display: block; background: var(--dsb-navy-800); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-lg); padding: 20px 22px; text-decoration: none; color: inherit; transition: border-color .24s ease, transform .24s cubic-bezier(.2,.7,.25,1); }
.cliff:hover { border-color: rgba(255,107,44,.5); transform: translateY(-1px); }
.cliff__lock { position: absolute; top: 15px; right: 15px; width: 15px; height: 15px; color: var(--dsb-ink-faint); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.cliff__k { font-family: var(--dsb-font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.cliff b.t { display: block; margin-top: 9px; font-family: var(--dsb-font-display); font-weight: 700; font-size: 15.5px; color: var(--dsb-ink); line-height: 1.35; text-wrap: pretty; }
.cliff__val { margin-top: 10px; font-family: var(--dsb-font-display); font-weight: 800; font-size: 21px; color: var(--dsb-orange); }
.blurv { filter: blur(6px); user-select: none; pointer-events: none; }
.cliff p { margin: 9px 0 0; font-size: 12.5px; color: var(--dsb-ink-dim); line-height: 1.55; }
.cliff__cta { display: inline-block; margin-top: 12px; font-family: var(--dsb-font-mono); font-size: 11px; letter-spacing: .05em; color: var(--dsb-orange); }
.cliff__bars { display: flex; gap: 8px; align-items: flex-end; height: 44px; margin-top: 12px; }
.cliff__bars i { width: 26px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg,#ff7838,#e8541a); filter: blur(5px); }
.cliff__bars i.grijs { background: var(--dsb-ink-faint); }
.cliff__lines { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.cliff__lines i { display: block; height: 7px; border-radius: 3px; background: var(--dsb-ink-faint); opacity: .45; filter: blur(3px); }
body.light .cliff { background: #fff; }
@media (max-width: 980px) { .cliff-grid { grid-template-columns: 1fr; } }
/* ───────── vergelijking ───────── */
.compare { padding-top: 16px; padding-bottom: 6px; }
.compare__lead { margin-bottom: 16px; }
.compare__lead h2 { font-family: var(--dsb-font-display); font-weight: 700; font-size: 20px; margin: 8px 0 6px; letter-spacing: -.01em; }
.compare__lead p { color: var(--dsb-ink-dim); font-size: 14px; max-width: 620px; margin: 0; line-height: 1.6; }
.compare__hint { display: none; font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dsb-orange); margin-top: 10px; }
.compare__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: stretch; position: relative; }
.cmp { background: var(--dsb-navy-800); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-lg); padding: 20px 22px; transition: border-color .4s ease, box-shadow .4s ease; }
.cmp--t1, .cmp--t2 { border-top: 2px solid var(--dsb-orange); }
/* actieve kolom licht op met de schakelaar, net als de selectieknop */
body.t0 .cmp--t0, body.t1 .cmp--t1, body.t2 .cmp--t2 { box-shadow: 0 0 0 1px var(--dsb-orange), 0 8px 26px rgba(255,107,44,.14); border-color: rgba(255,107,44,.5); }
body.t0 .cmp--t0 { box-shadow: 0 0 0 1px var(--dsb-ink-faint); border-color: var(--dsb-ink-faint); }
.cmp__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.cmp__head h3 { font-family: var(--dsb-font-display); font-weight: 700; font-size: 15px; margin: 0; white-space: nowrap; }
.cmp--t1 .cmp__head h3, .cmp--t2 .cmp__head h3 { color: var(--dsb-orange); }
.cmp__head .tag { font-family: var(--dsb-font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.cmp__list { display: flex; flex-direction: column; gap: 1px; }
.cmp__row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--dsb-line); }
.cmp__row:last-child { border-bottom: none; }
.cmp__row svg { width: 16px; height: 16px; flex-shrink: 0; }
.cmp--t0 .cmp__row svg { color: var(--dsb-ink-dim); }
.cmp--t1 .cmp__row svg, .cmp--t2 .cmp__row svg { color: var(--dsb-orange); }
.cmp__row.off svg { color: var(--dsb-ink-faint); opacity: .4; }
.cmp__row.off span { color: var(--dsb-ink-faint); }
.cmp__row span { font-size: 13.5px; color: var(--dsb-ink); }
.cmp__row .sub { font-size: 12px; color: var(--dsb-ink-faint); margin-left: auto; font-family: var(--dsb-font-mono); }
.cmp__meer { display: block; margin-top: 12px; padding: 11px 14px; border: 1px dashed rgba(255,107,44,.5); border-radius: var(--dsb-radius-sm); text-align: center; font-family: var(--dsb-font-display); font-weight: 700; font-size: 12.5px; color: var(--dsb-orange); text-decoration: none; transition: background .24s ease; }
.cmp__meer:hover { background: rgba(255,107,44,.08); }
/* ───────── kaart ───────── */
.mapsec { padding-top: 22px; padding-bottom: 6px; }
.mapframe { background: var(--dsb-navy-800); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-lg); overflow: hidden; }
.mapframe__top { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--dsb-line); gap: 14px; }
.mapframe__top h3 { font-family: var(--dsb-font-display); font-weight: 700; font-size: 15px; margin: 0; }
.mapframe__top .sub { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dsb-ink-faint); margin-top: 3px; }
.mapframe__layout { display: grid; grid-template-columns: minmax(320px, 440px) 1fr; }
.map { position: relative; background: var(--dsb-navy-900); border-right: 1px solid var(--dsb-line); min-height: 480px; }
.map #map { position: absolute; inset: 0; z-index: 1; }
.leaflet-container { background: #0d2233; font-family: var(--dsb-font-body); }
body.light .leaflet-container { background: #e9e4dc; }
.map .leaflet-control-zoom a { background: var(--dsb-navy-800); color: var(--dsb-ink); border-color: var(--dsb-line); }
.map .leaflet-control-zoom a:hover { background: var(--dsb-navy-700); }
body.light .map .leaflet-control-zoom a { background: #fff; color: #0a2540; }
.map .leaflet-control-attribution { background: rgba(0,0,0,.35); color: rgba(255,255,255,.55); font-size: 9px; }
body.light .map .leaflet-control-attribution { background: rgba(255,255,255,.6); color: rgba(10,37,64,.55); }
/* donkere modus voor de PDOK water-kaart: tint alleen de basis-tegels
(niet de luchtfoto, niet de labels, niet de pins) zodat water blauw blijft */
body:not(.light) .map:not(.lucht-on) .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.96) saturate(.82); }
.lf-num { width: 26px; height: 26px; border-radius: 50%; background: var(--dsb-navy-900); border: 2px solid var(--dsb-orange); color: #fff; display: grid; place-items: center; font-family: var(--dsb-font-mono); font-size: 10px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
body.light .lf-num { background: #fff; color: #0a2540; }
.lf-tip { background: var(--dsb-navy-900); color: var(--dsb-ink); border: 1px solid var(--dsb-line); border-radius: 6px; font-size: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.3); padding: 6px 10px; }
.lf-tip::before { display: none; }
body.light .lf-tip { background: #fff; color: #0a2540; }
.map .grat { stroke: var(--dsb-line); stroke-width: 1; opacity: .5; }
.map .grat.dash { stroke-dasharray: 2 5; }
.map .vaarweg { stroke: var(--dsb-blue); stroke-width: 2.5; opacity: .22; fill: none; stroke-linecap: round; }
.map .city { font-family: var(--dsb-font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; fill: var(--dsb-ink-faint); }
.map .sea { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; fill: var(--dsb-blue); opacity: .4; }
.pin { cursor: pointer; }
.pin__tile { fill: var(--dsb-navy-700); stroke-width: 2; }
.pin__num { font-family: var(--dsb-font-mono); font-size: 11px; font-weight: 600; fill: var(--dsb-ink); text-anchor: middle; }
.pin__ring { fill: none; stroke-width: 2; opacity: 0; transition: opacity .4s ease; }
body.plus .pin__ring { opacity: 1; }
.pin__pulse { fill: none; stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pin__pulse.live { opacity: 1; animation: pinpulse 1.8s ease-out infinite; }
@keyframes pinpulse { 0%{ r:16; opacity:.6 } 100%{ r:30; opacity:0 } }
.pin:hover .pin__tile { fill: var(--dsb-navy-800); }
.mappanel { padding: 6px 4px; overflow-y: auto; max-height: 480px; }
.map-item { display: grid; grid-template-columns: 22px 12px 1fr auto; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--dsb-line); cursor: pointer; transition: background .2s ease; }
.map-item:hover { background: var(--dsb-navy-900); }
.map-item__no { font-family: var(--dsb-font-mono); font-size: 11px; font-weight: 600; color: var(--dsb-ink-faint); width: 18px; flex-shrink: 0; }
.map-item__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.map-item__body { min-width: 0; flex: 1; }
.map-item__nm { display: block; font-size: 13.5px; font-weight: 500; color: var(--dsb-ink); }
.map-item__sub { display: block; font-family: var(--dsb-font-mono); font-size: 10.5px; color: var(--dsb-ink-faint); margin-top: 2px; }
.map-item__health { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; opacity: 0; transition: opacity .3s ease; }
body.plus .map-item__health { opacity: 1; }
.map-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; padding: 13px 20px; background: var(--dsb-navy-900); border-top: 1px solid var(--dsb-line); }
.map-legend span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--dsb-ink-dim); }
.map-legend i { width: 10px; height: 10px; border-radius: 50%; }
.map-summary { padding: 16px 18px; display: flex; flex-direction: column; gap: 13px; border-top: 1px solid var(--dsb-line); }
.map-summary > div { display: flex; flex-direction: column; gap: 5px; }
.msum-k { font-family: var(--dsb-font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.msum-v { font-family: var(--dsb-font-mono); font-size: 12.5px; color: var(--dsb-ink-dim); }
/* provincie-filter + paneel */
.mapframe__tools { display: flex; align-items: center; gap: 14px; }
.map-prov { font-family: var(--dsb-font-mono); font-size: 11px; letter-spacing: .02em; color: var(--dsb-ink); background: var(--dsb-navy-900); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-sm); padding: 7px 30px 7px 12px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238597a8' stroke-width='1.4' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
.map-prov:focus { outline: none; border-color: var(--dsb-orange); }
.lucht-btn { font-family: var(--dsb-font-mono); font-size: 11px; letter-spacing: .04em; color: var(--dsb-ink-dim); background: var(--dsb-navy-900); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-sm); padding: 7px 12px; cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.lucht-btn:hover { color: var(--dsb-ink); border-color: var(--dsb-ink-faint); }
.lucht-btn.on { color: #fff; background: var(--dsb-orange); border-color: var(--dsb-orange); }
.mdot { cursor: pointer; }
.mdot__c { transition: r .2s ease; }
.mdot:hover .mdot__c { r: 5; }
.mdot__pulse { fill: none; stroke-width: 1.3; opacity: .55; transform-box: fill-box; transform-origin: center; animation: pinpulse 1.8s ease-out infinite; }
.mdot__off { opacity: .35; }
.mp-head { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--dsb-line); position: sticky; top: 0; background: var(--dsb-navy-800); z-index: 2; }
.mp-head__t { display: flex; flex-direction: column; gap: 2px; }
.mp-head__t b { font-family: var(--dsb-font-display); font-size: 14px; white-space: nowrap; }
.mp-head__t span { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .04em; color: var(--dsb-ink-faint); white-space: nowrap; }
.mp-back { font-family: var(--dsb-font-mono); font-size: 11px; color: var(--dsb-ink-dim); background: var(--dsb-navy-900); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-sm); padding: 7px 12px; cursor: pointer; flex-shrink: 0; white-space: nowrap; transition: color .2s ease, border-color .2s ease; }
.mp-back:hover { color: var(--dsb-ink); border-color: var(--dsb-ink-faint); }
.mp-empty { padding: 26px 18px; font-family: var(--dsb-font-mono); font-size: 12px; color: var(--dsb-ink-faint); text-align: center; }
.prov-row { display: grid; grid-template-columns: 1fr auto 30px 14px; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--dsb-line); cursor: pointer; transition: background .2s ease; }
.prov-row:hover { background: var(--dsb-navy-900); }
.prov-row__nm { font-size: 13.5px; font-weight: 500; color: var(--dsb-ink); }
.prov-row__stat { display: inline-flex; gap: 11px; }
.prov-row__stat span { display: inline-flex; align-items: center; gap: 5px; font-family: var(--dsb-font-mono); font-size: 11px; color: var(--dsb-ink-dim); }
.prov-row__stat i { width: 8px; height: 8px; border-radius: 50%; }
.prov-row__ct { font-family: var(--dsb-font-mono); font-size: 12.5px; font-weight: 600; color: var(--dsb-ink); text-align: right; }
.prov-row__arr { font-family: var(--dsb-font-display); font-size: 16px; color: var(--dsb-ink-faint); text-align: center; }
/* ───────── detail modal ───────── */
.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 28px; }
.modal.open { display: flex; }
.modal__scrim { position: absolute; inset: 0; background: rgba(6,24,41,.62); animation: fade .24s ease; }
body.light .modal__scrim { background: rgba(10,37,64,.42); }
@keyframes fade { from{opacity:0} to{opacity:1} }
.modal__panel {
position: relative; width: min(900px, 100%); max-height: 90vh; overflow-y: auto;
background: var(--dsb-navy-800); border: 1px solid var(--dsb-line);
border-radius: var(--dsb-radius-lg); box-shadow: 0 24px 80px rgba(0,0,0,.5);
animation: rise .28s cubic-bezier(.2,.7,.25,1);
}
@keyframes rise { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
.modal__close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: var(--dsb-radius-sm); background: var(--dsb-navy-700); border: 1px solid var(--dsb-line); color: var(--dsb-ink-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; }
.modal__close:hover { color: var(--dsb-ink); }
.modal__close svg { width: 18px; height: 18px; }
.md-head { padding: 24px 26px 18px; border-bottom: 1px solid var(--dsb-line); }
.md-head .type { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.md-head h2 { font-family: var(--dsb-font-display); font-weight: 800; font-size: 26px; margin: 6px 0 4px; letter-spacing: -.015em; }
.md-head .owner { font-size: 13.5px; color: var(--dsb-ink-dim); }
.md-head .badges { display: flex; gap: 8px; margin-top: 12px; }
.md-body { padding: 22px 26px 26px; }
.md-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 6px; }
.md-fact { background: var(--dsb-navy-900); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-md); padding: 11px 13px; }
.md-fact .k { font-family: var(--dsb-font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.md-fact .v { font-family: var(--dsb-font-mono); font-size: 13px; color: var(--dsb-ink); margin-top: 5px; }
.md-section { margin-top: 22px; }
.md-section__h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.md-section__h .t { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.md-section__h .line { flex: 1; height: 1px; background: var(--dsb-line); }
.md-locked { background: var(--dsb-navy-900); border: 1px dashed var(--dsb-line); border-radius: var(--dsb-radius-md); padding: 26px; text-align: center; }
.md-locked .ic { color: var(--dsb-ink-faint); }
.md-locked .ic svg { width: 22px; height: 22px; }
.md-locked p { color: var(--dsb-ink-dim); font-size: 14px; margin: 12px 0 16px; line-height: 1.6; }
.md-locked button, .md-locked .md-cta { display: inline-block; font-family: var(--dsb-font-display); font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(180deg,#ff7838,#e8541a); border: none; border-radius: var(--dsb-radius-sm); padding: 11px 20px; cursor: pointer; text-decoration: none; }
.md-locked button:hover, .md-locked .md-cta:hover { filter: brightness(1.05); }
.md-bigprofile svg { width: 100%; height: 200px; display: block; }
/* detail: luchtfoto-kop, volgende-opening, DSB-scheiding */
.md-photo { position: relative; width: 100%; height: 230px; overflow: hidden; background: var(--dsb-navy-900); border-bottom: 1px solid var(--dsb-line); }
.md-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,24,41,.12) 0%, rgba(6,24,41,.34) 45%, rgba(10,28,46,.93) 100%); }
.md-photo__tag { position: absolute; top: 12px; right: 14px; z-index: 2; font-family: var(--dsb-font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.82); background: rgba(6,24,41,.5); padding: 5px 9px; border-radius: var(--dsb-radius-sm); }
.md-photo__head { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px 26px; }
.md-photo__head .type { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.md-photo__head h2 { font-family: var(--dsb-font-display); font-weight: 800; font-size: 26px; margin: 5px 0 4px; letter-spacing: -.015em; color: #fff; }
.md-photo__head .owner { font-size: 13px; color: rgba(255,255,255,.82); }
.md-photo__head .badges { display: flex; gap: 8px; margin-top: 11px; }
.md-photo.noimg { height: auto; background: var(--dsb-navy-800); border-bottom: 1px solid var(--dsb-line); }
.md-photo.noimg::after, .md-photo.noimg .md-photo__tag, .md-photo.noimg img { display: none; }
.md-photo.noimg .md-photo__head { position: static; padding: 24px 26px 16px; }
.md-photo.noimg .md-photo__head .type { color: var(--dsb-ink-faint); }
.md-photo.noimg .md-photo__head h2 { color: var(--dsb-ink); }
.md-photo.noimg .md-photo__head .owner { color: var(--dsb-ink-dim); }
.md-next { display: flex; align-items: center; gap: 12px; background: var(--dsb-navy-900); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-md); padding: 12px 14px; margin: 12px 0 2px; }
.md-next__ico { color: var(--dsb-orange); display: flex; flex-shrink: 0; }
.md-next__ico svg { width: 20px; height: 20px; }
.md-next__k { font-family: var(--dsb-font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.md-next__v { font-family: var(--dsb-font-mono); font-size: 13px; color: var(--dsb-ink-dim); margin-top: 3px; }
.md-next__v b { color: var(--dsb-ink); font-weight: 600; }
.md-section__h .t.orange { color: var(--dsb-orange); }
.md-section__h .line.orange { background: linear-gradient(90deg, var(--dsb-orange), transparent); opacity: .55; }
body.light .md-photo.noimg { background: #faf7f2; }
.md-anatomy { background: var(--dsb-navy-900); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-md); padding: 16px; }
.md-anatomy svg { width: 100%; height: 150px; display: block; }
/* objectpaspoort (RWS FIS) */
.pasp-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.pasp-fact { background: var(--dsb-navy-900); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-md); padding: 10px 12px; }
.pasp-fact.wide { grid-column: 1 / -1; }
.pasp-fact .k { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--dsb-ink-faint); }
.pasp-fact .v { font-size: 15px; color: var(--dsb-ink); margin-top: 3px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pasp-bed { margin-top: 9px; background: var(--dsb-navy-900); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-md); padding: 12px 14px; }
.pasp-bed__h { font-family: var(--dsb-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--dsb-ink-faint); margin-bottom: 7px; }
.pasp-bed__h span { color: var(--dsb-ink-dim); text-transform: none; letter-spacing: 0; }
.pasp-bed ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.pasp-bed li { font-size: 13px; color: var(--dsb-ink-dim); font-variant-numeric: tabular-nums; }
.pasp-contact { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 16px; font-family: var(--dsb-font-mono); font-size: 11.5px; color: var(--dsb-ink-dim); }
.pasp-contact b { color: var(--dsb-ink); }
.pasp-bijz { margin-top: 9px; font-size: 12.5px; line-height: 1.6; color: var(--dsb-ink-faint); }
.pasp-bron { margin-top: 10px; font-family: var(--dsb-font-mono); font-size: 9.5px; letter-spacing: .05em; color: var(--dsb-ink-faint); }
body.light .pasp-fact, body.light .pasp-bed { background: #faf7f2; }
@media (max-width: 640px){ .pasp-grid { grid-template-columns: repeat(2,1fr); } }
.anat-hot { fill: var(--dsb-orange); }
.anat-hot.ok { fill: var(--dsb-ok); }
.anat-line { stroke: var(--dsb-ink-faint); stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.anat-lbl { font-family: var(--dsb-font-mono); font-size: 8.5px; letter-spacing: .04em; fill: var(--dsb-ink-dim); }
.md-timeline { background: var(--dsb-navy-900); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-md); padding: 16px 18px; }
.tl-track { position: relative; height: 30px; border-radius: 5px; background: var(--dsb-navy-700); overflow: hidden; margin: 6px 0 8px; }
.tl-open { position: absolute; top: 0; bottom: 0; background: rgba(255,107,44,.6); }
.tl-axis { display: flex; justify-content: space-between; font-family: var(--dsb-font-mono); font-size: 9.5px; color: var(--dsb-ink-faint); }
.tl-meta { display: flex; gap: 18px; margin-top: 10px; font-family: var(--dsb-font-mono); font-size: 11px; color: var(--dsb-ink-dim); }
.tl-meta b { color: var(--dsb-ink); }
.md-heat { background: var(--dsb-navy-900); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-md); padding: 14px 16px; }
.heat-grid { display: grid; grid-template-columns: 28px repeat(24, 1fr); gap: 2px; align-items: center; }
.heat-hh { font-family: var(--dsb-font-mono); font-size: 8px; color: var(--dsb-ink-faint); text-align: center; }
.heat-dl { font-family: var(--dsb-font-mono); font-size: 9px; color: var(--dsb-ink-faint); text-transform: uppercase; }
.heat-c { aspect-ratio: 1 / 1; min-height: 12px; border-radius: 2px; }
.heat-legend { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-family: var(--dsb-font-mono); font-size: 9.5px; color: var(--dsb-ink-faint); }
.heat-legend i { width: 14px; height: 14px; border-radius: 2px; }
.heat-legend .g0 { background: var(--dsb-navy-900); border: 1px solid var(--dsb-line); }
.heat-legend .g1 { background: rgba(255,107,44,.28); }
.heat-legend .g2 { background: rgba(255,107,44,.5); }
.heat-legend .g3 { background: rgba(255,107,44,.72); }
.heat-legend .g4 { background: rgba(255,107,44,.95); }
.heat-c { position: relative; }
.heat-c.buiten::after { content: ''; position: absolute; inset: 0; border-radius: 2px; pointer-events: none; background-image: repeating-linear-gradient(45deg, rgba(124,138,154,.30) 0 1.5px, transparent 1.5px 4px); }
.heat-c.buiten-open { box-shadow: inset 0 0 0 1.6px var(--dsb-ink); }
.heat-bedien { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-top: 12px; font-family: var(--dsb-font-mono); font-size: 9.5px; color: var(--dsb-ink-faint); }
.heat-bedien__leg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.heat-bedien__leg .sw { width: 13px; height: 13px; border-radius: 2px; display: inline-block; }
.heat-bedien__leg .sw-bediend { background: rgba(255,107,44,.5); }
.heat-bedien__leg .sw-buiten { border: 1px solid var(--dsb-line); background-image: repeating-linear-gradient(45deg, rgba(124,138,154,.5) 0 1.5px, transparent 1.5px 4px); }
.heat-bedien__leg .sw-flag { background: rgba(255,107,44,.5); box-shadow: inset 0 0 0 1.6px var(--dsb-ink); }
.heat-bedien__stat { color: var(--dsb-ink-dim); }
.heat-bedien__stat b { color: var(--dsb-ink); }
.grid-empty { grid-column: 1 / -1; text-align: center; color: var(--dsb-ink-faint); font-family: var(--dsb-font-mono); font-size: 13px; padding: 44px 0; }
.grid-empty--hook { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 580px; margin: 8px auto; padding: 38px 28px; background: var(--dsb-navy-800); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-lg); }
.grid-empty--hook b { font-family: var(--dsb-font-display); font-weight: 700; font-size: 18px; color: var(--dsb-ink); letter-spacing: -.01em; }
.grid-empty--hook p { font-family: var(--dsb-font-body); font-size: 14px; color: var(--dsb-ink-dim); line-height: 1.6; margin: 10px 0 20px; text-wrap: pretty; letter-spacing: normal; text-transform: none; }
.brug-count { font-family: var(--dsb-font-mono); font-size: 12px; font-weight: 500; color: var(--dsb-ink-faint); letter-spacing: .02em; }
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.brug-zoek { flex: 1; min-width: 200px; background: var(--dsb-navy-800); border: 1px solid var(--dsb-line); border-radius: var(--dsb-radius-sm); padding: 10px 14px; color: var(--dsb-ink); font-family: var(--dsb-font-body); font-size: 14px; }
.brug-zoek::placeholder { color: var(--dsb-ink-faint); }
.brug-zoek:focus { outline: none; border-color: var(--dsb-orange); }
.fchips { display: flex; gap: 6px; flex-wrap: wrap; }
.fchips button { font-family: var(--dsb-font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--dsb-ink-dim); background: var(--dsb-navy-800); border: 1px solid var(--dsb-line); border-radius: 100px; padding: 8px 14px; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.fchips button:hover { color: var(--dsb-ink); border-color: var(--dsb-ink-faint); }
.fchips button.on { background: var(--dsb-orange); border-color: var(--dsb-orange); color: #fff; }
.nu-more { font-family: var(--dsb-font-mono); font-size: 11px; letter-spacing: .04em; color: var(--dsb-orange); background: rgba(255,107,44,.1); border: 1px solid rgba(255,107,44,.3); border-radius: var(--dsb-radius-md); padding: 7px 14px; cursor: pointer; align-self: center; }
.nu-more:hover { background: rgba(255,107,44,.18); }
/* ───────── licht thema (cream / navy) ───────── */
:root { --top-bg: rgba(8,20,33,.82); }
body.light {
--dsb-navy-900: #F9F5F1; /* app-achtergrond (cream) */
--dsb-navy-800: #ffffff; /* kaart / paneel */
--dsb-navy-700: #f2ece4; /* verhoogd vlak */
--dsb-line: #e4ddd2; /* randen */
--dsb-ink: #0a2540; /* primaire tekst (navy) */
--dsb-ink-dim: #51616f; /* secundaire tekst */
--dsb-ink-faint:#8a93a0; /* labels */
--dsb-orange: #DA5612; /* iets dieper oranje op licht */
--dsb-amber: #c98a07;
--dsb-ok: #1f8a5b;
--dsb-blue: #2f6fb0;
--top-bg: rgba(249,245,241,.86);
background:
radial-gradient(1200px 600px at 78% -8%, rgba(218,86,18,.05), transparent 60%),
var(--dsb-navy-900);
}
body.light .metric, body.light .ctx__card { background: #faf7f2; }
body.light:not(.met) .switch__thumb { background: #fff; box-shadow: 0 4px 14px rgba(6,42,74,.12), inset 0 1px 0 rgba(255,255,255,.6); }
body.light .hero__panel, body.light .bridge, body.light .switch { box-shadow: 0 1px 2px rgba(6,42,74,.05); }
body.light .top { box-shadow: 0 1px 0 rgba(6,42,74,.04); }
body.light .dsb-badge--dicht { background: rgba(81,97,111,.12); color: #51616f; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
/* huisstijl deslimmebrug.nl, lichte variant: donkere kop, lichte inhoud */
body.light .toggle-band{background:#061829;padding:48px 0 56px;margin-bottom:28px}
body.light .toggle-band .positioning h2{color:#EEF3F8}
body.light .toggle-band .positioning h2 b{color:#FF6B2C}
body.light .toggle-band .positioning p{color:#C3D1DF}
body.light .toggle-band .btn-ghost{color:#EEF3F8;border-color:rgba(168,200,235,.35);background:transparent}
header.top .top-cta{display:none}
@media (max-width:1499px){header.top .sync{display:none}}
@media (max-width:720px){.mapframe__tools{flex-wrap:wrap;gap:8px;width:100%}.mapframe__tools .map-prov{flex:1 1 auto;min-width:0}}
@media (max-width:420px){.dsbh-x{display:none}.dsbh-y{display:inline}}
.mods > *{min-width:0}
@media (max-width:560px){.mods__grid{grid-template-columns:1fr}.modt td{padding:10px 10px}.modt td:first-child{white-space:normal}}