/* ============================================================
   XION HOMEPAGE: assets/css/homepage.css (25-10-2026)
   De nieuwe homepage uit de schets "Nieuwe homepage" van 19-10-2026.
   Alleen voor index.php; de andere publieke pagina's houden
   landing-v2.css. Licht-only, net als de rest van de marketingsite.

   Kleuren: alleen hier in :root een hex, allemaal uit huisstijl.html
   (tests/test_homepage.php controleert het). Daaronder alleen tokens.
   Hoeken: kaarten asymmetrisch (Work leunt links, Family gespiegeld),
   knoppen en velden niet, behalve de marketingknop (huisstijl.html).
   ============================================================ */
:root{
    --ink:   #1F0938;   /* primary-950 */
    --tekst: #2A2536;   /* neutral-800 */
    --dof:   #564F62;   /* neutral-600: lopende tekst die zachter mag */
    --grijs: #726B7E;   /* neutral-500: het lichtste grijs voor tekst op licht (4,8:1) */
    --lijn:  #E5E0EA;   /* neutral-200 */
    --vlak:  #F4F1F8;   /* neutral-100 */
    --grond: #FAFAFB;   /* neutral-50 */
    --wit:   #FFFFFF;
    --v600:  #722BC4;
    --v700:  #5D1EA0;
    --v100:  #F0E0FF;
    --v50:   #FAF3FF;
    --m700:  #BC2065;   /* magenta als tekst (5,4:1 op magenta-50) */
    --m600:  #D32C71;
    --m100:  #FFE2EE;
    --m50:   #FFF0F7;
    --jade:  #16A37A;   /* alleen als vorm (vinkje), nooit als tekst */
    --jade-700: #0F6B53;
    --donker:#0E0B1A;   /* neutral-950: de voet */
    --voet-tekst: #C9C2D1;  /* neutral-300 op de voet */
    --voet-dof:   #9D95A6;  /* neutral-400 op de voet (6,7:1) */

    --rw:  28px 6px 28px 6px;   /* Work, groot */
    --rws: 12px 4px 12px 4px;   /* Work, klein */
    --rfs: 4px 12px 4px 12px;   /* Family, klein */

    --sch-kaart: 0 10px 30px rgba(31,9,56,.06);
    --sch-scherm: 0 18px 44px rgba(31,9,56,.12);
    --sch-paneel: 0 24px 60px rgba(31,9,56,.14), 0 6px 18px rgba(31,9,56,.07);

    --f-kop: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
    --f-tekst: 'Manrope', system-ui, sans-serif;
    --f-num: 'JetBrains Mono', ui-monospace, monospace;

    /* Eén ritme voor alle beweging: zacht inzetten, rustig uitlopen. */
    --x-ease: cubic-bezier(.22,1,.36,1);
    --x-snel: 180ms;
    --x-mid: 420ms;
    --x-traag: 700ms;
}

body{ margin:0; background:var(--grond); -webkit-text-size-adjust:100%; }
.hp{ font-family:var(--f-tekst); color:var(--tekst); background:var(--grond); font-size:17px; line-height:1.6;
     /* Niets mag de pagina breder maken dan het scherm, ook niet halverwege een
        animatie. clip (en niet hidden) houdt de kopbalk werkend. */
     overflow-x:clip; }
.hp *{ box-sizing:border-box; }
.hp [hidden]{ display:none !important; }
.hp h1, .hp h2, .hp h3{ font-family:var(--f-kop); color:var(--ink); margin:0; text-wrap:balance; line-height:1.08; }
.hp h1{ font-size:clamp(2.5rem,4.6vw,3.9rem); font-weight:700; letter-spacing:-.035em; }
.hp h2{ font-size:clamp(1.9rem,3.4vw,2.8rem); font-weight:700; letter-spacing:-.035em; }
.hp h3{ font-size:1.12rem; font-weight:700; line-height:1.25; }
.hp p{ margin:0; }
.hp a{ color:var(--v700); }
.hp a:hover{ color:var(--ink); }
.hp img{ max-width:100%; }
.hp a:focus-visible, .hp button:focus-visible, .hp [tabindex]:focus-visible{ outline:2px solid var(--v600); outline-offset:3px; border-radius:6px; }
.hp [id]{ scroll-margin-top:84px; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
.dof{ color:var(--dof); }
.klein{ font-size:15px; }

/* Naar de inhoud: alleen zichtbaar als je met Tab binnenkomt. */
.overslaan{ position:absolute; left:16px; top:-60px; z-index:40; background:var(--ink); color:var(--wit) !important; padding:10px 16px; border-radius:10px; font-weight:700; text-decoration:none; }
.overslaan:focus{ top:12px; }

/* ── Kopbalk: blijft staan, met een zachte rand zodra je scrolt ── */
.kopbalk{ position:sticky; top:0; z-index:30; background:rgba(250,250,251,0);
    transition:background var(--x-mid) var(--x-ease), box-shadow var(--x-mid) var(--x-ease); }
.kopbalk.gescrold{ background:rgba(250,250,251,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--lijn); }
.nav{ display:flex; align-items:center; gap:28px; padding:14px 0; }
.merk{ display:block; flex:none; }
.merk img{ height:30px; width:auto; display:block; }
.nav .links{ display:flex; gap:24px; margin-left:12px; flex-wrap:wrap; }
.nav .links a{ position:relative; color:var(--tekst); text-decoration:none; font-weight:600; font-size:15px; }
.nav .links a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; border-radius:2px; background:var(--v600);
    transform:scaleX(0); transform-origin:left; transition:transform var(--x-mid) var(--x-ease); }
