/* ==========================================================================
   RJ Smartphone Lelystad
   Huisstijl uit het eigen logo: goud #FACB05 met warm bijna-zwart.
   Nergens een hexwaarde buiten het :root-blok.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('/assets/fonts/plexsans-var.woff2') format('woff2-variations');
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/assets/fonts/plexmono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/assets/fonts/plexmono-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens */

:root {
  /* Het merk, overgenomen uit het logo van de winkel */
  --goud: #facb05;
  --goud-warm: #ffd83d;
  --goud-diep: #7a6100;

  /* Warm bijna-zwart, geen kille grijstint */
  --inkt: #14130e;
  --inkt-zacht: #24221a;
  --inkt-rand: #38352a;

  /* Papier */
  --room: #fcfaf5;
  --zand: #f2ede1;
  --rand: #e2daca;
  --rand-zacht: #ece5d6;

  --tekst: #1f1d16;
  --tekst-zacht: #5a5548;
  --gedempt: #c9c2ae;

  /* De twee richtingen over de toonbank */
  --signaal: #a3301f;
  --signaal-vlak: #c0392b;

  --wit: #ffffff;
  --whatsapp: #0b6e62;

  /* Signaalvlakken in het beheer */
  --vlak-nieuw: #fdf6dd;
  --vlak-aan: #e6f0e2;
  --vlak-aan-rand: #bcd4b6;
  --vlak-let-op: #f8e4e0;

  /* Typografie */
  --font-display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --stap-0: clamp(0.94rem, 0.9rem + 0.2vw, 1rem);
  --stap-1: clamp(1.05rem, 1rem + 0.3vw, 1.19rem);
  --stap-2: clamp(1.3rem, 1.2rem + 0.6vw, 1.6rem);
  --stap-3: clamp(1.6rem, 1.4rem + 1.1vw, 2.2rem);
  --stap-4: clamp(2rem, 1.6rem + 2.2vw, 3.4rem);
  --stap-5: clamp(2.5rem, 1.8rem + 4vw, 5.4rem);

  --r1: 8px;
  --r2: 16px;
  --r3: 24px;
  --r4: 40px;
  --r5: 64px;
  --r6: 96px;

  --breedte: 1180px;
  --radius: 10px;
  --radius-klein: 6px;

  /* Zachte, warme schaduwen — niets zweeft hard boven de pagina */
  --schaduw-1: 0 1px 2px rgb(31 29 22 / 0.05), 0 2px 8px rgb(31 29 22 / 0.05);
  --schaduw-2: 0 2px 4px rgb(31 29 22 / 0.06), 0 10px 24px rgb(31 29 22 / 0.09);
  --schaduw-3: 0 4px 8px rgb(31 29 22 / 0.07), 0 20px 44px rgb(31 29 22 / 0.13);

  --soepel: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------------- base */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--room);
  color: var(--tekst);
  font-family: var(--font-body);
  font-size: var(--stap-1);
  line-height: 1.62;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--goud-diep); text-underline-offset: 3px; }
a:hover { color: var(--tekst); }

:focus-visible {
  outline: 3px solid var(--goud-diep);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.06;
  margin: 0 0 var(--r2);
  font-weight: 700;
  letter-spacing: -0.02em;
}

p { margin: 0 0 var(--r2); }
p:last-child { margin-bottom: 0; }

.overslaan {
  position: absolute;
  top: 0; left: 0;
  background: var(--inkt);
  color: var(--room);
  padding: var(--r2);
  z-index: 100;
  clip-path: inset(50%);
}
.overslaan:focus { clip-path: none; }

.verborgen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------- animatie */

/* Onthullen bij scrollen.
   Alleen verbergen als JS écht draait (.js) én de veiligheidsklep nog
   niet is omgezet (.alles-tonen). Faalt er iets in JS, dan staat er
   binnen 1,2 seconde alsnog gewoon een volledige pagina. */
.js:not(.alles-tonen) .onthul {
  opacity: 0;
  transform: translateY(22px);
}
.js .onthul {
  transition: opacity 620ms var(--soepel), transform 620ms var(--soepel);
}
.js .onthul.is-zichtbaar { opacity: 1; transform: none; }

/* De hero loopt mee in hetzelfde onthul-mechanisme, zodat de
   veiligheidsklep ook de belangrijkste tekst van de site dekt. */
.js:not(.alles-tonen) .hero-inhoud.onthul > * { opacity: 0; transform: translateY(20px); }
.js .hero-inhoud.onthul > * { transition: opacity 640ms var(--soepel), transform 640ms var(--soepel); }
.js .hero-inhoud.onthul.is-zichtbaar > * { opacity: 1; transform: none; }


/* Trapsgewijs: kinderen komen kort na elkaar op */
.js .trap > *:nth-child(1) { transition-delay: 0ms; }
.js .trap > *:nth-child(2) { transition-delay: 70ms; }
.js .trap > *:nth-child(3) { transition-delay: 140ms; }
.js .trap > *:nth-child(4) { transition-delay: 210ms; }
.js .trap > *:nth-child(5) { transition-delay: 280ms; }
.js .trap > *:nth-child(6) { transition-delay: 350ms; }
.js .trap > *:nth-child(7) { transition-delay: 420ms; }
.js .trap > *:nth-child(8) { transition-delay: 490ms; }

@keyframes opkomen {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gloed-adem {
  0%, 100% { opacity: 0.55; transform: translate3d(0, 0, 0) scale(1); }
  50%      { opacity: 0.8;  transform: translate3d(0, -14px, 0) scale(1.07); }
}
@keyframes stempel {
  0%   { opacity: 0; transform: scale(1.3) rotate(-4deg); }
  60%  { opacity: 1; transform: scale(0.96) rotate(0deg); }
  100% { opacity: 1; transform: scale(1); }
}

/* --------------------------------------------------------------- layout */

.omhulsel {
  width: 100%;
  max-width: var(--breedte);
  margin-inline: auto;
  padding-inline: var(--r3);
}

.sectie { padding-block: var(--r5); }
.sectie-krap { padding-block: var(--r4); }

.plaat {
  background: var(--wit);
  border: 1px solid var(--rand-zacht);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-1);
}
.plaat-binnen { padding: var(--r4); }
.plaat-binnen > .knop-rij { margin-top: var(--r3); }

@media (max-width: 720px) {
  .plaat-binnen { padding: var(--r3); }
}

.kop-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--r2);
  margin-bottom: var(--r4);
}

.opschrift {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--goud-diep);
  margin: 0 0 var(--r1);
  display: flex;
  align-items: center;
  gap: var(--r1);
}
.opschrift::before {
  content: '';
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--goud);
  flex: none;
}

/* ---------------------------------------------------------------- header */

.kop {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(252 250 245 / 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--soepel), box-shadow 240ms var(--soepel);
}
.kop.is-geplakt {
  border-bottom-color: var(--rand-zacht);
  box-shadow: var(--schaduw-1);
}

/* De klant vindt de kop belangrijk: die is daarom ruimer gezet dan
   gebruikelijk. 96px op desktop, en de tekst een maat groter. */
.kop-binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r3);
  min-height: 96px;
}

.merk {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tekst);
  flex: none;
}
/* Het officiële logo van de winkel */
.merk-teken {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 50%;
  display: block;
  transition: transform 260ms var(--soepel);
}
.merk:hover .merk-teken { transform: rotate(-6deg) scale(1.06); }
.merk-naam {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: 1.16rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.15;
}
.merk-naam span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 400;
  font-stretch: normal;
  letter-spacing: 0.13em;
  color: var(--tekst-zacht);
  text-transform: none;
}

.nav { display: flex; align-items: center; gap: var(--r2); }

.nav-lijst {
  display: flex;
  align-items: center;
  gap: var(--r3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  position: relative;
  font-size: 1.06rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--tekst);
  padding-block: 6px;
  white-space: nowrap;
}
/* Onderstreping groeit vanuit het midden */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--goud);
  transform: scaleX(0);
  transition: transform 260ms var(--soepel);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.is-actief::after { transform: scaleX(1); }
