/* ------------------------------------------------------------------------
   Beveiliging X · de ontwerplaag van de landingspagina.

   Dezelfde rollen en hetzelfde palet als de backoffice
   (backoffice/app/assets/css/beveiliging-ontwerp.css): één doorlopend donker
   doek, nacht en petrol met cyaan als de lijn die leidt, amber en rood alleen
   als toestand en nooit als decoratie. De maat is groter dan op kantoor — een
   bezoeker leest op afstand, een planner werkt van dichtbij.

   De letters zijn Inter, uit public/fonts, net als in de backoffice. Er gaat
   geen verzoek naar een server van Google.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Inter-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Inter-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Inter-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Inter-700-normal.woff2') format('woff2');
}

:root {
  /* Het palet van het merk. */
  --nacht-1000: #080d15;
  --nacht-900: #0c1420;
  --nacht-800: #152232;
  --petrol-900: #07394a;
  --petrol-600: #0e7490;
  --cyaan-400: #22b8d4;
  --cyaan-200: #8ed6e6;
  --amber-500: #f5b02e;

  /* Het doek en de vlakken. */
  --doek: var(--nacht-1000);
  --vlak: var(--nacht-900);
  --vlak-2: var(--nacht-800);
  --vlak-3: var(--petrol-900);

  /* De tekstladder. */
  --inkt: #eef5f8;
  --muts: #9db3c0;
  /* Het schermenboek noemt hier #6d8492. Op een landingspagina staat deze tint
     ook op de kleine letter over een foto en op een verhoogd vlak, en dan blijft
     hij met 4,1:1 onder de grens van WCAG AA. Een tint lichter haalt op elk
     vlak de 4,5 (doek 5,9 · vlak 5,6 · vlak-2 4,9). */
  --stil: #7a91a0;

  /* De lijnen zijn cyaan op lage dekking. */
  --lijn: color-mix(in srgb, var(--cyaan-200) 13%, transparent);
  --lijn-2: color-mix(in srgb, var(--cyaan-200) 26%, transparent);

  /* De maat. */
  --radius-kaart: 16px;
  --radius-tegel: 18px;
  --radius-knop: 14px;
  --radius-chip: 20px;
  --radius-blad: 26px;
  --omtrek: 1240px;
  --gutter: 20px;

  --schaduw: 0 24px 60px -24px color-mix(in srgb, var(--nacht-1000) 85%, transparent);
  --schaduw-plaat: 0 40px 90px -30px color-mix(in srgb, var(--nacht-1000) 92%, transparent);

  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  /* De balk staat vast bovenin; een anker mag er niet achter verdwijnen. */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--doek);
  color: var(--inkt);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

::selection { background: var(--cyaan-400); color: var(--doek); }

a { color: var(--cyaan-200); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cyaan-400); }

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

/* De koppenladder. Groter dan op kantoor, dezelfde verhoudingen. */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.1;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6.4vw, 4.5rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); line-height: 1.14; }
h3 { font-size: 1.16rem; letter-spacing: -0.012em; line-height: 1.3; }
h4 { font-size: 1.02rem; letter-spacing: -0.008em; line-height: 1.35; }
p { margin: 0; text-wrap: pretty; }

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--cyaan-400);
  color: var(--doek);
  font-weight: 600;
  border-radius: 0 0 var(--radius-knop) 0;
}
.overslaan:focus { left: 0; }

.omtrek {
  width: 100%;
  max-width: var(--omtrek);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.omtrek--smal { max-width: 820px; }

/* Het oogmerk: het kleine label boven een kop, met de lijn die leidt ervoor.
   Zelfde figuur als de sectiekop in de backoffice ("— OPERATIE · MELDKAMER"). */
.oogmerk {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--cyaan-200);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.oogmerk::before {
  content: '';
  width: 26px;
  height: 2px;
  flex: none;
  background: var(--cyaan-400);
  border-radius: 2px;
}

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

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-knop);
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.knop--groot { padding: 16px 30px; font-size: 1.04rem; }

.knop--accent {
  background: linear-gradient(135deg, #1493b3, #3ecbe2);
  color: var(--doek);
  box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--cyaan-400) 62%, transparent);
}
.knop--accent:hover {
  color: var(--doek);
  transform: translateY(-1px);
  box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--cyaan-400) 75%, transparent);
}

