/* ==========================================================================
   FlexOnline Solutions
   Visuele richting: de winkelpui. Geschilderde gevelletters, een emaille
   bordje naast de deur, een kaartje in de etalage met de prijs erop.
   ========================================================================== */

:root{
  /* Marineblauw en wit. Eén donkere kleur, één lichte, en verder alleen
     grijstinten. De enige extra kleur is het rood in de rekensom, en dat
     heeft daar een functie: het is het bedrag dat blijft oplopen. */
  --kalk:#FFFFFF;
  --optekst:#FFFFFF;
  --kalk-diep:#F3F6FA;
  --kalk-wit:#FFFFFF;
  --gevel:#102540;
  --gevel-diep:#0A1729;
  --gevel-licht:#1C3557;
  --messing:#A8C4EE;
  --messing-diep:#34507F;
  --menie:#B0473B;
  --inkt:#102540;
  --inkt-zacht:#47566E;
  --inkt-vaag:#5B6A83;
  --lijn:#E6EBF1;
  --lijn-sterk:#D9E0E9;
  --rand-ui:#7C8AA3;
  --focus:#102540;
  --accent:#34507F;
  --zacht:#47566E;
  /* De hoofdknop neemt de kleur van zijn ondergrond over: donker op wit,
     wit op donker. Zo is er geen derde kleur nodig. */
  --knop-vlak:#102540;
  --knop-tekst:#FFFFFF;
  /* De bovenbalk is licht doorschijnend en vervaagt wat eronder doorloopt */
  --balk:rgba(16,37,64,.74);
  /* Hoogte van die balk, inclusief zijn onderrand. Achter die strook ligt
     bovenaan de pagina hetzelfde blauw als de hero, zodat de balk bij het
     laden dicht oogt en pas doorschijnend wordt zodra je gaat scrollen. */
  --balk-hoogte:75px;
  /* Het bordje met harde feiten: gevuld op wit, omlijnd op marineblauw */
  --bord-vlak:#102540;
  --bord-tekst:#FFFFFF;
  --bord-rand:transparent;
  --bord-sub:rgba(255,255,255,.72);

  --f-bord:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-tekst:"Newsreader",Georgia,"Times New Roman",serif;

  --breed:1220px;
  --smal:760px;
  --rand:max(1.1rem,calc((100vw - 1220px) / 2));
}

*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:light dark;
  background-color:var(--kalk);
  background-image:linear-gradient(var(--gevel),var(--gevel));
  background-repeat:no-repeat;
  background-size:100% var(--balk-hoogte);
}

body{
  font-family:var(--f-tekst);
  font-size:clamp(1rem,.97rem + .18vw,1.09rem);
  line-height:1.66;
  color:var(--inkt);
  background:transparent;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{
  font-family:var(--f-bord);
  font-weight:700;
  font-stretch:106%;
  line-height:1.08;
  letter-spacing:-.005em;
}
h1{font-size:clamp(2.35rem,1.5rem + 3.6vw,4rem)}
h2{font-size:clamp(1.85rem,1.3rem + 2.2vw,2.85rem)}
h3{font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem);font-stretch:102%}
p{max-width:64ch}
a{color:inherit}
strong{font-weight:600}

.inleiding{
  font-size:clamp(1.05rem,1rem + .3vw,1.22rem);
  color:var(--zacht);
  max-width:56ch;
  margin-top:1.2rem;
}


/* ---------- Raamwerk ---------- */
.omhulsel{width:min(var(--breed),100% - 3rem);margin-inline:auto}
.omhulsel-smal{width:min(var(--smal),100% - 3rem);margin-inline:auto}
.omhulsel-mid{width:min(980px,100% - 3rem);margin-inline:auto}

.blok{padding-block:clamp(4rem,8vw,7.5rem)}
.blok-kort{padding-block:clamp(3rem,5vw,4.5rem)}
.groen{background:var(--gevel);color:var(--optekst)}
.groen p{color:rgba(255,255,255,.82)}
.diep{background:var(--gevel-diep);color:var(--optekst)}
.diep p{color:rgba(255,255,255,.82)}
.kalk-diep{background:var(--kalk-diep)}

/* ---------- Knoppen: geschilderde bordjes ---------- */
.knop{
  display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--f-bord);font-weight:600;font-stretch:95%;
  font-size:.94rem;letter-spacing:.01em;
  padding:.9rem 1.5rem;border:1px solid transparent;border-radius:2px;
  text-decoration:none;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.knop svg{flex:none;transition:transform .16s ease}
.knop:hover svg{transform:translateX(3px)}
.knop-messing{background:var(--knop-vlak);color:var(--knop-tekst);border-color:var(--knop-vlak)}
.knop-messing:hover{opacity:.86}
.knop-lijn{border-color:rgba(255,255,255,.34);color:var(--optekst)}
.knop-lijn:hover{border-color:var(--optekst);background:rgba(255,255,255,.08)}
.knop-inkt{border-color:var(--lijn-sterk);color:var(--inkt)}
.knop-inkt:hover{border-color:var(--inkt);background:rgba(16,37,64,.05)}
.knop-klein{padding:.55rem 1rem;font-size:.82rem}

:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--focus);outline-offset:3px;border-radius:2px;
}
.gevelbalk,.etalage,.groen,.diep,.contact-zij,.uitkomst-rechts,.prijskaart-hoofd,
.duimbalk,.voetgevel,.meter-slot,.bericht-vink,.gelukt-vink{
  --focus:var(--messing);--accent:var(--messing);--zacht:rgba(255,255,255,.84);
  --knop-vlak:#FFFFFF;--knop-tekst:var(--gevel);
  --bord-vlak:transparent;--bord-tekst:#FFFFFF;
  --bord-rand:rgba(255,255,255,.28);--bord-sub:var(--messing);
}
/* De appen-knop is zelf groen: daar is licht beter leesbaar dan messing */
.duimbalk .appen{--focus:var(--optekst)}

.knoppen{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* ---------- Direct naar de inhoud ---------- */
.overslaan{
  position:absolute;left:1rem;top:-4rem;z-index:100;
  background:var(--gevel);color:#FFFFFF;text-decoration:none;
  font-family:var(--f-bord);font-weight:600;font-stretch:92%;font-size:.88rem;
  padding:.7rem 1.1rem;border-radius:0 0 4px 4px;
  transition:top .18s ease;
}
.overslaan:focus{top:0}

/* ---------- Emaille bordje: alleen voor harde feiten ---------- */
.emaille{
  display:inline-grid;gap:.15rem;
  background:var(--bord-vlak);color:var(--bord-tekst);
  border:1px solid var(--bord-rand);border-radius:2px;
  padding:.7rem 1.1rem;
}
.emaille b{
  font-family:var(--f-bord);font-weight:700;font-stretch:105%;
  font-size:1.02rem;line-height:1.2;
}
.emaille span{
  font-family:var(--f-bord);font-weight:600;font-stretch:84%;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bord-sub);
}

/* ==========================================================================
   Gevelbalk (header)
   ========================================================================== */
.gevelbalk{
  position:sticky;top:0;z-index:80;
  background:var(--balk);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  backdrop-filter:blur(16px) saturate(1.25);
  border-bottom:1px solid rgba(255,255,255,.13);
  transition:box-shadow .25s ease,background .25s ease;
}
/* Zonder ondersteuning voor backdrop-filter zou de tekst over lichte secties
   te weinig contrast houden, dus dan blijft de balk vrijwel dicht. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .gevelbalk{background:rgba(16,37,64,.97)}
}
.gevelbalk.gezakt{box-shadow:0 10px 26px rgba(16,37,64,.22)}
.gevelbalk-rij{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:74px}

.merk{display:grid;line-height:1;text-decoration:none;padding-block:.6rem}
.merk .merk-boven{
  font-family:var(--f-bord);font-weight:800;font-stretch:110%;
  font-size:1.12rem;letter-spacing:.02em;color:var(--messing);
}
.merk .merk-onder{
  font-family:var(--f-bord);font-weight:600;font-stretch:82%;
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-top:.28rem;
}

.menu{display:flex;align-items:center;gap:1.9rem;list-style:none}
.menu a{
  font-family:var(--f-bord);font-weight:500;font-stretch:88%;
  font-size:.79rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.82);text-decoration:none;position:relative;padding-block:.35rem;
}
.menu a:hover{color:var(--optekst)}
.menu a[aria-current="page"]{color:var(--optekst)}
.menu a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-.2rem;height:2px;background:var(--messing);
}
.menu a.knop{text-transform:none;letter-spacing:.01em;font-size:.82rem}
.menu a.knop-messing{color:var(--knop-tekst)}
.menu a.knop-messing:hover{color:var(--knop-tekst)}
.menu a.knop[aria-current="page"]::after{display:none}

.menu-knop{display:none;background:none;border:0;color:var(--optekst);cursor:pointer;padding:.5rem}
.gevelbalk .knop-mobiel{display:none}

/* ==========================================================================
   Etalage (hero)
   ========================================================================== */
.etalage{background:var(--gevel);color:var(--optekst);position:relative;overflow:hidden}
.etalage-rooster{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.58fr);
  align-items:stretch;gap:0;width:100%;
}
.etalage-tekst{
  padding:clamp(3.5rem,6vw,6.5rem) clamp(2rem,4vw,4.5rem) clamp(3.5rem,6vw,6rem) var(--rand);
}
.etalage h1{max-width:15ch;margin-bottom:1.4rem}
.etalage-lead{font-size:clamp(1.08rem,1rem + .4vw,1.3rem);color:rgba(255,255,255,.84);max-width:44ch}
.etalage-belofte{
  display:flex;align-items:center;gap:.6rem;margin-top:1.8rem;
  font-family:var(--f-bord);font-weight:500;font-stretch:88%;
  font-size:.82rem;letter-spacing:.06em;color:rgba(255,255,255,.62);
}
.etalage-belofte svg{color:var(--messing);flex:none}
.etalage-foto{position:relative;min-height:100%}
.etalage-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.etalage-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,37,64,.9) 0,rgba(16,37,64,.12) 22%,rgba(16,37,64,0) 45%);
}

