@font-face{font-family:"Bricolage Grotesque"; font-style:normal; font-weight:200 800; font-display:swap; src:url(/assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format("woff2")}
@font-face{font-family:"Literata"; font-style:normal; font-weight:200 900; font-display:swap; src:url(/assets/fonts/literata-latin-opsz-normal.woff2) format("woff2")}
@font-face{font-family:"Literata"; font-style:italic; font-weight:200 900; font-display:swap; src:url(/assets/fonts/literata-latin-opsz-italic.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
:root{
  --lucht:#EDF1F2; --lucht-2:#E1E7E9; --wit:#FBFCFC;
  --inkt:#1C2830; --lei:#5B6B75; --lijn:#C9D3D7;
  --zee:#2E5B69; --zee-zacht:#D5E3E6;
  --lamp:#D48A2A; --lamp-tekst:#9A5A0C; --lamp-zacht:#F6E6CE;
  --wolk-a:rgba(255,255,255,.85); --wolk-b:rgba(255,255,255,0);
  --schaduw:0 1px 0 rgba(28,40,48,.04), 0 12px 32px -18px rgba(28,40,48,.25);
  --display:"Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --tekst:"Literata", Georgia, "Times New Roman", serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --lucht:#0F171C; --lucht-2:#16222A; --wit:#1A2730;
    --inkt:#E4EBEE; --lei:#9AAAB3; --lijn:#2A3A44;
    --zee:#79AEBC; --zee-zacht:#1B3440;
    --lamp:#F0A94A; --lamp-tekst:#F4BD6E; --lamp-zacht:#3A2A14;
    --wolk-a:rgba(160,184,196,.16); --wolk-b:rgba(160,184,196,0);
    --schaduw:0 1px 0 rgba(0,0,0,.2), 0 16px 36px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --lucht:#0F171C; --lucht-2:#16222A; --wit:#1A2730;
  --inkt:#E4EBEE; --lei:#9AAAB3; --lijn:#2A3A44;
  --zee:#79AEBC; --zee-zacht:#1B3440;
  --lamp:#F0A94A; --lamp-tekst:#F4BD6E; --lamp-zacht:#3A2A14;
  --wolk-a:rgba(160,184,196,.16); --wolk-b:rgba(160,184,196,0);
  --schaduw:0 1px 0 rgba(0,0,0,.2), 0 16px 36px -20px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{margin:0; background:var(--lucht); color:var(--inkt); font-family:var(--tekst); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
.wrap{max-width:1120px; margin:0 auto; padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--display); line-height:1.08; text-wrap:balance; margin:0; letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--lamp); outline-offset:3px; border-radius:4px}
.label{font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--zee)}

/* Kop */
header.kop{position:sticky; top:env(safe-area-inset-top,0px); z-index:10; background:color-mix(in srgb, var(--lucht) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--lijn)}
.kop .wrap{display:flex; align-items:center; gap:24px; padding-block:14px}
.merk{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--display); font-weight:800; font-size:21px; letter-spacing:-.02em}
.merk svg{flex:none}
.merk b{color:var(--zee); font-weight:800}
nav.menu{display:flex; gap:22px; margin-left:auto; font-family:var(--display); font-size:15px}
nav.menu a{text-decoration:none; color:var(--lei)}
nav.menu a:hover{color:var(--inkt)}
.talen{display:flex; gap:2px; font-family:var(--mono); font-size:12px; border:1px solid var(--lijn); border-radius:999px; padding:3px}
.talen a{text-decoration:none; padding:3px 8px; border-radius:999px; color:var(--lei)}
.talen a[aria-current]{background:var(--inkt); color:var(--lucht)}
@media (max-width:760px){ nav.menu{display:none} .talen{margin-left:auto} }

/* Hero */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--lijn)}
#lucht{position:absolute; inset:0; width:100%; height:100%; display:block}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; padding-block:clamp(48px,8vw,96px)}
.hero h1{font-size:clamp(40px,6.4vw,76px); font-weight:800}
.hero h1 em{font-style:normal; color:var(--lamp-tekst)}
.hero .intro{margin-top:22px; font-size:clamp(17px,1.6vw,20px); max-width:34em; color:var(--inkt)}
.knoppen{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.knop{font-family:var(--display); font-weight:600; font-size:16px; text-decoration:none; padding:13px 22px; border-radius:10px; border:1.5px solid var(--inkt); transition:transform .15s ease, background .15s ease}
.knop.vol{background:var(--inkt); color:var(--lucht)}
.knop.vol:hover{background:var(--zee); border-color:var(--zee)}
.knop.leeg:hover{background:var(--wit)}
.knop:active{transform:translateY(1px)}
.scene{width:100%; max-width:420px; justify-self:end}
.scene svg{width:100%; height:auto; display:block}
@media (max-width:820px){ .hero .wrap{grid-template-columns:1fr} .scene{justify-self:start; max-width:320px} }

/* Naam-strook */
.naam{background:var(--inkt); color:var(--lucht)}
.naam .wrap{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 28px; padding-block:22px}
.naam .dialect{font-family:var(--display); font-size:22px; font-weight:600}
.naam .dialect span{color:var(--lamp)}
.naam p{color:color-mix(in srgb, var(--lucht) 75%, var(--inkt)); font-style:italic}

/* Secties */
section.blok{padding-block:clamp(56px,8vw,96px)}
.kopje{display:grid; gap:12px; max-width:40em; margin-bottom:40px}
.kopje h2{font-size:clamp(30px,4vw,46px); font-weight:800}
.kopje p{color:var(--lei); font-size:18px}

/* Verhaal */
.verhaal{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start}
.citaat{font-family:var(--display); font-size:clamp(26px,3.2vw,38px); font-weight:600; line-height:1.18; letter-spacing:-.015em}
.citaat .onder{display:block; margin-top:18px; font-family:var(--mono); font-size:13px; font-weight:400; letter-spacing:.04em; color:var(--lei)}
.verhaal .tekst{display:grid; gap:16px; max-width:36em}
.verhaal .tekst p:first-child::first-letter{font-family:var(--display); font-weight:800; float:left; font-size:3.4em; line-height:.9; padding-right:8px; color:var(--zee)}
@media (max-width:820px){ .verhaal{grid-template-columns:1fr; gap:28px} }

/* Mogelijkheden */
.thema-rooster{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--lijn); border:1px solid var(--lijn); border-radius:14px; overflow:hidden}
.thema{background:var(--wit); padding:26px 24px 28px; display:grid; gap:8px; align-content:start}
.thema svg{width:30px; height:30px; color:var(--zee)}
.thema h3{font-size:20px; font-weight:600; margin-top:6px}
.thema p{color:var(--lei); font-size:15.5px; line-height:1.55}
.thema .ipv{font-family:var(--mono); font-size:12px; color:var(--lamp-tekst); letter-spacing:.02em}
.thema.keuze{background:var(--lamp-zacht)}
.thema.keuze svg{color:var(--lamp-tekst)}
@media (max-width:900px){ .thema-rooster{grid-template-columns:repeat(2,1fr)} }

