/* beetje-abart.nl: de vorm, tweede versie (10-10-2026).
   De eigenaar: "strakker, wat gelikter, modern, overzichtelijker, uniformer, mooiere header, iets
   meer animatie en effect". Dus: EEN maatsysteem, EEN sectiekop, EEN kaart en EEN knop voor elke
   pagina; hoofdletters alleen in koppen, lopende tekst in de leesletter. De kleuren, de zeshoek
   en het verloop komen uit het logo. Mobiel staat onderaan. */

@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/bebas-neue-latin.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url(/fonts/open-sans-latin.woff2) format("woff2"); }
@font-face { font-family: "Comfortaa"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/comfortaa-latin.woff2) format("woff2"); }

:root {
  --creme: #fdf8e9;
  --room: #ffedbb;
  --geel: #ffdc83;
  --amber: #f9b237;
  --bruin: #4e2a1c;
  --donker: #3a1406;
  --wit: #fffdf6;
  --zeshoek: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  --kop: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --tekst: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --merk: "Comfortaa", "Open Sans", sans-serif;
  --goot: clamp(18px, 5vw, 64px);
  --breed: min(1200px, 100% - 2 * var(--goot));
  --ruimte: clamp(56px, 7.5vw, 116px);
  --straal: 8px;
  --schaduw: 0 12px 34px rgba(58, 20, 6, .10), 0 2px 6px rgba(58, 20, 6, .06);
  --schaduw-op: 0 20px 48px rgba(58, 20, 6, .16), 0 4px 10px rgba(58, 20, 6, .08);
  --kophoogte: 76px;
  /* de honingraat: een tegel met een zeshoek, heel licht */
  --raat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='208' height='360' viewBox='0 0 104 180'%3E%3Cpath d='M52 0L104 30V90L52 120L0 90V30ZM52 120V180' fill='none' stroke='%23f8f0d8' stroke-width='2.5'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kophoogte) + 16px); }
body { margin: 0; font-family: var(--tekst); font-size: 17px; line-height: 1.65; color: var(--donker); background-color: var(--creme); background-image: var(--raat); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
.spring { position: absolute; left: 8px; top: -80px; z-index: 40; background: var(--amber); color: var(--donker); padding: 8px 14px; font-family: var(--kop); font-size: 20px; text-decoration: none; }
.spring:focus { top: 8px; }
.binnen { width: var(--breed); margin-inline: auto; }
.icoon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.val { position: absolute; left: -9999px; }

/* ---- de bouwstenen die overal hetzelfde zijn ---- */
h1, h2, h3, h4 { font-family: var(--kop); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }
h1 { font-size: clamp(44px, 5.6vw, 88px); line-height: .96; text-wrap: balance; }
h2 { font-size: clamp(34px, 3.6vw, 56px); line-height: 1; text-wrap: balance; }
h3 { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.05; }
.lead { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; color: var(--bruin); max-width: 36em; }
.oog { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bruin); }
.sectie { padding-block: var(--ruimte); }
.sectiekop { display: grid; gap: 10px; margin-bottom: clamp(28px, 3.4vw, 48px); justify-items: start; }
.sectiekop--rij { grid-template-columns: 1fr auto; align-items: end; }
.sectie--donker { position: relative; background: var(--donker); color: var(--room); background-image: none; }
.sectie--donker h2 { color: var(--creme); }
.sectie--donker .oog { color: var(--amber); }
.sectie--donker > svg { position: absolute; top: -1px; left: 0; width: 100%; height: auto; display: block; fill: var(--creme); }
.sectie--donker > .binnen { padding-top: 8.5vw; }

