:root{
  /* rastersysteem: één 44px-cel site-breed; --raster-lijn wisselt per context */
  --raster-cel:44px;
  --raster-lijn:rgba(20,56,60,.035);   /* licht: donkere lijnen op het papier */
  --accent:#BD4128;        /* koraal op licht (AA op koel wit) */
  --accent-licht:#FF7A5C;  /* koraal op donker */
  --accent-hover:#A93A24;
  --knop-tekst:#FFF6F2;    /* tekst op de koraal-knop */
  --ink:#14383C;           /* petrol-zwart */
  --petrol:#0F2D31;        /* donkere vlakken */
  --petrol-2:#143C41;
  --paper:#EDF0EE;         /* koel wit */
  --white:#FFFFFF;
  --licht:#DCE6E2;         /* vaste lichte tekst op donker */
  --ok:#4FE3A1;            /* statusmint: steekt af tegen het groenige petrol */
  --nevel:#9DB4AE;         /* gedempte mono op donker */
  --focus:var(--accent);   /* focusring; donkere contexten zetten hem op --accent-licht */
  --line:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.06);
  /* layoutsysteem: een container, een kantlijn, een sectieafstand.
     Breekpunten: 640, 1024, 1440. */
  --container:1320px;
  --pad:24px;          /* horizontale containerpadding, mobiel */
  --sectie:64px;       /* sectieafstand boven en onder, mobiel */
  --kolomgat:24px;     /* kolomafstand in het 12-koloms raster, mobiel */
  --regelbreedte:68ch; /* maximale regelbreedte van lopende tekst */
  --radius-hero:28px;
  --font-display:"Bricolage Grotesque","Bricolage Grotesque Fallback",sans-serif;
  --font-body:"Instrument Sans","Instrument Sans Fallback",sans-serif;
  --font-mono:"IBM Plex Mono","Courier New",monospace;
}
@media (min-width:1024px){ body{font-size:17px} }
@media (min-width:640px){ :root{--pad:40px} }
@media (min-width:1024px){ :root{--pad:64px;--sectie:96px;--kolomgat:32px} }

/* fallback-fonts met size-adjust: minder tekstverspringing terwijl de
   webfonts laden (Plex Mono heeft Courier als metrisch vergelijkbare
   fallback al in de stack) */
@font-face{
  font-family:"Instrument Sans Fallback";
  src:local("Arial");
  size-adjust:99%;
}
@font-face{
  font-family:"Bricolage Grotesque Fallback";
  src:local("Arial");
  size-adjust:105%;
}

*{margin:0;padding:0;box-sizing:border-box}
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto} /* ankersprongen niet animeren bij reduced motion */
}
/* ===== RASTERSYSTEEM: millimeterpapier als herbruikbare laag =====
   Licht (body): één doorlopend vel over de hele pagina, zelfde offset
   t.o.v. de viewport, vervaagt alleen naar de zijranden. Donker: witte
   lijnen op lage opacity in de hero, het menu en de donkere panelen.
   Puur CSS-gradients; de content van de panelen is gepositioneerd en
   blijft boven de rasterlaag. */
.hero,.mobiel-menu,.work-panel,.dark-panel,.cta-panel,.beheer-panel{
  --raster-lijn:rgba(255,255,255,.05); /* donker: net zichtbaar, zoals licht */
}
body::before,
.hero::before,.mobiel-menu::before,
.work-panel::after,.dark-panel::after,.cta-panel::after,.beheer-panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:
    linear-gradient(var(--raster-lijn) 1px,transparent 1px),
    linear-gradient(90deg,var(--raster-lijn) 1px,transparent 1px);
  background-size:var(--raster-cel) var(--raster-cel);
}
body::before{
  z-index:-1;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
/* panelen: vervagen vanuit de kop naar de randen, elk vanuit een eigen punt */
.work-panel::after,.dark-panel::after,.beheer-panel::after{
  -webkit-mask-image:radial-gradient(110% 90% at 50% 12%, #000 35%, transparent 100%);
  mask-image:radial-gradient(110% 90% at 50% 12%, #000 35%, transparent 100%);
}
.cta-panel::after{
  -webkit-mask-image:radial-gradient(110% 90% at 50% 30%, #000 35%, transparent 100%);
  mask-image:radial-gradient(110% 90% at 50% 30%, #000 35%, transparent 100%);
}

body{
  position:relative;
  font-family:var(--font-body);
  font-size:16px;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* Vangnet voor toetsenbordfocus: alles wat bereikbaar is krijgt een
   zichtbare ring in de accentkleur. Componenten die hun eigen ring zetten
   winnen hiervan door hun hogere specificiteit. Elementen met tabindex="-1"
   zijn programmatische focusdoelen en horen hier bewust niet bij. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}

/* ===== HERO SHELL ===== */
.hero-shell{padding:16px}

/* Kantlijn binnen de hero. De hero is door .hero-shell 16px ingesprongen;
   die 16px wordt hier gecompenseerd zodat het logo, het eerste menu-item en
   de hero-inhoud exact op dezelfde x-positie beginnen als .wrap daarbuiten.
   Binnen de hero is 100% gelijk aan de viewport min 32px. */
.nav,.orchestra{
  padding-inline:calc(var(--pad) - 16px + max(0px, (100% + 32px - var(--container)) / 2));
}

.hero,.mobiel-menu,.work-panel,.dark-panel,.cta-panel,.beheer-panel,
.demo-uitkomst,.prijsbalk,.info-popup,.offerte-brief{--focus:var(--accent-licht)}

.hero{
  position:relative;
  --gloed-a:rgba(255,122,92,.32);
  --gloed-b:rgba(189,65,40,.35);
  border-radius:var(--radius-hero);
  background:
    radial-gradient(900px 600px at 78% 8%, var(--gloed-a), transparent 60%),
    radial-gradient(700px 520px at 12% 92%, var(--gloed-b), transparent 60%),
    linear-gradient(150deg, #0F2D31 0%, #17454C 62%, #BD4128 165%);
  color:var(--white);
  overflow:hidden;
  isolation:isolate;
}
/* pixelraster: patroon uit het gedeelde rastersysteem, hier alleen laag + masker */
.hero::before{
  z-index:-1;
  mask-image:radial-gradient(1000px 700px at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(1000px 700px at 50% 30%, #000 30%, transparent 80%);
}
/* een paar 'opgelichte' cellen */
.hero::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(44px 44px at 220px 130px, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(44px 44px at 82% 22%, rgba(255,255,255,.09), transparent 70%),
    radial-gradient(44px 44px at 90% 70%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(44px 44px at 8% 55%, rgba(255,255,255,.07), transparent 70%);
}

/* muisvolgend licht: zit in de negatieve stacking-laag van de hero,
   boven het basisraster (::before) maar onder alle content, dus de
   leesbaarheid van tekst en kaart blijft onaangetast. Posities komen
   als --mx/--my uit js/main.js; per frame veranderen alleen die twee
   custom properties. */
.hero-glow{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .4s ease;
  background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%), rgba(255,122,92,.25), transparent 70%);
}
.hero-glow.on{opacity:1}
/* bonus: fellere rasterlijnen die alleen rond de cursor oplichten */
.hero-glow::after{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size:var(--raster-cel) var(--raster-cel);
  -webkit-mask-image:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), #000, transparent);
  mask-image:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), #000, transparent);
}

/* ===== NAV ===== */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:22px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  text-decoration:none;letter-spacing:-.01em;
  padding:8px 0; /* tap-target ≥44px */
}
.brand-mark{
  height:28px;width:auto;flex:0 0 auto;
  color:var(--accent);
}
.nav-pills{
  display:flex;gap:4px;align-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  border-radius:999px;padding:5px;
  backdrop-filter:blur(8px);
}
.nav-pills a{
  text-decoration:none;font-size:.9rem;font-weight:500;
  color:rgba(255,255,255,.82);
  padding:8px 16px;border-radius:999px;
  transition:background .2s,color .2s;
  white-space:nowrap;   /* een menu-item hoort niet over twee regels te breken */
}
.nav-pills a:hover,.nav-pills a:focus-visible{background:rgba(255,255,255,.14);color:var(--white)}
.nav-pills a.active{background:var(--white);color:var(--ink)}
/* Diensten-dropdown. De knop is visueel een gewone pil; alleen de chevron en
   het paneel komen erbij. De klasse .open op .nav-groep is de enige waarheid,
   JS houdt aria-expanded daaraan gelijk. Laadt het script niet, dan zet
   niemand .nav-groep--js en nemen de hover- en focus-within-regels het over,
   zodat het menu ook dan met muis en toetsenbord bereikbaar blijft. */
.nav-groep{position:relative;display:flex}
.nav-trigger{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:.9rem;font-weight:500;
  color:rgba(255,255,255,.82);
  padding:8px 16px;border-radius:999px;
  transition:background .2s,color .2s;
  white-space:nowrap;
}
.nav-trigger:hover,.nav-trigger:focus-visible{background:rgba(255,255,255,.14);color:var(--white)}
.nav-trigger.active{background:var(--white);color:var(--ink)}
.nav-chevron{width:11px;height:11px;flex:0 0 auto;transition:transform .2s ease}
.nav-groep.open .nav-chevron{transform:rotate(180deg)}
.nav-submenu{
  position:absolute;top:calc(100% + 12px);left:0;z-index:30;
  min-width:210px;margin:0;padding:6px;list-style:none;
  background:var(--petrol);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  visibility:hidden;opacity:0;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
}
.nav-groep.open .nav-submenu,
.nav-groep:not(.nav-groep--js):hover .nav-submenu,
.nav-groep:not(.nav-groep--js):focus-within .nav-submenu{
  visibility:visible;opacity:1;transform:none;
  transition:opacity .2s ease,transform .2s ease;
}
/* onzichtbare brug tussen pil en paneel, zodat de muis er niet doorheen valt */
.nav-submenu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-submenu a{
  display:block;
  text-decoration:none;font-size:.9rem;font-weight:500;
  color:rgba(255,255,255,.82);
  padding:8px 16px;border-radius:999px;
  transition:background .2s,color .2s;
  white-space:nowrap;
}
.nav-submenu a:hover,.nav-submenu a:focus-visible{background:rgba(255,255,255,.14);color:var(--white)}
.nav-submenu a.active{background:var(--white);color:var(--ink)}
@media (prefers-reduced-motion: reduce){
  .nav-chevron{transition:none}
  .nav-submenu{transform:none;transition:visibility 0s linear .2s}
  .nav-groep.open .nav-submenu,
  .nav-groep:not(.nav-groep--js):hover .nav-submenu,
  .nav-groep:not(.nav-groep--js):focus-within .nav-submenu{transition:none}
}
/* groen statuspuntje voor het Demo-item: de demo staat "live", in dezelfde
   taal als de automatisering-actief-badge */
.demo-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--ok);margin-right:7px;vertical-align:2px;
}
/* in het flex-menu-item neemt het puntje de bestaande gap in beslag,
   zodat "Demo" uitgelijnd blijft met de andere menuwoorden */
.menu-item .demo-dot{width:8px;height:8px;margin:0 -8px;align-self:center}
.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:.95rem;
  padding:12px 24px;border-radius:999px;
  transition:transform .18s,box-shadow .18s,background .2s;
}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.btn-white{background:var(--white);color:var(--ink)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
button.btn{font:inherit;font-weight:600;cursor:pointer} /* buttons erven het font niet vanzelf */
.btn-ghost{background:none;border:1px solid rgba(255,255,255,.35);color:var(--white)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.nav .btn{padding:10px 20px}
/* De balk werd met zeven pillen net te breed vlak boven het punt waar het
   mobiele menu overneemt; daarom staan de pillen daar strakker. Met de
   drie diensten onder een dropdown zijn het er nog vijf, dus de ruimte is
   ruimer dan voorheen. De regels blijven staan als marge voor de brede
   merknaam en de brede knop; ze houden alleen in, ze breken niets. */
@media (min-width:961px) and (max-width:1120px){
  .nav-pills a,.nav-trigger{padding:8px 11px;font-size:.85rem}
  .nav .btn{padding:10px 16px;font-size:.88rem}
}

/* Onder de 1000px de pillen en de knop nog iets verder inhouden. */
@media (min-width:961px) and (max-width:1000px){
  .nav-pills a,.nav-trigger{padding:8px 8px;font-size:.82rem}
  .nav .btn{padding:9px 12px;font-size:.84rem}
}

/* ===== MOBIEL MENU ===== */
/* trigger: ronde glasknop, alleen <961px zichtbaar (zie media query) */
.nav-burger{
  display:none;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;
  padding:0 12px;cursor:pointer;
  flex:0 0 auto;
}
.nav-burger:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.burger-lijn{
  display:block;height:2px;background:var(--white);border-radius:2px;
  transition:transform .3s ease,width .3s ease;
}
.burger-lijn--boven{width:18px}
.burger-lijn--onder{width:12px}
.nav-burger[aria-expanded="true"] .burger-lijn--boven{width:18px;transform:translateY(3.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] .burger-lijn--onder{width:18px;transform:translateY(-3.5px) rotate(-45deg)}
/* open: boven het overlay uitgetild om als kruis te kunnen sluiten.
   De isolation van de hero staat dan tijdelijk uit (body.menu-open),
   anders kan de knop nooit boven het overlay uitkomen; de hero is op
   dat moment toch volledig door het paneel afgedekt. */
.nav-burger.raise{
  position:fixed;z-index:110;
  top:calc(38px + env(safe-area-inset-top, 0px));
  right:calc(46px + env(safe-area-inset-right, 0px));
}
body.menu-open .hero{isolation:auto}

/* fullscreen overlay in de systeemtaal van de hero */
.mobiel-menu{
  position:fixed;inset:0;z-index:100;
  height:100vh;height:100dvh; /* dvh: browserbalken op iOS tellen mee */
  display:flex;flex-direction:column;
  padding:80px 30px calc(18px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(900px 600px at 78% 8%, rgba(255,122,92,.32), transparent 60%),
    radial-gradient(700px 520px at 12% 92%, rgba(189,65,40,.35), transparent 60%),
    linear-gradient(150deg, #0F2D31 0%, #17454C 62%, #BD4128 165%);
  color:var(--white);
  visibility:hidden;opacity:0;filter:blur(8px);
  transition:opacity .35s ease,filter .35s ease,visibility 0s linear .35s;
}
.mobiel-menu::before{
  mask-image:radial-gradient(700px 600px at 50% 35%, #000 30%, transparent 85%);
  -webkit-mask-image:radial-gradient(700px 600px at 50% 35%, #000 30%, transparent 85%);
}
.mobiel-menu.open{
  visibility:visible;opacity:1;filter:none;
  transition:opacity .35s ease,filter .35s ease;
}
/* de lijst vult de resthoogte en centreert; de foot blijft zo altijd in beeld */
.menu-lijst{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:4px;position:relative}
.menu-item{
  display:flex;align-items:baseline;gap:12px;
  font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1.25;
  letter-spacing:-.02em;color:var(--white);text-decoration:none;
  padding:7px 0; /* tap-target 44px */
}
.menu-item:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:6px}
/* Gestaffeld verschijnen, ~60ms per item. Dit telt over de directe kinderen
   van de lijst en niet over .menu-item, want de Diensten-groep is een blok
   met een knop erin: die moet als een geheel invliegen, niet twee keer. */
.menu-lijst > *{
  opacity:0;transform:translateY(16px);
  transition:opacity .4s ease,transform .4s ease;
}
.mobiel-menu.open .menu-lijst > *{opacity:1;transform:none}
.mobiel-menu.open .menu-lijst > *:nth-child(2){transition-delay:.06s}
.mobiel-menu.open .menu-lijst > *:nth-child(3){transition-delay:.12s}
.mobiel-menu.open .menu-lijst > *:nth-child(4){transition-delay:.18s}
.mobiel-menu.open .menu-lijst > *:nth-child(5){transition-delay:.24s}
.mobiel-menu.open .menu-lijst > *:nth-child(6){transition-delay:.3s}
.mobiel-menu.open .menu-lijst > *:nth-child(7){transition-delay:.36s}
.mobiel-menu.open .menu-lijst > *:nth-child(8){transition-delay:.42s}

/* Diensten-accordeon: alleen tikken, geen hover. Het paneel groeit via
   grid-template-rows van 0fr naar 1fr, zodat de hoogte niet vastgelegd
   hoeft te worden. Dicht is de sublijst ook echt onbereikbaar
   (visibility:hidden), anders zou Tab in de weggeklapte links belanden. */
.menu-groep{display:flex;flex-direction:column}
.menu-groep__knop{
  align-items:center;gap:10px;
  width:100%;text-align:left;
  background:none;border:0;cursor:pointer;
}
.menu-chevron{
  width:15px;height:15px;flex:0 0 auto;
  color:var(--accent-licht);
  transition:transform .25s ease;
}
.menu-groep.open .menu-chevron{transform:rotate(180deg)}
.menu-groep__paneel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .3s ease;
}
.menu-groep.open .menu-groep__paneel{grid-template-rows:1fr}
.menu-sublijst{
  list-style:none;margin:0;padding:0;
  min-height:0;overflow:hidden;
  visibility:hidden;transition:visibility 0s linear .3s;
}
.menu-groep.open .menu-sublijst{visibility:visible;transition:visibility 0s}
.menu-subitem{
  display:flex;align-items:center;min-height:44px; /* tap-target */
  padding-left:20px;
  font-family:var(--font-display);font-weight:500;font-size:1.15rem;
  letter-spacing:-.01em;color:rgba(255,255,255,.85);text-decoration:none;
}
.menu-subitem:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:6px}
/* index in de accent-familie; puur accent op 60% is onleesbaar op het
   donkere paneel, dus de opgelichte variant (zelfde afweging als AA) */
.menu-foot{
  position:relative;display:flex;flex-direction:column;gap:8px;flex:0 0 auto;
}
.menu-status{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.05em;
  color:rgba(255,255,255,.75);
}
.menu-mail{
  display:flex;align-items:center;min-height:44px; /* tap-target ≥44px */
  font-family:var(--font-mono);font-size:.85rem;
  color:rgba(255,255,255,.85);text-decoration:none;
}
.menu-mail:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.menu-cta{width:100%;text-align:center;padding:13px 24px}

@media (prefers-reduced-motion: reduce){
  .burger-lijn{transition:none}
  .mobiel-menu{transition:none;filter:none}
  .menu-lijst > *{opacity:1;transform:none;transition:none}
  .mobiel-menu.open .menu-lijst > *{transition-delay:0s}
  .menu-chevron{transition:none}
  .menu-groep__paneel{transition:none}
  .menu-sublijst{transition:none}
}

/* ===== HERO CONTENT ===== */
.hero-inner{
  text-align:center;
  padding:56px 24px 0;
  max-width:880px;margin:0 auto;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(40px, 5.4vw, 64px);
  line-height:1.08;
  letter-spacing:-.02em;
}
.hero h1 .thin{font-weight:500;color:rgba(255,255,255,.85)}
.hero-sub{
  margin:20px auto 0;
  max-width:var(--regelbreedte);
  color:rgba(255,255,255,.75);
  font-size:1.05rem;
}
.hero-cta{display:flex;gap:14px;justify-content:center;margin-top:32px;flex-wrap:wrap}

/* ===== ORCHESTRATIE ===== */
.orchestra{
  position:relative;
  display:grid;
  grid-template-columns:1fr minmax(0,620px) 1fr;
  align-items:center;
  gap:0;
  padding:64px 0 70px;
}
.spark{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.07);
  border:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.spark svg{width:22px;height:22px;stroke:var(--white)}
.node{
  position:absolute;left:0;top:0;z-index:2;
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.72rem;
  color:rgba(255,255,255,.65);
  letter-spacing:.04em;
  touch-action:none;
  cursor:grab;
  user-select:none;-webkit-user-select:none;
  visibility:hidden; /* js/main.js plaatst de nodes en zet .ready op .orchestra */
  --drag-scale:1;
}
.orchestra.ready .node{visibility:visible}
.node--left{flex-direction:row}
.node--right{flex-direction:row-reverse}
.node.dragging{cursor:grabbing;z-index:3;--drag-scale:1.06}
.node.dragging .node-icon{box-shadow:0 16px 38px rgba(0,0,0,.45)}
.node.returning{transition:transform .4s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion: reduce){
  .node.dragging{--drag-scale:1}
  .node.returning{transition:none}
}
.node-icon{
  width:52px;height:52px;border-radius:15px;
  display:grid;place-items:center;flex:0 0 auto;
  background:rgba(255,255,255,.09);
  border:1px solid var(--line);
  backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.node-icon svg{width:22px;height:22px;stroke:var(--white);opacity:.9}
.node-label{white-space:nowrap}

/* verbindingslijnen (paths worden door js/main.js getekend) */
.wires{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible}
.wires path{
  fill:none;
  stroke:rgba(255,255,255,.28);
  stroke-width:1.5;
  stroke-dasharray:3 6;
}
@media (prefers-reduced-motion: no-preference){
  .wires path{animation:dashflow 2.6s linear infinite}
}
@keyframes dashflow{to{stroke-dashoffset:-18}}

/* Keuze tussen de voorbeelden: zelfde pil-groep als de navigatie in de
   header, een maatje kleiner. Staat in de grid-kolom van de kaart, boven de
   kaart en onder de bliksem; de bovenmarge houdt hem onder de bliksem vandaan.
   Verborgen zolang JavaScript de knoppen niet heeft gezet. */
.hero-tabs{
  grid-column:2;justify-self:center;
  display:inline-flex;gap:4px;align-items:center;
  margin:16px 0 14px;padding:5px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  border-radius:999px;
  backdrop-filter:blur(8px);
  --focus:var(--accent-licht);
}
.hero-tabs[hidden]{display:none}
.hero-tab{
  background:none;border:0;cursor:pointer;touch-action:manipulation;
  font-family:inherit;font-size:.82rem;font-weight:500;
  color:rgba(255,255,255,.82);
  padding:6px 14px;border-radius:999px;
  transition:background .2s,color .2s;
  white-space:nowrap;
}
.hero-tab:hover{background:rgba(255,255,255,.14);color:var(--white)}
.hero-tab:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hero-tab[aria-selected="true"]{background:var(--white);color:var(--ink)}

/* de glazen kaart */
.glass-card{
  position:relative;z-index:2;
  grid-column:2;
  background:linear-gradient(180deg, rgba(20,60,65,.85), rgba(20,56,60,.9));
  border:1px solid var(--line);
  border-radius:20px;
  padding:26px 28px 0;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  text-align:left;
}
.card-badge{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;
  color:var(--ink);
  background:var(--ok);
  border-radius:999px;padding:5px 12px;
  font-weight:500;
}
.card-badge .pulse{
  width:6px;height:6px;border-radius:50%;background:var(--ink);
}
@media (prefers-reduced-motion: no-preference){
  .card-badge .pulse{animation:pulse 1.6s ease-in-out infinite}
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.glass-card h2{
  font-family:var(--font-display);
  font-size:1.25rem;font-weight:700;letter-spacing:-.01em;
  margin:14px 0 4px;color:var(--white);
}
.card-sub{font-size:.9rem;color:rgba(255,255,255,.6)}
/* Alle voorbeelden staan tegelijk in het log, over elkaar in dezelfde
   grid-cel. Het log is daardoor altijd zo hoog als het langste voorbeeld en
   de pagina springt niet bij wisselen. Alleen de actieve lijst is zichtbaar;
   de rest is met visibility ook voor hulpmiddelen weg. */
.card-log{margin:18px 0 20px;display:grid}
.log-lijst{grid-area:1/1;display:flex;flex-direction:column;gap:9px}
.log-lijst--stil{visibility:hidden}
.log-line{
  display:flex;align-items:baseline;gap:12px;
  font-family:var(--font-mono);font-size:.8rem;
  color:rgba(255,255,255,.78);
  opacity:0;transform:translateY(6px);
  transition:opacity .4s,transform .4s;
}
.log-line.show{opacity:1;transform:none}
.log-time{color:rgba(255,255,255,.62);flex:0 0 auto;min-width:var(--tijdbreedte,auto)}
.log-task{flex:1;min-width:0}
.log-check{color:var(--ok);flex:0 0 auto}
.card-foot{
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);
  margin:0 -28px;padding:14px 28px;
  font-family:var(--font-mono);font-size:.78rem;
  color:rgba(255,255,255,.55);
  border-radius:0 0 20px 20px;
  background:rgba(255,255,255,.03);
}
.card-foot strong{color:var(--white);font-size:1.05rem;font-weight:500}

/* ===== SECTIES ONDER DE HERO ===== */
section{padding:var(--sectie) 0}
/* opeenvolgende secties tellen hun afstand niet dubbel: alleen de eerste
   sectie van een pagina houdt padding boven. Vervangt de inline
   style="padding-top:0" die eerder in de HTML stond. */
section:not(:first-of-type){padding-top:0}
.eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);
}
.section-head h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(32px,3.4vw,44px);
  letter-spacing:-.02em;line-height:1.15;
  margin-top:10px;max-width:var(--regelbreedte);
}
.section-head p{margin-top:14px;max-width:var(--regelbreedte);color:rgba(20,56,60,.7)}

/* het lichte raster komt site-breed van body::before (rastersysteem);
   secties hebben geen eigen laag meer, zodat het één vel papier is */
.section-tech{position:relative}

.feature-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;
  position:relative;
}

/* dataflow-lijn: dezelfde stippellijn-taal als de hero-wires, achter de
   cards langs, zichtbaar in de gaten ertussen. Alleen op desktop. */
.dataflow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
.dataflow line{stroke:rgba(189,65,40,.35);stroke-width:1.5;stroke-dasharray:3 6}
@media (min-width:961px){.dataflow{display:block}}
@media (prefers-reduced-motion: no-preference){
  .dataflow line{animation:dashflow 2.6s linear infinite}
}

/* feature-cards als systeemmodules */
.feature{
  position:relative;
  background:var(--white);
  border:1px solid rgba(20,56,60,.12);
  border-radius:12px;padding:24px 28px 28px;
  transition:border-color .2s,box-shadow .2s;
}
/* vier HUD-hoekjes: L-vormige lijntjes die bij hover naar buiten schuiven */
.feature::before,.feature::after,
.feature .hud::before,.feature .hud::after{
  content:"";position:absolute;width:10px;height:10px;
  border:0 solid var(--accent);
  transition:transform .2s ease;pointer-events:none;
}
.feature::before{top:-1px;left:-1px;border-top-width:1.5px;border-left-width:1.5px}
.feature::after{bottom:-1px;right:-1px;border-bottom-width:1.5px;border-right-width:1.5px}
.feature .hud::before{top:-1px;right:-1px;border-top-width:1.5px;border-right-width:1.5px}
.feature .hud::after{bottom:-1px;left:-1px;border-bottom-width:1.5px;border-left-width:1.5px}

.module-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:22px;
}
/* microlabel op volle dekking: op de witte kaart haalt het oranje op 75%
   maar 3,44:1 en op 85% 4,10:1. Alleen volledig dekkend haalt het AA
   (5,32:1). De eerdere notitie van ~4,6:1 klopte niet. */
.module-label{
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;
  color:var(--accent);
}
.module-status{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.06em;
  color:rgba(20,56,60,.72);
}
.status-dot{width:6px;height:6px;border-radius:50%;background:#1E7A5F}
/* optionele module: koraal in plaats van statusgroen */
.module-status--optioneel .status-dot{background:var(--accent)}
@media (prefers-reduced-motion: no-preference){
  .status-dot{animation:pulse 1.6s ease-in-out infinite}
}
.feature-icon{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(189,65,40,.08);
  margin-bottom:18px;
}
.feature-icon svg{width:20px;height:20px;stroke:var(--accent)}
.feature h3{
  font-family:var(--font-display);font-size:1.05rem;font-weight:700;
  letter-spacing:-.01em;margin-bottom:8px;
}
.feature p{font-size:.92rem;color:rgba(20,56,60,.72)}

@media (hover: hover) and (pointer: fine){
  .feature:hover{
    border-color:var(--accent);
    box-shadow:0 0 0 1px rgba(189,65,40,.2),0 20px 50px rgba(189,65,40,.12);
  }
  .feature:hover::before{transform:translate(-3px,-3px)}
  .feature:hover::after{transform:translate(3px,3px)}
  .feature:hover .hud::before{transform:translate(3px,-3px)}
  .feature:hover .hud::after{transform:translate(-3px,3px)}
}

/* terminalregel-links onder de feature-grid; op de homepage staan er twee,
   één per doelgroep, elders één */
.grid-link{margin-top:28px;display:flex;flex-wrap:wrap;gap:0 40px}
.text-link{
  display:inline-block;
  font-family:var(--font-mono);font-size:.85rem;font-weight:500;
  color:var(--ink);text-decoration:none;
  padding:13px 0; /* tap-target ≥44px */
}
.text-link .prompt{color:var(--accent);font-weight:600}
.text-link .arrow{display:inline-block;transition:transform .2s ease}
@media (hover: hover) and (pointer: fine){
  .text-link:hover .arrow,.text-link:focus-visible .arrow{transform:translateX(4px)}
  .text-link:hover{color:var(--accent)}
}

/* compact prijsblok op de homepage; de volledige uitleg staat op /prijzen/ */
.prijs-kort{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:36px;
  background:rgba(20,56,60,.12);
  border:1px solid rgba(20,56,60,.12);border-radius:12px;overflow:hidden;
}
.prijs-post{background:var(--white);padding:20px 22px 22px}
.prijs-post__label{
  display:block;margin-bottom:10px;
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
}
.prijs-post__bedrag{
  display:flex;align-items:baseline;gap:6px;
  font-family:var(--font-display);font-weight:700;font-size:1.6rem;
  letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.prijs-post__bedrag small{
  font-family:var(--font-body);font-weight:400;font-size:.78rem;
  letter-spacing:0;color:rgba(20,56,60,.75);
}
@media (max-width:700px){.prijs-kort{grid-template-columns:1fr 1fr}}

/* betrouwbaarheid: de vier zekerheden als één strip vlak boven de footer,
   bewust zonder kop, zodat ze de paginaflow niet meer onderbreken */
.zeker-sectie{padding:0 0 var(--sectie)}
.zeker-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  list-style:none;margin:0;padding:26px 0 0;
  border-top:1px solid rgba(20,56,60,.14);
}
.zeker-punt{display:block}
.zeker-icoon{display:block;width:20px;height:20px;color:var(--accent);margin-bottom:10px}
.zeker-label{
  display:block;margin-bottom:5px;
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
}
.zeker-uitleg{display:block;font-size:.82rem;line-height:1.5;color:rgba(20,56,60,.7)}
@media (max-width:700px){.zeker-strip{grid-template-columns:1fr 1fr;gap:22px}}

/* werkwijze: één doorlopende voortgangslijn met vier knooppunten die
   zichzelf tekent bij het in beeld scrollen (klasse .play via js/main.js) */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px;
  position:relative;
}
.progress-svg{
  position:absolute;top:0;left:0;width:100%;height:12px;
  pointer-events:none;display:none;
}
.progress-line{
  stroke:rgba(189,65,40,.45);stroke-width:1.5;
  stroke-dasharray:100;stroke-dashoffset:100;
}
.steps.play .progress-line{animation:drawline 1.2s ease forwards}
@keyframes drawline{to{stroke-dashoffset:0}}
@media (min-width:961px){.progress-svg{display:block}}

.step{position:relative;padding-top:26px}
/* knooppunt */
.step::before{
  content:"";position:absolute;top:0;left:0;width:12px;height:12px;
  border-radius:50%;background:var(--paper);
  border:1.5px solid rgba(20,56,60,.25);box-sizing:border-box;
  transition:background .3s,border-color .3s;
}
.steps.play .step::before{background:var(--accent);border-color:var(--accent)}
/* stapteksten faden synchroon met de knooppunten in */
.step>*{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.steps.play .step>*{opacity:1;transform:none}
.steps.play .step:nth-child(3)::before,.steps.play .step:nth-child(3)>*{transition-delay:.3s}
.steps.play .step:nth-child(4)::before,.steps.play .step:nth-child(4)>*{transition-delay:.6s}
.steps.play .step:nth-child(5)::before,.steps.play .step:nth-child(5)>*{transition-delay:.9s}

.step-num{
  font-family:var(--font-mono);font-size:.72rem;color:var(--accent);
  letter-spacing:.08em;
}
/* blinkende blokcursor achter het stapnummer */
.step-num::after{
  content:"▌";margin-left:2px;color:var(--accent);
}
@media (prefers-reduced-motion: no-preference){
  .step-num::after{animation:blink 1s steps(2) infinite}
}
@keyframes blink{50%{opacity:0}}
.step h3{
  font-family:var(--font-display);font-size:1rem;font-weight:700;
  margin:8px 0 6px;letter-spacing:-.01em;
}
.step p{font-size:.88rem;color:rgba(20,56,60,.72)}

@media (prefers-reduced-motion: reduce){
  /* lijn en knooppunten direct zichtbaar, teksten direct leesbaar */
  .progress-line{stroke-dashoffset:0;animation:none}
  .step::before{background:var(--accent);border-color:var(--accent)}
  .step>*{opacity:1;transform:none;transition:none}
}


/* ===== SYSTEEM-PAGINA ===== */
.hero-card-wrap{max-width:660px;margin:0 auto;padding:56px 24px 70px;position:relative;z-index:2}
.syslog{display:flex;flex-direction:column;gap:15px;margin:20px 0 22px}
.syslog-row{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--font-mono);font-size:.8rem;color:rgba(255,255,255,.78);
}
.syslog-row .leader{flex:1;border-bottom:2px dotted rgba(255,255,255,.2);transform:translateY(-3px)}
.syslog-row .gedaan{color:var(--ok);flex:0 0 auto}

.section-tekst{
  margin-top:26px;max-width:var(--regelbreedte);
  color:rgba(20,56,60,.75);font-size:.98rem;
  position:relative;
}
.section-note{
  margin-top:14px;position:relative;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.02em;
  color:rgba(20,56,60,.72);
}
.section-note a{color:var(--accent)}

.table-card{
  position:relative;
  background:var(--white);
  border:1px solid rgba(20,56,60,.12);
  border-radius:12px;
  padding:6px 26px;margin-top:44px;
  overflow-x:auto;
}
.table-card table{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.5}
.table-card th{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(20,56,60,.72);
  text-align:left;font-weight:500;padding:16px 14px 10px 0;
}
.table-card td{
  padding:13px 14px 13px 0;
  border-top:1px solid rgba(20,56,60,.08);
  color:rgba(20,56,60,.8);vertical-align:top;
}

.panel-tekst{margin-top:14px;max-width:var(--regelbreedte);color:rgba(255,255,255,.7)}
.demo-acties{display:flex;flex-direction:column;gap:20px;align-items:flex-start;margin-top:36px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  padding:8px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.65);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;
}
/* beschikbare demo-branches: statuspuntje in het bestaande actief-patroon */
.chip--aan{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--licht);border-color:rgba(79,227,161,.35);
}
.chip--aan .status-dot{background:var(--ok)}

