/* Lettertypes: zelf gehost, SIL Open Font License. Alleen Latijnse tekens, zo blijven de bestanden licht. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-600-italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Alleen de kleuren uit het brand book */
  --beige: #E7DED3;
  --black: #000000;
  --bordeaux: #7A0000;
  --licht: #F6F2ED; /* Lichte tint uit de pagina's van het brand book: knoppen bij hover en focus, en de rand van de polaroid */
  /* Doorzichtige varianten: alleen voor lijnen, watermerken, de schaduw van de kaarten en de verdonkering boven de foto */
  --beige-lijn-zacht: rgb(231 222 211 / .25);
  --zwart-lijn: rgb(0 0 0 / .2);
  --zwart-schaduw: rgb(0 0 0 / .12);
  --beige-kader: rgb(231 222 211 / .4);
  --bordeaux-kader: rgb(122 0 0 / .35);
  --zwart-verdonkering: rgb(0 0 0 / .24);
  --zwart-links: rgb(0 0 0 / .12);
  --zwart-leeg: rgb(0 0 0 / 0);
  --zwart-veldlijn: rgb(0 0 0 / .55);
  --zwart-focus: rgb(0 0 0 / .04);
  --zwart-vouw: rgb(0 0 0 / .035);
  --zwart-envelop: rgb(0 0 0 / .32);
  --zwart-foto: rgb(0 0 0 / .4);
  --zwart-tekst: rgb(0 0 0 / .3);
  --zwart-polaroid: rgb(0 0 0 / .3);
  --zwart-tape: rgb(0 0 0 / .2);
  --zwart-tape-vouw: rgb(0 0 0 / .05);
  /* Alleen Cormorant Garamond, ook voor alle kleine tekst: een bewuste afwijking van het advies voor Inter in het brand book. Koppen apart: Didot LP kan hier later in zodra er een webfontlicentie is. */
  --kop: "Cormorant Garamond", serif;
  --kop-gewicht: 600;
  --tekst: "Cormorant Garamond", serif;
  --zin: var(--tekst);
  /* Maten uit het brand book, omgerekend van pt naar px: H1 34-48 pt, H2 18-26 pt, body 10-13 pt */
  --maat-h1: clamp(45px, 11.6vw, 64px);
  --maat-h2: clamp(26px, 20px + 1.25vw, 35px);
  --maat-h2-klein: clamp(24px, 22px + .4vw, 28px);
  --kop-groot: clamp(38px, 20.5px + 5.45vw, 44px); /* Koppen op de kaarten en in Over ons, bewust groter dan het boek */
  /* Cormorant oogt kleiner dan Inter, daarom deze maten: lange tekst, labels, kleine regels, navigatie, knoppen */
  --maat-tekst: 19px;
  --maat-label: 18px;
  --maat-klein: 17px;
  --maat-nav: 18px;
  --regel: 1.5;
  --spatie-tekst: .02em;
  --regel-zin: 1.5;
  --intro-maat: 18px; /* Grootte van de introteksten, per plek aan te passen */
  --kaart-zin: clamp(17px, 14.1px + .9vw, 18px); /* Zin op de kaarten en in Over ons, op elk scherm gelijk */
  --spatie-breed: .296em; /* Originele letterafstand +296 uit het brand book */
  --maat-knop: 18px;
  --gutter-l: max(26px, 8.7vw, env(safe-area-inset-left));
  --gutter-r: max(14px, 3.6vw, env(safe-area-inset-right));
}

@media (min-width: 48em) {
  :root {
    --maat-tekst: 20px;
    --intro-maat: 20px;
  }
}

@media (min-width: 48em) and (min-height: 30.0625em) {
  :root {
    --kop-groot: clamp(56px, 48px + .83vw, 64px);
    --kaart-zin: clamp(20px, 18.7px + .17vw, 22px);
  }
}

@media (min-width: 64em) {
  :root {
    --maat-tekst: clamp(20px, 17.7px + .223vw, 22px);
    --intro-maat: clamp(22px, 17.4px + .45vw, 26px);
  }
}

/* Lage vensters: de kleinste kopmaat */
@media (max-height: 30em) {
  :root {
    --kop-groot: 38px;
    --kaart-zin: 17px;
  }
}

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

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

body {
  margin: 0;
  background: var(--black);
  color: var(--beige);
  font-family: var(--tekst);
  font-size: var(--maat-tekst);
  font-weight: 500;
  line-height: var(--regel);
  letter-spacing: var(--spatie-tekst);
  -webkit-font-smoothing: antialiased;
}

/* Koppen krijgen geen letterspatiëring */
h1, h2, h3 { letter-spacing: normal; }

button, input { font-family: inherit; }

img, svg { display: block; }
img { max-width: 100%; height: auto; }
p, h1, ul { margin: 0; padding: 0; }
ul { list-style: none; }

:focus-visible {
  outline: 2px solid var(--beige);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  z-index: 20;
  left: 1rem;
  top: -4rem;
  padding: .75rem 1rem;
  background: var(--beige);
  color: var(--black);
}
.skip:focus { top: .5rem; }


/* Introscherm, alleen op de homepage: een bordeaux vlak met het monogram, dat daarna in tweeen opengaat en de hero vrijgeeft */

.introscherm {
  position: fixed;
  z-index: 100;
  inset: 0;
  overflow: hidden;
}
/* Zodra hij opengaat is de pagina eronder meteen te gebruiken */
.introscherm.is-open { pointer-events: none; }
.introscherm.is-klaar { display: none; }

.introscherm__helft {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(50% + 1px); /* 1 px overlap: anders schemert er bij een oneven schermhoogte een haarlijn door */
  background: var(--bordeaux);
}
.introscherm__helft--boven { top: 0; }
.introscherm__helft--onder { bottom: 0; }

/* Monogram: ruim boven de 40 px uit het brand book, met veel vrije ruimte eromheen */
.introscherm__monogram {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(56px, 6vw, 88px);
  height: auto;
  aspect-ratio: 2190 / 2052;
  transform: translate(-50%, -50%);
  color: var(--beige);
}

/* Open: eerst gaat het monogram weg, daarna schuiven de twee helften uit elkaar */
.introscherm.is-open .introscherm__monogram { opacity: 0; }
.introscherm.is-open .introscherm__helft--boven { transform: translateY(-100%); }
.introscherm.is-open .introscherm__helft--onder { transform: translateY(100%); }

