/* Kopfont: Dela Gothic One (lokaal, één gewicht — geen faux bold/italic) */
@font-face {
  font-family: 'Dela Gothic One';
  src: url('Huis van Hartig/Website Fonts/DelaGothicOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Officiële merkkleuren — Brandbook juni 2026 */
  --espresso: #3a2a24;  /* hoofdkleur          */
  --terra:    #a64b2a;  /* achtergrond donker / accent (oranje) */
  --terra-dk: #8a3d21;  /* donkerder terracotta voor hover */
  --olive:    #556b2f;  /* accent (duurzaam/plantaardig) */
  --cream:    #e8dccb;  /* crème grijs (accent) */
  --cream-wit:#f4ebdd;  /* achtergrond licht   */
  --cream-dk: #d9cbb6;  /* afgeleide lijnkleur */

  --terra-soft: rgba(166, 75, 42, 0.26);
  --olive-soft: rgba(85, 107, 47, 0.22);
}

html { scroll-behavior: smooth; }
/* LET OP: geen overflow-x op html/body zetten — elke niet-visible waarde
   (ook clip) breekt position:sticky van de gepinde secties in Chromium.
   Secties die reveal-offsets buiten beeld hebben, clippen zichzelf. */

body {
  background: var(--cream-wit);
  color: var(--espresso);
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─── SCROLL-VOORTGANGSBALK ────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 200;
  background: linear-gradient(90deg, var(--terra), var(--olive));
  transition: width 0.08s linear;
}

/* ─── NAV ──────────────────────────────────────── */
nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 1.1rem 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.35s, backdrop-filter 0.35s, box-shadow 0.35s, padding 0.35s;
}
nav.scrolled {
  background: rgba(244,235,221,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(58,42,36,0.07);
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.nav-logo { display: flex; align-items: center; }
.nav-logo-img {
  height: 62px;
  width: auto;
  display: block;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
nav.scrolled .nav-logo-img { height: 52px; }
.nav-logo:hover .nav-logo-img { transform: scale(1.04); }

.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  align-items: center;
}
.nav-links a {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--espresso);
  text-decoration: none;
  opacity: 0.82;
  transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 1; }
/* Actieve pagina: terracotta kleur + onderstreping ("je bent hier") */
.nav-links a[aria-current="page"]:not(.nav-cta) {
  color: var(--terra);
  opacity: 1;
  position: relative;
}
.nav-links a[aria-current="page"]:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 2px; border-radius: 2px;
  background: var(--terra);
}
.nav-cta {
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  background: var(--terra);
  color: var(--cream-wit) !important;
  opacity: 1 !important;
  transition: background 0.25s, transform 0.25s;
}
.nav-cta:hover { background: var(--terra-dk); transform: translateY(-2px); }

/* Hamburger-knop — alleen zichtbaar op mobiel */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 26px; height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--espresso);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── HERO ─────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 2rem;
  position: relative;
  overflow: hidden;
  /* Gradient-achtergrond uit het brandpalet */
  background:
    radial-gradient(ellipse 90% 60% at 50% -12%, rgba(166,75,42,0.13), transparent 60%),
    radial-gradient(ellipse 82% 55% at 50% 112%, rgba(85,107,47,0.13), transparent 58%),
    linear-gradient(180deg, var(--cream-wit) 0%, var(--cream) 100%);
}

/* Swirl-achtergronden in de hoeken: rechtsboven + linksonder, aan de zijkanten */
.hero-deco {
  position: absolute;
  width: clamp(300px, 42vw, 580px);
  z-index: 0;
  pointer-events: none;
}
.hero-deco img { width: 100%; height: auto; display: block; opacity: 0.9; will-change: transform; }
.hero-deco-tr { top: -12%; right: -12%; transform: rotate(150deg); }
.hero-deco-bl { bottom: -12%; left: -12%; transform: rotate(-28deg); }

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-titel {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none;
  font-weight: 900;
  /* Dela is breed: deze maat + strakke regelafstand is nagemeten — kop blijft op max 2 regels */
  font-size: clamp(2rem, 4.9vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--espresso);
  margin-bottom: 1.75rem;
  max-width: 24ch;
}

/* Baasbroodje ⇄ Zwamcijsje: transparant, liggend in de kop, wisselen automatisch (vallend) */
.hero-snack {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  /* iets kleiner dan eerst zodat de grotere kop op 2 regels blijft passen */
  width: clamp(140px, 17vw, 200px);
  height: clamp(95px, 11.3vw, 133px);
  margin: 0 0.14em;
}
.snack-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(58,42,36,0.24));
  opacity: 0;
  will-change: transform, opacity;
}
.snack-img.is-active {
  opacity: 1;
  animation: snackDrop 0.85s cubic-bezier(0.34, 1.25, 0.5, 1) both;
}
@keyframes snackDrop {
  0%   { transform: translateY(-135%) rotate(-14deg); opacity: 0; }
  55%  { transform: translateY(6%)   rotate(4deg);  opacity: 1; }
  75%  { transform: translateY(-4%)  rotate(-2deg); }
  90%  { transform: translateY(2%)   rotate(1deg); }
  100% { transform: translateY(0)    rotate(0); opacity: 1; }
}

.hero-sub {
  font-size: 1.05rem;
  color: rgba(58,42,36,0.66);
  max-width: 56ch;
  line-height: 1.8;
  margin: 0 auto 2.5rem;
}

.hero-knoppen { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 2.1rem;
  /* knoppen zijn UI, geen koppen: Quicksand blijft (Dela is te breed met nowrap) */
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 0.22s, background 0.22s, border-color 0.22s, color 0.22s;
  white-space: nowrap;
}
.btn-vol { background: var(--terra); color: var(--cream-wit); border: 1.5px solid var(--terra); }
.btn-vol:hover { background: var(--terra-dk); border-color: var(--terra-dk); transform: translateY(-3px); }
.btn-lijn { background: transparent; color: var(--terra); border: 1.5px solid var(--terra); }
.btn-lijn:hover { background: var(--terra); color: var(--cream-wit); border-color: var(--terra); transform: translateY(-3px); }
.btn svg { transition: transform 0.25s; }
.btn:hover svg { transform: translateX(4px); }

/* Scroll-hint onderaan de hero */
.scroll-hint {
  margin-top: 3.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(58,42,36,0.4);
}
.scroll-hint .dot {
  width: 22px; height: 34px;
  border: 1.5px solid rgba(58,42,36,0.3);
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
}
.scroll-hint .dot::after {
  content: '';
  position: absolute;
  top: 6px; left: 50%;
  width: 3px; height: 6px;
  border-radius: 2px;
  background: var(--terra);
  transform: translateX(-50%);
  animation: scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot {
  0% { opacity: 0; transform: translate(-50%, 0); }
  40% { opacity: 1; }
  80% { opacity: 0; transform: translate(-50%, 12px); }
  100% { opacity: 0; }
}

@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

/* ─── PAGINA-HEADER (subpagina's) ──────────────── */
.page-hero {
  padding: 12rem 6rem 6rem;
  text-align: center;
  background:
    radial-gradient(ellipse 90% 60% at 50% -20%, rgba(166,75,42,0.12), transparent 60%),
    linear-gradient(180deg, var(--cream-wit) 0%, var(--cream) 100%);
}
.page-hero .sectie-label { justify-content: center; }
.page-hero .sectie-titel { margin: 0 auto 1.25rem; max-width: 22ch; }
.page-hero .sectie-tekst { margin: 0 auto; }

/* Placeholder voor nog in te vullen content */
.placeholder {
  max-width: 760px;
  margin: 0 auto;
  border: 1.5px dashed var(--cream-dk);
  border-radius: 24px;
  padding: 4rem 2rem;
  text-align: center;
  color: rgba(58,42,36,0.5);
  background: var(--cream-wit);
}
.placeholder .sectie-titel { font-size: 1.4rem; color: rgba(58,42,36,0.5); margin-bottom: 0.5rem; }

/* ─── NIEUWS ───────────────────────────────────── */
.nieuws-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
.nieuws-kaart {
  display: flex;
  flex-direction: column;
  background: var(--cream-wit);
  border: 1px solid var(--cream-dk);
  border-radius: 24px;
  padding: 2.5rem;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s;
}
.nieuws-kaart:hover { transform: translateY(-8px); box-shadow: 0 28px 64px rgba(58,42,36,0.12); }
.nieuws-cat {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3rem 0.8rem;
  margin-bottom: 1.1rem;
  border-radius: 999px;
  background: var(--terra-soft);
  color: var(--terra);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nieuws-kaart h2 {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none;
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1.18;
  color: var(--espresso);
  margin-bottom: 0.9rem;
}
.nieuws-kaart p {
  font-size: 0.92rem;
  color: rgba(58,42,36,0.66);
  line-height: 1.8;
  margin-bottom: 1.75rem;
}
.lees-meer {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--terra);
  text-decoration: none;
  transition: gap 0.25s;
}
.lees-meer:hover { gap: 0.85rem; }
.lees-meer svg { transition: transform 0.25s; }
.lees-meer:hover svg { transform: translateX(3px); }

/* Afbeelding in de nieuwskaart */
.nieuws-beeld {
  display: block;
  margin: -2.5rem -2.5rem 1.75rem;
  height: 220px;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  background: var(--cream);
}
.nieuws-beeld img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.nieuws-kaart:hover .nieuws-beeld img { transform: scale(1.05); }

/* ─── UITGELICHT NIEUWS (homepage) ─────────────── */
.home-nieuws { background: var(--cream); }
.home-nieuws-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto 4rem;
}
.home-nieuws-head .sectie-titel { margin-bottom: 0; max-width: 16ch; }
.home-nieuws-titel { margin-bottom: 0.7rem !important; }
.home-nieuws-sub {
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra);
}
.home-nieuws-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.3rem;
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--terra);
  text-decoration: none;
  transition: gap 0.25s;
}
.home-nieuws-link svg { transition: transform 0.25s; }
.home-nieuws-link:hover { gap: 0.85rem; }
.home-nieuws-link:hover svg { transform: translateX(4px); }

.home-nieuws-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.home-nieuws-kaart { display: flex; flex-direction: column; text-decoration: none; }
.home-nieuws-beeld {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 26px;
  overflow: hidden;
  background: var(--cream);
  margin-bottom: 1.5rem;
  box-shadow: 0 16px 40px rgba(58,42,36,0.08);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s;
}
.home-nieuws-kaart:hover .home-nieuws-beeld { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(58,42,36,0.16); }
.home-nieuws-beeld img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.home-nieuws-kaart:hover .home-nieuws-beeld img { transform: scale(1.07); }
.home-nieuws-cat {
  position: absolute;
  top: 1rem; left: 1rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(244,235,221,0.92);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--terra);
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.home-nieuws-kaart h3 {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none;
  font-weight: 900;
  font-size: 1.32rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--espresso);
  transition: color 0.25s;
}
.home-nieuws-kaart:hover h3 { color: var(--terra); }

/* ─── ARTIKEL (detailpagina) ───────────────────── */
.artikel { max-width: 720px; margin: 0 auto; }

/* Beeld als banner met begrensde hoogte (geen reuzenposter meer) */
.artikel-beeld {
  height: clamp(240px, 38vw, 420px);
  border-radius: 28px;
  overflow: hidden;
  margin-bottom: 3.25rem;
  box-shadow: 0 24px 60px rgba(58,42,36,0.14);
  background: var(--cream);
}
.artikel-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Leeskolom met lucht; eerste alinea als lead */
.artikel-body { padding-bottom: 3rem; border-bottom: 1px solid var(--cream-dk); }
.artikel-body p {
  font-size: 1.06rem;
  color: rgba(58,42,36,0.74);
  line-height: 1.95;
  margin-bottom: 1.6rem;
}
.artikel-body p:first-of-type {
  font-size: 1.32rem;
  line-height: 1.65;
  font-weight: 500;
  color: var(--espresso);
  margin-bottom: 2rem;
}
.artikel-body p:last-child { margin-bottom: 0; }
.artikel-body strong { color: var(--espresso); font-weight: 700; }

.artikel-terug {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--terra);
  text-decoration: none;
  transition: gap 0.25s;
}
.artikel-terug svg { transition: transform 0.25s; }
.artikel-terug:hover { gap: 0.85rem; }
.artikel-terug:hover svg { transform: translateX(-3px); }

/* ─── PRODUCTEN: INTRO-HERO ─────────────────────── */
.producten-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 12rem 2rem 5.5rem;
  background:
    radial-gradient(ellipse 82% 60% at 50% -12%, rgba(166,75,42,0.13), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 120%, rgba(85,107,47,0.10), transparent 60%),
    linear-gradient(180deg, var(--cream-wit) 0%, var(--cream) 100%);
}
.producten-hero-deco {
  position: absolute;
  width: clamp(280px, 36vw, 520px);
  top: -16%; right: -10%;
  transform: rotate(150deg);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
.producten-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.producten-hero-label {
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--terra); margin-bottom: 1.1rem;
}
.producten-hero-titel {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none;
  font-weight: 900;
  font-size: clamp(2.6rem, 5vw, 4.1rem);
  line-height: 1.04; letter-spacing: -0.025em;
  color: var(--espresso); margin-bottom: 1.5rem;
}
.producten-hero-intro {
  font-size: 1.15rem; line-height: 1.8;
  color: rgba(58,42,36,0.7);
  max-width: 60ch; margin: 0 auto 1.5rem;
}
.producten-hero-hint {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.85rem; letter-spacing: 0.02em;
  color: rgba(58,42,36,0.5);
}
.producten-hero-hint svg { color: var(--terra); }

/* ─── PRODUCTEN (productpagina) ─────────────────── */
.producten-lijst {
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6.5rem;
}
.product-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4.5rem;
}
.product-rij:nth-child(odd) .product-visual { order: 2; }

/* Beeld als studio-fotoshoot: broodje in een fotokader met warme merk-achtergrond */
.product-visual { display: flex; justify-content: center; }
.product-foto {
  position: relative;
  width: min(100%, 430px);
  aspect-ratio: 1 / 1;
  border-radius: 30px;
  overflow: hidden;
  cursor: pointer;
  border: none; padding: 0;
  box-shadow: 0 30px 70px rgba(58,42,36,0.16);
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s;
}
.product-foto:hover { transform: translateY(-6px); box-shadow: 0 42px 88px rgba(58,42,36,0.22); }
.product-foto:focus-visible { outline: 3px solid var(--terra); outline-offset: 4px; }

/* Naadloze studio-achtergrond (back wall → vloer) met spotlight */
.product-rij.bb .product-foto {
  background:
    radial-gradient(68% 56% at 50% 40%, rgba(249,242,231,0.95), transparent 72%),
    linear-gradient(180deg, #ecdcc6 0%, #e4d3ba 56%, #d6c2a2 100%);
}
.product-rij.zc .product-foto {
  background:
    radial-gradient(68% 56% at 50% 40%, rgba(247,247,233,0.95), transparent 72%),
    linear-gradient(180deg, #e7e8d3 0%, #dbe0c1 56%, #cdd4aa 100%);
}
/* Binnenkort-broodje: afbeelding is zelf een volledige studio-compositie,
   dus die vult het kader (geen hover-lift, geen aparte achtergrond) */
.product-foto-binnenkort { cursor: default; background: none; }
.product-foto-binnenkort:hover { transform: none; box-shadow: 0 30px 70px rgba(58,42,36,0.16); }
.product-foto-binnenkort::after { content: none; }
.product-foto.product-foto-binnenkort img,
.product-foto.product-foto-binnenkort:hover img {
  position: absolute; inset: 0; left: 0; bottom: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: none; filter: none;
}

/* Zachte contactschaduw op de 'vloer' */
.product-foto::after {
  content: '';
  position: absolute; left: 50%; bottom: 17%;
  width: 50%; height: 7%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(58,42,36,0.22), transparent 70%);
  filter: blur(6px);
  z-index: 1;
}
.product-foto img {
  position: absolute; left: 50%; bottom: 20%;
  transform: translateX(-50%);
  width: 64%; height: auto; z-index: 2;
  filter: drop-shadow(0 16px 22px rgba(58,42,36,0.18));
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.product-foto:hover img { transform: translateX(-50%) scale(1.05) rotate(-2deg); }

.product-nieuw {
  position: absolute; top: 5%; right: 5%; z-index: 3;
  background: var(--terra); color: var(--cream-wit);
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.06em;
  padding: 0.5rem 1rem; border-radius: 999px;
  transform: rotate(8deg);
  box-shadow: 0 12px 28px rgba(166,75,42,0.45);
}

.product-tekst .merkstreep { margin-bottom: 1.5rem; }
.product-tag {
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 600;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--terra); margin-bottom: 0.7rem;
}
.product-naam {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 900;
  font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.02;
  letter-spacing: -0.02em; color: var(--espresso); margin-bottom: 1rem;
}
.product-desc { font-size: 1rem; color: rgba(58,42,36,0.66); line-height: 1.85; margin-bottom: 2rem; max-width: 44ch; }

/* ─── PRODUCT-MODAL ─────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: rgba(58,42,36,0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.3s;
}
.modal-overlay.open { opacity: 1; }
.modal-overlay[hidden] { display: none; }
.modal {
  position: relative;
  width: min(680px, 100%);
  max-height: 88vh; overflow-y: auto;
  background: var(--cream-wit);
  border-radius: 28px;
  padding: 2.5rem;
  box-shadow: 0 40px 100px rgba(58,42,36,0.35);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.modal-overlay.open .modal { transform: none; }
.modal-close {
  position: absolute; top: 1.1rem; right: 1.1rem;
  width: 40px; height: 40px; border-radius: 50%;
  border: none; background: var(--cream); color: var(--espresso);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, transform 0.25s, color 0.25s;
}
.modal-close:hover { background: var(--terra); color: var(--cream-wit); transform: rotate(90deg); }
.modal-head { display: flex; gap: 1.5rem; align-items: center; margin-bottom: 1.75rem; padding-right: 2.5rem; }
.modal-beeld {
  flex-shrink: 0; width: 110px; height: 110px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0.75rem;
  background: radial-gradient(circle at 50% 42%, #f6efe1, #ede0cd 72%);
}
.modal-beeld.zc { background: radial-gradient(circle at 50% 42%, #f2f2e4, #dbe0c1 72%); }
.modal-beeld img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(58,42,36,0.22)); }
.modal-cat { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terra); font-weight: 600; margin-bottom: 0.3rem; }
.modal-naam { font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 900; font-size: 1.8rem; line-height: 1.05; color: var(--espresso); margin-bottom: 0.5rem; }
.modal-desc { font-size: 0.9rem; color: rgba(58,42,36,0.66); line-height: 1.7; }

.modal-tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--cream-dk); margin-bottom: 1.5rem; }
.modal-tabs button {
  border: none; background: none; cursor: pointer;
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.04em; color: rgba(58,42,36,0.5);
  padding: 0.6rem 0.4rem; margin-bottom: -1px;
  border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.modal-tabs button.actief { color: var(--terra); border-color: var(--terra); }
.modal-panel[hidden] { display: none; }

.voeding-tabel, .artikel-tabel { width: 100%; border-collapse: collapse; }
.voeding-tabel caption, .artikel-tabel caption {
  text-align: left; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(58,42,36,0.5); font-weight: 600; padding-bottom: 0.85rem;
}
.voeding-tabel td { padding: 0.7rem 0; border-top: 1px solid var(--cream-dk); font-size: 0.92rem; color: rgba(58,42,36,0.78); }
.voeding-tabel tr:first-child td { border-top: none; }
.voeding-tabel td:last-child { text-align: right; font-weight: 600; color: var(--espresso); font-variant-numeric: tabular-nums; }
.voeding-tabel tr.sub td:first-child { padding-left: 1.25rem; color: rgba(58,42,36,0.55); font-size: 0.85rem; }
.voeding-tabel tr.sub td:last-child { font-weight: 500; }

.artikel-tabel td { padding: 0.85rem 0; border-top: 1px solid var(--cream-dk); font-size: 0.92rem; color: rgba(58,42,36,0.78); }
.artikel-tabel tr:first-child td { border-top: none; }
.artikel-tabel td:last-child { text-align: right; font-weight: 600; color: var(--espresso); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.artikel-tabel a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--espresso); text-decoration: none; font-weight: 500;
  transition: color 0.2s, gap 0.2s;
}
.artikel-tabel a svg { color: var(--terra); opacity: 0.7; transition: transform 0.2s, opacity 0.2s; }
.artikel-tabel a:hover { color: var(--terra); gap: 0.7rem; }
.artikel-tabel a:hover svg { opacity: 1; transform: translate(2px, -2px); }
.modal-note { margin-top: 1.25rem; font-size: 0.72rem; color: rgba(58,42,36,0.45); line-height: 1.55; }

/* ─── STATS-BAND ───────────────────────────────── */
.stats {
  background: var(--espresso);
  padding: 4.5rem 6rem;
  position: relative;
  overflow: hidden;
}
.stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 20%, rgba(166,75,42,0.18), transparent 45%),
             radial-gradient(circle at 85% 90%, rgba(85,107,47,0.16), transparent 45%);
}
.stats-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
.stat { text-align: center; }
.stat-getal {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none;
  font-weight: 900;
  font-size: clamp(2.6rem, 4.5vw, 3.6rem);
  line-height: 1;
  color: var(--cream-wit);
  letter-spacing: -0.02em;
}
.stat-getal .suffix { color: var(--terra); }
.stat-label {
  margin-top: 0.7rem;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,235,221,0.85);
}

/* ─── STREPEN DECORATIE ────────────────────────── */
.merkstreep { display: flex; flex-direction: column; gap: 5px; width: fit-content; }
.merkstreep span { display: block; height: 3px; border-radius: 2px; background: var(--terra); }
.merkstreep span:nth-child(1) { width: 48px; }
.merkstreep span:nth-child(2) { width: 32px; }
.merkstreep span:nth-child(3) { width: 16px; }

/* ─── SECTIES ALGEMEEN ─────────────────────────── */
.sectie { padding: 8rem 6rem; }

.sectie-label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.25rem;
}
.sectie-label span {
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--terra);
}
.sectie-label::before {
  content: '';
  display: block;
  width: 24px; height: 2px;
  border-radius: 2px;
  background: var(--terra);
  flex-shrink: 0;
}
.sectie-label--plain::before { display: none; }

.sectie-titel {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none;
  font-weight: 900;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--espresso);
  margin-bottom: 1.5rem;
}

.sectie-tekst {
  font-size: 1rem;
  color: rgba(58,42,36,0.66);
  line-height: 1.85;
  max-width: 54ch;
}

/* ─── MERKEN / WAAROM KIEZEN ───────────────────── */
.merken { background: var(--cream); position: relative; overflow: hidden; }

.merken-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.merken-tekst .merkstreep { margin-bottom: 1.5rem; }
.merken-claim {
  margin-top: 1.75rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--espresso);
}
.merken-tekst .btn { margin-top: 1.25rem; }

