/* Mijn Chef-aan-Huis – website */
@font-face{font-family:"Figtree";src:url("../fonts/figtree-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --klei:#A8431B; --klei-donker:#8A3B12; --creme:#FBF6F2; --zacht:#F6E6DC;
  --inkt:#1F1A17; --tekst:#4A403A; --grijs:#6A5E56; --lijn:#EADDD3;
  --kop:"Bricolage Grotesque","Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--inkt);font-family:Figtree,"Segoe UI",system-ui,sans-serif;font-size:18px;line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:var(--klei-donker)}a:hover{color:#5E270B}
h1,h2,h3{font-family:var(--kop);margin:0;line-height:1.1}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--klei);outline-offset:3px}

/* kop */
.kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;padding-bottom:20px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--inkt)}
.logo img{width:44px;height:44px;border-radius:10px}
.logo-tekst{display:flex;flex-direction:column;line-height:1}
.logo-mijn{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--klei-donker)}
.logo-naam{font-family:var(--kop);font-weight:800;font-size:24px;letter-spacing:-.01em}
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;font-weight:600;font-size:16px}
.menu a{color:var(--inkt);text-decoration:none}
.menu a.knop{background:var(--klei);color:#fff;padding:12px 20px;border-radius:999px}
.menu a.knop:hover{background:var(--klei-donker)}

/* hero */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:56px;padding-top:48px;padding-bottom:72px}
.hero-tekst{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:24px}
.label{font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--klei-donker)}
.hero h1{font-weight:800;font-size:clamp(40px,6vw,72px);line-height:1.02;letter-spacing:-.025em}
.intro{font-size:21px;color:var(--tekst);max-width:560px}
.klein{font-size:15px;color:var(--grijs);max-width:560px}
.hero-beeld{flex:1 1 320px;display:flex;justify-content:center}
.telefoon{width:100%;max-width:340px;border:10px solid var(--inkt);border-radius:40px;box-shadow:0 30px 60px rgba(90,40,15,.18)}

/* formulier */
.aanmeld{display:flex;flex-wrap:wrap;gap:12px;max-width:560px}
.aanmeld input[type=email]{flex:1 1 260px;min-width:0;height:56px;padding:0 20px;border:2px solid #D8C9BE;border-radius:999px;font:inherit;font-size:18px;background:#fff;color:var(--inkt)}
.aanmeld input[type=email]::placeholder{color:#7A6E66}
.aanmeld button{height:56px;padding:0 28px;border:0;border-radius:999px;background:var(--klei);color:#fff;font:inherit;font-weight:700;font-size:18px;cursor:pointer}
.aanmeld button:hover{background:var(--klei-donker)}
.aanmeld button[disabled]{opacity:.6;cursor:wait}
.vinkje{flex:1 1 100%;display:flex;align-items:center;gap:10px;font-size:16px;color:var(--tekst);cursor:pointer}
.vinkje input{width:22px;height:22px;margin:0;accent-color:var(--klei)}
.melding{padding:18px 22px;border-radius:16px;font-weight:600;max-width:560px}
.melding.goed{background:#E6EFE3;color:#24481F}
.melding.fout{background:#FBE3DC;color:#8A2410}
[hidden]{display:none!important}

/* zigzag + feiten */
.zigzag{display:block;width:100%;height:14px}
.feiten{background:var(--klei);color:#fff}
.feiten .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;padding-top:40px;padding-bottom:40px}
.getal{font-family:var(--kop);font-weight:800;font-size:48px;line-height:1}
.feiten p+p{margin-top:6px;font-size:17px}

/* secties */
section.blok{padding-top:96px;padding-bottom:64px}
h2{font-weight:800;font-size:clamp(32px,4vw,48px);letter-spacing:-.02em}
.sub{margin:12px 0 48px;color:var(--tekst);max-width:640px}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.kaart{background:#fff;border:1px solid var(--lijn);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:12px}
.kaart .nr{font-family:var(--mono);font-size:15px;color:var(--klei-donker)}
.kaart h3{font-size:26px;line-height:1.2}
.kaart p{color:var(--tekst)}
.stappen{margin-top:48px}

.functies{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:32px;padding-bottom:32px}
.functie{background:#fff;border:1px solid var(--lijn);border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.functie-beeld{background:var(--zacht);padding:32px 32px 0;height:340px;overflow:hidden;display:flex;justify-content:center}
.functie-beeld img{width:260px;border:8px solid var(--inkt);border-bottom:0;border-radius:32px 32px 0 0;align-self:flex-start}
.functie-tekst{padding:28px 32px 32px;display:flex;flex-direction:column;gap:10px}
.functie-tekst h3{font-size:26px;line-height:1.2}
.functie-tekst p{color:var(--tekst)}
.functie-tekst .bron{font-size:14px;color:var(--grijs)}
.meer{background:var(--inkt);color:var(--creme);border-radius:28px;padding:40px 32px;display:flex;flex-direction:column;justify-content:center;gap:20px}
.meer h3{font-size:30px;line-height:1.15}
.meer ul{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:10px;color:#E9DED6}

/* wachtlijst-band */
.band{background:var(--klei);color:#fff}
.band .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:48px;padding-top:88px;padding-bottom:88px}
.band-tekst{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:16px}
.band-tekst h2{font-size:clamp(32px,4vw,52px);line-height:1.05}
.band-tekst p{font-size:20px;color:#FBE9DF}
.band-form{flex:1 1 420px;min-width:0}
.band .aanmeld input[type=email]{border:0}
.band .aanmeld button{background:var(--inkt)}
.band .aanmeld button:hover{background:#000}
.band .vinkje{color:#fff}
.band .vinkje input{accent-color:var(--inkt)}
.band .klein{color:#FBE9DF;margin-top:14px}
.band a{color:#fff}
.band .melding.goed{background:#fff}

/* vragen */
.vragen{max-width:880px}
.vragen h2{margin-bottom:40px}
details{background:#fff;border:1px solid var(--lijn);border-radius:20px;padding:22px 26px;margin-bottom:16px}
summary{font-weight:700;font-size:20px;cursor:pointer}
details p{margin-top:12px;color:var(--tekst)}

/* voet */
footer{border-top:1px solid var(--lijn)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding-top:40px;padding-bottom:40px;font-size:16px;color:var(--tekst)}
.voet-logo{display:flex;align-items:center;gap:12px;font-family:var(--kop);font-weight:700;color:var(--inkt)}
.voet-logo img{width:36px;height:36px;border-radius:8px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 24px}

/* tekstpagina (privacy) */
.tekstpagina{max-width:760px;padding-top:40px;padding-bottom:96px}
.tekstpagina h1{font-weight:800;font-size:clamp(36px,5vw,52px);letter-spacing:-.02em;margin-bottom:12px}
.tekstpagina h2{font-size:26px;margin:40px 0 12px;letter-spacing:0}
.tekstpagina p,.tekstpagina li{color:var(--tekst)}
.tekstpagina p+p{margin-top:12px}
.tekstpagina ul{padding-left:22px}

@media (max-width:600px){
  body{font-size:17px}
  .hero{padding-top:24px;gap:40px}
  .menu{gap:8px 16px;font-size:15px}
  .menu .verberg-klein{display:none}
  section.blok{padding-top:64px}
  .functie-beeld{height:300px}
}