/* ==========================================================================
   Componenten
   ========================================================================== */

/* --- Knoppen ------------------------------------------------------------ */
.knop {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  padding: var(--ruimte-3) var(--ruimte-6);
  border-radius: var(--rond-vol);
  border: 2px solid transparent;
  font-weight: 600;
  font-size: var(--tekst-md);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--overgang), color var(--overgang), border-color var(--overgang), transform var(--overgang);
}

.knop:hover { transform: translateY(-2px); }

.knop--primair { background: var(--kleur-vuur); color: var(--kleur-papier); }
.knop--primair:hover { background: var(--kleur-vuur-donker); color: var(--kleur-papier); }

.knop--secundair { border-color: var(--kleur-inkt); color: var(--kleur-inkt); background: transparent; }
.knop--secundair:hover { background: var(--kleur-inkt); color: var(--kleur-papier); }

.donker .knop--primair { background: var(--kleur-papier); color: var(--kleur-diep); }
.donker .knop--primair:hover { background: var(--kleur-zand); color: var(--kleur-diep); }

.donker .knop--secundair { border-color: var(--kleur-papier); color: var(--kleur-papier); }
.donker .knop--secundair:hover { background: var(--kleur-papier); color: var(--kleur-diep); }

/* --- Header ------------------------------------------------------------- */
.hoofding {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background var(--overgang), box-shadow var(--overgang);
}

.hoofding.is-vast {
  background: var(--kleur-papier);
  border-bottom: 1px solid var(--kleur-lijn);
}

.hoofding__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-5);
  min-height: 76px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-3);
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: var(--tekst-lg);
  color: var(--kleur-inkt);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.logo:hover { color: var(--kleur-vuur); }

.logo img { width: 30px; height: 30px; flex: none; }

.hoofdnav { display: none; }

@media (min-width: 1024px) {
  .hoofdnav { display: block; }
  .hoofdnav ul {
    display: flex;
    gap: var(--ruimte-6);
    list-style: none;
    padding: 0;
  }
  .hoofdnav a {
    color: var(--kleur-inkt);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--tekst-sm);
    padding-block: var(--ruimte-2);
    border-bottom: 2px solid transparent;
  }
  .hoofdnav a:hover,
  .hoofdnav a[aria-current="page"] { border-bottom-color: var(--kleur-vuur); color: var(--kleur-inkt); }
  .hoofding .knop { padding-block: var(--ruimte-2); }
}

.menuknop {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  background: none;
  border: 2px solid var(--kleur-inkt);
  border-radius: var(--rond-vol);
  padding: var(--ruimte-2) var(--ruimte-4);
  font-weight: 600;
  cursor: pointer;
  color: var(--kleur-inkt);
}

@media (min-width: 1024px) { .menuknop { display: none; } }

.mobielmenu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--kleur-diep);
  color: var(--kleur-papier);
  padding: var(--ruimte-6) var(--marge-zijkant);
  display: none;
  flex-direction: column;
}

.mobielmenu.is-open { display: flex; }

.mobielmenu__kop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
}

.mobielmenu .logo { color: var(--kleur-papier); }

.mobielmenu__sluit {
  background: none;
  border: 2px solid var(--kleur-papier);
  border-radius: var(--rond-vol);
  color: var(--kleur-papier);
  padding: var(--ruimte-2) var(--ruimte-4);
  font-weight: 600;
  cursor: pointer;
}

.mobielmenu nav { margin-top: var(--ruimte-8); }

.mobielmenu ul { list-style: none; padding: 0; display: grid; gap: var(--ruimte-5); }

.mobielmenu nav a {
  font-family: var(--font-kop);
  font-size: var(--tekst-xl);
  color: var(--kleur-papier);
  text-decoration: none;
}

.mobielmenu nav a:hover,
.mobielmenu nav a[aria-current="page"] { color: var(--kleur-goud); }

