/* ==========================================================================
   Mizaro Webdesign - onderdelen
   Bouwt voort op ontwerpsysteem.css. Alle waarden komen daar vandaan.

   1 kopbalk   2 voet   3 hero   4 venster   5 diensten   6 problemen
   7 stappen   8 vragen  9 formulier  10 slot  11 overig
   ========================================================================== */

@view-transition { navigation: auto; }

/* --------------------------------------------------------------------------
   1. Kopbalk
   -------------------------------------------------------------------------- */

.kopbalk {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--zand) 88%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--soepel), background var(--soepel);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .kopbalk { background: var(--zand); }
}
.kopbalk--gescrold { border-bottom-color: var(--lijn); }

.kopbalk__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r-5);
  min-height: 84px;
}

.merk { flex: 0 0 auto; display: inline-flex; }
.merk img { width: 188px; max-width: none; height: auto; }

.hoofdmenu {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.hoofdmenu__lijst {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hoofdmenu__lijst a {
  position: relative;
  display: inline-block;
  padding: 0.6rem 0;
  color: var(--inkt);
  font-size: var(--t-sm);
  font-weight: var(--gewicht-nadruk);
  text-decoration: none;
  white-space: nowrap;
}
/* Onder het menu-item van de pagina waar je bent staat een fijne lijn, zodat
   je in een oogopslag ziet waar je zit. Bij aanwijzen groeit hij van links
   naar rechts mee. */
.hoofdmenu__lijst a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.3rem;
  height: 1px;
  background: var(--brons);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--soepel);
}
.hoofdmenu__lijst a:hover::after,
.hoofdmenu__lijst a[aria-current="page"]::after { transform: scaleX(1); }
.hoofdmenu__lijst a[aria-current="page"] { color: var(--brons); }

.kopbalk__rechts { display: flex; align-items: center; gap: clamp(0.75rem, 1.8vw, 1.5rem); }

.taal {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin: 0;
  max-width: none;
  font-size: var(--t-xs);
  font-weight: var(--gewicht-nadruk);
  letter-spacing: 0.03em;
}
.taal a, .taal span {
  display: inline-block;
  padding: 0.7rem 0.35rem;
  text-decoration: none;
  color: var(--gedempt);
}
.taal span[aria-current="true"] { color: var(--inkt); }
.taal a:hover { color: var(--brons); }

.kopbalk__actie { min-height: 46px; padding: 0.65rem 1.35rem; font-size: var(--t-sm); }

/* de knop op smalle schermen: twee streepjes, geen drie */
.menuknop {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.5rem 0.25rem;
  background: none;
  border: 0;
  color: var(--inkt);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: var(--gewicht-nadruk);
  cursor: pointer;
}
.menuknop__streepjes { display: grid; gap: 5px; width: 22px; }
.menuknop__streepjes span {
  display: block;
  height: 1.5px;
  background: var(--inkt);
  transition: transform var(--soepel), opacity var(--soepel);
}
.menu-open .menuknop__streepjes span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-open .menuknop__streepjes span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 1024px) {
  .menuknop { display: inline-flex; }
  .kopbalk__binnen { min-height: 72px; }
  .merk img { width: 164px; }

  /* Let op: .kopbalk heeft backdrop-filter, en daardoor is de kopbalk het
     positioneringskader voor alles wat hierbinnen fixed staat, niet het
     venster. Met inset 72px 0 0 0 werd dit paneel dus opgesloten in een blok
     ter hoogte van de kopbalk. Een expliciete hoogte lost dat op, en werkt
     ook als het kader wel het venster zou zijn. */
  .hoofdmenu {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    height: calc(100vh - 72px);
    height: calc(100dvh - 72px);
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: start;
    gap: 0;
    padding: var(--r-6) var(--marge) var(--r-8);
    background: var(--zand);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--soepel), transform var(--soepel);
  }
  .menu-open .hoofdmenu { opacity: 1; transform: none; pointer-events: auto; }
  .menu-open { overflow: hidden; }

  .hoofdmenu__lijst { display: block; }
  .hoofdmenu__lijst li { border-bottom: 1px solid var(--lijn); }
  .hoofdmenu__lijst a {
    display: block;
    padding: var(--r-5) 0;
    font-size: var(--t-xl);
    font-weight: var(--gewicht-kop);
    letter-spacing: var(--spat-klein);
  }
  /* in het uitklapmenu staat al een lijn onder elk item, dus daar geen tweede */
  .hoofdmenu__lijst a::after { display: none; }

  .kopbalk__rechts {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--r-5);
    margin-top: var(--r-6);
  }
  .kopbalk__actie { width: 100%; min-height: 54px; font-size: var(--t-base); }
  .taal { justify-content: flex-start; gap: var(--r-3); font-size: var(--t-sm); }
  .taal a, .taal span { padding: 0.6rem 0; }
}

/* --------------------------------------------------------------------------
   2. Voet
   Bewust beige, niet donker. Het logo mag niet van kleur veranderen en olijf
   op donkergroen is onleesbaar. Beige houdt het merk intact en versterkt
   bovendien de beige-dominantie uit de briefing.
   -------------------------------------------------------------------------- */

.voet {
  background: var(--zand-diep);
  border-top: 1px solid var(--lijn);
  padding-block: var(--r-9) var(--r-6);
}
.voet__boven {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--r-7) var(--goot);
  padding-bottom: var(--r-8);
}
.voet__merk img { width: 176px; max-width: none; margin-bottom: var(--r-5); }
.voet__zin { font-size: var(--t-sm); color: var(--gedempt); margin-bottom: var(--r-5); max-width: 34ch; }

.voet__kolom h2 {
  font-size: var(--t-xs);
  font-weight: var(--gewicht-kop);
  letter-spacing: 0.04em;
  color: var(--gedempt);
  margin-bottom: var(--r-3);
}
.voet__kolom ul { list-style: none; margin: 0; padding: 0; }
/* 0.8rem boven en onder plus de regelhoogte brengt het tikdoel op 45px,
   net boven de ondergrens van 44 uit de werkafspraak */
.voet__kolom a {
  display: inline-block;
  padding-block: 0.8rem;
  color: var(--inkt);
  font-size: var(--t-sm);
  text-decoration: none;
  line-height: 1.3;
}
.voet__kolom a:hover { color: var(--brons); text-decoration: underline; text-underline-offset: 3px; }

.voet__adres { font-style: normal; font-size: var(--t-sm); color: var(--gedempt); margin-top: var(--r-4); line-height: 1.6; }

.voet__onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--r-3) var(--r-6);
  padding-top: var(--r-5);
  border-top: 1px solid var(--lijn);
  font-size: var(--t-xs);
  color: var(--gedempt);
}
.voet__onder p { margin: 0; max-width: none; }
/* wrappen is nodig: op 320px passen de drie juridische links niet naast
   elkaar en duwden zij de hele pagina horizontaal buiten beeld */
.voet__juridisch {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--r-5);
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  min-width: 0;
}
.voet__juridisch a { color: var(--gedempt); font-size: var(--t-xs); display: inline-block; padding-block: 0.75rem; }

@media (max-width: 900px) {
  .voet__boven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet__merk { grid-column: span 2; }
}
@media (max-width: 560px) {
  .voet__boven { grid-template-columns: minmax(0, 1fr); gap: var(--r-6); }
  .voet__merk { grid-column: span 1; }
  .voet__juridisch { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(var(--r-8), 9vw, var(--r-10)) clamp(var(--r-8), 8vw, var(--r-9)); }

.hero__rooster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--r-7), 6vw, var(--r-9));
  align-items: center;
}

.hero h1 { margin-bottom: var(--r-5); }
.hero .leidend { margin-bottom: var(--r-7); }

.hero__kenmerk {
  display: flex;
  align-items: center;
  gap: var(--r-3);
  margin-bottom: var(--r-5);
  font-size: var(--t-sm);
  font-weight: var(--gewicht-nadruk);
  color: var(--gedempt);
}
.hero__kenmerk::before {
  content: "";
  width: 28px;
  height: 1.5px;
  background: var(--brons);
  flex: 0 0 auto;
}

.hero__onder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-4) var(--r-7);
  margin-top: var(--r-7);
  padding-top: var(--r-6);
  border-top: 1px solid var(--lijn);
  font-size: var(--t-sm);
  color: var(--gedempt);
}
.hero__onder span { display: flex; align-items: center; gap: var(--r-2); }
.hero__onder span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--rond-vol);
  background: var(--brons);
  flex: 0 0 auto;
}

@media (max-width: 1024px) {
  .hero__rooster { grid-template-columns: minmax(0, 1fr); gap: var(--r-8); }
}

/* --------------------------------------------------------------------------
   4. Venster
   Het terugkerende element van deze site. Geen afbeelding maar echte opmaak:
   oneindig scherp, vrijwel gewichtloos, en het past zich vanzelf aan.
   -------------------------------------------------------------------------- */

.venster {
  position: relative;
  background: var(--linnen);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-3);
  box-shadow: var(--schaduw-scherm);
  overflow: hidden;
}

.venster__balk {
  display: flex;
  align-items: center;
  gap: var(--r-3);
  padding: 0.65rem 0.9rem;
  background: var(--zand-diep);
  border-bottom: 1px solid var(--lijn);
}
.venster__stippen { display: flex; gap: 6px; flex: 0 0 auto; }
.venster__stippen span {
  width: 9px; height: 9px;
  border-radius: var(--rond-vol);
  background: var(--lijn);
}
.venster__adres {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.25rem 0.75rem;
  background: var(--linnen);
  border-radius: var(--rond-vol);
  font-size: 11px;
  line-height: 1.5;
  color: var(--gedempt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.venster__scherm {
  padding: clamp(1rem, 2.4vw, 1.75rem);
  background: var(--linnen);
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

/* de nagebootste pagina in het venster, opgebouwd uit echte elementen */
.mini { display: grid; gap: 0.5rem; }
.mini__balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--lijn-zacht);
}
.mini__merk { width: 46px; height: 7px; border-radius: 2px; background: var(--brons); }
.mini__nav { display: flex; gap: 6px; }
.mini__nav span { width: 22px; height: 5px; border-radius: 2px; background: var(--lijn); }
.mini__knop { width: 38px; height: 12px; border-radius: 3px; background: var(--brons); }

.mini__kop {
  height: clamp(14px, 2.4vw, 20px);
  border-radius: 3px;
  background: var(--inkt);
  opacity: 0.82;
}
.mini__kop--kort { width: 58%; }
.mini__regel { height: 6px; border-radius: 3px; background: var(--lijn); }
.mini__regel--kort { width: 72%; }
.mini__regel--korter { width: 45%; }

.mini__vlak {
  border-radius: var(--rond-2);
  background: var(--zand-diep);
  min-height: clamp(64px, 11vw, 108px);
}
.mini__vlak--groen { background: var(--groen); opacity: 0.9; }

.mini__rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.mini__kaart { display: grid; gap: 0.4rem; }

/* het telefoonvenster dat over het browservenster valt */
.venster-duo { position: relative; }
.telefoon {
  position: absolute;
  right: -8px;
  bottom: -28px;
  width: clamp(96px, 15%, 148px);
  background: var(--linnen);
  border: 1px solid var(--lijn);
  border-radius: 14px;
  box-shadow: var(--schaduw-scherm);
  padding: 8px 7px;
  overflow: hidden;
}
.telefoon__kerf {
  width: 30%;
  height: 4px;
  margin: 0 auto 8px;
  border-radius: var(--rond-vol);
  background: var(--lijn);
}
.telefoon .mini { gap: 0.35rem; }
.telefoon .mini__vlak { min-height: 42px; }
.telefoon .mini__kop { height: 9px; }
.telefoon .mini__regel { height: 4px; }

@media (max-width: 560px) {
  .telefoon { right: -4px; bottom: -20px; width: 92px; }
}

/* het venster dat van breedte verandert tijdens het scrollen */
.bewijs__venster {
  max-width: var(--breedte-nauw);
  margin-inline: auto;
  transition: max-width var(--traag);
}
.js .bewijs__venster { max-width: 420px; }
.js .bewijs__venster.zichtbaar { max-width: var(--breedte-nauw); }
@media (prefers-reduced-motion: reduce) {
  .js .bewijs__venster { max-width: var(--breedte-nauw); }
}

/* --------------------------------------------------------------------------
   5. Diensten
   Bewust geen raster van identieke kaarten. De eerste twee zijn breder dan de
   rest, omdat ze commercieel zwaarder wegen.
   -------------------------------------------------------------------------- */

.diensten { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--goot); }
.dienst {
  display: flex;
  flex-direction: column;
  gap: var(--r-3);
  grid-column: span 2;
  padding: var(--r-6) 0 var(--r-6);
  border-top: 1px solid var(--lijn);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--soepel);
}
.dienst--groot { grid-column: span 3; }
.dienst:hover { border-top-color: var(--brons); }
.dienst:hover .dienst__naam { color: var(--brons); }

