/* =========================================================
   PizzaSmederij: stijlen
   Mobile-first. Kleuren: houtskool (smidse), gloed (vuur), bloem (crème).
   Lettertypes lokaal gehost (geen externe verzoeken, GDPR-vriendelijk).
   ========================================================= */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #1d1916;
  --ink-2: #29231e;
  --ink-3: #3a312a;
  --cream: #f6efe4;
  --paper: #ece1cf;
  --ember: #e0612a;
  --ember-hot: #f28a4e;
  --ember-deep: #a8410f;
  --ember-ink: #8f3609;           /* donkerder oranje voor tekst op de lichte hero */
  --stone: #d6d3cd;
  --wood: #7a4e2d;
  --text: #2a231d;
  --muted: #6a5b4e;
  --muted-light: #c9bba8;
  --line: rgba(29, 25, 22, 0.14);
  --line-light: rgba(246, 239, 228, 0.16);

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --radius: 14px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(4rem, 10vw, 7.5rem);
  --header-h: 64px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  font-variation-settings: "opsz" 96;
}
h2 { font-size: clamp(2rem, 5.2vw, 3.4rem); }
h3 { font-size: 1.25rem; font-variation-settings: "opsz" 24; }
p { margin: 0 0 1em; }
address { font-style: normal; }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--ember); color: var(--ink);
  padding: 0.6rem 1rem; border-radius: 8px; font-weight: 700;
}
.skip-link:focus { top: 1rem; }

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

/* ---------- Eyebrow / labels ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ember-hot);
  margin-bottom: 1rem;
}
.eyebrow::before {
  /* klein vijfhoekje, echo van het logo */
  content: ""; width: 0.8rem; height: 0.8rem;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}
.eyebrow-dark { color: var(--ember-deep); }


/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--ember); color: var(--ink);
  box-shadow: 0 10px 30px -10px rgba(224, 97, 42, 0.7);
}
.btn-primary:hover { background: var(--ember-hot); }
.btn-outline {
  color: var(--ink);
  border-color: rgba(29, 25, 22, 0.7);
  background: rgba(255, 255, 255, 0.45);
}
.btn-outline:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-block { width: 100%; }
.icon { width: 1.2em; height: 1.2em; fill: currentColor; flex: none; }

/* =========================================================
   1. Header
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(29, 25, 22, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  color: var(--cream);
  border-bottom: 1px solid var(--line-light);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex; align-items: center; gap: 0.7rem;
  text-decoration: none;
}
.brand-mark { width: 50px; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em;
}
.brand-by {
  /* zelfde cursieve stijl als "Volg ons" onder de galerij */
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 0.95rem;
  color: var(--muted-light);
  margin-top: 0.1rem;
}
.brand-name span { color: var(--ember-hot); }

/* Logo-animaties: kanteling bij hover/focus; na de hero (.is-compact) schuift de balk iets omhoog en wordt het logo
   kleiner. Losse rotate/scale/translate, zodat ze niet botsen met de laad-animatie (transform). */
@media (prefers-reduced-motion: no-preference) {
  .brand-mark { transition: rotate 0.25s var(--ease); }
  .brand:hover .brand-mark, .brand:focus-visible .brand-mark { rotate: -5deg; }

  .site-header { --compact: 8px; transition: transform 0.4s var(--ease); }
  .brand, .nav-toggle { transition: scale 0.4s var(--ease), translate 0.4s var(--ease); }
  .site-header.is-compact { transform: translateY(calc(-1 * var(--compact))); }
  .site-header.is-compact .brand { scale: 0.86; translate: 0 calc(var(--compact) / 2); }
  .site-header.is-compact .nav-toggle { translate: 0 calc(var(--compact) / 2); }
}

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: none; border: 0; color: var(--cream); cursor: pointer;
  border-radius: 10px;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block; width: 24px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s, background-color 0.2s;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block; text-decoration: none; font-weight: 600;
  padding: 0.85rem 0;
}
.site-nav a:hover { color: var(--ember-hot); }
.site-nav .nav-cta { color: var(--ember-hot); }

/* Mobiel menu: animatie via opacity + transform; visibility schakelt pas om ná het sluiten (dan niet klikbaar
   of focusbaar). Zonder JavaScript toont nojs.css het menu gewoon. */
.site-nav {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ink);
  border-bottom: 1px solid var(--line-light);
  padding: 0.5rem var(--gutter) 1.25rem;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-10px); visibility: hidden;
  transition: opacity 0.2s ease-in, transform 0.2s ease-in, visibility 0s linear 0.2s;
}
.site-nav.is-open {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0s;
}
.site-nav li + li { border-top: 1px solid var(--line-light); }

/* Achtergrond achter het open menu: dimt de pagina en vangt "klik buiten het menu" op */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 45; /* onder de header (50), boven de WhatsApp-knop (40) */
  background: rgba(29, 25, 22, 0.4);
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease-in, visibility 0s linear 0.2s;
}
.nav-backdrop.is-open {
  opacity: 1; visibility: visible;
  transition: opacity 0.28s var(--ease), visibility 0s;
}
/* Zolang het menu open is: pagina scrollt niet mee, WhatsApp-knop verborgen */
/* Enkel op html: overflow op body zou body tot scrollcontainer maken, waardoor de sticky header wegschuift */
html.menu-open { overflow: hidden; }
html.menu-open .wa-float { visibility: hidden; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav.is-open, .nav-backdrop, .nav-backdrop.is-open,
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { transition: none; }
}