/* Intro-animatie: rustig, één keer */
@keyframes opkomen{from{opacity:0;transform:translateY(1.1rem)}to{opacity:1;transform:none}}
.etalage h1{animation:opkomen .7s .04s ease both}
.etalage-lead{animation:opkomen .7s .16s ease both}
.etalage .knoppen{animation:opkomen .7s .28s ease both}
.etalage-belofte{animation:opkomen .7s .4s ease both}
.etalage-foto{animation:opkomen .9s .1s ease both}

/* ==========================================================================
   De rekensom: het handtekening-element
   ========================================================================== */
.rekensom{background:var(--kalk-diep);border-block:1px solid var(--lijn-sterk)}
.rekensom-kop{max-width:60ch}
.rekensom-kop h2{max-width:16ch}

.meter{
  margin-top:clamp(2.2rem,4vw,3.2rem);
  background:var(--kalk-wit);
  border:1px solid var(--lijn-sterk);
  border-radius:3px;
  overflow:hidden;
}
.meter-knoppen{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.8rem);
  padding:clamp(1.6rem,3vw,2.2rem) clamp(1.4rem,3vw,2.4rem);
  border-bottom:1px solid var(--lijn-sterk);
}
.schuif label{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
  font-family:var(--f-bord);font-weight:600;font-stretch:88%;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht);
}
.schuif output{
  font-family:var(--f-bord);font-weight:800;font-stretch:106%;
  font-size:1.35rem;letter-spacing:-.01em;color:var(--inkt);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.schuif input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;margin-top:.5rem;
  height:44px;background:transparent;cursor:pointer;display:block;
}
.schuif input[type=range]::-webkit-slider-runnable-track{
  height:8px;background:var(--rand-ui);border-radius:2px;
}
.schuif input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-10px;
  background:var(--gevel);border:3px solid var(--messing);border-radius:50%;
}
.schuif input[type=range]::-moz-range-track{height:8px;background:var(--rand-ui);border-radius:2px}
.schuif input[type=range]::-moz-range-thumb{
  width:22px;height:22px;background:var(--gevel);border:3px solid var(--messing);border-radius:50%;
}

.meter-balk{padding:clamp(1.6rem,3vw,2.2rem) clamp(1.4rem,3vw,2.4rem) 0}
/* De balk beweegt met transform, niet met width: dat scheelt herberekening
   van de layout bij elke sleepbeweging. */
.spoor-omhulsel{position:relative;margin-top:1.7rem}
.spoor{
  position:relative;height:2.9rem;background:var(--kalk-diep);
  border:1px solid var(--lijn-sterk);border-radius:2px;overflow:hidden;
}
.spoor-vulling{
  position:absolute;inset:0;background:var(--menie);
  transform:scaleX(0);transform-origin:left center;will-change:transform;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.spoor-merk{
  position:absolute;top:-.4rem;bottom:-.4rem;left:0;width:3px;background:var(--messing);
  box-shadow:0 0 0 2px var(--kalk-wit);
  will-change:transform;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.spoor-merk::after{
  content:"€ 300";position:absolute;left:50%;top:-1.55rem;transform:translateX(-50%);
  font-family:var(--f-bord);font-weight:700;font-stretch:92%;font-size:.72rem;
  letter-spacing:.1em;color:var(--messing-diep);white-space:nowrap;
}
.spoor-schaal{
  display:flex;justify-content:space-between;margin-top:.55rem;
  font-family:var(--f-bord);font-weight:600;font-stretch:86%;
  font-size:.72rem;letter-spacing:.12em;color:var(--inkt-vaag);
  font-variant-numeric:tabular-nums;
}
.spoor-legenda{
  display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.2rem;
  font-family:var(--f-bord);font-weight:600;font-stretch:86%;
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--inkt-vaag);
}
.spoor-legenda span{display:inline-flex;align-items:center;gap:.5rem}
.spoor-legenda i{width:.85rem;height:.85rem;border-radius:2px;display:inline-block}
.spoor-legenda i.streep{width:3px;height:1.15rem;border-radius:1px}

.meter-uitkomst{
  display:grid;grid-template-columns:1.1fr .9fr;
  margin-top:clamp(1.6rem,3vw,2.2rem);
}
.uitkomst-links{padding:clamp(1.5rem,3vw,2.1rem) clamp(1.4rem,3vw,2.4rem);border-top:1px solid var(--lijn-sterk)}
.uitkomst-rechts{
  padding:clamp(1.5rem,3vw,2.1rem) clamp(1.4rem,3vw,2.4rem);
  background:var(--gevel);color:var(--optekst);
}
.uitkomst-kop{
  font-family:var(--f-bord);font-weight:600;font-stretch:84%;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--inkt-vaag);margin-bottom:.5rem;
}
.uitkomst-rechts .uitkomst-kop{color:var(--messing)}
.bedrag{
  font-family:var(--f-bord);font-weight:800;font-stretch:110%;
  font-size:clamp(2.1rem,1.4rem + 2.6vw,3.1rem);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--menie);
}
.uitkomst-rechts .bedrag{color:var(--optekst)}
.bedrag-bij{margin-top:.55rem;font-size:.95rem;color:var(--inkt-zacht);max-width:34ch}
.uitkomst-rechts .bedrag-bij{color:rgba(255,255,255,.78)}
.meter-slot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:clamp(1.3rem,2.6vw,1.8rem) clamp(1.4rem,3vw,2.4rem);
  background:var(--gevel-diep);color:var(--optekst);
}
.meter-slot-tekst{display:grid;gap:.25rem;max-width:46ch}
.meter-slot p{
  max-width:46ch;margin:0;color:var(--optekst);
  font-family:var(--f-bord);font-weight:600;font-stretch:100%;
  font-size:clamp(.95rem,.9rem + .25vw,1.1rem);line-height:1.4;
}
.meter-slot .slot-bedrag{
  flex:none;font-weight:800;font-stretch:106%;letter-spacing:-.02em;
  font-size:clamp(2.3rem,1.8rem + 2.2vw,3.3rem);line-height:1;
  font-variant-numeric:tabular-nums;
}
.meter-slot .knop{flex:none}
.rekensom-voetnoot{margin-top:1.2rem;font-size:.88rem;color:var(--inkt-vaag);max-width:66ch}