.dienst__naam {
  font-size: var(--t-xl);
  font-weight: var(--gewicht-kop);
  letter-spacing: var(--spat-klein);
  line-height: 1.2;
  transition: color var(--soepel);
}
.dienst--groot .dienst__naam { font-size: clamp(1.5rem, 2.6vw, var(--t-2xl)); }
.dienst p { font-size: var(--t-sm); color: var(--gedempt); margin: 0; }
.dienst__meer { margin-top: auto; padding-top: var(--r-4); font-size: var(--t-sm); font-weight: var(--gewicht-nadruk); color: var(--brons); }

/* sluit de laatste rasterregel af zodat de zesde dienst er niet alleen op blijft
   staan, en zet er meteen een actie neer */
.dienst--actie {
  grid-column: span 4;
  justify-content: center;
  gap: var(--r-5);
  border-top-color: var(--lijn);
}
.dienst--actie:hover { border-top-color: var(--lijn); }
.dienst__vraag { font-size: var(--t-lg); font-weight: var(--gewicht-nadruk); color: var(--inkt); margin: 0; max-width: 42ch; }
@media (max-width: 900px) { .dienst--actie { grid-column: span 2; } }
@media (max-width: 560px) { .dienst--actie { grid-column: span 1; } }

@media (max-width: 900px) {
  .diensten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dienst, .dienst--groot { grid-column: span 1; }
}
@media (max-width: 560px) {
  .diensten { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   6. Problemen
   -------------------------------------------------------------------------- */

.problemen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.problemen li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--r-5);
  align-items: baseline;
  padding-block: var(--r-5);
  border-top: 1px solid var(--lijn-diep);
}
.problemen li:last-child { border-bottom: 1px solid var(--lijn-diep); }
.probleem__situatie { font-size: var(--t-lg); font-weight: var(--gewicht-nadruk); }
.probleem__gevolg { color: var(--ivoor-stil); font-size: var(--t-base); margin: 0; }

@media (max-width: 768px) {
  .problemen li { grid-template-columns: minmax(0, 1fr); gap: var(--r-2); }
}

/* --------------------------------------------------------------------------
   7. Stappen
   -------------------------------------------------------------------------- */

.stappen { list-style: none; margin: 0; padding: 0; }
.stappen > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--r-6);
  border-top: 1px solid var(--lijn);
}
.stappen > li:last-child { border-bottom: 1px solid var(--lijn); }
.stappen h3 { font-size: var(--t-lg); margin-bottom: var(--r-2); }
.stappen p { color: var(--gedempt); margin: 0; }
.stap__merk {
  display: inline-block;
  margin-top: var(--r-3);
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-vol);
  font-size: var(--t-xs);
  color: var(--gedempt);
}

@media (max-width: 560px) {
  .stappen > li { grid-template-columns: minmax(0, 1fr); gap: var(--r-2); }
}

/* --------------------------------------------------------------------------
   8. Vragen
   -------------------------------------------------------------------------- */

.vraag { border-top: 1px solid var(--lijn); }
.vraag:last-of-type { border-bottom: 1px solid var(--lijn); }
.vraag summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r-5);
  min-height: 52px;
  padding-block: var(--r-5);
  font-size: var(--t-lg);
  font-weight: var(--gewicht-nadruk);
  cursor: pointer;
  list-style: none;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: "";
  flex: 0 0 auto;
  width: 14px; height: 14px;
  background:
    linear-gradient(var(--brons), var(--brons)) center/100% 1.5px no-repeat,
    linear-gradient(var(--brons), var(--brons)) center/1.5px 100% no-repeat;
  transition: transform var(--soepel);
}
.vraag[open] summary::after { transform: rotate(90deg); background-size: 100% 1.5px, 0 0; }
.vraag__antwoord { padding-bottom: var(--r-5); color: var(--gedempt); }
.vraag__antwoord p { max-width: 62ch; }

/* --------------------------------------------------------------------------
   9. Formulier
   -------------------------------------------------------------------------- */

.formulier { display: grid; gap: var(--r-5); }
.formulier--smal { max-width: 34rem; }

.veld { display: grid; gap: 0.4rem; }
.veld > label { font-size: var(--t-sm); font-weight: var(--gewicht-nadruk); }
.hint { font-size: var(--t-xs); color: var(--gedempt); }

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea, select {
  font: inherit;
  font-size: 16px;              /* onder 16px zoomt iOS in bij focus */
  color: var(--inkt);
  background: var(--linnen);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-2);
  padding: 0.8rem 0.95rem;
  width: 100%;
  min-height: 52px;
  transition: border-color var(--soepel), box-shadow var(--soepel);
}
input:hover, textarea:hover, select:hover { border-color: var(--brons-licht); }
input:focus, textarea:focus, select:focus {
  border-color: var(--brons);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brons) 18%, transparent);
  outline-offset: 1px;
}
textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
select { appearance: none; padding-right: 2.5rem; }

.veld--keuze { display: flex; gap: 0.75rem; align-items: flex-start; }
.veld--keuze input { width: 24px; height: 24px; min-height: 0; flex: 0 0 auto; margin-top: 0.15rem; accent-color: var(--brons); }
.veld--keuze label { font-size: var(--t-sm); font-weight: var(--gewicht-tekst); cursor: pointer; }

fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--r-3); }
legend { font-size: var(--t-sm); font-weight: var(--gewicht-nadruk); padding: 0; margin-bottom: var(--r-2); }

.duo-veld { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r-4); }
@media (max-width: 560px) { .duo-veld { grid-template-columns: minmax(0, 1fr); } }

.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* meerstaps */
.voortgang { margin-bottom: var(--r-6); }
.voortgang__tekst { font-size: var(--t-xs); color: var(--gedempt); margin-bottom: var(--r-2); }
.voortgang__spoor { height: 3px; background: var(--lijn); border-radius: var(--rond-vol); overflow: hidden; }
.voortgang__vulling { height: 100%; width: 20%; background: var(--brons); border-radius: var(--rond-vol); transition: width var(--traag); }

.stap { display: grid; gap: var(--r-5); }
.stap h2 { font-size: clamp(1.4rem, 2.6vw, var(--t-2xl)); margin-bottom: 0; outline: none; }
.stap__uitleg { color: var(--gedempt); font-size: var(--t-sm); margin: 0; }

.stapknoppen { display: flex; flex-wrap: wrap; gap: var(--r-4); margin-top: var(--r-3); }
.formulier--gestapeld { gap: var(--r-6); }

/* het blok naast het formulier dat vertelt wat er daarna gebeurt */
.zijblok {
  position: sticky;
  top: 7rem;
  padding: var(--r-6);
  background: var(--linnen);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-3);
}
.zijblok h2 { font-size: var(--t-lg); margin-bottom: var(--r-4); }
.zijblok .bijschrift { max-width: none; }

.stappen--klein > li { padding-block: var(--r-4); }
.stappen--klein > li:first-child { padding-top: 0; border-top: 0; }
.stappen--klein > li:last-child { padding-bottom: 0; border-bottom: 0; }
.stappen--klein h3 { font-size: var(--t-base); margin-bottom: 0.2rem; }
.stappen--klein p { font-size: var(--t-sm); }

@media (max-width: 900px) { .zijblok { position: static; margin-top: var(--r-7); } }

.antwoordblok {
  border: 1px solid var(--lijn);
  border-radius: var(--rond-3);
  background: var(--linnen);
  padding: var(--r-7);
  outline: none;
}
.melding {
  border-left: 3px solid var(--brons);
  background: var(--linnen);
  padding: var(--r-4) var(--r-5);
  border-radius: 0 var(--rond-2) var(--rond-2) 0;
  outline: none;
}
.melding p { margin: 0; }

/* --------------------------------------------------------------------------
   10. Slotsectie
   -------------------------------------------------------------------------- */

.slot { text-align: left; }
.slot h2 { max-width: 18ch; }
.slot .leidend { margin-bottom: var(--r-7); }

/* --------------------------------------------------------------------------
   11. Overig
   -------------------------------------------------------------------------- */

/* gefaseerd onthullen, als klasse zodat er geen style-attribuut nodig is
   en de Content Security Policy inline opmaak kan blijven verbieden */
.vertraag-1 { --vertraging: 70ms; }
.vertraag-2 { --vertraging: 140ms; }
.vertraag-3 { --vertraging: 210ms; }

.opschrift {
  display: flex;
  align-items: center;
  gap: var(--r-4);
  margin-bottom: var(--r-6);
  font-size: var(--t-xs);
  font-weight: var(--gewicht-nadruk);
  letter-spacing: 0.04em;
  color: var(--gedempt);
}

/* de ruit uit het logo, tussen het wordmerk en WEBDESIGN. Hier draagt hij elk
   sectielabel, in het volle logobeige. Dat is de enige plek waar #98855E
   onverdund op het vlak staat, en daarmee blijft het een merkteken in plaats
   van decoratie. */
.opschrift::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: var(--brons);
  transform: rotate(45deg);
}
.op-diep .opschrift::before { background: var(--goud); }
.op-diep .opschrift { color: var(--ivoor-stil); }

/* de kop van een binnenpagina: ruimer dan een sectie, maar geen hero */
.paginakop {
  padding-block: clamp(var(--r-7), 7vw, var(--r-9)) clamp(var(--r-6), 5vw, var(--r-8));
  border-bottom: 1px solid var(--lijn);
}
.paginakop h1 { margin-bottom: var(--r-5); }
.paginakop .leidend { margin-bottom: 0; }
.paginakop .feiten { margin-top: var(--r-5); }
@media (min-width: 901px) { .paginakop .feiten { margin-top: var(--r-8); } }

.kruimels { font-size: var(--t-xs); color: var(--gedempt); margin-bottom: var(--r-6); }
.kruimels ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.kruimels li:not(:last-child)::after { content: "/"; margin-left: 0.4rem; color: var(--lijn); }
.kruimels a { color: var(--gedempt); }

