/* Homepage, tien hoofdstukken. Ritme: blauw, blauw, zwart, goud, zwart, tan, blauw, tan, blauw, zwart. */

/* ===== 1. De doos ===== */
.scene { position: relative; padding-top: var(--kop-h); }
.scene__podium {
  position: relative; isolation: isolate;
  width: min(100% - 2 * var(--marge), var(--max)); margin-inline: auto;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goot); row-gap: 48px;
  padding-bottom: 32px;
}
.doos--held {
  grid-column: 1 / -1; grid-row: 1;
  --L: 800px; --H: 312px; --D: 374px;
  height: 640px; margin-top: 100px; width: 100%;
  z-index: auto;
}
.doos--held .doos__laag--achter { z-index: 1; }
.doos--held .doos__laag--voor { z-index: 3; }
.seizoen__foto { z-index: 2; position: relative; }
.bestelbon { z-index: 5; }
.inlegkaart { z-index: 5; }

/* de bestelbon: wit papier, gouden streep, gestanste hoeken */
.bestelbon {
  grid-row: 1; grid-column: 7 / span 4; align-self: start; justify-self: start; width: 340px;
  margin-top: 482px; margin-left: 20px; position: relative;
  background: var(--papier); color: var(--schapkaart); --focus: var(--schapkaart);
  border-radius: 7px; padding: 22px 22px 18px;
  box-shadow: 0 1px 1px rgba(20, 14, 6, 0.18), 0 10px 22px rgba(6, 10, 14, 0.32), 0 30px 60px rgba(6, 10, 14, 0.25);
  font-size: 1rem; line-height: 1.4;
}
.bestelbon::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--doosgoud); border-radius: 7px 7px 0 0; }
.bestelbon__kop { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #E4DED4; }
.bestelbon__titel { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 1.125rem; letter-spacing: 0.01em; line-height: 1; }
.bestelbon__chef { width: 22px; height: auto; --chef: var(--doosgoud); }
.bon { display: grid; }
.bon__rij { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0 10px; padding: 9px 0; border-bottom: 1px solid #ECE7DF; align-items: baseline; }
.bon dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-papier-zacht); }
.bon dd { font-size: 1rem; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.bon dd strong { font-size: 1.0625rem; }
.bon dd .tekstknop { min-height: 0; padding: 12px 0; margin: -12px 0; font-size: 0.9375rem; font-weight: 600; color: #4A443D; }
.bon__brooddag { display: block; font-weight: 600; color: #6B4F1E; }
.bon__klein { display: block; font-weight: 400; font-size: 0.875rem; color: var(--tekst-papier-zacht); }
.bon__klaar { padding: 12px 0 2px; }
.bon__regel { font-size: 0.9375rem; color: var(--tekst-papier-zacht); }
.bon__datum {
  margin-top: 2px; font-family: var(--display); font-weight: 800; font-stretch: 108%;
  font-size: 1.625rem; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance;
}
.bon__datum span { display: block; font-family: var(--tekst); font-stretch: 100%; font-weight: 600; font-size: 1rem; letter-spacing: 0; margin-top: 4px; }
.bon__acties { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.bon__acties .knop { flex: 1 1 auto; }

.scene__indedoos {
  grid-row: 1; grid-column: 3 / span 4; align-self: start; margin-top: 752px;
  font-size: 1.0625rem; color: var(--tekst-tegel-zacht); position: relative; z-index: 4;
}
.scene__indedoos strong { color: var(--doosgoud); font-weight: 700; }

/* statische open stand (geen JS, minder beweging, Save-Data): deksel open, inhoud ernaast */
html:not(.doos-anim) .doos--held { --open: 118deg; --klep-donker: 0.42; }
.seizoen__foto { grid-row: 2; grid-column: 2 / span 5; }
.seizoen__foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 42%; box-shadow: 0 16px 40px rgba(4, 7, 10, 0.5); }
.inlegkaart { grid-row: 2; grid-column: 8 / span 4; align-self: start; }

/* de inlegkaart: het kaartje in de doos */
.inlegkaart {
  background: var(--brochurekaart); color: var(--schapkaart); --focus: var(--schapkaart);
  padding: 28px 26px 22px; position: relative;
  box-shadow: 0 2px 2px rgba(20, 14, 6, 0.2), 0 18px 40px rgba(4, 7, 10, 0.4);
}
.inlegkaart__over { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-kaart-zacht); }
.inlegkaart__kop { margin-top: 8px; font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 1.75rem; line-height: 1.02; letter-spacing: -0.015em; }
.inlegkaart__zin { margin-top: 12px; font-size: 1.0625rem; line-height: 1.45; }
.inlegkaart__noot { margin-top: 10px; font-size: 0.9375rem; color: var(--tekst-kaart-zacht); }
.inlegkaart__lijst { margin-top: 14px; display: grid; gap: 8px; }
.inlegkaart__lijst .schapkaart { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto; padding: 8px 8px 8px 12px; }
.inlegkaart__lijst .schapkaart .ovaal { grid-column: 2; grid-row: 1 / span 2; min-width: 62px; height: 34px; font-size: 1.125rem; padding-top: 6px; }
.inlegkaart__lijst .schapkaart__plus { grid-column: 3; grid-row: 1 / span 2; margin: 0; align-self: center; }
.inlegkaart .pijllink { margin-top: 10px; }

/* ===== 2. Op het schap ===== */
.schap { padding-block: var(--sectie); }
.schap__kop { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goot); align-items: end; }
.schap__kop .kop2 { grid-column: 1 / span 7; }
.schap__intro { grid-column: 8 / span 5; color: var(--tekst-tegel-zacht); max-width: 46ch; padding-bottom: 6px; }
.planken { margin-top: clamp(48px, 6vw, 88px); display: grid; gap: clamp(40px, 4.5vw, 64px); }
.plank { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 32px; align-items: start; }
.plank__naam {
  font-family: var(--display); font-weight: 800; font-stretch: 118%; font-size: 2rem; line-height: 1;
  letter-spacing: -0.015em; padding-top: 6px;
}
.plank__naam small { display: block; margin-top: 10px; font-family: var(--tekst); font-stretch: 100%; font-weight: 400; font-size: 0.9375rem; letter-spacing: 0; color: var(--tekst-tegel-zacht); line-height: 1.4; }
.plank__rek { --tegel: 232px; --foto-h: calc(var(--tegel) * 0.75); position: relative; padding-inline: 14px; }
.plank__hout {
  position: absolute; left: 0; right: 0; top: calc(var(--foto-h) + 12px); height: 16px; z-index: 0;
  background:
    linear-gradient(180deg, var(--eik-licht) 0 2px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 41px, rgba(0, 0, 0, 0.08) 41px 43px, rgba(0, 0, 0, 0) 43px 97px, rgba(255, 255, 255, 0.05) 97px 98px),
    linear-gradient(180deg, #6E5D47 0%, var(--eikenschap) 45%, #52463A 100%);
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.4);
}
.plank__hout::before, .plank__hout::after {
  content: ""; position: absolute; top: 0; width: 6px; height: 100%;
  background: linear-gradient(180deg, #4A3E31, #3A3027);
}
.plank__hout::before { left: 0; }
.plank__hout::after { right: 0; }
.plank__rij {
  position: relative; z-index: 1;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 0;
  scrollbar-width: thin; scrollbar-color: var(--eikenschap) transparent;
  padding: 12px 0 18px;
}
.plank__rij:focus-visible { outline: 3px solid var(--doosgoud); outline-offset: 4px; }
.plank__rij::-webkit-scrollbar { height: 6px; }
.plank__rij::-webkit-scrollbar-thumb { background: var(--eikenschap); border-radius: 3px; }
.plank__rij::-webkit-scrollbar-track { background: transparent; }
.plank__lijst { display: flex; gap: 20px; width: max-content; }
.waar { width: var(--tegel); flex: 0 0 auto; scroll-snap-align: start; display: grid; grid-template-rows: var(--foto-h) auto; }
.waar__foto { position: relative; height: var(--foto-h); overflow: hidden; background: #2A3540; }
.waar__foto img { width: 100%; height: 100%; object-fit: cover; }
/* een gedeelde poedersuiker-achtergrond: wit, marmer en hout uit de webshop zitten zo in één lijst op het schap */
.waar__foto:not(.waar__foto--leeg) { background: var(--poedersuiker); padding: 10px; }
.waar__foto:not(.waar__foto--leeg) img { object-fit: contain; }
.waar__foto--leeg { display: grid; align-content: end; gap: 8px; padding: 16px 16px 18px; background: var(--schapkaart); box-shadow: inset 0 4px 0 var(--doosgoud), 0 3px 8px rgba(0, 0, 0, 0.35); }
.waar__foto--leeg span { font-family: var(--display); font-weight: 800; font-stretch: 118%; font-size: 1.625rem; line-height: 0.98; letter-spacing: -0.015em; color: var(--doosgoud); }
.waar__foto--leeg small { font-size: 0.8125rem; line-height: 1.3; color: #C9CBC6; }
.waar .schapkaart { margin-top: 16px; min-height: 104px; }
.waar--topper .waar__foto::after {
  content: "Dagtopper vandaag"; position: absolute; left: 0; top: 0; padding: 6px 10px 6px 12px;
  background: var(--prijsovaal); color: var(--schapkaart); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.02em;
}
.waar--topper .schapkaart__extra { color: var(--prijsovaal); font-weight: 600; }
.waar--alles a {
  display: grid; align-content: end; height: var(--foto-h); padding: 18px;
  border: 1px solid rgba(236, 238, 235, 0.28); text-decoration: none;
  font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 1.375rem; line-height: 1.05;
}
.waar--alles a:hover { border-color: var(--doosgoud); color: var(--doosgoud); }
.waar--alles svg { width: 28px; height: 28px; margin-top: 10px; }
.dagweek { margin-top: clamp(48px, 5vw, 72px); padding-top: 22px; border-top: 1px solid rgba(236, 238, 235, 0.16); display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 32px; row-gap: 14px; }
.dagweek__kop { font-family: var(--display); font-weight: 700; font-stretch: 112%; font-size: 1.25rem; line-height: 1.1; }
.dagweek__rij { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 18px; }
.dagweek__rij li { display: grid; gap: 2px; padding-top: 2px; color: var(--tekst-tegel-zacht); font-size: 0.9375rem; line-height: 1.35; }
.dagweek__rij b { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 0.9375rem; color: var(--poedersuiker); }
.dagweek__rij .deal { font-weight: 700; color: var(--poedersuiker); font-variant-numeric: lining-nums tabular-nums; }
.dagweek__rij li.is-vandaag { color: var(--doosgoud); }
.dagweek__rij li.is-vandaag b, .dagweek__rij li.is-vandaag .deal { color: var(--doosgoud); }
.dagweek__rij li.is-vandaag b::after { content: " vandaag"; font-family: var(--tekst); font-stretch: 100%; font-weight: 600; font-size: 0.8125rem; }
.dagweek__noot { grid-column: 2; font-size: 0.9375rem; color: var(--tekst-tegel-zacht); }
.dagweek__noot a { color: var(--poedersuiker); font-weight: 600; }

/* ===== 3. Een taart voor morgen ===== */
.taart { padding-block: var(--sectie); }
.taart__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goot); row-gap: 40px; }
.taart__h2 { grid-column: 1 / span 8; }
.taart__stel { grid-column: 1 / span 7; position: relative; display: grid; }
.doos--klein {
  --L: 470px; --H: 184px; --D: 220px; --ry: -26deg; --rx: -10deg; --pers: 1300px;
  grid-area: 1 / 1; width: 100%; height: 340px; margin-left: -12%;
}
.doos--klein .doos__laag { z-index: 0; }
.label {
  grid-area: 1 / 1; justify-self: end; align-self: start; margin-top: 150px; margin-right: 2%;
  width: min(380px, 100%); position: relative; z-index: 2;
  background: var(--papier); color: var(--schapkaart); --focus: var(--schapkaart);
  border-radius: 7px; padding: 22px 22px 20px;
  box-shadow: 0 1px 1px rgba(20, 14, 6, 0.18), 0 12px 26px rgba(0, 0, 0, 0.4), 0 34px 64px rgba(0, 0, 0, 0.3);
}
.label::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--doosgoud); border-radius: 7px 7px 0 0; }
.label__kop { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #E4DED4; }
.label__titel { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 1.125rem; line-height: 1; }
.label__chef { width: 22px; height: auto; --chef: var(--doosgoud); }
.label__veld { border: 0; margin: 0; padding: 12px 0; border-bottom: 1px solid #ECE7DF; min-width: 0; }
.label__veld--rij { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); align-items: center; gap: 0 10px; }
.label__naam { display: block; padding: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-papier-zacht); }
.label__veld--taart .label__naam { margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips label { position: relative; }
.chips input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chips span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border: 1px solid #CFC7BA; border-radius: 22px; font-weight: 600; font-size: 0.9375rem; line-height: 1.1; cursor: pointer;
  transition: background-color 150ms, border-color 150ms, color 150ms;
}
.chips span:hover { border-color: var(--schapkaart); }
.chips input:checked + span { background: var(--schapkaart); color: var(--papier); border-color: var(--schapkaart); }
.chips input:focus-visible + span { outline: 3px solid var(--schapkaart); outline-offset: 3px; }
.label__meer { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 0.9375rem; font-weight: 600; color: #4A443D; }
.stapper { display: inline-flex; align-items: center; gap: 4px; justify-self: start; }
.stapper__knop { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #CFC7BA; border-radius: 2px; background: var(--papier); color: var(--schapkaart); }
.stapper__knop:hover { border-color: var(--schapkaart); }
.stapper__knop[disabled] { opacity: 0.35; cursor: not-allowed; }
.stapper__knop svg { width: 20px; height: 20px; }
.stapper__waarde { min-width: 3.2ch; text-align: center; font-family: var(--display); font-weight: 800; font-size: 1.5rem; font-variant-numeric: lining-nums tabular-nums; }
.kiezer { position: relative; }
.kiezer select {
  width: 100%; min-height: 44px; padding: 0 36px 0 12px; appearance: none; -webkit-appearance: none;
  border: 1px solid #CFC7BA; border-radius: 2px; background: var(--poedersuiker); color: var(--schapkaart); font-weight: 600;
}
.kiezer::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.label__veld--foto { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); gap: 0 10px; align-items: start; }
.label__veld--foto input { max-width: 100%; font-size: 0.9375rem; }
.label__hulp { display: block; margin-top: 4px; font-size: 0.8125rem; color: var(--tekst-papier-zacht); line-height: 1.35; }
.label__fout { display: block; margin-top: 4px; font-size: 0.875rem; font-weight: 600; color: #9B2C1F; }
.label__uit { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; font-variant-numeric: lining-nums tabular-nums; }
.label__prijs { font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.label__uit.is-nieuw, .label__prijs.is-nieuw { animation: oplicht 600ms var(--uit); }
@keyframes oplicht { from { background: #F6E7C8; } to { background: transparent; } }
.label__knop { width: 100%; margin-top: 16px; }
.label__status { min-height: 1.4em; margin-top: 8px; font-size: 0.9375rem; font-weight: 600; }
.taart__regel { grid-column: 9 / span 4; align-self: start; display: grid; gap: 28px; padding-top: 12px; }
.taart__zin { font-family: var(--display); font-weight: 700; font-stretch: 106%; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.005em; }
.maat { display: grid; justify-items: start; gap: 10px; }
.maat__vlak {
  --cm: 24.5; width: calc(var(--cm) * 8px); height: calc(var(--cm) * 8px);
  /* bovenaanzicht van een vierkante taart: rand, spuitrand van room, een aangesneden punt, schaduw */
  position: relative; display: grid; place-items: center; color: var(--schapkaart); margin-bottom: 22px; border-radius: 6px;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(92, 58, 28, 0.45) calc(50% - 1px), rgba(92, 58, 28, 0.45) calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / 100% 50% no-repeat,
    linear-gradient(transparent calc(50% - 1px), rgba(92, 58, 28, 0.45) calc(50% - 1px), rgba(92, 58, 28, 0.45) calc(50% + 1px), transparent calc(50% + 1px)) 100% 0 / 50% 100% no-repeat,
    radial-gradient(120% 120% at 35% 30%, #F7EBD3 0%, #EBD5AC 60%, #DDBF8C 100%);
  box-shadow: inset 0 0 0 5px #C99A5B, inset 0 0 0 7px rgba(92, 58, 28, 0.35), 0 3px 0 #8E6634, 0 16px 30px rgba(0, 0, 0, 0.4);
  transition: width 250ms var(--uit), height 250ms var(--uit);
}
.maat__vlak::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -16px; height: 9px;
  border-inline: 1px solid rgba(236, 238, 235, 0.7);
  background: linear-gradient(rgba(236, 238, 235, 0.7), rgba(236, 238, 235, 0.7)) 0 50% / 100% 1px no-repeat;
}
.maat__vlak::before {
  content: ""; position: absolute; inset: 11px; border: 7px dotted rgba(255, 251, 242, 0.95); border-radius: 4px;
  filter: drop-shadow(0 1px 0 rgba(92, 58, 28, 0.35)); pointer-events: none;
}
.maat__cm { position: relative; z-index: 1; padding: 4px 12px; border-radius: 999px; background: #FFFBF3; box-shadow: 0 1px 0 rgba(92, 58, 28, 0.3); font-family: var(--display); font-weight: 700; font-size: 1.125rem; font-variant-numeric: lining-nums tabular-nums; }
.maat__onder { font-size: 0.9375rem; color: var(--tekst-schap-zacht); }
.bezorgcheck__label { display: block; font-weight: 700; margin-bottom: 8px; }
.bezorgcheck__veld { display: flex; gap: 8px; }
.bezorgcheck__veld input {
  flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid transparent; border-radius: 2px;
  background: var(--poedersuiker); color: var(--schapkaart); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.bezorgcheck__veld input::placeholder { color: #6B7075; text-transform: none; letter-spacing: 0; }
.bezorgcheck__antwoord { margin-top: 8px; min-height: 1.5em; font-size: 1rem; }
.taart__noten { display: grid; gap: 8px; font-size: 1rem; color: var(--tekst-schap-zacht); }
.taart__noten li { padding-left: 16px; position: relative; }
.taart__noten li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; background: var(--doosgoud); }
.taart__noten a { color: var(--poedersuiker); font-weight: 600; }

/* ===== 4. Uit onze achtertuin ===== */
.tuin { padding-block: var(--sectie); overflow: clip; }
.tuin__kop { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goot); align-items: end; }
.tuin__kop .kop2 { grid-column: 1 / span 7; }
.tuin__lead { grid-column: 8 / span 5; font-size: 1.3125rem; line-height: 1.4; font-weight: 600; max-width: 34ch; padding-bottom: 6px; }
.route { position: relative; margin-top: clamp(40px, 4vw, 64px); display: flex; flex-direction: column; }
.route__brood { order: -1; position: relative; width: min(520px, 46%); margin: 0 auto -86px; z-index: 1; left: 4%; }
.route__brood img { width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgba(70, 44, 8, 0.38)); }
.route__lijn { position: relative; z-index: 2; width: 100%; height: 120px; overflow: visible; }
.route__pad { fill: none; stroke: var(--schapkaart); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.route__stops { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--goot); margin-top: -64px; }
.route__stop { position: relative; padding-top: 34px; }
.route__punt { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--doosgoud); border: 4px solid var(--schapkaart); }
.route__stop h3 { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 1.375rem; line-height: 1.05; letter-spacing: -0.01em; }
.route__stop p { margin-top: 6px; font-size: 1rem; line-height: 1.4; max-width: 24ch; }
/* dezelfde vijf kolommen als de route: de kaart staat onder de laatste stop */
.tuin__onder { margin-top: clamp(48px, 5vw, 80px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--goot); align-items: start; }
.tuin__tekst { grid-column: 1 / span 3; font-size: 1.125rem; max-width: 60ch; }
.tuin__kaart { grid-column: 5; align-self: start; }
.tuin__product { width: min(300px, 100%); --foto-h: 225px; display: grid; grid-template-rows: var(--foto-h) auto; box-shadow: 0 14px 30px rgba(60, 40, 6, 0.3); }
.tuin__product .schapkaart { margin-top: 0; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .route { view-timeline-name: --route; }
    .route__pad { animation: trek linear both; animation-timeline: --route; animation-range: entry 20% cover 60%; stroke-dashoffset: 1; }
    .route__stop { animation: verschijn linear both; animation-timeline: --route; animation-range: entry calc(20% + var(--i) * 10%) cover calc(28% + var(--i) * 8%); }
  }
}
@keyframes trek { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes verschijn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.route.is-io .route__pad { stroke-dashoffset: 1; }
.route.is-io.is-zichtbaar .route__pad { transition: stroke-dashoffset 1200ms var(--uit); stroke-dashoffset: 0; }

/* ===== 5. Herken de hand van de meester ===== */
.films { padding-block: var(--sectie); }
.films__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goot); align-items: start; }
.films__index { grid-column: 1 / span 4; }
.films__intro { margin-top: 18px; color: var(--tekst-schap-zacht); max-width: 36ch; }
.films__lijst { margin-top: 26px; border-top: 1px solid rgba(236, 238, 235, 0.16); }
.films__lijst li { border-bottom: 1px solid rgba(236, 238, 235, 0.16); }
.films__knop {
  width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 12px; min-height: 46px; padding: 6px 2px;
  background: none; border: 0; text-align: left; color: var(--poedersuiker); font-weight: 600; font-size: 1.0625rem;
}
.films__knop:hover { color: var(--doosgoud); }

.films__knop[aria-current="true"] { color: var(--doosgoud); }
.films__knop[aria-current="true"]::before { content: ""; width: 8px; height: 8px; background: var(--doosgoud); flex: 0 0 auto; margin-right: -4px; }
.films__podium { grid-column: 6 / span 7; position: sticky; top: calc(var(--kop-h) + 32px); }
.speler { position: relative; aspect-ratio: 16 / 9; background: #111312; overflow: hidden; }
.speler__knop { position: absolute; inset: 0; padding: 0; border: 0; background: #111312; color: var(--papier); display: grid; place-items: center; }
.speler__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.speler__still.is-klein { width: auto; height: auto; max-width: 480px; inset: auto; position: relative; }
.speler__speel {
  position: absolute; left: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 12px; background: var(--doosgoud); color: var(--schapkaart); font-weight: 700; border-radius: 2px;
  transition: background-color 150ms;
}
.speler__speel svg { width: 26px; height: 26px; }
.speler__knop:hover .speler__speel { background: #D6A653; }
.speler__knop:focus-visible { outline: 3px solid var(--doosgoud); outline-offset: 4px; }
.speler iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.speler__noot { margin-top: 12px; font-size: 0.875rem; color: var(--tekst-schap-zacht); }
.speler__noot a { display: block; width: fit-content; padding-block: 10px; margin-bottom: -10px; color: var(--poedersuiker); }

/* ===== 6. Een familiebedrijf uit Rotterdam-Zuid ===== */
.familie { padding-block: var(--sectie); }
.familie__boven { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goot); align-items: center; }
.familie__chef { grid-column: 1 / span 4; width: min(420px, 100%); height: auto; }
.familie__tekst { grid-column: 6 / span 7; }
.familie__lead { margin-top: 26px; font-size: 1.25rem; line-height: 1.5; max-width: 54ch; }
.jaren { margin-top: clamp(56px, 6vw, 88px); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 var(--goot); border-top: 2px solid var(--schapkaart); }
.jaren li { padding-top: 18px; display: grid; align-content: start; gap: 10px; }
.jaren__jaar {
  font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 0.95;
  letter-spacing: -0.02em; font-variant-numeric: lining-nums; white-space: nowrap;
}
.jaren__jaar small { display: block; font-family: var(--tekst); font-stretch: 100%; font-weight: 600; font-size: 0.9375rem; letter-spacing: 0; margin-bottom: 4px; }
.jaren__regel { font-size: 1rem; line-height: 1.4; color: var(--tekst-kaart-zacht); }
.familie__team { margin: clamp(56px, 6vw, 96px) auto 0; max-width: 1180px; }
.familie__team img { width: 100%; height: auto; }
.familie__team figcaption { margin-top: 10px; font-size: 0.9375rem; color: var(--tekst-kaart-zacht); }
.citaat { margin: clamp(48px, 5vw, 80px) auto 0; max-width: 1180px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goot); }
.citaat p {
  grid-column: 1 / span 10; font-family: var(--display); font-weight: 700; font-stretch: 104%;
  font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance;
}
.citaat footer { grid-column: 1 / span 10; margin-top: 22px; display: flex; align-items: center; gap: 14px; }
.citaat__foto { width: 64px; height: auto; }
.citaat footer span { display: grid; font-size: 1rem; color: var(--tekst-kaart-zacht); }
.citaat footer strong { color: var(--schapkaart); }
.familie__verder { margin-top: 28px; max-width: 1180px; margin-inline: auto; }

/* ===== 7. Waar haal je het op? ===== */
.winkels { padding-block: var(--sectie); }
.winkels__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goot); align-items: start; }
.winkels__zoek { grid-column: 1 / span 6; }
.pc { margin-top: 32px; }
.pc__label { display: block; font-weight: 700; margin-bottom: 8px; }
.pc__rij { display: flex; gap: 10px; align-items: stretch; }
.pc__invoer {
  flex: 1; min-width: 0; height: 84px; padding: 0 20px; border: 0; border-bottom: 3px solid var(--doosgoud);
  background: rgba(236, 238, 235, 0.06); color: var(--poedersuiker);
  font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 3.5rem; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase;
}
.pc__invoer::placeholder { color: #66717C; }
.pc__invoer:focus-visible { outline: 3px solid var(--doosgoud); outline-offset: 2px; }
.pc__zoek { min-height: 84px; padding-inline: 28px; font-size: 1.125rem; }
.pc__fout { margin-top: 8px; color: #F2B8A8; font-weight: 600; }
.pc__locatie { margin-top: 8px; }
.pc__antwoord { margin-top: 18px; font-size: 1.25rem; line-height: 1.45; max-width: 46ch; }
.pc__antwoord strong { color: var(--doosgoud); }
.adressen { margin-top: 26px; border-top: 1px solid rgba(236, 238, 235, 0.16); }
.adres { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 16px; padding: 10px 0; border-bottom: 1px solid rgba(236, 238, 235, 0.16); }
.adres__naam { font-weight: 700; font-size: 1.125rem; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.adres__afstand { font-weight: 600; font-size: 0.9375rem; color: var(--doosgoud); font-variant-numeric: lining-nums tabular-nums; }
.adres__naam { grid-column: 1; grid-row: 1; }
.adres__straat { grid-column: 1; grid-row: 2; color: var(--tekst-tegel-zacht); font-size: 1rem; }
.adres__stand { grid-column: 2; grid-row: 1; justify-self: end; font-size: 1rem; font-variant-numeric: lining-nums tabular-nums; }
.adres__stand.is-open { color: var(--poedersuiker); }
.adres__stand.is-dicht { color: var(--tekst-tegel-zacht); }
.adres__brooddag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; background: var(--prijsovaal); color: var(--schapkaart); font-size: 0.8125rem; font-weight: 700; }
.adres__acties { grid-column: 2; grid-row: 2; display: flex; justify-content: flex-end; align-items: center; gap: 0 18px; }
.adres__acties a, .adres__acties button { min-height: 44px; min-width: 44px; justify-content: center; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9375rem; }
.adres__acties svg { width: 16px; height: 16px; }
.adres__kies[aria-pressed="true"] { color: var(--doosgoud); text-decoration: none; }
.winkels__privacy { margin-top: 18px; font-size: 0.875rem; color: var(--tekst-tegel-zacht); max-width: 60ch; }
.kaart { grid-column: 8 / span 5; position: sticky; top: calc(var(--kop-h) + 32px); }
.kaart__svg { width: 100%; height: auto; overflow: hidden; }
/* land als vlak, rivieren als brede waterbanen: de Maas en de Noord geven de kaart houvast */
.kaart__land { fill: #22303C; stroke: rgba(236, 238, 235, 0.14); stroke-width: 1; }
.kaart__rivier { fill: none; stroke: #355068; stroke-linecap: round; stroke-linejoin: round; }
.kaart figcaption, .kaart > figcaption { margin-top: 8px; font-size: 0.8125rem; color: var(--tekst-tegel-zacht); }
.kaart__winkel { cursor: pointer; }
.kaart__winkel text { font-family: var(--tekst); font-size: 15px; font-weight: 600; fill: var(--poedersuiker); paint-order: stroke; stroke: var(--tegelwand); stroke-width: 4px; stroke-linejoin: round; }
.kaart__winkel.is-gekozen text { fill: var(--doosgoud); font-weight: 700; }
.kaart__winkel:focus-visible { outline: none; }
.kaart__winkel:focus-visible .kaart__doosje { stroke: var(--poedersuiker); stroke-width: 2; }
.kaart__jij circle:first-child { fill: var(--poedersuiker); }
.kaart__jij-ring { fill: none; stroke: var(--poedersuiker); stroke-width: 2; opacity: 0.6; }

/* ===== 8. Meesterlijk om te geven ===== */
.geven { padding-block: var(--sectie); }
.geven__h2 { grid-column: 1 / span 7; grid-row: 1; max-width: 16ch; }
.geven__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goot); row-gap: 48px; align-items: start; }
.geven__foto { grid-column: 1 / span 4; grid-row: 2 / span 2; }
.geven__foto img { width: 100%; height: auto; }
.geven__foto figcaption { margin-top: 10px; font-size: 0.875rem; color: var(--tekst-kaart-zacht); }
.geven__folder { grid-column: 5 / span 8; grid-row: 2; position: relative; height: 420px; }
.folder { position: absolute; width: min(270px, 34%); height: auto; box-shadow: 0 2px 2px rgba(40, 26, 6, 0.2), 0 14px 30px rgba(40, 26, 6, 0.3); background: var(--papier); }
.folder--1 { left: 6%; top: 34px; transform: rotate(-7deg); }
.folder--2 { left: 31%; top: 6px; transform: rotate(-1deg); z-index: 1; }
.folder--3 { left: 56%; top: 40px; transform: rotate(6deg); z-index: 2; }
.geven__tekst { grid-column: 8 / span 5; grid-row: 1; align-self: end; display: grid; gap: 14px; }
.geven__pitch { font-family: var(--display); font-weight: 800; font-stretch: 108%; font-size: 1.625rem; line-height: 1.1; letter-spacing: -0.01em; }
.geven__lijst { display: grid; gap: 8px; margin-top: 4px; }
.geven__lijst li { padding-left: 16px; position: relative; font-size: 1rem; }
.geven__lijst li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; background: var(--schapkaart); }
.aanvraag {
  grid-column: 5 / span 8; grid-row: 3; background: var(--papier); color: var(--schapkaart); padding: 28px; --focus: var(--schapkaart);
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; align-items: start;
  box-shadow: 0 1px 1px rgba(40, 26, 6, 0.15), 0 16px 34px rgba(40, 26, 6, 0.18);
}
.aanvraag__kop, .aanvraag .veld:nth-of-type(5), .aanvraag .knop, .aanvraag__noot, .aanvraag__klaar { grid-column: 1 / -1; }
.aanvraag__kop { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 1.5rem; line-height: 1; }
.veld label { display: block; font-weight: 700; font-size: 0.9375rem; margin-bottom: 6px; }
.veld__opt { font-weight: 400; color: var(--tekst-papier-zacht); }
.veld input, .veld textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #C9C3B8; border-radius: 2px;
  background: var(--poedersuiker); color: var(--schapkaart); font-size: 1rem;
}
.veld textarea { min-height: 96px; resize: vertical; }
.veld input:hover, .veld textarea:hover { border-color: #8F887E; }
.veld input:focus-visible, .veld textarea:focus-visible { outline: 3px solid var(--schapkaart); outline-offset: 1px; }
.veld [aria-invalid="true"] { border-color: #9B2C1F; box-shadow: inset 0 0 0 1px #9B2C1F; }
.veld__hulp { margin-top: 4px; font-size: 0.875rem; color: var(--tekst-papier-zacht); }
.veld__fout { margin-top: 4px; font-size: 0.875rem; font-weight: 600; color: #9B2C1F; }
.veld__fout::before { content: "! "; font-weight: 800; }
.aanvraag .knop { justify-self: start; }
.aanvraag__noot { font-size: 0.875rem; color: var(--tekst-papier-zacht); }
.aanvraag__klaar { padding: 14px 16px; background: #EFE6D3; font-weight: 600; }

/* ===== 9. Uit de bakkerij ===== */
.bakkerij { padding-block: var(--sectie); }
.bakkerij__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goot); row-gap: 48px; align-items: start; }
.bakkerij__h2 { grid-column: 1 / -1; }
.nieuws-lead { grid-column: 1 / span 7; }
.nieuws-lead__link { display: grid; gap: 18px; text-decoration: none; }
.nieuws-lead__link img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.nieuws-lead__tekst { display: grid; gap: 8px; }
.nieuws-lead time, .nieuws-lijst time { font-size: 0.875rem; color: var(--tekst-tegel-zacht); font-variant-numeric: lining-nums tabular-nums; }
.nieuws-lead__titel { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 2rem; line-height: 1.02; letter-spacing: -0.015em; }
.nieuws-lead__link:hover .nieuws-lead__titel { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.nieuws-lead__zin { color: var(--tekst-tegel-zacht); max-width: 56ch; }
.nieuws-lijst { grid-column: 9 / span 4; }
.nieuws-lijst__kop { font-family: var(--display); font-weight: 700; font-stretch: 112%; font-size: 1.25rem; padding-bottom: 10px; border-bottom: 1px solid rgba(236, 238, 235, 0.16); }
.nieuws-lijst ol li { border-bottom: 1px solid rgba(236, 238, 235, 0.16); }
.nieuws-lijst ol a { display: grid; gap: 2px; padding: 12px 0; text-decoration: none; min-height: 44px; }
.nieuws-lijst ol a span { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.nieuws-lijst ol a:hover span { text-decoration: underline; }
.nieuws-lijst .pijllink { margin-top: 10px; }
.zegel { grid-column: 9 / span 4; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; text-decoration: none; margin-top: -8px; }
.zegel img { width: 112px; height: 112px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4)); }
.zegel__tekst { display: grid; gap: 4px; font-size: 1rem; color: var(--tekst-tegel-zacht); }
.zegel__tekst strong { color: var(--doosgoud); font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 1.25rem; }
.zegel:hover strong { text-decoration: underline; }
.recepten { grid-column: 1 / -1; margin-top: 24px; }
.recepten__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(236, 238, 235, 0.16); padding-top: 22px; }
.recepten__kop h3 { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 1.5rem; }
.recepten__filters { display: flex; gap: 6px; flex-wrap: wrap; }
.recepten__filters a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(236, 238, 235, 0.3); border-radius: 22px; text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
.recepten__filters a:hover { border-color: var(--doosgoud); color: var(--doosgoud); }
.recepten__rij { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--goot); }
.recepten__rij a { display: grid; gap: 10px; text-decoration: none; }
.recepten__rij img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; }
.recepten__rij span { font-weight: 600; line-height: 1.3; }
.recepten__rij a:hover span { text-decoration: underline; }

