/* Bakkerij De Korenbloem (concept van Revuno).
   Twee inkten zoals een drukwerkje: korenbloemblauw en papier. Elke sectie is een stuk van hetzelfde briefpapier. */
@font-face { font-family: "Zilla Slab"; src: url("fonts/zilla-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("fonts/zilla-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("fonts/zilla-500i.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

:root {
  --veld: #2b4a9b;
  --veld-diep: #1f3878;
  --veld-licht: #3a5aae;
  --papier: #ecebe7;
  --papier-2: #e1dfd6;
  --inkt: #1b2b5c;
  --inkt-zacht: #46547d;
  --op-veld: #ecebe7;
  --op-veld-zacht: #cdd6ee;
  --font: "Zilla Slab", Rockwell, Georgia, serif;
  --s-klein: 0.875rem;
  --s-tekst: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --s-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --s-kop: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);
  --s-groot: clamp(3.5rem, 2rem + 5.6vw, 6.25rem);
  --marge: clamp(16px, 3vw, 32px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; background: var(--veld); color: var(--op-veld); font-family: var(--font); font-size: var(--s-tekst); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.025em; line-height: 1; margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid #f2c94c; outline-offset: 3px; }
::selection { background: var(--inkt); color: var(--papier); }
.klein { font-size: var(--s-klein); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* concept-strook */
.concept { display: block; text-decoration: none; background: var(--papier); color: var(--inkt); font-size: var(--s-klein); padding: 9px var(--marge); text-align: center; }

/* knoppen: rechthoekig, gevuld, één vorm op de hele site */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; background: var(--inkt); color: var(--papier); font: 600 var(--s-tekst)/1 var(--font); text-decoration: none; border: 0; cursor: pointer; transition: transform .16s var(--ease), background-color .2s; }
.knop:hover { background: #10204a; }
.knop:active { transform: scale(.97); }
.knop-licht { background: var(--papier); color: var(--inkt); }
.knop-licht:hover { background: #fff; }
.knop-klein { min-height: 44px; padding: 0 18px; font-size: 1rem; }
.top .knop { background: var(--papier); color: var(--inkt); }
.top .knop:hover { background: #fff; }

/* kopregel op het veld */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 20px var(--marge); position: relative; z-index: 3; }
.mono { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.125rem; }
.mono svg { width: 34px; height: 34px; color: var(--op-veld); transition: transform .6s var(--ease); }
.mono:hover svg { transform: rotate(45deg); }
.top nav { display: flex; gap: 28px; }
.top nav a { text-decoration: none; font-size: 1.0625rem; padding: 8px 0; position: relative; }
.top nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.top nav a:hover::after, .top nav a[aria-current="page"]::after { transform: scaleX(1); }
.top .knop { justify-self: end; }

main { background: var(--veld); }

/* ---------- hero: het bestelkaartje, onderaan afgesneden door het scherm ---------- */
.hero { padding: clamp(40px, 9vh, 110px) var(--marge) 0; display: grid; grid-template-columns: repeat(12, 1fr); }
.kaart { grid-column: 4 / 10; background: var(--papier); color: var(--inkt); position: relative; text-align: center; padding: 56px clamp(24px, 4vw, 56px) 64px; min-height: 0; }
.hoek { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: var(--veld); }
.hoek.lb { left: -22px; top: -22px; } .hoek.rb { right: -22px; top: -22px; }
.hoek.lo { left: -22px; bottom: -22px; } .hoek.ro { right: -22px; bottom: -22px; }
.kaart .bloem { width: 46px; height: 46px; color: var(--veld); margin: 0 auto 26px; display: block; }
.kaart h1 { font-style: italic; font-weight: 500; font-size: clamp(3.25rem, 1.6rem + 4.6vw, 5.5rem); line-height: .98; letter-spacing: -0.03em; }
.kaart h1 span { display: block; }
.kaart h1 .r1 { transform: translateX(-6%); }
.kaart h1 .r2 { transform: translateX(6%); }
.kaart .onder { margin: 32px auto 0; max-width: 30ch; font-size: var(--s-lead); line-height: 1.3; }
.ruit { width: 10px; height: 10px; background: var(--veld); transform: rotate(45deg); margin: 26px auto; }
.details { display: grid; gap: 6px; font-size: 1.0625rem; }
.klok { margin: 30px auto 0; background: var(--papier-2); padding: 18px 20px; max-width: 420px; }
.klok b { display: block; font-size: var(--s-lead); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.klok span { display: block; font-size: 1rem; color: var(--inkt-zacht); margin-top: 4px; }
.kaart .knop { margin-top: 28px; }
.kaart-links { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 54px; font-size: 1.0625rem; }
.plaat { margin: 44px auto 0; max-width: 360px; background: var(--papier-2); padding: 10px; transform: rotate(-1.4deg); }
.plaat img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.plaat figcaption { font-size: var(--s-klein); color: var(--inkt-zacht); padding: 8px 2px 0; text-align: left; }

/* ---------- intro: titel, notitie, rij feiten (op het veld) ---------- */
.intro { padding: 140px var(--marge) 120px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.intro h2 { grid-column: 1 / 7; font-weight: 400; font-size: var(--s-groot); line-height: .95; align-self: end; }
.intro .notitie { grid-column: 9 / 13; align-self: end; max-width: 34ch; }
.feiten { grid-column: 1 / 8; display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 32px; margin-top: 110px; }
.feit b { display: block; font-weight: 400; font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.feit span { display: block; font-size: 1rem; color: var(--op-veld-zacht); margin-top: 8px; max-width: 28ch; }
.intro figure { grid-column: 9 / 13; margin: 110px 0 0; }
.intro figure img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
figcaption.onderschrift { font-size: var(--s-klein); color: var(--op-veld-zacht); margin-top: 10px; }

/* ---------- lijst: groot woord, gevulde balken (op papier) ---------- */
.lijst { background: var(--papier); color: var(--inkt); padding: 150px var(--marge) 160px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.lijst-kolom { grid-column: 1 / 8; container-type: inline-size; }
.reuzenwoord { font-size: 33cqw; line-height: .8; letter-spacing: -0.05em; font-weight: 600; margin-left: -0.04em; }
.lijst .uitleg { margin: 26px 0 30px; max-width: 46ch; }
.balk { background: var(--papier-2); margin-bottom: 6px; }
.balk summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 58px; padding: 0 20px; font-weight: 600; font-size: 1.125rem; }
.balk summary::-webkit-details-marker { display: none; }
.balk summary::after { content: "+"; font-size: 1.6rem; font-weight: 400; transition: transform .25s var(--ease); }
.balk[open] summary::after { transform: rotate(45deg); }
.balk summary:hover { background: #d7d4ca; }
.balk ul { list-style: none; margin: 0; padding: 4px 20px 22px; display: grid; gap: 14px; }
.balk li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; }
.balk li .prijs { font-variant-numeric: tabular-nums; font-weight: 600; }
.balk li small { grid-column: 1 / -1; font-size: 1rem; color: var(--inkt-zacht); }
.lijst-beeld { grid-column: 9 / 13; align-self: start; position: sticky; top: 40px; margin: 0; }
.lijst-beeld img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.lijst-beeld figcaption { font-size: var(--s-klein); color: var(--inkt-zacht); margin-top: 10px; }
.lijst .verder { margin-top: 34px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }

/* ---------- werkwijze: de bon (op diep blauw) ---------- */
.bonsectie { background: var(--veld-diep); padding: 150px var(--marge); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.bonsectie .kopje { grid-column: 1 / 6; }
.bonsectie h2 { font-size: var(--s-kop); }
.bonsectie .kopje p { margin-top: 22px; max-width: 32ch; color: var(--op-veld); }
.bonsectie .kopje figure { margin: 48px 0 0; max-width: 400px; }
.bonsectie .kopje img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.bon { grid-column: 7 / 12; background: var(--papier); color: var(--inkt); padding: 34px 32px 64px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 96% 100%, 92% calc(100% - 14px), 88% 100%, 84% calc(100% - 14px), 80% 100%, 76% calc(100% - 14px), 72% 100%, 68% calc(100% - 14px), 64% 100%, 60% calc(100% - 14px), 56% 100%, 52% calc(100% - 14px), 48% 100%, 44% calc(100% - 14px), 40% 100%, 36% calc(100% - 14px), 32% 100%, 28% calc(100% - 14px), 24% 100%, 20% calc(100% - 14px), 16% 100%, 12% calc(100% - 14px), 8% 100%, 4% calc(100% - 14px), 0 100%); font-variant-numeric: tabular-nums; max-width: 520px; }
.bon .bonkop { text-align: center; font-weight: 600; font-size: 1.25rem; }
.bon .bonkop small { display: block; font-weight: 400; font-size: 1rem; color: var(--inkt-zacht); }
.bon h3 { font-size: 1.125rem; margin: 28px 0 10px; letter-spacing: 0; }
.regel { display: flex; align-items: baseline; gap: 8px; font-size: 1.0625rem; padding: 4px 0; }
.regel .punten { flex: 1; min-width: 20px; border-bottom: 4px dotted var(--inkt); opacity: .45; transform: translateY(-4px); }
.regel .waarde { white-space: nowrap; }
.bon .eind { background: var(--inkt); color: var(--papier); display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 46px; padding: 10px 14px; margin: 30px -14px 0; font-weight: 600; }

/* ---------- brief van de bakkerij ---------- */
.briefsectie { background: var(--papier-2); color: var(--inkt); padding: 170px var(--marge); }
.brief { max-width: 660px; margin: 0 auto; background: var(--papier); padding: 60px clamp(24px, 6vw, 60px) 54px; position: relative; }
.brief::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: var(--papier); clip-path: polygon(0 0, 100% 0, 100% 0, 97.5% 100%, 95% 0, 92.5% 100%, 90% 0, 87.5% 100%, 85% 0, 82.5% 100%, 80% 0, 77.5% 100%, 75% 0, 72.5% 100%, 70% 0, 67.5% 100%, 65% 0, 62.5% 100%, 60% 0, 57.5% 100%, 55% 0, 52.5% 100%, 50% 0, 47.5% 100%, 45% 0, 42.5% 100%, 40% 0, 37.5% 100%, 35% 0, 32.5% 100%, 30% 0, 27.5% 100%, 25% 0, 22.5% 100%, 20% 0, 17.5% 100%, 15% 0, 12.5% 100%, 10% 0, 7.5% 100%, 5% 0, 2.5% 100%, 0 0); }
.brief h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); margin-bottom: 28px; }
.brief p + p { margin-top: 1.1em; }
.brief .markeer { background: #cdd8f3; padding: 0 .15em; }
.brief .afzender { margin-top: 34px; font-style: italic; font-weight: 500; font-size: 1.375rem; }
.brief .afzender small { display: block; font-style: normal; font-weight: 400; font-size: 1rem; color: var(--inkt-zacht); }
.strookje { border-top: 6px dotted var(--papier-2); margin: 40px calc(-1 * clamp(24px, 6vw, 60px)) 0; padding: 24px clamp(24px, 6vw, 60px) 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---------- vragen naast een hoge foto (op het veld) ---------- */
.vragen { padding: 0 var(--marge) 160px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.vragen .tekst { grid-column: 1 / 6; padding-top: 140px; }
.vragen h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); }
.praktisch { margin: 24px 0 34px; display: grid; gap: 4px; font-size: 1.125rem; }
.vraag { padding: 14px 0; }
.vraag summary { list-style: none; cursor: pointer; font-size: 1.25rem; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 44px; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after { content: ""; width: 10px; height: 10px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease); }
.vraag[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.vraag p { color: var(--op-veld-zacht); margin-top: 8px; font-size: 1.0625rem; max-width: 44ch; }
.vragen .acties { margin-top: 30px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.fotos { grid-column: 7 / 13; position: relative; padding-bottom: 80px; }
.fotos .hoog { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.fotos .vierkant { position: absolute; left: -40px; bottom: 30px; width: 36%; aspect-ratio: 1; object-fit: cover; border: 8px solid var(--veld); }
.fotos figcaption { position: absolute; right: 0; bottom: 40px; font-size: var(--s-klein); color: var(--op-veld-zacht); max-width: 50%; text-align: right; }

/* ---------- bezoekkaartje op een foto ---------- */
.bezoek { position: relative; min-height: 100svh; }
.bezoek > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visite { position: relative; margin-left: auto; margin-right: var(--marge); top: 60px; width: 400px; max-width: calc(100% - 32px); background: var(--papier); color: var(--inkt); border-radius: 8px; padding: 32px 32px 0; overflow: hidden; }
.visite h2 { font-size: 1.875rem; font-weight: 400; }
.visite address { font-style: normal; margin: 16px 0 20px; }
.tijden { display: grid; gap: 4px; font-variant-numeric: tabular-nums; font-size: 1.0625rem; }
.tijden div { display: flex; justify-content: space-between; gap: 16px; }
.tijden .vandaag { font-weight: 600; }
.visite .status { margin-top: 16px; font-size: 1rem; color: var(--inkt-zacht); }
.visite .knop { width: calc(100% + 64px); margin: 26px -32px 0; min-height: 56px; }
.bezoek .credit { position: absolute; right: var(--marge); bottom: 14px; font-size: var(--s-klein); color: #fff; background: rgba(0,0,0,.45); padding: 4px 8px; }

/* ---------- voet: de achterkant van de kaart, onthuld als een gordijn ---------- */
.achterkant { padding: 90px var(--marge) 40px; display: grid; grid-template-columns: repeat(12, 1fr); }
.kaart-achter { grid-column: 2 / 12; background: var(--papier); color: var(--inkt); padding: 70px clamp(24px, 5vw, 64px) 26px; position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px 56px; }
.kaart-achter::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 25px; background: var(--papier); clip-path: polygon(0 100%, 0 60%, 2% 25%, 4.17% 0, 6.33% 25%, 8.33% 60%, 10.33% 25%, 12.5% 0, 14.67% 25%, 16.67% 60%, 18.67% 25%, 20.83% 0, 23% 25%, 25% 60%, 27% 25%, 29.17% 0, 31.33% 25%, 33.33% 60%, 35.33% 25%, 37.5% 0, 39.67% 25%, 41.67% 60%, 43.67% 25%, 45.83% 0, 48% 25%, 50% 60%, 52% 25%, 54.17% 0, 56.33% 25%, 58.33% 60%, 60.33% 25%, 62.5% 0, 64.67% 25%, 66.67% 60%, 68.67% 25%, 70.83% 0, 73% 25%, 75% 60%, 77% 25%, 79.17% 0, 81.33% 25%, 83.33% 60%, 85.33% 25%, 87.5% 0, 89.67% 25%, 91.67% 60%, 93.67% 25%, 95.83% 0, 98% 25%, 100% 60%, 100% 100%); }
.groet h2 { font-size: 2rem; margin-bottom: 16px; }
.groet p { max-width: 40ch; }
.groet .klein { margin-top: 24px; color: var(--inkt-zacht); max-width: 60ch; font-size: 1rem; }
.adres { display: grid; gap: 12px; align-content: start; font-size: 1.125rem; position: relative; padding-right: 110px; }
.adres a { text-decoration: none; }
.adres a:hover { text-decoration: underline; }
.zegel { position: absolute; right: 0; top: 0; width: 88px; margin: 0; background: var(--papier-2); padding: 6px; transform: rotate(3deg); }
.zegel img { aspect-ratio: 3 / 4; object-fit: cover; }
.imprint { grid-column: 1 / -1; text-align: center; font-size: var(--s-klein); color: var(--inkt-zacht); padding-top: 20px; }

/* ---------- subpagina's ---------- */
.kop-blad { padding: clamp(40px, 8vh, 96px) var(--marge) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
.kop-blad .blad { grid-column: 1 / 8; background: var(--papier); color: var(--inkt); padding: clamp(32px, 5vw, 64px); position: relative; }
.kop-blad h1 { font-size: var(--s-kop); }
.kop-blad .blad p { margin-top: 18px; font-size: var(--s-lead); line-height: 1.35; max-width: 34ch; }
.kop-blad figure { grid-column: 8 / 13; margin: 0; }
.kop-blad figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* assortiment: menukaart */
.menukaart { padding: 120px var(--marge) 150px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 90px; }
.menublok { grid-column: span 6; background: var(--papier); color: var(--inkt); padding: 40px clamp(22px, 3.5vw, 44px) 44px; }
.menublok h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.menublok > p { margin: 12px 0 24px; color: var(--inkt-zacht); }
.menublok ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.menublok li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; }
.menublok li .prijs { font-weight: 600; font-variant-numeric: tabular-nums; }
.menublok li small { grid-column: 1 / -1; font-size: 1rem; color: var(--inkt-zacht); }
.menublok.verschoven { margin-top: 120px; }
.menufoto { grid-column: span 6; margin: 0; }
.menufoto img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }

/* bestellen */
.bestel { padding: 70px var(--marge) 160px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
.producten { grid-column: 1 / 8; display: grid; gap: 56px; }
.groepfoto { width: 100%; aspect-ratio: 16 / 5; object-fit: cover; margin-bottom: 24px; }
.groep h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); margin-bottom: 14px; }
.groep p.noot { color: var(--op-veld-zacht); margin: -6px 0 16px; font-size: 1.0625rem; }
.product { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 18px; align-items: center; background: var(--veld-licht); padding: 14px 16px 14px 20px; margin-bottom: 6px; }
.product .naam { font-weight: 600; }
.product .naam small { display: block; font-weight: 400; font-size: 1rem; color: var(--op-veld-zacht); }
.product .prijs { font-variant-numeric: tabular-nums; }
.teller { display: inline-flex; align-items: center; background: var(--papier); color: var(--inkt); }
.teller button { width: 44px; height: 44px; border: 0; background: none; color: inherit; font: 600 1.375rem/1 var(--font); cursor: pointer; transition: background-color .15s; }
.teller button:hover { background: var(--papier-2); }
.teller button:active { transform: scale(.92); }
.teller output { min-width: 30px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.product.gekozen { background: #4565b8; }
.bonnetje { grid-column: 8 / 13; position: sticky; top: 24px; }
.bonnetje .bon { max-width: none; }
.bon label { display: block; font-weight: 600; font-size: 1rem; margin: 18px 0 6px; }
.bon input, .bon select { width: 100%; min-height: 48px; font: 400 1.0625rem var(--font); color: var(--inkt); background: #fff; border: 2px solid var(--papier-2); padding: 0 12px; border-radius: 0; }
.bon input:focus, .bon select:focus { outline: 3px solid var(--veld); outline-offset: 0; border-color: var(--veld); }
.bon .hint { font-size: var(--s-klein); color: var(--inkt-zacht); margin-top: 6px; }
.bon .leeg { color: var(--inkt-zacht); font-size: 1.0625rem; padding: 6px 0; }
.bon .knop { width: 100%; margin-top: 24px; }
.bon .fout { color: #a32020; font-size: 1rem; margin-top: 12px; }
.bedankt { background: var(--papier-2); padding: 18px; margin-top: 18px; }
.bedankt b { display: block; font-size: 1.25rem; margin-bottom: 4px; }

/* beweging */
@media (prefers-reduced-motion: no-preference) {
  .js .kaart-achter.rijs { transform: translateY(60px); }
  .js .rijs { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .rijs.in { opacity: 1; transform: none; }
  .js .hero .kaart { animation: kaart-in 1s var(--ease) both; }
  .js .hero .plaat { animation: plaat-in 1.2s .35s var(--ease) both; }
  .js .kop-blad .blad { animation: kaart-in 1s var(--ease) both; }
  .js .kop-blad figure { animation: plaat-in 1.1s .2s var(--ease) both; }
  .js .product { animation: kaart-in .7s var(--ease) both; }
  .js .product:nth-child(3) { animation-delay: .06s; } .js .product:nth-child(4) { animation-delay: .12s; } .js .product:nth-child(5) { animation-delay: .18s; } .js .product:nth-child(6) { animation-delay: .24s; } .js .product:nth-child(7) { animation-delay: .3s; }
  .js .bonnetje { animation: plaat-in 1s .3s var(--ease) both; }
  @keyframes kaart-in { from { transform: translateY(60px); opacity: 0; } }
  @keyframes plaat-in { from { transform: translateY(30px) rotate(2deg); opacity: 0; } }
  .bezoek > img { animation: drift 30s ease-in-out infinite alternate; }
  @keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.1) translateX(-2%); } }
  .bezoek { overflow: hidden; }
}

/* ---------- tablet en telefoon ---------- */
@media (max-width: 960px) {
  .top { grid-template-columns: 1fr auto; }
  .top nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 22px; overflow-x: auto; }
  .kaart { grid-column: 2 / 12; }
  .intro h2, .intro .notitie, .feiten, .intro figure { grid-column: 1 / -1; }
  .intro .notitie { margin-top: 22px; }
  .intro figure { margin-top: 64px; max-width: 520px; }
  .feiten { margin-top: 72px; }
  .lijst-kolom, .lijst-beeld { grid-column: 1 / -1; }
  .lijst-beeld { position: static; margin-top: 60px; max-width: 520px; }
  .bonsectie .kopje, .bon { grid-column: 1 / -1; }
  .bon { margin-top: 48px; }
  .vragen .tekst, .fotos { grid-column: 1 / -1; }
  .fotos { order: -1; margin-top: 0; }
  .vragen .tekst { padding-top: 60px; }
  .kaart-achter { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .kop-blad .blad, .kop-blad figure { grid-column: 1 / -1; }
  .menublok, .menufoto { grid-column: 1 / -1; }
  .menublok.verschoven { margin-top: 0; }
  .producten, .bonnetje { grid-column: 1 / -1; }
  .bonnetje { position: static; margin-top: 56px; }
}
@media (max-width: 600px) {
  .top { padding-block: 14px; gap: 10px 12px; }
  .mono span { display: none; }
  .top nav { gap: 18px; }
  .top nav a { font-size: 1rem; }
  .hero { padding-top: 28px; padding-inline: 12px; }
  .kaart { grid-column: 1 / -1; padding: 44px 20px 48px; }
  .kaart h1 { font-size: 12vw; }
  .kaart h1 .r1, .kaart h1 .r2 { transform: none; }
  .hoek.lo, .hoek.ro, .kop-blad .hoek { display: none; }
  .hoek { width: 24px; height: 24px; }
  .hoek.lb { left: -12px; top: -12px; } .hoek.rb { right: -12px; top: -12px; }
  .intro { padding-block: 96px; }
  .intro h2 { font-size: 13vw; }
  .feiten { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .feit b { font-size: 1.75rem; }
  .lijst { padding-block: 96px; }
  .bonsectie, .briefsectie { padding-block: 96px; }
  .bon { padding: 28px 20px 56px; }
  .bon .eind { margin-inline: -8px; }
  .regel { font-size: 1rem; }
  .brief { padding: 36px 24px 36px; }
  .strookje { margin-inline: -24px; padding-inline: 24px; flex-direction: column; align-items: stretch; }
  .strookje .knop { width: 100%; }
  .fotos .vierkant { left: auto; right: -6px; bottom: 30px; width: 38%; }
  .fotos figcaption { right: auto; left: 0; bottom: 34px; text-align: left; max-width: 55%; }
  .bezoek { min-height: 0; padding-bottom: 32px; }
  .bezoek > img { position: relative; height: 70svh; }
  .visite { margin: -80px 16px 0; top: 0; width: auto; max-width: none; padding: 26px 22px 0; }
  .visite .knop { width: calc(100% + 44px); margin: 24px -22px 0; }
  .bezoek .credit { position: static; display: inline-block; margin: 14px 16px 0; }
  .achterkant { padding-top: 60px; }
  .adres { padding-right: 76px; font-size: 1.0625rem; }
  .zegel { width: 64px; }
  .product { grid-template-columns: 1fr auto; }
  .product .prijs { grid-row: 2; grid-column: 1; font-size: 1rem; }
  .product .teller { grid-row: 1 / 3; grid-column: 2; }
}