.knoppen { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.knoppen--midden { justify-content: center; margin-top: clamp(28px, 3.4vw, 48px); }
.knop {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--kop); font-size: 22px; line-height: 1; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; background: var(--bruin); color: var(--amber);
  padding: .62em 1.15em .52em; border: 2px solid var(--bruin); border-radius: var(--straal);
  transition: transform .18s, box-shadow .18s, background-color .18s, color .18s, border-color .18s;
}
.knop:hover { transform: translateY(-2px); box-shadow: var(--schaduw); background: var(--donker); border-color: var(--donker); }
.knop--lijn { background: transparent; color: var(--bruin); }
.knop--lijn:hover { background: var(--bruin); border-color: var(--bruin); color: var(--amber); }
.knop--licht { background: var(--amber); border-color: var(--amber); color: var(--donker); }
.knop--licht:hover { background: var(--geel); border-color: var(--geel); }
.knop--lijn-licht { background: transparent; border-color: var(--room); color: var(--room); }
.knop--lijn-licht:hover { background: var(--room); border-color: var(--room); color: var(--donker); }
.knop--klein { font-size: 19px; padding: .5em .95em .42em; }
.tekstlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--bruin); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 5px; padding-block: 4px; }
.tekstlink .icoon { width: 18px; height: 18px; transition: transform .18s; }
a:hover .tekstlink .icoon, .tekstlink:hover .icoon { transform: translateX(4px); }

/* ---- de kop: licht, en compact zodra je scrolt ---- */
.kop { position: sticky; top: 0; z-index: 20; transition: background-color .25s, box-shadow .25s; }
.kop--los { background: rgba(253, 248, 233, .93); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(58, 20, 6, .10); }
.kop__rij { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--kophoogte); transition: min-height .25s; }
.kop--los .kop__rij { min-height: 62px; }
.merk { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--donker); padding-block: 6px; }
.merk__naam { font-family: var(--merk); font-weight: 700; font-size: 25px; line-height: 1; letter-spacing: -.01em; padding-top: 3px; }
.merk__naam b { font-weight: 700; }
.merk__naam i { font-style: normal; color: var(--amber); }
.kop__menu ul { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 38px); }
.kop__menu li > a:not(.knop) { position: relative; display: inline-block; padding: 10px 0; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--donker); }
.kop__menu li > a:not(.knop)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .22s; }
.kop__menu li > a:not(.knop):hover::after, .kop__menu li > a[aria-current="page"]::after { transform: scaleX(1); }
.kop__knop { display: none; }

/* ---- de opening van de home ---- */
.held { padding-block: clamp(36px, 5vw, 84px) var(--ruimte); }
.held__rij { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.held__tekst { display: grid; gap: 22px; justify-items: start; }
.held h1 { max-width: 11em; }
.feiten { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 22px; margin-top: 6px; border-top: 2px solid rgba(78, 42, 28, .14); font-size: 15px; font-weight: 600; color: var(--bruin); width: 100%; }
.feiten li { display: flex; align-items: center; gap: 9px; }
.tros { position: relative; aspect-ratio: 1.01; width: 100%; max-width: 540px; justify-self: end; }
.tros li { position: absolute; width: 57.14%; aspect-ratio: 1.1547; clip-path: var(--zeshoek); transform: scale(.955); background: var(--room); transition: transform .35s; }
.tros li:hover { transform: scale(1); }
.tros li:nth-child(1) { left: 0; top: 0; }
.tros li:nth-child(2) { left: 42.86%; top: 25%; }
.tros li:nth-child(3) { left: 0; top: 50%; }
.tros img { width: 100%; height: 100%; object-fit: cover; }

/* ---- de opening van een vervolgpagina: overal dezelfde ---- */
.kopstuk { position: relative; overflow: hidden; padding-block: clamp(44px, 6vw, 100px) clamp(36px, 5vw, 72px); }
.kopstuk .binnen { position: relative; display: grid; gap: 20px; justify-items: start; }
.kopstuk h1 { max-width: 15em; }

/* ---- de kaart: voor het aanbod, een review, een blok tekst ---- */
.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.kaart, .review, .briefje, .stap--doen, .vooraf, .event, .events__leeg {
  background: var(--wit); border-radius: var(--straal); box-shadow: var(--schaduw);
}
.kaart { overflow: hidden; transition: transform .25s, box-shadow .25s; }
.kaart:hover { transform: translateY(-6px); box-shadow: var(--schaduw-op); }
.kaart > a { display: grid; grid-template-rows: auto 1fr; height: 100%; text-decoration: none; }
.kaart__foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--room); }
.kaart__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.kaart:hover .kaart__foto img { transform: scale(1.05); }
.kaart__tekst { display: grid; gap: 10px; align-content: start; justify-items: start; padding: 24px 26px 26px; }
.kaart__tekst p { font-size: 16px; }
.kaart__tekst .tekstlink { margin-top: 6px; }