.nav .links a:hover::after{ transform:scaleX(1); }
.nav .rechts{ margin-left:auto; display:flex; align-items:center; gap:16px; }
.nav .rechts a.in{ color:var(--ink); font-weight:700; text-decoration:none; font-size:15px; }
.taal{ display:flex; gap:2px; font-size:13px; font-weight:700; }
.taal a{ color:var(--grijs); text-decoration:none; padding:4px 7px; border-radius:6px; }
.taal a.aan{ color:var(--ink); background:var(--vlak); }

/* ── Knoppen: de marketingknop mag zijn asymmetrische hoek niet hebben; hier
   dus gewoon rond, zoals in de schets ── */
.knop{ display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:12px; font-family:var(--f-tekst); font-weight:600; font-size:16px;
    text-decoration:none; border:1.5px solid transparent; line-height:1.2; cursor:pointer;
    transition:background var(--x-snel) ease, border-color var(--x-snel) ease, transform 120ms ease; }
.knop:active{ transform:scale(.98); }
.hp .knop.vol{ background:var(--v600); color:var(--wit); }
.hp .knop.vol:hover{ background:var(--v700); color:var(--wit); }
.hp .knop.rand{ border-color:var(--lijn); background:var(--wit); color:var(--ink); }
.hp .knop.rand:hover{ border-color:var(--v600); }
.hp .knop.fam{ background:var(--m600); color:var(--wit); }
.hp .knop.fam:hover{ background:var(--m700); color:var(--wit); }
.knop.klein{ padding:9px 16px; font-size:15px; border-radius:10px; }
.ooglijn{ font-weight:700; font-size:15px; color:var(--v700); }
.fam .ooglijn{ color:var(--m700); }

/* ── Bovenkant ── */
.hero{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:56px; align-items:center; padding:56px 0 40px; }
.hero .tekstkant{ display:flex; flex-direction:column; gap:22px; }
.hero .lead{ font-size:20px; color:var(--dof); max-width:30em; }
.knoppen{ display:flex; gap:12px; flex-wrap:wrap; }
.hero .klein{ font-size:14px; color:var(--dof); }
.beeldstapel{ position:relative; padding:38px 0 64px 0; }
.scherm{ display:block; width:100%; height:auto; border:1px solid var(--lijn); background:var(--wit); box-shadow:var(--sch-scherm); }
.scherm.w{ border-radius:var(--rws); }
.scherm.f{ border-radius:var(--rfs); }
.beeldstapel .boven{ position:relative; width:86%; }
.beeldstapel .onder{ position:absolute; right:0; bottom:0; width:58%; }
.etiket{ position:absolute; font-weight:700; font-size:13px; padding:5px 11px; border-radius:999px; }
.etiket.w{ background:var(--v100); color:var(--v700); left:0; top:-38px; }
.etiket.f{ background:var(--m100); color:var(--m700); right:14px; bottom:34%; }

/* ── Demovideo ── */
.video{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:32px; align-items:center; background:var(--wit); border:1px solid var(--lijn); border-radius:var(--rws); padding:18px; margin:8px 0 72px; }
.video .poster{ position:relative; border-radius:10px; overflow:hidden; background:var(--donker); }
.video video{ display:block; width:100%; height:auto; aspect-ratio:16 / 9; background:var(--donker); }
.video .play{ position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px 0 0 -36px; border-radius:50%; border:0; padding:0; background:var(--v600);
    display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--x-snel) ease, transform var(--x-mid) var(--x-ease); }
.video .play:hover{ background:var(--v700); transform:scale(1.05); }
.video .play svg{ fill:var(--wit); margin-left:3px; }
.video .tekst{ display:flex; flex-direction:column; gap:10px; padding-right:12px; }
.video .tekst h2{ font-size:1.5rem; letter-spacing:-.02em; }
.video .tekst p{ color:var(--dof); }

