/* =============================================================
   Venturi - publieke pagina's (landing)
   index.php (voor bureaus), opdrachtgevers.php, voor-jou.php (voor professionals)
   en prijzen.php delen deze bouwstenen.

   Bron: het Figma-bestand "Venturi" (pagina's Merk, Website en Componenten), sinds
   16-10-2026. De kleuren, de knoppen, de typeschaal en de sectietypen hieronder komen
   daar vandaan. Twee afwijkingen, beide besluit van Henri: koppen in Biome (Figma toont
   Saira als stand-in, omdat Biome daar niet beschikbaar is) en lopende tekst in Manrope.

   De publieke site heeft een VAST palet en volgt de platformkleuren niet meer: die
   blijven voor de app, per omgeving (Henri, 16-10-2026).
   ============================================================= */

:root {
    /* Palet uit Figma (collectie Primitieven) */
    --petrol-950: #041b24;
    --petrol-900: #082b39;
    --petrol-800: #173440;
    --petrol-700: #2a3f49;
    --petrol-600: #3e535d;
    --petrol-500: #566c76;
    --petrol-400: #788d96;
    --petrol-300: #a3b4bb;
    --petrol-200: #c8d4d9;
    --petrol-100: #e2e9ec;
    --petrol-50:  #eff3f5;
    --petrol-25:  #f7f9fa;
    --blauw-50:   #eaf7fd;
    --blauw-300:  #7fd0f2;
    --blauw-400:  #3bb8ec;
    --blauw-500:  #009fe3;
    --blauw-700:  #006a99;
    --munt-100:   #d5f7e9;
    --munt-500:   #2fd5a0;
    --munt-700:   #087553;
    --rood-100:   #fbe2e2;
    --rood-500:   #d93f3f;
    --rood-700:   #a12828;

    /* Rollen (collectie Kleur, modus Licht). Een donkere sectie zet ze om, zie .vak-donker. */
    --tekst:        var(--petrol-900);
    --tekst-2:      var(--petrol-600);
    --tekst-3:      var(--petrol-500);
    --tekst-merk:   var(--blauw-700);
    --rand:         var(--petrol-100);
    --rand-sterk:   var(--petrol-200);
    --vlak:         #ffffff;
    --canvas:       var(--petrol-25);
    --stroom:       var(--blauw-300);

    /* Ruimte (collectie Maat) */
    --r-2:  2px;  --r-4:  4px;  --r-8:  8px;  --r-12: 12px; --r-16: 16px;
    --r-20: 20px; --r-24: 24px; --r-32: 32px; --r-40: 40px; --r-48: 48px;
    --r-64: 64px; --r-96: 96px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-pil: 999px;
    --lijn: 1px;

    /* Schaduw (effectstijlen Schaduw/2 en Schaduw/3) */
    --schaduw-2: 0 2px 4px rgba(8, 43, 57, .06), 0 6px 16px rgba(8, 43, 57, .10);
    --schaduw-3: 0 4px 12px rgba(8, 43, 57, .08), 0 18px 44px rgba(8, 43, 57, .16);

    /* Maten op EEN plek: een media query zet de variabele om, nooit dezelfde regel
       twee keer met een andere waarde. */
    --land-max:   1200px;   /* de inhoud; in Figma 1440 breed met 120 marge */
    --land-pad:   1.5rem;
    --vak-y:      8rem;     /* verticale ruimte van een sectie (Figma 128) */
    --kop-gap:    4rem;     /* van de sectiekop naar de inhoud (Figma 64) */
    --kolom:      45rem;    /* sectiekop en lopende tekst (Figma 720) */
    --merk-h:     2.75rem;  /* logo in de balk */
    --t-display:  clamp(2.3rem, 4.8vw, 3.6rem);
    --t-h1:       clamp(1.85rem, 3.3vw, 2.6rem);
    --t-h2:       clamp(1.45rem, 2.4vw, 1.9rem);
    --t-h3:       1.375rem;  /* 22 */
    --t-groot:    1.125rem;  /* 18 */
    --t-normaal:  1rem;      /* 16 */
    --t-klein:    .875rem;   /* 14 */
    --t-label-k:  .75rem;    /* 12 */
    --foto-kop-w: 32.5rem;   /* 4:3 naast een sectiekop (Figma 520) */
    --foto-rij-w: 27.5rem;   /* 4:3 naast een korte kop (Figma 440) */
    --kaart-w:    30rem;     /* rekenblok en formulier (Figma 480) */
    --ster-w:     48rem;     /* de ster in de hero */
    --prijskaart-min: 17rem;
    --prijs-groot:    3rem;
    --druk: 160ms;
    --curve-uit: cubic-bezier(.23, 1, .32, 1);
}