.kop-blok { max-width: 24ch; }
.tekst-blok { max-width: var(--meet); }

.feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--r-6); margin: 0; }
.feiten div { border-top: 1px solid var(--lijn); padding-top: var(--r-3); }
.op-diep .feiten div { border-color: var(--lijn-diep); }
.feiten dt { font-size: var(--t-xs); color: var(--gedempt); margin-bottom: 0.25rem; }
.op-diep .feiten dt { color: var(--ivoor-stil); }
.feiten dd { margin: 0; font-size: var(--t-lg); font-weight: var(--gewicht-nadruk); }

.vinkjes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.vinkjes li { position: relative; padding-left: 1.6rem; font-size: var(--t-base); }
.vinkjes li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 4px;
  border-left: 1.5px solid var(--brons);
  border-bottom: 1.5px solid var(--brons);
  transform: rotate(-45deg);
}
.op-diep .vinkjes li::before { border-color: var(--ivoor-stil); }

.leestekst { max-width: 68ch; }
.leestekst h2 { font-size: clamp(1.5rem, 3vw, var(--t-2xl)); margin-top: var(--r-8); }
.leestekst h3 { font-size: var(--t-lg); margin-top: var(--r-6); }
.leestekst ul, .leestekst ol { max-width: var(--meet); padding-left: 1.3rem; }
.leestekst li { margin-bottom: 0.5rem; }
.leestekst table { width: 100%; border-collapse: collapse; margin-bottom: var(--r-5); font-size: var(--t-sm); }
.leestekst th, .leestekst td { text-align: left; padding: 0.7rem 1rem 0.7rem 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.leestekst th { font-weight: var(--gewicht-nadruk); }

/* --------------------------------------------------------------------------
   Fotografie

   De sfeerbeelden komen uit het merkmateriaal van Mizaro zelf: travertijn,
   olijf, groen marmer en het merkteken op een wand. Ze staan nooit alleen
   voor de sier. Elk beeld draagt een blok tekst of sluit een pagina af.

   De ingebakken Engelse koppen uit het bronmateriaal zijn eraf gesneden. Wat
   op de site staat aan tekst staat in HTML, niet in een plaatje, anders is
   het niet te vertalen, niet te selecteren en niet voor te lezen.
   -------------------------------------------------------------------------- */

.beeld {
  position: relative;
  overflow: hidden;
  border-radius: var(--rond-3);
  background: var(--zand-diep);
  box-shadow: var(--schaduw-licht);
}
.beeld img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.beeld--staand  { aspect-ratio: 3 / 4; }
.beeld--vierkant{ aspect-ratio: 1 / 1; }
.beeld--liggend { aspect-ratio: 4 / 3; }
.beeld--breed   { aspect-ratio: 16 / 9; }
/* een lage, brede sfeerstrook onder een blok, om een sectie af te sluiten */
.beeld--strook  { aspect-ratio: 43 / 10; }

/* een dunne band over de volle breedte van het venster, zonder tekst */
.beeldband {
  /* geen 100vw: die rekent de schuifbalk mee en duwt de pagina zijwaarts.
     De band staat als direct kind van main en is daar al volle breedte. */
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1672 / 286;
  max-height: 22rem;
  background: var(--zand-diep);
}
.beeldband img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* een sectie met een foto erachter. De sluier eroverheen is de donkere
   merkkleur, zodat de tekst er altijd los op staat en niet afhangt van hoe
   licht of donker de foto op die plek toevallig is. */
.sectie--beeld { position: relative; isolation: isolate; overflow: hidden; }
.sectie__achtergrond {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.sectie__achtergrond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sectie--beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg,
    color-mix(in srgb, var(--diep) 94%, transparent) 0%,
    color-mix(in srgb, var(--diep) 88%, transparent) 46%,
    color-mix(in srgb, var(--diep) 82%, transparent) 100%);
}

/* beeld en tekst naast elkaar binnen een sectie */
.beeldduo { display: grid; gap: clamp(var(--r-6), 5vw, var(--r-8)); align-items: center; }
@media (min-width: 900px) {
  .beeldduo            { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .beeldduo--smal-beeld{ grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .beeldduo--beeld-rechts > .beeldduo__beeld { order: 2; }
}

.bijschrift-beeld {
  margin: var(--r-3) 0 0;
  font-size: var(--t-xs);
  color: var(--gedempt);
}
.op-diep .bijschrift-beeld { color: var(--ivoor-stil); }

/* losse ruimteklassen. Deze stonden al in de inhoud maar waren nooit
   gedefinieerd, waardoor de contactpagina zijn tussenruimte miste. */
.ruimte-boven        { margin-top: var(--r-5); }
.ruimte-boven--groot { margin-top: var(--r-8); }

/* op een telefoon wordt 1672 op 286 een streepje van 55 pixels hoog. Daar is
   geen foto meer in te herkennen, dus daar krijgt de band een eigen verhouding
   en snijdt object-fit het midden van de plaat eruit. */
@media (max-width: 700px) {
  .beeldband { aspect-ratio: 16 / 9; max-height: 14rem; }
}

/* een band met een eigen verhouding, voor een plaat die breder dan hoog is
   maar niet zo extreem als de dunne bureaustrook */
.beeldband--hoog { aspect-ratio: 1672 / 321; max-height: 22rem; }
@media (max-width: 700px) {
  .beeldband--hoog { aspect-ratio: 3 / 2; max-height: 16rem; }
}

/* --------------------------------------------------------------------------
   Sociale koppelingen

   Drie vierkanten met een dunne rand, zoals de schets. De iconen staan als
   inline SVG in de pagina, niet als extern bestand en niet als lettertype:
   het Content Security Policy laat geen extern icoon toe, en een pictogram-
   lettertype leest een schermlezer voor als een willekeurige letter.

   48 bij 48 pixels, dus ruim boven de 44 die een duim nodig heeft.
   -------------------------------------------------------------------------- */

.sociaal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sociaal a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-2);
  color: var(--gedempt);
  text-decoration: none;
  transition: border-color var(--soepel), color var(--soepel), background var(--soepel);
}
.sociaal svg { width: 20px; height: 20px; display: block; }
.sociaal a:hover {
  border-color: var(--brons);
  color: var(--brons);
  background: var(--linnen);
}
.op-diep .sociaal a { border-color: var(--lijn-diep); color: var(--ivoor-stil); }
.op-diep .sociaal a:hover { border-color: var(--ivoor); color: var(--ivoor); background: transparent; }

/* de melding bij het kopieren van het e-mailadres. Geen inline stijl, want
   het Content Security Policy staat dat niet toe. */
.kopieermelding {
  position: fixed;
  left: 50%;
  bottom: var(--r-5);
  transform: translateX(-50%);
  z-index: 200;
  margin: 0;
  max-width: min(34rem, calc(100% - 2rem));
  padding: 0.75rem 1.15rem;
  background: var(--diep);
  color: var(--ivoor);
  border-radius: var(--rond-2);
  font-size: var(--t-sm);
  line-height: 1.45;
  box-shadow: var(--schaduw-scherm);
}
.kopieerveld {
  position: fixed;
  left: -9999px;
  top: 0;
  opacity: 0;
}



/* ==========================================================================
   DE VISUALISATIE

   Alles hieronder komt uit de acht platen in "Definitieve fotos". De kleuren
   zijn niet geschat maar met een pipet uit die platen gehaald, de opbouw is
   per sectie nagebouwd.

   Drie regels die overal gelden:
     1. de kop staat in de schreefletter, gewicht 400, en eindigt op een punt
     2. boven elke kop staat een klein gespatieerd opschrift, zonder teken
     3. een donker vlak is altijd de olijfband, nooit een tweede kleur
   ========================================================================== */

/* --------------------------------------------------------------------------
   Opschrift
   Geen ruitje meer ervoor. In de visualisatie staat er niets voor de letters,
   en dat is rustiger.
   -------------------------------------------------------------------------- */

.opschrift {
  display: block;
  margin: 0 0 var(--r-5);
  padding: 0;
  font-family: var(--letter);
  font-size: var(--t-xs);
  font-weight: var(--gewicht-nadruk);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gedempt);
}
.opschrift::before { content: none; }
.op-diep .opschrift { color: var(--ivoor-stil); }

/* --------------------------------------------------------------------------
   Kopbalk
   -------------------------------------------------------------------------- */

.kopbalk { background: var(--zand); border-bottom: 1px solid transparent; }
.kopbalk--gescrold { background: var(--zand); border-bottom-color: var(--lijn); }
.kopbalk__binnen { min-height: 86px; }
.merk img { width: 200px; }
.kopbalk__actie { min-height: 48px; font-size: var(--t-sm); }
.hoofdmenu__lijst a { font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   Hero
   Links een vlak met de tekst, rechts de foto tot aan de rand van het venster.

   De foto is vooraf op 706 bij 941 gesneden, precies de verhouding van het
   vak waar hij in valt. Daardoor snijdt de browser er niets meer af en blijft
   hij scherp: hij wordt nergens groter getoond dan hij is.
   -------------------------------------------------------------------------- */

.hero-groot {
  display: grid;
  background: var(--zand);
  padding: 0;
}

@media (min-width: 1000px) {
  .hero-groot {
    grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
    min-height: min(90vh, 900px);
  }
}

.hero-groot__paneel {
  display: flex;
  align-items: center;
  padding: clamp(var(--r-8), 6vw, 5.5rem) var(--marge) clamp(var(--r-8), 6vw, 5.5rem) var(--rand);
}
.hero-groot__inhoud { width: 100%; max-width: 34rem; }

.hero-groot h1 { margin-bottom: var(--r-5); max-width: 15ch; }
.hero-groot .leidend {
  color: var(--inkt);
  max-width: 40ch;
  font-size: var(--t-lg);
  margin-bottom: var(--r-7);
}

/* de foto */
.hero-groot__beeld { position: relative; background: var(--zand-diep); overflow: hidden; }
.hero-groot__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

/* De regel over de foto. Onder de tekst ligt een sluier die naar beneden toe
   donkerder wordt, zodat het contrast vastligt en niet afhangt van wat er
   toevallig in de foto gebeurt. */
.hero-groot__zin {
  position: absolute;
  left: var(--r-6);
  right: var(--r-6);
  bottom: var(--r-6);
  margin: 0;
  max-width: 16ch;
  font-size: var(--t-xs);
  font-weight: var(--gewicht-nadruk);
  line-height: 2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivoor);
}
.hero-groot__sluier {
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(20, 18, 11, 0.74), rgba(20, 18, 11, 0));
  pointer-events: none;
}

/* de rij trefwoorden onder de knoppen */
.sleutels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-3) clamp(var(--r-4), 2.5vw, var(--r-6));
  margin: var(--r-8) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-xs);
  font-weight: var(--gewicht-nadruk);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gedempt);
}
.op-diep .sleutels { color: var(--ivoor-stil); }

@media (max-width: 999px) {
  /* de foto eerst, anders duwt het tekstvlak hem onder de vouw */
  .hero-groot__beeld { order: -1; aspect-ratio: 4 / 3; }
  /* iets lager uitsnijden, zodat de onderste boekrug er nog helemaal op staat */
  .hero-groot__beeld img { object-position: 50% 62%; }
  .hero-groot__paneel { padding: clamp(var(--r-7), 8vw, var(--r-9)) var(--marge); }
  .hero-groot h1 { max-width: none; }
  .sleutels { margin-top: var(--r-7); }
}

