/* =========================================================
   One-pager van een klant.

   Vier ontwerpen delen dit bestand. De basis is voor alle vier gelijk;
   per sjabloon verschuiven typografie, ritme en achtergronden. De twee
   kleuren komen uit de database als --primair en --accent.
   ========================================================= */

:root {
  --wit: #FFFFFF;
  --inkt: #1A1D21;
  --inkt-zacht: #5B6169;
  --lijn: rgba(0, 0, 0, .1);
  --vlak: #F6F6F4;
  --radius: 16px;
  --radius-groot: 28px;
  --schaduw: 0 18px 50px rgba(0, 0, 0, .12);
  --op-breedte: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-tekst);
  color: var(--inkt);
  background: var(--wit);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 { font-family: var(--font-kop); line-height: 1.12; margin: 0; letter-spacing: -0.02em; }

.op-container { width: min(var(--op-breedte), 100% - 40px); margin-inline: auto; }
.op-smal { width: min(760px, 100% - 40px); }

.op-sectie { padding: clamp(60px, 9vw, 120px) 0; }
.op-sectie h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin-bottom: 28px; }

/* ---------- Hero ---------- */

.op-hero {
  position: relative;
  padding: clamp(80px, 14vw, 170px) 0 clamp(60px, 9vw, 110px);
  /* Effen kleur of kleurverloop, bepaald in de editor. */
  background: var(--hero-achtergrond, var(--primair));
  color: var(--wit);
  overflow: hidden;
}
.op-hero-beeld {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .42;
}
.op-hero.heeft-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.6) 100%);
}
.op-hero-inhoud { position: relative; z-index: 2; }
.op-hero h1 { font-size: clamp(2.2rem, 6.5vw, 4.2rem); max-width: 16ch; }
.op-tagline { font-size: clamp(1rem, 2.1vw, 1.3rem); max-width: 52ch; margin: 18px 0 0; opacity: .92; }

.op-logo {
  width: clamp(64px, 9vw, 96px); height: auto; margin-bottom: 26px;
  border-radius: 18px; background: var(--wit); padding: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  object-fit: contain;
}

.op-hero-acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.op-knop {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 28px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.op-knop-accent { background: var(--accent); color: var(--wit); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
.op-knop-licht { background: rgba(255,255,255,.14); color: var(--wit); border: 1.5px solid rgba(255,255,255,.4); }
.op-knop:hover { transform: translateY(-2px); }
.op-knop:focus-visible { outline: 3px solid var(--wit); outline-offset: 3px; }

/* ---------- Tekstsecties ---------- */

.op-tekst { font-size: 1.06rem; color: var(--inkt-zacht); max-width: 62ch; }
.op-over { background: var(--wit); }

/* Een tweeluik: links wie je bent, rechts wat je doet. De eerste alinea krijgt
   meer gewicht dan de rest, dat is de zin die een bezoeker echt leest. */
.op-over-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}
.op-over-kop { position: sticky; top: 92px; }
.op-over-kop h2 { margin: 10px 0 0; }
.op-over-tagline {
  margin: 14px 0 0; padding-top: 14px;
  border-top: 1px solid var(--lijn);
  font-size: .95rem; color: var(--inkt-zacht);
}

.op-kicker {
  display: inline-block;
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--accent);
}

.op-lead {
  margin: 0;
  font-size: clamp(1.12rem, 1.9vw, 1.35rem);
  line-height: 1.55;
  color: var(--inkt);
}
.op-over-tekst .op-tekst { margin-top: 20px; color: var(--inkt-zacht); }

/* ---------- Diensten of producten ---------- */

.op-aanbod { background: var(--vlak); }

/* Drie indelingen; welke het wordt kiest de klant in het portaal, of het
   ontwerp kiest voor hem. */
