@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');

/* ==========================================================================
   Grit Controllers
   Donkere etalage: één object per beeld, licht uit de foto, kleur alleen waar
   je moet klikken. Diepte komt uit de vlakken (#000 / #111 / #1d1d1f), niet
   uit schaduwen, ruis of gloed.
   ========================================================================== */

:root {
  /* Vlakken, van diep naar hoog */
  --ink: #000000;
  --carbon: #111111;
  --steel: #1d1d1f;
  --hairline: rgba(245, 245, 247, .12);

  /* Tekst op donker.
     Neutraal-koel in plaats van warm: de vorige grijzen hadden een kaki-zweem
     (#928e87 is R>G>B) waardoor de hele pagina meekleurde met het oranje. Nu is
     het accent het enige warme element in beeld. De helderheid is gelijk
     gehouden, dus alle contrastverhoudingen blijven staan.                    */
  --bone: #f5f5f7;
  --mute: #8b8b90;
  --smoke: #7a7a80;

  /* Licht vlak */
  --paper: #ffffff;
  --obsidian: #1d1d1f;
  --mute-licht: #6b6b71;
  --stil-licht: #6e6e73;
  --hairline-licht: #d5d5d8;

  /* Het enige verzadigde accent op de site. Op wit een graad dieper, anders
     haalt oranje de leesbaarheidsnorm niet. */
  --ember: #ff6a27;
  --ember-licht: #d1440a;

  /* Vorm: drie waarden, meer niet */
  --r-kaart: 28px;
  --r-knop: 999px;
  --r-veld: 12px;

  --page-pad: clamp(1.15rem, 3.7vw, 4.75rem);
  --content: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }
html { max-width: 100%; overflow-x: clip; color-scheme: dark; scroll-behavior: smooth; background: var(--ink); }
body {
  width: 100%;
  max-width: 100%;
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--bone);
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { max-width: 62ch; margin: 0 0 1em; color: var(--mute); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }
.omhulsel { width: min(100%, var(--content)); margin-inline: auto; padding-inline: var(--page-pad); }
.rail { display: none; }

/* --- Typografie ----------------------------------------------------------
   Tracking loopt mee met de graad: groot mag dicht, klein moet ademen.      */
h1, h2, h3, .merk, .knop, .spec__model, .spec__prijs, .stap__nummer, .archief__nr, .archief__naam {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
}
h1, h2, h3 { margin: 0; color: var(--bone); text-wrap: balance; }
/* De letterafstand volgt de gemeten curve van de referentie: negatief alleen
   bij de grote graden en juist iets ruimer zodra de kop klein wordt. De vorige
   waarden (-.03 / -.026 / -.018) knepen overal dicht; op 22px is dat vijf keer
   zo strak als de referentie en gaat het bovendien de verkeerde kant op.      */
h1 { font-size: clamp(3.1rem, 6vw, 5.6rem); font-weight: 600; line-height: 1.05; letter-spacing: -.015em; }
h2 { font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight: 600; line-height: 1.07; letter-spacing: -.005em; }
h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 600; line-height: 1.14; letter-spacing: .007em; }

.label {
  margin: 0;
  color: var(--mute);
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.29;
  letter-spacing: -.01em;
  text-transform: none;
}
.label--ember { color: var(--ember); }
.klein { color: var(--mute); font-size: .95rem; }

/* --- Navigatie ----------------------------------------------------------- */
.kop {
  position: sticky;
  z-index: 100;
  top: 0;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(18px);
}
.startpagina .kop { position: absolute; inset: 0 0 auto; background: linear-gradient(180deg, rgba(0,0,0,.72), transparent); backdrop-filter: none; }
.kop__binnen { display: flex; min-height: 5rem; align-items: center; justify-content: space-between; gap: 2rem; }
.merk {
  display: flex;
  align-items: center;
  width: clamp(6.8rem, 8.8vw, 8.5rem);
  aspect-ratio: 1380 / 280;
  text-decoration: none;
}
.merk__img {
  width: 100%;
  height: auto;
  display: block;
}
.merk__naam { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Tekst die alleen de schermlezer hoort, daar waar het oog een vorm ziet. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.navigatie { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.2rem); }
.navigatie a {
  position: relative;
  padding-block: .3rem;
  color: var(--mute);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.01em;
  transition: color 180ms ease;
}
.navigatie a:hover, .navigatie a[aria-current='page'] { color: var(--bone); }
.navigatie a::after {
  position: absolute; right: 0; bottom: -.5rem; left: 0;
  height: 1px; transform: scaleX(0); background: var(--bone); content: '';
  transition: transform 180ms ease;
}
.navigatie a:hover::after, .navigatie a[aria-current='page']::after { transform: scaleX(1); }
.menu-knop { display: none; }

/* --- Taal ----------------------------------------------------------------
   Eén link naar de andere taal, geen schakelaar met twee standen. Op desktop
   staat er een haarlijn voor, zodat hij losstaat van de paginanavigatie.    */
/* Kleur komt van .navigatie a: dat haalt de contrastnorm op zwart en een
   stillere tint zou dat verpesten. Alleen de vorm wijkt af.                  */
/* Alles hieronder staat als `.navigatie a.navigatie__taal`: de basisregels
   voor navigatielinks zijn even specifiek, en een media query telt daarin
   niet mee. Zonder die extra klasse wint `.navigatie a` gewoon.             */