/* Biome, de letter van het logo (Henri, 14-10-2026). Alleen voor koppen en grote
   getallen; er is maar een gewicht. */
@font-face {
    font-family: 'Biome'; src: url('fonts/biome-regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Manrope', system-ui, sans-serif; font-size: var(--t-normaal);
    color: var(--tekst); background: var(--canvas); line-height: 1.5;
}
img { max-width: 100%; display: block; }
/* Wat een display-regel krijgt (grid, flex), negeert anders het hidden-attribuut; de
   pop-ups wisselen daarmee tussen inloggen en wachtwoord vergeten. */
[hidden] { display: none !important; }
a { color: var(--tekst-merk); text-underline-offset: .2em; }
::selection { background: var(--blauw-300); color: var(--petrol-900); }
:focus-visible { outline: 2px solid var(--blauw-500); outline-offset: 2px; }
.wrap { max-width: calc(var(--land-max) + 2 * var(--land-pad)); margin: 0 auto; padding: 0 var(--land-pad); }
.visueel-verborgen {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Typografie ---------- */
.kop-display, .kop-1, .kop-2, .getal-groot {
    font-family: 'Biome', 'Manrope', system-ui, sans-serif;
    font-weight: 400; font-synthesis: none; letter-spacing: 0;
}
.kop-display { font-size: var(--t-display); line-height: 1.05; }
.kop-1 { font-size: var(--t-h1); line-height: 1.15; }
.kop-2 { font-size: var(--t-h2); line-height: 1.2; }
.kop-3 { font-size: var(--t-h3); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.tekst-groot { font-size: var(--t-groot); line-height: 1.55; }
.tekst-klein { font-size: var(--t-klein); line-height: 1.45; }
.label { font-size: var(--t-klein); font-weight: 500; line-height: 1.4; }
.label-klein { font-size: var(--t-label-k); font-weight: 500; line-height: 1.35; letter-spacing: .02em; }
.zacht { color: var(--tekst-2); }

/* ---------- Knoppen (component Knop) ----------
   Primair is blauw met petrol tekst: wit op Venturi-blauw haalt maar 3:1. Secundair is
   petrol, voor lichte vlakken en voor het blauwe vlak. Rustig is een rand, voor bijzaken.
   Eén primaire knop per scherm. Druk: schaal .97 in 160 ms. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--r-8);
    padding: var(--r-12) var(--r-20); border-radius: var(--radius-md); border: var(--lijn) solid transparent;
    font: inherit; font-size: var(--t-klein); font-weight: 500; line-height: 1.4;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: transform var(--druk) var(--curve-uit), background-color var(--druk) ease, border-color var(--druk) ease;
}
.btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .btn, .btn:active { transform: none; transition: none; } }
.btn-primair   { background: var(--blauw-500); color: var(--petrol-900); }
.btn-secundair { background: var(--petrol-900); color: #fff; }
.btn-rustig    { background: transparent; color: var(--tekst); border-color: var(--rand-sterk); }
@media (hover: hover) and (pointer: fine) {
    .btn-primair:hover   { background: var(--blauw-400); }
    .btn-secundair:hover { background: var(--petrol-800); }
    .btn-rustig:hover    { background: var(--petrol-50); }
}
.btn-klein { padding: var(--r-8) var(--r-16); }
.btn-blok  { width: 100%; }
.btn[disabled] { background: var(--petrol-100); color: var(--petrol-400); cursor: default; }
.link-sterk { font-size: var(--t-klein); font-weight: 500; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; }
.link-sterk:hover { text-decoration-thickness: 2px; }

/* ---------- Badge ---------- */
.badge {
    display: inline-flex; align-items: center; padding: var(--r-2) var(--r-8); border-radius: var(--radius-pil);
    font-size: var(--t-label-k); font-weight: 500; line-height: 1.35; letter-spacing: .02em; white-space: nowrap;
}
.badge-merk      { background: var(--blauw-50); color: var(--blauw-700); }
.badge-sluit-aan { background: var(--munt-500); color: var(--petrol-900); }

/* ---------- Balk ---------- */
.top {
    position: sticky; top: 0; z-index: 10;
    background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px);
    border-bottom: var(--lijn) solid var(--rand);
}
/* padding-BLOCK, geen shorthand: .top-inner is ook een .wrap en die zet de horizontale
   marge. Een shorthand zette die op nul en plakte logo en knop tegen de schermrand. */
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--r-24); padding-block: var(--r-20); }
.brand { display: block; color: var(--tekst); text-decoration: none; font-weight: 800; font-size: 1.35rem; }
.brand img { display: block; height: var(--merk-h); width: auto; }
.top nav { display: flex; align-items: center; gap: var(--r-32); }
/* :not(.btn) is de kern: zonder dat won deze regel op specificiteit van de knopkleur en
   werd de tekst van Inloggen grijs op een gekleurde vulling. */