.op-aanbod-raster { display: grid; gap: 20px; }
.op-aanbod-raster.is-kaarten {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.op-aanbod-raster.is-twee-kolommen {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 920px; margin-inline: auto;
}
.op-aanbod-raster.is-twee-kolommen > .op-kaart:only-child {
  grid-column: 1 / -1; max-width: 520px; margin-inline: auto; width: 100%;
}
.op-aanbod-raster.is-lijst { grid-template-columns: minmax(0, 1fr); gap: 0; }

.op-kaart {
  display: flex; flex-direction: column;
  padding: 26px 26px 24px;
  background: var(--wit);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  transition: transform .18s ease, box-shadow .18s ease;
}
.op-kaart:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, .12); }
.op-kaart h3 { margin: 0; font-size: 1.08rem; line-height: 1.35; }
.op-kaart p { margin: 12px 0 0; font-size: .93rem; color: var(--inkt-zacht); }

/* De prijs hangt onderaan, zodat kaartjes met verschillende teksten toch
   dezelfde onderlijn houden. */
.op-kaart-prijs {
  margin-top: auto; padding-top: 18px;
  font-weight: 700; font-size: .95rem; color: var(--accent);
}
.op-kaart p + .op-kaart-prijs { margin-top: auto; }

/* ---------- Carrousel ---------- */

.op-carrousel { position: relative; }

.op-carrousel-spoor {
  display: flex; gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.op-carrousel-spoor::-webkit-scrollbar { display: none; }

.op-dia {
  flex: 0 0 min(560px, 82%);
  margin: 0;
  scroll-snap-align: center;
  border-radius: var(--radius-groot);
  overflow: hidden;
  background: var(--vlak);
  box-shadow: var(--schaduw);
}
.op-dia img { width: 100%; height: clamp(240px, 42vw, 440px); object-fit: cover; }
.op-dia figcaption {
  padding: 16px 22px; font-size: .9rem; color: var(--inkt-zacht);
  background: var(--wit);
}

.op-carrousel-knop {
  position: absolute; top: clamp(110px, 20vw, 210px);
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--wit); color: var(--inkt);
  border: 1px solid var(--lijn); box-shadow: 0 8px 22px rgba(0,0,0,.16);
  cursor: pointer; transition: transform .16s ease, opacity .16s ease;
}
.op-carrousel-knop.vorige { left: -6px; }
.op-carrousel-knop.volgende { right: -6px; }
.op-carrousel-knop:hover { transform: scale(1.06); }
.op-carrousel-knop:disabled { opacity: .3; cursor: default; transform: none; }
.op-carrousel-knop:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.op-carrousel-stippen { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.op-stip {
  /* Vaste afmeting met een schaaltruc: zo animeert alleen transform en blijft
     het raakvlak groot genoeg voor een vinger. */
  width: 28px; height: 10px; padding: 0; border: none; border-radius: 999px;
  background: var(--lijn); cursor: pointer;
  transform: scaleX(.34);
  transition: transform .2s ease, background .2s ease;
}
.op-stip.is-actief { transform: scaleX(1); background: var(--accent); }
.op-stip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Video ---------- */

.op-videos { background: var(--vlak); }
.op-beeldhouder { position: relative; }

/* Foto's kennen dezelfde drie indelingen als video's. */
.op-fotogrid { display: grid; gap: 22px; }
.op-fotogrid.is-twee-kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.op-fotogrid.is-onder-elkaar  { grid-template-columns: minmax(0, 1fr); }
.op-fotogrid.is-twee-kolommen.is-middel { max-width: 880px; margin-inline: auto; }
.op-fotogrid.is-onder-elkaar.is-middel  { max-width: 660px; margin-inline: auto; }
.op-fotogrid.is-twee-kolommen > .op-dia:only-child {
  grid-column: 1 / -1; max-width: 640px; margin-inline: auto; width: 100%;
}
/* In een raster mag een foto lager zijn dan in de carrousel: er staan er meer. */
.op-fotogrid.is-twee-kolommen .op-dia img { height: clamp(200px, 24vw, 300px); }
.op-fotogrid.is-onder-elkaar .op-dia img { height: clamp(260px, 40vw, 460px); }

.op-carrousel-spoor.is-middel .op-dia { flex-basis: min(420px, 74%); }

/* De indeling en het formaat komen uit het portaal; de klassen hieronder zijn
   de drie keuzes die de klant daar kan maken. */
.op-videogrid { display: grid; gap: 26px; }
.op-videogrid.is-twee-kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.op-videogrid.is-onder-elkaar  { grid-template-columns: minmax(0, 1fr); }

/* Eén video in een tweekolomsraster hoort niet halfslachtig links te staan. */
.op-videogrid.is-twee-kolommen > .op-video:only-child {
  grid-column: 1 / -1; max-width: 640px; margin-inline: auto; width: 100%;
}

/* Middel: hetzelfde raster, maar smaller en gecentreerd. */
.op-videogrid.is-twee-kolommen.is-middel { max-width: 880px; margin-inline: auto; }
.op-videogrid.is-onder-elkaar.is-middel  { max-width: 660px; margin-inline: auto; }

/* Carrousel: het spoor uit de fotocarrousel, met dia's op videomaat. */
.op-carrousel-spoor.is-carrousel .op-video {
  flex: 0 0 min(720px, 86%);
  scroll-snap-align: center;
}
.op-carrousel-spoor.is-carrousel.is-middel .op-video { flex: 0 0 min(520px, 76%); }
.op-videohouder .op-carrousel-knop { top: calc(50% - 40px); }

.op-video { margin: 0; }
.op-video-kader {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden;
  background: var(--inkt); box-shadow: var(--schaduw);
}
.op-video-kader iframe { width: 100%; height: 100%; border: 0; display: block; }
.op-video-poster { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.op-video-start {
  position: absolute; inset: 0; display: grid; place-items: center;
  width: 100%; height: 100%; border: none; background: transparent; cursor: pointer;
}
.op-video-driehoek {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .2s ease;
}
.op-video-driehoek::after {
  content: ""; display: block;
  border-left: 20px solid var(--wit);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 5px;
}
.op-video-start:hover .op-video-driehoek { transform: scale(1.08); }
.op-video-start:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.op-video figcaption { margin-top: 12px; font-size: .92rem; color: var(--inkt-zacht); }

/* ---------- Contact ---------- */

.op-contactlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.op-contactlijst li { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: baseline;
  padding-bottom: 18px; border-bottom: 1px solid var(--lijn); }
.op-contactlijst li:last-child { border-bottom: none; }
.op-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-zacht); }
.op-contactlijst a { color: var(--accent); font-weight: 600; text-decoration: none; }
.op-contactlijst a:hover { text-decoration: underline; }