@media (prefers-reduced-motion: no-preference) {
  .introscherm__monogram { transition: opacity .35s ease; }
  .introscherm__helft { transition: transform .9s cubic-bezier(.7, 0, .2, 1) .28s; }
}

/* Geen JavaScript, al gezien deze sessie, of reduced motion: geen introscherm, de pagina begint direct bij de hero */
html:not(.js) .introscherm,
html.intro-over .introscherm { display: none; }
@media (prefers-reduced-motion: reduce) {
  .introscherm { display: none; }
}

/* Onthullen bij scrollen: elk blok komt een klein stukje omhoog in beeld. De hero en de kaarten van Aanpak doen niet mee. */

html.onthullen [data-onthul] {
  opacity: 0;
  transform: translateY(18px);
}
html.onthullen [data-onthul].is-zichtbaar {
  opacity: 1;
  transform: none;
}

/* Een animatie en geen transition: een transition op deze blokken zou de eigen kleurovergang van .knop overschrijven */
@media (prefers-reduced-motion: no-preference) {
  html.onthullen [data-onthul].is-zichtbaar {
    animation: onthullen .7s cubic-bezier(.2, .7, .2, 1) both;
  }
  /* Kleine trap binnen een blok, zodat kop, tekst en knop elkaar opvolgen */
  html.onthullen [data-onthul="1"].is-zichtbaar { animation-delay: .09s; }
  html.onthullen [data-onthul="2"].is-zichtbaar { animation-delay: .18s; }
  html.onthullen [data-onthul="3"].is-zichtbaar { animation-delay: .27s; }
}

@keyframes onthullen {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Reduced motion: geen beweging, alles staat er gewoon */
@media (prefers-reduced-motion: reduce) {
  html.onthullen [data-onthul] {
    opacity: 1;
    transform: none;
  }
}


/* Korte introteksten: hero, kaarten, Over ons en Contact, allemaal in deze ene stijl. De grootte kan per plek verschillen via --intro-maat. Lange teksten, formulier, knoppen en navigatie blijven Inter. */

.intro {
  font-family: var(--zin);
  font-size: var(--intro-maat);
  font-weight: 500;
  line-height: var(--regel-zin);
  letter-spacing: var(--spatie-breed);
  text-wrap: balance;
}


/* Knop: strakke rechthoek. De kleuren per achtergrond staan in de variabelen. Standaard: op beige en op de hero-foto. */

.knop {
  --knop-bg: var(--bordeaux);
  --knop-fg: var(--beige);
  --knop-lijn: var(--bordeaux);
  --knop-lijn-hover: var(--bordeaux);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 28px;
  border: 1px solid var(--knop-lijn);
  background: var(--knop-bg);
  box-shadow: 0 1px 6px var(--zwart-schaduw);
  color: var(--knop-fg);
  font-family: var(--tekst);
  font-size: var(--maat-knop);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.knop:focus-visible {
  border-color: var(--knop-lijn-hover);
  background: var(--licht);
  color: var(--bordeaux);
}

@media (hover: hover) {
  .knop:hover {
    border-color: var(--knop-lijn-hover);
    background: var(--licht);
    color: var(--bordeaux);
  }
}

/* Op bordeaux */
.knop--op-bordeaux {
  --knop-bg: var(--beige);
  --knop-fg: var(--bordeaux);
  --knop-lijn: var(--beige);
  --knop-lijn-hover: var(--licht);
}

/* Contact in de header: alleen een dunne lijn in de tekstkleur */
.knop--lijn {
  --knop-bg: transparent;
  --knop-fg: var(--beige);
  --knop-lijn: var(--beige);
  --knop-lijn-hover: var(--licht);
  box-shadow: none;
}
.persoon .knop--lijn {
  --knop-fg: var(--black);
  --knop-lijn: var(--black);
  --knop-lijn-hover: var(--bordeaux);
}
/* Huidige pagina */
.persoon .knop--lijn[aria-current] {
  --knop-fg: var(--bordeaux);
  --knop-lijn: var(--bordeaux);
}


/* Header: transparant, boven op de foto. Staand: logo en een menuknop met twee lijnen. */

.site-header {
  position: absolute;
  z-index: 10;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(1.125rem, env(safe-area-inset-top)) var(--gutter-r) .5rem max(26px, 7.4vw, env(safe-area-inset-left));
}

.logo { display: block; width: 180px; color: inherit; }

.nav__toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--beige);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav__bars,
.nav__bars::before {
  display: block;
  width: 26px;
  height: 1.5px;
  margin-inline: auto;
  background: currentColor;
}
.nav__bars {
  position: relative;
  top: -4px;
}
.nav__bars::before {
  content: "";
  position: absolute;
  top: 8px;
}
.nav__toggle[aria-expanded="true"] .nav__bars {
  top: 0;
  transform: rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__bars::before {
  top: 0;
  transform: rotate(-90deg);
}

.nav__list a:not(.knop) {
  display: block;
  padding: .7rem 0;
  color: inherit;
  font-family: var(--tekst);
  font-size: var(--maat-nav);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}
.nav__list li + li { border-top: 1px solid var(--beige-lijn-zacht); }
.nav__list .nav__contact {
  padding-top: 1.25rem;
  border-top: 0;
}

.nav__list { display: none; }

.nav__list.is-open {
  display: block;
  position: absolute;
  inset: 100% 0 auto;
  padding: .25rem var(--gutter-l) 1.75rem;
  background: var(--black);
}

/* Zonder JavaScript is er geen menuknop: Contact blijft dan bereikbaar */
html:not(.js) .nav__list { display: block; }
html:not(.js) .nav__list li:not(.nav__contact) { display: none; }
html:not(.js) .nav__list .nav__contact { padding: 0; }
/* Op een smalle telefoon past de knop niet naast het logo: op de homepage staat Contact dan in de hero, elders eronder */
@media (max-width: 34em) {
  html:not(.js) .site-header { flex-wrap: wrap; row-gap: 1.25rem; }
  html:not(.js) body:not(.persoon) .nav__contact { display: none; }
}


/* Hero, staand: de staande foto vult de hero en bepaalt de hoogte, de tekst staat op de muur */

.hero {
  position: relative;
  min-height: max(1025px, 210.76vw, 100svh); /* Minstens de verhouding van de staande foto, en hoog genoeg voor tekst en knop boven de hoofden */
  padding-top: calc(max(1.125rem, env(safe-area-inset-top)) + 3.5rem + 5vw);
  background: var(--black);
}

.hero__photo,
.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__photo img {
  object-fit: cover;
  object-position: 50% 100%;
}

.hero__copy {
  position: relative;
  z-index: 1;
  padding-inline: var(--gutter-l) var(--gutter-r);
}

.hero__title {
  font-family: var(--kop);
  font-weight: var(--kop-gewicht);
  font-synthesis: none;
  font-size: var(--maat-h1);
  line-height: 1.04;
}
.hero__title em {
  font-style: italic;
  font-weight: var(--kop-gewicht);
}

/* Smal gehouden: op de telefoon zo vier nette regels, links van het raam op de foto */
.hero__text {
  max-width: 14.5em;
  margin-top: .625rem;
}

.hero .knop { margin-top: 1.5rem; }


/* Zeer smalle telefoons: de kop op twee regels en de foto iets groter, zodat tekst en knop op de muur blijven */

@media (max-width: 22.4em) {
  .hero {
    min-height: 885px;
    padding-top: calc(max(1.125rem, env(safe-area-inset-top)) + 4.2rem);
  }
  .hero .br-staand { display: none; }
  .hero__text { margin-top: .5rem; }
}


/* Brede telefoons en tablets: dezelfde opbouw. De muur bovenin wordt korter naarmate het scherm breder is. */

@media (min-width: 26em) {
  .hero { min-height: max(1100px, 157.5vw + 229px, 100svh); }
}

@media (min-width: 30em) {
  .logo { width: 318px; }
  .hero { padding-top: 6.5rem; }
  .hero__text { margin-top: 1rem; }
}

@media (min-width: 37.5em) {
  .hero__text { max-width: none; }
}


/* Liggend vanaf circa 900 px: de liggende foto vult de hero, de tekst links op de muur. Maten uit het ontwerp op 1536 px. */

@media (min-width: 56.3125em) and (min-aspect-ratio: 6 / 5) {
  .site-header {
    align-items: flex-start;
    padding: 1.95vw 2.73vw 0 3.25vw;
  }

  .logo { width: clamp(318px, 22.9vw, 440px); }

  .nav__toggle { display: none; }

  .nav__list,
  .nav__list.is-open {
    position: static;
    display: flex;
    align-items: center;
    gap: clamp(18px, 5.4vw - 35px, 60px);
    padding: 0;
    background: none;
  }
  .nav__list a:not(.knop) {
    padding: .5rem 0;
    font-family: var(--tekst);
    font-size: var(--maat-nav);
    font-weight: 600;
    line-height: var(--regel);
  }
  .nav__list a:not(.knop):hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .35em;
  }
  .nav__list li + li { border: 0; }
  .nav__list .nav__contact { padding: 0; }

  .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100svh;
    min-height: 520px;
    padding: 0;
  }

  .hero__photo img { object-position: 50% 0; }

  /* Zeer zachte verdonkering links, voor de dunne introtekst op de muur */
  .hero__photo::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(to right, var(--zwart-links) 40%, var(--zwart-leeg) 50%);
  }

  /* Zeer zachte verdonkering van alleen de bovenrand, voor de navigatie */
  .hero__photo::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 9vw;
    background: linear-gradient(to bottom, var(--zwart-verdonkering), var(--zwart-leeg));
  }

  .hero__copy {
    max-width: calc(650px + 3.9vw);
    padding: 0 0 0 3.9vw;
  }

  .br-staand { display: none; }

  .hero__title {
    font-size: var(--maat-h1);
    line-height: 1.04;
  }

  /* Kleiner dan elders: de langste regel moet links van het raam op de foto blijven */
  .hero__text {
    --intro-maat: clamp(22px, 1.5vw, 24px);
    margin-top: clamp(1rem, 1.5vw, 1.5rem);
  }

  .hero .knop { margin-top: clamp(1.75rem, 2.4vw, 2.25rem); }
}