/* ── Een gewone week ── */
.week{ padding:72px 0 84px; }
.week-kop{ max-width:660px; display:flex; flex-direction:column; gap:14px; margin-bottom:34px; }
.week-kop p{ color:var(--dof); }
.dagen{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.dag{ position:relative; overflow:hidden; background:var(--wit); border:1px solid var(--lijn); border-radius:var(--rws); padding:20px 20px 20px 23px;
    display:flex; flex-direction:column; gap:10px; box-shadow:var(--sch-kaart);
    transition:transform var(--x-mid) var(--x-ease), box-shadow var(--x-mid) var(--x-ease); }
/* De rail van 3px: links in Work, rechts in Family (DNA 02). */
.dag::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--v600); }
.dag.f{ border-radius:var(--rfs); padding:20px 23px 20px 20px; }
.dag.f::before{ left:auto; right:0; background:var(--m600); }
.dag.vol{ margin-top:18px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:28px; align-items:start; }
.vol-tekst{ display:flex; flex-direction:column; gap:10px; }
.dag-kop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dag-tijd{ font-family:var(--f-num); font-size:13px; font-weight:700; color:var(--ink); background:var(--vlak); padding:3px 9px; border-radius:6px; }
.dag-plan{ font-size:12.5px; font-weight:700; color:var(--dof); text-align:right; }
.dag-plan.betaald{ color:var(--v700); }
.dag.f .dag-plan.betaald{ color:var(--m700); }
.dag h3{ font-size:1.1rem; }
.dag p{ color:var(--dof); font-size:15px; }
.mini{ margin-top:auto; background:var(--grond); border:1px solid var(--lijn); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:7px; font-size:14px; }
.mini-label{ font-size:12px; font-weight:700; color:var(--dof); margin-top:2px; }
.mini-rij{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--wit); border:1px solid var(--lijn); border-radius:8px; padding:7px 10px; color:var(--ink);
    transition:background var(--x-mid) ease, border-color var(--x-mid) ease; }
