/* ═══════════════════════════════════════════════════════════
   CONCEPT v2 — nieuw merkpalet op de BESTAANDE indeling.
   Bijna-witte achtergrond (#faf7f0), zwarte tekst, blauw + oranje
   als accenten. Geen groen, geen geel.
   ═══════════════════════════════════════════════════════════ */
body.concept {
  /* Hoofdmerk */
  --terra: #ff5a1f;      /* vlamoranje: knoppen, labels, accenten */
  --terra-dk: #e2490f;
  --olive: #1f5fd6;      /* blauw (baasbroodje-blauw als algemeen accent) */
  --cream: #faf7f0;      /* gebroken wit — achtergrond */
  --cream-wit: #ffffff;
  --cream-dk: #ece6da;
  --espresso: #3a2a24;   /* tekstbruin: koppen/tekst en donkere blokken */
  --hartig-bruin: #4a251a;
  --roze: #efa6a1;       /* eigenwijze roze */
  --zacht-oranje: #ffa07d;
  /* Productkleuren */
  --baas-blauw: #1f5fd6; --baas-geel: #f2d13d; --baas-lichtblauw: #82a5e8;
  --zwam-oranje: #ff5a1f; --zwam-bruin: #4a251a;
  --sate-groen: #07583a; --sate-lichtgroen: #6ba467;
}