.nav-link.is-actief { font-weight: 600; }

.nav-bel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--inkt);
  background: var(--goud);
  padding: 13px var(--r3);
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: var(--schaduw-1);
  transition: transform 200ms var(--soepel), box-shadow 200ms var(--soepel), background 200ms var(--soepel);
}
.nav-bel:hover {
  background: var(--goud-warm);
  color: var(--inkt);
  transform: translateY(-2px);
  box-shadow: var(--schaduw-2);
}

.menu-knop {
  display: none;
  background: var(--zand);
  border: 1px solid var(--rand-zacht);
  border-radius: 100px;
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--tekst);
  cursor: pointer;
}

/* --------------------------------------------------------------- melding */

/* Staat boven élke pagina, ook boven de sticky kop. Goud met inkt valt
   harder op dan andersom en haalt 12:1. */
.melding-balk {
  position: relative;
  z-index: 50;
  background: var(--goud);
  color: var(--inkt);
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  padding: 13px var(--r3);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* Niet afbreken: anders springt het lampje bij een lange melding naar
     een eigen regel boven de tekst. De tekst zelf mag wel doorlopen. */
  flex-wrap: nowrap;
  box-shadow: 0 1px 0 rgb(31 29 22 / 0.14);
}
.melding-balk > span:last-child { text-align: left; }

/* Het lampje pulseert, niet de hele balk: knipperende vlakken zijn
   vermoeiend en bij hoge frequentie zelfs een toegankelijkheidsrisico. */
.melding-lamp {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--signaal-vlak);
  flex: none;
  position: relative;
}
.melding-lamp::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--signaal-vlak);
  animation: lamp-puls 2s ease-out infinite;
}

@keyframes lamp-puls {
  0%   { transform: scale(1);   opacity: 0.75; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

@media (max-width: 560px) {
  .melding-balk { font-size: 0.94rem; padding: 11px var(--r2); gap: 9px; }
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  background: var(--inkt);
  color: var(--room);
  overflow: hidden;
  isolation: isolate;
}

/* ------------------------------------------------------- bannerdia's -----

   De foto's wisselen elkaar af met een trage kruisvervaging. Elke dia
   heeft een eigen kleurverloop in de tinten van het logo: dat maakt van
   vier losse foto's één geheel, en het houdt de tekst leesbaar zonder dat
   de foto zwart hoeft te worden gedrukt.
   -------------------------------------------------------------------- */

.hero-dias { position: absolute; inset: 0; z-index: -3; overflow: hidden; }

.hero-dia {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1200ms var(--soepel);
}
.hero-dia.is-actief { opacity: 1; }

.hero-dia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Het verloop ligt óver de foto en verschilt per dia. Zo krijgt elke foto
   een eigen kleur zonder dat er aan het beeld zelf iets verandert. */
.hero-dia::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Geen mix-blend-mode: het verloop is al doorzichtig (rgba). Met
     multiply erbij werd alles twee keer verdonkerd en zag je van de foto
     helemaal niets meer. */
}
/* Veel lichter dan eerst. Het verloop is er om de tekst leesbaar te
   houden, niet om de foto te verstoppen: links waar de tekst staat is het
   donker, rechts blijft het beeld gewoon te zien. */
.tint-goud::after {
  background: linear-gradient(100deg, rgb(26 20 4 / 0.86) 0%, rgb(40 32 8 / 0.42) 44%, rgb(60 48 10 / 0.04) 100%);
}
.tint-diep::after {
  background: linear-gradient(100deg, rgb(16 15 11 / 0.88) 0%, rgb(38 32 16 / 0.42) 44%, rgb(44 38 20 / 0.04) 100%);
}
.tint-koel::after {
  background: linear-gradient(100deg, rgb(10 18 28 / 0.86) 0%, rgb(24 32 40 / 0.4) 44%, rgb(30 40 48 / 0.04) 100%);
}
.tint-warm::after {
  background: linear-gradient(100deg, rgb(30 16 6 / 0.86) 0%, rgb(52 34 10 / 0.42) 44%, rgb(64 44 12 / 0.04) 100%);
}

/* De bediening: één pauzeknop en een balkje per dia dat meeloopt. */
.hero-bediening {
  /* Rechtsboven: de twee kaarten schuiven met hun bovenkant over de
     onderrand van de hero heen en zouden balkjes daar bedekken. */
  position: absolute;
  right: max(var(--r3), calc((100% - var(--breedte)) / 2 + var(--r3)));
  top: var(--r3);
  z-index: 3;
  width: min(200px, 38vw);
}

.hero-pauze {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgb(252 250 245 / 0.35);
  background: rgb(20 19 14 / 0.45);
  color: var(--room);
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 180ms var(--soepel), border-color 180ms var(--soepel);
}
.hero-pauze:hover { background: var(--goud); border-color: var(--goud); color: var(--inkt); }
.hero-pauze .teken-speel { display: none; }
.is-gepauzeerd .hero-pauze .teken-pauze { display: none; }
.is-gepauzeerd .hero-pauze .teken-speel { display: block; }

.hero-balkjes { display: flex; gap: 6px; flex: 1; }

.hero-balkje {
  position: relative;
  flex: 1;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgb(252 250 245 / 0.25);
  cursor: pointer;
  overflow: hidden;
}
/* Het balkje van de actieve dia loopt vol: je ziet hoelang hij nog staat. */
.hero-balkje::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--goud);
  transform: scaleX(0);
  transform-origin: left;
}
.hero-balkje.is-actief::after { animation: balkje-vol linear forwards; }
.is-gepauzeerd .hero-balkje.is-actief::after { animation-play-state: paused; }
.hero-balkje.is-gezien::after { transform: scaleX(1); }

@keyframes balkje-vol {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-dia { transition: none; }
  .hero-balkje.is-actief::after { animation: none; transform: scaleX(1); }
}

/* Het logo als watermerk, rechts in het vlak.

   Geen afbeelding óver een verloop, maar het verloop ín de vorm van het
   logo: het gouden verloop is de achtergrond en het logo is het masker
   dat bepaalt waar dat verloop zichtbaar is. Daardoor loopt het merk
   mee met dezelfde kleuren als de rest van de hero in plaats van er als
   een geplakt plaatje boven te hangen.

   Browsers zonder mask-image zouden een vol gouden vlak krijgen; daarom
   staat het hele blok achter @supports. */
.hero-merk {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  display: none;
}

@supports ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
  .hero-merk {
    display: block;
    background:
      linear-gradient(148deg,
        var(--goud-warm) 0%,
        var(--goud) 34%,
        #8a6d00 68%,
        #2a2415 100%);
    /* Alleen de lijntekening uit het logo, niet de gouden schijf: die
       zou als een vlek over het vlak liggen. `logo-rj-merk.webp` is uit
       het bronlogo afgeleid en heeft de tekening als alfakanaal. */
    -webkit-mask-image: url('/assets/img/logo-rj-merk.webp');
    mask-image: url('/assets/img/logo-rj-merk.webp');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: right -4% center;
    mask-position: right -4% center;
    -webkit-mask-size: auto 150%;
    mask-size: auto 150%;
    /* Veel zachter dan toen het watermerk het enige beeld was: er liggen
       nu foto's onder, en twee dingen die om aandacht vragen is er één
       te veel. */
    opacity: 0.28;
  }
}

/* Verloop dat links, waar de tekst staat, het donkerst is. Lichter dan
   toen hier een foto onder zat: er valt nu minder af te dekken, en het
   merk mag doorkomen. */
.hero-dek {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgb(20 19 14 / 0.94) 0%, rgb(20 19 14 / 0.72) 46%, rgb(20 19 14 / 0.15) 100%),
    linear-gradient(to bottom, rgb(20 19 14 / 0.45) 0%, transparent 34%, rgb(20 19 14 / 0.6) 100%);
  pointer-events: none;
}