.mobielmenu .knop { margin-top: var(--ruimte-8); justify-content: center; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  padding-top: 140px;
  padding-bottom: 80px;
  background:
    linear-gradient(160deg, var(--kleur-papier) 0%, var(--kleur-zand) 100%);
}

@media (min-width: 1024px) {
  .hero { padding-top: 190px; padding-bottom: var(--ruimte-10); }
}

.hero h1 {
  font-size: var(--tekst-3xl);
  max-width: 16ch;
}

.hero__sub {
  margin-top: var(--ruimte-5);
  font-size: var(--tekst-lg);
  color: var(--kleur-inkt-zacht);
  max-width: 52ch;
}

.hero__acties {
  margin-top: var(--ruimte-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-4);
}

/* Kleinere hero voor binnenpagina's */
.paginakop {
  padding-top: 140px;
  padding-bottom: var(--ruimte-8);
  background: linear-gradient(160deg, var(--kleur-papier) 0%, var(--kleur-zand) 100%);
}

@media (min-width: 1024px) { .paginakop { padding-top: 180px; } }

.paginakop p {
  margin-top: var(--ruimte-5);
  font-size: var(--tekst-lg);
  color: var(--kleur-inkt-zacht);
}

/* --- Kruimelpad --------------------------------------------------------- */
.kruimelpad { font-size: var(--tekst-sm); margin-bottom: var(--ruimte-5); }
.kruimelpad ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ruimte-2); max-width: none; }
.kruimelpad li + li::before { content: "/"; margin-inline-end: var(--ruimte-2); color: var(--kleur-inkt-zacht); }
.kruimelpad a { color: var(--kleur-inkt-zacht); }
.kruimelpad [aria-current="page"] { color: var(--kleur-inkt); }

/* --- Tweepadskeuze ------------------------------------------------------ */
.tweepad {
  display: grid;
  gap: var(--ruimte-4);
}

@media (min-width: 768px) { .tweepad { grid-template-columns: 1fr 1fr; } }

.tweepad__vlak {
  display: block;
  padding: var(--ruimte-7) var(--ruimte-6);
  border-radius: var(--rond-lg);
  text-decoration: none;
  transition: transform var(--overgang), box-shadow var(--overgang);
}

.tweepad__vlak:hover { transform: translateY(-2px); box-shadow: var(--schaduw-hoog); }

.tweepad__vlak--start { background: var(--kleur-zand); color: var(--kleur-inkt); }
.tweepad__vlak--schaal { background: var(--kleur-diep); color: var(--kleur-papier); }

.tweepad__vlak h2, .tweepad__vlak h3 {
  font-size: var(--tekst-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-4);
}

.tweepad__vlak p { margin-top: var(--ruimte-3); }
.tweepad__vlak--start p { color: var(--kleur-inkt-zacht); }
.tweepad__vlak--schaal p { color: var(--kleur-zand); }

.tweepad__pijl { flex: none; transition: transform var(--overgang); }
.tweepad__vlak:hover .tweepad__pijl { transform: translateX(4px); }

/* --- Logobalk ----------------------------------------------------------- */
.logobalk { padding-block: var(--ruimte-7); border-bottom: 1px solid var(--kleur-lijn); }

.logobalk p {
  font-size: var(--tekst-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--kleur-inkt-zacht);
  margin-bottom: var(--ruimte-4);
}

.logobalk ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-5) var(--ruimte-7);
  max-width: none;
}

.logobalk li {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: var(--tekst-lg);
  color: var(--kleur-inkt-zacht);
  transition: color var(--overgang);
}

.logobalk li:hover { color: var(--kleur-vuur); }

/* --- Probleemblok ------------------------------------------------------- */
.probleem__kaarten {
  margin-top: var(--ruimte-7);
  display: grid;
  gap: var(--ruimte-4);
}

@media (min-width: 768px) { .probleem__kaarten { grid-template-columns: 1fr 1fr; } }

.probleem__kaart {
  background: var(--kleur-diep-licht);
  border-radius: var(--rond-md);
  padding: var(--ruimte-6);
}

