:root{
  --wit:#ffffff;
  --inkt:#1d1d1b;
  --tekst:#3a3a37;
  --zacht:#6b6b66;
  --salie:#e6eedd;
  --salie-diep:#2f4a3a;
  --boter:#f4c63d;
  --boter-licht:#fdf3cf;
  --hout:#a8683f;
  --korst:#8c6140;
  --lijn:#e3e3dc;
  --serif:"Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:"Figtree", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --breed:1240px;
  --r-groot:28px;
  --r-klein:14px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(84px + env(safe-area-inset-top,0px))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--wit);color:var(--tekst);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--inkt);line-height:1.02;margin:0;letter-spacing:-.01em}
h2{font-size:clamp(2.6rem,5.2vw,4.4rem)}
h3{font-family:var(--sans);font-weight:600;font-size:1.125rem;line-height:1.3;letter-spacing:0}
p{margin:0 0 1em;max-width:62ch}
.wrap{max-width:var(--breed);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
section{padding:clamp(72px,10vw,128px) 0}
:focus-visible{outline:3px solid var(--inkt);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:50px;padding:0 1.5em;border-radius:999px;font-family:var(--sans);font-weight:600;font-size:1rem;text-decoration:none;border:2px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .2s;cursor:pointer;white-space:nowrap}
.knop svg{width:18px;height:18px;flex:none}
.knop-bestel{background:var(--boter);color:var(--inkt)}
.knop-bestel:hover{background:#ffd75c;transform:translateY(-1px)}
.knop-lijn{border-color:currentColor;color:var(--inkt);background:transparent}
.knop-lijn:hover{background:var(--inkt);color:var(--wit);border-color:var(--inkt)}
.knop-licht{border-color:rgba(255,255,255,.6);color:var(--wit)}
.knop-licht:hover{background:var(--wit);color:var(--korst);border-color:var(--wit)}
.knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* header */
.kop{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s;padding-top:env(safe-area-inset-top,0px);margin-top:calc(-1 * env(safe-area-inset-top,0px))}
.kop.gescrold{border-bottom-color:var(--lijn)}
.kop .wrap{display:flex;align-items:center;gap:24px;height:78px}
.logo{display:block;flex:none}
.logo img{height:48px;width:auto}
.menu{display:flex;gap:4px;margin-left:auto;list-style:none;padding:0;margin-top:0;margin-bottom:0}
.menu a{display:block;padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:500;font-size:.97rem;color:var(--inkt);transition:background .2s}
.menu a:hover,.menu a[aria-current]{background:var(--salie)}
.kop .knop-bestel{min-height:44px;padding:0 1.2em}
.menuknop{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;border-radius:12px;cursor:pointer;color:var(--inkt)}
.menuknop svg{width:26px;height:26px}
@media (max-width:1140px){
  .menuknop{display:inline-grid;place-items:center}
  .menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;background:var(--wit);padding:12px clamp(20px,4vw,40px) 24px;border-bottom:1px solid var(--lijn);display:none;margin:0}
  .menu.open{display:flex}
  .menu a{font-size:1.15rem;padding:12px 14px}
  .kop .wrap{gap:10px}
  .logo img{height:40px}
}
@media (max-width:420px){.kop .knop-bestel{padding:0 1em;font-size:.93rem}}

/* hero */
.hero{padding:clamp(32px,5vw,64px) 0 clamp(72px,9vw,120px)}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.hero-plaats{font-weight:600;color:var(--salie-diep);margin:0 0 20px;display:flex;align-items:center;gap:12px}
.hero-plaats::before{content:"";width:28px;height:2px;background:var(--boter)}
.hero h1{font-size:clamp(4rem,10vw,8.4rem);line-height:.9;margin-bottom:28px}
.hero-tekst{font-size:1.2rem;max-width:34ch;color:var(--tekst)}
.hero-open{margin-top:36px;padding-top:22px;border-top:1px solid var(--lijn);display:flex;flex-wrap:wrap;gap:8px 28px;font-size:.98rem}
.hero-open strong{color:var(--inkt);font-weight:600;display:block}
.hero-beeld{position:relative;isolation:isolate}
.hero-beeld img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-groot) var(--r-groot) var(--r-groot) 140px}
.amp{position:absolute;z-index:-1;left:-20%;bottom:-9%;width:58%;color:var(--boter);animation:amp 1.1s cubic-bezier(.2,.8,.2,1) .15s both}
@keyframes amp{from{opacity:0;transform:translateY(40px) rotate(-8deg)}to{opacity:1;transform:none}}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-beeld{max-width:520px;margin:12px 0 0 auto;width:88%}
  .amp{left:-18%;width:50%}
}