.faq{display:flex;flex-direction:column;gap:12px;margin-top:44px;max-width:var(--regelbreedte);position:relative}
.faq details{
  background:var(--white);
  border:1px solid rgba(20,56,60,.12);
  border-radius:12px;padding:0 22px;
}
.faq summary{
  font-weight:600;font-size:.98rem;
  padding:16px 30px 16px 0;cursor:pointer;list-style:none;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:1.05rem;color:var(--accent);
  transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{
  font-size:.92rem;color:rgba(20,56,60,.7);
  margin:0;padding:0 0 18px;max-width:var(--regelbreedte);
}
.faq summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}

.cta-acties{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}

/* ===== DEMO (/systeem/demo/): mobiel leidend, gewone taal =====
   Een handeling per scherm, grote knoppen, invoer van 16px of groter,
   alle tikdoelen minimaal 44px, en op elk scherm staat de volgende stap in
   een vaste onderbalk. Alles schaalt met clamp() tussen 360 en 1440px. */
.hero-inner--kort{padding-bottom:70px}

/* compacte hero: titel en een zin, op mobiel hooguit veertig procent van
   het scherm; de eerste handeling staat direct daaronder */
.hero--demo .hero-inner{padding:14px 12px 30px;max-width:720px}
.hero--demo h1{font-size:clamp(1.9rem, 3.4vw + 1rem, 3rem);line-height:1.1}
.hero--demo .hero-sub{margin-top:12px;font-size:clamp(1rem, .5vw + .9rem, 1.15rem);color:rgba(255,255,255,.84)}
@media (min-width:961px){.hero--demo .hero-inner{padding:36px 24px 52px}}

body.demo-pagina{--demo-rand:rgba(20,56,60,.14)}
/* hidden wint van elke display-regel, ook van .btn en de terugknop */
body.demo-pagina [hidden]{display:none!important}
.demo-sectie{padding:22px 0 var(--sectie)}
@media (max-width:960px){
  /* ruimte voor de vaste onderbalk, anders staat de laatste regel erachter */
  .demo-sectie{padding-bottom:calc(var(--sectie) + 130px)}
}
.demo-kolom{max-width:760px;margin:0 auto}
@media (min-width:961px){.demo-kolom--breed{max-width:1120px}} /* vier kolommen naast elkaar hebben ruimte nodig */

/* oefenbalk: een keer per scherm, gewone taal, gewone letter */
.oefenbalk{
  display:flex;gap:12px;align-items:flex-start;
  margin:0 0 16px;padding:12px 16px;
  background:var(--white);border:1px solid var(--demo-rand);border-radius:12px;
  font-size:clamp(.92rem, .3vw + .85rem, 1rem);line-height:1.5;color:rgba(20,56,60,.88);
}
.oefenbalk svg{width:22px;height:22px;flex:0 0 auto;color:var(--accent);margin-top:1px}

/* de kaart: calculator, overzicht en beheer delen dezelfde lichte kaart */
.demo-kaart{
  background:var(--white);border:1px solid var(--demo-rand);
  border-radius:18px;padding:clamp(18px, 2.5vw, 32px);
}
.beheer-panel{
  background:var(--white);color:var(--ink);border:1px solid var(--demo-rand);
  border-radius:18px;padding:clamp(18px, 2.5vw, 32px);
  position:relative;
}
.beheer-panel[hidden]{display:none}
.eyebrow--licht{color:var(--nevel)}

/* schermkop: terugknop links, korte titel rechts */
.schermkop{display:flex;align-items:center;gap:10px;min-height:44px;margin:0 0 12px}
.terug-knop{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:0 14px 0 8px;margin-left:-8px;border-radius:999px;
  background:none;border:0;color:inherit;font:inherit;font-weight:600;font-size:1rem;
  cursor:pointer;text-decoration:none;
}
.terug-knop svg{width:20px;height:20px;flex:0 0 auto}
.terug-knop:hover{background:rgba(20,56,60,.06)}
.beheer-panel .terug-knop:hover{background:rgba(20,56,60,.056)}
.terug-knop:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.schermtitel{margin-left:auto;font-size:.95rem;font-weight:600;color:rgba(20,56,60,.7)}
.beheer-panel .schermtitel{color:rgba(20,56,60,.75)}

/* kop en uitleg van een scherm of stap */
.stap-kop{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.4rem, 1.2vw + 1.05rem, 1.9rem);line-height:1.2;margin:0 0 8px;
}
.stap-kop:focus{outline:none} /* programmatisch gefocust na een stapwissel; geen bedieningselement */
.stap-uitleg{font-size:clamp(.98rem, .3vw + .9rem, 1.08rem);color:rgba(20,56,60,.82);line-height:1.55;margin:0 0 18px}
.beheer-panel .stap-uitleg{color:rgba(20,56,60,.8)}

/* voortgang: in woorden plus een dunne balk */
.voortgang{font-size:.95rem;font-weight:600;color:var(--accent)}
.voortgang-balk{height:5px;border-radius:3px;background:rgba(20,56,60,.1);margin:8px 0 20px;overflow:hidden}
.voortgang-balk span{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .2s ease}
@media (prefers-reduced-motion: reduce){.voortgang-balk span{transition:none}}

