/* =========================================================
   Kaas & Kaasjes — huisstijl design system
   Palette afgeleid van het logo: terracotta, olijfgroen,
   zacht roze, roze-rood en helder geel op een warme crème.
   ========================================================= */

/* ---------- Fonts (self-hosted, huisstijl volgens DESIGN.md) ----------
   Choco Bold (het logo-lettertype) en Hamiltone (het handschrift) zijn subsets
   uit de merkbestanden. Ze missen tekens: & ! ? het euroteken en alle
   accentletters. Daarom staat onder elke merk-familienaam eerst Baloo 2 als
   vulling met het volledige latin-bereik, en daarna het merkfont met een
   unicode-range die precies dekt wat het font echt heeft. De laatst passende
   declaratie wint per teken, dus Choco/Hamiltone winnen waar ze een glyph
   hebben en Baloo 2 vangt de rest op. Zonder deze constructie verschijnen er
   lege blokjes. Zie DESIGN.md, de glyph-regel.
   Sinds 14 sep 2026 is de vulling een subset (baloo2-vulling.woff2, 15 kB) met
   alleen de tekens die Choco of Hamiltone missen, en elke vulling-face heeft een
   unicode-range met precies die tekens. Gevolg: Choco en Hamiltone bestaan alleen
   in gewicht 400. Zet een merkfont nooit op 600/700, dan kiest de browser de
   vulling (400-800) voor de hele tekst en staat die in Baloo 2. */
@font-face {
  font-family: "Baloo 2";
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/baloo2-vulling.woff2") format("woff2");
  unicode-range: U+000D, U+0021, U+0024, U+0026, U+002D, U+003F-0040, U+00A1-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2009, U+200B, U+2032-2033, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face { /* vulling, moet vóór het merkfont staan */
  font-family: "Choco Bold";
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/baloo2-vulling.woff2") format("woff2");
  unicode-range: U+000D, U+0021, U+0024, U+0026, U+003F-0040, U+00A1, U+00A3, U+00A5, U+00AA, U+00AC-00AD, U+00B2-00B3, U+00B5, U+00B9-00BA, U+00BC-00D6, U+00D8-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02BB, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2009, U+200B, U+2032-2033, U+2044, U+20AC, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Choco Bold";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/choco-bold.woff2") format("woff2");
  unicode-range: U+0020, U+0022-0023, U+0025, U+0027-003E, U+0041-007E, U+00A0, U+00A2, U+00A4, U+00A6-00A9, U+00AB, U+00AE-00B1, U+00B4, U+00B6-00B8, U+00BB, U+00D7, U+00F7, U+02BC, U+02C6-02C7, U+02D8-02DD, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2122;
}
@font-face { /* vulling, moet vóór het merkfont staan */
  font-family: "Hamiltone";
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/baloo2-vulling.woff2") format("woff2");
  unicode-range: U+000D, U+0024, U+0026, U+002D, U+00A1-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2009, U+200B, U+2032-2033, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Hamiltone";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/hamiltone.woff2") format("woff2");
  unicode-range: U+0020-0023, U+0025, U+0027-002C, U+002E-007E, U+00A0, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2039-203A, U+2044;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/montserrat-var-latin-400-700.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Merkkleuren */
  --terracotta: #e2562a;
  --terracotta-dark: #c0431c;
  --olive: #486830;
  --olive-dark: #35521f;
  --pink: #f2b4d2;
  --pink-soft: #fbdbe8;
  --rose: #f56d91;
  /* Tekst-veilige varianten (>=4.5:1 op crème) voor labels/links;
     de heldere --rose/--terracotta blijven voor decoratie (blob, dot, mark). */
  --rose-ink: #b52a55;
  --terracotta-ink: #b8431c;
  --yellow: #f8f000;
  --yellow-soft: #fdf59a;

  /* Neutralen */
  --cream: #fbf6ec;
  --cream-2: #f4ecdc;
  --ink: #1c1712;
  --ink-soft: #4a4139;
  --white: #ffffff;
  --line: #e7ddcb;

  /* Systeem */
  --radius: 22px;
  --radius-lg: 34px;
  --radius-sm: 14px;
  --shadow: 0 18px 50px -22px rgba(28, 23, 18, .35);
  --shadow-sm: 0 8px 24px -14px rgba(28, 23, 18, .4);
  --maxw: 1200px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Semantische z-index-schaal (laag -> hoog). Lokale component-stacking
     (marker, offer-illustratie, ig-overlay) blijft 0/1/2 binnen eigen context. */
  --z-nav-backdrop: 80;
  --z-nav-panel: 90;
  --z-nav-toggle: 95;
  --z-header: 100;
  --z-skip-link: 200;

  --font-display: "Choco Bold", "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-hand: "Hamiltone", "Baloo 2", cursive;
  --font-body: "Montserrat", system-ui, -apple-system, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; scroll-padding-bottom: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn:hover { transform: none; } }
body {
  font-family: var(--font-body);
  font-weight: 400; /* 300 was te dun op mobiel, tekst waste weg */
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 1.02rem;
  overflow-x: hidden;
}
/* height:auto zorgt dat de width/height-attributen (voor CLS) de aspect-ratio
   bepalen i.p.v. de hoogte hard vast te pinnen. Beelden met object-fit zetten
   zelf height:100% (hogere specificiteit) en blijven dus ongemoeid. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
/* Links in lopende tekst herkenbaar zonder kleur (WCAG 1.4.1). :where() = nul-specificiteit,
   dus knoppen en gerichte uitzonderingen winnen altijd. Menu en footer-navigatie vallen erbuiten. */
:where(p, dd, main li) a:not([class]) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nobreak { white-space: nowrap; }
ul { list-style: none; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "wght" 760; /* stuurt alleen de Baloo 2-vulling */
  font-synthesis-weight: none;         /* geen nep-vet over Choco Bold heen */
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 400; color: var(--ink-soft); }

/* Hand-kicker: het handschrift van Anne, niet de tracked-caps eyebrow.
   Hamiltone heeft geen accenttekens, dus geen woorden met accenten hierin. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: 0; text-transform: none;
  color: var(--terracotta-ink);
  rotate: -2.5deg;
  margin-bottom: .35rem;
}
.eyebrow.is-olive { color: var(--olive-dark); }
.eyebrow.is-rose { color: var(--rose-ink); }

/* Handschrift schrijft zichzelf van links naar rechts zodra het in beeld komt.
   Gestuurd door de IntersectionObserver in main.js (klasse .in), dus het werkt in
   elke browser, ook zonder animation-timeline. Zonder JS staat alles gewoon open.
   Links en boven/onder negatief, zodat de swierige hoofdletters niet afgeknipt worden. */
.js .eyebrow, .js .hand {
  clip-path: inset(-30% 100% -30% -14%);
  transition: clip-path 1.2s cubic-bezier(.22, .61, .36, 1) .1s;
}
.js .eyebrow.in, .js .hand.in { clip-path: inset(-30% -8% -30% -14%); }
@media (prefers-reduced-motion: reduce) {
  .js .eyebrow, .js .hand { clip-path: none; transition: none; }
}

/* Marker-onderstreping met de hand getekend, kleur via --mk.
   Blijft binnen de regelhoogte (net onder de letters) zodat hij nooit
   over de volgende tekstregel valt, op elk kopformaat. */