@media (min-width: 900px) {
  :root { --header-h: 76px; }
  .brand-mark { width: 60px; }
  .brand-by { font-size: 1.05rem; }
  .nav-toggle { display: none; }
  .nav-backdrop { display: none; }
  .site-nav {
    position: static; display: block; padding: 0; background: none; border: 0;
    max-height: none; overflow: visible;
    opacity: 1; transform: none; visibility: visible; transition: none;
  }
  .site-nav ul { display: flex; align-items: center; gap: 1.9rem; }
  .site-nav li + li { border: 0; }
  .site-nav a { padding: 0.5rem 0; font-size: 0.97rem; }
  .site-nav .nav-cta {
    padding: 0.55rem 1.2rem; border-radius: 999px;
    background: var(--ember); color: var(--ink);
  }
  .site-nav .nav-cta:hover { background: var(--ember-hot); color: var(--ink); }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .site-header { --compact: 12px; }
  .site-nav ul { transition: translate 0.4s var(--ease); }
  .site-header.is-compact .site-nav ul { translate: 0 calc(var(--compact) / 2); }
}

/* =========================================================
   2. Hero
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  /* effen bloemkleur met een heel zachte lichtere gloed linksboven */
  background:
    radial-gradient(110% 80% at 0% 0%, rgba(246, 239, 228, 0.9) 0%, rgba(246, 239, 228, 0) 65%),
    var(--paper);
  /* onderaan ruimte voor het vertrouwensblok dat de hero overlapt (.trust heeft een negatieve marge) */
  padding-block: clamp(2.25rem, 7vw, 4.5rem) calc(3.5rem + clamp(1.75rem, 5vw, 2.75rem));
}
.hero-grid {
  position: relative;
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
}
/* Video in een kader: de poster (eerste frame) staat als gewone foto onder de video. Video en foto delen dezelfde
   positie, zodat de overgang van foto naar video onzichtbaar is. Geen overlay: het beeld blijft helder. */
.hero-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius) + 8px);
  overflow: hidden;
  background: var(--stone);
  box-shadow:
    0 34px 60px -32px rgba(29, 25, 22, 0.55),
    0 10px 22px -14px rgba(29, 25, 22, 0.3);
}
.hero-media picture, .hero-media img, .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.hero-media img, .hero-video { object-fit: cover; object-position: 50% 50%; }
/* Video pas tonen als hij echt speelt (script.js zet .is-playing): tot dan blijft de foto zichtbaar */
.hero-video { opacity: 0; transition: opacity 0.8s ease-out; }
.hero-video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}
/* Hero-kop: drie regels met typografisch contrast. De grote delen bepalen de korpsgrootte, de kleine delen
   zijn 45% daarvan. De grootte volgt de breedte van de tekstkolom (container query, cqi), zodat de langste regel
   ("100% artisanaal") altijd past; oudere browsers zonder cqi vallen terug op de clamp(). */