/* keuzelijst: grote aanvinkrijen (wat moet er gebeuren) */
.keuze-lijst{display:flex;flex-direction:column;gap:10px}
.keuze{
  display:grid;grid-template-columns:28px 1fr;gap:2px 14px;align-items:center;
  min-height:60px;padding:12px 16px;cursor:pointer;
  border:1px solid rgba(20,56,60,.18);border-radius:14px;background:var(--white);
  transition:border-color .15s,background .15s;
}
.keuze:has(input:checked){border-color:var(--accent);background:rgba(189,65,40,.05)}
.keuze:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.keuze input{
  appearance:none;width:44px;height:44px;margin:-9px;grid-row:1/3;
  border:0;background:none;cursor:pointer;
  display:grid;place-content:center;position:relative;
}
/* het vakje zelf is 26px, het tikdoel eromheen 44px */
.keuze input::before{
  content:"";width:26px;height:26px;border-radius:8px;
  border:2px solid rgba(20,56,60,.35);background:var(--white);box-sizing:border-box;
}
.keuze input:checked::before{background:var(--accent);border-color:var(--accent)}
.keuze input:checked::after{
  content:"";position:absolute;left:50%;top:50%;
  width:7px;height:12px;margin:-9px 0 0 -4px;
  border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg);
}
.keuze-naam{font-size:1.05rem;font-weight:600}
.keuze-sub{font-size:.9rem;color:rgba(20,56,60,.72);line-height:1.45}

/* teller: min, getal, plus, eenheid voluit */
.teller-rij{
  display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center;
  padding:14px 0;border-top:1px solid rgba(20,56,60,.1);
}
.teller-rij:first-child{border-top:0;padding-top:4px}
.teller-naam{font-size:1.05rem;font-weight:600}
.teller-sub{grid-column:1;font-size:.9rem;color:rgba(20,56,60,.72)}
.teller{display:flex;align-items:center;gap:8px;grid-column:2;grid-row:1/3}
.teller input{
  width:4.2ch;min-height:48px;padding:6px 4px;text-align:center;
  border:1px solid rgba(20,56,60,.25);border-radius:10px;background:var(--white);
  font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--ink);
}
.teller input:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.teller-eenheid{font-size:.95rem;color:rgba(20,56,60,.78);min-width:4.5ch}
@media (max-width:400px){
  .teller-rij{grid-template-columns:1fr}
  .teller{grid-column:1;grid-row:auto}
}

/* -/+ knoppen: 48px, duidelijke rand */
.stap-knop{
  width:48px;height:48px;flex:0 0 auto;
  border:1px solid rgba(20,56,60,.25);border-radius:12px;
  background:var(--white);cursor:pointer;
  font-family:var(--font-display);font-size:1.5rem;font-weight:500;line-height:1;color:var(--ink);
}
.stap-knop:hover{border-color:var(--accent);color:var(--accent)}
.stap-knop:active{background:rgba(189,65,40,.08);border-color:var(--accent)}
.stap-knop:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.stap-knop[disabled]{opacity:.4;cursor:default}

/* grote keuzeknoppen (staat van het werk, wat je klant ziet / wat jij ziet) */
.keuze-groot{
  display:block;width:100%;text-align:left;
  padding:16px 18px;min-height:64px;
  border:1px solid rgba(20,56,60,.18);border-radius:14px;background:var(--white);
  color:var(--ink);font:inherit;cursor:pointer;text-decoration:none;
  transition:border-color .15s,background .15s;
}
.keuze-groot + .keuze-groot{margin-top:10px}
.keuze-groot strong{display:block;font-size:1.1rem;font-weight:600}
.keuze-groot span{display:block;margin-top:4px;font-size:.95rem;color:rgba(20,56,60,.75);line-height:1.45}
.keuze-groot:hover{border-color:var(--accent)}
.keuze-groot[aria-pressed="true"]{border-color:var(--accent);background:rgba(189,65,40,.06);box-shadow:inset 0 0 0 1px var(--accent)}
.keuze-groot:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* overzicht: twee grote knoppen onder elkaar met een pijl */
.duo-knop{
  display:grid;grid-template-columns:1fr 28px;gap:4px 14px;align-items:center;
  padding:20px 20px;min-height:96px;
  border:1px solid rgba(20,56,60,.18);border-radius:16px;background:var(--white);
  color:var(--ink);text-decoration:none;
  transition:border-color .15s,box-shadow .15s;
}
.duo-knop + .duo-knop{margin-top:12px}
.duo-knop strong{font-family:var(--font-display);font-size:clamp(1.2rem, 1vw + 1rem, 1.5rem);font-weight:700;letter-spacing:-.01em}
.duo-knop span{grid-column:1;font-size:1rem;color:rgba(20,56,60,.78);line-height:1.45}
.duo-knop svg{grid-column:2;grid-row:1/3;width:28px;height:28px;color:var(--accent)}
.duo-knop:hover{border-color:var(--accent);box-shadow:0 12px 34px rgba(189,65,40,.12)}
.duo-knop:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media (min-width:700px){.duo-knop{padding:26px 26px}}
.vak-keuze{margin-top:22px;padding-top:18px;border-top:1px solid rgba(20,56,60,.1)}
.vak-keuze p{font-size:.95rem;color:rgba(20,56,60,.78);margin-bottom:12px}
/* de vier vakken als net raster: twee bij twee op een telefoon, vier naast
   elkaar zodra het past; elke knop even breed, tekst gecentreerd */
.vak-keuze .segment{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:600px){.vak-keuze .segment{grid-template-columns:repeat(4,1fr)}}
.vak-keuze .segment-knop{text-align:center;padding-inline:8px}
.segment{display:flex;flex-wrap:wrap;gap:8px}
.segment-knop{
  min-height:44px;padding:10px 18px;border-radius:999px;
  border:1px solid rgba(20,56,60,.25);background:var(--white);
  font:inherit;font-size:.95rem;font-weight:500;cursor:pointer;color:var(--ink);
  transition:background .15s,border-color .15s,color .15s;
}
.segment-knop.sel,.segment-knop[aria-checked="true"]{background:var(--accent);border-color:var(--accent);color:var(--knop-tekst)}
.segment-knop:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* opties (ja/nee-vragen) gebruiken dezelfde keuzerij */
.keuze--optie{min-height:56px}

/* uitkomst: de schatting als zin, het bedrag groot */
.uitkomst{padding:4px 0 8px}
.uitkomst-zin{font-size:clamp(1.05rem, .5vw + .95rem, 1.2rem);line-height:1.5}
.uitkomst-bedrag{
  display:block;margin:10px 0 12px;
  font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.9rem, 3vw + 1rem, 2.8rem);color:var(--accent);
}
.uitkomst-noot{font-size:.95rem;color:rgba(20,56,60,.78);line-height:1.5;margin:0 0 6px}
.opbouw{margin:18px 0 0;border-top:1px solid rgba(20,56,60,.1)}
.opbouw summary,.hulp summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:52px;padding:12px 0;cursor:pointer;font-weight:600;font-size:1rem;
}
.opbouw summary::-webkit-details-marker,.hulp summary::-webkit-details-marker{display:none}
.opbouw summary::after,.hulp summary::after{
  content:"";width:10px;height:10px;flex:0 0 auto;margin-right:6px;
  border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);
  transition:transform .15s;
}
.opbouw[open] summary::after,.hulp[open] summary::after{transform:rotate(225deg)}
.opbouw summary:focus-visible,.hulp summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}
.opbouw-tabel{width:100%;border-collapse:collapse;font-size:.98rem;margin-bottom:8px}
.opbouw-tabel td{padding:10px 0;border-top:1px solid rgba(20,56,60,.1);vertical-align:top}
.opbouw-tabel td:last-child{text-align:right;white-space:nowrap;font-weight:600}
.opbouw-tabel tr.totaal td{font-weight:700;font-size:1.05rem}
.beheer-panel .opbouw{border-top-color:var(--demo-rand)}
.beheer-panel .opbouw-tabel td{border-top-color:var(--demo-rand)}