/* ---- de box van deze periode, op donker ---- */
.gangkaarten { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 36px); }
.gangkaart { display: grid; gap: 6px; justify-items: center; align-content: start; text-align: center; font-size: 15px; }
.gangkaart__foto { width: 100%; aspect-ratio: 1.1547; clip-path: var(--zeshoek); background: var(--bruin); margin-bottom: 12px; transition: transform .35s; }
.gangkaart:hover .gangkaart__foto { transform: scale(1.04) rotate(-1.5deg); }
.gangkaart__foto img { width: 100%; height: 100%; object-fit: cover; }
.gangkaart__naam { font-family: var(--kop); font-size: 24px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--amber); }

/* ---- foto en tekst naast elkaar ---- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.duo__foto { border-radius: var(--straal); overflow: hidden; box-shadow: var(--schaduw); aspect-ratio: 4 / 3; background: var(--room); }
.duo__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.duo__foto:hover img { transform: scale(1.04); }
.duo__tekst { display: grid; gap: 18px; justify-items: start; }
.duo__tekst .sectiekop { margin-bottom: 0; }
.vinkjes { display: grid; gap: 8px; font-weight: 600; }
.vinkjes li { display: flex; align-items: center; gap: 10px; }
.labels { display: flex; flex-wrap: wrap; gap: 8px; }
.labels li { font-size: 14px; font-weight: 700; padding: 5px 14px; border: 2px solid rgba(78, 42, 28, .28); border-radius: 99px; color: var(--bruin); background: var(--wit); }

/* ---- het citaat ---- */
.citaat { background: var(--geel); background-image: none; }
.citaat__rij { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.citaat__foto { width: clamp(180px, 22vw, 300px); aspect-ratio: 1.1547; clip-path: var(--zeshoek); background: var(--amber); }
.citaat__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.citaat blockquote { font-size: clamp(20px, 2.1vw, 30px); line-height: 1.4; font-weight: 600; color: var(--donker); max-width: 30em; text-wrap: pretty; }
.citaat figcaption { margin-top: 18px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bruin); }

/* ---- reviews: een rij waar je doorheen schuift ---- */
.rij { display: flex; gap: clamp(16px, 2vw, 26px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 4px 26px; margin-inline: -4px; }
.rij::-webkit-scrollbar { display: none; }
.review { flex: 0 0 min(400px, 84vw); scroll-snap-align: start; padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; border-top: 4px solid var(--amber); }
.sterren { display: flex; gap: 3px; color: var(--amber); }
.sterren svg { width: 18px; height: 18px; }
.review blockquote { font-size: 16px; }
.review footer { margin-top: auto; font-size: 14px; color: var(--bruin); }
.review footer strong { color: var(--donker); }
.rij__knoppen { display: flex; gap: 10px; }
.rij__knoppen[hidden] { display: none; }
.rij__knoppen button { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--bruin); background: transparent; color: var(--bruin); cursor: pointer; display: grid; place-items: center; transition: background-color .18s, color .18s, opacity .18s; }
.rij__knoppen button:hover { background: var(--bruin); color: var(--amber); }
.rij__knoppen button:disabled { opacity: .3; cursor: default; background: transparent; color: var(--bruin); }
.rij__knoppen .icoon { width: 20px; height: 20px; }