/* Warme gouden gloed die traag ademt */
.hero-gloed {
  position: absolute;
  inset: -25% -10% auto -10%;
  height: 130%;
  z-index: -1;
  background:
    radial-gradient(46% 55% at 80% 26%, rgb(250 203 5 / 0.24), transparent 68%),
    radial-gradient(40% 50% at 10% 84%, rgb(250 203 5 / 0.10), transparent 70%);
  animation: gloed-adem 14s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

@media (max-width: 720px) {
  /* Op mobiel loopt de tekst over de hele breedte. Het merk zakt naar
     de onderkant, waar geen tekst staat, en wordt zwakker. */
  .hero-merk {
    -webkit-mask-position: right -22% bottom -8%;
    mask-position: right -22% bottom -8%;
    -webkit-mask-size: auto 72%;
    mask-size: auto 72%;
    opacity: 0.18;
  }
  .hero-dek {
    background: linear-gradient(to bottom, rgb(20 19 14 / 0.88), rgb(20 19 14 / 0.7));
  }
}

/* Fijne ruis zodat het vlak niet plat oogt */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-inhoud { padding-block: clamp(var(--r4), 6.5vw, 88px); position: relative; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r1) var(--r3);
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gedempt);
  margin-bottom: var(--r3);
}
.hero-meta strong { color: var(--goud); font-weight: 600; }
.hero-meta .stip {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--goud);
  display: inline-block;
  margin-right: 7px;
}

.hero-titel {
  font-size: var(--stap-5);
  font-stretch: 106%;
  font-weight: 800;
  letter-spacing: -0.035em;
  max-width: 19ch;
  margin-bottom: var(--r3);
  text-wrap: balance;
  color: var(--room);
}
.hero-titel em { font-style: normal; color: var(--goud); }

.hero-tekst {
  font-size: var(--stap-2);
  line-height: 1.5;
  max-width: 46ch;
  color: var(--gedempt);
}

.hero-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r2);
  margin-top: var(--r4);
}

/* Zachte overgang van de donkere hero naar het papier eronder */
.hero-voet {
  height: 64px;
  background: linear-gradient(to bottom, var(--inkt), var(--room));
}

/* ----------------------------------------------------- de twee ingangen */

.splitsing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--r3);
  margin-top: calc(var(--r5) * -1);
  position: relative;
  z-index: 2;
}

.pad {
  position: relative;
  background: var(--wit);
  border: 1px solid var(--rand-zacht);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-2);
  padding: var(--r4) var(--r3) var(--r3);
  display: flex;
  flex-direction: column;
  gap: var(--r2);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 300ms var(--soepel), box-shadow 300ms var(--soepel);
}
.pad::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--kleur);
  transform: scaleX(0.38);
  transform-origin: left;
  transition: transform 400ms var(--soepel);
}
.pad-uit::before { transform-origin: right; }
.pad:hover { transform: translateY(-5px); box-shadow: var(--schaduw-3); color: inherit; }
.pad:hover::before { transform: scaleX(1); }

.pad-in  { --kleur: var(--signaal-vlak); --kleur-ink: var(--signaal); }
.pad-uit { --kleur: var(--goud); --kleur-ink: var(--goud-diep); }

.pad-richting {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--kleur-ink);
}

.pad-titel {
  font-family: var(--font-display);
  font-size: var(--stap-3);
  font-weight: 750;
  font-stretch: 103%;
  margin: 0;
}

.pad-tekst { color: var(--tekst-zacht); margin: 0; flex: 1; }

.pad-actie {
  display: inline-flex;
  align-items: center;
  gap: var(--r1);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--kleur-ink);
}
.pad-actie .pijl { transition: transform 280ms var(--soepel); display: inline-block; }
.pad:hover .pad-actie .pijl { transform: translateX(6px); }

/* ------------------------------------------------------- productbakjes */

.bakjes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--r3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bakje {
  position: relative;
  background: var(--wit);
  border: 1px solid var(--rand-zacht);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 300ms var(--soepel), box-shadow 300ms var(--soepel), border-color 300ms var(--soepel);
}
.bakje:hover,
.bakje:has(.bakje-link:focus-visible) {
  transform: translateY(-6px);
  box-shadow: var(--schaduw-3);
  border-color: var(--goud);
}

.bakje-beeld {
  aspect-ratio: 4 / 3;
  background: var(--zand);
  position: relative;
  overflow: hidden;
}
.bakje-beeld img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--r2);
  transition: transform 460ms var(--soepel);
}
.bakje:hover .bakje-beeld img { transform: scale(1.06); }

.bakje-body { padding: var(--r2) var(--r3) var(--r3); display: flex; flex-direction: column; gap: 5px; flex: 1; }

.bakje-titel {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.22;
}
.bakje-link { text-decoration: none; color: inherit; }
.bakje-link::after { content: ''; position: absolute; inset: 0; }

.bakje-spec {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--tekst-zacht);
  margin: 0;
}

.bakje-prijs {
  font-family: var(--font-display);
  font-size: 1.34rem;
  font-weight: 780;
  font-stretch: 97%;
  margin-top: auto;
  padding-top: var(--r2);
  display: flex;
  align-items: baseline;
  gap: var(--r1);
}
.bakje-prijs del {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--tekst-zacht);
}

/* --------------------------------------------- het staat-label (signature) */

.staat {
  position: absolute;
  left: var(--r2);
  bottom: var(--r2);
  z-index: 2;
  display: inline-flex;
  align-items: stretch;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: var(--inkt);
  color: var(--room);
  border-radius: 100px;
  overflow: hidden;
  box-shadow: var(--schaduw-2);
}
.js .bakje.is-zichtbaar .staat,
.js .galerij-hoofd.is-zichtbaar .staat { animation: stempel 460ms var(--soepel) both; }

.staat-letter {
  padding: 4px 9px;
  background: var(--staat-kleur);
  color: var(--inkt);
  font-weight: 700;
}
.staat-rest { padding: 4px 11px 4px 9px; white-space: nowrap; }

/* Gloednieuw wijkt af van de gouden reeks: room op inkt leest als ongebruikt
   en springt eruit tussen de gebruikte toestellen. */
.staat-n { --staat-kleur: var(--room); }
.staat-a { --staat-kleur: var(--goud); }
.staat-b { --staat-kleur: var(--goud-warm); }
.staat-c { --staat-kleur: var(--gedempt); }

.vlag {
  position: absolute;
  top: var(--r2);
  right: var(--r2);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--inkt);
  color: var(--room);
}
.vlag-gereserveerd { background: var(--goud); color: var(--inkt); }
.vlag-verkocht { background: var(--tekst-zacht); }

.bakje-weg .bakje-beeld img { filter: grayscale(1); opacity: 0.5; }

/* ------------------------------------------------------------ staatuitleg */

.staatuitleg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--r3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.staatuitleg li {
  background: var(--zand);
  border-radius: var(--radius);
  padding: var(--r3);
  border: 1px solid transparent;
  transition: border-color 260ms var(--soepel), transform 260ms var(--soepel);
}
.staatuitleg li:hover { border-color: var(--goud); transform: translateY(-3px); }
.staatuitleg dt {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--goud-diep);
  margin-bottom: 7px;
}
.staatuitleg dd { margin: 0; color: var(--tekst-zacht); font-size: 0.96rem; }

/* -------------------------------------------------------------- score */

.scoreblok {
  background: var(--inkt);
  color: var(--room);
  border-radius: var(--radius);
  padding: var(--r5) var(--r4);
  position: relative;
  overflow: hidden;
}
.scoreblok::before {
  content: '';
  position: absolute;
  inset: auto -14% -58% auto;
  width: 62%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(250 203 5 / 0.22), transparent 66%);
  pointer-events: none;
}
.scoreblok h2 { color: var(--room); position: relative; }
.scoreblok p { color: var(--gedempt); max-width: 52ch; position: relative; }
/* Op donker moet het opschrift het heldere goud zijn, niet de diepe variant */
.scoreblok .opschrift { color: var(--goud); position: relative; }

