/* Pietje Precies · website · pietje-precies.css
   Huisstijl (variabelen bovenaan) + website. Kleuren, letters en afstanden niet los aanpassen: alleen via de variabelen. */
:root {
  /* ---- Merkkleuren ---- */
  --pp-paars-diep: #5F10A3;    /* begin van het verloop, hoofdknop onder de muis */
  --pp-paars-donker: #7414B8;  /* knoppen en links in de software, kleine paarse tekst */
  --pp-paars-midden: #8427D6;  /* midden van het verloop */
  --pp-paars: #A747EB;         /* accent: puntjes op de i, focusring, chatballon van de klant */
  --pp-roze: #E046D3;          /* einde van het verloop, nooit los gebruiken */
  --pp-roze-licht: #F7B4EC;    /* alleen de puntjes op de i als het logo op het verloop staat */
  --pp-lila: #F6EDFD;          /* zachte tegel, actief menu-item, label "wacht op de boekhouder" */
  --pp-lila-sterk: #EBD3FB;    /* markering op een bon, geselecteerde tekst in de software */

  /* ---- Neutralen ---- */
  --pp-inkt: #1D212B;          /* koppen en tekst */
  --pp-inkt-zacht: #3D4350;    /* tekst met iets minder nadruk */
  --pp-inkt-stil: #5F6675;     /* toelichting en bijschrift, ook op lichtgrijs leesbaar */
  --pp-wit: #FFFFFF;
  --pp-grijs: #F6F7F9;         /* band op de website, achtergrond van de software */
  --pp-grijs-2: #ECEEF3;       /* vak binnen een grijs vlak, neutraal label */
  --pp-lijn: #E5E7EB;          /* randen van kaarten, tabelrijen en scheidingslijnen */
  --pp-lijn-sterk: #D5D9E0;    /* rand van invoervelden en van de tweede knop */

  /* ---- Betekeniskleuren (los van het merk) ---- */
  --pp-goed: #0B6B45;          /* klaar, ingediend, bevestigd */
  --pp-goed-licht: #E2F4EB;
  --pp-aandacht: #A34A07;      /* wacht op de klant, herinnering */
  --pp-aandacht-licht: #FCEFE3;
  --pp-aandacht-vlak: #D98A3D; /* oranje als vlak zonder tekst, bijvoorbeeld een blokje in een balk */
  --pp-fout: #B42318;          /* mislukt, vastgelopen, verwijderen */
  --pp-fout-licht: #FDECEA;

  /* ---- Het verloop en de gloed ---- */
  --pp-verloop: linear-gradient(135deg, #5F10A3 0%, #8427D6 42%, #A747EB 72%, #E046D3 100%);
  --pp-gloed-paars: rgba(167, 71, 235, 0.13); /* zachte gloed achter de bovenkant van de homepage */
  --pp-gloed-roze: rgba(224, 70, 211, 0.10);

  /* ---- Letters ---- */
  --pp-font: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  --pp-font-pen: 'Caveat', cursive; /* handgeschreven notitie, hooguit één per scherm */
  --pp-font-bon: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* alleen de kassabon op de homepage */

  /* ---- Lettergroottes op de website ---- */
  --pp-web-kop-1: clamp(38px, 4.8vw, 68px);       /* kop bovenaan: 800, regelhoogte 1,08, spatiëring -0,03em */
  --pp-web-kop-2: clamp(34px, 4.2vw, 58px);       /* kop van een sectie: 800, regelhoogte 1,04 */
  --pp-web-kop-belofte: clamp(32px, 4.4vw, 60px); /* de drie beloftes: 800, regelhoogte 1,08 */
  --pp-web-kop-slot: clamp(42px, 5.8vw, 84px);    /* de afsluitende kop: 800, regelhoogte 1 */
  --pp-web-prijs: clamp(64px, 8.6vw, 118px);      /* het bedrag in het prijsblok: 800, spatiëring -0,04em */
  --pp-web-kop-3: 25px;        /* kop van een tegel: 800, regelhoogte 1,15; loopt van 24 tot 30px */
  --pp-web-vraag: 21px;        /* veelgestelde vraag: 700, regelhoogte 1,25 */
  --pp-web-inleiding: 21px;    /* inleiding onder de kop: 400, regelhoogte 1,45 */
  --pp-web-tekst: 18px;        /* lopende tekst: 400, regelhoogte 1,5; in een tegel 20px */
  --pp-web-klein: 15px;        /* bijschrift en voettekst: 600; ook 16px */
  --pp-web-knop: 19px;         /* tekst op de hoofdknop: 700 */
  --pp-web-pen: 34px;          /* handgeschreven notitie: Caveat 600; handtekening 42px */

  /* ---- Lettergroottes in de software ---- */
  --pp-app-kop: 24px;          /* kop van een scherm: 700, spatiëring -0,02em */
  --pp-app-cijfer: 32px;       /* cijfer in een tegel: 700 */
  --pp-app-groot: 15px;        /* kop van een kaart (600) en de regel onder de schermkop */
  --pp-app-tekst: 14px;        /* basistekst, tabelcellen, menu */
  --pp-app-klein: 13px;        /* label van een tegel, knoptekst, links */
  --pp-app-micro: 12px;        /* kolomkop, statuslabel, tweede regel in een rij */

  /* ---- Vorm op de website ---- */
  --pp-radius-tegel: 28px;     /* grote tegels */
  --pp-radius-kaart: 20px;     /* veelgestelde vragen, chatballonnen */
  --pp-radius-veld: 14px;      /* rijen in een tegel */
  --pp-radius-knop: 999px;     /* knoppen en keuzes zijn een pil */
  --pp-schaduw: 0 24px 48px -28px rgba(29, 33, 43, 0.30);        /* witte tegel op wit */
  --pp-schaduw-klein: 0 14px 28px -18px rgba(29, 33, 43, 0.40);  /* chatballon van Bonnie */
  --pp-schaduw-paars: 0 24px 40px -22px rgba(70, 12, 120, 0.45); /* zwevende ballon op de grote stip */

  /* ---- Maten op de website ---- */
  --pp-web-breedte: 1200px;                       /* grootste breedte van de inhoud */
  --pp-web-marge: clamp(20px, 4vw, 40px);         /* ruimte links en rechts */
  --pp-web-sectie: 128px;                         /* ruimte boven een sectie */
  --pp-web-tegel-ruimte: clamp(24px, 3.2vw, 44px);/* binnenruimte van een tegel */
  --pp-web-tussen: 24px;                          /* ruimte tussen tegels */

  /* ---- Vorm en maten in de software ---- */
  --pp-app-radius-kaart: 12px; /* kaarten en tegels */
  --pp-app-radius-veld: 8px;   /* knoppen, invoervelden en menu-items */
  --pp-app-schaduw: 0 1px 2px rgba(29, 33, 43, 0.05);              /* kaart in rust: de lijn doet het werk */
  --pp-app-schaduw-hover: 0 6px 16px -6px rgba(95, 16, 163, 0.28); /* klikbare tegel onder de muis */
  --pp-app-ease: cubic-bezier(0.16, 1, 0.3, 1);                    /* alle overgangen, 0,15 tot 0,25 seconde */
  --pp-app-rij-hover: #FAFAFC; /* tabelrij onder de muis */
  --pp-app-zijbalk: 240px;     /* breedte van het menu links */
  --pp-app-rand: 32px;         /* ruimte links en rechts van de inhoud */
  --pp-app-ruimte: 16px;       /* ruimte tussen tegels en kaarten */
  --pp-app-rij: 52px;          /* hoogte van een tabelrij met twee regels */
  --pp-app-knop-hoogte: 34px;
  --pp-app-menu-hoogte: 38px;

  /* ---- Zelfde namen als in de demo (shadcn) ---- */
  --background: var(--pp-grijs);          /* software: lichtgrijs met witte kaarten */
  --foreground: var(--pp-inkt);
  --card: var(--pp-wit);
  --card-foreground: var(--pp-inkt);
  --popover: var(--pp-wit);
  --popover-foreground: var(--pp-inkt);
  --primary: var(--pp-paars-donker);
  --primary-foreground: var(--pp-wit);
  --secondary: var(--pp-grijs-2);
  --secondary-foreground: var(--pp-inkt);
  --muted: var(--pp-grijs-2);
  --muted-foreground: var(--pp-inkt-stil);
  --accent: var(--pp-lila);
  --accent-foreground: var(--pp-paars-donker);
  --destructive: var(--pp-fout);
  --border: var(--pp-lijn);               /* was transparent: kaarten krijgen een dunne lijn */
  --input: var(--pp-lijn-sterk);
  --ring: var(--pp-paars);
  --chart-1: var(--pp-paars-donker);
  --chart-2: var(--pp-aandacht-vlak);
  --chart-3: var(--pp-goed);
  --chart-4: var(--pp-inkt-stil);
  --chart-5: var(--pp-lila-sterk);
  --radius: 0.75rem;                      /* was 1rem: kaarten 12px, velden en knoppen 8px */

  /* ---- Oude namen uit de demo, als alias ---- */
  --v3-creme: var(--pp-grijs);
  --v3-zand: var(--pp-grijs-2);
  --v3-wit: var(--pp-wit);
  --v3-lijn: var(--pp-lijn);
  --v3-inkt: var(--pp-inkt);
  --v3-inkt-zacht: var(--pp-inkt-zacht);
  --v3-inkt-stil: var(--pp-inkt-stil);
  --v3-groen: var(--pp-paars-donker);
  --v3-groen-donker: var(--pp-paars-diep);
  --v3-groen-licht: var(--pp-lila);
  --v3-aandacht: var(--pp-aandacht);
  --v3-aandacht-licht: var(--pp-aandacht-licht);
}

/* De website staat op wit in plaats van lichtgrijs. Zet deze class op <body>. */
.pp-website {
  --background: var(--pp-wit);
}


/* ---- pagina ---- */
.ws { min-height: 100vh; display: flex; flex-direction: column; background: var(--pp-wit); color: var(--pp-inkt); font: 400 var(--pp-web-tekst)/1.5 var(--pp-font); }
.ws *, .ws *::before, .ws *::after { box-sizing: border-box; }
.ws h1, .ws h2, .ws h3, .ws p, .ws ul, .ws ol { margin: 0; }
.ws ul, .ws ol { padding: 0; list-style: none; }
.ws h1, .ws h2, .ws h3 { text-wrap: balance; }
.ws p { text-wrap: pretty; }
.ws a { color: inherit; text-decoration: none; }
.ws ::selection { background: var(--pp-paars); color: var(--pp-wit); }
.ws :focus-visible { outline: 3px solid var(--pp-inkt); outline-offset: 3px; }
.ws svg { display: block; }
.ws-wrap { width: 100%; max-width: var(--pp-web-breedte); margin: 0 auto; padding-left: var(--pp-web-marge); padding-right: var(--pp-web-marge); }
.ws-sectie { padding-top: var(--pp-web-sectie); }
.ws-band { background: var(--pp-grijs); }
.ws-kop { font-size: var(--pp-web-kop-2); line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; }
.ws-kop3 { font-size: var(--pp-web-kop-3); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.ws-inleiding { font-size: var(--pp-web-inleiding); line-height: 1.45; color: var(--pp-inkt-stil); max-width: 30em; }
.ws-stil { color: var(--pp-inkt-stil); }
.ws-klein { font-size: var(--pp-web-klein); font-weight: 600; }
.pp-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--pp-paars-donker); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---- bouwstenen ---- */
.pp-markeer { display: inline-block; white-space: nowrap; background: var(--pp-verloop); color: var(--pp-wit); padding: 0 0.14em; border-radius: 0.08em; transform: rotate(-1.2deg); }
.pp-markeer--rechts { transform: rotate(0.8deg); }
.pp-knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 30px; border: 0; border-radius: var(--pp-radius-knop); background: var(--pp-verloop); color: var(--pp-wit); font: 700 var(--pp-web-knop)/1.5 var(--pp-font); cursor: pointer; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.pp-knop:hover { filter: brightness(1.07); }
.pp-knop:active { transform: translateY(1px) scale(0.98); }
.pp-knop--klein { padding: 12px 22px; font-size: 16px; }
.pp-link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.pp-link:hover { color: var(--pp-paars-donker); }
.pp-tegel { background: var(--pp-lila); border-radius: var(--pp-radius-tegel); padding: var(--pp-web-tegel-ruimte); }
.pp-tegel--wit { background: var(--pp-wit); border: 1px solid var(--pp-lijn); }
.pp-pen { display: inline-block; font: 600 var(--pp-web-pen)/1 var(--pp-font-pen); color: var(--pp-paars-donker); transform: rotate(-3deg); }
.pp-logo { font: 800 25px/1 var(--pp-font); letter-spacing: -0.02em; color: var(--pp-inkt); white-space: nowrap; }
.pp-logo i { position: relative; display: inline-block; font-style: normal; }
.pp-logo i::after { content: ''; position: absolute; left: 50%; top: 0.02em; width: 0.25em; height: 0.25em; margin-left: -0.125em; border-radius: 50%; background: var(--pp-paars); }
.pp-lijst { display: flex; flex-direction: column; gap: 12px; }
.pp-lijst li { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; }
.pp-lijst li .pp-ico { margin-top: 3px; }
.pp-vraag { background: var(--pp-grijs); border-radius: var(--pp-radius-kaart); padding: 20px 26px; }
.pp-vraag summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: var(--pp-web-vraag); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.pp-vraag summary::-webkit-details-marker { display: none; }
.pp-vraag summary::after { content: '+'; flex: none; font-size: 30px; line-height: 1; font-weight: 500; }
.pp-vraag[open] summary::after { content: '\2212'; }
.pp-vraag p { margin-top: 12px; max-width: 34em; color: var(--pp-inkt-stil); }

/* ---- menubalk ---- */
.ws-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding-top: 18px; padding-bottom: 18px; }
.ws-nav nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; font-size: 16px; font-weight: 500; }
.ws-nav nav a:not(.pp-knop) { padding: 12px 0; }
.ws-talen { display: flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 700; }
.ws-talen a { padding: 12px 8px; }
.ws-talen a[aria-current] { color: var(--pp-paars-donker); }