.mark { position: relative; white-space: nowrap; }
.mark::after {
  content: ""; position: absolute; left: -.03em; right: -.03em; bottom: .09em;
  height: .11em; background: var(--mk, var(--yellow)); z-index: -1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='12' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7 C40 4 80 9 120 6 S186 5 197 7' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='12' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7 C40 4 80 9 120 6 S186 5 197 7' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
.tilt-a { rotate: -2.5deg; }
.tilt-b { rotate: 2deg; }

/* ---------- Layout helpers ---------- */
.wrap { width: min(var(--maxw), 92%); margin-inline: auto; }
.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section-tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.center { text-align: center; }
.stack > * + * { margin-top: 1.1rem; }
.grid { display: grid; gap: 1.5rem; }
/* Drie kaarten naast elkaar, maar niet doorduwen op smal scherm: onder 900px twee,
   onder 620px een. Stond eerder als inline style, dus kon niet responsive zijn. */
.grid.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid.drie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid.drie { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 400;
  font-variation-settings: "wght" 700;
  font-size: 1.02rem; line-height: 1;
  padding: .9rem 1.7rem; border-radius: 100px;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .25s;
}
.btn svg { width: 18px; height: 18px; }
@media (max-width: 420px) {
  .btn { text-align: center; }
  /* Alleen expliciet: een paneelbrede knop botste op de homepage met de polaroid-sticker. */
  .btn-vol { width: 100%; justify-content: center; padding-inline: 1rem; }
}
/* Telefoonnummers nooit middenin afbreken. */
a[href^="tel:"] { white-space: nowrap; }
.btn-primary { background: var(--terracotta-dark); color: #fff; } /* 5,17:1 */
.btn-primary:hover { background: #a63714; transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.btn-olive { background: var(--olive); color: #fff; }
.btn-olive:hover { background: var(--olive-dark); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); transform: translateY(-3px); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }

/* ---------- Skip-link (toegankelijkheid) ---------- */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: var(--z-skip-link);
  background: var(--ink); color: var(--cream); padding: .7rem 1.1rem;
  border-radius: 10px; font-weight: 700; transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; outline: 3px solid var(--yellow); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  /* Bewust GEEN backdrop-filter: dat maakt de header een containing block voor
     position:fixed kinderen, waardoor het mobiele off-canvas menu t.o.v. de
     header-balk zou positioneren i.p.v. de viewport. Opake crème i.p.v. glas. */
  background: color-mix(in srgb, var(--cream) 95%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.site-header.scrolled { background: var(--cream); }
.site-header.scrolled {
  border-color: var(--line);
  box-shadow: 0 6px 24px -20px rgba(28,23,18,.6);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: .85rem 0;
}
.brand { display: flex; align-items: center; gap: .7rem; }
.brand img { height: 46px; width: auto; }
.brand-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.35rem; letter-spacing: -.01em; color: var(--ink);
}
.nav-links { display: flex; align-items: center; gap: .35rem; }
.nav-links a {
  font-weight: 600; font-size: .98rem; color: var(--ink-soft);
  padding: .55rem .8rem; border-radius: 100px;
  white-space: nowrap; /* labels mogen nooit binnen zichzelf afbreken */
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--ink); background: var(--cream-2); }
.nav-links a.active { color: var(--terracotta-ink); }
.nav-cta { margin-left: .4rem; }
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 46px; height: 46px; border-radius: 12px;
  align-items: center; justify-content: center;
}
.nav-toggle span {
  position: relative; width: 22px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: .3s;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px;
  background: var(--ink); border-radius: 2px; transition: .3s;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem); }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.hero-copy h1 { margin: 1rem 0 1.2rem; }
.hero-copy .lead { max-width: 42ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero-media { position: relative; }
.hero-media .photo {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); aspect-ratio: 4/5;
}
.hero-media .photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-badge {
  position: absolute; z-index: 2;
  background: var(--yellow); color: var(--ink);
  border-radius: 100px; padding: .7rem 1.2rem;
  font-weight: 700; font-size: .95rem;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: .5rem;
}
.hero-badge.tl { top: 8%; left: -4%; rotate: -5deg; }
.hero-badge.br { bottom: 7%; right: -3%; rotate: 4deg; background: var(--pink); }

/* decoratieve icoontjes uit het logo */
.deco-dot { position: absolute; border-radius: 50%; z-index: 0; }

/* ---------- Marquee lint ---------- */
.marquee {
  background: var(--olive); color: var(--cream);
  overflow: hidden; padding: .75rem 0;
}
.marquee-track {
  display: flex; gap: 3rem; width: max-content;
  animation: marquee 28s linear infinite;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 500;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 3rem; white-space: nowrap; }