/* Twee kolommen, zodat de rechterhelft niet leeg blijft staan */
.scoreblok {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--r5);
  align-items: center;
}
.scoreblok-cijfer { position: relative; flex: none; }
.scoreblok-tekst { position: relative; }
.scoreblok-tekst h2 { font-size: var(--stap-3); }
.score-onder {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--gedempt);
  margin-top: var(--r1);
  max-width: 22ch;
}

@media (max-width: 820px) {
  .scoreblok { grid-template-columns: 1fr; gap: var(--r3); align-items: start; }
}

.score {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 5vw, 5rem);
  font-weight: 800;
  font-stretch: 100%;
  color: var(--goud);
  line-height: 1;
  display: block;
  margin-bottom: var(--r1);
  font-variant-numeric: tabular-nums;
}

.sterren { color: var(--goud); letter-spacing: 3px; font-size: 1.1rem; }

/* ------------------------------------------------------------ fotostrip */

.fotostrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--r3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.fotostrip li { margin: 0; }
/* De staande foto vult links twee rijen; de laatste liggende foto vult
   de resterende twee kolommen, anders blijft er rechtsonder een gat. */
.fotostrip-groot { grid-row: span 2; }
.fotostrip li:last-child { grid-column: span 2; }

.fotostrip figure {
  margin: 0;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--zand);
  box-shadow: var(--schaduw-1);
  position: relative;
  display: flex;
}
.fotostrip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--soepel);
}
.fotostrip figure:hover img { transform: scale(1.04); }

.fotostrip figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--r4) var(--r3) var(--r2);
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--room);
  background: linear-gradient(to top, rgb(20 19 14 / 0.92), rgb(20 19 14 / 0.6) 55%, transparent);
}

@media (max-width: 860px) {
  .fotostrip { grid-template-columns: repeat(2, 1fr); }
  .fotostrip-groot { grid-row: span 1; grid-column: span 2; }
  .fotostrip-groot img { max-height: 420px; }
  .fotostrip li:last-child { grid-column: span 2; }
}
@media (max-width: 520px) {
  .fotostrip { grid-template-columns: 1fr; gap: var(--r2); }
  .fotostrip-groot { grid-column: span 1; }
  .fotostrip li:last-child { grid-column: span 1; }
  .fotostrip figcaption { padding: var(--r3) var(--r2) var(--r2); font-size: 0.84rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fotostrip figure:hover img { transform: none; }
}

/* ------------------------------------------------------- reviewcarrousel */

.carrousel { position: relative; }

.carrousel-spoor {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(290px, 1fr);
  gap: var(--r3);
  list-style: none;
  margin: 0;
  padding: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--rand) transparent;
  overscroll-behavior-x: contain;
}
@media (min-width: 760px)  { .carrousel-spoor { grid-auto-columns: minmax(0, calc((100% - var(--r3)) / 2)); } }
@media (min-width: 1080px) { .carrousel-spoor { grid-auto-columns: minmax(0, calc((100% - 2 * var(--r3)) / 3)); } }

.carrousel-spoor::-webkit-scrollbar { height: 8px; }
.carrousel-spoor::-webkit-scrollbar-thumb { background: var(--rand); border-radius: 4px; }

.review {
  scroll-snap-align: start;
  background: var(--wit);
  border: 1px solid var(--rand-zacht);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-1);
  transition: box-shadow 260ms var(--soepel), border-color 260ms var(--soepel);
}
.review:hover { box-shadow: var(--schaduw-2); border-color: var(--goud); }

.review figure { margin: 0; padding: var(--r3); display: flex; flex-direction: column; gap: var(--r2); height: 100%; }
.review .sterren { font-size: 0.98rem; letter-spacing: 2px; }
.review blockquote {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--tekst);
  flex: 1;
}
.review blockquote::before { content: '\201C'; }
.review blockquote::after  { content: '\201D'; }
.review figcaption { display: flex; flex-direction: column; gap: 2px; }
.review-naam { font-weight: 600; font-size: 0.95rem; }
.review-bron {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--tekst-zacht);
}

.carrousel-knoppen { display: flex; gap: var(--r1); }

.rondknop {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rand-zacht);
  background: var(--wit);
  color: var(--tekst);
  font-size: 1.05rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 200ms var(--soepel), border-color 200ms var(--soepel), transform 200ms var(--soepel);
}
.rondknop:hover:not(:disabled) { background: var(--goud); border-color: var(--goud); transform: translateY(-2px); }
.rondknop:disabled { opacity: 0.35; cursor: default; }

.carrousel-noot { margin-top: var(--r2); }

@media (prefers-reduced-motion: reduce) {
  .carrousel-spoor { scroll-behavior: auto; }
}

/* Beweging op het cijfer zonder de waarde aan te raken */
@keyframes score-op {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
.js .scoreblok.is-zichtbaar .score { animation: score-op 620ms var(--soepel) 120ms both; }
.js .scoreblok.is-zichtbaar .sterren { animation: score-op 620ms var(--soepel) 260ms both; }

/* ----------------------------------------------------------------- tabel */

.tabel-omhulsel {
  overflow-x: auto;
  border: 1px solid var(--rand-zacht);
  border-radius: var(--radius);
  background: var(--wit);
  box-shadow: var(--schaduw-1);
}

.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem;
  min-width: 520px;
}
.tabel th, .tabel td {
  text-align: left;
  padding: 14px var(--r3);
  border-bottom: 1px solid var(--rand-zacht);
}
.tabel thead th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--goud-diep);
  background: var(--zand);
  position: sticky;
  top: 0;
}
.tabel tbody tr { transition: background 180ms var(--soepel); }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover { background: var(--vlak-nieuw); }
.tabel-prijs { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.tabel-duur { font-family: var(--font-mono); font-size: 0.82rem; color: var(--tekst-zacht); white-space: nowrap; }

/* ------------------------------------------------------------- knoppen */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--r1);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 14px var(--r3);
  border: 1px solid transparent;
  border-radius: 100px;
  background: var(--goud);
  color: var(--inkt);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--schaduw-1);
  transition: transform 200ms var(--soepel), box-shadow 200ms var(--soepel), background 200ms var(--soepel);
}
.knop:hover {
  background: var(--goud-warm);
  color: var(--inkt);
  transform: translateY(-2px);
  box-shadow: var(--schaduw-2);
}
.knop:active { transform: translateY(0); }

.knop-omlijnd {
  background: transparent;
  color: var(--tekst);
  border-color: var(--rand-zacht);
  box-shadow: none;
}
.knop-omlijnd:hover { background: var(--zand); color: var(--tekst); border-color: var(--tekst-zacht); }

/* Op de donkere hero */
.knop-licht { background: var(--room); color: var(--inkt); }
.knop-licht:hover { background: var(--wit); color: var(--inkt); }
.knop-rand-licht {
  background: transparent;
  color: var(--room);
  border-color: var(--inkt-rand);
  box-shadow: none;
}
.knop-rand-licht:hover { background: var(--inkt-zacht); color: var(--room); border-color: var(--gedempt); }

.knop-groen { background: var(--whatsapp); color: var(--wit); }
.knop-groen:hover { background: var(--inkt); color: var(--wit); }

.knop-rij { display: flex; flex-wrap: wrap; gap: var(--r2); }
.knop-rij-midden { justify-content: center; }
.knop-vol { width: 100%; }

/* ---------------------------------------------------------------- filters */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r2);
  align-items: flex-end;
  background: var(--wit);
  border: 1px solid var(--rand-zacht);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-1);
  padding: var(--r3);
  margin-bottom: var(--r4);
}
.filter-veld { display: flex; flex-direction: column; gap: 6px; min-width: 150px; flex: 1 1 150px; }
.filter-veld label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
}
.filter-knoppen { flex-direction: row; align-items: center; gap: var(--r1); flex: 0 0 auto; }
.filter-breed { flex: 3 1 260px; }

/* --------------------------------------------------------------- formulier */