/* assortiment */
.assortiment{background:var(--salie)}
.sectie-kop{display:grid;grid-template-columns:1fr 1fr;gap:24px 64px;align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.sectie-kop p{margin:0}
@media (max-width:760px){.sectie-kop{grid-template-columns:1fr}}
.producten{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none;padding:0;margin:0}
.producten li{margin:0}
.producten img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-klein)}
.producten h3{margin:16px 0 4px;font-family:var(--serif);font-weight:400;font-size:1.9rem}
.producten p{font-size:.98rem;color:var(--zacht);margin:0}
@media (max-width:960px){.producten{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.producten{gap:14px}.producten h3{font-size:1.5rem}.producten p{font-size:.9rem}}
.bestelbalk{margin-top:clamp(40px,5vw,64px);background:var(--wit);border-radius:var(--r-groot);padding:clamp(24px,3.5vw,40px);display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap}
.bestelbalk p{margin:0;font-family:var(--serif);font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.15;color:var(--inkt);max-width:28ch}

.bewaarbalk{margin-top:16px;padding:clamp(20px,3vw,28px) clamp(24px,3.5vw,40px);border-radius:var(--r-groot);border:1.5px solid rgba(29,29,27,.14);display:flex;align-items:center;justify-content:space-between;gap:16px 40px;flex-wrap:wrap}
.bewaarbalk p{margin:0;max-width:52ch;color:var(--inkt)}

/* verhaal */
.verhaal-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,80px);align-items:center}
.verhaal-intro .sinds{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--hout);margin:14px 0 26px}
.verhaal-intro img{width:100%;border-radius:var(--r-groot);aspect-ratio:3/2;object-fit:cover}
@media (max-width:860px){.verhaal-intro{grid-template-columns:1fr}}
.tijdlijn-blok{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,80px);margin-top:clamp(64px,8vw,104px);align-items:start}
.tijdlijn{list-style:none;margin:0;padding:0;border-left:2px solid var(--salie);}
.tijdlijn li{position:relative;padding:0 0 40px 36px}
.tijdlijn li:last-child{padding-bottom:0}
.tijdlijn li::before{content:"";position:absolute;left:-8px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--wit);border:3px solid var(--salie-diep)}
.tijdlijn .wanneer{display:block;font-family:var(--serif);font-size:1.75rem;line-height:1.1;color:var(--inkt);margin-bottom:6px}
.tijdlijn p{margin:0}
.verhaal-fotos{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:sticky;top:110px}
.verhaal-fotos img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-klein)}
.verhaal-fotos img:nth-child(2){margin-top:56px}
@media (max-width:860px){.tijdlijn-blok{grid-template-columns:1fr}.verhaal-fotos{position:static}}
.belofte{margin-top:clamp(64px,8vw,104px);background:var(--boter-licht);border-radius:var(--r-groot);padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:.8fr 1.2fr;gap:24px clamp(32px,5vw,64px);align-items:start}
.belofte h3{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,5vw,4rem);line-height:1}
.belofte p:last-child{margin-bottom:0}
@media (max-width:760px){.belofte{grid-template-columns:1fr}}