.op-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.op-link {
  padding: 11px 20px; border-radius: 999px; border: 1.5px solid var(--lijn);
  font-size: .88rem; font-weight: 600; text-decoration: none;
  transition: border-color .16s ease, color .16s ease;
}
.op-link:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Voet en WhatsApp ---------- */

.op-voet { padding: 34px 0; background: var(--primair); color: rgba(255,255,255,.75); font-size: .84rem; }
.op-voet .op-container { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.op-voet a { color: rgba(255,255,255,.75); }

.op-whatsapp {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: var(--wit);
  box-shadow: 0 12px 30px rgba(37, 211, 102, .4);
  transition: transform .2s ease;
}
.op-whatsapp:hover { transform: scale(1.07); }
.op-whatsapp:focus-visible { outline: 3px solid var(--inkt); outline-offset: 3px; }

/* ---------- Verschijnen tijdens scrollen ---------- */

.met-animatie .is-verborgen { opacity: 0; transform: translateY(22px); }
.met-animatie .is-zichtbaar {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .met-animatie .is-verborgen { opacity: 1; transform: none; }
  .op-knop:hover, .op-whatsapp:hover, .op-carrousel-knop:hover, .op-video-start:hover .op-video-driehoek { transform: none; }
  .op-stip { transition: background .2s ease; }   /* wel van kleur wisselen, niet bewegen */
}

/* =========================================================
   De vier ontwerpen
   ========================================================= */

/* Atelier, rustig, serif, veel lucht, beeld dat ademt. */
.sjabloon-atelier { --vlak: #F7F4EF; }
.sjabloon-atelier .op-hero { background: var(--vlak); color: var(--inkt); }
.sjabloon-atelier .op-hero h1 { font-weight: 600; letter-spacing: -0.03em; }
.sjabloon-atelier .op-hero-beeld { opacity: .9; }
.sjabloon-atelier .op-hero.heeft-banner { color: var(--wit); }
.sjabloon-atelier .op-knop-licht { background: transparent; color: inherit; border-color: currentColor; }
.sjabloon-atelier .op-dia { border-radius: 4px; box-shadow: none; border: 1px solid var(--lijn); }
.sjabloon-atelier .op-sectie h2 { font-weight: 600; }
.sjabloon-atelier .op-voet { background: var(--inkt); }

/* Studio, donker, strak, sprekende accenten. */
.sjabloon-studio .op-hero h1 { font-weight: 800; }
.sjabloon-studio .op-sectie h2 { position: relative; padding-bottom: 16px; }
.sjabloon-studio .op-sectie h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 2px; background: var(--accent);
}
.sjabloon-studio .op-videos { background: var(--primair); color: var(--wit); }
.sjabloon-studio .op-videos .op-video figcaption { color: rgba(255,255,255,.72); }

/* Werkplaats, warm, stevige blokken, direct. */
.sjabloon-werkplaats { --radius-groot: 10px; --radius: 10px; --vlak: #FBF6EC; }
.sjabloon-werkplaats .op-hero { border-bottom: 6px solid var(--accent); }
.sjabloon-werkplaats .op-knop { border-radius: 8px; }
.sjabloon-werkplaats .op-link { border-radius: 8px; }
.sjabloon-werkplaats .op-stip.is-actief { border-radius: 4px; }
.sjabloon-werkplaats .op-sectie h2 { text-transform: uppercase; letter-spacing: .01em; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.sjabloon-werkplaats .op-over { background: var(--vlak); }
.sjabloon-werkplaats .op-dia { box-shadow: 0 10px 0 rgba(0,0,0,.06); }

/* Portfolio, het werk meteen groot in beeld. */
.sjabloon-portfolio .op-hero { padding-bottom: clamp(40px, 6vw, 70px); }
.sjabloon-portfolio .op-werk { padding-top: clamp(40px, 6vw, 70px); }
.sjabloon-portfolio .op-dia { flex-basis: min(760px, 92%); }
.sjabloon-portfolio .op-dia img { height: clamp(280px, 52vw, 560px); }
.sjabloon-portfolio .op-sectie h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); text-transform: uppercase;
  letter-spacing: .12em; color: var(--inkt-zacht); }

/* ---------- Kleinere schermen ---------- */

@media (max-width: 760px) {
  .op-videogrid.is-twee-kolommen,
  .op-fotogrid.is-twee-kolommen { grid-template-columns: minmax(0, 1fr); }
  .op-carrousel-knop { display: none; }   /* vegen werkt hier prettiger */
  .op-dia { flex-basis: 88%; }
  /* Op een telefoon is er geen ruimte om klein te doen: 'middel' zou een
     video hier onleesbaar maken, dus beide formaten vullen de breedte. */
  .op-carrousel-spoor.is-carrousel .op-video,
  .op-carrousel-spoor.is-carrousel.is-middel .op-video { flex: 0 0 88%; }
  .op-carrousel-spoor.is-middel .op-dia { flex-basis: 88%; }
  .op-over-raster { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .op-over-kop { position: static; }
  .op-contactlijst li { grid-template-columns: 1fr; gap: 4px; }
  .op-whatsapp { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .op-hero-acties .op-knop { flex: 1 1 100%; }
}

/* =========================================================
   Navigatiebalk bovenaan de one-pager

   Over de hero staat de balk doorzichtig, zodat het beeld doorloopt. Zodra je
   verder scrollt wordt hij ondoorzichtig en compacter. Alleen kleur, schaduw
   en opacity bewegen mee, geen eigenschappen die de layout opnieuw laten
   berekenen.
   ========================================================= */

.op-overslaan {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 20px; background: var(--wit); color: var(--inkt);
  font-weight: 700; text-decoration: none; border-radius: 0 0 var(--radius) 0;
}
.op-overslaan:focus { left: 0; }

.op-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.op-nav.is-vast {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--lijn);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .07);
}

.op-nav-inhoud { display: flex; align-items: center; gap: 22px; min-height: 68px; }

.op-merk {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-kop); font-weight: 700; font-size: 1rem;
  color: var(--wit); text-decoration: none; letter-spacing: -0.01em;
  margin-right: auto; min-width: 0;
}
.op-merk img { width: 34px; height: 34px; border-radius: 9px; object-fit: contain;
  background: var(--wit); padding: 4px; flex: none; }
