/* ==========================================================================
   De site.

   Vormgeving volgens "Huisstijlgids Adornes Law.pdf", en dan vooral volgens
   hoofdstuk 06, waar het merk in toepassingen staat. Wat daar te zien is en
   hier terugkomt:

   1. Platte, volle kleurvlakken die van rand tot rand lopen. Geen tinten,
      geen verlopen, geen schaduwen, geen zachte kaarten. Marineblauw is de
      dragende kleur en wisselt af met het witte vel; geel en rood zijn
      accent en staan er dus niet overal. Rood draagt nooit lopende tekst,
      want het haalt met wit of zwart erop geen 4,5:1.
   2. De banen uit hoofdstuk 05 als grafisch scharnier: als rand rond een
      vlak (het naamkaartje) en als overgang tussen kleurvlak en beeld (de
      affiche). Nooit als ondergrond voor tekst.
   3. De boog met de eenhoorn als badge die over de rand van een beeld valt
      (de app en de affiche).
   4. Koppen kort, in twee regels, met een punt. Geel op blauw, blauw op wit
      of geel. Eronder een kort streepje.
   5. Gele knop met blauwe tekst, licht afgeronde hoeken. Verder is alles
      recht.
   6. De vierpuntige ster uit het logo als opsommingsteken.

   Kleuren en patronen staan in brand.css, het logo bij het component in
   components/brand/logo.css.
   ========================================================================== */

.site {
  /* --- letter, hoofdstuk 04 ---------------------------------------------
     Ofelia Display voor alles: Medium voor titels, Regular voor lopende
     tekst. De kit hangt in app/layout.tsx. Terugvalletters zijn geometrische
     groteskes met een vergelijkbare ronding, zodat de pagina niet omspringt
     terwijl de kit laadt. */
  --font: "ofelia-display", "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;

  /* De gids vraagt Medium (500) voor titels. De kit levert vandaag 400 en
     700; zodra Medium erin zit gaat dit getal naar 500 en verandert er verder
     niets. Zie README. */
  --kop-gewicht: 700;

  /* De gids noemt 11 px als ondergrens en 17 px als gemiddelde maat voor
     webteksten. Geen enkele maat hieronder zakt onder de 11 px. */
  --fs-display: clamp(2.3rem, 1.5rem + 3.1vw, 3.9rem);
  --fs-h2: clamp(1.85rem, 1.2rem + 2.5vw, 3rem);
  --fs-h3: clamp(1.15rem, 1.02rem + 0.6vw, 1.4rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.5vw, 1.3rem);
  --fs-body: 1.0625rem; /* 17 px */
  --fs-klein: 0.9375rem; /* 15 px */
  --fs-micro: 0.75rem; /* 12 px */

  /* --- maat -------------------------------------------------------------- */
  --breedte: 78rem;
  --breedte-smal: 46rem;
  --marge: clamp(1.25rem, 5vw, 4rem);
  --sectie: clamp(4rem, 8vw, 7rem);
  --gat: clamp(1.75rem, 3.5vw, 3rem);
  --kop-h: 5.25rem;

  /* --- kleurrollen binnen een vlak --------------------------------------
     Elke sectie zet deze drie opnieuw; de componenten lezen alleen deze.
     Standaard is het witte vel met zwarte tekst. */
  --vlak: var(--wit);
  --tekst: var(--zwart);
  --titel: var(--blauw);
  --streep: var(--rood);
  /* Dezelfde accentkleur, maar dan in een waarde die kleine tekst mag dragen.
     Het volle rood haalt op wit maar 3,7:1: goed genoeg voor een streep of een
     groot cijfer, te weinig voor een label van 12 px. */
  --accent-tekst: var(--rood-tekst);
  --lijn: color-mix(in srgb, var(--blauw) 16%, transparent);
  --focus: var(--rood-tekst);

  background: var(--vlak);
  color: var(--tekst);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* ==========================================================================
   Vlakken

   Vier toonsoorten, één per kleur uit de gids. Rood ontbreekt met opzet: het
   haalt met wit of zwart erop geen 4,5:1, dus draagt het geen lopende tekst.
   Rood doet op deze site wat het in de gids ook doet: banen, schaakbord,
   kaders, cijfers en de eenhoorn.
   ========================================================================== */

.vlak {
  position: relative;
  padding-block: var(--sectie);
  background: var(--vlak);
  color: var(--tekst);
}

.vlak--wit {
  --vlak: var(--wit);
  --tekst: var(--zwart);
  --titel: var(--blauw);
  --streep: var(--rood);
  --accent-tekst: var(--rood-tekst);
  --lijn: color-mix(in srgb, var(--blauw) 16%, transparent);
  --focus: var(--rood-tekst);
}

.vlak--blauw {
  --vlak: var(--blauw);
  --tekst: var(--wit);
  --titel: var(--geel);
  --streep: var(--geel);
  --accent-tekst: var(--geel);
  --lijn: color-mix(in srgb, var(--wit) 26%, transparent);
  --focus: var(--geel);
}

.vlak--geel {
  --vlak: var(--geel);
  --tekst: var(--blauw);
  --titel: var(--blauw);
  --streep: var(--rood);
  --accent-tekst: var(--blauw);
  --lijn: color-mix(in srgb, var(--blauw) 28%, transparent);
  --focus: var(--blauw);
}

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

.wrap--smal {
  max-width: var(--breedte-smal);
}

/* ==========================================================================
   Typografie
   ========================================================================== */

.display,
.h2,
.h3 {
  color: var(--titel);
  font-weight: var(--kop-gewicht);
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.h2 {
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.012em;
}

.h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.005em;
}

/* Bovenkop. Klein, gespatieerd, in hoofdletters: op de affiche staat het
   woordmerk zo boven de kop. Nooit kleiner dan 12 px. */
.eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--kop-gewicht);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--titel);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 44ch;
}

