/* =========================================================
   EIGEN LETTERTYPEN
   ---------------------------------------------------------
   De woff2-bestanden staan in assets/fonts/. Zolang deze regels hier staan
   haalt de site geen enkel lettertype meer bij Google op; dat scheelt een
   verbinding met een derde partij (privacy) en twee handshakes bij het laden.
   Beide families zijn variabel: één bestand per subset dekt alle diktes.
   ========================================================= */

/* =========================================================
   HOVER-STATUSSEN
   ---------------------------------------------------------
   Elke :hover-regel staat achter @media (hover: hover). Op een aanraakscherm
   blijft een hover na het loslaten van de vinger op het laatst aangeraakte
   element hangen tot je ergens anders tikt. Dat gaf zichtbaar verkeerde
   kleuren: een gekozen kalenderdag die crème bleef, een knop die in zijn
   hoverkleur bleef staan. Met deze media query bestaan die regels op zo'n
   apparaat domweg niet.
   De regels zijn TER PLAATSE ingepakt, niet verplaatst: een media query
   verandert de specificiteit niet, maar verplaatsen zou de volgorde in de
   cascade wél veranderen.
   ========================================================= */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('fonts/baloo2-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('fonts/baloo2-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/nunitosans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/nunitosans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/nunitosans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/nunitosans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* =========================================================
   LEKKER SPRINGEN — design system v2
   ---------------------------------------------------------
   Cobalt + zonnegeel op wit. Bricolage Grotesque (display)
   + Inter (body). Signatuur: de "opgeblazen" schulprand,
   ontleend aan de rand van een springkussen.
   ========================================================= */

:root {
  /* brand */
  --c-cobalt:      #6d3ae3;   /* violet — primaire merkkleur (naam behouden voor JS) */
  --c-cobalt-deep: #5527b8;
  --c-sun:         #ffcf33;
  --c-sun-deep:    #f0b400;
  --c-coral:       #ff5c53;
  /* Voor een knop of tekst is koraal te licht: wit erop haalt maar 3,0:1 en
     coral-deep 4,0:1, allebei onder de 4,5:1 die AA vraagt. Deze diepere tint
     uit dezelfde familie haalt 5,3:1 en past bij de overige knoppen op de
     site, die tussen 6,2 en 14,9:1 zitten. */
  --c-rood-diep:   #c8332c;
  --c-coral-deep:  #e6423a;
  --c-mint:        #14b381;
  /* Mint is prima als vlak of stip, maar als tekstkleur haalt hij maar 2,7:1
     op wit. Deze diepere variant haalt 5,9:1 op wit en blijft ook boven de
     4,5:1 op de crème zijkolom en op het lichtgroene kortingsblok — daar is
     de achtergrond niet wit, dus een tint die op wit net goed is, zakt daar. */
  --c-mint-diep:   #0a7250;
  --c-sky:         #2fa5f2;

  /* neutrals */
  --c-ink:         #281f52;   /* donker violet-ink */
  --c-ink-soft:    #605776;
  --c-paper:       #ffffff;
  --c-cream:       #fdf7ec;   /* warme creme — paginakleur */
  --c-cream-2:     #f8edd8;   /* diepere zandtint voor vlakken */
  --c-line:        #ecdfc8;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-pill: 999px;

  --shadow-soft: 0 6px 20px -8px rgba(40,31,82,.14);
  --shadow-pop:  0 16px 36px -14px rgba(40,31,82,.22);

  --font-display: "Baloo 2", "Arial Rounded MT Bold", "Segoe UI", sans-serif;
  --font-body:    "Nunito Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --max: 1160px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--c-cobalt); text-decoration: none; transition: color .15s; }
@media (hover: hover) {
  a:hover { color: var(--c-cobalt-deep); }
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-ink);
  margin: 0 0 .5em;
}
h1 {
  font-size: clamp(2.4rem, 4.9vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  font-weight: 700;
}
h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
h3 { font-size: 1.22rem; line-height: 1.25; letter-spacing: -0.005em; }
h4 { font-size: 1rem; }

p { margin: 0 0 1em; }
.lead { font-size: 1.12rem; color: var(--c-ink-soft); line-height: 1.65; }
.small { font-size: .9rem; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

::selection { background: var(--c-sun); color: var(--c-ink); }

:focus-visible {
  outline: 3px solid var(--c-sun);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ========== SCALLOP (signatuur) ========== */
.scallop {
  display: block;
  width: 100%;
  height: 16px;
}

/* ========== OVERSLAAN NAAR DE INHOUD ==========
   Wie met het toetsenbord werkt, hoeft nu niet op elke pagina eerst door het
   hele menu. De link staat buiten beeld en springt tevoorschijn zodra hij de
   focus krijgt. */
.skiplink {
  /* fixed, niet absolute: wie eerst scrolt en dán met tab begint, zou de link
     anders boven aan het document zien verschijnen — buiten beeld dus. */
  position: fixed; left: 12px; top: -60px;
  z-index: 100;
  background: var(--c-cobalt-deep);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-s);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skiplink:focus { top: 12px; }

/* ========== NAV ========== */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(253,247,236,.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 9px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.logo {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.28rem;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  line-height: 1;
}
@media (hover: hover) {
  .logo:hover { color: var(--c-cobalt); }
}
.logo svg { flex: 0 0 auto; }
.logo__word { height: 38px; width: auto; display: block; }
.footer .logo__word { height: 38px; }
@media (max-width: 980px) {
  .logo__word { height: 30px; }
}

.nav__links { display: flex; gap: 4px; align-items: center; }
.nav__links a {
  color: var(--c-ink);
  font-weight: 500;
  font-size: .95rem;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  transition: background .15s, color .15s;
}
@media (hover: hover) {
  .nav__links a:hover { background: var(--c-paper); color: var(--c-cobalt-deep); }
}
/* Boven het omslagpunt staan de items naast elkaar. Daar mag een item nooit
   binnen zichzelf afbreken: "Info & FAQ" over drie regels maakte de balk
   tweemaal zo hoog en liet de kop verspringen. Wordt de tekst ooit langer, dan
   wordt het menu liever krap dan hoog. In het uitklapmenu geldt dit niet: daar
   staan de items onder elkaar en mag een lange regel gewoon doorlopen. */
@media (min-width: 981px) {
  .nav__links a { white-space: nowrap; }
}
.nav__links a.active { background: var(--c-paper); color: var(--c-cobalt-deep); font-weight: 600; box-shadow: var(--shadow-soft); }

.nav__links a.nav__cart {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-cobalt); color: #fff;
  padding: 9px 16px;
  margin-left: 8px;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: .92rem;
}
@media (hover: hover) {
  .nav__links a.nav__cart:hover { background: var(--c-cobalt-deep); color: #fff; }
}
.nav__links a.nav__cart.active { background: var(--c-cobalt-deep); color: #fff; }
.nav__cart .badge {
  background: var(--c-sun);
  color: var(--c-ink);
  border-radius: 50%;
  min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
  padding: 0 5px;
}

.nav__toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 42px; height: 42px;
  position: relative;
}
.nav__toggle .nav__streep,
.nav__toggle .nav__streep::before,
.nav__toggle .nav__streep::after {
  content: "";
  position: absolute; left: 9px;
  width: 24px; height: 2px;
  background: var(--c-ink);
  border-radius: 2px;
}
.nav__toggle .nav__streep { top: 20px; }
.nav__toggle .nav__streep::before { top: -7px; left: 0; }
.nav__toggle .nav__streep::after  { top: 7px;  left: 0; }

/* Op een telefoon zit "Mijn boeking" weggevouwen achter het menuknopje. Zonder
   deze teller zie je niets van terug dat er iets in je boeking staat. */
.nav__telling {
  position: absolute;
  top: -1px; right: -3px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--c-sun);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 700; line-height: 1;
  align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--c-cream);
}

/* Omslagpunt van de kop: 980px, niet 880px. Tussen 881 en 980 pasten de
   menu-items net niet naast elkaar; "Info & FAQ" viel dan over drie regels en
   de balk werd 110px hoog. Nagemeten: logo (107) + klok (84) + menu (664) +
   tussenruimte en marge (120) = 975px, dus onder 980 past het niet. Dat raakt smalle laptopvensters en een half scherm
   naast een ander venster. Alle blokken die bij de kop horen (menuknop, logo,
   klok, taalschakelaar) staan op ditzelfde getal — schuift er één mee zonder
   de andere, dan krijg je een halve mobiele kop op een breed scherm. */
@media (max-width: 980px) {
  /* backdrop-filter maakt .nav het containing block voor position:fixed
     — uitschakelen zodat het menupaneel de hele viewport kan vullen */
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--c-cream); }
  .nav__toggle { display: block; }
  .nav__links {
    display: flex;
    position: fixed; top: 61px; left: 0; right: 0; bottom: 0;
    background: var(--c-cream);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 28px 24px;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .25s, transform .3s var(--ease-spring), visibility .25s;
    z-index: 40;
    overflow-y: auto;
  }
  .nav__links.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__links a {
    padding: 16px 18px;
    border-radius: 14px;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    background: var(--c-paper);
    box-shadow: var(--shadow-soft);
  }
  .nav__links a.nav__cart { margin-left: 0; margin-top: 10px; justify-content: center; font-size: 1.15rem; }
}

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s,
              transform .35s var(--ease-spring);
  line-height: 1.25;
  /* Op een aanraakscherm is 44px de maat waarop een vinger een knop
     betrouwbaar raakt. Met alleen padding kwamen de knoppen op 42px uit. */
  min-height: 44px;
  box-sizing: border-box;
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
}
.btn:active { transform: scale(.94); transition-duration: .1s; }

.btn--primary { background: var(--c-cobalt); color: #fff; }
@media (hover: hover) {
  .btn--primary:hover { background: var(--c-cobalt-deep); color: #fff; }
}

.btn--accent { background: var(--c-sun); color: var(--c-ink); box-shadow: inset 0 -2px 0 rgba(40,31,82,.14); }
@media (hover: hover) {
  .btn--accent:hover { background: var(--c-sun-deep); color: var(--c-ink); }
}

.btn--ghost {
  background: transparent; color: var(--c-ink);
  box-shadow: inset 0 0 0 1.5px var(--c-line);
}
@media (hover: hover) {
  .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--c-cobalt); color: var(--c-cobalt-deep); }
}

/* Duidelijk zichtbare tweede keuze. De oude .btn--ghost had een lijntje in
   --c-line (bijna dezelfde tint als de achtergrond) en donkere tekst; die
   viel weg op crème. Deze heeft een paarse rand én paarse tekst:
   5,85:1 op crème en 5,38:1 op de donkerdere crème. */
.btn--outline {
  background: transparent;
  color: var(--c-cobalt);
  box-shadow: inset 0 0 0 2px var(--c-cobalt);
}
@media (hover: hover) {
  .btn--outline:hover {
    background: var(--c-cobalt);
    color: #fff;
    box-shadow: inset 0 0 0 2px var(--c-cobalt);
  }
}

.btn--small { padding: 9px 16px; font-size: .9rem; }
/* Op een telefoon krijgen alle knoppen dezelfde hoogte, zodat een lange tekst
   de knop niet verderop opblaast. De tekst zelf wordt korter gemaakt (zie de
   lange/korte varianten hieronder) in plaats van de knop groter. */
@media (max-width: 560px) {
  .btn { min-height: 48px; justify-content: center; }
  .modal__cta .btn { font-size: .97rem; white-space: nowrap; padding-left: 18px; padding-right: 18px; }
}
/* Lange tekst op een ruim scherm, korte op een smal. */
.knop__kort { display: none; }
@media (max-width: 560px) {
  .knop__lang { display: none; }
  .knop__kort { display: inline; }
}
/* Op een aanraakscherm is 36 px net te laag om betrouwbaar te raken. */
@media (max-width: 720px) {
  .btn--small { padding: 11px 16px; min-height: 42px; }
  .filters button { min-height: 42px; }
}

/* ========== SECTIONS ========== */
section { padding: 96px 0; }
/* Het paarse afsluitblok stond 150 px van de footer. */
.section--afsluiter { padding-bottom: 40px; }
@media (max-width: 720px) { section { padding: 64px 0; } }
/* Op een telefoon telt 64 px boven én onder elke sectie hard op: over een
   pagina met zes secties is dat ruim een half scherm aan lege ruimte. */
@media (max-width: 560px) { section { padding: 42px 0; } }

/* Blokken binnen een pagina. Stond eerder als style="margin-top:80px" in de
   HTML; een inline marge luistert niet naar een media-regel en hield op een
   telefoon dus 80 px lege ruimte aan. */
.blok      { margin-top: 80px; }
.blok--kort{ margin-top: 64px; }
@media (max-width: 560px) {
  .blok      { margin-top: 44px; }
  .blok--kort{ margin-top: 36px; }
}
.section--sky { background: var(--c-cream-2); }
/* Eigen veld voor de reviews: stond eerder op dezelfde tint als de sectie
   erboven, waardoor de twee in elkaar overliepen. Een lichte lilatint komt
   uit het paars van de huisstijl en scheidt zichtbaar van beide crèmetinten. */
.section--lila { background: #f2ecfd; }

.section__head { max-width: 640px; margin-bottom: 44px; }
/* Op brede schermen iets ruimer, zodat de inleidende regel onder "Onze
   springkussens" op één regel past (die had 670 px nodig). */
@media (min-width: 1100px) { .section__head { max-width: 760px; } }
.section__kicker {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-cobalt);
  margin-bottom: 10px;
}
.section__lead { color: var(--c-ink-soft); font-size: 1.06rem; }

/* ========== POSTCODECHECK OP DE HOMEPAGE ==========
   Zelfde bouwsteen als het bezorgblok op de boekingspagina, maar los daarvan
   opgemaakt: hier staat hij op een crèmeveld in een sectiekop, niet in een
   zijkolom. Bewust een kaartje met een eigen rand, zodat het als iets om te
   doen leest en niet als nog een regel uitleg. */
.pcheck {
  margin: 22px 0 0;
  padding: 16px 18px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-paper);
  box-shadow: var(--shadow-soft);
  max-width: 470px;
}
.pcheck[hidden] { display: none; }
.pcheck__label {
  display: block;
  margin-bottom: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-ink);
}
.pcheck__rij { display: flex; gap: 8px; }
.pcheck__rij input {
  flex: 1 1 auto; min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-s);
  background: var(--c-paper);
  font: inherit; font-size: .92rem;
  text-transform: uppercase;
}
.pcheck__rij input:focus-visible { outline: 3px solid var(--c-cobalt); outline-offset: 1px; }
.pcheck__rij .btn { flex: 0 0 auto; }
/* Leeg blijft de regel weg in plaats van een lege ruimte te reserveren: bij een
   uitkomst van één of twee regels zou het kaartje anders zichtbaar springen. */
.pcheck__uitkomst { margin: 10px 0 0; font-size: .88rem; line-height: 1.5; color: var(--c-ink-soft); }
.pcheck__uitkomst:empty { display: none; }
.pcheck__uitkomst.is-goed { color: var(--c-mint-diep); font-weight: 600; }
.pcheck__uitkomst.is-fout { color: var(--c-coral-deep); }

.pcheck__gebied {
  margin: 14px 0 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
}

/* Het blok stond eerst in de sectiekop en erfde daar zijn breedte van. Nu het
   onder de kussens staat, houdt dit kader het op dezelfde leesbreedte en op
   dezelfde linkerlijn als de kortingsregel erboven — anders begon het ene blok
   in het midden en het andere tegen de rand. */
.pcheck-blok {
  margin: 26px auto 0;
  max-width: 46em;
  /* Ruimte voor de plakkende menubalk: stap 3 in de band onder de hero linkt
     hiernaartoe. */
  scroll-margin-top: 80px;
}

/* Het weerblok in de samenvatting op de boekingspagina staat tussen de
   totaalregel en de knop naar betalen. De basisregel van .veld-uitleg heeft een
   negatieve bovenmarge — die is gemaakt om onder een invoerveld te kruipen — en
   daardoor plakte het blok tegen "Totaal" aan terwijl er onder, met de mt-32 van
   de knop erbij, 52px lucht zat. Hier staat het netjes tussen de twee in: even
   ver van het bedrag als van de knop. */
.summary .veld-uitleg { margin: 20px 0 0; }
.summary .veld-uitleg + .btn { margin-top: 20px; }

/* ========== WEERBELOFTE IN DE FAQ ==========
   Dezelfde regel als op de boekings- en afrekenpagina, met hetzelfde wolkje:
   wie hier komt met de vraag "en als het regent?" leest het antwoord in één
   regel, en daaronder pas de nuance. Licht groen vlak, want dit is goed nieuws
   en geen waarschuwing. */
.weerbelofte {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0 0 12px;
  padding: 11px 14px;
  border-radius: var(--radius-s);
  background: rgba(10, 114, 80, .08);
  font-weight: 600;
  color: var(--c-mint-diep);
}
.weerbelofte svg { flex: 0 0 auto; margin-top: 3px; }

/* ========== MEERDAAGSE KORTING BIJ DE KUSSENS ==========
   Eén regel onder het raster, met hetzelfde icoon-plus-tekst-ritme als de
   weerbelofte in de hero. Geen bedragen: die staan al in main.js en in
   api/config.php en zouden hier een derde bron worden. */
/* Direct onder de drie kussens, en op een ruim scherm op één regel: de zin en
   het rekenvoorbeeld horen bij elkaar en lezen als één mededeling. Daarom hier
   geen max-width van 46em meer — die brak de regel in twee — maar gecentreerd
   over de volle containerbreedte, in dezelfde as als de knop eronder.
   nowrap alleen boven 900px: daaronder is er simpelweg geen regel van 700px en
   moet hij gewoon afbreken. */
.staffel-hint {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 9px;
  margin: 24px 0 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
}
.staffel-hint svg { flex: 0 0 auto; margin-top: 3px; color: var(--c-cobalt); }
/* Het percentage in het groen: dat is het getal waar de regel om draait. Dezelfde
   diepe muntkleur die de site elders voor bedragen en bevestigingen gebruikt.
   Gemeten 5,12:1 op de zandtint van deze sectie — boven de 4,5:1 die AA vraagt,
   dus ook voor wie kleur niet als signaal kan gebruiken gewoon leesbaar. */
.staffel-hint__pct { color: var(--c-mint-diep); font-weight: 800; }
/* De zin als één geheel, naast het icoon. Zonder deze wikkel was elk stuk tekst
   een eigen flex-item en stonden de zin, de 25%, het staartje en de link op een
   telefoon als vier smalle kolommen naast elkaar — gemeten op 375px: 61px breed
   over zeven regels, en de link liep tot 405px, dus buiten beeld.
   `min-width: 0` erbij zodat het tekstvak mag krimpen tot wat er is; zonder die
   regel legt de automatische ondergrens van een flex-item de breedte van het
   langste onbreekbare stuk op, en dat is hier de link van 167px. */
.staffel-hint__tekst { min-width: 0; }
.staffel-hint a { white-space: nowrap; }
@media (min-width: 900px) {
  .staffel-hint { flex-wrap: nowrap; white-space: nowrap; }
}
/* De knop hoort bij de regel erboven, dus dichterbij dan de 48px die er stond;
   daaronder komt het postcodeblok met zijn eigen ruimte. */
.staffel-knop { margin-top: 22px; }
@media (max-width: 560px) {
  .pcheck { padding: 14px 14px 12px; }
  .pcheck__label { font-size: .95rem; }
  /* Het invoerveld hoeft hier niet op 16px gezet te worden: de globale regel
     onder 1024px aan het eind van dit bestand doet dat al, en die weegt met
     drie :not()-selectors zwaarder dan `.pcheck__rij input`. */
  .staffel-hint { font-size: .9rem; margin-top: 20px; justify-content: flex-start; }
}

/* ========== VOORTGANG IN HET BOEKINGSPROCES ========== */
/* De baan schaalt mee met de breedte maar houdt zijn verhouding, en de drie
   labels staan in drie gelijke kolommen. De haltes staan in de SVG op 1/6,
   1/2 en 5/6 van de breedte, dus ze vallen bij elke schermbreedte precies
   boven hun label. */
.js-voortgang { min-height: 62px; }        /* gereserveerd, anders springt de titel */
.voortgang { width: 100%; max-width: 320px; margin: 0 0 4px; }
.voortgang__baan { display: block; width: 100%; height: auto; }
.voortgang__lijst {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 1px 0 0; padding: 0;
  text-align: center;
  font-size: .78rem; font-weight: 600;
  color: var(--c-ink-soft);
}
.voortgang__halte.is-nu { color: var(--c-cobalt-deep); font-weight: 700; }
/* Een afgeronde halte is een link terug naar die stap. */
.voortgang__halte a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(96,87,118,.35);
  padding-bottom: 1px;
}
@media (hover: hover) {
  .voortgang__halte a:hover { color: var(--c-cobalt-deep); border-bottom-color: currentColor; }
}
.summary__terug { margin: 16px 0 0; font-size: .9rem; }
.summary__terug a { color: var(--c-ink-soft); }
.confirm .voortgang { margin: 0 auto 22px; }

@media (max-width: 460px) {
  .voortgang { max-width: 100%; }
  .voortgang__lijst { font-size: .74rem; }
}

.text-center { text-align: center; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; }

/* ========== HERO ========== */
.hero {
  position: relative;
  padding: 64px 0 96px;
  background: var(--c-cream-2);
}
.hero > .scallop {
  position: absolute; left: 0; right: 0; bottom: -1px;
  color: var(--c-cream);
}
/* Op de homepage volgt onder de hero de paarse uspbar, dus daar moet de
   schulprand in het paars aflopen in plaats van in crème. */
.hero > .scallop--naar-band { color: var(--c-cobalt); }
.hero__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .85rem; font-weight: 600;
  color: var(--c-cobalt-deep);
  background: var(--c-paper);
  box-shadow: var(--shadow-soft);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 22px;
}
.hero__eyebrow::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-mint);
}
/* De pil is een link naar het bezorggebied. Geen onderstreping: dat zou de pil
   twee signalen geven en de vorm rommelig maken. Bij aanwijzen komt hij iets
   omhoog en wordt de schaduw dieper — dezelfde beweging die de kaarten in het
   overzicht maken, dus het voelt als hetzelfde soort element. */
a.hero__eyebrow { text-decoration: none; transition: transform .16s, box-shadow .16s; }
@media (hover: hover) {
  a.hero__eyebrow:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-pop);
    color: var(--c-cobalt);
  }
}
a.hero__eyebrow:focus-visible { outline: 3px solid var(--c-cobalt); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  a.hero__eyebrow { transition: none; }
  a.hero__eyebrow:hover { transform: none; }
}
.hero h1 em {
  font-style: normal;
  color: var(--c-cobalt);
}
.hero h1 .underline,
.hero__sub .underline {
  background-image: linear-gradient(transparent 70%, var(--c-sun) 70%, var(--c-sun) 94%, transparent 94%);
}
.hero__lead {
  font-size: 1.13rem;
  color: var(--c-ink-soft);
  max-width: 500px;
  margin: 20px 0 30px;
  line-height: 1.65;
}
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ========== SPRINGWEER ONDER DE KNOP ==========
   Eén zin met een cijfer erin. Bewust géén kader, vlak of schaduw: een eerdere
   opzet zette het in een witte pil, en die trok vlak onder de knop net zoveel
   aandacht als de knop zelf. Een grapje hoort niet met de belangrijkste knop
   van de pagina te concurreren — het hoort mee te wijzen. Zonder kader leest
   het als een onderschrift.

   Het blok staat leeg en verborgen in de HTML en wordt door initSpringweer()
   gevuld. Zonder JavaScript, zonder backend of bij een haperende weerdienst
   blijft het dus weg in plaats van dat er een lege plek onder de knop valt. */
/* Raster in plaats van los op elkaar gestapelde regels: het weerteken krijgt
   zijn eigen kolom, en de zin én de detailregel beginnen daardoor op dezelfde
   linkerlijn. Eerder stond de detailregel onder het pictogram en de zin ernaast,
   en dan lijnt "Zondag" niet op met "Een". */
.springzin {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 7px;
  margin: 16px 0 0;
  max-width: 30em;
  line-height: 1.45;
}
.springzin[hidden] { display: none; }
/* Met pijl iets meer lucht boven de zin. Meer is niet nodig: de pijl overbrugt
   de ruimte niet, hij begint bij het cijfer en eindigt ín de knop. */
.springzin--met-pijl { margin-top: 20px; }

.springzin__regel { grid-column: 2; grid-row: 1; font-size: .96rem; color: var(--c-ink); }
.springzin__cijfer {
  position: relative;          /* de pijl hangt hieraan, niet aan de zin */
  display: inline-block;
  padding: 0 2px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.32rem;
  line-height: 1;
  letter-spacing: -.02em;
  /* Een streepje ónder het cijfer in plaats van een vlak eromheen: genoeg om
     het eruit te laten springen, te weinig om een tweede knop te worden. */
  box-shadow: inset 0 -6px 0 var(--springzin-streep, transparent);
}
.springzin__detail { grid-column: 2; grid-row: 2; font-size: .85rem; color: var(--c-ink-soft); }

/* Het weerteken vóór de zin. Een los cijfer met een kop erboven leest snel als
   een klantbeoordeling; een zonnetje of een regenwolk maakt in één oogopslag
   duidelijk dat het over het weer gaat. Het volgt dezelfde reden als de zin, dus
   beeld en tekst zeggen hetzelfde. */
.springzin__weerteken {
  grid-column: 1; grid-row: 1;
  display: flex; align-items: center;
  height: 1.45em;                 /* even hoog als de eerste regel, dus gecentreerd */
  color: var(--springzin-teken, var(--c-cobalt));
}
.springzin__weerteken svg { width: 20px; height: 20px; }

/* "Springweer" is het woord waar het om gaat en tegelijk de knop naar de uitleg.
   Onderstippeld in plaats van onderstreept: dat leest als "hier zit iets achter"
   en niet als een link naar een andere pagina. */
