/* ======================================================================
   duonova. huisstijl
   Richting 07 "Maatje": roest en oranje, plat beeldmerk, zandkleurig papier.
   ====================================================================== */

/* ======================================================================
   Lettertypen
   Van onze eigen server, niet meer van Google Fonts. Dat scheelt twee
   servers die een browser eerst moet opzoeken voordat hij iets laat zien,
   en het IP-adres van een bezoeker gaat zo niet naar Google. Dat laatste
   belooft de privacyverklaring ook.

   De bestanden zelf komen wel van Google Fonts, allebei onder een open
   licentie (SIL Open Font License). Alleen latin en latin-ext: Nederlands
   staat helemaal in latin, en latin-ext haalt een browser pas op als er een
   letter als ł of ő op de pagina staat. Het zijn variabele lettertypen, dus
   één bestand bevat alle diktes. De regels per dikte zijn precies wat Google
   zelf gaf, zodat de letters er hetzelfde uitzien als voorheen.

   Het bestand van de koppen wordt op de publieke site vooraf opgehaald, zie
   de kop van _layout.php. Krijgt het een andere naam, pas het daar ook aan.
   ====================================================================== */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/assets/lettertypen/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/assets/lettertypen/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(/assets/lettertypen/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(/assets/lettertypen/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(/assets/lettertypen/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(/assets/lettertypen/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/lettertypen/public-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/lettertypen/public-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/lettertypen/public-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/lettertypen/public-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/lettertypen/public-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/lettertypen/public-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Kleuren */
  --roest:#8F3A1C;
  --roest-diep:#6F2C13;
  --roest-licht:#B05329;
  --oranje:#F59120;
  --oranje-diep:#D2740E;
  --inkt:#2B1D18;
  --inkt-zacht:#6B5A50;
  --zacht:#EFE1D3;
  --zacht-diep:#E2CDB8;
  --creme:#F8EFE6;
  --papier:#F2E7DA;
  --wit:#FFFFFF;

  /* Elke merkkleur staat er ook als losse kanalen. Halfdoorzichtige varianten
     schrijf je dan als rgba(var(--roest-rgb), .14) in plaats van met vaste
     getallen. Zonder dit staat het palet weer op honderd plekken verspreid en
     is een volgende kleurwissel net zo'n klus als deze was. */
  --inkt-rgb:43,29,24;
  --roest-rgb:143,58,28;
  --roest-diep-rgb:111,44,19;
  --roest-licht-rgb:176,83,41;
  --oranje-rgb:245,145,32;
  --creme-rgb:248,239,230;
  --papier-rgb:242,231,218;
  --lijn:rgba(var(--inkt-rgb),.11);
  --lijn-sterk:rgba(var(--inkt-rgb),.2);

  /* Letters */
  --kop:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --tekst:'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Maten */
  --breed:1160px;
  --kier:24px;
  --rond:14px;
  --rond-kaart:22px;
  --schaduw:0 1px 2px rgba(var(--inkt-rgb),.04), 0 14px 38px rgba(var(--inkt-rgb),.07);
  --schaduw-op:0 2px 6px rgba(var(--inkt-rgb),.06), 0 22px 54px rgba(var(--inkt-rgb),.11);
  --soepel:.2s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
  overflow-x:hidden;
  /* Dubbeltikken zoomt niet meer in. Een tik komt bovendien meteen aan in
     plaats van na de wachttijd waarin de browser kijkt of er nog een tweede
     tik volgt: dat scheelt bij elke knop zo'n driehonderdste seconde, en dat
     voel je. Zie ook de kop van _layout.php. */
  touch-action:manipulation;
  /* Geen meegeven aan de zijkant als je schuin veegt. */
  overscroll-behavior-x:none;
}

body{
  font-family:var(--tekst);
  font-size:16px;
  line-height:1.7;
  color:var(--inkt);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;

  /* De voet hoort onderaan te blijven, ook op een korte pagina zoals
     "bedankt" of een foutpagina. Zonder dit zakt hij naar het midden en
     staat er een lap lege crème onder. */
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
body > main{flex:1 0 auto}
body > .voet{flex-shrink:0}

img{max-width:100%;height:auto;display:block}
a{color:var(--roest)}

/* Voor wie met het toetsenbord navigeert. */
:focus-visible{outline:2.5px solid var(--roest);outline-offset:3px;border-radius:4px}

/* Bij het aanraken legt Android er standaard een grijsblauwe flits overheen.
   Die hoort niet bij de huisstijl; een vleugje roest wel. */
a,button,summary,label,.knop{-webkit-tap-highlight-color:rgba(var(--roest-rgb),.14)}


/* ----------------------------------------------------------------------
   Waarom overal @media (hover:hover) om een :hover staat
   ----------------------------------------------------------------------
   Een telefoon heeft geen muis, maar doet bij een tik wel alsof. Het
   aangeraakte onderdeel blijft daarna in de aangewezen stand staan, tot je
   ergens anders tikt. Dat zag je aan het kruisje van het menu: daar bleef
   een grijs vlak omheen staan. Bij een kaart die omhoog wipt of een dienst
   die oplicht is het net zo storend.

   Elke :hover-regel in dit bestand staat daarom in @media (hover:hover):
   alleen waar echt een muis is. Ze staan op hun eigen plek en niet
   verzameld achterin, want de volgorde bepaalt de voorrang. .knop:active
   komt bijvoorbeeld na .knop:hover en hoort daar te blijven.

   Schrijf je een nieuwe :hover, zet er dan diezelfde wikkel omheen.
   ---------------------------------------------------------------------- */

/* Alleen voorlezen, niet tonen. */
.enkel-voorlezen{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Overslaan naar de inhoud, voor schermlezers en toetsenbord. */
.overslaan{
  position:absolute;left:-9999px;top:12px;z-index:200;
  background:var(--inkt);color:var(--creme);
  padding:12px 20px;border-radius:var(--rond);text-decoration:none;
}
.overslaan:focus{left:24px}


/* ======================================================================
   Typografie
   ====================================================================== */

h1,h2,h3,h4{font-family:var(--kop);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--inkt)}
h1{font-size:clamp(38px,5.4vw,62px)}
h2{font-size:clamp(30px,3.6vw,42px)}
h3{font-size:clamp(20px,2vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
h4{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.35}

p{margin:0 0 16px}
p:last-child{margin-bottom:0}

.groot{font-size:clamp(17px,1.5vw,19px);line-height:1.65;color:var(--inkt-zacht)}
.grijs{color:var(--inkt-zacht)}
.roest{color:var(--roest)}
.oranje{color:var(--oranje-diep)}

/* Kleine hoofdletterlabels, bijvoorbeeld boven een sectie. */
.label{
  font-size:11px;font-weight:600;line-height:1.4;
  text-transform:uppercase;letter-spacing:.16em;color:var(--inkt-zacht);
}

/* Het labeltje boven een paginakop: roest tekst met de twee bollen van het
   beeldmerk ervoor, roest en oranje, zoals in het merk op een lichte
   ondergrond. Dit was een oranje pil in hoofdletters; zo'n pil boven elke
   kop is wat iedere gegenereerde site doet (stijl A, september 2026). Het
   streepje dat daarna kwam oogde ook als een sjabloon; de bollen zijn van
   ons zelf. De klassenaam is gebleven, zodat de HTML van alle pagina's niet
   hoefde te veranderen.

   De tweede bol is een schaduw van de eerste: 8 breed en 4 ertussen, de
   verhouding van het merk (bol 22%, ertussen 11,75%). De marge rechts houdt
   er ruimte voor, zodat de tekst op dezelfde afstand blijft. */
.pil{
  display:inline-flex;align-items:center;gap:12px;
  color:var(--roest);
  font-size:14px;font-weight:600;line-height:1.4;
}
.pil::before{
  content:"";flex-shrink:0;width:8px;height:8px;border-radius:50%;
  background:var(--roest);box-shadow:12px 0 0 var(--oranje);margin-right:12px;
}
/* Opsommingstekens: de twee puntjes van het beeldmerk, kleiner dan bij .pil. */
.pakket .vinkjes li::before,.vraag li::before,.lopende-tekst ul li::before{
  content:"";flex-shrink:0;width:5px;height:5px;border-radius:50%;
  background:var(--roest);box-shadow:8px 0 0 var(--oranje);
  margin:.6em 8px 0 0;
}
.pil.stil{background:var(--zacht);color:var(--roest)}
.pil.rand{background:transparent;border:1px solid var(--lijn-sterk);color:var(--inkt-zacht)}


/* ======================================================================
   Beeldmerk en woordmerk
   ====================================================================== */

.merk{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.beeldmerk{
  width:40px;height:40px;border-radius:11px;background:var(--roest);
  /* Verhoudingen van het merk: bol 22% breed, ertussen 11,75%. */
  display:flex;align-items:center;justify-content:center;gap:11.75%;
  flex-shrink:0;
}
.beeldmerk i{width:22%;aspect-ratio:1;border-radius:50%;display:block;background:var(--creme)}
.beeldmerk i:last-child{background:var(--oranje)}
.beeldmerk.groot{width:64px;height:64px;border-radius:17px}

.woordmerk{
  font-family:var(--kop);font-weight:700;font-size:24px;
  letter-spacing:-.035em;line-height:1;white-space:nowrap;
}
.woordmerk .duo{color:var(--inkt)}
.woordmerk .nova{color:var(--roest)}
.woordmerk .punt{color:var(--oranje)}

/* Op een donkere drager. */
.op-donker .woordmerk .duo,
.op-donker .woordmerk .nova{color:var(--creme)}
.op-donker .beeldmerk{background:var(--creme)}
.op-donker .beeldmerk i{background:var(--roest)}
.op-donker .beeldmerk i:last-child{background:var(--oranje)}


/* ======================================================================
   Raamwerk
   ====================================================================== */

.omhulsel{width:100%;max-width:var(--breed);margin:0 auto;padding:0 var(--kier)}
/* viewport-fit=cover laat de pagina tot in de hoeken van het scherm lopen. Op
   een iPhone in liggende stand zit daar de camera-inkeping. De marge wordt
   daarom zo breed als nodig is, en anders gewoon de gebruikelijke kier.
   Bewust een tweede regel: een browser die env() niet kent gooit deze weg en
   houdt de regel erboven. */
.omhulsel{
  padding-left:max(var(--kier), env(safe-area-inset-left));
  padding-right:max(var(--kier), env(safe-area-inset-right));
}
.smal{max-width:760px;margin-left:auto;margin-right:auto}

/* Een smalle tekstkolom die links uitlijnt met de bredere inhoud eronder.
   Zonder dit springt een introtekst naar binnen ten opzichte van de rest. */
.omhulsel.smal.links{max-width:var(--breed)}
.omhulsel.smal.links > *{max-width:760px;margin-left:0;margin-right:0}

section{padding:clamp(56px,7vw,96px) 0}
section.krap{padding:clamp(40px,4.5vw,64px) 0}
section.zacht{background:var(--zacht)}
section.papier{background:var(--papier)}
section.donker{background:var(--roest);color:var(--creme)}
section.donker h2,section.donker h3{color:var(--creme)}
section.donker .groot,section.donker .grijs{color:rgba(var(--creme-rgb),.78)}
section.donker .label{color:rgba(var(--creme-rgb),.6)}

/* De kop boven een sectie. */
.sectiekop{max-width:680px;margin-bottom:clamp(32px,4vw,52px)}
.sectiekop .label{display:block;margin-bottom:14px}
.sectiekop h2{margin-bottom:16px}
/* .midden stond gecentreerd. In stijl A staat alles links, dus ook deze
   koppen (september 2026). De klasse is gebleven, zodat de HTML niet
   hoefde te veranderen. */
.sectiekop.midden{margin-left:0;margin-right:0;text-align:left}

/* Rasters. */
.raster{display:grid;gap:clamp(18px,2vw,26px)}
/* Een vak in een raster wil standaard niet kleiner worden dan zijn inhoud.
   Een datumveld of een lange naam duwt het vak dan buiten beeld. Met min-width
   nul mag het wel krimpen, en blijft alles binnen de pagina. */
.raster > *{min-width:0}
.raster.k2{grid-template-columns:repeat(2,1fr)}
.raster.k3{grid-template-columns:repeat(3,1fr)}
.raster.k4{grid-template-columns:repeat(4,1fr)}


/* ======================================================================
   Knoppen
   ====================================================================== */

/* Een kleine ronding en geen pil: een pil op elke knop is wat iedere
   gegenereerde site doet (stijl A, september 2026). Beheer en portaal laden
   dit bestand ook, dus daar zijn de knoppen mee veranderd. */
.knop{
  /* Een knop die een <button> is, krijgt van de browser een eigen kleur: grijs op
     een computer en blauw op een iPhone. Daar is een omlijnde knop niet tegen
     opgewassen, want die zet alleen een rand en een letterkleur. Daarom hier
     eerst alles van de browser uit, en een lege achtergrond; de varianten
     (.groen, .vol, .oranje) zetten hun eigen kleur erover. */
  -webkit-appearance:none;appearance:none;background:transparent;color:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:8px;
  font-family:var(--tekst);font-size:15px;font-weight:600;line-height:1.2;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:background-color var(--soepel),border-color var(--soepel),
             color var(--soepel),transform var(--soepel);
}
.knop svg{width:17px;height:17px;flex-shrink:0}
@media (hover:hover){.knop:hover{transform:translateY(-2px)}}
.knop:active{transform:translateY(0)}

.knop.vol{background:var(--inkt);color:var(--creme)}
@media (hover:hover){.knop.vol:hover{background:var(--roest)}}
.knop.groen{background:var(--roest);color:var(--creme)}
@media (hover:hover){.knop.groen:hover{background:var(--roest-diep)}}
.knop.oranje{background:var(--oranje);color:var(--inkt)}
@media (hover:hover){.knop.oranje:hover{background:var(--oranje-diep);color:var(--creme)}}
.knop.rand{border-color:var(--lijn-sterk);color:var(--inkt)}
@media (hover:hover){.knop.rand:hover{border-color:var(--roest);color:var(--roest)}}
.knop.klein{padding:10px 18px;font-size:14px}
.knop.breed{width:100%}

section.donker .knop.vol{background:var(--creme);color:var(--inkt)}
@media (hover:hover){section.donker .knop.vol:hover{background:var(--oranje)}}
section.donker .knop.rand{border-color:rgba(var(--creme-rgb),.35);color:var(--creme)}
@media (hover:hover){section.donker .knop.rand:hover{border-color:var(--creme);background:rgba(var(--creme-rgb),.1)}}

.knoppen{display:flex;flex-wrap:wrap;gap:12px}

/* Op een paar plekken is de tweede knop een gewone link met een pijltje:
   in de kop van de startpagina, onder "Zo werkt het", in het slotblok, bij
   de pakketten die we niet uitlichten (op een breed scherm), onder de
   pakketten op de startpagina en in de kolom naast het formulier op
   Contact. Naast een volle knop hoort geen tweede, even zware. De HTML is
   gewoon .knop.rand gebleven; de pijl komt uit de stijl. */
.held-tekst .knop.rand,
.stapkaarten-meer .knop.rand,
.paneel .knop.rand,
.pakket .knop.rand,
.pakket-twijfel .knop.rand,
.kaart:has(> .werk-plaat) .knop.rand,
.tegels-blok + .knoppen .knop.rand,
.config-raster > aside:not(.config-totaal) .knop.rand{
  flex:0 0 auto;width:auto;min-height:0;
  padding:0 0 2px;border:0;border-radius:0;background:none;
  border-bottom:1.5px solid currentColor;color:var(--inkt);
}
.held-tekst .knop.rand::after,
.stapkaarten-meer .knop.rand::after,
.paneel .knop.rand::after,
.pakket .knop.rand::after,
.pakket-twijfel .knop.rand::after,
.kaart:has(> .werk-plaat) .knop.rand::after,
.tegels-blok + .knoppen .knop.rand::after,
.config-raster > aside:not(.config-totaal) .knop.rand::after{content:"\2192"}
/* Bij een project stond er een pijltje als pictogram in de knop; de pijl
   komt nu uit de stijl, net als overal. */
.kaart:has(> .werk-plaat) .knop.rand svg{display:none}
@media (hover:hover){
  .held-tekst .knop.rand:hover,
  .stapkaarten-meer .knop.rand:hover,
  .pakket .knop.rand:hover,
  .pakket-twijfel .knop.rand:hover,
  .kaart:has(> .werk-plaat) .knop.rand:hover,
  .tegels-blok + .knoppen .knop.rand:hover,
  .config-raster > aside:not(.config-totaal) .knop.rand:hover{background:none;color:var(--roest);transform:none}
}


/* ======================================================================
   Balk bovenaan
   ====================================================================== */

.balk{
  position:sticky;top:0;z-index:100;
  background:rgba(var(--creme-rgb),.9);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--soepel),box-shadow var(--soepel);
}
.balk.gezakt{border-bottom-color:var(--lijn);box-shadow:0 4px 20px rgba(var(--inkt-rgb),.04)}
/* Met het menu open hoort er niets doorheen te schemeren; de balk is dan het
   bovenste stuk van het menu. */
.balk.open{background:var(--creme)}
.balk .omhulsel{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}

.menu{display:flex;align-items:center;gap:6px}
.menu a{
  padding:9px 14px;border-radius:8px;
  font-size:15px;font-weight:500;color:var(--inkt);text-decoration:none;
  transition:background-color var(--soepel),color var(--soepel);
}
@media (hover:hover){.menu a:hover{background:var(--zacht);color:var(--roest)}}
.menu a.nu{color:var(--roest);font-weight:600}
.menu a.knop{margin-left:8px;padding:11px 20px;font-weight:600}
@media (hover:hover){.menu a.knop:hover{background:var(--roest-diep);color:var(--creme)}}

/* De taalschakelaar: een gewone <select>, door keuzelijst.js omgezet in de
   vertrouwde .dn-keuze-opmaak, maar hier licht - geen rand of witte vlak
   zoals in een formulier, gewoon een menu-item dat toevallig openklapt. */
.menu-taal{margin-left:8px}
.menu-taal .dn-keuze{width:auto}
.menu-taal .dn-keuze-knop{
  width:auto;padding:9px 12px;border:0;background:transparent;
  font-size:15px;font-weight:500;color:var(--inkt);
}
@media (hover:hover){.menu-taal .dn-keuze-knop:hover{background:var(--zacht);color:var(--roest)}}
.menu-taal .dn-keuze-knop:focus-visible{box-shadow:0 0 0 3px rgba(var(--roest-rgb),.14)}
.menu-taal .dn-keuze-lijst{left:auto;right:0;min-width:140px}

/* De hamburger, alleen op smalle schermen. */
.menuknop{
  display:none;width:44px;height:44px;border:0;background:transparent;
  border-radius:12px;cursor:pointer;color:var(--inkt);
  align-items:center;justify-content:center;
}
@media (hover:hover){.menuknop:hover{background:var(--zacht)}}
.menuknop svg{width:24px;height:24px}
.menuknop .kruis{display:none}

/* Het onderste vlak van het uitklapmenu: het aanbod, de knop, en je
   telefoonnummer en mailadres. Alleen op een smal scherm; daar zet de
   regel verderop het aan. Op een breed scherm staat de offerteknop gewoon
   in de rij, en dat is .menu-knop-breed. */
.menu-onder{display:none}
.balk.open .menuknop .streep{display:none}
.balk.open .menuknop .kruis{display:block}


/* ======================================================================
   De kop van de startpagina
   ====================================================================== */

/* Stijl A (september 2026): één kolom, de kop krijgt de ruimte, en de
   drie beloften staan eronder als gewone kolommen tekst onder een dunne
   lijn. Eerst stond er rechts een witte kaart met icoontjes in vakjes, op
   een licht stippenraster. Dat zag eruit als elke gegenereerde site.

   Alleen de opmaak is veranderd: de HTML en de tekst in index.php zijn
   precies gelijk gebleven (dat telt voor Google). De icoontjes staan er
   dus nog, ze worden alleen niet getoond. */
.held{padding:clamp(48px,6vw,84px) 0 clamp(56px,7vw,96px)}
.held-raster{display:block}
.held-tekst{max-width:960px}
.held-tekst .pil{margin-bottom:26px}
/* Onder de 46px schaalt de kop mee met het scherm (10vw): zo blijft
   "Websites op maat, / voor een vaste prijs." ook op een telefoon twee
   regels, in plaats van vier korte. */
.held-tekst h1{font-size:clamp(min(10vw,46px),7.2vw,104px);line-height:.96;letter-spacing:-.04em;margin:0 0 28px}
.held-tekst .groot{max-width:34em;margin-bottom:36px}
.held-tekst .knoppen{align-items:center;gap:26px}

/* Dubbele klassen, omdat .kaart en .stappen verderop in dit bestand staan
   en anders zouden winnen. */
.kaart.held-kaart{
  background:none;box-shadow:none;border-radius:0;display:block;
  margin-top:56px;padding:24px 0 0;border-top:1px solid var(--lijn);
}
.held-kaart .label{display:block;margin-bottom:14px}
.stappen.held-stappen{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 40px}
.stappen.held-stappen li{display:block}
.held-stappen .stapbol{display:none}
.stappen.held-stappen h4{font-size:16px;margin-bottom:4px}
.stappen.held-stappen p{font-size:14px;line-height:1.55}

/* De kop van de andere pagina's: groter, en links. */
.held.krap h1{font-size:clamp(40px,5.8vw,84px);line-height:.98;letter-spacing:-.04em}
.omhulsel.smal.links > h1{max-width:980px}

/* Een kop in twee gelijke regels in plaats van een lange en een korte, en
   geen los woord op de laatste regel van een alinea. Een browser die dit
   niet kent breekt gewoon zoals altijd. */
.held h1,.paneel h2,.sectiekop h2,.oproep-tekst h2{text-wrap:balance}
.held .groot,.paneel .groot,.sectiekop .groot,.oproep-tekst .groot{text-wrap:pretty}

@media (max-width:900px){
  .stappen.held-stappen{grid-template-columns:1fr}
}


/* ======================================================================
   Paneel: een gekleurd vlak binnen een sectie
   ====================================================================== */

/* Links uitgelijnd met een grote kop, en de tweede knop een gewone link
   (zie bij Knoppen). Stijl A, september 2026: het was gecentreerd, met
   een ronding van 28px en twee pillen naast elkaar. */
.paneel{
  background:var(--roest);color:var(--creme);
  border-radius:8px;text-align:left;
  padding:clamp(40px,6vw,72px) clamp(28px,5vw,64px);
}
.paneel h2{color:var(--creme);font-size:clamp(34px,4.6vw,60px);line-height:1;letter-spacing:-.035em;max-width:15em}
.paneel .groot{color:rgba(var(--creme-rgb),.8);max-width:40em;margin:18px 0 32px}
.paneel .knoppen{justify-content:flex-start;align-items:center;gap:26px}
.paneel .knop.vol{background:var(--creme);color:var(--inkt)}
@media (hover:hover){.paneel .knop.vol:hover{background:var(--oranje)}}
.paneel .knop.rand{color:var(--creme)}
@media (hover:hover){.paneel .knop.rand:hover{background:none;color:var(--oranje);transform:none}}
/* Het kleine kopje boven de grote kop, zoals op Over ons. */
.paneel .label{display:block;color:rgba(var(--creme-rgb),.7);margin-bottom:18px}

/* Een zacht paneel, met donkere tekst: onderaan Over ons. Die pagina is
   kort, dus het slotblok staat al in beeld als je binnenkomt, en een roest
   vlak dat onderaan half in beeld hangt schreeuwde daar (september 2026).
   Onderaan Ons werk en Pakketten blijft het roest. */
.paneel.paneel-zacht{background:var(--zacht);color:var(--inkt)}
.paneel.paneel-zacht h2{color:var(--inkt);font-size:clamp(30px,3.6vw,48px)}
.paneel.paneel-zacht .groot{color:var(--inkt-zacht)}
.paneel.paneel-zacht .label{color:var(--inkt-zacht)}
.paneel.paneel-zacht .knop.vol{background:var(--inkt);color:var(--creme)}
@media (hover:hover){.paneel.paneel-zacht .knop.vol:hover{background:var(--roest);color:var(--creme)}}
.paneel.paneel-zacht .knop.rand{color:var(--inkt)}
@media (hover:hover){.paneel.paneel-zacht .knop.rand:hover{color:var(--roest)}}

/* ---- Over ons: wie ben ik ----
   Alleen als het in Beheer > Teksten is ingevuld. Links de kop, rechts de
   tekst, onder een dikke lijn, zoals een rij uit de prijslijst. */
.over-wie{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:clamp(20px,4vw,64px);
  border-top:1.5px solid var(--inkt);padding-top:clamp(24px,3vw,36px);
}
.over-wie h2{font-size:clamp(28px,3.2vw,40px);text-wrap:balance}
/* De kop en het kaartje staan samen in de linkerkolom (.over-wie-links), het
   verhaal ernaast. Losse onderdelen in het raster zochten de eerstvolgende
   vrije cel: dan kwam het kaartje rechts te staan, of zakte het naar beneden
   omdat de tekstkolom twee rijen hoog is. */

/* Het kaartje onder de kop: je naam, de regels die je zelf invult (één per
   regel) en een zin tussen aanhalingstekens. De aanhalingstekens komen uit
   de stijl, zodat je ze niet zelf hoeft te typen. Elk stuk is los in te
   vullen in Beheer > Teksten; wat leeg is, staat er niet. */
.over-wie-kaart{display:flex;flex-direction:column;gap:2px;margin-top:24px;max-width:22em}
.over-wie-kaart b{
  font-family:var(--kop);font-size:19px;font-weight:700;
  letter-spacing:-.015em;line-height:1.3;color:var(--inkt);
}
.over-wie-kaart span{font-size:15px;line-height:1.55;color:var(--inkt-zacht)}
.over-wie-kaart blockquote{
  margin:20px 0 0;padding-top:18px;border-top:1px solid var(--lijn-sterk);
  font-family:var(--kop);font-size:19px;font-weight:600;line-height:1.45;
  letter-spacing:-.01em;color:var(--roest);text-wrap:pretty;
}
.over-wie-kaart blockquote::before{content:"\201C"}
.over-wie-kaart blockquote::after{content:"\201D"}

@media (max-width:820px){
  .over-wie{grid-template-columns:minmax(0,1fr);gap:14px}
  /* Alles onder elkaar in de volgorde van de HTML: de kop, het kaartje en
     dan het verhaal. */
  .over-wie h2,
  .over-wie-kaart,
  .over-wie .lopende-tekst{grid-column:auto;grid-row:auto}
  .over-wie-kaart{margin-top:6px}
  .over-wie .lopende-tekst{margin-top:10px}
}


/* ======================================================================
   Kaarten
   ====================================================================== */

.kaart{
  background:var(--wit);border-radius:var(--rond-kaart);padding:28px;
  box-shadow:var(--schaduw);
  display:flex;flex-direction:column;
  transition:transform var(--soepel),box-shadow var(--soepel);
}
.kaart.stil{background:var(--zacht);box-shadow:none}
/* Omlijnd is sinds stijl A (september 2026) geen kader meer maar een
   kolom onder een dunne lijn, zonder icoon; zie "Bij elk pakket" op de
   pakkettenpagina. */
.kaart.omlijnd{background:none;border:0;border-top:1px solid var(--lijn-sterk);border-radius:0;box-shadow:none;padding:20px 0 0}
.kaart.omlijnd .kaarticoon{display:none}
.kaart.omlijnd h4{margin-bottom:6px}
a.kaart{text-decoration:none;color:inherit}
@media (hover:hover){a.kaart:hover{transform:translateY(-3px);box-shadow:var(--schaduw-op)}}

.kaart h3{margin-bottom:10px}
.kaart p{color:var(--inkt-zacht);font-size:15.5px;line-height:1.6}

/* Het vierkantje met een pictogram bovenin een kaart. */
.kaarticoon{
  width:46px;height:46px;border-radius:14px;flex-shrink:0;
  background:var(--zacht);color:var(--roest);
  display:grid;place-items:center;margin-bottom:18px;
}
.kaarticoon svg{width:22px;height:22px}
.kaarticoon.oranje{background:rgba(var(--oranje-rgb),.2);color:var(--oranje-diep)}


/* ======================================================================
   Pakketten: een prijslijst
   ======================================================================
   Stijl A, september 2026. Per pakket een rij, zoals de prijskaart van een
   vakman: links wat het is en voor wie, in het midden wat je krijgt,
   rechts wat het kost. De bedragen staan zo recht onder elkaar en
   vergelijk je met één blik. Boven en onder een dikke lijn, ertussen dunne,
   zoals een gedrukte tabel.

   Het waren drie kaarten naast elkaar met de middelste uitgelicht. Dat is
   het vaste prijstabel-sjabloon, en precies waardoor de site er gegenereerd
   uitzag. Ook zonder kaarten, met alleen lijnen of een gekleurd blok,
   bleef het dat.

   De HTML komt uit dn_pakket_kaart() in _inhoud.php en is niet veranderd;
   de indeling gaat met grid-areas. Op een telefoon maakt site.js er
   knoppen bovenaan van, met één pakket eronder (zie de regels voor smalle
   schermen, verderop).
   ====================================================================== */

.raster:has(> .pakket){
  --uit-kier:clamp(20px,2.4vw,34px);
  display:block;border-top:1.5px solid var(--inkt);
}

.kaart.pakket{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.35fr) minmax(0,1fr);
  grid-template-rows:auto auto auto 1fr;
  grid-template-areas:
    "naam basis prijs"
    "voor extra erbij"
    "voor lijst knop"
    "voor lijst .";
  column-gap:clamp(24px,3.4vw,48px);
  padding:40px 0 44px;
  background:none;box-shadow:none;border-radius:0;
  border-bottom:1px solid var(--lijn-sterk);
}
.kaart.pakket:last-child{border-bottom:1.5px solid var(--inkt)}

.pakket h3{grid-area:naam;margin:0;font-size:clamp(28px,3vw,38px)}
/* .pakket ervoor, omdat .kaart p anders wint. */
.pakket .pakket-voor{grid-area:voor;align-self:start;margin:6px 0 0;font-size:15.5px;color:var(--inkt-zacht)}

.pakket-prijs{
  grid-area:prijs;
  display:flex;justify-content:flex-end;align-items:baseline;gap:8px;
  flex-wrap:nowrap;white-space:nowrap;
}
/* Cijfers van gelijke breedte, zodat de bedragen onder elkaar kloppen. */
.pakket-prijs b{
  font-family:var(--kop);font-size:clamp(28px,2.6vw,36px);font-weight:700;
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;
}
.pakket-prijs span{font-size:14.5px;color:var(--inkt-zacht)}
.pakket .pakket-erbij{grid-area:erbij;margin:6px 0 0;text-align:right;font-size:15.5px;color:var(--inkt-zacht)}

/* Loopt er een actie op een pakket, dan staat het gewone bedrag
   doorgestreept vóór het bedrag dat nu geldt (en bij het maandbedrag
   erachter, want daar is het bedrag geen kop maar een zin). Gedempt en
   kleiner: het is het bedrag dat je níet betaalt, dus het mag het grote
   bedrag niet beconcurreren. Er staat geen woord "actie" bij; de
   doorgestreepte prijs zegt het al, en een label maakt van een prijslijst
   een uitverkoop. Haal je de actie in Beheer weg, dan valt dit vanzelf weg
   en staat er weer één prijs. */
.pakket-streep{
  color:var(--inkt-zacht);text-decoration-thickness:1.5px;
  font-variant-numeric:tabular-nums;
}
/* In de prijsregel staat het naast kopletters van 28 tot 36 pixels: daar is
   17 klein genoeg om te wijken en groot genoeg om te lezen. In de regel
   eronder loopt het mee met de tekst. */
.pakket-prijs .pakket-streep{font-size:17px}
.pakket-erbij .pakket-streep{font-size:14.5px}

/* Het pakket dat we aanraden: een zacht vlak dat iets buiten de rij valt,
   met "Beste keuze" erboven in gewone woorden. Geen streep, geen pil, geen
   schaduw: het vlak zegt het al. De lijn erboven vervalt; het vlak
   begrenst zichzelf. */
.kaart.pakket.uit{
  margin:10px calc(var(--uit-kier) * -1);
  padding:62px var(--uit-kier) 44px;
  background:var(--zacht);color:var(--inkt);
  border:0;border-radius:8px;
}
.kaart.pakket:has(+ .pakket.uit){border-bottom-color:transparent}
.pakket-vlag{
  position:absolute;top:26px;left:var(--uit-kier);
  font-size:14.5px;font-weight:600;color:var(--roest);white-space:nowrap;
}
.pakket-vlag::before{display:none}

/* Een vanaf-prijs. In de kaart erft het woord de kleine grijze stijl van
   de regel eronder; in de configurator moet dat er los bij. */
.config-pakket-prijs .pakket-vanaf{
  font-family:var(--tekst);font-size:12.5px;font-weight:400;
  color:var(--inkt-zacht);letter-spacing:0;
}

/* "Alles uit Start", boven de vinkjes.
   Een pakket dat op een ander voortbouwt herhaalt diens punten niet: die
   staan in deze ene regel. Daaronder komt alleen wat je er ten opzichte
   van dat pakket bij krijgt. Anders staan er twee lijsten die de lezer
   zelf naast elkaar moet leggen om het verschil te zien. */
.pakket .pakket-basis{
  grid-area:basis;display:block;margin:4px 0 6px;
  color:var(--inkt);font-size:15px;line-height:1.4;
}
.pakket-basis svg{display:none}
.pakket-basis b{font-weight:700}

/* "Plus bij Groei": het kopje boven de punten die er wel bij komen. */
.pakket-extra-kop{grid-area:extra;display:block;margin:0 0 12px}

/* De punten: een gewone lijst met een roest streepje ervoor (uit de stijl,
   niet uit de tekst). Zonder "Alles uit ..." begint de lijst bovenaan. */
.pakket .vinkjes{grid-area:lijst;list-style:none;display:block;margin:0;font-size:15.5px}
.pakket:not(:has(.pakket-basis)) .vinkjes{grid-row:1 / -1;margin-top:6px}
.pakket .vinkjes li{display:flex;gap:8px;padding:0 0 9px;line-height:1.5;color:var(--inkt)}
.pakket .vinkjes svg{display:none}

/* Rechts onder de prijs: bij het uitgelichte pakket de volle knop, bij de
   andere een link met een pijltje (zie bij Knoppen). */
.pakket .knop{grid-area:knop;justify-self:end;align-self:start;margin-top:20px}
.pakket.uit .knop.oranje{background:var(--inkt);color:var(--creme)}
@media (hover:hover){.pakket.uit .knop.oranje:hover{background:var(--roest);color:var(--creme)}}

/* De btw-regel onder de lijst. Hoort dicht bij de bedragen te staan en
   niet in een alinea erboven. */
.prijsvoet{
  margin-top:18px;
  font-size:14px;color:var(--inkt-zacht);
}

/* ---- Eenmalig, zonder beheer -----------------------------------------
   Elke kaart met een bedrag voor "zonder beheer" heeft twee prijsregels:
   .mb (met beheer) en .zb (zonder). Standaard is .zb verborgen, ook op de
   startpagina waar geen schakelaar staat. Op de pakkettenpagina zet
   site.js data-beheer="zonder" op de rij en wisselen ze. Een pakket zonder
   zo'n bedrag (Op maat) houdt zijn gewone prijs: .heeft-zb ontbreekt. */
.pakket .zb{display:none}
.raster[data-beheer="zonder"] .heeft-zb .mb{display:none}
.raster[data-beheer="zonder"] .heeft-zb .zb{display:block}
.raster[data-beheer="zonder"] .heeft-zb .pakket-prijs.zb{display:flex}

/* Losse teksten buiten de rij (de inleiding en "Bij elk pakket") wisselen
   mee: site.js zet data-beheer-modus op de body. */
.bk-zb{display:none}
body[data-beheer-modus="zonder"] .bk-mb{display:none}
body[data-beheer-modus="zonder"] .bk-zb{display:inline}

/* De schakelaar boven de pakketten, in het midden. Een zacht spoor met een
   donkere schuif die onder de gekozen knop doorglijdt (data-actief op de
   groep, gezet door site.js). Verborgen tot site.js hem aanzet: zonder
   script zou hij niets doen. */
.beheerkeuze{margin:0 0 36px;text-align:center}
.beheerkeuze[hidden]{display:none}
.beheerkeuze-knoppen{
  position:relative;display:inline-grid;grid-template-columns:1fr 1fr;
  padding:5px;border-radius:999px;background:var(--zacht);
  box-shadow:inset 0 0 0 1px var(--lijn-sterk);
}
.beheerkeuze-knoppen::before{
  content:"";position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);
  border-radius:999px;background:var(--inkt);
  box-shadow:0 2px 8px rgba(var(--inkt-rgb),.22);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.beheerkeuze-knoppen[data-actief="zonder"]::before{transform:translateX(100%)}
.beheerkeuze-knoppen button{
  position:relative;z-index:1;font:inherit;font-size:15.5px;font-weight:600;line-height:1.25;
  color:var(--inkt);background:none;border:0;border-radius:999px;
  padding:12px 26px;cursor:pointer;white-space:nowrap;
  transition:color .2s ease;
}
.beheerkeuze-knoppen button[aria-pressed="true"]{color:var(--creme)}
.beheerkeuze-knoppen button:focus-visible{outline:2px solid var(--roest);outline-offset:3px}
.beheernoot{
  max-width:52ch;margin:18px auto 0;font-size:15.5px;line-height:1.6;color:var(--inkt-zacht);
  text-wrap:balance;
}
.beheernoot[hidden]{display:none}
.beheernoot a{
  display:inline-block;margin-top:6px;color:var(--roest);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
}
.beheernoot a::after{content:" \2192"}
@media (max-width:520px){
  .beheerkeuze-knoppen{display:grid;width:100%}
  .beheerkeuze-knoppen button{padding:12px 10px;font-size:14.5px;white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .beheerkeuze-knoppen::before,.beheerkeuze-knoppen button{transition:none}
}

/* De schakelaar in de offerteconfigurator. Zelfde schuif als op de
   pakkettenpagina; hier staat hij boven de keuzes en loopt het bedrag mee.
   .cf-mb en .cf-zb zijn de prijs met en zonder beheer op een pakketkeuze. */
.beheerkeuze-config{margin:0 0 40px}
.configurator .cf-zb{display:none}
.configurator[data-beheer="zonder"] .cf-mb{display:none}
.configurator[data-beheer="zonder"] .cf-zb{display:block}
.config-pakket.niet-beschikbaar{opacity:.45;cursor:not-allowed}
.config-regel[hidden]{display:none}

/* "Niet zeker welk pakket past?" onder de pakketten op de startpagina, met
   de link als pijl-link (zie bij Knoppen). */
.pakket-twijfel{margin-top:28px;color:var(--inkt-zacht);line-height:1.9}

/* ======================================================================
   Werk
   ======================================================================
   Stijl A, september 2026: geen witte kaarten met een schaduw meer. Elk
   project is een schermafdruk met een dunne rand en 8px ronding, met de
   tekst er gewoon onder, op de pagina zelf. De HTML is gebleven: het is
   nog steeds een .kaart, maar zonder vlak. */
.kaart:has(> .werk-plaat){background:none;box-shadow:none;border-radius:0;padding:0}
.raster:has(> .kaart > .werk-plaat){gap:clamp(44px,5vw,64px) clamp(24px,3vw,40px)}

.werk-plaat{
  display:block;aspect-ratio:16/10;overflow:hidden;
  background:var(--zacht);margin:0 0 20px;
  border:1px solid var(--lijn-sterk);border-radius:8px;
}
.werk-plaat img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* Als er nog geen foto is: het beeldmerk als rustige vulling. */
.werk-leeg{
  width:100%;height:100%;display:grid;place-items:center;
  background:var(--zacht);
}


/* ======================================================================
   Stappen en opsommingen
   ====================================================================== */

.stappen{list-style:none;counter-reset:stap;display:grid;gap:26px}
.stappen li{display:flex;gap:18px;align-items:flex-start}
.stapbol{
  width:38px;height:38px;border-radius:13px;flex-shrink:0;
  background:var(--zacht);color:var(--roest);
  display:grid;place-items:center;
  font-family:var(--kop);font-weight:700;font-size:15px;
}
section.donker .stapbol{background:rgba(var(--creme-rgb),.14);color:var(--creme)}
.stappen h4{margin-bottom:4px}
.stappen p{font-size:15.5px;color:var(--inkt-zacht)}

/* Een citaat van een klant. */
.ervaring{display:flex;flex-direction:column;gap:18px}
.ervaring blockquote{
  font-family:var(--kop);font-size:19px;font-weight:400;line-height:1.5;
  letter-spacing:-.015em;color:var(--inkt);
}
.ervaring footer{font-size:14px;color:var(--inkt-zacht)}
.ervaring footer b{display:block;color:var(--inkt);font-weight:600;font-size:15px}


/* ======================================================================
   Lopende tekst, voor pagina's die vooral tekst zijn
   ====================================================================== */

.lopende-tekst{max-width:44em}
.lopende-tekst h2{font-size:clamp(22px,2.4vw,28px);margin:40px 0 14px}
.lopende-tekst h2:first-child{margin-top:0}
.lopende-tekst h3{margin:28px 0 10px}
.lopende-tekst p{margin-bottom:16px;line-height:1.75}
.lopende-tekst ul,.lopende-tekst ol{margin:0 0 18px;padding-left:22px}
.lopende-tekst li{margin-bottom:8px;line-height:1.7}
.lopende-tekst ol li::marker{color:var(--roest)}
.lopende-tekst ul{list-style:none}
.lopende-tekst ul li{position:relative}
.lopende-tekst ul li::before{position:absolute;left:-22px;top:.25em}
.lopende-tekst a{color:var(--roest);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.lopende-tekst a:hover{color:var(--oranje-diep)}}


/* ======================================================================
   Formulieren
   ====================================================================== */

.veld{display:block;margin-bottom:18px}
.veld > span{display:block;font-size:14px;font-weight:600;margin-bottom:7px}
.veld small{display:block;font-weight:400;font-size:13px;color:var(--inkt-zacht);margin-top:2px}

/* In het contactformulier en onderaan de offerte staan de velden per twee
   naast elkaar in een raster. De tussenruimte van dat raster kwam bovenop
   de ruimte onder elk veld, en dan stonden twee rijen velden ruim twee
   keer zo ver uit elkaar als de velden eronder. Nu telt alleen de ruimte
   onder het veld, overal even groot. Alleen in deze twee formulieren: het
   beheer en het portaal gebruiken hetzelfde raster op hun eigen manier. */
form[action="/contact.php"] .raster.k2,
.configurator .raster.k2{row-gap:0}

/* Velden hebben 8px ronding, net als de knoppen (stijl A, september 2026).
   Beheer en portaal laden dit bestand ook, dus daar gaan ze mee. De maat
   --rond bleef 14px: die gebruiken beheer.css en portaal.css ook, voor
   hun eigen vlakken. */
input[type=text],input[type=email],input[type=tel],input[type=url],
input[type=number],input[type=date],input[type=time],input[type=password],select,textarea{
  width:100%;padding:13px 15px;
  font-family:var(--tekst);font-size:16px;line-height:1.5;color:var(--inkt);
  background:var(--wit);border:1.5px solid var(--lijn-sterk);border-radius:8px;
  transition:border-color var(--soepel),box-shadow var(--soepel);
}
textarea{min-height:140px;resize:vertical}
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5A50' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;
  padding-right:44px;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--roest);box-shadow:0 0 0 3px rgba(var(--roest-rgb),.14);
}
input::placeholder,textarea::placeholder{color:#8C7D70}

/* Het veld dat alleen een robot invult. */
.val{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* Keuzevakjes en keuzerondjes. */
.keuze{display:flex;gap:11px;align-items:flex-start;font-size:15px;cursor:pointer;margin-bottom:10px}
.keuze input{margin-top:5px;width:17px;height:17px;accent-color:var(--roest);flex-shrink:0}

/* Overal, ook waar de klasse .keuze niet omheen staat. */
input[type=checkbox],input[type=radio]{accent-color:var(--roest)}


/* ----------------------------------------------------------------------
   Eigen keuzelijst
   Een <select> kun je dicht wel opmaken, maar de open lijst tekent het
   besturingssysteem. Die grijze lijst hoort niet bij de huisstijl, dus
   keuzelijst.js vervangt hem door het onderstaande. De echte select blijft
   in de pagina staan en verstuurt gewoon mee.
   ---------------------------------------------------------------------- */

.dn-keuze{position:relative;display:block;width:100%}
/* De echte select blijft bestaan, maar wordt niet meer getoond. */
.dn-keuze-echt{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.dn-keuze-knop{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 15px;
  font-family:var(--tekst);font-size:16px;line-height:1.5;text-align:left;
  color:var(--inkt);background:var(--wit);
  border:1.5px solid var(--lijn-sterk);border-radius:8px;
  cursor:pointer;
  transition:border-color var(--soepel),box-shadow var(--soepel);
}
@media (hover:hover){.dn-keuze-knop:hover{border-color:var(--roest-licht)}}
.dn-keuze-knop:focus-visible{
  outline:none;border-color:var(--roest);box-shadow:0 0 0 3px rgba(var(--roest-rgb),.14);
}
.dn-keuze.open .dn-keuze-knop{border-color:var(--roest);box-shadow:0 0 0 3px rgba(var(--roest-rgb),.14)}
.dn-keuze-tekst{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dn-keuze-pijl{width:18px;height:18px;flex-shrink:0;color:var(--inkt-zacht);transition:transform var(--soepel)}
.dn-keuze.open .dn-keuze-pijl{transform:rotate(180deg)}

.dn-keuze-lijst{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:80;
  margin:0;padding:6px;list-style:none;
  max-height:280px;overflow-y:auto;
  background:var(--wit);
  border:1px solid var(--lijn);border-radius:8px;
  box-shadow:0 2px 6px rgba(var(--inkt-rgb),.06), 0 18px 44px rgba(var(--inkt-rgb),.16);
}
.dn-keuze.omhoog .dn-keuze-lijst{top:auto;bottom:calc(100% + 6px)}

.dn-keuze-optie{
  padding:10px 12px;border-radius:6px;cursor:pointer;
  font-size:15px;line-height:1.4;color:var(--inkt);
}
@media (hover:hover){.dn-keuze-optie:hover,.dn-keuze-optie.aan{background:var(--zacht)}}
.dn-keuze-optie.nu{background:var(--roest);color:var(--creme);font-weight:600}
@media (hover:hover){.dn-keuze-optie.nu:hover,.dn-keuze-optie.nu.aan{background:var(--roest-diep)}}
.dn-keuze-optie.uit{color:#8C7D70;cursor:not-allowed}
@media (hover:hover){.dn-keuze-optie.uit:hover{background:transparent}}

.dn-keuze-groep{
  padding:12px 12px 6px;
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--inkt-zacht);
}
.dn-keuze-groep:first-child{padding-top:6px}

@media (prefers-reduced-motion:reduce){
  .dn-keuze-pijl{transition:none}
}


/* ----------------------------------------------------------------------
   Onderdelen die de browser zelf tekent
   Een bestandskiezer, een datumveld en de pijltjes van een getalveld komen
   uit het besturingssysteem en trekken zich niets van de huisstijl aan.
   Hieronder worden ze alsnog in de pas gezet.
   ---------------------------------------------------------------------- */

input[type=file]{
  width:100%;
  padding:9px 12px 9px 9px;
  font-family:var(--tekst);
  font-size:14.5px;
  line-height:1.5;
  color:var(--inkt-zacht);
  background:var(--wit);
  border:1.5px solid var(--lijn-sterk);
  border-radius:8px;
  cursor:pointer;
  transition:border-color var(--soepel),box-shadow var(--soepel);
}
@media (hover:hover){input[type=file]:hover{border-color:var(--roest-licht)}}
input[type=file]:focus-visible{
  outline:none;border-color:var(--roest);box-shadow:0 0 0 3px rgba(var(--roest-rgb),.14);
}

/* De knop binnenin. De standaardnaam en het oudere voorvoegsel van WebKit
   moeten in aparte regels: kent een browser er een niet, dan gooit hij de
   hele regel weg en heb je niets gewonnen. */
input[type=file]::file-selector-button{
  margin-right:12px;
  padding:9px 18px;
  border:0;
  border-radius:8px;
  background:var(--roest);
  color:var(--creme);
  font-family:var(--tekst);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background-color var(--soepel);
}
@media (hover:hover){input[type=file]::file-selector-button:hover{background:var(--roest-diep)}}

input[type=file]::-webkit-file-upload-button{
  margin-right:12px;
  padding:9px 18px;
  border:0;
  border-radius:8px;
  background:var(--roest);
  color:var(--creme);
  font-family:var(--tekst);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background-color var(--soepel);
}
@media (hover:hover){input[type=file]::-webkit-file-upload-button:hover{background:var(--roest-diep)}}

/* Het kalendertekentje in een datumveld. */
input[type=date]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:.55;
  transition:opacity var(--soepel);
}
@media (hover:hover){input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}}

/* De pijltjes van een getalveld staan in de weg bij een bedrag, maar je moet
   ze wel kunnen gebruiken bij een aantal. Ze blijven dus staan, alleen wat
   rustiger. */
input[type=number]{-moz-appearance:textfield}
@media (hover:hover){input[type=number]:hover,input[type=number]:focus{-moz-appearance:auto}}
input[type=number]::-webkit-inner-spin-button{opacity:.4}
@media (hover:hover){
  input[type=number]:hover::-webkit-inner-spin-button,
  input[type=number]:focus::-webkit-inner-spin-button{opacity:1}
}


/* ======================================================================
   De offerteconfigurator
   ======================================================================
   Stijl A (september 2026). Het waren witte vakken met schaduw en ronde
   hoeken: vier pakketkaarten met een vinkje in een bolletje, een wit vak
   per onderdeel, en een zwevende kaart met het totaal. Nu leest het als de
   prijslijst op pakketten.php: elke stap begint met een dikke lijn en een
   roest cijfer, de keuzes staan tussen dunne lijnen, en het totaal is een
   zacht vlak zonder schaduw, als een bonnetje. De HTML is niet veranderd.
   ====================================================================== */

.configurator{display:block;padding:0 0 clamp(56px,7vw,96px)}
.config-raster{display:grid;grid-template-columns:1fr 340px;gap:clamp(28px,4vw,56px);align-items:start}

/* Elke stap begint met een dikke lijn, zoals een hoofdstuk. De legend
   zweeft (float): anders tekent de browser hem óp die lijn, met een gat
   erin. Alles wat erna komt begint daarom onder hem (clear). */
.config-groep{border:0;border-top:1.5px solid var(--inkt);margin:0 0 48px;padding:22px 0 0;min-width:0}
.config-groep > legend{
  float:left;width:100%;
  display:flex;align-items:baseline;gap:14px;
  font-family:var(--kop);font-size:clamp(20px,2vw,24px);font-weight:600;
  letter-spacing:-.02em;color:var(--inkt);margin:0 0 16px;padding:0;
}
.config-groep > legend + *{clear:both}
/* Het nummer: een roest cijfer, geen vakje. */
.config-nummer{color:var(--roest)}
.config-uitleg{font-size:15px;margin-bottom:18px;max-width:52em}

/* De keuze voor een pakket: een rijtje zoals de prijslijst, met een
   rondje ervoor. Het echte keuzerondje is onzichtbaar; het rondje dat je
   ziet is een ::before op het vak. */
.config-pakketten{display:block;border-top:1px solid var(--lijn-sterk)}

.config-pakket{display:block;cursor:pointer;position:relative;border-bottom:1px solid var(--lijn-sterk)}
.config-pakket input{position:absolute;opacity:0;width:0;height:0}
.config-pakket-vak{
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto;
  grid-template-areas:"rond naam prijs" "rond voor prijs";
  column-gap:14px;align-items:start;
  padding:16px 14px;
  transition:background-color var(--soepel);
}
.config-pakket-vak::before{
  content:"";grid-area:rond;margin-top:3px;
  width:18px;height:18px;border-radius:50%;box-sizing:border-box;
  border:1.5px solid var(--lijn-sterk);background:var(--wit);
}
@media (hover:hover){.config-pakket:hover .config-pakket-vak{background:rgba(var(--roest-rgb),.04)}}
.config-pakket-vak b{
  grid-area:naam;
  font-family:var(--kop);font-size:18px;font-weight:600;letter-spacing:-.015em;
}
.config-pakket-vak > .grijs{grid-area:voor;font-size:14px;line-height:1.45}
.config-pakket-prijs{
  grid-area:prijs;text-align:right;
  font-family:var(--kop);font-size:20px;font-weight:700;letter-spacing:-.03em;color:var(--inkt);
  font-variant-numeric:tabular-nums;
}
.config-pakket-prijs small{
  display:block;font-family:var(--tekst);font-size:13px;font-weight:400;
  color:var(--inkt-zacht);letter-spacing:0;
}
/* Het doorgestreepte bedrag staat hier in een vak met vette kopletters.
   Terug naar de gewone letter, anders trekt het bedrag dat je niet betaalt
   de aandacht. */
.config-pakket-prijs .pakket-streep{
  font-family:var(--tekst);font-size:13px;font-weight:400;letter-spacing:0;
}

/* Gekozen: een zacht vlak en een gevuld rondje. */
.config-pakket input:checked + .config-pakket-vak{background:var(--zacht)}
.config-pakket input:checked + .config-pakket-vak::before{border:5.5px solid var(--roest)}
.config-pakket input:focus-visible + .config-pakket-vak{outline:2.5px solid var(--roest);outline-offset:-2.5px}

/* "Nog geen keuze" is geen pakket: gedempte tekst maakt dat duidelijk. */
.config-pakket.geen .config-pakket-vak b{color:var(--inkt-zacht);font-weight:500}
.config-pakket.geen .config-pakket-prijs{font-size:15px;color:var(--inkt-zacht);font-weight:600}
.config-pakket.geen input:checked + .config-pakket-vak b{color:var(--inkt)}

/* Een losse module: een regel tussen dunne lijnen, geen wit vak. */
.config-regel{
  display:flex;align-items:center;gap:16px;
  padding:14px;margin:0;
  border-bottom:1px solid var(--lijn);
}
.config-groep > .config-regel:first-of-type{border-top:1px solid var(--lijn-sterk)}
.config-regel-vink{display:flex;align-items:center;gap:12px;flex:1;cursor:pointer;min-width:0}
/* Een schuifje in plaats van een vinkvakje: het is nog steeds een gewone
   checkbox (configurator.js en het formulier merken er niets van), alleen
   getekend als schakelaar. Uit is een zacht bruin spoor, aan is roest. Een
   onderdeel dat in het pakket zit (disabled en aan) staat vast en wat lichter. */
.config-regel-vink input{
  appearance:none;-webkit-appearance:none;
  position:relative;flex-shrink:0;margin:0;
  width:40px;height:24px;border-radius:999px;
  background:var(--zacht-diep);cursor:pointer;
  transition:background var(--soepel);
}
.config-regel-vink input::after{
  content:"";position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;
  background:var(--wit);box-shadow:0 1px 2px rgba(var(--inkt-rgb),.25);
  transition:transform var(--soepel);
}
.config-regel-vink input:checked{background:var(--roest)}
.config-regel-vink input:checked::after{transform:translateX(16px)}
/* Vast en uit (een optie die pas kan als het onderdeel erboven aan staat):
   lichter. Vast en aan (al in het pakket): volle kleur, met een vinkje in
   het bolletje, zodat het als "aan" leest en niet als "niet beschikbaar". */
.config-regel-vink input:disabled:not(:checked){cursor:not-allowed;opacity:.6}
.config-regel-vink input:disabled:checked{cursor:default}
.config-regel-vink input:disabled:checked::after{
  background:var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238F3A1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6.2 2.4 2.4 4.6-5'/%3E%3C/svg%3E") center/10px no-repeat;
}
.config-regel-vink input:focus-visible{outline:2.5px solid var(--roest);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .config-regel-vink input,.config-regel-vink input::after{transition:none}
}
.config-regel-tekst{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}

/* Een onderdeel dat bij het onderdeel erboven hoort (nieuws bij het eigen
   beheerportaal): ingesprongen en met een kleiner schuifje, zonder verdere
   uitleg. Zolang het bovenste uit staat is het vast (zie configurator.js) en
   staan naam en prijs in het zachte bruin; het schuifje is dan lichter door
   :disabled. */
.config-regel.config-kind{padding-left:44px}
.config-kind .config-regel-vink input{width:34px;height:20px}
.config-kind .config-regel-vink input::after{width:14px;height:14px}
.config-kind .config-regel-vink input:checked::after{transform:translateX(14px)}
.config-regel.kind-uit .config-regel-tekst b,
.config-regel.kind-uit .config-regel-prijs{color:var(--inkt-zacht)}
.config-regel.kind-uit .config-regel-vink{cursor:not-allowed}
/* Een regel met een aantal heeft geen schuifje ervoor. Zo begint de tekst
   toch op dezelfde lijn als die van de regels erboven (schuifje 40 + 12). */
.config-regel > .config-regel-tekst:first-child{padding-left:52px}
.config-regel-tekst b{font-size:15.5px;font-weight:600;line-height:1.35}
.config-regel-tekst .grijs{font-size:14px;line-height:1.45}
.config-regel-prijs{
  font-size:14.5px;font-weight:600;color:var(--inkt);white-space:nowrap;
  text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums;
}
.config-aantal input{width:74px;padding:9px 10px;text-align:center;font-size:15px}

/* Een onderdeel dat al in het gekozen pakket zit: vast aangevinkt, met
   "Inbegrepen bij Groei" in plaats van de prijs. Bij een onderdeel met een
   aantal staat eronder hoeveel het pakket er al heeft. Beide zet
   configurator.js; de server rekent het net zo. */
.config-regel.inbegrepen .config-regel-vink{cursor:default}
.config-regel.inbegrepen .config-regel-prijs{color:var(--roest)}
.config-regel-hint{font-size:13.5px;line-height:1.45;font-weight:600;color:var(--roest)}

/* Het meelopende totaal: een zacht vlak zonder schaduw, als een bonnetje. */
.config-totaal{position:sticky;top:96px}
.config-totaal > .kaart{background:var(--zacht);box-shadow:none;border-radius:8px;padding:26px 24px}
.config-totaal .label{display:block;margin-bottom:18px}
.totaal-rij{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--lijn);
}
/* display:flex wint van de standaardregel voor hidden, dus die moet hier
   opnieuw. Zonder dit blijft een verborgen regel gewoon staan. */
.totaal-rij[hidden]{display:none}
.totaal-rij span{font-size:15px;color:var(--inkt-zacht)}
/* Een bedrag hoort nooit over twee regels te breken, anders komt het minteken
   los van het getal te staan. */
.totaal-rij b{
  font-family:var(--kop);font-size:24px;font-weight:700;letter-spacing:-.03em;
  white-space:nowrap;
}
.totaal-btw{font-size:13px;line-height:1.5;color:var(--inkt-zacht);margin:16px 0 20px}
.totaal-klein{font-size:13px;line-height:1.5;margin-top:14px;text-align:center}

/* De regel waarop de korting van het bedrag af gaat. */
.totaal-korting span{color:var(--oranje-diep)}
.totaal-korting b{color:var(--oranje-diep);font-size:18px}
/* "Betalen: 3 termijnen" is geen bedrag maar een zin: kleiner, rechts
   uitgelijnd en mag op twee regels staan, zodat hij binnen het vak blijft. */
.totaal-rij[data-rij="termijnen"]{align-items:flex-start}
.totaal-rij[data-rij="termijnen"] b{
  font-family:var(--tekst);font-size:15px;font-weight:600;letter-spacing:0;
  text-align:right;white-space:normal;min-width:0;
}
.totaal-rij[data-rij="termijnen"] b small{
  display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--inkt-zacht);
}
.totaal-rij[data-rij="vol"] b{font-size:17px;color:var(--inkt-zacht);text-decoration:line-through}

/* Het vakje voor een kortingscode. Een eigen stuk met een lijn eronder,
   zodat het niet verdwijnt tussen de bedragen en de verzendknop. Het was
   een gestippeld vak met een sterretje. */
.totaal-code{
  margin:0 0 18px;padding:0 0 18px;
  border-bottom:1px solid var(--lijn-sterk);
}
.code-label{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;margin-bottom:10px;
}
.code-label svg{display:none}

/* Onder elkaar in plaats van naast elkaar: in een smalle kolom past een veld
   met een knop ernaast niet, en dan valt de tekst in het veld weg. */
.code-rij{display:grid;gap:8px}
.code-rij input{
  width:100%;padding:12px 14px;font-size:15px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;text-align:center;
  border-color:var(--zacht-diep);
}
.code-rij input::placeholder{
  font-weight:400;letter-spacing:0;text-transform:none;color:#8C7D70;
}
.code-rij .knop{width:100%;justify-content:center}

.code-fout{
  display:flex;gap:7px;align-items:flex-start;
  font-size:13px;line-height:1.5;color:#C62828;margin-top:9px;
}
.code-fout svg{width:15px;height:15px;flex-shrink:0;margin-top:2px}

.code-aan{
  display:flex;gap:9px;align-items:flex-start;
  background:var(--creme);border-radius:8px;padding:12px 14px;
  font-size:14px;line-height:1.5;margin-bottom:10px;
}
.code-aan svg{display:none}
.code-aan small{display:block;color:var(--inkt-zacht);font-size:12.5px;margin-top:3px}

/* ---- De contactpagina ----
   Die gebruikt hetzelfde raster: links het formulier, rechts de kolom
   "Liever direct". Stijl A (september 2026): het formulier staat niet meer
   in een witte kaart maar op de pagina zelf, en de kolom is geen vlak met
   icoontjes in rondjes meer, maar een lijstje onder een dikke lijn. De
   icoontjes staan nog in de HTML. */
.config-raster > div > form.kaart{background:none;box-shadow:none;border-radius:0;padding:0}
.config-raster > aside:not(.config-totaal) > .kaart{
  background:none;box-shadow:none;border-radius:0;
  padding:22px 0 0;border-top:1.5px solid var(--inkt);
}
.config-raster > aside:not(.config-totaal) .stapbol{display:none}
.config-raster > aside:not(.config-totaal) .stappen li{display:block}
/* .kaart is een flexkolom, en daarin rekt een link anders uit tot de
   volle breedte, met de streep eronder over de hele kolom. */
.config-raster > aside:not(.config-totaal) .knop{align-self:flex-start}

@media (max-width:980px){
  .config-raster{grid-template-columns:1fr}

  /* Op de contactpagina staat de kolom met bellen en mailen boven het
     formulier. Wie wil bellen hoeft dan niet eerst langs negenhonderd
     pixels lege invulvelden. Niet op de offertepagina: daar is de aside
     het totaal, en dat hoort onder de keuzes te staan. */
  .config-raster:has(> div > form) > aside:not(.config-totaal){order:-1}

  /* Op een smal scherm loopt de kaart gewoon mee met de pagina. Alleen de
     bedragen en de knop blijven onderin staan, want dat is wat je wilt zien
     terwijl je aan het kiezen bent.

     Die balk staat vast en klikt niet mee. Een meelopend blok kan namelijk
     alleen vastklikken binnen zijn eigen kaart, en die is hier net zo hoog
     als hij zelf: dan zou je hem pas onderaan de pagina zien.

     Eerder zat het hele blok in die balk, inclusief het vak voor de
     kortingscode. Dat werd bijna vierhonderd pixels hoog: op een telefoon de
     halve pagina, permanent, over je eigen keuzes heen. */
  .config-totaal{position:static}
  .config-totaal > .kaart{background:transparent;box-shadow:none;padding:0;border-radius:0}
  .config-totaal .label,.totaal-klein{display:none}
  .totaal-code{margin:0}

  /* De vaste balk: een dikke lijn erboven in plaats van ronde hoeken en
     een schaduw (stijl A). */
  .totaal-vast{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;align-items:center;
    background:var(--creme);
    border-top:1.5px solid var(--inkt);
    padding:14px var(--kier);
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
  }
  .totaal-vast .totaal-rij{border-bottom:0;padding:0}
  .totaal-vast .totaal-rij b{font-size:20px}
  /* Twee klassen diep, want .kaart p zet alle alinea's in een kaart op
     15,5 px en die regel is specifieker dan .totaal-btw in zijn eentje. */
  .totaal-vast .totaal-btw{grid-column:1 / -1;margin:0;font-size:12px;line-height:1.45}
  .totaal-vast .knop{grid-column:1 / -1}

  /* De balk ligt over de onderkant van de pagina heen, dus ook over het
     laatste stuk van de voet. Daar hoort ruimte onder, anders kun je die
     regels niet meer lezen. Alleen op een pagina waar die balk ook echt
     staat: elders zou het een gat onderaan geven. */
  body:has(.totaal-vast) .voet{padding-bottom:calc(180px + env(safe-area-inset-bottom))}
}

@media (max-width:560px){
  .config-regel{flex-wrap:wrap;gap:8px 14px}
  .config-regel-prijs{text-align:left;width:100%;padding-left:52px}
  .config-regel.config-kind .config-regel-prijs{padding-left:46px}  .config-aantal{margin-left:auto}

  /* De prijs van een pakket onder de naam in plaats van ernaast. */
  .config-pakket-vak{
    grid-template-columns:20px minmax(0,1fr);
    grid-template-areas:"rond naam" "rond voor" "rond prijs";
  }
  .config-pakket-prijs{text-align:left;margin-top:8px}
}


/* ======================================================================
   De strook over het klantenportaal
   ----------------------------------------------------------------------
   Staat onder de pakketten. Eén brede strook en geen vijfde kaartje in het
   rijtje eronder: dit is geen kenmerk maar een verschil, en dat hoort niet
   weg te vallen tussen vier dingen die elk bureau belooft.
   ====================================================================== */

/* Stijl A (september 2026): geen vlak met een icoon meer, maar een regel
   tussen twee lijnen, op de kolomlijnen van de prijslijst erboven: de kop
   onder de namen, de tekst onder de lijstjes. Het icoon staat nog in de
   HTML maar wordt niet getoond. */
.portaal-strook{
  padding:28px 0;
  border-top:1px solid var(--lijn-sterk);border-bottom:1px solid var(--lijn-sterk);
}
.portaal-strook-merk{display:none}
.portaal-strook > div{
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.35fr) minmax(0,1fr);
  column-gap:clamp(24px,3.4vw,48px);
}
.portaal-strook h3{
  font-family:var(--kop);font-size:21px;line-height:1.2;
  font-weight:600;letter-spacing:-.02em;margin:0;
}
.portaal-strook p{grid-column:2 / -1;color:var(--inkt-zacht);font-size:15.5px;line-height:1.65;max-width:56em}

@media (max-width:900px){
  .portaal-strook > div{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .portaal-strook p{grid-column:auto}
}
@media (max-width:640px){
  .portaal-strook h3{font-size:19px}
}


/* ======================================================================
   Veelgestelde vragen
   ====================================================================== */

/* Stijl A (september 2026): de kop links, de vragen rechts, tussen dunne
   lijnen en met een plus in plaats van witte vakken met een pijltje. */
section .omhulsel.smal:has(> .vragenlijst){
  max-width:var(--breed);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start;
}
section .omhulsel.smal:has(> .vragenlijst) > .sectiekop{margin:0;padding-right:clamp(20px,2.4vw,34px)}
.vragenlijst{display:grid;gap:0;border-top:1px solid var(--lijn-sterk);margin-left:clamp(20px,2.4vw,34px)}
.vraag{border-bottom:1px solid var(--lijn-sterk)}
.vraag summary{
  cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-family:var(--kop);font-size:18px;font-weight:600;letter-spacing:-.015em;
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{
  content:'';position:absolute;right:4px;top:50%;
  width:14px;height:14px;margin-top:-7px;
  background:
    linear-gradient(var(--inkt),var(--inkt)) center/14px 2px no-repeat,
    linear-gradient(var(--inkt),var(--inkt)) center/2px 14px no-repeat;
}
.vraag[open] summary::after{background-size:14px 2px,0 0}
.vraag p{margin:0;padding:0 44px 14px 0;max-width:60ch;color:var(--inkt-zacht);font-size:15.5px}
/* Een antwoord kan uit meerdere alinea's en een opsomming bestaan: pas na de
   laatste komt de ruimte onder het antwoord. */
.vraag ul{list-style:none;margin:0;padding:0 44px 14px 0;max-width:60ch}
.vraag li{display:flex;gap:8px;padding:0 0 6px;color:var(--inkt-zacht);font-size:15.5px;line-height:1.55}
.vraag > :last-child{padding-bottom:22px}

@media (max-width:900px){
  section .omhulsel.smal:has(> .vragenlijst){grid-template-columns:minmax(0,1fr)}
  section .omhulsel.smal:has(> .vragenlijst) > .sectiekop{margin-bottom:24px;padding-right:0}
  .vragenlijst{margin-left:0}
}


/* ======================================================================
   Meldingen
   ====================================================================== */

.melding{
  display:flex;gap:12px;align-items:flex-start;
  padding:15px 18px;border-radius:var(--rond);margin-bottom:22px;
  font-size:15px;line-height:1.55;
  background:var(--zacht);border-left:4px solid var(--roest);
}
.melding.fout{background:#FBE9E9;border-left-color:#C62828;color:#7F1D1D}
.melding.let-op{background:#FDF0DC;border-left-color:var(--oranje-diep)}
.melding svg{width:19px;height:19px;flex-shrink:0;margin-top:2px}


/* ======================================================================
   Voet
   ====================================================================== */

.voet{background:var(--inkt);color:rgba(var(--creme-rgb),.72);padding:64px 0 28px;font-size:15px}
/* Onderaan een iPhone loopt de streep waarmee je naar het beginscherm veegt
   over de pagina heen. Daar hoort geen tekst onder te liggen. */
.voet{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
/* De bollen van duonova. in de voet, net als op desk.duonova.nl: losse
   bollen in crème en oranje, heel zacht, die naar onderen wegvallen. Ze
   worden door site.js geplaatst (data-bollen); zonder JavaScript is de voet
   gewoon effen. */
.voet{position:relative;overflow:hidden}
.voet > .bollen{position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 78%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 78%)}
.voet > .omhulsel{position:relative;z-index:1}
.voet a{color:rgba(var(--creme-rgb),.72);text-decoration:none;transition:color var(--soepel)}
@media (hover:hover){.voet a:hover{color:var(--oranje)}}
.voet h4{color:var(--creme);font-size:13px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:16px}
.voet-boven{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px}
.voet-over{max-width:300px;line-height:1.65}
.voet-over .merk{margin-bottom:18px}
.voet-over p + p{margin-top:10px}
.voet ul{list-style:none;display:grid;gap:10px}
.voet-onder{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid rgba(var(--creme-rgb),.14);
  font-size:13.5px;color:rgba(var(--creme-rgb),.55);
}
.voet-pijlers{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.2em}
.voet-rechts{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.voet-knopjes{display:flex;align-items:center;gap:10px}

/* Het linkje naar de backoffice. Bewust rustig: het hoort er te zijn voor wie
   het zoekt, niet om de aandacht te trekken. */
.voet-beheer{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:8px;
  border:1px solid rgba(var(--creme-rgb),.16);
  font-size:12.5px;font-weight:500;white-space:nowrap;
  transition:border-color var(--soepel),background-color var(--soepel),color var(--soepel);
}
.voet-beheer svg{width:14px;height:14px;opacity:.7}
@media (hover:hover){.voet-beheer:hover{border-color:var(--oranje);background:rgba(var(--oranje-rgb),.12);color:var(--oranje)}}
@media (hover:hover){.voet-beheer:hover svg{opacity:1}}
/* Ben je ingelogd, dan is hij net iets lichter: je ziet het, zonder dat hij
   schreeuwt. Eerst had hij een oranje vlak; naast het klantenportaal oogde
   dat onrustig (september 2026). */
.voet-beheer.aan{border-color:rgba(var(--creme-rgb),.38);color:var(--creme)}
.voet-beheer.aan svg{opacity:1}


/* ======================================================================
   Smallere schermen
   ====================================================================== */

@media (max-width:980px){
  .raster.k4{grid-template-columns:repeat(2,1fr)}
  .raster.k3{grid-template-columns:repeat(2,1fr)}
  .voet-boven{grid-template-columns:1fr 1fr;gap:34px}
  .voet-over{grid-column:1 / -1;max-width:none}
}

@media (max-width:820px){
  .menuknop{display:flex}

  /* Het menu vult het scherm onder de balk. Een half paneel waar de pagina
     onderdoor schemert ziet eruit alsof er iets half openstaat; dit is een
     plek waar je even bent. */
  .menu{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    /* dvh en niet svh. svh is de hoogte mét de grootste browserbalk erbij
       gerekend; staat die balk bij jou compact, dan blijft er onderaan een
       streep website over. dvh volgt wat er op dit moment echt zichtbaar is. */
    height:calc(100vh - var(--balk-h,74px));
    height:calc(100dvh - var(--balk-h,74px));
    background:var(--creme);
    padding:4px var(--kier) 0;
    overflow-y:auto;
    /* Veeg je in het menu voorbij het einde, dan hoort de pagina erachter
       niet mee te gaan. */
    overscroll-behavior:contain;
  }
  .balk.open .menu{display:flex}
  .balk .omhulsel{position:relative}

  /* Een regel per bestemming, met een haarlijn ertussen en een pijltje
     rechts. Zo leest het als een lijst en niet als losse woorden onder
     elkaar. */
  .menu a:not(.knop){
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:23px 2px;border-radius:0;
    font-size:19px;font-weight:500;letter-spacing:-.015em;
    border-bottom:1px solid var(--lijn);
  }
  .menu a:not(.knop)::after{
    content:"";width:8px;height:8px;flex-shrink:0;
    border-right:1.6px solid var(--lijn-sterk);
    border-bottom:1.6px solid var(--lijn-sterk);
    transform:rotate(-45deg);
  }
  .menu a.nu::after{border-color:var(--roest)}

  /* Op een breed scherm staat de offerteknop in de rij; hier niet, hier zit
     hij in het vlak hieronder. Zelfde verhaal voor de taalschakelaar. */
  .menu-knop-breed{display:none}
  .menu-taal-breed{display:none}

  /* Het onderste vlak zakt naar de onderkant van het scherm en loopt door
     tot de randen. Een eigen kleur, want dit zijn geen bestemmingen maar
     een aanbod: zonder dat onderscheid leest het als nog twee menuregels. */
  .menu-onder{
    display:block;
    margin:auto calc(var(--kier) * -1) 0;
    padding:22px var(--kier);
    padding-bottom:calc(22px + env(safe-area-inset-bottom));
    background:var(--zacht);
    border-top:1px solid var(--zacht-diep);
  }
  .menu-zin{
    display:block;margin:0 0 13px;
    font-family:var(--kop);font-size:19px;font-weight:600;
    letter-spacing:-.02em;line-height:1.3;color:var(--inkt);
  }
  /* Het vlak is een blok en geen kolom, dus de knop moet zelf zeggen dat hij
     de volle breedte wil. */
  .menu .menu-onder a.knop{display:flex;width:100%;margin:0;justify-content:center;font-size:16px}

  /* De taalschakelaar krijgt hier dezelfde volle breedte als de knop erboven,
     met een eigen rand zodat hij niet wegvalt tegen het vlak. */
  .menu .menu-onder .menu-taal{width:100%;margin:10px 0 0}
  .menu .menu-onder .menu-taal .dn-keuze{width:100%}
  .menu .menu-onder .menu-taal .dn-keuze-knop{
    width:100%;justify-content:center;padding:13px 20px;
    border:1.5px solid var(--lijn-sterk);border-radius:8px;font-size:16px;
  }
  .menu .menu-onder .menu-taal .dn-keuze-tekst{flex:none}
  .menu .menu-onder .menu-taal .dn-keuze-lijst{left:0;right:0}

  /* Bellen en mailen zijn geen bestemmingen maar een afsluiting. Ze staan
     daarom rustiger dan de regels erboven: geen haarlijn, geen pijltje en
     de tekst in gedempte inkt. De selector moet een klasse dieper dan de
     regel hierboven, anders wint die met zijn :not(). */
  .menu .menu-voet{
    display:flex;flex-direction:column;gap:2px;
    margin-top:16px;padding-top:12px;
    border-top:1px solid var(--zacht-diep);
  }
  .menu .menu-voet a{
    display:flex;align-items:center;justify-content:flex-start;gap:11px;
    padding:10px 2px;border-bottom:0;
    font-size:15px;font-weight:500;letter-spacing:0;
    color:var(--inkt-zacht);text-decoration:none;
  }
  .menu .menu-voet a::after{content:none}
  .menu .menu-voet svg{width:17px;height:17px;flex-shrink:0;color:var(--roest)}
}

@media (max-width:640px){
  :root{--kier:20px}
  .raster.k2,.raster.k3,.raster.k4{grid-template-columns:1fr}
  .kaart{padding:24px}
  .werk-plaat{margin:0 0 18px}
  .knoppen .knop{width:100%}
  /* ---- De voet ---------------------------------------------------
     Twee kolommen en niet een. De rijtjes zijn kort, en onder elkaar werd de
     voet op een telefoon een lijst van elf regels waar je doorheen moet.

     Maar de rijtjes zijn niet even lang: Diensten heeft er drie, Bureau
     vijf. Zonder ingrijpen valt Contact onder de langste van de twee, en
     staat er een gat van driehonderd pixels naast. Bureau pakt daarom twee
     rijen, zodat Diensten en Contact er samen naast passen:

         Diensten   Bureau
         Contact    Bureau

     Komt er ooit een vierde rijtje bij, dan moet deze regel mee. */
  .voet-boven{grid-template-columns:1fr 1fr;gap:28px 22px}
  .voet-kolom-lang{grid-row:span 2}

  /* Het logo met de zinnen eronder en de onderste balk in het midden
     (september 2026); links uitgelijnd oogde dat rommelig. De rijtjes met
     links blijven links: zo lees je ze het makkelijkst. */
  .voet{text-align:center}
  .voet-kolom{text-align:left}

  /* De onderste balk: de pijlers, dan het copyright, dan de twee knopjes.
     Alle drie op hun eigen regel; naast elkaar geperst werd het een prop. */
  .voet-onder{flex-direction:column;align-items:center;gap:14px}
  .voet-rechts{flex-direction:column;align-items:center;gap:14px}
  .voet-knopjes{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  @media (hover:hover){.knop:hover,a.kaart:hover{transform:none}}
}

/* Afdrukken: geen balk, geen schaduwen. */
@media print{
  /* Op papier hoort alles er gewoon te staan, ook wat normaal pas bij het
     scrollen tevoorschijn komt. */
  .beweegt [data-onthul]{opacity:1 !important;transform:none !important}
  .balk,.voet,.knoppen{display:none}
  body{background:#fff}
  .kaart{box-shadow:none;border:1px solid #ddd}
}


/* ======================================================================
   Beweging bij het scrollen
   ======================================================================
   Onderdelen met data-onthul komen omhoog zodra ze in beeld schuiven.
   Alles hieronder hangt aan .beweegt op het html-element. Die klasse zet
   een regeltje in de kop van de pagina. Draait er geen JavaScript, dan
   komt de klasse er nooit en staat de hele pagina er meteen, zonder
   beweging en zonder dat er iets onzichtbaar blijft.
   ====================================================================== */

.beweegt [data-onthul]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.75,.25,1) var(--wacht,0ms),
             transform .8s cubic-bezier(.2,.75,.25,1) var(--wacht,0ms);
}
.beweegt [data-onthul="links"]{transform:translateX(-30px)}
.beweegt [data-onthul="rechts"]{transform:translateX(30px)}
.beweegt [data-onthul="zoom"]{transform:translateY(20px) scale(.965)}
.beweegt [data-onthul].erin{opacity:1;transform:none}


/* ---- De kop vult het scherm ------------------------------------------
   Anders piept het volgende blok er onderaan al overheen en gaat de kop
   niet over zichzelf, maar over wat eronder staat.

   De ruimte onderin was er voor het duwtje "Verder kijken". Dat is weg, dus
   die ruimte mag terug naar wat een blok normaal krijgt; anders staat de kop
   met een lege baan van ruim honderd pixels eronder. */

.held.vol{
  min-height:calc(100vh - var(--balk-h,74px));
  min-height:calc(100svh - var(--balk-h,74px));
  display:flex;
  align-items:center;
  position:relative;
  padding-bottom:clamp(32px,4vw,56px);
}
.held.vol > .omhulsel{width:100%}

/* Hier stonden twee dingen die met de scroll meebewogen: het duwtje
   "Verder kijken" onder de kop, en de pakketten die openwaaierden. Allebei
   eruit na feedback van bezoekers - er gebeurde te veel op de startpagina.
   De markup is ook weg, dus dit is geen dode CSS maar verwijderde CSS. */


@media (prefers-reduced-motion:reduce){
  /* Wie beweging heeft uitgezet krijgt gewoon de pagina, meteen en stil. */
  .beweegt [data-onthul]{opacity:1;transform:none;transition:none}
}


/* ======================================================================
   Bouwen, beheren, groeien
   ======================================================================
   Drie kaarten, dezelfde als overal op de site. Hier stond eerst één groot
   roestkleurig vlak met de drie stappen erop. Dat is eraf: twee van die
   zware vlakken op één pagina - hier en bij het slotblok - is er één te
   veel. Het slotblok is de plek waar de kleur hoort, want daar zit de knop
   waar je op wilt drukken. Loopt de pagina van licht naar kleur, dan valt
   die oproep aan het eind vanzelf op.

   Stijl A (september 2026): geen kaarten meer, maar drie kolommen onder
   een dunne lijn, met het nummer als groot roest cijfer, net als de
   pijlers op de dienstenpagina. Het zijn ook dezelfde drie. Het nummer
   staat in de HTML nog in een .stapbol; alleen het vakje is eraf.
   ====================================================================== */

/* Let op de naam: .pijler en .pijlers bestonden al, voor de drie blokken
   op diensten.php. Die zijn daar een raster van twee kolommen, en toen deze
   kaarten diezelfde naam kregen vielen ze uit elkaar. Zie ook het hoofdstuk
   over klassenamen in LEESMIJ: een korte, voor de hand liggende naam is
   precies de naam die al ergens anders in gebruik is. */

.stapkaarten{
  list-style:none;margin:0;padding:0;align-items:stretch;
  gap:clamp(22px,2.6vw,30px) clamp(28px,3.4vw,48px);
}

/* Dubbele klasse, omdat .kaart op een smal scherm verderop opnieuw een
   binnenmarge krijgt. */
.kaart.stapkaart{
  gap:0;background:none;box-shadow:none;border-radius:0;
  padding:22px 0 0;border-top:1px solid var(--lijn-sterk);
}
.stapkaart .stapbol{
  display:block;width:auto;height:auto;border-radius:0;background:none;
  color:var(--roest);font-size:44px;font-weight:600;line-height:1;letter-spacing:-.03em;
  margin-bottom:16px;
}
.stapkaart h3{
  font-family:var(--kop);font-size:21px;line-height:1.25;
  font-weight:600;letter-spacing:-.02em;margin-bottom:10px;
}
.stapkaart p{font-size:15.5px;line-height:1.65;color:var(--inkt-zacht);margin:0}

.stapkaarten-meer{justify-content:flex-start;margin-top:clamp(30px,3.4vw,42px)}

/* Onder 900 px onder elkaar, net als de andere rasters van drie. */
@media (max-width:900px){
  .stapkaarten{grid-template-columns:minmax(0,1fr)}
}


/* ======================================================================
   Ons werk, in een browservenster
   ======================================================================
   De schermafdruk zit in een venster met een balk en drie stoplichtjes. Dat
   leest meteen als "dit is een website".

   Het adres stond er eerst bij in een pil in het midden, zoals Safari dat
   doet. Eruit gehaald: welke site het is staat er al onder, en de balk is
   rustiger zonder.

   Het beeldvlak staat op 16:10, de verhouding van een bureaublad. Het was
   eerst vierkant, met de gedachte dat je in een vierkant de bovenkant van de
   site ziet. Dat klopte voor de hoogte, maar een afdruk van 1200 breed werd
   er links en rechts flink voor bijgesneden: je zag "oenraad" in plaats van
   het hele merk. Nu past de volle breedte erin en snijdt hij alleen onderaan
   af, precies bij de vouw.
   ====================================================================== */

.tegels{display:grid;gap:clamp(18px,2vw,26px)}

/* Het aantal kolommen volgt het aantal projecten. Eén project in een raster
   van drie is een venster van een derde scherm breed, en dan is er van de
   site niets meer in te herkennen. */
.tegels.kolommen-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tegels.kolommen-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
.tegels.kolommen-1{grid-template-columns:minmax(0,1fr);max-width:640px}

.tegel{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit}

/* ---- Het venster ---- */
.venster{
  display:block;overflow:hidden;
  border-radius:8px;
  background:var(--zacht);
  border:1px solid var(--lijn-sterk);
  transition:border-color var(--soepel);
}
@media (hover:hover){
  .tegel:hover .venster{border-color:var(--roest)}
}

/* De balk met de drie stoplichtjes staat nog in de HTML, maar wordt niet
   meer getoond (stijl A, september 2026): een browservenster met gekleurde
   stoplichtjes is precies wat elke sjabloonsite doet. De schermafdruk met
   een dunne rand zegt al dat het een website is. */
.venster-balk{display:none}

.venster-beeld{
  display:block;position:relative;overflow:hidden;
  aspect-ratio:16/10;
  background:var(--wit);
}
.venster-beeld img,
.venster-beeld .werk-leeg{position:absolute;inset:0;width:100%;height:100%}
.venster-beeld img{object-fit:cover;object-position:top center}

/* ---- De tekst eronder ---- */
.tegel-tekst{display:flex;flex-direction:column;gap:4px;padding:0 2px}
.tegel-tekst b{
  font-family:var(--kop);font-size:18px;font-weight:600;
  letter-spacing:-.015em;line-height:1.3;
  transition:color var(--soepel);
}
@media (hover:hover){.tegel:hover .tegel-tekst b{color:var(--roest)}}
.tegel-tekst > span{font-size:14.5px;line-height:1.5;color:var(--inkt-zacht)}

@media (max-width:900px){
  .tegels.kolommen-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .tegels.kolommen-3,
  .tegels.kolommen-2{grid-template-columns:minmax(0,1fr)}
}

/* ---- Een project met de ervaring van de klant ----
   Tegel links, citaat rechts. Het citaat staat op een roest vlak met
   dezelfde ronding en kleuren als het slotpaneel, en is even hoog als de
   tegel: het kopje bovenaan, de aanvulling onderaan. */
.tegels-blok{display:grid;gap:clamp(32px,4vw,52px)}
.werk-uitgelicht{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(20px,3vw,40px);align-items:stretch;
}
.werk-ervaring{
  margin:0;display:flex;flex-direction:column;justify-content:flex-start;gap:28px;
  background:none;color:var(--inkt);padding:0;
}
/* De twee bollen van het beeldmerk voor het kopje, net als bij .pil. */
.werk-ervaring .label{
  display:inline-flex;align-items:center;gap:12px;align-self:flex-start;
  color:var(--inkt-zacht);
}
.werk-ervaring .label::before{
  content:"";flex-shrink:0;width:8px;height:8px;border-radius:50%;
  background:var(--roest);box-shadow:12px 0 0 var(--oranje);margin-right:12px;
}
.werk-ervaring blockquote{
  margin:0;font-family:var(--kop);font-weight:700;
  font-size:clamp(30px,4.2vw,58px);line-height:1.04;letter-spacing:-.035em;
  color:var(--roest);text-wrap:balance;
}
.werk-ervaring figcaption{
  font-size:clamp(16px,1.5vw,19px);line-height:1.5;color:var(--inkt-zacht);
  max-width:24em;
}

/* Op de pagina Ons werk staat de rij (project + ervaring) over de volle
   breedte van het raster met twee kolommen. */
.werk-rij{grid-column:1 / -1}
.raster:has(> .werk-rij){gap:clamp(44px,5vw,64px) clamp(24px,3vw,40px)}

/* Onder elkaar (telefoon, tablet) staat het citaat direct onder de
   schermafdruk, vóór titel en details, en scheidt een lijn het ene project
   van het volgende. Zo hoort het citaat bij zijn project, ook bij meerdere
   klanten. De tegel en het artikel worden "doorzichtig" (display:contents)
   zodat hun onderdelen met order op een eigen plek in het raster komen. */
@media (max-width:900px){
  .werk-uitgelicht{grid-template-columns:minmax(0,1fr);gap:0}
  .werk-uitgelicht > article,
  .werk-uitgelicht > .tegel{display:contents}
  .werk-uitgelicht > article > *,
  .werk-uitgelicht > .tegel > .tegel-tekst{order:3}
  .werk-uitgelicht > article > .werk-plaat,
  .werk-uitgelicht > .tegel > .venster{order:1}
  .werk-uitgelicht > .tegel > .tegel-tekst{margin-top:6px}
  .werk-uitgelicht > .werk-ervaring{order:2;margin:22px 0 20px;gap:16px}
  .werk-uitgelicht:not(:first-child){
    padding-top:clamp(28px,7vw,40px);border-top:1px solid var(--lijn-sterk);
  }
  .werk-ervaring blockquote{font-size:clamp(26px,7vw,36px)}
  .raster.k2:has(> .werk-rij),
  .tegels-blok{row-gap:clamp(56px,12vw,72px)}
}


/* ======================================================================
   Het slotblok: één vlak, in tweeën gedeeld
   ======================================================================
   Links roest met de tekst, rechts wit met het formulier, strak tegen
   elkaar aan.

   Het was eerst een witte kaart óp een roest kaart: twee afgeronde vakken
   in elkaar, met links een halve kolom kleur en rechts een randje van
   vijftig pixels. Dat leest als een doos die per ongeluk in een andere doos
   is beland. Nu zijn het twee helften van hetzelfde ding.

   De ronding zit op het vlak en de overflow houdt de helften erbinnen, dus
   de hoeken lopen door over de kleurgrens heen.

   Stijl A (september 2026): 8px ronding en geen schaduw, zodat het vlak
   op de pagina ligt in plaats van erboven te zweven. Het telefoonnummer
   is een link naast de knop, en de regels eronder staan zonder icoontjes
   tussen dunne lijnen.
   ====================================================================== */

.oproep-vlak{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  border-radius:8px;
  overflow:hidden;
}

/* ---- De linkerhelft ---- */
.oproep-tekst{
  background:var(--roest);color:var(--creme);
  padding:clamp(32px,3.8vw,54px);
  /* De kop bovenaan, het contact onderaan, en de rest wordt ruimte ertussen
     in plaats van een lege baan onderin. Dat werkt alleen doordat het
     formulier op de startpagina kort is; zie $compact in
     _contactformulier.php. */
  display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(28px,3.5vw,44px);
}
.oproep-tekst .label{display:block;margin-bottom:14px;color:rgba(var(--creme-rgb),.6)}
.oproep-tekst h2{color:var(--creme);margin-bottom:14px}
.oproep-tekst .groot{color:rgba(var(--creme-rgb),.8);margin:0;max-width:26em}

/* Knoppen op een roest ondergrond. Zelfde behandeling als op .paneel: de
   volle knop in crème, de tweede (het telefoonnummer) als link. Het
   icoontje van de telefoon blijft, zonder pijl: dat zegt al wat het doet. */
.oproep-tekst .knoppen{justify-content:flex-start;align-items:center;gap:14px 26px}
.oproep-tekst .knop.vol{background:var(--creme);color:var(--inkt)}
@media (hover:hover){.oproep-tekst .knop.vol:hover{background:var(--oranje)}}
.oproep-tekst .knop.rand{
  flex:0 0 auto;width:auto;min-height:0;
  padding:0 0 2px;border:0;border-radius:0;background:none;
  border-bottom:1.5px solid currentColor;color:var(--creme);
}
@media (hover:hover){
  .oproep-tekst .knop.rand:hover{background:none;color:var(--oranje);transform:none}
}

/* De knoppen en de contactregels horen bij elkaar: dat is samen "hoe je ons
   bereikt". Vandaar één groep onderin en niet twee losse blokken.

   Deze regels stonden tot september 2026 twee keer in dit bestand; het
   tweede exemplaar, verderop, won. Nu staan ze alleen hier. */
.oproep-onder{display:flex;flex-direction:column}

.oproep-punten{
  list-style:none;margin:clamp(26px,2.8vw,32px) 0 0;padding:0;
  display:grid;gap:0;border-top:1px solid rgba(var(--creme-rgb),.22);
}
.oproep-punten li{
  display:flex;align-items:center;gap:11px;
  padding:11px 0;border-bottom:1px solid rgba(var(--creme-rgb),.22);
  font-size:15px;color:rgba(var(--creme-rgb),.82);
}
/* De icoontjes staan nog in de HTML, maar worden niet getoond. */
.oproep-punten svg{display:none}
/* Een streep onder de letters en geen rand onder het vak: op een
   aanraakscherm krijgt deze link extra hoogte om te kunnen raken, en dan
   zakt zo'n rand los van de tekst weg. */
.oproep-punten a{
  color:var(--creme);
  text-decoration:underline;
  text-decoration-color:rgba(var(--creme-rgb),.4);
  text-underline-offset:3px;
}
@media (hover:hover){.oproep-punten a:hover{text-decoration-color:var(--creme)}}

/* ---- De rechterhelft ---- */
.oproep-formulier{
  background:var(--wit);
  padding:clamp(28px,3.2vw,46px);
  display:flex;align-items:center;
}
.oproep-formulier form{width:100%}
.oproep-formulier .veld{margin-bottom:14px}
/* Het tekstvak staat op vier regels, maar de algemene min-height van 140
   rekte het tot bijna zes. */
.oproep-formulier textarea{min-height:104px}
.oproep-formulier .knop{width:100%}

/* ---- Smaller ---- */
@media (max-width:1080px){
  .oproep-vlak{grid-template-columns:minmax(0,1fr)}
  .oproep-tekst .groot{max-width:none}
}
@media (max-width:560px){
  .oproep-formulier .raster.k2{grid-template-columns:1fr}
}


/* ======================================================================
   Vastklikken bij het scrollen
   ======================================================================
   Elk blok klikt netjes op zijn plek zodra je er vlakbij stopt. Alleen op
   de startpagina: die klasse komt uit dn_kop().

   Bewust "proximity" en niet "mandatory". Mandatory dwingt af dat je altijd
   op een blok uitkomt, en bij blokken die hoger zijn dan het scherm kun je
   dan stukken inhoud niet meer bereiken: de browser trekt je steeds terug.
   Met proximity klikt hij alleen vast als je er toch al bijna was, en
   scroll je er verder gewoon doorheen.

   De browser doet de beweging zelf, en die is soepel. Er komt dus geen
   JavaScript aan te pas. De ruimte voor de balk staat al op html met
   scroll-padding-top, dus een blok schuift niet onder de balk.
   ====================================================================== */

html.schuift{scroll-snap-type:y proximity}
html.schuift section{scroll-snap-align:start}

@media (prefers-reduced-motion:reduce){
  /* Wie beweging heeft uitgezet wil niet dat de pagina uit zichzelf
     bijschuift. */
  html.schuift{scroll-snap-type:none}
}


/* ======================================================================
   De dienstenpagina
   ======================================================================
   Per pijler: links een kolom die meeloopt met de scroll en zegt waar je
   bent, rechts de diensten onder elkaar met de volle breedte voor het
   verhaal.

   Het was eerst een raster van zes kaarten vol tekst. Dat werd een muur
   waar je alleen maar doorheen kon lezen: alles even groot, nergens
   houvast, en geen idee bij welke pijler je was.
   ====================================================================== */

/* Het sprongmenu onder de kop: een rijtje als een inhoudsopgave, met een
   lijn erboven en het aantal rechts. Stijl A, september 2026: het waren
   pillen met een getal in een bolletje. */
.springmenu{display:flex;flex-wrap:wrap;gap:24px;margin-top:40px}
.springmenu a{
  display:inline-flex;flex:0 1 190px;justify-content:space-between;align-items:baseline;gap:9px;
  padding:12px 0;
  border-top:1.5px solid var(--inkt);
  font-size:15.5px;font-weight:600;color:var(--inkt);
  text-decoration:none;
  transition:border-color var(--soepel),color var(--soepel);
}
@media (hover:hover){.springmenu a:hover{border-top-color:var(--roest);color:var(--roest)}}
.springmenu a span{font-size:14px;font-weight:700;color:var(--roest)}

/* ---- De pijler: kop links, diensten rechts ---- */

.pijler{
  display:grid;
  grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);
  gap:clamp(28px,4vw,64px);
  align-items:start;
}

.pijler-kop{
  /* Loopt mee tot het einde van de pijler. De ruimte voor de balk zit in
     de bovenmarge. */
  position:sticky;
  top:104px;
}
/* Het nummer van de pijler: een groot cijfer, geen vakje. */
.pijler-nummer{
  display:block;color:var(--roest);
  font-family:var(--kop);font-size:44px;font-weight:600;line-height:1;letter-spacing:-.03em;
  margin-bottom:14px;
}
.pijler-kop .label{display:block;margin-bottom:10px}
.pijler-kop h2{margin:0 0 14px;font-size:clamp(23px,2.1vw,29px)}
.pijler-aantal{
  margin:0;font-size:14px;color:var(--inkt-zacht);
  padding-top:14px;border-top:1px solid var(--lijn);
}

/* ---- De diensten ---- */

.dienstrijen{border-top:1px solid var(--lijn)}

.dienstrij{
  padding:clamp(26px,3vw,36px) 0;
  border-bottom:1px solid var(--lijn);
  /* Zodat een sprong vanuit het menu of vanaf de startpagina niet onder de
     balk eindigt. */
  scroll-margin-top:110px;
}

.dienstrij-kop{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px}
.dienstrij-kop > div{min-width:0}
/* Het icoon in een vakje staat nog in de HTML, maar wordt niet getoond. */
.dienstrij .kaarticoon{display:none}
.dienstrij-kop h3{margin:0 0 6px;font-size:clamp(22px,2.2vw,28px)}
.dienstrij-kort{
  margin:0;font-size:15.5px;line-height:1.55;
  color:var(--roest);font-weight:500;
}

.dienstrij-uitleg{max-width:62ch}
.dienstrij-uitleg p{margin:0 0 14px;font-size:16px;line-height:1.7;color:var(--inkt-zacht)}
.dienstrij-uitleg p:last-child{margin-bottom:0}

.dienstrij-vraag{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:18px;padding-bottom:3px;
  font-size:14.5px;font-weight:600;color:var(--inkt);
  text-decoration:none;
  border-bottom:1.5px solid var(--lijn-sterk);
  transition:border-color var(--soepel),color var(--soepel);
}
@media (hover:hover){.dienstrij-vraag:hover{border-bottom-color:var(--roest);color:var(--roest)}}
.dienstrij-vraag svg{width:16px;height:16px;flex-shrink:0;transition:transform var(--soepel)}
@media (hover:hover){.dienstrij-vraag:hover svg{transform:translateX(4px)}}

@media (max-width:640px){
  /* Drie naast elkaar, niet onder elkaar: het blijft een rijtje. */
  .springmenu{flex-wrap:nowrap;gap:14px}
  .springmenu a{flex:1 1 0;min-width:0}
}

@media (max-width:900px){
  .pijler{grid-template-columns:minmax(0,1fr);gap:24px}
  /* Onder elkaar heeft meelopen geen zin: de kop staat dan gewoon boven de
     diensten. */
  .pijler-kop{position:static}
  .pijler-aantal{display:none}
}


/* ======================================================================
   Aanraakschermen
   ======================================================================
   Deze regels hangen niet aan de breedte van het scherm maar aan de vraag
   of er een muis is. Een tablet is breed en heeft toch dikke vingers, en
   een smal browservenster op een computer heeft dat juist niet.

   Apple en Google houden allebei 44 punten aan als kleinste maat waar je
   nog betrouwbaar op tikt. Daar houden we ons aan voor alles wat een eigen
   knop of regel is. Een link midden in een zin blijft gewoon een link: die
   maak je niet groter zonder de zin uit elkaar te trekken.
   ====================================================================== */

@media (hover:none){
  .knop{min-height:48px}
  .knop.klein{min-height:44px}
  .springmenu a{min-height:44px}
  .menu a{min-height:48px}

  /* In de voet stonden de linkjes zeventien pixels hoog onder elkaar, met
     tien pixels ertussen. Die ruimte zit nu in de link zelf, zodat je hem
     raakt in plaats van de link ernaast. */
  .voet ul{gap:1px}
  .voet ul a{display:inline-block;padding:9px 0}
  .voet-onder a{display:inline-block;padding:5px 0}
  /* De twee knopjes zijn ook links in .voet-onder. Als los .voet-beheer won
     de regel hierboven (klasse plus element), en dan zat de rand op een
     telefoon strak om het pictogram en de tekst (september 2026). */
  .voet-onder .voet-beheer{display:inline-flex;padding:10px 16px}

  /* Losse regels die een eigen doel zijn en geen deel van een zin. */
  .dienstrij-vraag{padding:9px 0}
  .oproep-punten a{display:inline-block;padding:4px 0}

  /* Bellen en mailen vanaf de contactpagina. Dat zijn op een telefoon de
     twee belangrijkste tikken van de hele site, en ze stonden achttien
     pixels hoog. */
  .stappen p > a{display:inline-block;padding:9px 0}

  /* Het merk in de balk is de weg terug naar de startpagina. */
  .balk .merk{min-height:44px}

  /* Een keuzevakje zelf is achttien pixels; je tikt op het label eromheen.
     Dat label was precies zo hoog als zijn tekst, en bij een korte naam is
     dat te weinig. */
  .keuze,
  .config-regel-vink,
  .bh-schakel,
  .bh-uitvak{min-height:44px}

  /* De eigen keuzelijst blijft; alleen staan de regels wat ruimer, zodat je
     de goede raakt. De lijst van het besturingssysteem is op een telefoon
     groter, maar daar zou de huisstijl mee verdwijnen. */
  .dn-keuze-optie{padding:12px}

  /* Onder de zestien pixels zoomt Safari op de iPhone vanzelf in zodra je
     in een veld tikt, en daarna staat de hele pagina scheef. Dat gebeurt
     ook met user-scalable=no in de kop: Apple negeert dat. Deze velden zijn
     de enige die eronder zaten. */
  .config-aantal input,
  .code-rij input,
  input[type=file]{font-size:16px}
}


/* ======================================================================
   De telefoon
   ======================================================================
   Wat hieronder staat geldt vanaf de breedte waarop het menu inklapt.
   ====================================================================== */

@media (max-width:820px){

  /* ---- De kop van de startpagina ------------------------------------
     Stijl A (september 2026): de drie beloften staan als gewone tekst
     direct onder de knoppen. De tekst hoeft daarom niet meer precies een
     scherm hoog te zijn; dat was er voor de witte kaart, die er anders
     halverwege overheen piepte. */
  .held.vol{
    min-height:0;
    display:block;
    padding-top:clamp(36px,9vw,56px);
    padding-bottom:clamp(56px,9vw,80px);
  }
  .kaart.held-kaart{margin-top:44px}

  /* De knop en de link naast elkaar. De knop vult de regel, de link houdt
     zijn eigen breedte. Past het niet, op een kleine telefoon, dan wipt de
     link vanzelf naar de volgende regel: dat regelt flex-basis. */
  .held.vol .knoppen .knop{
    flex:1 1 142px;
    padding-left:14px;
    padding-right:14px;
  }
  .held.vol .knoppen .knop.rand{flex:0 0 auto;padding-left:0;padding-right:0}

  /* ---- Vastklikken bij het scrollen ---------------------------------
     Op een telefoon is elk blok twee tot drie schermen hoog. Er valt dan
     niets vast te klikken; het enige wat je merkt is dat de pagina af en
     toe tegen je duim in schuift. */
  html.schuift{scroll-snap-type:none}

  /* ---- Onthullen bij het scrollen -----------------------------------
     Zijwaarts binnenkomen duwt een blok op een smal scherm een flink stuk
     buiten beeld, en trekt de aandacht naar de rand in plaats van naar de
     tekst. Hier komt alles gewoon van onderen. */
  .beweegt [data-onthul="links"],
  .beweegt [data-onthul="rechts"]{transform:translateY(26px)}

  /* ---- De pakketten op een telefoon ------------------------------------
     Zonder script staan de rijen van de prijslijst hier onder elkaar, in
     één kolom. Met script worden het knoppen bovenaan; zie verderop. */
  .kaart.pakket{
    grid-template-columns:minmax(0,1fr);grid-template-rows:none;
    grid-template-areas:"naam" "voor" "prijs" "erbij" "basis" "extra" "lijst" "knop";
    padding:28px 0 30px;
  }
  /* Het vlak loopt tot de schermrand, dus zonder ronde hoeken. */
  .kaart.pakket.uit{padding:58px var(--uit-kier) 34px;border-radius:0}
  .pakket:not(:has(.pakket-basis)) .vinkjes{grid-row:auto;margin-top:0}
  .pakket-prijs{justify-content:flex-start;margin-top:18px}
  .pakket .pakket-erbij{text-align:left;margin-bottom:18px}
  .pakket .knop{justify-self:start}

  /* ---- De pakketten als knoppen bovenaan -------------------------------
     September 2026. Eerst stonden ze hier onder elkaar, met Start en Op
     maat ingeklapt. Dat vonden bezoekers verwarrend: een dichte regel en
     een open blok lijken verschillende dingen, en "Alles uit Start" wees
     naar iets wat je niet zag. Nu staan de namen naast elkaar en staat
     daaronder één pakket helemaal, eerst het uitgelichte.

     De knoppen zijn de koppen zelf: site.js zet de naam in een knop binnen
     de h3, en zet .pakket-tabs op het raster en .gekozen op het pakket. De
     tekst blijft zo precies gelijk. De pakketten liggen in één cel op
     elkaar; van de andere blijft alleen de kop over, en die staat bovenaan
     op zijn eigen plek (--tab-plek van --tab-aantal, gezet door site.js). */
  .raster.pakket-tabs{
    --tab-hoogte:78px;
    position:relative;
    display:grid;grid-template-columns:minmax(0,1fr);
    padding-top:var(--tab-hoogte);
    /* Geen dikke lijnen erboven en eronder, zoals bij de prijslijst op
       een breed scherm: hier doen de knoppen dat werk al. */
    border:0;
    scroll-margin-top:96px;
  }
  /* De dunne lijn onder de knoppen. */
  .raster.pakket-tabs::before{
    content:"";position:absolute;left:0;right:0;top:calc(var(--tab-hoogte) - 1px);
    height:1px;background:var(--lijn-sterk);
  }
  .raster.pakket-tabs > .kaart.pakket{
    grid-area:1 / 1;
    margin:0;padding:24px 0 34px;
    background:none;border:0;border-radius:0;
  }
  .raster.pakket-tabs > .pakket:not(.gekozen){align-self:start;padding:0;pointer-events:none}
  .raster.pakket-tabs > .pakket:not(.gekozen) > :not(h3):not(.pakket-vlag){display:none}
  /* De lijst in zijn eigen rij. Zonder "Alles uit ..." zocht hij de eerste
     vrije plek, en nu de kop los staat was dat de bovenste. */
  .raster.pakket-tabs .pakket .vinkjes{grid-row:lijst}

  /* De koppen, als knoppen naast elkaar. grid-area:auto, anders meet
     "top" vanaf het vak van de naam (onder de padding) in plaats van vanaf
     de rand van het pakket. */
  .raster.pakket-tabs > .pakket > h3{
    grid-area:auto;
    position:absolute;top:calc(var(--tab-hoogte) * -1);
    left:calc(100% / var(--tab-aantal) * var(--tab-plek));
    width:calc(100% / var(--tab-aantal));height:var(--tab-hoogte);
    margin:0;font-size:20px;line-height:1.1;
    pointer-events:auto;
  }
  .pakket-tab{
    position:relative;
    display:flex;align-items:flex-end;justify-content:center;
    width:100%;height:100%;
    margin:0;padding:0 4px 17px;border:0;background:none;cursor:pointer;
    font:inherit;color:var(--inkt-zacht);letter-spacing:inherit;text-align:center;
  }
  .pakket.gekozen .pakket-tab{color:var(--inkt)}
  .pakket.gekozen .pakket-tab::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;background:var(--roest);
  }
  .pakket-tab:focus-visible{outline:2.5px solid var(--roest);outline-offset:-2.5px;border-radius:8px}

  /* "Beste keuze" blijft boven de knop van het uitgelichte pakket staan,
     ook als je een ander pakket bekijkt. Het labeltje is een flexvak
     (.pil), dus centreren gaat met justify-content en niet met
     text-align. */
  .raster.pakket-tabs > .pakket > .pakket-vlag{
    top:calc(var(--tab-hoogte) * -1 + 15px);
    left:calc(100% / var(--tab-aantal) * var(--tab-plek));
    width:calc(100% / var(--tab-aantal));
    display:flex;justify-content:center;
    font-size:12.5px;
  }

  /* Alle drie dezelfde knop. Op een breed scherm is alleen die van het
     uitgelichte pakket vol en zijn de andere een pijl-link; daar staan ze
     naast elkaar en wijst dat de weg. Hier zie je er steeds maar één, en
     dan is het verschil alleen ongelijk. Roest, net als de hoofdknoppen in
     de configurator, en over de hele breedte. */
  .raster.pakket-tabs .pakket .knop{
    justify-self:stretch;width:100%;min-height:50px;
    margin-top:24px;padding:14px 24px;
    border:0;border-radius:8px;
    background:var(--roest);color:var(--creme);
  }
  .raster.pakket-tabs .pakket .knop::after{content:none}
  @media (hover:hover){
    .raster.pakket-tabs .pakket .knop:hover{background:var(--roest-diep);color:var(--creme)}
  }

  /* De btw-regel en de vraag eronder in het midden, onder de knop. */
  .prijsvoet,
  .pakket-twijfel{text-align:center}

  /* "Alles uit Start": de naam brengt je naar Start. */
  .pakket-naar{
    margin:0;padding:0;border:0;background:none;cursor:pointer;
    font:inherit;color:inherit;
    text-decoration:underline;text-decoration-color:var(--roest);
    text-decoration-thickness:1.5px;text-underline-offset:3px;
  }
  .pakket-naar:focus-visible{outline:2.5px solid var(--roest);outline-offset:3px;border-radius:4px}

  /* ---- Het slotblok ---------------------------------------------------
     Hier stond een blok dat het slotblok tot de schermranden liet doorlopen,
     met `.oproep{padding:0}` erbij. Dat ging over de oude opzet: een witte
     kaart in een roest vlak in een kier, drie dozen in elkaar.

     Die opzet bestaat niet meer - het is nu één vlak in tweeën - en de
     regels wezen naar klassen die weg zijn. Wat er wél van overbleef was die
     `padding:0`, en daardoor plakte het formulier onderaan tegen de voet
     aan. Het slotblok krijgt nu gewoon de ruimte van een normale sectie.

     Het vlak zelf mag wel smaller: op een telefoon zijn drie invulregels van
     271 pixels prima, en dat scheelt het gedoe van een blok dat als enige
     buiten de kantlijn valt. */
  .oproep-tekst{padding:clamp(32px,7vw,44px) clamp(24px,6vw,32px)}
  .oproep-formulier{padding:clamp(28px,6vw,34px) clamp(24px,6vw,32px)}
}

/* ---- De balk onderin de configurator, bij eenmalig zonder beheer --------
   Op een telefoon stond "Betalen" met "3 termijnen: 40%, 30% en 30%" in de
   grote bedragletters, over vier regels, waardoor de balk bijna het halve scherm
   innam. Nu één regel over de volle breedte, in gewone letters. */
@media (max-width:980px){
  .totaal-vast .totaal-rij[data-rij="termijnen"]{grid-column:1 / -1;align-items:baseline}
  .totaal-vast .totaal-rij[data-rij="termijnen"] b{
    font-family:var(--tekst);font-size:14px;font-weight:600;letter-spacing:0;
    text-align:right;white-space:normal;
  }
  .totaal-vast .totaal-rij[data-rij="termijnen"] b small{display:inline;margin:0 0 0 4px;font-size:13px}
}

/* ---- Alles in één keer of in termijnen (configurator, zonder beheer) --------
   Een kleine schuif in het totaalblok, in dezelfde stijl als die bovenaan:
   een zacht spoor met een donkere schuif onder de gekozen knop. De keuze
   verandert het bedrag niet, alleen hoe er betaald wordt. */
.totaal-betalen{flex-wrap:wrap;gap:8px 12px}
.totaal-betalen > span{flex:0 0 auto}
.betaalkeuze{
  position:relative;display:inline-grid;grid-template-columns:1fr 1fr;
  padding:3px;border-radius:999px;background:var(--wit);
  box-shadow:inset 0 0 0 1px var(--lijn-sterk);margin-left:auto;
}
.betaalkeuze::before{
  content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);
  border-radius:999px;background:var(--inkt);transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.betaalkeuze[data-actief="termijnen"]::before{transform:translateX(100%)}
.betaalkeuze button{
  position:relative;z-index:1;-webkit-appearance:none;appearance:none;
  background:none;border:0;border-radius:999px;cursor:pointer;
  padding:7px 14px;font:inherit;font-size:13.5px;font-weight:600;line-height:1.2;
  color:var(--inkt);white-space:nowrap;transition:color .2s ease;
}
.betaalkeuze button[aria-pressed="true"]{color:var(--creme)}
.betaalkeuze button:focus-visible{outline:2px solid var(--roest);outline-offset:2px}
.totaal-rij .betaaltoelichting{
  flex:1 0 100%;display:block;margin:0;text-align:right;font-size:13px;color:var(--inkt-zacht);
}
@media (prefers-reduced-motion:reduce){.betaalkeuze::before,.betaalkeuze button{transition:none}}

/* ---- De betaalschuif netter -------------------------------------------
   Het label staat boven, de schuif loopt over de volle breedte met twee even
   brede knoppen, en de toelichting staat links eronder. Zo staat alles op één
   lijn met de rest van het totaalblok. Gaat voor op de eerste versie. */
.totaal-rij.totaal-betalen{
  display:grid;grid-template-columns:1fr;gap:10px;align-items:stretch;padding:14px 0;
}
.totaal-betalen > span{font-size:15px;color:var(--inkt-zacht)}
.totaal-betalen .betaalkeuze{width:100%;margin:0}
.totaal-betalen .betaalkeuze button{padding:10px 8px;text-align:center}
.totaal-rij .betaaltoelichting{flex:none;margin:0;text-align:left;font-size:13px;line-height:1.4}
/* In de vaste balk onderin op een telefoon: label links, schuif rechts, de
   toelichting eronder, zodat de balk niet hoger wordt dan nodig. */
@media (max-width:980px){
  .totaal-rij.totaal-betalen{grid-template-columns:auto 1fr;align-items:center;gap:6px 14px;padding:0}
  .totaal-betalen .betaalkeuze{width:auto;justify-self:end}
  .totaal-betalen .betaalkeuze button{padding:8px 14px}
  .totaal-rij .betaaltoelichting{grid-column:1 / -1;text-align:right}
}

/* De betaalschuif in dezelfde terracotta als de knoppen in het totaalblok
   (Toepassen, Stuur mij deze samenstelling), in plaats van donker. */
.betaalkeuze::before{background:var(--roest)}

/* De toelichting midden onder de schuif, die over de volle breedte loopt. Op een
   telefoon staat de schuif rechts, dan staat de toelichting ook rechts. */
.totaal-rij .betaaltoelichting{text-align:center}
@media (max-width:980px){
  .totaal-rij .betaaltoelichting{text-align:right}
}



/* ======================================================================
   Producten: per product één kaart met een knop naar de eigen site
   ====================================================================== */

/* Het woordmerk van novadesk., overal in de lopende tekst en op knoppen:
   dezelfde kleuren als op desk.duonova.nl. Op een donkere knop worden
   "nova" en "desk" crème; de punt blijft altijd oranje. */
.nd-wm{font-family:var(--kop);font-weight:700;letter-spacing:-.03em;white-space:nowrap}
.nd-wm .nova{color:var(--inkt)}
.nd-wm .desk{color:var(--roest)}
.nd-wm .punt{color:var(--oranje)}
.knop.vol .nd-wm .nova,.knop.vol .nd-wm .desk{color:var(--creme)}

/* Geen dubbele witruimte tussen de kop van de pagina en de eerste kaart. */
.held + #novadesk{padding-top:0}

/* De kaart: links de tekst, rechts een licht zandkleurig vlak met de
   bollen van duonova. (site.js, data-bollen="licht") waarin het scherm naar
   de rand loopt. Licht, zodat de roest kop van de app er niet mee botst. De rand van de kaart snijdt het scherm af, zodat het voelt alsof
   je erin kijkt. */
.productkaart{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  position:relative;background:var(--zacht);border-radius:28px;overflow:hidden;
  /* Zwevend: een strakke schaduw vlak onder de kaart en een brede, zachte
     verder weg, zodat hij los van de pagina lijkt te hangen. */
  /* De dunne rand als schaduw buitenom, niet als border: met een border
     bleef er langs het lichte vlak een wit randje van de kaart zichtbaar. */
  box-shadow:
    0 0 0 1px rgba(var(--inkt-rgb),.06),
    0 1px 2px rgba(var(--inkt-rgb),.05),
    0 12px 24px -8px rgba(var(--inkt-rgb),.10),
    0 50px 100px -24px rgba(var(--roest-diep-rgb),.38);
}
/* Een warme gloed onder de kaart, alsof er licht onder vandaan komt. */
#novadesk .omhulsel{position:relative}
#novadesk .omhulsel::before{
  content:"";position:absolute;left:12%;right:12%;bottom:-18px;height:70px;z-index:-1;
  background:radial-gradient(closest-side,rgba(var(--oranje-rgb),.42),transparent);filter:blur(28px);
}
.productkaart-tekst{padding:clamp(28px,4vw,52px);background:var(--wit);display:flex;flex-direction:column;justify-content:center}
.productkaart-merk{display:flex;align-items:center;gap:12px}
.productkaart-icoon{width:36px;height:36px;flex-shrink:0;border-radius:9px;box-shadow:0 4px 12px rgba(var(--roest-rgb),.25)}
.productkaart-merk .label{margin:0}
.product-naam{font-size:clamp(38px,4.4vw,58px);letter-spacing:-.04em;line-height:1;margin:22px 0 12px}
.productkaart-tekst .groot{color:var(--inkt);margin-bottom:10px}
.productkaart-tekst p:not(.groot){color:var(--inkt-zacht);margin-bottom:26px;max-width:30em}
.productkaart-feiten{list-style:none;padding:22px 0 0;margin:28px 0 0;border-top:1px solid var(--lijn);display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--inkt-zacht)}
.productkaart-feiten li{display:flex;align-items:center;gap:8px}
.productkaart-feiten li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--oranje)}
.productkaart-feiten b{color:var(--inkt);font-weight:700;margin-right:-4px}

.productkaart-beeld{
  position:relative;display:block;overflow:hidden;min-height:340px;
  background:radial-gradient(120% 90% at 85% 10%,var(--creme),var(--zacht) 55%,var(--zacht-diep));
}
.productkaart-beeld > .bollen{position:absolute;inset:0;pointer-events:none}
.productkaart-beeld img{
  position:absolute;left:12%;top:14%;width:120%;max-width:none;height:auto;
  border-radius:12px;border:6px solid var(--inkt);
  box-shadow:0 30px 70px rgba(var(--inkt-rgb),.45);
}
@media (max-width:860px){
  .productkaart{grid-template-columns:1fr}
  .productkaart-beeld{min-height:0;aspect-ratio:16/10}
}