.merken-beeld { display: flex; justify-content: center; }
.merken-rond {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(58,42,36,0.20);
  border: 6px solid var(--cream-wit);
}
.merken-rond img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14);
  will-change: transform;
}

/* Baasbroodje: helemaal links, afgesneden, met muisanimatie */
.merken-bb {
  position: absolute;
  left: -7%;
  bottom: -9%;
  width: clamp(210px, 25vw, 380px);
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 22px 40px rgba(58,42,36,0.26));
  transition: transform 0.3s ease-out;
  will-change: transform;
}

.merken-intro { text-align: center; max-width: 640px; margin: 0 auto 5rem; }
.merken-intro .merkstreep { margin: 0 auto 1.5rem; }
.merken-intro .sectie-label { justify-content: center; }
.merken-intro .sectie-tekst { margin: 0 auto; max-width: none; }

.merken-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

.merk-kaart {
  background: var(--cream-wit);
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s;
}
.merk-kaart:hover { transform: translateY(-10px); box-shadow: 0 28px 64px rgba(58,42,36,0.12); }

.merk-foto {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  overflow: hidden;
}
.merk-kaart.bb .merk-foto { background: linear-gradient(135deg, #ede0cd 0%, #ddd0b8 100%); }
.merk-kaart.zc .merk-foto { background: linear-gradient(135deg, #e4e6d4 0%, #cdd2b3 100%); }

.merk-foto img {
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  filter: drop-shadow(0 16px 40px rgba(58,42,36,0.18));
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.merk-kaart:hover .merk-foto img { transform: scale(1.06) rotate(-2deg); }

.merk-inhoud { padding: 2.25rem 2.5rem 2.75rem; }

.merk-tag {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.merk-kaart.bb .merk-tag { background: var(--terra-soft); color: var(--terra); }
.merk-kaart.zc .merk-tag { background: var(--olive-soft); color: var(--olive); }

.merk-naam {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none;
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--espresso);
  margin-bottom: 0.75rem;
  line-height: 1.05;
}
.merk-omschrijving {
  font-size: 0.92rem;
  color: rgba(58,42,36,0.64);
  line-height: 1.8;
  margin-bottom: 1.75rem;
}
.merk-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: gap 0.25s;
}
.merk-kaart.bb .merk-link { color: var(--terra); }
.merk-kaart.zc .merk-link { color: var(--olive); }
.merk-link:hover { gap: 0.85rem; }

/* ─── VARIATIE AAN KLANTEN ─────────────────────── */
.variatie { background: var(--cream-wit); overflow: hidden; }
.variatie-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
/* kleiner sinds Dela: het langste wisselwoord ("het vergaderarrangement")
   moet mét lidwoord op één regel passen */
.variatie-kop { margin-bottom: 1.5rem; font-size: clamp(1.35rem, 2.2vw, 2rem); }
.variatie-tekst .btn { margin-top: 2rem; }
.cycle-woord {
  display: inline-block;
  color: var(--terra);
  min-height: 1.1em;
  will-change: transform, opacity;
}
.cycle-woord.vallen { animation: woordVal 0.6s cubic-bezier(0.34, 1.25, 0.5, 1) both; }
@keyframes woordVal {
  0%   { transform: translateY(-95%) rotate(-7deg); opacity: 0; }
  60%  { transform: translateY(6%)  rotate(2deg);  opacity: 1; }
  80%  { transform: translateY(-3%) rotate(-1deg); }
  100% { transform: translateY(0)   rotate(0); opacity: 1; }
}

.variatie-beeld { position: relative; display: flex; flex-direction: column; align-items: center; }
.mini-badge {
  position: relative;
  z-index: 2;
  width: 132px; height: 132px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1.15;
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none;
  font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--cream-wit); text-decoration: none;
  transform: rotate(-8deg);
  filter: drop-shadow(0 14px 30px rgba(58,42,36,0.3));
  margin-bottom: -1.5rem;
  transition: transform 0.3s ease;
}
/* kartelrand: terra-vlak via scalloped mask (i.p.v. ronde border) */
.mini-badge::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--terra);
  -webkit-mask: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M100.0%2050.0%20L99.8%2050.9%20L99.0%2051.7%20L97.9%2052.5%20L96.6%2053.3%20L95.1%2053.9%20L93.8%2054.6%20L92.6%2055.2%20L91.8%2055.9%20L91.5%2056.6%20L91.6%2057.3%20L92.1%2058.2%20L93.0%2059.1%20L94.1%2060.2%20L95.3%2061.3%20L96.4%2062.4%20L97.2%2063.5%20L97.6%2064.5%20L97.6%2065.5%20L97.0%2066.2%20L96.1%2066.8%20L94.8%2067.2%20L93.3%2067.5%20L91.7%2067.7%20L90.2%2067.9%20L88.9%2068.1%20L88.0%2068.5%20L87.4%2069.1%20L87.3%2069.8%20L87.6%2070.8%20L88.1%2072.0%20L88.8%2073.3%20L89.6%2074.7%20L90.3%2076.1%20L90.7%2077.4%20L90.8%2078.5%20L90.5%2079.4%20L89.7%2079.9%20L88.7%2080.2%20L87.3%2080.2%20L85.8%2080.0%20L84.2%2079.7%20L82.7%2079.4%20L81.4%2079.3%20L80.4%2079.3%20L79.7%2079.7%20L79.3%2080.4%20L79.3%2081.4%20L79.4%2082.7%20L79.7%2084.2%20L80.0%2085.8%20L80.2%2087.3%20L80.2%2088.7%20L79.9%2089.7%20L79.4%2090.5%20L78.5%2090.8%20L77.4%2090.7%20L76.1%2090.3%20L74.7%2089.6%20L73.3%2088.8%20L72.0%2088.1%20L70.8%2087.6%20L69.8%2087.3%20L69.1%2087.4%20L68.5%2088.0%20L68.1%2088.9%20L67.9%2090.2%20L67.7%2091.7%20L67.5%2093.3%20L67.2%2094.8%20L66.8%2096.1%20L66.2%2097.0%20L65.5%2097.6%20L64.5%2097.6%20L63.5%2097.2%20L62.4%2096.4%20L61.3%2095.3%20L60.2%2094.1%20L59.1%2093.0%20L58.2%2092.1%20L57.3%2091.6%20L56.6%2091.5%20L55.9%2091.8%20L55.2%2092.6%20L54.6%2093.8%20L53.9%2095.1%20L53.3%2096.6%20L52.5%2097.9%20L51.7%2099.0%20L50.9%2099.8%20L50.0%20100.0%20L49.1%2099.8%20L48.3%2099.0%20L47.5%2097.9%20L46.7%2096.6%20L46.1%2095.1%20L45.4%2093.8%20L44.8%2092.6%20L44.1%2091.8%20L43.4%2091.5%20L42.7%2091.6%20L41.8%2092.1%20L40.9%2093.0%20L39.8%2094.1%20L38.7%2095.3%20L37.6%2096.4%20L36.5%2097.2%20L35.5%2097.6%20L34.5%2097.6%20L33.8%2097.0%20L33.2%2096.1%20L32.8%2094.8%20L32.5%2093.3%20L32.3%2091.7%20L32.1%2090.2%20L31.9%2088.9%20L31.5%2088.0%20L30.9%2087.4%20L30.2%2087.3%20L29.2%2087.6%20L28.0%2088.1%20L26.7%2088.8%20L25.3%2089.6%20L23.9%2090.3%20L22.6%2090.7%20L21.5%2090.8%20L20.6%2090.5%20L20.1%2089.7%20L19.8%2088.7%20L19.8%2087.3%20L20.0%2085.8%20L20.3%2084.2%20L20.6%2082.7%20L20.7%2081.4%20L20.7%2080.4%20L20.3%2079.7%20L19.6%2079.3%20L18.6%2079.3%20L17.3%2079.4%20L15.8%2079.7%20L14.2%2080.0%20L12.7%2080.2%20L11.3%2080.2%20L10.3%2079.9%20L9.5%2079.4%20L9.2%2078.5%20L9.3%2077.4%20L9.7%2076.1%20L10.4%2074.7%20L11.2%2073.3%20L11.9%2072.0%20L12.4%2070.8%20L12.7%2069.8%20L12.6%2069.1%20L12.0%2068.5%20L11.1%2068.1%20L9.8%2067.9%20L8.3%2067.7%20L6.7%2067.5%20L5.2%2067.2%20L3.9%2066.8%20L3.0%2066.2%20L2.4%2065.5%20L2.4%2064.5%20L2.8%2063.5%20L3.6%2062.4%20L4.7%2061.3%20L5.9%2060.2%20L7.0%2059.1%20L7.9%2058.2%20L8.4%2057.3%20L8.5%2056.6%20L8.2%2055.9%20L7.4%2055.2%20L6.2%2054.6%20L4.9%2053.9%20L3.4%2053.3%20L2.1%2052.5%20L1.0%2051.7%20L0.2%2050.9%20L0.0%2050.0%20L0.2%2049.1%20L1.0%2048.3%20L2.1%2047.5%20L3.4%2046.7%20L4.9%2046.1%20L6.2%2045.4%20L7.4%2044.8%20L8.2%2044.1%20L8.5%2043.4%20L8.4%2042.7%20L7.9%2041.8%20L7.0%2040.9%20L5.9%2039.8%20L4.7%2038.7%20L3.6%2037.6%20L2.8%2036.5%20L2.4%2035.5%20L2.4%2034.5%20L3.0%2033.8%20L3.9%2033.2%20L5.2%2032.8%20L6.7%2032.5%20L8.3%2032.3%20L9.8%2032.1%20L11.1%2031.9%20L12.0%2031.5%20L12.6%2030.9%20L12.7%2030.2%20L12.4%2029.2%20L11.9%2028.0%20L11.2%2026.7%20L10.4%2025.3%20L9.7%2023.9%20L9.3%2022.6%20L9.2%2021.5%20L9.5%2020.6%20L10.3%2020.1%20L11.3%2019.8%20L12.7%2019.8%20L14.2%2020.0%20L15.8%2020.3%20L17.3%2020.6%20L18.6%2020.7%20L19.6%2020.7%20L20.3%2020.3%20L20.7%2019.6%20L20.7%2018.6%20L20.6%2017.3%20L20.3%2015.8%20L20.0%2014.2%20L19.8%2012.7%20L19.8%2011.3%20L20.1%2010.3%20L20.6%209.5%20L21.5%209.2%20L22.6%209.3%20L23.9%209.7%20L25.3%2010.4%20L26.7%2011.2%20L28.0%2011.9%20L29.2%2012.4%20L30.2%2012.7%20L30.9%2012.6%20L31.5%2012.0%20L31.9%2011.1%20L32.1%209.8%20L32.3%208.3%20L32.5%206.7%20L32.8%205.2%20L33.2%203.9%20L33.8%203.0%20L34.5%202.4%20L35.5%202.4%20L36.5%202.8%20L37.6%203.6%20L38.7%204.7%20L39.8%205.9%20L40.9%207.0%20L41.8%207.9%20L42.7%208.4%20L43.4%208.5%20L44.1%208.2%20L44.8%207.4%20L45.4%206.2%20L46.1%204.9%20L46.7%203.4%20L47.5%202.1%20L48.3%201.0%20L49.1%200.2%20L50.0%200.0%20L50.9%200.2%20L51.7%201.0%20L52.5%202.1%20L53.3%203.4%20L53.9%204.9%20L54.6%206.2%20L55.2%207.4%20L55.9%208.2%20L56.6%208.5%20L57.3%208.4%20L58.2%207.9%20L59.1%207.0%20L60.2%205.9%20L61.3%204.7%20L62.4%203.6%20L63.5%202.8%20L64.5%202.4%20L65.5%202.4%20L66.2%203.0%20L66.8%203.9%20L67.2%205.2%20L67.5%206.7%20L67.7%208.3%20L67.9%209.8%20L68.1%2011.1%20L68.5%2012.0%20L69.1%2012.6%20L69.8%2012.7%20L70.8%2012.4%20L72.0%2011.9%20L73.3%2011.2%20L74.7%2010.4%20L76.1%209.7%20L77.4%209.3%20L78.5%209.2%20L79.4%209.5%20L79.9%2010.3%20L80.2%2011.3%20L80.2%2012.7%20L80.0%2014.2%20L79.7%2015.8%20L79.4%2017.3%20L79.3%2018.6%20L79.3%2019.6%20L79.7%2020.3%20L80.4%2020.7%20L81.4%2020.7%20L82.7%2020.6%20L84.2%2020.3%20L85.8%2020.0%20L87.3%2019.8%20L88.7%2019.8%20L89.7%2020.1%20L90.5%2020.6%20L90.8%2021.5%20L90.7%2022.6%20L90.3%2023.9%20L89.6%2025.3%20L88.8%2026.7%20L88.1%2028.0%20L87.6%2029.2%20L87.3%2030.2%20L87.4%2030.9%20L88.0%2031.5%20L88.9%2031.9%20L90.2%2032.1%20L91.7%2032.3%20L93.3%2032.5%20L94.8%2032.8%20L96.1%2033.2%20L97.0%2033.8%20L97.6%2034.5%20L97.6%2035.5%20L97.2%2036.5%20L96.4%2037.6%20L95.3%2038.7%20L94.1%2039.8%20L93.0%2040.9%20L92.1%2041.8%20L91.6%2042.7%20L91.5%2043.4%20L91.8%2044.1%20L92.6%2044.8%20L93.8%2045.4%20L95.1%2046.1%20L96.6%2046.7%20L97.9%2047.5%20L99.0%2048.3%20L99.8%2049.1%20Z%22/%3E%3C/svg%3E') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M100.0%2050.0%20L99.8%2050.9%20L99.0%2051.7%20L97.9%2052.5%20L96.6%2053.3%20L95.1%2053.9%20L93.8%2054.6%20L92.6%2055.2%20L91.8%2055.9%20L91.5%2056.6%20L91.6%2057.3%20L92.1%2058.2%20L93.0%2059.1%20L94.1%2060.2%20L95.3%2061.3%20L96.4%2062.4%20L97.2%2063.5%20L97.6%2064.5%20L97.6%2065.5%20L97.0%2066.2%20L96.1%2066.8%20L94.8%2067.2%20L93.3%2067.5%20L91.7%2067.7%20L90.2%2067.9%20L88.9%2068.1%20L88.0%2068.5%20L87.4%2069.1%20L87.3%2069.8%20L87.6%2070.8%20L88.1%2072.0%20L88.8%2073.3%20L89.6%2074.7%20L90.3%2076.1%20L90.7%2077.4%20L90.8%2078.5%20L90.5%2079.4%20L89.7%2079.9%20L88.7%2080.2%20L87.3%2080.2%20L85.8%2080.0%20L84.2%2079.7%20L82.7%2079.4%20L81.4%2079.3%20L80.4%2079.3%20L79.7%2079.7%20L79.3%2080.4%20L79.3%2081.4%20L79.4%2082.7%20L79.7%2084.2%20L80.0%2085.8%20L80.2%2087.3%20L80.2%2088.7%20L79.9%2089.7%20L79.4%2090.5%20L78.5%2090.8%20L77.4%2090.7%20L76.1%2090.3%20L74.7%2089.6%20L73.3%2088.8%20L72.0%2088.1%20L70.8%2087.6%20L69.8%2087.3%20L69.1%2087.4%20L68.5%2088.0%20L68.1%2088.9%20L67.9%2090.2%20L67.7%2091.7%20L67.5%2093.3%20L67.2%2094.8%20L66.8%2096.1%20L66.2%2097.0%20L65.5%2097.6%20L64.5%2097.6%20L63.5%2097.2%20L62.4%2096.4%20L61.3%2095.3%20L60.2%2094.1%20L59.1%2093.0%20L58.2%2092.1%20L57.3%2091.6%20L56.6%2091.5%20L55.9%2091.8%20L55.2%2092.6%20L54.6%2093.8%20L53.9%2095.1%20L53.3%2096.6%20L52.5%2097.9%20L51.7%2099.0%20L50.9%2099.8%20L50.0%20100.0%20L49.1%2099.8%20L48.3%2099.0%20L47.5%2097.9%20L46.7%2096.6%20L46.1%2095.1%20L45.4%2093.8%20L44.8%2092.6%20L44.1%2091.8%20L43.4%2091.5%20L42.7%2091.6%20L41.8%2092.1%20L40.9%2093.0%20L39.8%2094.1%20L38.7%2095.3%20L37.6%2096.4%20L36.5%2097.2%20L35.5%2097.6%20L34.5%2097.6%20L33.8%2097.0%20L33.2%2096.1%20L32.8%2094.8%20L32.5%2093.3%20L32.3%2091.7%20L32.1%2090.2%20L31.9%2088.9%20L31.5%2088.0%20L30.9%2087.4%20L30.2%2087.3%20L29.2%2087.6%20L28.0%2088.1%20L26.7%2088.8%20L25.3%2089.6%20L23.9%2090.3%20L22.6%2090.7%20L21.5%2090.8%20L20.6%2090.5%20L20.1%2089.7%20L19.8%2088.7%20L19.8%2087.3%20L20.0%2085.8%20L20.3%2084.2%20L20.6%2082.7%20L20.7%2081.4%20L20.7%2080.4%20L20.3%2079.7%20L19.6%2079.3%20L18.6%2079.3%20L17.3%2079.4%20L15.8%2079.7%20L14.2%2080.0%20L12.7%2080.2%20L11.3%2080.2%20L10.3%2079.9%20L9.5%2079.4%20L9.2%2078.5%20L9.3%2077.4%20L9.7%2076.1%20L10.4%2074.7%20L11.2%2073.3%20L11.9%2072.0%20L12.4%2070.8%20L12.7%2069.8%20L12.6%2069.1%20L12.0%2068.5%20L11.1%2068.1%20L9.8%2067.9%20L8.3%2067.7%20L6.7%2067.5%20L5.2%2067.2%20L3.9%2066.8%20L3.0%2066.2%20L2.4%2065.5%20L2.4%2064.5%20L2.8%2063.5%20L3.6%2062.4%20L4.7%2061.3%20L5.9%2060.2%20L7.0%2059.1%20L7.9%2058.2%20L8.4%2057.3%20L8.5%2056.6%20L8.2%2055.9%20L7.4%2055.2%20L6.2%2054.6%20L4.9%2053.9%20L3.4%2053.3%20L2.1%2052.5%20L1.0%2051.7%20L0.2%2050.9%20L0.0%2050.0%20L0.2%2049.1%20L1.0%2048.3%20L2.1%2047.5%20L3.4%2046.7%20L4.9%2046.1%20L6.2%2045.4%20L7.4%2044.8%20L8.2%2044.1%20L8.5%2043.4%20L8.4%2042.7%20L7.9%2041.8%20L7.0%2040.9%20L5.9%2039.8%20L4.7%2038.7%20L3.6%2037.6%20L2.8%2036.5%20L2.4%2035.5%20L2.4%2034.5%20L3.0%2033.8%20L3.9%2033.2%20L5.2%2032.8%20L6.7%2032.5%20L8.3%2032.3%20L9.8%2032.1%20L11.1%2031.9%20L12.0%2031.5%20L12.6%2030.9%20L12.7%2030.2%20L12.4%2029.2%20L11.9%2028.0%20L11.2%2026.7%20L10.4%2025.3%20L9.7%2023.9%20L9.3%2022.6%20L9.2%2021.5%20L9.5%2020.6%20L10.3%2020.1%20L11.3%2019.8%20L12.7%2019.8%20L14.2%2020.0%20L15.8%2020.3%20L17.3%2020.6%20L18.6%2020.7%20L19.6%2020.7%20L20.3%2020.3%20L20.7%2019.6%20L20.7%2018.6%20L20.6%2017.3%20L20.3%2015.8%20L20.0%2014.2%20L19.8%2012.7%20L19.8%2011.3%20L20.1%2010.3%20L20.6%209.5%20L21.5%209.2%20L22.6%209.3%20L23.9%209.7%20L25.3%2010.4%20L26.7%2011.2%20L28.0%2011.9%20L29.2%2012.4%20L30.2%2012.7%20L30.9%2012.6%20L31.5%2012.0%20L31.9%2011.1%20L32.1%209.8%20L32.3%208.3%20L32.5%206.7%20L32.8%205.2%20L33.2%203.9%20L33.8%203.0%20L34.5%202.4%20L35.5%202.4%20L36.5%202.8%20L37.6%203.6%20L38.7%204.7%20L39.8%205.9%20L40.9%207.0%20L41.8%207.9%20L42.7%208.4%20L43.4%208.5%20L44.1%208.2%20L44.8%207.4%20L45.4%206.2%20L46.1%204.9%20L46.7%203.4%20L47.5%202.1%20L48.3%201.0%20L49.1%200.2%20L50.0%200.0%20L50.9%200.2%20L51.7%201.0%20L52.5%202.1%20L53.3%203.4%20L53.9%204.9%20L54.6%206.2%20L55.2%207.4%20L55.9%208.2%20L56.6%208.5%20L57.3%208.4%20L58.2%207.9%20L59.1%207.0%20L60.2%205.9%20L61.3%204.7%20L62.4%203.6%20L63.5%202.8%20L64.5%202.4%20L65.5%202.4%20L66.2%203.0%20L66.8%203.9%20L67.2%205.2%20L67.5%206.7%20L67.7%208.3%20L67.9%209.8%20L68.1%2011.1%20L68.5%2012.0%20L69.1%2012.6%20L69.8%2012.7%20L70.8%2012.4%20L72.0%2011.9%20L73.3%2011.2%20L74.7%2010.4%20L76.1%209.7%20L77.4%209.3%20L78.5%209.2%20L79.4%209.5%20L79.9%2010.3%20L80.2%2011.3%20L80.2%2012.7%20L80.0%2014.2%20L79.7%2015.8%20L79.4%2017.3%20L79.3%2018.6%20L79.3%2019.6%20L79.7%2020.3%20L80.4%2020.7%20L81.4%2020.7%20L82.7%2020.6%20L84.2%2020.3%20L85.8%2020.0%20L87.3%2019.8%20L88.7%2019.8%20L89.7%2020.1%20L90.5%2020.6%20L90.8%2021.5%20L90.7%2022.6%20L90.3%2023.9%20L89.6%2025.3%20L88.8%2026.7%20L88.1%2028.0%20L87.6%2029.2%20L87.3%2030.2%20L87.4%2030.9%20L88.0%2031.5%20L88.9%2031.9%20L90.2%2032.1%20L91.7%2032.3%20L93.3%2032.5%20L94.8%2032.8%20L96.1%2033.2%20L97.0%2033.8%20L97.6%2034.5%20L97.6%2035.5%20L97.2%2036.5%20L96.4%2037.6%20L95.3%2038.7%20L94.1%2039.8%20L93.0%2040.9%20L92.1%2041.8%20L91.6%2042.7%20L91.5%2043.4%20L91.8%2044.1%20L92.6%2044.8%20L93.8%2045.4%20L95.1%2046.1%20L96.6%2046.7%20L97.9%2047.5%20L99.0%2048.3%20L99.8%2049.1%20Z%22/%3E%3C/svg%3E') center / contain no-repeat;
}
.mini-badge:hover { transform: rotate(0deg) scale(1.06); }
.mini-stapel { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
/* zachte studio-schijf achter de mini's zodat ze niet los zweven */
.mini-disc {
  position: absolute; z-index: 0;
  width: 108%; aspect-ratio: 1 / 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(244,235,221,0.95), rgba(244,235,221,0.5) 55%, transparent 72%);
}
.mini-stapel img {
  position: relative; z-index: 1;
  width: clamp(150px, 21vw, 248px);
  height: auto;
  filter: drop-shadow(0 18px 36px rgba(58,42,36,0.28));
}
.mini-foto-1 { animation: bob 6s ease-in-out infinite; }
.mini-foto-2 { margin-left: -14%; animation: bob 7.2s ease-in-out -2s infinite; }