.springzin__woord {
  border: 0; padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  font-weight: 800;
  cursor: help;
  text-decoration: underline dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.springzin__woord:focus-visible { outline: 3px solid var(--c-cobalt); outline-offset: 3px; }

/* De uitleg. Hover en focus laten hem zien; op een telefoon doet een tik het,
   via de klasse die main.js erop zet. */
/* De ballon klapt naar BENEDEN open. Naar boven viel hij over "Bekijk de
   springkussens" heen, en dat is de knop waar de hele pagina om draait — die mag
   nooit door een uitlegballonnetje bedekt worden. Onder de zin staat niets waar
   iemand op moet kunnen klikken.

   Violet met wit, dezelfde combinatie als de band onder de hero en de paarse
   stroken: wit op --c-cobalt haalt gemeten 6,24:1 en dat is ruim boven de 4,5:1
   die AA vraagt. Eerder stond hij in inkt, en dat is nergens anders op de site
   een vlakkleur. */
.springzin__wat {
  position: absolute;
  left: 0; top: calc(100% + 10px);
  z-index: 5;
  width: min(30em, calc(100vw - 40px));
  padding: 12px 15px;
  border-radius: var(--radius-m);
  background: var(--c-cobalt);
  color: #fff;
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.55;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
/* Het pijltje wijst omhoog naar het woord. */
.springzin__wat::after {
  content: "";
  position: absolute; bottom: 100%; left: 26px;
  border: 7px solid transparent;
  border-bottom-color: var(--c-cobalt);
}
.springzin__woord:focus-visible ~ .springzin__wat,
.springzin--uitleg .springzin__wat {
  opacity: 1; visibility: visible; transform: translateY(0);
}
@media (hover: hover) {
  .springzin__woord:hover ~ .springzin__wat { opacity: 1; visibility: visible; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .springzin__wat { transition: none; }
}

/* Vier banden. Alleen de bovenste twee zijn uitgesproken; daaronder wordt het
   rustiger in plaats van alarmerender. Een 3,4 is informatie, geen verwijt, en
   geen reden om de hero rood te laten kleuren. */
.springzin--top   { --springzin-streep: rgba(20, 179, 129, .26); }
.springzin--top { --springzin-teken: var(--c-mint-diep); }
.springzin--top   .springzin__cijfer { color: var(--c-mint-diep); }
.springzin--goed  { --springzin-streep: rgba(255, 207, 51, .62); }
.springzin--goed { --springzin-teken: #c99000; }
.springzin--goed  .springzin__cijfer { color: #7a5600; }
.springzin--matig { --springzin-streep: rgba(40, 31, 82, .10); }
.springzin--matig { --springzin-teken: var(--c-ink-soft); }
.springzin--matig .springzin__cijfer { color: var(--c-ink); }
.springzin--mager { --springzin-streep: rgba(109, 58, 227, .14); }
.springzin--mager { --springzin-teken: var(--c-cobalt-deep); }
.springzin--mager .springzin__cijfer { color: var(--c-cobalt-deep); }

/* ---------- de boogpijl ----------
   Verschijnt alleen bij een 7 of hoger; onder de 7 valt er niets aan te wijzen.
   Hij hangt aan het cijfer en niet aan de zin: `left: 100%` zet hem er nét
   naast in plaats van eroverheen, en `bottom: calc(100% - 8px)` laat hem op
   ongeveer een derde van de cijferhoogte vertrekken. Breekt de zin over twee
   regels, dan schuift hij vanzelf met het cijfer mee.

   De hoogte is afgestemd op de onderpadding van de knop (13px): de punt komt
   ongeveer 9px boven de onderrand uit en staat daarmee in het geel, maar onder
   het opschrift. Wordt de knop ooit hoger of lager, dan is dat het getal dat
   mee moet. */
.springzin__pijl {
  position: absolute;
  left: calc(100% + 2px);
  bottom: calc(100% - 8px);
  width: 60px; height: 48px;
  color: var(--c-cobalt);
  opacity: .85;
  pointer-events: none;
  z-index: 2;                  /* eindigt ín het geel, niet erachter */
  overflow: visible;
}
@media (prefers-reduced-motion: no-preference) {
  .springzin__boog {
    stroke-dasharray: 70; stroke-dashoffset: 70;
    animation: springzin-boog .6s .35s ease-out forwards;
  }
  .springzin__punt { opacity: 0; animation: springzin-punt .2s .9s ease-out forwards; }
}
@keyframes springzin-boog { to { stroke-dashoffset: 0; } }
@keyframes springzin-punt { to { opacity: 1; } }
.hero__stats {
  display: flex; gap: 40px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid rgba(40,31,82,.12);
}
.hero__stat strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.hero__stat span { font-size: .88rem; color: var(--c-ink-soft); }

/* hero photo met schulprand */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.hero__photo {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  background: var(--c-cream-2);
  animation: floaty 6.5s ease-in-out infinite;
}
.hero__photo img { width: 100%; height: 460px; object-fit: cover; }
.hero__photo .scallop {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 18px;
  color: var(--c-cream-2);
}
.hero__photo-note {
  position: absolute;
  right: 16px; bottom: 30px;
  background: rgba(255,255,255,.94);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--c-ink);
  box-shadow: var(--shadow-soft);
  display: inline-flex; align-items: center; gap: 8px;
}
.hero__photo-note svg { color: var(--c-mint); }

/* collage: hoofdfoto + twee zwevende uitsneden */
.collage { position: relative; padding: 30px 26px 38px 0; }
.collage__float {
  position: absolute;
  border-radius: 18px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: var(--shadow-pop);
  background: var(--c-paper);
}
.collage__float img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes floatyA {
  0%, 100% { transform: rotate(5deg) translateY(0); }
  50%      { transform: rotate(5deg) translateY(-8px); }
}
@keyframes floatyB {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50%      { transform: rotate(-6deg) translateY(-9px); }
}
.collage__float--a {
  width: 37%;
  aspect-ratio: 1;
  top: 0; right: -12px;
  transform: rotate(5deg);
  animation: floatyA 7.5s ease-in-out infinite;
  animation-delay: -2.4s;
}
.collage__float--b {
  width: 43%;
  aspect-ratio: 10 / 8.4;
  bottom: 0; left: -18px;
  transform: rotate(-6deg);
  animation: floatyB 8s ease-in-out infinite;
  animation-delay: -5s;
}
@media (prefers-reduced-motion: reduce) {
  .collage__float--a, .collage__float--b { animation: none; }
}

@media (max-width: 940px) {
  .hero { padding: 40px 0 56px; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero__photo img { height: 300px; }
  .hero__stats { gap: 28px; }
  .collage { padding: 24px 12px 30px 0; }
  .collage__float--a { width: 40%; right: -4px; top: -2px; }
  .collage__float--b { width: 45%; left: -6px; bottom: -4px; }
  .hero__photo-note { display: none; }
}

/* ========== STEPS ========== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.step {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  padding: 30px 28px;
}
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 13px;
  transform: rotate(-6deg);
  background: var(--c-cobalt);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 18px;
}
.step:nth-child(2) .step__num { background: var(--c-coral); transform: rotate(4deg); }
.step:nth-child(3) .step__num { background: var(--c-mint); transform: rotate(-4deg); }
.step h3 { margin-bottom: .45em; }
.step p { color: var(--c-ink-soft); font-size: .96rem; margin: 0; }

@media (max-width: 880px) {
  .steps { grid-template-columns: 1fr; }
}

/* ========== PRODUCT GRID / CARDS ========== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 26px;
  margin-top: 36px;
}

/* ===== De kussenrij op de homepage =====
   Het hele assortiment staat op de homepage, en de kaarten moeten hun normale
   formaat houden (± 352 px, net als op de assortimentspagina). Vier van die
   kaarten plus drie tussenruimtes vragen 1490 px en de gewone container is
   1160 px. Daarom twee dingen:

   1. de rij staat in een eigen, bredere container van 1520 px, zodat op een
      ruim scherm alle vier naast elkaar passen;
   2. past hij niet, dan schuift de rij horizontaal met pijlen ernaast — en dat
      blijft werken als er een vijfde en zesde kussen bij komen.

   Onder 1000 px gebeurt daar niets van: daar blijft het een raster van twee
   kolommen, zoals op de assortimentspagina. Vegen door een rij binnen een
   pagina die zelf al veegt, is op een telefoon een bron van ergernis. */
.grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* De rij staat buiten `.container` en moet die marge dus zelf aanhouden, anders
   plakken de kaarten tegen de schermrand. De pijlen staan standaard uit: ze
   horen alleen bij de schuifrij op desktop, en zonder deze regel zou een
   telefoon ze gewoon tonen. */
.kussenrij { padding-left: 24px; padding-right: 24px; }
.kussenrij__pijl { display: none; }

@media (min-width: 1000px) {
  /* De goot links is precies de marge van de gewone container, zodat de eerste
     kaart onder de kop begint. Rechts houdt de rij alleen de paginamarge aan en
     loopt hij door tot de schermrand: dat is de ruimte die de kaarten op hun
     volle formaat mogelijk maakt. 1112 px is de container van binnen
     (--max 1160 min twee keer 24 px padding). */
  .kussenrij {
    position: relative;
    --goot: max(24px, calc((100% - 1112px) / 2));
    padding-left: var(--goot);
    padding-right: 24px;
  }

  .grid--home {
    display: flex;
    grid-template-columns: none;   /* het rasteropzetje van .grid uitzetten */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* Ruimte voor het optillen van een kaart bij hover: `overflow-x: auto` knipt
       ook verticaal, dus zonder deze marge valt de bovenkant eraf. */
    padding: 10px 0 14px;
    scrollbar-width: thin;
  }
  .grid--home > .card {
    flex: 0 0 352px;
    scroll-snap-align: start;
  }

  .kussenrij__pijl {
    position: absolute; top: calc(50% - 10px);
    transform: translateY(-50%);
    width: 44px; height: 44px;
    display: none; place-items: center;
    border: none; border-radius: 50%;
    background: var(--c-paper);
    color: var(--c-cobalt);
    box-shadow: var(--shadow-pop);
    cursor: pointer;
    transition: transform .25s var(--ease-spring), background .2s ease, opacity .2s ease;
  }
  /* De pijlen verschijnen alleen als er écht iets te schuiven valt; die klasse
     zet initKussenrij() in main.js. Zo staan ze er niet voor niets op een breed
     scherm waar alle vier de kaarten al zichtbaar zijn. */
  .kussenrij--schuift .kussenrij__pijl { display: grid; }
  /* Op de rand van de kaarten, niet op de rand van het scherm: links hangt de
     pijl half over de eerste kaart, rechts over de laatste zichtbare. */
  .kussenrij__pijl--vorige   { left: calc(var(--goot) - 18px); }
  .kussenrij__pijl--volgende { right: 6px; }
  .kussenrij__pijl[disabled] { opacity: 0; pointer-events: none; }
  .kussenrij__pijl:focus-visible { outline: 3px solid var(--c-cobalt); outline-offset: 2px; }
}
@media (min-width: 1000px) and (hover: hover) {
  .kussenrij__pijl:hover { background: var(--c-cobalt); color: #fff; transform: translateY(-50%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .kussenrij__pijl { transition: none; }
}
/* De afmeting staat op de homepage alleen op een telefoon: daar zijn de kaarten
   tegels waarin die regel hoort, op een breed scherm blijft de homepage zoals
   hij was. */
@media (min-width: 621px) { .card__meta--alleen-mobiel { display: none; } }


.card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .25s, transform .45s var(--ease-spring);
}
@media (hover: hover) {
  .card:hover { box-shadow: var(--shadow-pop); transform: translateY(-6px) rotate(-.4deg); }
}
/* De hele kaart is een knop. De cursor en het optillen bij hover geven dat
   met de muis aan; voor het toetsenbord hoort daar een zichtbare focusrand
   bij, want de kaart staat in de tabvolgorde. */
.card--clickable { cursor: pointer; }
.card--clickable:focus-visible {
  outline: 3px solid var(--c-cobalt);
  outline-offset: 3px;
}
/* Binnen een klikbare kaart mag de knop zelf geen 'gewone tekst'-cursor geven. */
.card--clickable .btn { cursor: pointer; }
.card__media { position: relative; aspect-ratio: 3/2; overflow: hidden; }
/* vervangen door .card__foto en .card__vulling; zie 'Kaart: hele kussen in beeld' */
.card__tag {
  position: absolute; top: 14px; left: 14px;
  background: var(--c-sun);
  color: var(--c-ink);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .03em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  transform: rotate(-2.5deg);
  box-shadow: var(--shadow-soft);
}
.card__body {
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}
.card__title { margin: 0; font-size: 1.18rem; }
.card__meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: .86rem;
  color: var(--c-ink-soft);
}
.card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.card__meta svg { color: var(--c-cobalt); flex: 0 0 auto; }
.card__price { margin-top: auto; padding-top: 6px; }
.card__price strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.45rem;
}
.card__price span { color: var(--c-ink-soft); font-size: .88rem; }
/* Eén knop, gecentreerd. 'Details' is vervallen: die opende exact hetzelfde
   venster als 'Boeken', en de hele kaart is toch al aanklikbaar voor details.
   De knop houdt een ruime breedte zodat hij op een telefoon een fatsoenlijk
   tikdoel blijft, maar loopt niet tot de rand — dan leest hij als een balk. */
.card__cta { display: flex; justify-content: center; gap: 10px; margin-top: 4px; }
.card__cta .btn {
  flex: 0 1 auto;
  min-width: 62%;
  justify-content: center;
}
@media (max-width: 620px) {
  .card__cta .btn { min-width: 72%; }
}

/* ========== "ER KOMT ER NOG EEN" ==========
   De teasertegel achter de echte kussens. Twee dingen moeten kloppen: hij moet
   bij het raster horen, en hij mag geen seconde voor een boekbaar kussen worden
   aangezien.

   Daarom gebruikt hij `.card` — dan is hij vanzelf precies zo groot als een
   kussenkaart en hoeft de maatvoering niet apart bijgehouden te worden — maar
   met een gestreepte rand en een crèmeveld in plaats van de witte kaart met
   volle rand. Hetzelfde motief dat het kortingsblok en de scheidingslijnen op
   de boekingspagina gebruiken voor "hier staat nog iets open". Geen prijs, geen
   foto, en een omlijnde knop in plaats van de accentknop, zodat het oog eerst
   bij de echte kussens blijft.

   Hij besloeg eerder de hele rasterrij met de hele uitnodiging erin. Dat woog
   zwaarder dan de kussens eronder terwijl er nog niets te boeken valt; de tekst
   zit nu achter een tik, in hetzelfde meldingsvenster dat de rest van de site
   gebruikt. */
.card--binnenkort {
  background: var(--c-cream);
  border: 2px dashed var(--c-line);
  cursor: pointer;
}
.card--binnenkort:focus-visible {
  outline: 3px solid var(--c-cobalt);
  outline-offset: 3px;
}
/* Het motief zit in `.card__media` en erft daarmee de 3/2-verhouding van de
   foto's: de knop onderin komt zo op dezelfde hoogte als bij de buurkaarten. */
.binnenkort__motief {
  display: flex; align-items: center; justify-content: center;
  padding: 30px 24px;
  color: var(--c-cobalt);
}
.binnenkort__motief svg {
  width: 100%; max-width: 150px; height: auto;
  /* Het vak is een vaste verhouding en de kaart snijdt af wat eruit steekt.
     Op een smalle tegel wint de hoogte het van de breedte. */
  max-height: 100%;
  opacity: .5;
}
/* Zonder deze regel plakt de knop tegen de titel aan: `.card__price` — die
   normaal de ruimte opvult — ontbreekt hier. */
.card--binnenkort .card__cta { margin-top: auto; padding-top: 10px; }
.card--binnenkort .card__title { font-size: 1.1rem; }

/* Op een tegel van een halve schermbreedte past de uitnodiging niet; daar
   opent een tik hem in een venster. Vanaf twee kolommen staat hij gewoon op de
   tegel — anders blijft er een groot leeg vlak over — en is de directe link
   naar de ideeënbus de zinnige vervolgstap in plaats van datzelfde venster. */
.card--binnenkort .binnenkort__tekst,
.card--binnenkort .binnenkort__link { display: none; }

@media (min-width: 621px) {
  .card--binnenkort .binnenkort__tekst {
    display: block;
    margin: 0;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--c-ink-soft);
  }
  .card--binnenkort .binnenkort__link { display: inline-flex; }
  .card--binnenkort .js-binnenkort-meer { display: none; }
  /* De tegel is even hoog als de kussenkaart ernaast, en die hoogte wordt niet
     opgemaakt door tekst alleen. Laat het motief de overgebleven ruimte opnemen
     in plaats van dat er een gat valt tussen de tekst en de knop: `flex` wint
     hier van `aspect-ratio`, dus het vak rekt mee en het silhouet staat er
     gecentreerd in. De knop blijft onderaan en houdt daarmee dezelfde hoogte
     als de knoppen van de buurkaarten. */
  .card--binnenkort .card__media { flex: 1 1 auto; min-height: 150px; }
  .card--binnenkort .binnenkort__motief svg { max-width: 172px; }
  .card--binnenkort { cursor: default; }
}

@media (max-width: 620px) {
  /* Naast een kussenkaart van een halve schermbreedte moet het motief wijken:
     het is sfeer, geen informatie. */
  .binnenkort__motief { padding: 18px 14px; }
  .binnenkort__motief svg { max-width: 110px; }
  .card--binnenkort .card__title { font-size: 1rem; }
}

/* De omschrijving op de assortimentskaart: twee regels, daarna afgekapt.
   De volledige tekst blijft in de HTML staan (en dus ook in het boekvenster
   en voor zoekmachines); alleen de weergave is korter. Bewust met CSS in
   plaats van de tekst in JavaScript afknippen: dan zou het tekstknooppunt
   veranderen en zou het Brabantse woordenboek er niet meer op matchen. */
.card__omschrijving {
  margin: 0;
  font-size: .94rem;
  color: var(--c-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========== FILTER BAR ========== */
.filter-bar {
  display: inline-flex; gap: 4px;
  background: var(--c-cream-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  padding: 5px;
}
.filter-bar button {
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .92rem;
  color: var(--c-ink-soft);
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .15s, color .15s;
}
@media (hover: hover) {
  .filter-bar button:hover { color: var(--c-ink); }
}
.filter-bar button.active {
  background: var(--c-paper);
  color: var(--c-cobalt-deep);
  box-shadow: var(--shadow-soft);
}

/* ========== FEATURES (USP's) ========== */
.usps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.usp { padding: 4px 0; }
.usp__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--c-cream-2);
  color: var(--c-cobalt);
  margin-bottom: 16px;
}
.usp:nth-child(2) .usp__icon { background: #fff0ef; color: var(--c-coral); }
.usp:nth-child(3) .usp__icon { background: #e8f8f1; color: var(--c-mint); }
.usp:nth-child(4) .usp__icon { background: #eaf5fe; color: var(--c-sky); }
.usp h3 { font-size: 1.06rem; margin-bottom: .4em; }
.usp p { color: var(--c-ink-soft); font-size: .93rem; margin: 0; }

@media (max-width: 980px) { .usps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .usps { grid-template-columns: 1fr; } }

/* ========== CONTACTFORMULIER ========== */
/* Honeypot: uit beeld, maar niet display:none — sommige bots slaan
   verborgen velden over en vullen alleen wat 'zichtbaar' lijkt. */
.honing {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.contact-melding {
  margin: 14px 0 0;
  font-size: .9rem;
  color: var(--c-ink-soft);
}
.contact-melding.is-fout { color: var(--c-coral-deep); font-weight: 600; }
.contact-gelukt { text-align: center; padding: 12px 4px; }
.contact-gelukt h2 { margin: 14px 0 10px; }
.contact-gelukt p { color: var(--c-ink-soft); margin: 0 auto 10px; max-width: 34em; }
.contact-gelukt strong { color: var(--c-ink); }

/* ========== VLAGGENLIJN ==========
   Eén keer gebruikt, tussen de hero en de kussens. Losse vlaggetjes met elk een
   eigen vertraging, zodat er een golf door de lijn loopt. Ze kantelen om hun
   bovenkant, net als echte vlaggetjes aan een koord. */
.vlaggen {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 10px;
  height: 30px;
  padding-top: 0;
  overflow: hidden;
  /* zelfde veld als de sectie eronder, en geen eigen koord: de vlaggetjes
     hangen aan de onderrand van de paarse band erboven */
  background: var(--c-cream-2);
}
.vlag {
  flex: 0 0 auto;
  width: 24px; height: 26px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  animation: wapper 4.6s ease-in-out infinite;
}
.vlag--0 { background: var(--c-sun); }
.vlag--1 { background: var(--c-coral); }
.vlag--2 { background: var(--c-mint); }
.vlag--3 { background: var(--c-cobalt); }

@keyframes wapper {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .vlag { animation: none; }
}

/* ========== EIGEN KLEUR PER KUSSEN ==========
   Kleur met een reden: de drie kussens lijken sterk op elkaar, dus een
   eigen accent helpt de bezoeker ze uit elkaar te houden. */
.card--sun   { --kaartkleur: var(--c-sun); }
.card--coral { --kaartkleur: var(--c-coral); }
.card--mint  { --kaartkleur: var(--c-mint); }
/* Vierde kussen, vierde kleur. --c-sky was nog niet als kaartkleur in gebruik. */
.card--sky   { --kaartkleur: var(--c-sky); }

.card__media { border-top: 5px solid var(--kaartkleur, var(--c-sun)); }
.card__price strong { color: var(--c-ink); }
.card--sun   .card__tag--sun   { background: var(--c-sun);   color: var(--c-ink); }
/* Inkt in plaats van wit: wit haalde op mint 2,7:1 en op koraal 3,0:1. Met
   inkt komen ze op 5,5:1 en 4,9:1, en zijn ze meteen gelijk aan de gele tag. */
.card__tag--coral { background: var(--c-coral); color: var(--c-ink); }
.card__tag--mint  { background: var(--c-mint);  color: var(--c-ink); }
/* Inkt op sky, net als de andere drie. Berekend op 5,5:1 — boven de 4,5:1 van
   AA; nagemeten op de live site. */
.card__tag--sky   { background: var(--c-sky);   color: var(--c-ink); }

/* ========== HERO: weerbelofte ========== */

/* ========== VIER STAPPEN ALS BAND ONDER DE HERO ==========
   Stond eerder als licht paneel in een eigen sectie tussen de kussens en de
   reviews. Daar zweefde het: een lichte strook met veel wit eromheen, tussen
   twee zwaardere secties, zonder kop. Toen een paarse band die vast aan de hero
   zit — beter, maar de vier punten bleven vier losse beloftes: service,
   veiligheid, hygiëne en boekingsgemak door elkaar, zonder kop die vertelt
   waarom je ze leest.

   Nu is het één verhaal: de vier stappen die de klant zelf doorloopt, van
   datum kiezen tot ophalen. Ze horen bij elkaar omdat ze na elkaar gebeuren,
   en dat is precies het antwoord op de vraag die iemand op dit punt heeft —
   "hoeveel gedoe is dit voor mij?". De keurings-, schoonmaak- en betaalbelofte
   staat als aparte regel eronder, waar hij niet meer met de stappen
   concurreert.

   De band zelf blijft ongewijzigd van vorm: dezelfde paarse achtergrond waar
   de schulprand van de hero in afloopt, en dezelfde witte onderrand waar de
   vlaggetjes aan hangen. */
.uspbar {
  background: var(--c-cobalt);
  padding: 28px 0 32px;
  /* Het koord waar de vlaggetjes aan hangen. Er was geen lijn te zien: die zat
     eerder in de vlaggenstrook zelf en verdween toen de vlaggetjes aan de band
     werden gehangen. Een witte onderrand geeft een zichtbaar koord én een
     nette afsluiting van de band. */
  border-bottom: 3px solid rgba(255, 255, 255, .92);
}
/* Links uitgelijnd, net als "Onze springkussens" en "Dit horen we terug"
   eronder. Gecentreerd viel deze kop uit de toon: hij was de enige kop op de
   homepage die niet aan de linkermarge begon. */

.uspbar__kop {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.16rem;
  line-height: 1.2;
  color: #fff;
}

.usp-stappen {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: usp-stap;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 34px;
}
.usp-stap {
  counter-increment: usp-stap;
  position: relative;
  font-size: .96rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
}
/* De hele stap is de link, niet alleen het label: op een telefoon is één regel
   tekst een te klein doel. Geen onderstreping en geen linkkleur — die zouden op
   dit violet als vijf losse links lezen in plaats van als één reeks. Bij hover
   licht de bol op, dat is genoeg aanwijzing; toetsenbordgebruikers krijgen de
   normale focusring van de site. */
.usp-stap__link {
  display: flex; align-items: flex-start; gap: 12px;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-m);
}
.usp-stap__link:focus-visible { outline: 3px solid var(--c-sun); outline-offset: 4px; }
@media (hover: hover) {
  .usp-stap__link:hover .usp-stap__bol { background: rgba(255, 255, 255, .3); }
  .usp-stap__link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
}
.usp-stap__bol {
  position: relative;
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-sun);
}
.usp-stap__bol svg { width: 22px; height: 22px; }
/* Het nummer komt uit een counter en staat niet als tekst in de HTML. Twee
   redenen: het hoeft dan niet in de Brabantse woordenlijst (een los cijfer is
   in beide talen hetzelfde), en een schermlezer leest de <ol> zelf al als
   genummerde reeks, dus het cijfer zou dubbel klinken. */
.usp-stap__bol::after {
  content: counter(usp-stap);
  position: absolute; top: -4px; right: -4px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--c-sun);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  line-height: 19px;
  text-align: center;
}
/* Niet display:flex hier: dan wordt elk tekstfragment een eigen flex-item en
   zweeft de toelichting los achter het label. */
.usp-stap__tekst { display: block; min-width: 0; }
.usp-stap strong { display: block; color: #fff; font-size: 1.04rem; font-weight: 700; }
.usp-stap__sub { display: block; margin-top: 2px; color: rgba(255, 255, 255, .9); }

/* De drie borgpunten (keuring, schoonmaak, betalen) stonden hier als losse
   regel onder de stappen. Ze staan nu als lopende zin in de tekst bij "Onze
   springkussens", waar iemand het kussen kiest en de vraag "is dit veilig en
   hoe betaal ik" ook echt speelt. De band houdt de vier stappen. */

@media (min-width: 1000px) {
  .usp-stappen { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }

  /* De bol staat hier bóven de tekst in plaats van ernaast. Dat is nodig voor de
     stippellijn: met de tekst naast de bol liep die lijn op bolhoogte dwars door
     het vetgedrukte label heen. Nu ligt de ruimte rechts van de bol leeg en
     loopt de lijn van bol naar bol, zoals bedoeld. */
  .usp-stap__link { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* De stippellijn die de vier bollen aan elkaar rijgt: dát maakt er een reeks
     van in plaats van vier losse blokjes. Alleen hier, want alleen op deze
     breedte staan de vier bollen op één hoogte naast elkaar. De lijn loopt van
     de rechterkant van een bol tot de linkerrand van de volgende kolom; de
     laatste stap krijgt er geen, anders loopt hij de band uit. */
  .usp-stap:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 20px; left: 54px; right: -22px;
    height: 2px;
    background: repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .45) 0 6px, transparent 6px 12px);
  }
}
@media (max-width: 999px) and (min-width: 561px) {
  .usp-stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 34px; }
}
@media (max-width: 560px) {
  .uspbar { padding: 22px 0 24px; }
  .uspbar__kop { font-size: 1.02rem; margin-bottom: 16px; }
  /* twee kolommen op de telefoon: anders wordt de band bijna 300 px hoog en
     staan de kussens weer ver naar onderen. De nummers houden de volgorde
     leesbaar, ook als het geen rij van vier meer is. */
  .usp-stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 16px; }
  /* Vijf stappen in twee kolommen laat de laatste alleen in een halve rij staan.
     Die loopt hier over de volle breedte, net als de laatste kussentegel bij een
     oneven aantal: dan sluit de rij af in plaats van half leeg te blijven. */
  .usp-stap:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .usp-stap { font-size: .88rem; gap: 9px; }
  .usp-stap strong { font-size: .9rem; }
  .usp-stap__bol { width: 32px; height: 32px; }
  .usp-stap__bol svg { width: 17px; height: 17px; }
  .usp-stap__bol::after {
    top: -3px; right: -3px;
    width: 16px; height: 16px;
    font-size: .64rem; line-height: 16px;
  }
  /* Op een telefoon scant iemand; de toelichtingen braken in drie regels en
     duwden de kussens naar beneden. De vier labels dragen de boodschap. */
  .usp-stap__sub { display: none; }
}

/* ========== EIGENAAR ========== */
.eigenaar { display: grid; grid-template-columns: 190px 1fr; gap: 32px; align-items: center; }
.eigenaar__foto {
  width: 190px; height: 190px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}
.eigenaar h2 { margin-top: 0; }
.eigenaar p { color: var(--c-ink-soft); max-width: 46em; }
.eigenaar__naam { font-weight: 600; color: var(--c-ink) !important; }
@media (max-width: 700px) {
  .eigenaar { grid-template-columns: 1fr; gap: 20px; justify-items: start; }
  .eigenaar__foto { width: 130px; height: 130px; }
}

/* ========== REVIEWS ========== */
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px;
  /* Elke kaart zo hoog als zijn eigen citaat. Zonder dit rekken ze allemaal mee
     met de langste en komt de leegte onder de naam te staan — dat schuift het
     gat alleen op. Op een telefoon staat er één kaart per rij, dus daar
     verandert deze regel niets. */
  align-items: start;
}
.reviews:has(.review:only-child) { grid-template-columns: minmax(0, 480px); justify-content: center; }
/* De naamregel stond eerder met `margin-top: auto` onderaan de kaart geduwd,
   zodat de namen van kaarten naast elkaar op één lijn kwamen. Met drie reviews
   van heel verschillende lengte werkte dat tegen zich: de langste tekst bepaalt
   de rijhoogte en in de kortste kaart viel dan 166 px leeg tussen het citaat en
   de naam. Nu volgt de naam gewoon zijn eigen citaat, en krimpt elke kaart tot
   wat erin zit (zie `align-items: start` op het raster hierboven). */