.probleem__kaart h3 { font-size: var(--tekst-lg); }

.probleem__kaart p { margin-top: var(--ruimte-3); color: var(--kleur-zand); }

.probleem__prijs {
  display: inline-block;
  margin-top: var(--ruimte-4);
  font-weight: 600;
  color: var(--kleur-goud);
  font-size: var(--tekst-sm);
}

/* --- Dienstenkaarten ---------------------------------------------------- */
.diensten__raster {
  margin-top: var(--ruimte-7);
  display: grid;
  gap: var(--ruimte-4);
}

@media (min-width: 1024px) { .diensten__raster { grid-template-columns: repeat(3, 1fr); } }

.dienstkaart {
  display: flex;
  flex-direction: column;
  background: var(--kleur-papier);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--rond-md);
  padding: var(--ruimte-6);
  text-decoration: none;
  color: var(--kleur-inkt);
  transition: border-color var(--overgang), transform var(--overgang), box-shadow var(--overgang);
}

.dienstkaart:hover {
  border-color: var(--kleur-vuur);
  transform: translateY(-2px);
  box-shadow: var(--schaduw-zacht);
  color: var(--kleur-inkt);
}

.dienstkaart__nummer {
  font-family: var(--font-kop);
  font-size: var(--tekst-sm);
  color: var(--kleur-vuur);
  font-weight: 600;
}

.dienstkaart h3 { margin-top: var(--ruimte-3); }

.dienstkaart > p { margin-top: var(--ruimte-3); color: var(--kleur-inkt-zacht); }

.dienstkaart ul {
  margin-top: var(--ruimte-4);
  padding-inline-start: 1.2em;
  color: var(--kleur-inkt-zacht);
  font-size: var(--tekst-sm);
}

.dienstkaart li + li { margin-top: var(--ruimte-1); }

.dienstkaart__voet {
  margin-top: auto;
  padding-top: var(--ruimte-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ruimte-3);
}

.dienstkaart__prijs { font-weight: 600; font-size: var(--tekst-sm); }

.dienstkaart__pijl { color: var(--kleur-vuur); transition: transform var(--overgang); }
.dienstkaart:hover .dienstkaart__pijl { transform: translateX(4px); }

/* --- Stappenplan -------------------------------------------------------- */
.stappen {
  margin-top: var(--ruimte-7);
  display: grid;
  gap: var(--ruimte-6);
  list-style: none;
  padding: 0;
  counter-reset: stap;
  max-width: none;
}

@media (min-width: 1024px) {
  .stappen { grid-template-columns: repeat(var(--stappen-aantal, 4), 1fr); gap: var(--ruimte-5); }
}

.stappen li {
  counter-increment: stap;
  position: relative;
  padding-top: var(--ruimte-5);
  border-top: 2px solid var(--kleur-lijn);
}

.stappen li::before {
  content: counter(stap, decimal-leading-zero);
  position: absolute;
  top: calc(-1 * var(--ruimte-4));
  inset-inline-start: 0;
  background: var(--kleur-papier);
  padding-inline-end: var(--ruimte-3);
  font-family: var(--font-kop);
  font-weight: 600;
  color: var(--kleur-vuur);
}

.sectie--zand .stappen li::before { background: var(--kleur-zand); }

.stappen h3 { font-size: var(--tekst-md); font-family: var(--font-tekst); font-weight: 600; letter-spacing: 0; }

.stappen p { margin-top: var(--ruimte-2); font-size: var(--tekst-sm); color: var(--kleur-inkt-zacht); }

.stappen .duur {
  display: inline-block;
  margin-top: var(--ruimte-3);
  font-size: var(--tekst-xs);
  font-weight: 600;
  background: var(--kleur-vuur-zacht);
  color: var(--kleur-vuur-donker);
  padding: 2px var(--ruimte-3);
  border-radius: var(--rond-vol);
}