/* --------------------------------------------------------------------------
   Sectiekop
   Kop links, toelichting rechts. In de visualisatie staat die toelichting
   nooit onder de kop maar ernaast; dat houdt de kop kort en breed.
   -------------------------------------------------------------------------- */

.sectiekop { margin-bottom: clamp(var(--r-7), 5vw, var(--r-8)); }
.sectiekop h2 { margin-bottom: 0; max-width: 16ch; }
.sectiekop p { color: var(--gedempt); max-width: 46ch; margin: 0; }

@media (min-width: 900px) {
  .sectiekop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--goot);
    align-items: start;
  }
  /* De toelichting begint op de hoogte van de eerste regel van de kop, niet op
     de hoogte van het opschrift erboven. Anders hangt hij los. */
  .sectiekop__tekst { padding-top: 2.6rem; }
}
@media (max-width: 899px) {
  .sectiekop__tekst { margin-top: var(--r-5); }
}

/* --------------------------------------------------------------------------
   Kaarten
   Een foto aan de zijkant, een rond icoon, een kop in de schreefletter en een
   verwijzing onderaan. De kaart ligt een tint lichter dan zijn sectie.
   -------------------------------------------------------------------------- */

.kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: var(--goot);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kaart {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  background: var(--kaart);
  border: 1px solid var(--lijn-zacht);
  overflow: hidden;
  transition: border-color var(--soepel);
}
.kaart:hover { border-color: var(--lijn); }

.kaart__beeld { background: var(--zand-diep); }
.kaart__beeld img { width: 100%; height: 100%; object-fit: cover; }

.kaart__lijf {
  display: flex;
  flex-direction: column;
  gap: var(--r-3);
  padding: var(--r-5);
}
.kaart__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--r-4); }
.kaart__lijf h3 { margin: 0; }
.kaart__lijf p { font-size: var(--t-sm); color: var(--gedempt); margin: 0; max-width: 34ch; }

.kaart__meer {
  margin-top: auto;
  padding-top: var(--r-4);
  display: inline-flex;
  align-items: center;
  gap: var(--r-2);
  font-size: var(--t-sm);
  font-weight: var(--gewicht-nadruk);
  color: var(--inkt);
  text-decoration: none;
}
.kaart__meer::after {
  content: "";
  width: 15px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(0 45%, 70% 45%, 70% 0, 100% 50%, 70% 100%, 70% 55%, 0 55%);
  transition: transform var(--soepel);
}
.kaart:hover .kaart__meer { color: var(--brons); }
.kaart:hover .kaart__meer::after { transform: translateX(3px); }

@media (max-width: 559px) {
  .kaart { grid-template-columns: 1fr; }
  .kaart__beeld { aspect-ratio: 16 / 9; }
}

/* --------------------------------------------------------------------------
   Rond icoon
   Overal even groot, altijd dezelfde lijndikte. De tekening zelf staat als
   svg in de pagina, want een extern icoonbestand laat het beveiligingsbeleid
   van deze site niet toe.
   -------------------------------------------------------------------------- */

.icoonrond {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--lijn);
  color: var(--brons);
}
.icoonrond svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.icoonrond--vol { background: var(--diep); border-color: var(--diep); color: var(--ivoor); }
.op-diep .icoonrond { border-color: var(--lijn-diep); color: var(--goud-licht); }

/* --------------------------------------------------------------------------
   De olijfband
   Van rand tot rand, tekst links, foto rechts. Maximaal een per pagina.
   -------------------------------------------------------------------------- */

.band {
  display: grid;
  background: var(--diep);
  color: var(--ivoor);
}
@media (min-width: 1000px) {
  .band { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
  .band--half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.band__tekst {
  display: flex;
  align-items: center;
  padding: clamp(var(--r-8), 7vw, var(--r-9)) var(--marge) clamp(var(--r-8), 7vw, var(--r-9)) var(--rand);
}
.band__inhoud { width: 100%; max-width: 38rem; }
.band__inhoud h2 { max-width: 16ch; }
.band__inhoud .leidend { max-width: 44ch; margin-bottom: var(--r-7); }

.band__beeld { background: var(--brons-licht); overflow: hidden; }
.band__beeld img { width: 100%; height: 100%; object-fit: cover; }

/* De lichte spiegelvariant: foto links tot de rand, tekst rechts. Dezelfde
   opbouw als de olijfband hierboven, zodat de twee blokken op de homepagina
   elkaars spiegelbeeld zijn en er geen los zwevend fotokaartje meer staat. */
.band--licht { background: var(--linnen); color: var(--inkt); }
.band--licht .opschrift { color: var(--brons-licht); }

@media (min-width: 1000px) {
  .band--beeld-links { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); }
  .band--beeld-links > .band__tekst {
    padding-left: clamp(var(--r-7), 5vw, var(--r-9));
    padding-right: var(--rand);
  }
  .band--beeld-links > .band__beeld { min-height: 32rem; }
}
.band--beeld-links .band__inhoud { max-width: 44rem; }
.band--beeld-links .band__inhoud h2 { max-width: 18ch; }

@media (max-width: 999px) {
  .band__beeld { aspect-ratio: 3 / 2; }
  .band__tekst { padding: clamp(var(--r-8), 9vw, var(--r-9)) var(--marge); }
}

/* de lijst met icoon, kop en onderschrift, in de band of op licht */
.merklijst {
  display: grid;
  gap: var(--r-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.merklijst--duo { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--r-6) var(--goot); }
.merklijst li { display: flex; gap: var(--r-4); align-items: flex-start; }
.merklijst h3 { font-size: var(--t-base); font-family: var(--letter); font-weight: var(--gewicht-nadruk); margin: 0 0 0.15rem; }
.merklijst p { font-size: var(--t-sm); color: var(--gedempt); margin: 0; max-width: 32ch; }
.op-diep .merklijst p { color: var(--ivoor-stil); }

/* --------------------------------------------------------------------------
   Stappen naast elkaar
   Alleen op de werkwijze, want daar betekenen de nummers iets: het is een
   volgorde. Nergens anders staat een nummer voor de sier.
   -------------------------------------------------------------------------- */

.stappenrij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--r-7) var(--goot);
  margin: 0;
  padding: 0;
  list-style: none;
}
.stappenrij > li { display: flex; flex-direction: column; gap: var(--r-3); }
.stappenrij__streep {
  position: relative;
  border-top: 1px solid var(--lijn);
  padding-top: var(--r-5);
}
/* het ruitje uit het logo zit op de lijn, in plaats van een groot nummer */
.stappenrij__streep::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--goud);
  transform: rotate(45deg);
}
.stappenrij h3 { font-size: var(--t-lg); margin: 0; }
.stappenrij p { font-size: var(--t-sm); color: var(--gedempt); margin: 0; }

/* --------------------------------------------------------------------------
   Pakketten
   -------------------------------------------------------------------------- */

.pakketten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--goot);
  margin: 0;
  padding: 0;
  list-style: none;
  /* De drie pakketten moeten even hoog zijn, anders eindigen de knoppen op
     drie verschillende lijnen en oogt de tabel scheef. */
  align-items: stretch;
}

.pakket {
  display: flex;
  flex-direction: column;
  background: var(--kaart);
  border: 1px solid var(--lijn-zacht);
}
.pakket__lint {
  margin: 0;
  padding: 0.6rem;
  text-align: center;
  background: var(--diep);
  color: var(--ivoor);
  font-size: var(--t-xs);
  font-weight: var(--gewicht-nadruk);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.pakket--uitgelicht {
  border-color: var(--diep);
  box-shadow: 0 18px 44px -28px rgba(36, 31, 20, 0.45);
}

.pakket__lijf { display: flex; flex-direction: column; gap: var(--r-4); padding: var(--r-6); flex: 1 1 auto; }
.pakket__lijf h3 { margin: 0; }
.pakket__zin { font-size: var(--t-sm); color: var(--gedempt); margin: 0; }
.pakket__prijs {
  font-family: var(--letter-kop);
  font-size: clamp(2.25rem, 3.6vw, 3rem);
  line-height: 1;
  margin: 0;
}
.pakket .vinkjes { margin-bottom: var(--r-5); }
.pakket .vinkjes li { font-size: var(--t-sm); }
.pakket .knop { margin-top: auto; width: 100%; }

/* de regel onder de pakketten over maatwerk */
.maatwerkregel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--r-4) var(--r-6);
  margin-top: var(--goot);
  padding: var(--r-5) var(--r-6);
  background: var(--kaart);
  border: 1px solid var(--lijn-zacht);
}
.maatwerkregel__tekst { flex: 1 1 22rem; }
.maatwerkregel h3 { font-size: var(--t-base); font-family: var(--letter); font-weight: var(--gewicht-nadruk); margin: 0 0 0.15rem; }
.maatwerkregel p { font-size: var(--t-sm); color: var(--gedempt); margin: 0; max-width: 60ch; }

/* --------------------------------------------------------------------------
   Contactgegevens
   -------------------------------------------------------------------------- */

.gegevens { display: grid; gap: var(--r-5); margin: 0; padding: 0; list-style: none; }
.gegevens li { display: flex; gap: var(--r-4); align-items: center; }
.gegevens__label { display: block; font-size: var(--t-xs); color: var(--gedempt); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.1rem; }
.gegevens__waarde { font-size: var(--t-lg); color: var(--inkt); text-decoration: none; }
.gegevens__waarde:hover { color: var(--brons); text-decoration: underline; text-underline-offset: 3px; }
.gegevens__onder { display: block; font-size: var(--t-sm); color: var(--gedempt); }

/* de korte beloftes boven de gegevens */
.beloftes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-4) var(--r-6);
  margin: 0 0 var(--r-7);
  padding: 0;
  list-style: none;
}
.beloftes li { display: flex; align-items: center; gap: var(--r-3); font-size: var(--t-sm); max-width: 14rem; }
.beloftes .icoonrond { width: 38px; height: 38px; }
.beloftes .icoonrond svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   Citaat
   -------------------------------------------------------------------------- */

.citaat {
  margin: 0;
  font-family: var(--letter-kop);
  font-size: clamp(1.5rem, 3vw, var(--t-4xl));
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 20ch;
}
.citaat p { max-width: none; margin: 0; }

/* --------------------------------------------------------------------------
   Voet
   -------------------------------------------------------------------------- */

.voet { background: var(--zand-diep); border-top: 1px solid var(--lijn); }
.voet__kolom h2 {
  font-family: var(--letter);
  font-size: var(--t-xs);
  font-weight: var(--gewicht-nadruk);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gedempt);
}
.voet__slagzin {
  font-size: var(--t-xs);
  font-weight: var(--gewicht-nadruk);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gedempt);
  margin: 0;
}

/* de lichtste sectiegrond, voor afwisseling tussen twee secties op zand */
.op-linnen { background: var(--linnen); }

/* --------------------------------------------------------------------------
   Icoonraster
   De compacte opsomming van diensten op de startpagina: alleen een rond icoon
   en een woord. Twee regels tekst passen er niet in en horen er ook niet in.
   -------------------------------------------------------------------------- */