/* ==========================================================================
   Afspraken (waarom): geen kaartjesraster maar een liggende lijst
   ========================================================================== */
.afspraak-rooster{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.afspraak-lijst{list-style:none;display:grid}
.afspraak{padding-block:1.7rem;border-top:1px solid rgba(255,255,255,.18)}
.afspraak:first-child{border-top:0;padding-top:0}
.afspraak h3{margin-bottom:.4rem}
.afspraak p{font-size:1rem;max-width:52ch}

.afspraak-rooster h2{max-width:11ch}
.afspraak-citaat{
  margin-top:1.3rem;
  font-family:var(--f-tekst);font-size:clamp(1.3rem,1rem + 1.4vw,1.85rem);
  line-height:1.34;font-weight:400;font-style:italic;
  color:var(--optekst);max-width:20ch;
}
.afspraak-feiten{list-style:none;display:grid;gap:.7rem;justify-items:start;margin-top:2.4rem}
.afspraak-bron{
  margin-top:1.4rem;font-family:var(--f-bord);font-weight:600;font-stretch:86%;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--messing);
}

/* ==========================================================================
   Over Philip
   ========================================================================== */
.philip-rooster{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2.2rem,5vw,4.5rem);align-items:center}
.philip-portret{position:relative}
.philip-portret img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.philip-portret .emaille{position:absolute;right:-1rem;bottom:-1.2rem}
.philip-punten{list-style:none;display:grid;gap:.85rem;margin-top:1.8rem}
.philip-punten li{display:grid;grid-template-columns:1.2rem 1fr;gap:.85rem;align-items:start;font-size:1rem}
.philip-punten svg{color:var(--messing-diep);margin-top:.42rem}
.groen .philip-punten svg{color:var(--messing)}

/* ==========================================================================
   Verwijzingen: drie blokken, bewust ongelijk
   ========================================================================== */
.wegwijzers{display:grid;grid-template-columns:1.25fr .87fr .88fr;gap:1.5rem;margin-top:clamp(2rem,4vw,3rem)}
.wegwijzer{
  display:grid;align-content:start;text-decoration:none;color:inherit;
}
.wegwijzer img{border-radius:2px}
.wegwijzer:hover h3{text-decoration:underline;text-underline-offset:.25em}
.wegwijzer img{display:block;width:100%;height:auto;object-fit:cover}
.wegwijzer-1 img{aspect-ratio:16/9}
.wegwijzer-2 img{aspect-ratio:4/3}
.wegwijzer-3 img{aspect-ratio:4/3}

.wegwijzer-body{padding:1.1rem 0 0}
.wegwijzer h3{margin-bottom:.4rem}
.wegwijzer p{font-size:.97rem;color:var(--inkt-zacht)}
.wegwijzer-heen{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;
  font-family:var(--f-bord);font-weight:600;font-stretch:88%;font-size:.76rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--messing-diep);
}
.wegwijzer:hover .wegwijzer-heen svg{transform:translateX(3px)}
.wegwijzer-heen svg{transition:transform .18s ease}

/* ==========================================================================
   Vragen
   ========================================================================== */
.vragen{border-top:1px solid var(--lijn-sterk);margin-top:clamp(1.8rem,4vw,2.6rem)}
.afspraak-rooster .vragen{margin-top:0}
.afspraak-rooster .vragen-meer{margin-top:2.2rem}
.vraag{border-bottom:1px solid var(--lijn-sterk)}
.vraag summary{
  list-style:none;cursor:pointer;display:flex;gap:1.2rem;align-items:baseline;justify-content:space-between;
  padding-block:1.5rem;
  font-family:var(--f-bord);font-weight:600;font-stretch:106%;
  font-size:clamp(1.05rem,1rem + .35vw,1.25rem);line-height:1.25;
  transition:color .16s ease;
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary:hover{color:var(--messing-diep)}
.vraag-teken{
  flex:none;width:1.6rem;height:1.6rem;border:1px solid var(--lijn-sterk);border-radius:2px;
  display:grid;place-items:center;color:var(--messing-diep);
  transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
}
.vraag[open] .vraag-teken{transform:rotate(45deg);background:var(--gevel);border-color:var(--gevel);color:var(--messing)}
.vraag-antwoord{padding-bottom:1.7rem;color:var(--inkt-zacht);max-width:64ch}
.vragen-meer{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.8rem;
  font-family:var(--f-bord);font-weight:600;font-stretch:90%;font-size:.8rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--messing-diep);text-decoration:none;
}
.vragen-meer:hover{text-decoration:underline;text-underline-offset:.3em}