.top nav a:not(.btn) { color: var(--tekst-2); text-decoration: none; font-size: var(--t-klein); font-weight: 500; }
.top nav a:not(.btn):hover { color: var(--tekst); }
.top nav a:not(.btn).actief { color: var(--tekst); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; }
.top-links { display: flex; align-items: center; gap: var(--r-32); }

/* ---------- Secties ---------- */
.vak { padding: var(--vak-y) 0; background: var(--canvas); }
.vak-wit    { background: var(--vlak); }
.vak-mist   { background: var(--petrol-50); }
.vak-zacht  { background: var(--blauw-50); }
.vak-merk   { background: var(--blauw-500); --tekst: var(--petrol-900); --tekst-2: var(--petrol-900); --tekst-3: var(--petrol-900); --rand: var(--petrol-900); }
/* Donker is apart samengesteld (Figma, modus Donker), niet omgekeerd. */
.vak-donker {
    background: var(--petrol-950); color: var(--petrol-25);
    --tekst: var(--petrol-25); --tekst-2: var(--petrol-300); --tekst-3: var(--petrol-400);
    --tekst-merk: var(--blauw-300); --rand: var(--petrol-800); --rand-sterk: var(--petrol-700);
}
.vak, .vak-merk { color: var(--tekst); }
.vak-kop { max-width: var(--kolom); display: grid; gap: var(--r-20); margin-bottom: var(--kop-gap); }
.vak-kop .sub { font-size: var(--t-groot); line-height: 1.55; color: var(--tekst-2); }
.vak-kop:last-child { margin-bottom: 0; }

/* Kop links, foto 4:3 rechts, onderkanten gelijk. Een verschil in hoogte valt boven de
   kop, waar al lucht hoort, zodat wat eronder komt altijd op dezelfde afstand aansluit. */
.kop-met-foto {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--foto-w, var(--foto-rij-w));
    gap: var(--r-64); align-items: end; margin-bottom: var(--kop-gap);
}
.kop-met-foto .vak-kop { margin-bottom: 0; }
.kop-met-foto.foto-groot { --foto-w: var(--foto-kop-w); margin-bottom: 0; }
.foto { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); object-fit: cover; }
.foto-43   { aspect-ratio: 4 / 3; }
.foto-band { aspect-ratio: 21 / 9; margin-top: var(--kop-gap); }

/* Missie: kop en tekst links, foto rechts */
.missie-tekst { display: grid; gap: var(--r-32); }
.missie-tekst .kop-1 { max-width: 30rem; }
.missie-tekst .stellig { font-size: var(--t-h3); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }

/* ---------- Hero: het blauwe merkvlak met het product ---------- */
.hero-merk { position: relative; overflow: hidden; background: var(--blauw-500); color: var(--petrol-900); }
.hero-ster {
    position: absolute; top: -14rem; left: 58%; width: var(--ster-w); height: auto;
    opacity: .5; pointer-events: none; user-select: none;
}
.hero-inner {
    position: relative; display: grid; grid-template-columns: minmax(0, 37.5rem) minmax(0, 33.5rem);
    justify-content: space-between; align-items: center; gap: var(--r-64);
    padding-block: 7rem;
}
.hero-tekst { display: grid; gap: var(--r-32); justify-items: start; }
/* Eén knop in de hero (Henri, 16-10-2026): de verwijzing naar een andere doelgroep staat al in
   de balk en onderaan elke pagina, en de doelgroepregel eronder oogde verloren. */