/* --- Statistiekenbalk --------------------------------------------------- */
.statistieken {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ruimte-6);
  list-style: none;
  padding: 0;
  max-width: none;
}

@media (min-width: 768px) { .statistieken { grid-template-columns: repeat(4, 1fr); } }

.statistieken .getal {
  font-family: var(--font-kop);
  font-size: var(--tekst-2xl);
  font-weight: 600;
  color: var(--kleur-goud);
  display: block;
}

.statistieken .omschrijving {
  display: block;
  margin-top: var(--ruimte-2);
  color: var(--kleur-zand);
  font-size: var(--tekst-sm);
}

/* --- Citaatblok --------------------------------------------------------- */
.citaat {
  display: grid;
  gap: var(--ruimte-6);
  align-items: center;
}

@media (min-width: 768px) { .citaat { grid-template-columns: auto 1fr; } }

.citaat img { border-radius: var(--rond-lg); }

.citaat blockquote {
  font-family: var(--font-kop);
  font-size: var(--tekst-xl);
  line-height: 1.3;
}

.citaat figcaption { margin-top: var(--ruimte-4); color: var(--kleur-inkt-zacht); }

/* --- Lokmiddel (checklist) ---------------------------------------------- */
.lokmiddel {
  background: var(--kleur-vuur-zacht);
  border-radius: var(--rond-lg);
  padding: var(--ruimte-7) var(--ruimte-6);
}

@media (min-width: 1024px) { .lokmiddel { padding: var(--ruimte-8); } }

.lokmiddel h2 { max-width: 24ch; }

.lokmiddel > p { margin-top: var(--ruimte-4); color: var(--kleur-inkt-zacht); }

.lokmiddel form {
  margin-top: var(--ruimte-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-3);
  align-items: flex-start;
}

.lokmiddel input[type="email"] {
  flex: 1 1 260px;
  padding: var(--ruimte-3) var(--ruimte-5);
  border: 2px solid var(--kleur-lijn);
  border-radius: var(--rond-vol);
  background: var(--kleur-papier);
  min-height: 52px;
}

.lokmiddel input[type="email"]:focus-visible { outline-offset: 0; border-color: var(--kleur-vuur); }

.lokmiddel .kleinegeletterd { font-size: var(--tekst-xs); color: var(--kleur-inkt-zacht); margin-top: var(--ruimte-3); flex-basis: 100%; }

/* --- Veelgestelde vragen ------------------------------------------------ */
.vragen { margin-top: var(--ruimte-7); max-width: var(--breedte-tekst); }

.vragen details { border-top: 1px solid var(--kleur-lijn); }
.vragen details:last-child { border-bottom: 1px solid var(--kleur-lijn); }

.vragen summary {
  cursor: pointer;
  list-style: none;
  padding: var(--ruimte-5) 0;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ruimte-4);
}

.vragen summary::-webkit-details-marker { display: none; }

.vragen summary::after {
  content: "+";
  font-family: var(--font-kop);
  font-size: var(--tekst-lg);
  color: var(--kleur-vuur);
  flex: none;
  transition: transform var(--overgang);
}

.vragen details[open] summary::after { transform: rotate(45deg); }

.vragen details > div { padding-bottom: var(--ruimte-5); color: var(--kleur-inkt-zacht); }

/* --- Afsluitende oproep ------------------------------------------------- */
.oproep { background: var(--kleur-diep); color: var(--kleur-papier); text-align: center; }

.oproep h2 { font-size: var(--tekst-2xl); margin-inline: auto; max-width: 20ch; }

.oproep p { margin: var(--ruimte-5) auto 0; color: var(--kleur-zand); }

.oproep .knop { margin-top: var(--ruimte-7); }

.oproep .telefoon {
  display: block;
  margin-top: var(--ruimte-5);
  font-size: var(--tekst-sm);
}

/* Op het diepe vlak halen links het contrast alleen in goud of papier */
.oproep a:not(.knop) { color: var(--kleur-goud); }
.oproep a:not(.knop):hover { color: var(--kleur-papier); }