/* ─── MINI-KAARTJES (twee aparte branded cards) ─── */
.mini-kaartjes {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  width: 100%;
}
.mini-kaart {
  flex: 1;
  border-radius: 1.75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 0;
  position: relative;
  clip-path: inset(0 0 -50px 0 round 1.75rem);
}
.mini-kaart-bb { background: #2764E7; }
.mini-kaart-zc { background: #F55200; }
.mini-kaart-logo {
  width: 100%;
  height: auto;
  display: block;
  flex-shrink: 0;
}
.mini-kaart-foto {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,0.28));
  position: relative;
  z-index: 1;
  padding: 0 0.5rem;
}
.mini-kaart-bb .mini-kaart-foto { animation: bob 6s ease-in-out infinite; }
.mini-kaart-zc .mini-kaart-foto { animation: bob 7.2s ease-in-out -2s infinite; }

/* grotere badge boven de twee stapels */
.mini-badge-groot {
  width: 180px; height: 180px;
  margin-bottom: -1rem;
  align-self: flex-end;
}

/* ─── PARTNERS / GROOTHANDELS MARQUEE ──────────── */
.partners { background: var(--cream-wit); padding: 7rem 0; overflow: hidden; }
.partners-intro { text-align: center; padding: 0 2rem; margin-bottom: 3.5rem; }
.partners-intro .merkstreep { margin: 0 auto 1.25rem; }
.partners-intro .sectie-label { justify-content: center; }
.partners-intro .sectie-titel { margin-bottom: 0.9rem; }
.partners-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 700;
  font-size: 0.9rem; color: var(--terra); text-decoration: none;
}
.partners-link svg { transition: transform 0.25s; }
.partners-link:hover svg { transform: translateX(4px); }
.marquee { display: block; text-decoration: none; cursor: pointer; }

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-logo {
  height: 118px; width: auto;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 16px;
  filter: drop-shadow(0 10px 24px rgba(58,42,36,0.07));
  transition: transform 0.3s ease;
}
.marquee-logo:hover { transform: translateY(-5px); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─── QUOTE ────────────────────────────────────── */
.quote-blok {
  background: var(--terra);
  padding: 8rem 6rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.quote-tekst {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.3vw, 3rem);
  color: var(--cream-wit);
  line-height: 1.42;
  max-width: 880px;
  margin: 0 auto 1.5rem;
  position: relative;
}
.quote-naam {
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244,235,221,0.6);
}

/* ─── OVER ─────────────────────────────────────── */
.over { background: var(--cream-wit); }
.over-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.over-waarden { display: flex; flex-direction: column; gap: 2rem; margin-top: 2.5rem; }
.waarde {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--cream-dk);
}
.waarde:last-child { border-bottom: none; padding-bottom: 0; }
.waarde-nr {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  width: 2.6rem;
  color: var(--cream-dk);
}
.waarde:nth-child(1) .waarde-nr { color: var(--terra); }
.waarde:nth-child(2) .waarde-nr { color: var(--olive); }
.waarde:nth-child(3) .waarde-nr { color: var(--espresso); }
.waarde h3 { font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-size: 1.35rem; font-weight: 600; margin-bottom: 0.3rem; }
.waarde p { font-size: 0.88rem; color: rgba(58,42,36,0.6); line-height: 1.75; }

/* De reveal-offset van .over-beeld (translateX 48px vóór onthulling) stak
   buiten het scherm op mobiel: deze secties clippen zichzelf horizontaal.
   (Geen sticky-inhoud hier, dus clip is veilig.) */
.over, .over-verhaal { overflow-x: clip; }
.over-beeld { position: relative; }
.over-foto-wrap {
  background: var(--cream);
  border-radius: 24px;
  padding: 3.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  overflow: hidden;
}
.over-foto-wrap img {
  width: 100%;
  max-width: 400px;
  height: auto;
  min-width: 0; /* mag krimpen op smalle schermen (anders duwt de foto de grid breder) */
  filter: drop-shadow(0 20px 50px rgba(58,42,36,0.12));
}
.over-badge {
  position: absolute;
  bottom: -1.5rem; left: -1.5rem;
  width: 120px; height: 120px;
  background: var(--olive);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 16px 40px rgba(58,42,36,0.2);
}
.over-badge span { display: block; color: var(--cream-wit); text-align: center; }
.over-badge .badge-groot { font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-size: 1.7rem; font-weight: 900; line-height: 1; }
.over-badge .badge-klein { font-size: 0.52rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }

/* ─── CONTACT ──────────────────────────────────── */
.contact { background: var(--cream-wit); text-align: center; }
.contact .sectie-label { justify-content: center; }
.contact .sectie-titel { margin: 0 auto 1rem; text-align: center; max-width: none; }
.contact .sectie-tekst { margin: 0 auto 2.5rem; text-align: center; }
.contact-knoppen { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ─── FOOTER ───────────────────────────────────── */
footer { background: var(--espresso); padding: 5rem 6rem 3rem; }
.footer-boven {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr 1.3fr;
  gap: 3rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(244,235,221,0.08);
  margin-bottom: 2.5rem;
}
/* min-width:0 → fr-kolommen mogen krimpen onder hun min-content (anders
   duwt bv. de contactkolom de grid breder dan het scherm op mobiel) */
.footer-boven > div { min-width: 0; }
.footer-merk { display: flex; flex-direction: column; gap: 1.25rem; }
.footer-logo-wrap { display: flex; align-items: center; }
.footer-logo-img { height: 84px; width: auto; display: block; }
.footer-desc { font-size: 0.85rem; color: rgba(244,235,221,0.5); line-height: 1.85; max-width: 30ch; }

.footer-kolom-titel {
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 1.5rem;
}
.footer-kolom-titel a { color: inherit; text-decoration: none; transition: color 0.2s; }
.footer-kolom-titel a:hover { color: var(--cream-wit); }
.footer-lijst { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; }
.footer-lijst a { font-size: 0.85rem; color: rgba(244,235,221,0.6); text-decoration: none; transition: color 0.2s; }
.footer-lijst a:hover { color: var(--cream-wit); }

/* Social-icons */
.footer-social { display: flex; gap: 0.7rem; margin-top: 0.4rem; }
.footer-social a {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(244,235,221,0.18);
  color: rgba(244,235,221,0.7);
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.footer-social a:hover { background: var(--terra); border-color: var(--terra); color: var(--cream-wit); transform: translateY(-3px); }
.footer-social svg { width: 17px; height: 17px; }

/* Nieuwsbrief-inschrijving */
.footer-news-note { font-size: 0.85rem; color: rgba(244,235,221,0.5); line-height: 1.7; margin-bottom: 1rem; }
.footer-form { display: flex; gap: 0.5rem; max-width: 280px; }
.footer-form input {
  flex: 1; min-width: 0;
  padding: 0.65rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(244,235,221,0.18);
  background: rgba(244,235,221,0.06);
  color: var(--cream-wit);
  font-family: inherit; font-size: 0.82rem;
}
.footer-form input::placeholder { color: rgba(244,235,221,0.4); }
.footer-form input:focus { outline: none; border-color: var(--terra); }
.footer-form button {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--terra);
  color: var(--cream-wit);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, transform 0.25s;
}
.footer-form button:hover { background: var(--terra-dk); transform: translateY(-2px); }

/* Contactkolom */
.footer-contact { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; }
.footer-contact li {
  font-size: 0.85rem; color: rgba(244,235,221,0.6); line-height: 1.55;
  display: flex; gap: 0.65rem; align-items: flex-start;
}
.footer-contact a { color: rgba(244,235,221,0.6); text-decoration: none; transition: color 0.2s; }
.footer-contact a:hover { color: var(--cream-wit); }
.footer-contact svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; color: var(--terra); }

.footer-onder { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; }
.footer-copy { font-size: 0.72rem; color: rgba(244,235,221,0.28); letter-spacing: 0.04em; }
.footer-adres { font-size: 0.72rem; color: rgba(244,235,221,0.28); letter-spacing: 0.04em; }
.footer-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-legal a { font-size: 0.72rem; color: rgba(244,235,221,0.4); text-decoration: none; letter-spacing: 0.04em; transition: color 0.2s; }
.footer-legal a:hover { color: rgba(244,235,221,0.85); }
.footer-merk-streep { display: flex; flex-direction: column; gap: 3px; }
.footer-merk-streep span { display: block; height: 2px; border-radius: 2px; background: var(--terra); opacity: 0.5; }
.footer-merk-streep span:nth-child(1) { width: 28px; }
.footer-merk-streep span:nth-child(2) { width: 18px; }
.footer-merk-streep span:nth-child(3) { width: 10px; }

/* ─── SCROLL-REVEAL ────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.85s cubic-bezier(0.2,0.7,0.2,1),
    transform 0.85s cubic-bezier(0.2,0.7,0.2,1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="zoom"]  { transform: scale(0.92); }
[data-reveal].in-view { opacity: 1; transform: none; }

/* Hero-entree */
.hero-inner > * { opacity: 0; animation: heroIn 0.9s cubic-bezier(0.2,0.7,0.2,1) forwards; }
.hero-inner > *:nth-child(1) { animation-delay: 0.10s; }
.hero-inner > *:nth-child(2) { animation-delay: 0.22s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.34s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.46s; }

@keyframes heroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ─── OVER ONS PAGINA ───────────────────────────── */
/* Verhaal-blok (editoriaal: beeld + tekst) */
.over-verhaal { background: var(--cream-wit); }
.over-verhaal .over-grid { gap: 5.5rem; }
.over-verhaal-tekst .sectie-titel { margin-bottom: 1.5rem; }
.over-verhaal-tekst p {
  font-size: 1.06rem; line-height: 1.9;
  color: rgba(58,42,36,0.72); max-width: 50ch;
}
.over-verhaal-tekst p + p { margin-top: 1.25rem; }
.over-verhaal-tekst .over-kicker {
  display: inline-block; margin-top: 1.6rem;
  font-family: 'Caveat', 'Fraunces', cursive; font-weight: 700; font-style: normal;
  font-size: 1.9rem; line-height: 1.2; color: var(--terra);
}
/* geen kader-in-kader meer: één organische fotovorm die vrij in de ruimte staat */
.over-verhaal .over-foto-wrap { background: transparent; padding: 0; min-height: 0; border-radius: 0; overflow: visible; }
.over-verhaal .over-foto-wrap img {
  width: 100%; max-width: 460px; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 260px 260px 32px 32px;
  filter: drop-shadow(0 30px 60px rgba(58,42,36,0.22));
}
.over-verhaal .over-badge { background: var(--olive); right: -1.2rem; left: auto; bottom: -1.2rem; }
.over-verhaal .over-badge .badge-groot { font-size: 1.15rem; }
.over-verhaal .over-badge .badge-klein { margin-top: 2px; }

/* Waarden-sectie: verspringende kaarten met groot watermerk-cijfer */
.over-waarden-sectie {
  background:
    radial-gradient(ellipse 60% 45% at 88% 8%, rgba(166,75,42,0.08), transparent 60%),
    radial-gradient(ellipse 55% 45% at 8% 92%, rgba(85,107,47,0.09), transparent 60%),
    var(--cream);
  text-align: center;
}
.over-waarden-sectie .sectie-label { justify-content: center; }
.over-waarden-sectie .sectie-titel,
.over-waarden-sectie .sectie-tekst { margin-left: auto; margin-right: auto; }
.waarden-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem; max-width: 1080px; margin: 4.5rem auto 0;
  align-items: start; text-align: left;
}
.waarde-kaart {
  position: relative; overflow: hidden;
  background: var(--cream-wit);
  border: 1px solid rgba(58,42,36,0.06);
  border-radius: 28px;
  padding: 2.9rem 2.1rem 2.3rem;
  box-shadow: 0 18px 44px rgba(58,42,36,0.07);
  transition: transform 0.45s cubic-bezier(.2,.7,.2,1), box-shadow 0.45s;
}
/* kaarten netjes op één lijn (zigzag verwijderd op verzoek) */
.waarde-kaart:hover { transform: translateY(-10px); box-shadow: 0 34px 70px rgba(58,42,36,0.16); }
/* Groot doorschijnend cijfer als watermerk */
.waarde-kaart-nr {
  position: absolute; top: -1.4rem; right: 0.9rem; z-index: 0;
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 900;
  font-size: 5.6rem; line-height: 1; letter-spacing: -0.04em;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(.2,.7,.2,1), opacity 0.45s;
}
.waarde-kaart:hover .waarde-kaart-nr { transform: translateY(4px) scale(1.04); }
/* Kleuraccent per kaart */
.waarde-kaart.kleur-terra   { --kleur: var(--terra); }
.waarde-kaart.kleur-olijf   { --kleur: var(--olive); }
.waarde-kaart.kleur-espresso{ --kleur: var(--espresso); }
.waarde-kaart-nr { color: var(--kleur); opacity: 0.09; }
.waarde-kaart-body { position: relative; z-index: 1; }
.waarde-kaart-chip {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--kleur); margin-bottom: 1.2rem;
}
.waarde-kaart-chip::before {
  content: ''; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--kleur);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kleur) 16%, transparent);
}
.waarde-kaart h3 {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 600;
  font-size: 1.5rem; color: var(--espresso);
  margin-bottom: 0.7rem; position: relative; display: inline-block;
}
.waarde-kaart h3::after {
  content: ''; position: absolute; left: 0; bottom: -0.3rem;
  width: 0; height: 3px; border-radius: 3px; background: var(--kleur);
  transition: width 0.4s cubic-bezier(.2,.7,.2,1);
}
.waarde-kaart:hover h3::after { width: 100%; }
.waarde-kaart p { font-size: 0.95rem; line-height: 1.8; color: rgba(58,42,36,0.66); }

/* Helden-sectie (de twee merken in fotoshoot-look) */
.helden { background: var(--cream-wit); text-align: center; }
.helden .sectie-label { justify-content: center; }
.helden .sectie-titel, .helden .sectie-tekst { margin-left: auto; margin-right: auto; }
.helden-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3.5rem; max-width: 980px; margin: 4.5rem auto 0;
}
.held { text-align: center; }
.held-foto {
  position: relative; display: block;
  width: 100%; aspect-ratio: 4 / 3;
  border-radius: 30px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(58,42,36,0.16);
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s;
}
.held-foto:hover { transform: translateY(-6px); box-shadow: 0 42px 88px rgba(58,42,36,0.22); }
.held-foto:focus-visible { outline: 3px solid var(--terra); outline-offset: 4px; }
.held.bb .held-foto {
  background:
    radial-gradient(68% 56% at 50% 40%, rgba(249,242,231,0.95), transparent 72%),
    linear-gradient(180deg, #ecdcc6 0%, #e4d3ba 56%, #d6c2a2 100%);
}
.held.zc .held-foto {
  background:
    radial-gradient(68% 56% at 50% 40%, rgba(247,247,233,0.95), transparent 72%),
    linear-gradient(180deg, #e7e8d3 0%, #dbe0c1 56%, #cdd4aa 100%);
}
.held-foto::after {
  content: ''; position: absolute; left: 50%; bottom: 13%;
  width: 46%; height: 8%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(58,42,36,0.22), transparent 70%);
  filter: blur(6px); z-index: 1;
}
.held-foto img {
  position: absolute; left: 50%; bottom: 16%;
  transform: translateX(-50%);
  width: 50%; height: auto; z-index: 2;
  filter: drop-shadow(0 16px 22px rgba(58,42,36,0.18));
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.held-foto:hover img { transform: translateX(-50%) scale(1.05) rotate(-2deg); }
.held-tag {
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 600;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--terra); margin: 1.75rem 0 0.5rem;
}
.held h3 {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 900;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem); letter-spacing: -0.02em;
  color: var(--espresso); margin-bottom: 0.7rem;
}
.held p { font-size: 0.98rem; line-height: 1.8; color: rgba(58,42,36,0.66); max-width: 36ch; margin: 0 auto 1.25rem; }
.held-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 600;
  font-size: 0.92rem; text-decoration: none; color: var(--terra);
  transition: gap 0.25s;
}
.held-link svg { transition: transform 0.25s; }
.held-link:hover { gap: 0.85rem; }
.held-link:hover svg { transform: translateX(4px); }
.helden-meer { margin-top: 4rem; }

/* ─── TIJDLIJN: horizontaal, schuift mee met scroll ── */
.tijdlijn-sectie { background: var(--cream-wit); }
.tijdlijn-stage { padding: 6rem 0; }
.tijdlijn-kop { text-align: center; max-width: 720px; margin: 0 auto; padding: 0 1.75rem; }
.tijdlijn-kop .sectie-label { justify-content: center; }
.tijdlijn-kop .sectie-titel { margin: 0 auto 1.6rem; }
.tijdlijn-balk {
  position: relative; width: min(280px, 60%); height: 5px;
  margin: 0 auto; border-radius: 5px;
  background: var(--cream-dk); overflow: hidden;
}
.tijdlijn-balk-fill {
  position: absolute; top: 0; left: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, var(--terra), var(--olive));
  border-radius: 5px; transition: width 0.12s linear;
}
.tijdlijn-hint {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 1.15rem; font-size: 0.85rem; letter-spacing: 0.02em;
  color: rgba(58,42,36,0.5);
}
.tijdlijn-hint svg { color: var(--terra); }

.tijdlijn-viewport {
  margin-top: 3.5rem; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.tijdlijn-track {
  position: relative; display: flex; align-items: flex-start;
  gap: 2rem; width: max-content;
  padding: 64px 2.5rem 1.5rem;
}
/* Horizontale verbindingslijn achter de nodes */
.tijdlijn-spoor {
  position: absolute; top: 73px; left: 2.5rem; right: 2.5rem;
  height: 3px; background: var(--cream-dk); border-radius: 3px; z-index: 0;
}
.tijdlijn-item {
  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-start;
  width: clamp(268px, 78vw, 340px);
  scroll-snap-align: center;
}
/* Eind-ruimte zodat de laatste kaart tot het midden kan scrollen */
.tijdlijn-eind { flex: 0 0 auto; width: 0; align-self: stretch; }
.tijdlijn-node {
  width: 18px; height: 18px; box-sizing: border-box;
  margin: 0 0 1.5rem 1.85rem; position: relative; z-index: 2;
  border-radius: 50%; background: var(--cream-wit);
  border: 3px solid var(--cream-dk);
  transition: border-color 0.45s, transform 0.45s, box-shadow 0.45s;
}
.tijdlijn-item.aan .tijdlijn-node {
  border-color: var(--terra); transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(166,75,42,0.12);
}
.tijdlijn-kaart {
  width: 100%; background: var(--cream);
  border-radius: 22px; padding: 1.7rem 1.85rem;
  box-shadow: 0 14px 36px rgba(58,42,36,0.07);
  opacity: 0.5; transform: translateY(12px);
  transition: opacity 0.55s, transform 0.55s cubic-bezier(.2,.7,.2,1), box-shadow 0.45s;
}
.tijdlijn-item.aan .tijdlijn-kaart { opacity: 1; transform: none; }
/* Fallback (mobiel / geen JS): geen dim-effect, alles meteen zichtbaar */
.tijdlijn-sectie:not(.is-pinned) .tijdlijn-kaart { opacity: 1; transform: none; }
.tijdlijn-kaart:hover { box-shadow: 0 26px 56px rgba(58,42,36,0.14); }
.tijdlijn-jaar {
  display: block; font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 900;
  font-size: 1.85rem; line-height: 1; letter-spacing: -0.02em;
  color: var(--terra); margin-bottom: 0.5rem;
}
.tijdlijn-kaart h3 {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 600;
  font-size: 1.25rem; color: var(--espresso); margin-bottom: 0.5rem;
}
.tijdlijn-kaart p { font-size: 0.92rem; line-height: 1.7; color: rgba(58,42,36,0.68); }

/* Pinned-modus (desktop, via JS): sectie wordt hoog, stage plakt vast,
   en de track schuift horizontaal mee terwijl je verticaal scrollt. */
.tijdlijn-sectie.is-pinned .tijdlijn-stage {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 2rem 0;
}
.tijdlijn-sectie.is-pinned .tijdlijn-viewport { overflow: hidden; }
.tijdlijn-sectie.is-pinned .tijdlijn-track { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, [data-reveal], .hero-inner > * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .snack-img { opacity: 0 !important; }
  .snack-img.is-active { opacity: 1 !important; } /* zonder beweging: alleen de eerste snack, geen wissel */
  .marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}
/* het mobiele menu-paneel wordt verborgen VIA een transform — die moet ook
   bij reduced-motion blijven staan, anders ligt het menu permanent open */
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .nav-links { transform: translateY(-110%) !important; }
  nav.menu-open .nav-links { transform: translateY(0) !important; }
}