.hero-acties { display: flex; align-items: center; gap: var(--r-24); flex-wrap: wrap; }

/* Het productbeeld: echte opmaak, geen schermafdruk. Knoppen zijn hier geen knoppen. */
.product { position: relative; height: 32.5rem; }
.p-box {
    position: absolute; left: 0; top: 0; width: 89.5%;
    background: var(--vlak); border-radius: var(--radius-xl); box-shadow: var(--schaduw-3); overflow: hidden;
}
.p-box-kop { display: flex; align-items: center; justify-content: space-between; padding: var(--r-16) var(--r-20); }
.p-box-kop strong { font-size: var(--t-h3); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.p-box-kop span { font-size: var(--t-label-k); font-weight: 500; color: var(--blauw-700); }
.p-rij {
    display: flex; align-items: center; gap: var(--r-12); height: 4.5rem; padding: var(--r-16);
    border-bottom: var(--lijn) solid var(--petrol-100);
}
.p-rij:last-child { border-bottom: 0; }
.p-stip { width: 8px; height: 8px; flex-shrink: 0; }
.p-avatar {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--blauw-50); color: var(--blauw-700);
    display: flex; align-items: center; justify-content: center; font-size: var(--t-klein); font-weight: 500;
}
.p-rij-tekst { flex: 1; min-width: 0; display: grid; gap: var(--r-2); font-size: var(--t-klein); }
.p-rij-tekst b { font-weight: 500; color: var(--petrol-900); }
.p-rij-tekst span { color: var(--petrol-500); }
.p-rij-tekst b, .p-rij-tekst span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-rij.gelezen .p-rij-tekst b { color: var(--petrol-600); }
.p-rij-rechts { display: grid; justify-items: end; gap: var(--r-4); font-size: var(--t-klein); font-weight: 500; color: var(--petrol-500); }
.p-kaart {
    position: absolute; left: 17.9%; top: 12.5rem; width: 82.1%;
    display: grid; gap: var(--r-16); padding: var(--r-24);
    background: var(--vlak); border: var(--lijn) solid var(--petrol-100); border-radius: var(--radius-lg);
    filter: drop-shadow(0 18px 22px rgba(8, 43, 57, .16)) drop-shadow(0 4px 6px rgba(8, 43, 57, .08));
}
.p-kenmerken { display: flex; justify-content: space-between; }
.p-kaart-kop { display: grid; gap: var(--r-4); }
.p-kaart-kop strong { font-size: var(--t-h3); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.p-kaart-kop span { color: var(--petrol-600); }
.p-feiten { display: flex; gap: var(--r-24); font-weight: 500; flex-wrap: wrap; }
.p-feiten div { display: grid; gap: var(--r-2); }
.p-feiten small { font-size: var(--t-label-k); color: var(--petrol-500); letter-spacing: .02em; }
.p-feiten b { font-size: var(--t-klein); font-weight: 500; }
.p-scheiding { height: 1px; background: var(--petrol-100); }
.p-acties { display: flex; gap: var(--r-8); }
.p-acties .btn { pointer-events: none; }

/* ---------- Hero met een foto (de andere pagina's) ----------
   --hero-img wordt per pagina inline gezet, maar var() wordt HIER gebruikt, en een
   relatieve URL in een custom property lost de browser op tegen de stylesheet, niet
   tegen de pagina. De waarde begint daarom met ../ (van css/ terug naar de app-root).
   Haal die niet weg: dan tekent de laag niets en blijft alleen de sluier over. */
.hero-foto { position: relative; overflow: hidden; color: #fff; background: var(--petrol-900); }
.hero-foto::before {
    content: ""; position: absolute; inset: 0;
    background: var(--hero-img) center / cover no-repeat;
}
/* De sluier (Merk, paneel 13 en 18): witte tekst op een foto staat altijd op petrol. Op de
   tekstplek mag hij niet onder 72% zakken, anders haalt witte tekst geen 4,5:1. Het
   onderwerp van de foto staat daarom rechts. */
.hero-foto::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg,
        rgba(8, 43, 57, .94) 0%, rgba(8, 43, 57, .80) 42%,
        rgba(8, 43, 57, .18) 72%, rgba(8, 43, 57, 0) 100%);
}
.hero-foto .hero-inner { grid-template-columns: minmax(0, 37.5rem); z-index: 1; }