.knop--rand {
  border-color: var(--lijn-2);
  background: color-mix(in srgb, var(--vlak-2) 60%, transparent);
  color: var(--inkt);
  backdrop-filter: blur(6px);
}
.knop--rand:hover { border-color: var(--cyaan-400); color: var(--inkt); background: var(--vlak-2); }

.knop--stil { color: var(--muts); }
.knop--stil:hover { color: var(--inkt); background: var(--vlak-2); }

/* -------------------------------------------------------------- de balk */

.balk {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--doek) 86%, transparent);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px) saturate(140%);
  transition: border-color .2s ease, background-color .2s ease;
}
.balk[data-gezakt] {
  border-bottom-color: var(--lijn);
  background: color-mix(in srgb, var(--doek) 94%, transparent);
}

.balk__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}

.balk__merk { display: flex; align-items: center; flex: none; }
.balk__merk img { width: 168px; height: auto; }

.balk__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.94rem;
}
.balk__nav > a:not(.knop) {
  padding: 9px 13px;
  border-radius: var(--radius-knop);
  color: var(--muts);
  font-weight: 500;
  text-decoration: none;
  transition: color .16s ease, background-color .16s ease;
}
.balk__nav > a:not(.knop):hover { color: var(--inkt); background: var(--vlak-2); }
.balk__nav .knop--stil { margin-left: 8px; }

/* De hamburger. Een schakelaar zonder JavaScript, zodat het menu ook werkt
   wanneer het script niet aankomt. */
.menu-knop { display: none; }
.menu-schakelaar { display: none; }

/* ------------------------------------------------------------- de kopband */

.kop {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(92vh, 860px);
  padding: 140px 0 84px;
  overflow: hidden;
}
.kop__beeld { position: absolute; inset: 0; z-index: -2; }
.kop__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* De sluier: het beeld zakt naar het doek toe, zodat de letter erop blijft staan.
   Twee lagen: een verloop van links, dat de letterkolom draagt, en een verloop
   naar onderen, dat het beeld in het doek laat overgaan. Zonder de eerste komt de
   lopende tekst op de verlichte ramen te staan en is hij niet meer te lezen. */
.kop::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(95deg,
      color-mix(in srgb, var(--doek) 94%, transparent) 0%,
      color-mix(in srgb, var(--doek) 86%, transparent) 38%,
      color-mix(in srgb, var(--doek) 45%, transparent) 78%,
      color-mix(in srgb, var(--doek) 30%, transparent) 100%),
    radial-gradient(70% 60% at 8% 88%, color-mix(in srgb, var(--petrol-900) 58%, transparent), transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--doek) 55%, transparent) 0%,
      color-mix(in srgb, var(--doek) 24%, transparent) 38%,
      color-mix(in srgb, var(--doek) 72%, transparent) 78%,
      var(--doek) 100%);
}

/* De kopband, de strook en het slot staan zelf op de omtrek, zodat hun letter
   op dezelfde lijn begint als het logo in de balk. De regellengte wordt daarna
   binnen de omtrek beperkt, niet door de omtrek zelf te versmallen — anders
   schuift de hele kolom naar het midden. */
.kop__binnen { max-width: var(--omtrek); }
.kop__binnen > * { max-width: 880px; }
.kop h1 { margin-bottom: 22px; }
.kop__lood {
  max-width: 62ch;
  color: var(--muts);
  font-size: clamp(1.03rem, 1.6vw, 1.22rem);
  line-height: 1.62;
}
.kop__knoppen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.kop__strook {
  /* De vier korte regels mogen de leeskolom van 880 overschrijden: ze horen op
     één lijn, niet als een vierde regel eronder. */
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 46px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--lijn);
  list-style: none;
  color: var(--stil);
  font-size: 0.87rem;
  font-weight: 500;
}
.kop__strook li { display: flex; align-items: center; gap: 9px; }
.kop__strook li::before {
  content: '';
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--cyaan-400);
}

/* -------------------------------------------------------------- de blokken */

.blok { padding: clamp(68px, 9vw, 116px) 0; }
.blok--vlak {
  background:
    radial-gradient(58% 44% at 82% 4%, color-mix(in srgb, var(--petrol-600) 16%, transparent), transparent 72%),
    var(--vlak);
  border-block: 1px solid var(--lijn);
}