/* ─── RESPONSIVE ───────────────────────────────── */
@media (max-width: 900px) {
  nav { padding: 1rem 1.5rem; }
  .nav-logo-img { height: 50px; }
  .nav-logo { position: relative; z-index: 110; }

  .nav-toggle { display: flex; position: relative; z-index: 110; }

  .nav-links {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5.5rem 1.5rem 2rem;
    background: rgba(244,235,221,0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 14px 34px rgba(58,42,36,0.14);
    transform: translateY(-110%);
    transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
    z-index: 90;
  }
  nav.menu-open .nav-links { transform: translateY(0); }

  .nav-links a {
    display: block;
    width: 100%;
    padding: 1rem 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.92;
    border-bottom: 1px solid var(--cream-dk);
  }
  .nav-links a[aria-current="page"]:not(.nav-cta)::after { display: none; }
  .nav-links .nav-cta {
    margin-top: 1.5rem;
    padding: 0.85rem 1.4rem;
    text-align: center;
    border-bottom: none;
  }

  .hero { padding: 7.5rem 1.5rem 3.5rem; }
  .hero-titel { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .hero-snack { width: clamp(110px, 31vw, 180px); height: clamp(73px, 20.6vw, 120px); }
  .hero-deco { width: clamp(220px, 58vw, 340px); }
  .scroll-hint { display: none; }

  .page-hero { padding: 9rem 1.75rem 4rem; }

  .stats { padding: 3.5rem 1.75rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1rem; }

  .sectie, .quote-blok, footer { padding-left: 1.75rem; padding-right: 1.75rem; }
  .sectie { padding-top: 5rem; padding-bottom: 5rem; }

  .marquee-logo { height: 84px; }
  .partners { padding: 5rem 0; }
  .merken-rij { grid-template-columns: 1fr; }
  .nieuws-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .nieuws-kaart { padding: 2rem; }
  .home-nieuws-grid { grid-template-columns: 1fr; gap: 2.5rem; max-width: 420px; }
  .home-nieuws-head { margin-bottom: 3rem; }
  .producten-lijst { gap: 4rem; }
  .product-rij { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .product-rij:nth-child(odd) .product-visual { order: 0; }
  .product-foto { width: min(88%, 340px); }
  .product-rij > * { min-width: 0; } /* brede Dela-productnamen mogen de kolom niet oprekken */
  .btn { white-space: normal; text-align: center; } /* lange knopteksten wrappen op mobiel */
  .producten-hero { padding: 9rem 1.5rem 3.5rem; }
  .product-tekst .merkstreep { margin-left: auto; margin-right: auto; }
  .product-desc { margin-left: auto; margin-right: auto; }
  .modal { padding: 1.75rem; }
  .modal-head { flex-direction: column; align-items: flex-start; gap: 1rem; padding-right: 1.5rem; }
  .merken-grid { grid-template-columns: 1fr; gap: 3rem; }
  .merken-beeld { order: -1; }
  .merken-rond { width: min(100%, 340px); }
  .merken-bb { width: clamp(140px, 38vw, 220px); bottom: -6%; }
  .variatie-grid { grid-template-columns: 1fr; gap: 3rem; }
  .variatie-tekst { text-align: center; }
  .mini-kaartjes { gap: 0.5rem; }
  .mini-kaart-logo { width: 70%; }
  .mini-kaart-foto { max-width: 160px; }
  .mini-badge-groot { width: 140px; height: 140px; }
  .over-grid { grid-template-columns: 1fr; gap: 3rem; }
  .over-grid > * { min-width: 0; }
  .over-foto-wrap { min-height: 320px; }
  /* badge blijft binnen het scherm op mobiel */
  .over-badge { left: 0.9rem; }
  .over-verhaal .over-badge { right: 0.9rem; left: auto; }
  .over-badge { width: 96px; height: 96px; }
  .over-verhaal .over-grid { gap: 3rem; }
  .over-verhaal .over-foto-wrap { min-height: 280px; }
  .over-verhaal-tekst p { max-width: none; }
  .waarden-grid { grid-template-columns: 1fr; gap: 1.5rem; max-width: 420px; text-align: left; margin-top: 3rem; }
  .waarde-kaart:nth-child(2), .waarde-kaart:nth-child(3) { margin-top: 0; }
  .waarde-kaart-nr { font-size: 7rem; top: -1.1rem; }

  .tijdlijn-stage { padding: 4.5rem 0; }
  .tijdlijn-viewport { margin-top: 2.75rem; padding-bottom: 0.5rem; }
  .tijdlijn-track { gap: 1.25rem; padding: 64px 1.75rem 1rem; }
  .tijdlijn-spoor { left: 1.75rem; right: 1.75rem; }
  .helden-grid { grid-template-columns: 1fr; gap: 3.5rem; max-width: 360px; }

  .footer-boven { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
  .footer-merk { grid-column: 1 / -1; }
  .footer-form { max-width: none; }
  .footer-onder { flex-direction: column; gap: 1.25rem; text-align: center; }
  .footer-legal { justify-content: center; }
}

/* ════════════════════════════════════════════════════
   OVER ONS — rustiger, ruimer, moderner (gescopet op body)
   ════════════════════════════════════════════════════ */
.pagina-over { background: var(--cream-wit); }

/* Hero gebruikt de homepage-stijl (.hero) met vallend woord; geen eigen overrides nodig. */
.pagina-over .over-kicker { font-size: 1.5rem; }

/* Waarden-kaarten kalmer: zachtere schaduw, bijna geen rand */
.pagina-over .waarde-kaart {
  box-shadow: 0 16px 48px rgba(58,42,36,0.05);
  border-color: rgba(58,42,36,0.045);
}

/* CTA als dramatische, donkere afsluiter — het accent dat eruit springt */
.pagina-over .contact {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 72% 80% at 50% -12%, rgba(166,75,42,0.30), transparent 62%),
    radial-gradient(ellipse 64% 72% at 102% 118%, rgba(85,107,47,0.24), transparent 60%),
    var(--espresso);
  color: var(--cream-wit);
}
.pagina-over .contact .sectie-titel { color: var(--cream-wit); }
.pagina-over .contact .sectie-tekst { color: rgba(244,235,221,0.74); }
.pagina-over .contact .sectie-label--plain span { color: #e0936a; }
.pagina-over .contact .btn-lijn {
  color: var(--cream-wit); border-color: rgba(244,235,221,0.45);
}
.pagina-over .contact .btn-lijn:hover {
  background: var(--cream-wit); color: var(--espresso); border-color: var(--cream-wit);
}

/* Ruimere maatvoering alleen op desktop (mobiel houdt de compacte basis) */
@media (min-width: 901px) {
  .pagina-over .over-verhaal { padding: 9.5rem 6rem; }
  .pagina-over .over-verhaal .over-grid { gap: 6.5rem; }
  .pagina-over .over-verhaal-tekst p { font-size: 1.12rem; line-height: 1.95; }

  .pagina-over .tijdlijn-stage { padding: 7rem 0; }

  .pagina-over .over-waarden-sectie { padding: 10rem 6rem; }
  .pagina-over .waarden-grid { gap: 2.6rem; margin-top: 5.5rem; }
  .pagina-over .waarde-kaart { padding: 3rem 2.4rem 2.7rem; }

  .pagina-over .helden { padding: 10rem 6rem; }
  .pagina-over .helden-grid { gap: 4.5rem; margin-top: 5.5rem; }

  .pagina-over .contact { padding: 11rem 6rem; }
  .pagina-over .contact .sectie-titel { font-size: clamp(2.6rem, 4.4vw, 3.7rem); }
}

/* ════════════════════════════════════════════════════
   OVER ONS — geleerd van "Voorbeeld pagina 3":
   aurora-gloed, zwevende proof-cards, pull-quote, accenten
   ════════════════════════════════════════════════════ */

/* Zachte aurora-gloed achter de secties (in merkkleuren) */
.pagina-over .over-verhaal {
  background:
    radial-gradient(ellipse 48% 42% at 10% 16%, rgba(166,75,42,0.08), transparent 62%),
    radial-gradient(ellipse 46% 46% at 94% 88%, rgba(85,107,47,0.09), transparent 62%),
    var(--cream-wit);
}
.pagina-over .helden {
  background:
    radial-gradient(ellipse 52% 42% at 86% 12%, rgba(166,75,42,0.08), transparent 60%),
    radial-gradient(ellipse 50% 44% at 8% 96%, rgba(85,107,47,0.08), transparent 60%),
    var(--cream-wit);
}

/* Inline geaccentueerde sleutelwoorden (zoals de gekleurde woorden in het voorbeeld) */
.pagina-over .accent { color: var(--terra); font-weight: 600; }
.pagina-over .accent-olijf { color: var(--olive); font-weight: 600; }

/* Zwevende held-foto's op een zachte gloed */
.pagina-over .held { position: relative; }
.pagina-over .held::before {
  content: ''; position: absolute; inset: -6% 5% 40% 5%;
  border-radius: 50%; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(166,75,42,0.12), transparent 70%);
  filter: blur(14px); pointer-events: none;
}
.pagina-over .held.zc::before { background: radial-gradient(ellipse at center, rgba(85,107,47,0.13), transparent 70%); }
.pagina-over .held > * { position: relative; z-index: 1; }
.pagina-over .held-foto { box-shadow: 0 38px 84px rgba(58,42,36,0.15); }

/* Pull-quote (Mendelt) — gecentreerde quote met aurora-gloed */
.over-quote {
  position: relative; overflow: hidden; text-align: center;
  background:
    radial-gradient(ellipse 46% 62% at 16% 10%, rgba(166,75,42,0.11), transparent 60%),
    radial-gradient(ellipse 44% 60% at 88% 94%, rgba(85,107,47,0.12), transparent 60%),
    var(--cream-wit);
}
.over-quote-inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; }
.over-quote-mark {
  display: block; font-family: 'Fraunces', serif; font-weight: 900;
  font-size: 5rem; line-height: 0.6; color: var(--terra);
  opacity: 0.32; margin-bottom: 1.4rem;
}
.over-quote blockquote {
  margin: 0 0 2.2rem;
  font-family: 'Caveat', 'Fraunces', cursive; font-weight: 600; font-style: normal;
  font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.2;
  letter-spacing: 0; color: var(--espresso);
}
.over-quote blockquote em { font-style: normal; color: var(--terra); }
.over-quote-bron { display: flex; flex-direction: column; gap: 0.2rem; }
.over-quote-naam { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; color: var(--espresso); }
.over-quote-rol {
  font-family: 'Quicksand', system-ui, sans-serif; font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(58,42,36,0.5);
}
@media (min-width: 901px) {
  .pagina-over .over-quote { padding: 5rem 6rem; }
}

/* ════════════════════════════════════════════════════
   FAQ — uitklapbaar (homepage, producten, voor-professionals)
   ════════════════════════════════════════════════════ */
.faq {
  background:
    radial-gradient(ellipse 50% 45% at 14% 10%, rgba(166,75,42,0.07), transparent 60%),
    radial-gradient(ellipse 48% 45% at 88% 92%, rgba(85,107,47,0.07), transparent 60%),
    var(--cream-wit);
}
.faq-kop { text-align: center; margin-bottom: 3.5rem; }
.faq-kop .sectie-label { justify-content: center; }
.faq-kop .sectie-titel { margin: 0 auto; }
.faq-lijst { max-width: 800px; margin: 0 auto; }
.faq-item {
  background: var(--cream-wit);
  border: 1px solid rgba(58,42,36,0.10);
  border-radius: 18px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 18px rgba(58,42,36,0.04);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.faq-item:last-child { margin-bottom: 0; }
.faq-item[open] {
  box-shadow: 0 20px 48px rgba(58,42,36,0.09);
  border-color: rgba(166,75,42,0.30);
}
.faq-item summary {
  list-style: none; cursor: pointer; outline: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.45rem 1.7rem;
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 600;
  font-size: 1.1rem; line-height: 1.4; color: var(--espresso);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { color: var(--terra); }
.faq-item summary:hover { color: var(--terra); }
.faq-plus {
  flex-shrink: 0; width: 22px; height: 22px; color: var(--terra);
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.faq-item[open] .faq-plus { transform: rotate(135deg); }
.faq-antwoord { padding: 0 1.7rem 1.5rem; }
.faq-antwoord p { margin: 0; font-size: 0.98rem; line-height: 1.8; color: rgba(58,42,36,0.68); max-width: 64ch; }
.faq-antwoord a { color: var(--terra); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.faq-antwoord a:hover { color: var(--terra-dk); }
.faq-item[open] .faq-antwoord { animation: faqIn 0.35s ease both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 'Meer vragen': eerste vier vragen zichtbaar, de rest verstopt in .faq-rest.
   De knop (drie bolletjes + label) toont de rest en verwijdert zichzelf. */
.faq-rest[hidden] { display: none; }
.faq-meer {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  margin: 2rem auto 0; padding: 0.6rem 1.6rem;
  background: none; border: none; cursor: pointer;
  border-radius: 14px;
}
.faq-meer:focus-visible { outline: 2px solid var(--terra); outline-offset: 4px; }
.faq-meer-dots { display: flex; gap: 0.55rem; }
.faq-meer-dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--terra);
  animation: faqDot 1.8s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.faq-meer-dots span:nth-child(2) { animation-delay: 0.25s; }
.faq-meer-dots span:nth-child(3) { animation-delay: 0.5s; }
@keyframes faqDot { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } }
.faq-meer:hover .faq-meer-dots span { transform: translateY(-3px); animation-play-state: paused; opacity: 1; }
.faq-meer:hover .faq-meer-dots span:nth-child(2) { transition-delay: 0.06s; }
.faq-meer:hover .faq-meer-dots span:nth-child(3) { transition-delay: 0.12s; }
.faq-meer-label {
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--terra);
  transition: color 0.3s;
}
.faq-meer:hover .faq-meer-label { color: var(--terra-dk); }

@media (max-width: 900px) {
  .faq-kop { margin-bottom: 2.5rem; }
  .faq-item summary { padding: 1.25rem 1.3rem; font-size: 1rem; gap: 1rem; }
  .faq-antwoord { padding: 0 1.3rem 1.3rem; }
}

/* ════════════════════════════════════════════════════
   ZWAMREIS — van tarwe tot zwamcijs (stappen onthullen
   van links naar rechts bij het scrollen; blok zelf
   beweegt niet). Homepage, boven 'vers uit de oven'.
   ════════════════════════════════════════════════════ */
.zwamreis {
  position: relative;
  background:
    radial-gradient(ellipse 58% 50% at 8% 4%, rgba(166,75,42,0.10), transparent 60%),
    radial-gradient(ellipse 58% 55% at 94% 98%, rgba(85,107,47,0.12), transparent 60%),
    linear-gradient(180deg, #f6ede0 0%, #efe1ce 100%);
}
.zwamreis-sectie {
  background:
    radial-gradient(ellipse 58% 50% at 8% 4%, rgba(166,75,42,0.10), transparent 60%),
    radial-gradient(ellipse 58% 55% at 94% 98%, rgba(85,107,47,0.12), transparent 60%),
    linear-gradient(180deg, #f6ede0 0%, #efe1ce 100%);
}
.zwamreis-sectie .tijdlijn-jaar { color: var(--olive); }
.zwamreis-stage { padding: 7rem 6rem; }
/* Vastgepind tijdens het scrollen (zoals de tijdlijn op Over ons): het blok
   blijft staan terwijl de slang zich tekent en de stappen onthullen. */
.zwamreis.is-pinned .zwamreis-stage {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 3rem; padding-bottom: 3rem;
}
.zwamreis-kop { text-align: center; max-width: 680px; margin: 0 auto 4rem; }
.zwamreis-kop .sectie-label { justify-content: center; }
.zwamreis-kop .sectie-titel { margin: 0 auto 1rem; }
.zwamreis-spoor {
  position: relative; max-width: 1180px; margin: 0 auto;
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding-bottom: 5.5rem; /* ruimte voor de zigzag */
}
/* Zigzag: even stappen zakken, zodat de slang-route ertussen kan slingeren */
.zwamreis-spoor .stap:nth-of-type(2n) { margin-top: 96px; }
/* Slingerende 'slang'-route (SVG) die van links naar rechts wordt getekend */
.zwamreis-pad {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; overflow: visible;
}
#pad-route, #pad-slang { fill: none; stroke-linecap: round; stroke-dasharray: 1 12; }
#pad-route { stroke: var(--cream-dk); stroke-width: 3; opacity: 0.7; }
#pad-slang { stroke: url(#slangGrad); stroke-width: 3.6; }
.stap {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 0.4rem;
  opacity: 0; transform: translateY(20px) scale(0.94);
  transition: opacity 0.6s cubic-bezier(.2,.7,.2,1), transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.stap.in-beeld { opacity: 1; transform: none; }
.stap-icoon {
  box-sizing: border-box;
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; color: var(--cream-wit);
  border: 4px solid var(--cream-wit);
  box-shadow: 0 16px 32px rgba(58,42,36,0.18);
}
.stap.kleur-terra .stap-icoon { background: linear-gradient(150deg, #c0613a, var(--terra)); }
.stap.kleur-olijf .stap-icoon { background: linear-gradient(150deg, #74883f, var(--olive)); }
.stap-icoon svg { width: 38px; height: 38px; }
.stap-nr {
  margin-top: 1rem;
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 600;
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--terra);
}
.stap.kleur-olijf .stap-nr { color: var(--olive); }
.stap h3 {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 600;
  font-size: 1.05rem; line-height: 1.2; color: var(--espresso);
  margin: 0.3rem 0 0.5rem;
}
.stap p { font-size: 0.82rem; line-height: 1.6; color: rgba(58,42,36,0.66); }

@media (max-width: 900px) {
  .zwamreis-stage { padding: 5rem 1.75rem; }
  .zwamreis-kop { margin-bottom: 3rem; }
  .zwamreis-spoor { flex-direction: column; gap: 0; max-width: 440px; padding-bottom: 0; }
  .zwamreis-spoor .stap:nth-of-type(2n) { margin-top: 0; } /* geen zigzag op mobiel */
  .zwamreis-pad { display: none; }
  .zwamreis-spoor::before {
    content: ''; position: absolute; top: 8px; bottom: 8px; left: 39px;
    border-left: 3px dotted var(--cream-dk);
  }
  .stap {
    flex: none; width: 100%; flex-direction: row; align-items: flex-start;
    text-align: left; gap: 1.25rem; padding: 0 0 2.5rem;
  }
  .stap:last-child { padding-bottom: 0; }
  .stap-icoon { flex-shrink: 0; }
  .stap-nr { margin-top: 0; }
  .stap-tekst { padding-top: 0.4rem; }
}

/* ════════════════════════════════════════════════════
   PRODUCTEN-HERO — zwevende broodjes i.p.v. swirl-deco,
   met zachte zweef-animatie + muis-parallax (JS).
   ════════════════════════════════════════════════════ */
.hero-broodje {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(170px, 23vw, 320px);
}
.hero-broodje img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 24px 42px rgba(58,42,36,0.26));
  animation: broodjeZweef 7s ease-in-out infinite;
}
.hb-1 { top: 7%; left: -3%; }
.hb-1 img { --rot: -9deg; animation-delay: 0s; }
.hb-2 { top: 11%; right: -3%; }
.hb-2 img { --rot: 8deg; animation-delay: 1.4s; }
.hb-3 { bottom: 4%; left: 1%; width: clamp(150px, 19vw, 270px); }
.hb-3 img { --rot: 7deg; animation-delay: 2.2s; }
.hb-4 { bottom: 3%; right: 0%; width: clamp(150px, 19vw, 270px); }
.hb-4 img { --rot: -7deg; animation-delay: 0.7s; }
@keyframes broodjeZweef {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-16px) rotate(calc(var(--rot, 0deg) + 2deg)); }
}
@media (max-width: 900px) {
  .hb-1, .hb-2 { width: clamp(120px, 33vw, 190px); }
  .hb-3, .hb-4 { width: clamp(105px, 28vw, 165px); }
  .hb-1 { top: 5%; left: -7%; }
  .hb-2 { top: 7%; right: -7%; }
  .hb-3 { bottom: 3%; left: -5%; }
  .hb-4 { bottom: 2%; right: -5%; }
}

/* ════════════════════════════════════════════════════
   VOORDELEN — "Waarom werken met Huis van Hartig?"
   (voor-professionals, boven de FAQ)
   ════════════════════════════════════════════════════ */
.voordelen { background: var(--cream-wit); padding-top: 4rem; padding-bottom: 4rem; }
.voordelen-kop { text-align: center; max-width: 640px; margin: 0 auto 3.5rem; }
.voordelen-kop .sectie-label { justify-content: center; }
.voordelen-kop .sectie-titel { margin: 0 auto 1rem; }
.voordelen-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; max-width: 1060px; margin: 0 auto;
}
.voordeel {
  background: var(--cream-wit);
  border: 1px solid rgba(58,42,36,0.06);
  border-radius: 22px;
  padding: 2.1rem 1.9rem;
  box-shadow: 0 14px 40px rgba(58,42,36,0.05);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s;
}
.voordeel:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(58,42,36,0.12); }
.voordeel.kleur-terra { --kleur: var(--terra); }
.voordeel.kleur-olijf { --kleur: var(--olive); }
.voordeel-icoon {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center; color: var(--cream-wit);
  background: linear-gradient(150deg, color-mix(in srgb, var(--kleur) 78%, #fff 22%), var(--kleur));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--kleur) 35%, transparent);
  margin-bottom: 1.3rem;
}
.voordeel-icoon svg { width: 28px; height: 28px; }
.voordeel h3 {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 600;
  font-size: 1.2rem; line-height: 1.25; color: var(--espresso);
  margin-bottom: 0.55rem;
}
.voordeel p { font-size: 0.92rem; line-height: 1.75; color: rgba(58,42,36,0.68); }

@media (max-width: 900px) {
  .voordelen-grid { grid-template-columns: 1fr; gap: 1.1rem; max-width: 440px; }
  .voordelen-kop { margin-bottom: 2.5rem; }
}

/* ════════════════════════════════════════════════════
   AFBAKKEN — interactieve kleur-match (pinned) + uitleg
   ════════════════════════════════════════════════════ */
.afbak-match { position: relative; background: linear-gradient(180deg, var(--cream-wit) 0%, var(--cream) 100%); }
.afbak-stage { padding: 5rem 1.75rem; }
.afbak-match.is-pinned .afbak-stage {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
}
.afbak-kop { text-align: center; max-width: 760px; margin: 0 auto 2.4rem; }
.afbak-kop .sectie-titel { margin: 0 auto; }

/* Toneel: het Zwamcijsje schuift van buiten beeld áchter het palet in beeld. */
.afbak-toneel {
  position: relative; overflow: hidden;
  width: min(920px, 100%); margin: 0 auto;
  height: clamp(380px, 52vh, 540px);
}
.afbak-img {
  position: absolute; left: 50%; top: 34%;
  max-width: clamp(280px, 36vw, 430px); max-height: 62%;
  width: auto; height: auto;
  transform: translate(-50%, -50%);
  z-index: 1; will-change: transform, filter;
  /* --bak wordt door het script gezet: bleker vóór de match, donkerder erna */
  filter: drop-shadow(0 26px 46px rgba(58,42,36,0.3)) brightness(var(--bak, 1));
}
.afbak-gloed {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: 58%; height: 60%; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(207,124,51,0.55), transparent 76%);
  filter: blur(30px); opacity: 0; transition: opacity 0.5s;
}
.afbak-match.is-match .afbak-gloed { opacity: 1; }

/* Verf-palet, vóór het broodje: de lat loopt door het midden van het broodje.
   (52px hoog → top = 34% van het toneel minus halve palethoogte) */
.afbak-palette-wrap { position: absolute; top: calc(34% - 26px); left: 0; right: 0; z-index: 2; }
.palette {
  position: relative; display: flex; height: 52px;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 16px 32px rgba(58,42,36,0.22);
}
/* Korststructuur uit de productfoto over het hele palet: een genormaliseerde
   grijstegel (gesampled uit Zwamcijsje_1.webp) moduleert elke swatchkleur */
.palette::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: url('Huis van Hartig/Fotos/korst-textuur.png') center / cover;
  mix-blend-mode: overlay; opacity: 0.85;
  pointer-events: none;
}
.swatch { flex: 1; }
.swatch.doel { position: relative; transition: box-shadow 0.4s; }
.afbak-match.is-match .swatch.doel { box-shadow: inset 0 0 0 4px var(--cream-wit); }
.palette-naald {
  position: absolute; top: -17px; left: 0; transform: translateX(-50%);
  width: 0; height: 0; z-index: 3;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 13px solid var(--espresso);
  transition: left 0.08s linear;
}
.palette-labels {
  display: flex; justify-content: space-between;
  margin-top: 0.6rem; font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(58,42,36,0.55);
  /* labels lopen nu over het broodje heen → licht schild voor leesbaarheid */
  text-shadow: 0 1px 8px var(--cream-wit), 0 0 3px var(--cream-wit);
}
.palette-labels .doellabel { color: var(--terra); font-weight: 600; }

/* Status-pil onder het broodje: neutraal tijdens het bakken, olijf + vinkje
   bij de perfecte kleur, terracotta wanneer je te lang doorbakt */
.afbak-check {
  position: absolute; left: 50%; bottom: 8%; z-index: 4;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 1.1rem; border-radius: 999px;
  background: var(--cream-wit); color: var(--espresso);
  border: 1px solid rgba(58,42,36,0.12);
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 600;
  font-size: 0.82rem; box-shadow: 0 14px 30px rgba(58,42,36,0.12);
  transition: background 0.35s, color 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.afbak-check svg { width: 18px; height: 18px; display: none; }
.afbak-check.wissel { animation: afbakPop 0.32s cubic-bezier(.2,1.3,.5,1); }
@keyframes afbakPop { from { transform: translateX(-50%) translateY(6px) scale(0.94); } to { transform: translateX(-50%) translateY(0) scale(1); } }
.afbak-match.is-match .afbak-check {
  background: var(--olive); color: var(--cream-wit); border-color: transparent;
  padding-left: 0.7rem; box-shadow: 0 14px 30px rgba(85,107,47,0.42);
}
.afbak-match.is-match .afbak-check svg { display: block; }
.afbak-match.is-over .afbak-check {
  background: var(--terra); color: var(--cream-wit); border-color: transparent;
  box-shadow: 0 14px 30px rgba(166,75,42,0.4);
}

/* Geschreven afbakinstructie */
.afbak-uitleg { background: var(--cream-wit); }
.uitleg-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  max-width: 980px; margin: 0 auto;
}
.uitleg-kaart {
  background: var(--cream); border-radius: 22px; padding: 2.2rem 2.1rem;
  box-shadow: 0 14px 40px rgba(58,42,36,0.05);
}
.uitleg-kaart h3 {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 600;
  font-size: 1.35rem; color: var(--espresso); margin-bottom: 1.2rem;
}
.uitleg-lijst { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; }
.uitleg-lijst li {
  display: flex; align-items: baseline; gap: 0.9rem;
  font-size: 0.95rem; line-height: 1.6; color: rgba(58,42,36,0.72);
}
.uitleg-tijd {
  flex-shrink: 0; min-width: 92px;
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 700; font-size: 0.95rem;
  color: var(--terra);
}
.afbak-uitleg p { font-size: 0.96rem; line-height: 1.8; color: rgba(58,42,36,0.72); }
.afbak-uitleg p + p { margin-top: 1.1rem; }
.oven-note {
  margin-top: 1.3rem !important; padding: 1.1rem 1.25rem;
  border-left: 3px solid var(--olive); border-radius: 0 12px 12px 0;
  background: rgba(85,107,47,0.07);
  font-family: 'Fraunces', serif; font-style: italic; font-size: 1rem !important;
  color: var(--espresso) !important; line-height: 1.7 !important;
}

@media (max-width: 900px) {
  .afbak-stage { padding: 4rem 1.5rem; }
  .uitleg-grid { grid-template-columns: 1fr; gap: 1.25rem; max-width: 460px; }
  .uitleg-tijd { min-width: 78px; }
}

/* ════════════════════════════════════════════════════
   SPECS — compacte productinformatie (voor professionals):
   pill-tabs wisselen één kaart met foto, kern-chips en
   een compacte voedingsgrid. Data uit de specificaties.
   ════════════════════════════════════════════════════ */
.specs {
  background:
    radial-gradient(ellipse 50% 45% at 88% 8%, rgba(166,75,42,0.07), transparent 60%),
    radial-gradient(ellipse 48% 45% at 10% 95%, rgba(85,107,47,0.08), transparent 60%),
    var(--cream);
}
.specs-kop { text-align: center; max-width: 640px; margin: 0 auto 2.2rem; }
.specs-kop .sectie-label { justify-content: center; }
.specs-kop .sectie-titel { margin: 0 auto 1rem; }

.specs-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  margin: 0 auto 2.4rem;
}
.specs-tab {
  padding: 0.6rem 1.25rem; border-radius: 999px;
  border: 1.5px solid rgba(58,42,36,0.16); background: transparent;
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 600; font-size: 0.9rem;
  color: var(--espresso); cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}
.specs-tab:hover { border-color: var(--terra); color: var(--terra); transform: translateY(-1px); }
.specs-tab.actief { background: var(--terra); border-color: var(--terra); color: var(--cream-wit); }
.specs-tab:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }

.specs-kaart {
  display: grid; grid-template-columns: 340px 1fr; gap: 2.6rem;
  align-items: center;
  max-width: 940px; margin: 0 auto;
}
.specs-kaart .specs-info {
  padding: 2.4rem 2.4rem;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(58,42,36,0.08);
  transition: background 0.4s ease;
}
.specs-kaart.merk-bb .specs-info { background: #dce8fd; }
.specs-kaart.merk-zc .specs-info { background: #fde8d8; }
/* Studio-fotokader in merk-achtergrond (compacte variant van .product-foto) */
.specs-foto {
  position: relative; aspect-ratio: 1 / 1; border-radius: 24px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(58,42,36,0.12);
}
.specs-foto.bb {
  background:
    radial-gradient(68% 56% at 50% 40%, rgba(120,158,240,0.55), transparent 68%),
    linear-gradient(180deg, #2764E7 0%, #1c4fc0 100%);
}
.specs-foto.zc {
  background:
    radial-gradient(68% 56% at 50% 40%, rgba(255,140,80,0.55), transparent 68%),
    linear-gradient(180deg, #F55200 0%, #c94200 100%);
}
.specs-foto::after {
  content: ''; position: absolute; left: 50%; bottom: 17%;
  width: 50%; height: 7%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.28), transparent 70%);
  filter: blur(6px); z-index: 1;
}
.specs-foto img {
  position: absolute; left: 50%; bottom: 20%;
  transform: translateX(-50%);
  width: 66%; height: auto; z-index: 2;
  filter: drop-shadow(0 16px 22px rgba(58,42,36,0.18));
}

.specs-tag {
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 700;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--terra); margin-bottom: 0.4rem;
}
.specs-naam {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 900;
  font-size: 2rem; color: var(--espresso); margin-bottom: 1.1rem;
}
.specs-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }
.specs-chip {
  padding: 0.45rem 0.85rem; border-radius: 999px;
  background: rgba(166,75,42,0.08);
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 0.8rem; color: rgba(58,42,36,0.72);
}
.specs-chip strong { color: var(--espresso); font-weight: 700; }
.merk-bb .specs-chip { background: rgba(39,100,231,0.10); }
.merk-zc .specs-chip { background: rgba(245,82,0,0.10); }
.merk-bb .specs-cel { background: rgba(39,100,231,0.08); }
.merk-zc .specs-cel { background: rgba(245,82,0,0.08); }

.specs-tabel {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem;
  margin: 0 0 0.9rem;
}
.specs-cel { background: var(--cream); border-radius: 14px; padding: 0.75rem 0.9rem; }
.specs-cel dt {
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: rgba(58,42,36,0.5); margin-bottom: 0.2rem;
}
.specs-cel dd {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 700;
  font-size: 1.02rem; color: var(--espresso); margin: 0;
}
.specs-cel dd small {
  display: block;
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 500;
  font-size: 0.68rem; color: rgba(58,42,36,0.55); margin-top: 0.15rem;
}
.specs-note { font-size: 0.78rem; color: rgba(58,42,36,0.5); margin-bottom: 1.2rem; }
.specs-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 700;
  font-size: 0.92rem; color: var(--terra); text-decoration: none;
  transition: color 0.3s, gap 0.3s;
}
.specs-link:hover { color: var(--terra-dk); gap: 0.7rem; }

/* Wissel: inhoud fadet kort omhoog bij een andere product-keuze */
.specs-kaart.wissel .specs-info > * { animation: specsIn 0.4s ease both; }
.specs-kaart.wissel .specs-info > *:nth-child(2) { animation-delay: 0.04s; }
.specs-kaart.wissel .specs-info > *:nth-child(3) { animation-delay: 0.08s; }
.specs-kaart.wissel .specs-info > *:nth-child(4) { animation-delay: 0.12s; }
.specs-kaart.wissel .specs-foto img { animation: specsFotoIn 0.45s ease both; }
@keyframes specsIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes specsFotoIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%); }
}

