/* QMtex® v3 — film-hero, scroll-hoofdstukken, bewegende fotostrook (07-10-2026).
   Bovenop style.css; alles hier is nieuw in v3. */

/* ---------- Hero met film ---------- */
.hero-film {
  position: relative; min-height: min(calc(100svh - 76px), 920px); padding: 0; /* 76px = sticky header: onderkant van de film valt zo niet buiten beeld */
  display: flex; flex-direction: column; justify-content: flex-start;
  background: #f4f3ef; overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 100%; /* onderkant vast: de vijf modellen blijven altijd in beeld */
}
.hero-video { opacity: 0; transition: opacity .8s var(--ease); }
.hero-video.is-playing { opacity: 1; }
.hero-film::after { /* zachte witte waas bovenaan voor leesbare titel */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 62%;
  background: linear-gradient(180deg, rgba(247,246,242,.96) 0%, rgba(247,246,242,.75) 45%, rgba(247,246,242,0) 100%);
  pointer-events: none;
}
.hero-film-inner { position: relative; z-index: 2; padding-top: clamp(2.5rem, 7vh, 5rem); text-align: center; }
.hero-film-inner h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 1.02; margin-bottom: 1.4rem; }
.hero-film-inner .eyebrow { margin-inline: auto; }
.hero-film-inner .hero-cta { justify-content: center; margin: 0; }
.hero-scroll {
  position: absolute; z-index: 2; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  width: 30px; height: 48px; border: 2px solid rgba(31,35,40,.55); border-radius: 999px;
}
.hero-scroll span {
  position: absolute; left: 50%; top: 9px; width: 4px; height: 9px; margin-left: -2px;
  border-radius: 2px; background: var(--c-ink); animation: qm-scroll 1.8s infinite;
}
@keyframes qm-scroll { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@media (max-width: 700px) { /* gsm: tekst boven, staande film eronder, de vijf modellen volledig in beeld */
  .hero-film { min-height: 0; }
  .hero-film::after { display: none; }
  .hero-film-inner { order: -1; padding-top: 2rem; padding-bottom: 1.25rem; }
  .hero-film-inner h1 { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .hero-media { position: relative; height: 72svh; }
  .hero-media img, .hero-media video { object-position: 50% 100%; }
  .hero-scroll { display: none; }
  .hero-film-inner .eyebrow { font-size: .68rem; padding: .45rem .8rem; }
  .hero-film-inner .hero-cta { flex-wrap: nowrap; gap: .5rem; }
  .hero-film-inner .hero-cta .btn { padding: .85rem 1.05rem; font-size: .92rem; white-space: nowrap; }
  .hero-media { height: 64svh; }
}

/* ---------- Intro-band ---------- */
.intro-band { background: var(--c-bg-dark); color: #e9e9e6; }
.intro-inner { max-width: 900px; }
.intro-lede { font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.6; margin: 0; color: #e9e9e6; }

/* ---------- Film-hoofdstukken (scrollytelling) ---------- */
.film { position: relative; background: #111214; color: #fff; }
.film-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden; z-index: 0;
}
.film-stage video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity .9s var(--ease), transform 6s linear;
}
.film-stage video.is-active { opacity: 1; transform: scale(1); }
.film-shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,11,13,.72) 0%, rgba(10,11,13,.35) 42%, rgba(10,11,13,0) 70%),
              linear-gradient(0deg, rgba(10,11,13,.55) 0%, rgba(10,11,13,0) 40%);
}
.film-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.15); }
.film-progress span { display: block; height: 100%; width: 100%; background: var(--c-yellow); transform: scaleX(0); transform-origin: left; transition: transform .2s linear; }