/* ---- bovenaan ---- */
.ws-boven { background: radial-gradient(560px circle at 0px 420px, var(--pp-gloed-paars), transparent 70%), var(--pp-wit); }
.ws-held { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 56px; padding-top: 40px; padding-bottom: clamp(48px, 6vw, 88px); }
.ws-held-tekst { flex: 1.5 1 500px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.ws-held h1 { font-size: clamp(34px, 3.9vw, 54px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; }
.ws-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.ws-beeld { flex: 0 1 470px; min-width: 0; position: relative; height: 460px; margin: 0 auto; }
.ws-stip { position: absolute; left: 30px; top: 14px; width: 250px; height: 250px; border-radius: 50%; background: var(--pp-verloop); }
.pp-pietje { position: absolute; left: 10px; top: 0; height: 460px; width: auto; }
.ws-bonkaart { position: absolute; left: 290px; top: 96px; width: 212px; background: var(--pp-wit); border-radius: 20px; padding: 18px 20px 16px; box-shadow: var(--pp-schaduw-paars); transform: rotate(2deg); display: flex; flex-direction: column; gap: 4px; line-height: 1.3; }
.ws-bonkaart .kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.ws-bonkaart strong { font-size: 17px; font-weight: 800; }
.ws-bonkaart .bedrag { font-size: 20px; font-weight: 800; white-space: nowrap; }
.ws-bonkaart small { font-size: 13px; color: var(--pp-inkt-stil); }
.ws-bonkaart .status { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 11px 4px 8px; border-radius: 999px; background: var(--pp-goed-licht); color: var(--pp-goed); font-size: 14px; font-weight: 700; }
.ws-bonkaart .status .pp-ico { width: 16px; height: 16px; stroke: var(--pp-goed); stroke-width: 3.4; }
.ws-bonkaart .na { margin-top: 10px; font-size: 13px; line-height: 1.35; color: var(--pp-inkt-stil); }
.ws-actie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px; padding-top: 22px; padding-bottom: 22px; font-size: 18px; }
.ws-actie strong { font-weight: 800; }

/* ---- niet of, en ---- */
.ws-twee { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 72px; }
.ws-twee > * { min-width: 0; }
.ws-tekstkolom { flex: 1 1 360px; display: flex; flex-direction: column; gap: 22px; }
.ws-tabelkolom { flex: 1.2 1 460px; }
.ws-tabel { width: 100%; border-collapse: collapse; font-size: 18px; }
.ws-tabel th, .ws-tabel td { padding: 16px 8px; border-top: 1px solid var(--pp-lijn); text-align: center; }
.ws-tabel th[scope=row] { text-align: start; padding-left: 0; font-weight: 600; }
.ws-tabel thead th { border-top: 0; padding-top: 0; font-size: 15px; font-weight: 700; color: var(--pp-inkt-stil); }
.ws-tabel .pp-ico { margin: 0 auto; }
.ws-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- zo werkt het ---- */
.ws-video { position: relative; display: block; width: 100%; max-width: 960px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--pp-radius-tegel); overflow: hidden; background: var(--pp-grijs); box-shadow: var(--pp-schaduw); }
.ws-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-video .speel { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: var(--pp-verloop); display: flex; align-items: center; justify-content: center; box-shadow: var(--pp-schaduw-paars); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.ws-video:hover .speel { transform: scale(1.06); }
.ws-video .speel svg { width: 34px; height: 34px; margin-left: 5px; fill: var(--pp-wit); }
.ws-video .duur { position: absolute; right: 18px; bottom: 16px; padding: 5px 12px; border-radius: 999px; background: rgba(29, 33, 43, 0.72); color: var(--pp-wit); font-size: 14px; font-weight: 600; }
.ws-jijwij { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 48px; }
.ws-jij { flex: 1 1 300px; display: flex; flex-direction: column; gap: 18px; }
.ws-jij ol { display: flex; flex-direction: column; gap: 14px; }
.ws-jij li { display: flex; align-items: flex-start; gap: 14px; font-size: 21px; font-weight: 700; line-height: 1.3; }
.ws-nummer { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--pp-paars-donker); color: var(--pp-wit); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; }
.ws-wij { flex: 1.9 1 460px; display: flex; flex-direction: column; gap: 18px; }
.ws-wij ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 32px; }
.ws-wij li { display: flex; align-items: flex-start; gap: 12px; font-size: 19px; font-weight: 600; line-height: 1.35; }
.ws-wij li .pp-ico { margin-top: 3px; }