.veld { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--r3); }
.veld label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
}
.veld-hint { font-size: 0.86rem; color: var(--tekst-zacht); }

input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=url], input[type=search], select, textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--tekst);
  background: var(--wit);
  border: 1px solid var(--rand-zacht);
  border-radius: var(--radius-klein);
  padding: 12px 14px;
  width: 100%;
  transition: border-color 200ms var(--soepel), box-shadow 200ms var(--soepel);
}
input:hover, select:hover, textarea:hover { border-color: var(--tekst-zacht); }
input:focus, select:focus, textarea:focus {
  border-color: var(--goud);
  box-shadow: 0 0 0 3px rgb(250 203 5 / 0.28);
}
textarea { min-height: 140px; resize: vertical; line-height: 1.55; }

.honing {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.melding {
  border: 1px solid var(--rand-zacht);
  border-left: 4px solid var(--goud);
  background: var(--vlak-nieuw);
  border-radius: var(--radius-klein);
  padding: var(--r2) var(--r3);
  margin-bottom: var(--r3);
}
.melding-fout { border-left-color: var(--signaal); background: var(--vlak-let-op); }
.melding-goed { border-left-color: var(--whatsapp); background: var(--vlak-aan); }
.melding ul { margin: var(--r1) 0 0; padding-left: 1.1rem; }

/* --------------------------------------------------------------- diversen */

/* Inleidende alinea op een lichte pagina. Tegenhanger van .hero-tekst,
   die alleen op de donkere hero thuishoort. */
.lead {
  font-size: var(--stap-2);
  line-height: 1.5;
  max-width: 52ch;
  color: var(--tekst-zacht);
}

/* Kop van een binnenpagina: zand-band zodat het niet kaal begint */
.paginakop {
  background: var(--zand);
  border-bottom: 1px solid var(--rand-zacht);
  padding-block: var(--r5);
  position: relative;
  overflow: hidden;
}
.paginakop::after {
  content: '';
  position: absolute;
  inset: -40% -8% auto auto;
  width: 42%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(250 203 5 / 0.18), transparent 68%);
  pointer-events: none;
}
.paginakop h1 { font-size: var(--stap-4); margin-bottom: var(--r2); position: relative; }
.paginakop .lead { position: relative; }

.kruimels {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--tekst-zacht);
  margin-bottom: var(--r3);
  display: flex;
  gap: var(--r1);
  flex-wrap: wrap;
}

.velden-twee { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r2); }
@media (max-width: 520px) { .velden-twee { grid-template-columns: 1fr; gap: 0; } }

.tekstblok { max-width: 68ch; }
.tekstblok h2 {
  font-size: var(--stap-2);
  margin-top: var(--r5);
  padding-top: var(--r3);
  border-top: 1px solid var(--rand-zacht);
}
.tekstblok h2:first-of-type { margin-top: var(--r3); }
.tekstblok h3 {
  font-size: 1.08rem;
  font-family: var(--font-body);
  font-weight: 700;
  margin-top: var(--r3);
  margin-bottom: var(--r1);
}
.tekstblok ul { margin: 0 0 var(--r2); padding-left: 1.3rem; }
.tekstblok li { margin-bottom: 7px; }
.tekstblok .tabel-omhulsel { margin-bottom: var(--r3); }
.tekstblok .tabel th, .tekstblok .tabel td { padding: 11px var(--r2); font-size: 0.94rem; }

.blok-kop { font-size: var(--stap-2); margin-top: var(--r4); }
.tabel-smal { min-width: 0; }
.tabel-noot { margin-top: var(--r2); max-width: 62ch; }
.aanvraag { margin-top: var(--r4); }

@media (max-width: 620px) {
  .tabel-reparaties { min-width: 0; }
  .tabel-reparaties thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabel-reparaties tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px var(--r2);
    padding: var(--r3);
    border-bottom: 1px solid var(--rand-zacht);
  }
  .tabel-reparaties td, .tabel-reparaties th { border: 0; padding: 0; }
  .tabel-reparaties th[scope="row"] {
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--goud-diep);
    font-weight: 600;
  }
  .tabel-reparaties .tabel-prijs { grid-column: 2; grid-row: 2; font-size: 1.1rem; align-self: center; }
  .tabel-reparaties .tabel-duur { grid-column: 1; grid-row: 3; }
}

/* ------------------------------------------------------------ productdetail */

.detail {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--r5);
  align-items: start;
}

.galerij-hoofd {
  background: var(--zand);
  border: 1px solid var(--rand-zacht);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-1);
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.galerij-hoofd img { width: 100%; height: 100%; object-fit: contain; padding: var(--r3); }

.galerij-strip { display: flex; gap: var(--r1); margin-top: var(--r2); list-style: none; padding: 0; flex-wrap: wrap; }
.galerij-knop {
  width: 76px;
  aspect-ratio: 1;
  padding: 5px;
  background: var(--zand);
  border: 1px solid var(--rand-zacht);
  border-radius: var(--radius-klein);
  cursor: pointer;
  transition: border-color 200ms var(--soepel), transform 200ms var(--soepel);
}
.galerij-knop:hover { transform: translateY(-2px); border-color: var(--goud); }
.galerij-knop img { width: 100%; height: 100%; object-fit: contain; }
.galerij-knop[aria-current="true"] { border-color: var(--goud); border-width: 2px; padding: 4px; }

.detail-prijs {
  font-family: var(--font-display);
  font-size: var(--stap-4);
  font-weight: 800;
  font-stretch: 98%;
  line-height: 1;
  margin: var(--r2) 0;
  display: flex;
  align-items: baseline;
  gap: var(--r2);
  flex-wrap: wrap;
}
.detail-prijs del { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; color: var(--tekst-zacht); }

.specs { margin: var(--r3) 0; border-top: 1px solid var(--rand-zacht); }
.specs div {
  display: flex;
  justify-content: space-between;
  gap: var(--r3);
  padding: 12px 0;
  border-bottom: 1px solid var(--rand-zacht);
  font-size: 0.96rem;
}
.specs dt { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-zacht); }
.specs dd { margin: 0; font-weight: 600; text-align: right; }

/* --------------------------------------------------------------- gevel */

.gevel { margin: 0 0 var(--r3); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schaduw-1); }
.gevel img { width: 100%; height: auto; display: block; }

.gevel-leeg {
  border: 2px dashed var(--rand);
  border-radius: var(--radius);
  background: var(--zand);
  padding: var(--r3);
  margin-bottom: var(--r3);
  color: var(--tekst-zacht);
}
.gevel-leeg p:last-child { margin: 0; font-size: 0.95rem; }

/* ----------------------------------------------------------------- kaart */

.kaart-plek {
  background: var(--zand);
  border: 1px solid var(--rand-zacht);
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--r2);
  text-align: center;
  padding: var(--r3);
  overflow: hidden;
}
.kaart-plek iframe { width: 100%; height: 100%; border: 0; display: block; }
.kaart-geladen { display: block; padding: 0; }

/* ---------------------------------------------------------------- footer */

.voet {
  background: var(--inkt);
  color: var(--gedempt);
  margin-top: var(--r6);
  padding-block: var(--r6) var(--r3);
}
.voet a { color: var(--room); text-decoration-color: var(--inkt-rand); }
.voet a:hover { color: var(--goud); }

.voet-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--r4);
  margin-bottom: var(--r4);
}
.voet h2 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--goud);
  margin-bottom: var(--r2);
}
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { margin-bottom: 8px; }
.voet-tijden { font-family: var(--font-mono); font-size: 0.82rem; display: grid; grid-template-columns: auto 1fr; gap: 5px var(--r2); }
/* Op donker moet dit de gedempte lichte tint zijn; --tekst-zacht is
   bedoeld voor papier en haalt hier maar 2,5:1. */
.voet-tijden dt { color: var(--gedempt); opacity: 0.75; }
.voet-tijden dd { margin: 0; color: var(--gedempt); }
.voet-onder {
  border-top: 1px solid var(--inkt-rand);
  padding-top: var(--r3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--r2) var(--r3);
  justify-content: space-between;
  font-size: 0.82rem;
}

