/* De achtergrondvlakken steken bewust buiten het scherm. Clippen op html en
   body (overflow-x-clip in de body-klasse) voorkomt dat daar horizontaal
   gescrold kan worden. Clip in plaats van hidden: het venster mag daar niet
   scrollen, dus hoeft er ook geen scrolgebied voor bijgehouden te worden. */
html { overflow-x: clip; }

/* De ruimte voor de verticale schuifbalk blijft altijd gereserveerd, ook op
   een pagina die kort genoeg is om niet te scrollen. Zonder dit wordt zo'n
   pagina 15 px breder en verspringt de vaste header zichtbaar zodra je van
   een lange naar een korte pagina klikt. */
html { scrollbar-gutter: stable; }

/* Hoeveel 100vw breder is dan het document. Dat is niet altijd de breedte van
   de schuifbalk: met scrollbar-gutter hierboven rekent de browser de gereser-
   veerde ruimte al uit vw weg en is het verschil nul. main.js meet daarom de
   werkelijke waarde in plaats van ze af te leiden. 0px is de juiste terugval
   voor browsers die scrollbar-gutter ondersteunen, en dus ook zonder
   JavaScript correct. */
:root { --vw-overschot: 0px; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #131313; background-color: #F7F5F2; }
h1, h2, h3, h4, .font-heading { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }

/* Beeld over de volle vensterbreedte, los van de kolombreedte waar het in
   staat. Waar 100vw breder uitvalt dan het document, haalt --vw-overschot dat
   verschil eraf, zodat de linker- en rechterrand exact op de documentrand
   vallen. */
@media (min-width: 64rem) {
  .volle-breedte {
    left: calc(50% - 50vw + var(--vw-overschot) / 2);
    width: calc(100vw - var(--vw-overschot));
  }
}

/* Zachte kleurvlakken op de achtergrond, in de merkkleuren */
.blob-bg { position: absolute; z-index: 0; filter: blur(46px); border-radius: 50%; pointer-events: none; }
.blob-1 { top: -12%; left: -12%; width: 48vw; height: 48vw; background-color: #6E665F; opacity: .14; }
.blob-2 { bottom: 12%; right: -6%; width: 40vw; height: 40vw; background-color: #A9541A; opacity: .10; }

/* Knop naar boven, verschijnt pas zodra je een eind gescrold hebt. */
.to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 40;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9999px;
    background: #A9541A;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 24px -8px rgba(19, 19, 19, .45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: #83400F; }
@media (min-width: 640px) {
    .to-top { right: 2rem; bottom: 2rem; width: 56px; height: 56px; }
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 3px solid #A9541A; outline-offset: 3px; border-radius: 6px;
}

.skip-link {
    position: absolute; left: 1rem; top: -100px; z-index: 100;
    background: #131313; color: #fff; padding: .85rem 1.4rem;
    border-radius: 0 0 12px 12px; font-weight: 700; transition: top .2s ease;
}
.skip-link:focus { top: 0; }

/* Navigatie: koperen streepje onder de link waar je bent of overheen gaat. */
.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    /* "Over Mij" viel op 1024 px uiteen over twee regels zodra er een zesde
       link bij kwam. Een menu-item hoort nooit af te breken. */
    white-space: nowrap;
    padding: 0 2px;
    color: #131313;
    font-weight: 700;
    font-size: .95rem;
    transition: color .2s ease;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 8px;
    height: 2px;
    background: #A9541A;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s ease;
}
.nav-link:hover, .nav-link.is-active { color: #A9541A; }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }

/* De header is een zwevende balk die los van de schermrand staat: op elke
   breedte 16 px van de boven- en zijranden (px-4 pt-4 op #navbar) en met
   16 px ronde hoeken (rounded-2xl), bovenaan de pagina en tijdens het
   scrollen precies hetzelfde. Het mobiele menu volgt dezelfde zijranden
   (inset-x-4). Een zachte schaduw tilt hem van de off-white achtergrond; zodra je scrollt
   (main.js zet .is-gescrold) wordt die iets dieper en wordt de balk half
   doorzichtig, zodat de pagina erachter zichtbaar blijft. De vervaging
   houdt de menulinks leesbaar boven foto's en tekst die eronder door
   schuiven. */
.navbar-balk {
    box-shadow: 0 8px 24px -14px rgba(19, 19, 19, .22);
    transition: box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
}
.navbar-balk.is-gescrold {
    background-color: rgba(255, 255, 255, .72);
    border-color: rgba(232, 227, 220, .6);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 14px 34px -14px rgba(19, 19, 19, .30);
}
/* Zonder vervaging (oude browsers) of als de bezoeker minder
   doorzichtigheid vraagt, blijft de balk (bijna) wit. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .navbar-balk.is-gescrold { background-color: rgba(255, 255, 255, .95); }
}
@media (prefers-reduced-transparency: reduce) {
    .navbar-balk.is-gescrold { background-color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* De header staat vast bovenaan; ankerlinks moeten daar niet onder landen.
   main.js meet de echte headerhoogte en zet die in --kophoogte, zodat deze
   afstand meegroeit als de header van hoogte verandert. De 1.5rem erbij is
   de ademruimte boven de kop waar je naartoe springt. Zonder JavaScript
   geldt de terugvalwaarde, die op de hoogste header (desktop) klopt. */
main[id], section[id], article[id] { scroll-margin-top: calc(var(--kophoogte, 8rem) + 1.5rem); }

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

/* ------------------------------------------------------------------ */
/* Juridische pagina's: privacybeleid, cookiebeleid, voorwaarden en    */
/* wettelijke vermeldingen. De inhoud is gewone semantische HTML; de   */
/* opmaak zit hier.                                                     */
/* ------------------------------------------------------------------ */

/* Twee kolommen vanaf 1024 px: links de inhoudsopgave, die meeloopt,
   rechts de tekst op leesbreedte. Daaronder staat de inhoudsopgave boven
   de tekst. */
.juridisch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
/* Zonder min-width: 0 duwt een brede tabel de kolom breder dan het scherm,
   ook al schuift de tabel zelf horizontaal. */
.juridisch > *, .juridisch__zij > * { min-width: 0; }
/* Onder 1024 px valt de zijkolom weg: inhoudsopgave boven de tekst, de
   andere juridische pagina's eronder. */
@media (max-width: 1023.98px) {
    .juridisch__zij { display: contents; }
    .juridisch .juridisch__andere { order: 2; margin-top: 0; padding: 1.5rem 0 0; border-top: 1px solid #E8E3DC; }
    .legal { order: 1; }
}
@media (min-width: 1024px) {
    .juridisch { grid-template-columns: 16rem minmax(0, 44rem); gap: 5rem; }
    .juridisch__zij {
        position: sticky;
        top: calc(var(--kophoogte, 8rem) + 1.5rem);
        align-self: start;
        max-height: calc(100vh - var(--kophoogte, 8rem) - 3rem);
        overflow-y: auto;
    }
}
.juridisch__datum { margin: 1.1rem 0 0; font-size: .875rem; color: #6E665F; }

.legal { color: #131313; }
.legal > section + section { margin-top: 3rem; }
.legal h2 {
    margin: 0 0 1rem;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    scroll-margin-top: calc(var(--kophoogte, 8rem) + 1.5rem);
}
/* Het artikelnummer: in de voorwaarden verwijs je ernaar ("zie artikel 4"),
   dus het staat er echt, niet als versiering. */
.legal h2 .legal__nr {
    display: block;
    margin-bottom: .35rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #A9541A;
}
.legal h3 {
    margin: 2rem 0 .6rem;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.075rem;
    color: #131313;
}
.legal p { margin: 0 0 1.1rem; line-height: 1.7; }
.legal a { color: #A9541A; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal a:hover { color: #83400F; }
.legal ul, .legal ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.legal li { margin-bottom: .55rem; line-height: 1.65; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li::marker { color: #A9541A; }

.legal dl {
    margin: 0 0 1.4rem;
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: .45rem 1.5rem;
    padding: 1.4rem 1.6rem;
    background: #fff;
    border: 1px solid #E8E3DC;
    border-radius: 1.25rem;
}
.legal dt { font-weight: 700; color: #6E665F; font-size: .9rem; }
.legal dd { margin: 0; }
/* De mail- en telefoonlink staan hier alleen op hun regel, dus ze vallen niet
   onder de uitzondering voor links midden in een zin: ze moeten zelf 24 px
   hoog zijn om aantikbaar te blijven. */
.legal dd a { display: inline-block; padding-block: .15rem; }
@media (max-width: 560px) {
    .legal dl { grid-template-columns: 1fr; gap: .1rem 0; padding: 1.2rem 1.25rem; }
    .legal dd { margin-bottom: .8rem; }
}

.legal .table-wrap { overflow-x: auto; margin: 0 0 1.4rem; border: 1px solid #E8E3DC; border-radius: 1.25rem; background: #fff; }
.legal table { width: 100%; border-collapse: collapse; min-width: 34rem; font-size: .9rem; }
.legal th, .legal td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid #E8E3DC; }
.legal thead th {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: #6E665F; background: #F7F5F2;
}
.legal tbody tr:last-child th, .legal tbody tr:last-child td { border-bottom: 0; }

.legal strong { font-weight: 700; }
.legal code {
    font-size: .85em; padding: .1em .35em;
    background: #fff; border: 1px solid #E8E3DC; border-radius: .4rem;
    overflow-wrap: anywhere;
}

/* Een kader voor wat de bezoeker moet weten vóór de rest: "deze site zet
   geen cookies". Koperen lijn links, geen schaduw. */
.legal .legal__kern {
    margin: 0 0 2.5rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid #E8E3DC;
    border-left: 4px solid #A9541A;
    border-radius: 0 1.25rem 1.25rem 0;
}
.legal .legal__kern p:last-child, .legal .legal__kern ul:last-child { margin-bottom: 0; }

/* Het herroepingsformulier: een los af te drukken blok. */
.legal .legal__formulier {
    margin: 0 0 1.4rem;
    padding: 1.4rem 1.6rem;
    background: #fff;
    border: 1px dashed #C9C1B8;
    border-radius: 1.25rem;
}

/* Inhoudsopgave in de zijkolom. */
.legal-toc { background: #fff; border: 1px solid #E8E3DC; border-radius: 1.5rem; padding: 1.25rem 1.5rem; }
/* Een <details>: op telefoon dicht, zodat de tekst niet onder twintig
   links verdwijnt; vanaf 1024 px zet main.js hem open. */
.legal-toc-title {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 44px; margin: -.5rem 0;
    list-style: none; cursor: pointer;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .12em; color: #A9541A;
}
.legal-toc-title::-webkit-details-marker { display: none; }
.legal-toc-title::after {
    content: ""; width: .55rem; height: .55rem; margin-right: .2rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-25%);
    transition: transform .2s ease;
}
.legal-toc[open] .legal-toc-title::after { transform: rotate(-135deg) translateY(-25%); }
.legal-toc[open] .legal-toc-title { margin-bottom: .25rem; }
.legal-toc-list { list-style: none; margin: 0; padding: 0; }
.legal-toc-list a {
    display: flex; align-items: center; gap: .6rem; min-height: 44px;
    font-size: .9rem; font-weight: 600; line-height: 1.3; color: #131313;
    text-decoration: none;
}
/* Het artikelnummer, alleen bij de voorwaarden. */
.legal-toc-nr {
    flex: none; min-width: 1.4rem;
    font-size: .72rem; font-weight: 700; color: #6E665F;
    font-variant-numeric: tabular-nums;
}
.legal-toc-list a:hover, .legal-toc-list a:hover .legal-toc-nr { color: #A9541A; }

/* De andere juridische pagina's, onder de inhoudsopgave. */
.juridisch__andere { margin-top: 1.5rem; padding: 0 1.5rem; }
.juridisch__andere ul { list-style: none; margin: 0; padding: 0; }
.juridisch__andere a {
    display: flex; align-items: center; min-height: 44px;
    font-size: .875rem; color: #6E665F; text-decoration: none;
}
.juridisch__andere a:hover { color: #A9541A; }
.juridisch__andere a[aria-current="page"] { color: #131313; font-weight: 700; }

/* ------------------------------------------------------------------ */
/* Onderste balk van de footer: bedrijfsgegevens en juridische links.  */
/* ------------------------------------------------------------------ */
.footer-juridisch { list-style: none; margin: 0; padding: 0; }
.footer-juridisch button {
    font: inherit; color: inherit; background: none; border: 0; padding: 0;
    cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Toestemming (js/toestemming.js). De banner verschijnt bij het eerste */
/* bezoek, tot de bezoeker een van de drie knoppen kiest.              */
/* ------------------------------------------------------------------ */
/* De banner is een compacte antraciet kaart midden in beeld. Een koekje in
   koper en chocoladebruin gluurt rechtsboven achter de kaart uit en zwaait.
   Tekst en knoppen staan gecentreerd. De laag erachter dimt de pagina
   licht maar vangt geen klikken op: de site blijft bruikbaar zonder te
   kiezen (geen cookiemuur). */
.toestemming {
    position: fixed;
    z-index: 60;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(19, 19, 19, .35);
    pointer-events: none;
    animation: laag-in .3s ease both;
}
.toestemming__houder {
    position: relative;
    width: min(26rem, 100%);
    padding-top: 7.75rem; /* ruimte voor het koekje */
}
@media (min-width: 640px) { .toestemming__houder { padding-top: 9.25rem; } }
/* Lage schermen (telefoon liggend): koekje weg, zodat de kaart past. */
@media (max-height: 34rem) {
    .toestemming__houder { padding-top: 0; }
    .toestemming__koekje { display: none; }
}
@keyframes laag-in { from { opacity: 0; } }
.toestemming__koekje {
    position: absolute;
    top: 0; right: -.25rem;
    z-index: 0;
    width: 10rem; height: auto;
    transform-origin: 60% 90%;
    animation: koekje-op .6s cubic-bezier(.2, .9, .3, 1.3) .25s both,
               koekje-zwaai 1.4s ease-in-out .9s 2;
}
@media (min-width: 640px) { .toestemming__koekje { width: 12rem; right: -2.5rem; } }
.toestemming__kaart {
    position: relative;
    z-index: 1;
    padding: 2rem 1.5rem 1.25rem;
    text-align: center;
    color: rgba(255, 255, 255, .78);
    /* Een tint lichter dan de donkere secties, zodat de kaart ook op de
       hero loskomt. */
    background: #1F1C1A;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 1.5rem;
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .7);
    pointer-events: auto;
    animation: kaart-op .45s cubic-bezier(.2, .8, .2, 1) both;
}
@media (min-width: 640px) { .toestemming__kaart { padding: 2.25rem 2rem 1.5rem; } }
.toestemming__sluit {
    position: absolute;
    top: .5rem; right: .5rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    font-size: 1.75rem; line-height: 1;
    color: rgba(255, 255, 255, .6);
    background: none; border: 0; border-radius: 50%;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}
.toestemming__sluit:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.toestemming__titel {
    margin: 0 0 .5rem;
    font-weight: 800;
    font-size: clamp(1.6rem, 1.4rem + .8vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: -.025em;
    color: #fff;
}
.toestemming__tekst { margin: 0 auto 1.25rem; max-width: 20rem; font-size: .9rem; line-height: 1.6; }
.toestemming__keuzes { display: flex; justify-content: center; gap: .75rem; }
.toestemming__keuze {
    flex: 1 1 0;
    max-width: 9.5rem;
    min-height: 48px; padding: 0 1rem;
    font: inherit; font-weight: 800; font-size: 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* Even groot en allebei goed zichtbaar: weigeren is geen verstopte keuze. */
.toestemming__keuze--ja { color: #fff; background: #A9541A; border: 2px solid #A9541A; }
.toestemming__keuze--ja:hover { background: #83400F; border-color: #83400F; }
.toestemming__keuze--nee { color: #fff; background: transparent; border: 2px solid rgba(255, 255, 255, .85); }
.toestemming__keuze--nee:hover { color: #131313; background: #fff; border-color: #fff; }
.toestemming__links { margin: 1rem 0 0; font-size: .8rem; color: rgba(255, 255, 255, .5); }
.toestemming__kaart a,
.toestemming__kaart .toestemming__link {
    color: rgba(255, 255, 255, .75);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.toestemming__kaart a:hover,
.toestemming__kaart .toestemming__link:hover { color: #fff; }
.toestemming__kaart :focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@keyframes kaart-op { from { opacity: 0; transform: translateY(1.5rem); } }
@keyframes koekje-op { from { opacity: 0; transform: translateY(3rem) rotate(-8deg); } }
@keyframes koekje-zwaai {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(6deg); }
    75% { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
    .toestemming, .toestemming__kaart, .toestemming__koekje { animation: none; }
}

/* Links in de instellingen-dialoog. */
.toestemming-dialoog a,
.toestemming__link {
    color: #131313;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.toestemming-dialoog a:hover,
.toestemming__link:hover { color: #A9541A; }
.toestemming__link { padding: 0; font: inherit; background: none; border: 0; cursor: pointer; }

/* Omlijnde pillknoppen in de dialoog en op het cookiebeleid. */
.toestemming__knoppen { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.toestemming__knop {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 1.4rem;
    font: inherit; font-weight: 600; font-size: .9rem; white-space: nowrap;
    color: #131313; background: transparent;
    border: 1px solid #131313; border-radius: 999px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.toestemming__knop:hover { color: #fff; background: #131313; }
.toestemming-dialoog :focus-visible { outline: 3px solid #A9541A; outline-offset: 3px; }

/* Instellingen: dezelfde crème, rubrieken gescheiden door fijne lijnen. */
.toestemming-dialoog {
    /* Tailwind zet alle marges op 0; auto centreert de dialoog weer. */
    margin: auto;
    width: min(38rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 0;
    color: #131313;
    background: #F7F5F2;
    border: 0;
    border-radius: 1.5rem;
    overflow-y: auto;
}
.toestemming-dialoog::backdrop { background: rgba(19, 19, 19, .6); }
.toestemming-dialoog__form { padding: 1.5rem 1.25rem; }
@media (min-width: 640px) { .toestemming-dialoog__form { padding: 2rem 2.25rem; } }
.toestemming-dialoog__kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.toestemming-dialoog__kop h2 { margin: 0; font-weight: 800; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.8rem); letter-spacing: -.02em; }
.toestemming-dialoog__sluit {
    display: inline-flex; align-items: center; gap: .35rem;
    min-height: 44px; padding: 0 .25rem;
    font: inherit; font-weight: 600; font-size: .95rem; color: #131313;
    background: none; border: 0; cursor: pointer;
}
.toestemming-dialoog__sluit span { font-size: 1.25rem; line-height: 1; }
.toestemming-dialoog__sluit:hover { color: #A9541A; }
.toestemming-dialoog__intro { margin: .75rem 0 1.5rem; font-size: .9rem; line-height: 1.65; color: rgba(19, 19, 19, .78); }
.toestemming-dialoog__cats { border-bottom: 1px solid #DDD5CA; }
.toestemming-cat { padding: 1.25rem 0; border-top: 1px solid #DDD5CA; }
.toestemming-cat__titel { margin: 0; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.toestemming-cat__status { margin: .2rem 0 .35rem; font-size: .8rem; font-weight: 700; color: #6E665F; }
.toestemming-cat__kop { display: flex; align-items: center; gap: .75rem; min-height: 44px; }
.toestemming-cat__kop input { width: 1.3rem; height: 1.3rem; flex: none; accent-color: #A9541A; cursor: pointer; }
.toestemming-cat__kop label { font-weight: 800; font-size: 1.05rem; cursor: pointer; }
.toestemming-cat__uitleg { margin: 0; font-size: .875rem; line-height: 1.6; color: rgba(19, 19, 19, .75); }
.toestemming-cat__diensten { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .85rem; line-height: 1.55; }
.toestemming-dialoog__links { margin: 1.25rem 0; font-size: .875rem; }
.toestemming-dialoog__voetnoot { margin: 1.25rem 0 0; font-size: .8rem; line-height: 1.55; color: #6E665F; }

/* Het blok "Jouw keuze" op het cookiebeleid. */
[data-toestemming-overzicht] ul { list-style: none; padding: 0; }
[data-toestemming-overzicht] .toestemming__knop { margin-top: .25rem; }

/* ------------------------------------------------------------------ */
/* Twee correcties op de standaardinstellingen van Tailwind 4.         */
/* ------------------------------------------------------------------ */

/* Tailwind 4 zet knoppen op cursor:default. Voor een knop hoort een handje. */
button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; }

/* De standaard placeholderkleur (currentColor op 50%) haalt 3,4:1 op onze
   achtergrond. Het warme grijs haalt 5,2:1 en blijft duidelijk lichter dan
   de ingevulde tekst. */
::placeholder { color: #6E665F; opacity: 1; }

/* De statusmelding van het contactformulier staat tussen de akkoordverklaring
   en de verzendknop. De space-y van het formulier geeft daar te weinig lucht,
   waardoor de melding tegen beide aan geplakt zat. Deze regel zet haar eigen
   ruimte vast; een id-selector wint van de spacing-utilities. */
#contact-form-status {
    margin-block: 1.75rem;
    padding: 1.15rem 1.5rem;
    line-height: 1.55;
}

/* Hero-beeld -------------------------------------------------------------
   De hero is een donker vlak (bg-theme-dark, #131313) en het beeld een
   donkere bureauscène van 16:9. De linker 38 % van het beeld is lege muur
   en vloer in bijna dezelfde kleur (rond #0F1319), het bureau begint op
   38 % en de kast op 41 %. Omdat de tekst licht is, mag die muur gerust
   onder de tekst schuiven.

   Vanaf 1024 px hangt het beeld tegen de rechter documentrand. De breedte
   is zo berekend dat de rand van het bureau (38 %) zo'n 12 px rechts van de
   lopende tekst valt:
     breedte = (vensterbreedte - einde lopende tekst - 12px) / 0,62
   De alinea's eindigen op 32px + 26rem (tot 1280 px) of, daarboven, op de
   linkerrand van de container van 1280 px + 32px + 32rem. Vanaf 76rem breed
   (684 px hoog, net lager dan de tekstkolom) stopt het beeld met groeien.
   Verander je de breedte van de alinea's, reken deze regels dan opnieuw uit,
   en de sizes van het beeld in index.html mee. */
@media (min-width: 1024px) {
  .hero-beeld {
    --vp: calc(100vw - var(--vw-overschot));
    right: calc(50% - 50vw + var(--vw-overschot) / 2);
    width: calc((var(--vp) - 460px) / 0.62);
  }
}
@media (min-width: 1280px) {
  .hero-beeld {
    width: min(calc((var(--vp) * 0.5 + 84px) / 0.62), 76rem);
  }
}

/* De randen van het beeld vloeien weg in het donkere vlak. Twee maskers over
   elkaar: het ene laat links (en op een smal scherm ook rechts) vervagen,
   het andere boven en onder. Omdat het beeld aan de randen al bijna de kleur
   van de hero heeft, is er geen kader of afgeronde hoek nodig.
   Het clip-path: het beeld staat verticaal gecentreerd en dus meestal op
   een halve pixel. Chromium laat dan de onderste pixelrij buiten het
   masker; 2 px wegknippen aan randen die toch volledig vervaagd zijn, kost
   niets. */
.hero-visual {
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 92%, transparent 100%),
              linear-gradient(to bottom, transparent 0%, #000 10%, #000 80%, transparent 100%);
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  clip-path: inset(2px 0 2px 0);
}
@media (min-width: 1024px) {
  .hero-visual {
    mask-image: linear-gradient(to right, transparent 0%, #000 34%),
                linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
}

/* Verschijnen bij het scrollen ------------------------------------------
   Koppen, inleidingen en blokken staan verborgen tot ze in beeld komen.
   main.js zet er dan de klasse .is-in op en haalt beide klassen weer weg
   zodra de overgang klaar is, zodat hun transform niet blijft wegen op een
   hover-effect van het blok zelf.

   Verborgen staan hoort standaard in de CSS en niet via een klasse die
   JavaScript pas later toevoegt; anders zie je de tekst even staan voordat
   hij weer verdwijnt. Voor bezoekers zonder JavaScript laadt <noscript> het
   bestand geen-js.css, dat alles meteen zichtbaar maakt. */
.onthul {
  opacity: 0;
  transform: translateY(26px);
}

.onthul.is-in {
  opacity: 1;
  transform: none;
  /* Traag uitlopende curve: snel op gang, zacht tot stilstand. Dat leest
     rustiger dan een gelijkmatige overgang. */
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.onthul-na.is-in { transition-delay: 0.14s; }

@media (prefers-reduced-motion: reduce) {
  .onthul {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Reeksen en losse blokken op de rest van de pagina ----------------------
   Zelfde systeem als hierboven: .onthul voor een los element,
   .onthul-na en .onthul-na-2 voor wat erachter komt, en .onthul-reeks op een
   grid of lijst waarvan de kinderen na elkaar mogen verschijnen. */
.onthul-na-2.is-in { transition-delay: 0.28s; }

.onthul-reeks > * {
  opacity: 0;
  transform: translateY(22px);
}

.onthul-reeks.is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* De trapsgewijze vertraging alleen waar de kaarten naast elkaar staan.
   Onder 768 px staan ze onder elkaar en zou de laatste een halve seconde
   blijven wachten terwijl hij al in beeld is. */
@media (min-width: 768px) {
  .onthul-reeks.is-in > :nth-child(1) { transition-delay: 0.05s; }
  .onthul-reeks.is-in > :nth-child(2) { transition-delay: 0.14s; }
  .onthul-reeks.is-in > :nth-child(3) { transition-delay: 0.23s; }
  .onthul-reeks.is-in > :nth-child(4) { transition-delay: 0.32s; }
  .onthul-reeks.is-in > :nth-child(5) { transition-delay: 0.41s; }
  .onthul-reeks.is-in > :nth-child(6) { transition-delay: 0.50s; }
}

/* De hero staat al in beeld bij het laden, dus daar valt niets te onthullen
   bij het scrollen. Die krijgt een korte introductie via een animatie: die
   loopt vanzelf, ook zonder JavaScript, en houdt het beeld niet lang tegen. */
@keyframes intro-omhoog {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.intro {
  animation: intro-omhoog 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.intro-1 { animation-delay: 0.08s; }
.intro-2 { animation-delay: 0.18s; }
.intro-3 { animation-delay: 0.28s; }
.intro-4 { animation-delay: 0.38s; }

@media (prefers-reduced-motion: reduce) {
  .onthul-reeks > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .intro {
    animation: none;
  }
}

/* Focusring op donkere vlakken -------------------------------------------
   Het koper haalt op de donkere footer maar 3,1:1: net genoeg volgens de
   norm, maar in de praktijk zie je nauwelijks waar je staat. Op die vlakken
   krijgt de ring wit; dat is 18:1 en meteen duidelijk. */
footer a:focus-visible,
footer button:focus-visible,
.bg-theme-dark a:focus-visible,
.bg-theme-dark button:focus-visible,
.bg-theme-secondary a:focus-visible,
.bg-theme-secondary button:focus-visible {
  outline-color: #FFFFFF;
}

/* Offertemodule -----------------------------------------------------------
   De offerte is een lightbox in plaats van een blok op de pagina: de
   bezoeker opent hem zelf en doorloopt vijf stappen. Er wordt bewust met
   <dialog> gewerkt, want die geeft de focusval, Escape en de achtergrond
   gratis; wat hieronder staat, zet enkel de standaardopmaak van de browser
   opzij. */
.offerte {
  position: fixed;
  inset: 0;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.offerte[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

@media (min-width: 640px) {
  .offerte[open] { padding: 24px; }
}

.offerte::backdrop {
  background: rgba(19, 19, 19, 0.55);
  backdrop-filter: blur(3px);
}

.offerte__venster {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 46rem;
  max-height: 100%;
  background: #FFFFFF;
  border: 1px solid var(--color-theme-light, #E8E3DC);
  border-radius: 0;
  box-shadow: 0 40px 80px -30px rgba(19, 19, 19, 0.45);
  overflow: hidden;
  /* Op een telefoon vult de module het scherm: een half zwevend kaartje met
     afgeronde hoeken zou daar alleen ruimte weggeven. */
  height: 100%;
}

@media (min-width: 640px) {
  .offerte__venster {
    height: auto;
    border-radius: 28px;
    max-height: calc(100vh - 48px);
  }
}

/* De balk onder de kop laat zien hoe ver je bent. */
/* De titel krijgt bij elke stap de focus zodat een schermlezer hem voorleest.
   Een focusring hoort daar niet bij: er valt niets te bedienen. */
#offerte-titel:focus {
  outline: none;
}

.offerte__spoor {
  height: 3px;
  background: var(--color-theme-light, #E8E3DC);
  flex: none;
}

.offerte__voortgang {
  display: block;
  height: 100%;
  width: 20%;
  background: var(--color-theme-primary, #A9541A);
  transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Enkel het middenstuk schuift; kop, prijs en knoppen blijven staan. */
.offerte__lijf {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.offerte__voet { flex: none; }

.offerte__stap {
  animation: offerte-stap 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes offerte-stap {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}

.offerte__veld {
  width: 100%;
  background: var(--color-theme-base, #F7F5F2);
  border: 1px solid var(--color-theme-light, #E8E3DC);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--color-theme-dark, #131313);
  font: inherit;
  outline: none;
}

.offerte__veld:focus {
  border-color: var(--color-theme-secondary, #6E665F);
}

.offerte__fout {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(169, 84, 26, 0.10);
  border: 1px solid rgba(169, 84, 26, 0.40);
  color: var(--color-theme-deep, #A9541A);
  font-size: 0.85rem;
  font-weight: 700;
}

/* Aantal of gemeente, net onder de aangevinkte kaart. Ingesprongen tot
   onder de tekst van de kaart, zodat duidelijk is waar het bij hoort. */
.offerte__aantal {
  margin: -0.25rem 0 0.25rem;
  padding: 0.85rem 1rem 0.9rem 3.1rem;
  border-radius: 0 0 16px 16px;
  background: rgba(169, 84, 26, 0.06);
}

.offerte__aantal label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-heading, inherit);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-theme-dark, #131313);
}

.offerte__aantal-veld {
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #FFFFFF;
}

.offerte__aantal-hulp {
  margin: 0.45rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-theme-secondary, #6E665F);
}

@media (max-width: 400px) {
  .offerte__aantal { padding-left: 1rem; }
}

/* De opbouw onder het totaal in de prijsbalk: "€ 440 eenmalig · € 79,95 per
   maand". Klein en rustig, het totaal erboven is het getal dat telt. */
.offerte__opbouw {
  margin: 0.1rem 0 0.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-theme-dark, #131313);
}

/* Het overzicht in de laatste stap leest als een kassabon: per blok de
   regels, een subtotaal, en onderaan één totaal. Geen tabel met lijnen
   onder elke rij; alleen het subtotaal en het totaal krijgen een lijn,
   omdat daar opgeteld wordt. */
.bon {
  border: 1px solid var(--color-theme-light, #E8E3DC);
  border-radius: 16px;
  background: rgba(247, 245, 242, 0.7);
  overflow: hidden;
}

.bon__blok {
  padding: 0.9rem 1rem 0.4rem;
}

.bon__blok + .bon__blok {
  border-top: 1px solid var(--color-theme-light, #E8E3DC);
}

.bon__kop {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-theme-secondary, #6E665F);
}

.bon__regel {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
}

.bon__omschrijving { min-width: 0; }

.bon__dienst {
  display: block;
  font-size: 0.72rem;
  color: var(--color-theme-secondary, #6E665F);
}

.bon__naam {
  display: block;
  font-family: var(--font-heading, inherit);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-theme-dark, #131313);
}

.bon__bedrag {
  flex: none;
  text-align: right;
  font-family: var(--font-heading, inherit);
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-theme-dark, #131313);
}

.bon__regel--sub {
  margin-top: 0.3rem;
  border-top: 1px dashed rgba(110, 102, 95, 0.35);
}

.bon__regel--sub .bon__naam { font-weight: 600; color: var(--color-theme-secondary, #6E665F); }
.bon__regel--sub .bon__bedrag { color: var(--color-theme-deep, #A9541A); }

.bon__noot {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-theme-secondary, #6E665F);
}

.bon__totaal {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-theme-light, #E8E3DC);
}

.bon__totaal-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-theme-dark, #131313);
}

.bon__totaal-uitleg {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--color-theme-secondary, #6E665F);
}

.bon__totaal-bedrag {
  flex: none;
  font-family: var(--font-heading, inherit);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-theme-deep, #A9541A);
}

.bon__voet {
  margin: 0;
  padding: 0 1rem 1rem;
  background: var(--color-theme-light, #E8E3DC);
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(19, 19, 19, 0.7);
}

/* Op een smalle telefoon past een lang bedrag als "€ 11.399,40" niet
   meer naast het label. Dan komt het eronder. */
@media (max-width: 400px) {
  .bon__totaal { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
}

/* Terwijl de lightbox openstaat, mag de pagina eronder niet meescrollen. */
.offerte-open,
.offerte-open body {
  overflow: hidden;
}

.offerte[open] .offerte__venster {
  animation: offerte-open 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes offerte-open {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .offerte__stap,
  .offerte[open] .offerte__venster {
    animation: none;
  }

  .offerte__voortgang {
    transition: none;
  }
}


/* Diensten: de kaartenslider ----------------------------------------------
   De vier diensten staan naast elkaar in één schuifspoor: even grote kaarten,
   één tegelijk in beeld, links de tekst en vanaf het midden de foto.

   De kaart heeft zelf geen vlak: geen vulling, geen rand, geen schaduw. Wat
   je ziet is de foto die vanaf het midden in de achtergrond van de sectie
   wegvalt, met de tekst ernaast. Daardoor is er ook niets om bij hover op te
   tillen, en staat er niets meer tussen de kaarten in dat verspringt
   terwijl je doorschuift.

   De opmaak staat hier en niet in Tailwind-klassen, omdat elke kaart dezelfde
   opbouw heeft: beeldzone, icoon met titel, intro, punten, voorwaarden.

   Prijzen staan bewust niet op de kaarten: die komen pas aan bod in de
   offertemodule. De kaart zegt enkel wat de dienst inhoudt. */

.diensten {
  /* Nauwelijks zichtbare warme gloed rechtsboven, waar de eerste donkere
     kaart begint. Geen patroon en geen illustratie: het haalt alleen de
     vlakke off-white achtergrond van de sectie een tint op. */
  background: radial-gradient(circle at 78% 16%, rgba(169, 84, 26, 0.055), rgba(169, 84, 26, 0) 34%);
}

/* De boog rechtsboven. Staat achter alles, vangt geen muis en is zo licht
   dat hij op een slecht scherm gewoon wegvalt. Onder 1024 px is er geen
   leegte om op te vangen, dus dan staat hij er niet. */
.diensten__boog { display: none; }

@media (min-width: 1024px) {
  .diensten__boog {
    display: block;
    position: absolute;
    top: 2rem;
    right: 0;
    width: min(46rem, 55%);
    height: 26rem;
    color: rgba(169, 84, 26, 0.28);
    pointer-events: none;
    z-index: 0;
  }
}

/* Sectiekop --------------------------------------------------------------- */

.diensten__kop { margin-bottom: 3rem; }

@media (min-width: 1024px) {
  .diensten__kop { margin-bottom: 3.5rem; }
}

.diensten__label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #6E665F;
}

.diensten__streep {
  display: block;
  flex: none;
  width: 2.25rem;
  height: 1px;
  background: #C9C1B8;
}

/* Titel en belofte staan allebei op één regel. Dat kan alleen als de
   lettergrootte met het venster meegroeit: de titel is bijna achttien em
   breed, de belofte ruim veertig. Vanaf 1280 px lopen ze tegen hun plafond
   aan en daaronder krimpen ze mee met de sectie.

   Op een telefoon houdt dat op. Eén regel zou daar een kop van zeventien
   pixels betekenen, kleiner dan de lopende tekst eronder. Daar breken ze dus
   wel af; de kop blijft een kop. */
.diensten__titel {
  margin: 1.5rem 0 0;
  font-weight: 800;
  font-size: clamp(2rem, 7.6vw, 2.75rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: #131313;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .diensten__titel {
    white-space: nowrap;
    font-size: clamp(1.8rem, 4.35vw, 3.5rem);
    line-height: 1.0;
  }
}

.diensten__belofte {
  margin: 1.25rem 0 0;
  max-width: 34rem;
  color: rgba(19, 19, 19, 0.72);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .diensten__belofte {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(0.95rem, 2.05vw, 1.25rem);
  }
}

/* De kaart ---------------------------------------------------------------- */

.dienst {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  /* De beeldzone hieronder springt pas naar rechts als de kaart zelf breed
     genoeg is. Dat hangt niet aan de vensterbreedte maar aan de kaart: in de
     slider is ze zo breed als de sectie, op een telefoon veel smaller. */
  container-type: inline-size;
}

@media (min-width: 1024px) {
  .dienst { border-radius: 22px; }
}

/* Beeldzone --------------------------------------------------------------
   Het beeld begint op de brede kaart precies in het midden, loopt tot de
   rechterrand en vervaagt naar links weg. Dat vervagen gebeurt met een
   masker en niet met een verloop in een kaartkleur erover: er íís geen
   kaartkleur meer, dus het beeld valt gewoon weg in de achtergrond van de
   sectie.

   Zolang er geen foto in staat, toont de zone een zacht merkvlak. Zet je er
   een <picture> of <img> in, dan dekt die het vlak af. */
/* Op een smalle kaart, zoals op een telefoon, past er geen beeld naast de
   tekst. Daar staat het als een band bovenaan die naar beneden toe wegvalt in
   de kaart. Vanaf 420 px kaartbreedte springt het naar rechts; die grens ligt
   net boven de breedste telefoon. */
.dienst__beeld {
  position: relative;
  flex: none;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(169, 84, 26, 0.12), rgba(110, 102, 95, 0.10));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}

/* Met een foto erin is het merkvlak overbodig: het zou als een lichte
   rechthoek boven en onder de foto blijven staan. */
.dienst__beeld:has(img) { background: none; }

/* De foto staat altijd volledig in beeld: hij is zo breed als de zone en
   krijgt zijn eigen hoogte. Niet met object-fit: cover, want de zone naast
   de tekst is op tablet en laptop veel hoger dan breed, en dan snijdt cover
   links en rechts grote stukken weg. De foto's zelf zijn al uitgesneden tot
   op het onderwerp (zie README, "De bestanden"). */
.dienst__beeld img {
  display: block;
  width: 100%;
  height: auto;
}

/* Vanaf een kaartbreedte van 420 px is er ruimte voor beeld naast de tekst.
   Daaronder, zoals op een telefoon, zou de tekstkolom te smal worden en
   staat er dus geen beeld.

   Hoeveel beeld en hoeveel tekst hangt af van de kaart zelf, niet van het
   venster. Dat scheelt in de slider: de kaart is daar zo breed als de
   sectie, dus loopt de verhouding netjes op van een smalle strook op een
   kleine tablet naar half om half op een breed scherm. */
@container (min-width: 420px) {
  .dienst__beeld {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40%;
    height: auto;
    /* De fade begint op de rand van de zone zelf, niet een kwart verderop:
       vanaf daar is de foto dus al zichtbaar. De tekstkolom hieronder loopt
       precies tot diezelfde rand, waar het masker nog op nul staat, zodat er
       nooit een foto achter een woord komt. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%);
    mask-image: linear-gradient(to right, transparent 0%, #000 45%);
  }

  /* Rechts tegen de rand en verticaal in het midden. Is de zone hoger dan de
     foto, dan vervagen boven- en onderrand zodat er geen harde lijn in de
     sectie komt. Is ze lager, dan krimpt de foto mee in plaats van boven en
     onder weg te vallen: met breedte en hoogte op `auto` en allebei een
     maximum van 100 % past de browser hem binnen de zone en houdt hij zijn
     verhouding. Zo blijft elke foto volledig zichtbaar, ook een hogere dan
     de kaart zelf. */
  .dienst__beeld img {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }

  .dienst__inhoud { max-width: 60%; padding: 1.6rem; }
  .dienst__punten { font-size: 0.8125rem; }
}

@container (min-width: 560px) {
  .dienst__beeld { width: 44%; }
  .dienst__inhoud { max-width: 56%; padding: 2rem; }
  .dienst__punten { font-size: 0.875rem; }
}

@container (min-width: 720px) {
  .dienst__beeld { width: 47%; }
  .dienst__inhoud { max-width: 53%; padding: 2.5rem; }
}

/* Op de breedste kaart is het half om half: links de tekst, rechts de foto,
   en de scheiding ligt precies in het midden. */
@container (min-width: 900px) {
  .dienst__beeld { width: 50%; }
  .dienst__inhoud { max-width: 50%; padding: 3rem 3.25rem 3rem 0.25rem; }
}

/* Inhoud ------------------------------------------------------------------ */

.dienst__inhoud {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.75rem;
}



/* Icoon en titel horen bij elkaar. Op een smalle kaart staan ze naast
   elkaar - dat scheelt hoogte waar het het krapst is - en pas op de brede
   kaart komt de titel onder het icoon te staan. */
.dienst__kop {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.dienst__kop .dienst__titel { margin: 0; }

@container (min-width: 900px) {
  .dienst__kop { display: block; }
  .dienst__kop .dienst__titel { margin-top: 2rem; }
}

/* Iconen: overal hetzelfde vierkant met zachte hoeken, dezelfde lijndikte en
   dezelfde koperen tint. De iconen zelf verschillen; hun presentatie niet. */
.dienst__icoon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  border: 1px solid rgba(169, 84, 26, 0.22);
  background: rgba(169, 84, 26, 0.09);
  color: #A9541A;
}

.dienst__icoon svg { width: 26px; height: 26px; }

@media (min-width: 1024px) {
  .dienst__icoon { width: 64px; height: 64px; border-radius: 18px; }
  .dienst__icoon svg { width: 28px; height: 28px; }
}

.dienst__titel {
  margin: 0;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #131313;
  text-wrap: balance;
}

.dienst__intro {
  margin: 0.75rem 0 0;
  max-width: 42ch;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(19, 19, 19, 0.72);
}

/* De punten: een vinkje, waar het over gaat, en rechts wat het kost. Geen
   lijn tussen de regels; het vinkje geeft al genoeg houvast. */
/* Het bedrag staat rechts uitgelijnd. Zonder maximum zou het op de brede
   kaart een halve kolom van zijn omschrijving af komen te staan; zo blijven
   ze bij elkaar horen. */
.dienst__punten {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  font-size: 0.875rem;
}

.dienst__punten li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.dienst__vink {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  border: 1px solid rgba(169, 84, 26, 0.45);
  color: #A9541A;
}

.dienst__vink svg { width: 0.7rem; height: 0.7rem; }

.dienst__punt {
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(19, 19, 19, 0.78);
  line-height: 1.45;
}

/* De typografie schaalt mee met de kaart. Deze regels staan bewust ná de
   basiswaarden hierboven: een @container voegt geen specificiteit toe, dus
   wint anders gewoon de laatste regel in het bestand. */
@container (min-width: 720px) {
  .dienst__titel { font-size: 1.75rem; }
  .dienst__intro { margin-top: 0.9rem; font-size: 1rem; }
}

/* Op de breedste kaart is de titel de kop van een halve sectie en niet die
   van een tegel in een raster. Hij mag dus groeien. */
@container (min-width: 900px) {
  .dienst__titel { font-size: 2.125rem; letter-spacing: -0.03em; }
  .dienst__intro { margin-top: 1.1rem; font-size: 1.0625rem; line-height: 1.7; }
  .dienst__punten { margin-top: 2rem; gap: 1rem; font-size: 0.9375rem; }
}

/* De regels die geen dienst zijn maar een voorwaarde: looptijd, startdatum,
   domeinnaam. Die horen niet in de lijst met vinkjes, want je koopt ze niet
   apart. */
.dienst__voorwaarden {
  margin: 1.4rem 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #6E665F;
}

.dienst__voorwaarden--accent { color: #A9541A; }

/* De ronde pijl in de knop onder de sectie. Die knop is nu de enige plek
   waar hij nog staat: op de kaarten zelf staat geen knop meer. */
.dienst__pijl {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
  transition: background-color 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              color 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dienst__pijl svg { width: 1rem; height: 1rem; }

/* De slider ---------------------------------------------------------------
   Zonder JavaScript staan de vier kaarten gewoon onder elkaar; de sectie is
   dan volledig leesbaar. main.js zet er de klasse is-slider op en pas dan
   wordt het een schuifspoor.

   Het schuiven zelf doet de browser met scroll-snap, niet het script. Dat
   scheelt niet alleen code: vegen op een telefoon, de schuifbalk en de
   pijltjestoetsen werken zo vanzelf mee en de beweging voelt zoals de
   bezoeker ze overal kent. Het script bepaalt alleen waarheen. */

.diensten-slider__spoor {
  display: grid;
  gap: 1.25rem;
}

.diensten-slider.is-slider .diensten-slider__spoor {
  display: flex;
  gap: 1.5rem;
  /* De kaarten hebben een schaduw en komen bij hover drie pixels omhoog. Een
     schuifvenster snijdt dat af, dus krijgt het spoor ruimte binnenin; de
     negatieve marge zet de rand van de kaart weer gelijk met de rest van de
     sectie. */
  margin: -0.875rem;
  padding: 0.875rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0.875rem;
  overscroll-behavior-x: contain;
  /* De stippen zeggen al waar je bent; een schuifbalk erbij is ruis. Met
     muis, veeg en toetsenbord blijft het spoor gewoon bereikbaar. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.diensten-slider.is-slider .diensten-slider__spoor::-webkit-scrollbar { display: none; }

/* Elke kaart is precies zo breed als het venster van de slider, en doordat
   ze naast elkaar in een flexrij staan zijn ze ook allemaal even hoog: de
   hoogste bepaalt. */
.diensten-slider.is-slider .dienst {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* Bediening --------------------------------------------------------------- */

/* De bediening staat gecentreerd onder de kaart: pijl, stippen, pijl. */
.diensten-slider__bediening {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.diensten-slider__stippen {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Zes stippen en twee knoppen van 44 px passen niet naast elkaar op een
   telefoon. Kleiner maken mag niet: dan haalt een duim ze niet meer. Dus
   krijgen de stippen daar een regel voor zich en zakken de pijlen eronder,
   allebei in het midden. */
@media (max-width: 539px) {
  .diensten-slider__bediening {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
  }

  .diensten-slider__stippen {
    flex: 1 0 100%;
    order: -1;
  }
}

/* De knop is 44 px in het vierkant zodat een duim hem raakt; wat je ziet is
   het streepje binnenin. */
.diensten-slider__stip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.diensten-slider__stip > span {
  position: relative;
  display: block;
  overflow: hidden;
  width: 0.5rem;
  height: 0.375rem;
  border-radius: 9999px;
  /* Deze stip is de knop; er staat geen tekst of icoon in die haar ook zou
     kunnen aanwijzen. Ze moet dus zelf 3:1 halen tegen de sectie. */
  background: #8C847B;
  transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              background-color 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* De actieve stip wordt een balkje dat zich in vijf tellen vult. Zo zie je
   niet alleen wélke kaart in beeld staat, maar ook hoelang ze nog blijft. */
.diensten-slider__stip[aria-current="true"] > span {
  width: 2.5rem;
  background: rgba(169, 84, 26, 0.25);
}

.diensten-slider__stip[aria-current="true"] > span::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #A9541A;
  transform: scaleX(0);
  transform-origin: left center;
  animation: dienst-voortgang var(--dienst-duur, 5000ms) linear forwards;
}

/* Staat de automaat stil, dan bevriest het balkje waar het was. */
.diensten-slider[data-loopt="nee"] .diensten-slider__stip[aria-current="true"] > span::after {
  animation-play-state: paused;
}

@keyframes dienst-voortgang {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* .portfolio__pijl (bladeren bij Realisaties) deelt deze knop: zelfde maat,
   zelfde rand, zelfde koper bij hover. Twee soorten pijlknoppen op één
   pagina zou lezen als twee ontwerpers. */
.diensten-slider__knop,
.portfolio__pijl {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #8C847B;
  background: #FFFDFB;
  color: #131313;
  cursor: pointer;
  transition: background-color 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              color 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.diensten-slider__knop svg,
.portfolio__pijl svg { width: 1rem; height: 1rem; }

@media (hover: hover) and (pointer: fine) {
  .diensten-slider__stip:hover > span { background: #A9541A; }
  .diensten-slider__stip[aria-current="true"]:hover > span { background: rgba(169, 84, 26, 0.25); }

  .diensten-slider__knop:hover,
  .portfolio__pijl:not([aria-disabled="true"]):hover {
    background: #A9541A;
    border-color: #A9541A;
    color: #FFFFFF;
  }
}

/* Afsluiter ---------------------------------------------------------------
   Een streep, een vraag en een knop. Geen tweede sectie: het is de overgang
   naar de realisaties eronder. */
.diensten__afsluiter {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(19, 19, 19, 0.1);
}

@media (min-width: 640px) {
  .diensten__afsluiter {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .diensten__afsluiter { margin-top: 4.5rem; }
}

.diensten__quote {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 3px solid #A9541A;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: #131313;
}

.diensten__quote span {
  display: block;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: rgba(19, 19, 19, 0.72);
}

.diensten__quote a {
  color: #A9541A;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.diensten__quote a:hover { color: #83400F; }

.diensten__knop {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.9rem;
  min-height: 56px;
  padding: 0 0.5rem 0 1.75rem;
  border-radius: 9999px;
  background: #A9541A;
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  transition: background-color 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.diensten__knop:hover { background: #83400F; }

@media (hover: hover) and (pointer: fine) {
  .diensten__knop:hover .dienst__pijl {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #A9541A;
    transform: translateX(3px);
  }
}

.diensten__knop:focus-visible .dienst__pijl { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .dienst__pijl,
  .diensten__knop,
  .diensten-slider__knop,
  .diensten-slider__stip > span { transition: none; }

  /* Het balkje in de stip telt niet af: er schuift hier niets vanzelf door.
     Het blijft wel vol, want het is ook de markering van de kaart die in
     beeld staat. */
  .diensten-slider__stip[aria-current="true"] > span::after {
    animation: none;
    transform: scaleX(1);
  }

  .diensten__knop:hover .dienst__pijl,
  .diensten__knop:focus-visible .dienst__pijl { transform: none; }
}

/* Realisaties -------------------------------------------------------------
   Een portfolio, geen kaartensectie. Het beeld is het vlak: er staat geen
   witte kaart omheen, geen schaduw en geen rand. Wat eronder komt is de titel,
   meer niet. De structuur komt van twee dingen: de filterbalk met de teller,
   en de haarlijn eronder.

   Waarom hier en niet in Tailwind-klassen: elk project heeft dezelfde opbouw
   (beeldvlak, tag, titel) en het 3D-blok is een variant daarvan. Dat
   leest hier als een systeem in plaats van als vier rijen klassen in de HTML.

   De sectie houdt de containerlogica van de diensten aan (max-w-7xl met
   px-6 lg:px-8) in plaats van een eigen breedte. Anders lopen de linkerranden
   van de twee secties niet meer gelijk, en dat zie je meteen als je van de
   ene naar de andere scrolt. */

.realisaties {
  /* Meer lucht dan de vorige versie, en onderaan iets meer dan bovenaan: de
     donkere footer komt erna en heeft afstand nodig. */
  padding-block: clamp(4rem, 9vw, 5.5rem) clamp(4.5rem, 10vw, 6.5rem);
  /* Nauwelijks zichtbare warme aanzet naar rechts. Loopt naar doorzichtig en
     niet naar een vlakke kleur: de zachte kleurvlakken van de pagina moeten
     er nog doorheen kunnen. De bovenste laag laat die aanzet bovenaan
     zacht beginnen: de sectie erboven (Diensten) heeft geen eigen vlak of
     rand, dus een tint die hard start zou daar als lijn zichtbaar zijn. */
  background:
    linear-gradient(to bottom, #F7F5F2 0, rgba(247, 245, 242, 0) 10rem),
    linear-gradient(100deg, rgba(169, 84, 26, 0) 58%, rgba(169, 84, 26, 0.055) 100%);
}

/* Sectiekop --------------------------------------------------------------- */

/* Links uitgelijnd. Op een telefoon staat er een maximum op, zodat de regels
   niet van rand tot rand lopen; vanaf 768 px valt dat weg, want daar past de
   ondertitel op een regel en zou een maximum hem juist afbreken. */
.realisaties__kop {
  max-width: 38rem;
  margin-bottom: 2.75rem;
}

@media (min-width: 768px) {
  .realisaties__kop { max-width: none; }
}

.realisaties__label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #6E665F;
}

.realisaties__streep {
  display: block;
  flex: none;
  width: 2.25rem;
  height: 1px;
  background: #C9C1B8;
}

.realisaties__titel {
  margin: 1.5rem 0 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #131313;
}

/* De ondertitel hoort op een regel te staan. Dat lukt vanaf 768 px: daar is
   de container 720 px en de zin ruim 640 px. Er staat bewust geen nowrap op.
   Valt het lettertype terug op system-ui of zet iemand zijn browsertekst
   groter, dan breekt de zin gewoon netjes af in plaats van de pagina breder
   te maken dan het venster. */
.realisaties__intro {
  margin: 1.1rem 0 0;
  max-width: 32rem;
  color: rgba(19, 19, 19, 0.72);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .realisaties__intro { max-width: none; }
}

/* Filterbalk -------------------------------------------------------------- */

.portfolio__balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1rem;
}

/* Zonder JavaScript blijft de balk weg. De preflight van Tailwind zet
   [hidden] al op display:none met !important, dus dit is een vangnet voor het
   geval die build ooit wegvalt: display:flex hierboven zou het attribuut
   anders gewoon overrulen. */
.portfolio__balk[hidden] { display: none; }

.portfolio__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Het pilletje is 36 px hoog; het aanraakvlak eromheen 44. Dat vlak zit in
   een pseudo-element, zodat de knoppen visueel compact blijven maar een duim
   ze nog altijd raakt. */
.portfolio__filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-inline: 16px;
  border: 1px solid rgba(19, 19, 19, 0.14);
  border-radius: 9999px;
  background: transparent;
  color: rgba(19, 19, 19, 0.78);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease;
}

.portfolio__filter::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

@media (hover: hover) and (pointer: fine) {
  .portfolio__filter:hover {
    border-color: rgba(19, 19, 19, 0.28);
    background: rgba(19, 19, 19, 0.035);
    color: #131313;
  }
}

.portfolio__filter[aria-pressed="true"] {
  background: #A9541A;
  border-color: #A9541A;
  color: #FFFFFF;
}

@media (hover: hover) and (pointer: fine) {
  .portfolio__filter[aria-pressed="true"]:hover {
    background: #83400F;
    border-color: #83400F;
    color: #FFFFFF;
  }
}

.portfolio__teller {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(19, 19, 19, 0.45);
}

/* De haarlijn met het koperen bolletje in het midden: dezelfde streep die in
   het logo onder JVN KOMPAS loopt. Het is het enige sierdetail in deze
   sectie, en het komt uit het merk zelf. */
.portfolio__lijn {
  position: relative;
  height: 1px;
  background: rgba(19, 19, 19, 0.10);
  margin-bottom: 2.625rem;
}

.portfolio__lijn::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #A9541A;
}

/* De grid ----------------------------------------------------------------- */

/* De tegels zijn thumbnails, geen vitrines: twee naast elkaar op een
   telefoon, drie vanaf 768 px en vier vanaf 1024 px. Op 768 bewust geen vier;
   dan wordt een tegel zo'n 160 px en zijn tag en logo niet meer te lezen. */
.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1rem;
}

/* Filteren en bladeren (initPortfolio in main.js), in drie stappen:
   1. is-wisselend: alles onder de filterbalk vervaagt, ook het 3D-blok en
      het bladeren, want die staan buiten de grid;
   2. de sectie glijdt naar haar nieuwe hoogte (inline height in het script),
      zodat wat eronder staat meeschuift in plaats van te verspringen;
   3. is-binnenkomend: de zichtbare tegels komen na elkaar binnen, 45 ms
      ertussen (--i zet het script).
   Groeit de sectie, dan knipt is-groeiend af wat al groter is dan de hoogte
   op dat moment; anders schuift de inhoud even over de volgende sectie. De
   marge laat de focusrand en het aanraakvlak van de filters heel. */
.portfolio > .portfolio__grid,
.portfolio > .portfolio__bladeren,
.portfolio > .teaser3d { transition: opacity 180ms ease; }

.portfolio.is-wisselend > .portfolio__grid,
.portfolio.is-wisselend > .portfolio__bladeren,
.portfolio.is-wisselend > .teaser3d { opacity: 0; }

.portfolio.is-groeiend {
  overflow: clip;
  overflow-clip-margin: 1rem;
}

.portfolio.is-binnenkomend .portfolio__grid > .werk:not([hidden]),
.portfolio.is-binnenkomend > .teaser3d:not([hidden]) {
  animation: werk-binnen 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes werk-binnen {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 768px) {
  .portfolio__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.25rem 1.75rem;
  }
}

@media (min-width: 1024px) {
  .portfolio__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Een breed item loopt over alle kolommen. Zo hoeft er niets aan de grid te
   veranderen als er later een vierde of vijfde project bijkomt. */
.werk--breed { grid-column: 1 / -1; }

/* Bladeren ----------------------------------------------------------------
   Twaalf projecten per set, op elk toestel. Onder de grid: vorige, de set
   waarin je zit, volgende. Aan het begin en het eind is een pijl niet
   uitgeschakeld maar aria-disabled: een echt uitgeschakelde knop verliest de
   focus, en dan staat wie met het toetsenbord bladert plots nergens meer. */
.portfolio__bladeren {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.portfolio__bladeren[hidden] { display: none; }

.portfolio__set {
  min-width: 4.5rem;
  text-align: center;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: #131313;
}

.portfolio__pijl[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

/* Voorleestekst naast het zichtbare "1 / 2": een schermlezer zegt dan
   "Set 1 van 2" in plaats van "1 schuine streep 2". */
.portfolio__voorlezen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Na het bladeren schuift de pagina terug naar het begin van de filterbalk,
   onder de vaste header uit. */
.portfolio { scroll-margin-top: calc(var(--kophoogte, 8rem) + 1.5rem); }

/* Het 3D-blok staat buiten de grid en krijgt daarom zelf zijn afstand. */
.portfolio > .teaser3d { margin-top: 2.25rem; }

.portfolio__leeg {
  grid-column: 1 / -1;
  padding-block: 1.5rem 0.5rem;
  color: rgba(19, 19, 19, 0.6);
  line-height: 1.6;
}

/* Het project ------------------------------------------------------------- */

.werk__beeld {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Vierkant, zodat een projectfoto van 1254 × 1254 er volledig in past,
     zonder uitsnede. Alle tegels delen die maat. */
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0.875rem;
}

@media (min-width: 768px) {
  .werk__beeld { border-radius: 16px; }
}

/* Alle kaarten in deze sectie staan op hetzelfde charcoal: hetzelfde zwart
   als de footer en de donkere dienstenkaarten. Een tegel per logo apart
   inkleuren maakte van de twee projecten twee losse dingen; nu is het een
   reeks, en verschilt alleen het werk erop.

   Daarom staat het zwarte vlak niet meer in het DC ATD-bestand zelf. Dat
   zwart is uit de afbeelding gehaald (zie README), zodat het charcoal van de
   tegel eronder doorloopt en er geen vierkant in de tegel zichtbaar blijft. */
.werk__beeld { background: #131313; }

/* <picture> zelf is een inline doos zonder eigen hoogte. Zonder deze regel
   heeft de afbeelding erin niets om een max-height in procenten tegen af te
   meten en groeit ze door tot tegen de rand van de tegel. Met display:contents
   valt de wikkel weg en is de afbeelding gewoon het flexkind, net als bij een
   losse <img>. */
.werk__beeld picture { display: contents; }

/* De tag linksboven neemt in een kleine tegel een flink stuk van de bovenrand
   in. Het logo staat daarom iets onder het midden: de margin-top schuift het
   omlaag, zodat de tag nooit over het logo valt. Procenten van een marge
   rekenen tegen de breedte, en de tegel is vierkant, dus dat is ook 12 % van
   de hoogte. */
.werk__logo {
  max-width: 74%;
  max-height: 62%;
  margin-top: 12%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Vanaf 768 px is de tegel groot genoeg om het logo meer ruimte te geven
   zonder dat het tegen de tag aan komt. */
@media (min-width: 768px) {
  .werk__logo { max-height: 70%; }
}

/* Het JVN-logo is breed en laag; in een vierkante tegel bepaalt de breedte
   de maat. Het mag daarom iets breder dan de andere logo's, anders wordt de
   tagline-strip eronder onleesbaar. */
.werk__logo--breed {
  max-width: 84%;
}

/* Een foto (zoals een mockup van een website) is geen logo op charcoal: ze
   vult het hele vlak. De uitsnede gebeurt met object-fit, het midden blijft
   staan. */
.werk__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.werk__beeld::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(169, 84, 26, 0.12), rgba(169, 84, 26, 0) 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}

/* Het beeld ademt bij hover, meer niet: de tegel is geen link, dus er wordt
   ook niets beloofd wat er niet is. */
@media (hover: hover) and (pointer: fine) {
  .werk:hover .werk__logo,
  .werk:hover .werk__foto { transform: scale(1.025); }
  .werk:hover .werk__beeld::after { opacity: 1; }
}

/* Op een telefoon is een tegel zo'n 155 px breed; daar schuift de tag dichter
   naar de hoek en wordt hij compacter, zodat hij het beeld niet halveert. */
.werk__tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  border: 1px solid rgba(19, 19, 19, 0.10);
  border-radius: 9999px;
  background: #F7F5F2;
  color: #131313;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .werk__tag {
    top: 12px;
    left: 12px;
    padding: 5px 10px;
  }
}

.werk__titel {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #131313;
}

@media (min-width: 768px) {
  .werk__titel { font-size: 1rem; }
}

/* Een project dat online staat, linkt door. De link staat op de titel; zijn
   ::after legt zich over de hele tegel, zodat ook een klik op het beeld
   doorlinkt. Er is maar één link, dus een schermlezer hoort hem één keer. */
.werk--link { position: relative; }

.werk__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: inherit;
  text-decoration: none;
}

.werk__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 12px;
}

/* Het schuine pijltje zegt: dit gaat naar een andere site. */
.werk__link-pijl {
  flex: none;
  width: 0.8125rem;
  height: 0.8125rem;
  color: #A9541A;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
  .werk--link:hover .werk__link { color: #A9541A; }
  .werk--link:hover .werk__link-pijl { transform: translate(2px, -2px); }
}

/* De focusrand hoort rond wat je aanklikt: de hele tegel, niet alleen de
   titeltekst. Zelfde kleur en dikte als de algemene focusregel. */
.werk__link:focus-visible { outline: none; }

.werk__link:focus-visible::after {
  outline: 3px solid #A9541A;
  outline-offset: 4px;
}

.werk__link:focus-visible .werk__link-pijl { transform: translate(2px, -2px); }

@media (min-width: 768px) {
  .werk__link::after { border-radius: 16px; }
}

/* De 3D-aankondiging ------------------------------------------------------
   Duidelijk een ander soort blok dan een project: donker, breed, en met een
   status in plaats van een titel met meta. Het is nog geen realisatie, dus
   het hoort er ook niet uit te zien als er al iets af is. */

.teaser3d {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: clamp(1.75rem, 5vw, 2.75rem);
  background: #131313;
  color: #FFFFFF;
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 768px) {
  .teaser3d {
    border-radius: 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 2.5rem;
  }
}

/* Een technisch raster, zo licht dat het eerder een textuur is dan een
   patroon. Het staat achter alles en vangt geen muis. */
.teaser3d__raster {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(169, 84, 26, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169, 84, 26, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.teaser3d__tekst {
  position: relative;
  z-index: 1;
  max-width: 30rem;
}

.teaser3d__badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid rgba(169, 84, 26, 0.45);
  border-radius: 9999px;
  color: #E88C46;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.teaser3d__titel {
  margin: 1.25rem 0 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

.teaser3d__uitleg {
  margin: 0.9rem 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.teaser3d__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  min-height: 44px;
  padding-inline: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 280ms ease, border-color 280ms ease;
}

.teaser3d__cta svg {
  width: 1rem;
  height: 1rem;
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
  .teaser3d__cta:hover {
    background: rgba(169, 84, 26, 0.18);
    border-color: rgba(169, 84, 26, 0.6);
  }

  .teaser3d__cta:hover svg { transform: translateX(3px); }
}

.teaser3d__cta:focus-visible svg { transform: translateX(3px); }

/* De algemene focusregel bovenaan zet border-radius terug op 6 px en het
   koper op koper. Op een pil en op dit donkere vlak klopt geen van beide, dus
   halen we hier de ronding en een witte ring terug. */
.portfolio__filter:focus-visible,
.portfolio__pijl:focus-visible,
.teaser3d__cta:focus-visible { border-radius: 9999px; }

.teaser3d__cta:focus-visible { outline-color: #FFFFFF; }

/* De kubus. Bewust kleiner dan de kop ernaast: het is een sfeerbeeld en geen
   illustratie die het verhaal overneemt. */
.teaser3d__visual {
  position: relative;
  width: clamp(9rem, 34vw, 12.5rem);
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 768px) {
  .teaser3d__visual { width: clamp(10rem, 18vw, 14rem); }
}

.teaser3d__visual svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Kubus en status vormen samen de rechterkolom. Ze staan onder elkaar in
   plaats van los over elkaar: een status die absoluut in de hoek hangt, komt
   op een smal venster vroeg of laat tegen de tekening aan. */
.teaser3d__zij {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

@media (min-width: 768px) {
  .teaser3d__zij { align-items: flex-end; }
}

/* Waar het over gaat en wanneer, meer is het niet. */
.teaser3d__status {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.teaser3d__status span {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.teaser3d__status strong {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #E88C46;
}

/* Het 3D-blok is ook een kaart, dus reageert het op dezelfde manier als de
   twee projecttegels: dezelfde koperen was, en de kubus ademt net zo mee als
   een logo. Zonder dit voelde het blok als het enige dode vlak in de reeks. */
.teaser3d::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(169, 84, 26, 0.12), rgba(169, 84, 26, 0) 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .teaser3d:hover::after { opacity: 1; }
  .teaser3d:hover .teaser3d__visual { transform: scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio.is-binnenkomend .portfolio__grid > .werk,
  .portfolio.is-binnenkomend > .teaser3d { animation: none; }

  .portfolio > .portfolio__grid,
  .portfolio > .portfolio__bladeren,
  .portfolio > .teaser3d,
  .portfolio__filter,
  .portfolio__pijl,
  .werk__logo,
  .werk__foto,
  .werk__link-pijl,
  .werk__beeld::after,
  .teaser3d::after,
  .teaser3d__visual,
  .teaser3d__cta,
  .teaser3d__cta svg { transition: none; }

  .werk:hover .werk__logo,
  .werk:hover .werk__foto,
  .werk--link:hover .werk__link-pijl,
  .werk__link:focus-visible .werk__link-pijl,
  .teaser3d:hover .teaser3d__visual { transform: none; }
  .teaser3d__cta:hover svg,
  .teaser3d__cta:focus-visible svg { transform: none; }
}

/* ==========================================================================
   Lightbox voor grafisch design en 3D
   ==========================================================================
   Een tegel met data-lichtbak opent een venster met het beeld groot en de
   uitleg ernaast. Het is een echte <dialog>: de browser regelt Esc, houdt de
   focus binnen het venster en maakt de rest van de pagina onbereikbaar.

   Opbouw: op een telefoon het beeld bovenaan (vierkant) en de tekst eronder,
   vanaf 768 px naast elkaar. Het venster scrolt zelf als de tekst langer is
   dan het scherm; de pagina erachter staat zolang stil. */

/* De knop die main.js van de titel maakt, gedraagt zich als de link van een
   webproject (zie .werk__link): dezelfde laag over de tegel, dezelfde hover.
   Alleen de standaardopmaak van een knop moet eraf. */
button.werk__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

/* Een plus in plaats van een schuin pijltje: dit opent iets hier, het gaat
   niet naar een andere site. Bij hover draait hij een kwartslag. */
@media (hover: hover) and (pointer: fine) {
  .werk--link:hover .werk__link-pijl--plus { transform: rotate(90deg); }
}

.werk__link:focus-visible .werk__link-pijl--plus { transform: rotate(90deg); }

.lichtbak {
  width: min(64rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #F7F5F2;
  color: #131313;
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.5);
}

.lichtbak::backdrop {
  background: rgba(19, 19, 19, 0.72);
}

.lichtbak[open] {
  animation: lichtbak-in 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lichtbak[open]::backdrop {
  animation: lichtbak-waas 280ms ease;
}

@keyframes lichtbak-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes lichtbak-waas {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lichtbak__paneel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* Naast elkaar pas vanaf 1024 px. Op 768 wordt de tekstkolom zo smal dat het
   venster hoger is dan het scherm en het logo in een lange zwarte strook
   zweeft. */
@media (min-width: 1024px) {
  .lichtbak__paneel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Het beeld staat op hetzelfde charcoal als de tegel, zodat het venster
   leest als de tegel die openvouwt. */
.lichtbak__beeld {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: #131313;
}

/* Op een brede telefoon of tablet zou een vierkant beeld over de volle
   breedte het hele scherm vullen voor er tekst komt. Daar een lage band. */
@media (min-width: 640px) {
  .lichtbak__beeld {
    aspect-ratio: auto;
    height: 22rem;
  }
}

@media (min-width: 1024px) {
  .lichtbak__beeld {
    height: auto;
    min-height: 28rem;
  }
}

.lichtbak__beeld picture { display: contents; }

.lichtbak__beeld img {
  max-width: 76%;
  max-height: 76%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Een foto (bijvoorbeeld van een 3D-print) vult het vlak wel. */
.lichtbak__beeld img.werk__foto {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

/* De tekstkolom: uitleg bovenaan, de bladerbalk onderaan. Is de uitleg korter
   dan het beeld hoog is, dan zakt de balk toch naar de onderrand. */
.lichtbak__kolom {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lichtbak__tekst {
  flex: 1 0 auto;
  padding: 1.75rem 1.5rem 2rem;
}

/* Bladeren tussen projecten: dezelfde ronde pijlknoppen als onder de grid,
   met een haarlijn erboven. */
.lichtbak__bladeren {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 1.5rem;
  padding: 1.25rem 0 1.5rem;
  border-top: 1px solid rgba(19, 19, 19, 0.12);
}

.lichtbak__bladeren[hidden] { display: none; }

.lichtbak__teller {
  min-width: 3.5rem;
  text-align: center;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
  .lichtbak__bladeren { margin: 0 2.5rem; padding-bottom: 2rem; }
}

@media (min-width: 1024px) {
  .lichtbak__bladeren { margin: 0 2.75rem; padding-bottom: 2.25rem; }
}

/* Bij het bladeren vervagen beeld en tekst kort en komen ze terug met het
   volgende project. Het venster zelf blijft staan. */
.lichtbak__beeld,
.lichtbak__tekst {
  transition: opacity 160ms ease;
}

.lichtbak__paneel.is-wisselend .lichtbak__beeld,
.lichtbak__paneel.is-wisselend .lichtbak__tekst {
  opacity: 0;
}

@media (min-width: 640px) {
  .lichtbak__tekst { padding: 2.25rem 2.5rem 2.5rem; }
}

@media (min-width: 1024px) {
  .lichtbak__tekst { padding: 3rem 2.75rem 2.75rem; }
}

.lichtbak__label {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A9541A;
}

/* Geen marge rechts voor de sluitknop: die staat boven de titel, niet
   ernaast. Zo past "Logo voor dartsclub DC ATD" op één regel. */
.lichtbak__titel {
  margin: 0.625rem 0 0.75rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(1.5rem, 2.6vw, 1.75rem);
  text-wrap: balance;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.lichtbak__intro {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(19, 19, 19, 0.82);
}

.lichtbak__kop {
  margin: 1.625rem 0 0.375rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lichtbak__tekst p:not(.lichtbak__label):not(.lichtbak__intro) {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(19, 19, 19, 0.76);
}


/* De sluitknop is 44 px en ligt rechtsboven, boven beeld én tekst. Op een
   telefoon valt hij over het charcoal beeld, vandaar de lichte vulling. */
.lichtbak__sluit {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #8C847B;
  border-radius: 50%;
  background: #FFFDFB;
  color: #131313;
  cursor: pointer;
  transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease;
}

.lichtbak__sluit svg { width: 1.125rem; height: 1.125rem; }

.lichtbak__sluit:focus-visible { border-radius: 9999px; }

@media (hover: hover) and (pointer: fine) {
  .lichtbak__sluit:hover {
    background: #A9541A;
    border-color: #A9541A;
    color: #FFFFFF;
  }
}

/* Zolang het venster open is, scrolt de pagina erachter niet mee. main.js
   zet deze klasse en vult de breedte van de verdwenen schuifbalk aan, zodat
   de pagina niet opzij springt. */
html.lichtbak-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lichtbak[open],
  .lichtbak[open]::backdrop { animation: none; }
  .lichtbak__beeld,
  .lichtbak__tekst { transition: none; }
  .lichtbak__sluit { transition: none; }
  .werk--link:hover .werk__link-pijl--plus,
  .werk__link:focus-visible .werk__link-pijl--plus { transform: none; }
}


/* Sectiekop (Prijzen, Over mij, Contact, dienstpagina's) ---------------- */

/* Dezelfde kop als Diensten en Realisaties: label met streep, titel,
   ondertitel. Links uitgelijnd, zodat de secties en pagina's als een reeks
   lezen. De ondertitels zijn hier langer dan bij Realisaties en passen niet
   op een regel; daarom houdt de kop op elke breedte een maximum. */
.sectiekop {
  max-width: 44rem;
  margin-bottom: 3rem;
}

@media (min-width: 1024px) {
  .sectiekop { margin-bottom: 4rem; }
}

/* Op Over mij volgt het verhaal meteen onder de titel, zonder ondertitel. */
/* Staat na de mediaquery hierboven en wint dus ook vanaf 1024 px. */
.sectiekop--kort { margin-bottom: 2rem; }

/* Prijzen en de dienstpagina's: de kop mag de volle breedte nemen. Zo
   staat de ondertitel van Prijzen vanaf 1024 px op twee regels (de <br> in
   index.html breekt hem vanaf 1280 px na de btw-zin). */
@media (min-width: 1024px) {
  .sectiekop--breed { max-width: none; }
}

.sectiekop__label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #6E665F;
}

.sectiekop__streep {
  display: block;
  flex: none;
  width: 2.25rem;
  height: 1px;
  background: #C9C1B8;
}

.sectiekop__titel {
  margin: 1.5rem 0 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #131313;
}

.sectiekop__intro {
  margin: 1.1rem 0 0;
  color: rgba(19, 19, 19, 0.72);
  line-height: 1.6;
}

/* Tweede regel van de H1 op de startpagina ------------------------------- */

/* De grote regel is het merk ("op koers"), deze regel zegt wat ik doe
   en waar. Samen vormen ze de kop van de pagina, dus staan ze in dezelfde H1.
   De extra ruimte erboven houdt de onderstreping van "op koers" vrij. */
.hero__wat {
  display: block;
  margin-top: 2.75rem;
  max-width: 30rem;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  /* De hero is donker: off-white op 72 %, ruim 10:1 op #131313. */
  color: rgba(247, 245, 242, 0.72);
}

@media (max-width: 1023px) {
  .hero__wat {
    margin-inline: auto;
  }
}

/* Vanaf 1280 px vormen de ondertitel en de twee alinea's één blok met een
   rechte rechterrand over de hele tekstkolom (778 px): de alinea's zijn
   uitgevuld, de ondertitel is één regel die tot dezelfde rand loopt. Op
   1.45rem is die regel zo'n 750 px breed, dus het uitvullen verschuift de
   woorden maar een paar pixels; nowrap houdt hem altijd op één regel. Daaronder is de kolom te smal: uitvullen
   gaf daar grote gaten, dus blijft de tekst links uitgelijnd. */
@media (min-width: 1024px) {
  .hero__wat { max-width: 26rem; }
}
@media (min-width: 1280px) {
  /* De hele tekstkolom (titel, tekst, knoppen) staat 40 px links van de
     container. Op een scherm van net 1280 px is daar geen plaats voor;
     dan schuift ze net zo ver dat er links 16 px marge overblijft. */
  .hero__tekst {
    margin-left: max(-2.5rem, calc((80rem - 100vw) / 2 - 1rem));
  }
  .hero__wat {
    max-width: none;
    font-size: 1.45rem;
    white-space: nowrap;
    text-align: justify;
    text-align-last: justify;
  }
}

/* De twee alinea's onder de kop: geen los woord op de laatste regel (op
   1440 px bleef "laat." anders alleen staan). Browsers die dit niet kennen,
   breken gewoon zoals voorheen. */
#home .hero__wat,
#home p {
  text-wrap: pretty;
}

/* Link naar een dienstpagina, onderaan een dienstkaart ------------------- */
.dienst__meer {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-top: 1.25rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #A9541A;
  text-decoration: none;
}

.dienst__meer svg {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform 0.25s ease;
}

.dienst__meer:hover { text-decoration: underline; }
.dienst__meer:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .dienst__meer svg { transition: none; }
  .dienst__meer:hover svg { transform: none; }
}

/* ==========================================================================
   PRIJZEN: HET PRIJSBORD
   ==========================================================================
   Eén wit bord op de lichte pagina, met een zachte rand en schaduw: het
   springt eruit zonder het lichte thema te verlaten. Bovenaan kiest de
   bezoeker waarvoor hij komt (website, ontwerp of Digihulp); daaronder staat
   enkel die prijslijst. Zo vraagt er nooit meer dan één lijst om aandacht.

   De bedragen staan groot en in tabelcijfers, de uitleg eronder klein en
   gedempt: eerst zie je wat iets kost, dan pas wat erbij hoort. Koper is de
   enige accentkleur en komt alleen terug op labels, vinkjes en de knop.

   Zonder JavaScript blijven de tabs verborgen (hidden in de HTML) en staan
   de drie panelen onder elkaar, gescheiden door een lijn. initPrijzen in
   main.js zet .prijsbord--tabs en toont dan één paneel tegelijk. */

.prijzen {
  padding-block: clamp(4rem, 9vw, 6.5rem);
}

.prijsbord {
  /* Contrast op wit: tekst 17:1, gedempt 6,2:1, zacht 4,8:1, koper 5,9:1. */
  --bord-tekst: #131313;
  --bord-gedempt: rgba(19, 19, 19, 0.74);
  --bord-zacht: rgba(19, 19, 19, 0.62);
  --bord-lijn: rgba(19, 19, 19, 0.1);
  --bord-vlak: #F7F5F2;
  --bord-koper: #A9541A;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.25rem, 4.5vw, 3.5rem);
  border-radius: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid #E8E3DC;
  background-color: #FFFFFF;
  box-shadow: 0 30px 60px -30px rgba(19, 19, 19, 0.16);
  color: var(--bord-tekst);
}

/* Eén nauwelijks zichtbare warme vlek rechtsboven, zodat het witte bord
   niet klinisch oogt. Koper naar doorzichtig, geen verloop tussen tinten. */
.prijsbord::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  right: -20%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(169, 84, 26, 0.07), rgba(169, 84, 26, 0));
  pointer-events: none;
}

/* Keuze ------------------------------------------------------------------- */

/* De keuze moet meteen als keuze lezen. Drie dingen doen dat: een instructie
   erboven, een keuzerondje in elke kaart (hetzelfde gebaar als in de
   offertemodule) en een pijltje onder de gekozen kaart dat naar de prijzen
   wijst. Op een telefoon staan de drie kaarten als volle rijen onder elkaar:
   drie smalle knoppen naast elkaar zagen er daar uit als een menu, niet als
   een vraag. */

.prijsbord__keuze {
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.prijsbord__instructie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  margin-bottom: 1rem;
}

.prijsbord__vraag {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bord-tekst);
}

.prijsbord__tabs {
  display: grid;
  gap: 0.6rem;
}

/* Vier tabs: twee per rij op een tablet, alle vier naast elkaar vanaf
   1024px. */
@media (min-width: 768px) {
  .prijsbord__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .prijsbord__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.prijstab {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(19, 19, 19, 0.14);
  border-radius: 1rem;
  background: #FFFFFF;
  color: var(--bord-tekst);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}

@media (min-width: 768px) {
  /* Naam links, rondje rechts, op een regel. */
  .prijstab {
    min-height: 4.5rem;
    padding: 1.1rem 1.25rem;
    border-radius: 1.25rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .prijstab:hover {
    border-color: rgba(169, 84, 26, 0.55);
    box-shadow: 0 18px 36px -24px rgba(19, 19, 19, 0.35);
    transform: translateY(-2px);
  }

  .prijstab:hover .prijstab__rondje { border-color: #A9541A; }
}

.prijstab:focus-visible {
  outline: 2px solid #A9541A;
  outline-offset: 3px;
}

/* 3D-Print: zichtbaar, maar nog niet te kiezen. Gestippelde rand, geen
   wit vlak en geen beweging bij hover, zodat hij niet als knop leest. */
.prijstab--later,
.prijstab--later:hover {
  border-style: dashed;
  border-color: rgba(19, 19, 19, 0.2);
  background: transparent;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.prijstab--later .prijstab__naam { color: rgba(19, 19, 19, 0.68); }

.prijstab--later .prijstab__rondje,
.prijstab--later:hover .prijstab__rondje {
  border-color: rgba(19, 19, 19, 0.15);
  background: transparent;
}

.prijstab__later {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #8A4414;
}

.prijstab__tekst {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.prijstab__naam {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .prijstab__naam { font-size: 1.15rem; }
}

/* Het keuzerondje: leeg als de dienst niet gekozen is, gevuld met een witte
   kern als hij het wel is. */
.prijstab__rondje {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(19, 19, 19, 0.25);
  border-radius: 50%;
  background: #FFFFFF;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Gekozen: dezelfde stand als een keuze in de offertemodule. */
.prijstab[aria-selected="true"] {
  border-color: #A9541A;
  background: rgba(169, 84, 26, 0.06);
  box-shadow: inset 0 0 0 1px #A9541A;
  transform: none;
}

.prijstab[aria-selected="true"] .prijstab__rondje {
  border-color: #A9541A;
  background: #A9541A;
  box-shadow: inset 0 0 0 3px #FFFFFF;
}

/* Het pijltje onder de gekozen kaart, richting de prijzen. Enkel op een
   breed scherm: op een telefoon staat het paneel al vlak onder de laatste
   rij en zou het pijltje op de verkeerde kaart lijken te hangen. */
@media (min-width: 768px) {
  .prijstab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.55rem;
    width: 1rem;
    height: 1rem;
    border-right: 2px solid #A9541A;
    border-bottom: 2px solid #A9541A;
    background: #FAF5F1;
    transform: translateX(-50%) rotate(45deg);
  }
}

/* Panelen ----------------------------------------------------------------- */

.prijsbord:not(.prijsbord--tabs) .prijspaneel + .prijspaneel {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--bord-lijn);
}

.prijspaneel:focus-visible {
  outline: 2px solid var(--bord-koper);
  outline-offset: 6px;
  border-radius: 0.5rem;
}

.prijsbord--tabs .prijspaneel:not([hidden]) {
  animation: prijspaneel-in 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes prijspaneel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.prijspaneel__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  margin-bottom: 1.5rem;
}

.prijspaneel__titel {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--bord-tekst);
}

.prijspaneel__titel--klein {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
}

.prijsbord__groep {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bord-koper);
}

.prijsbord__groep { margin-bottom: 0.6rem; }

/* Websitepakketten -------------------------------------------------------- */

/* Ruimte bovenaan voor het label van het uitgelichte pakket, dat half boven
   de kaart uitsteekt. */
.pakketten {
  display: grid;
  gap: 1.75rem 0.75rem;
  padding-top: 0.75rem;
}

/* Drie kolommen pas vanaf 1024px: op een tablet zijn ze maar zo'n 200px breed
   en breken de opsommingen over drie regels. */
@media (min-width: 1024px) {
  .pakketten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

/* Grafisch design: twee opdrachten in dezelfde kaartopmaak, naast elkaar. */
@media (min-width: 768px) {
  .pakketten--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Voetnoot onder de kaarten: wat er precies in het bestandspakket zit. */
.pakketten__noot {
  margin: 1.1rem 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--bord-zacht);
}

/* Digihulp: drie groepen klussen, elk als kaart met de prijslijst erin.
   Op een tablet zijn drie kolommen te smal voor naam, stippellijn en prijs,
   dus daar staan ze onder elkaar. */
@media (min-width: 768px) {
  .pakketten--digi { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1024px) {
  .pakketten--digi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pakket .prijsbord__lijst { margin-top: 0.75rem; }

@media (max-width: 767px) {
  .pakket .prijsbord__lijst { grid-column: 1 / -1; }
}

.pakket {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border: 1px solid var(--bord-lijn);
  border-radius: 1.25rem;
  background: var(--bord-vlak);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pakket:not(.pakket--uitgelicht):hover {
    border-color: rgba(169, 84, 26, 0.55);
    transform: translateY(-3px);
  }
}

.pakket__naam {
  margin: 0;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--bord-tekst);
}

/* Het volgnummer: de pakketten bouwen op elkaar voort (Groei heeft alles
   uit Starter, Pro alles uit Groei). Groot en vaag achter de naam, puur
   beeld: een schermlezer slaat het over. */
.pakket__nr {
  position: absolute;
  z-index: -1;
  top: 0.1rem;
  right: clamp(0.75rem, 2vw, 1.25rem);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(5rem, 9vw, 7rem);
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(169, 84, 26, 0.12);
  pointer-events: none;
  user-select: none;
}

/* Voor wie het pakket is en wat het doet, in een of twee zinnen. */
.pakket__tekst {
  margin: 1.1rem 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--bord-gedempt);
}

/* Tussenkop in de lijst: wat gebouwd wordt, en wat elke maand doorloopt. */
.pakket__groep {
  margin: 0.25rem 0 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bord-koper);
}

.pakket__prijs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  margin: 1.25rem 0 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--bord-lijn);
}

.pakket__bedrag {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 4.2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--bord-tekst);
}

.pakket__per {
  font-size: 0.85rem;
  color: var(--bord-zacht);
}

/* Waar een ander bureau zijn opstartkost zet, staat hier dat er geen is:
   ontwerp en bouw zitten in de maandprijs. */
.pakket__opstart {
  flex-basis: 100%;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--bord-koper);
}

/* Groei: het uitgelichte pakket ------------------------------------------- */

/* Donker, met dezelfde tokens omgekeerd: alles in de kaart (tekst, lijnen,
   vinkjes) volgt vanzelf. Het koper wordt lichter, anders haalt het op
   bijna-zwart het contrast niet. */
.pakket--uitgelicht {
  --bord-tekst: #FFFFFF;
  --bord-gedempt: rgba(255, 255, 255, 0.84);
  --bord-zacht: rgba(255, 255, 255, 0.7);
  --bord-lijn: rgba(255, 255, 255, 0.14);
  --bord-koper: #E39A62;
  border-color: #131313;
  background: #131313;
  box-shadow: 0 28px 50px -24px rgba(19, 19, 19, 0.55);
}

.pakket--uitgelicht .pakket__nr { color: rgba(227, 154, 98, 0.16); }

@media (min-width: 768px) {
  .pakket--uitgelicht { transform: translateY(-0.5rem); }
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .pakket--uitgelicht:hover { transform: translateY(-0.75rem); }
}

.pakket__label {
  position: absolute;
  top: 0;
  left: clamp(1.25rem, 2.4vw, 1.75rem);
  transform: translateY(-50%);
  margin: 0;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: #A9541A;
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.pakket--uitgelicht .pakket__bedrag { color: #E39A62; }

/* Op een telefoon staan de drie pakketten onder elkaar. Naam en prijs komen
   daar op dezelfde regel, zodat de drie samen niet vier schermen hoog worden
   en de bedragen onder elkaar makkelijk te vergelijken zijn. */
@media (max-width: 767px) {
  .pakket {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    align-items: start;
  }

  .pakket__naam { grid-column: 1; grid-row: 1; align-self: center; }

  /* Het cijfer links achter de naam: rechts staat hier de prijs. */
  .pakket__nr { right: auto; left: 0.6rem; top: 0.5rem; font-size: 5rem; }

  .pakket__prijs {
    grid-column: 2;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .pakket__bedrag { font-size: 1.9rem; }

  .pakket__opstart { flex-basis: auto; margin-top: 0; }

  .pakket__tekst,
  .pakket__groep,
  .pakket__punten { grid-column: 1 / -1; }

  .pakket__tekst {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bord-lijn);
  }

}

/* Vinkjes: in de pakketten en in de feitenlijsten -------------------------- */

.pakket__punten,
.prijsbord__feiten {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pakket__punten {
  display: grid;
  margin: 0.75rem 0 1.25rem;
}

.pakket__groep + .pakket__punten { margin-top: 0.35rem; margin-bottom: 1.5rem; }

/* In de kaarten een dunne lijn tussen de regels: zo lees je een lange
   lijst regel per regel, en zie je naast elkaar wat een pakket meer heeft. */
.pakket__punten li {
  padding-block: 0.55rem;
}

.pakket__punten li + li {
  border-top: 1px solid var(--bord-lijn);
}

/* "Alles uit Groei, plus:" leest als kop van de lijst, niet als een punt. */
.pakket__punten .pakket__erf {
  font-weight: 700;
  color: var(--bord-tekst);
}

.pakket__punten li,
.prijsbord__feiten li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--bord-gedempt);
}

.pakket__punten svg,
.prijsbord__feiten svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  color: var(--bord-koper);
}

.prijsbord__feiten {
  display: grid;
  gap: 0.7rem 2.5rem;
  margin-top: 1.75rem;
}

@media (min-width: 768px) {
  .prijsbord__feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.prijsbord__feiten--boven {
  margin: 0 0 2.25rem;
}

/* Dezelfde vinkjeslijst buiten het prijsbord (op de dienstpagina). De kleuren
   zijn variabelen van .prijsbord; hier zetten we ze zelf. */
.prijsbord__feiten--los {
  --bord-gedempt: rgba(19, 19, 19, 0.74);
  --bord-koper: #A9541A;
}

/* Tweede deel binnen een paneel ------------------------------------------- */

.prijsbord__deel {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: clamp(2.25rem, 4vw, 3rem);
  border-top: 1px solid var(--bord-lijn);
}

/* Onderhoud: drie tegels met prijs en uitleg ------------------------------ */

.diensttegels {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .diensttegels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

.diensttegel {
  padding: 1.25rem;
  border: 1px solid var(--bord-lijn);
  border-radius: 1.1rem;
}

/* Naam boven, prijs eronder: naast elkaar wringen ze bij een lange naam
   zoals "E-mailadres op je eigen domein" in een smalle tegel. */
.diensttegel__rij {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.diensttegel__naam {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--bord-tekst);
}

.diensttegel__prijs {
  margin: 0;
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--bord-tekst);
}

/* "per maand" naast het bedrag, zoals onder de prijs van de websitepakketten. */
.diensttegel__per {
  margin-left: 0.35rem;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--bord-zacht);
}

.diensttegel__uitleg {
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--bord-zacht);
}

/* Twee servicepakketten met een vinkjeslijst: naast elkaar vanaf tablet,
   zodat de lijsten regel voor regel te vergelijken zijn. */
@media (min-width: 768px) {
  .diensttegels--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.diensttegel__punten {
  display: grid;
  gap: 0.55rem;
  margin: 1.1rem 0 0;
  padding: 1.1rem 0 0;
  list-style: none;
  border-top: 1px solid var(--bord-lijn);
}

.diensttegel__punten li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--bord-gedempt);
}

.diensttegel__punten svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  color: var(--bord-koper);
}

/* Wat niet in het pakket zit: doorgestreept en gedempt, met een kruisje. */
.diensttegel__punten .is-niet,
.diensttegel__punten .is-niet svg {
  color: var(--bord-zacht);
}

/* Lijsten: drukwerk en Digihulp ------------------------------------------- */

.prijsbord__lijst {
  margin: 0;
}

.prijsbord__lijst > div {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--bord-lijn);
}

.prijsbord__lijst dt {
  margin: 0;
  flex: 0 1 auto;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(19, 19, 19, 0.86);
}

.prijsbord__stippel {
  flex: 1 1 auto;
  min-width: 1.25rem;
  border-bottom: 2px dotted rgba(19, 19, 19, 0.22);
  transform: translateY(-0.3em);
}

.prijsbord__lijst dd {
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--bord-tekst);
}

.digigroepen {
  display: grid;
  gap: 2.25rem 3rem;
}

@media (min-width: 768px) {
  .digigroepen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .digigroepen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Werk op maat: het vangnet onder de Digihulp-lijst ------------------------
   Er is geen uurtarief: staat een klus niet in de lijst, dan krijgt de klant
   eerst een vaste prijs. Dit vak zegt dat, zonder bedrag. */

.opmaat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin-top: 2.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(169, 84, 26, 0.35);
  border-radius: 1.1rem;
  background: rgba(169, 84, 26, 0.07);
}

.opmaat__vraag {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--bord-tekst);
}

.opmaat__antwoord {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--bord-zacht);
}

/* Voet van elk paneel: btw-noot en knop naar de offertemodule ------------- */

.prijsbord__voet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--bord-lijn);
}

@media (min-width: 768px) {
  .prijsbord__voet {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
}

/* Geen maximum: de noot vult de ruimte naast de knop en past zo vanaf
   ongeveer 1100 px op een regel. Smaller breekt hij gewoon af. */
.prijsbord__noot {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--bord-zacht);
}

.prijsbord__knop {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.8rem 1.5rem;
  border-radius: 1rem;
  background: #A9541A;
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.prijsbord__knop svg {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform 0.25s ease;
}

.prijsbord__knop:hover { background: #93470F; }
.prijsbord__knop:hover svg { transform: translateX(3px); }

.prijsbord__knop:focus-visible {
  outline: 2px solid #131313;
  outline-offset: 3px;
}

@media (max-width: 479px) {
  .prijsbord__knop { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .prijsbord--tabs .prijspaneel:not([hidden]) { animation: none; }
  .prijstab,
  .pakket,
  .prijsbord__knop,
  .prijsbord__knop svg { transition: none; }
  .pakket:hover,
  .pakket--uitgelicht:hover,
  .prijstab:hover { transform: none; }
  .prijstab__rondje { transition: none; }
  .prijsbord__knop:hover svg { transform: none; }
}

/* ==========================================================================
   WERKGEBIED: WAAR IK AAN HUIS KOM
   ==========================================================================
   Wie dit leest heeft maar een vraag: kom je tot bij mij, en wat kost dat
   dan. De sectie beantwoordt die vraag niet in het algemeen maar voor deze
   ene bezoeker: hij typt zijn gemeente of postcode en krijgt zijn eigen
   afstand en bedrag terug. Het tarief zelf (gratis tot 20 km, daarboven
   een euro per kilometer) staat bovenaan de pagina al bij de vier punten
   onder de titel, dus het hoeft hier niet nog eens.

   De gemeentelijst onderaan staat op verborgen; zie .gemeentelijst--verborgen.

/* De gemeentechecker ----------------------------------------------------- */
/* Een witte kaart, dezelfde familie als de slotkaart eronder: twee donkere
   vlakken na elkaar maakte van dit stuk pagina een blok. Koper doet hier
   hetzelfde werk als op de slotkaart: het streepje op de rand, het label
   boven het veld, en het bedrag in het antwoord. Verder blijft alles wit,
   zodat het invulveld het enige is dat om aandacht vraagt.

   Contrast op wit: tekst 17:1, gedempt 6,2:1, koper 5,9:1. */

.gemeentecheck {
  --check-tekst: #131313;
  --check-gedempt: rgba(19, 19, 19, 0.74);
  --check-zacht: rgba(19, 19, 19, 0.62);
  --check-lijn: #E8E3DC;
  --check-koper: #A9541A;

  position: relative;
  /* Geen overflow: hidden hier; de keuzelijst onder het veld steekt bewust
     buiten de kaart. De z-index tilt de kaart boven de slotkaart eronder,
     die met isolation een eigen laag opent. */
  z-index: 2;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--check-lijn);
  background: #FFFFFF;
  box-shadow: 0 30px 60px -30px rgba(19, 19, 19, 0.16);
  color: var(--check-tekst);
}

/* Hetzelfde afgemeten streepje als op de slotkaart, op de hoogte van de
   titel en niet over de volle breedte. */
.gemeentecheck::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(1.5rem, 4vw, 2.5rem);
  width: 3.5rem;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--check-koper);
}

@media (min-width: 48rem) {
  .gemeentecheck {
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.gemeentecheck__titel {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--check-tekst);
  text-wrap: balance;
}

.gemeentecheck__tekst {
  margin: 0.7rem 0 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--check-gedempt);
}

.gemeentecheck__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--check-koper);
}

/* Het veld krijgt de warme paginakleur, anders valt een wit vlak op een
   witte kaart weg en zie je niet waar je moet typen. */
.gemeentecheck__invoer {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--check-lijn);
  border-radius: 0.9rem;
  background: var(--color-theme-base, #F7F5F2);
  color: var(--check-tekst);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.gemeentecheck__invoer::placeholder { color: rgba(19, 19, 19, 0.48); }

.gemeentecheck__invoer:hover { border-color: #D7CEC2; }

.gemeentecheck__invoer:focus {
  background: #FFFFFF;
  border-color: var(--check-koper);
}

.gemeentecheck__invoer:focus-visible {
  outline: 2px solid #131313;
  outline-offset: 2px;
}

/* De keuzelijst --------------------------------------------------------- */
/* Een datalist liet de browser tekenen: donkere rijen in Chrome, een eigen
   lijstje in Firefox, en in Brave kwam het adresbeheer van de browser er nog
   onder te staan. Deze lijst is van ons, dus ze volgt de kaart: wit vlak,
   dezelfde rand en ronding als het veld, en koper enkel op de rij waar je
   staat. Pijltjes omhoog en omlaag lopen hem door, Enter kiest, Escape
   sluit; de rollen combobox, listbox en option zeggen een schermlezer wat
   er gebeurt. */

.gemeentecheck__zoek {
  position: relative;
}

.gemeentecheck__suggesties {
  position: absolute;
  z-index: 3;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  max-height: 19rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  border: 1px solid var(--check-lijn);
  border-radius: 0.9rem;
  background: #FFFFFF;
  box-shadow: 0 24px 48px -24px rgba(19, 19, 19, 0.3);
}

.gemeentecheck__suggesties[hidden] { display: none; }

.gemeentecheck__suggestie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.6rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--check-tekst);
}

.gemeentecheck__suggestie:hover,
.gemeentecheck__suggestie.is-actief {
  background: rgba(169, 84, 26, 0.09);
}

.gemeentecheck__suggestie-naam {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gemeentecheck__suggestie.is-actief .gemeentecheck__suggestie-naam {
  color: var(--check-koper);
}

/* Rechts staat wat de rij niet zelf zegt: bij een gemeente de afstand, bij
   een postcode de gemeente die erbij hoort. */
.gemeentecheck__suggestie-bij {
  flex: none;
  font-size: 0.85em;
  color: var(--check-zacht);
  font-variant-numeric: tabular-nums;
}

/* Vaste hoogte: het antwoord verschijnt tijdens het typen en mag de rest
   van de kaart niet laten springen. */
.gemeentecheck__uitkomst {
  min-height: 2.9rem;
  margin: 0.75rem 0 0;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--check-gedempt);
}

.gemeentecheck__uitkomst strong {
  font-weight: 700;
  color: var(--check-koper);
}

.gemeentecheck__uitkomst a {
  color: var(--check-koper);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .gemeentecheck__invoer { transition: none; }
}

/* De gemeentelijst ------------------------------------------------------- */
/* Zestig gemeenten onder elkaar wordt een kolom van zestig regels. In
   kolommen naast elkaar staat dezelfde lijst op een paar regels hoogte en
   blijft hij alfabetisch te doorlopen. De namen staan als gewone tekst op de
   pagina: wie zoekt, typt zijn eigen gemeente, niet "Oost-Vlaanderen". */

/* De zestig gemeenten staan nog in de HTML, zodat de gegevens niet verloren
   gaan en de lijst met het weghalen van deze ene klasse weer verschijnt. Ze
   staat alleen niet meer op het scherm: de checker erboven beantwoordt
   dezelfde vraag korter. */
.gemeentelijst--verborgen { display: none; }

.gemeentelijst {
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--color-theme-light, #E8E3DC);
  border-radius: clamp(1.25rem, 3vw, 2rem);
  background: #FFFFFF;
}

.gemeentelijst__knop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 1rem clamp(1.25rem, 3.5vw, 2rem);
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-theme-dark, #131313);
  list-style: none;
}

.gemeentelijst__knop::-webkit-details-marker { display: none; }

.gemeentelijst__knop:hover { color: var(--color-theme-deep, #A9541A); }

.gemeentelijst__knop:focus-visible {
  outline: 2px solid #131313;
  outline-offset: -2px;
  border-radius: clamp(1.25rem, 3vw, 2rem);
}

.gemeentelijst__knop svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-theme-deep, #A9541A);
  transition: transform 0.25s ease;
}

.gemeentelijst[open] .gemeentelijst__knop svg { transform: rotate(180deg); }

.gemeentelijst__inhoud {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding: 0 clamp(1.25rem, 3.5vw, 2rem);
}

/* Zonder dit mag een rasterveld niet smaller worden dan zijn langste regel,
   en duwt de kolommenlijst zich op een telefoon breder dan het scherm. */
.gemeentelijst__groep { min-width: 0; }

.gemeentelijst__titel {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-theme-dark, #131313);
}

.gemeentelijst__onder {
  margin: 0.2rem 0 1rem;
  font-size: 0.85rem;
  color: var(--color-theme-secondary, #6E665F);
}

.gemeentelijst__slot {
  margin: 0;
  padding: clamp(1.5rem, 4vw, 2rem) clamp(1.25rem, 3.5vw, 2rem);
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(19, 19, 19, 0.7);
}

.gemeentelijst__slot a {
  color: var(--color-theme-deep, #A9541A);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gemeenten {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2rem;
  font-size: 0.95rem;
}

@media (min-width: 40rem) {
  .gemeenten { columns: 3; }
}

@media (min-width: 64rem) {
  .gemeenten { columns: 4; }
}

/* Naam links, kilometers rechts, zoals een prijslijst. Een lange naam als
   Sint-Lievens-Houtem breekt dan over twee regels zonder zijn kilometers mee
   te sleuren naar de volgende regel. */
.gemeenten li {
  /* Een naam mag niet over de kolomgrens breken. */
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.22rem;
}

/* De kilometers zet main.js erachter, uit dezelfde tabel als de rekenhulp. */
.gemeenten__km {
  flex: none;
  font-size: 0.85em;
  color: var(--color-theme-secondary, #6E665F);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .gemeentelijst__knop svg { transition: none; }
}

/* ==========================================================================
   SLOTKAART: HET BRIEFJE ONDERAAN EEN DIENSTPAGINA
   ==========================================================================
   Wie hier aankomt heeft alles gelezen. Nog een lijst met voordelen helpt
   dan niet meer; de aarzeling gaat over "wat gebeurt er als ik nu contact
   opneem". Daarom is dit geen sectie maar een briefje: een vraag, een
   antwoord van drie regels en één knop. Alles wat ergens anders op de
   pagina al staat, staat hier niet nog eens.

   De vorm komt van een handgeschreven notitie: een smalle koperen lijn
   links, zoals de marge van een blad, en de tekst daarnaast. Dat de knop
   ernaast staat in plaats van eronder houdt het geheel op drie of vier
   regels hoog.

   Het briefje is zwart, als enige vlak op een verder lichte pagina. Daardoor
   sluit de pagina af in plaats van gewoon op te houden, en loopt het zwart
   door in de voettekst eronder. De witruimte ertussen houdt de twee uit
   elkaar; de koperen rand boven de voettekst doet de rest.

   Eén weg naar binnen: de knop naar het contactformulier. Zo komt elke vraag
   met dezelfde gegevens binnen in plaats van als los mailtje. */

.slotkaart {
  /* Contrast op #131313: tekst 17:1, gedempt 11:1, zacht 7,8:1. Koper is op
     zwart de lichtere tint uit de huisstijl (#C8631F, 4,65:1). */
  --slot-tekst: #FFFFFF;
  --slot-gedempt: rgba(255, 255, 255, 0.8);
  --slot-zacht: rgba(255, 255, 255, 0.62);
  --slot-koper: #C8631F;

  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  border-radius: clamp(1.25rem, 2.5vw, 2rem);
  /* De koperen marge links; de rest van de rand is het zwart zelf. */
  border-left: 3px solid var(--slot-koper);
  background-color: #131313;
  box-shadow: 0 30px 60px -32px rgba(19, 19, 19, 0.45);
  color: var(--slot-tekst);
}

/* De knop staat onder de tekst, niet ernaast: zo houdt het antwoord de volle
   breedte en blijft het op twee regels staan. De knop begint links, onder het
   begin van de zin. */
.slotkaart__knop { justify-self: start; }

.slotkaart__titel {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.slotkaart__lead {
  margin: 0.75rem 0 0;
  /* Gemeten, niet geraden: bij deze maat staat elk van de drie teksten op een
     breed scherm op twee regels. Breder werd het één lange regel van ruim
     honderd tekens, en dan kiest de browser zelf waar hij afbreekt.
     balance verdeelt de woorden over die twee regels, zodat er nooit één
     woord alleen op de tweede regel blijft staan. */
  max-width: 62ch;
  text-wrap: balance;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--slot-gedempt);
}

.slotkaart__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.9rem 1.75rem;
  border-radius: 1rem;
  /* Niet de lichte kopertint van de rand: wit op #A9541A haalt 4,86:1, op de
     lichtere tint niet. Het vlak zelf haalt 3,5:1 op het zwart. */
  background: #A9541A;
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.slotkaart__knop svg {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform 0.25s ease;
}

.slotkaart__knop:hover {
  background: #93470F;
  transform: translateY(-2px);
}

.slotkaart__knop:hover svg { transform: translateX(3px); }

/* Wit, want zwart op zwart zie je niet. */
.slotkaart__knop:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

@media (max-width: 29.9375rem) {
  .slotkaart__knop { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .slotkaart__knop,
  .slotkaart__knop svg { transition: none; }
  .slotkaart__knop:hover { transform: none; }
  .slotkaart__knop:hover svg { transform: none; }
}

/* Hero, de vier diensten onder de intro: op tablet in twee kolommen, op een
   telefoon onder elkaar, vanaf 1024px op een rij (Tailwind-klassen). */
@media (min-width: 768px) and (max-width: 1023.98px) {
  ul.hero-diensten {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 4rem;
    row-gap: 0.75rem;
  }
}