/* Smallere liggende vensters: de foto schuift mee en de kop krimpt iets, zodat de tekst op de muur blijft */

@media (min-width: 56.3125em) and (min-aspect-ratio: 6 / 5) and (max-aspect-ratio: 7 / 5) {
  .hero__text { max-width: 14.5em; }
  .hero__photo img { object-position: 80% 0; }
  .hero__title { font-size: var(--maat-h1); }
}


/* Aanpak: elke kaart vult het scherm. Van onder naar boven: klein logo, balk, tekst. Alle afstanden rekenen daarmee, zodat niets botst. */

.aanpak {
  --h: max(100vh, 380px);
  --kader: 7px;
  --monogram-b: max(7.27vw, 40px);
  --veilig-b: env(safe-area-inset-bottom, 0px);
  --monogram-onder: calc(var(--kader) + .36 * var(--monogram-b) + var(--veilig-b));
  --balk-onder: calc(var(--monogram-onder) + var(--monogram-b) * .937 + 12px);
  --tekst-onder: calc(var(--balk-onder) + 6px + 19px + 8px);
  /* Bewust groter dan het brand book: deze kaarten vullen het scherm */
  position: relative;
  overflow: hidden;
  overflow: clip;
  background: var(--beige);
}
@supports (height: 100svh) {
  .aanpak { --h: max(100svh, 380px); }
}


/* Grotere staande schermen: binnenlijn op 2,5% van de breedte */
@media (min-width: 30.5em) {
  .aanpak { --kader: 2.5vw; }
}

/* Liggend: het kleine logo volgt uit breedte en hoogte samen */
@media (min-aspect-ratio: 1 / 1) {
  .aanpak {
    --kader: min(2.5vw, 4.4vh);
    --monogram-b: max(calc(min(1vw, 1.78vh) * 5), 40px);
  }
}

.slide {
  --slide-fg: var(--beige);
  --kaart-bg: var(--bordeaux);
  --logo-dekking: .2;
  --kader-kleur: var(--beige-kader);
  --korte-lijn: 32px;
  --marge: 8cqw;
  container-type: size;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: var(--h);
  background: var(--kaart-bg);
  color: var(--slide-fg);
}
.slide--beige {
  --slide-fg: var(--black);
  --kaart-bg: var(--beige);
  --kader-kleur: var(--bordeaux-kader);
  --logo-dekking: .13;
}
.slide--zwart {
  --kaart-bg: var(--black);
  --logo-dekking: .19;
}
.slide--slot { --logo-dekking: .18; }