/* ------------------------------------------------------------------ 404 */

.leeg { text-align: center; padding-block: var(--r6); max-width: 48ch; margin-inline: auto; }
.leeg-code { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.2em; color: var(--goud-diep); margin-bottom: var(--r2); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .splitsing { margin-top: calc(var(--r4) * -1); }
}

@media (max-width: 860px) {
  .detail { grid-template-columns: 1fr; gap: var(--r4); }
  .splitsing { grid-template-columns: 1fr; }
  .pad-in { order: -1; }
  .pad::before { transform: scaleX(1); }
}

/* Eerder inklappen dan gebruikelijk: route, WhatsApp en bellen staan
   naast het menu en die drie krijgen voorrang op de menu-items. */

/* -------------------------------------------------------- snelacties ------

   Route en WhatsApp naast het telefoonnummer. Samen met bellen is dat wat
   iemand op straat nodig heeft: waar zit je, mag ik even appen, mag ik
   bellen. Daarom blijven ze op mobiel staan en verdwijnt eerder het menu.
   -------------------------------------------------------------------- */

.snelacties {
  display: flex;
  align-items: center;
  gap: var(--r1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.snelknop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 var(--r2);
  border: 1px solid var(--rand);
  border-radius: 100px;
  background: var(--wit);
  color: var(--goud-diep);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 200ms var(--soepel), color 200ms var(--soepel),
              border-color 200ms var(--soepel), transform 200ms var(--soepel);
}
.snelknop:hover,
.snelknop:focus-visible {
  background: var(--goud);
  border-color: var(--goud);
  color: var(--inkt);
  transform: translateY(-2px);
}
.snelknop svg { flex: none; }

/* WhatsApp krijgt zijn eigen groen bij hover — de enige plek op de site
   waar een vreemde merkkleur mag, omdat mensen die knop op kleur zoeken. */
.snelknop-app:hover,
.snelknop-app:focus-visible {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: var(--wit);
}

/* ------------------------------------------------- kanalen in het menu -----

   Marktplaats en Facebook staan in dezelfde lijst als de menu-items. Op een
   breed scherm zijn het pictogrammen aan het eind van de rij — alleen Route
   en WhatsApp krijgen hun naam erbij, want dat zijn de acties. Op mobiel
   klappen ze mee open in het menu, mét naam.
   -------------------------------------------------------------------- */

.kanaal-item { display: flex; }

.kanaal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--rand);
  background: var(--wit);
  color: var(--goud-diep);
  text-decoration: none;
  transition: background 180ms var(--soepel), color 180ms var(--soepel),
              border-color 180ms var(--soepel), transform 180ms var(--soepel);
}
.kanaal-link:hover,
.kanaal-link:focus-visible {
  background: var(--goud);
  border-color: var(--goud);
  color: var(--inkt);
  transform: translateY(-2px);
}
.kanaal-link svg { flex: none; width: 18px; height: 18px; }
/* Op breed scherm alleen het pictogram; de naam blijft er voor
   schermlezers en voor de mobiele weergave. */
.kanaal-naam { display: none; }

@media (prefers-reduced-motion: reduce) {
  .snelknop:hover, .kanaal-link:hover { transform: none; }
}

@media (max-width: 1200px) {
  .menu-knop { display: block; }

  /* Het uitklapmenu is een paneel dat onder de kop vandaan komt, niet een
     rijtje losse links. Het hangt rechts uitgelijnd onder de menuknop en
     heeft een eigen breedte, zodat het niet de hele balk overneemt. */
  .nav-lijst {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: var(--r3);
    left: auto;
    width: min(320px, calc(100vw - var(--r3) * 2));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--r1);
    background: var(--wit);
    border: 1px solid var(--rand-zacht);
    border-radius: var(--radius);
    box-shadow: 0 18px 40px rgb(20 19 14 / 0.18);
    overflow: hidden;
  }
  .nav-lijst.is-open { display: flex; animation: opkomen 220ms var(--soepel) both; }

  /* De scheidingslijn hoort op de rij, niet op de link: een <a> is inline,
     en dan valt de rand op de tekstbasislijn dwars door de letters heen. */
  .nav-lijst > li { border-bottom: 1px solid var(--rand-zacht); }
  .nav-lijst > li:last-child { border-bottom: 0; }

  .nav-link,
  .kanaal-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--r2);
    width: 100%;
    min-height: 52px;
    padding: 0 var(--r2);
    border: 0;
    border-radius: var(--radius-klein);
    background: none;
    color: var(--tekst);
    font-size: 1.02rem;
    font-weight: 600;
    transition: background 160ms var(--soepel), color 160ms var(--soepel);
  }
  .nav-link::after { display: none; }
  .nav-link, .kanaal-link { text-decoration: none; }
  .nav-link:hover,
  .kanaal-link:hover,
  .nav-link:focus-visible,
  .kanaal-link:focus-visible {
    background: var(--zand);
    color: var(--goud-diep);
    transform: none;
  }
  .nav-link.is-actief {
    color: var(--goud-diep);
    background: var(--vlak-nieuw);
  }

  /* Marktplaats en Facebook horen niet bij de pagina's; een tussenkopje
     maakt dat verschil zichtbaar zonder er een tweede menu van te maken. */
  .kanaal-item { display: block; }
  .kanaal-eerste { margin-top: var(--r1); }
  .kanaal-eerste::before {
    content: 'Ook te vinden op';
    display: block;
    padding: var(--r2) var(--r2) 6px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tekst-zacht);
  }
  .kanaal-link { font-weight: 500; }
  .kanaal-naam { display: inline; }
  .kanaal-link svg { color: var(--goud-diep); width: 18px; height: 18px; }

  .kop, .kop-binnen { position: relative; }
}

/* ------------------------------------------- labels in de kop ------------

   Route en WhatsApp houden hun naam zolang de rij past. Marktplaats en
   Facebook blijven altijd pictogram — dat zijn vindplaatsen, geen acties.
   -------------------------------------------------------------------- */

@media (max-width: 1360px) {
  .snelknop-tekst { display: none; }
  .snelknop { padding: 0 13px; }
}

/* De adresregel onder het logo wijkt eerder dan de knoppen: hij staat in de
   voet en op /contact nog vaak genoeg. */
@media (max-width: 1500px) {
  .merk-naam span { display: none; }
  .merk-naam { font-size: 1.08rem; }
}

/* Onder deze breedte blijft van de belknop alleen de hoorn over. Het
   nummer staat in de voet en op /contact; de knop belt gewoon. */
@media (max-width: 700px) {
  .nav-bel span { display: none; }
  .nav-bel { padding: 13px; }
}

/* ==========================================================================
   Teruggezet uit de back-up van 19 augustus. Deze secties waren per
   ongeluk verdwenen bij een blokvervanging elders in dit bestand.
   ========================================================================== */

/* ------------------------------------------------------------ breedbeeld */

.breedbeeld { margin: 0; }
.breedbeeld img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--schaduw-2);
  display: block;
}
.breedbeeld figcaption {
  margin-top: var(--r2);
  font-size: 0.92rem;
  color: var(--tekst-zacht);
  max-width: 62ch;
}

/* ==========================================================================
   Reparatiekiezer: merk -> model -> menukaart
   ========================================================================== */

.stappenbalk-omhulsel { padding-top: var(--r3); }

.stappenbalk {
  display: flex;
  align-items: center;
  gap: var(--r1);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--tekst-zacht);
}
.stappenbalk a { color: var(--goud-diep); }
.stappenbalk [aria-current] { color: var(--tekst); font-weight: 600; }
.stappenbalk .pijl { color: var(--rand); }

/* ------------------------------------------------------------ merktegels */