.body {
  max-width: 62ch;
}

.klein {
  font-size: var(--fs-klein);
}

.micro {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--kop-gewicht);
}

/* Rol of onderschrift. Op het naamkaartje in de gids staat de functie
   cursief onder de naam. */
.rol {
  font-style: italic;
  color: var(--tekst);
  opacity: 0.85;
}

/* Het korte streepje onder een kop. Op de affiche staat het geel onder de
   gele kop, met de tekst eronder los. */
.streep {
  width: 3.5rem;
  height: 3px;
  border: 0;
  background: var(--streep);
  margin-block: 1.5rem;
}

a {
  color: inherit;
}

.link {
  color: var(--titel);
  font-weight: var(--kop-gewicht);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--streep);
  transition: text-decoration-color 0.2s ease;
}

.link:hover {
  text-decoration-color: currentColor;
}

/* Op wit is het volle rood te licht voor een link; daar gaat de donkere
   variant naar de tekst zelf. */
.vlak--wit .link {
  color: var(--rood-tekst);
}

/* ==========================================================================
   Knoppen

   De enige plek met afgeronde hoeken; op de app-schermafbeelding in de gids
   is dat een kleine straal, verder is alles recht.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border-radius: 6px;
  background: var(--geel);
  color: var(--blauw);
  font-size: var(--fs-klein);
  font-weight: var(--kop-gewicht);
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  background: color-mix(in srgb, var(--geel) 84%, var(--blauw));
  transform: translateY(-1px);
}

/* Op geel valt een gele knop weg. Daar wordt hij blauw. */
.vlak--geel .btn,
.btn--blauw {
  background: var(--blauw);
  color: var(--wit);
}

.vlak--geel .btn:hover,
.btn--blauw:hover {
  background: color-mix(in srgb, var(--blauw) 86%, var(--wit));
}

/* Tweede knop: alleen een lijn, in de tekstkleur van het vlak. */
.btn--lijn {
  background: transparent;
  color: var(--tekst);
  box-shadow: inset 0 0 0 2px currentColor;
}

.btn--lijn:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: var(--tekst);
}

.btn-rij {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ==========================================================================
   Grafische elementen uit de gids
   ========================================================================== */

/* De banen als scheiding tussen twee vlakken. Een smalle strook over de
   volle breedte, zoals de rand van het naamkaartje. */
.banen {
  height: var(--banen-h, 1.5rem);
  --pat-maat: 0.75rem;
}

/* Verticale balken die over de rand van een beeld vallen, zoals op de
   affiche. Ze staan in de kleur van het vlak eromheen, zodat het beeld eruit
   lijkt te komen in plaats van erop geplakt. */
.balken {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: clamp(3rem, 8vw, 6.5rem);
  --baan-kleur: var(--vlak);
  --pat-maat: clamp(0.5rem, 1.1vw, 0.9rem);
  pointer-events: none;
}

/* De boog met de eenhoorn, als badge over de rand van een beeld. */
.boog {
  position: absolute;
  width: clamp(4.5rem, 9vw, 7rem);
  aspect-ratio: 124.55 / 143.99;
  filter: drop-shadow(0 0 0 transparent);
}

/* De vierpuntige ster naast de eenhoorn in het logo. In de gids is dit het
   opsommingsteken op het naamkaartje. */
.ster {
  flex: none;
  width: 0.7em;
  height: 0.7em;
  margin-block-start: 0.45em;
  color: var(--streep);
}

/* Kader in de merkkleur, zoals rond het logo op het naamkaartje. */
.kader {
  padding: clamp(0.85rem, 1.6vw, 1.4rem);
  background: var(--rood);
}

/* ==========================================================================
   Beeld

   Rechte hoeken, geen schaduw. De verhouding komt uit media.ts, zodat de
   pagina de ruimte al reserveert voor het beeld geladen is.
   ========================================================================== */

.beeld {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--blauw) 12%, var(--wit));
}

.beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Plaatshouder voor beeld dat nog moet worden aangeleverd. Bewust zichtbaar
   gemarkeerd in plaats van opgevuld met een stockbeeld. */
.plaatshouder {
  display: grid;
  align-content: center;
  gap: 0.4rem;
  padding: 1.5rem;
  text-align: center;
  background: var(--geel);
  color: var(--blauw);
  outline: 2px dashed color-mix(in srgb, var(--blauw) 45%, transparent);
  outline-offset: -0.75rem;
}

/* Waarde die nog bij het kantoor opgevraagd moet worden. */
.pending {
  font-style: italic;
  opacity: 0.75;
}

/* ==========================================================================
   Header

   Wit, zoals op de app-schermafbeelding, met het logo links en een gele knop
   rechts. Onderaan een haarlijn in plaats van een schaduw.
   ========================================================================== */

.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--wit);
  color: var(--zwart);
  border-block-end: 1px solid color-mix(in srgb, var(--blauw) 14%, transparent);
}

.hdr__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: var(--kop-h);
}

.hdr__logo {
  display: inline-flex;
  text-decoration: none;
  margin-inline-end: auto;
}

.hdr__nav {
  display: none;
  align-items: center;
  gap: clamp(0.25rem, 1.4vw, 1.25rem);
}

@media (min-width: 62rem) {
  .hdr__nav {
    display: flex;
  }
}

/* Het label krijgt een geel vlak op hover: dezelfde vorm als de knop, in de
   accentkleur van de gids. */
.hdr__link {
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  color: var(--blauw);
  font-size: var(--fs-klein);
  font-weight: var(--kop-gewicht);
  text-decoration: none;
  background: transparent;
  transition: background-color 0.2s ease;
}

.hdr__link:hover,
.hdr__trigger[aria-expanded="true"] {
  background: var(--geel);
}

.hdr__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hdr__chev {
  transition: transform 0.2s ease;
}

.hdr__trigger[aria-expanded="true"] .hdr__chev {
  transform: rotate(180deg);
}

.hdr__cta {
  display: none;
}

@media (min-width: 48rem) {
  .hdr__cta {
    display: inline-flex;
  }
}

/* --- uitklappaneel met de zes domeinen ----------------------------------- */

.mega {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--blauw);
  color: var(--wit);
  /* Het paneel is een blauw vlak binnen een witte balk, dus zet het dezelfde
     rollen als .vlak--blauw; anders blijft een kop marineblauw op marineblauw. */
  --tekst: var(--wit);
  --titel: var(--geel);
  --streep: var(--geel);
  --lijn: color-mix(in srgb, var(--wit) 26%, transparent);
  --focus: var(--geel);
  border-block-end: 4px solid var(--rood);
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 0.28s ease,
    opacity 0.2s ease,
    visibility 0s linear 0.28s;
}

.hdr[data-mega="open"] .mega {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Een 0fr-rij klapt alleen dicht wanneer het kind zelf mag krimpen; zonder
   min-height blijft de eigen hoogte van de inhoud staan. */
.mega__clip {
  overflow: hidden;
  min-height: 0;
}

.mega__grid {
  display: grid;
  gap: var(--gat);
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
}

@media (min-width: 62rem) {
  .mega__grid {
    grid-template-columns: 18rem minmax(0, 1fr);
  }
}

.mega__lijst {
  display: grid;
  gap: 1px;
  background: color-mix(in srgb, var(--wit) 22%, transparent);
}

@media (min-width: 48rem) {
  .mega__lijst {
    grid-template-columns: 1fr 1fr;
  }
}

/* De li moet meerekken, anders blijft de achtergrond van het raster als een
   band zichtbaar onder een korter item. */
.mega__lijst > li {
  display: grid;
}

.mega__item {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.15rem 0.75rem;
  padding: 1rem 1.1rem;
  background: var(--blauw);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.mega__item:hover {
  background: color-mix(in srgb, var(--blauw) 82%, var(--wit));
}

.mega__nr {
  grid-row: span 2;
  color: var(--geel);
  font-weight: var(--kop-gewicht);
  font-size: var(--fs-klein);
}

.mega__titel {
  color: var(--wit);
  font-weight: var(--kop-gewicht);
}

.mega__sum {
  font-size: var(--fs-klein);
  color: color-mix(in srgb, var(--wit) 82%, var(--blauw));
}

/* --- menu onder 62rem ---------------------------------------------------- */

.burger {
  display: inline-grid;
  gap: 4px;
  padding: 0.7rem 0.6rem;
  border-radius: 6px;
}

.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--blauw);
}