.hero-content { container-type: inline-size; }
.hero-title {
  font-size: clamp(2.5rem, 12vw, 4.4rem);
  font-size: min(16.5cqi, 5.4rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 1.1rem;
  font-variation-settings: "opsz" 144;
}
.hero-line { display: block; white-space: nowrap; }
.hero-small {
  font-size: 0.45em;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 48;
}
.hero-accent { color: var(--ember-deep); }
/* Komma na regel 1 en 2: in de tekst (voor zoekmachines en schermlezers), maar niet te zien. Bewust geen
   .visually-hidden: die is absoluut gepositioneerd, waardoor browsers een spatie vóór de komma in de naam zetten. */
.hero-comma { color: transparent; }
.hero-tagline {
  font-family: var(--font-display);
  font-style: italic; font-weight: 500;
  font-size: clamp(1.25rem, 2.8vw, 1.65rem);
  line-height: 1.3;
  color: var(--ember-ink);
  margin-bottom: 1rem;
}
.hero-lead {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  max-width: 38rem;
  color: var(--ink-2);
  margin-bottom: 0.9rem;
}
.hero-events {
  font-weight: 600; font-size: 0.98rem;
  color: var(--ink-3);
  margin-bottom: 1.75rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

@media (min-width: 900px) {
  .hero { padding-block: clamp(3.5rem, 6vw, 5.5rem) calc(5rem + clamp(2.5rem, 4vw, 3.5rem)); }
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }
  /* Staand kader, nooit hoger dan het scherm (min. 20rem breed) */
  .hero-media {
    aspect-ratio: 4 / 5;
    justify-self: end;
    width: min(100%, max(20rem, (100svh - var(--header-h) - 7rem) * 0.8));
  }
  /* groot vijfhoek-contour, het "huisje" uit het logo, half achter het videokader */
  .hero-grid::after {
    content: ""; position: absolute; z-index: -1;
    width: clamp(440px, 44vw, 620px); aspect-ratio: 1 / 0.95;
    right: calc(var(--gutter) - 4%); top: 50%;
    translate: 0 -54%;
    background: linear-gradient(135deg, rgba(224, 97, 42, 0.55), rgba(224, 97, 42, 0));
    clip-path: polygon(evenodd, 50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%, 50% 0, 50% 1.4%, 1.6% 38.4%, 19% 98.6%, 81% 98.6%, 98.4% 38.4%, 50% 1.4%);
    opacity: 0.7;
    pointer-events: none;
  }
}

/* Laad-animatie (één keer, enkel transform en opacity): logo, dan de drie regels van de hero-kop na elkaar,
   dan de rest van de hero. Bij prefers-reduced-motion staat alles meteen stil. */
@media (prefers-reduced-motion: no-preference) {
  .brand { animation: verschijn 0.6s ease-out backwards; transform-origin: 0 50%; }
  .hero-line { animation: regel-op 0.6s var(--ease) backwards; }
  .hero-line:nth-child(2) { animation-delay: 0.15s; }
  .hero-line:nth-child(3) { animation-delay: 0.3s; }
  .hero-tagline, .hero-lead, .hero-events, .hero-actions, .hero-media {
    animation: rise 0.9s var(--ease) both;
  }
  .hero-tagline { animation-delay: 0.4s; }
  .hero-lead { animation-delay: 0.48s; }
  .hero-events { animation-delay: 0.54s; }
  .hero-actions { animation-delay: 0.6s; }
  .hero-media { animation-delay: 0.18s; }
}
@keyframes regel-op {
  from { opacity: 0; transform: translateY(0.35em); }
  to { opacity: 1; transform: none; }
}
@keyframes verschijn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* =========================================================
   Secties algemeen
   ========================================================= */
.section { padding-block: var(--section-y); position: relative; overflow-x: clip; }
.section-cream { background: var(--cream); }
.section-paper { background: var(--paper); }
.section-ink {
  background: var(--ink);
  color: var(--cream);
}
.section-ink h2 { color: var(--cream); }
.section-head { max-width: 40rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
/* Regels even lang verdelen: geen los woord (bv. "jouw feest") alleen op de laatste regel.
   Browsers zonder text-wrap: balance tonen gewoon de normale regelval. */
.section-head p { text-wrap: balance; }
.section-head p:last-child { color: var(--muted); }
.section-ink .section-head p:last-child { color: var(--muted-light); }

/* Scroll-onthulling: enkel actief als JS draait én beweging toegestaan is */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  /* Logo-scheiding: invagen en een kwartslag meedraaien */
  .js .reveal.reveal-turn { transform: rotate(-90deg); transition-duration: 1.1s; }
  /* Footerlogo: enkel rustig invagen */
  .js .reveal.reveal-fade { transform: none; transition: opacity 1.2s ease-out; }
  .js .reveal.reveal-turn.is-visible, .js .reveal.reveal-fade.is-visible { opacity: 1; transform: none; }
}

/* Logo als scheidingselement: klein zegel met het beeldmerk, precies op de naad tussen twee secties */
.logo-divider {
  position: relative; z-index: 3;
  height: 0;
  display: flex; justify-content: center; align-items: flex-start;
}
.logo-divider-seal {
  display: grid; place-items: center;
  flex: none;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px -12px rgba(29, 25, 22, 0.45);
  translate: 0 -50%;
}
.logo-divider-seal picture { width: 40px; }
@media (min-width: 900px) {
  .logo-divider-seal { width: 80px; height: 80px; }
  .logo-divider-seal picture { width: 48px; }
}

/* =========================================================
   3. Glutenvrij, van begin tot eind (vertrouwensblok, overlapt de hero)
   ========================================================= */
.trust { position: relative; z-index: 2; margin-top: -3.5rem; padding-bottom: clamp(3rem, 7vw, 5rem); }
.trust-card {
  background: var(--cream);
  border-radius: calc(var(--radius) + 4px);
  border-top: 4px solid var(--ember);
  box-shadow: 0 30px 60px -30px rgba(29, 25, 22, 0.45);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  display: grid; gap: 1.5rem;
}
.trust-head h2 { font-size: clamp(1.8rem, 4.4vw, 2.8rem); margin: 0; }
.trust-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.trust-facts li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: center; }
.trust-icon {
  width: 2.6rem; aspect-ratio: 1 / 0.95;
  background: var(--ember);
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
  position: relative;
}
.trust-icon::after {
  /* vinkje in het vijfhoekje */
  content: ""; position: absolute; left: 34%; top: 30%;
  width: 28%; height: 42%;
  border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  transform: rotate(40deg);
}
.trust-facts p { margin: 0; font-weight: 600; font-size: 1.1rem; line-height: 1.45; text-wrap: balance; }
@media (min-width: 900px) {
  .trust { margin-top: -5rem; }
  .trust-card { grid-template-columns: 0.8fr 1.4fr; column-gap: 3rem; align-items: center; }
}

/* =========================================================
   4. Formules: Vers uit het vuur + menu
   ========================================================= */
.formulas { display: grid; gap: 1.1rem; }
.formula {
  background: var(--paper);
  border-radius: var(--radius);
  border-top: 3px solid var(--ember);
  padding: 1.5rem 1.5rem 1.4rem;
}
.formula h3 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.formula p { margin: 0; color: var(--muted); }
.formula-extra { background: transparent; border: 1.5px dashed rgba(29, 25, 22, 0.25); border-top: 3px solid var(--ember); }
.quality-note {
  margin: 1.5rem 0 0;
  padding-left: 0.9rem;
  border-left: 3px solid var(--ember);
  font-weight: 600;
}
@media (min-width: 800px) {
  .formulas { grid-template-columns: repeat(3, 1fr); }
}