.merktegels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: var(--r2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.merktegel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--r4);
  min-height: 132px;
  padding: var(--r3);
  background: var(--inkt);
  color: var(--room);
  border: 1px solid var(--inkt);
  border-radius: var(--radius);
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--schaduw-1);
  transition: transform 280ms var(--soepel), box-shadow 280ms var(--soepel),
              background 280ms var(--soepel), color 280ms var(--soepel);
}
/* Gouden veeg die bij hover over de tegel trekt */
.merktegel::before {
  content: '';
  position: absolute;
  inset: auto -30% -60% auto;
  width: 78%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(250 203 5 / 0.30), transparent 68%);
  transition: transform 420ms var(--soepel), opacity 300ms var(--soepel);
  opacity: 0.75;
  pointer-events: none;
}
.merktegel:hover,
.merktegel:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--schaduw-3);
  background: var(--goud);
  color: var(--inkt);
  border-color: var(--goud);
}
.merktegel:hover::before { transform: translate(-12%, -12%) scale(1.25); opacity: 0.45; }

.merktegel-naam {
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 800;
  font-stretch: 104%;
  letter-spacing: -0.025em;
  line-height: 1.05;
  position: relative;
}
.merktegel-aantal {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gedempt);
  position: relative;
  transition: color 280ms var(--soepel);
}
.merktegel:hover .merktegel-aantal,
.merktegel:focus-visible .merktegel-aantal { color: var(--goud-diep); }

/* "Overige merken" krijgt de omgekeerde behandeling: goud in rust */
.merktegel-overig {
  background: var(--goud);
  color: var(--inkt);
  border-color: var(--goud);
}
.merktegel-overig .merktegel-aantal { color: var(--goud-diep); }
.merktegel-overig::before { background: radial-gradient(circle, rgb(20 19 14 / 0.14), transparent 68%); }
.merktegel-overig:hover,
.merktegel-overig:focus-visible {
  background: var(--inkt);
  color: var(--room);
  border-color: var(--inkt);
}
.merktegel-overig:hover .merktegel-aantal,
.merktegel-overig:focus-visible .merktegel-aantal { color: var(--goud); }

/* ----------------------------------------------------------- modeltegels */

/* ------------------------------------------------- filters modelkeuze */

/* Twee rijen knoppen boven de modeltegels: soort apparaat en volgorde.
   Bewust links en geen <select>: met hooguit vijf soorten is één klik
   sneller dan een keuzelijst openklappen, en een link werkt zonder JS. */

.modelfilters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r2) var(--r3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--r3);
}

.filterrij {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Duwt de volgordeknoppen naar rechts zolang er ruimte is; bij smal
   scherm valt hij gewoon onder de soortfilters. */
.filterrij-volgorde { margin-left: auto; }

.filterknop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  background: var(--wit);
  color: var(--tekst-zacht);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.filterknop:hover {
  background: var(--zand);
  color: var(--tekst);
  border-color: var(--tekst-zacht);
}

/* De actieve stand in inkt, niet in goud: goud is op deze site de kleur
   van opschriften en prijzen, en die betekenis moet niet vervagen. */
.filterknop-aan {
  background: var(--inkt);
  border-color: var(--inkt);
  color: var(--room);
}
.filterknop-aan:hover {
  background: var(--inkt-zacht);
  border-color: var(--inkt-zacht);
  color: var(--room);
}

.filterknop-tel {
  font-size: 0.66rem;
  color: var(--tekst-zacht);
  background: var(--zand);
  border-radius: 999px;
  padding: 1px 7px;
}
.filterknop-aan .filterknop-tel {
  background: var(--inkt-rand);
  color: var(--room);
}

@media (max-width: 30rem) {
  .modelfilters { gap: var(--r2); }
  /* Op een smal scherm mag de volgorderij gewoon links uitlijnen. */
  .filterrij-volgorde { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .filterknop { transition: none; }
}

.modeltegels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--r2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.modeltegel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px var(--r2);
  padding: var(--r3);
  background: var(--wit);
  border: 1px solid var(--rand-zacht);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-1);
  text-decoration: none;
  color: inherit;
  transition: transform 240ms var(--soepel), box-shadow 240ms var(--soepel), border-color 240ms var(--soepel);
}
.modeltegel:hover, .modeltegel:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--schaduw-2);
  border-color: var(--goud);
  color: inherit;
}
.modeltegel-naam {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  grid-column: 1;
}
.modeltegel-meta {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--tekst-zacht);
}
.modeltegel .pijl {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.1rem;
  color: var(--goud-diep);
  transition: transform 240ms var(--soepel);
}
.modeltegel:hover .pijl { transform: translateX(5px); }

/* ------------------------------------------------------------- menukaart */

.menukaart {
  background: var(--wit);
  border: 1px solid var(--rand-zacht);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-1);
  padding: var(--r3) var(--r4);
}

.menukaart-lijst { list-style: none; margin: 0; padding: 0; }
.menukaart-lijst li {
  display: flex;
  align-items: baseline;
  gap: var(--r2);
  padding: 14px 0;
  border-bottom: 1px solid var(--rand-zacht);
}
.menukaart-lijst li:last-child { border-bottom: 0; }

.menukaart-wat { display: flex; flex-direction: column; gap: 2px; flex: none; max-width: 70%; }
.menukaart-naam { font-weight: 600; font-size: 1.04rem; }
.menukaart-duur {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--tekst-zacht);
}

/* Stippellijn zoals op een menukaart, tussen dienst en prijs */
.menukaart-stippel {
  flex: 1;
  border-bottom: 2px dotted var(--rand);
  transform: translateY(-4px);
  min-width: 20px;
}

.menukaart-prijs {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 750;
  white-space: nowrap;
  flex: none;
}

.menukaart-tussenkop {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--goud-diep);
  margin: var(--r3) 0 0;
  padding-top: var(--r3);
  border-top: 2px solid var(--zand);
}

.menukaart-acties { margin-top: var(--r3); }

@media (max-width: 620px) {
  .menukaart { padding: var(--r2) var(--r3); }
  .menukaart-lijst li { flex-wrap: wrap; gap: 2px var(--r2); }
  .menukaart-wat { max-width: none; flex: 1 1 100%; }
  .menukaart-stippel { display: none; }
  .menukaart-prijs { font-size: 1.14rem; }
  .merktegels { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }
  .merktegel { min-height: 108px; padding: var(--r2); gap: var(--r3); }
  .merktegel-naam { font-size: 1.18rem; }
}

@media (prefers-reduced-motion: reduce) {
  .merktegel:hover, .modeltegel:hover { transform: none; }
  .merktegel:hover::before { transform: none; }
  .modeltegel:hover .pijl { transform: none; }
}

/* ------------------------------------------------------- stappenbalk */



/* ========================================================== slideshow ======

   De strook met winkelfoto's onderaan de homepage. Eén dia tegelijk, met
   scroll-snap zodat vegen op mobiel vanzelf goed uitkomt. Zonder
   JavaScript blijft het een scrollbare strook.
   ======================================================================== */

.slideshow { position: relative; }

.slideshow-spoor {
  display: flex;
  gap: var(--r3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: var(--r1);
  margin: 0;
}
.slideshow-spoor::-webkit-scrollbar { display: none; }

.dia {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--zand);
  box-shadow: var(--schaduw-1);
}
.dia img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.dia:first-child img { object-position: center 30%; }

.dia figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--r5) var(--r3) var(--r3);
  color: var(--room);
  font-size: 0.96rem;
  line-height: 1.45;
  background: linear-gradient(to top, rgb(20 19 14 / 0.94), rgb(20 19 14 / 0.6) 58%, transparent);
}

.slideshow-bediening {
  position: absolute;
  right: var(--r3);
  top: var(--r3);
  display: flex;
  gap: 6px;
}

.rondknop-pauze .teken-speel { display: none; }
.is-gepauzeerd .rondknop-pauze .teken-pauze { display: none; }
.is-gepauzeerd .rondknop-pauze .teken-speel { display: block; }