@media (min-width: 62rem) {
  .burger {
    display: none;
  }
}

.paneel {
  display: grid;
  grid-template-rows: 0fr;
  background: var(--blauw);
  color: var(--wit);
  transition: grid-template-rows 0.3s ease;
}

.paneel[data-open="true"] {
  grid-template-rows: 1fr;
}

.paneel__clip {
  overflow: hidden;
  min-height: 0;
}

.paneel__nav {
  display: grid;
  padding-block: 1rem 2rem;
}

.paneel__link {
  /* Een inline-a laat de onderrand door de tekst lopen in plaats van eronder. */
  display: block;
  padding-block: 0.9rem;
  border-block-end: 1px solid color-mix(in srgb, var(--wit) 22%, transparent);
  color: var(--wit);
  font-size: 1.15rem;
  font-weight: var(--kop-gewicht);
  text-decoration: none;
}

.paneel__sub {
  display: grid;
  padding: 0.5rem 0 0.75rem 1.1rem;
}

.paneel__sub a {
  display: block;
  padding-block: 0.5rem;
  color: color-mix(in srgb, var(--wit) 85%, var(--blauw));
  font-size: var(--fs-klein);
  text-decoration: none;
}

.paneel__sub b {
  color: var(--geel);
  margin-inline-end: 0.6rem;
  font-weight: var(--kop-gewicht);
}