/* --- Artikelkaarten ----------------------------------------------------- */
.artikelraster {
  margin-top: var(--ruimte-7);
  display: grid;
  gap: var(--ruimte-5);
}

@media (min-width: 768px) { .artikelraster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .artikelraster { grid-template-columns: repeat(3, 1fr); } }

.artikelkaart {
  display: flex;
  flex-direction: column;
  background: var(--kleur-papier);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--rond-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--kleur-inkt);
  transition: border-color var(--overgang), transform var(--overgang), box-shadow var(--overgang);
}

.artikelkaart:hover {
  border-color: var(--kleur-vuur);
  transform: translateY(-2px);
  box-shadow: var(--schaduw-zacht);
  color: var(--kleur-inkt);
}

.artikelkaart img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.artikelkaart__tekst { padding: var(--ruimte-5); display: flex; flex-direction: column; gap: var(--ruimte-3); flex: 1; }

.artikelkaart .categorie {
  font-size: var(--tekst-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--kleur-vuur);
}

.artikelkaart h3 { font-size: var(--tekst-lg); }

.artikelkaart .leestijd { margin-top: auto; font-size: var(--tekst-sm); color: var(--kleur-inkt-zacht); }

/* --- Formulieren -------------------------------------------------------- */
.formulier { display: grid; gap: var(--ruimte-5); max-width: var(--breedte-tekst); }

.veld { display: grid; gap: var(--ruimte-2); }

.veld label { font-weight: 600; font-size: var(--tekst-sm); }

.veld input, .veld textarea, .veld select {
  padding: var(--ruimte-3) var(--ruimte-4);
  border: 2px solid var(--kleur-lijn);
  border-radius: var(--rond-sm);
  background: #fff;
  min-height: 52px;
  width: 100%;
}

.veld textarea { min-height: 140px; resize: vertical; }

.veld input:focus-visible, .veld textarea:focus-visible, .veld select:focus-visible {
  outline: 3px solid var(--kleur-vuur);
  outline-offset: 0;
  border-color: var(--kleur-vuur);
}

.veld .foutmelding { color: var(--kleur-fout); font-size: var(--tekst-sm); font-weight: 500; display: none; }

.veld.heeft-fout input, .veld.heeft-fout textarea, .veld.heeft-fout select { border-color: var(--kleur-fout); }
.veld.heeft-fout .foutmelding { display: block; }

/* Honeypot: onzichtbaar voor mensen, aantrekkelijk voor spamscripts */
.veld--extra { position: absolute; inset-inline-start: -9999px; opacity: 0; pointer-events: none; }

.formulier__succes {
  display: none;
  background: var(--kleur-vuur-zacht);
  border-radius: var(--rond-md);
  padding: var(--ruimte-6);
}

.formulier__succes h3 { color: var(--kleur-succes); }
.formulier__succes p { margin-top: var(--ruimte-3); }

.formulier.is-verzonden > *:not(.formulier__succes) { display: none; }
.formulier.is-verzonden .formulier__succes { display: block; }

/* --- Footer ------------------------------------------------------------- */
.voetbalk { background: var(--kleur-diep); color: var(--kleur-zand); padding-block: var(--ruimte-8) var(--ruimte-6); }

.voetbalk__kolommen { display: grid; gap: var(--ruimte-7); }

@media (min-width: 768px) { .voetbalk__kolommen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .voetbalk__kolommen { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.voetbalk .logo { color: var(--kleur-papier); font-size: var(--tekst-lg); }

.voetbalk__tagline {
  margin-top: var(--ruimte-3);
  font-family: var(--font-kop);
  color: var(--kleur-goud);
}

.voetbalk h2 { font-size: var(--tekst-sm); font-family: var(--font-tekst); letter-spacing: 0.12em; text-transform: uppercase; color: var(--kleur-goud); }

.voetbalk ul { list-style: none; padding: 0; margin-top: var(--ruimte-4); display: grid; gap: var(--ruimte-2); }

.voetbalk a { color: var(--kleur-zand); text-decoration: none; }
.voetbalk a:hover { color: var(--kleur-papier); text-decoration: underline; }

.voetbalk__onder {
  margin-top: var(--ruimte-8);
  padding-top: var(--ruimte-5);
  border-top: 1px solid var(--kleur-diep-licht);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-4);
  justify-content: space-between;
  font-size: var(--tekst-sm);
}

.voetbalk__onder ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-5);
}