/* Menu: typografische menukaart, in de stijl van een Italiaanse kaart. Enkel de namen, in cursieve Fraunces,
   ruim gezet met een dunne lijn ertussen; geen kaders of vlakken. Eén klein oranje vijfhoekje uit het logo
   boven de lijst. 1 kolom op mobiel, 2 vanaf 700 px (eerst naar onder, dan naar rechts: 5 + 4). */
.menu-block {
  margin: clamp(3rem, 7vw, 4.5rem) auto 0;
  max-width: 44rem;
  text-align: center;
}
.menu-title { font-size: clamp(1.5rem, 3.5vw, 2rem); margin-bottom: 0.35rem; }
.menu-intro {
  margin: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 1.15rem; color: var(--muted);
}
/* Het vijfhoekje uit het logo (zelfde punten als het contour in de hero), als oranje lijn, met een dunne lijn
   aan weerszijden. Vaste verhouding 100 : 95, dus nooit vervormd; de lijn mag over de rand van de SVG. */
.menu-ornament {
  display: flex; align-items: center; justify-content: center; gap: 0.9rem;
  margin: clamp(1.5rem, 4vw, 2.25rem) 0;
}
.menu-ornament svg { width: 1rem; height: auto; aspect-ratio: 100 / 95; overflow: visible; flex: none; }
.menu-ornament path { fill: none; stroke: var(--ember); stroke-width: 9; stroke-linejoin: round; }
.menu-ornament::before,
.menu-ornament::after {
  content: ""; width: 2.5rem; height: 1px;
  background: var(--ember); opacity: 0.55;
}
.menu-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.menu-list li {
  padding-block: clamp(0.85rem, 2.2vw, 1.15rem);
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.75rem, 4.2vw, 2.4rem);
  line-height: 1.15;
  font-variation-settings: "opsz" 72;
  color: var(--ink);
  overflow-wrap: break-word;
  transition: color 0.25s ease;
}
.menu-list li + li { border-top: 1px solid var(--line); }
/* Hover: enkel de oranje accentkleur (het tekst-oranje van de site, leesbaar op crème) */
.menu-list li:hover { color: var(--ember-deep); }
.menu-outro {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  color: var(--muted);
}
@media (min-width: 700px) {
  .menu-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    column-gap: clamp(2rem, 6vw, 4.5rem);
  }
  /* Bovenaan de tweede kolom (de zesde naam) geen lijn */
  .menu-list li:nth-child(6) { border-top: 0; }
}
/* In beeld (.reveal): het vijfhoekje tekent zichzelf, daarna vagen de namen na elkaar in.
   Bij prefers-reduced-motion of zonder JavaScript staat alles er meteen. */
@media (prefers-reduced-motion: no-preference) {
  .js .menu-ornament.reveal { opacity: 1; transform: none; transition: none; }
  .js .menu-ornament.reveal:not(.is-visible) path { stroke-dasharray: 100; stroke-dashoffset: 100; }
  .js .menu-ornament.reveal.is-visible path { animation: ornament-teken 0.8s ease-out backwards; }
  .js .menu-ornament ~ .menu-list li {
    opacity: 0; transform: translateY(6px);
    transition: opacity 0.7s ease-out, transform 0.7s var(--ease), color 0.25s ease;
  }
  .js .menu-ornament.is-visible ~ .menu-list li { opacity: 1; transform: none; transition-delay: 0.8s, 0.8s, 0s; }
  .js .menu-ornament.is-visible ~ .menu-list li:nth-child(2) { transition-delay: 0.86s, 0.86s, 0s; }
  .js .menu-ornament.is-visible ~ .menu-list li:nth-child(3) { transition-delay: 0.92s, 0.92s, 0s; }
  .js .menu-ornament.is-visible ~ .menu-list li:nth-child(4) { transition-delay: 0.98s, 0.98s, 0s; }
  .js .menu-ornament.is-visible ~ .menu-list li:nth-child(5) { transition-delay: 1.04s, 1.04s, 0s; }
  .js .menu-ornament.is-visible ~ .menu-list li:nth-child(6) { transition-delay: 1.1s, 1.1s, 0s; }
  .js .menu-ornament.is-visible ~ .menu-list li:nth-child(7) { transition-delay: 1.16s, 1.16s, 0s; }
  .js .menu-ornament.is-visible ~ .menu-list li:nth-child(8) { transition-delay: 1.22s, 1.22s, 0s; }
  .js .menu-ornament.is-visible ~ .menu-list li:nth-child(9) { transition-delay: 1.28s, 1.28s, 0s; }
}
@keyframes ornament-teken {
  from { stroke-dasharray: 100; stroke-dashoffset: 100; }
  to { stroke-dasharray: 100; stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-list li { transition: none; }
}

/* =========================================================
   4b. Voor wie: praktische info + knoppen per soort feest
   ========================================================= */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.facts li {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.9rem; align-items: center;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  font-weight: 600; font-size: 1.1rem; line-height: 1.4;
}
.facts li::before {
  content: ""; width: 1.6rem; aspect-ratio: 1 / 0.95;
  background: var(--ember);
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}
@media (min-width: 800px) { .facts { grid-template-columns: repeat(2, 1fr); } }

/* Opvallend kader "Glutenvrij en zonder kruisbesmetting": donkere kaart met oranje bovenrand en zachte gloed
   (zoals het offerteformulier en de wintermarktkaart), met het vijfhoekje met vinkje uit het blok "Glutenvrij". */
.claim {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.5rem);
  margin: 0 0 1rem;
  padding: clamp(1.25rem, 3.5vw, 2rem) clamp(1.25rem, 4vw, 2.5rem);
  background: var(--ink); color: var(--cream);
  border-radius: var(--radius);
  border-top: 4px solid var(--ember);
  box-shadow: 0 24px 48px -28px rgba(29, 25, 22, 0.55);
}
.claim::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 140% at 0% 100%, rgba(224, 97, 42, 0.26), transparent 70%);
}
.claim-icon.trust-icon { flex: none; width: clamp(2.4rem, 6vw, 3.2rem); }
.claim-text {
  font-family: var(--font-display); font-weight: 650;
  font-size: clamp(1.45rem, 3.8vw, 2.3rem); line-height: 1.12; letter-spacing: -0.015em;
  font-variation-settings: "opsz" 96;
  text-wrap: balance;
}