.navigatie a.navigatie__taal { font-variant: small-caps; letter-spacing: .02em; }
@media (min-width: 701px) {
  .navigatie a.navigatie__taal {
    margin-left: .5rem;
    padding-left: calc(clamp(1.1rem, 2.4vw, 2.2rem) - .5rem);
    border-left: 1px solid var(--hairline);
  }
  .navigatie a.navigatie__taal::after { left: calc(clamp(1.1rem, 2.4vw, 2.2rem) - .5rem); }
}

/* Eenmalige suggestie wanneer de browsertaal niet bij de pagina past. Een
   voorstel, geen omleiding: de bezoeker houdt de pagina die hij koos.       */
.taalhint {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .35rem .9rem;
  padding: .7rem var(--page-pad);
  border-bottom: 1px solid var(--hairline);
  background: var(--carbon);
  color: var(--mute); font-size: .92rem;
}
.taalhint a { color: var(--bone); text-decoration: underline; text-underline-offset: .2em; }
.taalhint button {
  border: 0; background: none; color: var(--smoke);
  font: inherit; cursor: pointer; padding: .1rem .3rem;
}
.taalhint button:hover { color: var(--bone); }

/* --- Hero ----------------------------------------------------------------
   Zwart podium, één controller, tekst linksonder. Geen raster, geen gloed,
   geen ruis: het licht in de foto doet het werk.                            */
.hero { position: relative; min-height: calc(100svh - 5rem); overflow: hidden; isolation: isolate; background: var(--ink); }
.startpagina .hero { min-height: 100svh; }
.hero--campaign { background: var(--ink); }
.hero > .omhulsel { position: relative; min-height: inherit; }
.hero__raster { display: grid; min-height: inherit; grid-template-columns: minmax(17rem,.82fr) minmax(30rem,1.18fr); align-items: center; }
.hero__tekst {
  position: relative; z-index: 5;
  width: 100%; min-width: 0; max-width: 43rem;
  padding: clamp(5.5rem, 11vh, 9rem) 0 clamp(4rem, 8vh, 6rem);
}
.startpagina .hero__tekst { padding-top: clamp(8rem, 14vh, 11rem); }
.hero__tekst > .label, .hero__tekst > .drop__status { margin-bottom: 1.25rem; }
.drop__status { display: flex; align-items: center; gap: .6rem; }
.drop__status .stip { display: none; }
.hero__titel { max-width: 11ch; }
.hero__titel span { display: block; }
.hero__titel em { color: var(--mute); font-style: normal; font-weight: 500; }
.hero--home .hero__titel em { color: var(--bone); }
.hero--home .hero__titel .beast { font-weight: 700; }
.hero__inleiding { max-width: 34rem; margin: 1.6rem 0 0; font-size: 1.06rem; line-height: 1.5; }
.hero__acties { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 2rem; }

/* --- USP-onderschrift op de foto ------------------------------------------
   Stond eerst als los blok met dikgedrukte koppen onder de knoppen, en stak
   daarbij zelfs door tot in het fotovlak. Nu een dun onderschrift dat op de
   onderrand van de productfoto zelf ligt: klein, gedempt, met een glazen
   achtergrond voor leesbaarheid op een foto met wisselend licht. Vier punten
   die voor élk model gelden; wat per model verschilt hoort in de tabel.
   De uitleg-zin blijft in de DOM voor schermlezers (.vh) maar wordt niet
   getoond: op een gedempt onderschrift is dat te veel tekst tegelijk.       */