.kaart {
  position: absolute;
  inset: 0;
}

/* Binnenlijn: een kader op vaste afstand van de rand, boven het grote logo */
.kaart::after {
  content: "";
  position: absolute;
  inset: var(--kader) var(--kader) calc(var(--kader) + var(--veilig-b));
  border: 1px solid var(--kader-kleur);
  pointer-events: none;
}

/* Groot logo: op elke kaart dezelfde plek en maat, helemaal in beeld. Staand: rechts onder de tekst, en kleiner als de tekst anders bedekt zou worden. */
.kaart__logo {
  --tekst-ruimte: 360px;
  position: absolute;
  right: calc(var(--kader) + 14px);
  bottom: calc(var(--balk-onder) + 18px);
  width: auto;
  max-width: none;
  height: max(40px, min(54cqw, 100cqh - var(--balk-onder) - 18px - var(--tekst-ruimte)));
  opacity: var(--logo-dekking);
  pointer-events: none;
}

.slide__tekst {
  position: absolute;
  top: calc(var(--kader) + 8px + 4cqh);
  bottom: var(--tekst-onder);
  left: max(var(--marge), env(safe-area-inset-left, 0px));
  right: 5cqw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Grote kop: de kaarten en Over ons, één stijl */
.slide__kop,
.over-ons__kop,
.uitnodiging__kop {
  margin: 0;
  font-family: var(--kop);
  font-weight: 500;
  font-synthesis: none;
  font-size: var(--kop-groot);
  line-height: 1.12;
  max-width: 11em;
  text-transform: uppercase;
  text-wrap: balance;
}

.slide__zin,
.over-ons__tekst { --intro-maat: var(--kaart-zin); }
.slide__zin { margin-top: 1.25rem; }
.slide--slot .slide__zin { text-wrap: balance; }

/* Korte lijn tussen kop en tekst */
.slide__zin::before {
  content: "";
  display: block;
  width: var(--korte-lijn);
  height: 1px;
  margin-bottom: 1.25rem;
  background: var(--kader-kleur);
}

/* Klein monogram: onderaan in het midden, met de pijl, zoals in het brand book */
.slide__monogram {
  position: absolute;
  left: 50%;
  bottom: var(--monogram-onder);
  width: var(--monogram-b);
  height: auto;
  aspect-ratio: 2190 / 2052;
  transform: translateX(-50%);
  color: var(--slide-fg);
}

/* Lange tekst op een smal scherm: iets minder regelafstand */
@container (max-width: 300px) {
  .slide__tekst {
    left: 6cqw;
    right: 4cqw;
  }
  .slide__zin { line-height: 1.4; }
}

/* Bredere kaarten: langere lijn */
@container (min-width: 488px) {
  .slide__tekst { --korte-lijn: 48px; }
}

/* Op de smalste schermen is de tekst langer */
@media (max-width: 21.25em) {
  .kaart__logo { --tekst-ruimte: 388px; }
}

/* Liggend: tekst verticaal in het midden, logo op 70% van de hoogte met een vaste afstand tot de rechterrand */
@container (orientation: landscape) {
  .slide__tekst {
    --korte-lijn: clamp(48px, 3.9cqw, 72px);
    top: calc(var(--kader) + 8px);
    right: auto;
    justify-content: center;
  }
  .slide__zin { max-width: 22.7em; }
  .slide--slot .slide__zin { max-width: none; }
  .kaart__logo {
    top: 15cqh;
    right: 5cqw;
    bottom: auto;
    height: 70cqh;
  }
}

/* Laag en smal: het logo blijft vrij van het kleine logo in het midden */
@media (max-height: 30em) {
  @container (orientation: landscape) {
    .kaart__logo { height: min(70cqh, 37.5cqw); top: calc(50cqh - min(35cqh, 18.75cqw)); }
  }
}

/* Met JavaScript: alle kaarten op dezelfde plek, slides.js schuift ze */
.js .carrousel {
  position: relative;
  height: var(--h);
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: contain;
}
.js .carrousel:focus-visible { outline: none; }
.js .carrousel:focus-visible .is-actief {
  outline: 2px solid var(--slide-fg);
  outline-offset: -4px;
}

.js .slide {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.js .aanpak:not(.is-klaar) .slide:not(:first-child) { visibility: hidden; }

/* Balk: onderin op de kaart, boven het kleine logo. Het volle blokje is ook de klok van de carrousel. */
.voortgang {
  --balk-vol: var(--beige);
  --balk-leeg: var(--beige-kader);
  display: none;
}
.voortgang--op-beige {
  --balk-vol: var(--bordeaux);
  --balk-leeg: var(--zwart-lijn);
}

.js .voortgang {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: calc(var(--balk-onder) - 19px);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.voortgang__knop {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 5px;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.voortgang__knop:focus-visible {
  outline: 2px solid var(--balk-vol);
  outline-offset: -8px;
}

.voortgang__blok {
  position: relative;
  display: block;
  overflow: hidden;
  width: 14px;
  height: 6px;
  background: var(--balk-leeg);
}
.voortgang__knop[aria-current] .voortgang__blok { width: 80px; }

.voortgang__vul {
  position: absolute;
  inset: 0;
  background: var(--balk-vol);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.voortgang__knop[aria-current] .voortgang__vul { transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .voortgang__blok { transition: width .35s ease, background-color .2s ease; }
  .voortgang__vul { transition: background-color .2s ease; }
  .voortgang__knop[aria-current] .voortgang__vul { animation: vollopen 6s linear forwards; }
  .is-gepauzeerd .voortgang__vul { animation-play-state: paused !important; }
}

@keyframes vollopen {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}


/* Over ons: de personen in het midden op de muur uit de hero, hun lichamen tot de onderrand.
   Het tekstblok staat direct onder de kin van Elvia, zo dicht mogelijk bij het midden. --kin is de plek van die kin in het beeld. */

.over-ons {
  --pad: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  --kin: .4465;
  --vlek: ellipse 95% 30% at 50% 68%; /* De donkere vlek achter het tekstblok */
  --min: 600px;
  --h: max(80vh, var(--min));
  position: relative;
  isolation: isolate;
  height: var(--h);
  overflow: hidden;
  padding: calc(var(--h) * var(--kin) + 16px) var(--pad) 0;
  background: var(--black);
  color: var(--beige);
  text-align: center;
}
@supports (height: 100svh) {
  .over-ons { --h: max(80svh, var(--min)); }
}
/* Smalle telefoons: de knoppen staan onder elkaar en de kop neemt meer regels */
@media (max-width: 24.24em) {
  .over-ons { --min: 690px; }
}
@media (max-width: 21.25em) {
  .over-ons { --min: 750px; }
  .over-ons .over-ons__beeld img { object-position: 55% 100%; } /* Beide gezichten in beeld */
}
/* Liggend: het eigen brede beeld */
@media (min-aspect-ratio: 3 / 4) {
  .over-ons {
    --kin: .531;
    --vlek: ellipse 72% 26% at 50% 74%;
    --min: 730px;
  }
}
@media (min-width: 64em) and (min-aspect-ratio: 3 / 4) {
  .over-ons { --min: 620px; }
}
/* Laag venster: kop en zin kleiner */
@media (min-aspect-ratio: 3 / 4) and (max-height: 34em) {
  .over-ons {
    --kop-groot: 38px;
    --kaart-zin: 17px;
    --min: 530px;
  }
}

.over-ons :focus-visible { outline-color: var(--beige); }

.over-ons__beeld {
  position: absolute;
  z-index: -1;
  inset: 0;
}
.over-ons__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}
/* De laag zwart, met een zachte donkere vlek achter het tekstblok */
.over-ons__beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(var(--vlek), var(--zwart-tekst) 52%, var(--zwart-leeg)),
    linear-gradient(var(--zwart-foto), var(--zwart-foto));
}

.afsluiter em {
  color: var(--bordeaux);
  font-style: italic;
}

.over-ons__kop { max-width: none; }

/* De naam blijft altijd CE Social, ook in een kop in hoofdletters */
.over-ons__kop em {
  font-style: italic;
  text-transform: none;
  white-space: nowrap;
}

.over-ons__tekst {
  max-width: 26em;
  margin: 1rem auto 0;
}

/* Altijd even breed. Passen ze niet naast elkaar, dan onder elkaar. */
.keuzes {
  display: grid;
  width: max-content;
  max-width: 100%;
  gap: 12px;
  margin: 1.5rem auto 0;
}

@media (min-width: 24.25em) {
  .keuzes {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}


/* Persoonspagina's: header op beige, daarna kop, portret, tekst, afsluiter en verwijzingen */

.persoon {
  --l: max(26px, 8.7vw, env(safe-area-inset-left));
  --r: max(26px, 6vw, env(safe-area-inset-right));
  background: var(--beige);
  color: var(--black);
}

.persoon :focus-visible { outline-color: var(--black); }
.persoon .skip {
  background: var(--black);
  color: var(--beige);
}

.persoon .site-header { position: relative; }
.persoon .nav__toggle { color: var(--black); }
.persoon .nav__list.is-open { background: var(--beige); }
.persoon .nav__list li + li { border-top-color: var(--zwart-lijn); }

/* Telefoon en tablet: de volgorde van de HTML. Naam, polaroid met functie en e-mail, tekst. */
.profiel { padding-top: 1.5rem; }

.profiel .profiel__naam,
.profiel__tekst { padding-inline: var(--l) var(--r); }

.profiel__links {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profiel__naam,
.afsluiter__kop {
  margin: 0;
  font-family: var(--kop);
  font-weight: var(--kop-gewicht);
  font-synthesis: none;
}
.profiel__naam {
  font-size: var(--maat-h1);
  line-height: 1;
}

.profiel__functie {
  margin-top: 1.5rem;
  padding-inline: var(--l) var(--r);
  font-size: var(--maat-tekst);
  text-align: center;
  font-weight: 600;
  line-height: 1.35;
}

.profiel__mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--bordeaux);
  font-size: var(--maat-tekst);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  overflow-wrap: anywhere;
  transition: color .18s ease;
}
.profiel__mail:hover {
  color: var(--black);
  text-decoration-thickness: 2px;
}

/* Polaroid: een lichte rand om de foto, onderaan breder, licht gedraaid */
.profiel__portret {
  width: 200px;
  margin: 2.25rem auto 0;
}

.polaroid {
  position: relative;
  padding: 3.9% 5.6% 24.4%;
  background: var(--licht);
  box-shadow: .3em .55em 1.1em var(--zwart-polaroid);
  transform: rotate(-3deg);
}
.polaroid img {
  width: 100%;
  height: auto;
}

/* Tape: schuin over de hoek rechtsboven, met gescheurde korte kanten */
.polaroid__tape {
  position: absolute;
  top: 7.5%;
  left: 94%;
  width: 36%;
  aspect-ratio: 296 / 81;
  filter: drop-shadow(0 1px 2px var(--zwart-schaduw));
  transform: translate(-50%, -50%) rotate(46deg);
}
.polaroid__tape::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, var(--zwart-leeg) 41%, var(--zwart-tape-vouw) 42%, var(--zwart-leeg) 56%),
    linear-gradient(var(--zwart-tape), var(--zwart-tape)),
    var(--beige);
  clip-path: polygon(.8% 0, 99% 0, 99.5% 12%, 98% 24%, 99.9% 38%, 98.3% 52%, 100% 66%, 98.4% 80%, 99.4% 100%, 1.2% 100%, .3% 88%, 1.8% 74%, .2% 60%, 1.6% 46%, 0 32%, 1.7% 18%);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .polaroid { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
  .profiel__portret:hover .polaroid { transform: rotate(-.5deg); }
}

.profiel__tekst {
  margin-top: 2rem;
  font-size: var(--maat-tekst);
  line-height: var(--regel);
}
.profiel__tekst p { max-width: 36em; }
.profiel__tekst p + p { margin-top: 1em; }

.afsluiter {
  margin-top: 3rem;
  padding-inline: var(--l) var(--r);
}
.afsluiter__kop {
  font-size: 32px;
  line-height: 1.05;
  text-wrap: balance;
}
.afsluiter .knop { margin-top: 1.25rem; }

.verder {
  display: grid;
  justify-items: start;
  gap: .25rem;
  margin-top: 2rem;
  padding: 0 var(--r) clamp(2.5rem, 12vw, 4rem) var(--l);
}
.verder a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

@media (min-width: 56.3125em) and (min-aspect-ratio: 6 / 5) {
  .persoon {
    --l: 3.9vw;
    --r: 3.9vw;
  }
  .persoon .site-header { padding-bottom: .5rem; }
}

/* Computer: alles in één scherm. Links polaroid, naam, functie en e-mail, rechts de bio, daaronder één regel met afsluiter en links.
   Lager dan dit past het niet: dan loopt de pagina gewoon door en scrolt hij. De footer staat altijd onder het scherm. */
@media (min-width: 64em) and (min-aspect-ratio: 6 / 5) {
  .persoonspagina {
    --bio: clamp(18px, 2.35vh, 22px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    min-height: calc(100vh - 1.95vw - clamp(60px, 4.28vw, 83px) - .5rem + 2px);
    padding: 0 var(--r) 1rem var(--l);
  }
  @supports (height: 100svh) {
    .persoonspagina { min-height: calc(100svh - 1.95vw - clamp(60px, 4.28vw, 83px) - .5rem + 2px); }
  }
  /* Links polaroid, functie en e-mail. Rechts de naam direct boven de tekst. */
  .profiel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: clamp(280px, 26.5vw, 340px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-self: center;
    column-gap: clamp(2.5rem, 5vw, 6rem);
    padding: .75rem 0;
  }
  .profiel__links {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-items: flex-start;
  }
  .profiel .profiel__naam {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
    font-size: 45px;
  }
  .profiel__portret {
    width: 240px;
    margin: .75rem 0 0;
  }
  .profiel__functie {
    margin-top: 1.5rem;
    padding: 0;
    text-align: left;
  }
  .profiel__tekst {
    grid-column: 2;
    grid-row: 2;
    margin: .75rem 0 0;
    padding: 0;
    font-size: var(--bio);
    line-height: 1.4;
  }
  .profiel__tekst p { max-width: 58em; }
  .profiel__tekst p + p { margin-top: .6em; }
  .afsluiter {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    margin: 0;
    padding: 0;
  }
  .afsluiter__kop { font-size: clamp(32px, 2.8vw, 40px); }
  .afsluiter .knop {
    flex: none;
    margin: 0;
  }
  .verder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0 1.75rem;
    margin: 0;
    padding: 0;
  }
}


/* Uitnodiging op de homepage: bordeaux, tekst en de envelop. Telefoon en tablet: de envelop in het midden, computer: rechts. */

.uitnodiging {
  --beeld: min(70vw, 280px);
  --open: 0; /* 0 is dicht, 1 is open. Alle stappen van de envelop rekenen hiermee. */
  padding-block: clamp(3.5rem, 15vw, 5rem);
  background: var(--bordeaux);
  color: var(--beige);
}
.uitnodiging :focus-visible { outline-color: var(--beige); }

.uitnodiging__tekst { padding-inline: var(--gutter-l) var(--gutter-r); }
.uitnodiging__kop em { font-style: italic; }
.uitnodiging__zin {
  max-width: 24em;
  margin-top: 1.5rem;
}
.uitnodiging .knop { margin-top: 2rem; }

/* De ruimte boven de envelop is voor de open flap, zodat niets verspringt of over de knop valt */
.uitnodiging__beeld {
  width: var(--beeld);
  margin: 1.5rem auto 0;
  padding-top: calc(var(--beeld) * .6);
}

/* Lagen, van achter naar voren: achterkant, open flap, kaartje, voorkant, dichte flap */
.envelop {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 1;
  transform: rotate(calc(-3deg + var(--open) * 2.5deg));
}

.envelop__achter {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--zwart-vouw), var(--zwart-vouw)), var(--beige);
  box-shadow: 0 .6em 1em var(--zwart-envelop);
}

