/* 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; }
html{ scroll-behavior:smooth; }
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:16px; z-index:40; }
.n1-eiland{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
  background:#fff; border-radius:16px; padding:9px 9px 9px 22px; box-shadow:var(--zweef);
  transition:box-shadow .3s var(--ease-out); }
.kop[data-vast] .n1-eiland{ 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:34px; width:auto; }
.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:12px 20px; font-size:14px; border-radius:10px; }
.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{ font-size:17px; gap:8px; } .n1-logo img{ height:30px; } .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{ background:#fff; aspect-ratio:4/3; display:grid; place-items:center; padding:1.25rem 1.5rem .25rem; }
.pkaart .pfoto img{ max-height:100%; width:auto; 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 als verticale tijdlijn met foto's ──────── */
.tijdlijn{ position:relative; }
.tijdlijn::before, .tijdlijn::after{
  content:''; position:absolute; top:28px; bottom:28px; left:27px; width:2px; border-radius:2px;
}
.tijdlijn::before{ background:#D6E2EB; }
/* de lijn loopt mee met je scroll: scaleY, nooit height animeren */
.tijdlijn::after{
  background:linear-gradient(180deg,#00A0E8,#0B7DC4 60%,#F5A000);
  transform:scaleY(var(--voortgang,0)); transform-origin:top;
}
.stap{ position:relative; display:grid; grid-template-columns:56px 1fr; column-gap:1.25rem; }
.stap + .stap{ margin-top:2.25rem; }
.stap-punt{
  position:relative; z-index:1; grid-column:1; grid-row:1; align-self:start; display:flex; width:56px; height:56px;
  align-items:center; justify-content:center; border-radius:17px;
  background:#fff; color:#0B7DC4; border:1.5px solid #D6E2EB; box-shadow:0 0 0 7px #EEF4F8;
  transition:background-color .3s ease, color .3s ease, border-color .3s ease;
}
.stap.bereikt .stap-punt{ background:#0B7DC4; border-color:#0B7DC4; color:#fff; }
.stap-kaart{
  grid-column:2; grid-row:1; position:relative; overflow:hidden; border-radius:20px; background:#fff;
  border:1px solid rgba(11,34,51,.05); box-shadow:var(--zweef);
}
.stap-kaart img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
@media (min-width:1024px){
  .tijdlijn::before, .tijdlijn::after{ left:50%; margin-left:-1px; }
  .stap{ grid-template-columns:1fr 104px 1fr; column-gap:0; align-items:center; }
  .stap + .stap{ margin-top:1.25rem; }
  .stap-punt{ grid-column:2; justify-self:center; align-self:center; }
  .stap-kaart{ grid-column:1; }
  .stap:nth-child(even) .stap-kaart{ grid-column:3; }
}

/* ── 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 - 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; }
  .tijdlijn::after{ transform:none; }
}

/* ── 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:94svh; 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%); }