.slideshow-stippen {
  display: flex;
  justify-content: center;
  gap: var(--r1);
  margin-top: var(--r2);
}
.stip-knop {
  width: 40px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--rand);
  cursor: pointer;
  transition: background 200ms var(--soepel), width 200ms var(--soepel);
}
.stip-knop:hover { background: var(--gedempt); }
.stip-knop.is-actief { background: var(--goud-diep); width: 56px; }

/* ------------------------------------------------------- merkteken/model */

.merkteken-letter {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1;
}

.modelkop-foto {
  width: clamp(84px, 12vw, 120px);
  height: auto;
  object-fit: contain;
  margin-bottom: var(--r2);
  background: var(--wit);
  border: 1px solid var(--rand-zacht);
  border-radius: var(--radius);
  padding: var(--r1);
}

.modeltegel-beeld { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: var(--r2); }
.modeltegel-beeld .modeltegel-naam { grid-column: 2; }
.modeltegel-beeld .modeltegel-meta { grid-column: 2; }
.modeltegel-beeld .pijl { grid-column: 3; grid-row: 1 / span 2; }
.modeltegel-foto {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: var(--zand);
  border-radius: var(--radius-klein);
  padding: 4px;
}

/* ------------------------------------------------- verkoopkanalen in de voet */

.voet-elders { margin-top: var(--r3); }
.voet-fbpagina { margin: var(--r2) 0 0; font-size: 0.9rem; }

.sociaal { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.sociaal-knop {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--inkt-rand);
  border-radius: 100px;
  color: var(--room);
  text-decoration: none;
  font-size: 0.9rem;
  overflow: hidden;
  isolation: isolate;
  transition: color 260ms var(--soepel), border-color 260ms var(--soepel);
}
.sociaal-knop::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--goud);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 340ms var(--soepel);
}
.sociaal-knop:hover,
.sociaal-knop:focus-visible { color: var(--inkt); border-color: var(--goud); }
.sociaal-knop:hover::before,
.sociaal-knop:focus-visible::before { transform: scaleX(1); }

.sociaal-teken {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--goud);
  transition: color 260ms var(--soepel), transform 340ms var(--soepel);
}
.sociaal-knop:hover .sociaal-teken { color: var(--inkt); transform: rotate(-8deg) scale(1.1); }
.sociaal-naam { flex: 1; }
.sociaal-pijl {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 260ms var(--soepel), transform 260ms var(--soepel);
}
.sociaal-knop:hover .sociaal-pijl,
.sociaal-knop:focus-visible .sociaal-pijl { opacity: 1; transform: none; }

/* --------------------------------------------------------- filterlade -----

   De filters op /toestellen. Op een telefoon staan ze dichtgeklapt, want
   anders staat het eerste toestel pas onder de vouw.
   -------------------------------------------------------------------- */

.filterlade { margin-bottom: var(--r3); }

.filterlade > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r2);
  min-height: 52px;
  padding: 0 var(--r3);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--wit);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--goud-diep);
  cursor: pointer;
  list-style: none;
}
.filterlade > summary::-webkit-details-marker { display: none; }
.filterlade[open] > summary { margin-bottom: var(--r2); }
.filterlade[open] .filterlade-teken { transform: rotate(180deg); }
.filterlade-teken { transition: transform 200ms var(--soepel); }

@media (min-width: 721px) {
  .filterlade > summary { display: none; }
  .filterlade[open] > summary { margin-bottom: 0; }
}

@media (max-width: 620px) {
  .dia img { aspect-ratio: 4 / 3; }
  .dia figcaption { padding: var(--r4) var(--r2) var(--r2); font-size: 0.9rem; }
  .slideshow-bediening { right: var(--r2); top: var(--r2); }
  .stip-knop { width: 28px; }
  .stip-knop.is-actief { width: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .filterlade-teken, .sociaal-knop::before, .sociaal-teken, .sociaal-pijl { transition: none; }
  .sociaal-knop:hover .sociaal-teken { transform: none; }
}

/* --------------------------------------------------- globale prijslijst

   Het losse blok met reparaties die voor elk toestel gelden. Staat op de
   reparatiepagina op elke stap behalve stap 3, waar dezelfde regels al
   onderaan de prijslijst van het model staan.
   -------------------------------------------------------------------- */

.menukaart-globaal .opschrift { margin-bottom: var(--r1); }
.menukaart-inleiding { margin: 0 0 var(--r2); max-width: 60ch; }

/* ============================================ de kop op kleine schermen ====

   Op een telefoon is de volgorde van belangrijkheid: bellen, appen, route,
   menu. Het woordmerk naast het logo wijkt als eerste — het logo zelf zegt
   al genoeg en de naam staat in de titelbalk van de browser.
   ======================================================================== */

@media (max-width: 860px) {
  .kop-binnen { min-height: 80px; }
  .merk-teken { width: 46px; height: 46px; }
}

@media (max-width: 620px) {
  /* Hier wordt het krap: het woordmerk gaat eraf. */
  .merk-naam { display: none; }
  .kop-binnen { gap: 6px; min-height: 72px; }
  .nav { gap: 6px; }
  .merk-teken { width: 42px; height: 42px; }
  .snelknop { min-height: 44px; padding: 0 11px; }
  .menu-knop { padding: 10px 12px; font-size: 0.78rem; }
  .nav-bel { padding: 12px; }
}

@media (max-width: 380px) {
  .merk-teken { width: 38px; height: 38px; }
  .snelknop { padding: 0 9px; }
  .menu-knop { padding: 10px; font-size: 0.74rem; }
}

/* ------------------------------------------------------------ merkteken

   Het logo rechtsboven op een merktegel. Erft de tekstkleur, dus het
   verspringt van goud naar inkt zodra de tegel bij hover omslaat —
   dezelfde beweging als de rest van de tegel, geen eigen effect.
   -------------------------------------------------------------------- */

.merkteken {
  position: absolute;
  top: var(--r3);
  right: var(--r3);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--goud);
  opacity: 0.9;
  transition: color 280ms var(--soepel), transform 320ms var(--soepel), opacity 280ms var(--soepel);
  pointer-events: none;
}
.merkteken svg { width: 100%; height: 100%; display: block; }

.merktegel:hover .merkteken,
.merktegel:focus-visible .merkteken {
  color: var(--inkt);
  opacity: 1;
  transform: scale(1.08);
}
.merktegel-overig .merkteken { color: var(--inkt); }
.merktegel-naam { padding-right: 38px; }

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

/* ------------------------------------------------- etalage op de telefoon

   De uitgelichte toestellen op de homepage worden op klein scherm een
   horizontale strook met scroll-snap: vegen in plaats van acht kaartjes
   onder elkaar. Alleen hier — op /toestellen blijft het een raster, want
   daar ben je aan het zoeken en wil je overzicht.
   -------------------------------------------------------------------- */

@media (max-width: 720px) {
  .bakjes-etalage {
    display: flex;
    gap: var(--r2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Uit het omhulsel laten lopen tot de schermrand: dan is te zien dat
       er nog meer naast staat. */
    margin-inline: calc(var(--r3) * -1);
    padding-inline: var(--r3);
    padding-bottom: var(--r2);
    /* Zonder dit snapt het eerste kaartje tegen de schermrand en scrollt de
       padding meteen weg; het staat dan niet meer op één lijn met de kop. */
    scroll-padding-inline: var(--r3);
  }
  .bakjes-etalage::-webkit-scrollbar { display: none; }

  .bakjes-etalage > .bakje {
    flex: 0 0 62%;
    max-width: 260px;
    scroll-snap-align: start;
  }

  /* De trap-animatie zet transforms op de kaartjes; in een scrollstrook
     verstoort dat de snap-posities. */
  .js .bakjes-etalage.trap > * { transform: none; }
}

@media (max-width: 380px) {
  .bakjes-etalage {
    margin-inline: calc(var(--r2) * -1);
    padding-inline: var(--r2);
    scroll-padding-inline: var(--r2);
  }
  .bakjes-etalage > .bakje { flex-basis: 72%; }
}