/* Kaartje: de tekst staat bovenaan, dat deel komt uit de envelop. De onderkant blijft erin. */
.envelop__kaart {
  position: absolute;
  z-index: 2;
  top: 2%;
  left: 6%;
  width: 88%;
  height: 84%;
  padding-top: 3.6cqw;
  background: var(--beige);
  box-shadow: 0 0 0 1px var(--zwart-lijn);
  color: var(--black);
  font-family: var(--kop);
  font-size: 9.4cqw;
  font-weight: 500;
  font-synthesis: none;
  line-height: 1.1;
  letter-spacing: normal;
  text-align: center;
  transform: translateY(calc(var(--open) * -28%));
}
.envelop__kaart em {
  color: var(--bordeaux);
  font-style: italic;
  font-weight: 600;
}

/* Voorkant: een vak met rechte vouwlijnen, bovenaan open in een V */
.envelop__voor {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.envelop__vlak { fill: var(--beige); }
.envelop__vouw {
  fill: var(--beige);
  stroke: var(--zwart-lijn);
  stroke-width: 1;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.envelop__vouw--zij { fill: var(--zwart-vouw); }

/* Zachte schaduw op de envelop, alleen terwijl de flap beweegt: de binnenste laag komt op, de buitenste verdwijnt daarna weer */
.envelop__schaduw {
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  height: 45%;
  opacity: calc(1 - var(--open));
  pointer-events: none;
}
.envelop__schaduw > div {
  height: 100%;
  background: linear-gradient(var(--zwart-lijn), var(--zwart-leeg));
  opacity: var(--open);
}

/* Flap: draait in 3D rond de bovenrand. Dicht ligt hij vooraan, open achter het kaartje. */
.envelop__flap {
  position: absolute;
  z-index: calc(4 - var(--open) * 3);
  inset: 0 0 auto;
  height: 55.3%;
  transform: perspective(280cqw) rotateX(calc(var(--open) * 180deg));
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
.envelop__flapkant {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.envelop__flapkant > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.envelop__flapkant--binnen { transform: rotateX(180deg); }

/* Zegel: klein en vierkant op de punt van de flap, draait mee en verdwijnt aan de binnenkant */
.envelop__zegel {
  position: absolute;
  top: 100%;
  left: 50%;
  display: grid;
  place-items: center;
  width: max(52px, 17.6cqw);
  aspect-ratio: 1;
  background: var(--bordeaux);
  box-shadow: 0 1px 4px var(--zwart-lijn);
  color: var(--beige);
  opacity: calc(1 - var(--open)); /* Weg zodra de flap op zijn kant staat: zo is hij aan de binnenkant in elke browser onzichtbaar */
  transform: translate(-50%, -50%);
}
.envelop__zegel svg {
  width: 72%;
  min-width: 40px;
  aspect-ratio: 2190 / 2052;
}

/* Wanneer open: hover, toetsenbordfocus op de knop, en op touch één keer als hij in beeld is (main.js) */
.uitnodiging.is-open,
.uitnodiging:has(.knop:focus-visible) { --open: 1; }
@media (hover: hover) {
  .uitnodiging:hover { --open: 1; }
}

/* Zonder JavaScript en bij reduced motion staat de envelop open, zonder animatie */
html:not(.js) .uitnodiging { --open: 1; }
@media (prefers-reduced-motion: reduce) {
  .uitnodiging { --open: 1; }
}

/* De volgorde zit in de wachttijden. Openen: eerst de flap, dan het kaartje. Sluiten: eerst het kaartje, dan de flap. */
@media (prefers-reduced-motion: no-preference) {
  .envelop { transition: transform 1.1s ease; }
  .envelop__flap {
    transition:
      transform .5s ease-in-out calc((1 - var(--open)) * .6s),
      z-index 0s linear calc(.6s - var(--open) * .1s);
  }
  .envelop__kaart { transition: transform .6s cubic-bezier(.2, .7, .2, 1) calc(var(--open) * .5s); }
  /* Openen: op in de eerste helft van de flap, weg in de tweede. Sluiten: hetzelfde, na het kaartje. */
  .envelop__schaduw { transition: opacity .25s ease calc(.25s + (1 - var(--open)) * .35s); }
  .envelop__schaduw > div { transition: opacity .25s ease calc((1 - var(--open)) * .85s); }
  .envelop__zegel { transition: opacity 0s linear calc(.25s + (1 - var(--open)) * .6s); }
}

@media (min-width: 64em) {
  .uitnodiging {
    --beeld: 340px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--beeld);
    align-items: center;
    column-gap: clamp(2.5rem, 6vw, 7rem);
    padding: clamp(4.5rem, 8vw, 8rem) max(9vw, 50vw - 640px);
  }
  .uitnodiging__tekst { padding: 0; }
  .uitnodiging__beeld { margin: 0; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .uitnodiging { --beeld: 300px; }
}


/* Socials: een smalle bordeaux strook met alleen de twee logo's. De logo's zijn 40 px met 36 px ertussen, het klikvlak 44 px. De lijn scheidt hem van de bordeaux sectie erboven. */

.socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-height: 104px;
  border-top: 1px solid var(--beige-lijn-zacht);
  background: var(--bordeaux);
  color: var(--beige);
}
.socials :focus-visible { outline-color: var(--beige); outline-offset: 0; }

.socials__logo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: inherit;
}
.socials__logo svg {
  width: 40px;
  height: 40px;
}

a.socials__logo { transition: opacity .18s ease; }
@media (hover: hover) {
  a.socials__logo:hover { opacity: .7; }
}

@media (min-width: 48em) {
  .socials { min-height: 120px; }
}


/* Contactpagina: beige en rustig. Telefoon: kop en tekst, formulier, contactgegevens. */

.contactpagina {
  --lijn: var(--zwart-veldlijn);
  position: relative;
  padding: clamp(2rem, 8vw, 3rem) var(--r) clamp(4rem, 15vw, 6rem) var(--l);
}

.contactpagina > :not(.contactpagina__logo) { position: relative; }

/* Groot monogram toon-op-toon, rechts onderaan en helemaal in beeld */
.contactpagina__logo {
  position: absolute;
  right: var(--r);
  bottom: clamp(1.5rem, 5vw, 4rem);
  width: clamp(220px, 34vw, 520px);
  max-width: 70%;
  height: auto;
  opacity: .07;
  pointer-events: none;
}

.contactpagina__kop {
  margin: 0;
  font-family: var(--kop);
  font-weight: var(--kop-gewicht);
  font-synthesis: none;
  font-size: var(--maat-h1);
  line-height: 1.02;
  text-wrap: balance;
}
.contactpagina__kop em {
  color: var(--bordeaux);
  font-style: italic;
}

.contactpagina__tekst { margin-top: 1.5rem; }

.formulier { margin-top: 2.5rem; }

.velden {
  display: grid;
  gap: 1.5rem;
}

.veld label {
  display: block;
  font-size: var(--maat-label);
  line-height: 1.3;
}

.veld input,
.veld select,
.veld textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: .5rem 0;
  border: 0;
  border-bottom: 1px solid var(--lijn);
  border-radius: 0;
  background-color: transparent;
  color: var(--black);
  font: inherit;
  font-size: var(--maat-tekst); /* Vanaf 16 px zoomt iOS niet in bij focus */
  line-height: 1.4;
  scroll-margin-block: 6rem;
  -webkit-appearance: none;
  appearance: none;
}
.veld textarea { resize: vertical; }

.veld select {
  padding-right: 1.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000000' stroke-width='1.25'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 16px;
  cursor: pointer;
}
.veld option {
  background: var(--beige);
  color: var(--black);
}

.veld input:focus,
.veld select:focus,
.veld textarea:focus {
  outline: 2px solid transparent; /* Blijft zichtbaar in de hoog-contrastmodus */
  border-bottom-color: var(--black);
  background-color: var(--zwart-focus);
  box-shadow: 0 3px 0 var(--black);
}

/* Automatisch invullen mag de kleuren niet overschrijven */
.veld input:-webkit-autofill {
  -webkit-text-fill-color: var(--black);
  caret-color: var(--black);
  box-shadow: inset 0 0 0 100px var(--beige);
}

.veld [aria-invalid="true"] {
  border-bottom-color: var(--bordeaux);
  box-shadow: 0 2px 0 var(--bordeaux);
}

.veld__fout {
  margin-top: .5rem;
  color: var(--bordeaux);
  font-size: var(--maat-label);
  font-weight: 600;
  line-height: var(--regel);
}

.formulier__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.formulier__hp input {
  border: 0;
  background: none;
  color: inherit;
}

/* Tijdelijk zonder formulier: alleen de kop, de tekst, Mail ons en de gegevens.
   Eén schakelaar: `contactpagina--zonder-formulier` op <main> in contact.html. */
.mail-ons { display: none; }
.contactpagina--zonder-formulier .formulier { display: none; }
.contactpagina--zonder-formulier .mail-ons {
  display: block;
  margin-top: 2.5rem;
}

/* Turnstile staat er alleen als Cloudflare om een controle vraagt: alleen dan ruimte eromheen */
.turnstile:not(:empty) { margin-top: 1.5rem; }

.formulier__verstuur {
  width: 100%;
  margin-top: 2rem;
}

.formulier__status {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--black);
  font-size: var(--maat-tekst);
  font-weight: 600;
  line-height: var(--regel);
}