/* --- Figuren en placeholders -------------------------------------------- */
.figuur { margin: 0; }

.figuur img { width: 100%; border-radius: var(--rond-lg); object-fit: cover; }

.figuur figcaption { margin-top: var(--ruimte-3); font-size: var(--tekst-sm); color: var(--kleur-inkt-zacht); }

.donker .figuur figcaption { color: var(--kleur-zand); }

/* --- Prijsblok ---------------------------------------------------------- */
.prijsblok {
  background: var(--kleur-zand);
  border-radius: var(--rond-lg);
  padding: var(--ruimte-7) var(--ruimte-6);
}

.prijsblok .bedrag {
  font-family: var(--font-kop);
  font-size: var(--tekst-2xl);
  font-weight: 600;
  display: block;
  margin-top: var(--ruimte-3);
}

.prijsblok ul { margin-top: var(--ruimte-4); padding-inline-start: 1.2em; color: var(--kleur-inkt-zacht); }

/* --- Highlightblok (bijv. bestelsysteem) --------------------------------- */
.uitgelicht-blok {
  background: var(--kleur-diep);
  color: var(--kleur-papier);
  border-radius: var(--rond-lg);
  padding: var(--ruimte-7) var(--ruimte-6);
}

@media (min-width: 1024px) { .uitgelicht-blok { padding: var(--ruimte-8); } }

.uitgelicht-blok p { color: var(--kleur-zand); margin-top: var(--ruimte-4); }

.uitgelicht-blok ul { color: var(--kleur-zand); margin-top: var(--ruimte-4); padding-inline-start: 1.2em; }

.uitgelicht-blok .knop { margin-top: var(--ruimte-6); }

/* --- Hero met foto (homepagina) ------------------------------------------ */
.hero--foto {
  position: relative;
  isolation: isolate;
  background: var(--kleur-diep);
  color: var(--kleur-papier);
  overflow: hidden;
}

.hero--foto .hero__beeld,
.hero--foto .hero__beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Warm verloop over de foto zodat de tekst leesbaar blijft */
.hero--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(75deg, rgba(23, 19, 16, .88) 0%, rgba(31, 58, 52, .78) 45%, rgba(151, 56, 15, .45) 100%);
}

.hero--foto .hero__sub { color: var(--kleur-zand); }

.hero--foto .kicker {
  display: inline-block;
  font-size: var(--tekst-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kleur-goud);
  margin-bottom: var(--ruimte-5);
}

[dir="rtl"] .hero--foto .kicker { letter-spacing: 0; }

.hero--foto .knop--secundair { border-color: var(--kleur-papier); color: var(--kleur-papier); }
.hero--foto .knop--secundair:hover { background: var(--kleur-papier); color: var(--kleur-diep); }

/* Beeldmerk als watermerk achter de herokop, in plaats van een foto */
.hero--foto .omtrek { position: relative; z-index: 1; }

.hero--foto .hero__beeld--merk {
  inset: auto;
  inset-inline-end: min(6vw, 90px);
  top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  width: min(44vw, 420px);
  height: auto;
  opacity: .3;
  z-index: 0;
}

.hero--foto .hero__beeld--merk img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Header boven de donkere hero: lichte tekst tot je scrolt */
.hoofding--omgekeerd:not(.is-vast) .logo,
.hoofding--omgekeerd:not(.is-vast) .hoofdnav a,
.hoofding--omgekeerd:not(.is-vast) .taalkeuze a { color: var(--kleur-papier); }