.audience { margin-top: clamp(2rem, 5vw, 2.75rem); }
.audience-label { font-weight: 700; margin-bottom: 0.75rem; }
.audience-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.audience-link {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 48px;
  padding: 0.6rem 1.2rem;
  border: 1.5px solid var(--ink); border-radius: 999px;
  font-weight: 700; color: var(--ink); text-decoration: none;
  transition: background-color 0.25s, color 0.25s;
}
.audience-link::after { content: "→"; transition: transform 0.25s var(--ease); }
.audience-link:hover { background: var(--ink); color: var(--cream); }
.audience-link:hover::after { transform: translateX(3px); }

/* =========================================================
   5. Galerij
   ========================================================= */
/* Raster: 2 kolommen, 4 vanaf 900 px. De rijhoogte volgt de kolombreedte (cqw), zodat de vakken de verhouding van
   de foto's houden; browsers zonder cqw krijgen een vaste rijhoogte. */
.section-gallery .wrap { container-type: inline-size; }
.gallery {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(150px, 30vw);
  grid-auto-rows: calc((100cqw - 0.75rem) / 2 / 1.15);
}
.g-item { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--ink-2); }
.g-item picture, .g-item img { width: 100%; height: 100%; }
.g-item img { object-fit: cover; transition: transform 0.9s var(--ease); }
.g-item:hover img { transform: scale(1.04); }
.g-big { grid-column: span 2; grid-row: span 2; }
.g-wide { grid-column: span 2; }

/* Social media onder de galerij: rustige iconen in crème, oranje bij hover */
.socials-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.socials-label {
  margin: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 1.15rem; color: var(--muted-light);
}
.social-icons { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.social-icons a {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  color: var(--cream);
  transition: color 0.2s ease;
}
.social-icons a:hover { color: var(--ember-hot); }
.social-icons a:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.social-icons svg { width: 24px; height: 24px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .social-icons a { transition: none; } }

@media (min-width: 900px) {
  .gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(200px, 21vw, 250px);
    grid-auto-rows: calc((100cqw - 3 * 0.75rem) / 4 / 1.08);
  }
}

/* =========================================================
   6. Ons verhaal
   ========================================================= */
.story { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.story-media { margin: 0; max-width: 520px; width: 100%; justify-self: center; }
.story-media img {
  width: 100%; aspect-ratio: 1 / 0.95; object-fit: cover;
  /* foto in de vorm van het vijfhoekige "huisje" uit het logo */
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}
.story-text h2 { max-width: 16ch; }
/* Over ons: overal dezelfde tekstgrootte voor de lopende tekst */
.story-text p:not(.eyebrow):not(.signature) { font-size: 1.0625rem; max-width: 36rem; }
.signature {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 1.5rem; color: var(--ember-deep);
  margin-top: 1.5rem;
}
@media (min-width: 900px) {
  .story { grid-template-columns: 0.9fr 1.1fr; }
}

/* =========================================================
   7. Offerte
   ========================================================= */
.quote::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 0% 100%, rgba(224, 97, 42, 0.18), transparent 70%);
}
.quote-grid { position: relative; display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.quote-intro p { color: var(--muted-light); max-width: 30rem; }
.quote-alt a { color: var(--ember-hot); font-weight: 700; text-decoration: none; }
.quote-alt a:hover { text-decoration: underline; }

.quote-form {
  background: var(--cream); color: var(--text);
  border-radius: calc(var(--radius) + 4px);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}
.field { margin: 0 0 1.1rem; border: 0; padding: 0; min-width: 0; }
.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field label, .field legend {
  display: block; font-weight: 700; font-size: 0.92rem;
  margin-bottom: 0.4rem; padding: 0;
}
.optional { font-weight: 400; color: var(--muted); }
.hint { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: var(--muted); }

input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  min-height: 48px;
  font: inherit; font-size: 1rem; color: var(--text);
  background: #fffaf2;
  border: 1.5px solid rgba(29, 25, 22, 0.22);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px; background-repeat: no-repeat;
  padding-right: 2.5rem;
}
textarea { resize: vertical; min-height: 110px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(224, 97, 42, 0.25);
}
/* Fout in een veld (script.js zet aria-invalid pas na het verlaten van het veld of bij verzenden) */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #b3261e; }
.field-error {
  display: block; margin-top: 0.35rem;
  font-size: 0.87rem; font-weight: 600; color: #b3261e;
}
.field-error a, .form-status a { color: inherit; }
.teller { text-align: right; font-variant-numeric: tabular-nums; }