.mini-rij .getal{ font-family:var(--f-num); font-size:12.5px; color:var(--dof); white-space:nowrap; }
.mini-rij.nieuw{ border-color:var(--m600); background:var(--m50); }
.mini-rij.nieuw .getal{ color:var(--m700); font-weight:700; }
.mini-rij.nieuw.w{ border-color:var(--v600); background:var(--v50); }
.mini-rij.nieuw.w .getal{ color:var(--v700); }
.erbij-groep{ display:flex; flex-direction:column; gap:7px; }
.bronnen{ display:flex; flex-wrap:wrap; gap:6px; }
.bron{ font-size:12.5px; font-weight:700; background:var(--wit); border:1px solid var(--lijn); border-radius:6px; padding:3px 8px; color:var(--tekst); }
.pijl{ font-size:13px; font-weight:700; color:var(--v700); }
.kolommetjes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.kolommetje{ background:var(--vlak); border-radius:6px; padding:6px; display:flex; flex-direction:column; gap:5px; min-width:0; }
.kolommetje b{ font-size:11.5px; color:var(--dof); }
.kaartje{ background:var(--wit); border:1px solid var(--lijn); border-left:3px solid var(--v600); border-radius:6px 2px 6px 2px; padding:4px 6px; font-size:11.5px; color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bubbel{ align-self:flex-start; max-width:90%; background:var(--ink); color:var(--wit); border-radius:14px 14px 14px 4px; padding:8px 12px; font-size:14px; }
.bubbel.siri{ align-self:flex-end; background:var(--wit); color:var(--ink); border:1px solid var(--lijn); border-radius:14px 14px 4px 14px; }
.balk{ height:8px; background:var(--m100); border-radius:99px; overflow:hidden; }
.balk span{ display:block; height:100%; width:100%; background:var(--m600); }
.probeer{ font-size:13px; font-weight:700; color:var(--m700); }
.dag p.probeer{ color:var(--m700); font-size:13px; }
.mini .knop{ justify-content:center; }
.mini.vol-mini{ margin-top:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.vol-kol{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.vol-kol .knop{ margin-top:2px; }
.veeg{ display:none; font-size:13px; font-weight:700; color:var(--dof); margin:-18px 0 14px !important; }
.week-slot{ margin-top:34px !important; font-weight:700; color:var(--ink); font-size:17px; }
.week-slot span{ color:var(--dof); font-weight:500; }

/* ── Werk en thuis ── */
.sectie{ padding:80px 0; }
.sectie.wit{ background:var(--wit); }
.sectie.fam{ background:var(--m50); }
.sectie.vlak{ background:var(--vlak); }
.twee{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:56px; align-items:start; }
.twee.om{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
.kolomtekst{ display:flex; flex-direction:column; gap:20px; }
.punten{ display:flex; flex-direction:column; gap:18px; margin-top:4px; }
.punt{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:4px 14px; }
.punt .stip{ width:28px; height:28px; border-radius:8px; background:var(--v100); display:flex; align-items:center; justify-content:center; grid-row:span 2; }
.punt .stip span{ width:10px; height:10px; border-radius:3px; background:var(--v600); display:block; }
.fam .punt .stip{ background:var(--m100); }
.fam .punt .stip span{ background:var(--m600); }
.punt p{ color:var(--dof); font-size:16px; }
.verder{ display:flex; gap:20px; flex-wrap:wrap; font-weight:700; font-size:15px; }
.hp .fam .verder a{ color:var(--m700); }
.hp .fam .verder a:hover{ color:var(--ink); }
.chaos{ margin-top:28px; background:var(--vlak); border-radius:var(--rws); padding:18px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.chaos .wat{ display:flex; flex-direction:column; gap:6px; flex:1 1 360px; min-width:0; }
.chaos .wat b{ color:var(--ink); font-size:15px; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ font-family:var(--f-num); font-size:12.5px; background:var(--wit); border:1px solid var(--lijn); border-radius:8px; padding:4px 9px; color:var(--dof); }
.fotos{ display:flex; flex-direction:column; gap:16px; }

/* ── Veiligheid ── */
.veilig-kop{ display:flex; flex-direction:column; gap:14px; }
.veilig-kop p{ color:var(--dof); max-width:40em; }
.veilig{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:32px 0 22px; }
.vak{ background:var(--wit); border:1px solid var(--lijn); border-radius:var(--rws); padding:22px; display:flex; flex-direction:column; gap:10px; }
.vak .wie{ font-weight:700; font-size:14px; color:var(--v700); }
.vak p{ color:var(--dof); font-size:16px; }

/* ── Prijzen ── */
.sectie.prijzen{ background:linear-gradient(var(--grond), var(--v50) 30%, var(--grond)); }
.pk-kop{ max-width:600px; display:flex; flex-direction:column; gap:14px; margin-bottom:34px; }
.pk-kop p{ color:var(--dof); }
.pk-rij{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:16px; }
.pk-seg{ display:inline-flex; border:1px solid var(--lijn); background:var(--wit); padding:5px; border-radius:14px 5px 14px 5px; box-shadow:0 4px 14px rgba(31,9,56,.10); }
.pk-seg button{ font-family:var(--f-tekst); font-size:15px; font-weight:600; border:none; background:transparent; color:var(--grijs); padding:11px 24px; cursor:pointer; border-radius:10px 4px 10px 4px;
    transition:background var(--x-mid) var(--x-ease), color var(--x-mid) var(--x-ease); }
.pk-seg button.aan{ background:var(--ink); color:var(--wit); }
.pk-jaar{ font-size:13px; font-weight:700; color:var(--jade-700); visibility:hidden; }
.jaarlijks .pk-jaar{ visibility:visible; }
.pk-omg{ margin:0 0 30px !important; font-size:15px; font-weight:600; color:var(--dof); max-width:640px; }
.pk-panel{ background:var(--wit); border:1px solid var(--lijn); border-radius:36px 8px 36px 8px; box-shadow:var(--sch-paneel); overflow:hidden; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.pk-panel.fam{ border-radius:8px 36px 8px 36px; }
.pk-plan{ padding:40px 34px 36px; border-left:1px solid var(--vlak); display:flex; flex-direction:column; transition:background var(--x-mid) ease; }
.pk-plan:first-child{ border-left:none; }
.pk-plan.hot{ background:var(--v50); }
.pk-panel.fam .pk-plan.hot{ background:var(--m50); }
.pk-tag{ font-size:12.5px; font-weight:700; color:var(--grijs); height:22px; display:block; }
.pk-plan.hot .pk-tag{ color:var(--v600); }
.pk-panel.fam .pk-plan.hot .pk-tag{ color:var(--m700); }
.pk-plan h3{ font-size:27px; font-weight:700; margin:6px 0 2px; }
.pk-sub{ font-size:14px; color:var(--grijs); margin-bottom:20px !important; }
.pk-bedrag{ font-family:var(--f-num); font-weight:700; font-size:44px; color:var(--ink); letter-spacing:-.02em; line-height:1; margin-bottom:24px; }
.pk-bedrag small{ font-family:var(--f-num); font-size:13px; color:var(--grijs); font-weight:500; letter-spacing:0; }
.pk-bedrag .pj{ display:none; }
.jaarlijks .pk-bedrag .pm{ display:none; }
.jaarlijks .pk-bedrag .pj{ display:inline; }
.pk-plan ul{ list-style:none; margin:0 0 30px; padding:0; display:grid; gap:11px; }
.pk-plan li{ position:relative; padding-left:24px; font-size:15px; color:var(--dof); }
.pk-plan li::before{ content:"\2713"; color:var(--jade); font-weight:800; position:absolute; left:0; top:0; }
.pk-plan li b{ color:var(--ink); }
.pk-plan .knop{ margin-top:auto; justify-content:center; }
.voetnoot{ margin-top:18px !important; font-size:15px; color:var(--dof); }

/* ── Wie erachter zit ── */
.nick{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:40px; align-items:start; }
.foto-nick{ display:block; width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; border-radius:var(--rws); border:1px solid var(--lijn); }
.citaat{ font-family:var(--f-kop); font-weight:700; font-size:1.55rem; line-height:1.3; color:var(--ink); }
.bijgewerkt{ font-size:15px; color:var(--dof); }
.bijgewerkt .mono{ font-family:var(--f-num); font-size:13.5px; font-weight:700; color:var(--ink); background:var(--vlak); padding:3px 9px; border-radius:6px; margin-right:6px; }
.slot{ background:var(--wit); border:1px solid var(--lijn); border-radius:var(--rw); padding:40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:48px; }
.slot-tekst{ display:flex; flex-direction:column; gap:8px; }
.slot-tekst p{ color:var(--dof); }
.slot h2{ font-size:clamp(1.6rem,2.6vw,2.2rem); }

/* ── Voet ── */
.voet{ background:var(--donker); color:var(--voet-tekst); padding:56px 0 40px; font-size:15px; }
.voet img{ height:28px; width:auto; display:block; }
.voet .tagline{ margin-top:14px; max-width:22em; }
.voet .kol{ display:grid; grid-template-columns:1.4fr repeat(4,minmax(0,1fr)); gap:32px; }
.voet h2{ font-family:var(--f-tekst); color:var(--wit); font-size:15px; font-weight:700; letter-spacing:0; margin:0 0 10px; }
.hp .voet a{ color:var(--voet-tekst); text-decoration:none; display:block; padding:3px 0; }
.hp .voet a:hover{ color:var(--wit); }
.voet .nlnote{ margin-top:28px; font-size:14px; color:var(--voet-dof); }
.voet .onder{ margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:14px; color:var(--voet-dof);
    display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; }
.hp .voet .onder a{ display:inline; color:var(--voet-dof); padding:0; }
.hp .voet .onder a:hover{ color:var(--wit); }

/* ── Menu: de pagina waar je bent ── */
.nav .links a.hier{ color:var(--v700); }
.nav .links a.hier::after{ transform:scaleX(1); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── Voor bedrijven: het donkere blok tussen Werk en Thuis (ronde 2, 25-10-2026) ── */
.bedrijf{ background:var(--ink); color:var(--voet-tekst); padding:80px 0; }
.hp .bedrijf h2, .hp .bedrijf h3{ color:var(--wit); }
.hp .bedrijf .ooglijn{ color:var(--v100); }
.hp .bedrijf a:not(.knop){ color:var(--v100); }
.bedrijf-in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
.bedrijf-tekst{ display:flex; flex-direction:column; gap:20px; }
.bedrijf-tekst .lead{ font-size:19px; }
.bedrijf-prijs{ font-size:15px; }
.bedrijf-prijs b{ font-family:var(--f-num); color:var(--wit); font-size:22px; margin-right:6px; }
.hp .knop.wit{ background:var(--wit); color:var(--ink); }
.hp .knop.wit:hover{ background:var(--v100); color:var(--ink); }
.hp .knop.licht{ border-color:rgba(255,255,255,.35); background:transparent; color:var(--wit); }
.hp .knop.licht:hover{ border-color:var(--wit); color:var(--wit); }
.vier{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:48px; }
.vak-d{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--rws); padding:20px; display:flex; flex-direction:column; gap:8px; }
.vak-d .nr{ font-family:var(--f-num); font-size:13px; font-weight:700; color:var(--v100); }
.vak-d p{ font-size:15px; }
.bedrijf .noot{ margin-top:28px !important; font-size:15px; }

/* Toegang per project: een voorbeeld met verzonnen namen, geen echte gegevens. */
.matrix{ background:var(--wit); border-radius:var(--rw); padding:22px; color:var(--tekst); box-shadow:0 24px 60px rgba(14,11,26,.45); }
.matrix-kop{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.matrix-kop b{ font-family:var(--f-kop); color:var(--ink); font-size:18px; }
.matrix-kop span{ font-size:13px; color:var(--grijs); }
.m-rij{ display:grid; grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr)); align-items:center; gap:8px; padding:9px 0; border-top:1px solid var(--vlak); font-size:14px; }
.m-rij.kop{ border-top:none; font-size:12.5px; font-weight:700; color:var(--dof); }
.m-rij.kop span + span{ text-align:center; }
.m-naam{ display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:600; min-width:0; flex-wrap:wrap; }
.av{ width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--wit); background:var(--v600); flex:none; }
.av.m{ background:var(--m700); }
.av.j{ background:var(--jade-700); }
.av.d{ background:var(--dof); }
.vink{ width:22px; height:22px; border-radius:6px; margin:0 auto; display:flex; align-items:center; justify-content:center; color:var(--wit); }
.vink.aan{ background:var(--v600); }
.vink.uit{ border:1.5px solid var(--lijn); }
.pil{ font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--vlak); color:var(--dof); }

/* ── Prijskaart: de weg naar alles wat erin zit ── */
.pk-plan .alles{ margin-top:14px; text-align:center; font-size:15px; font-weight:700; }

/* ── Vragen: blok op de homepage en de pagina /vragen ── */
.vragen-in{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:56px; align-items:start; }
.vragen-tekst{ display:flex; flex-direction:column; gap:18px; }
.vragen-tekst p{ color:var(--dof); }
.vraag{ border-top:1px solid var(--lijn); }
.vraag:last-child{ border-bottom:1px solid var(--lijn); }
.vraag summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; font-weight:700; color:var(--ink); font-size:17px; }
.vraag summary::-webkit-details-marker{ display:none; }
.vraag summary::after{ content:"+"; font-family:var(--f-num); color:var(--v600); font-size:20px; font-weight:500; flex:none; }
.vraag[open] summary::after{ content:"\2212"; }
.hp .vraag summary:focus-visible{ outline:2px solid var(--v600); outline-offset:3px; border-radius:6px; }
.vraag .antwoord{ padding:0 0 18px; color:var(--dof); font-size:16px; max-width:40em; }
.vraag .antwoord p + p{ margin-top:10px; }
.pagina-kop{ padding:48px 0 32px; display:flex; flex-direction:column; gap:16px; max-width:720px; }
.pagina-kop .lead{ font-size:20px; color:var(--dof); }
.vragen-indeling{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:56px; align-items:start; padding-bottom:24px; }
.onderwerpen{ position:sticky; top:90px; display:flex; flex-direction:column; gap:4px; }
.hp .onderwerpen a{ display:block; padding:9px 14px; border-radius:10px 4px 10px 4px; text-decoration:none; font-weight:600; font-size:15px; color:var(--tekst); }
.hp .onderwerpen a:hover{ background:var(--v100); color:var(--v700); }
.vragen-groep{ margin-bottom:44px; }
.hp .vragen-groep h2{ font-size:1.6rem; letter-spacing:-.02em; margin-bottom:10px; }

/* ── /prijzen: alle plannen naast elkaar ── */
.tabel-kader{ background:var(--wit); border:1px solid var(--lijn); border-radius:36px 8px 36px 8px; box-shadow:var(--sch-paneel); overflow:hidden; }
.tabel-kader.fam{ border-radius:8px 36px 8px 36px; }
.tabel{ width:100%; border-collapse:collapse; }
.tabel th, .tabel td{ padding:14px 20px; border-top:1px solid var(--vlak); text-align:left; font-weight:400; vertical-align:middle; }
.tabel tr > :nth-child(3){ background:var(--v50); }
.tabel-kader.fam .tabel tr > :nth-child(3){ background:var(--m50); }
.tabel thead th, .tabel thead td{ border-top:none; padding:26px 20px 22px; vertical-align:bottom; }
.t-uitleg{ color:var(--dof); font-size:15px; width:34%; }
.t-plan{ scroll-margin-top:100px; }
.t-plan > span{ display:block; }
.t-plan .tag{ font-size:12.5px; font-weight:700; color:var(--grijs); min-height:20px; }
.t-plan .tag.hot{ color:var(--v600); }
.tabel-kader.fam .t-plan .tag.hot{ color:var(--m700); }
.t-plan .naam{ font-family:var(--f-kop); font-weight:700; font-size:24px; color:var(--ink); line-height:1.2; }
.t-plan .bedrag{ font-family:var(--f-num); font-weight:700; font-size:30px; color:var(--ink); line-height:1.2; margin:4px 0 12px; }
.t-plan .bedrag small{ font-size:12.5px; color:var(--grijs); font-weight:500; }
.t-plan .bedrag .pj{ display:none; }
.jaarlijks .t-plan .bedrag .pm{ display:none; }
.jaarlijks .t-plan .bedrag .pj{ display:inline; }
.t-plan .knop{ width:100%; justify-content:center; }
.tabel .t-groep th{ padding:22px 20px 8px; font-family:var(--f-kop); font-weight:700; font-size:17px; color:var(--ink); border-top:1px solid var(--lijn); background:var(--grond); }
.tabel th.t-naam{ color:var(--ink); font-weight:600; font-size:15px; }
.t-naam small{ display:block; font-weight:500; color:var(--grijs); font-size:13px; }
.tabel td.t-cel{ text-align:center; font-size:15px; color:var(--ink); }
.t-cel.getal{ font-family:var(--f-num); font-size:13.5px; }
.t-cel .ja{ color:var(--jade); font-weight:800; font-size:18px; }
.t-cel .nee{ color:var(--grijs); font-size:18px; }
.t-cel .zitin{ display:none; }
.t-kies{ display:none; }
.prijs-duo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:28px; }
.prijs-duo ul{ margin:0; padding-left:20px; display:grid; gap:6px; color:var(--dof); font-size:16px; }
.betalen{ margin-top:48px; display:flex; flex-direction:column; gap:12px; max-width:760px; }
.hp .betalen h2{ font-size:1.7rem; letter-spacing:-.02em; }
.betalen ul{ margin:0; padding-left:20px; display:grid; gap:6px; color:var(--dof); }
.hp .vak h2.h3{ font-size:1.12rem; letter-spacing:0; line-height:1.25; }
.prijzen-pagina .slot, main > .wrap > .slot{ margin-bottom:80px; }

/* ── Kleinere schermen ── */
@media (max-width:900px){
    .bedrijf{ padding:56px 0; }
    .bedrijf-in, .vragen-in, .vragen-indeling, .prijs-duo{ grid-template-columns:minmax(0,1fr); gap:28px; }
    .vier{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .onderwerpen{ position:static; flex-direction:row; flex-wrap:wrap; gap:8px; }
    .hp .onderwerpen a{ border:1px solid var(--lijn); background:var(--wit); }
}
/* Op een telefoon past de tabel niet: daar kies je één plan, en bij wat er
   niet in zit staat in welk plan het wel zit. */
@media (max-width:760px){
    .t-kies{ display:flex; margin-bottom:12px; }
    .t-kies button{ flex:1; }
    .tabel, .tabel thead, .tabel tbody{ display:block; }
    .tabel tr{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .tabel tr > *{ background:transparent !important; border-top:none; }
    .tabel tbody tr{ border-top:1px solid var(--vlak); }
    .tabel th, .tabel td{ padding:11px 16px; }
    .tabel thead tr{ background:var(--v50); }
    .tabel-kader.fam .tabel thead tr{ background:var(--m50); }
    .tabel thead .t-uitleg{ display:none; }
    .tabel thead .t-plan{ flex:1; padding:18px 16px; }
    .tabel .t-groep th{ flex:1; padding:14px 16px 4px; }
    .tabel th.t-naam{ flex:1; }
    .tabel td.t-cel{ text-align:right; }
    .t-cel .nee{ display:none; }
    .t-cel .zitin{ display:inline; font-size:13px; color:var(--grijs); }
    .tabel-kader[data-toon="1"] tr > :nth-child(3), .tabel-kader[data-toon="1"] tr > :nth-child(4),
    .tabel-kader[data-toon="2"] tr > :nth-child(2), .tabel-kader[data-toon="2"] tr > :nth-child(4),
    .tabel-kader[data-toon="3"] tr > :nth-child(2), .tabel-kader[data-toon="3"] tr > :nth-child(3){ display:none; }
    .tabel .t-groep th{ display:block !important; }
    .vier{ grid-template-columns:minmax(0,1fr); }
}

/* ── Kleinere schermen ── */
@media (max-width:1080px){
    .voet .kol{ grid-template-columns:repeat(3,minmax(0,1fr)); }
    .voet .kol > div:first-child{ grid-column:1 / -1; }
}
@media (max-width:900px){
    .wrap{ padding:0 18px; }
    .nav{ gap:16px; }
    .nav .links{ display:none; }
    .hero, .twee, .twee.om, .video, .nick{ grid-template-columns:minmax(0,1fr); gap:32px; }
    .hero{ padding-top:28px; }
    .veilig, .pk-panel{ grid-template-columns:minmax(0,1fr); }
    /* De week veeg je door; zondag staat eronder, over de hele breedte. */
    .dagen{ display:flex; align-items:stretch; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -18px; padding:4px 18px 14px; scroll-padding:0 18px; }
    .dag{ flex:0 0 86%; scroll-snap-align:start; }
    .dag.vol, .mini.vol-mini{ grid-template-columns:minmax(0,1fr); }
    .veeg{ display:block; }
    .week{ padding:56px 0 60px; }
    .pk-plan{ border-left:none; border-top:1px solid var(--vlak); }
    .pk-plan:first-child{ border-top:none; }
    .voet .kol{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .sectie{ padding:56px 0; }
    .foto-nick{ max-width:220px; }
    .twee.om .fotos{ order:2; }
}
@media (max-width:600px){
    .taal{ display:none; }
    .merk img{ height:26px; }
    .nav .rechts{ gap:12px; }
    .pk-seg button{ padding:10px 16px; }
    .slot{ padding:28px 22px; }
    .video{ padding:12px; }
}

/* ── Beweging (proef 19-10-2026, akkoord 25-10) ─────────────────────
   Alles staat alleen aan onder html.beweeg (gezet door homepage.js);
   wie in zijn apparaat "minder beweging" kiest, krijgt meteen de eindstand. */
html.beweeg{ scroll-behavior:smooth; }

/* Verschijnen bij het scrollen */
.beweeg [data-onthul]{ opacity:0; transform:translateY(22px); transition:opacity var(--x-traag) var(--x-ease), transform var(--x-traag) var(--x-ease); transition-delay:var(--wacht,0ms); }
.beweeg [data-onthul].te-zien{ opacity:1; transform:none; }
/* Een weekkaart heeft ook een eigen overgang voor optillen; die mag het
   verschijnen niet wegdrukken. */
.beweeg .dag[data-onthul]{ transition:opacity var(--x-traag) var(--x-ease) var(--wacht,0ms), transform var(--x-traag) var(--x-ease) var(--wacht,0ms), box-shadow var(--x-mid) var(--x-ease); }
.beweeg .dag[data-onthul].te-zien{ transition:opacity var(--x-traag) var(--x-ease) var(--wacht,0ms), transform var(--x-mid) var(--x-ease), box-shadow var(--x-mid) var(--x-ease); }

/* De bovenkant komt binnen bij het laden */
@keyframes x-op{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes x-in-rechts{ from{ opacity:0; transform:translate(28px,10px) scale(.985); } to{ opacity:1; transform:none; } }
.beweeg .hero .tekstkant > *{ animation:x-op var(--x-traag) var(--x-ease) both; animation-delay:var(--wacht,0ms); }
.beweeg .beeldstapel .boven{ animation:x-in-rechts 900ms var(--x-ease) 250ms both; }
.beweeg .beeldstapel .onder{ animation:x-in-rechts 900ms var(--x-ease) 520ms both; }
.beweeg .etiket{ animation:x-op 600ms var(--x-ease) 900ms both; }
.beeldstapel .onder img{ will-change:transform; }
@media (max-width:900px){
    .beweeg .beeldstapel .boven, .beweeg .beeldstapel .onder{ animation-name:x-op; }
}

/* Afspeelknop van de video: een paar keer een zachte ring */
@keyframes x-ring{ 0%{ box-shadow:0 0 0 0 rgba(114,43,196,.45); } 70%{ box-shadow:0 0 0 18px rgba(114,43,196,0); } 100%{ box-shadow:0 0 0 0 rgba(114,43,196,0); } }
.beweeg .video .play{ animation:x-ring 2.4s ease-out 1.2s 3; }

/* Weekkaarten: optillen en een zacht licht dat je muis volgt */
.dag::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity var(--x-mid) ease;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), rgba(114,43,196,.09), transparent 65%); }
.dag.f::after{ background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), rgba(211,44,113,.09), transparent 65%); }
@media (hover:hover){
    .dag:hover{ transform:translateY(-4px); box-shadow:0 22px 50px rgba(31,9,56,.12); }
    .dag:hover::after{ opacity:1; }
}