.marquee-track span::after { content: "•"; color: var(--yellow); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Offers: editoriale zig-zag met echte logo-illustraties ---------- */
.offers { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.offer {
  display: grid; grid-template-columns: minmax(0, 340px) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.offer:nth-child(even) { grid-template-columns: 1fr minmax(0, 340px); }
.offer:nth-child(even) .offer-art { order: 2; }
.offer-art { position: relative; display: grid; place-items: center; }
.offer-art::before {
  content: ""; position: absolute; inset: 8%; border-radius: 44% 56% 52% 48% / 52% 46% 54% 48%;
  background: var(--acc); opacity: .16; z-index: 0;
}
.offer-art img {
  position: relative; z-index: 1; width: min(72%, 260px);
  transition: transform .5s var(--ease), rotate .5s var(--ease);
  rotate: -4deg;
}
.offer:nth-child(even) .offer-art img { rotate: 5deg; }
.offer:hover .offer-art img { transform: translateY(-8px) scale(1.03); rotate: 0deg; }
.offer-num {
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  color: var(--acc-ink, var(--acc)); display: inline-block; margin-bottom: .3rem;
}
.offer-txt h3 { font-size: clamp(1.9rem, 3.5vw, 2.7rem); line-height: 1.02; margin-bottom: .6rem; }
.offer-txt p { color: var(--ink-soft); max-width: 46ch; font-size: 1.05rem; }
.offer-go {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem;
  font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: var(--acc-ink, var(--acc));
}
.offer-go svg { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.offer:hover .offer-go svg { transform: translateX(6px); }
@media (max-width: 720px) {
  .offer, .offer:nth-child(even) { grid-template-columns: 1fr; gap: 1rem; justify-items: start; }
  .offer:nth-child(even) .offer-art { order: 0; }
  .offer-art img { width: 180px; }
}

/* ---------- Vier vragen: de feiten in het kort, onder de hero van borrelplanken ----------
   Handschrift stelt de vraag, Choco antwoordt, Montserrat licht toe (DESIGN §2).
   Geen kaarten, geen iconen; vier kolommen, twee op tablet, een op mobiel. */
.vragen { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2rem 2.4rem; padding: clamp(1.2rem,3vw,2rem) 0; border-top: 2px solid var(--ink); }
.vraag { display: grid; gap: .35rem; align-content: start; }
.vraag .hand { font-size: clamp(1.4rem, 2.2vw, 1.75rem); color: var(--terracotta-ink); rotate: -3deg; margin-left: -.2rem; }
.vraag strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.45rem, 2.3vw, 1.9rem); line-height: 1.05; color: var(--ink); text-wrap: balance; }
.vraag p { margin: .2rem 0 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.5; }
@media (max-width: 960px) { .vragen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vragen { grid-template-columns: 1fr; gap: 1.6rem; } }

.panel.pink .split-media img { aspect-ratio: 4 / 5; }

/* Scallop-rand (delipapier-gevoel) als sectie-overgang */
.scallop { height: 26px; background: var(--scallop-bg, var(--cream));
  -webkit-mask: radial-gradient(20px at 20px 0, transparent 98%, #000) repeat-x 0 0/40px 26px;
  mask: radial-gradient(20px at 20px 0, transparent 98%, #000) repeat-x 0 0/40px 26px; }

/* ---------- Feature cards (logo-icoon motief) ---------- */
.feature-grid { grid-template-columns: repeat(4, 1fr); }
.feature {
  background: var(--white); border-radius: var(--radius);
  padding: 1.8rem 1.5rem; border: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.feature .ic {
  width: 62px; height: 62px; border-radius: 18px;
  display: grid; place-items: center; margin-bottom: 1.1rem;
}
.feature .ic svg { width: 32px; height: 32px; }
.ic.c-terracotta { background: var(--terracotta); color: #fff; }
.ic.c-olive { background: var(--olive); color: #fff; }
.ic.c-pink { background: var(--pink); color: var(--ink); }
.ic.c-yellow { background: var(--yellow); color: var(--ink); }
.feature h3 { margin-bottom: .4rem; }
.feature p { color: var(--ink-soft); font-size: .96rem; }

/* ---------- Split blokken ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media img {
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  width: 100%; aspect-ratio: 5/4; object-fit: cover;
}
.split-copy h2 { margin: 1rem 0 1rem; }
.split-copy > p + p { margin-top: .8rem; }

/* ---------- Panel (kleurvlak) ---------- */
.panel { border-radius: var(--radius-lg); padding: clamp(2rem, 4vw, 3.5rem); }
.panel.cream { background: var(--cream-2); }
.panel.olive { background: var(--olive); color: var(--cream); }
.panel.olive .lead { color: #e9edd9; } /* solide, 5,33:1 op olijf */
.panel.pink { background: var(--pink-soft); }
.panel.terracotta { background: var(--terracotta-dark); color: #fff; }
.panel.terracotta .lead { color: #fff; }

/* ---------- Product kaarten ---------- */
.product-grid { grid-template-columns: repeat(3, 1fr); }
.product {
  background: var(--white); border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.product:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.product-img { aspect-ratio: 1/1; overflow: hidden; background: var(--cream-2); }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.product:hover .product-img img { transform: scale(1.06); }
.product-body { padding: 1.2rem 1.3rem 1.5rem; }
/* Klein label in Montserrat: het handschrift is voor één accent per sectie (DESIGN 4.2),
   niet voor zes kaartjes op een rij, en Hamiltone mist accenten en de &. */
.product-tag {
  display: inline-block; font-family: var(--font-body); font-weight: 600;
  font-size: .8rem; line-height: 1.2; letter-spacing: 0; text-transform: none;
  color: var(--olive-dark); margin-bottom: .45rem;
}
.product h3 { font-size: 1.25rem; margin-bottom: .35rem; }
.product p { color: var(--ink-soft); font-size: .94rem; }

/* ---------- Lijst met vinkjes ---------- */
.check-list { display: grid; gap: .7rem; }
.check-list li { position: relative; padding-inline-start: 1.7rem; }
.check-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .28rem;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--yellow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/72% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/72% no-repeat;
  background: var(--olive);
}
.check-list.on-dark li::before { background: var(--yellow); }

/* ---------- Openingstijden ---------- */
.hours { display: grid; gap: .2rem; max-width: 420px; }
.hours-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem .2rem; border-bottom: 1px solid var(--line);
}
.hours-row:last-child { border-bottom: 0; }
.hours-row .day { font-weight: 600; }
.hours-row .time { color: var(--ink-soft); }
.hours-row.closed .time { color: var(--rose-ink); font-weight: 600; }
.hours-row.today { background: var(--yellow-soft); border-radius: 12px; padding-inline: .8rem; border-bottom-color: transparent; }
.uren-noot { margin-top: .8rem; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }

/* ---------- Stat / prijsblok ---------- */
.pricebox {
  background: var(--white); border: 2px dashed var(--terracotta);
  border-radius: var(--radius); padding: 2rem; text-align: center;
}
.pricebox .amount { font-family: var(--font-display); font-size: 3rem; color: var(--terracotta); line-height: 1; }
.pricebox .unit { color: var(--ink-soft); font-weight: 600; }

/* ---------- Steps ---------- */
.steps { grid-template-columns: repeat(3, 1fr); counter-reset: step; }
.step { position: relative; padding-top: 1rem; }
.step .num {
  font-family: var(--font-display); font-size: 2.4rem;
  color: var(--rose-ink); line-height: 1; margin-bottom: .4rem;
}
.step h3 { margin-bottom: .35rem; }
.step p { color: var(--ink-soft); font-size: .96rem; }

/* ---------- Client / partner logos (nette chips, altijd zichtbaar) ---------- */
.clients { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: stretch; justify-content: center; }
.clients a, .clients .client-stil {
  display: grid; place-items: center; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: .8rem 1.5rem; min-width: 160px; min-height: 84px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.clients a:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.clients a.on-dark { background: var(--ink); border-color: transparent; }
.clients img { max-height: 46px; width: auto; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,3.5rem); }
/* Contactgegevens als rijen met een haarlijn, zoals de FAQ en de werelden (DESIGN 4.3).
   Geen iconen in gekleurde vierkantjes: dat is het template-patroon uit DESIGN §6. */
.contact-rijen { border-top: 2px solid var(--ink); }
.contact-rijen > .info-card + .info-card { margin-top: 0; }
.contact-rijen .hours { max-width: none; }
.contact-rijen .info-card > div > a { color: var(--terracotta-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.info-card {
  background: none; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 1.3rem .2rem; min-width: 0;
}
.info-card h3, .info-card h2.h3 { font-size: 1.15rem; margin-bottom: .2rem; }
/* h2.h3: kop op h2-niveau (geen sprong na de h1) met de maat van een h3 */
h2.h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.15; }
.info-card a, .info-card p { color: var(--ink-soft); }
.info-card a:hover { color: var(--terracotta-ink); }
/* Geen uitrekking naar de hoogte van de kolom ernaast: het beeld houdt zijn
   eigen verhouding en het bijschrift zijn eigen hoogte. Rekken leverde eerst een
   gat van 300px op, daarna een bijschrift van 357px hoog. */
.map-embed {
  align-self: start;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  background: var(--cream-2);
}
.map-embed a { display: block; }
.map-embed img { width: 100%; height: auto; display: block; }
.map-bron {
  background: var(--white); color: var(--ink-soft);
  font-size: .78rem; padding: .6rem .9rem; line-height: 1.4;
}
.map-bron a { color: var(--terracotta-ink); font-weight: 600; }
.map-bron a:hover { text-decoration: underline; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--terracotta-dark); color: #fff;
  border-radius: var(--radius-lg); padding: clamp(2.5rem, 5vw, 4rem);
  text-align: center; position: relative; overflow: hidden;
}
.cta-band h2 { color: #fff; }
.cta-band .lead { color: #fff; margin: .8rem auto 1.6rem; max-width: 52ch; }
.cta-band .btn-light:hover { background: var(--yellow); }
.cta-band .blob { position: absolute; border-radius: 50%; opacity: .18; }
.cta-band .blob.a { width: 260px; height: 260px; background: var(--yellow); top: -90px; left: -60px; }
.cta-band .blob.b { width: 200px; height: 200px; background: var(--pink); bottom: -70px; right: -40px; opacity: .28; }
.cta-band > :not(.blob) { position: relative; z-index: 1; }
@media (max-width: 720px) { .cta-band .blob.b { width: 140px; height: 140px; bottom: -80px; right: -60px; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--olive-dark); color: var(--cream); padding: clamp(3rem,6vw,4.5rem) 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.footer-grid h3, .footer-grid h2.h3 {
  font-family: var(--font-display); font-weight: 400;
  font-variation-settings: "wght" 700;
  font-size: 1.15rem; letter-spacing: 0; text-transform: none;
  color: var(--yellow); margin-bottom: 1.1rem;
}
.socials a:hover { background: var(--yellow); color: var(--ink); transform: translateY(-3px); }
.socials svg { width: 20px; height: 20px; }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .85rem; color: #cdd8bd; /* solide, 5,95:1 op olijf-nacht */
}

/* ---------- Page hero (subpagina's) ---------- */
.page-hero { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem,3vw,2.5rem); position: relative; }
.page-hero h1 { margin-bottom: .7rem; }
.page-hero .lead { max-width: 56ch; }
.breadcrumb { font-size: .88rem; color: var(--ink-soft); margin-bottom: 1rem; }
.breadcrumb a:hover { color: var(--terracotta-ink); }

/* Decoratief logo-tegelmotief in de page-hero (per pagina een ander tegel) */
.hero-tile {
  position: absolute; top: clamp(1rem, 3vw, 2.5rem); right: clamp(1rem, 4vw, 4rem);
  width: clamp(90px, 12vw, 168px); rotate: 6deg; z-index: 0;
  filter: drop-shadow(0 16px 26px rgba(28,23,18,.16));
  pointer-events: none;
}
@media (max-width: 720px) { .hero-tile { width: 84px; top: .5rem; right: .5rem; opacity: .9; } }

/* ---------- Editoriale categorie-index (vervangt icoon-kaartraster) ---------- */
.cat-index { border-top: 2px solid var(--ink); margin-top: 2.5rem; }
.cat-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: 1.2rem; padding: 1.25rem .3rem; border-bottom: 1px solid var(--line);
  transition: background .25s var(--ease);
}
.cat-row:hover { background: color-mix(in srgb, var(--acc, var(--terracotta)) 8%, transparent); }
.cat-row .cat-dot { width: 14px; height: 14px; border-radius: 4px; rotate: -8deg; background: var(--acc, var(--terracotta)); align-self: center; transition: transform .25s var(--ease); }
.cat-row:hover .cat-dot { transform: translateX(4px) rotate(90deg); }
.cat-row .cat-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.05; } /* 400, net als h1-h4: het Choco-bestand staat op 400 gedeclareerd; elk hoger gewicht kiest de Baloo-vulling (400-800) */
.cat-row .cat-desc { color: var(--ink-soft); font-size: 1rem; max-width: 52ch; }
@media (max-width: 760px) {
  .cat-row { grid-template-columns: auto 1fr; }
  .cat-row .cat-desc { grid-column: 2; }
}

/* Editoriale stat-strook (vervangt losse dashed prijsboxen) */
.statline {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem);
  border-block: 2px solid var(--ink); padding: 1.6rem .2rem; margin: 1.8rem 0;
}
.statline .stat { flex: 1; min-width: 130px; }
.statline .stat b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: var(--acc-ink, var(--acc, var(--terracotta))); }
.statline .stat span { color: var(--ink-soft); font-weight: 600; }
.statline--center .stat { text-align: center; }
.statline + p { max-width: 65ch; }
@media (max-width: 480px) {
  .statline--center { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .statline--center .stat { min-width: 0; }
  .statline--center .stat b { font-size: 1.9rem; }
  .statline:not(.statline--center) .stat { flex-basis: 100%; }
}
/* ---------- De plankkijker (borrelplanken) ----------
   Elke prijs is een knop; erop hoveren, tikken of ermee focussen toont een polaroid
   van die maat. Het polaroid is een native popover (top layer, licht-dismiss, Esc),
   main.js zet hem op zijn plek boven de prijs. Zonder JS: tikken werkt via
   popovertarget en het polaroid staat dan gecentreerd. Zonder popover-steun
   schakelt main.js naar een klasse. Foto's: assets/img/borrelplank-N-personen-*.webp. */
.plank-knop {
  display: block; width: 100%; min-height: 44px; margin: 0; padding: .3rem .2rem;
  border: 0; background: none; font: inherit; color: inherit; text-align: inherit;
  cursor: pointer; border-radius: var(--radius-sm);
  transition: translate .3s var(--ease);
}
.plank-knop b { transition: scale .3s var(--ease); transform-origin: 50% 100%; }
.plank-knop:hover b, .plank-knop:focus-visible b, .plank-knop[aria-expanded="true"] b { scale: 1.06; }
.plank-knop:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; box-shadow: 0 0 0 7px var(--yellow); }
.plank-knop span { display: block; }
.plank-hint { text-align: center; margin: .2rem auto 0; } /* margin auto: .statline + p zet een max-width */
.plank-hint .hand { font-size: clamp(1.45rem, 2.2vw, 1.8rem); color: var(--olive); rotate: -2deg; }
.plank-hint .als-muis { display: none; }
@media (hover: hover) and (pointer: fine) {
  .plank-hint .als-muis { display: inline-block; }
  .plank-hint .als-tik { display: none; }
}

.plankfoto.polaroid { /* dubbele klasse: wint van .polaroid { position: relative } verderop */
  display: none; position: fixed; inset: 0; margin: auto; /* zonder JS: midden in beeld */
  width: min(300px, 78vw); height: fit-content; border: 0; padding: 12px 12px 46px;
  overflow: visible; z-index: 120; pointer-events: none; /* puur kijken; anders flikkert de hover zodra hij de knop raakt */
  rotate: 2.2deg;
}
.plankfoto:popover-open, .plankfoto.is-open { display: block; }
.plankfoto.polaroid[data-geplaatst] { inset: auto; margin: 0; }
.plankfoto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.plankfoto .onderschrift { bottom: 9px; font-size: 1.35rem; color: var(--ink); }
.plankfoto .sticker { width: 58px; height: 58px; top: -20px; right: -18px; rotate: 12deg; }
.plankfoto::backdrop { background: transparent; }
/* Binnenkomen: even opveren vanuit de prijs. Uit: zachter weg. */
.plankfoto {
  opacity: 1; translate: 0 0;
  transition: opacity .28s var(--ease), translate .32s var(--ease), rotate .32s var(--ease), display .32s allow-discrete, overlay .32s allow-discrete;
}
@starting-style { .plankfoto:popover-open, .plankfoto.is-open { opacity: 0; translate: 0 14px; rotate: -3deg; } }
.plankfoto:not(:popover-open):not(.is-open) { opacity: 0; translate: 0 8px; }
@media (prefers-reduced-motion: reduce) {
  .plankfoto, .plank-knop, .plank-knop b { transition: none; }
  .plankfoto { rotate: 0deg; }
}

/* Smal blok op dezelfde linkerrand als de brede secties (stond als gecentreerde 820px-wrap). */
.wrap-smal > * { max-width: 820px; }

/* ---------- Gallery ---------- */
.gallery { grid-template-columns: repeat(4, 1fr); }
.gallery a { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1/1; box-shadow: var(--shadow-sm); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery a:hover img { transform: scale(1.08); }

/* ---------- FAQ accordion ---------- */
/* FAQ als rijen met dunne lijnen (DESIGN 4.3), geen stapel witte kaarten. */
.faq-list { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.faq-item {
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; overflow: hidden;
  transition: border-color .25s;
}
.faq-item[open] { border-bottom-color: var(--terracotta); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.15rem 2.6rem 1.15rem .2rem;
  font-family: var(--font-body); font-weight: 600; font-size: 1.12rem;
  color: var(--ink); display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--cream-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 5h2v14h-2z'/%3E%3Cpath fill='black' d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 5h2v14h-2z'/%3E%3Cpath fill='black' d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/16px no-repeat;
  background: var(--terracotta); transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--terracotta-ink); }
.faq-body { padding: 0 2.6rem 1.3rem .2rem; color: var(--ink-soft); }
.faq-body a { color: var(--terracotta-ink); font-weight: 600; }
.faq-body a:hover { text-decoration: underline; }

/* ---------- Instagram preview ---------- */
.ig-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.ig-grid { grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.ig-tile {
  position: relative; aspect-ratio: 1/1; border-radius: var(--radius-sm);
  overflow: hidden; box-shadow: var(--shadow-sm); display: block;
}
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ig-tile:hover img { transform: scale(1.08); }
.ig-tile::after {
  content: ""; position: absolute; inset: 0; background: rgba(28,23,18,.0);
  transition: background .3s; display: grid; place-items: center;
}
.ig-tile:hover::after { background: rgba(219,88,43,.55); }
.ig-tile .ig-ic {
  position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; color: #fff;
  opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s; z-index: 2;
}
.ig-tile:hover .ig-ic { opacity: 1; transform: scale(1); }
.ig-handle { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--terracotta-ink); }
.ig-handle svg { width: 22px; height: 22px; }
@media (max-width: 960px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Reveal animatie ----------
   Content is standaard zichtbaar (crawlers, AI-bots, no-JS, headless).
   Alleen als JS actief is (html.js) verbergen we tot .in getriggerd wordt. */
/* GEEN opacity in een onthulling. Blijft de klasse hangen (achtergrondtab,
   headless renderer, waarnemer die niet vuurt, verborgen paneel), dan is de
   inhoud met opacity:0 voorgoed weg. Alleen schuiven: mislukt de onthulling,
   dan staat de tekst er gewoon, hooguit 20px verschoven.
   Zie geheugen gotcha-onthulling-blijft-hangen. */
.reveal { transition: transform .7s var(--ease); }
.js .reveal { transform: translateY(20px); }
.js .reveal.in { transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-media { max-width: 460px; margin-inline: auto; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 1.5rem; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
/* De horizontale menubalk is met acht items plus de taalwissel ongeveer 1030px
   breed. De drempel stond op 720px, waardoor de balk tussen 720 en 1080 uit het
   scherm liep. Vanaf 1080px omlaag dus de hamburger. */
@media (max-width: 1080px) {
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(80%, 320px);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: .3rem; background: var(--cream); padding: 5.5rem 1.5rem 2rem;
    box-shadow: -20px 0 60px -20px rgba(0,0,0,.3);
    transform: translateX(100%); visibility: hidden;
    transition: transform .35s var(--ease), visibility 0s .35s;
    z-index: var(--z-nav-panel);
  }
  /* visibility: dicht menu niet tabbaar en niet in de toegankelijkheidsboom (WCAG 2.4.3/2.4.7). */
  body.nav-open .nav-links { transform: none; visibility: visible; transition: transform .35s var(--ease); }
  .nav-links a { padding: .9rem 1rem; font-size: 1.05rem; border-radius: 14px; }
  .nav-links a:hover { background: var(--cream-2); }
  .nav-cta { margin: .5rem 0 0; }
  .nav-toggle { display: flex; z-index: var(--z-nav-toggle); order: 4; }
  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(28,23,18,.4);
    opacity: 0; pointer-events: none; transition: opacity .3s; z-index: var(--z-nav-backdrop);
  }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
}
@media (max-width: 560px) {
  .feature-grid, .product-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-badge.tl { left: 2%; }
  .hero-badge.br { right: 2%; }
}

/* =========================================================
   STIJL 6 — DE COMBI
   De bouwstenen uit DESIGN.md. Dit blok staat achteraan en
   overschrijft bewust een deel van het oudere systeem.
   ========================================================= */

/* ---------- Gordijn bij het laden ----------
   Wordt door main.js in de DOM gezet, nooit in de HTML. Zonder JS bestaat het
   niet, dus een pagina kan nooit onder een vlak blijven liggen. */
.curtain {
  position: fixed; inset: 0; z-index: 300;
  background: var(--olive); pointer-events: none;
  animation: curtain 1s var(--ease) .25s forwards;
}
@keyframes curtain { to { transform: translateY(-101%); } }
@media (prefers-reduced-motion: reduce) { .curtain { display: none; } }

/* ---------- Handschrift-hulpklasse ---------- */
.hand {
  font-family: var(--font-hand); font-weight: 400;
  font-size: clamp(1.4rem, 3.2vw, 2.4rem); line-height: 1.15;
  rotate: -3deg; display: inline-block;
}

/* ---------- De drenched hero ----------
   Olijfgroen vlak dat het hele blok vult (sinds 11 sep 2026, op verzoek van
   Anne: "groen vlak met roze letters"). Op de homepage bijna een scherm, op
   subpagina's compact. Alleen logokleuren, geen tinten. */
.page-hero, .hero.drenched {
  /* Logo-olijf #486830. Roze #f2b4d2 haalt hierop 3,71:1 en mag dus alleen
     groot of vet (kop, vette lead). Creme haalt 5,91:1 en draagt alle kleine
     of dunne tekst. Geel 5,29:1 blijft de accentregel. */
  background: var(--olive);
  color: var(--cream);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.6rem, 5vw, 4.2rem);
  overflow: hidden;
}
.page-hero h1, .hero.drenched h1 { color: var(--pink); }
@media (max-width: 400px) { .page-hero h1 { font-size: clamp(2.1rem, 10.4vw, 2.6rem); } }
/* Lead in roze kan alleen als "grote tekst": minimaal 19px en gewicht 700. */
.page-hero .lead, .hero.drenched .lead {
  color: var(--pink); font-weight: 700;
  font-size: clamp(1.2rem, 1.6vw, 1.3rem);
}
/* De kicker is dun handschrift, geen grote vette kop: creme, niet roze. */
.page-hero .eyebrow, .hero.drenched .eyebrow {
  color: var(--cream);
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
}
/* De markeerstreep staat op z-index -1 en zou anders achter de terracotta
   achtergrond van de sectie vallen. Een eigen stacking context op de kop
   houdt hem binnen de kop, dus boven het vlak. */
.page-hero h1, .hero.drenched h1 { position: relative; z-index: 0; }
.page-hero .breadcrumb { color: var(--cream); }
.page-hero .breadcrumb a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.page-hero .breadcrumb a:hover { color: var(--yellow); }
.page-hero .split-media img { box-shadow: 0 30px 70px -30px rgba(28,23,18,.6); }
.page-hero .hero-tile { filter: drop-shadow(0 18px 30px rgba(28,23,18,.3)); z-index: 2; }

/* Knoppen op het olijfvlak: crème, zonder harde schaduw (leest op groen als een rand). */
.page-hero .btn-primary, .hero.drenched .btn-primary {
  background: var(--cream); color: var(--olive); border-color: transparent;
  box-shadow: none;
}
.page-hero .btn-primary:hover, .hero.drenched .btn-primary:hover {
  background: var(--cream); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(28,23,18,.35);
}
.page-hero .btn-ghost, .hero.drenched .btn-ghost {
  color: var(--cream); border-color: var(--cream); background: transparent;
}
.page-hero .btn-ghost:hover, .hero.drenched .btn-ghost:hover {
  background: var(--cream); color: var(--olive); border-color: var(--cream); transform: translateY(2px);
}
/* De CTA-band blijft terracotta; die knop houdt zijn eigen kleuren. */
.cta-band .btn-light {
  background: var(--cream); color: var(--terracotta-ink); border-color: transparent;
  box-shadow: none;
}
.cta-band .btn-light:hover {
  background: var(--cream); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(28,23,18,.35);
}

/* ---------- Poster-hero van de homepage ---------- */
.hero.drenched {
  min-height: 78svh; display: grid; place-items: center;
  padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.hero.drenched .poster { position: relative; width: min(1000px, 100%); margin-inline: auto; }
.hero.drenched h1 {
  font-size: clamp(2.5rem, 7.4vw, 5.2rem); line-height: 1; margin: 0;
}
.hero.drenched h1 span { display: block; }
.hero.drenched h1 .r2 { color: var(--yellow); }
.hero-plank {
  position: relative; z-index: 2; width: min(340px, 58vw);
  margin: -1.05em auto 0; border-radius: 50%; overflow: hidden;
  aspect-ratio: 1; box-shadow: 0 30px 70px -30px rgba(28,23,18,.6);
}
.hero-plank img { width: 100%; height: 100%; object-fit: cover; }
.hero.drenched .hand {
  /* Net onder de plank, niet erover: crème op een lichte foto haalt geen
     contrast, ook niet met een tekstschaduw. */
  position: relative; z-index: 3; display: block;
  margin-top: -.2em; color: var(--cream);
  text-shadow: 0 4px 20px rgba(28,23,18,.35);
  font-size: clamp(1.6rem, 4vw, 2.6rem); rotate: -4deg;
}
.hero.drenched .lead { max-width: 40ch; margin: 1.6rem auto 0; }
.hero.drenched .hero-actions { justify-content: center; }

/* ---------- Payoff: de drieslag ---------- */
.payoff { padding: clamp(4rem, 8vw, 6.5rem) 0; text-align: center; }
.payoff p {
  font-family: var(--font-display); font-weight: 400;
  font-variation-settings: "wght" 760;
  font-size: clamp(1.8rem, 4.6vw, 3.1rem); line-height: 1.25;
  letter-spacing: -.015em;
}
.payoff em { font-style: normal; color: var(--terracotta-ink); }
.payoff .rule {
  width: 64px; height: 3px; border-radius: 99px;
  background: var(--terracotta); margin: 2rem auto 0; transform-origin: center;
}
.js .payoff.reveal .rule { transform: scaleX(.2); transition: transform 1.1s var(--ease) .3s; }
.js .payoff.reveal.in .rule { transform: scaleX(1); }

/* ---------- Polaroid met tegel-stickers ---------- */
.polaroid {
  position: relative; background: #fff; padding: 14px 14px 52px;
  box-shadow: 0 22px 50px -24px rgba(28,23,18,.4);
  rotate: 2.2deg; transition: rotate .35s var(--ease);
}
.polaroid:hover { rotate: 0deg; }
.polaroid img { width: 100%; height: auto; }
.polaroid .onderschrift {
  position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
  font-family: var(--font-hand); font-size: 1.3rem; color: var(--ink-soft);
}
.polaroid .sticker {
  position: absolute; width: 72px; height: 72px; object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(28,23,18,.18));
}
.polaroid .sticker.s1 { top: -26px; right: -20px; }
.polaroid .sticker.s2 { bottom: -22px; left: -24px; }

/* ---------- Winkelpaneel over de foto ----------
   Het paneel is rechthoekig: een opgeplakt vel, geen kaart. */
/* Volle-breedte foto, maar het paneel volgt hetzelfde raster als .wrap,
   zodat de linkerkant uitlijnt met de rest van de pagina. */
.winkel {
  position: relative; min-height: 76svh; overflow: hidden;
  display: grid; align-items: center;
  grid-template-columns: 1fr min(var(--maxw), 92%) 1fr;
}
.winkel-foto { position: absolute; inset: -12% 0; }
.winkel-foto img { width: 100%; height: 100%; object-fit: cover; }
.winkel-panel {
  grid-column: 2; justify-self: start;
  position: relative; z-index: 2;
  margin: clamp(2rem, 4vw, 3.5rem) 0; max-width: 430px;
  background: var(--olive); color: var(--cream);
  padding: clamp(2.2rem, 4vw, 3.2rem) clamp(1.8rem, 3vw, 2.6rem);
}
.winkel-panel .hand { color: var(--pink); font-size: 1.5rem; }
.winkel-panel h2 { color: var(--cream); margin: .5rem 0 .9rem; }
.winkel-panel p { color: #e9edd9; font-weight: 400; font-size: .98rem; }
.winkel-panel .btn { background: var(--cream); color: var(--olive-dark); margin-top: 1.2rem; }
.winkel-panel .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(28,23,18,.35); }

/* ---------- Werelden-rijen: naam in display, hover schuift de rij ---------- */
.cat-row > * { transition: transform .35s var(--ease); }
.cat-row:hover > * { transform: translateX(10px); }

/* ---------- Scroll-engine: parallax en rotatie ---------- */
[data-scroll] { will-change: transform; }
.js [data-reveal] { transform: translateY(24px); transition: transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { transform: none !important; }
  [data-scroll] { transform: none !important; }
}

/* ---------- Responsive aanvullingen ---------- */
@media (max-width: 860px) {
  .winkel { min-height: 0; }
  .winkel-foto { position: relative; inset: auto; height: 46svh; grid-column: 1 / -1; }
  .winkel-panel { margin: -3rem 0 0; max-width: none; justify-self: stretch; }
}
@media (max-width: 560px) {
  .polaroid .sticker { width: 54px; height: 54px; }
  .hero.drenched { min-height: 0; padding-bottom: 3rem; }
  /* De kop is op mobiel relatief kleiner dan de plank, dus minder overlap:
     anders dekt de plank de laatste regel van de kop af. */
  .hero-plank { margin-top: -.4em; }
}

/* ---------- Werelden-rijen met de logo-tegels (DESIGN.md 4.3) ----------
   De linkbare variant van .cat-row: tegel, naam met ondertitel, pijl.
   Vervangt een kaartraster van gelijke kaarten. */
.wereld {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: clamp(1rem, 2.5vw, 1.6rem); align-items: center;
  padding: 1.5rem .2rem; border-top: 1px solid var(--line);
}
.wereld:last-child { border-bottom: 1px solid var(--line); }
.wereld > * { transition: transform .35s var(--ease); }
.wereld:hover > *, .wereld:focus-visible > * { transform: translateX(10px); }
.wereld img { width: 56px; height: 56px; object-fit: contain; }
.wereld .naam {
  font-family: var(--font-display); font-weight: 400;
  font-variation-settings: "wght" 760;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.05;
  letter-spacing: -.015em; display: block;
}
.wereld .sub { display: block; font-size: .96rem; color: var(--ink-soft); margin-top: .25rem; max-width: 52ch; }
.wereld .pijl { font-size: 1.4rem; color: var(--terracotta-ink); }
@media (max-width: 560px) {
  .wereld { grid-template-columns: 44px 1fr; padding: 1.2rem .1rem; }
  .wereld img { width: 44px; height: 44px; }
  .wereld .pijl { display: none; }
}

/* ---------- Openingstijden binnen het olijfpaneel ---------- */
.winkel-panel .hours { max-width: none; margin-top: 1.2rem; }
.winkel-panel .hours-row { border-bottom-color: rgba(251,246,236,.22); padding: .55rem .1rem; }
.winkel-panel .hours-row .day { color: var(--cream); font-weight: 500; }
.winkel-panel .hours-row .time { color: #e9edd9; }
.winkel-panel .uren-noot { color: #e9edd9; }
.winkel-panel .hours-row.closed .time { color: var(--pink); font-weight: 600; }
/* Markering zonder lichtere ondergrond: die drukte crème en roze onder 4,5:1. */
.winkel-panel .hours-row.today {
  background: none; box-shadow: inset 3px 0 0 var(--yellow); border-radius: 0;
  padding-inline: .7rem; border-bottom-color: transparent;
}


/* ---------- Intro boven de vier werelden ----------
   Stond in een smalle linkerkolom, waardoor tweederde van de breedte leeg bleef.
   Nu kop links en lead rechts, zodat de regel de volle breedte draagt. */
.offers-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 4vw, 4rem); align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.offers-intro h2 { margin: 0; }
.offers-intro .lead { margin: 0; max-width: 46ch; }
@media (max-width: 760px) {
  .offers-intro { grid-template-columns: 1fr; gap: .8rem; }
}

/* Label boven een blok: handschrift, geen genummerde markering. */
.offer-num, .clients-label {
  display: block; font-family: var(--font-hand); font-weight: 400;
  font-size: 1.2rem; line-height: 1.1; letter-spacing: 0; text-transform: none;
  color: var(--acc-ink, var(--terracotta-ink)); margin-bottom: .35rem; rotate: -1.5deg;
}
.clients-label { color: var(--olive-dark); margin-bottom: 1rem; }

/* ---------- Footer-logo ----------
   De wordmark is zwart en stond direct op het olijfgroen. Een crème vlak
   eronder geeft het logo lucht en houdt de tegelkleuren kloppend. */
.site-footer .footer-logo {
  display: inline-block; background: var(--cream);
  padding: .8rem 1.1rem; border-radius: 18px; margin-bottom: 1.2rem;
}
.site-footer .footer-logo img { height: 52px; width: auto; display: block; }


/* ---------- Vrijstaand beeld ----------
   Een uitgeknipt product hoort geen kader, geen afgeronde hoek en geen
   rechthoekige schaduw te krijgen; drop-shadow volgt de vorm zelf. */
.split-media img.cutout,
.panel .split-media img.cutout {
  border-radius: 0; box-shadow: none;
  aspect-ratio: auto; object-fit: contain;
  width: min(100%, 400px); margin-inline: auto;
  filter: drop-shadow(0 22px 30px rgba(28, 23, 18, .2));
}


/* ---------- Logowand op een rij ----------
   Twaalf logo's (2 sep 2026: vijf partners erbij). Zes per rij op breed scherm,
   dus twee volle rijen. Elke breakpoint deelt 12 zonder rest, zodat er nooit een
   halve rij overblijft: 6 / 4 / 3 / 2. */
.clients.rij {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .8rem; justify-content: stretch;
}
.clients.rij a, .clients.rij .client-stil {
  min-width: 0; min-height: 80px; padding: .7rem .9rem;
}
.clients.rij img { max-height: 40px; }
@media (max-width: 1080px) { .clients.rij { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .clients.rij { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .clients.rij { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ---------- Menukaart ----------
   Gerechten als regels met een haarlijn ertussen, in dezelfde taal als de
   werelden-rijen. Geen kaartjes: een kaart hoort een kaart te zijn. */
.menukaart { border-top: 1px solid var(--line); margin-top: 1.6rem; }
.menukaart .gerecht { padding: 1rem .2rem; border-bottom: 1px solid var(--line); }
.menukaart .naam {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-variation-settings: "wght" 760; letter-spacing: -.015em;
  font-size: clamp(1.15rem, 2.1vw, 1.45rem); line-height: 1.15;
}
.menukaart .detail {
  display: block; color: var(--ink-soft); font-size: .96rem;
  margin-top: .2rem; max-width: 56ch;
}


/* ---------- Taalwissel ----------
   Staat naast het menu, niet erin: als negende menu-item liep de balk over
   twee regels en ontstond er horizontale overflow. Zo blijft hij ook op
   mobiel zichtbaar zonder dat je eerst het menu moet openen, wat voor een
   Duitse bezoeker juist het punt is. */
.nav .taal-link {
  flex: none; order: 3;
  font-family: var(--font-body); font-weight: 500; font-size: .88rem;
  color: var(--ink-soft); padding: .5rem .8rem; border-radius: 100px;
  transition: color .2s, background .2s;
}
.nav .taal-link:hover { color: var(--terracotta-ink); background: var(--cream-2); }
@media (max-width: 1080px) { .nav .taal-link { margin-left: auto; margin-right: .2rem; } }


/* ---------- Footer: tekst en knoppen ----------
   Deze regels waren op 31 augustus per ongeluk verdwenen doordat een regex over
   een regeleinde heen greep. Hersteld, en meteen zonder doorzichtige tekst:
   een kleur met opacity meet een contrastscript niet mee, Lighthouse wel. */
.footer-brand p { color: #dfe6d2; font-size: .95rem; max-width: 32ch; }
.footer-links li { margin-bottom: .55rem; }
.footer-links a { color: var(--cream); font-size: .96rem; display: inline-block; padding: .25rem 0; }
.footer-links a:hover { color: var(--yellow); }
.footer-contact p { color: #dfe6d2; font-size: .95rem; margin-bottom: .5rem; }
.footer-contact a { color: var(--cream); }
.footer-contact a:hover { color: var(--yellow); }
.socials { display: flex; gap: .6rem; margin-top: 1rem; }
.socials a {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255, 255, 255, .12);
  display: grid; place-items: center; transition: .25s;
}


/* ---------- Leesbaarheid op donkere vlakken ----------
   Gemeten met een contrastscan over de opgemaakte pagina, niet geschat.
   De rose kicker haalde op olijf 1,04:1 en was praktisch onzichtbaar. */
.panel.olive .eyebrow,
.panel.olive .eyebrow.is-rose,
.panel.olive .eyebrow.is-olive { color: var(--cream); }        /* 5,91:1 */
.winkel-panel .hours-row.closed .time { color: var(--pink-soft); } /* 4,97:1 */
.panel.olive .hours-row.closed .time { color: var(--pink-soft); }

/* Links in een tekst op de terracotta hero: terracotta-ink op terracotta is
   onleesbaar (1,05:1). Creme haalt 4,80:1. */
.page-hero .lead a, .hero.drenched .lead a,
.page-hero p a, .hero.drenched p a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.page-hero .lead a:hover, .hero.drenched .lead a:hover { color: var(--yellow); }

/* ================================================================
   SCROLL-GEDREVEN LEVEN (2 september 2026, versie 2: duidelijker)
   CSS-only via animation-timeline. Geen JS, geen library, geen laadtijd.

   Vier regels, uit eerdere schade geleerd:
   1. Nooit opacity op tekst of beeld. Een browser zonder ondersteuning, een
      crawler of een bezoeker zonder JS moet alles gewoon zien.
   2. Alleen `translate`, `scale`, `rotate` en `clip-path`. Die staan naast
      `transform`, dus geen botsing met de JS-reveal en de parallax.
   3. Alles binnen @supports plus prefers-reduced-motion: no-preference.
   4. Niet elke sectie dezelfde onthulling. Dat is de reflex die het AI maakt,
      en DESIGN.md verbiedt hem expliciet. Beeld veegt, kaarten kantelen,
      koppen schuiven, cijfers ploppen: elk zijn eigen gebaar.
   ================================================================ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* --- Voortgangsbalk. Vertelt hoe ver je bent, in de merkkleuren. --- */
    body::after {
      content: ""; position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 120;
      background: linear-gradient(90deg, var(--terracotta), var(--rose), var(--yellow));
      transform-origin: 0 50%; scale: 0 1;
      animation: kk-voortgang linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes kk-voortgang { to { scale: 1 1; } }

    /* --- Beeld veegt open. Het gebaar van een kaasschaaf over de plank. --- */
    .split-media img, .panel img {
      animation: kk-veeg-op linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 42%;
    }
    @keyframes kk-veeg-op {
      from { clip-path: inset(28% 0 0 0 round 18px); scale: 1.09; }
      to   { clip-path: inset(0 0 0 0 round 18px);   scale: 1; }
    }

    /* Om en om: de tweede split per pagina veegt vanaf de zijkant, zodat
       twee opeenvolgende secties niet hetzelfde trucje herhalen. */
    .split:nth-of-type(even) .split-media img {
      animation-name: kk-veeg-zij;
    }
    @keyframes kk-veeg-zij {
      from { clip-path: inset(0 0 0 34% round 18px); scale: 1.07; }
      to   { clip-path: inset(0 0 0 0 round 18px);   scale: 1; }
    }

    /* --- De winkelfoto komt uit de diepte, met het olijfpaneel eroverheen. --- */
    .winkel-foto img {
      animation: kk-winkel linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes kk-winkel { from { scale: 1.16; } to { scale: 1.02; } }

    /* --- Kaarten komen omhoog en kantelen recht. Speels, past bij de tegels. --- */
    .product, .step, .info-card, .clients.rij > * {
      animation: kk-kaart linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 92%;
    }
    @keyframes kk-kaart {
      from { translate: 0 46px; rotate: -1.6deg; scale: .965; }
      to   { translate: 0 0;    rotate: 0deg;    scale: 1; }
    }
    /* Even kaarten kantelen de andere kant op: een rij wordt een waaier. */
    .product:nth-child(even), .step:nth-child(even),
    .info-card:nth-child(even), .clients.rij > *:nth-child(even) {
      animation-name: kk-kaart-spiegel;
    }
    @keyframes kk-kaart-spiegel {
      from { translate: 0 46px; rotate: 1.6deg; scale: .965; }
      to   { translate: 0 0;    rotate: 0deg;   scale: 1; }
    }

    /* --- Grote koppen schuiven onder een rand vandaan. Tekst blijft tekst:
           clip-path, geen opacity, dus voorleessoftware en crawlers zien alles. --- */
    .split-copy h2, .center.stack h2, .cta-band h2 {
      animation: kk-kop linear both;
      animation-timeline: view();
      animation-range: entry 12% entry 78%;
    }
    /* De from-state laat de bovenste 60% van de kop staan: een stilstaande
       timeline (print, full-page-capture, oude engine) mag tekst nooit
       volledig wegknippen. Zie de gotcha "onthulling blijft hangen". */
    @keyframes kk-kop {
      from { clip-path: inset(0 0 40% 0); translate: 0 26px; }
      to   { clip-path: inset(0 0 -18% 0); translate: 0 0; }
    }

    /* --- Cijfers ploppen. De prijs is het nieuws op die pagina. --- */
    .statline .stat b {
      animation: kk-cijfer linear both;
      animation-timeline: view();
      animation-range: entry 20% entry 85%;
    }
    @keyframes kk-cijfer {
      from { scale: .72; rotate: -5deg; }
      to   { scale: 1;   rotate: 0deg; }
    }
    .statline .stat:nth-child(2) b { animation-range: entry 26% entry 90%; }
    .statline .stat:nth-child(3) b { animation-range: entry 32% entry 95%; }

    /* --- De tegel in de paginakop draait ruim mee. Merkgebaar, geen sier. --- */
    .hero-tile {
      animation: kk-tegel linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes kk-tegel {
      from { rotate: -16deg; translate: 0 -28px; scale: .9; }
      to   { rotate: 14deg;  translate: 0 34px;  scale: 1.06; }
    }


    /* --- De CTA-band komt naar voren, de blobs drijven mee. --- */
    .cta-band { animation: kk-cta linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
    @keyframes kk-cta { from { scale: .93; translate: 0 30px; } to { scale: 1; translate: 0 0; } }
    .cta-band .blob { animation: kk-blob linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes kk-blob { from { translate: -26px 18px; rotate: -12deg; } to { translate: 26px -18px; rotate: 12deg; } }

    /* --- Instagram-tegels: schaakbordritme, niet zes keer hetzelfde. --- */
    .ig-tile img { animation: kk-tegelfoto linear both; animation-timeline: view(); animation-range: entry 0% entry 88%; }
    @keyframes kk-tegelfoto { from { scale: 1.14; } to { scale: 1; } }
    .ig-tile:nth-child(odd) img { animation-name: kk-tegelfoto-zij; }
    @keyframes kk-tegelfoto-zij { from { scale: 1.14; translate: 14px 0; } to { scale: 1; translate: 0 0; } }
  }
}

/* ==========================================================================
   HET APP-LUIKJE  (.kk-app)
   Zwevende WhatsApp-ingang linksonder. Geen groene platform-bubbel maar de
   eigen taal: olijfplaatje met harde schaduw (zelfde idioom als de knop in
   het winkelpaneel), handschrift-label en een tekstballon waarvan de gaten
   kaasgaten zijn. Bij hover typen die gaten als drie puntjes.
   Zonder JS staat hij er gewoon: zichtbaar is de standaard, JS verbergt.
   ========================================================================== */
.kk-app {
  position: fixed;
  left: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 110;
}

.kk-app-link {
  --kk-app-bg: var(--olive);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 52px;
  padding: .5rem 1.1rem .5rem .62rem;
  border-radius: 999px;
  background: var(--kk-app-bg);
  color: var(--cream);              /* 5,9:1 op olijf */
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}

.kk-app-link:hover,
.kk-app-link:focus-visible {
  --kk-app-bg: var(--olive-dark);   /* 8,2:1 */
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(28,23,18,.35);
}

/* Tweekleurige ring: inkt leest op crème, geel op de donkere footer. */
.kk-app-link:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--yellow);
}

.kk-app-badge {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.kk-app-badge svg { width: 30px; height: 30px; display: block; }
.kk-app-bubble { fill: var(--cream); }
.kk-app-hole   { fill: var(--kk-app-bg); transition: fill .25s var(--ease); }

/* Het label. Montserrat, niet Hamiltone: het handschrift is een accentfont en
   wordt op knopformaat pap. Leesbaarheid wint hier van stem; de stem zit in de
   woordkeuze en in het kaasgat-icoon. Onder 560px alleen het luikje zelf. */
.kk-app-label {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .002em;
  white-space: nowrap;
}

@media (max-width: 559px) {
  .footer-bottom { padding-bottom: 4.5rem; }
  .kk-app-label { display: none; }
  .kk-app-link { padding: .5rem; }
}

/* Beweging: een moment. Het luikje komt schuin binnenrollen zodra de bezoeker
   voorbij de hero is; daarna typen alleen de kaasgaten bij hover. */
.js .kk-app {
  transition: opacity .42s var(--ease), transform .42s var(--ease), visibility .42s;
}

.js .kk-app[data-tucked] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) rotate(-6deg);
  pointer-events: none;
}

.kk-app-link:hover .kk-app-hole,
.kk-app-link:focus-visible .kk-app-hole {
  animation: kk-app-typen 1.15s var(--ease) infinite;
}
.kk-app-link:hover .kk-app-hole:nth-of-type(2),
.kk-app-link:focus-visible .kk-app-hole:nth-of-type(2) { animation-delay: .13s; }
.kk-app-link:hover .kk-app-hole:nth-of-type(3),
.kk-app-link:focus-visible .kk-app-hole:nth-of-type(3) { animation-delay: .26s; }

@keyframes kk-app-typen {
  0%, 62%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-1.6px); }
}

/* Het luikje wijkt voor het open menu. */
body.nav-open .kk-app { opacity: 0; visibility: hidden; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .kk-app, .kk-app-link, .kk-app-hole { transition: none; }
  .js .kk-app[data-tucked] { transform: none; }
  .kk-app-link:hover .kk-app-hole,
  .kk-app-link:focus-visible .kk-app-hole { animation: none; }
  .kk-app-link:hover, .kk-app-link:focus-visible { transform: none; }
}

/* ---------- Bestelformulier (bestellen.html) ----------
   Rijen met een dunne lijn, geen kaarten (DESIGN.md 4.3). Het overzicht is een
   opgeplakt olijfvel zonder ronde hoeken, net als het paneel over de winkelfoto.
   Brede elementregels via :where(), zodat gerichte uitzonderingen altijd winnen. */
.bestel-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
@media (max-width: 960px) { .bestel-grid { grid-template-columns: minmax(0, 1fr); } }
.bestel-intro { max-width: 62ch; color: var(--ink-soft); margin-bottom: 2.4rem; }
.bestel-blok { border: 0; margin: 0 0 2.8rem; padding: 0; min-width: 0; border-top: 2px solid var(--ink); }
.bestel-blok legend { padding: 1.3rem 0 .2rem; float: left; width: 100%; }
.bestel-blok legend + * { clear: both; }
.blok-sub { color: var(--ink-soft); margin: .1rem 0 .6rem; }
.velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.3rem; margin-top: .8rem; }
.veld-breed { grid-column: 1 / -1; }
@media (max-width: 620px) { .velden { grid-template-columns: minmax(0, 1fr); } }
.veld label { display: block; font-weight: 600; font-size: .96rem; margin-bottom: .35rem; }
.optioneel { font-weight: 400; color: var(--ink-soft); }
.veld :where(input, textarea) {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  border: 2px solid var(--ink); border-radius: var(--radius-sm);
  padding: .75rem 1rem; min-height: 50px;
}
.veld :where(textarea) { resize: vertical; min-height: 7.5rem; }
.bestel-grid :where(input, textarea, button):focus-visible { outline: 3px solid var(--terracotta-dark); outline-offset: 2px; }
.bestel-grid [aria-invalid="true"] { border-color: var(--terracotta-dark); background: #fff4ef; }
.veld-hint { font-size: .92rem; color: var(--ink-soft); margin-top: .9rem; max-width: 62ch; }
.fout-bij-veld { font-size: .9rem; font-weight: 600; color: var(--terracotta-ink); margin-top: .4rem; }

.bestel-rij {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
  gap: .6rem 1.2rem; padding: .85rem .4rem; border-bottom: 1px solid var(--line);
  transition: background .25s var(--ease);
}
.bestel-rij.is-gekozen { background: color-mix(in srgb, var(--yellow-soft) 55%, transparent); }
.rij-naam { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.15; cursor: pointer; }
.rij-sub { display: block; color: var(--ink-soft); font-size: .92rem; }
.rij-prijs { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.aantal { display: inline-flex; align-items: center; border: 2px solid var(--ink); border-radius: 100px; background: #fff; }
.aantal input {
  width: 3.4rem; min-height: 44px; border: 0; background: transparent; text-align: center;
  font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink);
  -moz-appearance: textfield; appearance: textfield; border-radius: 100px;
}
.aantal input::-webkit-outer-spin-button, .aantal input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.aantal-knop {
  width: 44px; height: 44px; border: 0; border-radius: 100px; background: transparent;
  font: inherit; font-size: 1.35rem; line-height: 1; color: var(--ink); cursor: pointer;
  transition: background .2s var(--ease);
}
.aantal-knop:hover { background: var(--cream-2); }
@media (max-width: 520px) {
  .bestel-rij { grid-template-columns: minmax(0, 1fr) auto; }
  .rij-prijs { grid-column: 1; grid-row: 2; font-size: .95rem; }
  .bestel-rij .aantal { grid-column: 2; grid-row: 1 / span 2; }
}

.bestel-overzicht {
  position: sticky; top: 6.5rem;
  background: var(--olive); color: var(--cream);
  padding: clamp(1.5rem, 3vw, 2.1rem);
}
.bestel-overzicht .hand { color: var(--cream); font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.bestel-overzicht h2 { color: var(--cream); margin: .1rem 0 1rem; }
.overzicht-lijst { border-top: 1px solid rgba(251, 246, 236, .35); }
.overzicht-lijst li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid rgba(251, 246, 236, .35); font-size: .96rem;
}
.overzicht-lijst .overzicht-leeg { display: block; }
.overzicht-bedrag { white-space: nowrap; font-variant-numeric: tabular-nums; }
.overzicht-totaal { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0 .3rem; font-size: 1.15rem; }
.overzicht-totaal strong { font-weight: 700; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.overzicht-noot { font-size: .92rem; margin-bottom: 1.2rem; }
.bestel-fout { background: var(--cream); color: var(--terracotta-ink); font-weight: 600; padding: .8rem 1rem; margin-bottom: 1rem; font-size: .95rem; }
.bestel-klaar { margin-top: 1rem; font-weight: 600; }
.bestel-overzicht .btn-primary { width: 100%; justify-content: center; min-height: 52px; background: var(--cream); color: var(--olive); box-shadow: none; }
.bestel-overzicht .btn-primary:hover { background: var(--cream); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(28,23,18,.35); }
.bestel-overzicht .btn-primary:focus-visible, .overzicht-mail:focus-visible { outline-color: var(--yellow); }
.overzicht-mail {
  display: block; width: 100%; min-height: 44px; margin-top: .4rem; border: 0; background: transparent;
  font: inherit; color: var(--cream); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.overzicht-mail:hover { color: var(--yellow); }
@media (max-width: 960px) { .bestel-overzicht { position: static; } }