/* De tien diensten stonden los in het vlak te zweven. Met een fijn lijnenraster
   eromheen worden het vakjes van een specificatie in plaats van losse iconen,
   en dat leest als afgewerkt in plaats van als plaatjes op een pagina. */
.icoonraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lijn-zacht);
  border-left: 1px solid var(--lijn-zacht);
}
.icoonraster li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--r-3);
  padding: clamp(var(--r-5), 2.6vw, var(--r-7)) var(--r-4);
  border-right: 1px solid var(--lijn-zacht);
  border-bottom: 1px solid var(--lijn-zacht);
  text-align: center;
  font-size: var(--t-sm);
  line-height: 1.35;
  transition: background var(--soepel);
}
.icoonraster li:hover { background: rgba(216, 208, 191, 0.16); }
.op-diep .icoonraster,
.op-diep .icoonraster li { border-color: var(--lijn-diep); }

/* In de visualisatie staat om deze iconen geen rondje. Ze zijn groter en
   donkerder dan de iconen in een kaart, en dragen daar hun eigen gewicht. */
.icoonraster .icoonrond {
  width: auto;
  height: 30px;
  border: 0;
  color: var(--inkt);
}
.icoonraster .icoonrond svg { width: 27px; height: 27px; stroke-width: 1.15; }

/* Acht vakjes: twee kolommen op een telefoon (vier rijen van twee), vier
   kolommen vanaf tabletbreedte (twee rijen van vier). Zo blijft het vlak
   op elk scherm symmetrisch, zonder losse vakjes onderaan. */
.icoonraster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
@media (min-width: 720px) {
  .icoonraster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Beeldstrook
   Vijf platen op een rij, even hoog, zonder bijschrift. Puur ritme.
   -------------------------------------------------------------------------- */

.beeldstrook {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--r-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.beeldstrook li { aspect-ratio: 4 / 3; overflow: hidden; background: var(--zand-diep); }
.beeldstrook img { width: 100%; height: 100%; object-fit: cover; }

/* Het lint steekt boven de kaart uit in plaats van erin te zitten. Anders
   begint het uitgelichte pakket een lintlengte lager dan de andere twee en
   staan de prijzen niet meer op een lijn. */
.pakketten { padding-top: 2.4rem; }
.pakket { position: relative; }
.pakket__lint {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: 100%;
  border-radius: 0;
}

/* Het icoon staat rechtsboven en de kop eronder over de volle breedte. Stond
   het icoon naast de kop, dan brak "Website laten maken" in drie regels. */
.kaart__kop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--r-3);
  align-items: start;
}
.kaart__kop .icoonrond { grid-column: 2; grid-row: 1; }
.kaart__kop h3 { grid-column: 1 / -1; grid-row: 2; font-size: var(--t-xl); }
.kaart { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); }
.kaart__meer { white-space: nowrap; }

/* ==========================================================================
   Correcties na de tweede ronde feedback
   ========================================================================== */

/* WAAROM DE FOTO'S WAZIG WAREN
   De fotokolom groeide mee met het venster. Op een breed scherm werd de kolom
   breder dan het bestand zelf en rekte de browser de foto op. Daarom krijgt de
   kolom nu een vaste bovengrens die onder de breedte van het bestand blijft;
   de tekstkolom slokt de extra ruimte op. De foto loopt nog steeds tot aan de
   rand van het venster, maar wordt nooit groter getoond dan hij is. */
@media (min-width: 1000px) {
  .hero-groot { grid-template-columns: minmax(0, 1fr) minmax(0, 660px); }
  .band       { grid-template-columns: minmax(0, 1fr) minmax(0, 700px); }
  .band--half { grid-template-columns: minmax(0, 1fr) minmax(0, 760px); }
}

/* De tekstregels die ik over de foto's had gelegd zijn eruit. Websitetekst
   hoort in de pagina te staan, niet in een plaatje. */
.hero-groot__zin,
.hero-groot__sluier { display: none; }

/* De strook stond scheef doordat elke plaat een andere verhouding had en door
   het vak werd bijgesneden. Alle platen zijn nu vooraf op 4 bij 5 gesneden en
   het vak heeft diezelfde verhouding, dus er wordt niets meer afgehaald. */
.beeldstrook { gap: var(--r-3); }
.beeldstrook li { aspect-ratio: 4 / 5; }

/* een foto die in zijn geheel te zien moet zijn, zonder uitsnede */
.beeld--heel { aspect-ratio: auto; }
.beeld--heel img { position: static; width: 100%; height: auto; object-fit: fill; }

/* De strook stond tegen de laatste stap aan: .beeldstrook zet zelf margin op 0
   en dat won van de ruimteklasse, omdat het later in dit bestand staat. */
.beeldstrook.ruimte-boven--groot { margin-top: clamp(var(--r-7), 6vw, var(--r-9)); }

/* Vijf stappen horen op een rij te passen. Met 13rem als ondergrens vielen ze
   uiteen in vier plus een. */
.stappenrij { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }

/* De bandfoto is staand en 941 hoog. Wordt het vak hoger dan dat, dan rekt de
   browser hem op en zie je halve letters van de wand. Met deze bovengrens
   blijft de foto altijd kleiner dan het bestand zelf. */
@media (min-width: 1000px) {
  .band       { grid-template-columns: minmax(0, 1fr) minmax(0, 580px); }
  .band--half { grid-template-columns: minmax(0, 1fr) minmax(0, 580px); }
}

/* ==========================================================================
   Derde ronde: scherpte op schermen met dubbele pixels

   WAT IK EERDER FOUT DEED
   Ik heb gemeten in CSS-pixels en de schermdichtheid vergeten. Een foto die
   580 punten breed staat op een scherm met dubbele pixels heeft 1160 echte
   beeldpunten nodig. Alle bestanden waren op de helft daarvan gemaakt, dus
   vergrootte het scherm ze alsnog. Alle beelden zijn nu op het dubbele van
   hun weergavemaat gesneden.
   ========================================================================== */

/* De hero is lager. Het bronbeeld is 941 hoog; hoe hoger het vak, hoe verder
   de foto opgerekt moet worden om het te vullen. */
@media (min-width: 1000px) {
  .hero-groot { min-height: min(78vh, 760px); }
}

/* De kaartfoto staat boven de kaart in plaats van als smalle strook ernaast.
   Een reep van 150 breed uit een breed tafereel is nooit leesbaar, hoe scherp
   het bestand ook is. Boven de kaart is hij 370 breed en zie je wat het is. */
.kaart { grid-template-columns: minmax(0, 1fr); }
.kaart__beeld { aspect-ratio: 16 / 9; }
.kaart__beeld img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 559px) { .kaart__beeld { aspect-ratio: 16 / 9; } }

/* De strook: drie grote platen in plaats van vijf kleine. Zo is te zien wat
   erop staat. */
.beeldstrook { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.beeldstrook li { aspect-ratio: 4 / 3; }

/* De herofoto is 1200 beeldpunten breed. Bij 600 punten weergave is dat
   precies het dubbele, dus ook op een scherm met dubbele pixels hoeft er
   niets vergroot te worden. */
@media (min-width: 1000px) {
  .hero-groot { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); }
}

/* --------------------------------------------------------------------------
   Afwerking
   Een foto die heel licht meebeweegt als je hem aanwijst. Traag en klein:
   4 procent over zes tienden van een seconde. Genoeg om te merken dat het
   ding leeft, te weinig om af te leiden.
   -------------------------------------------------------------------------- */

.kaart__beeld,
.beeldstrook li,
.beeld { overflow: hidden; }

.kaart__beeld img,
.beeldstrook img {
  transition: transform 620ms cubic-bezier(0.2, 0.6, 0.3, 1);
}
.kaart:hover .kaart__beeld img,
.beeldstrook li:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .kaart__beeld img,
  .beeldstrook img { transition: none; }
  .kaart:hover .kaart__beeld img,
  .beeldstrook li:hover img { transform: none; }
}

/* ==========================================================================
   Vierde ronde
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brede hero, voor de startpagina
   De foto staat onder de tekst, over de volle breedte van de inhoud, en wordt
   nergens bijgesneden: je ziet de hele plaat. Het bestand is 2240 breed en
   verschijnt op ongeveer 1150 punten, dus ook op een scherm met dubbele pixels
   is er niets te vergroten.
   -------------------------------------------------------------------------- */

.hero-breed {
  background: var(--zand);
  padding-block: clamp(var(--r-8), 7vw, var(--r-10)) 0;
}
.hero-breed__kop { padding-bottom: clamp(var(--r-7), 5vw, var(--r-8)); }
.hero-breed h1 { max-width: 20ch; margin-bottom: var(--r-6); }
.hero-breed .leidend { color: var(--inkt); font-size: var(--t-lg); max-width: 46ch; margin: 0; }

.hero-breed__onder { display: grid; gap: var(--r-6); }
@media (min-width: 900px) {
  .hero-breed__onder {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--goot);
  }
  .hero-breed__onder .acties { justify-content: flex-end; }
}
.hero-breed .sleutels { margin-top: clamp(var(--r-6), 4vw, var(--r-7)); }

.hero-breed__beeld { margin: 0; background: var(--zand-diep); }
.hero-breed__beeld img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   De btw-regel onder een pakketprijs
   -------------------------------------------------------------------------- */

.pakket__btw {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--gedempt);
}

/* --------------------------------------------------------------------------
   Het gesprek
   Nagebouwd in tekst en vlakken, niet als plaatje. Daardoor is hij op elk
   scherm scherp, leest een schermlezer hem gewoon voor, en kost hij niets
   aan laadtijd. Het is een voorbeeld, geen echt gesprek met een klant.
   -------------------------------------------------------------------------- */

.gesprek { margin: 0; }
.gesprek__venster {
  background: var(--diep);
  color: var(--ivoor);
  padding: var(--r-5);
  border-radius: var(--rond-3);
}
.gesprek__kop {
  display: flex;
  align-items: center;
  gap: var(--r-3);
  padding-bottom: var(--r-4);
  border-bottom: 1px solid var(--lijn-diep);
}
.gesprek__merk {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--goud);
  color: var(--diep);
  font-family: var(--letter-kop);
  font-size: var(--t-lg);
  line-height: 1;
}
.gesprek__naam { margin: 0; font-size: var(--t-sm); font-weight: var(--gewicht-nadruk); max-width: none; }
.gesprek__staat { margin: 0; font-size: var(--t-xs); color: var(--goud-licht); max-width: none; }

.gesprek__regels {
  list-style: none;
  margin: var(--r-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--r-3);
}
.gesprek__regel {
  max-width: 84%;
  padding: 0.7rem 0.9rem 0.5rem;
  border-radius: 14px;
  background: var(--brons-diep);
  border-top-left-radius: 4px;
}
.gesprek__regel p { margin: 0; font-size: var(--t-sm); line-height: 1.45; max-width: none; }
.gesprek__regel--u {
  margin-left: auto;
  background: var(--brons-mid);
  border-top-left-radius: 14px;
  border-top-right-radius: 4px;
}
.gesprek__tijd {
  display: block;
  margin-top: 0.3rem;
  text-align: right;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  color: var(--ivoor-stil);
}
.gesprek__knop { margin-top: var(--r-5); width: 100%; }
.gesprek__bijschrift {
  margin: var(--r-3) 0 0;
  font-size: var(--t-xs);
  color: var(--gedempt);
}