/* ---- contact ---- */
.contact__rij { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--straal); overflow: hidden; box-shadow: var(--schaduw); }
.formulier { background: var(--donker); color: var(--room); padding: clamp(22px, 3.4vw, 48px); display: grid; gap: 14px; align-content: start; }
.formulier label { display: grid; gap: 5px; font-size: 14px; font-weight: 600; }
.formulier input, .formulier textarea { width: 100%; font: inherit; font-weight: 400; font-size: 16px; color: var(--donker); background: #fff; border: 2px solid transparent; border-radius: 6px; padding: 10px 12px; transition: border-color .15s, box-shadow .15s; }
.formulier textarea { min-height: 150px; resize: vertical; }
.formulier input:focus, .formulier textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px rgba(249, 178, 55, .3); }
.formulier button { font-family: var(--kop); font-size: 24px; letter-spacing: .04em; line-height: 1; background: var(--amber); color: var(--donker); border: 2px solid var(--amber); border-radius: var(--straal); padding: .58em 1em .48em; margin-top: 6px; cursor: pointer; transition: background-color .18s, transform .18s; }
.formulier button:hover { background: var(--geel); border-color: var(--geel); transform: translateY(-2px); }
.gegevens { background: var(--geel); display: flex; flex-direction: column; }
.gegevens > svg { width: 100%; height: auto; display: block; fill: var(--donker); }
.gegevens ul { margin: auto; padding: 32px 24px 48px; display: grid; gap: clamp(16px, 2vw, 30px); font-family: var(--kop); font-size: clamp(24px, 2vw, 32px); line-height: 1; text-transform: uppercase; }
.gegevens a { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.gegevens a .icoon { flex: none; width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--donker); color: var(--geel); transition: transform .2s; }
.gegevens a:hover .icoon { transform: scale(1.1) rotate(-6deg); }
.gegevens a:hover span { text-decoration: underline; text-underline-offset: 5px; }
.contact__foto { overflow: hidden; background: var(--room); }
.contact__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

/* ---- de voet ---- */
.voet { background: var(--donker); color: var(--room); font-size: 15px; padding-top: clamp(44px, 5vw, 72px); }
.voet__rij { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px clamp(24px, 4vw, 64px); }
.voet .merk { color: var(--creme); margin-bottom: 10px; }
.voet__kop { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; }
.voet ul { display: grid; gap: 2px; }
.voet li a { display: inline-block; padding-block: 5px; text-decoration: none; }
.voet li a:hover { color: var(--amber); text-decoration: underline; text-underline-offset: 4px; }
.voet__onder { margin-top: clamp(32px, 4vw, 56px); padding-block: 20px 26px; border-top: 1px solid rgba(255, 237, 187, .2); font-size: 13px; color: rgba(255, 237, 187, .7); }