/* velden: label erboven, 16px letters (geen automatisch inzoomen) */
.veld{display:block;margin:0 0 16px}
.veld-label{display:block;font-weight:600;font-size:1rem;margin-bottom:8px}
.veld-hint{display:block;font-size:.9rem;color:rgba(20,56,60,.7);margin-top:6px}
.veld input,.veld select,.veld textarea,.teller input{font-size:max(1rem, 16px)}
.veld input,.veld select,.veld textarea{
  width:100%;min-height:50px;padding:12px 14px;
  border:1px solid rgba(20,56,60,.25);border-radius:12px;
  background:var(--white);color:var(--ink);font-family:inherit;line-height:1.4;
}
.veld textarea{resize:vertical;min-height:96px}
.veld select{appearance:none;-webkit-appearance:none;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314383C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:20px;
}
.veld input:focus-visible,.veld select:focus-visible,.veld textarea:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.veld input[disabled]{background:rgba(20,56,60,.06);color:rgba(20,56,60,.6)}
.veld-fout{color:#8f2a1e;font-size:.95rem;margin:-8px 0 14px}
.veld-fout[hidden]{display:none}
.veld-euro{position:relative}
.veld-euro input{padding-left:38px}
.veld-euro::before{content:"€";position:absolute;left:14px;top:50%;transform:translateY(-50%);font-weight:600;color:rgba(20,56,60,.7)}

/* knoppen die de hele breedte pakken */
.knop-breed{display:block;width:100%;text-align:center;min-height:52px;padding:14px 20px;font-size:1.05rem}
.btn-accent{background:var(--accent);color:var(--knop-tekst);border:0;cursor:pointer;font:inherit;font-weight:600}
.btn-accent:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 30px rgba(189,65,40,.35)}
@media (prefers-reduced-motion: reduce){.btn-accent:hover{transform:none}}
.btn-accent:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.btn-accent[disabled]{opacity:.5;cursor:default;transform:none;box-shadow:none}
.btn-outline-accent{
  background:none;border:1px solid var(--accent);color:var(--accent);
  cursor:pointer;font:inherit;font-weight:600;white-space:nowrap;
}
.btn-outline-accent:hover{background:rgba(189,65,40,.12)}
.btn-outline-accent:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.btn-outline-accent[disabled]{border-color:rgba(20,56,60,.25);color:rgba(20,56,60,.72);cursor:default;background:none}
.btn-licht{background:var(--white);color:var(--ink);border:0;cursor:pointer;font:inherit;font-weight:600}
.btn-licht:hover{background:var(--ink)}
.btn-licht:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.btn-rand{background:none;border:1px solid rgba(20,56,60,.3);color:var(--ink);cursor:pointer;font:inherit;font-weight:600}
.btn-rand:hover{border-color:var(--accent);color:var(--accent)}
.btn-rand:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tekst-knop{
  background:none;border:0;cursor:pointer;
  min-height:44px;padding:10px 6px;font:inherit;font-size:.95rem;font-weight:600;
  color:var(--accent);text-decoration:underline;text-underline-offset:3px;
}
.beheer-panel .tekst-knop{color:var(--accent)}
.tekst-knop:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.knop-verwijder{
  display:block;width:100%;min-height:48px;margin-top:8px;
  background:none;border:0;cursor:pointer;
  font:inherit;font-weight:600;font-size:1rem;color:#8f2a1e;
}
.knop-verwijder:hover{text-decoration:underline}
.knop-verwijder:focus-visible{outline:3px solid #8f2a1e;outline-offset:2px;border-radius:8px}

/* vaste onderbalk: informatie links, de belangrijkste knop rechts.
   Mobiel vast onderin (met safe-area), desktop plakkend onderin de kaart. */
.onderbalk{
  display:flex;align-items:center;gap:12px;
  background:var(--white);border-top:1px solid var(--demo-rand);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.onderbalk[hidden]{display:none}
.onderbalk-info{flex:1;min-width:0}
.onderbalk-info small{display:block;font-size:.82rem;color:rgba(20,56,60,.72)}
.onderbalk-info strong{
  display:block;font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.05rem, .6vw + .9rem, 1.3rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.onderbalk .btn{min-height:50px;padding:13px 22px;font-size:1rem;white-space:nowrap;flex:0 0 auto;margin-left:auto}
.onderbalk .btn-rand{min-width:44px}
@media (max-width:960px){
  .onderbalk{position:fixed;left:0;right:0;bottom:0;z-index:80;box-shadow:0 -8px 30px rgba(20,56,60,.14)}
  /* twee knoppen naast het totaal passen niet op een telefoon: de
     belangrijkste knop krijgt een eigen regel over de volle breedte */
  .onderbalk--twee{flex-wrap:wrap;row-gap:10px}
  .onderbalk--twee .btn-accent{flex-basis:100%;margin-left:0}
}
@media (min-width:961px){
  .onderbalk{position:sticky;bottom:16px;z-index:5;margin-top:22px;border:1px solid var(--demo-rand);border-radius:14px;padding:12px 16px}
}
/* focus mag niet achter de onderbalk verdwijnen */
body.demo-pagina{scroll-padding-bottom:150px}
/* footerlinks: op een telefoon een tikdoel van 44px, ook buiten de demo */
@media (max-width:960px){.foot-gegevens a{display:inline-block;padding:11px 0}}

/* login (oefenomgeving) */
.login-kaart{max-width:460px;margin:0 auto}

/* pijplijn: op mobiel een statusbalk met de lijst van de gekozen status,
   op desktop vier kolommen naast elkaar */
.status-balk{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:4px 0 16px}
@media (max-width:480px){.status-balk{grid-template-columns:1fr 1fr}}
.status-knop{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  min-height:56px;padding:8px 6px;border-radius:12px;cursor:pointer;
  border:1px solid var(--demo-rand);background:rgba(20,56,60,.035);
  color:rgba(20,56,60,.85);font:inherit;font-size:clamp(.82rem, .4vw + .75rem, .95rem);
}
.status-knop strong{font-family:var(--font-display);font-size:1.2rem;font-weight:700;line-height:1.1}
.status-knop[aria-selected="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.status-knop:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.pijplijn{display:block}
.pijplijn[hidden]{display:none}
.kolom{display:none}
.kolom.sel{display:block}
.kolom-kop{display:none}
.kolom-lijst{display:flex;flex-direction:column;gap:10px}
.kolom-leeg{padding:18px 4px;color:rgba(20,56,60,.72);font-size:.98rem;line-height:1.5}
@media (min-width:961px){
  .status-balk{display:none}
  .pijplijn{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .kolom{display:block;background:rgba(20,56,60,.035);border:1px solid var(--demo-rand);border-radius:14px;padding:14px;min-height:200px}
  .kolom-kop{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;font-size:1rem;font-weight:600;color:rgba(20,56,60,.85)}
  .kolom--geaccepteerd .kolom-kop{color:#1E7A5F}
  .kolom-kop span{font-size:.95rem;color:rgba(20,56,60,.72);font-weight:500}
}
.offerte-kaart{
  display:flex;flex-direction:column;gap:2px;
  width:100%;text-align:left;padding:14px 16px;
  background:rgba(20,56,60,.049);border:1px solid var(--demo-rand);border-radius:14px;
  color:var(--ink);cursor:pointer;font:inherit;
  transition:border-color .15s,background .15s;
}
.offerte-kaart:hover{border-color:var(--accent);background:rgba(20,56,60,.07)}
.offerte-kaart:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.kaart-hoofd{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center}
.kaart-naam{font-size:1.1rem;font-weight:600}
.kaart-plaats{grid-column:1;font-size:.95rem;color:rgba(20,56,60,.78)}
.kaart-bedrag{grid-column:2;grid-row:1/3;font-family:var(--font-display);font-size:1.25rem;font-weight:700;white-space:nowrap}
/* in een smalle desktopkolom staat het bedrag onder de naam, anders breekt de plaats per woord af */
@media (min-width:961px){
  .kaart-hoofd{grid-template-columns:1fr}
  .kaart-bedrag{grid-column:1;grid-row:auto;margin-top:4px}
}
.kaart-voet{margin-top:8px;font-size:.88rem;color:rgba(20,56,60,.72);line-height:1.5}
.kaart-nieuw{
  display:flex;align-items:center;gap:8px;margin-bottom:6px;
  font-size:.92rem;font-weight:600;color:#1E7A5F;
}
.kaart-nieuw::before{content:"";width:8px;height:8px;border-radius:50%;background:#1E7A5F;flex:0 0 auto}
.offerte-kaart--nieuw{border-color:rgba(30,122,95,.55)}
@media (prefers-reduced-motion: no-preference){.kaart-nieuw::before{animation:pulse 1.6s ease-in-out infinite}}

/* dossier */
.dossier[hidden]{display:none}
.dossier-naam{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;font-size:clamp(1.4rem, 1.2vw + 1.05rem, 1.9rem);line-height:1.2;outline:none}
.dossier-adres{margin-top:4px;font-size:1rem;color:rgba(20,56,60,.8)}
.status-woord{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  padding:7px 14px;border-radius:999px;border:1px solid;font-weight:600;font-size:.95rem;
}
.status-woord::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.status-woord[data-status="concept"]{color:var(--ink);border-color:rgba(20,56,60,.4)}
.status-woord[data-status="verstuurd"]{color:var(--accent);border-color:rgba(189,65,40,.6)}
.status-woord[data-status="geaccepteerd"]{color:#1E7A5F;border-color:rgba(30,122,95,.6)}
.status-woord[data-status="afgewezen"]{color:rgba(20,56,60,.75);border-color:rgba(20,56,60,.3)}
.status-uitleg{margin-top:10px;font-size:.98rem;color:rgba(20,56,60,.82);line-height:1.5}
.schatting-regel{margin:14px 0 0;padding:10px 14px;border-left:3px solid #1E7A5F;font-size:.98rem;line-height:1.5;color:rgba(20,56,60,.88)}
.schatting-regel[hidden]{display:none}
.rijen{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.rijen-kop{font-size:1rem;font-weight:600;color:rgba(20,56,60,.85);margin:20px 0 -2px}
.rij{
  display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;
  width:100%;min-height:64px;padding:12px 16px;text-align:left;
  background:rgba(20,56,60,.042);border:1px solid var(--demo-rand);border-radius:14px;
  color:var(--ink);font:inherit;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.rij:hover{border-color:rgba(20,56,60,.45);background:rgba(20,56,60,.063)}
.rij:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.rij-naam{font-size:1.05rem;font-weight:600}
.rij-sub{grid-column:1;font-size:.95rem;color:rgba(20,56,60,.78)}
.rij-bedrag{grid-column:2;grid-row:1;font-family:var(--font-display);font-size:1.2rem;font-weight:700;white-space:nowrap;text-align:right}
.rij-actie{grid-column:2;grid-row:2;font-size:.85rem;color:var(--accent);text-align:right;font-weight:600}
.rij--toevoegen{display:flex;justify-content:center;align-items:center;gap:8px;min-height:56px;border-style:dashed;color:var(--accent);font-weight:600;font-size:1.05rem}
.rij--toevoegen svg{width:22px;height:22px}
.rij--klein{min-height:56px}
.hulp{margin-top:18px;border-top:1px solid var(--demo-rand)}
.beheer-panel .hulp summary{color:var(--ink)}
.hulp-inhoud{padding-bottom:8px}
.hulp-inhoud p{font-size:.95rem;line-height:1.5;margin-bottom:10px}
.beheer-panel .hulp-inhoud p{color:rgba(20,56,60,.78)}
/* het tariefpaneel onder de calculator: eigen witte kaart, anders zweeft het op het raster */
.vakman{background:var(--white);border:1px solid var(--demo-rand);border-radius:18px;padding:4px 20px;border-top:1px solid var(--demo-rand)}
.vakman .hulp-inhoud{padding-bottom:14px}
.beheer-panel .opbouw summary{color:var(--ink)}

/* fotoblok in de calculator: zichtbaar, niet ingeklapt */
.foto-blok{margin-top:22px;padding-top:18px;border-top:1px solid rgba(20,56,60,.1)}
.foto-blok-kop{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin:0 0 8px}
.foto-blok-kop svg{width:24px;height:24px;color:var(--accent);flex:0 0 auto}
/* fotohulp in het dossier: als rij met camera, tussen de andere rijen */
.hulp--rij{margin-top:10px;border-top:0}
.hulp--rij summary{
  display:flex;align-items:center;justify-content:flex-start;gap:10px;
  min-height:56px;padding:12px 16px;border:1px dashed var(--demo-rand);border-radius:14px;
  color:var(--accent);font-size:1.05rem;
}
.hulp--rij summary svg{width:22px;height:22px;flex:0 0 auto}
.hulp--rij summary::after{margin-left:auto}
.hulp--rij[open] summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.hulp--rij .hulp-inhoud{padding:14px 4px 4px}

/* keuzepaneel (onderpaneel op mobiel, venster op desktop): altijd licht,
   dan is het lezen op een telefoon het makkelijkst */
.sheet{
  position:fixed;inset:0;z-index:205;
  background:rgba(15,45,49,.62);
  display:flex;align-items:flex-end;justify-content:center;
}
.sheet[hidden]{display:none}
.sheet-paneel{
  width:100%;max-height:80dvh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--white);color:var(--ink);
  border-radius:20px 20px 0 0;
  padding:8px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  --focus:var(--accent);
}
.sheet-greep{width:44px;height:4px;border-radius:2px;background:rgba(20,56,60,.25);margin:6px auto 10px}
.sheet-kop{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 14px}
.sheet-kop h3{font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:-.01em}
.sheet-sluit{
  width:44px;height:44px;flex:0 0 auto;border-radius:50%;
  background:rgba(20,56,60,.06);border:1px solid rgba(20,56,60,.15);
  color:var(--ink);cursor:pointer;display:grid;place-content:center;
}
.sheet-sluit svg{width:18px;height:18px}
.sheet-sluit:hover{background:rgba(20,56,60,.12)}
.sheet-sluit:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sheet-acties{display:flex;flex-direction:column;gap:8px}
.sheet-actie{
  display:block;width:100%;min-height:54px;padding:14px 16px;text-align:left;
  border:1px solid rgba(20,56,60,.18);border-radius:12px;background:var(--white);
  color:var(--ink);font:inherit;font-size:1.02rem;font-weight:600;cursor:pointer;
}
.sheet-actie:hover{border-color:var(--accent)}
.sheet-actie:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sheet-actie--stil{color:rgba(20,56,60,.8);font-weight:500}
.regel-live{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin:4px 0 18px;padding:12px 14px;border-radius:12px;background:rgba(20,56,60,.05);
}
.regel-live span{font-size:.95rem;color:rgba(20,56,60,.78)}
.regel-live strong{font-family:var(--font-display);font-size:1.4rem;font-weight:700}
.sheet .keuze-groot{padding:12px 14px;min-height:56px}
.sheet .teller{grid-column:auto}
.veld .teller input{width:6ch}
.sheet-omschrijving{font-size:.92rem;color:rgba(20,56,60,.75);line-height:1.5;margin:-6px 0 16px}
.sheet-omschrijving img{display:block;width:100%;border-radius:10px;margin-top:8px}
@media (min-width:700px){
  .sheet{align-items:center;padding:20px}
  .sheet-paneel{width:min(540px, 100%);border-radius:20px;max-height:min(80dvh, 780px);padding:16px 24px 24px}
  .sheet-greep{display:none}
}
@media (prefers-reduced-motion: no-preference){
  .sheet:not([hidden]) .sheet-paneel{animation:sheetIn .2s ease}
}
@keyframes sheetIn{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
body.sheet-open{overflow:hidden}

/* ai-hulp: upload-zone */
.foto-zone-wrap{position:relative;margin-top:4px}
.foto-zone{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;
  min-height:110px;padding:22px 16px;cursor:pointer;
  border:1.5px dashed rgba(189,65,40,.45);border-radius:14px;
  background:rgba(189,65,40,.03);color:var(--ink);font:inherit;
  transition:border-color .15s,background .15s;
}
.foto-zone:hover,.foto-zone.dragover{border-color:var(--accent);background:rgba(189,65,40,.06)}
.foto-zone:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.foto-zone[hidden]{display:none}
.foto-zone-icoon{width:30px;height:30px;color:rgba(20,56,60,.7)}
.foto-zone-titel{font-size:1rem;font-weight:600}
.foto-zone-sub{font-size:.9rem;color:rgba(20,56,60,.72)}
.foto-zone-gekozen{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px;border:1.5px dashed rgba(189,65,40,.45);border-radius:14px;
}
.foto-zone-gekozen[hidden]{display:none}
.foto-zone-thumb{width:64px;height:48px;object-fit:cover;border-radius:8px;flex:0 0 auto}
.foto-zone-naam{flex:1;min-width:80px;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(20,56,60,.75)}
.foto-zone-analyseer{min-height:44px;padding:8px 16px;border-radius:999px}
.demo-kaart .btn-outline-accent{border-color:var(--accent);color:var(--accent)}
.demo-kaart .btn-outline-accent:hover{background:rgba(189,65,40,.08)}
.foto-zone-x{
  width:44px;height:44px;flex:0 0 auto;border-radius:8px;cursor:pointer;
  background:none;border:1px solid rgba(20,56,60,.25);color:rgba(20,56,60,.7);font:inherit;
  display:grid;place-content:center;
}
.foto-zone-x svg{width:18px;height:18px}
.foto-zone-x:hover{color:var(--ink);border-color:rgba(20,56,60,.5)}
.foto-zone-x:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.foto-zone-fout{margin:10px 0 0;font-size:.95rem;color:#8f2a1e}
.foto-zone-fout[hidden]{display:none}
.foto-zone-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.foto-zone-log[hidden]{display:none}
.foto-log{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.foto-log-regel{font-size:.95rem;color:rgba(20,56,60,.78);animation:fotoRegelIn .2s ease both}
.foto-log-regel .prompt{color:#1E7A5F;font-weight:600}
@keyframes fotoRegelIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.foto-log-regel{animation:none}}
.foto-resultaat{margin-top:12px;font-size:.98rem;color:rgba(20,56,60,.85);border-left:3px solid #1E7A5F;padding-left:12px;line-height:1.5}
.foto-resultaat--fout{border-left-color:#8f2a1e;color:#8f2a1e}
.foto-privacy{margin-top:10px;font-size:.88rem;color:rgba(20,56,60,.72)}
.beheer-panel .foto-zone{border-color:rgba(189,65,40,.45);background:rgba(20,56,60,.021);color:var(--ink)}
.beheer-panel .foto-zone:hover,.beheer-panel .foto-zone.dragover{border-color:var(--accent);background:rgba(189,65,40,.08)}
.beheer-panel .foto-zone-icoon{color:rgba(20,56,60,.75)}
.beheer-panel .foto-zone-sub{color:rgba(20,56,60,.72)}
.beheer-panel .foto-zone-gekozen{border-color:rgba(189,65,40,.45)}
.beheer-panel .foto-zone-naam{color:rgba(20,56,60,.75)}
.beheer-panel .foto-zone-x{border-color:rgba(20,56,60,.35);color:rgba(20,56,60,.8)}
.beheer-panel .foto-zone-x:hover{color:var(--ink);border-color:rgba(20,56,60,.5)}
.beheer-panel .foto-zone-fout{color:#8f2a1e}
.beheer-panel .foto-zone-fout a{color:var(--accent);font-weight:600}
.beheer-panel .foto-log-regel{color:rgba(20,56,60,.78)}
.beheer-panel .foto-log-regel .prompt{color:#1E7A5F}
.beheer-panel .foto-privacy{color:rgba(20,56,60,.72)}

/* ai-voorstel in het dossier: foto, thumbnail, voorstel, plattegrond */
.dossier-foto[hidden]{display:none}
.dossier-foto{
  display:flex;gap:14px;align-items:flex-start;margin:14px 0 4px;padding:12px;
  background:rgba(20,56,60,.035);border:1px solid var(--demo-rand);border-radius:12px;
}
.dossier-foto img{width:96px;height:72px;object-fit:cover;border-radius:8px;flex:0 0 auto}
.dossier-foto-zin{font-size:.95rem;color:rgba(20,56,60,.78);line-height:1.5}
.ai-voorstel{margin-top:14px;padding:16px 18px;background:rgba(189,65,40,.1);border:1px solid rgba(189,65,40,.4);border-radius:12px}
.ai-voorstel[hidden]{display:none}
.ai-voorstel-kop{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600}
.ai-zekerheid{font-size:.9rem;color:#1E7A5F;font-weight:500}
.ai-opname{margin:10px 0 12px;font-size:.95rem;color:rgba(20,56,60,.8);line-height:1.5}
.ai-regels{display:flex;flex-direction:column;gap:8px}
.ai-regel{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer;font-size:1rem}
.ai-regel input[type=checkbox],.pg-ruimte input[type=checkbox]{
  appearance:none;width:24px;height:24px;flex:0 0 auto;margin:0;
  background:transparent;border:1.5px solid rgba(20,56,60,.5);border-radius:6px;
  display:grid;place-content:center;cursor:pointer;
}
.ai-regel input[type=checkbox]:checked::before,.pg-ruimte input[type=checkbox]:checked::before{
  content:"";width:13px;height:13px;background:var(--accent);
  clip-path:polygon(14% 44%, 0 62%, 42% 100%, 100% 18%, 82% 2%, 40% 66%);
}
.ai-regel input[type=checkbox]:focus-visible,.pg-ruimte input[type=checkbox]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ai-aantal{
  width:4.5ch;min-height:44px;padding:6px 6px;flex:0 0 auto;text-align:center;
  background:rgba(20,56,60,.056);color:var(--ink);
  border:1px solid var(--demo-rand);border-radius:8px;font:inherit;font-size:max(1rem, 16px);
}
.ai-aantal:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.ai-regel-naam{flex:1;min-width:0}
.zone-tabs{display:flex;gap:8px;margin:0 0 10px;flex-wrap:wrap}
.zone-tabs[hidden]{display:none}
.zone-tab{
  min-height:44px;padding:9px 16px;border-radius:999px;cursor:pointer;
  background:none;border:1px solid rgba(20,56,60,.35);color:rgba(20,56,60,.85);
  font:inherit;font-size:.95rem;font-weight:500;
}
.zone-tab[aria-selected="true"]{border-color:var(--accent);color:var(--accent);background:rgba(189,65,40,.1)}
.zone-tab:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.zone-uitleg{margin:0 0 10px;font-size:.95rem;color:rgba(20,56,60,.78)}
.zone-uitleg[hidden]{display:none}
.pg-banner{margin:10px 0 0;padding:10px 12px;border-radius:8px;background:rgba(189,65,40,.12);border:1px solid rgba(189,65,40,.4);font-size:.95rem;color:var(--ink);line-height:1.5}
.pg-kruiscontrole{margin:8px 0 0;font-size:.92rem;color:#8f2a1e;line-height:1.5}
.pg-kruiscontrole[hidden]{display:none}
.pg-hoogte{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 4px;font-size:.95rem;color:rgba(20,56,60,.85)}
.pg-hoogte input{
  width:5ch;min-height:44px;padding:8px 10px;text-align:center;
  background:rgba(20,56,60,.056);color:var(--ink);
  border:1px solid var(--demo-rand);border-radius:8px;font:inherit;font-size:max(1rem, 16px);
}
.pg-hoogte input:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.pg-hoogte-veld{display:inline-flex;align-items:center;gap:8px}
.pg-hoogte-eenheid{font-size:.95rem;color:rgba(20,56,60,.8)}
.pg-hoogte-hint{margin:4px 0 0;font-size:.9rem;color:rgba(20,56,60,.72)}
.pg-ruimtes{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.pg-ruimte{
  display:grid;grid-template-columns:24px 1fr auto;gap:4px 10px;align-items:center;
  padding:10px 12px;border:1px solid var(--demo-rand);border-radius:10px;
  background:rgba(20,56,60,.028);cursor:pointer;font-size:.98rem;
}
.pg-ruimte--leeg{opacity:.6;cursor:default}
.pg-leeg-merk{text-align:center;color:rgba(20,56,60,.72)}
.pg-naam{font-weight:600}
.pg-m2{font-size:.92rem;text-align:right}
.pg-methode{grid-column:2/4;font-size:.85rem;color:var(--accent)}
.pg-regels{grid-column:2/4;font-size:.88rem;color:rgba(20,56,60,.72);line-height:1.45}
.regel-sectie{margin:14px 0 2px;font-size:.9rem;font-weight:600;color:rgba(20,56,60,.75)}
.ai-acties{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}
.ai-acties .toevoegen-knop{min-height:48px;padding:10px 18px;border-radius:999px}
.ai-voorstel .foto-privacy{font-size:.85rem;color:rgba(20,56,60,.72);margin-top:8px}

/* offertebrief: op het scherm eerst een voorbeeld met uitleg en een knop,
   bij afdrukken alleen het A4-vel */
.offerte-brief{
  position:fixed;inset:0;z-index:200;
  background:var(--paper);color:var(--ink);
  overflow-y:auto;padding:12px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  --focus:var(--accent);
}
.offerte-brief[hidden]{display:none}
.brief-balk{max-width:720px;margin:0 auto 14px}
.brief-balk .stap-uitleg{margin-bottom:12px}
.brief-vel{
  max-width:720px;margin:0 auto;
  background:#fff;color:var(--ink);
  border:1px solid var(--demo-rand);border-radius:8px;padding:clamp(24px, 5vw, 56px) clamp(18px, 5vw, 58px);
  box-shadow:0 20px 60px rgba(20,56,60,.12);
}
.brief-kop{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-bottom:36px}
.brief-merk{display:flex;align-items:center;gap:12px}
.brief-merk svg{width:44px;height:26px;color:var(--accent);flex:0 0 auto}
.brief-merk strong{display:block;font-family:var(--font-display);font-size:1.05rem}
.brief-merk span{display:block;font-size:.85rem;color:rgba(20,56,60,.7)}
.brief-meta{text-align:right;font-size:.88rem;color:rgba(20,56,60,.7)}
.brief-meta span{display:block}
.brief-adres{margin-bottom:24px;line-height:1.5}
.brief-intro{margin-bottom:16px}
.brief-tabel{width:100%;border-collapse:collapse;font-size:.95rem}
.brief-tabel th{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(20,56,60,.7);text-align:left;font-weight:600;padding:0 10px 8px 0;border-bottom:1px solid rgba(20,56,60,.2)}
.brief-tabel td{padding:9px 10px 9px 0;border-bottom:1px solid rgba(20,56,60,.08);vertical-align:top}
.brief-tabel th:last-child,.brief-tabel td:last-child{text-align:right;padding-right:0;white-space:nowrap}
.brief-tabel tfoot td{border-bottom:0;padding-top:8px}
.brief-tabel tfoot tr:first-child td{padding-top:16px}
.brief-opmerking{margin-top:22px;font-size:.95rem}
.brief-voorwaarden{margin-top:30px;padding-top:16px;border-top:1px solid rgba(20,56,60,.12);font-size:.85rem;color:rgba(20,56,60,.7);line-height:1.5}
body.brief-open{overflow:hidden}
@media print{
  body>*:not(.offerte-brief){display:none!important}
  .offerte-brief{position:static;background:none;padding:0;overflow:visible}
  .offerte-brief[hidden]{display:none!important}
  .no-print{display:none!important}
  .brief-vel{box-shadow:none;border:0;border-radius:0;max-width:none;padding:0}
}

/* offertebeheer fase 1: secties, negen statussen, zoeken, prijsafspraken, BAG */
.veld--zoek{margin:0 0 12px}
.veld--zoek input{padding-left:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314383C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:14px 50%;background-size:18px}
.status-balk[hidden]{display:none}
.kolom-kop--altijd{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:14px 0 8px;font-size:1rem;font-weight:600;color:rgba(20,56,60,.85)}
.kolom-kop--altijd span{font-size:.95rem;color:rgba(20,56,60,.72);font-weight:500}
@media (min-width:961px){.kolom--gepland .kolom-kop{color:#1E7A5F}}
.dossier-kopacties{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dossier-kopacties .tekst-knop{margin-top:12px;min-height:44px}
.status-woord[data-status="indicatie_maken"],.status-woord[data-status="offerte_maken"],.status-woord[data-status="uitvoering_plannen"]{color:var(--ink);border-color:rgba(20,56,60,.4)}
.status-woord[data-status="indicatie_verstuurd"],.status-woord[data-status="offerte_verstuurd"]{color:var(--accent);border-color:rgba(189,65,40,.6)}
.status-woord[data-status="opdracht"],.status-woord[data-status="afgerond"]{color:#1E7A5F;border-color:rgba(30,122,95,.6)}
.status-woord[data-status="archief"]{color:rgba(20,56,60,.75);border-color:rgba(20,56,60,.3)}
.rij--sectie{background:rgba(20,56,60,.084);border-color:rgba(20,56,60,.35);margin-top:10px}
.rij--sectie .rij-naam{font-family:var(--font-display);font-size:1.15rem}
.rij--regel{margin-left:14px;width:calc(100% - 14px)}
.rijen--klein{margin-top:0;gap:6px}
.twee-kolommen{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.twee-kolommen--knop{grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.twee-kolommen--knop .btn{min-height:48px;padding-inline:16px}
.toeslag-nieuw{display:grid;grid-template-columns:minmax(0,1fr) 108px auto;gap:8px;align-items:center;margin-top:10px}
.toeslag-nieuw .btn{min-height:48px;padding-inline:14px}
.toeslag-rij{display:grid;grid-template-columns:minmax(0,1fr) 108px 44px;gap:8px;align-items:center;padding:6px 0;border-top:1px solid rgba(20,56,60,.1)}
.toeslag-rij .stap-knop{width:44px;height:44px}
.veld-euro--klein input{padding-left:32px}
.veld-euro--klein::before{left:11px}
.veld-hint--bag{margin:-6px 0 14px;min-height:1.4em}
.veld-hint--ok{color:#1E7A5F}
.veld-hint--fout{color:#8f2a1e}
.veld input.veld-auto{background:rgba(30,122,95,.22);transition:background .8s}
.keuze-groot--compact{padding:10px 14px;min-height:auto}
.sheet .keuze-groot--compact{padding:10px 14px}
.keuze-groot--compact strong small{font-weight:500;font-size:.85rem;color:rgba(20,56,60,.65);margin-left:6px}
.keuze-groot--compact span small{display:block;margin-top:2px;font-size:.82rem;color:rgba(20,56,60,.6)}
.sheet-groep{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(20,56,60,.6);margin:12px 0 2px;font-weight:600}
.sheet-groep:first-child{margin-top:0}
.sheet-actie small{display:block;margin-top:2px;font-weight:400;font-size:.88rem;color:rgba(20,56,60,.7);line-height:1.4}
.sheet-actie--huidig{border-color:var(--accent);background:rgba(189,65,40,.06)}
.opbouw-tabel--details td small{display:block;font-weight:400;font-size:.85rem;color:rgba(20,56,60,.72);line-height:1.45}
.opbouw-tabel--details td:last-child{font-size:.95rem}
.log-lijst{list-style:none;margin:0;padding:0;font-size:.95rem}
.log-lijst li{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--demo-rand);line-height:1.45}
.log-lijst li span{flex:0 0 auto;font-family:var(--font-mono);font-size:.82rem;color:rgba(20,56,60,.72);padding-top:2px}
.log-lijst li em{font-style:normal;color:rgba(20,56,60,.72)}
.brief-sectie{font-family:var(--font-display);font-size:1.05rem;font-weight:700;margin:22px 0 6px}
.brief-sectie-opmerking{font-size:.9rem;color:rgba(20,56,60,.8);margin:0 0 8px;line-height:1.5}
.brief-tabel--regels{margin-bottom:4px}
.brief-badge{display:inline-block;margin-left:6px;padding:1px 8px;border:1px solid rgba(20,56,60,.3);border-radius:999px;font-size:.74rem;font-weight:600;vertical-align:middle}
.brief-legenda{margin:22px 0 4px;font-size:.88rem;color:rgba(20,56,60,.8);line-height:1.5}
.brief-legenda:empty{display:none}
.brief-legenda p{margin:3px 0}
.brief-vel > .brief-tabel{margin-top:20px}
#kwInhoud > .brief-tabel{margin-top:20px}

.schatting-regel--let{border-left-color:var(--accent)}
.klant-blok{margin-top:16px;padding:14px 16px;border:1px solid rgba(30,122,95,.45);border-radius:14px;background:rgba(30,122,95,.06);font-size:.98rem;line-height:1.5;color:rgba(20,56,60,.9)}
.klant-blok[hidden]{display:none}
.klant-blok-knoppen{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:10px}
.klant-blok-knoppen .btn{min-height:44px}
.klant-blok-knoppen .tekst-knop{min-height:44px}
.rij--stil{cursor:default}
.rij--stil:hover{border-color:var(--demo-rand);background:rgba(20,56,60,.042)}
.mail-kop{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 14px;font-size:.95rem}
.mail-kop dt{color:rgba(20,56,60,.65)}
.mail-kop dd{margin:0}
.mail-tekst{white-space:pre-wrap;font:inherit;font-size:.95rem;line-height:1.55;padding:14px;border-radius:12px;background:rgba(20,56,60,.05);margin:0}
.klant-weergave .brief-balk .tekst-knop{min-height:44px}
.kw-vel{padding-top:clamp(20px, 4vw, 40px)}
.kw-merk{margin-bottom:26px}
.kw-kop{font-family:var(--font-display);font-size:1.4rem;font-weight:700;letter-spacing:-.01em;margin:0 0 8px}
.kw-intro{margin:0 0 18px;line-height:1.55}
.kw-verlopen{padding:20px;border:1px solid rgba(189,65,40,.3);border-radius:14px;background:rgba(189,65,40,.05);margin-bottom:24px}
.kw-verlopen h3{font-family:var(--font-display);font-size:1.2rem;margin:0 0 8px}
.kw-verlopen p{margin:0 0 14px;line-height:1.55}
.kw-verlopen .btn{min-height:48px}
.kw-acties{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.kw-acties .btn{flex:1 1 200px;min-height:52px;justify-content:center;text-align:center}
.kw-afwijs{margin-top:16px}
.kw-afwijs .btn{min-height:48px}
.kw-klaar{margin-top:18px;padding:14px 16px;border-radius:12px;background:rgba(30,122,95,.1);border:1px solid rgba(30,122,95,.35);color:#1E7A5F;font-weight:600;line-height:1.5}
.kw-klaar[hidden]{display:none}
.kw-band{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin:8px 0 10px}
.veld-fout--los{margin:10px 0 12px}

.kop-met-knop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.kop-met-knop .tekst-knop{min-height:44px}
.project-cijfers{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}
@media (min-width:700px){.project-cijfers{grid-template-columns:repeat(4,1fr)}}
.project-cijfer{padding:10px 12px;border-radius:12px;background:rgba(20,56,60,.035);border:1px solid var(--demo-rand)}
.project-cijfer small{display:block;font-size:.82rem;color:rgba(20,56,60,.72);margin-bottom:2px}
.project-cijfer strong{font-family:var(--font-display);font-size:1.15rem;font-weight:700}
.project-cijfer--let strong{color:var(--accent)}
.project-cijfer--ok strong{color:#1E7A5F}
.factuur-status{display:inline-block;padding:1px 8px;border-radius:999px;border:1px solid currentColor;font-size:.8rem;font-weight:600;margin-left:6px;vertical-align:middle}
.factuur-status--open{color:var(--ink)}
.factuur-status--verlopen{color:var(--accent)}
.factuur-status--betaald{color:#1E7A5F}
.factuur-status--concept{color:rgba(20,56,60,.72)}
.sheet .factuur-status--open{color:var(--ink)}
.sheet .factuur-status--verlopen{color:var(--accent)}
.sheet .factuur-status--betaald{color:#1E7A5F}
.sheet .factuur-status--concept{color:rgba(20,56,60,.6)}
.opbouw-tabel--licht{margin-bottom:14px}
.opbouw-tabel--licht td{border-top-color:rgba(20,56,60,.1)}
.betaling-lijst{margin:0 0 14px;padding:0;list-style:none;font-size:.95rem}
.betaling-lijst li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid rgba(20,56,60,.1)}
.bank-rij{grid-template-columns:1fr auto;align-items:start}
.bank-rij .rij-sub{grid-column:1/3}
.bank-rij .rij-bedrag--min{color:rgba(20,56,60,.72)}
.bank-suggestie{grid-column:1/3;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:6px;font-size:.92rem}
.bank-suggestie .btn{min-height:40px;padding:6px 14px;font-size:.92rem}
.bank-suggestie .tekst-knop{min-height:40px}
.bank-suggestie--ok{color:#1E7A5F}
.bank-suggestie--geen{color:rgba(20,56,60,.72)}
.brief-titel{font-family:var(--font-display);font-size:1.6rem;font-weight:700;letter-spacing:-.01em;margin:-10px 0 18px}

.kop-knoppen{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:baseline}
.inst-paneel{margin-top:16px}
.inst-paneel[hidden]{display:none}
.inst-paneel .rijen-kop{margin:22px 0 8px}
.inst-tabel{display:grid;gap:8px 10px;align-items:center;font-size:.95rem}
.inst-tabel--3{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}
.inst-tabel .inst-kop{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(20,56,60,.72);font-weight:600}
.inst-tabel small{display:block;font-size:.82rem;color:rgba(20,56,60,.72)}
.inst-tabel input{width:100%;min-height:44px;padding:8px 10px;border:1px solid rgba(20,56,60,.25);border-radius:10px;background:var(--white);color:var(--ink);font:inherit;font-size:max(1rem, 16px);text-align:right}
.inst-tabel input:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
#herberekenTekst .opbouw-tabel{margin-top:12px}
#instMelding{margin-top:16px}

.honing{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.brief-verf{margin:0 0 14px;padding:10px 12px;border-radius:8px;background:rgba(189,65,40,.06);font-size:.92rem;line-height:1.5}
.kw-sterren{display:flex;gap:6px;margin:6px 0 4px}
.kw-ster{width:48px;height:48px;border-radius:12px;border:1px solid rgba(20,56,60,.2);background:var(--white);font-size:1.7rem;line-height:1;color:rgba(20,56,60,.25);cursor:pointer}
.kw-ster[aria-pressed="true"]{color:#E0A800;border-color:#E0A800;background:rgba(224,168,0,.08)}
.kw-ster:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
#kwReview .tekst-knop{margin-top:10px}
#reviewBlok{border-color:rgba(20,56,60,.2);background:rgba(20,56,60,.03)}

/* beweging: kort en uit bij prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .keuze,.keuze-groot,.duo-knop,.offerte-kaart,.rij,.stap-knop,.segment-knop,.foto-zone,.btn{transition:none}
  .kaart-nieuw::before{animation:none}
}

/* ===== PORTFOLIO (donker paneel) ===== */
.work-panel,.dark-panel{
  background:var(--ink);
  border-radius:24px;
  color:var(--white);
  padding:64px 48px;
  position:relative;overflow:hidden;
}
.work-panel::before,.dark-panel::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(700px 460px at 85% -10%, rgba(189,65,40,.35), transparent 70%);
}
.work-panel>*,.dark-panel>*{position:relative}
.work-panel .eyebrow,.dark-panel .eyebrow{color:var(--nevel)}
.work-panel h2,.dark-panel h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(32px,3.4vw,44px);
  letter-spacing:-.02em;line-height:1.15;
  margin-top:10px;max-width:var(--regelbreedte);
}
/* de portfoliokop is 570px op één regel; laat hem tot aan de pijlknoppen
   (132px + marge) lopen, dan kan hij nooit met de regelaar overlappen en
   breekt hij op tussenmaten vanzelf netjes */
.work-panel h2{max-width:calc(100% - 180px)}
.work-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;
}
.work-card{
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px 14px 22px;
  display:flex;flex-direction:column;gap:16px;
}
.work-media{width:100%;aspect-ratio:4/3}
.image-slot{
  position:relative;width:100%;height:100%;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:rgba(255,255,255,.8);
  overflow:hidden;
}
.image-slot::after{
  content:"";position:absolute;inset:6px;
  border:1.5px dashed currentColor;border-radius:8px;
  opacity:.22;pointer-events:none;
}
.image-slot svg{opacity:.45}
.image-slot .cap{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.02em;
  opacity:.7;max-width:90%;text-align:center;
}
.image-slot img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.work-copy{padding:0 8px}
.work-tag{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--nevel);
  margin-bottom:7px;
}
.work-copy h3{
  font-family:var(--font-display);font-size:1.1rem;font-weight:700;
  letter-spacing:-.01em;margin-bottom:5px;
}
.work-copy p{font-size:.88rem;color:rgba(255,255,255,.62)}

/* ===== PORTFOLIO-SLIDER =====
   Actief vanaf 4 projecten; js/main.js zet dan .work-grid om naar
   .work-track en bouwt de regelaar (knoppen, teller, voortgangslijn). */
.work-track{
  display:flex;gap:20px;margin-top:44px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:4px; /* compenseert de eigen padding bij het snappen */
  scrollbar-width:none;
  padding:4px 4px 10px;
}
.work-track::-webkit-scrollbar{display:none}
/* desktop: sleepbaar met de muis; tijdens de sleep snap en selectie uit */
@media (hover: hover) and (pointer: fine){
  .work-track{cursor:grab}
}
.work-track.sleept{cursor:grabbing;scroll-snap-type:none;user-select:none;scroll-behavior:auto}
.work-track:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:8px}
.work-track .work-card{
  flex:0 0 calc((100% - 40px)/2.5); /* ~2,5 kaarten zichtbaar op desktop */
  scroll-snap-align:start;
}
@media (prefers-reduced-motion: no-preference){
  .work-track .work-card{
    transition:opacity .4s ease,transform .4s ease,border-color .4s ease,box-shadow .4s ease;
  }
  .work-track .work-card.uit{opacity:.55;transform:scale(.96)}
  /* binnenkomende kaart licht kort op, alsof de module geactiveerd wordt */
  .work-track .work-card.wakker{
    border-color:var(--accent-licht);
    box-shadow:0 0 0 1px rgba(189,65,40,.2),0 20px 50px rgba(189,65,40,.12);
  }
}

.werk-regelaar{
  position:absolute;top:64px;right:48px;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
.werk-knoppen{display:flex;gap:10px}
.slider-knop{
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
  display:grid;place-items:center;
  color:var(--white);cursor:pointer;
  transition:background .2s,opacity .2s;
}
.slider-knop svg{width:18px;height:18px}
.slider-knop:hover:not(:disabled){background:rgba(255,255,255,.16)}
.slider-knop:disabled{opacity:.35;cursor:default}
.slider-knop:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.werk-teller{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  color:rgba(255,255,255,.75);
}
.werk-lijn{
  width:132px;height:2px;border-radius:2px;
  background:rgba(255,255,255,.15);overflow:hidden;
}
.werk-lijn-vulling{
  display:block;height:100%;width:100%;
  background:var(--accent-licht);
  transform-origin:left;transform:scaleX(0);
  transition:transform .3s ease;
}
@media (prefers-reduced-motion: reduce){
  .werk-lijn-vulling{transition:none}
}
/* touch: swipen is primair, pijlknoppen verbergen (ook op hybriden) */
@media (hover: none), (pointer: coarse){
  .werk-knoppen{display:none}
}
@media (max-width:960px){
  /* teller en voortgangslijn onder de kaarten, anders vallen ze tijdens
     het swipen buiten beeld bij hoge kaarten */
  .work-panel{display:flex;flex-direction:column;align-items:stretch}
  .work-panel h2{max-width:none} /* de regelaar staat hier onder de kaarten */
  .werk-regelaar{position:static;align-items:flex-start;margin-top:24px;order:4}
  .work-track{margin-top:20px;order:3}
  .work-track .work-card{flex-basis:87%} /* ~1,15 kaart zichtbaar */
}

/* eind-CTA */
.cta-panel{
  background:var(--ink);
  border-radius:24px;
  color:var(--white);
  text-align:center;
  padding:70px 24px;
  position:relative;overflow:hidden;
}
.cta-panel::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 400px at 50% 120%, rgba(189,65,40,.6), transparent 70%);
}
.cta-panel>*{position:relative}
.cta-panel h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(32px,3.4vw,44px);letter-spacing:-.02em;
}
.cta-panel p{margin:14px auto 30px;max-width:460px;color:rgba(255,255,255,.7)}

/* dataflow-lijnen vanaf de randen naar de module: zelfde stippellijn-taal
   als de hero-wires, lage opacity; alleen op desktop */
.cta-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cta-wires path{fill:none;stroke:rgba(255,122,92,.2);stroke-width:1.5;stroke-dasharray:3 6}
@media (prefers-reduced-motion: no-preference){
  .cta-wires path{animation:dashflow 2.6s linear infinite}
}
@media (max-width:960px){.cta-wires{display:none}}

/* de module: dun kader met HUD-hoekjes rond het formulier */
.contact-module{
  position:relative;max-width:var(--regelbreedte);margin:0 auto;
  border:1px solid rgba(255,255,255,.14);border-radius:12px;
  padding:20px 24px 24px;text-align:left;
}
.contact-module::before,.contact-module::after,
.contact-module .hud::before,.contact-module .hud::after{
  content:"";position:absolute;width:10px;height:10px;
  border:0 solid var(--accent-licht);pointer-events:none;
}
.contact-module::before{top:-1px;left:-1px;border-top-width:1.5px;border-left-width:1.5px}
.contact-module::after{bottom:-1px;right:-1px;border-bottom-width:1.5px;border-right-width:1.5px}
.contact-module .hud::before{top:-1px;right:-1px;border-top-width:1.5px;border-right-width:1.5px}
.contact-module .hud::after{bottom:-1px;left:-1px;border-bottom-width:1.5px;border-left-width:1.5px}
.cta-module-kop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px}
.cta-module-label{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
}
.cta-module-status{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;color:var(--ok);
}
.cta-module-status .status-dot{background:var(--ok)}
@media (max-width:700px){
  .contact-module{padding:16px 14px 18px}
  /* button.btn zet font:inherit met hogere specificiteit; anders breekt het label */
  button.vorm-verstuur{padding:12px 10px;font-size:.88rem}
}

/* contactformulier in de eind-CTA: glasvelden op het donker */
.contact-vorm{max-width:460px;margin:0 auto;text-align:left;display:grid;gap:16px}
.contact-vorm[hidden]{display:none} /* grid wint anders van het hidden-attribuut */
.vorm-label{
  display:block;margin-bottom:7px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
  color:rgba(255,255,255,.72);
}
.vorm-optioneel{color:rgba(255,255,255,.68)}
.vorm-invoer{
  width:100%;min-height:48px;padding:12px 14px;
  font:inherit;font-size:1rem;color:var(--licht);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  transition:background .2s ease,border-color .2s ease;
}
/* focus: het veld licht een fractie op en het label kleurt mee */
.vorm-veld:focus-within .vorm-invoer{background:rgba(255,255,255,.1)}
.vorm-label{transition:color .2s ease}
.vorm-veld:focus-within .vorm-label{color:var(--accent-licht)}
.vorm-invoer::placeholder{font-family:var(--font-mono);font-size:.85rem;color:rgba(255,255,255,.55)}
.vorm-invoer:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.vorm-invoer[aria-invalid="true"]{border-color:#ff9d8a}
.vorm-tekst{resize:vertical;min-height:110px}
.contact-vorm .vorm-fout{margin:6px 0 0;font-size:.85rem;color:#ff9d8a}
.contact-vorm .vorm-fout[hidden]{display:none}
/* honeypot: buiten beeld, niet display:none, want dan vullen scripts hem nog */
.contact-vorm .vorm-web{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.vorm-verstuur{width:100%;margin-top:4px}
.vorm-verstuur:hover{
  box-shadow:0 10px 30px rgba(0,0,0,.25),0 0 26px rgba(255,122,92,.3); /* zachte gloed */
}
.vorm-verstuur[disabled]{opacity:.6;cursor:default;transform:none;box-shadow:none}
/* tijdens verzenden: mono-label met blokcursor */
.vorm-verstuur.bezig{font-family:var(--font-mono);font-size:.9rem;letter-spacing:.02em}
.blokcursor{
  display:inline-block;width:.55em;height:1em;margin-left:3px;
  background:currentColor;vertical-align:text-bottom;
}
@media (prefers-reduced-motion: no-preference){
  .blokcursor{animation:cursorKnipper 1s steps(1) infinite}
}
@keyframes cursorKnipper{50%{opacity:0}}
/* tekenteller onder het berichtveld: levend detail, verschijnt na 200 tekens */
.contact-vorm .vorm-teller{
  margin:6px 0 0;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.04em;color:rgba(255,255,255,.62);text-align:right;
}
.contact-vorm .vorm-teller[hidden]{display:none}
.contact-vorm .vorm-status{margin:0;min-height:1.4em;font-size:.9rem;color:rgba(255,255,255,.85);text-align:center}
.vorm-status a{color:var(--accent-licht)}
.contact-vorm .vorm-privacy{
  margin:0;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;
  color:rgba(255,255,255,.68);text-align:center;
}

/* na verzenden: automatiseringslog in herostijl in plaats van het formulier */
.contact-log{max-width:460px;margin:0 auto;text-align:left;outline:none}
.contact-log[hidden]{display:none}
.contact-syslog{margin:6px 0 0}
.contact-syslog .syslog-row{opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
.contact-syslog .syslog-row.af{opacity:1;transform:none}
.syslog-nul span{color:var(--ok)}
@media (prefers-reduced-motion:reduce){
  .contact-syslog .syslog-row{transition:none;opacity:1;transform:none}
}

footer{
  padding:34px 0 40px;
  font-size:.85rem;color:rgba(20,56,60,.72); /* .55 haalde geen AA-contrast */
}
.foot-inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* officiële bedrijfsgegevens: klein en mono, gestapeld op smalle schermen */
.foot-gegevens{
  margin-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;
  color:rgba(20,56,60,.72); /* zelfde waarde als de footer zelf: haalt AA */
}
.foot-punt{color:rgba(20,56,60,.5)} /* decoratief scheidingsteken */
.foot-gegevens + .foot-gegevens{margin-top:4px} /* systeemregel strak eronder */
@media (max-width:700px){
  .foot-gegevens{flex-direction:column;align-items:flex-start;gap:4px}
  .foot-punt{display:none}
}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ===== RESPONSIVE ===== */
@media (max-width:960px){
  .hero{--gloed-a:rgba(255,122,92,.16);--gloed-b:rgba(189,65,40,.18)}
  .nav-pills{display:none}
  .nav>.btn{display:none}
  .nav-burger{display:flex}
  .orchestra{grid-template-columns:1fr;padding-block:56px 60px}
  .node,.wires{display:none}
  .glass-card{grid-column:1}
  /* de tabgroep hoort in dezelfde, enige kolom; met grid-column:2 uit de
     desktopregel zou hij in een impliciete kolom naast de kaart belanden */
  .hero-tabs{grid-column:1;margin:12px 0 12px}
  /* kleinere bliksem-badge, anders valt hij achter de kaartrand */
  .spark{width:44px;height:44px;top:8px}
  .spark svg{width:18px;height:18px}
  .feature-grid{grid-template-columns:1fr}
  .module-label{font-size:.72rem} /* microcopy iets op, richting 12px */
  /* werkwijze als verticale tijdlijn: links een vaste rail van 24px met
     het bolletje en de verbindingslijn, rechts de ingesprongen content,
     de lijn staat exact onder de bolletjes en raakt de tekst nooit */
  .steps{grid-template-columns:1fr;gap:28px;margin-top:36px}
  .step{display:grid;grid-template-columns:24px 1fr;column-gap:16px;padding-top:0}
  .step>*{grid-column:2}
  .step::before{top:3px;left:6px} /* gecentreerd op de regel van "stap 01" */
  .step h3{margin:6px 0 4px} /* binnen de stap strakker dan de 28px ertussen */
  /* lijnsegment van bolletje tot bolletje; de laatste stap heeft er geen */
  .step:not(:last-child)::after{
    content:"";position:absolute;left:11.25px;top:17px;bottom:-31px;width:1.5px;
    background:rgba(189,65,40,.45);
    transform:scaleY(0);transform-origin:top;
    transition:transform .2s ease;
  }
  .steps.play .step:not(:last-child)::after{transform:scaleY(1)}
  .steps.play .step:nth-child(2)::after{transition-delay:.05s}
  .steps.play .step:nth-child(3)::after{transition-delay:.2s}
  .steps.play .step:nth-child(4)::after{transition-delay:.35s}
  /* kortere stagger: verticaal gestapeld voelt 0,9s vertraging als haperen */
  .steps.play .step:nth-child(3)::before,.steps.play .step:nth-child(3)>*{transition-delay:.15s}
  .steps.play .step:nth-child(4)::before,.steps.play .step:nth-child(4)>*{transition-delay:.3s}
  .steps.play .step:nth-child(5)::before,.steps.play .step:nth-child(5)>*{transition-delay:.45s}
  .work-grid{grid-template-columns:1fr}
  .work-panel,.dark-panel{padding:48px 24px}
}
@media (min-width:961px){
  .mobiel-menu{display:none}
}
@media (max-width:700px){
  .hero-inner{padding-top:44px}
  .hero h1{font-size:2.05rem}
  .hero-sub{font-size:1rem}
  .glass-card{padding:22px 20px 0}
  .card-foot{margin:0 -20px;padding:13px 20px}
  /* Drie tabs naast elkaar op 375px: kleiner lettertype en strakkere
     padding, maar het tikvlak blijft 44px hoog. Past het op een heel smal
     toestel toch niet, dan scrolt de groep in zichzelf in plaats van de
     pagina breder te maken. De padding van 5px houdt de focusring (3px
     plus 2px offset) binnen de groep, anders knipt overflow hem af. */
  .hero-tabs{max-width:100%;gap:3px;overflow-x:auto;scrollbar-width:none}
  .hero-tabs::-webkit-scrollbar{display:none}
  .hero-tab{flex:0 0 auto;min-height:44px;padding:0 8px;font-size:.76rem}
  /* iets compacter log op smalle schermen: minder afgebroken regels */
  .log-line{gap:10px;font-size:.78rem}
  /* tabellen passend maken: minder celpadding, iets kleinere tekst */
  .table-card{padding:2px 16px}
  .table-card table{font-size:.88rem}
  .table-card th{letter-spacing:.06em;padding-right:10px}
  .table-card td{padding-right:10px;hyphens:auto;overflow-wrap:break-word}
}
@media (max-width:960px) and (prefers-reduced-motion: reduce){
  .step:not(:last-child)::after{transform:scaleY(1);transition:none}
}

/* ===== PRIJZEN-SECTIE =====
   Overgenomen uit prijzen-sectie.html; de eigen :root is vervallen en de
   kleuren lopen nu via de huisstijlvariabelen:
     offwit -> --paper, petrol-900 -> --ink (tekst) / --petrol (donkere voet),
     petrol-700 -> gedempte inkt, petrol-400 -> gedempte inkt op licht en
     --nevel op donker, oranje -> --accent (licht) / --accent-licht (donker).
   Het blok staat als "één vel met haarlijnen": de kaarten zijn ondoorzichtig
   en de 1px-tussenruimtes tonen de lijnkleur eronder. */
.hf-prijzen{
  position:relative;overflow:hidden;
  background:var(--paper);
  color:var(--ink);
  padding:var(--sectie) 0;
  font-family:var(--font-body);
}
/* zelfde raster van 64px als in de webshop-sectie, hier in petrol op licht;
   position:relative en overflow:hidden houden het binnen de sectie */
.hf-prijzen::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(20,56,60,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(20,56,60,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 78% 62% at 50% 38%,#000 28%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 38%,#000 28%,transparent 100%);
}
.hf-prijzen__inner{position:relative;max-width:var(--container);margin:0 auto;padding:0 var(--pad)}

/* muislicht op de prijsblokken. multiply kleurt de ondergrond warm en
   houdt de tekst leesbaar; een gewone laag met opacity zou er een wazige
   vlek overheen leggen. De positie komt uit js/main.js als --mx/--my. */
.hf-licht{position:relative}
.hf-licht::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(circle 280px at var(--mx,50%) var(--my,50%),
    rgba(189,65,40,.20),rgba(189,65,40,.06) 45%,transparent 72%);
  mix-blend-mode:multiply;
  opacity:0;transition:opacity .4s ease;
}
.hf-licht.is-verlicht::after{opacity:1}

.hf-eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 18px;
  display:flex;align-items:center;gap:10px;
}
.hf-eyebrow::after{content:"";flex:1;height:1px;background:rgba(20,56,60,.14)}

.hf-titel{
  font-family:var(--font-display);
  font-weight:800;font-size:clamp(2rem,5.4vw,3.75rem);
  line-height:1.02;letter-spacing:-.03em;margin:0 0 16px;max-width:16ch;
}
.hf-intro{
  font-size:clamp(1rem,1.9vw,1.125rem);line-height:1.6;
  max-width:52ch;color:rgba(20,56,60,.75);margin:0 0 clamp(40px,6vw,64px);
}

/* kaarten */
.hf-grid{
  display:grid;gap:1px;background:rgba(20,56,60,.14);
  border:1px solid rgba(20,56,60,.14);
  grid-template-columns:1fr;
}
@media (min-width:860px){.hf-grid{grid-template-columns:repeat(3,1fr)}}

.hf-kaart{
  position:relative;
  background:var(--paper);
  padding:clamp(28px,3.4vw,40px);
  display:flex;flex-direction:column;
  transition:background .35s ease;
}
/* lijn die vanaf links inschuift bij hover of toetsenbordfocus */
.hf-kaart::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.hf-kaart:hover::before,.hf-kaart:focus-within::before{transform:scaleX(1)}
.hf-kaart:hover,.hf-kaart:focus-within{background:var(--white)}
@media (prefers-reduced-motion: reduce){
  .hf-kaart,.hf-kaart::before,.hf-kaart__bedrag{transition:none}
}

.hf-kaart__label{
  font-family:var(--font-display);
  font-weight:600;font-size:1.19rem;letter-spacing:-.01em;margin:0 0 22px;
}
.hf-kaart__prijs{
  display:flex;align-items:baseline;gap:8px;
  padding-bottom:22px;border-bottom:1px solid rgba(20,56,60,.14);margin-bottom:22px;
}
.hf-kaart__vanaf{
  font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(20,56,60,.72);
}
.hf-kaart__bedrag{
  font-family:var(--font-display);
  font-weight:800;font-size:clamp(2.5rem,4.6vw,3.25rem);
  line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  transition:color .35s ease;
}
.hf-kaart:hover .hf-kaart__bedrag,
.hf-kaart:focus-within .hf-kaart__bedrag{color:var(--accent)}
.hf-kaart__omschrijving{
  font-size:.97rem;line-height:1.62;color:rgba(20,56,60,.75);
  margin:0 0 26px;
}

/* de opteller: prijs is basis plus wat er bovenop komt */
.hf-opteller{
  list-style:none;margin:auto 0 0;padding:0;
  font-family:var(--font-mono);font-size:.78rem;line-height:1.5;
}
.hf-opteller__kop{
  display:block;font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(20,56,60,.72);margin-bottom:12px;
}
.hf-opteller li{
  display:flex;gap:10px;padding:5px 0;
  color:rgba(20,56,60,.75);
}
.hf-opteller li::before{content:"+";color:var(--accent);flex:none}
/* de kop is geen opsomregel; li in de selector, anders wint de regel erboven */
.hf-opteller li.hf-opteller__kop::before{content:none}

/* systeemblok: calculator plus offertebeheer, ingebed onder het raster.
   De achtergrond is een fractie donkerder dan het papier, afgeleid uit de
   bestaande variabelen (color-mix, met --paper als terugval). */
.hf-systeem{
  margin-top:1px;border:1px solid rgba(20,56,60,.14);border-top:0;
  background:var(--paper);
  background:color-mix(in srgb, var(--ink) 5%, var(--paper));
  display:grid;grid-template-columns:1fr;
}
@media (min-width:860px){.hf-systeem{grid-template-columns:1.35fr 1fr}}

.hf-systeem__uitleg{padding:clamp(28px,3.4vw,40px)}
.hf-systeem__tag{
  font-family:var(--font-mono);font-size:.69rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  margin:0 0 14px;
}
.hf-systeem__titel{
  font-family:var(--font-display);
  font-weight:800;font-size:clamp(1.5rem,2.8vw,2rem);
  line-height:1.1;letter-spacing:-.025em;margin:0 0 14px;max-width:20ch;
}
.hf-systeem__tekst{
  font-size:.97rem;line-height:1.62;color:rgba(20,56,60,.75);
  margin:0 0 26px;max-width:46ch;
}
.hf-zijden{
  display:grid;gap:1px;
  background:rgba(20,56,60,.14);border:1px solid rgba(20,56,60,.14);
}
@media (min-width:520px){.hf-zijden{grid-template-columns:1fr 1fr}}
.hf-zijde{
  background:var(--paper);
  background:color-mix(in srgb, var(--ink) 5%, var(--paper));
  padding:18px 20px;
}
.hf-zijde__nr{
  font-family:var(--font-mono);font-size:.69rem;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(20,56,60,.72);
  display:block;margin-bottom:8px;
}
.hf-zijde__kop{
  font-family:var(--font-display);font-weight:600;
  font-size:1rem;margin:0 0 6px;letter-spacing:-.01em;
}
.hf-zijde__uitleg{font-size:.88rem;line-height:1.55;color:rgba(20,56,60,.75);margin:0}

.hf-systeem__prijs{
  padding:clamp(28px,3.4vw,40px);
  border-top:1px solid rgba(20,56,60,.14);
  display:flex;flex-direction:column;justify-content:center;
}
@media (min-width:860px){
  .hf-systeem__prijs{border-top:0;border-left:1px solid rgba(20,56,60,.14)}
}
.hf-prijs__kop{
  font-family:var(--font-mono);font-size:.69rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  margin:0 0 4px;
}
/* vaste getalkolom van 112px plus tabular figures: alleen zo staan de
   euro-tekens onder elkaar en lopen de cijfers binnen een bedrag recht */
.hf-regel{
  display:grid;grid-template-columns:1fr 112px;
  align-items:baseline;column-gap:16px;
  padding:15px 0;border-bottom:1px solid rgba(20,56,60,.14);
}
.hf-regel:last-of-type{border-bottom:0;padding-bottom:0}
.hf-regel__k{
  font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(20,56,60,.72);
  line-height:1.35;
}
.hf-regel__v{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.63rem,2.9vw,2rem);letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  white-space:nowrap;
}
.hf-regel__v small{
  font-family:var(--font-body);font-weight:500;
  font-size:.81rem;letter-spacing:0;color:rgba(20,56,60,.72);margin-left:5px;
}
/* onder ~420px valt "Eenmalig inrichten" naast de 112px-kolom over twee
   regels; alleen het label krimpt, de getalkolom blijft 112px */
@media (max-width:420px){
  .hf-regel__k{font-size:.66rem;letter-spacing:.06em}
}
.hf-systeem__link{
  margin-top:28px;padding-top:22px;border-top:1px solid rgba(20,56,60,.14);
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  align-self:stretch;transition:gap .25s ease;
}
.hf-systeem__link:hover{gap:15px}
.hf-systeem__link:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.hf-systeem__link span{color:var(--accent)}
/* de onderstreping zit om de tekst, niet om de hele link: anders loopt
   de pijl mee in de streep */
.hf-systeem__link u{
  text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:5px;
}
@media (prefers-reduced-motion: reduce){.hf-systeem__link{transition:none}}

/* ===== OFFERTE-TOOL =====
   Alleen op /offerte-tool/. De pagina hergebruikt de blokken van de
   prijzenpagina; dit zijn de drie plekken waar dat niet een op een past. */

/* Twee alinea's achter elkaar. hf-intro heeft onder zich de ruimte die een
   sectie afsluit; tussen twee alinea's van hetzelfde stuk is dat te veel. */
.ot-inleiding .hf-intro + .hf-intro{margin-top:calc(clamp(40px,6vw,64px) * -1 + 18px)}

/* Kop van de subsectie staat hier los in de kolom en niet in een hf-systeem,
   dus hij heeft zelf ruimte erboven nodig. */
.ot-kop{margin-top:6px}

/* Van foto naar offerte: tekst links, het schema rechts. Zelfde breekpunt
   als hf-systeem, zodat de pagina overal op hetzelfde moment omklapt. */
.ot-tweeluik{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;margin-bottom:clamp(40px,6vw,64px)}
.ot-tweeluik .hf-intro{margin-bottom:0}
@media (min-width:860px){
  .ot-tweeluik{grid-template-columns:1.1fr 1fr;column-gap:var(--kolomgat)}
}
/* Het schema is inline SVG in de huisstijl: petrol lijnen, oranje voor de
   pijlen en de beoordeling, koel wit als vlak. Statisch, dus niets voor
   prefers-reduced-motion. */
.ot-schema{display:block;width:100%;height:auto;color:var(--ink)}

/* Drie stappen in plaats van de twee van hf-zijden, dus het raster van drie
   uit hf-grid, met de kaartopmaak van hf-zijde erin. */
.ot-stappen{margin-top:22px}

/* De btw-regel staat in het paneel, onder de demo-link, in plaats van los
   onder de pagina. */
.ot-noot{margin:18px 0 0}

/* De secties over schilders en andere vakken staan los in de kolom, met de
   ruimte van een sectie erboven; de lijst en het raster erin sluiten dan
   direct op hun inleiding aan. */
.ot-blok{margin-top:clamp(40px,6vw,64px)}
.ot-blok .punt-lijst,.ot-blok .auto-raster{margin-top:0}
.ot-blok .hf-noot{margin-top:18px;font-family:var(--font-body);font-size:.95rem}

/* De derde regel van het prijsblok is een zin en geen bedrag. Die past niet in
   de vaste getalkolom van 112px, dus daar loopt de tekst over de volle
   breedte onder het label door. */
.hf-regel--tekst{grid-template-columns:1fr}
.hf-regel__t{
  font-size:.9rem;line-height:1.58;color:rgba(20,56,60,.75);
  margin:8px 0 0;max-width:52ch;
}

/* ===== WEBDESIGN EN OFFERTE-TOOL =====
   Gedeelde tweekoloms opmaak. Gebruikt de breedte van een bureaublad zonder
   de regellengte op te rekken: twee kolommen naast elkaar in plaats van een
   halve pagina leeg. */

/* Twee intro-alinea's naast elkaar op een breed scherm, elk binnen de
   leesbreedte. */
@media (min-width:900px){
  .wd-kolommen{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--kolomgat);align-items:start}
  .wd-kolommen .hf-intro{max-width:none;margin-bottom:0}
  .wd-inleiding .hf-intro + .hf-intro{margin-top:0}
  .wd-inleiding{margin-bottom:clamp(40px,6vw,64px)}
}

/* De afsluiting: tekst links, knop rechts op dezelfde regel, uitgelijnd op de
   onderkant van de tekst. Op een smal scherm gewoon onder elkaar. */
@media (min-width:900px){
  .wd-cta{display:grid;grid-template-columns:1fr auto;column-gap:var(--kolomgat);align-items:end}
  .wd-cta .section-head{margin:0}
  .wd-cta__knop{margin:0 0 6px}
}

/* Portfolio op /webdesign/: een horizontaal spoor met scroll-snap, zodat
   vegen op een telefoon gewoon het eigen scrollen van de browser is. De
   knoppen zijn er voor een muis en verschuiven het spoor een kaart. */
.pf-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.pf-knoppen{display:flex;gap:8px;flex:none;padding-bottom:6px}
.pf-knop{
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--white);color:var(--ink);
  border:1px solid rgba(20,56,60,.25);
}
.pf-knop:disabled{opacity:.35;cursor:default}
.pf-knop:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (hover: hover) and (pointer: fine){
  .pf-knop:not(:disabled):hover{border-color:var(--accent);color:var(--accent)}
}
.pf-spoor{
  display:flex;gap:var(--kolomgat);margin-top:44px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:0;
  padding-bottom:10px;scrollbar-width:thin;
}
.pf-spoor:focus-visible{outline:3px solid var(--focus);outline-offset:6px;border-radius:12px}
.pf-kaart{
  flex:0 0 min(440px,86%);scroll-snap-align:start;
  background:var(--white);border:1px solid rgba(20,56,60,.12);border-radius:12px;
  overflow:hidden;
}
/* Alle beelden op dezelfde verhouding, bovenkant in beeld: een screenshot
   met een andere hoogte (versvanzee is 4 op 3) trekt anders zijn kaart
   langer dan de rest. */
.pf-kaart img{display:block;width:100%;height:auto;aspect-ratio:8 / 5;object-fit:cover;object-position:top;border-bottom:1px solid rgba(20,56,60,.12)}
.pf-kaart__tekst{padding:18px 20px 22px}
.pf-kaart__naam{
  font-family:var(--font-mono);font-size:.85rem;letter-spacing:.02em;
  color:var(--accent);margin:0 0 8px;font-weight:500;
}
.pf-kaart__uitleg{margin:0 0 14px;font-size:1rem;line-height:1.55;color:rgba(20,56,60,.75)}

.hf-noot{
  margin:20px 0 0;font-family:var(--font-mono);
  font-size:.72rem;color:rgba(20,56,60,.72);
}

/* ===== WEBSHOP-AUTOMATISERING =====
   Overgenomen uit webshop-sectie.html; de eigen :root is vervallen en de
   kleuren lopen via de huisstijl: petrol-900 -> --petrol (vlak) en --ink,
   offwit -> --licht, petrol-400 -> --nevel, oranje -> --accent-licht
   (dit blok is donker). De vijf animation-delays vormen samen de keten
   van bestelling naar bezorgd en staan onaangeroerd. */
.hf-shop{
  position:relative;overflow:hidden;
  background:var(--petrol);color:var(--licht);
  padding:var(--sectie) 0;
  font-family:var(--font-body);
}
/* fijn raster op de achtergrond, geeft de systeemblik zonder neon */
.hf-shop::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 40%,transparent 100%);
}
.hf-shop__inner{position:relative;max-width:var(--container);margin:0 auto;padding:0 var(--pad)}

.hf-shop__eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-licht);margin:0 0 18px;
  display:flex;align-items:center;gap:10px;
}
.hf-shop__eyebrow::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.16)}

.hf-shop__titel{
  font-family:var(--font-display);
  font-weight:800;font-size:clamp(2rem,5.4vw,3.75rem);
  line-height:1.02;letter-spacing:-.03em;margin:0 0 16px;max-width:17ch;
}
.hf-shop__intro{
  font-size:clamp(1rem,1.9vw,1.125rem);line-height:1.6;max-width:54ch;
  color:rgba(255,255,255,.72);margin:0 0 clamp(48px,7vw,72px);
}

/* pijplijn */
.hf-pijp{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.025);
  padding:clamp(26px,3.6vw,44px) clamp(22px,3.2vw,40px);
  margin-bottom:clamp(40px,5vw,56px);
}
.hf-pijp__kop{
  font-family:var(--font-mono);font-size:.69rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--nevel);
  margin:0 0 30px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.hf-pijp__kop b{color:var(--licht);font-weight:500}

.hf-spoor{position:relative;display:grid;gap:0;grid-template-columns:1fr;list-style:none}
@media (min-width:840px){.hf-spoor{grid-template-columns:repeat(5,1fr)}}

/* de lijn achter de knopen: verticaal onder 840px, daarboven horizontaal */
.hf-spoor::before{
  content:"";position:absolute;background:rgba(255,255,255,.16);
  left:11px;top:6px;bottom:6px;width:1px;
}
@media (min-width:840px){
  .hf-spoor::before{left:10%;right:10%;top:11px;bottom:auto;width:auto;height:1px}
}

.hf-stap{position:relative;padding:0 0 30px 34px}
@media (min-width:840px){.hf-stap{padding:34px 18px 0 0}}
.hf-stap:last-child{padding-bottom:0}

.hf-stap__punt{
  position:absolute;left:5px;top:5px;width:13px;height:13px;border-radius:50%;
  background:var(--petrol);border:1px solid rgba(255,255,255,.35);
}
@media (min-width:840px){.hf-stap__punt{left:calc(50% - 6px);top:5px}}
.hf-stap__punt::after{
  content:"";position:absolute;inset:2px;border-radius:50%;
  background:var(--accent-licht);opacity:0;transform:scale(.4);
}
.hf-stap__nr{
  font-family:var(--font-mono);font-size:.69rem;
  letter-spacing:.1em;color:var(--nevel);display:block;margin-bottom:6px;
}
.hf-stap__naam{
  font-family:var(--font-display);font-weight:600;
  font-size:1.06rem;letter-spacing:-.01em;margin:0 0 6px;
}
.hf-stap__wat{
  font-size:.84rem;line-height:1.5;color:rgba(255,255,255,.62);
  margin:0;max-width:24ch;
}
@media (min-width:840px){
  .hf-stap{text-align:center}
  .hf-stap__wat{margin:0 auto}
}

/* het pakket dat langs de stappen loopt */
@keyframes hf-aan{
  0%,4%{opacity:0;transform:scale(.4)}
  9%,26%{opacity:1;transform:scale(1)}
  36%,100%{opacity:.35;transform:scale(.8)}
}
.hf-stap:nth-child(1) .hf-stap__punt::after{animation:hf-aan 9s linear infinite}
.hf-stap:nth-child(2) .hf-stap__punt::after{animation:hf-aan 9s linear infinite 1.4s}
.hf-stap:nth-child(3) .hf-stap__punt::after{animation:hf-aan 9s linear infinite 2.8s}
.hf-stap:nth-child(4) .hf-stap__punt::after{animation:hf-aan 9s linear infinite 4.2s}
.hf-stap:nth-child(5) .hf-stap__punt::after{animation:hf-aan 9s linear infinite 5.6s}

/* tegels */
.hf-tegels{
  display:grid;gap:1px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);
  grid-template-columns:1fr;
}
@media (min-width:640px){.hf-tegels{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.hf-tegels{grid-template-columns:repeat(3,1fr)}}

.hf-tegel{
  background:var(--petrol);padding:clamp(24px,2.8vw,32px);
  transition:background .3s ease;
}
.hf-tegel:hover{background:var(--petrol-2)}
.hf-tegel__nr{
  font-family:var(--font-mono);font-size:.69rem;
  letter-spacing:.1em;color:var(--accent-licht);display:block;margin-bottom:16px;
}
.hf-tegel__kop{
  font-family:var(--font-display);font-weight:600;
  font-size:1.13rem;letter-spacing:-.01em;margin:0 0 10px;
}
.hf-tegel__uitleg{
  font-size:.91rem;line-height:1.58;color:rgba(255,255,255,.68);margin:0 0 16px;
}
.hf-tegel__winst{
  font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--nevel);
  display:flex;align-items:baseline;gap:8px;
}
.hf-tegel__winst b{color:var(--licht);font-weight:500;font-variant-numeric:tabular-nums}

/* afsluiter */
.hf-shop__slot{
  margin-top:clamp(40px,5vw,56px);
  display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;
  justify-content:space-between;
}
.hf-shop__slot p{
  margin:0;font-size:.97rem;line-height:1.55;
  color:rgba(255,255,255,.72);max-width:44ch;
}
.hf-shop__cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--accent);color:var(--knop-tekst);
  padding:16px 26px;text-decoration:none;font-weight:500;
  transition:gap .25s ease;
}
.hf-shop__cta:hover{gap:16px}
.hf-shop__cta:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* de punten staan stil en permanent aan */
@media (prefers-reduced-motion:reduce){
  .hf-stap__punt::after,.hf-tegel,.hf-shop__cta{animation:none!important;transition:none!important}
  .hf-stap__punt::after{opacity:1;transform:scale(1)}
}

/* ===== SECTIETITELS OP DESKTOP =====
   De ch-caps op de titels lieten koppen eerder afbreken dan de container
   nodig maakt. Vanaf 1000px vervallen die caps; daaronder blijven ze staan,
   want daar doen ze wel hun werk. De intro-alinea's houden hun eigen
   max-width: dat blijven leesregels. De twee hero-koppen blijven buiten
   schot, die breken bewust af met een <br>. */
.section-head h2,
.hf-titel,.hf-systeem__titel,.hf-shop__titel,
.work-panel h2,.dark-panel h2,.cta-panel h2{
  text-wrap:balance; /* vangnet: gelijk verdeelde regels als het niet past */
}
.section-head p,.hf-intro,.hf-shop__intro,.hf-systeem__tekst,.cta-panel p{
  text-wrap:pretty; /* geen los woord op de laatste regel */
}
@media (min-width:1000px){
  .section-head h2,
  .hf-titel,.hf-systeem__titel,.hf-shop__titel,
  .work-panel h2,.dark-panel h2{
    max-width:none;
  }
}
/* deze kop heeft op 60px net te veel breedte nodig (1130 van 1160); een
   maat kleiner en hij past ruim vanaf 1000px */
.hf-titel--lang,.hf-shop__titel--lang{font-size:clamp(1.75rem,4.1vw,2.88rem)}

/* ===== AUTOMATISERINGSRASTER =====
   Homepage, sectie "Wat ik automatiseer". Blauwdrukstijl: kaarten op koel
   wit, gescheiden door dunne petrollijnen, zodat het raster als een
   technische tekening leest. Eigen klassen: hf-tegel staat op een petrol
   vlak en wordt op de webshoppagina gebruikt; die blijft ongemoeid. */
/* ===== AI-AUTOMATISERING =====
   Opmaak die alleen op /ai-automatisering/ gebruikt wordt. De pagina deelt
   verder alles met de rest van de site, dus nieuwe opmaak krijgt eigen namen
   in plaats van een aanpassing aan een bestaande regel. */

/* Regel onder de heroknoppen: wat de scan is, in mono, rustig. */
.auto-hero-note{
  margin-top:20px;max-width:52ch;
  font-family:var(--font-mono);font-size:12px;line-height:1.6;
  color:var(--nevel);
}

/* Twee kolommen per onderwerp: links wat er automatisch gaat, rechts het
   voorbeeld en wat we er al voor gebouwd hebben. Zo staat er niet acht keer
   hetzelfde blok onder elkaar en is de pagina de helft korter. */
.auto-blok{display:grid;grid-template-columns:1fr;gap:24px;margin-top:30px}
@media (min-width:900px){
  .auto-blok{grid-template-columns:1fr 1fr;gap:var(--kolomgat);align-items:start}
}
/* Beide kolommen vullen zich van boven naar beneden: links de opsomming,
   rechts het voorbeeld en daaronder wat we er al voor gebouwd hebben. Zo
   blijft er rechtsonder geen leeg vlak over. */
.auto-blok__kolom{min-width:0;display:flex;flex-direction:column;gap:24px}


/* Klein mono-label boven een lijst of een voorbeeld. Groter dan het oude
   label, want dit staat boven de kern van de pagina. */
/* De acht onderwerpen als uitklaplijst, in dezelfde vorm als de veelgestelde
   vragen. Dichtgeklapt is elke regel een titel plus een zin uit de praktijk,
   dus de lijst is zelf al het overzicht. Openklappen toont de details. Werkt
   zonder JavaScript; alleen het openen bij aankomst via een anker is script. */
.onderwerpen{display:flex;flex-direction:column;gap:12px;margin-top:44px}
.onderwerp{
  background:var(--white);
  border:1px solid rgba(20,56,60,.12);
  border-radius:12px;
  scroll-margin-top:24px;   /* bij aankomst via een anker blijft de titelregel in beeld */
}
.onderwerp__kop{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:1fr auto;column-gap:18px;align-items:center;
  padding:18px 22px;
}
.onderwerp__kop::-webkit-details-marker{display:none}
.onderwerp__kop:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:12px}
.onderwerp__tekst{min-width:0}
.onderwerp__titel{
  display:block;margin:0;
  font-family:var(--font-display);font-weight:700;
  font-size:1.15rem;line-height:1.25;letter-spacing:-.01em;color:var(--ink);
}
.onderwerp__zin{
  display:block;margin-top:4px;
  font-size:1rem;line-height:1.5;color:rgba(20,56,60,.72);
}
.onderwerp__teken{
  position:relative;width:28px;height:28px;flex:none;
  border:1px solid rgba(20,56,60,.25);border-radius:50%;
}
.onderwerp__teken::before,.onderwerp__teken::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--accent);
  transform:translate(-50%,-50%);
}
.onderwerp__teken::before{width:12px;height:2px}
.onderwerp__teken::after{width:2px;height:12px;transition:transform .25s ease}
.onderwerp[open] .onderwerp__teken::after{transform:translate(-50%,-50%) rotate(90deg)}
@media (hover: hover) and (pointer: fine){
  .onderwerp__kop:hover .onderwerp__teken{border-color:var(--accent)}
}
@media (prefers-reduced-motion: reduce){.onderwerp__teken::after{transition:none}}
.onderwerp__inhoud{padding:4px 22px 26px;border-top:1px solid rgba(20,56,60,.12)}
.onderwerp__intro{
  margin:18px 0 0;max-width:var(--regelbreedte);
  font-size:1rem;line-height:1.6;color:rgba(20,56,60,.75);
}
.onderwerp__inhoud .auto-blok{margin-top:24px}
.onderwerp__inhoud .grid-link{margin-top:24px}

.auto-label{
  display:block;
  font-family:var(--font-mono);font-size:.8rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(20,56,60,.78);
  margin-bottom:14px;
}

/* De opsommingen stonden in mono op .78rem, de kleinste tekst van de pagina
   terwijl het de inhoud is. Nu in de gewone leesletter, met hetzelfde
   oranje plusteken als merkteken. Het teken staat absoluut in plaats van in
   een flexrij, zodat een link in de regel gewoon meeloopt en niet naar
   rechts wordt geduwd. */
.auto-lijst{
  list-style:none;margin:0;padding:0;
  font-family:var(--font-body);font-size:1rem;line-height:1.6;
  color:rgba(20,56,60,.8);
}
.auto-lijst li{position:relative;padding-left:22px;margin-bottom:10px}
.auto-lijst li:last-child{margin-bottom:0}
.auto-lijst li::before{
  content:"+";position:absolute;left:0;top:0;
  font-family:var(--font-mono);color:var(--accent);
}

/* Het voorbeeld is een verhaaltje, dus een gevuld vlak. Wat we al gebouwd
   hebben is bewijs, dus een streep in het accent. Twee verschillende dingen
   horen er ook verschillend uit te zien; eerder waren ze niet te
   onderscheiden. */
.auto-voorbeeld{
  background:rgba(20,56,60,.05);
  border:1px solid rgba(20,56,60,.12);
  padding:20px 22px;
}
.auto-voorbeeld p{
  margin:0;
  font-family:var(--font-body);font-size:1rem;line-height:1.6;
  color:rgba(20,56,60,.8);
}
.auto-bewijs{border-left:2px solid rgba(189,65,40,.45);padding-left:20px}
/* Op een smal scherm staat alles onder elkaar; dan is de kolombreedte al de
   leesbreedte. Op een breed scherm is de kolom zelf ongeveer zeventig tekens
   breed, dus daar is geen extra begrenzing nodig. */

.auto-raster{
  display:grid;grid-template-columns:1fr;gap:0;margin-top:44px;
  border-top:1px solid rgba(20,56,60,.25);
  border-left:1px solid rgba(20,56,60,.25);
}
@media (min-width:640px){.auto-raster{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.auto-raster{grid-template-columns:repeat(4,1fr)}}

.auto-kaart{
  --hoek:rgba(20,56,60,.55);
  display:flex;flex-direction:column;padding:20px;
  background-color:var(--paper);color:var(--ink);text-decoration:none;
  border-right:1px solid rgba(20,56,60,.25);
  border-bottom:1px solid rgba(20,56,60,.25);
  transition:background-color .2s ease,color .2s ease;
  /* vier L-hoeken: per hoek een lijn van 10px breed en een van 10px hoog,
     1px dik, op 8px van de rand. De kleur loopt via --hoek zodat de
     omkering bij hover in een keer meegaat. */
  background-image:
    linear-gradient(var(--hoek),var(--hoek)),linear-gradient(var(--hoek),var(--hoek)),
    linear-gradient(var(--hoek),var(--hoek)),linear-gradient(var(--hoek),var(--hoek)),
    linear-gradient(var(--hoek),var(--hoek)),linear-gradient(var(--hoek),var(--hoek)),
    linear-gradient(var(--hoek),var(--hoek)),linear-gradient(var(--hoek),var(--hoek));
  background-size:10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px;
  background-position:
    left 8px top 8px,left 8px top 8px,
    right 8px top 8px,right 8px top 8px,
    left 8px bottom 8px,left 8px bottom 8px,
    right 8px bottom 8px,right 8px bottom 8px;
  background-repeat:no-repeat;
}
@media (min-width:1024px){.auto-kaart{padding:28px}}

.auto-kaart__nr{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  color:var(--accent);margin-bottom:14px;
}
.auto-kaart__kop{
  font-family:var(--font-display);font-weight:700;
  font-size:20px;line-height:1.2;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 10px;
}
.auto-kaart__uitleg{
  font-family:var(--font-body);font-size:15px;line-height:1.55;
  color:rgba(20,56,60,.8);margin:0 0 18px;
}
.auto-kaart__stroom{
  font-family:var(--font-mono);font-size:12px;line-height:1.5;
  color:rgba(20,56,60,.7);margin-top:auto;overflow-wrap:anywhere;
}
.auto-kaart__link{
  font-family:var(--font-mono);font-size:12px;
  color:var(--accent);align-self:flex-end;margin-top:12px;
}

/* omkering: petrol vlak, koel witte tekst, oranje mono en hoeken */
.auto-kaart:hover,.auto-kaart:focus-visible{
  --hoek:var(--accent-licht);
  background-color:var(--ink);
}
.auto-kaart:hover .auto-kaart__kop,.auto-kaart:focus-visible .auto-kaart__kop{color:var(--paper)}
.auto-kaart:hover .auto-kaart__uitleg,.auto-kaart:focus-visible .auto-kaart__uitleg{color:rgba(237,240,238,.86)}
.auto-kaart:hover .auto-kaart__nr,.auto-kaart:focus-visible .auto-kaart__nr,
.auto-kaart:hover .auto-kaart__stroom,.auto-kaart:focus-visible .auto-kaart__stroom,
.auto-kaart:hover .auto-kaart__link,.auto-kaart:focus-visible .auto-kaart__link{color:var(--accent-licht)}

.auto-kaart:focus-visible{outline:2px solid var(--accent-licht);outline-offset:-4px}

@media (prefers-reduced-motion:reduce){.auto-kaart{transition:none}}

/* ===== STAPPENSPOOR =====
   Homepage, sectie "Zo gaat het". Eigen klassen: hf-stap staat op een
   petrol vlak op de webshoppagina en heeft daar witte tekst en een
   geanimeerde punt; die blijft ongemoeid.
   Mobiel eerst: onder elkaar met een verticale lijn links. */
.stap-spoor{
  --n:3;
  --gap:0px; /* mobiel: geen kolommen */
  position:relative;display:grid;grid-template-columns:1fr;gap:0;
  list-style:none;margin:44px 0 0;padding:0;
}
/* de doorlopende lijn: verticaal op mobiel, horizontaal vanaf 640px */
.stap-spoor::before{
  content:"";position:absolute;background:rgba(20,56,60,.25);
  left:6px;top:6px;bottom:6px;width:1px;
}
.stap-spoor .stap{position:relative;padding:0 0 30px 34px}
.stap-spoor .stap:last-child{padding-bottom:0}
.stap__punt{
  position:absolute;left:0;top:3px;width:13px;height:13px;border-radius:50%;
  background:var(--accent);
}

@media (min-width:640px){
  .stap-spoor{--gap:var(--kolomgat);grid-template-columns:repeat(var(--n),1fr);column-gap:var(--gap)}
  /* lijn loopt van het midden van de eerste punt tot het midden van de derde */
  .stap-spoor::before{
    top:6px;bottom:auto;left:6px;height:1px;
    width:calc((100% + var(--gap)) * (var(--n) - 1) / var(--n));
  }
  .stap-spoor .stap{padding:34px 0 0}
  .stap__punt{top:0;left:0}
}


.stap__nr{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  color:var(--accent);display:block;margin-bottom:10px;
}
.stap__naam{
  font-family:var(--font-display);font-weight:700;
  font-size:20px;line-height:1.2;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 8px;
}
.stap__wat{
  font-family:var(--font-body);font-size:15px;line-height:1.55;
  color:rgba(20,56,60,.8);margin:0;max-width:34ch;
}

/* ===== UIT DE PRAKTIJK =====
   Tekst links, screenshot rechts in een browserkader. Verhouding 5 op 7. */
.praktijk{display:grid;grid-template-columns:1fr;gap:var(--kolomgat);align-items:start}
@media (min-width:1024px){
  .praktijk{grid-template-columns:5fr 7fr;gap:var(--kolomgat)}
}
.praktijk{margin-top:44px}   /* zelfde afstand onder de sectiekop als .stap-spoor */
.praktijk__tekst{min-width:0}
.praktijk__beeld{margin:0;min-width:0}

/* De sectiekop staat boven de voorbeelden, de naam van het voorbeeld staat
   erbij in de tekstkolom. */
.praktijk__titel{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(20px,2vw,26px);letter-spacing:-.01em;line-height:1.2;
}
.praktijk__uitleg{margin-top:14px;max-width:var(--regelbreedte);color:rgba(20,56,60,.7)}

/* Bij meerdere voorbeelden wisselen de kolommen om, alleen op een breed scherm.
   Op een smal scherm staat de tekst altijd boven het beeld. */
@media (min-width:1024px){
  .praktijk--omgekeerd{grid-template-columns:7fr 5fr}
  .praktijk--omgekeerd .praktijk__tekst{order:2}
  .praktijk--omgekeerd .praktijk__beeld{order:1}
}

/* Thumbnails onder het browserkader, alleen bij meer dan een screenshot. */
.praktijk__thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.praktijk__thumb{
  padding:0;line-height:0;cursor:pointer;
  background:var(--paper);border:1px solid rgba(20,56,60,.25);border-radius:0;
}
.praktijk__thumb img{display:block;width:88px;height:64px;object-fit:cover;object-position:top}
.praktijk__thumb[aria-current="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.praktijk__thumb:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (hover: hover) and (pointer: fine){
  .praktijk__thumb:hover{border-color:var(--accent)}
}

/* Het beeld in het kader is bijgesneden; klikken toont het hele screenshot.
   De knop is er alleen als JavaScript draait, vandaar dat main.js hem zelf
   om de afbeelding heen zet. */
.venster__knop{
  display:block;width:100%;padding:0;margin:0;border:0;
  background:none;font:inherit;color:inherit;cursor:zoom-in;
}
.venster__knop:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

.beeldzoom{
  position:fixed;inset:0;z-index:220;
  overflow:auto;overscroll-behavior:contain;
  background:rgba(15,45,49,.95);
  padding:64px 16px 56px;
}
.beeldzoom[hidden]{display:none}
.beeldzoom__blad{max-width:1100px;margin:0 auto}
/* Op een smal scherm zou het hele screenshot terugschalen naar iets
   onleesbaars: dan is vergroten zinloos. Het krijgt daarom een vaste,
   leesbare breedte en de laag schuift zelf mee, zodat je er doorheen
   kunt kijken zoals bij een echte pagina. */
@media (max-width:900px){
  .beeldzoom__blad{max-width:none;width:860px}
}
.beeldzoom__beeld{
  display:block;width:100%;height:auto;cursor:default;
  background:var(--paper);border:1px solid rgba(220,230,226,.25);
}
.beeldzoom__bijschrift{
  font-family:var(--font-mono);font-size:12px;color:var(--nevel);
  margin:12px 0 0;
}
.beeldzoom__sluit{
  position:fixed;top:12px;right:12px;
  width:44px;height:44px;padding:0;line-height:1;
  font-family:var(--font-mono);font-size:24px;
  color:var(--licht);background:rgba(15,45,49,.9);
  border:1px solid rgba(220,230,226,.3);border-radius:2px;cursor:pointer;
}
.beeldzoom__sluit:focus-visible{outline:2px solid var(--accent-licht);outline-offset:2px}
@media (hover: hover) and (pointer: fine){
  .beeldzoom__sluit:hover{color:var(--accent-licht);border-color:var(--accent-licht)}
}

.venster{
  --hoek:rgba(20,56,60,.55);
  position:relative;overflow:hidden;
  border:1px solid rgba(20,56,60,.25);
  background-color:var(--paper);
  /* zelfde hoekmarkeringen als op de automatiseringskaarten */
  background-image:
    linear-gradient(var(--hoek),var(--hoek)),linear-gradient(var(--hoek),var(--hoek)),
    linear-gradient(var(--hoek),var(--hoek)),linear-gradient(var(--hoek),var(--hoek)),
    linear-gradient(var(--hoek),var(--hoek)),linear-gradient(var(--hoek),var(--hoek)),
    linear-gradient(var(--hoek),var(--hoek)),linear-gradient(var(--hoek),var(--hoek));
  background-size:10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px;
  background-position:
    left 8px top 8px,left 8px top 8px,
    right 8px top 8px,right 8px top 8px,
    left 8px bottom 8px,left 8px bottom 8px,
    right 8px bottom 8px,right 8px bottom 8px;
  background-repeat:no-repeat;
}
.venster__balk{
  display:flex;align-items:center;gap:6px;
  height:28px;padding:0 10px;
  background:rgba(20,56,60,.08);
  border-bottom:1px solid rgba(20,56,60,.25);
}
.venster__stip{width:8px;height:8px;border-radius:50%;background:rgba(20,56,60,.3)}
.venster img{
  display:block;width:100%;height:auto;max-height:520px;
  object-fit:cover;object-position:top;
}
.venster__bijschrift{
  font-family:var(--font-mono);font-size:12px;
  color:rgba(20,56,60,.7);margin-top:10px;
}

/* ===== PASS 2: HANDSFREE-FLOW ===== */

/* vier stappen in plaats van drie */
.stap-spoor--4{--n:4}

/* rasters met een ander aantal kolommen. Het kaartraster blijft vier;
   drie kaarten gaan op smalle schermen naar een kolom, want twee kolommen
   met drie kaarten laat een gat in de laatste rij. */
.auto-raster--3{grid-template-columns:1fr}
@media (min-width:1024px){.auto-raster--3{grid-template-columns:repeat(3,1fr)}}

/* vijf kaarten: de eerste is twee cellen breed, zodat het raster in beide
   standen precies volloopt (2 + 4 en 3 + 3). */
.auto-raster--5{grid-template-columns:1fr}
@media (min-width:640px){
  .auto-raster--5{grid-template-columns:1fr 1fr}
  .auto-kaart--breed{grid-column:span 2}
}
@media (min-width:1024px){.auto-raster--5{grid-template-columns:repeat(3,1fr)}}

.auto-kaart__prijs{
  font-family:var(--font-mono);font-size:22px;font-weight:500;
  color:var(--ink);margin:0 0 10px;
}
.auto-kaart:hover .auto-kaart__prijs,
.auto-kaart:focus-visible .auto-kaart__prijs{color:var(--paper)}

/* herkenning: zes mono-kaders in blauwdrukstijl, zonder omkering */
.herken-raster{
  display:grid;grid-template-columns:1fr;gap:0;list-style:none;margin:44px 0 0;padding:0;
  border-top:1px solid rgba(20,56,60,.25);
  border-left:1px solid rgba(20,56,60,.25);
}
@media (min-width:640px){.herken-raster{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.herken-raster{grid-template-columns:repeat(3,1fr)}}
.herken-vak{
  padding:20px;
  font-family:var(--font-mono);font-size:13px;line-height:1.5;
  color:rgba(20,56,60,.8);
  border-right:1px solid rgba(20,56,60,.25);
  border-bottom:1px solid rgba(20,56,60,.25);
}
@media (min-width:1024px){.herken-vak{padding:24px}}

/* stroomlijn: punten op een doorlopende lijn over de volle breedte.
   --n is het aantal stappen; de lijn loopt van de eerste tot de laatste punt. */
.stroom{
  --n:7;--gap:var(--kolomgat);
  position:relative;display:grid;grid-template-columns:1fr;gap:0;
  list-style:none;margin:28px 0 0;padding:0;
}
.stroom::before{
  content:"";position:absolute;background:rgba(20,56,60,.25);
  left:6px;top:6px;bottom:6px;width:1px;
}
.stroom__stap{
  position:relative;padding:0 0 18px 34px;
  font-family:var(--font-mono);font-size:12px;color:rgba(20,56,60,.72);
}
.stroom__stap:last-child{padding-bottom:0}
.stroom__stap::before{
  content:"";position:absolute;left:0;top:2px;
  width:13px;height:13px;border-radius:50%;background:var(--accent);
}
@media (min-width:1024px){
  .stroom{grid-auto-flow:column;grid-auto-columns:1fr;grid-template-columns:none;column-gap:var(--gap)}
  .stroom::before{
    top:6px;bottom:auto;left:6px;height:1px;
    width:calc((100% + var(--gap)) * (var(--n) - 1) / var(--n));
  }
  .stroom__stap{padding:26px 0 0}
  .stroom__stap::before{top:0}
}

/* vijf punten onder elkaar bij eigenaarschap */
.punt-lijst{
  display:grid;grid-template-columns:1fr;gap:22px;
  list-style:none;margin:44px 0 0;padding:0;max-width:var(--regelbreedte);
}
.punt__kop{
  font-family:var(--font-display);font-weight:700;font-size:17px;
  color:var(--ink);margin:0 0 4px;
}
.punt__wat{
  font-family:var(--font-body);font-size:15px;line-height:1.55;
  color:rgba(20,56,60,.8);margin:0;
}

/* besparingscalculator */
.reken{
  margin-top:44px;padding:24px;
  border:1px solid rgba(20,56,60,.25);
  background-color:var(--paper);
}
@media (min-width:1024px){.reken{padding:32px}}
.reken__velden{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:640px){.reken__velden{grid-template-columns:repeat(3,1fr)}}
.reken__veld{margin:0;display:flex;flex-direction:column;gap:6px}
.reken__veld--breed{grid-column:1 / -1}
.reken__label{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  color:rgba(20,56,60,.72);
}
.reken__invoer{
  font-family:var(--font-mono);font-size:16px;color:var(--ink);
  background:var(--white);border:1px solid rgba(20,56,60,.25);
  padding:10px 12px;width:100%;
}
.reken__schuif{width:100%;accent-color:var(--accent)}
.reken__hint{font-family:var(--font-body);font-size:14px;color:rgba(20,56,60,.72)}
.reken__uit{
  margin-top:24px;padding-top:20px;
  border-top:1px solid rgba(20,56,60,.25);
}
.reken__regel{
  font-family:var(--font-mono);font-size:14px;line-height:1.7;
  color:rgba(20,56,60,.8);margin:0;
}
.reken__regel b{color:var(--ink);font-weight:500}
.reken__slot{margin:24px 0 14px;font-family:var(--font-body);font-size:15px;color:rgba(20,56,60,.8)}

/* -- stippen op de foto (markeer-foto.js) --------------------------------- */
.markeer{margin-top:14px}
.markeer-uitleg{font-size:.95rem;color:rgba(20,56,60,.8);margin:0 0 10px;line-height:1.5}
.markeer-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.markeer-chips .segment-knop{display:inline-flex;align-items:center;gap:8px}
.markeer-kleur{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--stip);box-shadow:0 0 0 2px #fff;flex:0 0 auto}
.markeer-vlak{position:relative;border-radius:12px;overflow:hidden;background:rgba(20,56,60,.08)}
.markeer-canvas{display:block;width:100%;height:auto;touch-action:pan-y pinch-zoom;cursor:crosshair}
.markeer-canvas:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.markeer-onder{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px}
.markeer-legenda{display:flex;gap:14px;list-style:none;margin:0;padding:0;font-size:.88rem;color:rgba(20,56,60,.75)}
.markeer-legenda li{display:inline-flex;align-items:center;gap:6px}
.markeer-telling{margin:8px 0 0;font-weight:600;font-size:1rem;line-height:1.5}
.markeer-telling small{display:block;font-weight:400;font-size:.88rem;color:rgba(20,56,60,.72)}
.markeer-undo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:4px 8px 4px 14px;border-radius:12px;background:var(--petrol);color:var(--licht);font-size:.95rem}
.markeer-undo[hidden]{display:none}
.markeer-undo .tekst-knop{color:var(--accent-licht);--focus:var(--accent-licht)}
.markeer-status{margin:6px 0 0;font-size:.88rem;color:#8f2a1e}
.markeer-status[hidden]{display:none}
.markeer-lijst{margin-top:8px;font-size:.9rem}
.markeer-lijst summary{cursor:pointer;color:rgba(20,56,60,.75);min-height:44px;display:flex;align-items:center}
.markeer-lijst ul{list-style:none;margin:0;padding:0}
.markeer-lijst .tekst-knop{padding-left:0}
.markeer-groot{position:fixed;inset:0;z-index:210;display:flex;flex-direction:column;gap:8px;background:var(--petrol);color:var(--licht);padding:calc(10px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px));--focus:var(--accent-licht)}
.markeer-groot[hidden]{display:none}
.markeer-groot-kop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.markeer-groot-kop h3{font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin:0}
.markeer-groot .sheet-sluit{color:var(--licht);border-color:rgba(220,230,226,.4)}
.markeer-groot .markeer-chips{margin-bottom:0}
.markeer-groot .segment-knop{background:transparent;color:var(--licht);border-color:rgba(220,230,226,.4)}
.markeer-groot .segment-knop[aria-checked="true"]{background:var(--accent);border-color:var(--accent);color:var(--knop-tekst)}
.markeer-groot .markeer-vlak{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:0}
.markeer-groot .markeer-canvas{width:auto;max-width:100%;max-height:100%;border-radius:8px}
.markeer-groot .markeer-telling{color:var(--licht);margin:0}
.markeer-groot .markeer-telling small{color:var(--nevel)}
.markeer-groot .markeer-undo{margin-top:0;background:rgba(237,240,238,.12)}
body.markeer-open{overflow:hidden}
.markeer-opnieuw-rij{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.markeer-opnieuw-rij[hidden]{display:none}
.markeer-opnieuw{min-height:44px;padding:10px 18px;border-radius:999px}
.markeer-opnieuw-hint{font-size:.88rem;color:rgba(20,56,60,.72);flex:1 1 160px;line-height:1.4}
.markeer-staten{margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(20,56,60,.05)}
.markeer-staten[hidden]{display:none}
.markeer-staten h4{margin:0 0 8px;font-family:var(--font-display);font-size:1rem;font-weight:700}
.markeer-staten ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px;font-size:.95rem;line-height:1.45}
.markeer-staten li{padding-left:4px}
.markeer-staten li span:first-child{margin-right:6px;vertical-align:middle}
.markeer-staten li.staat-goed::marker{color:#1E7A5F}
.markeer-staten li.staat-matig::marker{color:#B9771A}
.markeer-staten li.staat-slecht::marker{color:#8f2a1e}
.markeer-staten li.staat-geen{color:rgba(20,56,60,.7)}
.markeer-staten-totaal{margin:10px 0 0;font-weight:600;font-size:.95rem}
.markeer-staten-totaal:empty{display:none}
.markeer-staten-opmerking{margin:6px 0 0;font-size:.9rem;color:rgba(20,56,60,.78);line-height:1.5}
.markeer-staten-opmerking:empty{display:none}
.markeer-suggestie-hint{margin:8px 0 0;font-size:.9rem;color:var(--accent);font-weight:600;line-height:1.45}
.markeer-suggestie-hint[hidden]{display:none}
.herkenning-tabel-wrap{margin-top:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.herkenning-tabel{border-collapse:collapse;width:100%;min-width:640px;font-size:.92rem}
.herkenning-tabel th,.herkenning-tabel td{padding:9px 10px;border-top:1px solid rgba(20,56,60,.12);text-align:right;white-space:nowrap}
.herkenning-tabel th{font-weight:600;color:rgba(20,56,60,.75);border-top:0;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
.herkenning-tabel th:first-child,.herkenning-tabel td:first-child,.herkenning-tabel th:nth-child(2),.herkenning-tabel td:nth-child(2){text-align:left}
#inst-herkenning .btn{margin-top:8px}

/* ===== 07 TOEPASSINGEN =====================================================
   Velsen staat als brede kaart bovenaan, de drie voorbeelden eronder in een
   rij van drie. Gekozen boven een kolomindeling omdat de procesregel vier
   stappen telt: in een smalle rechterkolom breekt die op elke kaart af. */
.toep-raster{display:grid;gap:12px;margin-top:28px}
@media (min-width:1024px){
  .toep-raster{grid-template-columns:repeat(3,1fr);gap:16px}
  .toep-kaart--klant{grid-column:1 / -1}
}
.toep-kaart{
  display:flex;flex-direction:column;gap:10px;
  padding:18px;background-color:var(--paper);color:var(--ink);
  border:1px solid rgba(20,56,60,.18);
  transition:transform .15s ease,border-color .15s ease;
}
@media (min-width:1024px){.toep-kaart{padding:20px 22px}}
.toep-kaart__label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(20,56,60,.55);
}
.toep-kaart__kop{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;
  font-size:19px;line-height:1.2;margin:0;
}
.toep-kaart:hover,.toep-kaart:focus-within{transform:translateY(-2px);border-color:rgba(20,56,60,.4)}

/* Velsen: groter en steviger omlijnd, met de vier hoekjes. Geen andere
   achtergrondkleur en geen badge, alleen maat en lijn. */
.toep-kaart--klant{
  --hoek:rgba(20,56,60,.45);
  border-color:rgba(20,56,60,.45);
  padding:22px;
}
@media (min-width:1024px){
  .toep-kaart--klant{padding:28px 30px}
  .toep-kaart--klant .toep-kaart__kop{font-size:26px}
}
.toep-kaart--klant .toep-kaart__label{color:var(--accent)}
.toep-kaart--klant{
  background-image:
    linear-gradient(var(--hoek),var(--hoek)),linear-gradient(var(--hoek),var(--hoek)),
    linear-gradient(var(--hoek),var(--hoek)),linear-gradient(var(--hoek),var(--hoek)),
    linear-gradient(var(--hoek),var(--hoek)),linear-gradient(var(--hoek),var(--hoek)),
    linear-gradient(var(--hoek),var(--hoek)),linear-gradient(var(--hoek),var(--hoek));
  background-size:10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px;
  background-position:
    left 8px top 8px,left 8px top 8px,right 8px top 8px,right 8px top 8px,
    left 8px bottom 8px,left 8px bottom 8px,right 8px bottom 8px,right 8px bottom 8px;
  background-repeat:no-repeat;
}

/* De procesregel: elke stap een eigen element, met een verbindingslijn
   ertussen. De lijn is een pseudo-element, dus er staat niets extra in de
   markup en een schermlezer leest alleen de geordende lijst. */
.proces{
  list-style:none;margin:2px 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;
}
.proces__stap{
  position:relative;display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:13px;line-height:1.3;
  letter-spacing:.01em;color:rgba(20,56,60,.72);white-space:nowrap;
}
/* De lijn hangt achter de stap, niet ervoor. Breekt de regel af, dan begint
   de volgende regel met een stap en niet met een los streepje. */
.proces__stap:not(:last-child)::after{
  content:"";display:block;width:14px;height:1px;margin:0 8px;
  background:rgba(20,56,60,.3);transform-origin:left center;
}
@media (min-width:1024px){
  .toep-kaart--klant .proces__stap{font-size:15px}
  .toep-kaart--klant .proces__stap:not(:last-child)::after{width:28px;margin:0 14px}
}
/* De laatste stap blijft rustig geaccentueerd: dat is waar het proces op
   uitkomt. */
.proces__stap:last-child{color:var(--accent)}

/* ===== 08 INVESTERING ======================================================
   Twee kolommen op desktop: links de uitleg, rechts een compact blok met de
   vanafprijs. Geen pakketten, geen tabel. */
.inv-raster{display:grid;gap:28px;align-items:start}
@media (min-width:1024px){.inv-raster{grid-template-columns:1fr minmax(0,440px);gap:56px}}
.inv-tekst p{max-width:var(--regelbreedte)}
.inv-blok{
  --hoek:rgba(20,56,60,.45);
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:26px 24px;border:1px solid rgba(20,56,60,.45);
  background-image:
    linear-gradient(var(--hoek),var(--hoek)),linear-gradient(var(--hoek),var(--hoek)),
    linear-gradient(var(--hoek),var(--hoek)),linear-gradient(var(--hoek),var(--hoek)),
    linear-gradient(var(--hoek),var(--hoek)),linear-gradient(var(--hoek),var(--hoek)),
    linear-gradient(var(--hoek),var(--hoek)),linear-gradient(var(--hoek),var(--hoek));
  background-size:10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px;
  background-position:
    left 8px top 8px,left 8px top 8px,right 8px top 8px,right 8px top 8px,
    left 8px bottom 8px,left 8px bottom 8px,right 8px bottom 8px,right 8px bottom 8px;
  background-repeat:no-repeat;
}
@media (min-width:1024px){.inv-blok{padding:32px 30px}}
.inv-blok__label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);
}
/* Het bedrag is het zwaarste element van de sectie: groot, in de
   koppen-typografie, maar in de gewone inktkleur en zonder vlak eronder. */
.inv-blok__bedrag{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(44px,5vw,64px);line-height:1;color:var(--ink);margin:2px 0 0;
}
.inv-blok__onder{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  color:rgba(20,56,60,.6);
}
.inv-blok__uitleg{margin:12px 0 0;max-width:36ch}
.inv-blok__knop{margin-top:18px}
.inv-blok__link{margin-top:12px;font-size:14px}

/* ===== animatie van 07 en 08 ===============================================
   Alles hieronder geldt alleen als javascript de klasse js-anim heeft gezet
   en de bezoeker beweging niet heeft uitgezet. Zonder javascript, of met
   prefers-reduced-motion, staat alles meteen in de eindtoestand. */
@media (prefers-reduced-motion: no-preference){
  html.js-anim .section-head[data-anim],
  html.js-anim .inv-tekst[data-anim],
  html.js-anim .inv-blok[data-anim]{opacity:0}
  html.js-anim .section-head[data-anim].anim-in,
  html.js-anim .inv-tekst[data-anim].anim-in,
  html.js-anim .inv-blok[data-anim].anim-in{animation:hfd-op 500ms ease-out both}

  /* de kaarten komen na elkaar binnen */
  html.js-anim .toep-raster[data-anim] .toep-kaart{opacity:0}
  html.js-anim .toep-raster[data-anim].anim-in .toep-kaart{animation:hfd-op 400ms ease-out both;animation-delay:calc(var(--k,0) * 100ms)}
  .toep-kaart:nth-child(1){--k:0;--basis:400ms}
  .toep-kaart:nth-child(2){--k:1;--basis:500ms}
  .toep-kaart:nth-child(3){--k:2;--basis:600ms}
  .toep-kaart:nth-child(4){--k:3;--basis:700ms}

  /* daarna loopt de procesregel van links naar rechts door */
  html.js-anim .toep-raster[data-anim] .proces__stap{opacity:0}
  html.js-anim .toep-raster[data-anim] .proces__stap:not(:last-child)::after{transform:scaleX(0)}
  html.js-anim .toep-raster[data-anim].anim-in .proces__stap{
    animation:hfd-stap 320ms ease-out both;
    animation-delay:calc(var(--basis,400ms) + var(--s,0) * 160ms);
  }
  html.js-anim .toep-raster[data-anim].anim-in .proces__stap:last-child{animation-name:hfd-stap-laatst}
  html.js-anim .toep-raster[data-anim].anim-in .proces__stap:not(:last-child)::after{
    animation:hfd-lijn 180ms ease-out both;
    animation-delay:calc(var(--basis,400ms) + var(--s,0) * 160ms + 80ms);
  }
  .proces__stap:nth-child(1){--s:0}
  .proces__stap:nth-child(2){--s:1}
  .proces__stap:nth-child(3){--s:2}
  .proces__stap:nth-child(4){--s:3}
}
@keyframes hfd-op{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* De stap licht even op in de accentkleur en zakt daarna terug. Alleen
   opacity, transform en kleur; geen eigenschap die de layout herberekent. */
@keyframes hfd-stap{
  0%{opacity:0;transform:translateY(4px);color:var(--accent)}
  45%{opacity:1;transform:none;color:var(--accent)}
  100%{opacity:1;transform:none;color:rgba(20,56,60,.72)}
}
@keyframes hfd-stap-laatst{
  0%{opacity:0;transform:translateY(4px)}
  100%{opacity:1;transform:none}
}
@keyframes hfd-lijn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ===== 07 en 08 op een telefoon ============================================
   Onder de eerste breekpunt: de knop over de volle breedte, en de hoekjes en
   de lange verbindingslijnen eruit. Die lijntjes zijn op een klein scherm
   meer ruis dan versiering. */
@media (max-width:639px){
  .toep-kaart--klant,.inv-blok{background-image:none}
  .toep-kaart,.toep-kaart--klant{padding:16px}
  .toep-kaart--klant .toep-kaart__kop{font-size:21px}
  .proces{gap:4px 0}
  .proces__stap:not(:last-child)::after{width:10px;margin:0 6px}
  .inv-blok{padding:20px 18px}
  .inv-blok__knop{width:100%;justify-content:center;text-align:center}
  .inv-blok__link{align-self:flex-start}
}