@media (min-width: 62rem) {
  .paneel {
    display: none;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.ftr {
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.ftr__top {
  display: grid;
  gap: var(--gat);
}

@media (min-width: 48rem) {
  .ftr__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Vier kolommen sinds het contactblok in de voettekst is opgegaan: merk,
   expertise, kantoorgegevens en de wegwijzer. De eerste krijgt meer ruimte,
   de laatste minder: daar staan vier korte woorden. */
@media (min-width: 62rem) {
  .ftr__top {
    grid-template-columns: 1.4fr 1.1fr 1.1fr 0.7fr;
  }
}

/* Telefoon en e-mail in de kantoorkolom: icoon links, gegeven ernaast, met de
   tekst uitgelijnd op de eerste regel als ze omslaat. */
.ftr__regel {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: 0.55rem;
  align-items: start;
}

.ftr__icoon {
  margin-block-start: 0.28em;
  color: var(--geel);
}

/* De knop naar de mailbox, onder het logo. */
.ftr__knop {
  margin-block-start: 1.75rem;
}

/* Bereikbaarheid, balie en talen: hoorden bij het contactblok en staan nu
   onder de kantoorgegevens, kleiner gezet dan het adres erboven. */
.ftr__uren {
  margin-block-start: 1.1rem;
  font-size: var(--fs-micro);
  line-height: 1.6;
  opacity: 0.85;
  max-width: 30ch;
}

.ftr__kop {
  color: var(--geel);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--kop-gewicht);
  margin-block-end: 1rem;
}

.ftr__lijst {
  display: grid;
  gap: 0.65rem;
  font-size: var(--fs-klein);
}

.ftr__lijst a {
  display: inline-block;
  text-decoration: none;
}

.ftr__lijst a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ftr__onder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: clamp(2rem, 4vw, 3rem);
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--lijn);
  font-size: var(--fs-micro);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Herbruikbare stukken binnen de secties
   ========================================================================== */

/* Sectiekop: bovenkop, titel, streepje, inleiding. */
.kop {
  max-width: 40ch;
}

.kop--midden {
  margin-inline: auto;
  text-align: center;
}

/* Ruimer, voor een kop boven een brede sectie. Niet de volle breedte van de
   sectie: bij zo'n kolom worden de regels te lang om vlot te lezen. Rond de
   62 tekens is de bovengrens die nog comfortabel leest. */
.kop--breed,
.kop--breed .lead {
  max-width: 62ch;
}

.kop--midden .streep {
  margin-inline: auto;
}

.kop .h2 {
  margin-block-start: 1rem;
}

/* Raster van gelijke kolommen. */
.raster {
  display: grid;
  gap: var(--gat);
}

@media (min-width: 40rem) {
  .raster--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 56rem) {
  .raster--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .raster--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 40rem) and (max-width: 55.999rem) {
  .raster--3,
  .raster--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Genummerd punt. Het cijfer is groot en in de accentkleur, zoals de cijfers
   in de gids: vorm, geen tekst. Daarom mag het volle rood hier wel. */
.punt__nr {
  display: block;
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
  font-weight: var(--kop-gewicht);
  line-height: 1;
  color: var(--streep);
}

.punt__titel {
  margin-block: 0.9rem 0.6rem;
}

.punt__body {
  font-size: var(--fs-klein);
}

/* Lijst met de ster als opsommingsteken. */
.sterlijst {
  display: grid;
  gap: 0.7rem;
}

.sterlijst li {
  display: flex;
  gap: 0.7rem;
  font-size: var(--fs-klein);
  line-height: 1.5;
}

/* Streepje in plaats van een ster, voor wat we juist níet doen. */
.streeplijst li .ster {
  color: color-mix(in srgb, var(--tekst) 45%, transparent);
}

/* Veelgestelde vragen. Een lijn tussen de vragen, verder niets. */
.faq {
  border-block-start: 1px solid var(--lijn);
}

.faq__item {
  border-block-end: 1px solid var(--lijn);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.15rem;
  cursor: pointer;
  list-style: none;
  color: var(--titel);
  font-weight: var(--kop-gewicht);
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__teken {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
  color: var(--streep);
}

.faq__teken::before,
.faq__teken::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease;
}

.faq__teken::after {
  transform: rotate(90deg);
}

.faq__item[open] .faq__teken::after {
  transform: rotate(0deg);
}

.faq__a {
  padding-block-end: 1.25rem;
  font-size: var(--fs-klein);
  max-width: 68ch;
}

/* Gegevenslijst: label boven waarde. */
.gegevens {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 34rem) {
  .gegevens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gegevens dt {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--kop-gewicht);
  color: var(--titel);
  margin-block-end: 0.3rem;
}

.gegevens dd {
  margin: 0;
  font-size: var(--fs-klein);
}

/* ==========================================================================
   Kaart

   Minimaal: een rand, geen schaduw, geen straal. Het onderscheid komt van de
   lijn en van de typografie, niet van een vlak dat lijkt te zweven. Op blauw
   wordt de rand licht, op wit blauw.
   ========================================================================== */

.kaart {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border: 1px solid var(--lijn);
  background: transparent;
}

a.kaart,
button.kaart {
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Een kaart die een venster opent is een knop. De eigen opmaak van een knop
   gaat eruit, zodat hij er precies uitziet als elke andere kaart. */
button.kaart {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

a.kaart:hover,
button.kaart:hover {
  border-color: var(--streep);
  background: color-mix(in srgb, var(--streep) 7%, transparent);
}

/* Het venster achter een expertisekaart. Een wit vel met dezelfde rode
   kop-rand als .kaart--rand, op een marineblauwe waas. Geen afgeronde hoeken en
   geen schaduw: de gids houdt alles plat en recht. */
.venster {
  width: min(42rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  /* De reset in base.css zet elke marge op nul; een dialog centreert zich
     met `margin: auto`, dus die komt hier terug. */
  margin: auto;
  padding: 0;
  border: 0;
  border-block-start: 4px solid var(--streep);
  background: var(--vlak);
  color: var(--tekst);
  overflow: auto;
}

.venster::backdrop {
  background: color-mix(in srgb, var(--blauw) 72%, transparent);
}

/* De marge zit hier en niet op de dialog: dan kan een klik op de dialog zelf
   alleen de waas zijn, en die sluit het venster. */
.venster__binnen {
  position: relative;
  padding: clamp(1.75rem, 4vw, 3rem);
}

.venster__sluit {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--titel);
  cursor: pointer;
}

.venster__sluit:hover {
  background: color-mix(in srgb, var(--blauw) 8%, transparent);
}

.venster__titel {
  margin-block-start: 0.4rem;
  padding-inline-end: 2.5rem;
  color: var(--titel);
}

.venster__alinea {
  margin-block-start: 1rem;
}

.venster__knop {
  margin-block-start: 2rem;
}

/* De pagina eronder scrolt niet mee zolang het venster open is. */
html:has(.venster[open]) {
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .venster[open] {
    animation: venster-in 0.22s ease-out;
  }

  .venster[open]::backdrop {
    animation: waas-in 0.22s ease-out;
  }
}

@keyframes venster-in {
  from {
    opacity: 0;
    translate: 0 0.75rem;
  }
}

@keyframes waas-in {
  from {
    opacity: 0;
  }
}

/* Kaart met een gekleurde kop-rand, zoals het kader rond het logo op het
   naamkaartje. Eén accentlijn, verder niets. */
.kaart--rand {
  border-block-start: 4px solid var(--streep);
}

/* ==========================================================================
   Beeld met de merkelementen erop

   Op de affiche in de gids vallen verticale balken in de vlakkleur over de
   linkerrand van het beeld, en zit de boog met de eenhoorn in de hoek. Die
   twee samen maken van een foto een merkbeeld. Ze worden spaarzaam ingezet:
   één keer in de hero en één keer bij het kantoorverhaal.
   ========================================================================== */

.merkbeeld {
  position: relative;
}

.merkbeeld .boog {
  inset-block-end: clamp(-1rem, -2vw, -1.75rem);
  inset-inline-end: clamp(-0.75rem, -1.5vw, -1.5rem);
}

@media (max-width: 39.999rem) {
  /* Op mobiel wordt de decoratie te dominant naast een smal beeld: de balken
     gaan eruit, de boog blijft maar kleiner en binnen de rand. */
  .merkbeeld .balken {
    display: none;
  }

  .merkbeeld .boog {
    width: 3.75rem;
    inset-block-end: 0.75rem;
    inset-inline-end: 0.75rem;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6rem);
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

.hero .display {
  margin-block-start: 1.1rem;
}

.hero__beeld {
  aspect-ratio: 4 / 3;
}

@media (min-width: 62rem) {
  .hero__beeld {
    aspect-ratio: 5 / 4;
  }
}

/* ==========================================================================
   Kerngegevens

   Een smalle gele band tussen de hero en de rest. Het enige gele vlak boven
   de vouw, zodat het accent blijft wat het is.
   ========================================================================== */

.feiten {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

.feiten__grid {
  display: grid;
  gap: 1.25rem 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 56rem) {
  .feiten__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.feit {
  padding-inline: clamp(0.75rem, 2vw, 1.5rem);
}

.feit:first-child {
  padding-inline-start: 0;
}

@media (min-width: 56rem) {
  .feit + .feit {
    border-inline-start: 1px solid var(--lijn);
  }
}

.feit__label {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--kop-gewicht);
  opacity: 0.75;
}

.feit__waarde {
  font-size: 1.05rem;
  font-weight: var(--kop-gewicht);
  line-height: 1.3;
  margin-block-start: 0.3rem;
}

/* ==========================================================================
   Split: sticky kop links, inhoud rechts
   ========================================================================== */

.split {
  display: grid;
  gap: var(--gat);
}

@media (min-width: 62rem) {
  .split {
    grid-template-columns: var(--split, 1fr 1.5fr);
    gap: clamp(3rem, 6vw, 5rem);
  }

  .split__kop {
    position: sticky;
    top: calc(var(--kop-h) + 2rem);
    align-self: start;
  }
}

/* ==========================================================================
   Expertise
   ========================================================================== */

/* Een kolom en geen raster: in een raster verdeelt een hogere buurkaart haar
   extra hoogte over alle rijen, en dan staan nummer en titel per kaart op een
   andere hoogte. Zo gaat alle extra ruimte naar boven het pijltje. */
.dom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
}

.dom__nr {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  font-weight: var(--kop-gewicht);
  color: var(--accent-tekst);
}

.dom__titel {
  font-size: var(--fs-h3);
  font-weight: var(--kop-gewicht);
  line-height: 1.25;
  color: var(--titel);
}

.dom__sum {
  font-size: var(--fs-klein);
  /* Duwt wat er nog onder komt naar de onderrand, zodat kaarten van
     ongelijke lengte onderaan toch uitlijnen. */
  margin-block-end: auto;
}

/* Het pijltje onderaan de kaart: er zit een venster achter. Het schuift een
   tikje op bij aanwijzen, zodat de hele kaart als knop leest. */
.dom__pijl {
  align-self: flex-start;
  margin-block-start: auto;
  padding-block-start: 0.9rem;
  color: var(--accent-tekst);
  transition: translate 0.2s ease;
}

.dom__pijl svg {
  display: block;
}

.dom:hover .dom__pijl {
  translate: 0.3rem 0;
}

/* Het verhaalblok: tekst naast een staand beeld, verticaal gecentreerd zodat
   er onder de kortere kolom geen gat valt. */
.verhaal {
  align-items: center;
}

.verhaal__beeld {
  aspect-ratio: 4 / 5;
}

/* ==========================================================================
   Personen
   ========================================================================== */

.persoon {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}

@media (min-width: 40rem) {
  .persoon {
    grid-template-columns: 14rem minmax(0, 1fr);
  }
}

.persoon__beeld {
  aspect-ratio: 3 / 4;
}

/* Het persoonlijke e-mailadres onder de tags op een profielkaart. */
.persoon__mail {
  margin-block-start: 1rem;
  font-size: var(--fs-micro);
  word-break: break-word;
}

.persoon__naam {
  font-size: var(--fs-h3);
  font-weight: var(--kop-gewicht);
  color: var(--titel);
}

/* Het citaat staat tussen twee gele lijnen in plaats van in een kader: op de
   affiche doet het streepje onder de kop hetzelfde werk. */
.citaat {
  margin-block: 1.25rem;
  padding-inline-start: 1.1rem;
  border-inline-start: 3px solid var(--streep);
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--titel);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tag {
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--lijn);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   Werkwijze
   ========================================================================== */

.stap {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding-block-start: 1.1rem;
  border-block-start: 3px solid var(--streep);
}

.stap__nr {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--kop-gewicht);
  color: var(--accent-tekst);
}

.stap__titel {
  font-size: var(--fs-h3);
  font-weight: var(--kop-gewicht);
  color: var(--titel);
}

.stap__body {
  font-size: var(--fs-klein);
}

/* ==========================================================================
   Elementen die per variant aan of uit staan

   Welke van deze aan staan bepaalt content/variants.ts. De opmaak staat hier,
   de dosering per variant in variant-N.css.
   ========================================================================== */

/* Kleinere boog, voor een portret in plaats van een breed beeld. */
.boog--klein {
  width: clamp(2.75rem, 5vw, 3.75rem);
}

.persoon .boog--klein {
  inset-block-end: -0.75rem;
  inset-inline-end: -0.75rem;
}

/* Het schaakbord als merkvlak onder de expertisekolom. Vlakvulling, geen
   ondergrond voor tekst: er staat niets overheen. */
.schaakvlak {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  aspect-ratio: 3 / 1;
  --pat-maat: clamp(0.9rem, 1.8vw, 1.4rem);
}

@media (max-width: 61.999rem) {
  /* Buiten de tweekolomsopzet valt het schaakbord tussen de kop en de
     domeinen in, en dan onderbreekt het de leesvolgorde meer dan het oplevert. */
  .schaakvlak {
    display: none;
  }
}

/* Het schuine patroon achter de kerngegevens. De band is smal en de tekst
   staat op een eigen vlak erbovenop, zodat er nooit tekst op het patroon valt. */
.feiten--schuin {
  --pat-maat: clamp(0.6rem, 1.4vw, 1rem);
  background-color: var(--blauw);
  background-image: repeating-linear-gradient(
    45deg,
    var(--geel) 0,
    var(--geel) var(--pat-maat),
    transparent var(--pat-maat),
    transparent calc(var(--pat-maat) * 2)
  );
  padding-block: clamp(2rem, 4vw, 3rem);
}

.feiten--schuin .feiten__grid {
  background: var(--vlak);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

/* ==========================================================================
   De brede hero

   Tekst boven, beeld eronder over de volle breedte van het scherm, met de boog
   op de naad naar de sectie eronder. Dat is het app-scherm uit hoofdstuk 06,
   waar het icoon precies op de rand van het beeld ligt.

   Het beeld staat buiten de .wrap zodat het van schermrand tot schermrand
   loopt. De sectie zelf houdt daarom geen ondermarge: het beeld ís de onderrand.
   ========================================================================== */

.hero--breed {
  padding-block-end: 0;
}

.hero--breed .hero__grid {
  /* geen tweede kolom: de tekst staat alleen boven het beeld */
  grid-template-columns: minmax(0, 1fr);
  padding-block-end: clamp(2.5rem, 5vw, 4rem);
  /* Gecentreerd, want er staat niets naast. Links uitgelijnd zou het blok een
     kolom lijken met een leeg gat ernaast; boven een beeld dat van rand tot
     rand loopt hoort de tekst op dezelfde as als dat beeld. */
  text-align: center;
  justify-items: center;
}

/* De kop mag hier breder uitlopen dan in een kolom naast een beeld, maar niet
   over de volle regel: voorbij een regel of vijftien woorden leest een kop
   niet meer als kop. */
.hero--breed .display {
  max-width: 18ch;
}

.hero--breed .lead {
  max-width: 52ch;
}

/* De maten hierboven zijn max-breedtes, dus het blok moet zelf nog gecentreerd
   worden; `justify-items` doet dat alleen voor de rasteritems. */
.hero--breed .streep,
.hero--breed .lead {
  margin-inline: auto;
}

.hero--breed .btn-rij {
  justify-content: center;
}

/* Sommige varianten zetten een streepje vóór de bovenkop; dat blok is dan een
   flexrij en heeft zijn eigen uitlijning nodig. */
.hero--breed .eyebrow {
  justify-content: center;
}

/* Op hoogte gestuurd en niet op verhouding: over de volle schermbreedte wordt
   een vaste verhouding op een breed scherm een muur van beeld, en dan staat de
   rest van de pagina te ver weg. Zo blijft de band cinematisch zonder de vouw
   helemaal op te eten. */
.hero__breedbeeld {
  height: clamp(20rem, 34vw, 30rem);
}

@media (max-width: 61.999rem) {
  .hero__breedbeeld {
    height: clamp(16rem, 46vw, 22rem);
  }
}

@media (max-width: 39.999rem) {
  .hero__breedbeeld {
    height: clamp(13rem, 62vw, 18rem);
  }
}

/* De boog op de naad: halverwege de onderrand van het beeld, gecentreerd. Zo
   ligt ze half op het beeld en half op de sectie eronder, zoals in de gids. */
.hero__breed .boog {
  inset-block-end: 0;
  inset-inline-start: 50%;
  translate: -50% 50%;
  width: clamp(4.5rem, 8vw, 6.5rem);
  z-index: 2;
}

/* Op mobiel schuift de boog naar de rechterhoek: gecentreerd zou ze midden op
   het onderwerp van de foto vallen, dat op een smal scherm al krap zit. */
@media (max-width: 39.999rem) {
  .hero__breed .boog {
    inset-inline-start: auto;
    inset-inline-end: 1rem;
    translate: 0 50%;
    width: 3.75rem;
  }
}

/* De onderste helft van de boog hangt in de sectie eronder. Die krijgt daarom
   extra lucht bovenaan, anders komt het icoon op de eerste regel tekst te
   liggen. Aan de sectie zelf verandert verder niets. */
.hero--breed + .vlak {
  padding-block-start: clamp(3.5rem, 6vw, 5rem);
}

/* ==========================================================================
   Aanvullingen na de nalezing van de klant (7 september 2026)
   ========================================================================== */

/* Het icoon uit de set van Helena, boven de domeintitel. De iconen zijn zwart
   lijnwerk op transparant, dus ze nemen de tekstkleur van het vlak niet over;
   op een donker vlak worden ze omgekeerd. */
.dom__icoon {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
  margin-block-end: 0.35rem;
}

.vlak--blauw .dom__icoon {
  filter: invert(1);
}

/* Het woord dat de klant vet vooraan elke positioneringskaart zette. */
.punt__label {
  color: var(--accent-tekst);
  font-weight: var(--kop-gewicht);
}

/* De slagzin in de hero: de claim zelf, groter dan de uitleg. */
.baseline {
  margin-block-start: 1.25rem;
  font-size: var(--fs-h3);
  font-weight: var(--kop-gewicht);
  line-height: 1.3;
  color: var(--titel);
}

/* De rij met de juridische links onderaan de voettekst. */
.ftr__links a {
  color: inherit;
}

/* "Cookie-instellingen" is een knop (hij opent de banner) maar staat tussen
   links, dus ziet hij er ook zo uit. */
.ftr__knoplink {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   Cookiebanner

   Een wit vlak onderaan links, zoals een naamkaartje: plat, recht, met de rode
   kop-rand. Het ligt over de pagina maar blokkeert ze niet. Op een smal scherm
   vult het de breedte.

   Wit op een witte sectie valt weg, en de gids laat geen schaduw toe. Een
   dunne rand geeft het vlak zijn grens.
   ========================================================================== */

.cookie {
  position: fixed;
  z-index: 1000;
  inset-inline: 1rem;
  inset-block-end: 1rem;
  max-width: 30rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid color-mix(in srgb, var(--blauw) 22%, transparent);
  border-block-start: 4px solid var(--streep);
  background: var(--vlak);
  color: var(--tekst);
}

.cookie__titel {
  font-size: var(--fs-h3);
  font-weight: var(--kop-gewicht);
  line-height: 1.2;
  color: var(--titel);
}

.cookie__tekst {
  margin-block-start: 0.5rem;
  font-size: var(--fs-klein);
  line-height: 1.55;
}

.cookie__knoppen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-block-start: 1.25rem;
}

.cookie__knoppen .btn {
  justify-content: center;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .cookie {
    animation: venster-in 0.3s ease-out;
  }
}