/* ---- dinner boxes: de sprongrij, voor je begint, en per gang drie vaste stappen ---- */
.dozen { padding-bottom: var(--ruimte); }
.schuin { display: inline-block; margin: 0 0 6px -18px; background: var(--bruin); color: var(--amber); font-size: clamp(32px, 3.2vw, 54px); line-height: 1; padding: .26em .6em .2em .5em; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.gangen { position: sticky; top: 62px; z-index: 5; margin: 8px 0 24px; background: var(--creme); border-bottom: 2px solid rgba(78, 42, 28, .18); }
.gangen ul { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0; scrollbar-width: none; }
.gangen a { display: block; white-space: nowrap; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bruin); border: 2px solid rgba(78, 42, 28, .28); border-radius: 99px; padding: 8px 16px 7px; transition: background-color .18s, color .18s, border-color .18s; }
.gangen a:hover, .gangen a.hier { background: var(--bruin); border-color: var(--bruin); color: var(--amber); }
.vooraf { padding: 24px 28px 28px; border-left: 6px solid var(--amber); }
.vooraf h3 { margin-bottom: 10px; }
.vooraf ul { display: grid; gap: 6px; padding-left: 1.2em; list-style: disc; max-width: 80ch; }
.gang { padding-block: clamp(32px, 3.6vw, 56px); scroll-margin-top: 140px; }
.gang + .gang { border-top: 2px solid rgba(78, 42, 28, .14); }
.gang header { margin-bottom: 24px; }
.gang header p { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bruin); }
.gang h3 { font-size: clamp(26px, 2.4vw, 40px); max-width: 30em; margin-top: 8px; }
.bord { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 12px 3px; border: 2px solid rgba(78, 42, 28, .4); border-radius: 99px; color: var(--bruin); }
.bord--warm { background: var(--amber); border-color: var(--amber); color: var(--donker); }
.gang__rij { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: clamp(16px, 2.2vw, 32px); align-items: start; }
.stap h4 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 24px; line-height: 1; letter-spacing: .02em; }
.stap > img, .bordfoto { border-radius: var(--straal); box-shadow: var(--schaduw); }
.stap img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--room); }
.stap--doen { padding: 22px 24px 24px; border-top: 4px solid var(--amber); }
.stap h5 { margin: 16px 0 6px; font-family: var(--tekst); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bruin); }
.stap h4 + h5 { margin-top: 0; }
.stappen { display: grid; gap: 2px; font-size: 16px; }
.stappen label { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 7px 0; cursor: pointer; }
.stappen input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 2px 0 0; border: 2px solid var(--bruin); border-radius: 5px; background: #fff; cursor: pointer; display: grid; place-items: center; transition: background-color .15s, border-color .15s; }
.stappen input::after { content: ""; width: 12px; height: 6px; margin-top: -3px; border-left: 3px solid var(--donker); border-bottom: 3px solid var(--donker); transform: rotate(-45deg) scale(0); transition: transform .15s; }
.stappen input:checked { background: var(--amber); border-color: var(--amber); }
.stappen input:checked::after { transform: rotate(-45deg) scale(1); }
.stappen input:checked + span { opacity: .5; text-decoration: line-through; }
.bordfoto { position: relative; overflow: hidden; background: var(--donker); }
.bordfoto img { display: block; border-radius: 0; box-shadow: none; }
.bordfoto--speelt { aspect-ratio: 9 / 16; }
.bordfoto iframe { width: 100%; height: 100%; border: 0; display: block; }
.video__knop { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; text-decoration: none; background: var(--bruin); color: var(--amber); font-family: var(--kop); font-size: 21px; line-height: 1; letter-spacing: .03em; text-transform: uppercase; padding: .58em 1em .48em .8em; border-radius: var(--straal); transition: transform .18s, background-color .18s; }
.video__knop:hover { transform: translateY(-2px); background: var(--donker); }
.video__knop .icoon { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.dozen__bestel { display: flex; justify-content: center; margin-top: 12px; }
.doos { border-top: 2px solid rgba(78, 42, 28, .18); }
.doos:last-child { border-bottom: 2px solid rgba(78, 42, 28, .18); }
.doos summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 18px; font-family: var(--kop); font-size: clamp(26px, 2.2vw, 36px); line-height: 1; text-transform: uppercase; color: var(--bruin); padding: 22px 4px 18px; transition: color .15s, padding-left .2s; }
.doos summary::-webkit-details-marker { display: none; }
.doos summary::before { content: ""; flex: none; width: 12px; height: 12px; margin: 0 4px 6px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg); transition: transform .2s; }
.doos[open] summary::before { transform: rotate(45deg); }
.doos summary:hover { color: var(--donker); padding-left: 10px; }