.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; font-weight: 600 !important; margin: 0 !important; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.55rem 1rem;
  border: 1.5px solid rgba(29, 25, 22, 0.22); border-radius: 999px;
  background: #fffaf2;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.choice input:checked + span { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.choice input:focus-visible + span { outline: 3px solid var(--ember); outline-offset: 2px; }

.hp { display: none !important; }

/* Facturatie */
.invoice { margin-bottom: 1.1rem; }
.check {
  display: inline-flex !important; align-items: center; gap: 0.6rem;
  min-height: 44px; font-weight: 600 !important; cursor: pointer;
}
.check input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--ember-deep); flex: none; }
.invoice-fields { margin-top: 0.6rem; }
.invoice-fields[hidden] { display: none; }
.invoice-fields .field { margin-bottom: 0.4rem; }

.privacy-line { font-size: 0.85rem; color: var(--muted); margin: 0.5rem 0 1.25rem; }
.privacy-line a { color: var(--ember-deep); font-weight: 600; }

.form-status { margin: 1rem 0 0; font-weight: 600; min-height: 1.5em; }
.form-status.is-success { color: #2f6b2f; }
.form-status.is-error { color: #b3261e; }
.quote-form button[disabled] { opacity: 0.65; cursor: progress; transform: none; }

/* Bevestiging na het versturen: vervangt het formulier op dezelfde plek (ook de melding na de afsluitdatum
   van de wintermarkt) */
.form-panel {
  background: var(--cream); color: var(--text);
  border-radius: calc(var(--radius) + 4px);
  border-top: 4px solid var(--ember);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}
.form-panel:focus { outline: none; }
.form-panel h3 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
.form-panel p:last-child { margin-bottom: 0; }

@media (min-width: 900px) {
  .quote-grid { grid-template-columns: 0.8fr 1.2fr; }
  .quote-intro { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* =========================================================
   8. FAQ
   ========================================================= */
.faq-wrap { max-width: 860px; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.35rem 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: clamp(1.1rem, 2.4vw, 1.35rem); }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  border-right: 2px solid var(--ember-deep); border-bottom: 2px solid var(--ember-deep);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details p { margin: 0 0 1.4rem; color: var(--muted); max-width: 44rem; }

/* =========================================================
   9. Footer
   ========================================================= */
.site-footer {
  background: var(--ink);
  color: var(--muted-light);
  /* onderaan extra ruimte: de zwevende WhatsApp-knop mag copyright/privacy nooit bedekken */
  padding-block: clamp(3rem, 8vw, 5rem) calc(2rem + 6rem);
  border-top: 4px solid var(--ember);
  font-size: 0.95rem;
  /* Aanraakvlak voor links in de footer: minstens 44px hoog. --footer-lh = de gewone regelhoogte,
     zodat negatieve marges de extra ruimte kunnen opvangen en de tekst op dezelfde plek blijft staan. */
  --tap: 44px;
  --footer-lh: calc(0.95rem * 1.65);
  --tap-extra: calc((var(--tap) - var(--footer-lh)) / 2);
}
.footer-grid { display: grid; gap: 2.25rem; margin-bottom: 2.5rem; }
.footer-logo { width: 200px; }
.footer-title {
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream); margin-bottom: 0.9rem;
}
.footer-legal strong { color: var(--cream); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { color: var(--ember-hot); text-decoration: underline; }

/* Linklijsten in de footer: elke link is een vak van 44px hoog (tekst verticaal gecentreerd, zelfde grootte).
   Onder elkaar raken de vakken elkaar net, zonder overlap. De negatieve marge bovenaan houdt de eerste link
   op dezelfde plek als voorheen. */
.footer-contact ul:first-of-type { margin-top: calc(-1 * var(--tap-extra)); }
.footer-contact a {
  display: flex; align-items: center;
  width: fit-content; min-height: var(--tap);
}
.socials { display: flex; gap: 1.25rem; margin-bottom: calc(-1 * var(--tap-extra)) !important; }

.privacy {
  border-top: 1px solid var(--line-light);
  padding-top: 1rem;
}
.privacy summary {
  cursor: pointer; color: var(--cream); font-weight: 600;
  width: fit-content;
  /* 44px aanraakvlak; de negatieve marge compenseert de extra padding, zodat er niets verschuift */
  padding-block: var(--tap-extra);
  margin-block: calc(0.5rem - var(--tap-extra));
}
.privacy-body { max-width: 46rem; padding: 0.5rem 0 0.5rem; }
.copyright {
  margin: 1.5rem 0 0; font-size: 0.85rem;
  color: rgba(201, 187, 168, 0.75);
}
@media (min-width: 800px) {
  .footer-grid { grid-template-columns: 1.1fr 1fr 0.8fr; }
}

/* Credit in de footer: discreet, naast het copyright (zelfde kleur, link onderlijnd voor het contrast) */
.credit { white-space: nowrap; }
.credit a { text-decoration: underline; text-underline-offset: 2px; }

/* "Voor wie" → formulier: het ingevulde veld kort laten oplichten */
.field.is-highlight select {
  border-color: var(--ember);
  animation: veld-oplichten 2s var(--ease) both;
}
@keyframes veld-oplichten {
  0%, 45% { box-shadow: 0 0 0 5px rgba(224, 97, 42, 0.45); }
  100% { box-shadow: 0 0 0 3px rgba(224, 97, 42, 0.25); }
}
@media (prefers-reduced-motion: reduce) {
  .field.is-highlight select { animation: none; box-shadow: 0 0 0 4px rgba(224, 97, 42, 0.4); }
}

/* =========================================================
   Zwevende WhatsApp-knop (rechtsonder): eenvoudige pil
   Achtergrond: --ember-deep (de oranje accentkleur in de donkere variant), omdat witte tekst
   op het lichtere --ember niet genoeg contrast heeft (WCAG AA).
   ========================================================= */
.wa-float {
  position: fixed; z-index: 40;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, calc(env(safe-area-inset-bottom) + 0.75rem));
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 52px;
  padding: 0 1.3rem 0 1.05rem;
  border-radius: 999px;
  background: var(--ember-deep);
  color: #fff;
  font: 700 1rem/1 var(--font-body);
  text-decoration: none;
  box-shadow: 0 10px 24px -8px rgba(29, 25, 22, 0.55), 0 2px 6px rgba(29, 25, 22, 0.25);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.wa-float:hover { background: #8c360c; transform: translateY(-2px); }
.wa-float:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; }
.wa-float-icon { width: 24px; height: 24px; fill: currentColor; flex: none; }

/* Mobiel: enkel het icoon in een rond vlak, niets dat inklapt */
@media (max-width: 640px) {
  .wa-float { width: 56px; height: 56px; min-height: 0; padding: 0; }
  .wa-float-text { display: none; }
  .wa-float-icon { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: none; }
}

/* =========================================================
   10. Meldingspagina's: 404 en de bedankpagina's (formulieren zonder JavaScript)
   ========================================================= */
.melding {
  display: grid; align-items: center;
  min-height: min(75svh, 46rem);
  padding-block: clamp(3.5rem, 10vw, 7rem);
  background:
    radial-gradient(110% 80% at 0% 0%, rgba(246, 239, 228, 0.9) 0%, rgba(246, 239, 228, 0) 65%),
    var(--paper);
}
.melding h1 {
  font-size: clamp(2.3rem, 7vw, 4.2rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -0.025em;
  max-width: 16ch; text-wrap: balance;
  margin-bottom: 1rem;
  font-variation-settings: "opsz" 144;
}
.melding-lead {
  max-width: 34rem; margin-bottom: 0.75rem;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--ink-2);
  text-wrap: pretty;
}
.melding .hero-actions { margin-top: 1.75rem; }

/* =========================================================
   WINTERMARKT (tijdelijk): menulink + sectie op de homepage + pagina wintermarkt.html
   Alles van hier tot "EINDE WINTERMARKT" mag weg na de wintermarkt (zie NOTES.md §8).
   ========================================================= */

/* Menulink "Wintermarkt" (desktop en mobiel menu) met een kleine oranje stip */
.wm-nav a { display: flex; align-items: center; gap: 0.55rem; }
.wm-nav a::before {
  content: ""; flex: none;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 3px rgba(224, 97, 42, 0.28);
}
.wm-nav a[aria-current="page"] { color: var(--ember-hot); }
/* Met die extra link is het desktopmenu tussen 900 en 1040 px te breed: daar kleinere tussenruimte */
@media (min-width: 900px) {
  .site-nav a { white-space: nowrap; }
}
@media (min-width: 900px) and (max-width: 1039px) {
  .site-nav ul { gap: 0.9rem; }
}

/* Sectie op de homepage, direct onder de hero: donkere kaart met oranje accent. Ze neemt de plek in die anders
   het blok "Glutenvrij" heeft (overlapt de onderkant van de hero); zolang ze er staat, schuift "Glutenvrij"
   er gewoon onder. Verdwijnt de sectie (na 28/11 of bij het opruimen), dan overlapt "Glutenvrij" weer. */
.wm-home {
  position: relative; z-index: 2;
  margin-top: -3.5rem;
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.wm-home + .trust { margin-top: 0; }
.wm-home-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 1.5rem; align-items: center;
  background: var(--ink); color: var(--cream);
  border-radius: calc(var(--radius) + 4px);
  border-top: 4px solid var(--ember);
  box-shadow: 0 30px 60px -30px rgba(29, 25, 22, 0.6);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
/* zachte oranje gloed linksonder (zoals bij het offerteformulier) en het vijfhoek-contour uit het logo rechts */
.wm-home-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 100% at 0% 100%, rgba(224, 97, 42, 0.24), transparent 70%);
}
.wm-home-card::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: clamp(240px, 30vw, 360px); aspect-ratio: 1 / 0.95;
  right: -70px; bottom: -60px;
  background: var(--ember);
  clip-path: polygon(evenodd, 50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%, 50% 0, 50% 1.6%, 1.8% 38.4%, 19.2% 98.4%, 80.8% 98.4%, 98.2% 38.4%, 50% 1.6%);
  opacity: 0.4;
}
/* Foto van de margherita: links op desktop, bovenaan op mobiel */
.wm-home-media {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 18px 36px -20px rgba(0, 0, 0, 0.7);
}
.wm-home-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.wm-home .eyebrow { margin-bottom: 0.75rem; }
.wm-home h2 {
  color: var(--cream);
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  max-width: 18ch; text-wrap: balance;
  margin: 0 0 0.8rem;
}
.wm-home-meta { margin: 0 0 0.9rem; max-width: 38rem; font-size: 1.05rem; color: var(--muted-light); text-wrap: pretty; }
.wm-home-deadline { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--cream); text-wrap: balance; }
.wm-home-btn { width: 100%; min-height: 56px; margin-top: 1.5rem; padding: 1rem 2rem; font-size: 1.1rem; }
@media (min-width: 800px) {
  .wm-home-card { grid-template-columns: clamp(240px, 30vw, 340px) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 3rem); }
  .wm-home-btn { width: auto; }
}
@media (min-width: 900px) {
  .wm-home { margin-top: -5rem; }
}