.review {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 26px 26px 24px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
}
.review__vlaggen { display: block; overflow: visible; }

/* Beoordeling links, maand rechts. De marge onder de vlaggetjes is naar deze
   rij verhuisd; anders telt hij dubbel zodra er een datum naast staat. */
.review__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}
/* Zelfde register als de naamregel — klein, hoofdletters, gespatieerd — maar
   lichter: de maand is bijschrift, geen ondertekening. */
.review__datum {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  opacity: .72;
  white-space: nowrap;
}

/* Drie duidelijk verschillende registers, zodat de recensie niet één grijze
   massa is: de vlaggetjes zijn grafisch, het citaat is een stem (cursief, iets
   groter, ruimer), en de naam is een label (klein, hoofdletters, gespatieerd).
   Voor de cursief wordt de echte italic van Nunito Sans geladen; zonder die
   variant zou de browser de letters scheeftrekken en dat ziet slordig uit. */
.review blockquote {
  position: relative;
  margin: 0 0 20px;
  padding-left: 32px;
  font-size: 1.06rem;
  font-style: italic;
  line-height: 1.72;
  color: var(--c-ink);
}
.review blockquote::before {
  content: "\201C";
  position: absolute;
  left: -2px;
  top: 12px;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 0;
  color: var(--c-cobalt);
  opacity: .28;
}
.review blockquote::after { content: none; }

.review figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .74rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
/* streepje vóór de naam, in plaats van nog een tekstregel */
.review figcaption::before {
  content: "";
  flex: 0 0 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-cobalt);
  opacity: .5;
}

/* ========== KAART: de foto vult de uitsnede ==========
   Eerder stond het hele kussen in beeld met een onscherpe vulling in de balken
   ernaast. Dat liet niets weg, maar zo'n vage rand oogt slordig en de kussens
   werden er klein van. Nu vult de foto de hele uitsnede; er valt een randje
   buiten beeld, maar de kaarten staan strak naast elkaar.
   Het zwaartepunt ligt duidelijk boven het midden: een springkussen is hoog en
   de torens zitten bovenin, terwijl onderin vooral gras staat. Bij een vierkante
   foto zou een gecentreerde uitsnede juist de bovenkant afsnijden. */
.card__foto {
  position: relative;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
.card__media { background: var(--c-cream-2); }
.card__vrij {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 10px;
  font-size: .84rem;
  color: var(--c-mint-diep);
  font-weight: 600;
}
.card__vrij svg { flex: 0 0 auto; }

/* ========== CTA STRIP ========== */
.cta-strip {
  position: relative;
  overflow: hidden;
  background: var(--c-cobalt);
  border-radius: var(--radius-l);
  padding: 44px 48px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-strip h2 { color: #fff; margin: 0; }
.cta-strip p { color: rgba(255,255,255,.82); }
.cta-strip .btn--primary { background: var(--c-sun); color: var(--c-ink); }
@media (hover: hover) {
  .cta-strip .btn--primary:hover { background: var(--c-sun-deep); color: var(--c-ink); }
}

@media (max-width: 720px) { .cta-strip { padding: 34px 28px; } }

/* ========== SAFETY GRID ========== */
.safety-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.safety {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  padding: 26px 24px;
}
.safety__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--c-cream-2);
  color: var(--c-cobalt);
  margin-bottom: 14px;
}
.safety:nth-child(3n+2) .safety__icon { background: #fff0ef; color: var(--c-coral); }
.safety:nth-child(3n)   .safety__icon { background: #e8f8f1; color: var(--c-mint); }
.safety h3 { font-size: 1.02rem; margin-bottom: .4em; }
.safety p { color: var(--c-ink-soft); font-size: .92rem; margin: 0; }

@media (max-width: 940px) { .safety-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .safety-grid { grid-template-columns: 1fr; } }

/* ========== FAQ ========== */
.q {
  border-bottom: 1px solid var(--c-line);
  padding: 4px 0;
}
.q summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  padding: 16px 30px 16px 0;
  list-style: none;
  position: relative;
}
.q summary::-webkit-details-marker { display: none; }
.q summary::after {
  content: "+";
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--c-cobalt);
}
.q[open] summary::after { content: "\2013"; }
.q p { color: var(--c-ink-soft); padding-bottom: 16px; margin: 0; max-width: 640px; }

/* ========== CONTACT ========== */
.contact-card {
  display: flex; gap: 16px; align-items: center;
  padding: 18px 22px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  color: var(--c-ink);
}
@media (hover: hover) {
  a.contact-card:hover { border-color: var(--c-cobalt); color: var(--c-ink); }
}
.contact-card__icon {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--c-cream-2);
  color: var(--c-cobalt);
  display: inline-flex; align-items: center; justify-content: center;
}
.contact-card strong { display: block; }
.contact-card small { color: var(--c-ink-soft); font-size: .9rem; }

.form-panel {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  padding: 36px;
}
@media (max-width: 560px) { .form-panel { padding: 26px 20px; } }

/* ========== FORMS ========== */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; flex: 1; }
.field label { font-weight: 600; font-size: .92rem; }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-ink);
  padding: 12px 14px;
  border: 1.5px solid var(--c-line);
  border-radius: var(--radius-s);
  background: var(--c-paper);
  transition: border-color .15s;
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--c-cobalt);
}
.field-row { display: flex; gap: 16px; }
/* Foutmeldingen in dieprood: koraal op wit haalde 2,9:1 en juist deze regels
   moet iemand kunnen lezen op het moment dat het formulier vastloopt. */
.field-error { display: none; color: var(--c-rood-diep); font-size: .84rem; }
.field--error input, .field--error textarea { border-color: var(--c-coral); }
.field--error .field-error { display: block; }

/* akkoord-vinkje: checkbox links, tekst rechts op één lijn */
.check-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 11px;
  line-height: 1.45;
  /* geen cursor:pointer op de hele regel: alleen het vinkje is aanklikbaar */
}
.check-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--c-cobalt);
  cursor: pointer;
}
.check-row span { flex: 1; }
.check-row.check-row--error span { color: var(--c-rood-diep); }

@media (max-width: 640px) { .field-row { flex-direction: column; gap: 0; } }

/* ========== CART / CHECKOUT ========== */
.cart-page, .checkout-page, .info-page, .contact-page { padding: 56px 0 72px; }

.cart-grid {
  display: grid;
  /* minmax(0, …) in plaats van kaal 1fr: een fr-kolom heeft standaard
     min-width:auto en groeit dan mee met zijn breedste inhoud. Daardoor werd
     deze kolom 386 px in een scherm van 375 px en viel het kruisje en de
     optietekst buiten beeld (html heeft overflow-x: clip, dus je kon er niet
     eens naartoe scrollen). */
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
@media (max-width: 880px) { .cart-grid { grid-template-columns: minmax(0, 1fr); } }

.cart-table { display: flex; flex-direction: column; gap: 16px; }
/* Benoemde rastervlakken: de HTML is plat, deze indeling bepaalt waar elk
   onderdeel komt. Op een breed scherm alles op één regel, op een telefoon
   gestapeld met de prijzen in een eigen blok onderaan. */
.cart-row {
  display: grid;
  /* De afmeting stond in een eigen kolom naast de naam en zweefde daar
     verticaal gecentreerd langs vier regels. Nu staat hij waar hij hoort: als
     onderregel bij de naam, in dezelfde kolom als de rest van de tekst.
     Leesvolgorde: wát je huurt, hoe groot, wanneer, en wat het kost. */
  grid-template-columns: 110px minmax(0, 1fr) auto auto;
  grid-template-areas:
    "foto titel   totaal weg"
    "foto maat    totaal weg"
    "foto dagen   totaal weg"
    "foto perdag  totaal weg"
    "foto korting totaal weg"
    "foto gekozen totaal weg"
    "opties opties opties opties";
  gap: 3px 18px;
  align-items: center;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  padding: 14px;
}
.cart-row__foto   { grid-area: foto; }
/* ---------- Meerdaagse korting in de boekingsregel ----------
   Zelfde opbouw als de regel erboven (tekst, puntje, bedrag) en dezelfde
   groene tint als in het overzicht, zodat je ziet dat het om hetzelfde
   voordeel gaat. Staat de korting er niet, dan blijft de rij leeg en valt hij
   samen — de regel verschijnt dus alleen bij aansluitende dagen. */
.cart-row__korting {
  grid-area: korting;
  font-size: .86rem;
  color: var(--c-mint-diep);
}
.cart-row__kortinglabel { font-weight: 600; }
.cart-row__kortingbedrag { font-weight: 700; white-space: nowrap; }

/* De foto, het totaal en het kruisje lijnen boven uit met de naam. Verticaal
   gecentreerd zweefden ze midden in een tekstkolom van vijf regels — het leek
   alsof ze bij niets hoorden. */
@media (min-width: 621px) {
  .cart-row__foto,
  .cart-row__totaal,
  .cart-row__remove { align-self: start; }
  /* Het totaal krijgt zijn label terug: met de bedragen onder elkaar in de
     rechterkolom moet duidelijk zijn wélk bedrag dit is. */
  .cart-row__totaal {
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  }
  .cart-row__totaal .cart-row__totaallabel {
    display: block;
    order: 2;
    font-family: var(--font-body);
    font-weight: 500; font-size: .78rem;
    color: var(--c-ink-soft);
  }
}
/* Kort kopje boven een groepje, zodat een losse datumpil of een vinkvakje niet
   zomaar in de tekst hangt maar bij iets hoort. */
.cart-row__label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: 3px;
}
/* Kopje en datumpil op één lijn, zodat de pil bij het kopje hoort in plaats van
   los in de tekst te hangen. */
.cart-row__dagen {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  padding-top: 4px;
}
.cart-row__dagen .cart-row__label { margin-bottom: 0; }
.cart-row__opties { margin-top: 10px; padding-top: 12px; }
.cart-row__title  { grid-area: titel; }
.cart-row__maat   { grid-area: maat; }
.cart-row__perdag { grid-area: perdag; font-size: .88rem; color: var(--c-ink-soft); }
.cart-row__dagen  { grid-area: dagen; }
.cart-row__totaal { grid-area: totaal; }
/* De gekozen optie als eigen regel, zodat zichtbaar is waaruit het totaal
   is opgebouwd: dagen × dagprijs plus de opties. */
.cart-row__gekozen { grid-area: gekozen; }
.cart-row__optieregel {
  display: block;
  font-size: .88rem;
  color: var(--c-ink-soft);
}
.cart-row__optieprijs { flex: 0 0 auto; white-space: nowrap; }
/* nowrap: met twee opties in de overzichtsregel werd de tekst langer en brak
   "(ca. 25 meter)" middenin af — "Gekozen opties · Kabelhaspel (ca. 25" met
   "meter), Statafel" op de volgende regel. Een maat tussen haakjes is één
   ding en hoort heel te blijven; de regel breekt nu vóór het haakje. */
.optie__maat { font-size: .84em; color: var(--c-ink-soft); font-weight: 500; white-space: nowrap; }
.cart-row__remove { grid-area: weg; }
/* Het bedrag en "per dag" mogen nooit los van elkaar op een regel belanden. */
.cart-row__dagprijs { white-space: nowrap; }
.cart-row__totaallabel { display: none; }
.cart-row img { width: 110px; height: 74px; object-fit: cover; border-radius: var(--radius-s); }
.cart-row__title { font-weight: 700; font-family: var(--font-display); }
.cart-row__meta { font-size: .88rem; color: var(--c-ink-soft); }
.cart-row__meta::first-letter { text-transform: uppercase; }
.cart-row__price { font-weight: 700; font-family: var(--font-display); font-size: 1.1rem; }
.cart-row__remove {
  border: none; background: var(--c-cream-2);
  width: 40px; height: 40px; border-radius: 50%;
  cursor: pointer;
  color: var(--c-ink-soft);
  font-size: 1rem;
  transition: background .15s, color .15s;
}
@media (hover: hover) {
  .cart-row__remove:hover { background: var(--c-rood-diep); color: #fff; }
}

@media (max-width: 620px) {
  /* Leesvolgorde op een telefoon: naam, afmeting, gekozen dagen, dan pas de
     prijzen. De prijzen staan in een eigen blok achter een streepje, zodat
     "per dag" en "totaal" niet als losse zwevende regels lezen. */
  .cart-row {
    grid-template-columns: 76px minmax(0, 1fr) auto;
    grid-template-areas:
      "foto    titel   weg"
      "foto    maat    maat"
      "dagen   dagen   dagen"
      "perdag  perdag  perdag"
      "korting korting korting"
      "gekozen gekozen gekozen"
      "totaal  totaal  totaal"
      "opties  opties  opties";
    gap: 2px 12px;
    align-items: start;
    padding: 13px;
  }
  .cart-row img { width: 76px; height: 52px; }
  .cart-row__foto { align-self: start; }
  .cart-row__title { align-self: center; line-height: 1.25; }
  .cart-row__remove { justify-self: end; align-self: start; }
  .cart-row__maat { margin-top: 2px; }
  .cart-row__dagen { margin-top: 10px; }

  /* Op een telefoon staan label en bedrag aan weerszijden van de regel, met
     het puntje ertussen weg. De kortingregel hoort in datzelfde stramien,
     anders plakt "14%" tegen "− € 35,00". */
  .cart-row__perdag,
  .cart-row__korting,
  .cart-row__totaal {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  }
  .cart-row__perdag {
    margin-top: 11px; padding-top: 10px;
    border-top: 1px dashed var(--c-line);
  }
  .cart-row__scheider { display: none; }
  /* De bedragen onder elkaar in dezelfde rechterkolom. "per dag" zakt daarbij
     onder het bedrag, anders zou € 5,00 niet onder € 100,00 uitkomen maar onder
     de woorden "per dag" — en dat las als zweven. */
  .cart-row__optieregel {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  }
  .cart-row__perdaglabel {
    display: block;
    text-align: right;
    font-size: .78rem;
    line-height: 1.3;
  }
  .cart-row__totaal { margin-top: 3px; font-size: 1.14rem; }
  .cart-row__totaallabel {
    display: inline;
    font-family: var(--font-body);
    font-size: .88rem; font-weight: 500;
    color: var(--c-ink-soft);
  }
}

.cart-empty {
  text-align: center;
  padding: 70px 24px;
  background: var(--c-cream-2);
  border-radius: var(--radius-l);
}

.summary {
  background: var(--c-cream-2);
  border-radius: var(--radius-l);
  padding: 30px 28px;
  position: sticky;
  top: 90px;
}
.summary__line {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0;
  font-size: .96rem;
}
/* Het bedrag mag nooit afbreken. Zonder deze twee regels kromp de rechterkolom
   mee met de flexruimte en belandde "€ 305,00" over twee regels zodra de
   omschrijving links lang werd. */
.summary__bedrag,
.summary__line > span:last-child {
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: right;
}
.summary__omschrijving {
  min-width: 0;          /* mag krimpen, anders duwt hij het bedrag weg */
  line-height: 1.35;
}
/* Elke toelichting onder de naam op een eigen regel. */
.summary__omschrijving small {
  display: block;
  color: var(--c-ink-soft);
  font-size: .84rem;
}
/* ... behalve de maat van een optie: die hoort achter de naam te blijven staan. */
.summary__omschrijving .optie__maat { display: inline; }
.summary__noot {
  margin: 14px 0 0;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
  text-wrap: pretty;     /* geen losse woorden op de laatste regel */
}
.summary__total {
  display: flex; justify-content: space-between;
  padding-top: 14px;
  margin-top: 8px;
  border-top: 1.5px solid rgba(40,31,82,.14);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 1.18rem;
}
hr.dashed { border: none; border-top: 1.5px dashed rgba(40,31,82,.18); }

/* payment options */
.pay-options { display: flex; flex-direction: column; gap: 12px; }
.pay-option {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1.5px solid var(--c-line);
  border-radius: var(--radius-m);
  padding: 15px 18px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
@media (hover: hover) {
  .pay-option:hover { border-color: var(--c-cobalt); }
}
.pay-option--active { border-color: var(--c-cobalt); background: var(--c-cream-2); }
.pay-option input { margin-top: 4px; accent-color: var(--c-cobalt); }
.pay-option__name { font-weight: 700; }
/* Het iDEAL/Wero-logo in de betaaloptie. 104px breed is de maat waarop "WERO"
   nog goed leesbaar is; kleiner werd het staartje onleesbaar en groter ging de
   regel de hoogte van de tweede optie voorbij. Het bestand is 258px breed, dus
   ook op een scherm met dubbele pixeldichtheid is er genoeg te downschalen.
   Het logo draagt zijn eigen witte keerlijn mee, dus het staat ook goed op de
   zandkleur die de gekozen optie krijgt. */
/* inline-block en niet block: na de afbeelding staat in het opschrift een <br>
   die de hint op de volgende regel zet, en achter een blokelement levert die een
   lege regel op. Gemeten: 30px lucht onder het logo tegen 6px onder de tekst van
   de andere optie. Met inline-block doet die <br> gewoon zijn werk en staan beide
   opties op dezelfde 6px. */
.pay-logo { display: inline-block; vertical-align: bottom; width: 104px; height: auto; }
/* Staat iDEAL nog uit, dan komt er een 'binnenkort'-label achter het logo; dan
   moeten die twee wel naast elkaar op één regel staan. */
.pay-option--binnenkort .pay-option__name { display: flex; align-items: center; gap: 8px; }
.pay-option__hint { font-size: .88rem; color: var(--c-ink-soft); }

/* confirmation */
.confirm {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 24px;
}
.confirm__icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--c-mint);
  color: #fff;
  font-size: 1.9rem;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
/* De kop hoort bij de stand van de betaling: groen alleen als er écht
   betaald is, zand terwijl we het nakijken, koraal als het niet gelukt is. */
.confirm__icon--goed  { background: var(--c-mint); }
.confirm__icon--wacht { background: var(--c-sun-deep); color: var(--c-ink); }
.confirm__icon--fout  { background: var(--c-coral); }
.confirm__herkans { margin: 18px 0 0; }
.confirm__code {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  background: var(--c-cream-2);
  border-radius: var(--radius-s);
  padding: 10px 20px;
  /* ruimte onder het boekingsnummer, anders plakt het tegen het witte kader */
  margin: 10px 0 26px;
  letter-spacing: .04em;
}
/* Geboekte kussens met een uitsnede van de foto erboven. De foto loopt onderin
   weg in het wit van het kader, zodat het een sfeerbeeld blijft en niet met de
   tekst gaat concurreren. */
.confirm__kussens { list-style: none; margin: 0; padding: 0; }
.confirm__kussen + .confirm__kussen { margin-top: 18px; }
.confirm__foto {
  position: relative;
  height: 124px;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  overflow: hidden;
  background: var(--c-cream-2);
}
.confirm__foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  display: block;
}
/* Alleen de onderrand van de foto vervaagt, zodat het beeld overloopt in het
   witte kader in plaats van als een hard blok te eindigen. De tekst staat er
   BUITEN: over een foto is de leesbaarheid afhankelijk van wat er toevallig
   op die plek staat, en dat verschilt per kussen. */
.confirm__foto::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--c-paper) 96%);
}
.confirm__regel { padding: 2px 2px 0; }
.confirm__dagen {
  display: block;
  color: var(--c-ink-soft);
  font-size: .88rem;
}
@media (max-width: 620px) { .confirm__foto { height: 108px; } }

/* De datum staat achter de naam van het springkussen, maar breekt zelf nooit af. */
.confirm__datum--kort { white-space: nowrap; }
@media (max-width: 620px) {
  /* naast elkaar past het hier niet meer: datum onder de naam in plaats van
     een afbreking vlak achter het puntje */
  .confirm__scheiding { display: none; }
  .confirm__datum { display: block; color: var(--c-ink-soft); font-size: .93rem; }
}
/* knoppen krijgen ruimte via de rij zelf, niet via een losse marge op de knop */
.confirm__acties {
  margin-top: 48px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}

/* ========== MODAL ========== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(40,31,82,.55);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--c-paper);
  border-radius: var(--radius-l);
  max-width: 620px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-pop);
}
/* De opmaak van het kruisje staat bij de knoppen over de foto, samen met de
   deelpil: die drie horen als groep bekeken te worden. */
.modal__body {
  display: grid;
  /* minmax(0, 1fr) en niet 1fr: een rasteritem krimpt standaard niet onder de
     breedte van zijn inhoud, en de chiprij onder de agenda (nowrap-chips) rekte
     het venster daardoor breder dan het scherm. */
  grid-template-columns: minmax(0, 1fr);
}
.modal__main, .modal__media { min-width: 0; }
/* In het boekvenster is de foto lager dan elders: elke pixel hier duwt de
   boekknop verder naar beneden. */
.modal__media > img { width: 100%; height: 250px; object-fit: cover; }
.modal--product .modal__media > img { height: 200px; }
.modal--product .gal__slide { height: 310px; }
.modal__main { padding: 32px; }
.modal--product .modal__main { padding: 24px 26px 20px; }
.modal__main h2 { margin-bottom: .2em; }
.modal__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  margin-bottom: 14px;
}
.modal__price small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .88rem;
  color: var(--c-ink-soft);
}
.modal__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 20px;
  margin: 14px 0 16px;
  padding: 12px 15px;
  background: var(--c-cream-2);
  border-radius: var(--radius-m);
  font-size: .92rem;
}
.modal__specs span { color: var(--c-ink-soft); display: block; font-size: .82rem; }
.modal__specs strong { font-weight: 600; }

/* ---------- Fotoslider in het detailvenster ---------- */
.gal { position: relative; background: var(--c-cream-2); outline: none; }
.gal__viewport { overflow: hidden; touch-action: pan-y; }
.gal__track {
  display: flex;
  transition: transform .5s var(--ease-spring);
  will-change: transform;
}
.gal__slide {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  height: 360px;
  overflow: hidden;
  background: var(--c-cream-2);
}
/* Ook hier vult de foto het kader in plaats van te passen binnen onscherpe
   balken; zie de toelichting bij .card__foto. */
.gal__img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}
.gal__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: var(--c-paper);
  color: var(--c-cobalt);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform .25s var(--ease-spring), background .2s ease;
}
@media (hover: hover) {
  .gal__nav:hover { background: var(--c-cobalt); color: #fff; transform: translateY(-50%) scale(1.08); }
}
.gal__nav:focus-visible { outline: 3px solid var(--c-cobalt); outline-offset: 2px; }
.gal__nav--vorige { left: 12px; }
.gal__nav--volgende { right: 12px; }
.gal__dots {
  position: absolute; left: 50%; bottom: 12px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--shadow-soft);
}
.gal__dot {
  width: 9px; height: 9px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(40, 31, 82, .3);
  cursor: pointer;
  transition: transform .3s var(--ease-spring), background .2s ease;
}
@media (hover: hover) {
  .gal__dot:hover { background: rgba(40, 31, 82, .55); }
}
.gal__dot.is-actief { background: var(--c-cobalt); transform: scale(1.45); }
.gal__dot:focus-visible { outline: 2px solid var(--c-cobalt); outline-offset: 3px; }
.gal__teller {
  position: absolute; top: 12px; left: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .88);
  color: var(--c-ink);
  font-size: .78rem; font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .gal__track { transition: none; }
  .gal__nav, .gal__dot { transition: none; }
}

/* ---------- Delen: ronde iconen over de foto ---------- */
.modal__media { position: relative; }