.blok__kop { max-width: 760px; margin-bottom: clamp(38px, 5vw, 58px); }
.blok__kop h2 { margin-bottom: 18px; }
.blok__lood { color: var(--muts); font-size: 1.06rem; }

.kleinekop {
  margin: clamp(48px, 6vw, 72px) 0 24px;
  color: var(--muts);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.band { padding: clamp(56px, 6vw, 80px) 0; border-bottom: 1px solid var(--lijn); }

/* ---------------------------------------------------------------- roosters */

.rooster { display: grid; gap: 20px; }
.rooster--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.rooster--4 { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
.rooster--strak { margin-top: clamp(38px, 5vw, 56px); }

.tegel {
  padding: 28px 26px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-tegel);
  box-shadow: var(--schaduw);
  transition: border-color .2s ease, transform .2s ease;
}
.tegel:hover { border-color: var(--lijn-2); transform: translateY(-2px); }
.tegel h2, .tegel h3, .tegel h4 { margin-bottom: 11px; }
.tegel p { color: var(--muts); font-size: 0.97rem; }

.tegel--stil { background: color-mix(in srgb, var(--vlak-2) 55%, transparent); box-shadow: none; }
.blok--vlak .tegel--stil { background: color-mix(in srgb, var(--doek) 45%, transparent); }

.tegel__teken {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border: 1px solid var(--lijn-2);
  border-radius: var(--radius-chip);
  background: color-mix(in srgb, var(--cyaan-400) 10%, transparent);
  color: var(--cyaan-200);
}
.tegel__teken svg { width: 22px; height: 22px; }

.belofte .tegel { background: color-mix(in srgb, var(--vlak) 70%, transparent); }
.belofte .tegel h2 { font-size: 1.44rem; letter-spacing: -0.015em; }

/* --------------------------------------------------------- het sfeerbeeld

   Er komen geen schermafbeeldingen op deze pagina, niet van kantoor en niet van
   de app: samen tonen die de hele opbouw van het product, en dat hoort in een
   demo en niet op een openbare pagina. In plaats daarvan staat er per blok één
   foto met een regel eronder die naar die demo wijst. */

.sfeer {
  margin: 0 0 clamp(44px, 6vw, 68px);
}
.sfeer img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border: 1px solid var(--lijn);
  border-radius: var(--radius-blad);
  box-shadow: var(--schaduw-plaat);
}
.sfeer figcaption {
  max-width: 62ch;
  margin: 20px auto 0;
  color: var(--muts);
  font-size: 0.99rem;
  text-align: center;
}

/* ------------------------------------------------------------- de lijsten */

.lijst {
  display: grid;
  gap: 26px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lijst--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.lijst--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lijst > li { padding-top: 20px; border-top: 1px solid var(--lijn); }
.lijst h3 { margin-bottom: 9px; }
.lijst p { color: var(--muts); font-size: 0.97rem; }

/* De streeplijst: een cyaan streepje voor elke kop. */
.streep { margin: 0; padding: 0; list-style: none; display: grid; gap: 28px; }
.streep > li { position: relative; padding-left: 26px; }
.streep > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 13px;
  height: 2px;
  background: var(--cyaan-400);
  border-radius: 2px;
}
.streep h3 { margin-bottom: 8px; }
.streep p { color: var(--muts); font-size: 0.97rem; }

/* --------------------------------------------------------------- het paar */

