/* Koelend Goed · gedeelde stijl voor index.html en airco.html
Kleuren uit het eigen logo: sneeuwvlok-blauw #00A0E8 en zon-oranje #F5A000.
Knoppen in een donkerder blauw, want wit op #00A0E8 haalt de contrastnorm niet. */
:root{
--ease-out:cubic-bezier(.23,1,.32,1);
/* zwevende schaduw: groot en zacht, een vleug navy in plaats van grijs */
--zweef:0 1px 2px rgba(11,34,51,.04), 0 12px 32px -4px rgba(11,34,51,.07);
--zweef-hoog:0 2px 4px rgba(11,34,51,.04), 0 22px 48px -8px rgba(11,34,51,.12);
}
.zweef{ box-shadow:var(--zweef); }
/* hidden moet winnen van .flex/.pkaart, anders tonen filter en klaar-scherm verborgen elementen */
[hidden]{ display:none !important; }
/* Laptop en groter: de hele site op 90%, zoals Floris het met Cmd+min het mooist vond.
Zoom schaalt ook vh; site.js meet de echte schaal en zet --vhfix, zodat "volle schermhoogte"
nog steeds precies het scherm vult (werkt ook als een browser de zoom anders rekent). */
@media (min-width:1024px){ html{ zoom:.9; } }
.vol-hoogte{ min-height:calc(100svh * var(--vhfix, 1)); }
/* Lenis doet het zachte scrollen; native smooth zou ermee vechten */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
body{
background:#FBFCFD; color:#0E1A24;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
}
::selection{ background:#0B7DC4; color:#fff; }
/* ── Type ─────────────────────────────────────────────── */
.display{ font-weight:700; letter-spacing:-.035em; line-height:1.04; text-wrap:balance; }
.display-sm{ font-weight:700; letter-spacing:-.022em; line-height:1.15; text-wrap:balance; }
.lead{ font-size:1.0625rem; line-height:1.65; color:#46586A; max-width:60ch; }
.num{ font-variant-numeric:tabular-nums lining-nums; font-weight:700; letter-spacing:-.03em; }
@media (min-width:1536px){ .lead{ font-size:1.125rem; } }
/* ── Signatuur: het logo is half sneeuwvlok, half zon ─── */
.temp{ display:block; height:3px; border-radius:3px; background:linear-gradient(90deg,#00A0E8 0 50%,#F5A000 50% 100%); }
/* ── Knoppen ──────────────────────────────────────────── */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
font-weight:700; font-size:.9375rem; line-height:1; letter-spacing:-.005em;
padding:1rem 1.5rem; border-radius:12px; cursor:pointer; white-space:nowrap; border:0;
font-family:inherit;
transition:transform 150ms var(--ease-out), background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.btn:active{ transform:scale(.975); }
.btn-primary{ background:#0B7DC4; color:#fff; box-shadow:0 1px 2px rgba(14,26,36,.14), 0 10px 24px -14px rgba(14,26,36,.55); }
.btn-outline{ background:#fff; color:#0E1A24; border:1.5px solid #CBD5DF; }
.btn-zon{ background:#F5A000; color:#0E1A24; }
@media (hover:hover) and (pointer:fine){
.btn-primary:hover{ background:#0869A6; }
.btn-outline:hover{ border-color:#0E1A24; }
.btn-zon:hover{ background:#E09200; }
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible{
outline:2.5px solid #0B7DC4; outline-offset:3px; border-radius:6px;
}
.on-dark a:focus-visible, .on-dark button:focus-visible{ outline-color:#F5A000; }
/* ── Reveal ───────────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(16px); }
.rv-in{ opacity:1; transform:none; transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }
.in-1{ opacity:0; animation:fadeUp .7s var(--ease-out) .05s forwards; }
.in-2{ opacity:0; animation:fadeUp .7s var(--ease-out) .14s forwards; }
.in-3{ opacity:0; animation:fadeUp .7s var(--ease-out) .23s forwards; }
.in-4{ opacity:0; animation:fadeUp .7s var(--ease-out) .32s forwards; }
/* ── Navigatie: zwevend eiland (bibliotheekblok N1), hoeken wat vierkanter dan de pil ── */
.kop{ position:fixed; inset-inline:0; top:18px; z-index:40; transition:top .35s var(--ease-out); }
.kop[data-vast]{ top:12px; }
.n1-eiland{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
background:#fff; border-radius:18px; padding:13px 13px 13px 26px; box-shadow:var(--zweef);
transition:padding .35s var(--ease-out), border-radius .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.kop[data-vast] .n1-eiland{ padding:8px 8px 8px 20px; border-radius:16px; box-shadow:var(--zweef-hoog); }
.n1-logo{ display:flex; align-items:center; gap:10px; justify-self:start; font-weight:700; font-size:20px;
letter-spacing:-.03em; color:#0E1A24; text-decoration:none; white-space:nowrap; }
.n1-logo img{ height:46px; width:auto; transition:height .35s var(--ease-out); }
.n1-logo .n1-woord{ height:25px; }
.kop[data-vast] .n1-logo img{ height:34px; }
.kop[data-vast] .n1-logo .n1-woord{ height:19px; }
.n1-menu{ display:flex; align-items:center; gap:26px; }
.n1-menu a{ font-size:14.5px; font-weight:600; color:#0E1A24; text-decoration:none; transition:color 150ms ease; }
.n1-menu a:hover, .n1-menu a[aria-current]{ color:#0B7DC4; }
.n1-bel{ justify-self:end; padding:14px 22px; font-size:14.5px; border-radius:11px; transition:padding .35s var(--ease-out), background-color 180ms ease, transform 150ms var(--ease-out); }
.kop[data-vast] .n1-bel{ padding:11px 18px; font-size:14px; }
.n1-kort{ display:none; }
@media (max-width:900px){
.n1-eiland{ grid-template-columns:1fr auto; padding-left:18px; }
.n1-menu{ display:none; }
}
@media (max-width:420px){
.n1-logo{ gap:8px; } .n1-logo img, .kop[data-vast] .n1-logo img{ height:32px; } .n1-logo .n1-woord, .kop[data-vast] .n1-logo .n1-woord{ height:16px; }
.n1-bel{ padding:11px 15px; } .n1-nr{ display:none; } .n1-kort{ display:inline; }
}
/* ── Productkaart ─────────────────────────────────────── */
.pkaart{
display:flex; flex-direction:column; background:#fff; border:1px solid rgba(11,34,51,.05); border-radius:20px;
overflow:hidden; box-shadow:var(--zweef);
transition:box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .pkaart:hover{ transform:translateY(-3px); box-shadow:var(--zweef-hoog); } }
.pkaart .pfoto{ display:block; background:#fff; aspect-ratio:2/1; padding:.9rem 1.5rem .1rem; }
.pkaart .pfoto img{ display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.pkaart details summary{ list-style:none; cursor:pointer; }
.pkaart details summary::-webkit-details-marker{ display:none; }
.pkaart details[open] .pijl{ transform:rotate(180deg); }
.pijl{ transition:transform 200ms var(--ease-out); }
/* ── Chips (filter) ───────────────────────────────────── */
.chip{
display:inline-flex; align-items:center; gap:.4rem; padding:.6rem .95rem; border-radius:999px;
border:1.5px solid #D5DEE6; background:#fff; font:inherit; font-size:.875rem; font-weight:700; color:#0E1A24;
cursor:pointer; white-space:nowrap; transition:border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.chip[aria-pressed="true"]{ background:#0E1A24; border-color:#0E1A24; color:#fff; }
@media (hover:hover) and (pointer:fine){ .chip:hover{ border-color:#0E1A24; } }
/* ruimtekeuze in de hero */
.mini{
display:flex; flex-direction:column; align-items:flex-start; gap:.2rem;
padding:.8rem .95rem; border:1.5px solid rgba(11,34,51,.06); border-radius:14px; background:#fff;
font:inherit; color:#0E1A24; text-align:left; cursor:pointer; text-decoration:none;
box-shadow:0 1px 2px rgba(11,34,51,.04), 0 6px 16px -6px rgba(11,34,51,.08);
transition:border-color 150ms ease, box-shadow 250ms var(--ease-out), transform 150ms var(--ease-out);
}
.mini:active{ transform:scale(.98); }
.mini-pijl{ transition:transform 200ms var(--ease-out); }
.mini[aria-pressed="true"]{ border-color:#0B7DC4; background:#E7F3FB; }
@media (hover:hover) and (pointer:fine){
.mini:hover{ border-color:rgba(11,125,196,.45); box-shadow:0 2px 4px rgba(11,34,51,.05), 0 12px 26px -8px rgba(11,34,51,.14); }
.mini:hover .mini-pijl{ transform:translateX(3px); }
}
/* ── Werkwijze: een kronkelende koelleiding die zich tekent terwijl je scrolt ──
Kaarten om en om, de leiding slingert door de lege helft ernaast en kruist het midden
tussen twee stappen. Kleur loopt van koud (blauw) naar warm (oranje), zoals het logo.
JS rekent het pad uit op de echte posities van de knopen; hier alleen de vorm. */
.route{ position:relative; }
.route-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.route-spoor{ fill:none; stroke:#C9D8E4; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:1 11; }
.route-lijn{ fill:none; stroke:url(#routeVerloop); stroke-width:5; stroke-linecap:round; }
.route-druppel{ transition:opacity .3s ease; }
.route-stappen{ list-style:none; display:grid; gap:4.5rem; margin:0; padding:0; }
.route-stap{ display:grid; grid-template-columns:1fr 1fr; align-items:center; column-gap:3.5rem; }
.route-stap:nth-child(even) .route-kaart{ order:2; }
.route-kaart{ overflow:hidden; border-radius:22px; background:#fff; border:1px solid rgba(11,34,51,.05); box-shadow:var(--zweef); }
.route-kaart img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.route-zij{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.route-punt{ position:relative; z-index:1; display:grid; place-items:center; width:72px; height:72px; border-radius:24px;
background:#fff; color:#0B7DC4; border:1.5px solid rgba(11,34,51,.06); box-shadow:var(--zweef);
transition:background-color .45s var(--ease-out), color .45s var(--ease-out), transform .45s var(--ease-out); }
.route-stap.bereikt .route-punt{ background:#0B7DC4; color:#fff; transform:scale(1.06); }
.route-duur{ position:relative; z-index:1; padding:.4rem .85rem; border-radius:999px; background:#fff; box-shadow:var(--zweef);
font-size:13px; font-weight:700; color:#0869A6; white-space:nowrap; }
@media (max-width:1023px){
.route-stappen{ gap:2.25rem; }
.route-stap{ grid-template-columns:56px 1fr; column-gap:1.1rem; align-items:start; }
.route-stap:nth-child(even) .route-kaart{ order:0; }
.route-zij{ grid-column:1; grid-row:1; padding-top:18px; }
.route-kaart{ grid-column:2; grid-row:1; }
.route-punt{ width:56px; height:56px; border-radius:18px; }
.route-duur{ display:none; }
}
.route-duur-mob{ display:none; }
@media (max-width:1023px){ .route-duur-mob{ display:block; } }
/* ── Venster (check-als-venster) ──────────────────────── */
.venster{ position:fixed; inset:0; z-index:60; display:none; }
.venster[data-open]{ display:flex; align-items:center; justify-content:center; padding:1rem; }
.doek{ position:absolute; inset:0; background:rgba(11,34,51,.55);
-webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); animation:doekIn .25s ease both; }
.vak{ position:relative; width:100%; max-width:40rem; max-height:calc(100svh * var(--vhfix, 1) - 2rem); overflow-y:auto;
background:#fff; border-radius:20px; box-shadow:0 30px 80px -30px rgba(11,26,36,.6); scroll-padding-block:150px 96px;
animation:vakIn .34s var(--ease-out) both; }
@keyframes doekIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes vakIn{ from{ opacity:0; transform:scale(.975) translateY(12px) } to{ opacity:1; transform:none } }
body.vast-scroll{ overflow:hidden; }
.chk-step{ display:none; }
.chk-step[data-active]{ display:block; animation:fadeUp .32s var(--ease-out) both; }
.keus{
display:flex; align-items:center; gap:.9rem; width:100%; padding:.7rem .9rem; text-align:left;
border:1.5px solid #E1E8EE; border-radius:14px; background:#fff; font:inherit; color:#0E1A24; cursor:pointer;
transition:border-color 150ms ease, background-color 150ms ease;
}
.keus img{ width:58px; height:44px; object-fit:contain; mix-blend-mode:multiply; flex:none; }
.keus[aria-pressed="true"]{ border-color:#0B7DC4; background:#E7F3FB; box-shadow:inset 0 0 0 1px #0B7DC4; }
@media (hover:hover) and (pointer:fine){ .keus:hover{ border-color:#0B7DC4; } }
.tegel{
padding:.75rem .7rem; border:1.5px solid #E1E8EE; border-radius:12px; background:#fff;
font:inherit; font-weight:700; font-size:.875rem; line-height:1.25; color:#0E1A24; text-align:center; cursor:pointer;
transition:border-color 150ms ease, background-color 150ms ease, transform 150ms var(--ease-out);
}
.tegel:active{ transform:scale(.98); }
@media (hover:hover) and (pointer:fine){ .tegel:hover{ border-color:#0B7DC4; } }
.tegel[aria-pressed="true"]{ border-color:#0B7DC4; background:#E7F3FB; box-shadow:inset 0 0 0 1px #0B7DC4; }
.chk-input{
width:100%; padding:.9rem 1rem; border:1.5px solid #E1E8EE; border-radius:12px;
font:inherit; font-size:1rem; font-weight:500; background:#fff; color:#0E1A24;
transition:border-color 150ms ease, box-shadow 150ms ease;
}
.chk-input::placeholder{ color:#94A3AD; }
.chk-input:focus{ border-color:#0B7DC4; box-shadow:0 0 0 3px rgba(11,125,196,.16); outline:none; }
.bar{ width:100%; transform-origin:left; transition:transform .45s var(--ease-out); }
/* ── Belknop bij het contactblok ──────────────────────── */
.belknop{
display:flex; align-items:center; gap:.875rem; padding:.9375rem 1.125rem;
border:1px solid #E1E8EE; border-radius:14px; background:#fff; color:#0E1A24; text-decoration:none;
transition:border-color 150ms ease, transform 150ms var(--ease-out);
}
.belknop .rond{ display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:13px; background:#E7F3FB; color:#0B7DC4; }
.belknop .naam{ display:block; font-size:.8125rem; font-weight:500; color:#56687A; }
.belknop .nr{ display:block; font-size:1.0625rem; font-weight:700; letter-spacing:-.01em; }
.belknop:active{ transform:scale(.99); }
@media (hover:hover) and (pointer:fine){ .belknop:hover{ border-color:#0B7DC4; } }
/* ── Zwevende knop (desktop) en actiebalk (mobiel) ────── */
.checkbal{
display:none; position:fixed; right:1.25rem; bottom:1.25rem; z-index:50; align-items:center; gap:.6rem;
padding:.875rem 1.25rem; border:0; border-radius:999px; background:#0B7DC4; color:#fff;
font:inherit; font-size:.9375rem; font-weight:700; cursor:pointer; box-shadow:0 14px 34px -14px rgba(14,26,36,.75);
transition:background-color 150ms ease, transform 150ms var(--ease-out);
}
.checkbal:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){ .checkbal:hover{ background:#0869A6; } }
@media (min-width:1024px){ .checkbal{ display:inline-flex; } }
.actiebalk{ position:fixed; inset-inline:0; bottom:0; z-index:45; display:grid; grid-template-columns:1fr 1.4fr; gap:.5rem;
padding:.625rem .75rem calc(.625rem + env(safe-area-inset-bottom)); background:rgba(255,255,255,.95);
-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid #E1E8EE; }
.actiebalk .btn{ padding:.875rem 1rem; }
@media (min-width:1024px){ .actiebalk{ display:none; } }
@media (max-width:1023px){ body{ padding-bottom:76px; } }
body.vast-scroll .checkbal, body.vast-scroll .actiebalk{ display:none !important; }
/* ── FAQ ──────────────────────────────────────────────── */
details.faq{ border-bottom:1px solid #E1E8EE; }
details.faq summary{
list-style:none; cursor:pointer; padding:1.25rem 3rem 1.25rem 0; position:relative;
font-weight:700; font-size:1.0625rem; letter-spacing:-.01em;
}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{
content:''; position:absolute; right:.5rem; top:50%; width:10px; height:10px;
border-right:2.2px solid #0B7DC4; border-bottom:2.2px solid #0B7DC4;
transform:translateY(-70%) rotate(45deg); transition:transform 240ms var(--ease-out);
}
details.faq[open] summary::after{ transform:translateY(-25%) rotate(-135deg); }
details.faq .body{ padding:0 0 1.375rem; animation:fadeUp .3s var(--ease-out) both; }
@keyframes zak{ 0%{transform:translateY(-100%)} 50%{transform:translateY(140%)} 100%{transform:translateY(-100%)} }
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
*,*::before,*::after{ animation-duration:.01ms !important; animation-delay:0ms !important; transition-duration:.01ms !important; }
.rv{ opacity:1; transform:none; }
.in-1,.in-2,.in-3,.in-4{ opacity:1; }
}
/* ── Venster op de telefoon: schuift van onderen in, knoppen onderaan binnen duimbereik ── */
@keyframes vakOp{ from{ opacity:0; transform:translateY(40px) } to{ opacity:1; transform:none } }
@media (max-width:639px){
.venster[data-open]{ padding:0; align-items:flex-end; }
.vak{ max-height:calc(94svh * var(--vhfix, 1)); border-radius:20px 20px 0 0; animation:vakOp .34s var(--ease-out) both; }
}
/* ── Waarom wij: bibliotheekblok WW7, vertaald naar Koelend Goed ──
--vlak → #EEF4F8, --rond → 20px, .kaart → wit met zwevende schaduw */
.ww7-hoofd{ text-align:center; max-width:640px; margin:0 auto 44px; }
.ww7-hoofd .lead{ margin:14px auto 0; font-size:15px; }
.ww7-paneel{ background:#EEF4F8; border-radius:30px; padding:32px;
display:grid; grid-template-columns:1fr 1.08fr 1fr; grid-template-rows:1fr 1fr; gap:28px; }
.ww7-foto{ grid-row:1 / span 2; grid-column:2; width:100%; height:100%; object-fit:cover; border-radius:20px; }
.ww7-kaart{ background:#fff; border:1px solid rgba(11,34,51,.05); border-radius:20px; box-shadow:var(--zweef);
padding:30px; display:flex; flex-direction:column; min-height:190px; }
.ww7-kaart h3{ font-size:1.25rem; font-weight:700; letter-spacing:-.015em; line-height:1.25; margin:22px 0 10px; color:#0E1A24; }
.ww7-kaart p{ font-size:14.5px; line-height:1.6; color:#56687A; }
@media (max-width:900px){
.ww7-paneel{ grid-template-columns:1fr 1fr; grid-template-rows:auto; padding:24px; gap:22px; }
.ww7-foto{ grid-row:auto; grid-column:1 / -1; aspect-ratio:16/9; height:auto; order:-1; }
.ww7-kaart{ min-height:0; }
}
@media (max-width:620px){
.ww7-paneel{ grid-template-columns:1fr; }
.ww7-foto{ aspect-ratio:4/3; }
}
/* ── Footer: bibliotheekblok F3, vertaald (--inkt → navy #0B2233, knop accent → zon-oranje) ── */
.f3{ background:#0B2233; color:#fff; padding:64px 0 26px; overflow:hidden; }
.f3-rij{ display:grid; grid-template-columns:2.05fr .72fr 1fr; gap:44px; }
.f3-oproep{ font-weight:700; font-size:clamp(1.2rem,2.1vw,1.55rem); line-height:1.25; letter-spacing:-.03em; color:#fff; max-width:26ch; }
.f3-knoppen{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.f3-randknop{ color:#fff; background:transparent; border:1.5px solid rgba(255,255,255,.28); }
.f3-randknop:hover{ border-color:#fff; }
.f3-sociaal{ display:flex; gap:10px; margin-top:34px; }
.f3-sociaal a{ width:50px; height:50px; border-radius:999px; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.8); text-decoration:none; transition:border-color 150ms ease, color 150ms ease; }
.f3-sociaal a:hover{ border-color:#fff; color:#fff; }
.f3-kolomkop{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:22px; }
.f3-lijst{ list-style:none; display:flex; flex-direction:column; gap:26px; }
.f3-lijst a{ font-size:17px; color:rgba(255,255,255,.86); text-decoration:none; }
.f3-lijst a:hover{ color:#fff; }
.f3-regels{ display:flex; flex-direction:column; gap:20px; }
.f3-regel{ display:flex; align-items:flex-start; gap:14px; }
.f3-bol{ flex:0 0 44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:#fff; }
.f3-label{ font-size:12.5px; color:rgba(255,255,255,.55); margin-bottom:2px; }
.f3-waarde{ font-size:16px; font-weight:600; color:#fff; }
.f3-waarde a{ color:#fff; text-decoration:none; }
.f3-bij{ font-size:12.5px; color:rgba(255,255,255,.55); margin-top:3px; max-width:28ch; }
/* het echte logo (witte variant van het woordmerk, beeldmerk in de eigen kleuren) sluit de footer af */
.f3-logo{ display:block; height:150px; width:auto; margin:56px 0 0; }
@media (max-width:620px){ .f3-logo{ height:112px; margin-top:44px; } }
.f3-lijn{ border:0; border-top:1px solid rgba(255,255,255,.16); margin:36px 0 22px; }
.f3-balk{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.f3-balk p{ font-size:14px; color:rgba(255,255,255,.6); }
.f3-balk a{ color:rgba(255,255,255,.6); text-decoration:none; }
.f3-balk a:hover{ color:#fff; }
@media (max-width:900px){
.f3-rij{ grid-template-columns:1fr 1fr; gap:40px; }
.f3-rij>:first-child{ grid-column:1/-1; }
}
@media (max-width:620px){
.f3{ padding-top:52px; }
.f3-rij{ grid-template-columns:1fr; gap:34px; }
.f3-oproep{ max-width:none; }
}
/* contactkaart hangt over de naad: bovenkant pagina, onderkant al footer-navy */
.naad{ background:linear-gradient(to bottom,#FBFCFD 0,#FBFCFD 52%,#0B2233 52%,#0B2233 100%); }
/* ── Animaties: weinig, maar met een reden ─────────────────
1. hero-video (de unit komt tot leven) 2. merkstreep tekent zich 3. kaarten komen na elkaar
4. icoontjes in "waarom" tekenen zichzelf 5. sterren springen erin 6. werkgebied draait zacht */
.temp.in-2{ transform-origin:left; animation:streep .9s var(--ease-out) .55s both; }
@keyframes streep{ from{ opacity:0; transform:scaleX(0); } to{ opacity:1; transform:scaleX(1); } }
.in-4 .mini{ animation:fadeUp .6s var(--ease-out) both; }
.in-4 .mini:nth-child(1){ animation-delay:.45s } .in-4 .mini:nth-child(2){ animation-delay:.53s }
.in-4 .mini:nth-child(3){ animation-delay:.61s } .in-4 .mini:nth-child(4){ animation-delay:.69s }
.rv.stagger{ opacity:1; transform:none; }
.stagger > *{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.stagger.rv-in > *{ opacity:1; transform:none; }
.stagger > :nth-child(2){ transition-delay:.08s } .stagger > :nth-child(3){ transition-delay:.16s }
.stagger > :nth-child(4){ transition-delay:.24s } .stagger > :nth-child(5){ transition-delay:.32s }
.ww7-kaart svg *{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.2s var(--ease-out) .35s; }
.ww7-paneel.rv-in .ww7-kaart svg *{ stroke-dashoffset:0; }
.ster{ transform:scale(0) rotate(-40deg); transition:transform .55s cubic-bezier(.34,1.56,.64,1); }
.rv-in .ster{ transform:none; }
.rv-in .ster:nth-child(1){ transition-delay:.25s } .rv-in .ster:nth-child(2){ transition-delay:.37s } .rv-in .ster:nth-child(3){ transition-delay:.49s }
.draai{ animation:draai 7s linear infinite; }
@keyframes draai{ to{ stroke-dashoffset:-110; } }
@media (prefers-reduced-motion:reduce){
.herovideo{ display:none !important; }
.stagger > *, .ww7-kaart svg *, .ster{ opacity:1 !important; transform:none !important; stroke-dashoffset:0 !important; }
}
/* ── Werkgebied: echte kaartuitsnede (OSM-tegels, bron/kaart.py) met de radar eroverheen ── */
.werkkaart{ position:relative; overflow:hidden; border-radius:18px; border:1px solid #E1E8EE; background:#EAF0F4; }
.werkkaart img{ display:block; width:100%; height:auto; }
.werkkaart svg{ position:absolute; inset:0; width:100%; height:100%; }
.kaart-bron{ position:absolute; right:6px; bottom:5px; padding:1px 6px; border-radius:5px;
background:rgba(255,255,255,.72); font-size:9.5px; font-weight:600; color:rgba(14,26,36,.6); }
/* labels staan in het 760-coördinatenstelsel van de kaart, dus flink groter dan schermpixels;
witte rand eronder zodat ze loskomen van de plaatsnamen op de kaart zelf */
.k-stad, .k-thuis{ font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:700;
paint-order:stroke; stroke:#fff; stroke-width:5px; stroke-linejoin:round; }
.k-stad{ font-size:21px; fill:#0869A6; }
.k-thuis{ font-size:27px; fill:#0E1A24; stroke-width:6px; }