/* ---------- Twee stromen (het beeld bij de naam) ---------- */
.stromen { display: grid; justify-items: center; gap: var(--kop-gap); text-align: center; }
.stromen-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--r-48); }
.stroom { display: grid; gap: var(--r-8); }
.stroom:first-child { text-align: right; }
.stroom:last-child { text-align: left; }
.stroom span { font-size: var(--t-groot); color: var(--stroom); }
.stromen-teken { width: 20rem; height: auto; }
.stromen-uitleg { max-width: var(--kolom); font-size: var(--t-groot); line-height: 1.55; color: var(--tekst-2); }

/* ---------- Waar het misgaat tegenover wat Venturi doet ---------- */
.rijen { display: grid; }
.rij {
    display: grid; grid-template-columns: minmax(0, 25rem) auto minmax(0, 1fr); align-items: center;
    gap: var(--r-64); padding-block: var(--r-40); border-top: var(--lijn) solid var(--rand);
}
.rij-probleem { display: grid; gap: var(--r-8); color: var(--tekst-3); }
.rij-probleem .kop-3 { text-decoration: line-through; text-decoration-thickness: 1px; }
.rij-teken { width: 3rem; height: auto; }
.rij-oplossing { display: grid; gap: var(--r-8); }
.rij-oplossing p { color: var(--tekst-2); }

/* ---------- Twee kolommen: tekst links, iets rechts ---------- */
.naast { display: grid; grid-template-columns: minmax(0, 1fr) var(--naast-w, var(--kaart-w)); gap: var(--r-96); align-items: var(--naast-uitlijn, center); }
.naast-tekst { display: grid; gap: var(--r-20); align-content: start; }
.naast-tekst .sub { font-size: var(--t-groot); line-height: 1.55; color: var(--tekst-2); }
.naast-tekst .bron { margin-top: var(--r-12); font-size: var(--t-klein); line-height: 1.5; color: var(--tekst-3); max-width: var(--kolom); }
.naast.links-smal { --naast-w: 1fr; grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); --naast-uitlijn: start; }

/* ---------- Kaart (rekenblok, formulier) ---------- */
.kaart-wit {
    display: grid; gap: var(--r-24); padding: var(--r-40);
    background: var(--vlak); color: var(--petrol-900); border-radius: var(--radius-xl);
}
.kaart-wit.schaduw-2 { box-shadow: var(--schaduw-2); }
.kaart-wit.schaduw-3 { box-shadow: var(--schaduw-3); }
.kaart-scheiding { height: 1px; background: var(--petrol-100); }
.uitkomst { display: grid; gap: var(--r-4); }
.uitkomst .getal-groot { font-size: var(--t-h1); line-height: 1.15; color: var(--blauw-700); }
.uitkomst small { font-size: var(--t-klein); color: var(--petrol-500); }
.uitkomst-label { font-size: var(--t-klein); color: var(--petrol-500); }
.uitkomst .bijzaak { opacity: .8; }
/* Rekenblok met zes velden: twee kolommen, de labels onderaan uitgelijnd zodat de invoervakken
   op één lijn staan als een label over twee regels loopt (Figma, Rekensom, 17-10-2026). */
.velden-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r-20) var(--r-24); align-items: end; }

/* ---------- Kenmerken: lijst met een lijn erboven ---------- */
.kenmerken { list-style: none; display: grid; grid-template-columns: repeat(var(--kolommen, 2), minmax(0, 1fr)); gap: var(--r-40) var(--r-48); }
.kenmerken-3 { --kolommen: 3; }
.kenmerken-4 { --kolommen: 4; }
.kenmerken li { display: grid; gap: var(--r-12); align-content: start; padding-top: var(--r-24); border-top: var(--lijn) solid var(--rand); }
.kenmerken li p { color: var(--tekst-2); }
.kenmerken.compact li p { font-size: var(--t-klein); line-height: 1.45; }
.kenmerken.sterk li { border-top-color: var(--rand-sterk); }