/* ==========================================================================
   KNOPPEN OVER DE FOTO
   Drie knoppen, twee soorten gebruik. Sluiten doe je bijna altijd; delen bijna
   nooit. Daarom staan de twee deelacties samen in één pil met gedempte iconen,
   en staat het kruisje er los van, groter en met meer contrast. De maat en de
   kleur vertellen zo welke knop je nodig hebt, zonder dat er iets schreeuwt.
   Alle drie hangen ze aan hetzelfde element, dus ze blijven samen staan als de
   inhoud eronder scrollt.
   ========================================================================== */
.deel-over {
  position: absolute;
  top: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  /* Eén pil om beide acties: ze horen bij elkaar (deze link doorgeven) en
     vormen samen één blokje in de hoek in plaats van twee losse bollen. */
  /* .88 en niet lager: de iconen zijn gedempt en moeten ook boven een donkere
     foto nog goed leesbaar blijven (nagemeten op ruim boven de 3:1 die voor
     bedieningselementen geldt). */
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
  border-radius: var(--radius-pill);
  box-shadow: 0 3px 12px -4px rgba(40, 31, 82, .35);
  overflow: hidden;
}
/* In het venster: linksboven, dus los van het kruisje rechtsboven. Zo staan de
   twee soorten knoppen niet naast elkaar te dringen. */
.deel-over--venster { left: 14px; right: auto; }
/* Op een kaart is de linkerbovenhoek van het label ("Nieuw", "Veel geboekt"),
   dus daar staat de pil rechts. */
.deel-over--kaart { right: 12px; }

.deel-over__knop {
  display: grid; place-items: center;
  width: 36px; height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--c-ink-soft);
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
/* Een haarlijn tussen de twee helften: het zijn twee acties, geen brede knop. */
.deel-over__knop + .deel-over__knop { box-shadow: inset 1px 0 0 rgba(40, 31, 82, .14); }

@media (hover: hover) {
  .deel-over__knop:hover { background: rgba(109, 58, 227, .12); color: var(--c-cobalt-deep); }
}
.deel-over__knop:focus-visible { outline: 2px solid var(--c-cobalt); outline-offset: -2px; }
/* Gelukt: even groen, maar binnen de pil — geen springende bol meer. */
.deel-over__knop.is-gelukt { background: var(--c-mint); color: #fff; }
.deel-over__knop svg { display: block; }

/* Sluiten is de knop die je het vaakst nodig hebt: iets groter, vol wit en een
   donker icoon. Daarmee is hij de duidelijkste van de drie zonder dat hij om
   aandacht vraagt. */
.modal__close {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  padding: 0;
  border: none; border-radius: 50%;
  background: var(--c-paper);
  color: var(--c-ink);
  box-shadow: 0 4px 14px -4px rgba(40, 31, 82, .45);
  cursor: pointer;
  transition: background .18s ease, transform .25s var(--ease-spring);
}
@media (hover: hover) {
  .modal__close:hover { background: var(--c-cream-2); transform: scale(1.06); }
}
.modal__close:focus-visible { outline: 3px solid var(--c-cobalt); outline-offset: 2px; }
.modal__close svg { display: block; }

@media (max-width: 560px) {
  /* Op een telefoon iets ruimer, zodat een vinger de helften los raakt. */
  .deel-over__knop { width: 42px; height: 38px; }
  .deel-over__knop svg { width: 18px; height: 18px; }
}

/* ---------- Technische gegevens (inklapbaar) ---------- */
.tech {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  margin: 0 0 24px;
  background: var(--c-paper);
}
.tech > summary {
  cursor: pointer;
  padding: 13px 16px;
  font-weight: 600;
  font-size: .92rem;
  list-style: none;
  display: flex; align-items: center; gap: 9px;
}
.tech > summary::-webkit-details-marker { display: none; }
.tech > summary::before {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid var(--c-cobalt);
  border-bottom: 2px solid var(--c-cobalt);
  transform: rotate(-45deg);
  transition: transform .3s var(--ease-spring);
  flex: 0 0 auto;
}
.tech[open] > summary::before { transform: rotate(45deg); }
.tech > summary:focus-visible { outline: 3px solid var(--c-cobalt); outline-offset: -3px; border-radius: var(--radius-m); }
.tech__inhoud { padding: 2px 16px 16px; font-size: .88rem; }
.tech__lijst { display: grid; gap: 9px; }
.tech__rij {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--c-line);
}
.tech__rij:last-child { border-bottom: none; padding-bottom: 0; }
.tech__rij span { color: var(--c-ink-soft); }
.tech__rij strong { font-weight: 600; }
.tech__kop { font-weight: 600; margin: 18px 0 6px; }
.tech__regels { margin: 0; padding-left: 1.15em; color: var(--c-ink-soft); }
.tech__regels li { margin-bottom: 4px; }
.tech__bron { margin: 16px 0 0; color: var(--c-ink-soft); font-size: .82rem; }

@media (max-width: 560px) {
  .tech__rij { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 760px) {
  .modal__media > img { height: 190px; }
  .gal__slide { height: 280px; }
  .modal--product .modal__media > img { height: 120px; }
  .modal--product .gal__slide { height: 200px; }
  .modal--product .modal__main { padding: 15px 16px 12px; }
  .modal--product .modal__price { font-size: 1.3rem; margin-bottom: 8px; }
  .modal--product .modal__main h2 { font-size: 1.25rem; }
  .modal--product .modal__datumkop { font-size: .95rem; margin: 2px 0 5px; }
  .gal__nav { width: 36px; height: 36px; }
  .modal__main { padding: 24px 20px; }
}

/* ---------- Meer breedte voor de kalender op een telefoon ----------
   Een datum kiezen is de kernhandeling van de site, en dat gebeurt met een
   vinger. Op 375px bleef daar 277px raster van over: dagvakjes van 33px. De
   marges rond het venster stonden op de waarden voor een breed scherm; hier
   halen we ze omlaag, zodat dezelfde zeven kolommen ruim 40px per dag krijgen.
   Alleen tot 460px, dus op tablet en desktop verandert er niets. */
@media (max-width: 460px) {
  .modal-backdrop { padding: 10px 8px; }
  .modal--product .modal__main { padding: 15px 10px 12px; }
  .modal--product .cal { padding: 9px 4px; }
  /* De koprij (MA DI WO …) deelt dezelfde kolomindeling als het raster; zou
     alleen het raster smaller worden, dan staan de letters scheef boven de
     cijfers. */
  .cal__dow, .cal__grid { grid-template-columns: 18px repeat(7, minmax(0, 1fr)); }
}

/* ---------- Huurdagen als losse plaatjes onder de titel ----------
   Elk plaatje heeft een eigen kruisje, zodat je één dag kunt laten vervallen
   zonder de hele boeking opnieuw te doen. */
.cart-row__dagen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dagchip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 4px 5px 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--c-cream-2);
  font-size: .8rem;
  color: var(--c-ink);
  white-space: nowrap;
}
.dagchip__weg {
  display: grid; place-items: center;
  width: 26px; height: 26px; padding: 0;
  border: none; border-radius: 50%;
  background: transparent;
  color: var(--c-ink-soft);
  font-size: .95rem; line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s;
}
@media (hover: hover) {
  .dagchip__weg:hover { background: var(--c-rood-diep); color: #fff; }
}
.dagchip__weg:focus-visible { outline: 2px solid var(--c-cobalt); outline-offset: 1px; }
/* Met een vinger is 26 px te klein. Op een aanraakscherm het raakvlak groter,
   zonder het plaatje op een desktop zwaarder te maken. */
@media (hover: none) {
  .dagchip { padding: 3px 3px 3px 12px; }
  .dagchip__weg { width: 32px; height: 32px; }
}

/* ---------- Bij te boeken opties in de winkelwagen ---------- */
.cart-row__opties {
  grid-area: opties;            /* eigen rij onder de regel, volle breedte */
  display: grid; gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--c-line);
}
.optie {
  display: flex; align-items: flex-start; gap: 9px;
  cursor: pointer;
  font-size: .88rem;
  line-height: 1.4;
}
.optie input {
  flex: 0 0 auto;
  width: 21px; height: 21px;
  margin: 1px 0 0;
  accent-color: var(--c-cobalt);
  cursor: pointer;
}
.optie__tekst { display: block; }
.optie__naam { font-weight: 600; }
.optie__prijs { color: var(--c-cobalt); font-weight: 700; white-space: nowrap; }
.optie__uitleg { display: block; color: var(--c-ink-soft); font-size: .82rem; }

.btn:disabled,
.btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
@media (hover: hover) {
  .btn:disabled:hover, .btn[disabled]:hover { transform: none; }
}

/* ---------- Postcode / bezorgzone ---------- */
.bezorg {
  margin: 16px 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-paper);
}
.bezorg > label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 7px; }
.bezorg__rij { display: flex; gap: 8px; }
.bezorg__rij input {
  flex: 1 1 auto; min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-s);
  background: var(--c-paper);
  font: inherit; font-size: .92rem;
  text-transform: uppercase;
}
.bezorg__rij input:focus-visible { outline: 3px solid var(--c-cobalt); outline-offset: 1px; }
.bezorg__rij .btn { flex: 0 0 auto; }
.bezorg__melding { margin: 9px 0 0; font-size: .84rem; color: var(--c-ink-soft); line-height: 1.5; }
.bezorg__melding.is-fout { color: var(--c-coral-deep); }
.bezorg__melding strong { color: var(--c-ink); }
.bezorg--ja { border-color: var(--c-mint); background: rgba(20, 179, 129, .07); }
.bezorg--nee { border-color: var(--c-coral); background: rgba(255, 92, 83, .07); }
.bezorg__contact { margin: 9px 0 0; font-size: .86rem; font-weight: 600; }
.summary__nog { color: var(--c-ink-soft); font-weight: 400; }

/* ---------- Kortingscode ---------- */
.korting {
  margin: 14px 0;
  padding: 14px 16px;
  border: 1px dashed var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-cream);
}
.korting > label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 7px; }
.korting__rij { display: flex; gap: 8px; }
.korting__rij input {
  flex: 1 1 auto; min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-s);
  background: var(--c-paper);
  font: inherit;
  font-size: .92rem;
  text-transform: uppercase;
}
.korting__rij input:focus-visible { outline: 3px solid var(--c-cobalt); outline-offset: 1px; }
.korting__rij .btn { flex: 0 0 auto; }
.korting__melding { margin: 8px 0 0; font-size: .82rem; min-height: 1em; color: var(--c-ink-soft); }
.korting__melding.is-fout { color: var(--c-coral-deep); font-weight: 600; }

/* Code links, bedrag rechts, kruisje ernaast — ook op de smalste telefoon op
   één regel. De code mag krimpen (min-width: 0), het bedrag en het kruisje niet. */
.korting--actief {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--c-mint);
  background: rgba(20, 179, 129, .08);
  border-style: solid;
  padding: 10px 8px 10px 14px;
}
.korting--actief strong { font-weight: 700; }
.korting__code {
  flex: 1 1 auto; min-width: 0;
  font-size: .9rem;
  overflow-wrap: anywhere;
}
.korting__bedrag {
  flex: 0 0 auto;
  color: var(--c-mint-diep); font-weight: 700; font-size: .9rem;
  white-space: nowrap;
}
.korting__code strong { color: var(--c-mint-diep); }
.korting__wis {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: none; background: none;
  color: var(--c-ink-soft);
  font: inherit; font-size: 1.25rem; line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
@media (hover: hover) {
  .korting__wis:hover { color: var(--c-rood-diep); background: rgba(40,31,82,.06); }
}
.nowrap { white-space: nowrap; }

/* Het beeldmerk naast de wordmark. In de balk bovenaan de volledige versie met
   vlaggetjes; die vraagt wat meer formaat om te werken (het pakket geeft 48 px
   als ondergrens). Op 42 px hoog blijft de balk precies even hoog als eerst:
   het hoogste element daarin is 42 px, en daar past hij nu naast. In de
   voettekst staat de eenvoudige variant, die is daar klein. */
.logo__mark { display: block; width: 34px; height: 30px; flex: 0 0 auto; }
.logo__mark--groot { width: 48px; height: 42px; }
@media (max-width: 620px) {
  .logo__mark { width: 30px; height: 27px; }
  .logo__mark--groot { width: 42px; height: 37px; }
}

/* Uitkomst van het adres opzoeken, tussen de postcode en de straat. */
.adres-uitkomst {
  margin: -6px 0 16px;
  padding: 10px 13px;
  border-radius: var(--radius-m);
  background: var(--c-cream);
  font-size: .88rem;
  color: var(--c-ink-soft);
}
.adres-uitkomst.is-goed {
  background: rgba(20, 179, 129, .1);
  color: var(--c-mint-diep);
  font-weight: 600;
}
.adres-uitkomst.is-fout {
  background: rgba(200, 51, 44, .08);
  color: var(--c-rood-diep);
  font-weight: 600;
}
/* Velden die wij hebben ingevuld: zichtbaar niet-typbaar, maar geen grijze bak
   die eruitziet alsof er iets stuk is. */
.field input[readonly] {
  background: var(--c-cream);
  color: var(--c-ink);
  cursor: default;
}
.field input[readonly]:focus { outline-color: var(--c-line); }

/* Verwijzing naar het bezorggebied, binnen het postcodeblok. */
.bezorg__uitleg {
  display: flex; align-items: center; gap: 7px;
  margin: 10px 0 0;
  font-size: .84rem;
}
.bezorg__uitleg svg { flex: 0 0 auto; color: var(--c-cobalt); }

/* Twee zinnen, elk op een eigen regel zodra daar ruimte voor is. Anders brak de
   regel middenin de eerste zin af terwijl de tweede nog op dezelfde regel begon. */
@media (min-width: 700px) {
  .lead__vervolg { display: block; }
}

/* ---------- Zelf je datums verzetten (wijzigen.php) ---------- */
.wijzig__lijst { list-style: none; margin: 0 0 22px; padding: 0; }
.wijzig__lijst li + li { margin-top: 10px; }
.wijzig__nu { color: var(--c-ink-soft); font-size: .93rem; }
.wijzig__kussen {
  margin: 22px 0;
  padding: 18px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  max-width: 420px;
}
.wijzig__kussen h3 { margin: 0 0 12px; font-size: 1.05rem; }
.wijzig__keuze { margin: 12px 0 0; font-size: .92rem; color: var(--c-ink-soft); }
.wijzig__melding { margin: 16px 0; font-size: .95rem; }
.wijzig__melding.is-fout { color: var(--c-rood-diep); font-weight: 600; }
.wijzig__melding.is-goed { color: var(--c-mint-diep); font-weight: 600; }
.melding-blok {
  margin: 20px 0;
  padding: 18px 20px;
  background: var(--c-cream-2);
  border-radius: var(--radius-l);
  max-width: 520px;
}
.melding-blok p { margin: 0 0 8px; }
.melding-blok p:last-child { margin-bottom: 0; }

/* Betaalmethode die nog niet aanstaat: zichtbaar maar duidelijk nog niet
   beschikbaar, met uitleg zodra je erop tikt. */
.pay-option--binnenkort { opacity: .72; cursor: pointer; }
.pay-option--binnenkort .pay-option__name { color: var(--c-ink-soft); }
.pay-option__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--c-sun);
  color: var(--c-ink);
  font-style: normal; font-weight: 700; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .05em;
  vertical-align: 2px;
}
/* Waarom de afrondknop nog uit staat. */
.afrond-hint {
  margin: 10px 0 0;
  font-size: .85rem;
  color: var(--c-ink-soft);
  text-align: center;
}

.summary__line--korting span { color: var(--c-mint-diep); font-weight: 600; }
/* toelichting op de plek van de btw-regel (kleineondernemersregeling) */
.summary__line--btwnoot span { font-size: .82rem; color: var(--c-ink-soft); }

/* ---------- Voorwaardenvenster ---------- */
.modal--tekst { max-width: 720px; }
.modal__tekst {
  padding: 34px 30px 30px;
  max-height: min(78vh, 640px);
  overflow-y: auto;
}
.modal__tekst h2 { font-size: 1.35rem; margin: 26px 0 10px; }
.modal__tekst > div:first-child h2 { margin-top: 0; }
.modal__tekst h3 { font-size: 1rem; margin: 16px 0 4px; }
.modal__tekst p, .modal__tekst li { color: var(--c-ink-soft); font-size: .93rem; }
.modal__tekst ul { padding-left: 20px; line-height: 1.75; }
.modal__tekst .cta-strip, .modal__tekst .brab-zone { display: none; }

/* ---------- Contante betaling ---------- */
.contant-let-op {
  margin: 12px 0 0;
  padding: 11px 13px;
  border-radius: var(--radius-s);
  background: rgba(255, 207, 51, .22);
  border: 1px solid var(--c-sun);
  font-size: .9rem;
}

/* korte hint onder één veld, subtieler dan .veld-uitleg */
.veld-hint {
  display: block;
  margin-top: 5px;
  font-size: .8rem;
  color: var(--c-ink-soft);
}

/* ---------- Uitleg onder invulvelden ---------- */
.veld-uitleg {
  display: flex; align-items: flex-start; gap: 9px;
  margin: -6px 0 20px;
  padding: 12px 14px;
  border-radius: var(--radius-m);
  background: var(--c-cream);
  font-size: .86rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
}
.veld-uitleg--los { margin-top: 0; }
/* Die -6px hierboven trekt het uitlegblok tegen het invoerveld erboven aan, en
   dat werkt zolang dat veld geen eigen achtergrond heeft — je ziet er dan niets
   van. Na de betaalkeuze gaat het wél mis: die kaarten hebben een rand en een
   achtergrond, dus schoof de zandkleur van het uitlegblok 6px onder de kaart
   'Contant bij aflevering'. Hier dus geen negatieve marge maar de 12px die de
   twee betaalkaarten onderling ook aanhouden, zodat het ritme doorloopt. */
.pay-options + .veld-uitleg { margin-top: 12px; }
.veld-uitleg svg { flex: 0 0 auto; margin-top: 2px; color: var(--c-cobalt); }
.veld-uitleg strong { color: var(--c-ink); }

/* Uitklapbare variant. Op desktop is er niets uit te klappen: de volledige
   tekst staat er en het icoon is puur decoratief. De knop en de korte zin
   komen pas op mobiel in beeld. */
.veld-uitleg__tekst { min-width: 0; }
.veld-uitleg__knop,
.veld-uitleg--inklap .veld-uitleg__kort { display: none; }
.veld-uitleg__icoon { display: flex; flex: 0 0 auto; }

@media (max-width: 640px) {
  .veld-uitleg--inklap { align-items: center; padding: 8px 12px 8px 6px; }
  .veld-uitleg--inklap .veld-uitleg__icoon { display: none; }
  .veld-uitleg--inklap .veld-uitleg__kort { display: inline; }
  .veld-uitleg--inklap .veld-uitleg__lang { display: none; }
  .veld-uitleg--inklap.is-open .veld-uitleg__kort { display: none; }
  .veld-uitleg--inklap.is-open .veld-uitleg__lang { display: inline; }
  .veld-uitleg--inklap.is-open { align-items: flex-start; padding: 12px 14px; }

  /* de knop is het hele aanraakvlak: 40 x 40, met het icoon van 15px erin */
  .veld-uitleg--inklap .veld-uitleg__knop {
    display: flex; align-items: center; justify-content: center;
    position: relative;
    flex: 0 0 auto;
    width: 40px; height: 40px; margin: 0 -2px 0 0; padding: 0;
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--c-cobalt);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .veld-uitleg--inklap .veld-uitleg__knop svg { margin-top: 0; }
  /* rondje eromheen zodat het als aantikbaar leest */
  .veld-uitleg--inklap .veld-uitleg__knop::before {
    content: ""; position: absolute;
    width: 27px; height: 27px; border-radius: 50%;
    background: var(--c-paper); border: 1px solid var(--c-line);
  }
  .veld-uitleg--inklap .veld-uitleg__knop svg { position: relative; }
  .veld-uitleg--inklap .veld-uitleg__knop:active::before { background: var(--c-sky); }
  .veld-uitleg--inklap.is-open .veld-uitleg__knop { align-self: flex-start; margin-top: -8px; }
}

/* selects en textarea in dezelfde stijl als de invulvelden */
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-s);
  background: var(--c-paper);
  font: inherit;
  font-size: .95rem;
  color: var(--c-ink);
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.field select:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--c-cobalt); outline-offset: 1px; }

/* ---------- Meldingsvenster (niet-afgeronde boeking) ---------- */
.modal--melding { max-width: 460px; }
.melding__inhoud { padding: 34px 30px 30px; text-align: center; }
.melding__icoon {
  width: 62px; height: 62px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 207, 51, .25);
  color: var(--c-cobalt);
}
.melding__inhoud h2 { margin: 0 0 12px; font-size: 1.4rem; }
.melding__inhoud p { margin: 0 0 12px; color: var(--c-ink-soft); line-height: 1.6; }
.melding__inhoud .small { font-size: .86rem; }
.melding__knoppen {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 22px;
}
@media (max-width: 420px) {
  .melding__knoppen { flex-direction: column; }
  .melding__knoppen .btn { justify-content: center; }
}

/* ========== BEZORGGEBIED (infopagina) ==========
   Eén kaart: de omtrek van Noord-Brabant met de stippen erop geplot. Een losse
   omtrek zonder stippen voegde niets toe, dus die is samengevoegd.
   De namen staan als gewone tekst onder de kaart, niet als 23 knoppen: dat is
   compacter, beter te scannen en het voorkomt tikdoelen die op een telefoon
   een stip oplichten die buiten het beeld valt. */
.gebied {
  margin: 28px 0 0;
  max-width: 640px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 30px;
}
/* De kaart is een vlak van ~173x168 eenheden. Bij 320px blijft de verhouding
   klein genoeg om naast de legenda te passen zonder de sectie te domineren. */
.kaart { flex: 0 1 280px; min-width: 0; display: block; width: 100%; height: auto; }
/* Het gebied dat we bestrijken, als vlak. Op een telefoon is dit het enige
   dat de kaart nog toont: 23 losse stippen kleefden daar aan elkaar. */
.kaart__bereik {
  fill: rgba(109, 58, 227, .18);
  stroke: var(--c-cobalt);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.kaart__stip {
  fill: var(--c-paper);
  stroke: var(--c-cobalt);
  stroke-width: 1.4;
  transition: fill .18s ease, stroke .18s ease;
}
.kaart__stip--kern { fill: var(--c-cobalt); }
.kaart__thuis > circle:first-child { fill: var(--c-sun); stroke: var(--c-ink); stroke-width: 1.3; }
.kaart__thuiskern { fill: var(--c-ink); stroke: none; }
.kaart__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--c-ink);
  paint-order: stroke fill;
  stroke: var(--c-paper);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Naast de kaart staat de legenda als kolom: elk item op een eigen regel leest
   rustiger dan een rij die tegen de kaartrand aan afbreekt. */
.gebied__legenda {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
  font-size: .82rem;
  color: var(--c-ink-soft);
}
.gebied__legenda span { display: flex; align-items: center; gap: 7px; }
.gebied__legenda i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }
.legenda__thuis { background: var(--c-sun); box-shadow: inset 0 0 0 3px var(--c-ink); }
.legenda__kern  { background: var(--c-cobalt); }
.legenda__regio { background: var(--c-paper); box-shadow: inset 0 0 0 2px var(--c-cobalt); }
.gebied__schets { opacity: .7; font-style: italic; }

.gebied__namen { margin-top: 26px; max-width: 640px; }
.gebied__namen p { margin: 0 0 14px; font-size: .95rem; line-height: 1.75; color: var(--c-ink-soft); }
.gebied__namen strong { color: var(--c-ink); }
.gebied__prijs {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-cobalt);
  background: rgba(109, 58, 227, .1);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  vertical-align: 2px;
}

/* Aanwijzen werkt alleen waar er een muis is. Op een aanraakscherm zou een tik
   een stip oplichten die je niet ziet, dus daar gebeurt niets. */
@media (hover: hover) {
  /* geen streepje in ruststand: 23 onderstreepte namen lijken op 23 links en
     maakten de alinea onrustig. Het streepje verschijnt bij aanwijzen. */
  .js-plaats { cursor: default; }
  .js-plaats:hover {
    color: var(--c-coral-deep);
    box-shadow: inset 0 -1px 0 0 var(--c-coral);
  }
  .kaart__stip.is-aan { fill: var(--c-coral); stroke: var(--c-coral); }
  .kaart__thuis.is-aan > circle:first-child { fill: var(--c-coral); }
}

.gebied__buiten {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 22px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-m);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  font-size: .88rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
  max-width: 640px;
}
.gebied__buiten svg { flex: 0 0 auto; margin-top: 2px; color: var(--c-cobalt); }
.gebied__buiten strong { color: var(--c-ink); }

@media (max-width: 620px) {
  /* Onder elkaar: naast elkaar zou de kaart hier tot een postzegel krimpen.
     De kaart mag de volle breedte pakken; bij 240 px stonden de stippen zo
     dicht op elkaar dat ze verborgen moesten worden, bij volle breedte is er
     ruimte genoeg en kan de telefoon hetzelfde beeld tonen als de desktop. */
  .gebied { margin-top: 22px; flex-direction: column; align-items: stretch; gap: 14px; }
  .kaart { flex: 0 0 auto; max-width: 100%; }
  .gebied__legenda { flex: 0 0 auto; gap: 7px; font-size: .78rem; }
  .gebied__namen { margin-top: 16px; }
  .gebied__namen p { font-size: .92rem; line-height: 1.7; }
  .gebied__buiten { font-size: .85rem; }
}

/* ---------- Aftelklok op de boekingspagina ----------
   Bewust rustig: het is een geruststelling ("hij staat nog klaar"), geen
   waarschuwing. Pas onder de twee minuten kleurt hij op. */
.boekingklok {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 0;
  font-size: .82rem;
  color: var(--c-ink-soft);
}
.boekingklok svg { flex: 0 0 auto; opacity: .75; }
.boekingklok strong {
  font-variant-numeric: tabular-nums;   /* cijfers springen niet bij elke tik */
  font-weight: 700;
  color: var(--c-ink);
}
.boekingklok--bijna { color: var(--c-coral-deep); }
.boekingklok--bijna svg { opacity: 1; }
.boekingklok--bijna strong { color: var(--c-coral-deep); }

/* ---------- Verwijzing naar de uitleg over bezorgkosten ---------- */
.cart-uitleg {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 12px 0 4px;
  font-size: .85rem;
}
.cart-uitleg svg { flex: 0 0 auto; color: var(--c-cobalt); }