/* Lopende tekst op lichte secties: zwart */
body.concept .sectie-tekst,
body.concept .hero-sub,
body.concept .faq-antwoord p { color: #3a2a24; }

/* ...maar op de gekleurde/donkere blokken licht houden */
body.concept .blok-terra .sectie-tekst,
body.concept .blok-olijf .sectie-tekst,
body.concept .contact-espresso .sectie-tekst { color: rgba(255,255,255,0.86); }

/* Knoppen: oranje CTA (geen groen) */
body.concept .nav-cta { background: var(--terra); }

/* Contact/footer donker, maar zonder de oude groene gloed */
body.concept .contact.contact-espresso {
  background:
    radial-gradient(ellipse 72% 80% at 50% -12%, rgba(255,90,31,0.22), transparent 62%),
    radial-gradient(ellipse 64% 72% at 102% 118%, rgba(31,95,220,0.20), transparent 60%),
    var(--espresso);
}
body.concept .contact-espresso .sectie-label span { color: var(--terra); }
body.concept .contact-espresso .sectie-label::before { background: var(--terra); }

/* Statistiek-cijfers oranje (geen geel) */
body.concept .stat-getal { color: var(--terra); }

/* Logostrook zonder geel */
body.concept .marquee { background: var(--cream-wit); }

/* ─── Koppen terug naar Dela Gothic One (basisfont uit styles.css) ─── */
body.concept .hero-titel,
body.concept h1,
body.concept .sectie-titel {
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif;
  font-synthesis: none;
}

/* ─── Minder blauw: mini's-blok wordt bijna-wit i.p.v. vol blauw ─── */
body.concept .variatie.blok-olijf {
  background: linear-gradient(160deg, #ffffff 0%, #f2f6ff 100%);
}
body.concept .blok-olijf .sectie-titel,
body.concept .variatie.blok-olijf .sectie-titel { color: #3a2a24; }
body.concept .blok-olijf .sectie-tekst { color: #3a2a24; }
body.concept .blok-olijf .cycle-woord { color: var(--terra); }   /* vallend woord: oranje pop */
body.concept .blok-olijf .btn-vol { background: var(--terra); color: #fff; border-color: var(--terra); }
body.concept .blok-olijf .btn-vol:hover { background: var(--terra-dk); border-color: var(--terra-dk); color: #fff; }
/* 'Ook als mini's'-sticker: schone effen gele badge — geen kartel, geen doos */
body.concept .blok-olijf .mini-badge {
  border: none;
  color: #fff;
  font-family: 'adlery-pro-blockletter', 'Quicksand', sans-serif;
}
body.concept .blok-olijf .mini-badge::before {
  background: var(--roze);
}
/* 'Ook als mini's': echte SVG-sticker uit de map BUTTONS */
body.concept .mini-badge-svg::before { display: none; }
body.concept .mini-badge-svg {
  width: 160px; height: 160px;
  filter: drop-shadow(0 14px 28px rgba(58,42,36,0.28));
}
body.concept .mini-badge-svg img { width: 100%; height: 100%; object-fit: contain; display: block; }
body.concept .variatie-lino-1, body.concept .variatie-lino-2 { color: rgba(20,20,20,0.12); }

/* ─── Bruin hoofdlogo groter in de nav ─── */
.concept-navlogo { height: 104px; width: auto; max-width: 440px; object-fit: contain; mix-blend-mode: multiply; }

/* Het lichte SVG-headerlogo valt weg op de bijna-witte achtergrond;
   vervang het op alle concept-pagina's door het donkere PNG-logo. */
body.concept .nav-logo-img {
  content: url("Huis van Hartig/Logo's/png's/Home logo.png");
  height: 104px; width: auto; max-width: 440px; object-fit: contain; mix-blend-mode: multiply;
}
@media (max-width: 900px) {
  .concept-navlogo, body.concept .nav-logo-img { height: 76px; max-width: 300px; }
}

/* ─── Footer: oranje transparant logo i.p.v. het lichte SVG ─── */
body.concept .footer-logo-img {
  content: url("Huis van Hartig/Logo's/png's/HvH_logo_oranje_transparant.png");
  height: 88px; width: auto; object-fit: contain;
}

/* ─── Koppen in bruin op lichte achtergrond; ALTIJD wit op oranje/donker ─── */
body.concept .hero-titel,
body.concept .sectie-titel { color: #3a2a24; }
body.concept .blok-terra .sectie-titel,
body.concept .blok-terra .hero-titel { color: #fff; }
/* Alles wat op het oranje blok staat: wit, geen andere kleur */
body.concept .blok-terra .sectie-tekst,
body.concept .blok-terra .merken-claim { color: #fff; }

/* ─── Bijschriften-font: Adlery Pro Blockletter (Adobe Fonts / Typekit) ─── */
body.concept .sectie-label,
body.concept .stat-label,
body.concept .home-nieuws-sub,
body.concept .product-tag,
body.concept .scroll-hint {
  font-family: 'adlery-pro-blockletter', 'Quicksand', sans-serif;
  letter-spacing: 0.02em;
}

/* Vallende/wisselende woorden in koppen: oranje om ze uit te lichten */
body.concept .cycle-woord { color: var(--terra); }

/* ─── Merk-illustraties in de hero i.p.v. de warme swirls ─── */
.concept-illu {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(200px, 24vw, 360px); will-change: transform;
}
.concept-illu-img { width: 100%; height: auto; display: block; opacity: 0.96; }
.concept-illu-img.spiegel { transform: scaleX(-1); }   /* ober kijkt de andere kant op */
.concept-illu-tr { top: 15%; right: 1%; }                /* iets lager */
.concept-illu-bl { bottom: 5%; left: 1%; }
/* tekst altijd boven de illustraties */
.concept-hero .hero-inner { position: relative; z-index: 3; }

/* Kleine merk-motieven i.p.v. de oude lino-doodles */
.concept-motief { position: absolute; z-index: 0; pointer-events: none; width: 46px; height: auto; opacity: 0.9; will-change: transform; }
.concept-motief-1 { top: 20%; left: 9%; }
.concept-motief-2 { bottom: 24%; right: 10%; width: 54px; }

/* Oude lino-decoraties verwijderen */
body.concept .lino { display: none !important; }

/* Statistiek: getallen kleiner, labels eronder groter */
body.concept .stat-getal { font-size: clamp(1.8rem, 3vw, 2.5rem); }
body.concept .stat-label { font-size: clamp(0.85rem, 1.1vw, 1rem); letter-spacing: 0.12em; }

/* ═══ HERO: kop links, grote broodjes-animatie rechts ═══ */
body.concept .hero { text-align: left; overflow: visible; z-index: 2; }
/* Alleen de homepage-hero (met broodjes-visual) is 2-koloms;
   subpagina-heroes houden de tekst gewoon ONDER de kop */
body.concept .hero-inner:has(.hero-visual) {
  max-width: 1280px; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: clamp(1.5rem, 3.5vw, 3.5rem);
}
body.concept .hero-inner:not(:has(.hero-visual)) {
  max-width: 1280px; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
  /* rechts ruimte vrijhouden voor de grote pagina-illustratie */
  padding-right: clamp(300px, 32vw, 500px);
}
body.concept .hero-inner:not(:has(.hero-visual)) .hero-titel { max-width: 20ch; }
body.concept .hero-inner:not(:has(.hero-visual)) .hero-knoppen { justify-content: flex-start; }
@media (max-width: 1000px) {
  body.concept .hero-inner:not(:has(.hero-visual)) { padding-right: 0; }
}
body.concept .hero-tekst { display: flex; flex-direction: column; align-items: flex-start; }
/* kop op precies 3 regels: 'Til je hartige / snacks naar een / hoger niveau.' */
body.concept .hero-titel { max-width: 15ch; font-size: clamp(1.8rem, 3.6vw, 3.3rem); }
body.concept .hero-sub { margin: 0 0 2.5rem; }
body.concept .hero-knoppen { justify-content: flex-start; }
body.concept .hero-visual { position: relative; z-index: 1; }
body.concept .hero-visual .hero-snack {
  display: block; margin: 0 auto;
  /* echt groot en beeldvullend aan de rechterkant */
  width: clamp(360px, 44vw, 660px);
  height: clamp(242px, 29.5vw, 443px);
}
body.concept .hero-visual .snack-img {
  filter: drop-shadow(0 22px 38px rgba(58,42,36,0.28));
  rotate: 315deg;  /* beide broodjes gekanteld; los van de val-animatie (transform) */
}
/* Subtiele val: kleine afstand, nauwelijks rotatie, rustig uitveren */
body.concept .snack-img.is-active {
  animation: snackDropZacht 1.5s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
@keyframes snackDropZacht {
  0%   { transform: translateY(-16%) rotate(-2deg); opacity: 0; }
  55%  { transform: translateY(2.5%) rotate(0.8deg); opacity: 1; }
  80%  { transform: translateY(-1%) rotate(-0.4deg); }
  100% { transform: translateY(0) rotate(0); opacity: 1; }
}
@media (max-width: 900px) {
  /* zelfde :has-specificiteit als de desktopregel, anders wint de 2-koloms grid */
  body.concept .hero-inner:has(.hero-visual) { grid-template-columns: 1fr; }
  body.concept .hero-visual { order: -1; }
  body.concept .hero-visual .hero-snack { width: clamp(200px, 52vw, 300px); height: clamp(134px, 35vw, 201px); }
}

/* ═══ CIJFER-BOLLEN — kleurenpallet-ballonnen (voorbeeld 'Bolletjes cijfers') ═══ */
body.concept .stats {
  background: #FAF7F0;
  padding: 3.5rem 2rem 4.5rem;
  position: relative; z-index: 1;
}
.cijfer-web {
  position: relative;
  max-width: 1100px; margin: 0 auto;
  height: clamp(340px, 40vw, 460px);
}
.cbol {
  position: absolute; transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1rem;
  box-shadow: 0 18px 40px rgba(58,42,36,0.14);
  will-change: left, top;
}
.cbol .stat-getal { line-height: 1; }
body.concept .cbol .stat-getal::after { display: none; }
body.concept .cbol .stat-label { margin-top: 0.5rem; max-width: 16ch; line-height: 1.35; }
/* De vier palet-kleuren: bruin, oranje, licht oranje, eigenwijs roze */
.cbol-bruin  { background: var(--hartig-bruin, #4a251a); }
.cbol-oranje { background: var(--terra, #ff5a1f); }
.cbol-zacht  { background: var(--zacht-oranje, #ffa07d); }
.cbol-roze   { background: var(--roze, #efa6a1); }
body.concept .cbol-bruin .stat-getal,  body.concept .cbol-bruin .stat-label,
body.concept .cbol-oranje .stat-getal, body.concept .cbol-oranje .stat-label { color: #fff; }
body.concept .cbol-zacht .stat-getal,  body.concept .cbol-zacht .stat-label,
body.concept .cbol-roze .stat-getal,   body.concept .cbol-roze .stat-label { color: var(--espresso); }
body.concept .cbol-oranje .stat-getal { font-size: clamp(2.2rem, 3.8vw, 3.1rem); }
body.concept .cbol-roze .stat-label { font-size: 0.78rem; }

/* ═══ ARCERING — oranje highlight-balk in de kop (vb. 'Arcering.png') ═══ */
.kop-arcering {
  /* lagere balk: gradient dekt ±86% van de regelhoogte i.p.v. de hele em-box,
     zodat hij vrij blijft van de letters op de regel erboven */
  background: linear-gradient(180deg, transparent 0%, transparent 8%, var(--terra) 8%, var(--terra) 94%, transparent 94%);
  color: #fff;
  padding: 0 0.16em;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* iets meer regelafstand zodat de balk nergens tegen de vorige regel drukt */
body.concept .hero-titel { line-height: 1.16; }

/* ═══ Oranje merkenblok ('De snack die je gasten onthouden'): minder hoog ═══ */
body.concept .merken.sectie { padding-top: 3rem; padding-bottom: 3rem; }
body.concept .merken-rond { width: min(100%, 360px); }
/* Mobiel / verminderde beweging: rustige vaste wolk zonder physics */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .cijfer-web { height: auto; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
  .cbol { position: relative; left: auto !important; top: auto !important; transform: none; flex-shrink: 0; }
  .cbol-oranje { width: 216px; height: 216px; }
  .cbol-bruin  { width: 178px; height: 178px; }
  .cbol-zacht  { width: 150px; height: 150px; }
  .cbol-roze   { width: 128px; height: 128px; }
}

/* ═══ MERK-ILLUSTRATIES verspreid over de site — vullen witruimte
   en overlappen de blokranden zodat secties aan elkaar koppelen ═══ */
.hvh-illu {
  position: absolute; z-index: 4; pointer-events: none;
  width: clamp(180px, 18vw, 300px); height: auto;
}
@media (max-width: 1000px) { .hvh-illu { display: none; } }
/* Hand met serveerklok links bij de kop */
.hero-links-illu {
  left: clamp(0.5rem, 2vw, 3rem); bottom: -90px;
  width: clamp(160px, 15vw, 250px);
}
/* Giraffe rechts bij de broodjes-animatie: hoog en prominent naast de animatie */
.hero-giraffe {
  right: clamp(0.5rem, 2vw, 3rem); bottom: 60px;
  width: clamp(300px, 30vw, 500px);
}
/* Chef serveert — overlapt de bovenrand van het oranje merkenblok */
.illu-serveren-chef { right: 3%; top: -85px; width: clamp(190px, 17vw, 270px); }
/* Etende man — koppelt het stemmen-blok aan de sectie erboven */
.illu-eten { left: 2%; top: -90px; width: clamp(170px, 15vw, 240px); }
/* Ruikende vrouw — vult de witruimte rechts naast de FAQ */
.illu-ruiken { right: 2%; bottom: -70px; width: clamp(180px, 16vw, 250px); }
/* Collega's met laptops — bij het nieuwsblok */
.illu-laptops { left: 1.5%; bottom: -80px; width: clamp(190px, 17vw, 260px); }
/* Ober met schotel — overlapt de bovenrand van het contactblok */
.illu-serveren-schotel { right: 2.5%; top: -95px; width: clamp(200px, 18vw, 280px); }
/* ═══ MOBIEL (≤900px): koppen groot & prominent, indeling en animaties passend ═══ */
@media (max-width: 900px) {
  /* Koppen echt groot tonen — ze dragen de pagina op mobiel */
  body.concept .hero-titel {
    font-size: clamp(2rem, 9.4vw, 2.9rem);
    max-width: 14ch; line-height: 1.18;
  }
  body.concept .sectie-titel { font-size: clamp(1.85rem, 8.6vw, 2.5rem); line-height: 1.12; }
  body.concept .zwamreis-kop .sectie-titel { font-size: clamp(1.6rem, 7.4vw, 2.1rem); }

  /* Hero: broodje bovenaan, gekanteld maar compacter zodat de kop meteen volgt */
  body.concept .hero { padding: 6.5rem 1.5rem 3.5rem; }
  body.concept .hero-visual .hero-snack {
    width: clamp(200px, 56vw, 300px);
    height: clamp(134px, 37.6vw, 201px);
  }
  body.concept .hero-sub { margin-bottom: 2rem; }

  /* Cijfer-bollen: kleiner zodat ze 2-aan-2 passen zonder het scherm te vullen */
  .cbol-oranje { width: 172px; height: 172px; }
  .cbol-bruin  { width: 142px; height: 142px; }
  .cbol-zacht  { width: 120px; height: 120px; }
  .cbol-roze   { width: 106px; height: 106px; }
  body.concept .cbol .stat-getal { font-size: 1.5rem; }
  body.concept .cbol-oranje .stat-getal { font-size: 2rem; }
  body.concept .cbol .stat-label { font-size: 0.6rem; letter-spacing: 0.08em; }
  body.concept .stats { padding: 2.5rem 1.25rem 3rem; }

  /* Blokken compacter — minder verticale lucht op kleine schermen */
  body.concept .sectie { padding-left: 1.5rem; padding-right: 1.5rem; }
  body.concept .merken.sectie { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

/* Producten-hero: zwevende broodjes vrij van logo, kop en scroll-hint */
body.concept .hb-1 { top: 17%; left: -9%; width: clamp(130px, 15vw, 210px); }
body.concept .hb-2 { top: 6%; right: -4%; width: clamp(140px, 16vw, 230px); }
body.concept .hb-3 { bottom: -7%; left: -7%; }
/* Subpagina's: GROTE illustratie rechts in de vrije ruimte naast de kop */
.illu-pagina-rechts {
  right: clamp(1rem, 3vw, 4rem); top: 50%;
  transform: translateY(-42%);
  width: clamp(300px, 30vw, 480px);
}
/* Hand met dienblad: in de flow onder de pitch-uitleg, niet overlappend */
.pp-pitch-illu {
  display: block;
  margin: 2.5rem auto 0 0;
  width: clamp(180px, 20vw, 260px);
  height: auto;
}
@media (max-width: 1000px) {
  .pp-pitch-illu { margin: 2rem auto 0; }
}
/* Secties met een overlappende illustratie mogen niet afsnijden */
body.concept .stemmen, body.concept .faq,
body.concept .home-nieuws, body.concept .contact,
body.concept .merken, body.concept .helden,
body.concept .page-hero, body.concept .pp-hero,
body.concept .hero-producten { overflow: visible; position: relative; }
@media (max-width: 1000px) { .concept-illu { display: none; } }  /* mobiel: geen deco over de tekst */

/* ─── Stemmen-bollen: leesbare terugval bij 'verminderde beweging' ───
   Zonder physics stortten de absoluut-gepositioneerde bollen in. Bij
   prefers-reduced-motion tonen we een rustige wolk die op hover/klik
   uitklapt tot een leesbare kaart (geen ballon-animatie nodig). */
@media (prefers-reduced-motion: reduce) {
  body.concept .stemmen-web {
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; aspect-ratio: auto;
  }
  body.concept .stemmen-web .bol {
    position: relative; transform: none; left: auto; top: auto;
    width: calc(25% - 14px); height: auto; aspect-ratio: 1 / 1;
  }
  body.concept .stemmen-web .bol.open {
    width: calc(50% - 14px); aspect-ratio: auto; border-radius: 26px;
  }
  body.concept .stemmen-web .bol.open .bol-mini { display: none; }
  body.concept .stemmen-web .bol.open .bol-kaart {
    position: static; opacity: 1; pointer-events: auto; padding: 1.6rem 1.5rem;
  }
}

/* ─── Chef-illustratie in het afbak-blok ('Zo bak je ze af') ─── */
.afbak-blok { position: relative; overflow: hidden; }
.concept-chef {
  position: absolute; left: 2%; bottom: 4%; z-index: 0;
  width: clamp(210px, 21vw, 320px); height: auto;
  opacity: 1; pointer-events: none;
  will-change: transform;
}
.afbak-blok .afbak-blok-kop,
.afbak-blok .afbak-blok-grid,
.afbak-blok .afbak-blok-link { position: relative; z-index: 1; }
@media (max-width: 1000px) { .concept-chef { display: none; } }

/* ═══════════════════════════════════════════════════════════
   PER-BROODJE KLEUR — elk product zijn eigen merkkleur.
   Mini's erven de kleur automatisch (staan in dezelfde .bb/.zc/.sb rij).
   ═══════════════════════════════════════════════════════════ */
body.concept .product-rij.bb,
body.concept .afbak-broodje.bb { --pk: var(--baas-blauw);  --pk-dk: #1a4fb5; --pk-badge: var(--baas-geel);      --pk-badge-tekst: var(--espresso); }
body.concept .product-rij.zc,
body.concept .afbak-broodje.zc { --pk: var(--zwam-oranje); --pk-dk: var(--terra-dk); --pk-badge: var(--zacht-oranje);  --pk-badge-tekst: var(--espresso); }
body.concept .product-rij.sb,
body.concept .afbak-broodje.sb { --pk: var(--sate-groen);  --pk-dk: #064b31; --pk-badge: var(--sate-lichtgroen); --pk-badge-tekst: var(--espresso); }

/* Echte studio-fotoachtergrond achter de productfoto (i.p.v. de gradient) */
body.concept .product-rij.bb .product-foto {
  background: url("Huis van Hartig/Merk/Achtergronden broodjes/Achtergrond Baasbroodje.png") center/cover no-repeat;
}
body.concept .product-rij.zc .product-foto {
  background: url("Huis van Hartig/Merk/Achtergronden broodjes/Achtergrond Zwamcijsje.png") center/cover no-repeat;
}
body.concept .product-rij.sb .product-foto {
  background: url("Huis van Hartig/Merk/Achtergronden broodjes/Achtergrond Satébroodje.png") center/cover no-repeat;
}

/* Accenten (tag, NIEUW-badge, knop) volgen de broodjeskleur */
body.concept .product-rij .product-tag { color: var(--pk); }
body.concept .product-rij .product-nieuw {
  background: transparent;
  color: var(--pk-badge-tekst, #fff);
  box-shadow: none;
}
body.concept .product-rij .product-nieuw::before { background: var(--pk-badge, var(--pk)); }
body.concept .product-rij .btn-vol {
  background: var(--pk); border-color: var(--pk); color: #fff;
}
body.concept .product-rij .btn-vol:hover {
  background: var(--pk-dk); border-color: var(--pk-dk); color: #fff;
}
body.concept .product-rij .product-foto:focus-visible { outline-color: var(--pk); }

/* Homepage 'Zo bak je ze af' — hele blok = studio-foto, broodje erop */
body.concept .afbak-broodje {
  border-radius: 22px; overflow: hidden;
  padding: 1.7rem 1rem 1.4rem;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
body.concept .afbak-broodje.bb { background-image: url("Huis van Hartig/Merk/Achtergronden broodjes/Achtergrond Baasbroodje.png"); }
body.concept .afbak-broodje.zc { background-image: url("Huis van Hartig/Merk/Achtergronden broodjes/Achtergrond Zwamcijsje.png"); }
body.concept .afbak-broodje.sb { background-image: url("Huis van Hartig/Merk/Achtergronden broodjes/Achtergrond Satébroodje.png"); }
body.concept .afbak-broodje .afbak-broodje-foto {
  background: none !important; width: auto; height: auto; border-radius: 0; margin: 0 auto 0.7rem;
}
body.concept .afbak-broodje-foto img {
  width: clamp(120px, 62%, 190px); height: auto;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.28));
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
}
body.concept .afbak-broodje:hover .afbak-broodje-foto img { transform: translateY(-12px); }
body.concept .afbak-broodje h3 { color: #fff; }
body.concept .afbak-broodje .afbak-tijd { color: rgba(255,255,255,0.92); }

/* ═══════════════════════════════════════════════════════════
   RESTYLE — meer contrast, geen bruine/donkere achtergronden,
   golf-overgangen vervangen door lichte gradiënten.
   ═══════════════════════════════════════════════════════════ */

/* Achtergrond hele site: gebroken wit #FAF7F0 */
body.concept { background: #FAF7F0; }

/* Geen golf-overgangen meer — schone, harde randen tussen de blokken */
body.concept .golf-boven::before,
body.concept .golf-onder::after { display: none; }

/* Cijferblok: schone crème achtergrond — de bollen dragen de kleur (vb. 'Bolletjes cijfers') */
body.concept .stats { background: #FAF7F0; }
body.concept .stats::before,
body.concept .stats-patroon { display: none; }
body.concept .stats-grid { gap: 1.4rem; }
body.concept .stat {
  background: linear-gradient(145deg, rgba(255,255,255,0.42), rgba(255,255,255,0.14));
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 24px;
  padding: 1.9rem 1rem 1.6rem;
  box-shadow: 0 18px 40px rgba(58,42,36,0.16), inset 0 1px 2px rgba(255,255,255,0.7);
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s;
}
body.concept .stat:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(58,42,36,0.24), inset 0 1px 2px rgba(255,255,255,0.85);
}
body.concept .stat-getal {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1;
  color: var(--espresso);
}
body.concept .stat-getal::after {
  content: ''; display: block;
  width: 34px; height: 4px; border-radius: 2px;
  margin: 0.7rem auto 0;
  background: var(--espresso); opacity: 0.35;
}
body.concept .stat .suffix { color: inherit; }
body.concept .stat-label { color: var(--espresso); margin-top: 0.6rem; font-size: 0.72rem; }

body.concept .contact.contact-espresso {
  background: #FFA07D;
  color: var(--espresso);
}
body.concept .contact-espresso .sectie-titel { color: var(--espresso); }
body.concept .contact-espresso .sectie-tekst { color: rgba(58,42,36,0.82); }
body.concept .contact-espresso .sectie-label span { color: var(--espresso); }
/* pp-contact (proefpakket-afsluiter) blijft wél espresso-donker → kop lichtwit */
body.concept .pp-contact.blok-espresso .sectie-titel { color: var(--cream-wit); }
body.concept .contact-espresso .sectie-label::before { background: var(--espresso); }
body.concept .contact-espresso .btn-lijn {
  color: var(--espresso); border-color: rgba(58,42,36,0.45);
}

/* Mini's-blok terug naar de basisachtergrond (geen apart vlak) */
body.concept .variatie.blok-olijf { background: #FAF7F0; }

/* Gele abstracte swirls op de homepage-hero verwijderen */
body.concept .hero-deco { display: none; }

/* Papier-reliëf: subtiele korrel over de hele pagina */
body.concept::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='pg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pg)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.05;
  mix-blend-mode: multiply;
}

/* SVG-badges (mini's + NIEUW/NEW): echte sticker, geen CSS-vorm eronder */
body.concept .product-nieuw-svg::before { display: none; }
body.concept .product-nieuw-svg {
  background: transparent;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.25));
}
body.concept .product-nieuw-svg img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ─── Zwamreis 'Van tarwe tot zwamcijs' ─── */
/* Kleinere kop + onderschrift */
body.concept .zwamreis-kop { text-align: center; margin-left: auto; margin-right: auto; }
body.concept .zwamreis-kop .sectie-label { justify-content: center; }
body.concept .zwamreis-kop .sectie-titel,
body.concept .zwamreis-kop .sectie-tekst { margin-left: auto; margin-right: auto; text-align: center; }
body.concept .zwamreis-kop .sectie-titel { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
body.concept .zwamreis-kop .sectie-tekst { font-size: 0.9rem; }
/* 'Stap 1' t/m 'Stap 7' allemaal dezelfde kleur */
body.concept .stap-nr,
body.concept .stap.kleur-olijf .stap-nr { color: var(--terra); }
/* Golvender route: grotere amplitude in de zigzag */
body.concept .zwamreis-spoor { padding-bottom: 7rem; counter-reset: stap; }
body.concept .zwamreis-spoor .stap:nth-of-type(2n) { margin-top: 150px; }
/* Iconen weg, cijfers erin */
body.concept .stap-icoon svg { display: none; }
body.concept .stap-icoon::before {
  counter-increment: stap;
  content: counter(stap);
  font-family: 'Dela Gothic One', 'Fraunces', Georgia, serif; font-synthesis: none;
  font-size: 1.8rem; line-height: 1;
}
/* Bolletjes → glazen effect, net als de cijferblokken bovenin */
body.concept .stap-icoon,
body.concept .stap.kleur-terra .stap-icoon,
body.concept .stap.kleur-olijf .stap-icoon {
  background: linear-gradient(145deg, rgba(255,255,255,0.5), rgba(255,255,255,0.16));
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 14px 30px rgba(58,42,36,0.16), inset 0 1px 2px rgba(255,255,255,0.75);
  color: var(--espresso);
}