/* Familjen Grotesk (SIL Open Font License), hier zelf gehost. Bij Google Fonts zou de
   browser van elke bezoeker een verzoek naar Google doen; dat hoeft niet voor een letter. */
@font-face{font-family:'Familjen Grotesk';font-style:italic;font-weight:400 600;font-display:swap;
  src:url(letter/familjen-grotesk-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Familjen Grotesk';font-style:italic;font-weight:400 600;font-display:swap;
  src:url(letter/familjen-grotesk-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(letter/familjen-grotesk-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(letter/familjen-grotesk-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* De juridische pagina's: privacyverklaring, voorwaarden en verwerkersovereenkomst.
   Dezelfde kleuren en letter als de voorpagina, maar één kolom die prettig leest:
   lange teksten met genummerde artikelen, bedoeld om in door te zoeken. */
:root{
  /* Dezelfde kalksteen als de lichte band op de voorpagina, gemeten op de
     balustrade in de doeken: #BCA488, tint 32, opgetild tot een ondergrond waar
     donkere tekst op kan. Lange tekst leest beter op steen dan op glas, dus deze
     pagina's blijven licht terwijl de voorpagina donker is. Het accent is het
     blauw van de lucht, want het warme is te licht voor tekst.
     Nagerekend: inkt 14,2:1, zacht 5,6, blauw 7,2. */
  --wall:#F2EFEB; --vlak:#FFFFFF; --ink:#261F17; --ink-soft:#4A4238;
  --ink-faint:#675D51; --rule:#DDD7D0; --rule-soft:#E7E2DC;
  --blauw:#255274; --r:10px;
  /* De kleuren van de voorpagina, voor de band boven het helpcentrum. Dezelfde grond en
     dezelfde wolkrand, zodat de hulp bij het product hoort en niet bij een willekeurige
     helpdesk. De tekst eronder blijft kalksteen: lange uitleg leest nu eenmaal beter op steen. */
  --diep:#0A1722; --diep-2:#1C394F; --lucht-op:#87A0C1; --warm-fel:#E0AC7B;
  --sans:"Familjen Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:90px}
body{margin:0; background:var(--wall); color:var(--ink); font:17px/1.62 var(--sans)}
a{color:var(--blauw); text-underline-offset:3px}
:focus-visible{outline:2px solid var(--blauw); outline-offset:3px}

.balk{position:sticky; top:0; z-index:20; background:rgba(242,239,235,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule-soft)}
.balk-in{max-width:880px; margin:0 auto; padding:0 24px; height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.merk{font-weight:600; font-size:.95rem; letter-spacing:.09em; text-transform:uppercase; text-decoration:none; color:var(--ink)}
/* Het beeldmerk voor de naam; de regel eronder houdt ze op één lijn. */
.merk{display:inline-flex;align-items:center;gap:8px}
/* Hetzelfde beeldmerk als op de voorpagina, en om dezelfde reden als masker:
   een svg die via src laadt is een eigen document, dus currentColor valt daar
   terug op zwart. Zo volgt hij de tekstkleur. */
.merk-teken{display:none}
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .merk-teken{display:block;width:24px;height:24px;flex:none;background:currentColor;
    -webkit-mask:url(merk-v5.svg) no-repeat center/contain;
    mask:url(merk-v5.svg) no-repeat center/contain}
}
.terug{font-size:.92rem; color:var(--ink-soft); text-decoration:none}
.terug:hover{color:var(--ink)}

main{max-width:880px; margin:0 auto; padding:clamp(34px,6vw,64px) 24px 80px}
h1{font-size:clamp(1.9rem,5vw,3rem); line-height:1.05; letter-spacing:.005em; text-transform:uppercase;
  font-weight:600; margin:0 0 10px; text-wrap:balance}
.datum{color:var(--ink-faint); font-size:.9rem; margin:0 0 28px}
.inleiding{font-size:1.06rem; color:var(--ink-soft); max-width:62ch; margin:0 0 34px}
h2{font-size:1.16rem; line-height:1.3; margin:38px 0 12px; scroll-margin-top:84px}
h3{font-size:1rem; margin:22px 0 8px}
p, li{max-width:70ch}
p{margin:0 0 13px; color:var(--ink-soft)}
ul, ol{margin:0 0 14px; padding-left:22px; color:var(--ink-soft)}
li{margin-bottom:7px}
strong{color:var(--ink)}
hr{border:0; border-top:1px solid var(--rule); margin:40px 0}

.kaart{background:var(--vlak); border:1px solid var(--rule); border-radius:14px; padding:20px 22px; margin:0 0 26px}
.kaart p:last-child, .kaart ul:last-child{margin-bottom:0}
.inhoud{background:var(--vlak); border:1px solid var(--rule); border-radius:14px; padding:18px 22px; margin:0 0 34px}
.inhoud ol{columns:2; column-gap:30px; margin:0; padding-left:20px; font-size:.95rem}
.inhoud a{color:var(--ink-soft); text-decoration:none}
.inhoud a:hover{color:var(--blauw); text-decoration:underline}

table{width:100%; border-collapse:collapse; margin:0 0 18px; font-size:.95rem}
caption{text-align:left; color:var(--ink-faint); font-size:.88rem; padding-bottom:8px}
th, td{text-align:left; vertical-align:top; padding:9px 12px; border-bottom:1px solid var(--rule-soft)}
thead th{font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:600}
tbody tr:last-child td{border-bottom:0}
.rol{overflow-x:auto; background:var(--vlak); border:1px solid var(--rule); border-radius:12px; margin:0 0 22px}
.rol table{margin:0}

.voet{border-top:1px solid var(--rule); margin-top:56px; padding-top:22px; font-size:.9rem; color:var(--ink-faint);
  display:flex; flex-wrap:wrap; gap:8px 20px}
.voet a{color:var(--ink-faint)}

@media (max-width:640px){
  body{font-size:16px}
  .balk-in{padding:0 16px}
  main{padding:26px 16px 56px}
  .inhoud ol{columns:1}
}

/* ------------------------------------------------------------------ helpcentrum ----
   Dezelfde steen en dezelfde letter als de juridische pagina's — het is hetzelfde soort
   pagina: één kolom, lange tekst, bedoeld om in te zoeken. Wat erbij komt is wat uitleg
   nodig heeft en een artikel niet: een rooster met ingangen, genummerde stappen, een
   kader voor een waarschuwing, en een regel die je overtypt. */

/* De ingangen op /help/. Twee kolommen op een scherm dat het aankan, anders één. */
.ingangen{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:14px; margin:0 0 36px}
.ingang{display:block; background:var(--vlak); border:1px solid var(--rule); border-radius:14px;
  padding:17px 19px; text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s}
.ingang:hover{border-color:var(--blauw); transform:translateY(-1px)}
.ingang h2{font-size:1.02rem; margin:0 0 5px}
.ingang p{font-size:.92rem; color:var(--ink-faint); margin:0; max-width:none}
.ingang .erin{font-size:.84rem; color:var(--ink-faint); margin-top:9px; display:block}

/* De band boven het helpcentrum.
   De voorpagina is donker en deze pagina's zijn licht; precies op die grens staat de hulp. Een
   band in de grondkleur geeft de pagina een kop en bindt hem aan het product, en de drie kaarten
   die er met hun bovenrand overheen hangen maken van die grens iets in plaats van een streep.
   Daaronder begint de kalksteen weer, want daar staat de tekst die je echt gaat lezen. */
.helpband{background:linear-gradient(168deg, var(--diep) 0%, var(--diep-2) 100%); color:#EEF2F6}
.helpband-in{max-width:880px; margin:0 auto; padding:clamp(30px,5vw,52px) 24px 76px}
.helpband .kruimel, .helpband .kruimel a{color:#C9D6E1}
.helpband h1{color:#FFF; margin-bottom:14px}
.helpband .inleiding{color:#C9D6E1; margin:0; max-width:56ch}
/* Eén warm streepje: de wolkrand uit het doek, en verder blijft de band rustig. */
.helpband h1::after{content:""; display:block; width:62px; height:3px; border-radius:2px;
  background:var(--warm-fel); margin-top:16px}
main.onderband{padding-top:0}
main.onderband .routes{margin-top:-52px}

/* ---- het helpcentrum ----
   Drie wegen naar hulp, boven de handleidingen. Ze zijn even groot omdat ze even geldig zijn:
   zelf opzoeken, het portaal vragen, of ons vragen. Er staat met opzet geen vierde knop voor een
   live chat — die hebben we niet, en een knop die altijd 'offline' zegt is een belofte die je bij
   de eerste klik breekt. */
.routes{display:grid; grid-template-columns:repeat(auto-fit,minmax(244px,1fr)); gap:14px; margin:0 0 42px}
.route{display:flex; flex-direction:column; gap:7px; background:var(--vlak); border:1px solid var(--rule);
  border-radius:14px; padding:17px 19px; text-decoration:none; color:var(--ink);
  transition:border-color .15s, transform .15s}
.route:hover{border-color:var(--blauw); transform:translateY(-1px)}
.routekop{display:flex; flex-wrap:wrap; align-items:center; gap:9px; font-weight:600; font-size:1.02rem}
.routetekst{font-size:.92rem; color:var(--ink-faint); line-height:1.5}
.chip{font-size:.74rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px; background:var(--wall); color:var(--ink-faint);
  border:1px solid var(--rule)}
.chip.aan{background:#E4EEF4; color:var(--blauw); border-color:#C6DCE8}

/* Zoeken. Eén veld en geen knop: het filtert terwijl je typt, dus een knop zou niets doen. */
.zoekvak{margin:0 0 30px}
.zoekveld{display:block}
.vzr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.zoekveld input{width:100%; font:inherit; font-size:1rem; padding:13px 16px; color:var(--ink);
  background:var(--vlak); border:1px solid var(--rule); border-radius:12px}
.zoekveld input:focus{outline:2px solid var(--blauw); outline-offset:1px; border-color:var(--blauw)}
.zoekstand{min-height:1.4em; margin:9px 2px 0; font-size:.9rem; color:var(--ink-faint)}

/* De lijst met vragen. Twee kolommen waar het past; elke vraag is een regel, want dat is hoe je
   er een terugvindt — niet als tegel, niet als accordeon die je open moet klikken. */
.vragen{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:10px 38px; margin:0 0 20px}
.vraaggroep h3{font-size:1rem; margin:22px 0 10px; color:var(--ink)}
.vraaggroep[hidden]{display:none}
.vraaggroep ul{list-style:none; margin:0; padding:0}
.vraaggroep li{margin:0 0 2px}
.vraaggroep li[hidden]{display:none}
.vraaggroep a{display:block; padding:7px 10px 7px 0; font-size:.95rem; line-height:1.45;
  color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--rule-soft)}
.vraaggroep a:hover{color:var(--blauw)}
.vraaggroep li:last-child a{border-bottom:none}

/* Terug naar de inhoudsopgave, boven elke handleiding. */
.allehandleidingen{display:inline-block; margin:0 0 22px; padding:8px 14px; border:1px solid var(--rule);
  border-radius:999px; font-size:.9rem; text-decoration:none; color:var(--ink-soft); background:var(--vlak)}
.allehandleidingen:hover{border-color:var(--blauw); color:var(--blauw)}

/* Onderaan elke handleiding: de uitweg als het toch niet lukt. */
.uitweg{margin-top:44px; border-top:1px solid var(--rule); padding-top:22px; font-size:.95rem;
  color:var(--ink-faint)}
.uitweg b{color:var(--ink)}

/* De paden terug, boven de titel. Kleiner dan de titel en niet luid. */
.kruimel{font-size:.86rem; color:var(--ink-faint); margin:0 0 14px}
.kruimel a{color:var(--ink-faint)}

/* Stappen. Genummerd, want dit zijn er wél: je doet ze op volgorde. */
.stappen{counter-reset:stap; list-style:none; padding:0; margin:14px 0 20px}
.stappen > li{counter-increment:stap; position:relative; padding-left:38px; margin-bottom:12px; max-width:68ch}
.stappen > li::before{content:counter(stap); position:absolute; left:0; top:-1px; width:26px; height:26px;
  border-radius:50%; background:var(--blauw); color:#fff; font-size:.84rem; font-weight:600;
  display:flex; align-items:center; justify-content:center}
.stappen ul{margin:7px 0 0}

/* Een kader dat iets tegenhoudt. Spaarzaam: drie per pagina en niemand leest ze nog. */
.let{border-left:3px solid var(--blauw); background:var(--vlak); border-radius:0 var(--r) var(--r) 0;
  padding:13px 17px; margin:16px 0}
.let p:last-child{margin-bottom:0}
.let b{color:var(--ink)}

/* Wat je overtypt of plakt. */
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em;
  background:var(--vlak); border:1px solid var(--rule-soft); border-radius:5px; padding:1px 5px; word-break:break-word}

/* Waar je iets vindt: Beheer → Instellingen → Koppelingen. */
.pad{white-space:nowrap; font-weight:600; color:var(--ink)}

/* De vraag onderaan elke pagina. */
.nogvragen{background:var(--vlak); border:1px solid var(--rule); border-radius:14px; padding:20px 22px; margin:44px 0 0}
.nogvragen h2{margin:0 0 7px; font-size:1.06rem}
.nogvragen p{margin:0 0 14px}
.knopje{display:inline-block; background:var(--blauw); color:#fff; text-decoration:none; font-weight:600;
  font-size:.94rem; padding:10px 18px; border-radius:999px}
.knopje:hover{background:#1b3f5c}

@media (max-width:640px){
  .stappen > li{padding-left:32px}
  .stappen > li::before{width:22px; height:22px; font-size:.78rem}
}

/* In welk pakket iets zit. Naast een kop en niet in een zin, want het is geen uitleg maar een
   voorwaarde: wie het niet heeft, hoeft de rest van die alinea niet te lezen. */
.pakket{display:inline-block; vertical-align:middle; margin-left:9px; font-size:.72rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--blauw);
  border:1px solid var(--rule); border-radius:999px; padding:3px 9px; background:var(--vlak)}
h2 .pakket, h3 .pakket{position:relative; top:-1px}