/* ===== 10. Werken, nieuwsbrief, voet ===== */
.werken { padding-bottom: var(--sectie); }
.werken > .eikenplank { margin-bottom: var(--sectie); }
.werken__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goot); row-gap: 56px; align-items: start; }
.werken__vacatures { grid-column: 1 / span 7; }
.vacatures { margin-top: 30px; border-top: 1px solid rgba(236, 238, 235, 0.16); }
.vacatures li { border-bottom: 1px solid rgba(236, 238, 235, 0.16); }
.vacatures a { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 11.5rem; text-align: left; gap: 16px; align-items: baseline; padding: 16px 0; text-decoration: none; min-height: 44px; }
.vacatures a:hover .vacatures__wat { color: var(--doosgoud); text-decoration: underline; }
.vacatures__wat { font-weight: 700; font-size: 1.125rem; }
.vacatures__waar { color: var(--poedersuiker); }
.vacatures__uren { color: var(--tekst-schap-zacht); font-variant-numeric: lining-nums tabular-nums; text-align: right; }
.brief { grid-column: 9 / span 4; display: grid; gap: 10px; }
.brief__kop { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 1.75rem; line-height: 1; }
.brief__tekst { color: var(--tekst-schap-zacht); font-size: 1rem; }
.brief__label { font-weight: 700; margin-top: 6px; }
.brief__veld { display: flex; gap: 8px; }
.brief__veld input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid transparent; border-radius: 2px; background: var(--poedersuiker); color: var(--schapkaart); }
.brief__veld input[aria-invalid="true"] { border-color: #F2B8A8; box-shadow: inset 0 0 0 1px #F2B8A8; }
.brief__fout { color: #F2B8A8; font-weight: 600; font-size: 0.9375rem; }
.brief__klaar { padding: 12px 14px; background: rgba(236, 238, 235, 0.08); font-weight: 600; font-size: 1rem; }

.voet { padding-block: 56px 40px; border-top: 1px solid rgba(236, 238, 235, 0.1); }
.voet__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goot); row-gap: 40px; }
.voet__merk { grid-column: 1 / span 4; display: grid; gap: 16px; align-content: start; }
.voet__logo { width: 200px; color: var(--poedersuiker); --chef: var(--doosgoud); }
.voet__adres, .voet__tijden { font-size: 1rem; color: var(--tekst-schap-zacht); }
.voet__adres a { color: var(--poedersuiker); }
.voet__winkels { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px var(--goot); align-content: start; }
.voet__winkels li { display: grid; font-size: 0.9375rem; line-height: 1.4; color: var(--tekst-schap-zacht); }
.voet__winkels strong { color: var(--poedersuiker); font-size: 1rem; }
.voet__winkels a { color: var(--poedersuiker); justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }
.voet__onder { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(236, 238, 235, 0.12); }
.voet__sociaal, .voet__juridisch { display: flex; flex-wrap: wrap; gap: 0 22px; }
.voet__sociaal a, .voet__juridisch a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; color: var(--tekst-schap-zacht); text-decoration: none; }
.voet__sociaal a:hover, .voet__juridisch a:hover { color: var(--poedersuiker); text-decoration: underline; }