.formulier__noot {
  margin-top: 1.25rem;
  font-size: var(--maat-klein);
  line-height: var(--regel);
}
.formulier__noot a {
  display: inline-block;
  padding-block: .35rem;
  color: inherit;
  text-underline-offset: .2em;
}

.gegevens {
  display: grid;
  align-content: start; /* Breed staat dit blok in een hoge kolom: de rijen blijven bij elkaar in plaats van uitgerekt */
  gap: 1rem;
  margin: 3rem 0 0;
  font-size: var(--maat-tekst);
  line-height: var(--regel);
}
.gegevens dt { font-weight: 600; }
.gegevens dd { margin: 0; }
.gegevens a {
  color: inherit;
  text-underline-offset: .2em;
}

/* Instagram en TikTok als klein logo: dezelfde pictogrammen als in de strook op de homepage, 24 px, met een klikvlak van 44 px */
.gegevens .gegevens__social { /* Twee klassen: anders wint de nulmarge van .gegevens dd */
  display: flex;
  align-items: center;
  gap: 4px;
  margin: -10px 0 -10px -10px; /* Het klikvlak van 44 px steekt rondom 10 px uit: zo staat het logo op dezelfde lijn als de tekst erboven en blijft de rij even hoog als de andere */
}
.gegevens__logo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: inherit;
}
.gegevens__logo svg {
  width: 24px;
  height: 24px;
}
a.gegevens__logo { transition: color .18s ease; }
@media (hover: hover) {
  a.gegevens__logo:hover { color: var(--bordeaux); }
}