/* b2b */
.b2b{background:var(--korst);color:#f6ece1}
.b2b h2{color:var(--wit)}
.b2b .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,88px);align-items:center}
.b2b img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-groot) 140px var(--r-groot) var(--r-groot)}
.b2b h2{margin-bottom:28px}
.b2b ul{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.b2b li{border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:6px 16px;font-size:.95rem;color:var(--wit)}
.b2b .knop-bestel:hover{background:#ffd75c}
@media (max-width:860px){.b2b .wrap{grid-template-columns:1fr}.b2b img{max-width:460px;aspect-ratio:1}}

/* broodautomaten */
.automaten-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.automaten-fotos{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:end}
.automaten-fotos img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-groot)}
.automaten-fotos img:nth-child(2){margin-bottom:48px}
@media (max-width:860px){.automaten-top{grid-template-columns:1fr}}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:28px 0 10px;max-width:460px;list-style:none;padding:0}
.week li{text-align:center;padding:12px 0 10px;border-radius:12px;background:#f2f2ee;color:#9a9a93;font-weight:600;font-size:.95rem;line-height:1.2}
.week li.vol{background:var(--boter);color:var(--inkt)}
.week li small{display:block;font-weight:500;font-size:.72rem;margin-top:3px}
.week-uitleg{font-size:.95rem;color:var(--zacht)}
.locaties{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;padding:0;margin:clamp(48px,6vw,72px) 0 0}
.locaties li{border:1px solid var(--lijn);border-radius:var(--r-klein);padding:22px 22px 18px;display:flex;flex-direction:column;gap:4px}
.locaties h3{font-family:var(--serif);font-weight:400;font-size:1.65rem;line-height:1.1}
.locaties span{color:var(--zacht);font-size:.97rem}
.locaties a{margin-top:auto;padding-top:14px;font-weight:600;font-size:.95rem;color:var(--salie-diep);text-underline-offset:4px}
.locaties a:hover{color:var(--inkt)}
@media (max-width:960px){.locaties{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.locaties{grid-template-columns:1fr}}
.fb-balk{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding:24px 28px;border-radius:var(--r-klein);background:var(--salie)}
.fb-balk p{margin:0;flex:1 1 300px}

/* werken bij */
.werken{background:var(--boter-licht)}
.werken .wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,6vw,88px);align-items:center}
.team-fotos{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:end}
.team-fotos img{width:100%;border-radius:var(--r-klein);object-fit:cover}
.team-fotos img:first-child{grid-column:1 / -1;aspect-ratio:16/9}
.team-fotos img:nth-child(2){aspect-ratio:1}
.team-fotos figcaption{font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.2;color:var(--inkt);padding:0 0 8px}
.rollen{list-style:none;padding:0;margin:24px 0 28px;display:flex;flex-wrap:wrap;gap:10px}
.rollen li{background:var(--wit);border-radius:999px;padding:8px 18px;font-weight:600;color:var(--inkt);font-size:.98rem}
.werken h2{margin-bottom:24px}
@media (max-width:860px){.werken .wrap{grid-template-columns:1fr}.team-fotos{order:2}}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:clamp(24px,4vw,48px);margin-top:clamp(40px,5vw,64px)}
.contact-grid > div{border-top:2px solid var(--inkt);padding-top:22px}
.contact-grid h3{margin-bottom:16px}
.uren{width:100%;border-collapse:collapse;font-size:1rem}
.uren th,.uren td{padding:9px 0;border-bottom:1px solid var(--lijn);text-align:left;font-weight:500}
.uren td{text-align:right;color:var(--zacht)}
.uren tr.open td{color:var(--inkt)}
.uren tr.vandaag th,.uren tr.vandaag td{font-weight:700;color:var(--inkt)}
.uren tr.vandaag th::after{content:"vandaag";margin-left:10px;font-size:.75rem;font-weight:600;background:var(--boter);padding:2px 8px;border-radius:999px;vertical-align:2px}
.uren-noot{font-size:.9rem;color:var(--zacht);margin-top:14px}
address{font-style:normal;font-size:1.1rem;color:var(--inkt);line-height:1.5}
.contact-lijst{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.contact-lijst a{text-decoration:none;font-weight:600;color:var(--inkt);display:inline-flex;align-items:center;gap:10px}
.contact-lijst a:hover{text-decoration:underline;text-underline-offset:4px}
.contact-lijst svg{width:20px;height:20px;flex:none;color:var(--salie-diep)}
.klein{font-size:.9rem;color:var(--zacht);margin-top:20px}
.tekstlink{font-weight:600;color:var(--salie-diep);text-underline-offset:4px;display:inline-block;margin-top:14px}
@media (max-width:960px){.contact-grid{grid-template-columns:1fr 1fr}.contact-grid > div:first-child{grid-column:1 / -1}}
@media (max-width:600px){.contact-grid{grid-template-columns:1fr}}

/* footer */
.voet{background:var(--inkt);color:#bdbdb6;padding:64px 0 40px;font-size:.95rem}
.voet .wrap{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.voet img{height:64px;width:auto;filter:invert(1)}
.voet p{margin:20px 0 0;font-family:var(--serif);font-size:1.6rem;color:var(--wit);line-height:1.2}
.voet nav ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.voet nav a{text-decoration:none;color:#e9e9e4}
.voet nav a:hover{text-decoration:underline}
.voet-onder{grid-column:1 / -1;border-top:1px solid #3a3a37;padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
@media (max-width:760px){.voet .wrap{grid-template-columns:1fr}}