/* ===== tablet ===== */
@media (max-width: 1199px) {
  .doos--held { --L: 640px; --H: 250px; --D: 300px; height: 540px; }
  .bestelbon { grid-column: 7 / span 5; margin-left: 0; margin-top: 420px; }
  .scene__indedoos { grid-column: 2 / span 5; margin-top: 640px; }
  .plank { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .dagweek { grid-template-columns: minmax(0, 1fr); }
  .dagweek__noot { grid-column: 1; }
  .dagweek__rij { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .taart__stel { grid-column: 1 / span 7; }
  .taart__regel { grid-column: 8 / span 5; }
  .films__index { grid-column: 1 / -1; }
  /* kop en intro eerst, dan de film op volle breedte, dan de lijst */
  .films__grid { display: flex; flex-direction: column; }
  .films__index { display: contents; }
  .films__podium { position: relative; top: 0; width: 100%; margin-top: 28px; order: 2; }
  .films__lijst { order: 3; margin-top: 36px; width: 100%; }
  .films #films-kop { order: 0; } .films__intro { order: 1; }
  .jaren { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; }
  .winkels__zoek { grid-column: 1 / span 7; }
  .kaart { grid-column: 8 / span 5; }
  .geven__h2 { grid-column: 1 / -1; }
  .geven__tekst { grid-column: 1 / span 8; grid-row: 2; }
  .geven__foto { grid-column: 1 / span 5; grid-row: 3 / span 2; }
  .geven__folder { grid-column: 6 / span 7; grid-row: 3; }
  .aanvraag { grid-column: 6 / span 7; grid-row: 4; }
  .nieuws-lead { grid-column: 1 / -1; }
  .nieuws-lijst { grid-column: 1 / span 7; }
  .zegel { grid-column: 8 / span 5; margin-top: 0; }
  .recepten__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .werken__vacatures { grid-column: 1 / -1; }
  .brief { grid-column: 1 / span 8; }
  .voet__merk { grid-column: 1 / span 5; }
  .voet__winkels { grid-column: 6 / span 7; }
}
@media (max-width: 899px) {
  .scene__podium { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .doos--held, .bestelbon, .scene__indedoos, .seizoen__foto, .inlegkaart { grid-column: 1; }
  .doos--held { --L: 560px; --H: 218px; --D: 262px; --ry: -30deg; height: 470px; margin-top: 40px; }
  .bestelbon { justify-self: center; width: min(440px, 100%); margin-top: 448px; margin-left: 0; }
  .scene__indedoos { grid-row: 2; margin-top: 18px; max-width: none; justify-self: center; width: min(440px, 100%); }
  .seizoen__foto { grid-row: 3; margin-top: 32px; justify-self: center; width: min(560px, 100%); }
  .inlegkaart { grid-row: 4; margin-top: 24px; justify-self: center; width: min(560px, 100%); }
  .schap__kop, .tuin__kop { grid-template-columns: 1fr; row-gap: 18px; }
  .schap__kop .kop2, .schap__intro, .tuin__kop .kop2, .tuin__lead { grid-column: 1; }
  .taart__h2, .taart__stel, .taart__regel { grid-column: 1 / -1; }
  .doos--klein { margin-left: 0; }
  .label { grid-area: 2 / 1; justify-self: center; margin: -96px 0 0; width: min(440px, 100%); }
  .route__brood { width: min(520px, 70%); left: 0; }
  /* tablet: de route verticaal, zoals op de telefoon */
  .route__lijn { display: none; }
  .route__stops { grid-template-columns: minmax(0, 1fr); margin-top: 8px; border-left: 3px solid var(--schapkaart); margin-left: 7px; gap: 22px; }
  .route__stop { padding: 0 0 0 26px; }
  .route__punt { left: -11px; top: 3px; }
  .tuin__tekst, .tuin__kaart { grid-column: 1 / -1; }
  .tuin__kaart { margin-top: 24px; }
  .familie__boven { grid-template-columns: 1fr; row-gap: 24px; }
  .familie__chef { grid-column: 1; width: 260px; }
  .familie__tekst { grid-column: 1; }
  .winkels__zoek, .kaart { grid-column: 1 / -1; }
  .kaart { position: relative; top: 0; margin-top: 40px; max-width: 560px; }
  .geven__foto, .geven__folder, .geven__tekst, .aanvraag { grid-column: 1 / -1; grid-row: auto; }
  .geven__foto { max-width: 420px; }
  .aanvraag { grid-template-columns: 1fr 1fr; }
  .nieuws-lijst, .zegel { grid-column: 1 / -1; }
  .brief { grid-column: 1 / -1; }
  .voet__merk, .voet__winkels { grid-column: 1 / -1; }
}

/* ===== telefoon ===== */
@media (max-width: 599px) {
  .scene__podium { padding-bottom: 72px; }
  .doos--held { --L: 318px; --H: 124px; --D: 150px; --ry: -31deg; --rx: -11deg; --pers: 1100px; height: 262px; margin-top: 64px; }
  .bestelbon { justify-self: stretch; width: auto; margin-top: 300px; padding: 18px 16px 14px; }
  .bon__rij { grid-template-columns: 6.4rem minmax(0, 1fr); }
  .bon__datum { font-size: 1.375rem; }
  .scene__indedoos { grid-row: 2; margin-top: 18px; max-width: none; width: auto; justify-self: start; }
  .seizoen__foto { grid-row: 3; margin-top: 24px; width: 100%; }
  .inlegkaart { grid-row: 4; padding: 22px 18px 18px; width: 100%; }
  .schap, .taart, .tuin, .films, .familie, .winkels, .geven, .bakkerij { padding-block: 72px; }
  .werken { padding-bottom: 72px; }
  .werken > .eikenplank { margin-bottom: 72px; }
  .plank__rek { --tegel: 200px; padding-inline: 10px; margin-inline: -6px; }
  .plank__naam { font-size: 1.625rem; }
  .plank__lijst { gap: 14px; }
  /* smalle kaart: de prijs onder de tekst, zodat de omschrijving de volle breedte krijgt */
  .waar .schapkaart__naam, .waar .schapkaart__tekst { grid-column: 1 / -1; }
  .waar .schapkaart .ovaal { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 8px; }
  .waar .schapkaart__plus { grid-row: 3; align-self: end; }
  .waar .schapkaart__extra { grid-column: 1 / -1; grid-row: 4; margin-top: 4px; }
  .dagweek__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .taart__stel { display: block; }
  .doos--klein { --L: 300px; --H: 118px; --D: 140px; --ry: -14deg; --pers: 1000px; height: 220px; margin-left: -2%; width: 100%; }
  .label { margin-top: -54px; margin-right: 0; width: 100%; padding: 18px 16px 16px; }
  .label__veld--rij, .label__veld--foto { grid-template-columns: 5.6rem minmax(0, 1fr); }
  .taart__zin { font-size: 1.25rem; }
  .route__brood { width: 100%; margin-bottom: 8px; }
  .route__lijn { display: none; }
  .route__stops { grid-template-columns: 1fr; margin-top: 8px; border-left: 3px solid var(--schapkaart); margin-left: 7px; gap: 22px; }
  .route__stop { padding: 0 0 0 26px; }
  .route__punt { left: -11px; top: 3px; }
  .films__knop { min-height: 48px; }
  .speler__speel { left: 12px; bottom: 12px; padding: 8px 14px 8px 10px; font-size: 0.9375rem; }
  .jaren { grid-template-columns: 1fr; border-top: 0; }
  .jaren li { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; padding-top: 14px; border-top: 1px solid rgba(33, 35, 34, 0.25); }
  .jaren__jaar { font-size: 1.875rem; }
  .familie__team { margin-inline: calc(var(--marge) * -1); }
  .familie__team img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 38% 50%; }
  .familie__team figcaption { padding-inline: var(--marge); }
  .citaat p { grid-column: 1 / -1; font-size: 1.625rem; }
  .citaat footer { grid-column: 1 / -1; }
  .pc__invoer { height: 64px; font-size: 2.5rem; padding: 0 12px; }
  .pc__zoek { min-height: 64px; padding-inline: 18px; }
  .pc__antwoord { font-size: 1.125rem; }
  .adres { grid-template-columns: 1fr; }
  .adres__naam, .adres__straat, .adres__stand { grid-column: 1; grid-row: auto; justify-self: start; }
  .adres__acties { grid-column: 1; grid-row: auto; display: flex; flex-wrap: wrap; gap: 0 18px; justify-items: start; }
  .geven__folder { height: 300px; margin-top: 0; }
  .folder { width: 150px; }
  .aanvraag { grid-template-columns: 1fr; padding: 20px 16px; }
  .recepten__rij { grid-template-columns: 1fr 1fr; gap: 16px; }
  .vacatures a { grid-template-columns: 1fr; gap: 2px; }
  .vacatures__uren { text-align: left; }
  .brief__veld { flex-direction: column; }
  .voet__winkels { grid-template-columns: 1fr; }
}

/* ===== de doos in beweging (alleen zonder voorkeur voor minder beweging, zie doos.js) =====
   Het podium is een vast frame; doos.js zet bon, foto, kaartje en regel op hun plek (gemeten). */
html.doos-anim .doos--held { --open: 0deg; }
html.doos-anim .scene__podium { display: block; height: calc(100svh - var(--kop-h)); min-height: 560px; padding-bottom: 0; }
html.doos-anim .doos--held { position: absolute; inset: 0; width: auto; height: auto; margin: 0; }
html.doos-anim .bestelbon,
html.doos-anim .seizoen__foto,
html.doos-anim .scene__indedoos,
html.doos-anim--groot .inlegkaart { position: absolute; left: 0; top: 0; margin: 0; max-width: none; }
html.doos-anim .scene__indedoos { padding: 0; white-space: nowrap; }
html.doos-anim--klein .scene > .inlegkaart { width: min(100% - 2 * var(--marge), 560px); margin: 8px auto 72px; }
@media (max-width: 899px) { .scene__indedoos { padding-left: 0; } }

/* schapkaarten in één rij: ovaal vast rechtsboven, de plusknop altijd onderaan (round-6 QA) */
.waar .schapkaart { grid-template-rows: auto auto 1fr; }
.waar .schapkaart .ovaal { align-self: start; }
.waar .schapkaart__plus, .waar .schapkaart__extra { align-self: end; }
@media (max-width: 599px) {
  .waar .schapkaart { grid-template-rows: auto auto auto 1fr; }
  .waar .schapkaart__extra { grid-row: 3; margin-top: 4px; }
  .waar .schapkaart .ovaal { grid-row: 4; align-self: end; }
  .waar .schapkaart__plus { grid-row: 4; align-self: end; }
}
@media (max-width: 599px) { .geven__folder { overflow-x: clip; } .doos__schaduw { max-width: 100%; } }
.label__meer { display: inline-block; text-wrap: balance; }

/* de rij loopt door achter de rand: de laatste kaart vervaagt in de muur in plaats van halve letters te tonen */
.plank__rij:not(.is-eind) {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent);
}
/* Dagtopper: de dealtekst is breder dan een prijs, dus naam en tekst over de volle breedte */
.waar--topper .schapkaart__naam, .waar--topper .schapkaart__tekst { grid-column: 1 / -1; }
.waar--topper .schapkaart .ovaal--tekst { grid-column: 1; grid-row: 3; justify-self: start; align-self: end; margin-top: 8px; }
.waar--topper .schapkaart__extra { grid-column: 2; grid-row: 3; justify-self: end; align-self: end; text-align: right; }
@media (max-width: 599px) {
  .waar--topper .schapkaart .ovaal--tekst { grid-row: 4; }
  .waar--topper .schapkaart__extra { grid-column: 1 / -1; grid-row: 3; justify-self: start; text-align: left; }
}

/* taartlabel: de veldnaam boven de chips krijgt dezelfde lucht als de andere regels; geen lege statusregel onderaan */
.label__veld--taart { padding-top: 14px; }
.label__veld--taart > legend { float: left; width: 100%; padding: 0; }
.label__veld--taart > legend + * { clear: both; }
.label__status:empty { min-height: 0; margin-top: 0; }

/* tijdlijn: elk jaar dezelfde ruimte voor het kleine "jaren", zodat jaartallen en tekst op één lijn staan */
@media (min-width: 600px) {
  .jaren li { position: relative; padding-top: 40px; }
  .jaren__jaar small { position: absolute; top: 16px; left: 0; margin: 0; line-height: 1.2; }
}
@media (min-width: 600px) and (max-width: 1199px) {
  .jaren li:last-child { grid-column: span 2; }
}

@media (max-width: 599px) {
  /* op de telefoon alleen de naam van de gekozen winkel, groot genoeg om te lezen */
  .kaart__winkel text { font-size: 24px; }
  .kaart__winkel:not(.is-gekozen) text { display: none; }
}

/* geven: foto en folders delen een rij, het formulier loopt over de volle breedte eronder (round-6 QA) */
@media (min-width: 900px) {
  .geven__foto { grid-row: 2; }
  .geven__folder { grid-row: 2; align-self: center; }
  .folder--1 { left: 0; }
  .aanvraag { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .geven__foto { grid-column: 1 / span 5; grid-row: 3; }
  .geven__folder { grid-column: 6 / span 7; grid-row: 3; }
  .aanvraag { grid-row: 4; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .geven__foto { grid-column: 1 / span 5; grid-row: 3; }
  .geven__folder { grid-column: 6 / -1; grid-row: 3; align-self: center; }
  .aanvraag { grid-row: 4; }
}

/* bakkerij: het zegel sluit de rechterkolom af, gelijk met de onderkant van het hoofdbericht */
@media (min-width: 1200px) {
  .nieuws-lead { grid-row: 2 / span 2; }
  .nieuws-lijst { grid-row: 2; }
  .zegel { grid-row: 3; align-self: end; margin-top: 0; }
  .recepten { grid-row: 4; margin-top: 0; }
}
@media (max-width: 599px) { .plank__rij:not(.is-eind) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); } }