/* ---------- Knop voor een onomkeerbare keuze ----------
   Wit op --c-rood-diep haalt 5,3:1; wit op --c-coral haalde maar 3,0:1. */
.btn--gevaar { background: var(--c-rood-diep); color: #fff; }
@media (hover: hover) {
  .btn--gevaar:hover { background: #ab241f; color: #fff; }
}

/* ---------- Het kussen waar de vraag over gaat ---------- */
.bevestig__item {
  display: flex; align-items: center; gap: 14px;
  margin: 0;
  padding: 10px 16px 10px 10px;
  background: var(--c-cream-2);
  border-radius: var(--radius-m);
  text-align: left;
}
.bevestig__item img {
  flex: 0 0 auto;
  width: 84px; height: 58px;
  object-fit: cover;
  border-radius: var(--radius-s);
}
.bevestig__item figcaption {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--c-ink);
}

/* ========== VENSTER "UIT JE BOEKING HALEN?" ==========
   Het stond er als een kale kop met twee knoppen: functioneel, maar niet in de
   vormgeving van de rest van de site. Nu net als de andere meldvensters een
   rondje met een pictogram bovenaan — hier in koraal in plaats van geel, want
   dit is het enige venster waar iets weggaat.

   De twee knoppen staan naast elkaar met de bevestiging links, zoals overal op
   de site; onder 560px zetten ze zich onder elkaar (die regel staat al bij
   .melding__knoppen). */
.melding__icoon--weg {
  background: rgba(255, 92, 83, .16);
  color: var(--c-rood-diep);
}
.modal--bevestig .melding__inhoud { padding: 30px 26px 26px; }
.modal--bevestig h2 { font-size: 1.26rem; }
/* Wat je weghaalt staat er als kaartje in beeld, met dezelfde rand en radius
   als de kaarten in het overzicht — zodat je ziet dat het over dát kussen gaat
   en niet over de boeking als geheel. */
.modal--bevestig .bevestig__item {
  margin: 4px 0 20px;
  border: 1px solid var(--c-line);
  background: var(--c-cream);
}
.modal--bevestig .melding__knoppen { margin-top: 0; }

/* ========== CALENDAR ========== */
.cal {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  padding: 11px 12px;
}
.cal__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 7px;
  font-weight: 700;
  font-family: var(--font-display);
}
.cal__head button {
  border: none;
  background: var(--c-cream-2);
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  color: var(--c-ink);
}/* De maandpijlen kregen op een aanraakscherm een blijvende gele hover. */
@media (hover: hover) {
  .cal__head button:hover { background: var(--c-sun); }
}
/* Een smalle kolom vóór de dagen voor het weeknummer. Bewust klein en zacht:
   wie het nodig heeft vindt het, wie het niet gebruikt heeft er geen last van. */
.cal__dow, .cal__grid {
  display: grid;
  grid-template-columns: 22px repeat(7, 1fr);
  gap: 3px;
}
.cal__wkkop, .cal__wk {
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 4px;
  font-size: .66rem;
  color: var(--c-ink-soft);
  opacity: .55;
  font-variant-numeric: tabular-nums;
}
.cal__wkkop { text-transform: none; letter-spacing: 0; font-weight: 500; }
/* Slepen mag geen tekst meeselecteren.
   touch-action: pan-y in plaats van none. Met `none` slikte het raster élke
   veeg op: wie langs de agenda naar beneden wilde, selecteerde per ongeluk een
   reeks dagen. Met `pan-y` bepaalt de richting van je eerste beweging wat er
   gebeurt: omhoog of omlaag scrollt de pagina, zijwaarts start het slepen over
   de dagen — en zodra dat begonnen is mag je alle kanten op, dus een reeks over
   meerdere weken blijft mogelijk. */