/* ==========================================================================
   Werkwijze: de stappen zijn een echte volgorde, dus genummerd
   ========================================================================== */
/* Paginakop met beeld: dezelfde splitsing als de etalage, maar lager van bouw.
   Tekst op schoon groen, foto ernaast en volledig zichtbaar. */
.etalage-kop .etalage-tekst{padding-block:clamp(2.8rem,5vw,4.6rem)}
.etalage-kop h1{max-width:19ch}
@media (min-width:1001px){
  .etalage-kop .etalage-foto{min-height:clamp(320px,34vw,460px)}
}
.etalage-kop .etalage-foto img{object-position:68% 50%}
/* De opkomst bij het laden hoort bij de homepage, niet bij een subpagina */
.etalage-kop h1,.etalage-kop .inleiding,.etalage-kop .etalage-foto{animation:none}

.stap{
  display:grid;grid-template-columns:clamp(3.5rem,7vw,6rem) 1fr;gap:clamp(1.2rem,3vw,2.5rem);
  padding-block:clamp(1.8rem,3.5vw,2.6rem);border-top:1px solid var(--lijn-sterk);
}
.stap:first-of-type{border-top:0}
.stap-nr{
  font-family:var(--f-bord);font-weight:800;font-stretch:110%;
  font-size:clamp(2rem,1.4rem + 2.2vw,3.1rem);line-height:.9;
  color:var(--messing-diep);letter-spacing:-.03em;
}
.stap h3{margin-bottom:.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem}
.stap p{max-width:56ch;color:var(--inkt-zacht)}
.gratis-merk{
  font-family:var(--f-bord);font-weight:700;font-stretch:86%;font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;
  background:var(--messing);color:#1A1305;padding:.25rem .6rem;border-radius:3px;
}

/* ==========================================================================
   Prijzen
   ========================================================================== */
.prijskaart{
  display:grid;grid-template-columns:1.15fr .85fr;
  border:1px solid var(--lijn-sterk);border-radius:3px;overflow:hidden;
  margin-top:clamp(2rem,4vw,3rem);
}
.prijskaart-hoofd{padding:clamp(2rem,4vw,3rem);background:var(--gevel-diep)}
.prijskaart-zij{
  padding:clamp(2rem,4vw,3rem);background:var(--kalk);color:var(--inkt);
  display:flex;flex-direction:column;justify-content:center;
}
.prijskaart-zij h2{font-size:clamp(1.35rem,1.15rem + .8vw,1.85rem);margin-bottom:.9rem}
.prijskaart-zij p{color:var(--inkt-zacht)}
.groen .prijs,.prijs{
  font-family:var(--f-bord);font-weight:800;font-stretch:110%;
  font-size:clamp(2.6rem,1.8rem + 3.4vw,4.2rem);line-height:1;letter-spacing:-.03em;
  color:var(--messing);
}
.prijs .vanaf{font-size:.42em;font-weight:600;font-stretch:96%;letter-spacing:0;opacity:.82}
.prijs small{
  display:block;font-family:var(--f-bord);font-weight:600;font-stretch:86%;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin-top:.7rem;
}
.inbegrepen{list-style:none;display:grid;gap:.8rem;margin-top:1.9rem}
.inbegrepen li{display:grid;grid-template-columns:1.15rem 1fr;gap:.85rem;align-items:start;font-size:1rem;color:rgba(255,255,255,.9)}
.inbegrepen svg{color:var(--messing);margin-top:.42rem}
.zonder{list-style:none;display:grid;gap:.7rem;margin-top:1.4rem}
.zonder li{
  display:grid;grid-template-columns:1.1rem 1fr;gap:.8rem;align-items:center;
  font-family:var(--f-bord);font-weight:600;font-stretch:92%;font-size:.92rem;color:var(--inkt);
}
.zonder svg{color:var(--menie)}

.branches{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:clamp(2rem,4vw,3rem)}
.branche{display:grid;align-content:start}
.branche img{display:block;width:100%;height:auto;aspect-ratio:11/8;object-fit:cover;border-radius:2px}
.branche h3{margin:1.1rem 0 .45rem}
.branche p{font-size:.97rem;color:var(--inkt-zacht)}


/* ==========================================================================
   Contact
   ========================================================================== */