.film-steps { position: relative; z-index: 1; margin-top: -100svh; }
.film-step {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(1.25rem, 6vw, 6rem); max-width: 640px;
}
.film-step h2, .film-step h3 { color: #fff; }
.film-step h3 { font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; margin: 0 0 .8rem; }
.film-step p { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; margin: 0; color: #eceae4; }
.film-step .film-num {
  font-family: var(--font-display); font-weight: 900; font-size: .95rem; letter-spacing: .14em;
  color: var(--c-yellow); margin-bottom: .6rem;
}
.film-step > * { opacity: .15; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.film-step.is-in > * { opacity: 1; transform: none; }
.film-intro h2 { font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1.05; }
.film-intro .eyebrow { color: var(--c-ink); }
@media (max-width: 700px) {
  .film-shade { background: linear-gradient(0deg, rgba(10,11,13,.85) 0%, rgba(10,11,13,.35) 55%, rgba(10,11,13,.1) 100%); }
  .film-step { justify-content: flex-end; padding-bottom: 18svh; }
}

/* ---------- Fotostrook (echte productfoto's, ongewijzigd) ---------- */
.showroom-strip { height: 320svh; position: relative; background: #f4f3ef; }
.showroom-strip .strip-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.showroom-strip .showroom-mosaic {
  display: flex; gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: none;
  padding: 0 6vw; width: max-content; will-change: transform;
}
.showroom-strip .showroom-mosaic img {
  width: clamp(280px, 48vw, 760px); height: auto; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  transform: scale(.94); transition: transform .5s var(--ease);
}
.showroom-strip .showroom-mosaic img.is-centre { transform: scale(1); }
.showroom-strip .showroom-overlay { position: static; background: none; padding: 0 6vw 2.2rem; order: -1; }
.showroom-strip .showroom-quote { color: var(--c-ink); text-shadow: none; font-size: clamp(1.8rem, 4.6vw, 3.4rem); text-align: left; }

/* ---------- Onthullen bij scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Minder beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-scroll span { animation: none; }
  .film-stage video, .film-step > *, .reveal, .showroom-strip .showroom-mosaic img { transition: none; transform: none; }
  .film-step > * { opacity: 1; }
  .reveal { opacity: 1; }
  .showroom-strip { height: auto; }
  .showroom-strip .strip-sticky { position: static; height: auto; padding: 3rem 0; }
  .showroom-strip .showroom-mosaic { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; }
  .showroom-strip .showroom-mosaic img { scroll-snap-align: center; }
}

/* ---------- v3.2: compacter (Franky 07-10: minder tussenruimte, collectie eerst) ---------- */
.section { padding: clamp(1.75rem, 3vw, 2.75rem) 0; }
.section-head { margin-bottom: 1.25rem; }
.callout { margin-top: 1.5rem; }

/* Contactknop altijd zichtbaar, ook op gsm */
.header-cta { display: none; }
@media (max-width: 820px) {
  .header-cta {
    display: inline-flex; align-items: center; margin-left: .75rem; margin-right: auto;
    padding: .55rem 1rem; border-radius: 999px; background: var(--c-yellow); color: var(--c-ink);
    font-weight: 700; font-size: .9rem; text-decoration: none;
  }
}

/* ---------- Collectie als eerste beeld: info ín de beelden ---------- */
.collection-top { background: #f1f0ec; padding: clamp(.75rem, 1.6vw, 1.25rem) clamp(.75rem, 2vw, 1.5rem) .9rem; }
.collection-top .model-grid {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1400px;
  display: grid; gap: clamp(.5rem, 1vw, .9rem); grid-template-columns: repeat(5, 1fr);
}
.model-card {
  position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
  background: #e9e8e3 center/cover no-repeat;
}
.model-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.model-info {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .8rem .65rem;
  background: linear-gradient(0deg, rgba(20,21,24,.62) 0%, rgba(20,21,24,0) 100%); color: #fff;
}
.model-name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(.78rem, 1.25vw, 1.05rem); line-height: 1.15; }
.model-size { margin: .1rem 0 0; font-size: clamp(.58rem, .95vw, .85rem); opacity: .92; font-variant-numeric: tabular-nums; white-space: nowrap; }
.collection-note { max-width: 1400px; margin: .6rem auto 0; font-size: clamp(.8rem, 1.1vw, .95rem); color: var(--c-ink-soft); text-align: center; }
.collection-note span { color: var(--c-muted); }
@media (max-width: 700px) {
  /* gsm: alle vijf op één rij. Naam klein eronder, maten pas in de pop-up. */
  .collection-top { padding: .6rem .5rem .7rem; }
  /* minmax(0,…): zonder dat duwt de modelnaam de kolommen breder dan het scherm */
  .collection-top .model-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; }
  /* naam ONDER het beeld: de kaart mag dus niet meer vierkant klemmen */
  .model-card { grid-column: auto; cursor: pointer; aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; }
  .model-card img { position: static; aspect-ratio: 1; border-radius: 10px; background: #e9e8e3; }
  /* geen tekst onder de beelden: naam en maten staan in de pop-up */
  .model-info { display: none; }
  /* de regel 'Vijf modellen. Elke kleur.' staat bóven de rij */
  .collection-top { display: flex; flex-direction: column; }
  .collection-note { order: -1; margin: 0 0 .45rem; font-size: .8rem; }
  /* compacte talenkiezer — de knop komt uit qmtex-i18n.js, vandaar het id */
  #qmtex-lang-switcher { top: calc(9px + env(safe-area-inset-top, 0px)); right: calc(56px + env(safe-area-inset-right, 0px)); }
  /* !important: qmtex-i18n.js spuit zijn eigen <style> ná dit bestand in de head */
  #qmtex-lang-switcher .qmtex-current {
    min-width: 0 !important; min-height: 28px !important; padding: 0 7px !important; gap: 3px !important;
    font-size: 11px !important; box-shadow: 0 1px 5px rgba(0,0,0,.10) !important;
  }
  #qmtex-lang-switcher .qmtex-caret { width: 6px !important; height: 6px !important; border-width: 1.5px !important; }
}

/* ---------- Model-pop-up (gsm): tik om te vergroten, tik nog eens om te sluiten ---------- */
.model-pop[hidden] { display: none; }
.model-pop {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: 1.25rem; background: rgba(20,21,24,.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: modelPopIn .18s ease-out;
}
@keyframes modelPopIn { from { opacity: 0 } to { opacity: 1 } }
.model-pop-kaart {
  width: min(92vw, 420px); background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.model-pop-kaart video, .model-pop-kaart img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #e9e8e3; }
.model-pop-tekst { padding: .7rem .9rem .9rem; text-align: center; }
.model-pop-tekst .model-name { font-size: 1.05rem; color: var(--c-ink); }
.model-pop-tekst .model-size { display: block; font-size: .85rem; margin-top: .15rem; color: var(--c-muted); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .model-pop { animation: none; } }

/* Film-intro: slogan als h1, compact */
.film-intro h1 { color: #fff; font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1.02; margin: 0 0 .6rem; }
.film-intro h1 .accent { color: var(--c-yellow); }
.film-intro h1 .accent::after { display: none; }
.film-step { min-height: 82svh; }
.film-step:last-child { min-height: 100svh; }
@media (max-width: 700px) {
  .film-stage { height: 78svh; top: 76px; }
  .film-steps { margin-top: -78svh; }
  .film-step { min-height: 64svh; padding-bottom: 10svh; }
}

/* Intro-tekst na de film: kort en compact */
.intro-band { padding: clamp(1.75rem, 3.5vw, 3rem) 0; }
.intro-lede { font-size: clamp(1rem, 1.5vw, 1.2rem); }

/* Fotostrook: veel korter */
.showroom-strip { height: 150svh; overflow: visible; } /* style.css zet overflow:hidden op .showroom; dat breekt sticky en gaf de lege vlakte */
@media (max-width: 820px) {
  .showroom-strip { height: auto; }
  .showroom-strip .strip-sticky { position: static; height: auto; padding: 1.5rem 0; }
  .showroom-strip .showroom-mosaic { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 1rem; transform: none !important; }
  .showroom-strip .showroom-mosaic img { width: 78vw; scroll-snap-align: center; transform: none; }
  .showroom-strip .showroom-overlay { padding: 0 1rem 1rem; }
}

/* ---------- gsm: kopbalk een derde lager (Franky, 07-10-2026) ----------
   76px → 52px. Logo, contactknop en hamburger schalen mee; het uitklapmenu
   en de hero-hoogte volgen, anders valt het menu los van de balk. */
@media (max-width: 700px) {
  .nav-wrap { min-height: 52px; }
  .brand img { height: 36px; }
  .header-cta { padding: .34rem .7rem; font-size: .78rem; margin-left: .5rem; }
  .nav-toggle { width: 34px; height: 34px; padding: 7px; }
  .nav-toggle span { margin: 4px 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .primary-nav { top: 52px; }
  .film-stage, .hero { min-height: min(calc(100svh - 52px), 920px); }
}

/* ---------- v3.5: hoofdstukken half om half (Franky, 08-10-2026) ----------
   Hoofdstuk 0 (drie dieren) blijft over de volle breedte. Daarna twee kolommen:
   links het oneven hoofdstuk (01, 03, …), rechts het even (02, 04, …). De tekst
   komt overhoeks aangeschoven en springt op zijn plaats. Gsm en staande tablet
   houden de ene kolom van v3.4. */
@media (min-width: 701px) and (orientation: landscape) {
  .film-stage.is-split video { inset: 0; width: 50%; height: 100%; }
  .film-stage.is-split video.pos-right { left: 50%; }
  .film-stage.is-split video.pos-right.is-active { transform: scale(1); }
  /* v3.6: hoofdstuk 08 vult beide helften met dezelfde clip, elk zijn eigen kant — 1:1 pixels, scherper dan één uitgerekte clip */
  .film-stage.is-split video[data-helft="links"] { object-position: 0% 50%; }
  .film-stage.is-split video[data-helft="rechts"] { object-position: 100% 50%; }
  .film-stage.is-split::before { /* naad tussen de twee helften */
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
    background: #111214; z-index: 1;
  }
  .film-stage.is-split .film-shade {
    background: linear-gradient(0deg, rgba(10,11,13,.78) 0%, rgba(10,11,13,.25) 45%, rgba(10,11,13,0) 70%);
  }
  .film-step[data-chapter]:not(.film-intro) { max-width: 50%; justify-content: flex-end; padding-bottom: 12svh; }
  .film-step[data-chapter="2"], .film-step[data-chapter="4"], .film-step[data-chapter="6"], .film-step[data-chapter="8"] { margin-left: 50%; }
  .film-step:not(.film-intro) h3 { font-size: clamp(1.8rem, 3.6vw, 3rem); }
  /* overhoeks aanschuiven en opspringen */
  .film-step:not(.film-intro) > * {
    opacity: 0; transform: translate(-9vw, 14vh) rotate(-5deg);
    transition: opacity .55s var(--ease), transform .9s cubic-bezier(.2, 1.35, .3, 1);
  }
  .film-step:not(.film-intro) > :nth-child(2) { transition-delay: .08s; }
  .film-step:not(.film-intro) > :nth-child(3) { transition-delay: .16s; }
  .film-step:not(.film-intro).is-in > * { opacity: 1; transform: none; }
  .film-step[data-chapter="2"] > *, .film-step[data-chapter="4"] > *, .film-step[data-chapter="6"] > *, .film-step[data-chapter="8"] > * {
    transform: translate(9vw, 14vh) rotate(5deg);
  }
  .film-step[data-chapter="2"].is-in > *, .film-step[data-chapter="4"].is-in > *, .film-step[data-chapter="6"].is-in > *, .film-step[data-chapter="8"].is-in > * { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .film-step:not(.film-intro) > * { transform: none; opacity: 1; transition: none; }
}

/* ---------- v3.6: eindstuk compact (Franky 08-10: "veel compacter, te veel gescroll, alles zichtbaar naast elkaar") ----------
   Na de film: intro, fotostrook, tien redenen, circulariteit, galerij en contact in zo weinig mogelijk schermen.
   De fotostrook scrolt niet meer mee (geen 150svh), de galerij is een raster in plaats van een carrousel,
   contact staat in twee kolommen. Gsm en staande tablet houden de ene kolom. */
.section { padding: clamp(1.25rem, 2vw, 2rem) 0; }
.section-head { margin-bottom: .9rem; }
.intro-band { padding: clamp(1.25rem, 2.5vw, 2rem) 0; }
.intro-lede { max-width: 1100px; margin-left: auto; margin-right: auto; }

/* Fotostrook: één rij van vijf, stilstaand */
.showroom-strip { height: auto; overflow: hidden; }
.showroom-strip .strip-sticky { position: static; height: auto; padding: clamp(1rem, 2vw, 1.5rem) 0; }
.showroom-strip .showroom-mosaic {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.4rem, .8vw, .7rem);
  width: auto; padding: 0 6vw; transform: none !important; will-change: auto;
}
.showroom-strip .showroom-mosaic img { width: 100%; aspect-ratio: 16/10; transform: none !important; box-shadow: var(--shadow-sm); }
.showroom-strip .showroom-mosaic img:nth-child(n+6) { display: none; } /* de tien staan allemaal in de galerij hieronder */
.showroom-strip .showroom-overlay { padding: 0 6vw .8rem; }
.showroom-strip .showroom-quote { font-size: clamp(1.4rem, 2.8vw, 2.2rem); }

/* Circulariteit: foto lager, kader direct eronder */
.circular-figure img { aspect-ratio: 16/9; max-height: 34svh; width: 100%; }
.circular .callout { margin-top: .9rem; }
.circular .callout p { margin: 0; }

/* Galerij: raster van tien, alles zichtbaar, geen pijlen of bolletjes */
@media (min-width: 701px) {
  .gallery .carousel { padding: 0 clamp(1rem, 4vw, 3.5rem); }
  .gallery .carousel-track {
    grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); grid-auto-columns: auto;
    overflow: visible; scroll-snap-type: none; --gap: 10px;
  }
  .gallery .carousel-btn, .gallery .carousel-dots { display: none; }
  .gallery .carousel-slide { aspect-ratio: 16/10; }
}

/* Contact: gegevens links, formulier rechts */
@media (min-width: 701px) {
  .contact .contact-simple { max-width: 1400px; display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
  .contact .contact-simple .section-head { grid-column: 1 / -1; margin-bottom: .25rem; }
  .contact .contact-list { margin-top: 0; }
  .contact .contact-form { margin-top: 0; }
  .contact .contact-form textarea { min-height: 90px; }
  .contact .contact-form h3 { margin-top: 0; }
}

/* ---------- v3.6: filmpjes komen overhoeks aangeschoven, na elkaar (Franky 08-10) ----------
   Zelfde beweging als de tekst: links van linksonder, rechts van rechtsonder, en ze springen op hun plaats.
   Na elkaar: bij het oneven hoofdstuk komt alleen de linkerhelft; de rechterhelft volgt bij het even hoofdstuk
   (film.js). Hoofdstuk 08 vult beide helften tegelijk. */
@media (min-width: 701px) and (orientation: landscape) {
  .film-stage.is-split video {
    opacity: 0; transform: translate(-14vw, 18vh) rotate(-6deg);
    transition: opacity .5s var(--ease), transform .95s cubic-bezier(.2, 1.35, .3, 1);
  }
  .film-stage.is-split video.pos-right { transform: translate(14vw, 18vh) rotate(6deg); }
  .film-stage.is-split video.is-active, .film-stage.is-split video.pos-right.is-active { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .film-stage.is-split video, .film-stage.is-split video.pos-right { transform: none; transition: opacity .3s; }
}

/* ---------- v3.7: hoofdstukken in twee kolommen, geschrankt (Franky 08-10: "filmpjes en teksten geschrankt naast
   mekaar per 2, twee kolommen onder de header met drie dieren, tot onderaan") ----------
   Hoofdstuk 0 (drie dieren) blijft de vastgeplakte header. Daarna gewoon scrollen: acht kaarten, twee per rij,
   de rechterkolom een stuk lager (geschrankt). Elke kaart = clip met de tekst onderin. Clip wordt getoond op
   ± 45 vw, dus kleiner dan zijn 1920 px: scherper dan de uitgerekte stage. Kaarten schuiven overhoeks aan. */
.film-step:last-child { min-height: 82svh; }
.film-grid {
  background: var(--c-bg-dark); position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 1.5vw, 1.25rem);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 4vw, 3rem);
}
.film-kaart { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #111214; }
.film-kaart video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film-kaart-tekst {
  position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1rem, 2.2vw, 1.8rem);
  background: linear-gradient(0deg, rgba(10,11,13,.82) 0%, rgba(10,11,13,.38) 55%, rgba(10,11,13,0) 100%);
}
.film-kaart .film-num { font-family: var(--font-display); font-weight: 900; font-size: .85rem; letter-spacing: .14em; color: var(--c-yellow); margin: 0 0 .35rem; }
.film-kaart h3 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 2.2rem); line-height: 1.05; margin: 0 0 .35rem; }
.film-kaart p:not(.film-num) { margin: 0; color: #eceae4; font-size: clamp(.9rem, 1.2vw, 1.1rem); line-height: 1.45; }
@media (min-width: 701px) {
  .film-grid { padding-bottom: calc(clamp(1rem, 2vw, 1.5rem) + 11vw); } /* ruimte voor de lager hangende rechterkolom */
  .film-kaart { opacity: 0; transition: opacity .5s var(--ease), transform .95s cubic-bezier(.2, 1.35, .3, 1); }
  .film-kaart:nth-child(odd) { transform: translate(-10vw, 12vh) rotate(-5deg); }
  .film-kaart:nth-child(even) { transform: translate(10vw, calc(12vh + 24%)) rotate(5deg); }
  .film-kaart.is-in { opacity: 1; transform: none; }
  .film-kaart:nth-child(even).is-in { transform: translateY(24%); } /* geschrankt */
}
@media (max-width: 700px) { .film-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .film-kaart, .film-kaart:nth-child(odd), .film-kaart:nth-child(even) { opacity: 1; transform: none; transition: none; }
  .film-kaart:nth-child(even).is-in { transform: none; }
}

/* ---------- v3.8: het lagere gedeelte in dezelfde kaartstijl (Franky 08-10: "moest het lager gedeelte nu ook
   nog eens zo mooi gemaakt worden") ----------
   Alles onder de hoofdstukken op dezelfde donkere ondergrond, in kaarten met dezelfde hoeken, die overhoeks
   aanschuiven (klasse .onder-kaart zet film.js). De fotostrook verdwijnt: dezelfde tien foto's staan als
   geschrankt raster in de galerij. Gsm: één kolom, geen schuifbeweging. */
.intro-band, .features, .circular, .gallery, .contact { background: var(--c-bg-dark); color: #eceae4; }
.intro-band { padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.intro-lede { color: #d6d4cc; text-align: center; }
.showroom-strip { display: none; }
.section-head h2, .features h2, .circular h2, .gallery h2, .contact h2 { color: #fff; }
.contact .section-head h2 { margin-bottom: .25rem; }
.eyebrow-dark { background: #111214; color: var(--c-yellow); }

/* Tien redenen: donkere kaarten */
.feature { background: #111214; border-color: #26272b; }
.feature:hover { border-color: color-mix(in srgb, var(--c) 55%, #26272b); box-shadow: none; }
.feature h3 { color: #fff; }
.feature p { color: #c9c7bf; }
.feature-icon { color: var(--c); }

/* Circulariteit: fotokaart + tekstkaart + geel kader */
.circular-figure img { border-radius: var(--radius); box-shadow: none; }
.circular .grid-2 > div { background: #111214; border-radius: var(--radius); padding: clamp(1.2rem, 2.5vw, 2rem); }
.circular .grid-2 > div p { color: #d6d4cc; }
.circular .pullquote { color: #fff; }
.circular .callout { border-radius: var(--radius); }

/* Galerij: drie kolommen, geschrankt, zelfde hoeken als de hoofdstukken */
@media (min-width: 701px) {
  .gallery .carousel-track { grid-template-columns: repeat(3, 1fr); --gap: clamp(.75rem, 1.5vw, 1.25rem); padding-bottom: 7vw; }
  .gallery .carousel-slide { aspect-ratio: 16 / 9; border-radius: var(--radius); background: #111214; }
  .gallery .carousel-slide:hover { transform: translateY(-2px); }
  .gallery .carousel-slide:nth-child(3n+2).is-in { transform: translateY(22%); }
}

/* Contact: gegevens en formulier als twee donkere kaarten */
.contact { border-top: 0; }
.contact .contact-list { background: #111214; border-radius: var(--radius); padding: clamp(1rem, 2vw, 1.5rem); }
.contact .contact-list li { border-color: #26272b; }
.contact .contact-list li:last-child { border-bottom: 0; }
.contact .ci-label { color: #9a9890; }
.contact .contact-list a { color: #fff; }
.contact .contact-form { background: #111214; border-radius: var(--radius); padding: clamp(1rem, 2vw, 1.5rem); }
.contact .contact-form h3 { color: #fff; }
.contact .contact-form label { color: #eceae4; }
.contact .contact-form input, .contact .contact-form textarea { background: #1a1b1f; color: #fff; border: 1px solid #2e2f34; }
.contact .contact-form input:focus, .contact .contact-form textarea:focus { border-color: var(--c-yellow); box-shadow: 0 0 0 3px rgba(236,208,78,.18); }
.contact .form-note, .contact .form-note a { color: #9a9890; }
.contact .btn-primary { background: var(--c-yellow); color: var(--c-ink); }
.contact .btn-primary:hover { background: #fff; }

/* Overhoeks aanschuiven, net als de hoofdstukken */
@media (min-width: 701px) {
  .onder-kaart { opacity: 0; transform: translate(-7vw, 9vh) rotate(-4deg); transition: opacity .5s var(--ease), transform .95s cubic-bezier(.2, 1.35, .3, 1); }
  .onder-kaart:nth-child(even) { transform: translate(7vw, 9vh) rotate(4deg); }
  .onder-kaart.is-in { opacity: 1; transform: none; }
  .gallery .carousel-slide.onder-kaart:nth-child(3n+2) { transform: translate(0, calc(9vh + 22%)) rotate(0); }
  .gallery .carousel-slide.onder-kaart:nth-child(3n+2).is-in { transform: translateY(22%); }
}
@media (prefers-reduced-motion: reduce) {
  .onder-kaart, .onder-kaart:nth-child(even), .onder-kaart.is-in { opacity: 1; transform: none; transition: none; }
}

/* ---------- v3.8: header met de drie dieren korter (Franky 08-10: "moet korter zijn, is te diep") ---------- */
@media (min-width: 701px) {
  .film-stage { height: 62svh; }
  .film-steps { margin-top: -62svh; }
  .film-step.film-intro, .film-step:last-child { min-height: 62svh; }
  .film-intro h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); }
}

/* ---------- v3.8: de kaarten hangen aan de header (Franky 08-10: "zet dit bovenste vierkantje over de bovenste ook,
   dat het samen hangt") — het raster schuift over de onderrand van de drie dieren; geen gele voortgangsbalk meer. ---------- */
@media (min-width: 701px) {
  .film-grid { margin-top: -12svh; padding-top: 0; }
  .film .film-progress { display: none; }
}

/* ---------- v3.8: header staat stil (Franky 08-10: "dit moet stabiel staan bovenaan") — geen sticky meer:
   de drie dieren zijn een gewone kop, de tekst ligt erover, daarna de kaarten. ---------- */
@media (min-width: 701px) {
  .film-stage { position: relative; top: auto; }
}

/* ---------- v3.9 (Franky 08-10): twee kolommen gelijk, tekst onder het beeld, onderkant even sterk als boven ----------
   Geen geschrankt meer. Elke kaart: beeld 16/9 bovenaan, tekst in een donker vak eronder, beeld vrij.
   Tien redenen, galerij en contact volgen hetzelfde raster van twee kolommen. */
@media (min-width: 701px) {
  .film-grid { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
  .film-kaart:nth-child(even) { transform: translate(10vw, 12vh) rotate(5deg); }
  .film-kaart.is-in, .film-kaart:nth-child(even).is-in { transform: none; }
  .gallery .carousel-track { grid-template-columns: repeat(2, 1fr); padding-bottom: 0; }
  .gallery .carousel-slide:nth-child(3n+2).is-in, .gallery .carousel-slide.onder-kaart:nth-child(3n+2) { transform: none; }
  .gallery .carousel-slide.onder-kaart:nth-child(even) { transform: translate(7vw, 9vh) rotate(4deg); }
  .gallery .carousel-slide.onder-kaart.is-in { transform: none; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(.75rem, 1.5vw, 1.25rem); }
  .feature { padding: 1rem 1.1rem 1rem 1.3rem; }
}
.film-kaart { aspect-ratio: auto; display: flex; flex-direction: column; background: #111214; }
.film-kaart video { position: static; aspect-ratio: 16 / 9; height: auto; }
.film-kaart-tekst { position: static; background: none; padding: clamp(.9rem, 1.8vw, 1.4rem) clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem); }
.film-kaart h3 { font-size: clamp(1.2rem, 2vw, 1.8rem); }
.circular .grid-2 { gap: clamp(.75rem, 1.5vw, 1.25rem); }
.circular-figure { background: #111214; border-radius: var(--radius); overflow: hidden; }
.circular-figure img { border-radius: 0; max-height: none; aspect-ratio: 16 / 9; }

/* ---------- gsm: header met de drie dieren korter, bovenkant weggesneden (Franky 10-10: "je moet direct lezen
   wat je moet lezen als je opendoet op gsm") — minder lege muur boven de dieren, slogan meteen in beeld. ---------- */
@media (max-width: 700px) {
  .film-stage { height: 58svh; min-height: 0; position: relative; top: auto; } /* min-height 0: anders wint de kopbalk-regel min(100svh - 52px) */
  .film-steps { margin-top: -58svh; }
  .film-stage video { object-position: 50% 82%; }
  .film-step.film-intro, .film-step:last-child { min-height: 58svh; padding-bottom: 5svh; }
  .film-intro h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .film-grid { margin-top: 0; }
}

/* ---------- 10-10: overgang header → kaarten duidelijk (Franky: "ofwel ruimte ofwel overlappen") — overlappen:
   kaarten liggen zichtbaar óp de onderrand van de drie dieren, met een schaduw die de laag toont. ---------- */
@media (min-width: 701px) {
  .film-grid { margin-top: -16svh; }
  .film-kaart { box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }
}

/* ---------- 10-10: bijschrift "Vijf modellen. Elke kleur." tussen header en hoofdstukken (Franky) ----------
   Weg bij de modellenrij. Eén regel op desktop; op gsm twee gelijke regels (text-wrap: balance), nooit een los
   laatste woord. Op de donkere ondergrond van de kaarten. */
.band-note {
  position: relative; z-index: 2; margin: 0; padding: clamp(.9rem, 2vw, 1.4rem) clamp(1rem, 4vw, 3rem) 0;
  background: var(--c-bg-dark); color: #fff; text-align: center; text-wrap: balance;
  font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.35;
}
.band-note strong { color: var(--c-yellow); font-family: var(--font-display); font-weight: 800; }
.band-note span { color: #c9c7bf; }
@media (min-width: 701px) {
  .band-note { margin-top: 0; } /* bijschrift zit tussen header en kaarten: schone overgang, geen overlap meer */
  .film-grid { margin-top: 0; padding-top: clamp(.9rem, 2vw, 1.4rem); }
}
@media (max-width: 700px) {
  .band-note { padding: .9rem 1.25rem 0; font-size: 1.02rem; }
  .band-note strong { display: block; font-size: 1.15rem; margin-bottom: .15rem; } /* "Vijf modellen. Elke kleur." op eigen regel */
  .collection-top .model-grid { margin-top: 0; }
}

.film .film-progress { display: none; } /* gele voortgangsbalk ook op gsm weg */
@media (max-width: 700px) {
  /* 10-10, Franky: ondertitel in de header op één regel, nooit een los "gaat." */
  .film-intro p { font-size: .95rem; white-space: nowrap; letter-spacing: -.005em; }
  .film-step.film-intro { padding-left: 1.1rem; padding-right: 1.1rem; }
}
/* 10-10, Franky: de kop van de olifant moet zichtbaar zijn, gsm en desktop */
@media (min-width: 701px) { .film-stage video { object-position: 50% 75%; } } /* meubels onderaan altijd in beeld, kop van de olifant ook */
@media (max-width: 700px) { .film-stage video { object-position: 50% 64%; } }

/* Nieuwsbrief-opt-in (10-10-2026): vakje links, tekst rechts, rustig en klein */
.contact-form label.optin { flex-direction: row; align-items: flex-start; gap: .6rem; font-weight: 400; font-size: .9rem; line-height: 1.45; cursor: pointer; }
.contact-form label.optin input { width: 1.1rem; height: 1.1rem; margin: .15rem 0 0; flex: 0 0 auto; accent-color: var(--c-yellow); }

/* 10-10 (Franky): op gsm zijn de meubels het product, niet de muur of de dieren — minder hoogte, beeld lager geknipt */
@media (max-width: 700px) {
  .film-stage { height: 50svh; }
  .film-steps { margin-top: -50svh; }
  .film-step.film-intro, .film-step:last-child { min-height: 50svh; padding-bottom: 3svh; }
  .film-stage video { object-position: 50% 80%; }
}

/* ---- v3.10 header-titels in beweging (Franky 10-10-2026: "professionele beweging op de titels", "animatie van de letters") ----
   De letters komen samen vanuit wijde spatiëring en onscherpte (tracking-in), regel per regel. Speelt bij het laden en telkens de header opnieuw
   in beeld komt (main.js wisselt .is-replay). Met reduced motion staat de titel er meteen. */
.film-intro > * { opacity: 1; transform: none; transition: none; }
.film-intro h1 .hl { display: block; }
.film-intro h1 .hl > span { display: inline-block; }
.film { overflow-x: clip; } /* de uitgerekte letters bij de start mogen nooit een zijwaartse scroll geven */
@media (max-width: 700px) { .film-intro h1 .hl > span { --qm-spatie: .22em; } }
@media (prefers-reduced-motion: no-preference) {
  .film-intro h1 .hl > span { animation: qm-letters 3.2s cubic-bezier(.2, .75, .15, 1) .2s both; }
  .film-intro h1 .hl:nth-of-type(2) > span { animation-delay: 1.4s; } /* 10-10: veel trager (Franky) */
  .film-intro > p { animation: qm-sub 1.8s cubic-bezier(.2, .7, .2, 1) 3.4s both; }
  /* opnieuw in beeld: andere (identieke) keyframe-naam herstart de animatie zonder flits bij het laden */
  .film-intro.is-replay h1 .hl > span { animation-name: qm-letters-b; }
  .film-intro.is-replay > p { animation-name: qm-sub-b; }
}
@keyframes qm-letters {
  from { letter-spacing: var(--qm-spatie, .5em); opacity: 0; filter: blur(12px); transform: translateX(-.25em); }
  60% { opacity: 1; }
  to { letter-spacing: normal; opacity: 1; filter: blur(0); transform: none; }
}
@keyframes qm-letters-b {
  from { letter-spacing: var(--qm-spatie, .5em); opacity: 0; filter: blur(12px); transform: translateX(-.25em); }
  60% { opacity: 1; }
  to { letter-spacing: normal; opacity: 1; filter: blur(0); transform: none; }
}
@keyframes qm-sub { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes qm-sub-b { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- v3.10 onderste helft licht en luchtig (Franky 10-10-2026: "achtergrond luchtiger, allemaal zo donker en saai,
   maak cartoons met de dieren en de meubels in tekenlijnen") ----
   Alles onder de filmkaarten op papier/wit in afwisselende banden; de header en de filmkaarten blijven donker.
   Vier lijntekeningen (zwarte inktlijn, meubel geel) als vriendelijke accenten. */
:root { --qm-papier: #F6F3EC; --qm-wit: #FFFFFF; --qm-inkt: #1F2328; --qm-mat: #565E69; --qm-lijn: #E2DCCF; --qm-veld: #A39C8C; }
.intro-band { background: var(--qm-wit); color: var(--qm-inkt); }
.features { background: var(--qm-papier); color: var(--qm-inkt); }
.circular { background: var(--qm-wit); color: var(--qm-inkt); }
.contact { background: var(--qm-wit); color: var(--qm-inkt); border-top: 0; }
.intro-lede { color: var(--qm-inkt); text-align: left; }
.section-head h2, .features h2, .circular h2, .gallery h2, .contact h2 { color: var(--qm-inkt); }

/* Tien redenen: witte kaarten met een gekleurd randje bij hover */
.feature { background: var(--qm-wit); border-color: var(--qm-lijn); }
.feature:hover { border-color: color-mix(in srgb, var(--c) 70%, var(--qm-lijn)); box-shadow: 0 10px 24px rgba(31, 35, 40, .07); }
.feature h3 { color: var(--qm-inkt); }
.feature p { color: var(--qm-mat); }
.feature-icon { color: color-mix(in srgb, var(--c) 75%, var(--qm-inkt)); } /* geel icoon op wit is te zwak; mengen met inkt */

/* Circulariteit */
.circular .grid-2 > div { background: var(--qm-papier); }
.circular-figure { background: var(--qm-papier); }
.circular .grid-2 > div p { color: var(--qm-inkt); } /* zelfde gewicht als de oude donkere regel */
.circular .pullquote { color: var(--qm-inkt); }

/* Lijntekeningen */
.tekening { display: block; height: auto; pointer-events: none; user-select: none; }
.intro-inner { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }
.tekening-intro { flex: 0 0 auto; width: clamp(110px, 16vw, 210px); }
.features .section-head { position: relative; }
.tekening-features { width: clamp(120px, 14vw, 200px); margin: .6rem auto 0; }
.tekening-circular { width: clamp(130px, 15vw, 210px); margin: 1rem 0 0 auto; }
.tekening-contact { width: min(100%, 320px); margin: .5rem auto 0; }
@media (min-width: 1180px) {
  .tekening-features { position: absolute; left: 100%; top: 50%; transform: translate(-6%, -58%); margin: 0; width: clamp(150px, 13vw, 200px); }
}
@media (max-width: 700px) {
  .intro-inner { flex-direction: column; text-align: center; }
  .intro-lede { text-align: left; }
  .tekening-intro { width: 120px; }
  .tekening-circular { margin: .75rem auto 0; width: 140px; }
  .tekening-contact { width: 220px; }
}
@media (prefers-reduced-motion: no-preference) {
  .tekening { animation: qm-zweef 6s ease-in-out infinite; }
  .tekening-features { animation-delay: -1.5s; }
  .tekening-circular { animation-delay: -3s; }
  .tekening-contact { animation-delay: -4.5s; }
  @keyframes qm-zweef { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
}

/* ---- v3.10 contact compact (Franky 10-10-2026: "kunnen we dit niet wat beter en compacter maken") ----
   Links de gegevens met de tekening eronder (geen lege kolom meer), rechts het formulier met Naam + E-mail
   naast elkaar en een kortere berichtbox. Geen enkele name/id/klasse van het formulier gewijzigd. */
.contact .contact-list { background: var(--qm-papier); border: 1px solid var(--qm-lijn); }
.contact .contact-list li { border-color: var(--qm-lijn); }
.contact .contact-list a { color: var(--qm-inkt); text-decoration: underline; text-decoration-color: var(--qm-lijn); text-underline-offset: 3px; }
.contact .contact-list a:hover { text-decoration-color: var(--qm-inkt); }
.ci-label { color: var(--qm-mat); }
.contact .contact-form { background: var(--qm-papier); border: 1px solid var(--qm-lijn); gap: .8rem; grid-template-columns: 1fr 1fr; align-content: start; }
.contact .contact-form > * { grid-column: 1 / -1; }
.contact .contact-form > label:nth-of-type(1), .contact .contact-form > label:nth-of-type(2) { grid-column: auto; }
.contact .contact-form h3 { color: var(--qm-inkt); margin: 0; }
.contact .contact-form label { color: var(--qm-inkt); }
.contact .contact-form input, .contact .contact-form textarea { background: var(--qm-wit); color: var(--qm-inkt); border: 1px solid var(--qm-veld); padding: .65rem .8rem; }
.contact .contact-form input:focus, .contact .contact-form textarea:focus { border-color: var(--qm-inkt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-yellow) 55%, transparent); }
.contact .contact-form textarea { min-height: 96px; }
.contact .contact-form .form-row { gap: .8rem; }
.contact .contact-form .btn-primary { width: 100%; color: var(--qm-inkt); }
.contact .form-note, .contact .form-note a { color: var(--qm-mat); }
.contact .form-note a { text-decoration: underline; }
.contact .eyebrow-dark { background: var(--qm-inkt); }
@media (min-width: 901px) {
  .contact .contact-simple { grid-template-columns: minmax(280px, 1fr) 1.6fr; row-gap: .75rem; }
  .contact .contact-list { grid-column: 1; grid-row: 2; }
  .contact .tekening-contact { grid-column: 1; grid-row: 3; align-self: start; }
  .contact .contact-form { grid-column: 2; grid-row: 2 / span 2; }
}
@media (max-width: 560px) {
  .contact .contact-form { grid-template-columns: 1fr; padding: 1.1rem; }
  .contact .contact-form > label:nth-of-type(1), .contact .contact-form > label:nth-of-type(2) { grid-column: 1 / -1; }
}

/* Footer licht en compact */
.site-footer { background: #EFEBE2; color: var(--qm-inkt); padding: clamp(2rem, 3.5vw, 3rem) 0 1.25rem; border-top: 1px solid var(--qm-lijn); }
.site-footer a { color: var(--qm-inkt); }
.site-footer a:hover { color: var(--qm-inkt); text-decoration-color: var(--c-yellow); }
.footer-grid h4 { color: var(--qm-inkt); }
.legal-line { color: var(--qm-mat); }
.site-footer .tagline { color: var(--qm-inkt); }
.circular .grid-2 > div p.eyebrow-dark, .contact .eyebrow-dark, .features .eyebrow-dark { background: var(--qm-inkt); color: var(--c-yellow); } /* pil blijft inkt met geel, ook binnen de lichte tekstkaart */
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; }
  .footer-grid > div:first-child { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; }
  .footer-grid > div:first-child img { width: 84px; height: auto; }
  .footer-grid > div:first-child .tagline { margin: 0; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
  .site-footer { padding-top: 1.75rem; }
}

/* ---- v3.10 galerij in het fotovak van Circulariteit (Franky 10-10-2026: "steek die carousel linksboven, te lang,
   niet compact genoeg; de carousel moet zelf bewegen of als je klikt") ----
   Eén foto tegelijk, bladert zelf om de 4,5 s (pauze bij hover, focus of aanraking; uit bij reduced motion),
   pijlen op de foto, bolletjes eronder. Klik op een foto opent de bestaande lightbox. */
.circular-figure { background: none; overflow: visible; margin: 0; align-self: center; }
.circular-figure .carousel { width: 100%; padding: 0; margin: 0; }
.circular-figure .carousel-track { grid-auto-columns: 100%; gap: 0; padding: 0; border-radius: var(--radius); overflow-x: auto; }
.circular-figure .carousel-slide, .circular-figure .carousel-slide.onder-kaart,
.circular-figure .carousel-slide.onder-kaart.is-in { aspect-ratio: 16 / 9; border-radius: 0; opacity: 1; transform: none; transition: none; box-shadow: none; background: var(--qm-papier); scroll-snap-align: start; }
.circular-figure .carousel-slide:hover { transform: none; box-shadow: none; }
.circular-figure .carousel-slide img { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.circular-figure .carousel-btn { display: grid; place-items: center; top: calc(50% - 1.25rem - 20px); width: 40px; height: 40px; background: rgba(255, 255, 255, .92); color: var(--qm-inkt); border: 1px solid var(--qm-lijn); box-shadow: 0 4px 14px rgba(31, 35, 40, .14); }
.circular-figure .carousel-btn:hover { background: var(--c-yellow); transform: none; }
.circular-figure .carousel-btn:focus-visible { outline: 3px solid var(--qm-inkt); outline-offset: 2px; }
.circular-figure .carousel-prev { left: .6rem; }
.circular-figure .carousel-next { right: .6rem; }
.circular-figure .carousel-dots { margin-top: .7rem; gap: 2px; }
.circular-figure .carousel-dot { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: transparent; display: grid; place-items: center; transition: none; }
.circular-figure .carousel-dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #8A8F98; transition: transform .2s var(--ease), background-color .2s var(--ease); }
.circular-figure .carousel-dot.is-active { width: 22px; background: transparent; }
.circular-figure .carousel-dot.is-active::before { background: var(--qm-inkt); transform: scaleX(2.6); }
.circular-figure .carousel-dot:focus-visible { outline: 2px solid var(--qm-inkt); outline-offset: 1px; }
@media (max-width: 560px) { .circular-figure .carousel-btn { display: grid; width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .circular-figure .carousel-dot::before { transition: none; } }

/* ---- v3.10 Circulariteit als één blok (Franky 10-10-2026: "mooie blok, niet zoveel witruimte onder de foto's,
   maak er één blok van") ----
   Eén kaart: carrousel links over de volle hoogte, tekst rechts, gele maatwerkband onderaan. Geen losse
   aanschuifbeweging per stuk meer: het blok blijft heel. */
.circular .grid-2 {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  background: var(--qm-papier); border: 1px solid var(--qm-lijn); border-radius: var(--radius); overflow: hidden;
}
.circular .grid-2 > .onder-kaart, .circular .grid-2 > .onder-kaart:nth-child(even), .circular .grid-2 > .onder-kaart.is-in { opacity: 1; transform: none; transition: none; }
.circular .grid-2 > div:not(.callout) { background: none; border-radius: 0; padding: clamp(1.2rem, 2.6vw, 2.2rem); }
.circular .grid-2 > .callout { grid-column: 1 / -1; margin: 0; border-radius: 0; box-shadow: none; background: var(--c-yellow); color: var(--qm-inkt); padding: clamp(1rem, 2vw, 1.4rem) clamp(1.2rem, 2.6vw, 2.2rem); }
.circular-figure { position: relative; align-self: stretch; }
.circular-figure .carousel, .circular-figure .carousel-track { height: 100%; }
.circular-figure .carousel-track { border-radius: 0; }
.circular-figure .carousel-slide, .circular-figure .carousel-slide.onder-kaart, .circular-figure .carousel-slide.onder-kaart.is-in { aspect-ratio: 16 / 9; height: 100%; }
.circular-figure .carousel-dots {
  position: absolute; left: 50%; bottom: .7rem; transform: translateX(-50%); margin: 0;
  padding: 0 .35rem; border-radius: 999px; background: rgba(255, 255, 255, .88);
}
.circular-figure .carousel-btn { top: calc(50% - 20px); }
.tekening-circular { width: clamp(120px, 12vw, 170px); margin: .5rem 0 0 auto; }
/* Desktop: foto groot links, tekst rechts, één kaart (Franky 10-10: tekst over de foto verstopte de meubels).
   De foto vult de volle hoogte van de tekst; 16:9 wordt hooguit licht bijgesneden, de meubels blijven zichtbaar. */
@media (min-width: 1000px) {
  .circular .grid-2 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .circular-figure { grid-area: 1 / 1; width: 100%; min-width: 0; aspect-ratio: 3 / 2; } /* hoogte volgt de foto, niet de tekst */
  .circular-figure .carousel, .circular-figure .carousel-track { position: absolute; inset: 0; height: auto; }
  .circular-figure .carousel-slide, .circular-figure .carousel-slide.onder-kaart, .circular-figure .carousel-slide.onder-kaart.is-in { aspect-ratio: auto; height: 100%; }
  .circular-figure .carousel-slide img { object-position: var(--fx, 50%) 62%; }
  .circular .grid-2 > div:not(.callout) {
    grid-area: 1 / 2; display: flex; flex-direction: column; justify-content: center;
    padding: clamp(1.25rem, 2.4vw, 2.25rem);
  }
  .circular .grid-2 > div:not(.callout) { position: relative; }
  .circular .grid-2 > div:not(.callout) h2 { font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1.12; margin-bottom: .6rem; }
  .circular .grid-2 > div:not(.callout) > p:not(.eyebrow):not(.pullquote) { font-size: .95rem; line-height: 1.55; margin: 0; }
  .circular .grid-2 > div:not(.callout) .pullquote { font-size: 1rem; padding-right: 96px; }
  .circular .grid-2 > div:not(.callout) .pullquote { margin-top: .9rem; }
  .circular .grid-2 > .callout { grid-row: 2; }
  .tekening-circular { position: absolute; right: clamp(.75rem, 1.5vw, 1.25rem); bottom: clamp(.75rem, 1.5vw, 1.25rem); width: 92px; margin: 0; }
}
}

/* ---- v3.10 tien redenen in beweging, zonder overdaad (Franky 10-10-2026: "iets dynamischer") ----
   Kaarten komen één voor één omhoog in beeld, het gekleurde streepje groeit mee en het icoon tikt even aan.
   Bij hover komt het icoon wat los. Vervangt de grote overhoekse aanschuif voor deze kaarten. */
@media (prefers-reduced-motion: no-preference) {
  .feature.onder-kaart, .feature.onder-kaart:nth-child(even) { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .6s cubic-bezier(.2, .75, .2, 1), box-shadow .18s var(--ease), border-color .18s var(--ease); }
  .feature.onder-kaart.is-in { opacity: 1; transform: none; }
  .feature.onder-kaart::before { transform: scaleY(0); transform-origin: top; transition: transform .7s cubic-bezier(.2, .75, .2, 1) .25s; }
  .feature.onder-kaart.is-in::before { transform: scaleY(1); }
  .feature.onder-kaart.is-in .feature-icon { animation: qm-tik .55s cubic-bezier(.3, 1.6, .5, 1) .3s both; }
  .feature-icon { transition: transform .25s var(--ease); }
  .feature:hover .feature-icon { transform: translateY(-2px) rotate(-8deg) scale(1.06); }
  .feature:nth-child(2) { transition-delay: .06s; } .feature:nth-child(3) { transition-delay: .12s; }
  .feature:nth-child(4) { transition-delay: .18s; } .feature:nth-child(5) { transition-delay: .24s; }
  .feature:nth-child(6) { transition-delay: .30s; } .feature:nth-child(7) { transition-delay: .36s; }
  .feature:nth-child(8) { transition-delay: .42s; } .feature:nth-child(9) { transition-delay: .48s; }
  .feature:nth-child(10) { transition-delay: .54s; }
  .feature:hover { transition-delay: 0s; }
  @keyframes qm-tik { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
}
/* Maatwerk: de tiende reden licht iets op, zonder te schreeuwen */
/* Maatwerk rust wit zoals de andere vakjes (Franky 10-10); het kleurt alleen mee in de spot */

/* Contact: maatwerk uitnodigen */
.contact .contact-lead { margin: .4rem 0 0; max-width: 62ch; color: var(--qm-inkt); font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.55; }
.circular-figure .carousel-slide img { object-position: 50% 70%; } /* meubels staan onderaan in de foto's */
.contact .contact-simple .section-head { margin-left: 0; margin-right: 0; max-width: none; }
.circular .grid-2 > div:not(.callout) > .eyebrow { align-self: flex-start; }
/* Per foto: horizontale focus zodat de meubels nooit achter de rand vallen (enkel desktop snijdt bij) */
/* 11-10: de foto met de vijf modellen staat nu eerst; focus schuift mee */
.circular-figure .carousel-slide:nth-child(1) { --fx: 50%; }
.circular-figure .carousel-slide:nth-child(2) { --fx: 90%; }
.circular-figure .carousel-slide:nth-child(3) { --fx: 20%; }
.circular-figure .carousel-slide:nth-child(4) { --fx: 60%; }
.circular-figure .carousel-slide:nth-child(5) { --fx: 100%; }
.circular-figure .carousel-slide:nth-child(6) { --fx: 45%; }

/* ---- v3.10 contact als één vak (Franky 10-10-2026: "maak hier ook een vak van, dat het precies één is") ----
   Eén kaart (.contact-vak) rond gegevens, tekening en formulier; gegevens en formulier verliezen hun eigen kader,
   een fijne lijn scheidt ze. Het formulier zelf (id, names, velden) is ongewijzigd. */
.contact .contact-simple { display: block; }
.contact .contact-simple .section-head { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.contact-vak { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--qm-papier); border: 1px solid var(--qm-lijn); border-radius: var(--radius); overflow: hidden; }
.contact .contact-vak .contact-list, .contact .contact-vak .contact-form { background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.contact .contact-vak .contact-list { padding: clamp(1.1rem, 2.2vw, 1.75rem) clamp(1.1rem, 2.2vw, 1.75rem) .5rem; }
.contact .contact-vak .tekening-contact { margin: .5rem auto 1rem; }
.contact .contact-vak .contact-form { padding: clamp(1.1rem, 2.2vw, 1.75rem); border-top: 1px solid var(--qm-lijn); }
@media (min-width: 901px) {
  .contact-vak { grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr); grid-template-rows: auto 1fr; }
  .contact .contact-vak .contact-list { grid-column: 1; grid-row: 1; }
  .contact .contact-vak .tekening-contact { grid-column: 1; grid-row: 2; align-self: end; margin: 0 auto 1.5rem; }
  .contact .contact-vak .contact-form { grid-column: 2; grid-row: 1 / span 2; border-top: 0; border-left: 1px solid var(--qm-lijn); }
}

/* ---- v3.10 tien redenen met eigen tekeningetjes (Franky 10-10-2026: "ipv een emoticon-achtig ding een custom
   tekeningetje met een dier dat past; meer beweging, diertjes die door de tekst lopen of duwen") ----
   Elk vakje: een dier dat de reden uitbeeldt. Bij binnenkomen tikt de tekening aan, bij hover wiebelt ze.
   Spot per vakje (Franky: "elk beestje in zijn vakje een kleine animatie, 1 voor 1, niet te lang"): main.js zet
   .is-actief op één vakje tegelijk (1,3 s per vakje, één ronde wanneer de redenen in beeld komen); dat vakje licht
   op en zijn dier speelt een eigen mini-scenario van ±1 s. Hover speelt hetzelfde. */
.feature { grid-template-columns: 64px 1fr; column-gap: .85rem; padding-top: .55rem; padding-bottom: .55rem; }
.feature-icon.feature-tekening { width: 64px; height: 64px; background: none; border-radius: 0; }
.feature-tekening img { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .feature:hover .feature-icon.feature-tekening { transform: none; }
  .feature:hover .feature-tekening img { animation: qm-wiebel .6s ease-in-out; }
  @keyframes qm-wiebel { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg) translateY(-2px); } 75% { transform: rotate(6deg) translateY(-1px); } }
}

/* Mini-scenario's per reden (alleen transform: licht voor de gsm) */
.feature.is-actief, .feature.onder-kaart.is-in.is-actief { transition-delay: 0s; }
.feature.onder-kaart.is-in.is-actief, .feature.is-actief { border-color: color-mix(in srgb, var(--c) 80%, var(--qm-lijn)); box-shadow: 0 10px 26px rgba(31, 35, 40, .10); transform: translateY(-2px); }
@media (prefers-reduced-motion: no-preference) {
  .feature-tekening img { transform-origin: 50% 90%; }
  .feature.is-actief:nth-child(1) .feature-tekening img, .feature:hover:nth-child(1) .feature-tekening img { animation: qm-stamp 1.7s ease-in-out; }
  .feature.is-actief:nth-child(2) .feature-tekening img, .feature:hover:nth-child(2) .feature-tekening img { animation: qm-spat 1.7s ease-in-out; }
  .feature.is-actief:nth-child(3) .feature-tekening img, .feature:hover:nth-child(3) .feature-tekening img { animation: qm-poets 1.7s ease-in-out; }
  .feature.is-actief:nth-child(4) .feature-tekening img, .feature:hover:nth-child(4) .feature-tekening img { animation: qm-kaars 1.8s ease-in-out; }
  .feature.is-actief:nth-child(5) .feature-tekening img, .feature:hover:nth-child(5) .feature-tekening img { animation: qm-zon 1.8s ease-in-out; }
  .feature.is-actief:nth-child(6) .feature-tekening img, .feature:hover:nth-child(6) .feature-tekening img { animation: qm-kopstoot 1.6s ease-in-out; }
  .feature.is-actief:nth-child(7) .feature-tekening img, .feature:hover:nth-child(7) .feature-tekening img { animation: qm-rol 1.7s ease-in-out; }
  .feature.is-actief:nth-child(8) .feature-tekening img, .feature:hover:nth-child(8) .feature-tekening img { animation: qm-kring 1.8s ease-in-out; transform-origin: 50% 50%; }
  .feature.is-actief:nth-child(9) .feature-tekening img, .feature:hover:nth-child(9) .feature-tekening img { animation: qm-zak 1.9s ease-in-out; }
  .feature.is-actief:nth-child(10) .feature-tekening img, .feature:hover:nth-child(10) .feature-tekening img { animation: qm-meet 1.8s ease-in-out; transform-origin: 0% 90%; }
  @keyframes qm-stamp { 0%, 100% { transform: none; } 20%, 60% { transform: translateY(-6px); } 40%, 80% { transform: translateY(1px) scaleY(.92); } }
  @keyframes qm-spat { 0%, 100% { transform: none; } 15% { transform: rotate(-6deg); } 35% { transform: rotate(5deg); } 55% { transform: rotate(-4deg); } 75% { transform: rotate(3deg); } }
  @keyframes qm-poets { 0%, 100% { transform: none; } 25%, 75% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
  @keyframes qm-kaars { 0%, 100% { transform: none; filter: none; } 50% { transform: scale(1.06); filter: drop-shadow(0 0 6px rgba(236, 208, 78, .9)); } }
  @keyframes qm-zon { 0%, 100% { transform: none; filter: none; } 50% { transform: translateY(-3px); filter: brightness(1.08) drop-shadow(0 0 8px rgba(236, 208, 78, .8)); } }
  @keyframes qm-kopstoot { 0%, 100% { transform: none; } 30% { transform: translateX(-4px) rotate(-3deg); } 50% { transform: translateX(5px) rotate(2deg); } 65% { transform: translateX(-1px); } }
  @keyframes qm-rol { 0%, 100% { transform: none; } 25%, 75% { transform: translateY(-4px); } 50% { transform: translateY(2px); } }
  @keyframes qm-kring { from { transform: rotate(0); } to { transform: rotate(360deg); } }
  @keyframes qm-zak { 0%, 100% { transform: none; } 45%, 70% { transform: translateY(3px) scale(.96, 1.02); } }
  @keyframes qm-meet { 0%, 100% { transform: none; } 50% { transform: scaleX(1.1); } }
}

/* ---- v3.10 zachte overgang foto -> tekst (Franky 10-10-2026: "de overgang was mooier dan een lijn, dat het meer
   één vak is") — de foto vloeit uit in het papier van de tekstkant; op gsm naar onder, op desktop naar rechts. ---- */
.circular-figure::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(246, 243, 236, 0) 0%, var(--qm-papier) 100%);
}
.circular-figure .carousel-btn, .circular-figure .carousel-dots { z-index: 2; }
@media (min-width: 1000px) {
  .circular-figure::after { left: auto; top: 0; height: auto; width: 22%; background: linear-gradient(90deg, rgba(246, 243, 236, 0) 0%, rgba(246, 243, 236, .75) 60%, var(--qm-papier) 100%); }
  .circular-figure .carousel-next { right: 1.6rem; }
}

/* ---- v3.10 scène per vakje (Franky 10-10-2026: "per vakje echt een volledige scène in tekening rond de tekst,
   als het waait dat je wind ziet"; "de kleur van het vak mag mee veranderen"; "tikje langer") ----
   Elk vakje heeft een getekende scène (svg, lijnen in de kleur van de reden) die alleen leeft als het vakje in de
   spot staat of onder de muis is: dreunlijnen, druppels, sterretjes, vlammetjes + schild, zon + wind, inslag,
   verfbaan, cirkelpijlen, zzz + hartjes, maatlijnen. Het vak kleurt zacht mee. */
.feature { overflow: hidden; transition: background-color .5s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.feature > :not(.scene) { position: relative; z-index: 1; }
.feature.is-actief, .feature.onder-kaart.is-in.is-actief { background: color-mix(in srgb, var(--c) 16%, #fff); }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease);
  color: color-mix(in srgb, var(--c) 70%, var(--qm-inkt)); }
.scene .lijn { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.scene .vul { fill: currentColor; opacity: .75; }
.scene .verf { fill: none; stroke: color-mix(in srgb, var(--c) 45%, transparent); stroke-width: 14; stroke-linecap: round; }
.scene g, .scene path, .scene circle { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .feature.is-actief .scene, .feature:hover .scene { opacity: 1; }
  /* tekenen: lijn verschijnt alsof hij getekend wordt */
  .scene .teken { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .feature.is-actief .scene .teken, .feature:hover .scene .teken { animation: qm-teken 1.1s cubic-bezier(.3, .7, .2, 1) var(--d, 0s) forwards; }
  @keyframes qm-teken { to { stroke-dashoffset: 0; } }
  /* stofwolkjes */
  .feature.is-actief .scene .wolk, .feature:hover .scene .wolk { stroke-dasharray: 1; stroke-dashoffset: 1; animation: qm-teken .7s ease-out calc(.5s + var(--d, 0s)) forwards, qm-vervaag 1.8s ease-in var(--d, 0s) forwards; }
  @keyframes qm-vervaag { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
  /* druppels vallen en spatten */
  .scene .druppel { transform: translate(var(--x), -12px); }
  .feature.is-actief .scene .druppel, .feature:hover .scene .druppel { animation: qm-val 1.1s cubic-bezier(.5, 0, .9, .6) var(--d, 0s) 2; }
  @keyframes qm-val { from { transform: translate(var(--x), -12px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translate(var(--x), 88px); opacity: 0; } }
  .scene .spat { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .feature.is-actief .scene .spat, .feature:hover .scene .spat { animation: qm-teken .35s ease-out var(--d, 0s) forwards; }
  /* sterretjes twinkelen */
  .scene .ster { scale: 0; }
  .feature.is-actief .scene .ster, .feature:hover .scene .ster { animation: qm-twinkel 1.2s ease-in-out var(--d, 0s) 2; }
  @keyframes qm-twinkel { 0%, 100% { scale: 0; } 50% { scale: 1.15; } }
  /* vlammetjes flakkeren (en het schild tekent zich: QMtex vat geen vuur) */
  .feature.is-actief .scene .vlam, .feature:hover .scene .vlam { animation: qm-flakker .45s ease-in-out var(--d, 0s) 4 alternate; transform-origin: 50% 100%; }
  @keyframes qm-flakker { from { scale: 1 .7; } to { scale: .9 1.15; } }
  /* zon draait, wind waait */
  .feature.is-actief .scene .zon, .feature:hover .scene .zon { animation: qm-draai 3s linear infinite; }
  @keyframes qm-draai { to { rotate: 1turn; } }
  .scene .wind { stroke-dasharray: .35 .65; stroke-dashoffset: 1; }
  .feature.is-actief .scene .wind, .feature:hover .scene .wind { animation: qm-waai 1.2s linear var(--d, 0s) infinite; }
  @keyframes qm-waai { to { stroke-dashoffset: -1; } }
  /* inslag springt open */
  .scene .inslag { scale: 0; }
  .feature.is-actief .scene .inslag, .feature:hover .scene .inslag { animation: qm-inslag .9s cubic-bezier(.2, 1.6, .4, 1) .35s 2 both; }
  @keyframes qm-inslag { 0% { scale: 0; opacity: 0; } 40% { scale: 1.15; opacity: 1; } 100% { scale: 1; opacity: 0; } }
  /* cirkelpijlen draaien */
  .feature.is-actief .scene .kring, .feature:hover .scene .kring { animation: qm-draai 2s cubic-bezier(.5, 0, .5, 1) infinite; }
  /* zzz en hartjes stijgen op */
  .scene .stijg { opacity: 0; }
  .feature.is-actief .scene .stijg, .feature:hover .scene .stijg { animation: qm-stijg 1.6s ease-out var(--d, 0s) forwards; }
  @keyframes qm-stijg { 0% { opacity: 0; translate: 0 10px; } 30% { opacity: 1; } 100% { opacity: 0; translate: 0 -22px; } }
}
@media (prefers-reduced-motion: reduce) { .scene { display: none; } }
/* 11-10 (Franky): op gsm mag de scène nooit over de tekst gaan. De scène krijgt een eigen strook onderaan het vak
   (viewBox 330–600 = alleen het getekende deel, dus op desktop verandert er niets) en speelt daar op volle sterkte. */
@media (max-width: 700px) {
  .feature { padding-bottom: calc(.55rem + 38px); }
  .feature .scene { inset: auto 10px 4px 10px; width: calc(100% - 20px); height: 36px; }
}

/* 10-10 (Franky): de talenknop zweeft rechtsboven (qmtex-i18n.js, position fixed) en lag over de Contact-knop
   zodra het venster smaller is dan de container + knop. Desktop: de navigatie houdt rechts plaats vrij. */
@media (min-width: 821px) {
  .site-header .nav-wrap { padding-right: max(0px, calc(92px - (100vw - min(100vw - 2rem, var(--max))) / 2)); }
  /* even hoog als de Contact-knop en op dezelfde middellijn (kopbalk 76px, knop 42,4px); !important: qmtex-i18n.js spuit zijn stijl later in */
  #qmtex-lang-switcher { top: calc(16.8px + env(safe-area-inset-top, 0px)) !important; }
  #qmtex-lang-switcher .qmtex-current { min-height: 0 !important; height: 42.4px; }
}
/* 10-10: de header (hoofdstuk 0) is het vooraanzicht dat recht omhoog gaat; het onderwerp staat in het midden van de clip */
@media (min-width: 701px) { .film-stage video[data-chapter="0"]:not(.is-staand) { object-position: 50% 50%; } }
/* staande clip in een breed vak (venster eerst staand geladen): onderkant vast, het eindbeeld toont altijd de meubels */
@media (min-width: 701px) { .film-stage video[data-chapter="0"].is-staand { object-position: 50% 74%; } }
/* 10-10: op brede schermen brak "Designed to last." in twee; elke titelregel blijft één regel */
@media (min-width: 701px) { .film-intro h1 .hl { white-space: nowrap; } } /* gsm mag breken: DE/IT/ES-titels zijn langer */

/* 10-10 (Franky): alle knoppen even hoog — gsm: talenknop op de hoogte en middellijn van de Contact-knop in de kopbalk */
@media (max-width: 700px) {
  #qmtex-lang-switcher { top: calc(10.6px + env(safe-area-inset-top, 0px)) !important; }
  #qmtex-lang-switcher .qmtex-current { min-height: 0 !important; height: 30.8px; }
}
/* tablet (701–820px, kopbalk 76px): talenknop even hoog als de Contact-knop */
@media (min-width: 701px) and (max-width: 820px) {
  #qmtex-lang-switcher { top: calc(17.7px + env(safe-area-inset-top, 0px)) !important; }
  #qmtex-lang-switcher .qmtex-current { min-height: 0 !important; height: 40.6px; }
}

/* 10-10 (Franky): op gsm geen donkere waas over de headerfilm, het beeld moet helder zijn.
   De tekst blijft leesbaar met een zachte schaduw rond de letters zelf. */
@media (max-width: 700px) {
  /* alleen een smalle donkere rand onderaan, achter de tekst; de rest van het beeld blijft helder */
  .film-stage:has(video[data-chapter="0"].is-active) .film-shade { background: linear-gradient(0deg, rgba(10,11,13,.62) 0%, rgba(10,11,13,.28) 20%, rgba(10,11,13,0) 36%); }
  .film-intro h1, .film-intro > p { text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.5); }
}

/* 10-10 (Franky): tekst in het uitklapmenu in het midden */
@media (max-width: 820px) { .primary-nav a { text-align: center; } }
/* QA 10-10: de schuine filmkaarten staan bij het laden buiten beeld en gaven een zijwaartse scroll (768/1280/1920) */
html, body { overflow-x: clip; }
/* QA 10-10: sluitknop van de lightbox lag over de pijl 'volgende' (.lightbox button won van .lb-close) en onder de talenknop */
.lightbox .lb-close { top: 1rem; right: 1rem; transform: none; }
body:has(.lightbox:not([hidden])) #qmtex-lang-switcher, body:has(.model-pop) #qmtex-lang-switcher { display: none; }

/* ---- v3.11 (11-10-2026): collectiekaarten linken naar hun modelpagina; subpagina's modellen en hercoaten ---- */
.model-card { position: relative; }
.model-card-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.model-card-link:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 2px; }
/* 11-10 (Franky): ook op gsm gaat een tik op een model meteen naar zijn pagina, geen pop-up meer ertussen */
.model-pop-link { margin-top: .6rem; pointer-events: auto; }
.meer-link { margin: .9rem 0 0; font-weight: 700; }
.meer-link a { color: var(--qm-inkt); text-decoration: underline; text-decoration-color: var(--c-yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.meer-link a::after { content: " →"; }

.subpagina main { background: var(--qm-wit); color: var(--qm-inkt); }
.subpagina .section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.subpagina-band { background: var(--qm-papier); }
.subpagina h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.05; margin: .6rem 0 .5rem; }
.subpagina h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 1rem; }
.kruimel { font-size: .85rem; color: var(--qm-mat); padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.kruimel a { color: var(--qm-mat); }
.kruimel [aria-current] { color: var(--qm-inkt); font-weight: 600; }
.subpagina-kop { padding: 1.5rem 0 1.5rem; max-width: 760px; }
.model-held { display: grid; gap: clamp(1.25rem, 4vw, 3rem); align-items: center; padding: 1.25rem 0 clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 860px) { .model-held { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.model-held-beeld img { width: 100%; height: auto; display: block; border-radius: 16px; background: #e9e8e3; }
.model-held-foto img { aspect-ratio: 3 / 2; object-fit: cover; }
.model-held-maat { font-weight: 700; font-size: 1.1rem; margin: 0 0 .8rem; color: var(--qm-mat); }
.model-held-tekst .lede { margin-bottom: .8rem; }
.subpagina-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.spec-lijst { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .6rem; margin: 0; }
.spec-lijst > div { background: var(--qm-wit); border: 1px solid var(--qm-lijn); border-radius: 12px; padding: .8rem 1rem; }
.spec-lijst dt { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--qm-mat); }
.spec-lijst dd { margin: .2rem 0 0; font-weight: 600; }
.model-fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: .75rem; margin-top: 1rem; }
.model-fotos figure { margin: 0; }
.model-fotos img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; display: block; }
.model-tegels { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .75rem; }
.model-tegels-groot { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1rem; padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.model-tegel > a { display: block; height: 100%; background: var(--qm-wit); border: 1px solid var(--qm-lijn); border-radius: 14px; padding: .75rem; color: var(--qm-inkt); text-decoration: none; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.model-tegel > a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.model-tegel img { width: 100%; height: auto; display: block; border-radius: 10px; background: #e9e8e3; }
.model-tegel h2, .model-tegel h3 { font-size: 1.05rem; margin: .6rem 0 .1rem; }
.model-tegel-soort, .model-tegel-maat { margin: 0; font-size: .88rem; color: var(--qm-mat); }
.subpagina-twee { display: grid; gap: clamp(1.25rem, 4vw, 3rem); align-items: start; }
@media (min-width: 860px) { .subpagina-twee { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.subpagina-twee figure { margin: 0; }
.subpagina-twee figure img { width: 100%; height: auto; border-radius: 14px; display: block; }
.subpagina .tekening { width: min(220px, 60%); height: auto; display: block; margin-top: 1rem; }
.voordelen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .75rem; }
.voordelen li { background: var(--qm-wit); border: 1px solid var(--qm-lijn); border-left: 4px solid var(--c-yellow); border-radius: 12px; padding: 1rem 1.1rem; }
.voordelen h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.voordelen p { margin: 0; color: var(--qm-mat); }
.subpagina .pullquote { font-weight: 700; font-size: 1.15rem; border-left: 4px solid var(--c-yellow); padding-left: .9rem; }

/* 11-10 (Franky): de maatwerkband (wanden, stootkussens, hele kamer) staat bovenaan het blok, boven de foto's: beter gelezen */
@media (min-width: 1000px) {
  .circular .grid-2 > .callout { grid-row: 1; }
  .circular-figure { grid-area: 2 / 1; }
  .circular .grid-2 > div:not(.callout) { grid-area: 2 / 2; }
}
/* gsm: specificaties en modeltegels twee per rij, anders wordt de pagina eindeloos lang */
@media (max-width: 700px) {
  .spec-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .spec-lijst > div { padding: .6rem .7rem; }
  .spec-lijst dd { font-size: .92rem; }
  .model-tegels, .model-tegels-groot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .model-tegel > a { padding: .5rem; }
  .model-tegel h2, .model-tegel h3 { font-size: .95rem; }
  .model-fotos { grid-template-columns: 1fr; }
}

/* 11-10 (Franky): pijlen en bolletjes van de fotocarrousel subtieler — kleiner, half doorzichtig, zonder witte balk;
   bij aanwijzen of focus worden ze weer volledig zichtbaar. */
.circular-figure .carousel-btn {
  width: 32px; height: 32px; font-size: .95rem; top: calc(50% - 16px);
  background: rgba(255, 255, 255, .55); color: var(--qm-inkt); border: 0; box-shadow: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: .75; transition: opacity .2s var(--ease), background-color .2s var(--ease);
}
.circular-figure .carousel-prev { left: .6rem; }
.circular-figure .carousel-next { right: .6rem; }
.circular-figure:hover .carousel-btn, .circular-figure .carousel-btn:focus-visible { opacity: 1; }
.circular-figure .carousel-btn:hover { background: rgba(255, 255, 255, .9); }
.circular-figure .carousel-dots { background: none; padding: 0; bottom: .55rem; gap: 0; }
.circular-figure .carousel-dot { width: 16px; height: 16px; }
.circular-figure .carousel-dot.is-active { width: 16px; }
.circular-figure .carousel-dot::before { width: 6px; height: 6px; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px rgba(31, 35, 40, .18); }
.circular-figure .carousel-dot.is-active::before { background: #fff; transform: scaleX(2); box-shadow: 0 0 0 1px rgba(31, 35, 40, .25); }
@media (max-width: 560px) { .circular-figure .carousel-btn { width: 30px; height: 30px; } }
/* v3.11.2: tekeningen en 3D-modellen op de modelpagina's */
.model-3d-knop { margin-top: .75rem; }
.model-3d-hint { margin: .5rem 0 0; font-size: .85rem; color: var(--qm-mat); }
.model-3d { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 16px; background: #e9e8e3; --poster-color: #e9e8e3; }
.cad-noot { font-weight: 600; margin: .4rem 0 1rem; }
.downloads { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.downloads a { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto auto; gap: .9rem; align-items: center; padding: .75rem 1rem; background: var(--qm-wit); border: 1px solid var(--qm-lijn); border-radius: 12px; color: var(--qm-inkt); text-decoration: none; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.downloads a:hover { border-color: var(--qm-inkt); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.dl-type { font-weight: 800; letter-spacing: .06em; background: var(--qm-inkt); color: var(--c-yellow); border-radius: 8px; text-align: center; padding: .35rem 0; font-size: .85rem; }
.dl-maat { color: var(--qm-mat); font-size: .85rem; white-space: nowrap; }
.dl-actie { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.dl-actie::after { content: " ↓"; }
@media (max-width: 700px) {
  .downloads a { grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: .25rem .7rem; padding: .65rem .75rem; }
  .downloads .dl-type { grid-row: span 2; }
  .downloads .dl-tekst { grid-column: 2 / 4; }
  .downloads .dl-maat { grid-column: 2; grid-row: 2; }
  .downloads .dl-actie { grid-column: 3; grid-row: 2; }
  .dl-tekst { font-size: .92rem; }
}
.model-3d-knop[hidden] { display: none; }
/* v3.11.7: downloadtabel op het modellenoverzicht */
.cad-tabel { width: 100%; border-collapse: separate; border-spacing: 0 .4rem; margin: .5rem 0 0; }
.cad-tabel th, .cad-tabel td { background: var(--qm-wit); border-top: 1px solid var(--qm-lijn); border-bottom: 1px solid var(--qm-lijn); padding: .7rem 1rem; text-align: left; }
.cad-tabel th { border-left: 1px solid var(--qm-lijn); border-radius: 12px 0 0 12px; font-weight: 700; white-space: nowrap; }
.cad-tabel td { border-right: 1px solid var(--qm-lijn); border-radius: 0 12px 12px 0; }
.cad-tabel th a { color: var(--qm-inkt); }
.cad-tabel td a { display: inline-block; margin: .15rem .3rem .15rem 0; padding: .3rem .6rem; border-radius: 8px; background: var(--qm-inkt); color: var(--c-yellow); font-weight: 800; font-size: .82rem; letter-spacing: .05em; text-decoration: none; }
.cad-tabel td a:hover { background: var(--c-yellow); color: var(--qm-inkt); }
/* menu met vijf items: op middelbreedte iets compacter zodat alles op één rij past */
@media (min-width: 821px) and (max-width: 1180px) { .primary-nav { gap: .9rem; } .primary-nav a { font-size: .9rem; } }
/* 11-10 (Franky): zesde vak in het modellenoverzicht — maatwerk of eigen ontwerp, met belknop */
@media (min-width: 860px) { .model-tegels-groot { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.maatwerk-vak { height: 100%; display: flex; flex-direction: column; background: var(--qm-wit); border: 1px solid var(--qm-lijn); border-radius: 14px; padding: .75rem; } /* zelfde kaartje als de vijf modellen */
.maatwerk-vak > img { width: 100%; height: auto; display: block; border-radius: 10px; background: #e9e8e3; }
.maatwerk-beeld { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: #fff; border-radius: 10px; }
.maatwerk-beeld img { width: 70%; height: auto; }
.maatwerk-vraag { position: absolute; top: .5rem; right: .5rem; width: 2.6rem; height: 2.6rem; border-radius: 999px; display: grid; place-items: center; background: var(--c-yellow); color: var(--qm-inkt); font: 900 1.6rem/1 var(--font-head, inherit); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.model-tegel-maatwerk h2 { font-size: 1.05rem; margin: .6rem 0 .2rem; }
.maatwerk-knoppen { margin: auto 0 0; padding-top: .7rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.maatwerk-knoppen .btn { padding: .55rem 1rem; }
.maatwerk-link { color: var(--qm-inkt); font-weight: 700; font-size: .9rem; text-decoration: underline; text-decoration-color: var(--c-yellow); text-decoration-thickness: 3px; text-underline-offset: 3px; }
@media (max-width: 700px) {
  .maatwerk-vak { padding: .5rem; }
  .maatwerk-vraag { width: 2rem; height: 2rem; font-size: 1.2rem; }
  .model-tegel-maatwerk h2 { font-size: .95rem; }
  .model-tegel-maatwerk .model-tegel-soort { font-size: .82rem; }
  .maatwerk-knoppen .btn { padding: .45rem .75rem; font-size: .85rem; }
  .maatwerk-link { font-size: .8rem; }
}
.maatwerk-vak { padding: .75rem; }
@media (max-width: 700px) { .maatwerk-vak { padding: .5rem; } .maatwerk-knoppen { gap: .35rem; } .maatwerk-knoppen .btn { width: 100%; justify-content: center; } }

/* 11-10 (Franky, iPhone): elke foto precies de volle breedte, ook in Safari (aspect-ratio + height:100% gaf daar smallere dia's),
   en de snap houdt bij elke foto halt */
.circular-figure .carousel-slide, .circular-figure .carousel-slide.onder-kaart, .circular-figure .carousel-slide.onder-kaart.is-in { width: 100%; min-width: 100%; scroll-snap-stop: always; }
@media (max-width: 999px) {
  .circular-figure { aspect-ratio: 16 / 10; }
  .circular-figure .carousel, .circular-figure .carousel-track { position: absolute; inset: 0; height: auto; }
  .circular-figure .carousel-slide, .circular-figure .carousel-slide.onder-kaart, .circular-figure .carousel-slide.onder-kaart.is-in { aspect-ratio: auto; height: 100%; }
}
/* maatwerk-vak ook bij "Andere modellen": op gsm over de volle breedte, foto links en tekst rechts */
.model-tegel-maatwerk h3 { font-size: 1.05rem; margin: .6rem 0 .2rem; }
@media (max-width: 700px) {
  .model-tegels:not(.model-tegels-groot) .model-tegel-maatwerk { grid-column: 1 / -1; }
  .model-tegels:not(.model-tegels-groot) .maatwerk-vak { display: grid; grid-template-columns: 38% 1fr; gap: 0 .7rem; align-items: start; }
  .model-tegels:not(.model-tegels-groot) .maatwerk-vak > img { grid-row: span 3; }
  .model-tegels:not(.model-tegels-groot) .model-tegel-maatwerk h3 { margin-top: .1rem; font-size: .95rem; }
  .model-tegels:not(.model-tegels-groot) .maatwerk-knoppen .btn { width: auto; }
}

/* 11-10 (Franky: "het is een labyrint geworden"): het menu toont waar je bent; kruimelpad duidelijker */
.primary-nav a[aria-current]:not(.nav-cta) { color: var(--qm-inkt); text-decoration: underline; text-decoration-color: var(--c-yellow); text-decoration-thickness: 3px; text-underline-offset: 8px; }
@media (max-width: 820px) { .primary-nav a[aria-current]:not(.nav-cta) { text-underline-offset: 5px; background: color-mix(in srgb, var(--c-yellow) 14%, #fff); } }
.kruimel { font-size: .95rem; padding: 1rem 0 .25rem; color: var(--qm-mat); }
.kruimel a { color: var(--qm-inkt); font-weight: 600; text-decoration: underline; text-decoration-color: var(--qm-lijn); text-underline-offset: 3px; }
.kruimel [aria-current] { background: var(--c-yellow); color: var(--qm-inkt); padding: .05rem .5rem; border-radius: 6px; }
/* geen kruimelpad meer (het menu toont waar je bent); op een modelpagina één duidelijke weg terug */
.terug { padding-top: 1rem; margin-top: 0; margin-bottom: 0; }
.terug .btn { padding: .5rem 1rem; font-size: .92rem; } /* 11-10 (Franky): gewone knop, geen pijltje */
.subpagina-kop { padding-top: 2rem; }
.subpagina .model-held { padding-top: 1rem; }
/* 11-10 (Franky): kleuren aanklikken en meteen op het 3D-model zien */
.kleuren { margin-top: .9rem; }
.kleuren-titel { margin: 0 0 .4rem; font-weight: 700; font-size: .92rem; }
.kleuren-rij { display: flex; flex-wrap: wrap; gap: .45rem; }
.kleur { width: 30px; height: 30px; border-radius: 999px; background: var(--k); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--qm-lijn); cursor: pointer; padding: 0; transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.kleur:hover { transform: scale(1.1); }
.kleur[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--qm-inkt); transform: scale(1.1); }
.kleur:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 2px; }
.kleuren-noot { margin: .45rem 0 0; font-size: .82rem; color: var(--qm-mat); }
@media (max-width: 700px) { .kleur { width: 34px; height: 34px; } }
/* 11-10 (Franky): elke hoofdpagina een eigen kleur die van het geselecteerde menu-item de pagina in loopt.
   Modellen = QMtex-geel, Hercoaten = saliegroen (circulair). main.js zet data-sectie op <html>. */
:root[data-sectie="modellen"] { --sectie: #ECD04E; --sectie-licht: #FBF4D2; }
:root[data-sectie="hercoaten"] { --sectie: #8FAE89; --sectie-licht: #E7EFE5; }
[data-sectie] .site-header { border-bottom: 4px solid var(--sectie); }
[data-sectie] .primary-nav a[aria-current] { text-decoration: none; background: var(--sectie); color: var(--qm-inkt); border-radius: 10px 10px 0 0; padding: .55rem .9rem calc(.55rem + 14px); margin-bottom: -14px; }
[data-sectie] .subpagina main, [data-sectie] body.subpagina main { background: linear-gradient(to bottom, var(--sectie-licht) 0, var(--sectie-licht) 140px, var(--qm-wit) 520px); }
@media (max-width: 820px) {
  [data-sectie] .primary-nav a[aria-current] { border-radius: 8px; padding: .9rem .25rem; margin-bottom: 0; background: var(--sectie-licht); box-shadow: inset 4px 0 0 var(--sectie); }
}
/* 11-10: draaiende modellen bovenaan, met kleurwissel (film.js) */
.model-card video.model-draai { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .9s var(--ease); }
@media (max-width: 700px) { .model-card video.model-draai { aspect-ratio: 1; border-radius: 10px; background: #e9e8e3; } }
/* 11-10: de vijf draaiende modellen ook bovenaan de modelpagina's, kleiner; het huidige model gemarkeerd */
.collectie-sub { padding-top: .75rem; padding-bottom: .25rem; background: transparent; }
.collectie-sub .model-card.is-huidig { outline: 3px solid var(--sectie, var(--c-yellow)); outline-offset: 2px; border-radius: 14px; }
@media (min-width: 701px) { .collectie-sub .model-grid { max-width: 900px; margin-left: auto; margin-right: auto; } .collectie-sub .model-info .model-size { display: none; } }

/* 11-10 (Franky): ook Eigenschappen krijgt een eigen kleur die van het menu het blok in loopt (lichtblauw, merkblauw) */
:root[data-sectie="eigenschappen"] { --sectie: #A9BED6; --sectie-licht: #EAF0F7; }
.site-header, .features { transition: border-color .4s var(--ease), background-color .5s var(--ease); }
:root[data-sectie="eigenschappen"] .features { background: linear-gradient(to bottom, var(--sectie-licht) 0, var(--sectie-licht) 55%, var(--qm-papier) 100%); }
:root:not([data-sectie]) .site-header { border-bottom-color: var(--qm-lijn); }
.kleuren[hidden] { display: none; }

/* 11-10: kleuren meteen zichtbaar, nooit eerst geel (zelfde startkleuren als film.js) */
.model-card:nth-child(1) video.model-draai { filter: hue-rotate(170deg) saturate(1.35) brightness(.84); }
.model-card:nth-child(2) video.model-draai { filter: hue-rotate(-42deg) saturate(1.25) brightness(.86); }
.model-card:nth-child(3) video.model-draai { filter: hue-rotate(135deg) saturate(.85) brightness(.95); }
.model-card:nth-child(4) video.model-draai { filter: hue-rotate(195deg) saturate(1) brightness(.62); }
.model-card:nth-child(5) video.model-draai { filter: hue-rotate(-68deg) saturate(.75) brightness(1.02); }
/* maatwerk-vak onderaan een modelpagina: één brede kaart */
.model-tegels-maatwerk { grid-template-columns: 1fr; max-width: 720px; }
.model-tegels-maatwerk .maatwerk-vak { display: grid; grid-template-columns: 200px 1fr; gap: 0 1rem; align-items: center; }
.model-tegels-maatwerk .maatwerk-vak > img { grid-row: span 3; }
@media (max-width: 700px) { .model-tegels-maatwerk .maatwerk-vak { grid-template-columns: 38% 1fr; } }
.maatwerk-blok figure img { max-width: 360px; margin-left: auto; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 859px) { .maatwerk-blok figure img { max-width: 260px; margin: 0 auto; } }

/* 11-10 (Franky): het vraagteken als zesde vak in de strook, wisselt mee van kleur */
.collection-top .model-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.model-card img.model-draai { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .9s var(--ease); }
.model-card:nth-child(6) .model-draai { filter: hue-rotate(-100deg) saturate(.9) brightness(.8); }
.maatwerk-blok img.model-draai { transition: filter .9s var(--ease); filter: hue-rotate(-100deg) saturate(.9) brightness(.8); }
@media (max-width: 700px) { .model-card img.model-draai { aspect-ratio: 1; border-radius: 10px; } }
/* ankers niet onder de vaste kopbalk laten verdwijnen */
section[id], #downloads { scroll-margin-top: 90px; }
@media (max-width: 700px) { section[id], #downloads { scroll-margin-top: 64px; } }
.model-held-beeld { position: relative; }
.model-3d.laden { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
.model-3d { transition: opacity .4s var(--ease); }
/* 11-10 (Franky, gsm): kleine tekening bovenaan, dan meteen het formulier, de gegevens eronder */
@media (max-width: 700px) {
  .contact-vak .tekening-contact { order: 1; width: 110px; margin: .75rem auto 0; }
  .contact-vak .contact-form { order: 2; }
  .contact-vak .contact-list { order: 3; }
}
/* 11-10 (Franky: "op gsm veel te donker, iets luchtiger, zeker niet wit"): het blok met de acht filmkaarten en het
   bijschrift erboven in licht steengrijs i.p.v. bijna zwart; kaarten licht met donkere tekst. De headerfilm blijft. */
:root { --qm-steen: #DCD6CA; --qm-steen-kaart: #F2EEE5; }
.band-note, .film-grid { background: var(--qm-steen); }
.band-note { color: var(--qm-inkt); }
.band-note strong { color: var(--qm-inkt); background: linear-gradient(transparent 62%, color-mix(in srgb, var(--c-yellow) 75%, transparent) 62%); padding: 0 .1em; }
.band-note span { color: var(--qm-mat); }
.film-kaart { background: var(--qm-steen-kaart); }
.film-kaart h3 { color: var(--qm-inkt); }
.film-kaart p:not(.film-num) { color: var(--qm-mat); }
@media (min-width: 701px) { .film-kaart { box-shadow: 0 14px 34px rgba(31, 35, 40, .14); } }
/* 11-10 (Franky): op de modelpagina meteen het 3D-model; de foto blijft verborgen tenzij er geen 3D kan (model3d.js) */
.model-held-beeld { background: #e9e8e3; border-radius: 16px; aspect-ratio: 1; }
.model-vak > img { opacity: 0; }
.model-held-beeld.zonder-3d .model-vak > img { opacity: 1; }
.model-held-beeld > .model-3d.laden { opacity: 0; }
/* draaiende clip als voorloper van het 3D-model (model3d.js) */
.model-voorloper { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; transition: opacity .45s var(--ease); }
.model-voorloper.weg { opacity: 0; }
.model-held-beeld > .model-3d { position: relative; z-index: 1; }
.model-held-beeld > .model-3d.laden { position: absolute; }
/* 11-10 (Franky): de specificaties rollen mee met de kleur van het 3D-model (model3d.js zet --model-kleur) */
.spec-band { background: color-mix(in srgb, var(--model-kleur, #E8E2D4) 22%, var(--qm-papier)); transition: background-color .9s var(--ease); }
.spec-band .spec-lijst > div { border-color: color-mix(in srgb, var(--model-kleur, var(--qm-lijn)) 35%, var(--qm-lijn)); transition: border-color .9s var(--ease); }
/* maatwerk-blok sluit direct aan op de downloads */
.cad-band + .subpagina-band { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.cad-band { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
/* 11-10 (Franky: "zo bleek moest het ook niet, iets donkerder"): middenweg tussen bijna zwart en steen — warm taupe */
:root { --qm-steen: #A79F90; --qm-steen-kaart: #EFE9DE; }
.band-note span { color: #2E3238; }
@media (min-width: 701px) { .film-kaart { box-shadow: 0 16px 38px rgba(31, 35, 40, .22); } }
/* 11-10 (Franky: "nog steeds een donkere shade, iets minder"): desktop-header met een veel lichtere waas; de tekst blijft
   leesbaar met een zachte schaduw rond de letters */
@media (min-width: 701px) {
  .film-stage:has(video[data-chapter="0"].is-active) .film-shade {
    background: linear-gradient(90deg, rgba(10,11,13,.42) 0%, rgba(10,11,13,.16) 38%, rgba(10,11,13,0) 62%),
                linear-gradient(0deg, rgba(10,11,13,.22) 0%, rgba(10,11,13,0) 30%);
  }
  .film-intro h1, .film-intro > p { text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 2px 18px rgba(0,0,0,.35); }
}

/* 11-10 (Franky: "kleuren staan op de rand, misplaatst"): alleen het 3D-vak is grijs; uitleg en kleuren eronder op de pagina */
.model-held-beeld { background: none; border-radius: 0; aspect-ratio: auto; }
.model-vak { position: relative; background: #e9e8e3; border-radius: 16px; aspect-ratio: 1; overflow: hidden; }
.model-vak > img, .model-vak > .model-3d { width: 100%; height: 100%; display: block; border-radius: 0; }
.model-vak > .model-3d.laden { position: absolute; inset: 0; }
.model-vak > .model-voorloper { border-radius: 0; }
.model-held-beeld .model-3d-hint { margin: .6rem 0 0; }
.model-held-beeld .kleuren { margin-top: .8rem; }
/* 11-10 (Franky): intro van de downloads compacter — uitleg en maatnoot op één regel, kleiner */
.cad-band h2 { margin-bottom: .35rem; }
.cad-band .lede, .cad-band .cad-noot { display: inline; font-size: .92rem; line-height: 1.5; margin: 0; max-width: none; }
.cad-band .lede { color: var(--qm-mat); }
.cad-band .cad-noot { font-weight: 700; }
.cad-band .cad-noot::before { content: " · "; font-weight: 400; color: var(--qm-mat); }
.cad-band .downloads, .cad-band .cad-tabel { margin-top: .9rem; }

/* ---- 11-10 (Franky: "gsm-versie iets compacter") — alleen gsm ---- */
@media (max-width: 700px) {
  .section, .subpagina .section { padding: 1.6rem 0; }
  h2, .subpagina h2 { font-size: 1.35rem; margin-bottom: .6rem; }
  /* home: acht filmkaarten twee per rij */
  .film-grid { grid-template-columns: 1fr 1fr; gap: .5rem; padding: .6rem .6rem .9rem; }
  .film-kaart-tekst { padding: .5rem .6rem .65rem; }
  .film-kaart h3 { font-size: .92rem; margin-bottom: .15rem; }
  .film-kaart p:not(.film-num) { font-size: .76rem; line-height: 1.35; }
  .band-note { font-size: .9rem; padding-top: .7rem; }
  .intro-band { padding: 1.2rem 0; }
  .intro-band .tekening-intro { width: 110px; }
  .intro-lede { font-size: .95rem; }
  .feature { padding-top: .45rem; padding-bottom: calc(.45rem + 34px); }
  .feature h3 { font-size: .95rem; }
  .feature p { font-size: .82rem; }
  .feature .scene { height: 32px; }
  /* modelpagina */
  .model-held { gap: .9rem; padding-bottom: 1.2rem; }
  .model-held-tekst h1 { font-size: 1.7rem; margin: .4rem 0 .2rem; }
  .model-held-maat { font-size: .95rem; margin-bottom: .4rem; }
  .model-held-tekst .lede { font-size: .95rem; margin-bottom: .4rem; }
  .model-held-tekst > p:not(.lede):not(.model-held-maat):not(.subpagina-cta):not(.eyebrow) { font-size: .85rem; }
  .subpagina-cta { gap: .4rem; margin-top: .8rem; }
  .subpagina-cta .btn { padding: .55rem .85rem; font-size: .88rem; }
  .kleuren { margin-top: .6rem; }
  .kleur { width: 28px; height: 28px; }
  .spec-lijst { gap: .35rem; }
  .spec-lijst > div { padding: .45rem .6rem; }
  .spec-lijst dt { font-size: .62rem; }
  .spec-lijst dd { font-size: .82rem; line-height: 1.3; }
  .downloads { gap: .35rem; }
  .downloads a { padding: .5rem .6rem; gap: .15rem .6rem; }
  .downloads .dl-tekst { font-size: .82rem; line-height: 1.3; }
  .dl-type { font-size: .74rem; padding: .25rem 0; }
  .dl-maat, .dl-actie { font-size: .76rem; }
  .maatwerk-blok { grid-template-columns: 1fr 34%; gap: .8rem; align-items: center; }
  .maatwerk-blok figure { order: 2; }
  .maatwerk-blok figure img { max-width: none; width: 100%; margin: 0; }
  .maatwerk-blok h2 { font-size: 1.2rem; }
  .maatwerk-blok p { font-size: .85rem; margin: .3rem 0; }
  .maatwerk-blok .subpagina-cta { grid-column: 1 / -1; }
  .maatwerk-blok .meer-link { grid-column: 1 / -1; font-size: .85rem; }
  .voordelen { gap: .4rem; }
  .voordelen li { padding: .6rem .75rem; }
  .voordelen h3 { font-size: .95rem; }
  .voordelen p { font-size: .82rem; }
  /* footer compacter */
  .site-footer { padding: 1.2rem 0 .8rem; }
  .footer-grid { gap: .9rem .8rem; font-size: .85rem; }
  .footer-grid h4 { font-size: .72rem; margin-bottom: .3rem; }
  .footer-grid .foot-nav li { margin: .1rem 0; }
  .footer-grid > div:first-child img { width: 64px; }
  .foot-bottom small { font-size: .7rem; }
}
@media (max-width: 700px) { .maatwerk-blok > div { display: contents; } .maatwerk-blok h2, .maatwerk-blok > div > p:not(.subpagina-cta):not(.meer-link) { grid-column: 1; } .maatwerk-blok figure { grid-column: 2; grid-row: 1 / span 3; } }

/* 11-10 (Franky): hercoaten — 3×3 draaiende modellen in wisselende kleuren i.p.v. één foto (film.js kleurt .model-draai) */
.herc-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.herc-raster video { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 12px; background: #e9e8e3; transition: filter .9s var(--ease); }
@media (max-width: 700px) { .herc-raster { gap: .3rem; } .herc-raster video { border-radius: 8px; } }
/* 11-10 (Franky): hercoaten — tekst links, 3×3 rechts; daaronder de tien eigenschappen met animaties */
@media (min-width: 860px) { .pagina-hercoaten .model-held-beeld { order: 2; } }
.herc-features { background: var(--qm-papier); }
.herc-features .section-head h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
/* 11-10 (Franky: "alles compacter"): hercoaten-pagina strakker — kleinere witruimtes en koppen, geen losse tekening onderaan */
.pagina-hercoaten .section { padding: clamp(1.4rem, 3vw, 2.4rem) 0; }
.pagina-hercoaten .model-held { padding-bottom: clamp(1rem, 3vw, 2rem); }
.pagina-hercoaten h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-bottom: .5rem; }
.pagina-hercoaten .subpagina-twee { gap: clamp(1rem, 3vw, 2.5rem); }
.pagina-hercoaten .subpagina-twee p { margin: .35rem 0; }
.pagina-hercoaten .pullquote { font-size: 1.02rem; margin-top: .6rem; }
.pagina-hercoaten .herc-features .section-head { margin-bottom: .9rem; }
/* 11-10 (Franky, iPhone: geen foto, wel pijltje): Safari negeert aspect-ratio op een grid-vak waarvan alle inhoud
   absoluut staat (align-self: stretch wint) → hoogte 0. Vaste verhouding met de padding-truc, werkt overal. */
@media (max-width: 999px) {
  .circular-figure { aspect-ratio: auto; align-self: start; }
  .circular-figure::before { content: ""; display: block; padding-top: 62.5%; }
}

/* ---- 11-10 (Franky): maatwerk-blok met vraagtekens links en rechts, vragen onder elkaar, achtergrond draait door de
   kleuren; elk "?" op de site linkt hierheen (#maatwerk). Tekeningen: de dieren kleuren mee (maskers per dier). ---- */
.circular .grid-2 > .callout { display: flex; align-items: center; justify-content: center; gap: clamp(.75rem, 3vw, 2.5rem);
  background: color-mix(in srgb, var(--callout-k, #ECD04E) 52%, #fff); transition: background-color 1.2s var(--ease); text-align: center; }
.callout-vraag { width: clamp(70px, 9vw, 120px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; flex: 0 0 auto; transition: filter .9s var(--ease); }
.callout-lijst { list-style: none; margin: 0; padding: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.02rem, 1.8vw, 1.4rem); line-height: 1.35; color: var(--qm-inkt); }
.callout-cta { margin: .6rem 0 0; font-size: clamp(.95rem, 1.4vw, 1.1rem); }
.callout-cta a { margin-left: .4rem; color: var(--qm-inkt); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
#maatwerk { scroll-margin-top: 100px; }
@media (max-width: 700px) { .callout-vraag { width: 56px; border-radius: 10px; } .callout-lijst { font-size: .98rem; } }
.kleur-tekening { position: relative; isolation: isolate; }
.kleur-tekening .kt-beeld { display: block; width: 100%; height: auto; }
.kt-laag { position: absolute; inset: 0; background: var(--k, transparent); mix-blend-mode: multiply;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: background-color 1.2s var(--ease); }
.maatwerk-blok figure a { display: block; }
@media (max-width: 700px) {
  .circular .grid-2 > .callout { position: relative; display: block; padding: .9rem 3.4rem; }
  .callout-vraag { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; }
  .callout-vraag:first-child { left: .6rem; }
  .callout-vraag:last-child { right: .6rem; }
  .callout-lijst { font-size: .92rem; line-height: 1.3; }
  .callout-cta { font-size: .88rem; margin-top: .4rem; }
}

/* ---- 11-10 (Franky, QA): tikdoelen op gsm ≥ 44 px, invulvelden 16 px (geen inzoomen op iPhone),
   uitklapmenu in de menukleuren, filmband draait mee door de kleuren van de dieren ---- */
@media (max-width: 820px) {
  .nav-wrap { min-height: 60px; }
  .nav-toggle { width: 44px; height: 44px; padding: 11px; }
  .header-cta { min-height: 40px; display: inline-flex; align-items: center; padding: 0 .9rem; font-size: .85rem; position: relative; }
  .header-cta::after { content: ""; position: absolute; inset: -4px; }
  #qmtex-lang-switcher { top: calc(10px + env(safe-area-inset-top, 0px)) !important; }
  #qmtex-lang-switcher .qmtex-current { height: 40px !important; min-width: 52px !important; padding: 0 10px !important; position: relative; }
  #qmtex-lang-switcher .qmtex-current::after { content: ""; position: absolute; inset: -4px; }
  .primary-nav { top: 60px; }
  /* uitklapmenu: elk item in zijn eigen menukleur */
  .primary-nav a { min-height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 10px; margin: .2rem 0; border-bottom: 0; }
  .primary-nav a[data-sectie="eigenschappen"] { background: #EAF0F7; box-shadow: inset 5px 0 0 #A9BED6; }
  .primary-nav a[data-sectie="modellen"] { background: #FBF4D2; box-shadow: inset 5px 0 0 #ECD04E; }
  .primary-nav a[data-sectie="hercoaten"] { background: #E7EFE5; box-shadow: inset 5px 0 0 #8FAE89; }
  .primary-nav a[aria-current]:not(.nav-cta) { font-weight: 800; }
}
@media (max-width: 700px) {
  .contact-form input, .contact-form textarea, .contact-form select { font-size: 16px; }
  /* carrousel: klein zicht, groot tikvlak */
  .circular-figure .carousel-btn::after { content: ""; position: absolute; inset: -7px; }
  .circular-figure .carousel-dot, .circular-figure .carousel-dot.is-active { width: 28px; height: 36px; }
  .circular-figure .carousel-dots { bottom: .2rem; }
  /* kleurstalen groter met meer ruimte */
  .kleur, .kleur[aria-pressed] { width: 36px; height: 36px; }
  .kleuren-rij { gap: .55rem; }
  /* footerlinks */
  .site-footer a, .footer-grid .link-btn { display: inline-block; padding: .65rem 0; }
  .foot-nav { gap: 0; }
}
.circular-figure .carousel-btn { position: absolute; }

/* filmband: achtergrond draait door de kleuren van de dieren (film.js zet --band-k) */
.band-note, .film-grid { background: color-mix(in srgb, var(--band-k, #A79F90) 42%, #A79F90); transition: background-color 1.4s var(--ease); }

/* ---- 11-10 (Franky): 3D kleiner; kleuren naast het 3D-vak, even hoog (twee kolommen van zeven), op gsm, iPad en desktop ---- */
.model-held-beeld { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; align-items: stretch; max-width: 520px; width: 100%; }
.model-held-beeld .model-vak { grid-column: 1; grid-row: 1; }
.model-held-beeld .model-3d-knop { grid-column: 1; grid-row: 2; justify-self: start; }
.model-held-beeld .model-3d-hint { grid-column: 1 / -1; grid-row: 3; }
.model-held-beeld .kleuren { display: contents; }
.model-held-beeld .kleuren[hidden] { display: none; }
.model-held-beeld .kleuren-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.model-held-beeld .kleuren-rij { grid-column: 2; grid-row: 1; display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, minmax(0, 1fr)); gap: .3rem .35rem; align-items: center; justify-items: center; }
.model-held-beeld .kleur, .model-held-beeld .kleur[aria-pressed] { width: clamp(26px, 3.2vw, 34px); height: clamp(26px, 3.2vw, 34px); }
.model-held-beeld .kleuren-noot { grid-column: 1 / -1; grid-row: 4; margin: .2rem 0 0; }
@media (min-width: 860px) { .model-held { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); } }
@media (max-width: 859px) { .model-held-beeld { margin: 0 auto; } }
@media (max-width: 700px) { .model-held-beeld .kleur, .model-held-beeld .kleur[aria-pressed] { width: 32px; height: 32px; } .model-held-beeld { max-width: 100%; } }

/* 11-10 (Franky): het olifantje zit ín de introtekst — links uitgespaard, de tekst loopt rond de tekening
   (float + shape-outside volgt de vorm van de tekening), op gsm, iPad en desktop */
.intro-band .intro-inner { display: block; }
.intro-band .tekening-intro { float: left; width: clamp(96px, 20vw, 190px); margin: .1rem clamp(.4rem, 1.5vw, 1.2rem) .3rem 0;
  shape-outside: polygon(0% 0%, 0.0% 0.0%, 0.0% 4.0%, 0.0% 4.0%, 0.0% 8.0%, 0.0% 8.0%, 0.0% 12.0%, 45.8% 12.0%, 45.8% 16.0%, 63.6% 16.0%, 63.6% 20.0%, 70.5% 20.0%, 70.5% 24.0%, 71.6% 24.0%, 71.6% 28.0%, 71.6% 28.0%, 71.6% 32.0%, 71.2% 32.0%, 71.2% 36.0%, 69.1% 36.0%, 69.1% 40.0%, 61.0% 40.0%, 61.0% 44.0%, 59.6% 44.0%, 59.6% 48.0%, 60.5% 48.0%, 60.5% 52.0%, 63.6% 52.0%, 63.6% 56.0%, 67.6% 56.0%, 67.6% 60.0%, 67.6% 60.0%, 67.6% 64.0%, 67.8% 64.0%, 67.8% 68.0%, 67.9% 68.0%, 67.9% 72.0%, 67.9% 72.0%, 67.9% 76.0%, 67.9% 76.0%, 67.9% 80.0%, 67.8% 80.0%, 67.8% 84.0%, 67.6% 84.0%, 67.6% 88.0%, 67.0% 88.0%, 67.0% 92.0%, 57.1% 92.0%, 57.1% 96.0%, 0.0% 96.0%, 0.0% 100.0%, 0% 100%); shape-margin: 10px; }
.intro-band .intro-lede { text-align: left; }
.intro-band .intro-inner::after { content: ""; display: block; clear: both; }
@media (max-width: 700px) { .intro-band .tekening-intro { width: 104px; margin-right: .3rem; } }

.intro-band .tekening-intro { animation: none; }
/* 11-10 (Franky): gsm-footer minder diep — Aanbod en Legaal naast elkaar, links compacter */
@media (max-width: 720px) {
  .footer-grid > div:last-child { grid-column: auto; }
  .footer-grid .foot-nav { gap: 0; }
  .site-footer .foot-nav a, .footer-grid .link-btn { padding: .32rem 0; font-size: .86rem; }
  .footer-grid address, .footer-grid p { font-size: .86rem; line-height: 1.55; }
  .footer-grid > div:nth-child(3) a { padding: .32rem 0; }
}
/* 11-10 (Franky): olifantje iets meer naar links, verder van de tekst (de tekening heeft links ±26 % lege ruimte) */
.intro-band .tekening-intro { margin-left: calc(clamp(96px, 20vw, 190px) * -0.2); shape-margin: 18px; }
@media (max-width: 700px) { .intro-band .tekening-intro { margin-left: -14px; shape-margin: 14px; } }
/* 11-10 (Franky): op gsm de vraagtekens onder de tekst, groot en naast elkaar in het volle vak */
@media (max-width: 700px) {
  .circular .grid-2 > .callout { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; padding: 1.1rem 1rem 1.2rem; }
  .callout .callout-tekst { flex: 0 0 100%; order: 1; }
  .callout-vraag, .callout-vraag:first-child, .callout-vraag:last-child { position: static; transform: none; order: 2; width: 104px; }
  .callout-lijst { font-size: 1rem; line-height: 1.4; }
}
@media (max-width: 700px) { .callout-cta a { display: inline-block; white-space: nowrap; } }

/* 11-10: filmband één kleur per dag (film.js), geen overgang bij het laden */
.band-note, .film-grid { transition: none; }
.circular .grid-2 > .callout { transition: none; }
.voet-logo { display: inline-block; }

/* ---- 11-10 (Franky: "compacter"): hercoaten-kop als raster — tekst = eerste vak, even groot als de stoelvakken.
   Desktop/iPad 3×2 (tekst + 5 modellen), gsm 2×2 (tekst + 3 modellen). ---- */
.herc-held { padding-top: 1.2rem; padding-bottom: 1.2rem; }
.herc-held .herc-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; max-width: 980px; margin: 0 auto; }
.herc-held .herc-raster > * { aspect-ratio: 1; min-width: 0; }
.herc-held .herc-raster video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 14px; background: #e9e8e3; transition: filter .9s var(--ease); }
.herc-tekst { display: flex; flex-direction: column; justify-content: center; gap: .45rem; padding: clamp(.8rem, 2vw, 1.4rem); border-radius: 14px;
  background: var(--qm-wit); border: 1px solid var(--qm-lijn); overflow: hidden; }
.herc-tekst .eyebrow { align-self: flex-start; margin: 0; font-size: .62rem; }
.herc-tekst h1 { font-size: clamp(1.25rem, 2.3vw, 1.9rem); line-height: 1.08; margin: 0; }
.herc-tekst .lede { font-size: clamp(.82rem, 1.15vw, .95rem); line-height: 1.45; margin: 0; }
.herc-tekst .subpagina-cta { margin: .2rem 0 0; }
.herc-tekst .subpagina-cta .btn { padding: .5rem .9rem; font-size: .85rem; }
.herc-uitleg { max-width: 980px; margin: .8rem auto 0; font-size: .92rem; color: var(--qm-mat); }
.herc-uitleg p { margin: 0; }
@media (max-width: 700px) {
  .herc-held .herc-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .herc-held .herc-raster video:nth-of-type(n+4) { display: none; }
  .herc-tekst { padding: .7rem; gap: .35rem; }
  .herc-tekst .eyebrow, .herc-tekst .lede { display: none; }
  .herc-tekst h1 { font-size: 1.12rem; }
  .herc-tekst .subpagina-cta .btn { padding: .45rem .7rem; font-size: .78rem; }
  .herc-uitleg { font-size: .88rem; }
}
@media (min-width: 701px) {
  .herc-held .herc-raster, .herc-uitleg { max-width: 840px; }
  .herc-tekst h1 { font-size: clamp(1.15rem, 2vw, 1.55rem); }
  .herc-tekst .lede { font-size: .84rem; line-height: 1.4; }
}
.herc-tekst .eyebrow { display: none; }
@media (min-width: 701px) { .herc-tekst { padding: .9rem 1rem; gap: .4rem; } }
/* 11-10 (Franky): de strook met de zes vakjes bovenaan de home krijgt dezelfde dagkleur als de filmband */
.collection-top:not(.collectie-sub) { background: color-mix(in srgb, var(--band-k, #A79F90) 42%, #A79F90); }
/* gsm: de gele markering alleen achter "Elke vorm. Elke kleur.", niet over de volle breedte */
.band-note strong { display: inline-block; }
.band-note span { display: block; }
/* 11-10 (Franky): het invulformulier in het geel van de Contact-knop bovenaan — wie op Contact klikt, herkent het meteen.
   Velden wit, de knop Versturen donker zodat hij op het geel blijft opvallen. */
.contact .contact-vak .contact-form { background: var(--c-yellow); color: var(--qm-inkt); }
.contact .contact-vak .contact-form input, .contact .contact-vak .contact-form textarea { background: #fff; border-color: rgba(31, 35, 40, .18); }
.contact .contact-vak .contact-form button[type="submit"] { background: var(--qm-inkt); color: var(--c-yellow); border-color: var(--qm-inkt); }
.contact .contact-vak .contact-form button[type="submit"]:hover { background: #000; }
.contact .contact-vak .contact-form .form-note, .contact .contact-vak .contact-form .form-note a, .contact .contact-vak .contact-form .optin { color: var(--qm-inkt); }

/* uitgeknipt vraagteken: alleen op gsm, achter de tekst */
.callout-vraag-los { display: none; }
/* 11-10 (Franky): nog één vraagteken, links, even hoog als de gekleurde band; op gsm groot achter de tekst */
.circular .grid-2 > .callout { position: relative; display: flex; align-items: stretch; justify-content: flex-start; gap: 0; padding: 0; overflow: hidden; }
.callout .callout-vraag { position: static; transform: none; order: 0; flex: 0 0 auto; align-self: stretch; width: clamp(150px, 19vw, 230px); height: auto; max-width: none; aspect-ratio: auto; object-fit: cover; border-radius: 0; }   /* vaste breedte, hoogte rekt mee met de band */
.callout .callout-tekst { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(1rem, 2vw, 1.4rem) clamp(1.2rem, 2.6vw, 2.2rem); }
@media (max-width: 700px) {
  .circular .grid-2 > .callout { display: block; padding: 0; }
  .callout .callout-vraag { display: none; }
  .callout .callout-vraag-los { display: block; position: absolute; left: 50%; top: 7%; height: 86%; width: auto; transform: translateX(-50%); opacity: .4; z-index: 0; pointer-events: none; }   /* 11-10 (Franky): alleen het vraagteken, zonder waas */
  .callout .callout-tekst { position: relative; z-index: 1; padding: 1.2rem 1rem 1.3rem; }
}

/* 11-10 (Franky): modelpagina op gsm compacter — soort-label weg (staat al in de naam), maten achter de naam */
@media (max-width: 700px) {
  .model-held-tekst .eyebrow { display: none; }
  .model-held-tekst h1, .model-held-tekst .model-held-maat { display: inline-block; vertical-align: baseline; }
  .model-held-tekst h1 { margin: .2rem .5rem .3rem 0; }
  .model-held-tekst .model-held-maat { margin: 0 0 .3rem; }
}

/* 11-10 (Franky): de twee knoppen op de modelpagina naast elkaar op gsm */
@media (max-width: 700px) {
  .model-held-tekst .subpagina-cta { flex-wrap: nowrap; }
  .model-held-tekst .subpagina-cta .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
}

/* 11-10 (Franky): de tien redenen zitten in de filmkaarten; drie kaarten tonen een tekening i.p.v. een clip */
.film-kaart-beeld { position: relative; aspect-ratio: 16 / 9; min-height: 0; background: var(--qm-papier, #f4f1ea); overflow: hidden; }
.film-kaart-beeld img { position: absolute; inset: 0; margin: auto; width: auto; height: 78%; max-width: 70%; object-fit: contain; }   /* zelfde hoogte als de clips */

/* 11-10: poster als achtergrond van de filmkaart-video (zie film.js) */
.film-kaart video { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* 11-10: maatwerk-blok op de hercoaten-pagina: tekst verticaal gecentreerd naast het vraagteken */
@media (min-width: 701px) { .meubels-hercoaten .maatwerk-blok, main .maatwerk-blok { align-items: center; } }

/* 11-10 (Franky): de tien redenen genummerd en benoemd */
.band-note .redenen-kop { display: block; margin-top: .55rem; font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.25rem, 2.3vw, 1.9rem); color: #fff; }
.film-kaart .film-num { display: inline-block; margin: 0 0 .45rem; padding: .18rem .5rem; border-radius: 6px; background: var(--c-yellow); color: var(--qm-inkt); font-family: var(--font-display); font-weight: 900; font-size: .85rem; letter-spacing: .08em; line-height: 1.2; }

/* v3.21 (gsm-snelheid): eerste headerbeeld als <img> (LCP), film erover zodra hij speelt. Zelfde kadrering als de video. */
.film-poster, .film-poster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-poster img { object-fit: cover; object-position: 50% 50%; }
@media (min-width: 701px) and (orientation: portrait) { .film-poster img { object-position: 50% 74%; } }
@media (max-width: 700px) { .film-poster img { object-position: 50% 80%; } }
.film-stage video[data-chapter="0"]:not(.is-playing) { opacity: 0; }
.kt-laag[data-mask] { visibility: hidden; } /* v3.21: masker komt pas met de tekening (film.js) */