.cal__grid {
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y;
}
.cal__dow span {
  text-align: center;
  font-size: .74rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cal__grid button {
  border: none;
  background: transparent;
  aspect-ratio: 1;
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: .86rem;
  cursor: pointer;
  color: var(--c-ink);
  transition: background .12s;
}
@media (hover: hover) {
  /* :not(.sel) is hier het punt. Zonder die uitsluiting wint deze regel
     (0-3-1) van `.cal__grid button.sel` (0-2-1) en kleurt een gekozen dag
     crème in plaats van paars — precies wat er na een veeg bleef staan op de
     dag waar de vinger losliet. */
  .cal__grid button:hover:not(:disabled):not(.sel) { background: var(--c-cream-2); }
  .cal__grid button.sel:hover { background: var(--c-cobalt-deep); }
}
.cal__grid button.sel { background: var(--c-cobalt); color: #fff; font-weight: 700; }
/* De dag vóór en ná je enige gekozen dag: dát zijn de dagen die de meerdaagse
   korting opleveren. Een gestippelde ring in mint, bewust anders dan de
   dichte paarse vulling van een gekozen dag — het is een suggestie, geen
   keuze. Verdwijnt zodra er twee dagen staan, want dan is de hint gedaan.
   box-shadow in plaats van outline: die volgt de ronde vorm. */
.cal__grid button.dag--voordeel {
  box-shadow: inset 0 0 0 1.5px var(--c-mint);
  color: var(--c-mint-diep);
  font-weight: 700;
}
@media (prefers-reduced-motion: no-preference) {
  .cal__grid button.dag--voordeel { transition: box-shadow .18s ease, color .18s ease; }
}
/* Tijdens het slepen: een ring toont welke dagen straks aan of uit gaan. */
.cal__grid button.voorbeeld { box-shadow: 0 0 0 2px var(--c-sun); }
.cal__grid button:disabled {
  color: #cfc4ad;
  cursor: not-allowed;
  text-decoration: line-through;
}
.cal__grid button.busy-day:disabled {
  background: #fbe4e0;
  color: #c98a82;
}
.cal__grid .pad { visibility: hidden; }
/* ---------- Bijzondere dagen in de agenda ----------
   Drie niveaus, drie behandelingen. Alleen de topdagen krijgen een vlaggetje;
   zou een vakantieweek dat ook krijgen, dan staat een halve maand vol en zegt
   het niets meer. */
.cal__grid button { position: relative; }
/* Het cijfer in de merkkleur, niet in rood: rood betekent hier "niet
   beschikbaar" en dat las als volgeboekt. */
.cal__grid button.dag--top { font-weight: 800; color: var(--c-cobalt-deep); }
.cal__grid button.dag--top.sel { color: #fff; }

/* Zaterdag en zondag krijgen een zachte tint. Bewust als doorlopende band
   áchter de cellen en niet als achtergrond óp de knop: de knoppen zijn rond, dus
   dat gaf losse bolletjes die eruitzagen alsof er iets met die dag aan de hand
   was. De band ligt met een negatieve inset over de tussenruimte heen, waardoor
   de kolom als één vlak leest. */
.cal__grid button.dag--weekend::before {
  content: "";
  position: absolute;
  inset: -2px -1.5px;
  background: var(--c-cream-2);
  z-index: -1;
}
/* De koppen ZA en ZO staan op dezelfde band, zodat de kolom bovenaan begint. */
.cal__dow .dow--weekend {
  position: relative;
  color: var(--c-ink);
}
.cal__dow .dow--weekend::before {
  content: "";
  position: absolute;
  inset: -2px -1.5px -4px;
  background: var(--c-cream-2);
  z-index: -1;
}
.cal__dow { position: relative; z-index: 0; }

/* Markering van een bijzondere dag: een klein zonnegeel stipje onder het
   cijfer. Zonnegeel wordt in deze agenda nergens als status gebruikt, dus het
   kan niet met "bezet" verward worden. */
.dag__stip {
  position: absolute; left: 50%; bottom: 4px;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-sun-deep);
  pointer-events: none;
}
.sel .dag__stip { background: #fff; }
.busy-day .dag__stip { background: var(--c-ink-soft); opacity: .45; }

/* Snelkoppelingen onder de agenda: één rij, zijwaarts te schuiven. Bewust geen
   zijkolom zoals in het voorstel — die past niet naast een agenda die in één
   oogopslag zichtbaar moet blijven. */
.cal__chips {
  display: flex; gap: 6px;
  min-width: 0;
  margin-top: 9px; padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.cal__chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 7px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: var(--c-paper);
  font: inherit; font-size: .78rem; font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;
  cursor: pointer;
}
.cal__chipdag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--c-cream-2);
  font-size: .74rem; font-weight: 700;
}
.cal__chip--top .cal__chipdag { background: rgba(255, 207, 51, .3); color: var(--c-ink); }
.cal__chip.is-bezet { opacity: .5; cursor: not-allowed; text-decoration: line-through; }
.cal__chip:focus-visible { outline: 2px solid var(--c-cobalt); outline-offset: 2px; }
@media (hover: hover) {
  .cal__chip:not(.is-bezet):hover { border-color: var(--c-cobalt); background: var(--c-cream); }
}

/* Tooltip bij een bijzondere dag; verschijnt ook op toetsenbordfocus. */
.cal__ballon {
  position: absolute; z-index: 5;
  transform: translate(-50%, calc(-100% - 8px));
  max-width: 210px;
  padding: 8px 11px;
  border-radius: var(--radius-m);
  background: var(--c-ink);
  color: #fff;
  font-size: .78rem; line-height: 1.4;
  box-shadow: var(--shadow-pop);
  pointer-events: none;
}
.cal__ballon strong { display: block; margin-bottom: 2px; }
.cal__ballon span { opacity: .85; }
.cal__ballon[hidden] { display: none; }
.cal { position: relative; }

.cal__legend {
  display: flex; flex-wrap: wrap; gap: 2px 16px;
  margin: 0 0 7px;
  font-size: .76rem;
  color: var(--c-ink-soft);
}
/* De meerdaagse korting, op een volle regel onder de legenda: het is geen
   kleuruitleg maar een prijsregel, en hij mag niet tussen de bolletjes
   verdwijnen. Groen, dezelfde tint als het voordeel elders in de boeking. */
.cal__staffel {
  flex: 1 0 100%;
  color: var(--c-mint-diep);
  font-weight: 600;
}
/* Open bolletje, net als de dag in de agenda die de korting oplevert: die krijgt
   daar een ring en geen vulling, want het is een suggestie en geen gekozen dag.
   Een dichte stip beloofde hier iets anders dan wat je in het raster ziet.

   Een ring van 2,5px op een bolletje van 10px in plaats van de 1,5px van het
   dagvakje: dat vakje is vier keer zo groot, en op deze maat verdwijnt een dunne
   lijn. Om diezelfde reden de diepere muntkleur — dezelfde als de tekst van deze
   regel, en die houdt zich staande op tien pixels. */
.cal__staffel i {
  background: transparent;
  box-shadow: inset 0 0 0 2.5px var(--c-mint-diep);
}

.cal__legend i {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}
.cal__legend .free i { background: var(--c-mint); }
.cal__legend .busy i { background: #f2b8b0; }
.cal__legend .bijzonder i { background: var(--c-sun-deep); }

/* Het productvenster is een kolom: de inhoud scrolt binnenin en de boekbalk
   staat daar los onder. Eerder scrollde het hele venster met de balk er sticky
   overheen; die bedekte dan de onderste regel van de kalenderlegenda, wat op
   een telefoon als "afgesneden" oogde. */
.modal--product {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal--product .modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Boekbalk van het productvenster ----------
   Het venster scrolt zelf (max-height + overflow-y op .modal). De balk plakt
   met sticky aan de onderkant van dat scrollvlak, dus de boekknop staat in
   beeld zodra het venster opent, hoe lang de inhoud erboven ook is. */
.modal__cta {
  position: sticky;
  bottom: 0;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 13px 26px;
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -8px 18px rgba(40, 31, 82, .08);
}
/* ---------- Bedragen in de agendaknop ----------
   De knop heeft dezelfde geeltint als elke andere stap in het boekingsproces.
   Zonder korting staat het bedrag er gewoon vet in. Mét korting krijgt het
   nieuwe bedrag het groen van de meerdaagse korting, in een licht vlakje:
   groen op geel is niet leesbaar genoeg, groen op wit wel — en dat vlakje is
   hetzelfde element dat de kortingsregel op de boekingspagina's gebruikt.
   Het volle bedrag staat erachter, kleiner en doorgestreept. */
.knop__bedrag { font-weight: 700; }
.knop__nu {
  background: var(--c-paper);
  color: var(--c-mint-diep);
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}
.knop__was {
  font-size: .84em;
  font-weight: 500;
  color: rgba(40, 31, 82, .85);
  text-decoration: line-through;
}
/* Vaste hoogte: het lichte vlakje om het kortingsbedrag maakte de knop één
   pixel hoger dan zonder korting, en dan verschuift de knop een tikje op het
   moment dat je de tweede dag aantikt. */
.modal__cta .btn { flex: 0 0 auto; justify-content: center; height: 48px; }
.modal__cta .btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Meerdaagse korting in de agenda ----------
   Eén regel die meegroeit met de keuze. Hij pakt een volle rij, zodat de
   bestaande rij (gekozen dagen + knop) eronder ongemoeid blijft. */
.modal__datumkop { font-weight: 600; margin: 4px 0 6px; }

/* ---------- Naam en prijs over de foto ----------
   Tekst over een foto is alleen leesbaar met een stevige donkere verloop
   eronder; de foto's verschillen te veel om op de foto zelf te vertrouwen. */
.modal__titelbalk {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px;
  padding: 34px 20px 14px;
  background: linear-gradient(to top, rgba(40,31,82,.93), rgba(40,31,82,.62) 52%, rgba(40,31,82,0));
  pointer-events: none;      /* de galerijknoppen eronder blijven bruikbaar */
}
.modal__titelbalk h2 {
  margin: 0;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.modal__tarief {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.15rem;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.modal__tarief small { font-family: var(--font-body); font-weight: 500; font-size: .74rem; opacity: .9; }
/* De stippen van de galerij schuiven boven de titelbalk. */
.modal--product .gal__dots { bottom: 66px; }

/* ---------- "Over dit springkussen" ingeklapt ---------- */
.modal__meer { margin-top: 14px; }
.modal__meer > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: .92rem;
  color: var(--c-cobalt-deep);
  padding: 6px 0;
}
.modal__meer > summary::-webkit-details-marker { display: none; }
.modal__meer > summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.modal__meer[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.modal__meer > summary:focus-visible { outline: 2px solid var(--c-cobalt); outline-offset: 3px; border-radius: 6px; }
.modal__meer .modal__omschrijving { margin-top: 6px; }

/* ---------- De agenda in één oogopslag ----------
   Op een breed scherm werden de dagvakjes ruim 70 px, waardoor de agenda
   onderaan buiten beeld viel. Een dagvakje van een goede 50 px is nog steeds
   comfortabel aan te klikken en houdt de hele maand in beeld. */
@media (min-width: 561px) {
  .modal--product .cal__dow,
  .modal--product .cal__grid { max-width: 420px; margin-left: auto; margin-right: auto; }
  /* Liggende dagvakjes in plaats van vierkante: even breed om aan te klikken,
     maar zes weken kosten zo bijna honderd pixel minder hoogte. Daarmee past de
     hele maand in beeld. Een liggend vakje vraagt een pilvorm; een cirkel zou
     een ovaal worden. */
  .modal--product .cal__grid button {
    aspect-ratio: 1.35;
    border-radius: var(--radius-pill);
  }
  /* De foto dient hier om te herkennen wat je boekt, niet om te bewonderen —
     dat deed de kaart in het overzicht al. */
  .modal--product .gal__slide { height: 152px; }
  .modal--product .gal__dots { bottom: 60px; }
  .modal--product .cal { padding: 9px 12px; }
  .modal--product .cal__head { margin-bottom: 4px; }
  .modal--product .cal__dow span { padding: 2px 0; }
  .modal--product .modal__main { padding: 16px 26px 14px; }
}
/* Iets meer hoogte voor het boekvenster: op een laptop van 720 px scheelt dat
   net de laatste week van de maand. */
.modal--product { max-height: 95vh; }
.modal__omschrijving { color: var(--c-ink-soft); margin: 20px 0 0; }

@media (max-width: 560px) {
  /* Op een smal scherm de knop op een eigen regel over de volle breedte:
     naast de gekozen dagen wordt hij anders te smal om te raken. De
     samenvatting blijft op een regel, want elke regel die de balk hoger
     maakt duwt de kalender erboven weer uit beeld. */
  .modal__cta { padding: 10px 16px; gap: 6px; }
  .modal__cta .btn { flex: 1 1 100%; }
    }

/* ---------- Knipoog: perdelolly fietst voorbij ----------
   Twee animaties over elkaar: de omhullende div rijdt van links naar rechts,
   de afbeelding erin wipt op en neer alsof er getrapt wordt. Los gehouden
   omdat ze een heel ander tempo hebben. z-index 400 ligt boven alles
   (hoogste elders is 300), maar hij vangt geen klikken. */
.perdelolly {
  position: fixed;
  left: 0;
  bottom: 4vh;
  z-index: 400;
  pointer-events: none;
  will-change: transform;
  animation: perdelolly-rijdt 5.4s linear forwards;
}
.perdelolly img {
  display: block;
  width: clamp(170px, 24vw, 300px);   /* breder beeld: de staart telt mee */
  height: auto;
  transform-origin: 50% 88%;
  animation: perdelolly-wipt .42s ease-in-out infinite;
}
@keyframes perdelolly-rijdt {
  from { transform: translateX(-32vw); }
  to   { transform: translateX(118vw); }
}
@keyframes perdelolly-wipt {
  0%, 100% { transform: translateY(0)    rotate(-1.5deg); }
  50%      { transform: translateY(-8px) rotate( 1.5deg); }
}

/* Tekst die op een telefoon wegvalt. Op een klein scherm telt elke regel:
   de eerste zin zegt waar het om gaat, de rest is toelichting die de bezoeker
   daar eerder wegscrolt dan leest. */
.niet-op-mobiel { display: inline; }
@media (max-width: 620px) {
  .niet-op-mobiel { display: none; }
}

/* ---------- Kortingscode: ingeklapt tot je hem nodig hebt ---------- */
.korting-uitklap {
  margin: 14px 0;
  border: 1px dashed var(--c-line);
  border-radius: var(--radius-m);
  background: var(--c-cream);
}
.korting-uitklap > summary {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px;
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  list-style: none;
}
.korting-uitklap > summary::-webkit-details-marker { display: none; }
.korting-uitklap > summary::after {
  content: "";
  margin-left: auto;
  width: 7px; height: 7px;
  border-right: 2px solid var(--c-cobalt);
  border-bottom: 2px solid var(--c-cobalt);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s var(--ease-spring);
}
.korting-uitklap[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.korting-uitklap > summary:focus-visible {
  outline: 3px solid var(--c-cobalt); outline-offset: -3px;
  border-radius: var(--radius-m);
}
.korting-uitklap .korting {
  margin: 0;
  border: none; background: none;
  padding: 0 16px 14px;
}
/* Expliciet verbergen zolang de uitklapper dicht is. Browsers doen dit zelf
   voor <details>, maar door het hier vast te leggen hangt het gedrag niet af
   van de UA-stylesheet en is het ook meetbaar. */
.korting-uitklap:not([open]) .korting { display: none; }

/* ---------- Aftelklok in de navigatiebalk ----------
   Rustig van toon: het is een geruststelling dat de boeking nog klaarstaat,
   geen alarm. Pas onder de twee minuten kleurt hij op. Op een smal scherm
   staat hij links van het menuknopje; op desktop schuift hij naar rechts,
   vlak voor de navigatielinks. */
.navklok {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  padding: 5px 11px 5px 9px;
  border-radius: var(--radius-pill);
  background: var(--c-cream-2);
  color: var(--c-ink-soft);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.navklok:hover { background: var(--c-sun); color: var(--c-ink); }
.navklok svg { flex: 0 0 auto; opacity: .8; }
.navklok span {
  font-variant-numeric: tabular-nums;   /* cijfers springen niet bij elke tik */
  color: var(--c-ink);
  font-weight: 700;
}
.navklok--bijna { background: rgba(230, 66, 58, .12); color: var(--c-rood-diep); }
.navklok--bijna span { color: var(--c-rood-diep); }
.navklok[hidden] { display: none; }
/* De balk verdeelt zijn ruimte met space-between; verschijnt of verdwijnt de
   klok, dan verschuiven de menu-items mee. Daarom houdt hij zijn plek bezet en
   wordt hij alleen onzichtbaar. Op de boekings- en afrekenpagina staat hij er
   helemaal niet, en daar kan er dus ook niets schuiven. */
.navklok { min-width: 84px; justify-content: center; }
.navklok--leeg { visibility: hidden; }

@media (max-width: 980px) {
  /* Naast het menuknopje; het woordmerk mag daarvoor iets inleveren.
     De gereserveerde breedte van 84 px is hier niet nodig: op een smal scherm
     staat er een menuknopje in plaats van losse menu-items, en dat blijft
     rechts staan of de klok er nu is of niet. Zonder die reservering houdt het
     logo zijn ruimte en schuift de klok er niet meer over. */
  .navklok { margin-left: auto; margin-right: 10px; min-width: 0; }
  .nav__inner { gap: 12px; }
  /* Het woordmerk moet écht mee kunnen krimpen. Een <img> met een vaste hoogte
     en width:auto doet dat niet: die liep op een smal scherm buiten het logo
     door en schoof zo onder de klok. Met max-width en hoogte op auto schaalt
     hij netjes mee en houdt hij zijn verhouding. */
  .logo { min-width: 0; flex: 0 1 auto; }
  .logo__word {
    min-width: 0;
    max-width: 100%;
    /* Hoogte vast houden: deze SVG heeft geen eigen afmetingen, dus met
       height:auto klapt hij dicht tot nul. De begrensde breedte plus
       object-fit schaalt hem mee zonder hem te vervormen. */
    height: 30px;
    width: auto;
    object-fit: contain;
    object-position: left center;
  }
  .navklok { flex: 0 0 auto; }
}
@media (max-width: 380px) {
  .navklok { padding: 5px 9px 5px 7px; font-size: .78rem; gap: 4px; }
  .navklok svg { display: none; }
  .logo__word { max-width: 132px; }
}

/* ========== TOAST ========== */
/* De melding blijft donker met witte tekst (14,9:1). Het soort wordt met een
   gekleurd bolletje aangegeven; mint of koraal als achtergrond zou witte tekst
   op 2,7 respectievelijk 3,0:1 zetten en dat is niet leesbaar. */
.toast {
  display: flex; align-items: center; gap: 10px;
  position: fixed;
  left: 50%; bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: var(--c-ink);
  color: #fff;
  padding: 12px 18px;
  /* Geen pilvorm meer: een donkere pil met tekst erin las als een knop waar je
     op moest drukken. Een rechthoek met zachte hoeken leest als een melding. */
  border-radius: var(--radius-m);
  /* Zonder maximum rekte een lange melding uit tot een balk over het hele
     scherm; nu breekt hij netjes af op twee regels. */
  max-width: min(90vw, 24em);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 300;
  box-shadow: var(--shadow-pop);
}
.toast--gelukt::before,
.toast--let-op::before,
.toast--fout::before { align-self: flex-start; margin-top: 5px; }
.toast--gelukt::before,
.toast--let-op::before,
.toast--fout::before {
  content: "";
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
}
.toast--gelukt::before { background: var(--c-mint); }
.toast--let-op::before { background: var(--c-sun); }
.toast--fout::before   { background: var(--c-coral); }

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* LET OP de volgorde: dit blok moet ná `.toast.show` staan. Beide selectors
   hebben dezelfde specificiteit, dus de laatste wint — stond het ervoor, dan
   bleef translateX(-50%) actief en schoof de melding half uit beeld.

   Op een telefoon staat de melding BOVENIN. Onderin dekte hij 82% van de
   boekknop in de vaste balk af, precies op het moment dat je daarop wilt
   tikken. Bovenin komt hij bovendien vlak bij de teller op het menuknopje,
   die op datzelfde moment omhoog gaat — melding en teller vertellen zo
   hetzelfde verhaal op dezelfde plek.
   Vaste marges links en rechts in plaats van centreren: dan is de melding
   even breed, ongeacht hoe lang de tekst is. */
@media (max-width: 560px) {
  .toast {
    left: 16px; right: 16px;
    top: 72px; bottom: auto;
    max-width: none;
    transform: translateY(-20px);
  }
  .toast.show { transform: translateY(0); }
}

/* ========== FOOTER ========== */
.footer {
  background: var(--c-ink);
  color: #c0b9dd;
  padding: 0 0 36px;
  margin-top: 80px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: 56px 0 40px;
}
.footer .logo { color: #fff; }
@media (hover: hover) {
  .footer .logo:hover { color: var(--c-sun); }
}
.footer h4 {
  color: #fff;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 16px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer a { color: #c0b9dd; }
@media (hover: hover) {
  .footer a:hover { color: #fff; }
}
.footer p { font-size: .95rem; }
.footer__bar {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .86rem;
  color: #948cb8;
}
.footer__bar p { margin: 0; font-size: .86rem; }

@media (max-width: 880px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 540px) {
  .footer__grid { grid-template-columns: 1fr; }
}


/* ========== MARQUEE (festivalbanner) ========== */
.marquee {
  background: var(--c-cobalt);
  color: #fff;
  overflow: hidden;
  transform: rotate(-1.1deg) scale(1.02);
  padding: 16px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .02em;
  margin: -6px 0 10px;
  position: relative;
  z-index: 2;
}
.marquee__track {
  display: inline-flex;
  gap: 36px;
  white-space: nowrap;
  animation: marquee 26s linear infinite;
  will-change: transform;
  padding-right: 36px;
}
.marquee span { display: inline-flex; align-items: center; gap: 36px; }
.marquee i {
  font-style: normal;
  color: var(--c-sun);
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .hero__photo { animation: none; }
}

/* ========== SCROLL REVEALS ========== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s ease, transform .7s var(--ease-spring);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ========== MOBIELE BOEK-BALK ========== */
.bookbar {
  display: none;
  position: fixed;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 90;
  background: var(--c-paper);
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 32px -8px rgba(40,31,82,.35);
  /* Een pil in een pil: met een gelijke inzet aan alle kanten (10px) lopen de
     twee rondingen aan het rechteruiteinde naar elkaar toe en lijkt de knop
     tegen de rand geplakt, terwijl de tekst links 22px lucht had. Het uiteinde
     krijgt daarom iets meer ruimte dan de boven- en onderkant, en de tekstzijde
     iets minder, zodat beide einden even ruim ogen. */
  padding: 10px 15px 10px 20px;
  align-items: center;
  /* Gecentreerd in plaats van space-between. Met "Vanaf € 100,00 per dag" is de
     tekst maar 167px breed in een balk van 347px, en space-between duwde de knop
     naar de rechterrand: dat gaf een gat van 55px middenin de pil. Nu staan de
     tekst en de knop als één groep bij elkaar met de lucht netjes aan beide
     uiteinden. Is de tekst wél lang — op de boekingspagina staat er een bedrag
     met een tweede regel eronder — dan vult hij de balk en gedraagt centreren
     zich hetzelfde als space-between. */
  justify-content: center;
  column-gap: 24px;
  row-gap: 6px;
  /* Laatste redmiddel: past de knop er echt niet naast, dan zakt hij naar een
     eigen regel in plaats van dat er iets buiten de pil valt. */
  flex-wrap: wrap;
}
/* Hier stond `white-space: nowrap` met `text-overflow: ellipsis`, zodat de balk
   altijd één regel hoog bleef. Dat kapt een langere tekst af, en juist de prijs
   is de reden dat deze balk bestaat. Het Brabantse "Vanaf € 100,00 per daggie"
   liep op een telefoon van 360px vast: 190px tekst in 183px ruimte, dus
   verdween het laatste woord achter een ellips.

   De tekst mag nu doorlopen naar een tweede regel en breekt daarbij op een
   spatie: `word-break: normal` en `hyphens: none` houden woorden heel.
   `overflow-wrap: break-word` is het slot op de deur — dat grijpt alléén in bij
   een woord dat op zichzelf al breder is dan de ruimte die het krijgt. Zo'n
   woord past nergens en zou er anders buiten hangen; bij normale tekst gebeurt
   er niets.

   `min-width: 0` op het tekstvak blijft staan, en dat is minder tegenstrijdig
   dan het lijkt: het afkappen kwam van `overflow: hidden`, niet hiervan. Zonder
   deze regel groeit het tekstvak mee tot de breedte van zijn langste woord en
   duwt het zichzelf buiten de pil — dan heeft `break-word` niets om op in te
   grijpen. Mét deze regel krimpt het vak tot de ruimte die er is en breekt de
   tekst netjes af.

   Wordt de balk hierdoor hoger, dan volgt de onderruimte van de pagina
   automatisch via `--boekbalk-h` (zie `meetBoekbalk()` in main.js). */
.bookbar > div { min-width: 0; }
.bookbar strong {
  font-family: var(--font-display); font-size: 1.02rem;
  display: block;
  overflow-wrap: break-word; word-break: normal; hyphens: none;
  text-wrap: balance;
}
.bookbar small {
  display: block; color: var(--c-ink-soft); font-size: .8rem; margin-top: -3px;
  overflow-wrap: break-word; word-break: normal; hyphens: none;
}
.bookbar .btn {
  flex: 0 0 auto;
  padding: 11px 18px; font-size: .95rem;
  white-space: nowrap;
}
@media (max-width: 880px) {
  .bookbar { display: flex; }
  /* 84px was de hoogte van een balk van één regel plus lucht. Nu de balk
     hoger kan worden, komt de hoogte uit main.js; 68px is de terugval als
     JavaScript niet aan bod komt. */
  body.has-bookbar { padding-bottom: calc(var(--boekbalk-h, 68px) + 16px); }
}
/* Onder 400px is elke pixel er een. Met 24px tussenruimte en 20px links bleef
   er 183px over voor de tekst; met deze waarden 196px, genoeg om een label van
   normale lengte in beide talen op één regel te houden. Past het alsnog niet,
   dan breekt de tekst netjes af op een spatie — er valt niets weg. */
@media (max-width: 400px) {
  .bookbar { column-gap: 14px; padding-left: 16px; padding-right: 13px; }
}
/* Op een telefoon van 320px (iPhone SE van de eerste generatie en oude Androids)
   blijft er na de knop 159px over voor 167px tekst. Dan zakt de knop dankzij
   `flex-wrap` naar een eigen regel: niets valt weg, maar een pil van twee regels
   staat er onnodig log. Een tikje kleiner en het past weer op één regel. */
@media (max-width: 340px) {
  .bookbar strong { font-size: .95rem; }
  .bookbar .btn { padding: 11px 14px; font-size: .9rem; }
}


/* De swipebare kaartenrij (.grid--scroll) is vervallen. Met drie producten
   toonde die er op een telefoon maar één volledig; de andere twee zaten achter
   een zijwaartse veeg zonder zichtbare scrollbalk. Beide overzichten stapelen
   nu verticaal, zodat alles met de gewone scrollbeweging in beeld komt. */


/* ========== WOORDMERK-HEADLINE (home) ========== */
.hero__title {
  margin: 0 0 .4em;
  /* iets kleiner dan de oude kop: nu past "Springkussen huren?" op één regel,
     zodat de kop twee regels blijft in plaats van vier */
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.06;
}
.wordmark {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  /* compenseert de interne gel-marge van de svg (pad/viewBox = 4.2% links, ~15% onder) */
  margin: 0 0 0 -4.2%;
  margin-bottom: -4.6%;
  filter: drop-shadow(0 18px 22px rgba(40, 31, 82, .18));
  animation: inflate .9s var(--ease-spring) both;
  transform-origin: left center;
}
.hero__sub {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
@media (prefers-reduced-motion: reduce) {
  .wordmark { animation: none; }
}

/* ========== OPGEBLAZEN HEADLINE (oude tekstvariant) ========== */
@keyframes inflate {
  0%   { opacity: 0; transform: scale(.9); }
  100% { opacity: 1; transform: scale(1); }
}
.h1-balloon {
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1.1;
  color: var(--c-cobalt);
  text-shadow:
    0 1px 0 #4d21ab,
    0 2px 0 #4d21ab,
    0 3px 0 #471e9f,
    0 4px 0 #421c93,
    0 5px 0 #3d1a88,
    0 14px 26px rgba(40, 31, 82, .28);
  animation: inflate .9s var(--ease-spring) both;
  transform-origin: left center;
}
.h1-balloon em {
  font-style: normal;
  color: var(--c-sun);
  text-shadow:
    0 1px 0 #d9a300,
    0 2px 0 #d9a300,
    0 3px 0 #c99700,
    0 4px 0 #ba8c00,
    0 5px 0 #ab8000,
    0 14px 26px rgba(40, 31, 82, .28);
}
@media (prefers-reduced-motion: reduce) {
  .h1-balloon { animation: none; }
}


/* ========== TAALSCHAKELAAR (dialect) ========== */
.lang-switch {
  display: inline-flex;
  gap: 2px;
  background: var(--c-cream-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  padding: 3px;
  margin-left: 6px;
}
.lang-btn {
  position: relative;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .01em;
  color: var(--c-ink-soft);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .15s, color .15s;
}
@media (hover: hover) {
  .lang-btn:hover { color: var(--c-ink); }
}
/* De blokkenvlag van Noord-Brabant zat hier als streepje onder de knop
   'Brabants'. Die staat nu onder de kop in de hero — zie het einde van dit
   bestand. Dat de knop aan staat blijkt al uit het witte pilletje eronder. */

.lang-btn[aria-pressed="true"] {
  background: var(--c-paper);
  color: var(--c-cobalt-deep);
  box-shadow: var(--shadow-soft);
}
@media (max-width: 980px) {
  .lang-switch {
    margin: 10px 0 0;
    align-self: flex-start;
    padding: 4px;
  }
  .lang-btn { padding: 10px 16px; font-size: .92rem; }
}


/* ========== HERO-SCENE als POSTZEGEL ========== */
.hero-scene { position: relative; margin: 10px 6px; }

/* het witte "papier" van de postzegel */
.hero-scene__frame {
  background: #fff;
  padding: 13px;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop);
  /* speels iets naar rechts gekanteld */
  transform: rotate(1.8deg);
}
/* de illustratie binnen de zegel */
.hero-scene__art {
  border-radius: 6px;
  overflow: hidden;
  background: #eaf5fe;
}
.hero-scene__art svg { display: block; width: 100%; height: auto; }
.hero-scene__art { margin: 0; aspect-ratio: 1 / 1; }
.hero-scene__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* De hero-foto is een link naar het kussen dat erop staat. Met een naampje in
   de hoek, want zonder aanwijzing tikt niemand op een foto — en op een telefoon
   is er geen hover die het kan verklappen. */
.hero-scene__link {
  display: block; position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
}
/* De foto's liggen op elkaar en wisselen met een overvloeier. De eerste staat
   bovenop; de rest is doorzichtig tot hij aan de beurt is. */
.hero-scene__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease, transform .35s ease;
}
.hero-scene__foto.is-actief { opacity: 1; }
/* Eén foto moet de hoogte van het kader bepalen; de rest ligt eroverheen. */
.hero-scene__foto:first-of-type { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .hero-scene__foto { transition: none; }
}
.hero-scene__naam {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  background: var(--c-paper);
  box-shadow: var(--shadow-soft);
  color: var(--c-cobalt-deep);
  font-size: .82rem; font-weight: 700;
  white-space: nowrap;          /* naam en pijl horen op één regel */
  line-height: 1.2;
  transition: transform .2s ease;
}
@media (hover: hover) {
  .hero-scene__link:hover .hero-scene__foto { transform: scale(1.04); }
  .hero-scene__link:hover .hero-scene__naam { transform: translateX(3px); }
}
.hero-scene__link:focus-visible { outline: 3px solid var(--c-cobalt); outline-offset: 3px; }
/* Kort oplichten waar je geland bent na een sprong vanaf de homepage. */
.card--aangewezen {
  box-shadow: 0 0 0 3px var(--c-sun), var(--shadow-pop);
  transition: box-shadow .3s ease;
}
/* Ruimte voor de plakkende menubalk bij een sprong naar #<id>, ongeacht of de
   browser of onze eigen code scrollt. */
.card { scroll-margin-top: 84px; }
@media (max-width: 620px) { .card { scroll-margin-top: 76px; } }
@media (max-width: 620px) {
  .hero-scene__naam { left: 9px; bottom: 9px; padding: 6px 11px; font-size: .76rem; }
}

/* Gerafelde postzegelrand: uitsparingen zijn écht transparant, zodat de
   confettistippen van de hero-band erdoorheen blijven schijnen.
   Browsers zonder masker-ondersteuning houden simpelweg ronde hoeken. */
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {
  .hero-scene { filter: drop-shadow(0 16px 26px rgba(40, 31, 82, .26)); }
  .hero-scene__frame {
    --notch: 9px;
    --gap: 32px;
    border-radius: 0;
    box-shadow: none;
    -webkit-mask:
      radial-gradient(circle var(--notch) at 50% 0,    #0000 96%, #000) 0 0      / var(--gap) 100% round no-repeat,
      radial-gradient(circle var(--notch) at 50% 100%, #0000 96%, #000) 0 100%   / var(--gap) 100% round no-repeat,
      radial-gradient(circle var(--notch) at 0 50%,    #0000 96%, #000) 0 0      / 100% var(--gap) no-repeat round,
      radial-gradient(circle var(--notch) at 100% 50%, #0000 96%, #000) 100% 0   / 100% var(--gap) no-repeat round;
    -webkit-mask-composite: source-in;
    mask:
      radial-gradient(circle var(--notch) at 50% 0,    #0000 96%, #000) 0 0      / var(--gap) 100% round no-repeat,
      radial-gradient(circle var(--notch) at 50% 100%, #0000 96%, #000) 0 100%   / var(--gap) 100% round no-repeat,
      radial-gradient(circle var(--notch) at 0 50%,    #0000 96%, #000) 0 0      / 100% var(--gap) no-repeat round,
      radial-gradient(circle var(--notch) at 100% 50%, #0000 96%, #000) 100% 0   / 100% var(--gap) no-repeat round;
    mask-composite: intersect;
  }
}
@media (max-width: 640px) {
  .hero-scene__frame { padding: 9px; --notch: 6px; --gap: 22px; }
}

/* --- rustig springen: alleen de BINNENSTE groep animeert --- */
.hv .kidhop{transform-box:fill-box;transform-origin:center bottom}
.hv .jumpA{animation:hop 1.6s ease-in-out infinite}
.hv .jumpB{animation:hop 1.6s ease-in-out infinite .55s}
.hv .jumpC{animation:hop 1.6s ease-in-out infinite 1s}
@keyframes hop{
  0%,100%{transform:translateY(0) scaleY(1)}
  16%{transform:translateY(2px) scaleY(.96)}
  50%{transform:translateY(-26px) scaleY(1.03)}
  84%{transform:translateY(2px) scaleY(.97)}
}
.hv .kidshadow{transform-box:fill-box;transform-origin:center}
.hv .jumpAsh{animation:shd 1.6s ease-in-out infinite}
.hv .jumpBsh{animation:shd 1.6s ease-in-out infinite .55s}
.hv .jumpCsh{animation:shd 1.6s ease-in-out infinite 1s}
@keyframes shd{0%,100%{transform:scaleX(1);opacity:.15}50%{transform:scaleX(.66);opacity:.07}}

.hv .castle{transform-box:fill-box;transform-origin:center bottom;animation:breathe 3.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012)}}

.hv .sunrays{animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.hv .flag{animation:flutter 1.7s ease-in-out infinite}
@keyframes flutter{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

.hv .cloudA{animation:drift 32s ease-in-out infinite}
.hv .cloudB{animation:drift 40s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateX(-20px)}50%{transform:translateX(20px)}}

@media(prefers-reduced-motion:reduce){.hv *{animation:none!important}}


/* ========== POSTZEGELRAND op de paarse band ========== */
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {
  .marquee {
    --notch: 5px;
    --gap: 26px;
    -webkit-mask:
      radial-gradient(circle var(--notch) at 50% 0,    #0000 96%, #000) 0 0      / var(--gap) 100% round no-repeat,
      radial-gradient(circle var(--notch) at 50% 100%, #0000 96%, #000) 0 100%   / var(--gap) 100% round no-repeat;
    -webkit-mask-composite: source-in;
    mask:
      radial-gradient(circle var(--notch) at 50% 0,    #0000 96%, #000) 0 0      / var(--gap) 100% round no-repeat,
      radial-gradient(circle var(--notch) at 50% 100%, #0000 96%, #000) 0 100%   / var(--gap) 100% round no-repeat;
    mask-composite: intersect;
  }
}
@media (max-width: 640px) {
  .marquee { --notch: 4px; --gap: 20px; padding: 14px 0; }
}

/* ==========================================================================
   KUSSENS ALS TEGELS OP EEN TELEFOON
   Eén kaart besloeg 537px van een scherm van 812: anderhalve kaart per beeld,
   en drie kussens kostten ruim vier schermen scrollen. Wie scrollt wil eerst
   zien wát er is, met de maat en de prijs erbij; de omschrijving, de leeftijd
   en de eerste vrije dag staan in het venster dat je opent. Twee kolommen dus,
   met kleinere type en minder lucht binnen de tegel — maar dezelfde kaart, dus
   nieuwe kussens komen er vanzelf goed bij te staan.
   ========================================================================== */
@media (max-width: 620px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }

  /* Is het aantal oneven, dan zou de laatste tegel alleen naast een leeg vak
     staan. Die laat we over de volle breedte lopen met een bredere uitsnede:
     dat sluit de rij rustig af en geeft het overzicht ritme. Bij een even
     aantal kussens gebeurt dit vanzelf niet meer. */
  .grid .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grid .card:last-child:nth-child(odd) .card__media { aspect-ratio: 16 / 7; }

  /* Behalve de teasertegel: die moet juist even groot blijven als een
     kussentegel — dat is de hele reden dat hij geen breed blok meer is. De lege
     plek ernaast leest hier niet als een fout maar als de ruimte die nog
     gevuld gaat worden. Zelfde gewicht als de regel hierboven, dus de volgorde
     beslist: deze moet erna staan. */
  .grid .card--binnenkort:last-child:nth-child(odd) { grid-column: auto; }
  .grid .card--binnenkort:last-child:nth-child(odd) .card__media { aspect-ratio: 4 / 3; }

  .card { border-radius: var(--radius-m); }
  .card .card__media { aspect-ratio: 4 / 3; }
  .card .card__body { padding: 10px 12px 12px; gap: 3px; }

  /* Hier stond twee regels ruimte voor de naam, ook als hij korter was, zodat de
     maat op beide tegels op dezelfde hoogte stond. Dat gaf een gat onder elke
     korte naam — en het was niet nodig: de prijs en de knop staan al gelijk
     doordat de prijs met margine-auto naar de onderkant van de tegel wordt
     geduwd. De naam neemt nu de ruimte die hij nodig heeft en de maat sluit er
     direct op aan. De klem op twee regels blijft: een lange naam mag geen derde
     regel pakken. */
  .card .card__title {
    font-size: .96rem;
    line-height: 1.22;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Wat hier niet hoort: de omschrijving, de leeftijd, de tuinmaat, de eerste
     vrije dag en de deelknoppen over de foto. Dat is informatie voor het moment
     dat je een kussen gekozen hebt, niet voor het scrollen. */
  .card .card__vrij,
  .card .card__omschrijving,
  .card__meta span.card__meta-leeftijd,
  .card__meta span.card__meta-tuin,
  .card .deel-over { display: none; }

  .card .card__meta { gap: 6px; font-size: .78rem; }
  .card .card__meta svg { width: 13px; height: 13px; }

  /* Prijs klein en rustig: alle kussens kosten hetzelfde, dus een groot bedrag
     op elke tegel voegt niets toe en maakt het overzicht juist onrustiger. */
  .card .card__price { padding-top: 3px; }
  .card .card__price strong { font-size: 1.02rem; }
  .card .card__price span { font-size: .72rem; }

  .card .card__cta { margin-top: 7px; }
  .card__cta .btn {
    min-width: 100%;
    font-size: .82rem;
    padding: 8px 10px;
    min-height: 40px;
    height: 40px;
  }


  /* ---------- De kop compacter, zodat je de kussens ziet ----------
     De kop, de tussenzin en de filterbalk kostten samen 404px: je zag net de
     bovenkant van de eerste rij. Op een telefoon telt elke pixel boven de
     eerste tegel; op een breed scherm blijft de kop staan zoals hij is. */
  #assortiment { padding-top: 30px !important; padding-bottom: 26px !important; }
  #assortiment > .container > h1 { margin-top: 0 !important; font-size: 1.72rem; }
  #assortiment > .container > .lead { font-size: 1rem; margin-bottom: 0; }
  #assortiment .filter-bar { margin-top: 16px !important; }

  /* ---------- Balk onderaan op de assortimentspagina ----------
     Met een lege boeking zei die balk "Vanaf € 100,00 per dag — Kies een
     kussen", terwijl je precies daar naar de kussens kijkt. De knop duwde de
     tekst zelfs weg ("Vanaf € 100,00 per …"). Zodra er wél iets in de boeking
     staat, is de balk nuttig en verschijnt hij weer: dat zet .heeft-boeking. */
  body.op-assortiment .bookbar { display: none; }
  body.op-assortiment.heeft-boeking .bookbar { display: flex; }


  /* ---------- "per dag" achter het bedrag, op dezelfde regel ----------
     De dagprijs stond onder het bedrag op een eigen regel, wat een hele regel
     kostte in een blok dat op een telefoon toch al lang is. Nu loopt hij achter
     het bedrag mee, kleiner en gedempt zodat het bedrag het bedrag blijft. */
  .cart-row .cart-row__perdaglabel {
    display: inline;
    text-align: left;
    font-size: .74rem;
    color: var(--c-ink-soft);
  }

  /* ---------- Inleidende zin kleiner ----------
     "Controleer de springkussens en de gekozen datum…" nam op 18px drie regels
     en met de marge 125px van het eerste beeld — voor één zin die je één keer
     leest. De kussens en de eerste actie komen daarmee 60px eerder in beeld. */
  .cart-page .lead,
  .checkout-page .lead {
    font-size: .95rem;
    line-height: 1.5;
    margin-bottom: 20px !important;   /* de 36px staat in de HTML zelf */
  }

  /* ---------- Balk met de volgende stap op de boekingspagina ----------
     Vanaf het vinkje bij de kabelhaspel lag de knop 737px verderop: je vinkt
     iets aan en ziet niet wat er nu moet gebeuren. Deze balk staat altijd in
     beeld en biedt telkens de eerstvolgende handeling: eerst de postcode
     (anders is er geen totaal te tonen), daarna doorgaan naar betalen. */

  /* Het label boven de tegel blijft klein: het is een merkje, geen kop. */
  .card .card__tag { top: 8px; left: 8px; font-size: .66rem; padding: 3px 9px; }
}

/* De balk op de boekingspagina volgt hetzelfde omslagpunt als de andere balken
   (880px) en verschijnt alleen als er iets in de boeking staat. Staat er niets,
   dan zou hij een leeg totaal en een dode knop tonen. */
@media (max-width: 880px) {
  .bookbar--boeking { display: none; }
  body.heeft-boeking .bookbar--boeking { display: flex; }
}

/* ==========================================================================
   BOEKINGSPAGINA OP EEN TELEFOON: ÉÉN BLOK IN PLAATS VAN TWEE
   Op een breed scherm staan de kaart en het overzicht naast elkaar; daar vullen
   ze elkaar aan. Op een telefoon staan ze ónder elkaar en las je dezelfde
   bedragen twee keer op één scherm: de meerdaagse korting en de gekozen optie
   stonden in beide blokken. Daarom doet hier elk deel één ding:

     de kaart  = WAT je boekt en wat je nog kunt wijzigen (dagen, extra's)
     eronder   = WAT HET KOST, in één opsomming, met één uitlijning

   De twee sluiten op elkaar aan als één kader, zodat het ook één geheel oogt.
   ========================================================================== */
@media (max-width: 880px) {
  .cart-grid { gap: 0; }
  .cart-table { gap: 12px; }

  /* De laatste kaart en het overzicht vormen samen één kader. */
  .cart-table .cart-row:last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
  }
  .summary {
    position: static;
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-top: 1px dashed var(--c-line);
    border-radius: 0 0 var(--radius-l) var(--radius-l);
    padding: 6px 14px 18px;
  }

  /* "Overzicht" wordt een sectiekopje in dezelfde stijl als GEKOZEN DAGEN en
     EXTRA'S in de kaart erboven: het is nu een onderdeel van hetzelfde blok. */
  .summary > h3 {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--c-ink-soft);
    margin: 12px 0 4px;
  }

  /* Geen bedragen meer in de kaart zelf: dagprijs, meerdaagse korting, gekozen
     optie en het kussentotaal stonden hier én in de opsomming eronder. Wat je
     per dag betaalt, blijkt uit "2 huurdagen — € 200,00" daar. */
  .cart-row .cart-row__perdag,
  .cart-row .cart-row__korting,
  .cart-row .cart-row__gekozen,
  .cart-row .cart-row__totaal { display: none; }

  /* De scheiding die aan de dagprijsregel hing, hoort nu boven de extra's. */
  .cart-row .cart-row__opties {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--c-line);
  }

  /* Eén lettergrootte en één uitlijning voor alle geldregels: label links,
     bedrag rechts, gelijk aan de tekstmaat in de kaart erboven. */
  .summary__line { font-size: .88rem; padding: 6px 0; }
  /* De totaalregel heet .summary__total en houdt zijn eigen, zwaardere maat. */

  /* "2 huurdagen" achter de naam op dezelfde regel in plaats van eronder. Alleen
     de eerste toelichting: op de afrekenpagina staan er drie onder een kussen
     (dagen, datums, gekozen optie) en die achter elkaar met puntjes wordt één
     lange dooreenloop. Harde spaties rond het puntje, want een gewone spatie
     aan het eind van een content-tekst valt weg. De maat van een optie krijgt
     geen puntje: "Kabelhaspel · (ca. 25 meter)" leest als twee losse dingen. */
  .summary__omschrijving small:first-of-type:not(.optie__maat) { display: inline; }
  .summary__omschrijving small:first-of-type:not(.optie__maat)::before { content: "\00a0\00b7\00a0"; }

  /* Geen bedrag naast het kussen in de opsomming: die € 220,00 (netto, met optie)
     stond naast de € 200,00 (bruto) eronder, en dat leest als twee prijzen voor
     hetzelfde kussen. Wat je boekt staat hier; wat het kost staat eronder — net
     als op de boekingspagina. */
  .js-checkout-page .summary__line--kussen .summary__bedrag { display: none; }
}

/* ==========================================================================
   AFREKENPAGINA IN DEZELFDE VORM ALS DE BOEKINGSPAGINA (telefoon)
   Op de boekingspagina staat alles in één wit kader met kleine kapitaaltjes als
   sectiekopjes en één tekstmaat. De afrekenpagina had daarnaast grote koppen
   (29px en 19,5px), een label van 14,7px en geen kader — twee stappen in één
   proces die niet op elkaar leken. Hier trekken we dat gelijk.

   Wat NIET meekrimpt: de invoervelden zelf. Die blijven 16px met een hoogte van
   49px. Onder 16px zoomt iOS bij het aantikken van een veld automatisch in, en
   een kleiner raakvlak maakt invullen op een telefoon juist lastiger.
   ========================================================================== */
@media (max-width: 880px) {
  /* Het overzicht staat hier bovenaan en het formulier eronder; samen één kader.
     Op de boekingspagina is het andersom, vandaar de paginagebonden selectors. */
  .js-checkout-page .summary {
    border: 1px solid var(--c-line);
    border-bottom: none;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    padding: 0;
  }
  .js-checkout-form {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-top: 1px dashed var(--c-line);
    border-radius: 0 0 var(--radius-l) var(--radius-l);
    padding: 14px 14px 18px;
  }
  .samenvatting__inhoud { padding: 0 14px 14px; }

  /* Sectiekopjes als kleine kapitaaltjes, gelijk aan GEKOZEN DAGEN en EXTRA'S.
     De marges staan in de HTML zelf, vandaar !important. */
  .js-checkout-form h2,
  .js-checkout-form h3 {
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--c-ink-soft);
    margin: 20px 0 8px !important;
  }
  .js-checkout-form > h2:first-child { margin-top: 2px !important; }

  /* Eén tekstmaat voor de labels, gelijk aan de tekst in de kaart. */
  .js-checkout-form .field > label { font-size: .88rem; }

  /* Eén afstand tussen de velden. Ruimer dan de regels in het overzicht, want
     hier moet een vinger een veld raken. */
  .js-checkout-form .field { margin-bottom: 14px; }
  .js-checkout-form .field-row { gap: 0 12px; }

  /* Uitdrukkelijk vastzetten: de velden mogen niet meekrimpen met de rest. */
  .js-checkout-form .field input,
  .js-checkout-form .field select,
  .js-checkout-form .field textarea { font-size: 16px; min-height: 48px; }
  .js-checkout-form .field textarea { min-height: 84px; }
}

/* ---------- Overzicht bij afrekenen: uitklapbaar op een telefoon ----------
   De kop toont de titel en het totaal, zodat je zonder uitklappen weet waar je
   aan toe bent. Uitgeklapt staat de hele opbouw eronder. Op een breed scherm
   zet JavaScript hem open en verdwijnt het pijltje: daar is het geen uitklapper
   maar gewoon het overzicht naast het formulier. */
.samenvatting__kop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}
.samenvatting__kop::-webkit-details-marker { display: none; }
.samenvatting__titel {
  font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-ink-soft);
}
.samenvatting__bedrag {
  font-family: var(--font-display);
  font-size: 1.02rem;
  display: inline-flex; align-items: center; gap: 8px;
}
/* Het pijltje draait mee met open en dicht. */
.samenvatting__bedrag::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid var(--c-ink-soft);
  border-bottom: 2px solid var(--c-ink-soft);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.samenvatting[open] .samenvatting__bedrag::after { transform: rotate(-135deg) translateY(-2px); }
.samenvatting__kop:focus-visible { outline: 2px solid var(--c-cobalt); outline-offset: -2px; }

@media (min-width: 881px) {
  /* Formulier links, overzicht rechts — ook al staat het overzicht eerst in de
     HTML omdat het op een telefoon bovenaan hoort. */
  .js-checkout-page .cart-grid > .js-checkout-form { order: 1; }
  .js-checkout-page .cart-grid > .summary { order: 2; }
  /* Geen uitklapper op een breed scherm: kop als gewoon kopje, pijltje weg. */
  .samenvatting__kop { padding: 0 0 6px; cursor: default; }
  .samenvatting__titel { font-size: 1.18rem; text-transform: none; letter-spacing: 0; color: var(--c-ink); }
  .samenvatting__bedrag { display: none; }
}

/* ==========================================================================
   AGENDAVENSTER OP EEN TELEFOON: MINDER UITLEG, MEER KUSSEN
   Twee legendaregels verdwijnen hier. "Bijzondere dag" is niet nodig: welke dag
   bijzonder is én waaróm staat als chip onder de agenda, en dat is concreter dan
   een bolletje met een woord. En de meerdaagse korting zie je gebeuren in de
   knop (het volle bedrag doorgestreept naast het nieuwe), dus die hoeft niet ook
   nog aangekondigd te worden.

   Dat levert 22px op: 14 daarvan gaan naar de foto (200 → 214px, je ziet meer van
   het kussen dat je boekt) en 5 naar ruimte boven de agenda. De rest blijft over,
   zodat het venster nog steeds in één beeld past zonder te scrollen.
   ========================================================================== */
@media (max-width: 620px) {
  .cal__legend .bijzonder,
  .cal__staffel { display: none; }

  .modal--product .gal__slide,
  .modal--product .modal__media > img { height: 214px; }

  /* De lucht komt tussen de legenda en het raster, niet tussen de rijen: een
     grotere rijafstand kost hoogte die het venster niet heeft (het loopt tegen
     een maximum aan), en een grotere kolomafstand zou de dagvakjes juist kleiner
     maken. Zo staat de agenda vrijer zonder dat er iets krimpt of gaat scrollen. */
  .modal--product .cal__legend { margin-bottom: 12px; }

  /* De laatste zeven pixels komen uit de marge boven "Over dit springkussen".
     Dat was dode ruimte tussen de agenda en een ingeklapte regel; de foto en de
     agenda houden hun winst en het venster past weer in één beeld. */
  .modal--product .modal__meer { margin-top: 7px; }
  .modal--product .modal__main { padding-bottom: 10px; }
}

/* ==========================================================================
   GEEN AUTOMATISCHE ZOOM BIJ HET AANTIKKEN VAN EEN VELD
   Safari op iPhone en iPad zoomt de pagina in zodra je een invoerveld aantikt
   waarvan de tekst kleiner is dan 16px — en zoomt daarna niet terug uit. Je zit
   dan met een ingezoomde pagina die je zelf moet terugpinchen.

   Dat gebeurde bij het kortingscodeveld en bij het postcodeveld (beide 14,7px).
   Op de afrekenpagina stond het al goed; hier staan alle velden op 16px, in één
   regel voor de hele site zodat een nieuw veld dit probleem niet opnieuw kan
   introduceren. Alleen tot 1024px: op een desktopbrowser bestaat dit gedrag niet
   en blijven de bestaande maten intact.
   ========================================================================== */
@media (max-width: 1024px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  /* Deze twee er expliciet bij: `.field select, .field textarea` zet elders
     0,95rem en dat weegt zwaarder dan een kale elementregel. Zonder deze regel
     bleven het onderwerp-menu en het berichtveld op het contactformulier op
     15,2px staan — en dus inzoomen. */
  .field select,
  .field textarea { font-size: 16px; }
}

/* Het witte kader met de geboekte kussens op de herstelpagina. Op de
   bevestigingspagina staat dat kader met een inline stijl in de HTML; hier is het
   een klasse, zodat beide er hetzelfde uitzien zonder die stijl te herhalen. */
.confirm__blok {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  padding: 20px 22px;
  text-align: left;
  max-width: 520px;
  margin: 22px auto 0;
}


/* ========== FOOTERRAND MET SILHOUETTEN ==========
   Een band boven de footer waarin negen figuren uit de footerkleur omhoog
   komen: giraffe, leeuw, clown, dino, dolfijn, aap, eenhoorn, prinses en
   piraat. De golf onderaan is de bovenrand van de footer geworden en heeft de
   oude schulprand vervangen — twee randen op elkaar zou een crème naad tussen
   de golf en de footer geven.

   De band is decoratief: aria-hidden, geen tekst, geen links, niet in de
   tabvolgorde. Alles is CSS en transform, dus het draait op de GPU en kost
   geen extra request. Eén ronde duurt 20 seconden; de figuren komen na elkaar
   in beweging, van links naar rechts. Wie beweging heeft uitgezet in zijn
   systeem ziet ze stilstaan (de globale reduced-motion-regel bovenaan dit
   bestand zet alle animaties uit; de dolfijn krijgt hieronder zijn scheve
   sprongstand terug, want die zat in de 0%-stap van zijn keyframe).

   De klassen hebben allemaal een ls- prefix, dus ze kunnen niet botsen met de
   rest van de site. Elk figuur is één <svg> met eigen viewBox: weglaten of
   vervangen kan zonder de andere aan te raken — herverdeel dan wel de
   left-percentages. */

/* De figuren stonden in het aangeleverde bestand op vaste left-percentages.
   Dat gaat goed op één breedte, maar hun eigen breedte is in pixels: rond de
   1000px liepen dino, dolfijn en aap over elkaar heen en werd de sabel van de
   piraat door de rechterrand afgesneden. Vandaar space-between: de tussenruimte
   verdeelt zich dan zelf en de figuren kunnen elkaar op geen enkele breedte
   raken. Het beeld op ruime schermen blijft hetzelfde — de percentages stonden
   toch al op gelijke afstand. */
.ls-rand {
  position: relative;
  height: 172px;
  margin-top: 64px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 12px;
  /* Alles onder de footerlijn wordt weggesneden. Dat is er voor de dolfijn: die
     duikt ver door om helemaal onder water te komen — hij is ruim 150px lang, dus
     hij moet dieper zakken dan de 56px lucht die er bovenin de footer zit. Zonder
     dit zou hij over het logo en de kolommen schuiven. De marge van -1px sluit
     het laatste haartje tussen de golf en de footer. */
  overflow: hidden;
  margin-bottom: -1px;
}
/* De footer had zelf 80px marge naar boven. Die ruimte zit nu in .ls-rand, en
   de golf moet strak tegen de footer aan sluiten, dus hier geen marge meer. */
.ls-rand + .footer { margin-top: 0; }

.ls-figuur { display: block; position: relative; width: auto; flex: 0 0 auto; fill: var(--c-ink, #281f52); }
.ls-ln { fill: none; stroke: var(--c-ink, #281f52); stroke-linecap: round; }
.ls-golf { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 30px; z-index: 2; }

/* ---------- maten ---------- */
.ls-f-giraf    { height: 134px; }
.ls-f-leeuw    { height:  92px; }
.ls-f-clown    { height: 108px; }
.ls-f-dino     { height:  96px; }
/* De dolfijn staat niet op de grond: hij hangt schuin in de golf, met zijn
   snuit omhoog boven water en de rest eronder. Wat onder de golf komt is niet te
   zien — de golf ligt eroverheen (z-index 2) en wat nog dieper gaat wordt door de
   band afgesneden. Vandaar de negatieve ondermarge: die duwt hem het water in. */
.ls-f-dolfijn  { height:  58px; margin-bottom: -20px; }
.ls-f-aap      { height:  88px; }
.ls-f-eenhoorn { height: 126px; }
.ls-f-prinses  { height: 106px; }
.ls-f-piraat   { height: 112px; }
.ls-rand .ls-f-piraat { transform: rotate(2deg); }

/* ---------- de beweging ---------- */
.ls-rand [class*="ls-deel-"] { transform-box: view-box; }

@keyframes ls-nek-strekken {
  0%   { transform: rotate(0); }
  3%   { transform: rotate(-9deg); }
  6%   { transform: rotate(5deg); }
  9%   { transform: rotate(-2deg); }
  11%, 100% { transform: rotate(0); }
}
@keyframes ls-kop-brullen {
  0%   { transform: rotate(0); }
  3%   { transform: rotate(-6deg); }
  8%   { transform: rotate(-6deg); }
  11%, 100% { transform: rotate(0); }
}
@keyframes ls-kaak-open {
  0%   { transform: rotate(0); }
  3%   { transform: rotate(15deg); }
  8%   { transform: rotate(15deg); }
  11%, 100% { transform: rotate(0); }
}
@keyframes ls-clown-veren {
  0%   { transform: translateY(0); }
  3%   { transform: translateY(5px); }
  7%   { transform: translateY(-5px); }
  11%, 100% { transform: translateY(0); }
}
@keyframes ls-dino-rennen {
  0%   { transform: translate(0, 0); }
  3%   { transform: translate(7px, -3px); }
  6%   { transform: translate(12px, 0); }
  9%   { transform: translate(5px, -2px); }
  11%, 100% { transform: translate(0, 0); }
}
@keyframes ls-been-heen {
  0%   { transform: rotate(0); }
  2%   { transform: rotate(-18deg); }
  4%   { transform: rotate(14deg); }
  6%   { transform: rotate(-18deg); }
  8%   { transform: rotate(12deg); }
  11%, 100% { transform: rotate(0); }
}
@keyframes ls-been-terug {
  0%   { transform: rotate(0); }
  2%   { transform: rotate(16deg); }
  4%   { transform: rotate(-16deg); }
  6%   { transform: rotate(16deg); }
  8%   { transform: rotate(-12deg); }
  11%, 100% { transform: rotate(0); }
}
/* De dolfijn ligt in ruststand met zijn snuit schuin omhoog boven water; de rest
   van hem zit in de footer. Hij schiet omhoog, draait in één doorgaande boog met
   de klok mee over zijn hoogste punt, en duikt er aan de andere kant helemaal in.
   Daarna komt hij onder water terug naar zijn ruststand — daar is hij niet te
   zien, dus dat mag rustig.

   Twee dingen maken de boog vloeiend. De stappen liggen dicht bij elkaar, en de
   tijdfunctie staat op linear: met de standaard 'ease' remt en versnelt hij bij
   élke stap, en dat is precies wat het onrustig maakte. De sprong staat in
   procenten van zijn eigen hoogte, zodat hij op een telefoon meeschaalt. */
@keyframes ls-dolfijn-boog {
  0%    { transform: translateY(0)     rotate(-42deg); }
  1%    { transform: translateY(-40%)  rotate(-36deg); }
  2%    { transform: translateY(-72%)  rotate(-28deg); }
  3%    { transform: translateY(-95%)  rotate(-20deg); }
  4.5%  { transform: translateY(-110%) rotate(-8deg); }
  6%    { transform: translateY(-110%) rotate(8deg); }
  7.5%  { transform: translateY(-95%)  rotate(20deg); }
  8.5%  { transform: translateY(-72%)  rotate(28deg); }
  9.5%  { transform: translateY(-40%)  rotate(36deg); }
  10.5% { transform: translateY(0)     rotate(44deg); }
  11.5% { transform: translateY(60%)   rotate(50deg); }
  /* Vanaf hier is hij onder water. Schuin staat hij hoger in zijn eigen kader dan
     vlak, dus hij moet net wat verder zakken dan je zou denken om ook met zijn
     staart onder de golf te komen. */
  13%   { transform: translateY(170%)  rotate(56deg); }
  16%   { transform: translateY(185%)  rotate(20deg); }
  19%   { transform: translateY(185%)  rotate(-20deg); }
  21%   { transform: translateY(165%)  rotate(-42deg); }
  29%, 100% { transform: translateY(0) rotate(-42deg); }
}
@keyframes ls-aap-wippen {
  0%   { transform: translateY(0) scaleY(1); }
  1%   { transform: translateY(0) scaleY(.93); }
  4%   { transform: translateY(-28px) scaleY(1.03); }
  7%   { transform: translateY(0) scaleY(.95); }
  9%   { transform: translateY(0) scaleY(1); }
  11%, 100% { transform: translateY(0) scaleY(1); }
}
/* De eenhoorn is in de HTML gespiegeld — hij kijkt nu naar links, zodat de
   giraffe, de dino en de eenhoorn niet alle drie dezelfde kant op staan. Daarmee
   draait ook zijn steigeren om: het draaipunt zijn de achterbenen, die nu rechts
   staan, en om zijn kop te heffen moet hij met de klok mee. */
@keyframes ls-eenhoorn-steigeren {
  0%   { transform: rotate(0); }
  3%   { transform: rotate(15deg); }
  7%   { transform: rotate(17deg); }
  11%, 100% { transform: rotate(0); }
}
@keyframes ls-arm-zwaaien {
  0%   { transform: rotate(0); }
  2%   { transform: rotate(-24deg); }
  4%   { transform: rotate(-6deg); }
  6%   { transform: rotate(-24deg); }
  8%   { transform: rotate(-6deg); }
  11%, 100% { transform: rotate(0); }
}
@keyframes ls-sabel-zwaaien {
  0%   { transform: rotate(0); }
  2%   { transform: rotate(-18deg); }
  4%   { transform: rotate(16deg); }
  6%   { transform: rotate(-18deg); }
  8%   { transform: rotate(12deg); }
  11%, 100% { transform: rotate(0); }
}
@keyframes ls-jongleer-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes ls-jongleer-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-19px); } }
@keyframes ls-jongleer-c { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }

.ls-rand .ls-f-giraf .ls-deel-nek      { transform-origin:  70px  90px; animation: ls-nek-strekken       20s  0.0s infinite; }
.ls-rand .ls-f-leeuw .ls-deel-kop      { transform-origin: 120px 100px; animation: ls-kop-brullen        20s  2.2s infinite; }
.ls-rand .ls-f-leeuw .ls-deel-kaak     { transform-origin:  60px  96px; animation: ls-kaak-open          20s  2.2s infinite; }
.ls-rand .ls-f-clown                   {                                animation: ls-clown-veren        20s  4.4s infinite; }
.ls-rand .ls-f-clown .ls-deel-bal-a    {                                animation: ls-jongleer-a        2.2s -0.0s ease-in-out infinite; }
.ls-rand .ls-f-clown .ls-deel-bal-b    {                                animation: ls-jongleer-b        1.8s -0.7s ease-in-out infinite; }
.ls-rand .ls-f-clown .ls-deel-bal-c    {                                animation: ls-jongleer-c        2.6s -1.3s ease-in-out infinite; }
.ls-rand .ls-f-dino                    {                                animation: ls-dino-rennen        20s  6.6s infinite; }
.ls-rand .ls-f-dino .ls-deel-been-a    { transform-origin: 104px 142px; animation: ls-been-heen          20s  6.6s infinite; }
.ls-rand .ls-f-dino .ls-deel-been-b    { transform-origin: 130px 142px; animation: ls-been-terug         20s  6.6s infinite; }
/* backwards: zonder dat staat de dolfijn de eerste seconden na het laden nog
   recht en boven water, want tijdens de wachttijd van een animatie geldt de
   0%-stap nog niet. linear: zie de uitleg bij het keyframe. */
.ls-rand .ls-f-dolfijn                 {                                animation: ls-dolfijn-boog       20s  8.8s infinite backwards linear; }
.ls-rand .ls-f-aap                     { transform-origin: 50% 100%;    animation: ls-aap-wippen         20s 11.0s infinite; }
/* gespiegeld, dus de achterbenen zitten nu op 69% in plaats van 32% */
.ls-rand .ls-f-eenhoorn                { transform-origin: 69% 100%;    animation: ls-eenhoorn-steigeren 20s 13.2s infinite; }
.ls-rand .ls-f-prinses .ls-deel-arm    { transform-origin:  96px  86px; animation: ls-arm-zwaaien        20s 15.4s infinite; }
.ls-rand .ls-f-piraat  .ls-deel-arm    { transform-origin: 112px 132px; animation: ls-sabel-zwaaien      20s 17.6s infinite; }

@media (prefers-reduced-motion: reduce) {
  .ls-rand * { animation: none !important; }
  /* De ruststand van de dolfijn zit in de 0%-stap van zijn keyframe; zonder
     animatie zou hij recht boven het water hangen. */
  .ls-rand .ls-f-dolfijn { transform: rotate(-42deg); }
}

/* Negen figuren op volle hoogte vragen samen ruim 1000px; onder de 1180 wordt
   de tussenruimte te krap en gaan ze kleiner. */
@media (max-width: 1180px) {
  .ls-rand { height: 130px; margin-top: 48px; }
  .ls-f-giraf    { height: 96px; }
  .ls-f-leeuw    { height: 66px; }
  .ls-f-clown    { height: 78px; }
  .ls-f-dino     { height: 69px; }
  .ls-f-dolfijn  { height: 44px; margin-bottom: -15px; }
  .ls-f-aap      { height: 63px; }
  .ls-f-eenhoorn { height: 91px; }
  .ls-f-prinses  { height: 76px; }
  .ls-f-piraat   { height: 81px; }
}

/* Welke figuren er op een smal scherm staan, kiest main.js: bij elke
   paginaovergang hussel hij de rij en neemt hij er zoveel als er passen, zodat
   je niet altijd dezelfde tegenkomt. Deze twee regels zijn de terugval voor als
   dat script niet draait — dan gaan leeuw, dolfijn en prinses eruit op een
   tablet, en blijven er op een telefoon vier over. */
@media (max-width: 880px) {
  .ls-weg-op-smal { display: none; }
}

@media (max-width: 680px) {
  /* Op een telefoon staan er een paar, dus mogen ze wat groter. Alle negen
     hebben hier een maat, want main.js kan ze allemaal kiezen. */
  .ls-rand { height: 118px; margin-top: 32px; padding: 0 4px; }
  .ls-golf { height: 22px; }
  .ls-weg-op-mobiel { display: none; }
  .ls-f-giraf    { height: 88px; }
  .ls-f-leeuw    { height: 60px; }
  .ls-f-clown    { height: 71px; }
  .ls-f-dino     { height: 63px; }
  .ls-f-dolfijn  { height: 38px; margin-bottom: -13px; }
  .ls-f-aap      { height: 58px; }
  .ls-f-eenhoorn { height: 83px; }
  .ls-f-prinses  { height: 70px; }
  .ls-f-piraat   { height: 74px; }
}


/* ========== BRABANTSE VLAG ONDER DE HERO-KOP ==========
   Staat de site op Brabants, dan wordt het gele streepje onder 'Zonder gedoe
   geregeld.' de blokkenvlag van Noord-Brabant: rood en wit om en om, in twee
   rijen blokjes. Zo zie je in de kop zelf dat de site is omgezet, in plaats van
   in een streepje onder een knop in de balk.

   De maat staat in em, dus hij groeit mee met de kop: op mobiel en op desktop
   dezelfde verhouding, zonder aparte regels. Het tegeltje is 0,4em hoog en 'auto'
   breed — de svg is vierkant, dus even breed als hoog — waardoor de blokjes 0,2em
   worden. Een dunner streepje leest niet als de vlag maar als een stippellijn:
   daar zijn de blokjes te klein voor. repeat-x, want er hoort één strook te
   staan en niet een heel veld.

   Bewust een streepje onder de tekst en geen vlak erachter: donkere letters op
   dat rood halen geen leesbaar contrast. */
html[data-lang="brab"] .hero h1 .underline {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Crect width='8' height='8' fill='%23ffffff'/%3E%3Crect width='4' height='4' fill='%23c8102e'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23c8102e'/%3E%3C/svg%3E");
  background-size: auto 0.4em;
  background-repeat: repeat-x;
  background-position: 0 100%;
  /* De kop breekt op een smal scherm in twee regels. Standaard behandelt een
     browser die twee regels als één doorlopend kader, en dan valt de strook —
     die maar één rij hoog is — alleen op de eerste regel. Met clone krijgt elke
     regel zijn eigen kader, en dus zijn eigen streepje. Het gele streepje heeft
     dat niet nodig: dat is een verloop over de volle hoogte. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ========== RECENSIES OP EEN TELEFOON ==========
   Op desktop mag een recensie een uitspraak zijn: royaal kader, groot cursief
   citaat, ruime regelafstand. Op een telefoon werd dat het zwaarste blok van de
   pagina — één recensiekaart was hoger (392px) dan een compleet springkussen-
   tegeltje mét foto (284px), met 26px binnenruimte tegen 10 op die tegels en een
   citaat dat groter stond dan welke tekst dan ook op de kaarten erboven.

   Hier komt hij in hetzelfde register als die tegels: dezelfde soort krappe
   binnenruimte, en een citaat dat tussen de kussennaam en de maatregel in zit
   qua grootte. Het blijft een kaart met een citaat — alleen niet meer het
   luidste ding op het scherm. De kop blijft zoals hij is: die staat al even
   groot als 'Onze springkussens' erboven, en dat is precies goed. */
@media (max-width: 620px) {
  .reviews { gap: 12px; }
  .review { padding: 16px 16px 14px; }

  /* de vlaggetjes staan met width/height in de svg zelf; hier kleiner gezet */
  .review__vlaggen { width: 76px; height: auto; margin-bottom: 9px; }

  .review blockquote {
    margin: 0 0 12px;
    padding-left: 22px;
    font-size: .92rem;
    line-height: 1.6;
  }
  .review blockquote::before { top: 9px; font-size: 2.3rem; }

  .review figcaption { gap: 8px; font-size: .68rem; letter-spacing: .07em; }
  .review figcaption::before { flex: 0 0 16px; }
}

/* ========== SPRINGWEER OP EEN TELEFOON ==========
   De pijl schaalt mee met de knop, die daar minder breed is en met 44px
   minimumhoogte iets korter uitvalt. Zonder deze regels stak de punt boven het
   opschrift uit, en dat is precies wat hij niet moet doen. */
@media (max-width: 560px) {
  .springzin { margin-top: 14px; }
  .springzin--met-pijl { margin-top: 18px; }
  .springzin__regel { font-size: .92rem; }
  .springzin__cijfer { font-size: 1.22rem; }
  .springzin__pijl {
    width: 52px; height: 42px;
    bottom: calc(100% - 7px);
  }
}

/* De afsluitende strook onderaan een pagina. Boven dezelfde 56px als de andere
   secties; onder minder, want de footerrand met de silhouetten brengt zelf al
   ruim honderd pixels mee. */
.section--uitsmijter { padding: 56px 0 28px; }
@media (max-width: 880px) { .section--uitsmijter { padding: 40px 0 20px; } }

/* ========== WANNEER KUN JE? (agenda leidt, springkussenpagina) ==========
   Agenda links, de drie kussens rechts. Op een telefoon onder elkaar, met de
   agenda eerst: die is hier het gereedschap.

   Een kussen dat op de gekozen dag niet kan blijft staan. Weghalen zou de vraag
   "en die andere dan?" onbeantwoord laten, en het rijtje zou bij elke klik van
   lengte veranderen. De witte waas is een aparte laag over de kaart in plaats
   van opacity op de kaart zelf: met opacity zou ook de tekst verbleken en dan
   is "Deze dag al vergeven" — juist de regel die je moet lezen — het slechtst
   leesbaar van alles. */
/* Ruimte voor de plakkende menubalk als je hier via #wanneer belandt. */
.wanneer { background: var(--c-cream-2); padding: 56px 0 60px; scroll-margin-top: 76px; }
/* De agenda krijgt de ruimere kolom: hij is hier het gereedschap, en een grotere
   agenda is prettiger aan te wijzen. De kussens gaan in twee kolommen naast
   elkaar. Eerder liep elk kussen over de volle restbreedte, en omdat er maar een
   foto, een naam, een maat en een knop in zit bleef daar de helft leeg. Twee
   kolommen vult die ruimte én maakt de rij klaar voor meer kussens: vier vullen
   twee rijen, zes vullen drie. */
.wanneer__grid {
  display: grid;
  grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
/* De agenda hoort hier hetzelfde kader te hebben als de kussenkaarten ernaast.
   De klasse .cal geeft de rand, de radius en de binnenruimte, maar geen
   achtergrond — in het boekingsvenster staat hij op wit en was dat nooit nodig.
   Hier staat hij op de zandtint van de sectie, dus zonder een eigen wit vlak
   zweefde hij als losse inhoud naast twee nette kaartjes. */
.wanneer__agenda {
  background: var(--c-paper);
  border-color: var(--c-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  padding: 14px 15px;
}

.wanneer__stand {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--c-ink);
}
.wanneer__kussens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
/* Een oneven laatste kaart zou anders alleen in een halve rij staan. Die loopt
   over de volle breedte en zet zijn knop rechts, zodat ook die kaart gevuld is
   in plaats van half leeg — hetzelfde als de laatste kussentegel in het
   overzicht bij een oneven aantal. */
.wanneer__kussens .wk:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  /* De derde kolom is net zo breed als het tekstvak van een smalle kaart. Daarmee
     begint de knop van deze brede kaart op precies dezelfde lijn als de knop van
     de kaart erboven, in plaats van tegen de rechterrand te staan.

     Het rekenwerk: 100% is de binnenbreedte van deze kaart, min de kolomgap van
     12px en gedeeld door twee geeft één kolom van het buitenraster. Daar gaat
     106px af — de afstand van de buitenrand van een smalle kaart tot zijn tekst:
     1px rand + 9px binnenmarge + 84px foto + 12px tussenruimte. Die rand is
     makkelijk te vergeten en kost precies één pixel scheefstand. Wat overblijft
     is de breedte van dat tekstvak, en dus van deze derde kolom. */
  grid-template-columns: 96px minmax(0, 1fr) calc((100% - 12px) / 2 - 106px);
}
.wanneer__kussens .wk:last-child:nth-child(odd) .wk__foto { grid-row: 1; }
.wanneer__kussens .wk:last-child:nth-child(odd) .wk__body { grid-row: 1; align-self: center; }
.wanneer__kussens .wk:last-child:nth-child(odd) .wk__knoprij,
.wanneer__kussens .wk:last-child:nth-child(odd) .wk__stand {
  grid-column: 3; grid-row: 1;
  align-self: center;
  justify-self: start;
}

.wk {
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 7px 12px;
  align-items: center;
  padding: 9px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.wk__foto {
  width: 84px; height: 68px;
  object-fit: cover;
  border-radius: var(--radius-s);
}
.wk--breed .wk__foto, .wanneer__kussens .wk:last-child:nth-child(odd) .wk__foto {
  width: 96px; height: 72px;
}
/* Foto links over beide rijen, naam en maat rechtsboven, knop of standregel
   rechtsonder. In de brede variant schuift die laatste naar een derde kolom. */
.wk__foto { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.wk__body { grid-column: 2; grid-row: 1; min-width: 0; align-self: end; }
.wk__knoprij,
.wk__stand { grid-column: 2; grid-row: 2; margin: 0; align-self: start; }
.wk__naam { margin: 0; font-size: .96rem; line-height: 1.2; }
.wk__maat { margin: 3px 0 0; font-size: .82rem; color: var(--c-ink-soft); }
.wk__stand {
  margin: 0;
  font-size: .86rem;
  font-weight: 700;
  color: var(--c-rood-diep);
}

/* De waas. Ligt over de foto en de kaart, maar niet over de tekst: die staat in
   .wk__body en komt met z-index bovenop. */
.wk--bezet::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, .62);
  pointer-events: none;
}
.wk--bezet { box-shadow: none; }
.wk--bezet .wk__body { position: relative; z-index: 1; }

@media (max-width: 880px) {
  .wanneer { padding: 40px 0 44px; }
  .wanneer__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* Onder de agenda is er geen tweede kolom meer; de kussens gaan op een rij
     onder elkaar en de brede uitzondering vervalt. */
  .wanneer__kussens { grid-template-columns: minmax(0, 1fr); }
  .wanneer__kussens .wk:last-child:nth-child(odd) {
    grid-column: auto;
    grid-template-columns: 84px minmax(0, 1fr);
  }
  .wanneer__kussens .wk:last-child:nth-child(odd) .wk__foto {
    width: 84px; height: 68px; grid-row: 1 / span 2;
  }
  .wanneer__kussens .wk:last-child:nth-child(odd) .wk__body { align-self: end; }
  .wanneer__kussens .wk:last-child:nth-child(odd) .wk__knoprij,
  .wanneer__kussens .wk:last-child:nth-child(odd) .wk__stand {
    grid-column: 2; grid-row: 2;
    align-self: start;
    padding-right: 0;
  }
}
@media (max-width: 560px) {
  .wk { grid-template-columns: 74px minmax(0, 1fr); gap: 11px; }
  .wk__foto { width: 74px; height: 60px; }
  .wk__naam { font-size: .94rem; }
  .wk__maat { font-size: .78rem; margin-bottom: 6px; }
}

/* ========== CONFETTI BIJ HET OMZETTEN NAAR BRABANTS ==========
   Rood-witte snippers uit de onderrand, in de kleuren van de vlag van
   Noord-Brabant. Puur decoratie: aria-hidden, geen tekst, en pointer-events uit
   zodat er niets onder de snippers onklikbaar wordt.

   De baan zit in één keyframe met vier custom properties per snipper (afstand
   omhoog, zijwaartse drift, draaiing, duur). Zo is er één animatie in het
   stylesheet en toch geen snipper hetzelfde. Alleen transform en opacity, dus
   het draait op de GPU en het kost geen layout. */
.brab-confetti {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 0;
  z-index: 200;
  pointer-events: none;
}
.brab-confetti i {
  position: absolute;
  bottom: -14px;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  border-radius: 1.5px;
  will-change: transform, opacity;
  /* linear, niet ease: de tijdfunctie geldt tussen élke twee stappen, en met een
     ease-curve remt en versnelt de snipper acht keer per baan. De versnelling zit
     nu in de afstand tussen de stappen, precies zoals de zwaartekracht dat doet:
     omhoog steeds kleinere stapjes, omlaag steeds grotere. */
  animation: brab-snipper var(--duur) linear var(--wacht) both;
}
.brab-confetti .is-rood { background: #c8102e; }
/* Wit op crème verdwijnt; een dun rood randje houdt de snipper zichtbaar zonder
   de twee vlagkleuren te verlaten. */
.brab-confetti .is-wit {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(200, 16, 46, .55);
}

/* De baan. Omhoog gaat het in een kwart van de tijd, omlaag in driekwart: een
   snipper wordt weggeschoten en dwarrelt daarna. Dat verschil is precies wat het
   er licht laat uitzien — even snel vallen als stijgen leest als een steen.

   Tijdens het vallen zwaait hij heen en weer om zijn eigen driftlijn: --zw is de
   uitslag van die zwaai, en die wisselt per stap van teken. Ondertussen blijft
   hij dooltollen, en vanaf driekwart lost hij op. */
@keyframes brab-snipper {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  3%   { opacity: 1; }

  /* omhoog: steeds kleinere stapjes tot het hoogste punt */
  4%   { transform: translate3d(calc(var(--dx) * .06), calc(var(--dy) * -.45), 0)
                    rotate(calc(var(--rot) * .10)); }
  10%  { transform: translate3d(calc(var(--dx) * .14), calc(var(--dy) * -.75), 0)
                    rotate(calc(var(--rot) * .20)); }
  17%  { transform: translate3d(calc(var(--dx) * .22), calc(var(--dy) * -.93), 0)
                    rotate(calc(var(--rot) * .29)); }
  26%  { transform: translate3d(calc(var(--dx) * .30 + var(--zw)), calc(var(--dy) * -1), 0)
                    rotate(calc(var(--rot) * .38)); }

  /* omlaag: eerst bijna zwevend, dan steeds sneller, met een zwaai per stap */
  34%  { transform: translate3d(calc(var(--dx) * .38 - var(--zw) * .6), calc(var(--dy) * -.97), 0)
                    rotate(calc(var(--rot) * .46)); }
  44%  { transform: translate3d(calc(var(--dx) * .48 + var(--zw) * .9), calc(var(--dy) * -.88), 0)
                    rotate(calc(var(--rot) * .55)); }
  56%  { transform: translate3d(calc(var(--dx) * .58 - var(--zw) * .8), calc(var(--dy) * -.72), 0)
                    rotate(calc(var(--rot) * .66)); }
  68%  { transform: translate3d(calc(var(--dx) * .70 + var(--zw) * .7), calc(var(--dy) * -.50), 0)
                    rotate(calc(var(--rot) * .77)); }
  75%  { opacity: 1; }
  80%  { transform: translate3d(calc(var(--dx) * .82 - var(--zw) * .5), calc(var(--dy) * -.24), 0)
                    rotate(calc(var(--rot) * .87)); }
  90%  { transform: translate3d(calc(var(--dx) * .92 + var(--zw) * .4), calc(var(--dy) * .06), 0)
                    rotate(calc(var(--rot) * .94)); }
  100% { transform: translate3d(var(--dx), calc(var(--dy) * .30), 0)
                    rotate(var(--rot)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Voor de zekerheid ook in CSS: main.js maakt de snippers dan al niet aan. */
  .brab-confetti { display: none; }
}

/* ==========================================================================
   FOTOVENSTER — de hele foto van een springkussen bekijken
   ==========================================================================
   Op de kaarten en in de slider staat de foto als uitsnede (`object-fit: cover`).
   Dat is daar de juiste keuze: de foto's lopen van 0,75 (staand) tot 1,50
   (liggend), en in één vast kader past die reeks niet heel — passen zou naast
   elke foto onscherpe balken geven en de kussens klein maken. Het gevolg was wel
   dat het hele kussen nergens op de site te zien was, terwijl dat juist is wat
   iemand wil bekijken voordat hij boekt.

   Dit venster is het antwoord: dezelfde foto's, maar `contain` in plaats van
   `cover`, dus compleet en in de juiste verhouding, wat de verhouding ook is.
   ========================================================================== */

/* ---------- Ingang 1: de foto in de slider is zelf de knop ---------- */
.gal__zoom {
  display: block;
  width: 100%; height: 100%;
  padding: 0; border: none; background: none;
  /* Het loepje met plusje: de standaard voor "hier valt op te vergroten". */
  cursor: zoom-in;
}
.gal__zoom:focus-visible { outline: 3px solid var(--c-cobalt); outline-offset: -3px; }

/* Een aanwijzing die ook zonder muis werkt. Op een telefoon is er geen hover en
   geen cursor, dus zonder zo'n label is er niets dat verraadt dat de foto meer
   te geven heeft. Linksonder: het label rechtsboven en het kruisje zitten al
   bezet, en de bolletjes van de slider staan in het midden. */
.gal__hint {
  position: absolute; left: 12px; bottom: 12px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px 5px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
  box-shadow: 0 3px 12px -4px rgba(40, 31, 82, .35);
  color: var(--c-ink-soft);
  font-size: .76rem; font-weight: 700;
  pointer-events: none;        /* de foto eronder blijft de knop */
}

/* ---------- Ingang 2: het loepje op een kaart ---------- */
/* De kaart is al helemaal klikbaar naar het detailvenster, dus dit is een eigen
   knopje in de hoek en niet de hele foto: anders krijgt één vlak twee
   betekenissen. Rechtsonder, want linksboven zit het label en rechtsboven de
   deelpil. */
.foto-knop {
  position: absolute; right: 12px; bottom: 12px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px 6px 9px;
  border: none; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
  box-shadow: 0 3px 12px -4px rgba(40, 31, 82, .35);
  color: var(--c-ink-soft);
  font-family: inherit; font-size: .8rem; font-weight: 700;
  line-height: 1;
  cursor: zoom-in;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
/* Het pilletje meet 44x25 en dat is te kort om met een vinger te raken; de norm
   is 44x44. Groter maken zou het over de foto laten domineren, dus het zichtbare
   pilletje blijft en het aanraakvlak groeit eronder door. */
.foto-knop::after {
  content: "";
  position: absolute; inset: -10px -6px;
}
@media (hover: hover) {
  .foto-knop:hover {
    background: #fff; color: var(--c-cobalt-deep);
    transform: translateY(-1px);
  }
}
.foto-knop:focus-visible { outline: 3px solid var(--c-cobalt); outline-offset: 2px; }

/* ---------- Het venster zelf ---------- */
/* Twee rijen: de foto krijgt alle ruimte die overblijft (`1fr`) en de balk
   eronder precies wat hij nodig heeft. Daardoor staat de foto op elk formaat
   gecentreerd in wat er over is, zonder een enkele vaste hoogte in het spel. */
.fotov {
  position: fixed; inset: 0;
  z-index: 500;                /* boven het detailvenster (200) en de toast (400) */
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  /* .95 liet de crèmekleurige pagina er nog doorheen schijnen — koppen bleven
     leesbaar en dat trekt het oog van de foto af. Met .97 plus een lichte waas
     blijft er niets van te lezen over. */
  background: rgba(24, 18, 46, .97);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .18s ease;
}
.fotov.is-open { opacity: 1; }

.fotov__sluit {
  position: absolute; top: 12px; right: 12px;
  z-index: 3;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  padding: 0; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease;
}
@media (hover: hover) {
  .fotov__sluit:hover { background: rgba(255, 255, 255, .3); }
}
.fotov__sluit:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* `minmax(0, 1fr)` hierboven plus `min-height: 0` hier: zonder die twee neemt
   een rasterrij de natuurlijke hoogte van zijn inhoud als ondergrens en loopt
   een hoge staande foto het venster uit in plaats van te krimpen. */
/* `pan-y` stond hier eerst, gekopieerd van de slider. Maar in dít venster valt
   niets te scrollen, en met `pan-y` mag de browser een veeg die iets omhoog
   loopt alsnog als scrollpoging opeisen — dan valt de veeg weg. `pinch-zoom`
   geeft ons alle veegbewegingen en laat knijpen om in te zoomen aan de browser,
   zodat wie wil inzoomen dat nog kan. */
.fotov__viewport {
  position: relative; overflow: hidden; min-height: 0;
  touch-action: pinch-zoom;
}
/* Slepen over een afbeelding start in een browser van zichzelf een sleepactie
   (en op een bureaublad een tekstselectie). Dat breekt de reeks pointer-events
   halverwege af, en dan blijft de veeg steken. */
.gal__img, .fotov__img {
  -webkit-user-drag: none;
  user-select: none; -webkit-user-select: none;
}
.fotov__track {
  display: flex; height: 100%;
  transition: transform .45s var(--ease-spring);
  will-change: transform;
}
.fotov__slide {
  flex: 0 0 100%; min-width: 0;
  margin: 0;
  display: grid; place-items: center;
  /* Bovenaan ruimte voor het kruisje, zodat dat nooit op de foto valt. */
  padding: 64px 16px 6px;
}
/* Hier zit de hele bedoeling van dit venster: `contain` in plaats van `cover`,
   met `width`/`height` op `auto` zodat de eigen verhouding van de foto leidt.
   Een liggende foto vult de breedte, een staande de hoogte, en er wordt niets
   afgesneden. */
.fotov__img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  /* Zonder deze twee klemt `max-height: 100%` niet. Een rasteritem heeft van
     zichzelf `min-height: auto`, en die ondergrens is bij een afbeelding haar
     eigen hoogte — dus bleef `kasteel.jpg` op een breed scherm op zijn volle
     800px staan en liep hij onderaan het venster uit. Nagemeten: 1200x800 werd
     1014x676. Dezelfde valkuil als de `min-width` in de boekbalk: een
     automatische ondergrens die een maximum overstemt. */
  min-width: 0; min-height: 0;
  object-fit: contain;
  border-radius: var(--radius-m);
  /* Een lichte rand: veel foto's hebben een bleke lucht aan de bovenkant en die
     liep zonder rand door in de donkere achtergrond. */
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .7);
}

.fotov__onder {
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.fotov__naam {
  margin: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.02rem; color: #fff;
}
/* De alt-tekst van de foto beschrijft wat er te zien is ("van de voorkant:
   entree, glijbaan en olifant bovenop"). Onder de foto is dat precies de tekst
   die je wil lezen. Staat er niets bruikbaars in, dan valt de regel weg in
   plaats van hoogte te kosten. */
.fotov__alt {
  margin: 4px auto 0; max-width: 44em;
  font-size: .86rem; line-height: 1.4;
  /* .72 wit op deze achtergrond haalt 8,7:1 — ruim boven de 4,5:1 van AA. */
  color: rgba(255, 255, 255, .72);
}
.fotov__alt:empty { display: none; }

/* De bediening staat ónder de foto en niet erover: pijlen aan de zijkanten
   dekken bij een staande foto juist het kussen af, en op een telefoon zit een
   knop halverwege het scherm ook niet lekker onder de duim. Alles op één rij,
   gecentreerd, dus op mobiel en desktop dezelfde uitlijning. */
.fotov__balk {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  margin-top: 12px;
}
.fotov__nav {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  padding: 0; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
@media (hover: hover) {
  .fotov__nav:hover { background: rgba(255, 255, 255, .3); transform: scale(1.06); }
}
.fotov__nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* 42px zichtbaar, 46px aanraakbaar. Het knopje zelf groter maken zou de balk
   onder de foto zwaarder maken dan de foto verdient. Hetzelfde als bij het
   loepje op de kaart. */
.fotov__nav::after, .fotov__sluit::after { content: ""; position: absolute; inset: -2px; }
/* Alleen de pijlen: het kruisje staat al `absolute` en dat is óók een houvast
   voor zijn ::after. Zette ik hier `relative` op, dan overstemde dat die
   `absolute` en sprong het kruisje naar linksboven. */
.fotov__nav { position: relative; }

.fotov__dots { display: flex; align-items: center; gap: 8px; }
.fotov__dot {
  width: 9px; height: 9px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: transform .3s var(--ease-spring), background .2s ease;
}
.fotov__dot.is-actief { background: #fff; transform: scale(1.45); }
.fotov__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.fotov__teller {
  min-width: 3.4em;
  font-size: .84rem; font-weight: 700;
  font-variant-numeric: tabular-nums;   /* het cijfer springt niet bij 9 -> 10 */
  color: rgba(255, 255, 255, .8);
}

/* In het detailvenster loopt onderaan de foto de titelbalk met de naam en de
   prijs. De aanwijzing gaat daar dus bovenlangs, op dezelfde hoogte als de
   bolletjes van de slider (die staan gecentreerd, dus ze botsen niet). */
.modal--product .gal__hint { bottom: 66px; }

/* Gevonden bij het bouwen van het fotovenster: `.gal__teller` staat linksboven
   op 12px en de deelpil (`.deel-over--venster`) op 14px, dus in het detailvenster
   lag de teller onzichtbaar onder die pil — die pil heeft z-index 3 en een
   dekkende achtergrond. In dít venster staan de bolletjes eronder, en die
   vertellen met drie foto's hetzelfde. Dus hier weg in plaats van verschuiven;
   buiten het detailvenster blijft de teller staan. */
.modal--product .gal__teller { display: none; }

@media (max-width: 760px) {
  .modal--product .gal__hint { bottom: 60px; }
  /* Bovenaan 58px voor het kruisje, onderaan hetzelfde: anders centreert de
     foto in een scheef kader en hangt hij een halve knop te laag. Op een
     telefoon kost dat niets — daar bepaalt de bréedte hoe groot de foto wordt
     (370px breed, 370 tot 493 hoog in een vak van ruim 630), dus er is hoogte
     over. Op een breed scherm staat de asymmetrie wél, want daar is de hoogte
     juist de beperking en zou deze marge de foto kleiner maken. */
  .fotov__slide { padding: 58px 10px 54px; }
  .fotov__naam { font-size: .95rem; }
  .fotov__alt { font-size: .8rem; }
  .fotov__balk { gap: 10px; }
  .foto-knop { right: 10px; bottom: 10px; font-size: .76rem; padding: 5px 9px 5px 8px; }
  .gal__hint { left: 10px; bottom: 10px; }
}

/* Een telefoon in liggende stand is maar zo'n 390px hoog, en daarvan namen de
   balk onderaan en de ruimte voor het kruisje samen ruim de helft. Juist dán
   draai je je toestel om de foto groter te zien. Nagemeten op 844x390: de foto
   ging van 189px naar 256px hoog en de balk van 131px naar 86px. De
   omschrijving valt weg — die staat er voor de context, niet om naar te
   kijken — en de marges krimpen. */
@media (max-height: 480px) {
  .fotov__slide { padding: 44px 12px 4px; }
  .fotov__alt { display: none; }
  .fotov__onder { padding: 6px 16px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .fotov__naam { font-size: .9rem; }
  .fotov__balk { margin-top: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .fotov { transition: none; }
  .fotov__track { transition: none; }
  .fotov__nav, .fotov__dot, .foto-knop { transition: none; }
}

/* ==========================================================================
   BOEKVENSTER: meer hoogte voor de foto
   ==========================================================================
   De foto stond op een breed scherm op 152px, met als reden "de foto dient hier
   om te herkennen wat je boekt, niet om te bewonderen". Dat kostte te veel: in
   die strook van 152px kwamen vier bedieningselementen samen en gemeten op
   1440x900 lag de aanwijzing "Hele foto" (422,164) precies op de linkerpijl
   (422,163), stond de deelpil er 8px boven en raakte het kruisje de rechterpijl
   op 2px. Niet één van die botsingen is met marges op te lossen — er was simpelweg
   geen hoogte.

   Het venster had die hoogte wel: 686px hoog bij een maximum van 95vh (855px op
   een scherm van 900), dus 169px onbenut. Die ruimte gaat nu naar de foto, en
   daarmee lossen de botsingen zichzelf op: de pijlen staan verticaal gecentreerd,
   dus met een hogere foto zakken ze weg bij de deelpil en het kruisje bovenaan en
   bij de aanwijzing onderaan.

   Waarom in stappen op schermhóogte en niet één vaste maat: de oude 152px was
   afgestemd op een laptop van 720px hoog, en daar is die ruimte er ook echt niet
   (het venster minus de foto is 534px, dus bij 95vh = 684px blijft er 150px over).
   Elke stap hieronder is nagemeten op de vraag of de hele agenda nog zonder
   scrollen in beeld past. Onder 800px hoogte blijft het dus zoals het was.
   ========================================================================== */
/* Geen vaste stappen maar de ruimte die er is. Vaste stappen liepen mis: op een
   venster van 800px hoog werd het boekvenster 4px te groot, en een maand die zes
   agendaweken nodig heeft kost nog eens zo'n 44px. Dus rekent de foto het zelf
   uit: alles behalve de foto meet 534px (bij zes weken 578px), en het venster
   mag 95vh worden. Met 560px als aftrek houdt hij ook in een zesweekse maand
   nog net de knop in beeld.

   Wat dat oplevert: op een venster van 780px hoog een foto van 200px in plaats
   van 152, op 900px 295px, en vanaf ongeveer 1000px loopt hij tegen het plafond
   van 360px aan. Onder de 712px verandert er niets — daar was 152px al het
   maximum en daaronder zou de agenda wegvallen. */
@media (min-width: 561px) {
  .modal--product .gal__slide { height: clamp(152px, calc(95vh - 560px), 360px); }
}

/* ==========================================================================
   BOEKVENSTER OP EEN TELEFOON: niets over de foto heen
   ==========================================================================
   Op een telefoon is de foto in het boekvenster maar zo'n 214px hoog, en daar
   lagen de aanwijzing "Hele foto" en de stippenpil van de slider bovenop. Beide
   nemen zicht weg van juist het ding waar iemand naar kijkt.

   Ze zijn hier weg, niet overal: in het fotovenster dat opent als je de foto
   aantikt staan de stippen én de teller er wél, met de hele foto in beeld. Daar
   is de ruimte er ook voor. Vegen en de pijlen blijven het in het boekvenster
   gewoon doen, dus je kunt nog steeds door de foto's.
   ========================================================================== */
@media (max-width: 620px) {
  .modal--product .gal__hint,
  .modal--product .gal__dots { display: none; }
}

/* ==========================================================================
   BOEKVENSTER OP EEN BREED SCHERM: foto naast de agenda
   ==========================================================================
   Boven de foto stapelen was de bottleneck. In één kolom moeten de foto, de
   agenda en de boekknop samen onder de 95vh blijven, en dan is er voor de foto
   nooit meer dan zo'n 360px. Naast elkaar valt die rekensom weg.

   Het venster is hier zélf het raster, en `display: contents` op `.modal__body`
   laat de foto, de agenda en de boekbalk daar rechtstreeks in meedoen. Dat is
   nodig om de knop ín de agendakolom te krijgen: die balk hangt in de HTML naast
   het lijf, en liep als losse strook over de volle breedte onder de foto door.
   Nu staat de foto over beide rijen, en zit de knop direct onder de agenda waar
   hij bij hoort.

   Daarmee is de linkeronderhoek van de foto ook echt een hoek van het venster,
   dus mag hij afgerond zijn; eerder liep de balk eronder door en klopte die
   afronding niet.
   ========================================================================== */
@media (min-width: 1140px) and (min-height: 640px) {
  .modal--product {
    max-width: 1120px;
    display: grid;
    grid-template-columns: 520px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .modal--product .modal__body { display: contents; }

  /* De foto links, over de agenda én de knop heen. */
  .modal--product .modal__media {
    grid-column: 1; grid-row: 1 / -1;
    border-radius: var(--radius-l) 0 0 var(--radius-l);
    overflow: hidden;
  }
  /* De galerij ligt absoluut over de kolom. Zolang de foto ín de stroom staat,
     bepaalt zíj de hoogte: de staande foto (1050x1400) rekte het venster naar
     667px met 222px leegte naast de agenda, en de hoogte versprong zodra je naar
     een foto met een andere verhouding veegde. Absoluut draagt hij niets bij aan
     de rijhoogte, dus bepaalt de agenda hem en vult de foto wat er is. */
  .modal--product .modal__media > .gal {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
  }
  .modal--product .gal__viewport { flex: 1 1 auto; min-height: 0; }
  .modal--product .gal__track { height: 100%; }
  .modal--product .gal__slide { height: 100%; }

  /* De agendakolom scrollt desnoods zelf; `.modal__body` was de scroller en die
     heeft met `display: contents` geen doos meer. Zo blijven de foto en de knop
     staan als de inhoud een keer niet past. */
  .modal--product .modal__main {
    grid-column: 2; grid-row: 1;
    overflow-y: auto; min-height: 0;
    /* 48px boven: het kruisje loopt tot 54px vanaf de bovenkant van het venster,
       en de agendakop kwam daar eerder onder te liggen (15x28px overlap,
       nagemeten op 1440x900). Zo hangt de vrije ruimte niet af van hoe breed de
       agenda toevallig is. */
    padding-top: 48px;
  }

  /* De knop onder de agenda in plaats van in een strook over de volle breedte.
     Geen rand en geen schaduw meer: die maakten er een losse balk van, en binnen
     de kolom is er niets te scheiden. Over de volle kolombreedte, zoals op een
     telefoon — het is de hoofdhandeling van dit venster. */
  .modal--product .modal__cta {
    grid-column: 2; grid-row: 2;
    position: static;
    border-top: none;
    box-shadow: none;
    padding: 4px 26px 22px;
  }
  .modal--product .modal__cta .btn { flex: 1 1 auto; }

  /* De agenda mocht hier weer groeien. De 420px-limiet komt uit de ééncoloms
     weergave, waar het venster 620px breed was; in een kolom van 600px leest
     diezelfde 420px als een kleine agenda in een groot venster. Zonder limiet
     vullen de dagvakjes de kolom en kan de tekst een maat mee omhoog. */
  .modal--product .cal__head,
  .modal--product .cal__dow,
  .modal--product .cal__grid { max-width: none; }
  .modal--product .cal { padding: 14px 16px; }
  .modal--product .cal__grid button { font-size: .98rem; }
  .modal--product .cal__dow span { font-size: .82rem; }
}