/* ---- persoonlijk ---- */
.ws-persoonlijk { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 48px; }
.ws-persoonlijk > * { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ws-chat { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 12px; font-size: 17px; line-height: 1.35; }
.ws-ballon-klant { align-self: flex-end; max-width: 82%; background: var(--pp-paars-donker); color: var(--pp-wit); border-radius: 20px 20px 5px 20px; padding: 11px 16px; }
.ws-ballon-ra { align-self: flex-start; max-width: 88%; background: var(--pp-wit); border-radius: 20px 20px 20px 5px; padding: 12px 16px; box-shadow: var(--pp-schaduw-klein); display: flex; flex-direction: column; gap: 6px; }
.ws-ballon-ra .wie { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--pp-paars-donker); }
.ws-ra { width: 24px; height: 24px; border-radius: 50%; background: var(--pp-paars-donker); color: var(--pp-wit); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; }
.ws-pietjekop { display: flex; align-items: center; gap: 16px; }
.ws-avatar { width: 64px; height: 64px; flex: none; border-radius: 50%; }
.ws-avatar--klein { width: 44px; height: 44px; }
.ws-namen { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 20px; }
.ws-namen li { display: flex; align-items: center; gap: 14px; background: var(--pp-grijs); border-radius: var(--pp-radius-veld); padding: 10px 14px; line-height: 1.3; }
.ws-namen strong { display: block; font-weight: 700; }
.ws-namen span { font-size: 15px; color: var(--pp-inkt-stil); }