/* Pagina: intro met de kernfeiten */
.wm-intro {
  background:
    radial-gradient(110% 80% at 0% 0%, rgba(246, 239, 228, 0.9) 0%, rgba(246, 239, 228, 0) 65%),
    var(--paper);
  padding-block: clamp(2.5rem, 7vw, 5rem);
}
/* Desktop: tekst links, foto rechts, kernfeiten daaronder over de volle breedte. Mobiel: alles onder elkaar. */
.wm-intro-grid { display: grid; gap: clamp(1.5rem, 4vw, 2.25rem); }
.wm-intro h1 {
  font-size: clamp(2.3rem, 7vw, 4.2rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -0.025em;
  max-width: 17ch; text-wrap: balance;
  margin-bottom: 1rem;
  font-variation-settings: "opsz" 144;
}
.wm-lead {
  margin: 0; max-width: 36rem;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--ink-2);
  text-wrap: pretty;
}
.wm-intro-media {
  margin: 0;
  border-radius: calc(var(--radius) + 8px); overflow: hidden;
  box-shadow:
    0 34px 60px -32px rgba(29, 25, 22, 0.55),
    0 10px 22px -14px rgba(29, 25, 22, 0.3);
}
.wm-intro-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 900px) {
  .wm-intro-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center; column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .wm-intro-facts { grid-column: 1 / -1; }
}
.wm-facts { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.75rem; }
.wm-facts li {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.wm-fact-label {
  display: block; margin-bottom: 0.2rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ember-deep);
}
.wm-fact-value {
  display: block;
  font-family: var(--font-display); font-weight: 650; font-size: 1.3rem; line-height: 1.25;
}
.wm-note {
  max-width: 40rem; margin: 0 0 1.75rem;
  padding-left: 0.9rem; border-left: 3px solid var(--ember);
  font-weight: 600;
}
@media (min-width: 800px) {
  .wm-facts { grid-template-columns: 1fr 1fr 1.6fr; }
}