.contact-rooster{display:grid;grid-template-columns:.85fr 1.15fr;gap:0;border:1px solid var(--lijn-sterk);border-radius:3px;overflow:hidden;margin-top:clamp(2rem,4vw,3rem)}
.contact-zij{background:var(--gevel);color:var(--optekst);padding:clamp(1.8rem,3.5vw,2.6rem)}
.contact-form{background:var(--kalk-wit);padding:clamp(1.8rem,3.5vw,2.6rem)}
.philip-kaartje{display:flex;align-items:center;gap:1rem;padding-bottom:1.5rem;margin-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.2)}
.philip-kaartje img{width:66px;height:66px;object-fit:cover;object-position:50% 30%;border-radius:2px;flex:none}
.philip-kaartje b{display:block;font-family:var(--f-bord);font-weight:700;font-stretch:110%;font-size:1.1rem;line-height:1.2}
.philip-kaartje span{font-family:var(--f-bord);font-weight:600;font-stretch:84%;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--messing)}
.contact-regels{list-style:none;display:grid;gap:1.3rem}
.contact-regels li{display:grid;gap:.15rem}
.contact-regels dt,.contact-regels .label{
  font-family:var(--f-bord);font-weight:600;font-stretch:84%;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--messing);
}
.contact-regels a,.contact-regels .waarde{
  font-family:var(--f-bord);font-weight:600;font-stretch:104%;font-size:1.02rem;
  color:var(--optekst);text-decoration:none;
}
.contact-regels a:hover{text-decoration:underline;text-underline-offset:.25em}

.veld{display:grid;gap:.45rem;margin-bottom:1.1rem}
.veld > span{
  font-family:var(--f-bord);font-weight:600;font-stretch:86%;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht);
}
.veld input,.veld textarea{
  font-family:var(--f-tekst);font-size:1rem;color:var(--inkt);
  padding:.8rem .9rem;background:var(--kalk);
  border:1px solid var(--rand-ui);border-radius:2px;width:100%;
  transition:border-color .16s ease;
}
.veld input:focus,.veld textarea:focus{border-color:var(--gevel);outline-offset:1px}
.veld textarea{resize:vertical;min-height:8rem}
.veld-los{font-weight:400;text-transform:none;letter-spacing:0;color:var(--inkt-vaag);font-family:var(--f-tekst);font-size:.85rem}
.form-noot{font-size:.88rem;color:var(--inkt-vaag);margin-top:.9rem}

.kaart{
  margin-top:clamp(2rem,4vw,3rem);border:1px solid var(--lijn-sterk);border-radius:3px;overflow:hidden;
  line-height:0;background:var(--kalk-diep);
}
.kaart iframe{width:100%;height:clamp(280px,38vw,420px);border:0;display:block;filter:saturate(.85)}

.gelukt{display:none;border:1px solid var(--lijn-sterk);border-radius:2px;padding:clamp(1.6rem,3vw,2.2rem);background:var(--kalk)}
.gelukt.tonen{display:block;animation:opkomen .4s ease both}
.gelukt-vink{width:3rem;height:3rem;background:var(--gevel);color:var(--messing);display:grid;place-items:center;border-radius:2px;margin-bottom:1.1rem}

/* ==========================================================================
   Voetgevel
   ========================================================================== */
.voetgevel{background:var(--gevel-diep);color:rgba(255,255,255,.72);border-top:1px solid rgba(255,255,255,.1);padding-top:clamp(3rem,5vw,4rem)}
.voetgevel-rooster{display:grid;grid-template-columns:1.4fr .8fr .9fr;gap:2.5rem;padding-bottom:2.6rem}
.voetgevel p{font-size:.97rem;max-width:34ch;margin-top:1rem;color:rgba(255,255,255,.62)}
.voet-kop{
  display:block;font-family:var(--f-bord);font-weight:600;font-stretch:84%;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--messing);margin-bottom:1rem;
}
.voetgevel nav a,.voet-lijst a{display:block;text-decoration:none;color:rgba(255,255,255,.8);margin-bottom:.55rem;font-size:.98rem}
.voetgevel nav a:hover,.voet-lijst a:hover{color:var(--optekst);text-decoration:underline;text-underline-offset:.25em}
.voet-onder{
  border-top:1px solid rgba(255,255,255,.14);padding-block:1.4rem;
  font-family:var(--f-bord);font-weight:500;font-stretch:88%;
  font-size:.74rem;letter-spacing:.06em;color:rgba(255,255,255,.5);
}

/* ---------- Vaste balk op mobiel ---------- */
.duimbalk{display:none}

/* ---------- Onthullen bij scrollen ---------- */
.js .onthul{opacity:0;transform:translateY(1rem);transition:opacity .6s ease,transform .6s ease}
.js .onthul.zichtbaar{opacity:1;transform:none}
.js .onthul[data-t="1"]{transition-delay:.08s}
.js .onthul[data-t="2"]{transition-delay:.16s}

/* ==========================================================================
   Kleine schermen: een eigen indeling, niet de laptopversie ingeperst
   ========================================================================== */
@media (max-width:1000px){
  .afspraak-rooster,.philip-rooster,.contact-rooster,.prijskaart,.meter-uitkomst{grid-template-columns:1fr}
  .philip-portret{max-width:22rem}
  .philip-portret .emaille{right:auto;left:1rem}
  .wegwijzers{grid-template-columns:1fr 1fr}
  .wegwijzer-1{grid-column:1 / -1}
  .wegwijzer-2,.wegwijzer-3{margin-top:0}
  .branches{grid-template-columns:1fr 1fr}
  .branche:nth-child(2),.branche:nth-child(3){margin-top:0}
  .etalage-rooster{grid-template-columns:1fr}
  .etalage-tekst{order:2;justify-self:stretch;max-width:none}
  .etalage-foto{order:1;min-height:0;height:clamp(170px,34vw,260px)}
  .etalage-foto img{position:relative;object-position:50% 34%}
  .etalage-foto::after{background:linear-gradient(180deg,rgba(16,37,64,.15) 0,rgba(16,37,64,.75) 100%)}
  .voetgevel-rooster{grid-template-columns:1fr 1fr}
  .voetgevel-merk{grid-column:1 / -1}
}