.usp {
  position: relative;
  z-index: 6;
  display: flex;
  /* nowrap op desktop: dit blok hangt los over de foto en concurreert niet
     meer met de intro-tekst om breedte, dus het mag zo breed als nodig om
     op één regel te blijven. De vorige 34rem-cap was nog een restant van
     toen dit in de tekstkolom stond; hier liet hij het breedste item
     ("12 maanden garantie") als enige naar een tweede regel klappen.       */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1.5rem;
  margin: 0 0 clamp(1.6rem, 4vh, 3rem);
  padding: .85rem 1.3rem;
  list-style: none;
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: center;
  max-width: 92%;
  width: max-content;
  border: 1px solid rgba(245, 245, 247, .12);
  border-radius: var(--r-knop);
  background: rgba(0, 0, 0, .52);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.usp__item { display: flex; align-items: center; gap: .5rem; }
.usp__icoon {
  /* SVG is standaard `inline`, dus hij hangt aan de tekstbaseline en elke
     regelhoogte-eigenaardigheid van het lettertype schuift hem een paar
     pixels op of neer. `block` geeft alle vier exact dezelfde box.        */
  display: block;
  width: 16px; height: 16px;
  flex: none;
  fill: none;
  stroke: var(--mute);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.usp__kop {
  max-width: none;
  margin: 0;
  color: var(--mute);
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.hero__beeld {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  z-index: 2;
  min-width: 0;
  align-self: stretch;
  perspective: 1200px;
}
.hero__foto {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 46%;
  width: min(61vw, 67rem);
  max-width: none;
  transform: translate(-48%,-50%) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  /* Alleen de buitenrand vervaagt, zodat de foto niet als rechthoek op het
     zwart ligt. Het product zelf blijft volledig dekkend. */
  -webkit-mask-image: radial-gradient(ellipse 92% 90% at 55% 50%, #000 0 74%, rgba(0,0,0,.8) 86%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 90% at 55% 50%, #000 0 74%, rgba(0,0,0,.8) 86%, transparent 100%);
  user-select: none;
  transition: transform 120ms ease-out;
  will-change: transform;
  animation: controller-arrive 900ms cubic-bezier(.22,1,.36,1) both;
}

/* Een kleine input-test maakt de gamingkant zichtbaar zonder van de hero een
   dashboard te maken. De beweging is traag en beperkt zich tot één dunne
   statusstrook; de controller blijft het object waar je naar kijkt. */
.input-test {
  position: absolute;
  z-index: 7;
  right: clamp(2rem, 7vw, 8rem);
  bottom: clamp(7.2rem, 14vh, 10rem);
  display: grid;
  grid-template-columns: auto auto minmax(4rem, 7rem) repeat(3, 1.45rem) auto;
  align-items: center;
  gap: .62rem;
  min-height: 2.8rem;
  padding: .52rem .7rem .52rem .82rem;
  border: 1px solid rgba(245,245,247,.16);
  border-radius: var(--r-knop);
  background: rgba(8,8,9,.72);
  color: var(--bone);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateZ(38px);
  animation: input-test-arrive 1.1s .65s cubic-bezier(.22,1,.36,1) both;
}
.input-test__lamp {
  width: .43rem;
  height: .43rem;
  border-radius: 50%;
  background: var(--ember);
  animation: input-lamp 4.8s ease-in-out infinite;
}
.input-test__naam,
.input-test__status {
  color: var(--mute);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.input-test__status { color: var(--bone); }
.input-test__lijn {
  position: relative;
  display: block;
  height: 1px;
  overflow: hidden;
  background: rgba(245,245,247,.16);
}
.input-test__lijn i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 34%;
  background: var(--ember);
  animation: input-scan 4.8s cubic-bezier(.65,0,.35,1) infinite;
}
.input-test__toets {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  border: 1px solid rgba(245,245,247,.18);
  border-radius: 50%;
  color: var(--mute);
  font: 500 .78rem/1 'DM Sans',Arial,sans-serif;
  animation: input-key 4.8s ease-in-out infinite;
}
.input-test__toets--rond { animation-delay: .42s; }
.input-test__toets--kruis { animation-delay: .84s; }

@keyframes input-test-arrive {
  from { opacity: 0; transform: translate3d(0,12px,38px); }
  to { opacity: 1; transform: translate3d(0,0,38px); }
}
@keyframes input-lamp {
  0%, 100% { opacity: .45; }
  8%, 22% { opacity: 1; }
}
@keyframes input-scan {
  0%, 12% { transform: translateX(-105%); opacity: 0; }
  20%, 72% { opacity: 1; }
  82%, 100% { transform: translateX(300%); opacity: 0; }
}
@keyframes input-key {
  0%, 7%, 100% { border-color: rgba(245,245,247,.18); color: var(--mute); background: transparent; }
  11%, 18% { border-color: rgba(255,106,39,.62); color: var(--bone); background: rgba(255,106,39,.14); }
  22% { border-color: rgba(245,245,247,.18); color: var(--mute); background: transparent; }
}
.hero--drops .hero__foto, .hero--contact .hero__foto { width: min(61vw, 67rem); }
.hero--controller .hero__foto { width: min(65vw, 70rem); }
.hero--drops .hero__foto--drops-v2 { left: 42%; width: min(62vw,68rem); }
.hero--contact .hero__tekst { z-index: 7; }
.hero--contact .hero__tekst::before {
  position: absolute; z-index: -1;
  inset: 8% -13rem 8% calc(var(--page-pad) * -1);
  pointer-events: none;
  background: linear-gradient(90deg, var(--ink) 0 42%, rgba(0,0,0,.94) 63%, rgba(0,0,0,.48) 82%, transparent 100%);
  content: '';
}
.hero--contact .hero__beeld { z-index: 1; }
.hero--contact .hero__foto {
  left: 59%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.42) 18%, #000 39%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.42) 18%, #000 39%);
}

@media (min-width: 901px) {
  .hero--home .hero__raster { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); }
  .hero--drops .hero__raster { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); }
  .hero--home .hero__tekst { max-width: 50rem; }
  .hero--drops .hero__tekst { max-width: 47rem; }
  .hero--home .hero__titel { max-width: 13ch; font-size: clamp(3.5rem, 6.7vw, 6.45rem); line-height: .99; }
  .hero--drops .hero__titel { max-width: 14ch; font-size: clamp(3.1rem,5.4vw,5.2rem); }
}

@media (min-width: 701px) {
  .hero--home .hero__raster { position: relative; }
  .hero--home .hero__beeld {
    position: absolute;
    z-index: 1;
    top: 0; bottom: 0; left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .hero--home .hero__foto { top: 50%; left: 72%; width: min(64vw, 59rem); height: auto; object-fit: contain; }
  .hero--home .usp {
    position: absolute;
    right: 0;
    bottom: clamp(1.6rem, 4vh, 3rem);
    left: 0;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-inline: clamp(1.1rem, 2.2vw, 2rem);
  }
}

/* --- Productverhaal -----------------------------------------------------
   Een close-up als materiaalhoofdstuk tussen hero en line-up. Het beeld is
   full-bleed, de tekst blijft compact; dit geeft de controller dezelfde rust
   als een horloge of verzorgingsproduct in een luxe productpresentatie.    */
.product-story {
  display: grid;
  min-height: min(54rem, 88svh);
  grid-template-columns: minmax(0, 1.16fr) minmax(24rem, .84fr);
  overflow: hidden;
  background: var(--carbon);
}
.product-story__beeld { min-height: 36rem; overflow: hidden; }
.product-story__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 61% 50%;
  transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}
.product-story__beeld.zichtbaar img { transform: scale(1.015); }
.product-story__tekst {
  align-self: center;
  max-width: 41rem;
  padding: clamp(4rem, 8vw, 8rem) clamp(2rem, 6vw, 7rem);
}
.product-story__tekst .label { margin-bottom: 1rem; }
.product-story__tekst h2 { max-width: 10ch; }
.product-story__tekst > p:not(.label) { margin: 1.6rem 0 0; font-size: 1.06rem; }
.product-story__feiten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
  margin: clamp(2.6rem, 5vw, 4.5rem) 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--hairline);
}
.product-story__feiten div { min-width: 0; }
.product-story__feiten dt {
  color: var(--bone);
  font-family: 'Archivo','Helvetica Neue',Arial,sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -.01em;
}
.product-story__feiten dd { margin: .25rem 0 0; color: var(--mute); font-size: .88rem; }
.product-story__tekst h2.product-story__claim { max-width: 26ch; text-wrap: balance; }