@media (max-width: 900px) {
  .specs-kaart { grid-template-columns: 1fr; gap: 1.6rem; padding: 1.5rem; }
  .specs-foto { max-width: 300px; margin: 0 auto; width: 100%; }
  .specs-tabel { grid-template-columns: repeat(2, 1fr); }
  .specs-naam { font-size: 1.7rem; }
}

/* ════════════════════════════════════════════════════
   PROEFPAKKET — conversiepagina: pitch links, formulier
   rechts (boven de vouw), daaronder stappen, inhoud en
   een contact-alternatief.
   ════════════════════════════════════════════════════ */
.pp-hero {
  padding: 10.5rem 6rem 5.5rem;
  background:
    radial-gradient(ellipse 55% 50% at 12% 0%, rgba(166,75,42,0.10), transparent 60%),
    radial-gradient(ellipse 50% 45% at 92% 90%, rgba(85,107,47,0.09), transparent 60%),
    linear-gradient(180deg, var(--cream-wit) 0%, var(--cream) 100%);
}
.pp-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 4.5rem;
  align-items: start; max-width: 1180px; margin: 0 auto;
}
/* pitch-tekst bovenaan uitgelijnd en blijft plakken tot je voorbij het formulier scrollt */
.pp-pitch { position: sticky; top: 6.5rem; }
.pp-titel {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 900;
  font-size: clamp(2.6rem, 4.6vw, 4.2rem); line-height: 1.04;
  color: var(--espresso); margin: 0.5rem 0 1.4rem;
}
.pp-titel em { font-style: italic; color: var(--terra); }
.pp-intro { font-size: 1.05rem; line-height: 1.8; color: rgba(58,42,36,0.72); max-width: 46ch; margin-bottom: 1.8rem; }
.pp-checklist { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 2rem; }
.pp-checklist li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.98rem; color: rgba(58,42,36,0.78); }
.pp-checklist strong { color: var(--espresso); font-weight: 700; }
.pp-checklist svg {
  flex-shrink: 0; width: 22px; height: 22px; padding: 3px;
  color: var(--cream-wit); background: var(--olive); border-radius: 50%;
}
.pp-trust {
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 600;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(58,42,36,0.5);
}

/* Formulier-kaart */
.pp-kaart {
  background: var(--cream-wit); border-radius: 28px;
  padding: 2.6rem 2.5rem;
  box-shadow: 0 34px 80px rgba(58,42,36,0.14);
  border: 1px solid rgba(58,42,36,0.06);
}
.pp-kaart-titel {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 900;
  font-size: 1.55rem; color: var(--espresso); margin-bottom: 0.4rem;
}
.pp-kaart-sub { font-size: 0.9rem; line-height: 1.6; color: rgba(58,42,36,0.6); margin-bottom: 1.6rem; }
.pp-veld { margin-bottom: 1.05rem; }
.pp-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pp-veld label {
  display: block; margin-bottom: 0.35rem;
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 700;
  font-size: 0.8rem; color: var(--espresso);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.pp-optioneel { font-weight: 500; text-transform: none; letter-spacing: 0; color: rgba(58,42,36,0.45); }
.pp-veld input, .pp-veld select, .pp-veld textarea {
  width: 100%; padding: 0.8rem 1rem;
  border: 1.5px solid rgba(58,42,36,0.16); border-radius: 12px;
  background: var(--cream-wit); color: var(--espresso);
  font-family: 'Quicksand', system-ui, sans-serif; font-size: 0.95rem;
  transition: border-color 0.25s, box-shadow 0.25s;
  appearance: none; -webkit-appearance: none;
}
.pp-veld select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%233a2a24' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.6rem; cursor: pointer;
}
.pp-veld textarea { resize: vertical; min-height: 84px; }
.pp-veld input:focus, .pp-veld select:focus, .pp-veld textarea:focus {
  outline: none; border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(166,75,42,0.14);
}
.pp-veld .ongeldig { border-color: #b3402a; box-shadow: 0 0 0 3px rgba(179,64,42,0.12); }
.pp-submit { width: 100%; justify-content: center; margin-top: 0.4rem; }
.pp-privacy { margin-top: 0.9rem; font-size: 0.78rem; line-height: 1.6; color: rgba(58,42,36,0.5); text-align: center; }
.pp-fout { margin-top: 0.8rem; font-size: 0.85rem; font-weight: 600; color: #b3402a; text-align: center; }

/* Succes-staat */
.pp-succes { text-align: center; padding: 1.5rem 0.5rem; }
.pp-succes-icoon {
  width: 62px; height: 62px; margin: 0 auto 1.2rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--olive); color: var(--cream-wit); border-radius: 50%;
  box-shadow: 0 14px 30px rgba(85,107,47,0.35);
}
.pp-succes-icoon svg { width: 30px; height: 30px; }
.pp-succes p { font-size: 0.95rem; line-height: 1.7; color: rgba(58,42,36,0.72); max-width: 40ch; margin: 0.6rem auto 0; }
.pp-succes-alt a { color: var(--terra); font-weight: 600; }

/* Zo werkt het */
.pp-stappen { background: var(--cream-wit); }
.pp-stappen-kop { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.pp-stappen-kop .sectie-label { justify-content: center; }
.pp-stappen-kop .sectie-titel { margin: 0 auto; }
.pp-stappen-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  max-width: 1020px; margin: 0 auto;
}
.pp-stap {
  position: relative; background: var(--cream); border-radius: 22px;
  padding: 2.1rem 1.9rem 1.9rem;
}
.pp-stap-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: 1.1rem;
  background: var(--terra); color: var(--cream-wit); border-radius: 50%;
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 900; font-size: 1.15rem;
}
.pp-stap h3 {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 600;
  font-size: 1.25rem; color: var(--espresso); margin-bottom: 0.55rem;
}
.pp-stap p { font-size: 0.94rem; line-height: 1.7; color: rgba(58,42,36,0.68); }