/* --------------------------------------------------------------------------
   Kop zonder foto
   Niet elke pagina heeft een grote foto nodig. Op diensten, prijzen, over ons
   en contact staat direct onder de kop al beeld: de kaarten, de pakketten, de
   olijfband, het gesprek. Nog een grote plaat erboven zou dezelfde kamer voor
   de derde keer laten zien. Een rustige kop op zand is daar sterker, en het
   scheelt een uitsnede die toch nooit helemaal klopt.
   -------------------------------------------------------------------------- */

.hero-breed--kaal {
  padding-bottom: clamp(var(--r-8), 7vw, var(--r-9));
  border-bottom: 1px solid var(--lijn);
}
.hero-breed--kaal .hero-breed__kop { padding-bottom: 0; }

/* --------------------------------------------------------------------------
   Het gesprek op de contactpagina
   De foto uit de map, liggend, met de uitnodiging ernaast.
   -------------------------------------------------------------------------- */

.gesprekblok { display: grid; gap: clamp(var(--r-6), 4vw, var(--r-8)); align-items: center; }
@media (min-width: 900px) {
  .gesprekblok { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.gesprekblok__beeld { margin: 0; background: var(--zand-diep); overflow: hidden; }
.gesprekblok__beeld img { display: block; width: 100%; height: auto; }
.gesprekblok h2 { max-width: 14ch; }
.gesprekblok p { color: var(--gedempt); max-width: 38ch; }

/* ==========================================================================
   Het gesprek als telefoon

   WAAROM DIT GEEN FOTO IS
   De tegel met de telefoon in de collage is 495 beeldpunten breed. Op een
   scherm met dubbele pixels heeft dit vak er ruim 1200 nodig. Die kunnen er
   niet bij verzonnen worden, dus blijft een foto hier altijd zacht. Daarom is
   het scherm nagebouwd in tekst en vlakken: scherp op elk scherm, leesbaar
   voor een schermlezer, en de tekst is aan te passen zonder nieuw beeld.
   ========================================================================== */

.praat { margin: 0; display: grid; justify-items: center; }

.toestel {
  width: 100%;
  max-width: 21rem;
  padding: 10px;
  border-radius: 40px;
  background: linear-gradient(160deg, #3A3A31, #1D1E18 45%, #33342B);
  box-shadow: 0 30px 60px -28px rgba(20, 18, 11, 0.55),
              0 4px 16px -6px rgba(20, 18, 11, 0.3);
}
.toestel__scherm {
  border-radius: 31px;
  background: #12140F;
  color: #F7F4ED;
  overflow: hidden;
}

.toestel__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.15rem 0.35rem;
  font-size: 0.75rem;
  font-weight: var(--gewicht-nadruk);
  letter-spacing: 0.01em;
}
.toestel__status svg { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; }
.toestel__tekens { display: inline-flex; gap: 0.35rem; align-items: center; color: #ECE9E2; }

.praat__kop {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem 0.7rem;
  border-bottom: 1px solid rgba(236, 233, 226, 0.09);
}
.praat__terug { width: 16px; height: 16px; flex: 0 0 auto; color: #B9B5A8; }
.praat__merk {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--zand);
  overflow: hidden;
}
.praat__merk img { width: 24px; height: auto; }
.praat__wie { flex: 1 1 auto; min-width: 0; }
.praat__naam { margin: 0; font-size: 0.9375rem; font-weight: var(--gewicht-nadruk); max-width: none; line-height: 1.2; color: #FFFFFF; }
.praat__staat { margin: 0; font-size: 0.75rem; color: #F0EBE1; max-width: none; line-height: 1.3; }
.praat__knoppen { display: inline-flex; gap: 0.85rem; color: #B9B5A8; flex: 0 0 auto; }
.praat__knoppen svg { width: 17px; height: 17px; }

.praat__regels {
  list-style: none;
  margin: 0;
  padding: 0.9rem 0.8rem 0.6rem;
  display: grid;
  gap: 0.45rem;
  min-height: 15rem;
}
.praat__regel {
  max-width: 85%;
  padding: 0.5rem 0.65rem 0.35rem;
  border-radius: 12px 12px 12px 4px;
  background: #262A20;
}
.praat__regel p { margin: 0; font-size: 0.875rem; line-height: 1.45; max-width: none; color: #F7F4ED; }
.praat__regel--u {
  margin-left: auto;
  background: #2D4433;
  border-radius: 12px 12px 4px 12px;
}
.praat__tijd {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-top: 0.15rem;
  font-size: 0.6875rem;
  color: #D8D3C6;
}
.praat__tijd svg { width: 15px; height: 11px; color: #6FB6D8; }

.praat__invoer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem 0.9rem;
  color: #9AA08E;
}
.praat__invoer svg { width: 17px; height: 17px; flex: 0 0 auto; }
.praat__veld {
  flex: 1 1 auto;
  height: 34px;
  border-radius: var(--rond-vol);
  background: #262A20;
}

/* de telefoon staat links in het blok, de uitnodiging rechts */
@media (min-width: 900px) {
  .gesprekblok { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--r-7), 5vw, var(--r-9)); }
}

/* ==========================================================================
   DE DONKERE HERO

   Uit het mapje "concept design": een pagina die opent met een donker vlak,
   een grote schreefkop in ivoor, en de foto die daar doorheen schemert. Niet
   in zwart maar in het diepste olijf uit het eigen palet, zodat de luxe uit
   het merk komt en niet uit een kleur die er niet bij hoort.

   De kopbalk zweeft erover: doorzichtig met het lichte logo zolang je boven
   in de pagina bent, en zodra je scrolt wordt hij weer zand met het donkere
   logo. Dat is het verschil tussen een site die opent en een site die begint.
   ========================================================================== */

:root { --kop-hoogte: 86px; }

/* De hero is een tweeluik: links de tekst op de donkerste grond uit het
   palet, rechts een foto die tot de rand doorloopt. De kop staat dus nooit
   meer over ingebakken letters in de foto, want tekst en beeld raken elkaar
   niet. Elke pagina heeft zijn eigen onderwerp en de foto wisselt van kant,
   zodat geen twee pagina's hetzelfde openen. */
.hero-donker {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 46%;
  align-items: stretch;
  min-height: min(86vh, 800px);
  margin-top: calc(-1 * var(--kop-hoogte));
  padding-top: var(--kop-hoogte);
  background: var(--hero);
  color: var(--ivoor);
  overflow: hidden;
  border-bottom: 1px solid rgba(152, 133, 94, 0.30);
}
/* een donkere waas over de bovenrand, over de hele breedte, zodat de kopbalk
   leesbaar blijft aan welke kant de foto ook staat */
.hero-donker::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  /* boven de sluier, anders wordt de waas alleen op de tekstkant gezet en
     ontstaat er een toonverschil op de naad met de foto */
  z-index: 2;
  height: calc(var(--kop-hoogte) + 3.5rem);
  background: linear-gradient(180deg, rgba(20, 18, 11, 0.86) 0%, rgba(20, 18, 11, 0.5) 46%,
                                      rgba(20, 18, 11, 0) 100%);
  pointer-events: none;
}
.hero-donker__beeld {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  /* De foto wordt met de negatieve marge onder de kopbalk door getrokken. Een
     hoogte van 100% laat hem dan precies die hoogte boven de onderrand van de
     hero eindigen, en dat gaf een zichtbare naad met een donkere strook
     eronder. Daarom telt de kophoogte hier weer mee. */
  height: calc(100% + var(--kop-hoogte));
  object-fit: cover;
  object-position: 50% 50%;
  margin-top: calc(-1 * var(--kop-hoogte));
}
/* De sluier laat de foto aan de binnenkant in de donkere grond zakken, zodat
   er geen harde naad staat tussen tekstvlak en beeld. */
.hero-donker__sluier {
  grid-column: 2;
  grid-row: 1;
  z-index: 1;
  margin-top: calc(-1 * var(--kop-hoogte));
  background: linear-gradient(90deg, var(--hero) 0%, var(--hero) 20%,
                                     rgba(var(--hero-rgb), 0.80) 34%, rgba(var(--hero-rgb), 0.45) 50%,
                                     rgba(var(--hero-rgb), 0.16) 66%, rgba(var(--hero-rgb), 0) 82%);
  pointer-events: none;
}

.hero-donker__binnen {
  grid-column: 1;
  grid-row: 1;
  z-index: 3;
  display: grid;
  align-content: center;
  max-width: none;
  margin: 0;
  padding: clamp(var(--r-8), 9vh, var(--r-10)) clamp(var(--r-6), 5vw, var(--r-9))
           clamp(var(--r-8), 9vh, var(--r-10)) var(--rand);
}
.hero-donker__tekst { max-width: 34rem; }
.hero-donker .opschrift { color: var(--goud-licht); margin-bottom: var(--r-6); }
.hero-donker h1 { color: #F7F4ED; max-width: 14ch; margin-bottom: var(--r-6); }
.hero-donker .leidend { color: var(--ivoor-stil); max-width: 42ch; margin-bottom: var(--r-7); }
.hero-donker .knop--vol { background: var(--ivoor); border-color: var(--ivoor); color: var(--hero); }
.hero-donker .knop--vol:hover { background: #FFFFFF; border-color: #FFFFFF; }
.hero-donker .knop--lijn { border-color: rgba(242, 238, 228, 0.42); color: var(--ivoor); }
.hero-donker .knop--lijn:hover { border-color: var(--ivoor); color: var(--ivoor); }
.hero-donker :focus-visible { outline-color: var(--ivoor); }

/* de spiegelvariant: foto links, tekst rechts */
.hero-donker--links { grid-template-columns: 46% 1fr; }
.hero-donker--links .hero-donker__beeld,
.hero-donker--links .hero-donker__sluier { grid-column: 1; }
.hero-donker--links .hero-donker__sluier {
  background: linear-gradient(270deg, var(--hero) 0%, var(--hero) 20%,
                                      rgba(var(--hero-rgb), 0.80) 34%, rgba(var(--hero-rgb), 0.45) 50%,
                                      rgba(var(--hero-rgb), 0.16) 66%, rgba(var(--hero-rgb), 0) 82%);
}
.hero-donker--links .hero-donker__binnen {
  grid-column: 2;
  padding-left: clamp(var(--r-6), 5vw, var(--r-9));
  padding-right: var(--rand);
}

@media (max-width: 1099px) {
  .hero-donker { grid-template-columns: 1fr 42%; }
  .hero-donker--links { grid-template-columns: 42% 1fr; }
  .hero-donker__tekst { max-width: 30rem; }
}

/* Onder de tabletgrens gaat het tweeluik boven elkaar staan: eerst de foto,
   dan de tekst. Ook daar staat er geen letter over een letter. */
@media (max-width: 899px) {
  .hero-donker {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero-donker--links { grid-template-columns: 1fr; }
  .hero-donker__beeld,
  .hero-donker--links .hero-donker__beeld {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 16 / 11;
    height: auto;
  }
  .hero-donker__sluier,
  .hero-donker--links .hero-donker__sluier {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
    background: linear-gradient(180deg, rgba(var(--hero-rgb), 0.28) 0%, rgba(var(--hero-rgb), 0) 40%,
                                        rgba(var(--hero-rgb), 0.72) 82%, var(--hero) 100%);
  }
  .hero-donker__binnen,
  .hero-donker--links .hero-donker__binnen {
    grid-column: 1;
    grid-row: 2;
    padding: var(--r-8) var(--marge) var(--r-9);
  }
  .hero-donker__tekst { max-width: 36rem; }
  .hero-donker h1 { max-width: 18ch; }
}

/* de genummerde kolom rechts, zoals in het concept */
.index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(var(--r-5), 3vw, var(--r-6));
}
.index li {
  display: grid;
  gap: 0.3rem;
  padding-left: var(--r-5);
  border-left: 1px solid rgba(242, 238, 228, 0.24);
}
.index__nr {
  font-family: var(--letter-kop);
  font-size: var(--t-lg);
  line-height: 1;
  color: var(--goud-licht);
}
.index__woord {
  font-size: var(--t-xs);
  font-weight: var(--gewicht-nadruk);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivoor);
}
@media (max-width: 999px) {
  .index { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
}

/* --------------------------------------------------------------------------
   De kopbalk boven een donkere hero
   -------------------------------------------------------------------------- */

.merk { position: relative; display: block; }
.merk img { transition: opacity var(--soepel); }
.merk__licht { position: absolute; inset: 0; opacity: 0; }

body:has(.hero-donker) .kopbalk:not(.kopbalk--gescrold) {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
body:has(.hero-donker) .kopbalk:not(.kopbalk--gescrold) .merk__licht { opacity: 1; }
body:has(.hero-donker) .kopbalk:not(.kopbalk--gescrold) .merk__donker { opacity: 0; }
body:has(.hero-donker) .kopbalk:not(.kopbalk--gescrold) .hoofdmenu__lijst a,
body:has(.hero-donker) .kopbalk:not(.kopbalk--gescrold) .taal a,
body:has(.hero-donker) .kopbalk:not(.kopbalk--gescrold) .taal span,
body:has(.hero-donker) .kopbalk:not(.kopbalk--gescrold) .menuknop { color: var(--ivoor); }
/* zonder streepje moet de huidige pagina op de donkere kopbalk op een andere
   manier opvallen: de rest staat iets gedempt, deze staat vol ivoor */
body:has(.hero-donker) .kopbalk:not(.kopbalk--gescrold) .hoofdmenu__lijst a { color: rgba(242, 238, 228, 0.74); }
body:has(.hero-donker) .kopbalk:not(.kopbalk--gescrold) .hoofdmenu__lijst a:hover,
body:has(.hero-donker) .kopbalk:not(.kopbalk--gescrold) .hoofdmenu__lijst a[aria-current="page"] { color: var(--ivoor); }
body:has(.hero-donker) .kopbalk:not(.kopbalk--gescrold) .hoofdmenu__lijst a::after { background: var(--ivoor); }
body:has(.hero-donker) .kopbalk:not(.kopbalk--gescrold) .menuknop__streepjes span { background: var(--ivoor); }
body:has(.hero-donker) .kopbalk:not(.kopbalk--gescrold) .kopbalk__actie {
  background: transparent;
  border-color: rgba(242, 238, 228, 0.45);
  color: var(--ivoor);
}
body:has(.hero-donker) .kopbalk:not(.kopbalk--gescrold) .kopbalk__actie:hover {
  background: var(--ivoor);
  border-color: var(--ivoor);
  color: var(--gitzwart);
}
/* Op een smal scherm klapt het menu open over een licht vlak, dan moet de
   tekst weer donker zijn. De klasse menu-open staat op het html-element, dus
   die moet voor body staan en niet erna, anders raakt de regel niets. */
@media (max-width: 1024px) {
  html.menu-open body:has(.hero-donker) .kopbalk .hoofdmenu__lijst a,
  html.menu-open body:has(.hero-donker) .kopbalk .taal a,
  html.menu-open body:has(.hero-donker) .kopbalk .taal span { color: var(--inkt); }
  html.menu-open body:has(.hero-donker) .kopbalk .kopbalk__actie {
    border-color: var(--lijn);
    color: var(--inkt);
  }
}

/* De naam en de status in de telefoon stonden op de gedempte kleur van
   .gesprekblok p, die zwaarder woog dan de regel eronder. Met het scherm ervoor
   wint deze wel. */
.toestel__scherm .praat__naam { color: #FFFFFF; }
.toestel__scherm .praat__staat { color: #F0EBE1; }
.toestel__scherm .praat__regel p { color: #F7F4ED; }

/* --------------------------------------------------------------------------
   De smalle kolom naast een lange lijst

   De foto in die kolom houdt zijn eigen verhouding, drie staand op vier. Hij
   wordt dus niet uitgerekt om de lijst ernaast bij te houden. Dat was een
   eerdere poging, maar dan snijdt de browser er links en rechts een reep af
   en lopen de woorden op de boekruggen weg. Zo staat de foto er precies op
   de maat waarop hij gesneden is: het dubbele van de weergave, geen punt
   vergroting en niets afgesneden.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .rooster > .kol-4 { display: flex; flex-direction: column; }
  .rooster > .kol-4 > .beeld { flex: 0 0 auto; max-height: 34rem; }
}


/* ==========================================================================
   PREMIUM AFWERKING - productieversie 2026-09-20
   Pagina's blijven duidelijk familie van elkaar, maar krijgen ieder een eigen
   ritme en compositie. Dit voorkomt het gevoel van één template dat steeds
   opnieuw is ingevuld.
   ========================================================================== */

/* Mobiel menu: uit de focus- en zichtbaarheidslaag zolang het gesloten is. */
@media (max-width: 1024px) {
  .js .hoofdmenu { visibility: hidden; }
  .js.menu-open .hoofdmenu { visibility: visible; }

  /* Zonder JavaScript blijft navigatie bruikbaar in plaats van onzichtbaar. */
  html:not(.js) .menuknop { display: none; }
  html:not(.js) .kopbalk__binnen { flex-wrap: wrap; padding-block: 0.75rem; }
  html:not(.js) .hoofdmenu {
    position: static;
    flex: 1 0 100%;
    width: 100%;
    height: auto;
    padding: 0 0 var(--r-4);
    background: transparent;
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    overflow: visible;
  }
  html:not(.js) .hoofdmenu__lijst a { font-size: var(--t-base); padding: var(--r-3) 0; }
  html:not(.js) .kopbalk__rechts { margin-top: var(--r-4); }
}

.vraag summary:focus-visible {
  outline: 2px solid var(--brons);
  outline-offset: 5px;
  border-radius: 2px;
}

/* DIENSTEN - de zes diensten staan symmetrisch, drie en drie. */
.page-diensten .hero-donker { min-height: min(76vh, 700px); }
@media (min-width: 940px) {
  .page-diensten .hero-donker { grid-template-columns: 40% 1fr; }
  .page-diensten .hero-donker--links { grid-template-columns: 40% 1fr; }
  .page-diensten .kaart__lijf { padding: clamp(var(--r-5), 2.5vw, var(--r-6)); }
  .page-diensten .kaart__lijf p { max-width: 48ch; }
}

/* WERKWIJZE - de zes stappen staan op een rij, met functionele nummering. */
.page-werkwijze .hero-donker { min-height: min(74vh, 690px); }
.page-werkwijze .stappenrij { counter-reset: route; }
.page-werkwijze .stappenrij > li { counter-increment: route; }
.page-werkwijze .stappenrij__streep { padding-top: calc(var(--r-5) + 0.9rem); }
.page-werkwijze .stappenrij__streep::before {
  content: counter(route, decimal-leading-zero);
  top: 0.55rem;
  width: auto;
  height: auto;
  background: none;
  transform: none;
  font-family: var(--letter-kop);
  font-size: var(--t-xs);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--brons);
}
@media (min-width: 900px) {
  .page-werkwijze .stappenrij { gap: var(--r-6) var(--goot); align-items: start; }
}

/* PRIJZEN - compacter openingsbeeld en een duidelijk prijsobject als middelpunt. */
.page-prijzen .hero-donker { min-height: min(66vh, 620px); }
@media (min-width: 900px) {
  .page-prijzen main > .sectie.op-linnen {
    position: relative;
    z-index: 4;
    margin-top: -2.75rem;
    padding-top: calc(clamp(var(--r-8), 7vw, var(--r-10)) + 2.75rem);
  }
  .page-prijzen .pakketten { gap: 0; align-items: stretch; }
  .page-prijzen .pakket { border-right-width: 0; }
  .page-prijzen .pakket:last-child { border-right-width: 1px; }
  .page-prijzen .pakket--uitgelicht {
    position: relative;
    z-index: 2;
    transform: translateY(-0.9rem);
    border-right-width: 1px;
  }
}

/* OVER ONS - editorialer, met het verhaal als hoofdonderwerp. */
.page-over .hero-donker { min-height: min(72vh, 680px); }
@media (min-width: 900px) {
  .page-over main > .sectie:first-of-type .rooster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(var(--r-7), 6vw, var(--r-10));
  }
  .page-over main > .sectie:first-of-type .kol-4 { grid-column: span 1; }
  .page-over main > .sectie:first-of-type .kol-8 { grid-column: span 1; }
  .page-over main > .sectie:first-of-type .kol-4 > .kop-blok { max-width: 15ch; }
}

/* CONTACT - kortere hero, daarna direct de bereikbaarheid en keuze. */
.page-contact .hero-donker { min-height: min(62vh, 590px); }
.page-contact main > .sectie:first-of-type { background: var(--linnen); }
@media (min-width: 900px) {
  .page-contact main > .sectie:first-of-type .rooster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(var(--r-7), 5vw, var(--r-9));
  }
  .page-contact main > .sectie:first-of-type .kol-5,
  .page-contact main > .sectie:first-of-type .kol-7 { grid-column: span 1; }
  .page-contact .gesprekblok { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .page-contact .gesprekblok > figure { order: 2; }
  .page-contact .gesprekblok > div { order: 1; }
}

/* OFFERTE - conversiepagina: hero ondersteunt, formulier is het hoofdobject. */
.page-offerte .hero-donker { min-height: min(58vh, 550px); }
.page-offerte .formulier {
  background: var(--kaart);
  border: 1px solid var(--lijn-zacht);
  box-shadow: 0 28px 60px -46px rgba(36, 31, 20, 0.48);
  padding: clamp(var(--r-5), 4vw, var(--r-7));
}

/* PAGINAKOP - de kolommen rekken niet meer mee met de foto, zodat er onder de
   tekst geen leeg vlak overblijft. */
@media (min-width: 900px) {
  .paginakop .rooster { align-items: start; }
}

/* FAQ - kennisfunctie zonder blog: sneller scanbaar en nadrukkelijker als service. */
.page-faq .paginakop { background: var(--linnen); }
.page-faq .vraag { border-bottom-color: var(--lijn); }
.page-faq .vraag summary { font-size: clamp(var(--t-base), 1.7vw, var(--t-lg)); }

@media (max-width: 899px) {
  .page-prijzen main > .sectie.op-linnen { margin-top: 0; }
  .page-prijzen .pakket--uitgelicht { transform: none; }
}

/* ==========================================================================
   Beeld dat volledig in beeld blijft
   ==========================================================================
   De nieuwe fotoreeks bestaat uit composities. Op elk beeld staat een geheel:
   een uitgewerkte mockup, een bord aan een deur, een vel waar het hele proces
   op uitgetekend staat. Snijd daar een kolom uit en de helft van het verhaal
   valt weg. Daarom voegt het blok zich hier naar de foto in plaats van
   andersom: geen vaste verhouding meer, geen object-fit die bijsnijdt.
   ========================================================================== */

/* --- de hero -------------------------------------------------------------
   De oude hero sneed de foto in een smalle kolom naast de tekst. Dat kan
   niet meer, dus staat de foto nu op zijn eigen verhouding boven de taupe
   band met de kop. De kopbalk blijft hier zijn gewone zandkleur houden: de
   foto begint eronder in plaats van eronderdoor, zodat er geen donkere waas
   over een lichte foto hoeft om het menu leesbaar te houden. */
.hero-vol {
  background: var(--hero);
  color: var(--ivoor);
  border-bottom: 1px solid rgba(152, 133, 94, 0.30);
}
.hero-vol__beeld {
  display: block;
  width: 100%;
  max-width: 1600px;
  height: auto;
  margin-inline: auto;
}
.hero-vol__binnen {
  max-width: var(--breedte);
  margin-inline: auto;
  padding: clamp(var(--r-8), 6vw, var(--r-10)) var(--marge);
}
.hero-vol__tekst { max-width: 46rem; }
.hero-vol .opschrift { color: var(--goud-licht); margin-bottom: var(--r-5); }
.hero-vol h1 { color: #F7F4ED; max-width: 18ch; margin-bottom: var(--r-6); }
.hero-vol .leidend { color: var(--ivoor-stil); max-width: 52ch; margin-bottom: var(--r-7); }
.hero-vol .knop--vol { background: var(--ivoor); border-color: var(--ivoor); color: var(--hero); }
.hero-vol .knop--vol:hover { background: #FFFFFF; border-color: #FFFFFF; }
.hero-vol .knop--lijn { border-color: rgba(242, 238, 228, 0.42); color: var(--ivoor); }
.hero-vol .knop--lijn:hover { border-color: var(--ivoor); color: var(--ivoor); }
.hero-vol :focus-visible { outline-color: var(--ivoor); }

/* --- een los beeldblok ---------------------------------------------------
   Dezelfde gedachte voor de beelden in de lopende pagina. De achtergrond
   gaat eraf: er valt niets meer op te vullen, want de foto vult zijn blok
   precies. */
.beeld--volledig {
  aspect-ratio: auto;
  background: transparent;
  box-shadow: none;
}
.beeld--volledig img {
  height: auto;
  object-fit: contain;
}

/* --- de brede band -------------------------------------------------------
   De band zette de foto in een kolom naast de tekst, even hoog als het
   tekstvlak. Ook daar werd er bijgesneden. In de volledige variant staat de
   foto boven de volle breedte en de tekst eronder, in dezelfde taupe. */
.band--volledig {
  display: block;
}
.band--volledig > .band__beeld {
  background: transparent;
  aspect-ratio: auto;
  max-width: 1600px;
  margin-inline: auto;
}
.band--volledig > .band__beeld img { height: auto; object-fit: contain; }
.band--volledig > .band__tekst {
  max-width: var(--breedte);
  margin-inline: auto;
  padding: clamp(var(--r-8), 6vw, var(--r-10)) var(--marge);
}
.band--volledig .band__inhoud { max-width: 46rem; }

/* --- maatvoering van de volledige beelden --------------------------------
   Niet elke foto hoeft de volle breedte te vullen. Een staand beeld of een
   rustige compositie overvalt de lezer op die maat. Kleiner, met lucht
   eromheen en een zachte schaduw, leest hij als een plaat op de taupe in
   plaats van als een banner. De verhouding blijft die van de foto zelf, dus
   er wordt nog steeds niets afgesneden. */
.hero-vol__beeld--midden,
.hero-vol__beeld--klein,
.beeld--midden,
.beeld--klein {
  margin-block: clamp(var(--r-7), 4vw, var(--r-9));
  margin-inline: auto;
  border-radius: var(--rond-3);
  box-shadow: var(--schaduw-scherm);
}
.hero-vol__beeld--midden, .beeld--midden { max-width: min(100%, 1000px); }
.hero-vol__beeld--klein,  .beeld--klein  { max-width: min(100%, 640px); }

/* De hero waar de tekst voorgaat: dan hoort de foto niet strak tegen de
   onderrand van de band te zitten. */
/* Staat de tekst voorop, dan sluit de foto de hero af. Geen marge eronder:
   een strook taupe onder de foto leest als een vergeten rand. En boven de
   foto maar een halve centimeter lucht, net genoeg om de knoppen te laten
   ademen zonder dat er een gat valt. */
.hero-vol__binnen + .hero-vol__beeld { margin-bottom: 0; display: block; }
/* De tekst mag hoger beginnen als hij voorop staat. */
.hero-vol__binnen:first-child { padding-top: clamp(var(--r-6), 3vw, var(--r-8)); }
/* De halve centimeter lucht geldt alleen als er werkelijk een foto onder
   komt. Staat er geen foto, dan houdt het blok zijn gewone voetmarge en
   komen de knoppen niet tegen de onderrand van het kleurvlak. */
.hero-vol__binnen:has(+ .hero-vol__beeld) { padding-bottom: 1.1rem; }

/* De kop in de hero stond een maat te groot: op een breed scherm liep hij tot
   tweeenzeventig punten en dat werd meer een poster dan een kop. Een slag
   terug leest rustiger en laat de foto eronder het werk doen. */
.hero-vol h1 { font-size: clamp(1.95rem, 3.9vw, 3.15rem); letter-spacing: -0.02em; }
.hero-vol .leidend { font-size: clamp(1rem, 1.25vw, 1.1875rem); }

/* Een staand beeld in de band hoeft de volle breedte niet. Klein, met lucht
   eromheen en tegen de rechterkantlijn, leest het als een plaat naast de
   tekst in plaats van als een muur. */
.band--volledig > .band__beeld--klein {
  max-width: min(100%, 560px);
  margin-block: clamp(var(--r-7), 4vw, var(--r-9));
  margin-inline: auto;
  border-radius: var(--rond-3);
  box-shadow: var(--schaduw-scherm);
  overflow: hidden;
}
@media (min-width: 1000px) {
  .band--volledig > .band__beeld--rechts { margin-left: auto; margin-right: var(--rand); }
}

/* Een herofoto hoeft niet altijd de volle breedte. Kleiner en tegen de
   rechterkantlijn geeft het blok lucht aan de linkerkant, waar de kop staat,
   en haalt de nadruk van de foto af. */
.hero-vol__beeld--rechts { margin-left: auto; margin-right: var(--rand); }
@media (max-width: 899px) {
  .hero-vol__beeld--rechts { margin-inline: auto; }
}

/* De slotfoto op de prijzenpagina staat alleen in zijn sectie. Op die plek
   werkt klein beter dan groot: het is een sluitstuk, geen hoofdbeeld. De
   sectie eromheen wordt navenant krapper, anders zweeft hij in het wit. */
.sectie--slot { padding-block: clamp(var(--r-7), 5vw, var(--r-9)); }
.beeld--slot {
  max-width: min(100%, 320px);
  margin-inline: auto;
  border-radius: var(--rond-3);
  box-shadow: var(--schaduw-scherm);
  overflow: hidden;
}

/* Een staand beeld in een band werd tot zestienhonderd punten breed
   uitgerekt, en dat is bij een foto van elfhonderd breed niet alleen een
   muur van tweeduizend vierhonderd hoog maar ook nog eens onscherp. Deze
   maat houdt hem binnen zijn eigen formaat. */
.band--volledig > .band__beeld--smal {
  max-width: min(100%, 480px);
  margin-block: clamp(var(--r-7), 4vw, var(--r-9));
  margin-inline: auto;
  border-radius: var(--rond-3);
  box-shadow: var(--schaduw-scherm);
  overflow: hidden;
}

/* --- de dienstpagina's ----------------------------------------------------
   De foto rechts in de paginakop was 455 breed en de mockups erop waren te
   klein om te lezen. De fotokolom krijgt nu zeven delen tegen vijf voor de
   tekst: op een breed scherm 644 breed, ruim een derde groter dan eerst. Het
   feitenblok erboven gaat met dezelfde factor mee (13 naar 18,2 en 18 naar
   25,2 punten), zodat foto en feiten in de kolom hun verhouding houden. */
@media (min-width: 901px) {
  .paginakop .rooster:has(> .kol-5 .beeld) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .paginakop .rooster:has(> .kol-5 .beeld) > .kol-7,
  .paginakop .rooster:has(> .kol-5 .beeld) > .kol-5 { grid-column: auto; }
}
.paginakop .kol-5:has(.beeld) .feiten dt { font-size: 1.1375rem; }
.paginakop .kol-5:has(.beeld) .feiten dd { font-size: 1.575rem; }

/* --- productiecontrole ----------------------------------------------------
   Op 320 breed stak de kopbalk 18 punten buiten het scherm: logo 200 plus de
   menuknop paste niet. Alleen daar wordt het logo iets kleiner.
   De taalwissel was 21 punten breed; 24 is de ondergrens voor een doel dat
   je met een vinger moet raken. */
@media (max-width: 359px) {
  .merk img { width: 172px; }
}
.taal a { min-width: 24px; text-align: center; }

/* --- algemene voorwaarden ------------------------------------------------
   Elk artikellid met zijn nummer in een vaste kolom ervoor, zodat de nummers
   onder elkaar staan en een lid van twee regels netjes uitlijnt. */
.leestekst .lid {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.leestekst .lid__nr {
  color: var(--gedempt);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  padding-top: 0.15rem;
}

/* --- video op de startpagina ---------------------------------------------
   Zelfde vak als de foto die er stond: 16 bij 9, tot 1600 breed. De video is
   1924 bij 1076, een haar breder dan 16:9; cover snijdt daar aan elke kant
   vijf beeldpunten af in plaats van een balk te tonen. De achtergrond is de
   kleur van het bureau, voor het geval het eerste beeld nog onderweg is. */
.hero-vol__video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #CFC3B0;
}

/* Op de startpagina staat de video voorop, direct onder het menu, en volgt
   de tekst eronder. Die tekst houdt de compacte bovenmarge die hij had toen
   hij nog bovenaan stond, zodat er geen gat valt tussen video en kop. */
.hero-vol__beeld + .hero-vol__binnen { padding-top: clamp(var(--r-6), 3vw, var(--r-8)); }

/* --- verwerkersovereenkomst ----------------------------------------------
   De aankruisvakjes van het model staan in de tekst zelf; een opsommingsteken
   ervoor zou dubbel zijn. De tabel met subverwerkers heeft vier kolommen met
   lange woorden: op een telefoon scrolt hij binnen zijn eigen vak, zodat de
   pagina zelf niet breder wordt dan het scherm. */
.leestekst .aankruis { list-style: none; padding-left: 0; }
.leestekst .aankruis li { padding-left: 0; }
.tabelvak { overflow-x: auto; margin-bottom: var(--r-5); -webkit-overflow-scrolling: touch; }
.tabelvak table { min-width: 36rem; margin-bottom: 0; }
.tabelvak:focus-visible { outline: 2px solid var(--brons); outline-offset: 2px; }
/* Op de smalste telefoons past een lang woord als "formulierverwerking" niet
   in een tabelcel. Alleen dan mag het afbreken, met een streepje waar de
   browser Nederlands kent; op bredere schermen verandert er niets. */
.leestekst td, .leestekst th { overflow-wrap: anywhere; hyphens: auto; }
.tabelvak td, .tabelvak th { overflow-wrap: normal; }