/* ---- prijs ---- */
.ws-prijs { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 72px; padding-top: var(--pp-web-sectie); }
.ws-prijs-links { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ws-prijs-links h2 { font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.ws-bedrag { font-size: var(--pp-web-prijs); line-height: 1.08; font-weight: 800; letter-spacing: -0.04em; }
.ws-bedrag .pp-markeer { padding: 0 0.12em; }
.ws-permaand { font-size: 24px; font-weight: 600; margin-top: -8px; }
.ws-gratis { display: inline-flex; align-items: center; gap: 10px; background: var(--pp-lila); color: var(--pp-paars-donker); border-radius: 999px; padding: 9px 18px 9px 12px; font-size: 16px; font-weight: 700; }
.ws-gratis .pp-ico { width: 20px; height: 20px; }
.ws-prijs-rechts { flex: 1 1 400px; min-width: 0; }
.ws-erin { background: var(--pp-wit); border-radius: var(--pp-radius-tegel); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 18px; }
.ws-beloftes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px 48px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--pp-lijn); }
.ws-beloftes h3 { font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
.ws-beloftes p { margin-top: 8px; color: var(--pp-inkt-stil); }

/* ---- overstappen ---- */
.ws-stappen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 40px; margin-top: 36px; }
.ws-stappen h3 { font-size: 21px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; margin-top: 14px; }
.ws-stappen p { margin-top: 6px; color: var(--pp-inkt-zacht); }
.ws-gratiskaarten { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; }
.ws-gratiskaarten > div { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ws-codewoord { align-self: flex-start; display: inline-block; border: 2px solid var(--pp-paars-donker); color: var(--pp-paars-donker); border-radius: 12px; padding: 8px 18px; font-size: 21px; font-weight: 800; letter-spacing: 0.08em; }

/* ---- vertrouwen ---- */
.ws-vertrouwen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; margin-top: var(--pp-web-sectie); padding-top: 28px; padding-bottom: 28px; border-top: 1px solid var(--pp-lijn); border-bottom: 1px solid var(--pp-lijn); font-size: 16px; font-weight: 600; }
.ws-vertrouwen li { display: flex; align-items: center; gap: 10px; }