.op-merk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-nav.is-vast .op-merk { color: var(--inkt); }

.op-nav-lijst { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.op-nav-lijst a {
  display: block; padding: 9px 15px; border-radius: 999px;
  font-size: .88rem; font-weight: 600; color: rgba(255, 255, 255, .88);
  text-decoration: none; transition: color .18s ease, background .18s ease;
}
.op-nav-lijst a:hover { color: var(--wit); background: rgba(255, 255, 255, .14); }
.op-nav-lijst a.is-hier { color: var(--wit); background: rgba(255, 255, 255, .2); }
.op-nav-lijst a:focus-visible { outline: 2px solid var(--wit); outline-offset: 2px; }

.op-nav.is-vast .op-nav-lijst a { color: var(--inkt-zacht); }
.op-nav.is-vast .op-nav-lijst a:hover { color: var(--inkt); background: rgba(0, 0, 0, .05); }
.op-nav.is-vast .op-nav-lijst a.is-hier { color: var(--accent); background: transparent; }
.op-nav.is-vast .op-nav-lijst a:focus-visible { outline-color: var(--accent); }

/* De oproep rechts blijft in beide standen de accentkleur dragen. */
.op-nav-cta a,
.op-nav.is-vast .op-nav-cta a {
  background: var(--accent); color: var(--wit); padding: 10px 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.op-nav-cta a:hover,
.op-nav.is-vast .op-nav-cta a:hover { background: var(--accent); filter: brightness(1.08); }
.op-nav.is-vast .op-nav-cta a.is-hier { color: var(--wit); }

/* Hamburger */
.op-nav-knop {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; border: none; background: transparent; cursor: pointer;
}
.op-nav-knop span {
  display: block; height: 2px; border-radius: 2px; background: var(--wit);
  transition: transform .22s ease, opacity .18s ease, background .25s ease;
}
.op-nav.is-vast .op-nav-knop span { background: var(--inkt); }
.op-nav.is-open .op-nav-knop span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.op-nav.is-open .op-nav-knop span:nth-child(2) { opacity: 0; }
.op-nav.is-open .op-nav-knop span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.op-nav-knop:focus-visible { outline: 2px solid var(--wit); outline-offset: 2px; border-radius: 8px; }
.op-nav.is-vast .op-nav-knop:focus-visible { outline-color: var(--accent); }

/* De hero begint onder de balk. */
.op-hero { padding-top: clamp(120px, 15vw, 200px); }

@media (max-width: 860px) {
  .op-nav-knop { display: flex; }

  .op-nav-lijst {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px 16px 18px;
    background: var(--wit);
    border-bottom: 1px solid var(--lijn);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
    /* Houd het paneel binnen het scherm. Een telefoon die dwars gehouden wordt
       heeft nog geen 400px hoogte; zonder dit valt de onderste knop eraf en is
       hij niet te bereiken, want het paneel zweeft buiten de paginastroom. */
    max-height: calc(100vh - 100% - var(--demobalk-hoogte, 0px));
    max-height: calc(100dvh - 100% - var(--demobalk-hoogte, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Dicht: weggeschoven en niet aanklikbaar, maar wel in de DOM. */
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .op-nav.is-open .op-nav-lijst { opacity: 1; visibility: visible; transform: none; }

  .op-nav-lijst a,
  .op-nav.is-vast .op-nav-lijst a {
    padding: 14px 16px; border-radius: 10px; font-size: .96rem; color: var(--inkt);
  }
  .op-nav-lijst a.is-hier,
  .op-nav.is-vast .op-nav-lijst a.is-hier { color: var(--accent); background: rgba(0, 0, 0, .04); }

  .op-nav-cta { margin-top: 8px; }
  .op-nav-cta a,
  .op-nav.is-vast .op-nav-cta a { text-align: center; color: var(--wit); }

  .op-nav.is-open { background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px); }
  .op-nav.is-open .op-merk { color: var(--inkt); }
  .op-nav.is-open .op-nav-knop span { background: var(--inkt); }
}

/* Zolang het menu open is scrollt de pagina er niet achterlangs weg. */
body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .op-nav, .op-nav-lijst, .op-nav-knop span { transition: none; }
}

/* Het Atelier-ontwerp heeft een lichte hero: daar hoort donkere navigatietekst. */
.sjabloon-atelier .op-nav:not(.is-vast) .op-merk,
.sjabloon-atelier .op-nav:not(.is-vast) .op-nav-lijst a { color: var(--inkt); }
.sjabloon-atelier .op-nav:not(.is-vast) .op-nav-lijst a:hover { background: rgba(0, 0, 0, .06); }
.sjabloon-atelier .op-nav:not(.is-vast) .op-nav-knop span { background: var(--inkt); }
.sjabloon-atelier .op-nav:not(.is-vast) .op-nav-cta a { color: var(--wit); }
/* Staat er een banner achter, dan is de hero juist donker en mag de tekst wit
   blijven. De klasse staat op de body: de balk staat vóór de hero in de DOM,
   dus een sibling-selector zou hier niet werken. */
.sjabloon-atelier.hero-donker .op-nav:not(.is-vast) .op-merk,
.sjabloon-atelier.hero-donker .op-nav:not(.is-vast) .op-nav-lijst a { color: rgba(255, 255, 255, .9); }
.sjabloon-atelier.hero-donker .op-nav:not(.is-vast) .op-nav-lijst a:hover { background: rgba(255, 255, 255, .14); }
.sjabloon-atelier.hero-donker .op-nav:not(.is-vast) .op-nav-knop span { background: var(--wit); }

/* =========================================================
   Deelknoppen onderaan de pagina
   ========================================================= */

.op-delen { background: var(--vlak); }
.op-deel-uitleg { margin: 0 0 26px; color: var(--inkt-zacht); font-size: 1rem; }

.op-deel-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }

.op-deel {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 999px;
  border: 1.5px solid var(--lijn); background: var(--wit); color: var(--inkt);
  font-family: inherit; font-size: .88rem; font-weight: 600; text-decoration: none;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}
.op-deel:hover { transform: translateY(-2px); }
.op-deel:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.op-deel-teken { display: grid; place-items: center; }

/* Elk kanaal in zijn eigen kleur, maar pas bij hover, anders wordt de rij bont. */
.op-deel-whatsapp:hover { border-color: #25D366; color: #128C4A; }
.op-deel-facebook:hover { border-color: #1877F2; color: #1877F2; }
.op-deel-linkedin:hover { border-color: #0A66C2; color: #0A66C2; }
.op-deel-x:hover        { border-color: var(--inkt); color: var(--inkt); }
.op-deel-email:hover,
.op-deel-kopieer:hover  { border-color: var(--accent); color: var(--accent); }

.op-deel-kopieer.is-gekopieerd { border-color: #16A34A; color: #15803D; }
.op-deel-kopieer.is-mislukt { border-color: #B91C1C; color: #B91C1C; }

@media (prefers-reduced-motion: reduce) {
  .op-deel:hover { transform: none; }
}

@media (max-width: 560px) {
  .op-deel { flex: 1 1 calc(50% - 5px); justify-content: center; padding: 12px 14px; }
}

/* =========================================================
   De nieuwe secties per sjabloon
   ========================================================= */

/* Atelier, rustig, ruim, serif. De kaart is een blad papier: geen schaduw
   maar een dunne lijn, en de kop in de serif van het sjabloon. */
.sjabloon-atelier .op-kaart {
  box-shadow: none;
  border: 1px solid var(--lijn);
  background: var(--wit);
}
.sjabloon-atelier .op-kaart:hover { transform: none; border-color: var(--accent); box-shadow: none; }
.sjabloon-atelier .op-kaart h3 { font-family: var(--font-kop); font-weight: 600; }
.sjabloon-atelier .op-aanbod { background: var(--wit); }
.sjabloon-atelier .op-over-raster { gap: clamp(36px, 7vw, 96px); }

/* Studio, donker en strak. Het aanbod staat op de hoofdkleur, de kaarten
   erop zijn net iets lichter in plaats van wit. */
.sjabloon-studio .op-aanbod { background: var(--primair); color: var(--wit); }
.sjabloon-studio .op-aanbod h2 { color: var(--wit); }
.sjabloon-studio .op-kaart {
  background: rgba(255, 255, 255, .06);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .12);
}
.sjabloon-studio .op-kaart:hover { background: rgba(255, 255, 255, .1); border-color: var(--accent); }
.sjabloon-studio .op-kaart h3 { color: var(--wit); }
.sjabloon-studio .op-kaart p { color: rgba(255, 255, 255, .72); }

/* Werkplaats, stevige blokken. Rechte hoeken en een accentbalk bovenop,
   hetzelfde gebaar als de rand onder de kop. */
.sjabloon-werkplaats .op-kaart {
  border-radius: 10px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, .06);
  /* De accentbalk als achtergrond in plaats van een rand: zo volgt hij de
     afronding van de hoeken mee. */
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 4px;
  background-repeat: no-repeat;
  background-position: top left;
  padding-top: 28px;
}
.sjabloon-werkplaats .op-kaart:hover { transform: translateY(-2px); box-shadow: 0 12px 0 rgba(0, 0, 0, .08); }
.sjabloon-werkplaats .op-kaart h3 { text-transform: uppercase; letter-spacing: .01em; font-size: 1rem; }
.sjabloon-werkplaats .op-kicker { color: var(--inkt); }

/* Portfolio, het werk voorop, dus het aanbod blijft rustig. */
.sjabloon-portfolio .op-aanbod { background: var(--wit); }

/* De lijstindeling: naam, uitleg en prijs op een regel, gescheiden door een
   dunne lijn. Werkt in elk ontwerp, niet alleen in Portfolio. */
.op-aanbod-raster.is-lijst .op-kaart {
  flex-direction: row; align-items: baseline; flex-wrap: wrap;
  gap: 4px 28px;
  padding: 22px 0;
  border-radius: 0; box-shadow: none; background: none;
  border-bottom: 1px solid var(--lijn);
}
.op-aanbod-raster.is-lijst .op-kaart:hover { transform: none; box-shadow: none; }
.op-aanbod-raster.is-lijst .op-kaart h3 { flex: 0 0 clamp(160px, 22vw, 260px); }
.op-aanbod-raster.is-lijst .op-kaart p { flex: 1 1 260px; margin: 0; }
.op-aanbod-raster.is-lijst .op-kaart-prijs { margin: 0; padding: 0; white-space: nowrap; }

/* Studio is donker; een lijst zonder kaartvlak heeft daar een lichte lijn nodig. */
.sjabloon-studio .op-aanbod-raster.is-lijst .op-kaart { border-bottom-color: rgba(255, 255, 255, .16); }
/* Werkplaats zet een accentbalk op kaarten; in een lijst hoort die niet. */
.sjabloon-werkplaats .op-aanbod-raster.is-lijst .op-kaart { background-image: none; padding-top: 22px; }

@media (max-width: 760px) {
  .op-aanbod-raster.is-twee-kolommen { grid-template-columns: minmax(0, 1fr); }
  .op-aanbod-raster.is-lijst .op-kaart { flex-direction: column; gap: 8px; }
  /* In een kolom telt flex-basis als hoogte: zonder dit krijgt de omschrijving
     260px hoogte en valt de prijs ver onder de tekst. */
  .op-aanbod-raster.is-lijst .op-kaart h3,
  .op-aanbod-raster.is-lijst .op-kaart p { flex: none; }
}

/* =========================================================
   Voorbeeldpagina, een balk die zegt wat dit is
   ========================================================= */

/* De melding blijft staan terwijl je scrollt: wie halverwege binnenkomt moet
   ook zien dat dit een voorbeeld is. De navigatiebalk schuift eronder. */
.met-demobalk { --demobalk-hoogte: 40px; padding-top: var(--demobalk-hoogte); }
.met-demobalk .op-nav { top: var(--demobalk-hoogte); }

.op-demobalk {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  height: var(--demobalk-hoogte, 40px);
  display: grid; align-items: center;
  background: #0D1B2A;
  color: rgba(255, 255, 255, .86);
  font-size: .84rem;
}
.op-demobalk-inhoud {
  display: flex; align-items: center; justify-content: center;
  gap: 6px 16px;
  text-align: center;
}
.op-demobalk strong { color: var(--wit); }
.op-demobalk a {
  color: #FF6A00; font-weight: 700; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px;
}
.op-demobalk a:hover { color: var(--wit); }
.op-demobalk-kort { display: none; }

@media (max-width: 760px) {
  .met-demobalk { --demobalk-hoogte: 38px; }
  .op-demobalk { font-size: .76rem; }
  .op-demobalk-inhoud { gap: 4px 10px; white-space: nowrap; }
  .op-demobalk-lang { display: none; }
  .op-demobalk-kort { display: inline; }
}

/* =========================================================
   Op een telefoon: altijd te bereiken
   ========================================================= */

/* De vaste balk onderaan. Wie deze site op een steiger opent, wil bellen of
   appen zonder eerst terug te scrollen naar de kop. */
.op-mobielbalk { display: none; }

@media (max-width: 860px) {
  .op-mobielbalk {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid var(--lijn);
    box-shadow: 0 -8px 26px rgba(0, 0, 0, .09);
  }
  .op-mobielknop {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 50px; padding: 0 14px; border-radius: 14px;
    font-family: var(--font-kop); font-weight: 700; font-size: .98rem;
    text-decoration: none; color: var(--wit);
  }
  .op-mobielknop.is-whatsapp { background: #25D366; }
  .op-mobielknop.is-bellen { background: var(--accent); }
  .op-mobielknop.is-mail { background: var(--accent); }
  .op-mobielknop:focus-visible { outline: 3px solid var(--inkt); outline-offset: 3px; }
  .op-mobielknop svg { flex: none; }

  /* De zwevende bel verdwijnt: hij zou boven op de balk komen te staan en
     zegt hetzelfde. */
  .op-whatsapp { display: none; }

  /* Ruimte onder de voet, anders ligt de balk over de laatste regel. */
  .op-voet { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }

  /* Bellen en mailen zijn op een telefoon de belangrijkste acties; als tekst
     van 26px hoog zijn ze te klein om zeker te raken. */
  .op-contactlijst a {
    display: inline-flex; align-items: center; min-height: 44px;
    font-size: 1.05rem; font-weight: 700;
  }
}