/* De uitleg achter de claim: dicht is de regel het hele verhaal, open staat
   erin wat er van de originele controller blijft en wat er nieuw in gaat.
   Werkt zonder JavaScript en houdt het accent bij de i, niet bij de tekst. */
.uitleg { margin: 1.7rem 0 0; border-top: 1px solid var(--hairline); }
.uitleg > summary {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 1.05rem 0;
  color: var(--bone);
  font-family: 'Archivo','Helvetica Neue',Arial,sans-serif;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
  list-style: none;
  cursor: pointer;
}
.uitleg > summary::-webkit-details-marker { display: none; }
.uitleg > summary::before {
  content: "i";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-knop);
  color: var(--mute);
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: .82rem;
  line-height: 1;
  transition: border-color .2s ease, color .2s ease;
}
.uitleg > summary:hover::before,
.uitleg > summary:focus-visible::before { border-color: var(--ember); color: var(--ember); }
.uitleg > summary:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; border-radius: var(--r-veld); }
.uitleg__tekst { margin: 0 0 1.5rem; }
.uitleg__tekst p { margin: 0 0 1rem; color: var(--mute); font-size: 1rem; }
.uitleg__tekst p:last-child { margin-bottom: 0; }

/* --- Knoppen -------------------------------------------------------------
   Eén gevulde knop per beeld. Verder alleen de lege variant.                */