/* Bestelformulier: één aantal (enkel margherita), met − en + (knoppen komen uit script.js) */
.wm-pizza {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  padding: 0.7rem 0;
  border-block: 1px solid var(--line);
}
.field .wm-pizza label {
  flex: 1 1 7.5rem; min-width: 0; /* op smalle schermen loopt het label over twee regels, de stapper blijft ernaast */
  margin: 0; line-height: 1.35;
}
.wm-stepper { display: inline-flex; align-items: center; gap: 0.35rem; flex: none; }
.wm-stepper input[type="number"] {
  width: 3.75rem; padding-inline: 0.25rem;
  text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}
.wm-stepper input::-webkit-outer-spin-button,
.wm-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wm-stap {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border: 1.5px solid rgba(29, 25, 22, 0.22); border-radius: 50%;
  background: #fffaf2; color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
/* − en + getekend met CSS (zelfde dikte en lengte, los van het lettertype); de naam komt uit aria-label */
.wm-stap::before, .wm-stap::after {
  content: ""; grid-area: 1 / 1;
  width: 14px; height: 2px; border-radius: 1px;
  background: currentColor;
}
.wm-stap-min::after { display: none; }
.wm-stap-plus::after { width: 2px; height: 14px; }
.wm-stap:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.wm-total {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem;
  margin: 0 0 0.5rem; padding: 0.9rem 1.1rem;
  background: var(--paper); border-radius: 10px;
  font-weight: 700;
}
.wm-total[hidden] { display: none; }
.wm-total-bedrag { font-family: var(--font-display); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.wm-total-note { margin: 0 0 1.1rem; font-size: 0.88rem; color: var(--muted); }

/* Ingrediënten en allergenen, direct boven het formulier: donkere kaart met oranje bovenrand.
   De allergenen springen eruit (vet en crème), de rest van de tekst is iets zachter. */
.wm-allergenen {
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
  padding: clamp(1.25rem, 4vw, 2rem) clamp(1.25rem, 4vw, 2.25rem);
  background: var(--ink-2); color: var(--muted-light);
  border: 1px solid var(--line-light);
  border-top: 4px solid var(--ember);
  border-radius: calc(var(--radius) + 4px);
}
.wm-allergenen h3 { color: var(--cream); font-size: clamp(1.4rem, 3.2vw, 1.75rem); margin-bottom: 0.75rem; }
.wm-allergenen p { margin: 0 0 0.6rem; text-wrap: pretty; }
.wm-allergenen strong { color: var(--cream); font-weight: 700; }
.wm-allergenen-pizza {
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.35;
  color: var(--cream);
}
.wm-allergenen .wm-allergenen-sporen {
  margin: 0.9rem 0 0; padding-top: 0.9rem;
  border-top: 1px solid var(--line-light);
}

@media (prefers-reduced-motion: reduce) {
  .wm-stap { transition: none; }
}
/* ============ EINDE WINTERMARKT ============ */