/* ---- walking dinners ---- */
.briefjes { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: clamp(16px, 2.2vw, 28px); margin-bottom: var(--ruimte); }
.briefje { padding: 24px 28px 26px; border-top: 4px solid var(--amber); font-size: 16px; }
.briefje h2 { font-size: 30px; margin-bottom: 8px; }
.briefje ul { display: grid; gap: 6px; }
.raat { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.4vw, 24px); margin-bottom: var(--ruimte); }
.raat li { aspect-ratio: 1.1547; clip-path: var(--zeshoek); background: var(--room); transition: transform .35s; }
.raat li:hover { transform: scale(1.04); }
.raat img { width: 100%; height: 100%; object-fit: cover; }
.uitbreidingen { background: var(--donker); color: var(--room); text-align: center; margin-bottom: var(--ruimte); border-radius: var(--straal); overflow: hidden; box-shadow: var(--schaduw); }
.uitbreidingen h2 { color: var(--amber); padding-top: clamp(32px, 4vw, 56px); }
.uitbreidingen__rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 28px 24px clamp(32px, 4vw, 56px); }
.uitbreidingen__rij > div { display: grid; gap: 8px; justify-items: center; align-content: start; font-size: 16px; }
.uitbreidingen .icoon { width: 84px; height: 84px; padding: 20px; border: 2px solid var(--geel); border-radius: 50%; color: var(--geel); stroke-width: 1.5; transition: transform .3s, background-color .3s, color .3s; }
.uitbreidingen__rij > div:hover .icoon { transform: translateY(-4px); background: var(--geel); color: var(--donker); }
.uitbreidingen h3 { color: var(--amber); margin: 6px 0 4px; }
.uitbreidingen__knop { display: block; background: var(--amber); color: var(--donker); text-decoration: none; font-family: var(--kop); font-size: clamp(22px, 1.7vw, 28px); line-height: 1; letter-spacing: .04em; text-transform: uppercase; padding: .75em 1em .65em; transition: background-color .18s; }
.uitbreidingen__knop:hover { background: var(--geel); }
.band { background: var(--donker); background-image: none; }
.band p { font-family: var(--kop); font-size: clamp(30px, 3.2vw, 54px); line-height: 1.12; text-transform: uppercase; color: var(--amber); text-align: center; padding-block: clamp(48px, 6vw, 104px); text-wrap: balance; }

/* ---- pop-up events ---- */
.events { padding-bottom: var(--ruimte); }
.events__lijst { display: grid; gap: 24px; }
.event { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); overflow: hidden; }
.event[hidden] { display: none; }
.event__foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.event__tekst { display: grid; gap: 8px; align-content: center; justify-items: start; padding: clamp(20px, 3vw, 44px); grid-column: span 2; }
.event__foto + .event__tekst { grid-column: auto; }
.event__wanneer { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bruin); }
.event__waar { font-weight: 600; }
.events__leeg { padding: clamp(24px, 3vw, 44px); display: grid; gap: 14px; justify-items: start; border-left: 6px solid var(--amber); }
.events__leeg > p:first-child { font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; max-width: 34em; }
.tussenkop { margin-bottom: 20px; }
.melding { padding-bottom: var(--ruimte); }
.melding a { display: inline-block; padding-block: 4px; }

/* ---- de tekens en lijnen: effen amber, geen verloop ----
   Gekozen door de eigenaar uit drie varianten (10-10: "ontwerp 3 honing", en "gevulde vierkant met
   ronde hoeken, maak daar een kleine honingraat van"). Het opschrift is een label, onder een kop
   ligt een veeg markeerstift, een opsomming heeft een vinkje, een stapnummer staat in een
   zeshoekje. Nergens een verloop: dat keurde hij uitdrukkelijk af. */