/* ---------- Stappen (op donker) ---------- */
.stappen { display: grid; grid-template-columns: repeat(var(--stappen, 5), minmax(0, 1fr)); gap: var(--r-24); }
.stap { display: grid; gap: var(--r-12); align-content: start; padding-top: var(--r-24); border-top: 2px solid var(--stroom); }
.stap .getal-groot { font-size: var(--t-h2); line-height: 1.2; color: var(--stroom); }
.stap p { font-size: var(--t-klein); line-height: 1.45; color: var(--tekst-2); }
.vak:not(.vak-donker) .stap { border-top-color: var(--blauw-500); }
.vak:not(.vak-donker) .stap .getal-groot { color: var(--blauw-700); }

/* ---------- Punten: de ster als opsommingsteken ---------- */
.punten { list-style: none; display: grid; gap: var(--r-12); }
.punten li { display: grid; grid-template-columns: .8rem minmax(0, 1fr); gap: var(--r-12); align-items: start; }
.punten li::before {
    content: ""; width: .8rem; height: 1.2rem; margin-top: .15rem;
    background: url('../img/venturi-ster-blauw.svg') center / contain no-repeat;
}
.vak-merk .punten li::before, .op-merk .punten li::before { background-image: url('../img/venturi-ster-petrol.svg'); }
.vak-donker .punten li::before { background-image: url('../img/venturi-ster-stroom.svg'); }

/* ---------- Demo: uitleg naast het formulier ---------- */
.agenda { list-style: none; display: grid; }
.agenda-kop { margin-bottom: var(--r-4); }
.agenda li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--r-24); padding-block: var(--r-20); border-top: var(--lijn) solid var(--petrol-900); font-size: var(--t-klein); }
.agenda-tijd { font-weight: 500; }
.agenda strong { display: block; font-weight: 500; margin-bottom: var(--r-4); }
.demo-uitleg { display: grid; gap: var(--r-32); align-content: start; }

/* ---------- Formulier ---------- */
.formulier { display: grid; gap: var(--r-20); }
.na-kop { margin-top: var(--kop-gap); }
.vak-merk a:not(.btn) { color: inherit; }
.veld { display: grid; gap: var(--r-8); }
label { font-size: var(--t-klein); font-weight: 500; line-height: 1.4; color: var(--petrol-900); }
label .optie { font-weight: 400; color: var(--petrol-500); }
input, textarea, select {
    width: 100%; padding: var(--r-12); font: inherit; font-size: var(--t-normaal); line-height: 1.5;
    color: var(--petrol-900); background: #fff;
    border: var(--lijn) solid var(--petrol-200); border-radius: var(--radius-md);
}
input::placeholder, textarea::placeholder { color: var(--petrol-500); }
input:focus, textarea:focus, select:focus { outline: none; border: 2px solid var(--blauw-500); padding: calc(var(--r-12) - 1px); }
textarea { resize: vertical; min-height: 5.5rem; }
.melding { border-radius: var(--radius-md); padding: var(--r-12) var(--r-16); font-size: var(--t-klein); }
.melding-fout { background: var(--rood-100); color: var(--rood-700); }
.melding-goed { background: var(--munt-100); color: var(--munt-700); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.klein { font-size: var(--t-klein); color: var(--petrol-500); }

/* ---------- Overstap naar een andere pagina: tekst met foto ---------- */
.overstap { display: flex; align-items: center; justify-content: space-between; gap: var(--r-64); }
.overstap-tekst { display: grid; gap: var(--r-20); justify-items: start; max-width: 40rem; }
.overstap-tekst p { font-size: var(--t-groot); line-height: 1.55; color: var(--tekst-2); }
.overstap .foto { width: 25rem; flex-shrink: 0; }

/* ---------- Uitgelicht: één functie die extra aandacht krijgt ---------- */
.uitgelicht { display: grid; gap: var(--r-12); margin-top: var(--kop-gap); padding: var(--r-32); border-radius: var(--radius-xl); background: var(--blauw-50); max-width: var(--kolom); }
.uitgelicht p { color: var(--petrol-600); }

/* ---------- Prijskaarten ----------
   Geen pakket wordt uitgelicht (Henri, 16-09-2026): Team en Enterprise voeren dezelfde
   call-to-action. */
.prijzen { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--prijskaart-min), 1fr)); gap: var(--r-24); align-items: stretch; }
.prijskaart {
    display: flex; flex-direction: column; gap: var(--r-16);
    background: var(--vlak); border: var(--lijn) solid var(--rand); border-radius: var(--radius-xl);
    padding: var(--r-32); box-shadow: var(--schaduw-2);
}
.prijskaart .voor { color: var(--tekst-2); min-height: 3rem; }
.prijs { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--r-8); }
.prijs .getal-groot { font-size: var(--prijs-groot); line-height: 1; }
.prijs span { font-size: var(--t-klein); color: var(--tekst-3); }
.prijskaart .punten { font-size: var(--t-klein); align-content: start; }
.prijs-optie { display: flex; gap: var(--r-8); padding-top: var(--r-16); border-top: var(--lijn) solid var(--rand); font-size: var(--t-klein); color: var(--tekst-2); }
.prijs-optie strong { color: var(--tekst); }
.prijs-noot { font-size: var(--t-label-k); line-height: 1.45; color: var(--tekst-3); text-align: center; }
.prijs-voet { margin-top: var(--r-24); color: var(--tekst-2); max-width: var(--kolom); }
/* Uitlijnen over de kaarten heen: subgrid deelt de rijhoogtes, de opsomming (rij 4) vangt
   het verschil op, en de AI-regel, de knop en de voetnoot liggen in alle drie gelijk.
   Zonder subgrid blijft de flex-kolom staan; daarom is dit een @supports. */