@media (max-width:720px){
  :root{--balk-hoogte:67px}
  .omhulsel,.omhulsel-smal,.omhulsel-mid{width:calc(100% - 2.2rem)}
  .menu{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--gevel);border-bottom:1px solid rgba(255,255,255,.13);
    padding:.6rem 1.1rem 1.4rem;
  }
  .menu.open{display:flex}
  .menu li{border-top:1px solid rgba(255,255,255,.14)}
  .menu li:first-child{border-top:0}
  .menu a{display:block;padding:.95rem .2rem;font-size:.86rem}
  .menu a[aria-current="page"]::after{display:none}
  .menu .menu-knop-item{display:none}
  .menu-knop{display:block}
  .gevelbalk .knop-mobiel{display:inline-flex}
  .gevelbalk-rij{gap:.7rem;min-height:66px}
  .merk .merk-boven{font-size:.98rem}
  .merk .merk-onder{font-size:.55rem;letter-spacing:.26em}

  /* Raakzones van minimaal 44px, ook voor de kleine links */
  .menu-knop{padding:.65rem}
  .gevelbalk .knop-mobiel{padding-block:.72rem}
  .vragen-meer{padding-block:.75rem}
  .voetgevel nav a,.voet-lijst a{padding-block:.62rem;margin-bottom:.15rem}

  /* Schuif en uitkomst samen in beeld: de balk zakt onder de bedragen */
  .meter{display:flex;flex-direction:column}
  .meter-knoppen{order:1;padding-block:1.3rem}
  .meter-uitkomst{order:2;margin-top:0;border-top:1px solid var(--lijn-sterk)}
  .meter-balk{order:3;padding-top:1.4rem}
  .meter-slot{order:4;margin-top:1.4rem}
  .uitkomst-links{border-top:0}

  .knoppen{flex-direction:column;align-items:stretch}
  .knoppen .knop{justify-content:center;width:100%}
  .meter-knoppen{grid-template-columns:1fr;gap:1.6rem}
  .wegwijzers,.branches{grid-template-columns:1fr}
  .wegwijzer-1{grid-column:auto}
  .voetgevel-rooster{grid-template-columns:1fr;gap:2rem}
  .philip-portret .emaille{left:auto;right:.8rem}

  /* Bellen of appen met één tik, altijd binnen bereik */
  .duimbalk{
    display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:90;
    border-top:2px solid var(--messing);
  }
  .duimbalk a{
    display:flex;align-items:center;justify-content:center;gap:.55rem;
    padding:.95rem .6rem;text-decoration:none;color:var(--optekst);
    font-family:var(--f-bord);font-weight:600;font-stretch:92%;font-size:.92rem;
  }
  .duimbalk .bellen{background:var(--gevel-diep)}
  .duimbalk .appen{background:var(--gevel-licht)}
  .voetgevel{padding-bottom:4.4rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js .onthul{opacity:1;transform:none}
}

/* ==========================================================================
   Losse onderdelen op de binnenpagina's
   ========================================================================== */
.alleen-voorlezen{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.paginakop{padding-top:clamp(2.6rem,5vw,4.2rem);padding-bottom:clamp(2.2rem,4vw,3.4rem)}
.paginakop h1{max-width:20ch}

.stappen{border-bottom:1px solid var(--lijn-sterk);max-width:52rem}
.stap-slot{max-width:52rem}
.stap-slot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;
  margin-top:clamp(2rem,4vw,3rem);padding:clamp(1.5rem,3vw,2.2rem);
  background:var(--kalk-diep);border:1px solid var(--lijn-sterk);border-radius:2px;
}
.stap-slot p{max-width:44ch;margin:0;color:var(--inkt-zacht)}

.voorwie-slot{
  margin-top:clamp(2.4rem,4vw,3.2rem);max-width:40ch;
  font-family:var(--f-bord);font-weight:600;font-stretch:106%;
  font-size:clamp(1.25rem,1.05rem + .9vw,1.7rem);line-height:1.34;color:var(--inkt);
}

.vraagpagina{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.vraagpagina-kop{position:sticky;top:7rem}
.vraagpagina-kop h1{max-width:9ch}
.vraagpagina .vragen{margin-top:0}
.vraag-contact{list-style:none;display:grid;gap:1rem;margin-top:2.2rem}
.vraag-contact li{display:grid;gap:.1rem}
.vraag-contact .label{
  font-family:var(--f-bord);font-weight:600;font-stretch:84%;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--messing-diep);
}
.vraag-contact a{
  font-family:var(--f-bord);font-weight:600;font-stretch:104%;font-size:1.02rem;
  color:var(--inkt);text-decoration:none;
}
.vraag-contact a:hover{text-decoration:underline;text-underline-offset:.25em}

.kaart-noot{margin-top:1rem;font-size:.9rem;color:var(--inkt-vaag);max-width:60ch}