.oog { background: var(--amber); color: var(--donker); padding: 5px 12px 4px; border-radius: 4px; letter-spacing: .12em; }
.sectie--donker .oog { color: var(--donker); }
.sectiekop h2, .held h1, .kopstuk h1 { text-decoration: underline; text-decoration-color: var(--geel); text-decoration-thickness: .3em; text-underline-offset: -.16em; text-decoration-skip-ink: none; }
.sectie--donker .sectiekop h2 { text-decoration-color: var(--bruin); }
.feiten li::before, .vinkjes li::before { content: ""; flex: none; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%234e2a1c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.stap h4 span { flex: none; display: grid; place-items: center; width: 42px; aspect-ratio: 1.1547; padding-top: 2px; clip-path: var(--zeshoek); background: var(--amber); color: var(--donker); font-size: 22px; }
.merk__raat { width: 26px; aspect-ratio: 1.1547; clip-path: var(--zeshoek); background: var(--amber); transition: transform .4s; }
.merk:hover .merk__raat { transform: rotate(60deg); }
.merk__naam b { color: var(--amber); }
.merk__naam .merk__b2 { color: #b84d29; }
.kaart__tekst { border-top: 4px solid var(--amber); }
.kop--los { border-bottom: 3px solid var(--amber); }
.voet { border-top: 4px solid var(--amber); }

/* ---- een vleugje beweging ----
   Een blok komt zacht binnen, buren na elkaar (--i). Alleen met het script, alleen wat onder de
   vouw staat, en nooit voor wie beweging uit heeft staan. */
.kom { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.kom.er { opacity: 1; transform: none; }
.sectie--donker > svg.kom, .gegevens > svg.kom { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.6s cubic-bezier(.3, .6, .3, 1); }
.sectie--donker > svg.kom.er, .gegevens > svg.kom.er { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .kom { opacity: 1; transform: none; clip-path: none !important; }
}

/* ---- tablet en smaller ---- */
@media (max-width: 960px) {
  .kaarten { grid-template-columns: 1fr 1fr; }
  /* tablet staand: het menu blijft op een rij, elk woordpaar op een regel */
  .kop__rij { gap: 16px; }
  .kop__menu ul { gap: 16px; }
  .kop__menu li > a:not(.knop) { white-space: nowrap; font-size: 12.5px; letter-spacing: .06em; }
  .gangkaarten { grid-template-columns: 1fr 1fr; }
  .voet__rij { grid-template-columns: 1fr 1fr; }
  .gang__rij { grid-template-columns: 1fr 1fr; }
  .gang__rij .stap--doen { grid-column: 1 / -1; grid-row: 2; }
  .briefjes { grid-template-columns: 1fr 1fr; }
  .briefjes .briefje:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --kophoogte: 64px; }
  body { font-size: 16px; }
  .kop { background: rgba(253, 248, 233, .96); }
  .kop__knop { display: grid; gap: 5px; align-content: center; width: 46px; height: 46px; padding: 11px; border: 0; background: transparent; cursor: pointer; }
  .kop__knop span { display: block; height: 3px; border-radius: 2px; background: var(--donker); transition: transform .25s, opacity .2s; }
  .kop__knop[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .kop__knop[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .kop__knop[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .kop__menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--creme); box-shadow: 0 18px 30px rgba(58, 20, 6, .14); display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s; }
  .kop__menu ul { flex-direction: column; align-items: stretch; gap: 0; overflow: hidden; min-height: 0; padding-inline: var(--goot); }
  .kop:not(.kop--open) .kop__menu ul { visibility: hidden; }
  .kop--open .kop__menu ul { visibility: visible; }
  .kop--open .kop__menu { grid-template-rows: 1fr; }
  .kop__menu li > a:not(.knop) { display: block; padding: 16px 0; font-family: var(--kop); font-size: 30px; font-weight: 400; letter-spacing: .02em; border-bottom: 1px solid rgba(78, 42, 28, .12); }
  .kop__menu li > a:not(.knop)::after { display: none; }
  .kop__bestel { padding-block: 18px 22px; }
  .kop__bestel .knop { width: 100%; justify-content: center; font-size: 24px; }
  html:not(.js) .kop__knop { display: none; }
  html:not(.js) .kop__menu { position: static; grid-template-rows: 1fr; box-shadow: none; }
  .held__rij, .duo, .citaat__rij, .contact__rij { grid-template-columns: 1fr; }
  .tros { justify-self: center; max-width: 340px; }
  .kaarten, .briefjes { grid-template-columns: 1fr; }
  .gangkaarten { gap: 22px 14px; }
  .citaat__rij { justify-items: start; }
  .sectiekop--rij { grid-template-columns: 1fr; }
  .voet__rij { grid-template-columns: 1fr; gap: 26px; }
  .gangen { top: 64px; }
  .gang { scroll-margin-top: 130px; }
  .gang__rij { grid-template-columns: 1fr; }
  .gang__rij .stap--doen { grid-row: auto; }
  .schuin { margin-left: calc(-1 * var(--goot)); padding-left: var(--goot); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
  .stappen label { padding: 10px 0; }
  .bordfoto--speelt { max-height: 82vh; margin-inline: auto; }
  .raat { grid-template-columns: repeat(2, 1fr); }
  .uitbreidingen__rij { grid-template-columns: 1fr; gap: 36px; }
  .event { grid-template-columns: 1fr; }
  .event__tekst { grid-column: auto; }
  .contact__foto img { aspect-ratio: 4 / 5; }
}