/* Privacy en juridisch */
.juridisch{border-top:1px solid var(--lijn)}
.juridisch .wrap{display:grid; grid-template-columns:1.25fr .75fr; gap:48px}
.juridisch h2{font-size:28px; font-weight:800}
.juridisch h3{font-size:17px; font-weight:600; margin-top:22px}
.juridisch p,.juridisch li{color:var(--lei); font-size:15.5px}
.juridisch .tekstblok{display:grid; gap:8px; max-width:40em; align-content:start}
.juridisch ul{margin:0; padding-left:20px; display:grid; gap:4px}
.juridisch dl{margin:14px 0 0; display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:15.5px}
.juridisch dt{font-family:var(--display); font-weight:600; color:var(--inkt)}
.juridisch dd{margin:0; color:var(--lei)}
.invullen{font-family:var(--mono); font-size:13px; background:var(--lamp-zacht); color:var(--lamp-tekst); padding:1px 6px; border-radius:5px}
@media (max-width:820px){ .juridisch .wrap{grid-template-columns:1fr; gap:36px} }
@media (max-width:560px){ .thema-rooster{grid-template-columns:1fr} }

/* Voor wie */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.doelgroep{background:var(--wit); border:1px solid var(--lijn); border-radius:14px; padding:30px; box-shadow:var(--schaduw); display:grid; gap:14px; align-content:start}
.doelgroep h3{font-size:26px; font-weight:800}
.doelgroep ul{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.doelgroep li{padding-left:26px; position:relative}
.doelgroep li::before{content:""; position:absolute; left:2px; top:.62em; width:12px; height:7px; border-radius:7px 7px 3px 3px; background:var(--zee); box-shadow:4px -3px 0 -1px var(--zee)}
@media (max-width:760px){ .duo{grid-template-columns:1fr} }

/* Werkwijze */
.stappen{display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:stap; border-top:2px solid var(--inkt)}
.stap{padding:22px 22px 0 0; display:grid; gap:10px; align-content:start}
.stap::before{counter-increment:stap; content:"0" counter(stap); font-family:var(--mono); font-size:13px; color:var(--lamp-tekst)}
.stap h3{font-size:21px; font-weight:600}
.stap p{color:var(--lei); font-size:15.5px}
.persoonlijk{margin-top:14px; font-family:var(--display); font-size:15.5px; color:var(--lei); display:flex; align-items:center; gap:8px}
.persoonlijk i{width:8px; height:8px; border-radius:50%; background:var(--lamp); flex:none}
.principes{margin-top:44px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--lijn); border:1px solid var(--lijn); border-radius:14px; overflow:hidden}
.principe{background:var(--lamp-zacht); padding:24px 22px; display:grid; gap:8px; align-content:start}
.principe h3{font-size:19px; font-weight:800}
.principe p{font-size:15.5px; color:var(--inkt)}
.principes-kop{margin-top:56px; display:grid; gap:8px}
.principes-kop h3{font-family:var(--display); font-size:clamp(24px,3vw,32px); font-weight:800}
@media (max-width:900px){ .principes{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .principes{grid-template-columns:1fr} }
.belofte{margin-top:40px; display:flex; gap:16px; align-items:flex-start; background:var(--lamp-zacht); border-radius:14px; padding:22px 24px}
.belofte svg{flex:none; width:28px; height:28px; color:var(--lamp-tekst); margin-top:2px}
.belofte p{font-size:17px}
@media (max-width:900px){ .stappen{grid-template-columns:repeat(2,1fr); row-gap:28px} }
@media (max-width:520px){ .stappen{grid-template-columns:1fr} }

/* Linux */
.fundament{background:var(--zee-zacht); border-block:1px solid var(--lijn)}
.fundament .wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.terminal{background:#141D22; color:#D6E2E6; border-radius:12px; padding:20px 22px; font-family:var(--mono); font-size:14px; line-height:1.8; box-shadow:var(--schaduw); overflow-x:auto}
.terminal .p{color:#8FC0CC}
.terminal .c{color:#F0A94A}
.terminal .d{color:#6F858F}
@media (max-width:820px){ .fundament .wrap{grid-template-columns:1fr} }

/* Eerlijk */
.eerlijk{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.eerlijk div{border-top:1px solid var(--lijn); padding-top:18px; display:grid; gap:8px}
.eerlijk h3{font-size:18px; font-weight:600}
.eerlijk p{color:var(--lei); font-size:15.5px}
@media (max-width:820px){ .eerlijk{grid-template-columns:1fr} }

/* Rekenhulp */
.reken{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:stretch}
.posten{background:var(--wit); border:1px solid var(--lijn); border-radius:14px; padding:8px 22px; box-shadow:var(--schaduw)}
.post{display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--lijn)}
.post:last-child{border-bottom:0}
.post label{font-family:var(--display); font-size:15.5px; font-weight:600}
.post small{grid-column:1; color:var(--lei); font-size:13.5px; margin-top:-4px}
.bedrag{grid-row:1 / span 2; grid-column:2; display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:14px; color:var(--lei)}
.bedrag input{width:78px; font:inherit; font-size:16px; color:var(--inkt); background:var(--lucht); border:1px solid var(--lijn); border-radius:8px; padding:8px 10px; text-align:right; font-variant-numeric:tabular-nums}
.uitkomst{background:var(--zee); color:#F2F6F7; border-radius:14px; padding:28px; display:grid; gap:10px; align-content:center}
.uitkomst .label{color:#CFE3E8}
.uitkomst .groot{font-family:var(--display); font-weight:800; font-size:clamp(44px,6vw,64px); line-height:1; font-variant-numeric:tabular-nums}
.uitkomst p{color:#D9E7EA; font-size:15.5px}
.uitkomst .betaald{font-size:16px; color:#D9E7EA; margin-top:-2px}
.uitkomst .rij-bedrag{display:flex; justify-content:space-between; font-family:var(--mono); font-size:14px; border-top:1px solid rgba(255,255,255,.2); padding-top:10px; font-variant-numeric:tabular-nums}
@media (max-width:820px){ .reken{grid-template-columns:1fr} }

/* Kennisbank */
.artikels{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.artikel{border:1px solid var(--lijn); border-radius:14px; padding:24px; display:grid; gap:10px; align-content:start; background:var(--wit)}
.artikel h3{font-size:19px; font-weight:600; line-height:1.25}
.artikel p{color:var(--lei); font-size:15px}
.artikel .meta{font-family:var(--mono); font-size:12px; color:var(--lei)}
@media (max-width:820px){ .artikels{grid-template-columns:1fr} }

/* Contact */
.contact{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start}
.contact .gegevens{display:grid; gap:14px}
.adres{font-family:var(--mono); font-size:15px; background:var(--wit); border:1px solid var(--lijn); border-radius:10px; padding:12px 14px; display:flex; justify-content:space-between; gap:10px; align-items:center; user-select:all}
.adres button{font-family:var(--display); font-size:13px; border:1px solid var(--lijn); background:var(--lucht); color:var(--inkt); border-radius:8px; padding:6px 10px; cursor:pointer}
form.vraag{display:grid; gap:14px; background:var(--wit); border:1px solid var(--lijn); border-radius:14px; padding:26px; box-shadow:var(--schaduw)}
.veld{display:grid; gap:6px}
.veld label{font-family:var(--display); font-size:14px; font-weight:600}
.veld input,.veld select,.veld textarea{font:inherit; font-size:16px; color:var(--inkt); background:var(--lucht); border:1px solid var(--lijn); border-radius:9px; padding:11px 12px; width:100%}
.veld textarea{min-height:110px; resize:vertical}
.rij{display:grid; grid-template-columns:1fr 1fr; gap:14px}
form.vraag button{justify-self:start; cursor:pointer}
.melding{font-family:var(--display); font-size:15px; color:var(--zee)}
@media (max-width:820px){ .contact{grid-template-columns:1fr} .rij{grid-template-columns:1fr} }

/* Voet */
footer.voet{border-top:1px solid var(--lijn); padding-block:34px; color:var(--lei); font-size:14.5px}
footer.voet .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 30px}
footer.voet .zelf{display:flex; gap:10px; align-items:center}
footer.voet .zelf i{width:9px; height:9px; border-radius:50%; background:#3F9A6A; box-shadow:0 0 0 4px color-mix(in srgb, #3F9A6A 20%, transparent); flex:none}

@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }

/* voorheen inline stijlen (CSP laat geen style-attributen toe) */
.mt16{margin-top:16px} .mt14{margin-top:14px} .mb0{margin-bottom:0}
.blok.vervolg{padding-top:0}
.contact-kop{font-size:clamp(30px,4vw,44px); font-weight:800}
.zacht{color:var(--lei)}
.honing{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.melding.fout{color:var(--lamp-tekst)}
form.vraag button:disabled{opacity:.6; cursor:progress}