@media (min-width: 30em) {
  .formulier__verstuur { width: auto; }
}

@media (min-width: 48em) {
  .velden { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .veld--breed { grid-column: 1 / -1; }
}

/* Breed: links kop, tekst en gegevens, rechts het formulier */
@media (min-width: 56.3125em) {
  .contactpagina {
    display: grid;
    grid-template-columns: minmax(0, 42fr) minmax(0, 50fr);
    grid-template-rows: auto 1fr;
    column-gap: 7vw;
    padding-block: clamp(3rem, 5vw, 6rem) clamp(5rem, 8vw, 9rem);
  }
  .contactpagina__tekst { max-width: 24em; }
  .formulier {
    grid-column: 2;
    grid-row: 1 / 3;
    margin: 0;
  }
  .gegevens { margin-top: 3rem; }
  .gegevens > div {
    display: grid;
    grid-template-columns: 7em minmax(0, 1fr);
    align-items: center;
  }

  /* Zonder formulier is er niets voor de rechterkolom: dan een kolom.
     Staat bewust na .contactpagina hierboven, anders wint die op bronvolgorde.
     De breedte zit op de blokken zelf, niet op de pagina: zo blijft het monogram rechtsonder
     staan in plaats van over de tekst heen. */
  .contactpagina--zonder-formulier { display: block; }
  .contactpagina--zonder-formulier .contactpagina__intro,
  .contactpagina--zonder-formulier .mail-ons,
  .contactpagina--zonder-formulier .gegevens {
    max-width: 34rem;
  }
  .contactpagina--zonder-formulier .gegevens { margin-top: 3.5rem; }
}


/* Footer */

.site-footer {
  --l: max(26px, 8.7vw, env(safe-area-inset-left));
  --r: max(26px, 6vw, env(safe-area-inset-right));
  display: grid;
  gap: 1.75rem;
  padding: 3rem var(--r) max(2rem, env(safe-area-inset-bottom)) var(--l);
  background: var(--black);
  color: var(--beige);
  font-size: var(--maat-klein);
  line-height: var(--regel);
}
.site-footer :focus-visible { outline-color: var(--beige); }
.site-footer a { color: inherit; }

.site-footer__logo { display: block; width: 180px; }

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
}
.site-footer__links a,
.site-footer__regel a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.site-footer__links a:hover,
.site-footer__regel a:hover {
  text-decoration: underline;
  text-underline-offset: .3em;
}