@supports (grid-template-rows: subgrid) {
    .prijzen { grid-template-rows: auto auto auto 1fr auto auto auto; row-gap: 0; }
    .prijskaart { display: grid; grid-row: span 7; grid-template-rows: subgrid; margin-bottom: var(--r-24); }
    .prijskaart .btn { align-self: start; }
}
.prijs-uitleg { display: grid; gap: var(--r-12); margin-top: var(--r-24); padding: var(--r-32); background: var(--blauw-50); border-radius: var(--radius-xl); max-width: var(--kolom); }
.prijs-uitleg p { color: var(--petrol-600); }

/* ---------- Footer ---------- */
footer { background: var(--petrol-950); color: var(--petrol-25); padding: 5rem 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--r-64); flex-wrap: wrap; }
.footer-merk { display: grid; gap: var(--r-16); }
.footer-merk img { width: 11.25rem; height: auto; }
.footer-merk p { color: var(--petrol-300); }
.footer-naam { font-weight: 800; font-size: 1.35rem; }
footer nav { display: flex; gap: var(--r-32); flex-wrap: wrap; }
footer nav a { color: var(--petrol-25); text-decoration: none; font-size: var(--t-klein); font-weight: 500; }
footer nav a:hover { text-decoration: underline; }

/* ---------- Pop-up (inloggen, omgeving aanmaken) ----------
   Geen aparte pagina: de bezoeker houdt de landingspagina achter zich. */