/* ---- vragen en slot ---- */
.ws-vragen { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 36px; }
.ws-vragen > div { display: flex; flex-direction: column; gap: 12px; }
.ws-slot { margin-top: var(--pp-web-sectie); }
.ws-slot-binnen { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 72px; padding-top: 96px; }
.ws-slot h2 { font-size: var(--pp-web-kop-slot); line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.ws-slot-links { flex: 1.2 1 440px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.ws-kanalen { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ws-kanalen p { font-size: 22px; line-height: 1.35; font-weight: 700; margin-bottom: 6px; }
.ws-kanalen a { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--pp-wit); border-radius: var(--pp-radius-veld); padding: 14px 18px; font-weight: 600; }
.ws-kanalen a span:last-child { color: var(--pp-inkt-stil); }
.ws-voet { margin-top: 72px; padding-top: 36px; padding-bottom: 36px; border-top: 1px solid var(--pp-lijn); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 56px; font-size: 16px; color: var(--pp-inkt-stil); }
.ws-voet > div { display: flex; flex-direction: column; gap: 6px; }
.ws-voet strong { color: var(--pp-inkt); }

/* ---- aanmelden ---- */
.ws-aanmelden { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px 72px; padding-top: 48px; padding-bottom: 96px; }
.ws-formulier { flex: 1 1 420px; max-width: 560px; min-width: 0; background: var(--pp-wit); border: 1px solid var(--pp-lijn); border-radius: var(--pp-radius-tegel); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 18px; }
.ws-veld { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 16px; }
.ws-veld input { height: 52px; padding: 0 16px; border: 1.5px solid var(--pp-lijn-sterk); border-radius: var(--pp-radius-veld); font: 400 18px/1 var(--pp-font); color: var(--pp-inkt); background: var(--pp-wit); }
.ws-veld input::placeholder { color: var(--pp-inkt-stil); }
.ws-veld input:focus { outline: 0; border-color: var(--pp-paars); box-shadow: 0 0 0 4px var(--pp-lila); }
.ws-veld small { font-weight: 400; color: var(--pp-inkt-stil); }
.ws-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-keuzes label { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--pp-lijn-sterk); border-radius: 999px; padding: 9px 16px; font-weight: 600; cursor: pointer; }
.ws-keuzes label.aan { border-color: var(--pp-paars-donker); background: var(--pp-lila); color: var(--pp-paars-donker); }
.ws-keuzes input { position: absolute; opacity: 0; }

@media (max-width: 760px) {
  .ws-navlinks { display: none; }
  .ws-held { padding-top: 16px; }
  .ws-beeld { height: 380px; flex-basis: 100%; max-width: 360px; }
  .ws-stip { left: 10px; width: 210px; height: 210px; }
  .pp-pietje { left: 0; height: 380px; }
  .ws-bonkaart { left: 166px; width: 176px; top: 80px; padding: 14px 14px 12px; }
  .ws-bonkaart .kop { flex-wrap: wrap; gap: 6px 10px; }
  .ws-bonkaart .bedrag { font-size: 18px; }
  .ws-bonkaart .status { padding: 3px 9px 3px 7px; font-size: 13px; }
  :root { --pp-web-sectie: 88px; }
}

body { margin: 0; }

/* ---- lettertypen, zelf gehost (Rubik en Caveat, SIL Open Font License) ---- */
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/rubik-arabic-400.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/rubik-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/rubik-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/rubik-arabic-500.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/rubik-latin-ext-500.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/rubik-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/rubik-arabic-600.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/rubik-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/rubik-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/rubik-arabic-700.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/rubik-latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/rubik-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/rubik-arabic-800.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/rubik-latin-ext-800.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/rubik-latin-800.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/caveat-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* ---- v3: positionering v2 (29 okt 2026) ---- */
.ws a.pp-knop { color: var(--pp-wit); }
.ws-kort { display: none; }
.ws-knopnoot { margin-top: -12px; font-size: var(--pp-web-klein); font-weight: 600; color: var(--pp-inkt-stil); }
.ws-bonkaart { width: 224px; }
.ws-bonkaart .van { display: flex; align-items: center; gap: 10px; }
.ws-bonkaart .van .ws-avatar { width: 34px; height: 34px; }
.ws-bonkaart .van div { display: flex; flex-direction: column; gap: 1px; }
.ws-bonkaart .van strong { font-size: 15px; }
.ws-bonkaart .bericht { margin-top: 10px; font-size: 16px; font-weight: 600; line-height: 1.3; }
.ws-bonkaart .kop { margin-top: 8px; }
.ws-intro { padding-top: 96px; }
.ws-intro-binnen { max-width: 880px; display: flex; flex-direction: column; gap: 12px; font-size: clamp(21px, 2vw, 26px); line-height: 1.45; color: var(--pp-inkt-zacht); }
.ws-intro-binnen strong { color: var(--pp-inkt); font-weight: 700; }
.ws-meer-titel { margin-top: 14px; max-width: 16em; }
.ws-meer { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 48px; }
.ws-meer-kaart { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ws-meer-label { font-size: var(--pp-web-klein); font-weight: 700; color: var(--pp-paars-donker); }
.ws-meer-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ws-teller { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--pp-wit); color: var(--pp-paars-donker); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: var(--pp-schaduw-klein); }
.ws-teller .pp-ico { width: 20px; height: 20px; stroke-width: 2.4; }
.ws-demo { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; font-size: 16px; line-height: 1.35; }
.ws-demo .ws-ballon-klant { display: flex; align-items: flex-end; gap: 10px; }
.ws-demo .tijd { font-size: 12px; opacity: 0.75; flex: none; }
.ws-demo .ws-ballon-ra { max-width: 94%; }
.pp-tegel--wit .ws-ballon-ra { background: var(--pp-grijs); box-shadow: none; }
.ws-avatar--mini { width: 22px; height: 22px; }
.ws-open { display: flex; flex-direction: column; margin-top: 4px; }
.ws-open li { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; padding: 8px 0; border-top: 1px solid var(--pp-lijn); }
.ws-open .n { font-weight: 600; }
.ws-open .b { font-weight: 800; font-variant-numeric: tabular-nums; text-align: end; }
.ws-open .d { grid-column: 1 / -1; font-size: 14px; color: var(--pp-inkt-stil); }
.ws-open .laat .d { color: var(--pp-aandacht); font-weight: 700; }
.ws-snel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ws-snel span { border: 1.5px solid var(--pp-paars-donker); color: var(--pp-paars-donker); border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 700; }
.ws-vergelijk { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.ws-vergelijk > div { display: flex; flex-direction: column; gap: 2px; background: var(--pp-wit); border: 1px solid var(--pp-lijn); border-radius: var(--pp-radius-veld); padding: 10px 12px; }
.ws-vergelijk .l { font-size: 13px; font-weight: 700; color: var(--pp-inkt-stil); }
.ws-vergelijk strong { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ws-vergelijk span:not(.l) { font-size: 14px; color: var(--pp-inkt-stil); }
.ws-vergelijk .beter { border-color: var(--pp-goed); }
.ws-vergelijk em { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--pp-goed); }
.ws-vergelijk em .pp-ico { width: 14px; height: 14px; stroke: var(--pp-goed); }
.ws-meer-tekst { margin-top: auto; padding-top: 18px; color: var(--pp-inkt-zacht); max-width: 30em; }
.ws-kennis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 24px; padding: 24px clamp(24px, 3vw, 40px); border: 1px solid var(--pp-lijn); border-radius: var(--pp-radius-tegel); }
.ws-kennis p { flex: 1 1 380px; font-size: 19px; color: var(--pp-inkt-zacht); }
.ws-kennis strong { color: var(--pp-inkt); }
@media (max-width: 760px) {
  .ws-lang { display: none; }
  .ws-kort { display: inline; }
  .ws-bonkaart { left: 150px; width: 196px; }
  .ws-intro { padding-top: 64px; }
  .ws-video .speel { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .ws-video .speel svg { width: 22px; height: 22px; margin-left: 3px; }
  .ws-video .duur { right: 10px; bottom: 10px; padding: 3px 9px; font-size: 12px; }
  .ws-tabel th, .ws-tabel td { padding: 14px 3px; }
  .ws-tabel thead th { font-size: 13px; }
  .ws-kennis { padding: 22px 18px; }
  .ws-kennis .pp-knop { width: 100%; padding: 16px 18px; font-size: 18px; }
  .ws-meer-kaart { flex-basis: 100%; }
  .ws-demo .ws-ballon-ra { max-width: 100%; }
}
/* ---- v3: kennismaking (positionering v2, 29 okt 2026) ---- */
.ws-kennis-links { flex: 1 1 360px; min-width: 0; max-width: 32em; display: flex; flex-direction: column; gap: 22px; }
.ws-kennis-links h1 { font-size: clamp(36px, 4.2vw, 58px); }
.ws-kennis-sub { font-size: clamp(22px, 2vw, 26px); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; margin-top: -6px; }
.ws-keuzes label:has(input:checked) { border-color: var(--pp-paars-donker); background: var(--pp-lila); color: var(--pp-paars-donker); }
.ws-keuzes label:has(input:focus-visible) { outline: 3px solid var(--pp-inkt); outline-offset: 2px; }
.ws-formulier .pp-knop { width: 100%; }
@media (max-width: 760px) { .ws-formulier .pp-knop { padding: 16px 14px; font-size: 18px; } }

/* ---- overdracht (29 okt 2026): logo, echte video, formulier, codewoorden ---- */
.ws [hidden] { display: none !important; }
.pp-logo--beeld { display: block; line-height: 0; }
.pp-logo--beeld img { display: block; height: 44px; width: auto; }
.ws a.ws-codewoord { color: var(--pp-paars-donker); }
.ws a.ws-codewoord:hover { background: var(--pp-lila); }
.ws-video video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--pp-wit); }
.ws-video .speel { border: 0; padding: 0; cursor: pointer; }
.ws-video.speelt .speel, .ws-video.speelt .duur { display: none; }
.ws-bedankt { display: flex; flex-direction: column; gap: 14px; }
.ws-bedankt[hidden], .ws-formulier [hidden] { display: none; }
.ws-bedankt h2 { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.ws-fout { color: var(--pp-fout); font-weight: 600; font-size: 15px; }
.ws-veld input:user-invalid { border-color: var(--pp-fout); }
@media (max-width: 760px) {
  .pp-logo--beeld img { height: 38px; }
}
.ws-formulier [data-pp-velden]:not([hidden]) { display: flex; flex-direction: column; gap: 18px; }