.site-footer__regel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.5rem;
  font-size: var(--maat-klein);
}

@media (min-width: 48em) {
  .site-footer {
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 3rem;
  }
  .site-footer__logo { width: 260px; }
  .site-footer__links { justify-content: flex-end; }
  .site-footer__regel { grid-column: 1 / -1; }
}

@media (min-width: 56.3125em) and (min-aspect-ratio: 6 / 5) {
  .site-footer {
    --l: 3.9vw;
    --r: 3.9vw;
  }
}


/* Privacy: dezelfde stijl als de persoonspagina's */

.privacy {
  max-width: calc(44rem + var(--l) + var(--r));
  padding: 1.5rem var(--r) clamp(4rem, 14vw, 6rem) var(--l);
  font-size: var(--maat-tekst);
  line-height: var(--regel);
}

.privacy__concept {
  margin-bottom: 1.75rem;
  padding: .625rem 1rem;
  background: var(--bordeaux);
  color: var(--beige);
  font-size: var(--maat-klein);
  font-weight: 500;
}

.privacy h2 {
  margin: 2.25rem 0 .5rem;
  font-family: var(--kop);
  font-weight: var(--kop-gewicht);
  font-synthesis: none;
  font-size: var(--maat-h2-klein);
  line-height: 1.15;
}
.privacy p + p { margin-top: .75em; }
.privacy .privacy__concept + h1 { margin-top: 0; }
.privacy a { color: inherit; }
.privacy .profiel__naam { font-size: var(--maat-h1); }

/* De melding krijgt alleen focus om voorgelezen te worden, de lijn erboven markeert hem al */
.formulier__status:focus { outline: none; }

/* Zonder JavaScript is er geen controle en geen verzending: de knop mag dan niets posten */
html:not(.js) .formulier__verstuur { display: none; }