/* Dit zit erin */
.pp-inhoud {
  background:
    radial-gradient(ellipse 50% 45% at 90% 5%, rgba(166,75,42,0.07), transparent 60%),
    radial-gradient(ellipse 48% 45% at 8% 95%, rgba(85,107,47,0.08), transparent 60%),
    var(--cream);
}
.pp-inhoud-kop { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.pp-inhoud-kop .sectie-label { justify-content: center; }
.pp-inhoud-kop .sectie-titel { margin: 0 auto; }
.pp-inhoud-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
  max-width: 1100px; margin: 0 auto;
}
.pp-item { display: block; text-decoration: none; text-align: center; }
.pp-item .specs-foto {
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(58,42,36,0.10);
  transition: transform 0.45s cubic-bezier(.2,.7,.2,1), box-shadow 0.45s;
}
.pp-item:hover .specs-foto { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(58,42,36,0.16); }
.pp-item h3 {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 600;
  font-size: 1.12rem; color: var(--espresso); margin: 1.1rem 0 0.2rem;
}
.pp-item p {
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 600;
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--terra);
}
.pp-inhoud-note { text-align: center; margin-top: 2.6rem; font-size: 0.95rem; color: rgba(58,42,36,0.65); }
.pp-inhoud-note a { color: var(--terra); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pp-inhoud-note a:hover { color: var(--terra-dk); }

/* Broodjes-keuze: aanvinkbare chips (standaard alle vier aan) */
.pp-broodjes { border: none; padding: 0; margin: 0 0 1.05rem; }
.pp-broodjes legend {
  margin-bottom: 0.45rem; padding: 0;
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 700;
  font-size: 0.8rem; color: var(--espresso);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.pp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; border-radius: 14px; }
.pp-chips.ongeldig { box-shadow: 0 0 0 3px rgba(179,64,42,0.16); }
.pp-chip { position: relative; cursor: pointer; }
.pp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pp-chip span {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1.5px solid rgba(58,42,36,0.16); border-radius: 999px;
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 600; font-size: 0.86rem;
  color: rgba(58,42,36,0.7); background: var(--cream-wit);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.pp-chip span::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid rgba(58,42,36,0.35);
  transition: background 0.25s, border-color 0.25s;
}
.pp-chip:hover span { border-color: var(--terra); color: var(--terra); }
.pp-chip input:checked + span {
  background: var(--terra); border-color: var(--terra); color: var(--cream-wit);
}
.pp-chip input:checked + span::before { background: var(--cream-wit); border-color: var(--cream-wit); }
.pp-chip input:focus-visible + span { outline: 2px solid var(--terra); outline-offset: 2px; }

/* Akkoord-vinkjes (algemene voorwaarden + contact-toestemming) */
.pp-akkoord { display: flex; flex-direction: column; gap: 0.7rem; margin: 1.3rem 0 1.1rem; }
.pp-akkoord-regel { position: relative; display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer; }
.pp-akkoord-regel input { position: absolute; opacity: 0; pointer-events: none; }
.pp-vink {
  flex-shrink: 0; width: 21px; height: 21px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(58,42,36,0.3); border-radius: 6px;
  background: var(--cream-wit); color: var(--cream-wit);
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.pp-vink svg { width: 13px; height: 13px; opacity: 0; transition: opacity 0.2s; }
.pp-akkoord-regel input:checked + .pp-vink { background: var(--olive); border-color: var(--olive); }
.pp-akkoord-regel input:checked + .pp-vink svg { opacity: 1; }
.pp-akkoord-regel input:focus-visible + .pp-vink { outline: 2px solid var(--terra); outline-offset: 2px; }
.pp-vink.ongeldig { border-color: #b3402a; box-shadow: 0 0 0 3px rgba(179,64,42,0.12); }
.pp-akkoord-tekst { font-size: 0.8rem; line-height: 1.55; color: rgba(58,42,36,0.62); }
.pp-akkoord-tekst a { color: var(--terra); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pp-akkoord-tekst a:hover { color: var(--terra-dk); }

/* Contact-alternatief */
.pp-contact { background: var(--cream-wit); }
.pp-contact-inner { text-align: center; max-width: 560px; margin: 0 auto; }
.pp-contact-inner .sectie-titel { margin: 0 auto 1rem; }
.pp-contact-inner p { font-size: 1rem; line-height: 1.8; color: rgba(58,42,36,0.7); margin-bottom: 1.8rem; }

@media (max-width: 900px) {
  .pp-hero { padding: 8rem 1.5rem 3.5rem; }
  .pp-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .pp-kaart { padding: 1.8rem 1.4rem; }
  .pp-rij { grid-template-columns: 1fr; gap: 0; }
  .pp-stappen-grid { grid-template-columns: 1fr; max-width: 460px; }
  .pp-inhoud-grid { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
  .pp-titel br { display: none; }
}

/* ════════════════════════════════════════════════════
   JURIDISCH — privacybeleid & algemene voorwaarden
   ════════════════════════════════════════════════════ */
.juridisch-sectie { background: var(--cream-wit); }
.juridisch { max-width: 780px; margin: 0 auto; }
.juridisch-datum {
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 600;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--terra); margin-bottom: 2.4rem;
}
.juridisch h2 {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 600;
  font-size: 1.35rem; color: var(--espresso);
  margin: 2.4rem 0 0.8rem;
}
.juridisch h2:first-of-type { margin-top: 0; }
.juridisch p, .juridisch li {
  font-size: 0.96rem; line-height: 1.85; color: rgba(58,42,36,0.72);
}
.juridisch p + p { margin-top: 0.8rem; }
.juridisch ul { margin: 0.6rem 0 0.8rem; padding-left: 1.3rem; }
.juridisch li { margin-bottom: 0.45rem; }
.juridisch li::marker { color: var(--terra); }
.juridisch a { color: var(--terra); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.juridisch a:hover { color: var(--terra-dk); }
.juridisch strong { color: var(--espresso); font-weight: 700; }
.juridisch-kader {
  margin-top: 3rem; padding: 1.5rem 1.7rem;
  background: var(--cream); border-radius: 18px;
}
.juridisch-kader p { margin: 0; }

/* ─── KLEURBLOKKEN + LINO-LAAG + GOLF-RANDEN (juli 2026) ─────────────
   Creatieve boost: full-bleed merkkleur-secties met organische golf-
   overgangen en lino-illustraties (SVG's in /lino, gekleurd via mask). */

/* Lino-basis: alpha van de SVG als mask, kleur = currentColor */
.lino {
  position: absolute;
  background: currentColor;
  -webkit-mask: var(--lino) no-repeat center / contain;
  mask: var(--lino) no-repeat center / contain;
  pointer-events: none;
}
.lino-oester    { --lino: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20300%22%20width%3D%22300%22%20height%3D%22300%22%3E%20%3Cfilter%20id%3D%22lino-oester%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.02%22%20numOctaves%3D%222%22%20seed%3D%222%22%20result%3D%22n%22%2F%3E%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%224.5%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%20%3C%2Ffilter%3E%20%3Cg%20filter%3D%22url(%23lino-oester)%22%20fill%3D%22none%22%20stroke%3D%22%23141414%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3C!--%20clustered%20stems%20rising%20from%20base%20--%3E%20%3Cpath%20d%3D%22M150%2C258%20C150%2C236%20150%2C220%20150%2C206%22%2F%3E%20%3Cpath%20d%3D%22M150%2C252%20C132%2C232%20122%2C220%20118%2C206%22%2F%3E%20%3Cpath%20d%3D%22M150%2C252%20C170%2C232%20182%2C222%20188%2C208%22%2F%3E%20%3C!--%20LEFT%20fan%20cap%20--%3E%20%3Cpath%20d%3D%22M118%2C206%20C96%2C208%2072%2C198%2066%2C176%20C60%2C150%2092%2C132%20124%2C140%20C140%2C144%20150%2C158%20150%2C172%20C150%2C192%20138%2C204%20118%2C206%20Z%22%2F%3E%20%3C!--%20RIGHT%20fan%20cap%20(overlaps%20behind%2Fright)%20--%3E%20%3Cpath%20d%3D%22M188%2C208%20C210%2C208%20234%2C196%20236%2C174%20C238%2C148%20206%2C132%20176%2C142%20C160%2C148%20152%2C160%20152%2C174%20C152%2C194%20168%2C206%20188%2C208%20Z%22%2F%3E%20%3C!--%20FRONT%20centre%20cap%2C%20lower%20and%20on%20top%20--%3E%20%3Cpath%20d%3D%22M126%2C236%20C108%2C238%2090%2C230%2088%2C212%20C86%2C192%20112%2C180%20140%2C186%20C158%2C190%20168%2C202%20166%2C216%20C164%2C230%20146%2C235%20126%2C236%20Z%22%2F%3E%20%3C%2Fg%3E%20%3C!--%20gills%3A%20thin%20lines%20fanning%20from%20each%20stem%20attachment%20--%3E%20%3Cg%20filter%3D%22url(%23lino-oester)%22%20fill%3D%22none%22%20stroke%3D%22%23141414%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%3E%20%3C!--%20left%20cap%20gills%20--%3E%20%3Cpath%20d%3D%22M116%2C204%20C100%2C196%2088%2C186%2080%2C174%22%2F%3E%20%3Cpath%20d%3D%22M120%2C200%20C110%2C186%20104%2C174%20100%2C160%22%2F%3E%20%3Cpath%20d%3D%22M126%2C196%20C124%2C182%20124%2C168%20128%2C156%22%2F%3E%20%3C!--%20right%20cap%20gills%20--%3E%20%3Cpath%20d%3D%22M190%2C206%20C206%2C198%20218%2C188%20226%2C176%22%2F%3E%20%3Cpath%20d%3D%22M186%2C200%20C196%2C186%20202%2C174%20206%2C162%22%2F%3E%20%3Cpath%20d%3D%22M180%2C196%20C182%2C182%20182%2C168%20178%2C156%22%2F%3E%20%3C!--%20front%20cap%20gills%20--%3E%20%3Cpath%20d%3D%22M124%2C234%20C110%2C228%20100%2C220%2094%2C210%22%2F%3E%20%3Cpath%20d%3D%22M132%2C232%20C130%2C220%20132%2C208%20138%2C198%22%2F%3E%20%3Cpath%20d%3D%22M148%2C230%20C158%2C222%20162%2C214%20164%2C204%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E'); }
.lino-koolzaad  { --lino: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20300%22%20width%3D%22300%22%20height%3D%22300%22%3E%20%3Cfilter%20id%3D%22lino-koolzaad%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.022%22%20numOctaves%3D%222%22%20seed%3D%229%22%20result%3D%22n%22%2F%3E%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%224%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%20%3C%2Ffilter%3E%20%3Cg%20filter%3D%22url(%23lino-koolzaad)%22%20fill%3D%22none%22%20stroke%3D%22%23141414%22%20stroke-width%3D%228%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3C!--%20main%20stem%20--%3E%20%3Cpath%20d%3D%22M150%2C262%20C146%2C220%20150%2C180%20156%2C150%22%2F%3E%20%3C!--%20side%20stalks%20to%20buds%20--%3E%20%3Cpath%20d%3D%22M152%2C196%20C132%2C188%20120%2C176%20112%2C160%22%2F%3E%20%3Cpath%20d%3D%22M154%2C176%20C176%2C170%20190%2C158%20198%2C144%22%2F%3E%20%3C!--%20leaves%20--%3E%20%3Cpath%20d%3D%22M150%2C244%20C120%2C238%20100%2C246%2084%2C238%20C104%2C232%20116%2C214%20150%2C224%20Z%22%2F%3E%20%3Cpath%20d%3D%22M152%2C220%20C182%2C214%20204%2C222%20220%2C214%20C198%2C208%20188%2C192%20152%2C202%20Z%22%2F%3E%20%3C!--%20leaf%20midribs%20--%3E%20%3Cpath%20d%3D%22M108%2C236%20L138%2C230%22%20stroke-width%3D%224%22%2F%3E%20%3Cpath%20d%3D%22M196%2C212%20L166%2C206%22%20stroke-width%3D%224%22%2F%3E%20%3C%2Fg%3E%20%3C!--%20flower%20clusters%3A%204-petal%20blossoms%20--%3E%20%3Cg%20filter%3D%22url(%23lino-koolzaad)%22%20fill%3D%22none%22%20stroke%3D%22%23141414%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22%3E%20%3C!--%20top%20cluster%20--%3E%20%3Cg%20transform%3D%22translate(156%2C110)%22%3E%20%3Cpath%20d%3D%22M0%2C-16%20C10%2C-16%2010%2C-4%200%2C-2%20C-10%2C-4%20-10%2C-16%200%2C-16%20Z%22%2F%3E%20%3Cpath%20d%3D%22M16%2C0%20C16%2C10%204%2C10%202%2C0%20C4%2C-10%2016%2C-10%2016%2C0%20Z%22%2F%3E%20%3Cpath%20d%3D%22M0%2C16%20C-10%2C16%20-10%2C4%200%2C2%20C10%2C4%2010%2C16%200%2C16%20Z%22%2F%3E%20%3Cpath%20d%3D%22M-16%2C0%20C-16%2C-10%20-4%2C-10%20-2%2C0%20C-4%2C10%20-16%2C10%20-16%2C0%20Z%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(124%2C132)%20scale(0.8)%22%3E%20%3Cpath%20d%3D%22M0%2C-16%20C10%2C-16%2010%2C-4%200%2C-2%20C-10%2C-4%20-10%2C-16%200%2C-16%20Z%22%2F%3E%20%3Cpath%20d%3D%22M16%2C0%20C16%2C10%204%2C10%202%2C0%20C4%2C-10%2016%2C-10%2016%2C0%20Z%22%2F%3E%20%3Cpath%20d%3D%22M0%2C16%20C-10%2C16%20-10%2C4%200%2C2%20C10%2C4%2010%2C16%200%2C16%20Z%22%2F%3E%20%3Cpath%20d%3D%22M-16%2C0%20C-16%2C-10%20-4%2C-10%20-2%2C0%20C-4%2C10%20-16%2C10%20-16%2C0%20Z%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(190%2C128)%20scale(0.8)%22%3E%20%3Cpath%20d%3D%22M0%2C-16%20C10%2C-16%2010%2C-4%200%2C-2%20C-10%2C-4%20-10%2C-16%200%2C-16%20Z%22%2F%3E%20%3Cpath%20d%3D%22M16%2C0%20C16%2C10%204%2C10%202%2C0%20C4%2C-10%2016%2C-10%2016%2C0%20Z%22%2F%3E%20%3Cpath%20d%3D%22M0%2C16%20C-10%2C16%20-10%2C4%200%2C2%20C10%2C4%2010%2C16%200%2C16%20Z%22%2F%3E%20%3Cpath%20d%3D%22M-16%2C0%20C-16%2C-10%20-4%2C-10%20-2%2C0%20C-4%2C10%20-16%2C10%20-16%2C0%20Z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C!--%20flower%20centers%20%2B%20buds%20--%3E%20%3Cg%20filter%3D%22url(%23lino-koolzaad)%22%20fill%3D%22%23141414%22%20stroke%3D%22none%22%3E%20%3Ccircle%20cx%3D%22156%22%20cy%3D%22110%22%20r%3D%224.5%22%2F%3E%20%3Ccircle%20cx%3D%22124%22%20cy%3D%22132%22%20r%3D%223.5%22%2F%3E%20%3Ccircle%20cx%3D%22190%22%20cy%3D%22128%22%20r%3D%223.5%22%2F%3E%20%3C!--%20buds%20--%3E%20%3Ccircle%20cx%3D%22108%22%20cy%3D%22158%22%20r%3D%226%22%2F%3E%20%3Ccircle%20cx%3D%22198%22%20cy%3D%22142%22%20r%3D%226%22%2F%3E%20%3Ccircle%20cx%3D%22150%22%20cy%3D%22150%22%20r%3D%226%22%2F%3E%20%3Ccircle%20cx%3D%22138%22%20cy%3D%22146%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%22172%22%20cy%3D%22140%22%20r%3D%224%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E'); }
.lino-kruimels  { --lino: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20300%22%20width%3D%22300%22%20height%3D%22300%22%3E%20%3Cfilter%20id%3D%22lino-kruimels%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.03%22%20numOctaves%3D%222%22%20seed%3D%2211%22%20result%3D%22n%22%2F%3E%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%224%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%20%3C%2Ffilter%3E%20%3C!--%20outlined%20crumbs%20--%3E%20%3Cg%20filter%3D%22url(%23lino-kruimels)%22%20fill%3D%22none%22%20stroke%3D%22%23141414%22%20stroke-width%3D%227%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%20%3Cpath%20d%3D%22M78%2C96%20C88%2C86%20104%2C88%20108%2C100%20C112%2C114%2096%2C124%2084%2C118%20C72%2C112%2070%2C104%2078%2C96%20Z%22%2F%3E%20%3Cpath%20d%3D%22M196%2C86%20C210%2C80%20224%2C90%20220%2C104%20C216%2C116%20200%2C118%20192%2C108%20C186%2C100%20188%2C90%20196%2C86%20Z%22%2F%3E%20%3Cpath%20d%3D%22M150%2C150%20C164%2C142%20182%2C150%20180%2C166%20C178%2C182%20158%2C186%20148%2C174%20C140%2C164%20142%2C156%20150%2C150%20Z%22%2F%3E%20%3Cpath%20d%3D%22M96%2C196%20C108%2C190%20122%2C198%20118%2C212%20C114%2C224%2098%2C226%2090%2C216%20C84%2C208%2088%2C200%2096%2C196%20Z%22%2F%3E%20%3Cpath%20d%3D%22M214%2C190%20C226%2C186%20236%2C196%20232%2C208%20C228%2C218%20214%2C220%20208%2C210%20C204%2C202%20206%2C194%20214%2C190%20Z%22%2F%3E%20%3Cpath%20d%3D%22M150%2C224%20C160%2C220%20170%2C228%20166%2C238%20C162%2C248%20150%2C248%20144%2C240%20C140%2C234%20142%2C228%20150%2C224%20Z%22%2F%3E%20%3C%2Fg%3E%20%3C!--%20solid%20little%20crumbs%20%2B%20specks%20--%3E%20%3Cg%20filter%3D%22url(%23lino-kruimels)%22%20fill%3D%22%23141414%22%20stroke%3D%22none%22%3E%20%3Cpath%20d%3D%22M128%2C104%20C136%2C100%20144%2C106%20141%2C114%20C138%2C122%20128%2C122%20124%2C115%20C122%2C110%20123%2C106%20128%2C104%20Z%22%2F%3E%20%3Cpath%20d%3D%22M60%2C150%20C68%2C147%2074%2C153%2071%2C160%20C68%2C167%2059%2C166%2056%2C159%20C55%2C155%2056%2C152%2060%2C150%20Z%22%2F%3E%20%3Cpath%20d%3D%22M240%2C140%20C247%2C138%20252%2C144%20249%2C150%20C246%2C156%20238%2C155%20236%2C149%20C235%2C145%20236%2C142%20240%2C140%20Z%22%2F%3E%20%3Ccircle%20cx%3D%22120%22%20cy%3D%22150%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22176%22%20cy%3D%22112%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22112%22%20cy%3D%22170%22%20r%3D%223.5%22%2F%3E%20%3Ccircle%20cx%3D%22164%22%20cy%3D%22204%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%22130%22%20r%3D%223.5%22%2F%3E%20%3Ccircle%20cx%3D%22184%22%20cy%3D%22168%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%22132%22%20cy%3D%22192%22%20r%3D%223.5%22%2F%3E%20%3Ccircle%20cx%3D%22222%22%20cy%3D%22118%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%22188%22%20r%3D%223%22%2F%3E%20%3Ccircle%20cx%3D%22150%22%20cy%3D%22118%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22248%22%20cy%3D%22176%22%20r%3D%223%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E'); }
.lino-koksmuts  { --lino: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20300%22%20width%3D%22300%22%20height%3D%22300%22%3E%20%3Cfilter%20id%3D%22lino-koksmuts%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.02%22%20numOctaves%3D%222%22%20seed%3D%224%22%20result%3D%22n%22%2F%3E%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%224.5%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%20%3C%2Ffilter%3E%20%3Cg%20filter%3D%22url(%23lino-koksmuts)%22%20fill%3D%22none%22%20stroke%3D%22%23141414%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3C!--%20puffy%20top%20--%3E%20%3Cpath%20d%3D%22M74%2C205%20C52%2C193%2052%2C150%2072%2C134%20C56%2C108%2080%2C78%20110%2C88%20C116%2C54%20168%2C48%20180%2C84%20C210%2C66%20246%2C92%20230%2C134%20C252%2C152%20246%2C196%20220%2C204%20C204%2C214%20192%2C198%20176%2C205%20C158%2C213%20148%2C197%20128%2C205%20C108%2C212%2092%2C197%2074%2C205%20Z%22%2F%3E%20%3C!--%20band%20--%3E%20%3Cpath%20d%3D%22M74%2C204%20L74%2C250%20Q74%2C258%2084%2C258%20L216%2C258%20Q226%2C258%20226%2C250%20L226%2C204%22%2F%3E%20%3C!--%20pleats%20--%3E%20%3Cpath%20d%3D%22M104%2C208%20L104%2C256%22%20stroke-width%3D%225%22%2F%3E%20%3Cpath%20d%3D%22M138%2C208%20L138%2C256%22%20stroke-width%3D%225%22%2F%3E%20%3Cpath%20d%3D%22M172%2C208%20L172%2C256%22%20stroke-width%3D%225%22%2F%3E%20%3Cpath%20d%3D%22M203%2C208%20L203%2C256%22%20stroke-width%3D%225%22%2F%3E%20%3C!--%20carved%20highlight%20lines%20on%20puff%20--%3E%20%3Cpath%20d%3D%22M96%2C150%20C104%2C140%20118%2C140%20126%2C150%22%20stroke-width%3D%225%22%2F%3E%20%3Cpath%20d%3D%22M150%2C120%20C160%2C110%20174%2C112%20182%2C124%22%20stroke-width%3D%225%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20filter%3D%22url(%23lino-koksmuts)%22%20fill%3D%22%23141414%22%20stroke%3D%22none%22%3E%20%3C!--%20stipple%20dots%20on%20puff%20--%3E%20%3Ccircle%20cx%3D%2292%22%20cy%3D%22176%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22112%22%20cy%3D%22188%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%22150%22%20cy%3D%22176%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22186%22%20cy%3D%22182%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%22208%22%20cy%3D%22168%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%22164%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%22168%22%20cy%3D%22150%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22118%22%20cy%3D%22132%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%22200%22%20cy%3D%22140%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%22150%22%20r%3D%224%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E'); }
.lino-bord      { --lino: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20300%22%20width%3D%22300%22%20height%3D%22300%22%3E%20%3Cfilter%20id%3D%22lino-bord%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.016%22%20numOctaves%3D%222%22%20seed%3D%223%22%20result%3D%22n%22%2F%3E%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%224.5%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%20%3C%2Ffilter%3E%20%3Cg%20filter%3D%22url(%23lino-bord)%22%20fill%3D%22none%22%20stroke%3D%22%23141414%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3C!--%20outer%20rim%20--%3E%20%3Ccircle%20cx%3D%22150%22%20cy%3D%22150%22%20r%3D%22120%22%2F%3E%20%3C!--%20inner%20well%20--%3E%20%3Ccircle%20cx%3D%22150%22%20cy%3D%22150%22%20r%3D%2282%22%2F%3E%20%3C%2Fg%3E%20%3C!--%20decorative%20dotted%20ring%20between%20rims%20--%3E%20%3Cg%20filter%3D%22url(%23lino-bord)%22%20fill%3D%22%23141414%22%20stroke%3D%22none%22%3E%20%3Ccircle%20cx%3D%22150%22%20cy%3D%2249%22%20r%3D%225%22%2F%3E%20%3Ccircle%20cx%3D%22221%22%20cy%3D%2279%22%20r%3D%225%22%2F%3E%20%3Ccircle%20cx%3D%22251%22%20cy%3D%22150%22%20r%3D%225%22%2F%3E%20%3Ccircle%20cx%3D%22221%22%20cy%3D%22221%22%20r%3D%225%22%2F%3E%20%3Ccircle%20cx%3D%22150%22%20cy%3D%22251%22%20r%3D%225%22%2F%3E%20%3Ccircle%20cx%3D%2279%22%20cy%3D%22221%22%20r%3D%225%22%2F%3E%20%3Ccircle%20cx%3D%2249%22%20cy%3D%22150%22%20r%3D%225%22%2F%3E%20%3Ccircle%20cx%3D%2279%22%20cy%3D%2279%22%20r%3D%225%22%2F%3E%20%3Ccircle%20cx%3D%22187%22%20cy%3D%2258%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%22242%22%20cy%3D%22113%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%22242%22%20cy%3D%22187%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%22187%22%20cy%3D%22242%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%22113%22%20cy%3D%22242%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%2258%22%20cy%3D%22187%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%2258%22%20cy%3D%22113%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%22113%22%20cy%3D%2258%22%20r%3D%224%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E'); }
.lino-golfje    { --lino: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20300%22%20width%3D%22300%22%20height%3D%22300%22%3E%20%3Cfilter%20id%3D%22lino-golf%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.02%22%20numOctaves%3D%222%22%20seed%3D%2211%22%20result%3D%22n%22%2F%3E%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%224.5%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%20%3C%2Ffilter%3E%20%3Cg%20filter%3D%22url(%23lino-golf)%22%20fill%3D%22none%22%20stroke%3D%22%23141414%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M46%2C110%20C86%2C74%20116%2C146%20150%2C110%20C184%2C74%20214%2C146%20254%2C110%22%2F%3E%20%3Cpath%20d%3D%22M46%2C150%20C86%2C114%20116%2C186%20150%2C150%20C184%2C114%20214%2C186%20254%2C150%22%2F%3E%20%3Cpath%20d%3D%22M46%2C190%20C86%2C154%20116%2C226%20150%2C190%20C184%2C154%20214%2C226%20254%2C190%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E'); }
.lino-korrel    { --lino: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20300%22%20width%3D%22300%22%20height%3D%22300%22%3E%20%3Cfilter%20id%3D%22lino-korrel%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.02%22%20numOctaves%3D%222%22%20seed%3D%2212%22%20result%3D%22n%22%2F%3E%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%224.5%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%20%3C%2Ffilter%3E%20%3Cg%20filter%3D%22url(%23lino-korrel)%22%20fill%3D%22none%22%20stroke%3D%22%23141414%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3C!--%20verspreide%20zaad%2Fkorrel-ovaaltjes%20onder%20een%20hoek%20--%3E%20%3Cellipse%20cx%3D%22120%22%20cy%3D%22112%22%20rx%3D%2216%22%20ry%3D%228%22%20transform%3D%22rotate(-28%20120%20112)%22%2F%3E%20%3Cellipse%20cx%3D%22176%22%20cy%3D%22130%22%20rx%3D%2216%22%20ry%3D%228%22%20transform%3D%22rotate(20%20176%20130)%22%2F%3E%20%3Cellipse%20cx%3D%22104%22%20cy%3D%22164%22%20rx%3D%2216%22%20ry%3D%228%22%20transform%3D%22rotate(14%20104%20164)%22%2F%3E%20%3Cellipse%20cx%3D%22164%22%20cy%3D%22182%22%20rx%3D%2216%22%20ry%3D%228%22%20transform%3D%22rotate(-24%20164%20182)%22%2F%3E%20%3Cellipse%20cx%3D%22210%22%20cy%3D%22176%22%20rx%3D%2214%22%20ry%3D%227%22%20transform%3D%22rotate(34%20210%20176)%22%2F%3E%20%3Cellipse%20cx%3D%22140%22%20cy%3D%22146%22%20rx%3D%2214%22%20ry%3D%227%22%20transform%3D%22rotate(-8%20140%20146)%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20filter%3D%22url(%23lino-korrel)%22%20fill%3D%22%23141414%22%20stroke%3D%22none%22%3E%20%3Ccircle%20cx%3D%22196%22%20cy%3D%22108%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2292%22%20cy%3D%22120%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%22130%22%20cy%3D%22200%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22206%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%2286%22%20cy%3D%22196%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22224%22%20cy%3D%22140%22%20r%3D%223%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E'); }
.lino-straal    { --lino: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20300%22%20width%3D%22300%22%20height%3D%22300%22%3E%20%3Cfilter%20id%3D%22lino-straal%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.02%22%20numOctaves%3D%222%22%20seed%3D%2215%22%20result%3D%22n%22%2F%3E%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%224.5%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%20%3C%2Ffilter%3E%20%3Cg%20filter%3D%22url(%23lino-straal)%22%20fill%3D%22none%22%20stroke%3D%22%23141414%22%20stroke-width%3D%228%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3C!--%20stralende%20zon%2Fwarmte%20--%3E%20%3Ccircle%20cx%3D%22150%22%20cy%3D%22150%22%20r%3D%2240%22%2F%3E%20%3Cg%20stroke-width%3D%229%22%3E%20%3Cpath%20d%3D%22M150%2C86%20L150%2C58%22%2F%3E%20%3Cpath%20d%3D%22M150%2C214%20L150%2C242%22%2F%3E%20%3Cpath%20d%3D%22M86%2C150%20L58%2C150%22%2F%3E%20%3Cpath%20d%3D%22M214%2C150%20L242%2C150%22%2F%3E%20%3Cpath%20d%3D%22M105%2C105%20L86%2C86%22%2F%3E%20%3Cpath%20d%3D%22M195%2C105%20L214%2C86%22%2F%3E%20%3Cpath%20d%3D%22M105%2C195%20L86%2C214%22%2F%3E%20%3Cpath%20d%3D%22M195%2C195%20L214%2C214%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cg%20filter%3D%22url(%23lino-straal)%22%20fill%3D%22%23141414%22%20stroke%3D%22none%22%3E%20%3Ccircle%20cx%3D%22150%22%20cy%3D%22150%22%20r%3D%226%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E'); }
.lino-blad      { --lino: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20300%22%20width%3D%22300%22%20height%3D%22300%22%3E%20%3Cfilter%20id%3D%22lino-blad%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.02%22%20numOctaves%3D%222%22%20seed%3D%2213%22%20result%3D%22n%22%2F%3E%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%224.5%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%20%3C%2Ffilter%3E%20%3Cg%20filter%3D%22url(%23lino-blad)%22%20fill%3D%22none%22%20stroke%3D%22%23141414%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3C!--%20abstract%20blad%2Fdruppel-vorm%20--%3E%20%3Cpath%20d%3D%22M150%2C58%20C206%2C96%20214%2C178%20150%2C238%20C86%2C178%2094%2C96%20150%2C58%20Z%22%2F%3E%20%3C!--%20middennerf%20--%3E%20%3Cpath%20d%3D%22M150%2C84%20L150%2C214%22%20stroke-width%3D%226%22%2F%3E%20%3C!--%20zijnerven%20--%3E%20%3Cpath%20d%3D%22M150%2C116%20C132%2C120%20122%2C130%20116%2C146%22%20stroke-width%3D%225%22%2F%3E%20%3Cpath%20d%3D%22M150%2C116%20C168%2C120%20178%2C130%20184%2C146%22%20stroke-width%3D%225%22%2F%3E%20%3Cpath%20d%3D%22M150%2C152%20C134%2C156%20126%2C164%20122%2C178%22%20stroke-width%3D%225%22%2F%3E%20%3Cpath%20d%3D%22M150%2C152%20C166%2C156%20174%2C164%20178%2C178%22%20stroke-width%3D%225%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E'); }

/* Golvende sectie-randen: strip bovenaan/onderaan in de kleur van de
   BUURSECTIE die organisch het kleurblok in golft (werkt mét overflow:hidden) */
.golf-boven::before,
.golf-onder::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 32px;
  z-index: 1;
  pointer-events: none;
}
.golf-boven::before {
  top: 0;
  background: var(--golf-b, var(--cream-wit));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 32" preserveAspectRatio="none"><path d="M0 0 H360 V16 C330 26 315 8 285 14 C255 20 240 30 210 18 C180 8 165 22 135 16 C105 10 90 24 60 14 C30 6 15 20 0 16 Z"/></svg>') repeat-x top / 360px 32px;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 32" preserveAspectRatio="none"><path d="M0 0 H360 V16 C330 26 315 8 285 14 C255 20 240 30 210 18 C180 8 165 22 135 16 C105 10 90 24 60 14 C30 6 15 20 0 16 Z"/></svg>') repeat-x top / 360px 32px;
}
.golf-onder::after {
  bottom: 0;
  background: var(--golf-o, var(--cream-wit));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 32" preserveAspectRatio="none"><path d="M0 32 H360 V16 C330 6 315 24 285 18 C255 12 240 2 210 14 C180 24 165 10 135 16 C105 22 90 8 60 18 C30 26 15 12 0 16 Z"/></svg>') repeat-x bottom / 360px 32px;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 32" preserveAspectRatio="none"><path d="M0 32 H360 V16 C330 6 315 24 285 18 C255 12 240 2 210 14 C180 24 165 10 135 16 C105 22 90 8 60 18 C30 26 15 12 0 16 Z"/></svg>') repeat-x bottom / 360px 32px;
}

/* ── Terra-kleurblok (Waarom kiezen) ── */
.merken.blok-terra {
  --golf-b: var(--espresso);
  --golf-o: var(--cream-wit);
  background:
    radial-gradient(circle at 85% 12%, rgba(244,235,221,0.10), transparent 45%),
    radial-gradient(circle at 8% 88%, rgba(58,42,36,0.28), transparent 50%),
    var(--terra);
}
.blok-terra .sectie-titel { color: var(--cream-wit); }
.blok-terra .sectie-tekst { color: rgba(244,235,221,0.80); }
.blok-terra .merken-claim { color: var(--cream-wit); }
.blok-terra .btn-vol {
  background: var(--cream-wit); color: var(--terra); border-color: var(--cream-wit);
}
.blok-terra .btn-vol:hover {
  background: var(--cream); border-color: var(--cream); color: var(--terra-dk);
  transform: translateY(-3px);
}
/* sfeerfoto: van cirkel naar bakkersboog */
.blok-terra .merken-rond {
  width: min(100%, 420px);
  aspect-ratio: 5 / 6;
  border-radius: 999px 999px 32px 32px;
}

/* ── Olijf-kleurblok (Variatie) ── */
.variatie.blok-olijf {
  --golf-b: var(--cream-wit);
  --golf-o: var(--cream-wit);
  position: relative;
  background:
    radial-gradient(circle at 12% 15%, rgba(244,235,221,0.10), transparent 45%),
    radial-gradient(circle at 90% 88%, rgba(58,42,36,0.30), transparent 50%),
    var(--olive);
}
.blok-olijf .variatie-grid { position: relative; z-index: 2; }
/* alleen in het wisselwoord-blok is de kop gedempt zodat het vallende woord popt */
.variatie.blok-olijf .sectie-titel { color: rgba(244,235,221,0.62); }
.blok-olijf .sectie-titel { color: var(--cream-wit); }
.blok-olijf .cycle-woord { color: var(--cream-wit); }
.blok-olijf .sectie-tekst { color: rgba(244,235,221,0.80); }
.blok-olijf .btn-vol {
  background: var(--cream-wit); color: var(--olive); border-color: var(--cream-wit);
}
.blok-olijf .btn-vol:hover {
  background: var(--cream); border-color: var(--cream); color: var(--olive);
  transform: translateY(-3px);
}
.blok-olijf .mini-badge { border: 3px solid var(--cream-wit); }

/* ── Lino-accenten per sectie (decoratief, aria-hidden) ── */
.merken-lino-1 { top: 6%; right: 5%; width: 130px; height: 130px; color: var(--cream-wit); opacity: 0.5; transform: rotate(8deg); }
.merken-lino-2 { bottom: 9%; right: 12%; width: 92px; height: 92px; color: var(--cream-wit); opacity: 0.42; }
.variatie-lino-1 { top: 8%; left: 4%; width: 120px; height: 120px; color: var(--cream-wit); opacity: 0.48; transform: rotate(-8deg); }
.variatie-lino-2 { bottom: 7%; right: 4%; width: 110px; height: 110px; color: var(--cream-wit); opacity: 0.38; }
.faq-lino { position: static; display: block; width: 54px; height: 54px; margin: 0 auto 1.1rem; color: var(--terra); opacity: 0.9; }

/* subtiel golf-patroon als textuur in de espresso statistiekenband */
.stats-patroon {
  position: absolute;
  inset: 0;
  background: var(--cream-wit);
  -webkit-mask: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20300%22%20width%3D%22300%22%20height%3D%22300%22%3E%20%3Cfilter%20id%3D%22lino-golf%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.02%22%20numOctaves%3D%222%22%20seed%3D%2211%22%20result%3D%22n%22%2F%3E%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%224.5%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%20%3C%2Ffilter%3E%20%3Cg%20filter%3D%22url(%23lino-golf)%22%20fill%3D%22none%22%20stroke%3D%22%23141414%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M46%2C110%20C86%2C74%20116%2C146%20150%2C110%20C184%2C74%20214%2C146%20254%2C110%22%2F%3E%20%3Cpath%20d%3D%22M46%2C150%20C86%2C114%20116%2C186%20150%2C150%20C184%2C114%20214%2C186%20254%2C150%22%2F%3E%20%3Cpath%20d%3D%22M46%2C190%20C86%2C154%20116%2C226%20150%2C190%20C184%2C154%20214%2C226%20254%2C190%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E') repeat center / 150px;
  mask: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20300%22%20width%3D%22300%22%20height%3D%22300%22%3E%20%3Cfilter%20id%3D%22lino-golf%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.02%22%20numOctaves%3D%222%22%20seed%3D%2211%22%20result%3D%22n%22%2F%3E%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%224.5%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%20%3C%2Ffilter%3E%20%3Cg%20filter%3D%22url(%23lino-golf)%22%20fill%3D%22none%22%20stroke%3D%22%23141414%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M46%2C110%20C86%2C74%20116%2C146%20150%2C110%20C184%2C74%20214%2C146%20254%2C110%22%2F%3E%20%3Cpath%20d%3D%22M46%2C150%20C86%2C114%20116%2C186%20150%2C150%20C184%2C114%20214%2C186%20254%2C150%22%2F%3E%20%3Cpath%20d%3D%22M46%2C190%20C86%2C154%20116%2C226%20150%2C190%20C184%2C154%20214%2C226%20254%2C190%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E') repeat center / 150px;
  opacity: 0.05;
  pointer-events: none;
}

@media (max-width: 900px) {
  /* mobiel: absolute lino-deco's uit (luchtig houden, geen overlap met tekst) */
  .merken-lino-1, .merken-lino-2, .variatie-lino-1, .variatie-lino-2 { display: none; }
  .golf-boven::before, .golf-onder::after { height: 22px; -webkit-mask-size: 260px 22px; mask-size: 260px 22px; }
  .blok-terra .merken-rond { width: min(100%, 330px); }
}

/* ── Espresso-afsluiter voor de homepage-contact (zelfde drama als de
     over-ons-CTA, loopt naadloos door in de espresso footer) ── */
.contact.contact-espresso {
  --golf-b: var(--cream-wit);
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 72% 80% at 50% -12%, rgba(166,75,42,0.30), transparent 62%),
    radial-gradient(ellipse 64% 72% at 102% 118%, rgba(85,107,47,0.24), transparent 60%),
    var(--espresso);
  color: var(--cream-wit);
}
.contact-espresso .sectie-titel { color: var(--cream-wit); }
.contact-espresso .sectie-tekst { color: rgba(244,235,221,0.74); }
.contact-espresso .sectie-label span { color: #e0936a; }
.contact-espresso .sectie-label::before { background: #e0936a; }
.contact-espresso .btn-lijn { color: var(--cream-wit); border-color: rgba(244,235,221,0.45); }
.contact-espresso .btn-lijn:hover { background: var(--cream-wit); color: var(--espresso); border-color: var(--cream-wit); }
.contact-lino { top: 16%; left: 7%; width: 110px; height: 110px; color: var(--cream-wit); opacity: 0.32; transform: rotate(-10deg); }
@media (max-width: 900px) { .contact-lino { display: none; } }

/* ─── ROLLOUT CREATIEVE BOOST naar subpagina's + punten 4-7 (6 juli 2026) ── */

/* Kleurblok: voordelen (voor-professionals) → olijf */
.voordelen.blok-olijf {
  --golf-b: var(--cream);
  --golf-o: var(--cream-wit);
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 12% 15%, rgba(244,235,221,0.10), transparent 45%),
    radial-gradient(circle at 90% 88%, rgba(58,42,36,0.30), transparent 50%),
    var(--olive);
}
.blok-olijf .sectie-label span { color: var(--cream); }
.blok-terra .sectie-label span { color: var(--cream); }

/* Kleurblok: pp-stappen (proefpakket) → terra; de crème stap-kaarten poppen erop */
.pp-stappen.blok-terra {
  --golf-b: var(--cream);
  --golf-o: var(--cream);
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 85% 12%, rgba(244,235,221,0.10), transparent 45%),
    radial-gradient(circle at 8% 88%, rgba(58,42,36,0.28), transparent 50%),
    var(--terra);
}

/* Kleurblok: pp-contact (proefpakket) → espresso afsluiter */
.pp-contact.blok-espresso {
  --golf-b: var(--cream);
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 72% 80% at 50% -12%, rgba(166,75,42,0.30), transparent 62%),
    radial-gradient(ellipse 64% 72% at 102% 118%, rgba(85,107,47,0.24), transparent 60%),
    var(--espresso);
}
.blok-espresso .sectie-titel { color: var(--cream-wit); }
.blok-espresso p { color: rgba(244,235,221,0.74); }
.blok-espresso .btn-lijn { color: var(--cream-wit); border-color: rgba(244,235,221,0.45); }
.blok-espresso .btn-lijn:hover { background: var(--cream-wit); color: var(--espresso); border-color: var(--cream-wit); }

/* Kleurblok: pull-quote (over-ons) → terra, de quote als editorial statement */
.over-quote.blok-terra-diep {
  --golf-b: var(--cream-wit);
  --golf-o: var(--cream);
  background:
    radial-gradient(circle at 85% 10%, rgba(244,235,221,0.10), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(58,42,36,0.26), transparent 50%),
    var(--terra);
}
.blok-terra-diep .over-quote-mark { color: var(--cream-wit); opacity: 0.4; }
.blok-terra-diep blockquote { color: var(--cream-wit); }
.blok-terra-diep blockquote em { color: #f2c49b; }
.blok-terra-diep .over-quote-naam { color: var(--cream-wit); }
.blok-terra-diep .over-quote-rol { color: rgba(244,235,221,0.62); }

/* Bakkersbogen: studio-fotokaders krijgen een boogvorm */
/* productfoto's rond (cirkels) */
.product-foto { border-radius: 50%; }
.held-foto { border-radius: 999px 999px 30px 30px; }
/* sticker binnen de boogronding houden (anders knipt overflow:hidden hem af) */
.product-nieuw { top: 13%; right: 20%; }

/* Lino-accenten subpagina's (kleur-tinten op lichte achtergronden) */
.producten-lino-1 { top: 3%; right: 5%; width: 120px; height: 120px; color: var(--terra); opacity: 0.22; transform: rotate(9deg); }
.producten-lino-2 { top: 44%; left: 3%; width: 100px; height: 100px; color: var(--olive); opacity: 0.24; transform: rotate(-7deg); }
.producten-lino-3 { bottom: 5%; right: 7%; width: 95px; height: 95px; color: var(--espresso); opacity: 0.15; }
.voordelen-lino-1 { top: 7%; left: 4%; width: 110px; height: 110px; color: var(--terra); opacity: 0.12; transform: rotate(-9deg); }
.voordelen-lino-2 { bottom: 8%; right: 4%; width: 100px; height: 100px; color: var(--olive); opacity: 0.12; transform: rotate(6deg); }
.uitleg-lino { top: 10%; right: 5%; width: 120px; height: 120px; color: var(--espresso); opacity: 0.13; transform: rotate(8deg); }
.verhaal-lino { top: 6%; right: 5%; width: 110px; height: 110px; color: var(--olive); opacity: 0.2; transform: rotate(-6deg); }
.quote-lino { top: 12%; left: 6%; width: 95px; height: 95px; color: var(--cream-wit); opacity: 0.4; transform: rotate(-8deg); }
.stappen-lino { bottom: 10%; right: 5%; width: 100px; height: 100px; color: var(--cream-wit); opacity: 0.4; }
.inhoud-lino { top: 6%; left: 4%; width: 110px; height: 110px; color: var(--terra); opacity: 0.2; transform: rotate(7deg); }
.ppcontact-lino { top: 18%; left: 8%; width: 100px; height: 100px; color: var(--cream-wit); opacity: 0.3; transform: rotate(-10deg); }
.pagehero-lino { position: static; display: block; width: 52px; height: 52px; margin: 0 auto 1.1rem; color: var(--terra); opacity: 0.9; }
.producten-lijst-deco, .afbak-uitleg, .over-verhaal, .pp-inhoud, .pp-hero { position: relative; }

/* ─── PUNT 4: SMAAK-MARQUEE — scrollende merk-woorden als sectie-scheiding ──
   (korst-textuur-overlay is op 7 juli 2026 verwijderd: las als vage vlekken) */
.smaak-marquee {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 120% at 20% 0%, rgba(166,75,42,0.22), transparent 55%),
    radial-gradient(ellipse 55% 120% at 85% 100%, rgba(85,107,47,0.18), transparent 55%),
    var(--espresso);
  padding: 1.7rem 0;
}
.smaak-track {
  display: flex; align-items: center;
  width: max-content;
  animation: smaakLoop 38s linear infinite;
}
.smaak-track span {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  color: var(--cream-wit);
  white-space: nowrap;
  margin-right: 2.8rem;
}
.smaak-track .hol { color: transparent; -webkit-text-stroke: 1.5px rgba(244,235,221,0.85); }
.smaak-track .ster { color: #e0936a; font-size: 1.4rem; }
@keyframes smaakLoop { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .smaak-track { animation: none; } }

/* PUNT 4: outline-woord in een kop (op donkere blokken) */
.woord-hol { color: transparent; -webkit-text-stroke: 2px var(--cream-wit); }

/* ─── PUNT 5: sticker-taal ── */
@keyframes wiebel {
  0%, 100% { transform: rotate(8deg); }
  25% { transform: rotate(-3deg); }
  55% { transform: rotate(13deg); }
  80% { transform: rotate(4deg); }
}
.product-foto:hover .product-nieuw { animation: wiebel 0.55s ease; }

/* draaiende ronde tekstbadge (proefpakket-formulier) */
.pp-kaart { position: relative; }
.draai-badge {
  position: absolute; top: -36px; right: -30px;
  width: 122px; height: 122px; z-index: 3;
  filter: drop-shadow(0 14px 30px rgba(58,42,36,0.3));
  pointer-events: none;
}
.draai-badge svg {
  width: 100%; height: 100%;
  animation: draai 16s linear infinite;
  transform-origin: 50% 50%;
}
/* lichtblauwe cirkel met oranje letters */
.draai-badge svg > path { fill: #bcd6fb; }
.draai-badge text {
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 700;
  /* maat + spatiëring zo gekozen dat de tekst de cirkel precies rond maakt */
  font-size: 9.8px; letter-spacing: 0.17em; text-transform: uppercase;
  fill: #F55200;
}
.draai-badge .badge-hart { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; color: #F55200; opacity: 0.9; }
@keyframes draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .draai-badge svg { animation: none; } }

/* ─── PUNT 7: micro-interacties ── */
::selection { background: var(--terra); color: var(--cream-wit); }
.home-nieuws-kaart:hover .home-nieuws-beeld { transform: translateY(-6px) rotate(-1.3deg); }
.nieuws-kaart:hover { transform: translateY(-8px) rotate(-1.1deg); }

/* kruimel-confetti bij proefpakket-succes */
.kruimel {
  position: fixed; z-index: 9999;
  width: 10px; height: 7px;
  border-radius: 45% 60% 50% 55%;
  pointer-events: none;
  animation: kruimelVal 1.5s cubic-bezier(.3,.1,.6,1) forwards;
}
@keyframes kruimelVal {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx, 0px), 82vh) rotate(var(--rot, 220deg)); opacity: 0; }
}

@media (max-width: 900px) {
  .producten-lino-1, .producten-lino-2, .producten-lino-3,
  .voordelen-lino-1, .voordelen-lino-2, .uitleg-lino, .verhaal-lino,
  .quote-lino, .stappen-lino, .inhoud-lino, .ppcontact-lino { display: none; }
  .draai-badge { top: -26px; right: -6px; width: 92px; height: 92px; }
  .smaak-track span { margin-right: 1.8rem; }
}


/* ─── SCHERPE ELEMENTEN (7 juli 2026) — hoekig contrast op de vele rondingen ── */
.lino-vonk   { --lino: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M50%203%20L59%2041%20L97%2050%20L59%2059%20L50%2097%20L41%2059%20L3%2050%20L41%2041%20Z%22%2F%3E%3C%2Fsvg%3E'); }
.lino-ster8  { --lino: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M50.0%202.0%20L59.9%2026.0%20L83.9%2016.1%20L74.0%2040.1%20L98.0%2050.0%20L74.0%2059.9%20L83.9%2083.9%20L59.9%2074.0%20L50.0%2098.0%20L40.1%2074.0%20L16.1%2083.9%20L26.0%2059.9%20L2.0%2050.0%20L26.0%2040.1%20L16.1%2016.1%20L40.1%2026.0%20Z%22%2F%3E%3C%2Fsvg%3E'); }
.lino-zigzag { --lino: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2096%2092%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22square%22%3E%3Cpath%20d%3D%22M8%2024%20L24%208%20L40%2024%20L56%208%20L72%2024%20L88%208%22%2F%3E%3Cpath%20d%3D%22M8%2054%20L24%2038%20L40%2054%20L56%2038%20L72%2054%20L88%2038%22%2F%3E%3Cpath%20d%3D%22M8%2084%20L24%2068%20L40%2084%20L56%2068%20L72%2084%20L88%2068%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); }
.lino-ruit   { --lino: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M50%206%20L94%2050%20L50%2094%20L6%2050%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fsvg%3E'); }
.lino-aar    { --lino: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%226.5%22%20stroke-linecap%3D%22butt%22%3E%3Cpath%20d%3D%22M50%2096%20L50%208%22%2F%3E%3Cpath%20d%3D%22M50%2080%20L28%2060%22%2F%3E%3Cpath%20d%3D%22M50%2080%20L72%2060%22%2F%3E%3Cpath%20d%3D%22M50%2062%20L30%2044%22%2F%3E%3Cpath%20d%3D%22M50%2062%20L70%2044%22%2F%3E%3Cpath%20d%3D%22M50%2044%20L34%2030%22%2F%3E%3Cpath%20d%3D%22M50%2044%20L66%2030%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); }

/* zigzag-tanden op de smaak-marquee (kleur van de buursectie hapt erin) */
.zigzag-rand {
  position: absolute; left: 0; right: 0; height: 12px;
  background: var(--cream-wit); pointer-events: none; z-index: 2;
}
.zigzag-boven { top: 0; -webkit-mask: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2012%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20H28%20L14%2012%20Z%22%2F%3E%3C%2Fsvg%3E') repeat-x top / 28px 12px; mask: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2012%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20H28%20L14%2012%20Z%22%2F%3E%3C%2Fsvg%3E') repeat-x top / 28px 12px; }
.zigzag-onder { bottom: 0; -webkit-mask: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2012%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M14%200%20L28%2012%20H0%20Z%22%2F%3E%3C%2Fsvg%3E') repeat-x bottom / 28px 12px; mask: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2012%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M14%200%20L28%2012%20H0%20Z%22%2F%3E%3C%2Fsvg%3E') repeat-x bottom / 28px 12px; }

/* NIEUW-badge: van pil naar puntige sticker-ster */
.product-nieuw {
  background: transparent;
  border-radius: 0; padding: 0;
  width: 96px; height: 96px;
  display: grid; place-items: center;
  font-size: 0.66rem; letter-spacing: 0.05em;
  box-shadow: none;
  filter: drop-shadow(0 10px 22px rgba(166,75,42,0.5));
}
.product-nieuw::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--terra);
  -webkit-mask: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M50.0%200.0%20L60.1%2012.3%20L75.0%206.7%20L77.6%2022.4%20L93.3%2025.0%20L87.7%2039.9%20L100.0%2050.0%20L87.7%2060.1%20L93.3%2075.0%20L77.6%2077.6%20L75.0%2093.3%20L60.1%2087.7%20L50.0%20100.0%20L39.9%2087.7%20L25.0%2093.3%20L22.4%2077.6%20L6.7%2075.0%20L12.3%2060.1%20L0.0%2050.0%20L12.3%2039.9%20L6.7%2025.0%20L22.4%2022.4%20L25.0%206.7%20L39.9%2012.3%20Z%22%2F%3E%3C%2Fsvg%3E') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M50.0%200.0%20L60.1%2012.3%20L75.0%206.7%20L77.6%2022.4%20L93.3%2025.0%20L87.7%2039.9%20L100.0%2050.0%20L87.7%2060.1%20L93.3%2075.0%20L77.6%2077.6%20L75.0%2093.3%20L60.1%2087.7%20L50.0%20100.0%20L39.9%2087.7%20L25.0%2093.3%20L22.4%2077.6%20L6.7%2075.0%20L12.3%2060.1%20L0.0%2050.0%20L12.3%2039.9%20L6.7%2025.0%20L22.4%2022.4%20L25.0%206.7%20L39.9%2012.3%20Z%22%2F%3E%3C%2Fsvg%3E') center / contain no-repeat;
}

/* vonken & scherpe accenten per sectie */
.hero-vonk-1 { top: 22%; left: 12%; width: 46px; height: 46px; color: var(--terra); opacity: 0.55; }
.hero-vonk-2 { bottom: 26%; right: 13%; width: 30px; height: 30px; color: var(--olive); opacity: 0.5; transform: rotate(18deg); }
.merken-vonk { top: 12%; left: 42%; width: 40px; height: 40px; color: var(--cream-wit); opacity: 0.55; transform: rotate(12deg); }
.variatie-vonk { top: 14%; right: 8%; width: 44px; height: 44px; color: var(--cream-wit); opacity: 0.5; }
.quote-vonk { bottom: 14%; right: 7%; width: 42px; height: 42px; color: var(--cream-wit); opacity: 0.5; transform: rotate(-14deg); }
.contact-vonk { top: 24%; right: 9%; width: 52px; height: 52px; color: var(--cream-wit); opacity: 0.3; transform: rotate(10deg); }
.producten-vonk { top: 22%; right: 9%; width: 38px; height: 38px; color: var(--terra); opacity: 0.35; transform: rotate(15deg); }
.stappen-ster { top: 12%; left: 5%; width: 60px; height: 60px; color: var(--cream-wit); opacity: 0.4; transform: rotate(9deg); }
.pp-vonk { top: 9%; left: 42%; width: 40px; height: 40px; color: var(--terra); opacity: 0.5; transform: rotate(-10deg); }

@media (max-width: 900px) {
  .hero-vonk-1, .hero-vonk-2, .merken-vonk, .variatie-vonk, .quote-vonk,
  .contact-vonk, .producten-vonk, .stappen-ster, .pp-vonk { display: none; }
  .product-nieuw { width: 78px; height: 78px; font-size: 0.58rem; }
}

/* ─── STEMMEN — social proof met scheve quote-kaartjes (7 juli 2026) ──
   Verving de smaak-marquee op de homepage. Quotes zijn PLACEHOLDERS. */
.stemmen {
  --golf-b: var(--cream-wit);
  --golf-o: #f6ede0; /* bovenkant zwamreis-gradient */
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 50% 60% at 10% 8%, rgba(166,75,42,0.10), transparent 60%),
    radial-gradient(ellipse 48% 55% at 92% 94%, rgba(85,107,47,0.10), transparent 60%),
    var(--cream);
}
.stemmen-kop { text-align: center; max-width: 640px; margin: 0 auto 2rem; }
.stemmen-kop .sectie-label { justify-content: center; }
.stemmen-kop .sectie-titel { margin: 0 auto 1rem; }
.stemmen-kop .sectie-tekst { margin: 0 auto; }
.stemmen-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem; max-width: 1150px; margin: 0 auto;
  align-items: start;
}
.stem {
  margin: 0; position: relative;
  background: var(--cream-wit);
  border-radius: 26px;
  padding: 2.2rem 2rem 2rem;
  box-shadow: 0 24px 55px rgba(58,42,36,0.12);
  transform: rotate(var(--draai, 0deg));
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s;
}
/* scheef als aan een prikbord; bij hover zet het kaartje zich recht */
.stem:nth-child(1) { --draai: -2deg; }
.stem:nth-child(2) { --draai: 1.6deg; margin-top: 2rem; }
.stem:nth-child(3) { --draai: -1.3deg; }
.stem:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 32px 70px rgba(58,42,36,0.18); }
.stem.kleur-terra { --kleur: var(--terra); }
.stem.kleur-olijf { --kleur: var(--olive); }
.stem.kleur-espresso { --kleur: var(--espresso); }
/* scherp ruitje als kleuraccent in de hoek */
.stem::after {
  content: '';
  position: absolute; top: 1.7rem; right: 1.7rem;
  width: 11px; height: 11px;
  background: var(--kleur, var(--terra));
  transform: rotate(45deg);
}
.stem-sterren {
  color: var(--kleur, var(--terra));
  font-size: 0.95rem; letter-spacing: 0.28em;
  margin-bottom: 1.1rem;
}
.stem blockquote {
  margin: 0 0 1.6rem;
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
  font-size: 1.12rem; line-height: 1.55;
  color: var(--espresso);
}
.stem figcaption { display: flex; flex-direction: column; gap: 0.2rem; }
.stem figcaption strong { font-weight: 700; color: var(--espresso); }
.stem figcaption span {
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(58,42,36,0.55);
}
.stemmen-noot {
  text-align: center; margin: 3.2rem auto 0;
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(58,42,36,0.5);
}
.stemmen-vonk-1 { top: 12%; left: 6%; width: 42px; height: 42px; color: var(--terra); opacity: 0.4; transform: rotate(12deg); }
.stemmen-vonk-2 { bottom: 14%; right: 5%; width: 52px; height: 52px; color: var(--olive); opacity: 0.35; transform: rotate(-8deg); }

@media (max-width: 900px) {
  .stemmen-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .stem:nth-child(1) { --draai: -1.2deg; }
  .stem:nth-child(2) { --draai: 1deg; margin-top: 0; }
  .stem:nth-child(3) { --draai: -0.8deg; }
  .stemmen-vonk-1, .stemmen-vonk-2 { display: none; }
}

/* ─── STEMMEN-WEB v4 — zwevende testimonial-BOLLEN met magnetische afstoting
   (7 juli 2026, naar "Voorbeeld vlakverdeling.jpg" v2 = ronde bollen).
   Kleine bol = naam/functie/bedrijf; hover blaast 'm op tot de testimonial,
   de andere bollen worden weggeduwd (physics in het inline script). */
.stemmen-web {
  position: relative;
  max-width: 1150px;
  margin: 0 auto;
}
.bol {
  border: 1px solid var(--cream-dk);
  border-radius: 50%;
  background: var(--cream-wit);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  font-family: 'Quicksand', system-ui, sans-serif;
  text-align: center;
  box-shadow: 0 12px 30px rgba(58,42,36,0.08);
  transition: box-shadow 0.4s cubic-bezier(.3,1.4,.5,1), border-color 0.4s;
  -webkit-tap-highlight-color: transparent;
}
.bol:focus-visible { outline: 3px solid var(--terra); outline-offset: 4px; }
.bol.open {
  border-color: rgba(166,75,42,0.32);
  box-shadow: 0 28px 62px rgba(58,42,36,0.20);
  z-index: 5;
}
.bol-mini {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.1rem; padding: 14%;
  transition: opacity 0.2s;
}
.bol-mini strong { font-size: 0.8rem; font-weight: 700; line-height: 1.15; color: var(--espresso); }
.bol-mini span { font-size: 0.6rem; line-height: 1.35; color: rgba(58,42,36,0.55); }
.bol.open .bol-mini { opacity: 0; }
.bol-kaart {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem; padding: 15%;
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s 0.1s;
}
.bol-kaart .bol-sterren { font-size: 0.62rem; letter-spacing: 0.22em; color: rgba(166,75,42,0.5); }
.bol-kaart blockquote {
  margin: 0;
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
  font-size: 0.95rem; line-height: 1.42; color: var(--espresso);
}
.bol-kaart .bol-naam { font-weight: 700; font-size: 0.76rem; color: var(--espresso); margin-top: 0.25rem; }
.bol-kaart .bol-rol { font-size: 0.56rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(58,42,36,0.55); }
.bol.open .bol-kaart { opacity: 1; pointer-events: auto; }

@media (min-width: 901px) {
  /* physics-modus: JS zet left/top (= middelpunt) en width/height per frame;
     translate(-50%,-50%) laat de bol vanuit z'n midden opblazen (ballon). */
  .stemmen-web { aspect-ratio: 1150 / 400; }
  .bol { position: absolute; transform: translate(-50%, -50%); will-change: left, top, width, height; }
}

@media (max-width: 900px) {
  /* Stroken-modus: bollen worden horizontale kaarten, alles direct zichtbaar */
  .stemmen-web {
    display: flex; flex-direction: column; gap: 10px;
    aspect-ratio: unset; min-height: 0;
  }
  .bol {
    position: relative !important;
    width: 100% !important; height: auto !important;
    aspect-ratio: unset; border-radius: 18px;
    display: flex; align-items: center;
    overflow: visible; cursor: default;
    box-shadow: 0 4px 16px rgba(58,42,36,0.07);
    transform: none !important;
  }
  .bol-mini { display: none !important; }
  .bol-kaart {
    position: static !important; inset: unset;
    opacity: 1 !important; pointer-events: auto !important;
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 1.1rem 1.3rem; gap: 0.3rem; width: 100%;
  }
  .bol-kaart blockquote { font-size: 0.88rem; text-align: left; }

  /* Mobiel: toon alleen de eerste 3 ervaringen, rest achter een uitklapknop */
  .stemmen-web:not(.toon-alles) .bol:nth-child(n+4) { display: none; }
  .stemmen .stemmen-meer {
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin: 1.25rem auto 0; padding: 0.7rem 1.5rem;
    border-radius: 999px; border: 1.5px solid var(--terra);
    background: transparent; color: var(--terra);
    font-family: 'Quicksand', system-ui, sans-serif; font-weight: 700; font-size: 0.9rem;
    cursor: pointer;
  }
  .stemmen-web.toon-alles + .stemmen-meer { display: none; }
}

/* Uitklapknop alleen op mobiel; op desktop (physics-bollen) verborgen */
.stemmen-meer { display: none; }

/* ─── COOKIE-CONSENT (7 juli 2026) — banner + voorkeuren-venster ───── */
.cc-banner[hidden], .cc-modal[hidden], .cc-knop[hidden] { display: none !important; }

/* altijd zichtbaar koekje rechtsonder om de melding opnieuw te openen */
.cc-knop {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 9997;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream-wit); border: 1px solid var(--cream-dk);
  color: var(--terra); cursor: pointer;
  box-shadow: 0 12px 30px rgba(58,42,36,0.22);
  transition: transform 0.3s cubic-bezier(.3,1.4,.5,1), box-shadow 0.3s, background 0.3s;
  animation: ccKnopIn 0.4s cubic-bezier(.3,1.3,.5,1) both;
}
.cc-knop svg { width: 30px; height: 30px; fill: currentColor; }
.cc-knop svg circle { fill: var(--espresso); }
.cc-knop:hover { transform: translateY(-3px) rotate(-8deg); box-shadow: 0 18px 40px rgba(58,42,36,0.28); background: var(--cream); }
.cc-knop:focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; }
@keyframes ccKnopIn { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cc-knop { animation: none; } }
@media (max-width: 720px) { .cc-knop { width: 46px; height: 46px; right: 0.9rem; bottom: 0.9rem; } .cc-knop svg { width: 26px; height: 26px; } }
.cc-banner {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  z-index: 9998; width: min(940px, calc(100vw - 2.4rem));
  display: flex; align-items: center; gap: 1.6rem;
  background: var(--cream-wit); color: var(--espresso);
  border: 1px solid var(--cream-dk); border-radius: 22px;
  padding: 1.3rem 1.6rem;
  box-shadow: 0 26px 60px rgba(58,42,36,0.24);
  animation: ccUp 0.45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ccUp { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
.cc-banner-tekst strong {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none;
  font-size: 0.95rem; color: var(--espresso);
}
.cc-banner-tekst p { margin: 0.35rem 0 0; font-size: 0.82rem; line-height: 1.55; color: rgba(58,42,36,0.72); }
.cc-banner-knoppen { display: flex; gap: 0.6rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

/* zwevend Zwamcijsje naast de banner-tekst (knipoog: geen broodje maar een cookie) */
.cc-banner-broodje { flex-shrink: 0; width: 76px; align-self: center; }
.cc-banner-broodje img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 10px 16px rgba(58,42,36,0.28));
  animation: bob 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .cc-banner-broodje img { animation: none; } }

.cc-btn {
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 700;
  font-size: 0.8rem; border-radius: 999px; padding: 0.6rem 1.15rem;
  cursor: pointer; border: 1.5px solid var(--terra); white-space: nowrap;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.cc-vol { background: var(--terra); color: var(--cream-wit); }
.cc-vol:hover { background: var(--terra-dk); border-color: var(--terra-dk); transform: translateY(-2px); }
.cc-lijn { background: transparent; color: var(--terra); }
.cc-lijn:hover { background: var(--terra); color: var(--cream-wit); transform: translateY(-2px); }

.cc-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1.4rem; }
.cc-overlay { position: absolute; inset: 0; background: rgba(58,42,36,0.55); backdrop-filter: blur(3px); animation: ccFade 0.25s both; }
@keyframes ccFade { from { opacity: 0; } to { opacity: 1; } }
.cc-kaart {
  position: relative; z-index: 1; width: min(560px, 100%);
  max-height: 88vh; overflow-y: auto;
  background: var(--cream-wit); border-radius: 26px; padding: 2.2rem 2.1rem 1.9rem;
  box-shadow: 0 34px 80px rgba(58,42,36,0.3);
  animation: ccPop 0.35s cubic-bezier(.3,1.3,.5,1) both;
}
@keyframes ccPop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
.cc-sluit {
  position: absolute; top: 1.1rem; right: 1.2rem; z-index: 2;
  background: none; border: none; font-size: 1.7rem; line-height: 1;
  color: rgba(58,42,36,0.5); cursor: pointer; padding: 0.2rem;
}
.cc-sluit:hover { color: var(--espresso); }
.cc-kaart h2 {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none;
  font-size: 1.4rem; color: var(--espresso); margin: 0 0 0.6rem;
}
.cc-intro { font-size: 0.85rem; line-height: 1.6; color: rgba(58,42,36,0.72); margin: 0 0 1.4rem; }
.cc-lijst { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.cc-rij {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  background: var(--cream); border-radius: 16px; padding: 1rem 1.15rem;
}
.cc-rij h3 { font-family: 'Quicksand', system-ui, sans-serif; font-weight: 700; font-size: 0.92rem; color: var(--espresso); margin: 0 0 0.2rem; }
.cc-rij p { margin: 0; font-size: 0.76rem; line-height: 1.5; color: rgba(58,42,36,0.66); }

/* schakelaar */
.cc-toggle { position: relative; flex-shrink: 0; width: 46px; height: 26px; }
.cc-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-toggle span { position: absolute; inset: 0; background: var(--cream-dk); border-radius: 999px; transition: background 0.25s; }
.cc-toggle span::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  background: var(--cream-wit); border-radius: 50%; transition: transform 0.25s;
  box-shadow: 0 2px 5px rgba(58,42,36,0.25);
}
.cc-toggle input:checked + span { background: var(--olive); }
.cc-toggle input:checked + span::after { transform: translateX(20px); }
.cc-toggle input:disabled + span { background: var(--olive); opacity: 0.5; cursor: not-allowed; }
.cc-toggle input:focus-visible + span { outline: 3px solid var(--terra); outline-offset: 2px; }
.cc-modal-knoppen { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 720px) {
  .cc-banner { flex-direction: column; align-items: stretch; gap: 1rem; bottom: 0.8rem; padding: 1.2rem 1.3rem; }
  /* broodje naast de titel i.p.v. groot bovenaan: samen op één rij */
  .cc-banner-broodje { width: 58px; }
  .cc-banner-tekst { display: flex; flex-direction: column; }
  .cc-banner > .cc-banner-broodje { order: -1; align-self: flex-start; }
  .cc-banner-knoppen { justify-content: stretch; }
  .cc-banner-knoppen .cc-btn { flex: 1; text-align: center; }
  .cc-modal-knoppen .cc-btn { flex: 1; text-align: center; }
}

/* accent-woord op donkere kleurblokken (peach, geen italic-skew) */
.accent-licht { font-style: normal; font-weight: 700; color: #f2c49b; }

/* vraagteken boven de FAQ-kop (verving het zonnetje) */
.faq-vraag {
  display: block; width: max-content; margin: 0 auto 0.8rem;
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none;
  font-size: 2.6rem; line-height: 1; color: var(--terra);
}

/* ─── PROEFPAKKET: intent-schakelaar + vraag-modus + postcode-hint (juli 2026) ── */
.pp-intent {
  display: flex; gap: 0.4rem; margin-bottom: 1.5rem;
  background: var(--cream); border-radius: 999px; padding: 0.3rem;
}
.pp-intent-knop {
  flex: 1; border: none; cursor: pointer;
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 700; font-size: 0.82rem;
  padding: 0.6rem 0.8rem; border-radius: 999px;
  background: transparent; color: rgba(58,42,36,0.6);
  transition: background 0.25s, color 0.25s;
}
.pp-intent-knop.is-actief { background: var(--terra); color: var(--cream-wit); box-shadow: 0 6px 16px rgba(166,75,42,0.28); }
.pp-postcode-hint { margin: -0.4rem 0 1rem; font-size: 0.78rem; color: var(--olive); font-weight: 600; }

@media (max-width: 900px) {
  .pp-pitch { position: static; }
}

/* ═══ TAALWISSEL (NL/EN) ═════════════════════════════════ */
.taal-wissel {
  margin-left: 1rem;
  padding: 0.34rem 0.8rem;
  border: 1.6px solid rgba(58, 42, 36, 0.28);
  border-radius: 999px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  color: var(--espresso);
  text-decoration: none;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}
.taal-wissel:hover {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--cream-wit);
  transform: translateY(-1px);
}
@media (max-width: 900px) {
  .taal-wissel { margin-left: auto; margin-right: 0.85rem; }
}

/* Engelse hero-kop: "savoury [broodje] snacks" als één blok op regel 1 (net als NL) */
.hero-eenheid { white-space: nowrap; }
/* EN-zin is langer dan NL: iets kleiner + ruimere maxbreedte zodat regel 1
   'Take your savoury [broodje] snacks' past en 'to the next level.' op regel 2 valt */
.hero-titel--en { font-size: clamp(1.85rem, 4.05vw, 3.55rem); max-width: 30ch; }
.hero-titel--en .hero-snack { width: clamp(120px, 14vw, 168px); height: clamp(80px, 9.3vw, 112px); }

/* ─── Sticky knop "Bekijk afbakinstructies" (voor-professionals) ─── */
.afbak-sprong {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 60;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1.2rem; border-radius: 999px;
  background: var(--terra); color: var(--cream-wit);
  font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 0.9rem;
  text-decoration: none; line-height: 1;
  box-shadow: 0 12px 30px rgba(58,42,36,0.28);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.afbak-sprong:hover { transform: translateY(-2px); background: var(--terra-dk); box-shadow: 0 16px 36px rgba(58,42,36,0.34); }
.afbak-sprong svg { animation: afbakWip 2.4s ease-in-out infinite; }
@keyframes afbakWip { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(3px); } }
@media (max-width: 600px) {
  .afbak-sprong { left: 0.9rem; bottom: 0.9rem; padding: 0.72rem 0.95rem; font-size: 0.82rem; }
}
@media (prefers-reduced-motion: reduce) { .afbak-sprong svg { animation: none; } }

/* ─── Afbak-blok per broodje (home + producten) ─── */
.afbak-blok { background: var(--cream); text-align: center; }
.afbak-blok-kop { max-width: 640px; margin: 0 auto 2.6rem; }
.afbak-blok-kop .sectie-label { justify-content: center; }
.afbak-blok-kop .sectie-titel,
.afbak-blok-kop .sectie-tekst { margin-left: auto; margin-right: auto; }
.afbak-blok-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem; max-width: 1000px; margin: 0 auto 2.4rem;
}
.afbak-broodje {
  background: var(--cream-wit);
  border: 1px solid rgba(58,42,36,0.06); border-radius: 20px;
  padding: 1.7rem 1rem 1.5rem;
  box-shadow: 0 12px 30px rgba(58,42,36,0.05);
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s;
}
.afbak-broodje:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(58,42,36,0.12); }
.afbak-broodje-foto {
  width: 120px; height: 120px; margin: 0 auto 0.95rem;
  border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, #f6efe1, #ede0cd 72%);
}
.afbak-broodje.zc .afbak-broodje-foto { background: radial-gradient(circle at 50% 42%, #f2f2e4, #dbe0c1 72%); }
.afbak-broodje-foto img { width: 100%; height: 100%; object-fit: contain; }
.afbak-broodje h3 {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 600;
  font-size: 1.02rem; color: var(--espresso); margin-bottom: 0.4rem;
}
.afbak-tijd { font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 0.85rem; color: var(--terra); }
.afbak-blok-link { display: inline-flex; }
@media (max-width: 900px) { .afbak-blok-grid { grid-template-columns: 1fr 1fr; max-width: 460px; } }

/* Sticky knop verdwijnt zodra je bij het uitleg-blok bent */
.afbak-sprong { opacity: 1; visibility: visible; }
.afbak-sprong.is-verborgen { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; }

/* ─── Voordelen als lichte tegels (plat, luchtig, geen flip) ─── */
.voordelen-kop .sectie-tekst { margin-left: auto; margin-right: auto; }
.voordelen-grid { gap: 1.4rem 1.6rem; }
.voordelen-grid .voordeel {
  background: var(--cream);
  border: 1px solid rgba(58,42,36,0.10);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(58,42,36,0.06);
  padding: 1.75rem 1.7rem;
  text-align: left;
  display: block; min-height: 0; height: auto;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.voordelen-grid .voordeel:hover {
  transform: none;
  border-color: rgba(58,42,36,0.18);
  box-shadow: 0 8px 28px rgba(58,42,36,0.10);
}
.voordelen-grid .voordeel .voordeel-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--terra); margin-bottom: 1.05rem;
}
.voordelen-grid .voordeel.kleur-terra .voordeel-dot { background: var(--terra); }
.voordelen-grid .voordeel.kleur-olijf .voordeel-dot { background: var(--olive); }
.voordelen-grid .voordeel h3 {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none; font-weight: 600;
  font-size: 1.06rem; line-height: 1.3; color: var(--espresso); margin: 0 0 0.5rem;
}
.voordelen-grid .voordeel p {
  font-size: 0.9rem; line-height: 1.72; color: rgba(58,42,36,0.70); margin: 0;
}
@media (max-width: 900px) {
  .voordelen-grid .voordeel { padding: 1.45rem 1.4rem; }
}