.hoofding--omgekeerd:not(.is-vast) .menuknop {
  border-color: var(--kleur-papier);
  color: var(--kleur-papier);
}

.hoofding--omgekeerd:not(.is-vast) .hoofdnav a:hover,
.hoofding--omgekeerd:not(.is-vast) .hoofdnav a[aria-current="page"] { border-bottom-color: var(--kleur-goud); color: var(--kleur-papier); }

.hoofding--omgekeerd:not(.is-vast) .taalkeuze a[aria-current="true"] { color: var(--kleur-goud); }

/* --- Taalkeuze ----------------------------------------------------------- */
.taalkeuze {
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
  font-size: var(--tekst-sm);
  font-weight: 600;
}

.taalkeuze a {
  color: var(--kleur-inkt-zacht);
  text-decoration: none;
  padding: var(--ruimte-1) var(--ruimte-2);
  border-radius: var(--rond-sm);
}

.taalkeuze a:hover { color: var(--kleur-vuur-donker); }

.taalkeuze a[aria-current="true"] {
  color: var(--kleur-vuur-donker);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mobielmenu .taalkeuze { margin-top: var(--ruimte-7); }
.mobielmenu .taalkeuze a { color: var(--kleur-zand); font-size: var(--tekst-md); }
.mobielmenu .taalkeuze a[aria-current="true"] { color: var(--kleur-goud); }

/* --- Headercorrecties ----------------------------------------------------- */
/* Na .knop gedefinieerd zodat de desktop-only knop op mobiel echt verdwijnt */
.alleen-desktop { display: none; }

@media (min-width: 1366px) { .alleen-desktop { display: inline-flex; } }

/* Compacte header op smalle schermen: taalkeuze zit dan in het mobiele menu */
.hoofdnav a { white-space: nowrap; }

.hoofding .taalkeuze { flex: none; }

@media (max-width: 767px) {
  .hoofding .taalkeuze { display: none; }
  .hoofding .logo { font-size: var(--tekst-md); white-space: nowrap; }
}

@media (min-width: 1024px) {
  .hoofdnav ul { gap: var(--ruimte-4); }
}

@media (min-width: 1024px) {
  .hoofding .logo, .hoofding .knop { white-space: nowrap; }
  .hoofding__binnen { gap: var(--ruimte-4); }
}

/* Compacter logo en knop zodat de header op één regel blijft */
.hoofding .logo { font-size: var(--tekst-md); }

.hoofding .knop { padding-inline: var(--ruimte-5); font-size: var(--tekst-sm); }

/* --- Logobalk met beeldmerken -------------------------------------------- */
.logobalk li img {
  height: 40px;
  width: auto;
  filter: grayscale(1) opacity(.72);
  transition: filter var(--overgang);
}

@media (min-width: 768px) { .logobalk li img { height: 52px; } }

/* Ronde zegellogo's zijn op woordmerkhoogte onleesbaar en mogen groter */
.logobalk li img.logobalk__rond { height: 60px; }

@media (min-width: 768px) { .logobalk li img.logobalk__rond { height: 76px; } }

.logobalk li:hover img { filter: none; }

/* --- Leesbaarheid op foto en donkere vlakken ------------------------------ */
/* De regel boven de herokop: licht en groter, goud bleek te licht op de foto */
.hero--foto .kicker {
  color: var(--kleur-papier);
  font-size: var(--tekst-md);
}

/* Gouden labels op de diepe groene vlakken een maat groter */
.donker .sectielabel { font-size: var(--tekst-sm); }

.probleem__prijs { font-size: var(--tekst-md); }

/* Labels op de donkere uitgelichte blokken in goud, net als op .donker */
.uitgelicht-blok .sectielabel { color: var(--kleur-goud); font-size: var(--tekst-sm); }

/* De header mag iets breder dan de content, zodat zes menu-items,
   de taalkeuze en de knop samen op één regel passen */
.hoofding .omtrek { max-width: 1400px; }