.paar {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.paar--om .paar__beeld { order: -1; }

.paar__beeld { display: grid; gap: 20px; }
.paar__beeld img {
  width: 100%;
  border: 1px solid var(--lijn);
  border-radius: var(--radius-blad);
  box-shadow: var(--schaduw);
}
.paar__beeld--hoog { position: sticky; top: 104px; }

/* ----------------------------------------------------- de strook en het slot

   Twee volle-breedte blokken met een foto erachter. Dezelfde sluier als de
   kopband, alleen liggend in plaats van staand. */

.strook, .slot {
  position: relative;
  isolation: isolate;
  padding: clamp(78px, 10vw, 132px) 0;
  overflow: hidden;
  border-block: 1px solid var(--lijn);
}
.strook__beeld, .slot__beeld { position: absolute; inset: 0; z-index: -2; }
.strook__beeld img, .slot__beeld img { width: 100%; height: 100%; object-fit: cover; }
.strook::after, .slot::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      var(--doek) 0%,
      color-mix(in srgb, var(--doek) 92%, transparent) 40%,
      color-mix(in srgb, var(--doek) 55%, transparent) 100%),
    radial-gradient(60% 100% at 90% 50%, color-mix(in srgb, var(--petrol-900) 45%, transparent), transparent 70%);
}
.strook__binnen, .slot__binnen { max-width: var(--omtrek); }
.strook__binnen > *, .slot__binnen > * { max-width: 640px; }
.strook h2, .slot h2 { margin-bottom: 20px; }
.strook p, .slot p { color: var(--muts); font-size: 1.06rem; }
.slot__knoppen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Het slot draagt de ronde in de mist: een donkere foto, die onder dezelfde
   sluier als de strook onzichtbaar wordt. Hij krijgt daarom een lichtere sluier
   en een brandpunt op de gestalte met de zaklamp. */
.slot__beeld img { object-position: 60% 55%; }
.slot::after {
  background:
    linear-gradient(100deg,
      var(--doek) 0%,
      color-mix(in srgb, var(--doek) 88%, transparent) 38%,
      color-mix(in srgb, var(--doek) 34%, transparent) 100%),
    radial-gradient(60% 100% at 92% 50%, color-mix(in srgb, var(--petrol-900) 30%, transparent), transparent 74%);
}

/* ------------------------------------------------------------- de prijzen */

.prijzen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 22px;
  /* Even hoog, zodat de knop onderin bij beide kaarten op dezelfde lijn staat:
     de lijst ertussen rekt mee (ul { flex: 1 }). */
  align-items: stretch;
}

.prijs {
  display: flex;
  flex-direction: column;
  padding: 34px 32px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-blad);
  box-shadow: var(--schaduw);
}
.prijs--uit {
  border-color: color-mix(in srgb, var(--cyaan-400) 45%, transparent);
  background:
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--petrol-600) 26%, transparent), transparent 70%),
    var(--vlak);
  box-shadow: 0 30px 70px -26px color-mix(in srgb, var(--cyaan-400) 32%, transparent);
}

.prijs__vlag {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 16px;
  padding: 6px 13px;
  border-radius: var(--radius-chip);
  background: color-mix(in srgb, var(--cyaan-400) 16%, transparent);
  border: 1px solid var(--lijn-2);
  color: var(--cyaan-200);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.prijs h3 { font-size: 1.62rem; margin-bottom: 12px; }
.prijs__bedrag { color: var(--muts); font-size: 0.92rem; }
/* Hier stond eerst een bedrag, en dat mocht de kaart dragen. Nu staat er
   "Prijs op aanvraag": een verwijzing en geen cijfer, dus de naam van het pakket
   gaat voor en deze regel staat er een trede onder, in het accent. */
.prijs__bedrag span {
  display: block;
  color: var(--cyaan-200);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.2;
  margin-bottom: 3px;
}
.prijs__bij { margin-top: 12px; color: var(--stil); font-size: 0.84rem; line-height: 1.5; }

.prijs ul {
  flex: 1;
  margin: 26px 0 28px;
  padding: 24px 0 0;
  border-top: 1px solid var(--lijn);
  list-style: none;
  display: grid;
  gap: 11px;
  color: var(--muts);
  font-size: 0.96rem;
}
.prijs li { position: relative; padding-left: 27px; }
.prijs li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.52em;
  width: 11px;
  height: 6px;
  border: 2px solid var(--cyaan-400);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
}
.prijs li strong { color: var(--inkt); font-weight: 600; }
.prijs .knop { align-self: flex-start; }

/* ----------------------------------------------------------------- de trap */