.modal-scrim {
    position: fixed; inset: 0; z-index: 100; background: rgba(4, 27, 36, .55);
    display: flex; align-items: center; justify-content: center; padding: var(--r-16);
}
.modal-scrim[hidden] { display: none; }
.modal {
    background: var(--vlak); border-radius: var(--radius-xl); box-shadow: var(--schaduw-3);
    width: 100%; max-width: 27rem; max-height: calc(100vh - 2rem);
    display: flex; flex-direction: column; overflow: hidden;
}
.modal-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--r-16); padding: var(--r-24) var(--r-32) var(--r-16); }
.modal-kop h2 { font-family: 'Biome', 'Manrope', system-ui, sans-serif; font-weight: 400; font-synthesis: none; font-size: var(--t-h2); line-height: 1.2; }
.modal-kop p { font-size: var(--t-klein); color: var(--petrol-500); margin-top: var(--r-4); }
.modal-sluit {
    flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; border: 0;
    background: var(--petrol-50); color: var(--petrol-600); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.modal-sluit:hover { background: var(--petrol-100); color: var(--petrol-900); }
.modal-sluit svg { width: 16px; height: 16px; }
.modal-body { padding: 0 var(--r-32) var(--r-32); overflow-y: auto; }
.modal-body form { display: grid; gap: var(--r-16); }
.modal-body .melding { margin-bottom: var(--r-16); }
.link-knop {
    display: block; width: 100%; padding: var(--r-4) 0; background: none; border: 0;
    font: inherit; font-size: var(--t-klein); font-weight: 500; color: var(--blauw-700); cursor: pointer; text-align: center;
}
.link-knop:hover { text-decoration: underline; }
.btn-ms {
    display: flex; align-items: center; justify-content: center; gap: var(--r-8);
    width: 100%; padding: var(--r-12) var(--r-16); margin-bottom: var(--r-16);
    background: #fff; border: var(--lijn) solid var(--petrol-200); border-radius: var(--radius-md);
    font: inherit; font-size: var(--t-klein); font-weight: 500; color: var(--petrol-900); text-decoration: none;
}
.btn-ms:hover { background: var(--petrol-50); }
.scheiding { display: flex; align-items: center; gap: var(--r-12); margin: 0 0 var(--r-16); color: var(--petrol-500); font-size: var(--t-label-k); }
.scheiding::before, .scheiding::after { content: ''; flex: 1; height: 1px; background: var(--petrol-100); }

/* ---------- Tussenbreedte ---------- */
@media (max-width: 1100px) {
    :root { --vak-y: 6rem; --ster-w: 36rem; }
    .hero-inner { grid-template-columns: minmax(0, 1fr); padding-block: 5rem; }
    .hero-merk .product { max-width: 33.5rem; width: 100%; }
    .hero-ster { left: 50%; top: -6rem; }
    .naast, .naast.links-smal { grid-template-columns: minmax(0, 1fr); gap: var(--r-48); }
    .naast .kaart-wit { max-width: var(--kaart-w); }
    .kenmerken-4 { --kolommen: 2; }
    .kenmerken-3 { --kolommen: 2; }
    .stappen { --stappen: 3; row-gap: var(--r-40); }
    .rij { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); gap: var(--r-32); }
    .stromen-teken { width: 14rem; }
}

/* ---------- Smal ---------- */
@media (max-width: 760px) {
    :root {
        --vak-y: 4.5rem; --kop-gap: 2.5rem; --land-pad: 1rem; --merk-h: 2.2rem;
        --prijs-groot: 2.5rem; --ster-w: 26rem;
    }
    .top-links { display: none; }                   /* de footer heeft dezelfde routes */
    .hero-inner { padding-block: 3.5rem 4rem; gap: var(--r-48); }
    .product { height: 31rem; }
    .p-kaart { left: 6%; width: 94%; }
    .p-feiten { gap: var(--r-16); }
    .kop-met-foto, .kop-met-foto.foto-groot { grid-template-columns: minmax(0, 1fr); gap: var(--r-32); }
    .stromen-rij { grid-template-columns: minmax(0, 1fr); gap: var(--r-24); }
    .stroom:first-child, .stroom:last-child { text-align: center; }
    .stromen-teken { justify-self: center; width: 10rem; }
    .rij { grid-template-columns: minmax(0, 1fr); gap: var(--r-12); padding-block: var(--r-32); }
    .rij-teken { width: 2.25rem; }
    .kenmerken, .kenmerken-3, .kenmerken-4 { --kolommen: 1; gap: var(--r-32); }
    .stappen { --stappen: 1; }
    .overstap { flex-direction: column; align-items: flex-start; gap: var(--r-32); }
    .overstap .foto { width: 100%; }
    .agenda li { grid-template-columns: minmax(0, 1fr); gap: var(--r-4); }
    .kaart-wit { padding: var(--r-24); }
    .velden-2 { grid-template-columns: minmax(0, 1fr); }
    .modal-kop { padding: var(--r-20) var(--r-24) var(--r-12); }
    .modal-body { padding: 0 var(--r-24) var(--r-24); }
}