/* Wat er in een kaart gebeurt, gebeurt pas als je de kaart ziet */
.beweeg .dag [data-stap]{ opacity:0; transform:translateY(8px); }
.beweeg .dag.te-zien [data-stap]{ opacity:1; transform:none; transition:opacity 500ms var(--x-ease), transform 500ms var(--x-ease); transition-delay:var(--stap,0ms); }
.beweeg .dag .balk span{ width:0; }
.beweeg .dag.te-zien .balk span{ width:100%; transition:width 1.4s var(--x-ease) .5s; }
@keyframes x-gloei{ 0%{ box-shadow:0 0 0 0 rgba(211,44,113,.35); } 100%{ box-shadow:0 0 0 10px rgba(211,44,113,0); } }
.beweeg .dag.te-zien .gloei{ animation:x-gloei 1.2s ease-out 1.1s 2; }

/* Lasagne op de lijst: regels schuiven erbij, het getal telt op */
@keyframes x-erbij{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; } }
.beweeg .erbij-groep .mini-rij.erbij{ animation:x-erbij 460ms var(--x-ease) both; animation-delay:var(--stap,0ms); }
#tomaat-rij.nieuw{ border-color:var(--m600); background:var(--m50); }
#tomaat-rij.nieuw .getal{ color:var(--m700); font-weight:700; }

/* Prijzen: wisselen voelt als wisselen */
@keyframes x-wissel{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.beweeg .pk-panel.wissel{ animation:x-wissel 520ms var(--x-ease) both; }
.beweeg .pk-bedrag.wissel{ animation:x-wissel 420ms var(--x-ease) both; }

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .hp *, .hp *::before, .hp *::after{ animation:none !important; transition:none !important; }
}