/* Kleine kaartjes voor bedankt- en 404-pagina */
.bericht{min-height:70vh;display:grid;place-items:center;padding:clamp(2rem,6vw,5rem) 0}
.bericht-kaart{
  width:min(560px,100% - 2.4rem);background:var(--kalk-wit);
  border:1px solid var(--lijn-sterk);border-radius:3px;padding:clamp(2rem,4vw,3rem);
}
.bericht-kaart h1{font-size:clamp(1.7rem,1.3rem + 1.8vw,2.4rem);margin-bottom:.9rem}
.bericht-kaart p{color:var(--inkt-zacht);margin-bottom:.7rem}
.bericht-code{
  font-family:var(--f-bord);font-weight:800;font-stretch:110%;
  font-size:clamp(3rem,2rem + 4vw,4.6rem);line-height:1;color:var(--messing-diep);
  letter-spacing:-.03em;margin-bottom:.6rem;
}
.bericht-vink{
  width:3.2rem;height:3.2rem;background:var(--gevel);color:var(--messing);
  display:grid;place-items:center;border-radius:2px;margin-bottom:1.3rem;
}
.bericht-contact{
  margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--lijn-sterk);
  font-size:.92rem;color:var(--inkt-vaag);
}
.bericht-contact a{color:var(--inkt);text-decoration:none;font-weight:600}
.bericht-contact a:hover{text-decoration:underline;text-underline-offset:.25em}

@media (max-width:1000px){
  .vraagpagina{grid-template-columns:1fr}
  .vraagpagina-kop{position:static}
  .vraagpagina-kop h1{max-width:none}
}
@media (max-width:720px){
  .stap-slot{flex-direction:column;align-items:stretch}
  .stap-slot .knop{justify-content:center}
}

/* ---------- Foutmelding bij een veld ---------- */
.veld-fout{
  display:block;font-family:var(--f-bord);font-weight:600;font-stretch:96%;
  font-size:.85rem;line-height:1.4;color:var(--menie);margin-top:.15rem;
}
.veld input[aria-invalid="true"],.veld textarea[aria-invalid="true"]{border-color:var(--menie)}

/* ---------- Wat er nu gebeurt, op de contactpagina ---------- */
.stappen-kort{list-style:none;counter-reset:stap;display:grid;gap:1.1rem;margin-bottom:1.8rem}
.stappen-kort li{
  counter-increment:stap;display:grid;grid-template-columns:1.9rem 1fr;gap:.9rem;align-items:start;
}
.stappen-kort li::before{
  content:counter(stap);grid-column:1;grid-row:1;
  font-family:var(--f-bord);font-weight:800;font-stretch:112%;font-size:1.05rem;
  color:var(--messing);line-height:1.35;
}
.stappen-kort b{
  grid-column:2;grid-row:1;
  font-family:var(--f-bord);font-weight:600;font-stretch:104%;
  font-size:1rem;line-height:1.3;color:var(--optekst);
}
.stappen-kort span{grid-column:2;grid-row:2;font-size:.95rem;color:rgba(255,255,255,.76);margin-top:.15rem}
.contact-zij .voet-kop{margin-top:.4rem}
.contact-zij .contact-regels{padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}

/* ---------- Lijstje op de bedankpagina ---------- */
.klaarleggen{list-style:none;display:grid;gap:.6rem;margin:.2rem 0 1.4rem}
.klaarleggen li{display:grid;grid-template-columns:.55rem 1fr;gap:.8rem;align-items:start;color:var(--inkt-zacht);font-size:.98rem}
.klaarleggen li::before{content:"";width:.45rem;height:.45rem;margin-top:.62rem;border-radius:50%;background:var(--messing)}
.bericht-kaart .voet-kop{color:var(--messing-diep);margin-top:.4rem}

/* ==========================================================================
   Donkere modus: dezelfde winkelpui, na sluitingstijd
   ========================================================================== */
@media (prefers-color-scheme:dark){
  :root{
    --kalk:#0C1626;
    --kalk-diep:#080F1B;
    --kalk-wit:#14213551;
    --kalk-wit:#142135;
    --gevel:#16294A;
    --gevel-diep:#0A1424;
    --gevel-licht:#22406B;
    --messing:#A8C4EE;
    --messing-diep:#A8C4EE;
    --menie:#E07A6C;
    --inkt:#E8EDF5;
    --inkt-zacht:#B4BFD0;
    --inkt-vaag:#94A1B5;
    --lijn:#22304A;
    --lijn-sterk:#31405C;
    --rand-ui:#77869E;
    --focus:#A8C4EE;
    --accent:#A8C4EE;
    --zacht:#B4BFD0;
    --knop-vlak:#E8EDF5;
    --knop-tekst:#0C1626;
    --balk:rgba(12,22,38,.74);
  }
  .knop-inkt{border-color:var(--lijn-sterk);color:var(--inkt)}
  .knop-inkt:hover{border-color:var(--inkt);background:rgba(232,237,245,.07)}
  .prijskaart-zij{background:var(--kalk-wit)}
  .veld input,.veld textarea{background:var(--kalk-diep);color:var(--inkt)}
  .kaart iframe{filter:saturate(.7) brightness(.85)}
}