.trap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stap;
}
.trap > li { counter-increment: stap; padding-top: 22px; border-top: 2px solid var(--lijn-2); }
.trap > li::before {
  content: counter(stap, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  color: var(--cyaan-400);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.trap h3 { margin-bottom: 9px; }
.trap p { color: var(--muts); font-size: 0.97rem; }

/* --------------------------------------------------------------- de vragen */

.vragen { display: grid; gap: 0; border-top: 1px solid var(--lijn); }
.vragen details { border-bottom: 1px solid var(--lijn); }
.vragen summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 4px;
  color: var(--inkt);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  transition: color .16s ease;
}
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary:hover { color: var(--cyaan-200); }
.vragen summary::after {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  border: 2px solid var(--cyaan-400);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .22s ease;
}
.vragen details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.vragen details p {
  max-width: 68ch;
  padding: 0 4px 24px;
  color: var(--muts);
  font-size: 0.99rem;
}

/* ------------------------------------------------------------------ de voet */

.voet {
  padding: clamp(60px, 7vw, 90px) 0 30px;
  background: var(--vlak);
  border-top: 1px solid var(--lijn);
}
.voet__binnen {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: 44px 40px;
}
.voet__merk img { width: 190px; margin-bottom: 20px; }
.voet__merk p { max-width: 38ch; color: var(--stil); font-size: 0.93rem; }

.voet__kolom { display: flex; flex-direction: column; gap: 11px; }
.voet__kolom h2 {
  margin-bottom: 5px;
  color: var(--inkt);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.voet__kolom a {
  color: var(--muts);
  font-size: 0.93rem;
  text-decoration: none;
  transition: color .16s ease;
}
.voet__kolom a:hover { color: var(--cyaan-200); text-decoration: underline; }
.voet__adres { margin-top: 10px; color: var(--stil); font-size: 0.85rem; line-height: 1.65; }

.voet__regel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 30px;
  margin-top: clamp(44px, 6vw, 68px);
  padding-top: 24px;
  border-top: 1px solid var(--lijn);
  color: var(--stil);
  font-size: 0.82rem;
}
.voet__regel p { margin: 0; }
.voet__regel code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95em; }

.voetnoot {
  max-width: 78ch;
  margin-top: clamp(32px, 4vw, 46px);
  padding-top: 20px;
  border-top: 1px solid var(--lijn);
  color: var(--stil);
  font-size: 0.88rem;
}

/* ------------------------------------------------- het opkomen bij scrollen */

[data-komt-op] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.7,.3,1);
}
[data-komt-op][data-op] { opacity: 1; transform: none; }

/* --------------------------------------------------------------- de maten */

@media (max-width: 1080px) {
  .voet__binnen { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .paar { grid-template-columns: 1fr; }
  .paar--om .paar__beeld { order: 0; }
  .paar__beeld--hoog { position: static; }
  .paar__beeld { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

  /* Het menu klapt uit onder de balk. */
  .balk__binnen { position: relative; flex-wrap: wrap; }
  .menu-knop {
    display: grid;
    gap: 5px;
    padding: 12px 10px;
    margin-right: -10px;
    cursor: pointer;
  }
  .menu-knop span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--inkt);
    border-radius: 2px;
    transition: transform .22s ease, opacity .22s ease;
  }
  .menu-schakelaar:checked + .menu-knop span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-schakelaar:checked + .menu-knop span:nth-child(2) { opacity: 0; }
  .menu-schakelaar:checked + .menu-knop span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .balk__nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 0 22px;
    border-top: 1px solid var(--lijn);
  }
  .menu-schakelaar:checked ~ .balk__nav { display: flex; }
  .balk__nav > a:not(.knop) { padding: 13px 14px; font-size: 1rem; }
  .balk__nav .knop { justify-content: center; margin-top: 8px; }
  .balk__nav .knop--stil { margin-left: 0; }

  .kop { min-height: 0; padding: 92px 0 68px; }
  .kop__strook { gap: 10px 20px; }
}

@media (max-width: 680px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .voet__binnen { grid-template-columns: 1fr; gap: 34px; }
  .prijs { padding: 28px 22px; }
  .tegel { padding: 24px 20px; }
  .sfeer figcaption { text-align: left; }
  .sfeer img { max-height: 300px; }

  .plaat__venster img {
    width: 880px;
    max-width: none;
    border-radius: var(--radius-kaart);
  }
  .plaat figcaption::after {
    content: ' Schuif de plaat opzij om mee te kijken.';
    color: var(--cyaan-200);
  }
}

/* Wie geen beweging wil, krijgt geen beweging. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-komt-op] { opacity: 1; transform: none; }
}

/* Op papier: het doek wit, de letter zwart, de foto's eruit. */
@media print {
  body { background: #fff; color: #111; }
  .balk, .kop__beeld, .strook__beeld, .slot__beeld { display: none; }
}