.knop {
  display: inline-flex;
  min-height: 3.1rem;
  align-items: center;
  justify-content: center;
  padding: 0 1.6rem;
  border: 0;
  border-radius: var(--r-knop);
  background: var(--ember);
  color: #180800;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}
.knop:hover { transform: translateY(-1px); background: #ff8046; }
.knop--leeg { border: 1px solid var(--hairline); background: transparent; color: var(--bone); }
.knop--leeg:hover { border-color: var(--bone); background: transparent; }

/* --- Secties -------------------------------------------------------------
   Ritme: zwart, zwart, wit. Het lichte vlak zet de ogen weer op nul.        */
/* Ongelijk ritme in plaats van 120/120: onderaan meer lucht dan bovenaan, zodat
   een kop dichter bij zijn eigen inhoud staat dan bij de volgende sectie.     */
.sectie {
  position: relative;
  padding-top: clamp(5rem, 8vw, 7rem);
  padding-bottom: clamp(6.5rem, 11vw, 10rem);
}
.sectie--diep { background: var(--carbon); }
.sectie--licht { background: var(--paper); color: var(--obsidian); }
.sectie--licht h1, .sectie--licht h2, .sectie--licht h3 { color: var(--obsidian); }
.sectie--licht p, .sectie--licht .klein, .sectie--licht .label { color: var(--mute-licht); }
/* Alleen het kopje van de sectie krijgt het ember-eyebrow; de labels in de
   stappenrij blijven grijs, anders staat het accent er vier keer onder elkaar. */
.sectie--licht .sectie__kop > div > .label,
.sectie--licht .wachtlijst__kop .label { color: var(--ember-licht); }
.sectie--licht .knop--leeg { border-color: var(--hairline-licht); color: var(--obsidian); }
.sectie--licht .knop--leeg:hover { border-color: var(--obsidian); }

.sectie__kop {
  display: grid;
  grid-template-columns: minmax(17rem,.78fr) minmax(20rem,1.22fr);
  gap: clamp(2rem,6vw,7rem);
  align-items: end;
  margin-bottom: clamp(2.8rem,5vw,4.5rem);
}
.sectie__kop .label { margin-bottom: .9rem; }
.sectie__kop p:last-child { margin-bottom: 0; }

/* --- Vergelijkingstabel --------------------------------------------------
   Drie uitvoeringen naast elkaar is echte vergelijkingsdata; die hoort in
   een tabel, en op het lichte vlak. Wat een uitvoering is, staat in het
   rijlabel; de cel hoeft dan niets anders te dragen dan ja of nee.          */
.spec-scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.spec-scroll:focus-visible { outline: 2px solid var(--ember-licht); outline-offset: 4px; }
.spec { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums; }
.spec th, .spec td { padding: 1.05rem .9rem; border-bottom: 1px solid var(--hairline); text-align: left; }
.spec thead th { padding-block: 0 1.35rem; }
.spec__kenmerk { width: 40%; padding-left: 0 !important; color: var(--mute); font-family: 'DM Sans', Arial, sans-serif; font-weight: 400; }
.spec__model { color: var(--bone); font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; }
.spec__model span {
  display: block; margin-top: .3rem;
  color: var(--mute);
  font-family: 'DM Sans',Arial,sans-serif; font-size: .92rem; font-weight: 400; letter-spacing: -.01em;
  text-transform: none;
}
.spec__prijs { color: var(--bone); font-size: clamp(1.9rem,3vw,2.6rem); font-weight: 600; letter-spacing: -.03em; }
.spec__prijs sup { margin-right: .1em; color: var(--mute); font-size: .78rem; }

/* Ja is een vinkje, nee een streepje. Twee getekende vormen die niets van
   het accent lenen en op iedere graad scherp blijven.                       */
.spec td.ja { color: var(--bone); }
.spec td.nee { color: var(--smoke); }
.spec__bij { color: var(--mute); }
.spec td.ja::before, .spec td.nee::before { content: ""; display: inline-block; vertical-align: middle; }
.spec td.ja::before {
  width: .38em; height: .72em;
  border: 2px solid currentColor; border-top: 0; border-left: 0;
  transform: translateY(-.09em) rotate(43deg);
}
.spec td.nee::before { width: .78em; height: 1.5px; background: currentColor; }

.spec__model--pro, .spec .spec__pro { background: rgba(255,255,255,.028); }

.sectie--licht .spec th, .sectie--licht .spec td { border-color: var(--hairline-licht); }
.sectie--licht .spec__kenmerk, .sectie--licht .spec__model span, .sectie--licht .spec__prijs sup, .sectie--licht .spec__bij { color: var(--mute-licht); }
.sectie--licht .spec__model, .sectie--licht .spec__prijs, .sectie--licht .spec td.ja { color: var(--obsidian); }
.sectie--licht .spec td.nee { color: var(--stil-licht); }
.sectie--licht .spec__model--pro, .sectie--licht .spec .spec__pro { background: #f5f5f7; }

.modelkaarten { display: none; }

/* --- Stappen -------------------------------------------------------------
   Gestapelde rijen in plaats van een raster van vier kaartjes: nummer,
   kopje, uitleg. Nummers alleen waar het echt een volgorde is.              */
.stappen { display: flex; flex-direction: column; }
.stap {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: .6rem clamp(1.5rem, 5vw, 5rem);
  align-items: baseline;
  padding-block: clamp(1.6rem, 2.6vw, 2.2rem);
  border-top: 1px solid var(--hairline);
}
.sectie--licht .stap { border-top-color: var(--hairline-licht); }
.stap__nummer { display: none; }
.stap .label { margin-bottom: 0; }
.stap h3 { margin-bottom: 0; }
.stap p { margin: 0; max-width: 54ch; }

/* Plaats de cellen zelf. Zonder deze regels valt de uitleg in de smalle
   meta-kolom en blijft de brede kolom leeg staan.                          */
.stap .label { grid-column: 1; grid-row: 1; }
.stap h3     { grid-column: 2; grid-row: 1; }
.stap p      { grid-column: 2; grid-row: 2; }

.stappen--reeks .stap {
  grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr);
  gap: .6rem clamp(.8rem, 2.5vw, 2rem);
}
.stappen--reeks .stap__nummer { grid-column: 1; grid-row: 1; }
.stappen--reeks .stap .label  { grid-column: 2; grid-row: 1; }
.stappen--reeks .stap h3      { grid-column: 3; grid-row: 1; }
.stappen--reeks .stap p       { grid-column: 3; grid-row: 2; }
.stappen--reeks .stap__nummer {
  display: block;
  color: var(--smoke);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.sectie--licht .stappen--reeks .stap__nummer { color: var(--stil-licht); }

/* --- Wachtlijst en formulieren ------------------------------------------- */
.wachtlijst__binnen { display: grid; max-width: 58rem; gap: clamp(2rem,5vw,3.5rem); }
.wachtlijst__kop { max-width: 42rem; }
.wachtlijst__kop .label { margin-bottom: .9rem; }
.wachtlijst__kop p:last-child { margin: 1.1rem 0 0; }
.formulier { display: grid; gap: 1.5rem; }
.formulier__veld { display: grid; gap: .5rem; color: var(--bone); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.formulier__veld small { color: var(--mute); font: inherit; font-weight: 400; }
.formulier__veld input, .formulier__veld textarea {
  width: 100%;
  min-height: 3.4rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-veld);
  outline: 0;
  background: rgba(255,255,255,.035);
  color: var(--bone);
  font: 400 1rem/1.5 'DM Sans',Arial,sans-serif;
  transition: border-color 180ms ease, background 180ms ease;
}
.formulier__veld textarea { min-height: 7.5rem; resize: vertical; }
.formulier__veld input:focus, .formulier__veld textarea:focus { border-color: rgba(245,245,247,.45); background: rgba(255,255,255,.06); }
.formulier__groep { min-width: 0; margin: 0; padding: 0; border: 0; }
.formulier__groep legend { margin-bottom: .7rem; color: var(--bone); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.formulier__keuzes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.formulier__keuzes label { position: relative; cursor: pointer; }
.formulier__keuzes input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.formulier__keuzes span {
  display: grid;
  min-height: 5rem;
  align-content: center;
  gap: .15rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-veld);
  background: rgba(255,255,255,.025);
  transition: border-color 180ms ease, background 180ms ease;
}
.formulier__keuzes strong { color: var(--bone); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.formulier__keuzes small { color: var(--mute); font-size: .92rem; }
.formulier__keuzes label:hover span { border-color: rgba(245,245,247,.32); }
/* Selectie is een keuze, geen actie: die blijft neutraal zodat de ember-knop
   het enige gekleurde vlak in beeld is. */
.formulier__keuzes input:checked + span { border-color: var(--bone); background: rgba(255,255,255,.08); }
.formulier__keuzes input:focus-visible + span { outline: 2px solid var(--ember); outline-offset: 3px; }
.formulier__onder { display: flex; align-items: center; gap: 1.2rem; }
.formulier__onder p { margin: 0; }
.formulier__val { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.formulier__status { min-height: 1.5rem; margin: -.4rem 0 0; color: var(--bone); font-size: 1rem; }
.formulier__status.is-gelukt { color: #9fd6a6; }
.formulier__status.is-fout { color: #ff8d66; }
.formulier.is-bezig .knop { cursor: wait; opacity: .62; }

/* --- Archief -------------------------------------------------------------
   Wat weg is, is een lijst en geen etalage. Van de oude drops bestaat geen
   studiofoto, en een zwakke foto doet het archief meer kwaad dan een nette
   regel. Komt er alsnog studiowerk, dan mag het beeld terug.                */
.archief { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.archief__regel {
  display: grid;
  grid-template-columns: 3.5rem minmax(0,1fr) auto;
  gap: .2rem clamp(1.5rem,5vw,5rem);
  align-items: baseline;
  padding-block: clamp(1.2rem,2.2vw,1.7rem);
  border-top: 1px solid var(--hairline);
}
.archief__nr { color: var(--smoke); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.archief__naam { color: var(--bone); font-size: 1.15rem; font-weight: 500; letter-spacing: -.015em; }
.archief__build { color: var(--smoke); font-size: .95rem; }
.archief__staat { color: var(--smoke); font-size: .95rem; }
.sectie--licht .archief__regel { border-top-color: var(--hairline-licht); }
.sectie--licht .archief__nr, .sectie--licht .archief__build, .sectie--licht .archief__staat { color: var(--stil-licht); }
.sectie--licht .archief__naam { color: var(--obsidian); }

/* De regel die nog vrij is springt eruit met contrast, niet met kleur:
   het accent is in dit beeld al vergeven aan de knop.                       */
.archief__nr--vrij, .archief__build--vrij, .archief__staat--vrij { color: var(--bone); }
.archief__staat--vrij { font-weight: 500; }
.sectie--licht .archief__nr--vrij, .sectie--licht .archief__build--vrij, .sectie--licht .archief__staat--vrij { color: var(--obsidian); }

/* De lopende drop toont per nummer ook de build: model en belangrijkste
   optie. Het oude archief (voor de drops) blijft drie kolommen.             */
.archief--specs .archief__regel { grid-template-columns: 3.5rem minmax(0,1fr) minmax(0,1fr) auto; }

/* --- Galerij ------------------------------------------------------------- */
.galerij { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(.7rem,1.5vw,1.4rem); }
.galerij figure { min-height: 300px; margin: 0; overflow: hidden; border-radius: var(--r-kaart); background: var(--steel); }
.galerij img { width: 100%; height: 100%; object-fit: contain; padding: clamp(1.2rem,2vw,2.4rem); }
.galerij--studio { grid-template-columns: repeat(2,1fr); }
.galerij--studio figure:last-child:nth-child(odd) { grid-column: 1 / -1; }
.galerij--studio figure { aspect-ratio: 4/3; min-height: 0; background: var(--ink); }
.galerij--studio img { padding: 0; object-fit: cover; transition: transform 700ms cubic-bezier(.22,1,.36,1); }
.galerij--studio figure:hover img { transform: scale(1.02); }
.studio-scene { position: relative; z-index: 1; }
.studio-scene { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Voet ---------------------------------------------------------------- */
.voet { padding-block: clamp(3.5rem,6vw,5rem) 2rem; border-top: 1px solid var(--hairline); }
.voet__raster { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; margin-bottom: 3rem; }
.voet__leus {
  margin: 0;
  color: var(--bone);
  font-family: 'Archivo','Helvetica Neue',Arial,sans-serif;
  font-size: 1.5rem; font-weight: 600; line-height: 1.05; letter-spacing: -.02em;
}
.voet__leus em { color: var(--ember); font-style: normal; }
.voet__raster .label { margin-bottom: .5rem; color: var(--bone); }
.voet__onder { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); }
.voet__onder .label { color: var(--smoke); font-size: .92rem; font-weight: 400; }
.voet a:hover { color: var(--bone); }

/* --- Beweging ------------------------------------------------------------
   Eén moment: de controller die aankomt. Verder rustige onthullingen.       */
.komt-op { opacity: 0; transform: translateY(16px); transition: opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1); }
.komt-op.zichtbaar { opacity: 1; transform: none; }

/* Zonder script komt die klasse er nooit op en zou de halve pagina onzichtbaar
   blijven. Tekst gaat voor animatie, dus dan tonen we alles meteen.          */
@media (scripting: none) {
  .komt-op { opacity: 1; transform: none; }
}

@keyframes controller-arrive {
  from { opacity: 0; transform: translate(-43%,-46%) rotateX(-2deg) rotateY(-5deg) scale(.96); }
  to   { opacity: 1; transform: translate(-48%,-50%) rotateX(var(--rx)) rotateY(var(--ry)) scale(1); }
}

/* --- Schermbreedtes ------------------------------------------------------ */
@media (max-width: 900px) {
  .hero__raster { grid-template-columns: minmax(16rem,.9fr) minmax(20rem,1.1fr); }
  .hero__foto { left: 52%; width: min(70vw,58rem); }
  .stap { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
  .stappen--reeks .stap { grid-template-columns: 2.6rem minmax(0, 12rem) minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .kop { background: rgba(0,0,0,.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .startpagina .kop { background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.58) 72%, transparent); }
  .kop__binnen { position: relative; min-height: 4.6rem; align-items: center; flex-direction: row; gap: 1rem; padding-block: .8rem; }
  .merk { width: 7rem; }
  .menu-knop {
    display: inline-flex;
    min-width: 5.6rem;
    min-height: 2.7rem;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    margin-left: auto;
    padding: 0 1rem;
    border: 1px solid rgba(245,245,247,.18);
    border-radius: var(--r-knop);
    background: rgba(17,17,17,.72);
    color: var(--bone);
    font: 600 .82rem/1 'DM Sans',Arial,sans-serif;
    letter-spacing: .01em;
    cursor: pointer;
  }
  .menu-knop__icoon { position: relative; width: .9rem; height: .65rem; }
  .menu-knop__icoon::before,
  .menu-knop__icoon::after {
    position: absolute;
    right: 0;
    left: 0;
    height: 1px;
    background: currentColor;
    content: '';
    transition: top 180ms ease, transform 180ms ease;
  }
  .menu-knop__icoon::before { top: .12rem; }
  .menu-knop__icoon::after { top: .5rem; }
  .menu-knop[aria-expanded='true'] .menu-knop__icoon::before { top: .31rem; transform: rotate(45deg); }
  .menu-knop[aria-expanded='true'] .menu-knop__icoon::after { top: .31rem; transform: rotate(-45deg); }
  .navigatie {
    position: absolute;
    z-index: 110;
    top: calc(100% + .35rem);
    right: var(--page-pad);
    left: var(--page-pad);
    display: none;
    width: auto;
    grid-template-columns: minmax(0,1fr);
    gap: 0;
    padding: .65rem 1rem;
    border: 1px solid rgba(245,245,247,.14);
    border-radius: 1.15rem;
    background: var(--carbon);
    box-shadow: 0 1.25rem 3rem rgba(0,0,0,.42);
  }
  .menu-knop[aria-expanded='true'] + .navigatie { display: grid; }
  .navigatie a {
    min-width: 0;
    padding: .8rem .15rem;
    border-bottom: 1px solid rgba(245,245,247,.08);
    color: var(--bone);
    font-size: .98rem;
    text-align: left;
    white-space: nowrap;
  }
  .navigatie a::after { display: none; }
  .navigatie a[aria-current='page'] { color: var(--ember); }
  .navigatie a.navigatie__taal { position: static; margin-top: .2rem; padding-bottom: .55rem; border-bottom: 0; color: var(--mute); }
  .hero, .startpagina .hero { min-height: auto; }
  .hero__raster {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto clamp(20rem, 86vw, 24rem) auto;
  }
  .hero__tekst { width: 100%; min-width: 0; max-width: calc(100vw - 2.3rem); padding: clamp(3rem,8vh,5rem) 0 2rem; }
  .startpagina .hero__tekst { padding-top: clamp(6.5rem,16vh,8rem); }
  h1 { font-size: clamp(2.9rem,11vw,4.4rem); }
  .hero__titel { max-width: none; }
  .hero__inleiding { width: 100%; max-width: 100%; margin-top: 1.2rem; font-size: 1rem; overflow-wrap: anywhere; }
  .hero__acties { margin-top: 1.4rem; }
  /* Expliciet dezelfde cel als .usp hieronder (rij 2, kolom 1). Zonder dit
     plaatst auto-placement .hero__beeld in een NIEUWE rij zodra .usp die
     rij al expliciet claimt: twee items mogen best één grid-cel delen (ze
     stapelen dan via z-index), maar dat moet je wel voor allebei opgeven. */
  .hero__beeld { grid-row: 2; grid-column: 1; min-height: 18rem; }
  .hero__foto, .hero--drops .hero__foto, .hero--contact .hero__foto, .hero--controller .hero__foto { top: 48%; left: 50%; width: min(132vw,47rem); }
  .hero--home .hero__foto { top: 49%; left: 52%; width: min(112vw, 39rem); }
  .input-test {
    top: .75rem;
    right: auto;
    bottom: auto;
    left: 0;
    grid-template-columns: auto auto clamp(3.25rem, 14vw, 5.25rem) repeat(3, 1.28rem);
    gap: .4rem;
    width: max-content;
    max-width: 100%;
    min-height: 2.45rem;
    padding: .4rem .55rem;
    border-color: rgba(245,245,247,.14);
    background: rgba(8,8,9,.78);
  }
  .input-test__status { display: none; }
  .input-test__toets { width: 1.35rem; height: 1.35rem; font-size: .72rem; }
  .hero--controller .hero__beeld { width: calc(100% + (2 * var(--page-pad))); margin-inline: calc(var(--page-pad) * -1); overflow: hidden; background: var(--ink); }
  .hero--controller .hero__foto { top: 50%; left: 50%; width: 112%; max-width: none; height: 100%; object-fit: cover; object-position: 69% 54%; }
  .hero--contact .hero__tekst::before { inset: 0 calc(var(--page-pad) * -1); background: linear-gradient(180deg, rgba(0,0,0,.96), rgba(0,0,0,.82) 72%, transparent); }
  .hero--contact .hero__foto {
    -webkit-mask-image: radial-gradient(ellipse 92% 88% at 52% 50%, #000 0 70%, transparent 100%);
    mask-image: radial-gradient(ellipse 92% 88% at 52% 50%, #000 0 70%, transparent 100%);
  }
  .sectie__kop { grid-template-columns: 1fr; gap: 1.5rem; }
  .product-story { min-height: 0; grid-template-columns: minmax(0,1fr); }
  .product-story__beeld { min-height: 0; aspect-ratio: 4 / 3; }
  .product-story__beeld img { object-position: 62% 50%; }
  .product-story__tekst { max-width: none; padding: clamp(3.5rem, 14vw, 5.5rem) var(--page-pad) clamp(4.5rem, 18vw, 7rem); }
  .product-story__tekst h2 { max-width: 12ch; }
  .product-story__tekst h2.product-story__claim { max-width: 16ch; }
  .product-story__feiten { gap: .7rem; }
  .product-story__feiten dt { font-size: .95rem; }
  .product-story__feiten dd { font-size: .78rem; }
  .stap, .stappen--reeks .stap { grid-template-columns: minmax(0,1fr); gap: .35rem; }
  .stap .label, .stap h3, .stap p { grid-column: 1; }
  .stap .label { grid-row: 1; }
  .stap h3 { grid-row: 2; margin-top: .15rem; }
  .stap p { grid-row: 3; margin-top: .35rem; }
  .stappen--reeks .stap__nummer { margin-bottom: .3rem; }
  .spec-scroll { display: none; }
  .modelkaarten { display: grid; gap: .8rem; }
  .modelkaart {
    display: grid;
    gap: 1rem;
    padding: 1.2rem;
    border: 1px solid var(--hairline-licht);
    border-radius: 1.25rem;
    background: #fff;
  }
  .modelkaart--pro { border-color: var(--obsidian); background: var(--obsidian); color: var(--bone); }
  .modelkaart__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
  .modelkaart__naam { margin: 0; color: var(--obsidian); font: 600 1.35rem/1.1 'Archivo','Helvetica Neue',Arial,sans-serif; }
  .modelkaart--pro .modelkaart__naam { color: var(--bone); }
  .modelkaart__sub { display: block; margin-top: .28rem; color: var(--mute-licht); font-size: .82rem; font-weight: 400; }
  .modelkaart__prijs { margin: 0; color: var(--obsidian); font: 600 1.75rem/1 'Archivo','Helvetica Neue',Arial,sans-serif; letter-spacing: -.025em; white-space: nowrap; }
  .modelkaart--pro .modelkaart__prijs { color: var(--bone); }
  .modelkaart__prijs sup { margin-right: .12rem; color: var(--mute-licht); font: 500 .7rem/1 'DM Sans',Arial,sans-serif; vertical-align: .55em; }
  .modelkaart__lijst { display: grid; margin: 0; padding: 0; list-style: none; }
  .modelkaart__lijst li {
    position: relative;
    padding: .55rem 0 .55rem 1.25rem;
    border-top: 1px solid var(--hairline-licht);
    color: var(--mute-licht);
    font-size: .88rem;
  }
  .modelkaart--pro .modelkaart__lijst li { border-top-color: var(--hairline); color: var(--mute); }
  .modelkaart__lijst li::before {
    position: absolute;
    top: .95rem;
    left: .2rem;
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    background: var(--ember-licht);
    content: '';
  }
  .formulier__keuzes { grid-template-columns: 1fr; }
  .formulier__onder { align-items: flex-start; flex-direction: column; }
  .galerij { grid-template-columns: 1fr; }
  /* Op mobiel is de fotorij zelf de tweede (en enige) grid-rij, niet meer
     kolom 2: .hero__raster heeft hier maar één kolom.                       */
  .usp {
    display: grid;
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: repeat(2, minmax(0,1fr));
    align-self: stretch;
    justify-self: center;
    width: calc(100% + (2 * var(--page-pad)));
    max-width: none;
    margin: 0;
    padding: 0 var(--page-pad);
    gap: 0;
    border: 0;
    border-top: 1px solid rgba(245,245,247,.1);
    border-bottom: 1px solid rgba(245,245,247,.1);
    border-radius: 0;
    background: var(--carbon);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .usp__item { min-width: 0; padding: .9rem .55rem .9rem 0; }
  .usp__item:nth-child(even) {
    padding-right: 0;
    padding-left: 1rem;
    border-left: 1px solid rgba(245,245,247,.08);
  }
  .usp__item:nth-child(-n+2) { border-bottom: 1px solid rgba(245,245,247,.08); }
  .usp__icoon { width: 15px; height: 15px; }
  .usp__kop { font-size: .74rem; line-height: 1.3; white-space: normal; }
  .archief__regel { grid-template-columns: 2.8rem minmax(0,1fr) auto; gap: .2rem 1.2rem; }
  .archief--specs .archief__regel { grid-template-columns: 2.8rem minmax(0,1fr) auto; grid-template-rows: auto auto; }
  .archief--specs .archief__nr { grid-column: 1; grid-row: 1; }
  .archief--specs .archief__naam { grid-column: 2; grid-row: 1; }
  .archief--specs .archief__staat { grid-column: 3; grid-row: 1; }
  .archief--specs .archief__build { grid-column: 2 / -1; grid-row: 2; }
  .galerij--studio figure:last-child:nth-child(odd) { grid-column: auto; }
  .galerij figure { min-height: 250px; }
  .voet__raster { grid-template-columns: 1fr; }
  .voet__onder { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 430px) {
  .hero__acties { align-items: stretch; flex-direction: column; }
  .hero__foto, .hero--drops .hero__foto, .hero--contact .hero__foto { width: 150vw; }
  .hero--home .hero__foto { left: 50%; width: 112vw; }
  .input-test {
    grid-template-columns: auto auto minmax(2rem, 1fr) repeat(3, 1.22rem);
    width: min(19rem, 100%);
  }
  .input-test__lijn { min-width: 2rem; }
  .input-test__toets { width: 1.22rem; height: 1.22rem; font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero__foto { transform: translate(-48%,-50%); }
  .komt-op { opacity: 1; transform: none; }
}