.gids-blok {
  /* Afgeleid van het sitepalet in stijl.css; eigen prefix zodat niets schaduwt */
  --g-inkt:        var(--inkt);
  --g-inkt-zacht:  var(--inkt-zacht);
  --g-inkt-flets:  var(--inkt-licht);
  --g-papier:      var(--doek);
  --g-kalk:        var(--tint);
  --g-kalk-diep:   var(--limoen-was);
  --g-lijn:        var(--lijn);
  --g-lijn-hard:   #C6D0CD;
  --g-accent:      var(--zee);
  --g-accent-diep: var(--zee-diep);
  --g-accent-was:  var(--zee-was);
  --g-zon:         var(--zon);
  --g-zon-was:     #FEF6DE;
  --g-donker:      var(--limoen);

  font-variant-numeric: tabular-nums;
}


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

/* --- Kolomritme ---------------------------------------------------------- */


.gids-blok p { margin: 0 0 1.1rem; }
.gids-blok a { color: var(--g-accent-diep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.gids-blok a:hover { color: var(--g-zon); }
.gids-blok a:focus-visible,
.gids-blok button:focus-visible,
.gids-blok select:focus-visible,
.gids-blok input:focus-visible {
  outline: 3px solid var(--g-zon);
  outline-offset: 2px;
}

/* --- Koppen -------------------------------------------------------------- */

.gids-blok h1,
.gids-blok h2,
.gids-blok h3,
.gids-blok h4 { font-weight: 800; letter-spacing: -.022em; line-height: 1.15; margin: 0; }


.gids-blok h2 {
  font-size: clamp(1.45rem, 3.6vw, 1.95rem);
  margin: 3.25rem 0 1rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--g-inkt);
  text-wrap: balance;
}

.gids-blok h3 {
  font-size: clamp(1.1rem, 2.6vw, 1.3rem);
  margin: 2rem 0 .6rem;
}

.gids-blok h4 {
  font-size: 1rem;
  margin: 1.4rem 0 .35rem;
}

/* --- Hoofd van het artikel ---------------------------------------------- */

/* --- In het kort --------------------------------------------------------- */

.kort {
  background: var(--g-kalk);
  border-left: 4px solid var(--g-accent);
  padding: 1.35rem 1.4rem 1.1rem;
  margin-bottom: 2.25rem;
}
.kort h2 {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  border: 0;
  padding: 0;
  margin: 0 0 .8rem;
  color: var(--g-accent-diep);
}
.kort ul { margin: 0; padding-left: 1.15rem; }
.kort li { margin-bottom: .5rem; }
.kort li:last-child { margin-bottom: 0; }

/* --- Inhoudsopgave ------------------------------------------------------- */

.inhoud {
  border: 1px solid var(--g-lijn);
  padding: 1rem 1.25rem;
  margin-bottom: 2.5rem;
}
.inhoud > summary {
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.inhoud > summary::-webkit-details-marker { display: none; }
.inhoud > summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--g-accent); }
.inhoud[open] > summary::after { content: "–"; }
.inhoud ol {
  columns: 2;
  column-gap: 2rem;
  margin: 1rem 0 0;
  padding-left: 1.2rem;
  font-size: .9375rem;
}
.inhoud li { margin-bottom: .4rem; break-inside: avoid; }

/* --- Accentblokken ------------------------------------------------------- */

.melding {
  border: 1px solid var(--g-lijn);
  border-top: 3px solid var(--g-zon);
  background: var(--g-zon-was);
  padding: 1.25rem 1.35rem .6rem;
  margin: 2rem auto;
}
.melding.zeegroen { background: var(--g-accent-was); border-top-color: var(--g-accent); }
.melding-label {
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--g-accent-diep);
  margin-bottom: .5rem;
}
.melding h3 { margin-top: 0; }
.melding > :last-child { margin-bottom: .65rem; }

/* --- Tabellen ------------------------------------------------------------ */

.tabelhoes {
  overflow-x: auto;
  margin: 1.5rem auto 1rem;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  /* Randschaduw die met de inhoud meebeweegt: staat de tabel aan het begin of
     het einde, dan verdwijnt de schaduw aan die kant vanzelf. */
  background:
    linear-gradient(to right, var(--g-papier) 40%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left,  var(--g-papier) 40%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%,   rgba(16, 26, 25, .20), rgba(16, 26, 25, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(16, 26, 25, .20), rgba(16, 26, 25, 0)) right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}

.tabelhoes:focus-visible { outline: 3px solid var(--g-zon); outline-offset: 2px; }
.gids-blok table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: .9375rem;
}
.gids-blok caption {
  caption-side: bottom;
  text-align: left;
  font-size: .8125rem;
  color: var(--g-inkt-flets);
  padding-top: .7rem;
}
.gids-blok th,
.gids-blok td {
  text-align: left;
  padding: .65rem .7rem;
  border-bottom: 1px solid var(--g-lijn);
  vertical-align: top;
}
.gids-blok thead th {
  background: var(--g-inkt);
  color: var(--g-papier);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
  border-bottom: 0;
}
.gids-blok tbody th { font-weight: 600; }
.gids-blok tbody tr:nth-child(even) { background: var(--g-kalk); }
.gids-blok td.getal, .gids-blok th.getal { text-align: right; white-space: nowrap; }
.gids-blok tr.uitgelicht { background: var(--g-accent-was) !important; }
.gids-blok tr.uitgelicht th { color: var(--g-accent-diep); }

/* De hint wordt door gids.js geplaatst, en alleen als de tabel echt overloopt */
.rolhint {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--g-accent-diep);
  margin: 0 0 .45rem;
}
.rolhint::after {
  content: "\2192";
  font-size: 1rem;
  animation: rolwenk 1.6s ease-in-out 3;
}
@keyframes rolwenk {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(.35rem); }
}
@media (prefers-reduced-motion: reduce) {
  .rolhint::after { animation: none; }
}

/* --- Rekenmodule (kernonderdeel) ---------------------------------------- */

.reken {
  background: var(--g-inkt);
  color: var(--g-papier);
  padding: 1.5rem 1.25rem 1.75rem;
  margin: 2.5rem auto;
}
.reken h3 { color: var(--g-papier); margin: 0 0 .3rem; font-size: 1.35rem; }
.reken-intro { color: #A3B0AD; font-size: .9375rem; margin-bottom: 1.4rem; }

.reken-velden {
  display: grid;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 42rem) {
  .reken-velden { grid-template-columns: 1fr 1fr; gap: 1.1rem 1.6rem; }
  .reken-veld.vol { grid-column: 1 / -1; }
}

.reken-veld label,
.reken-veld .veldkop {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #9AA8A5;
  margin-bottom: .45rem;
}

.reken-veld select,
.reken-veld input[type="text"] {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: .7rem .8rem;
  background: #1B2726;
  color: var(--g-papier);
  border: 1px solid #33403E;
  border-radius: 0;
  min-height: 2.9rem;
}
.reken-veld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #9AA8A5 50%), linear-gradient(135deg, #9AA8A5 50%, transparent 50%); background-position: calc(100% - 20px) 1.35rem, calc(100% - 14px) 1.35rem; background-size: 6px 6px; background-repeat: no-repeat; }

.reken-veld input[type="range"] {
  width: 100%;
  margin: .55rem 0 0;
  accent-color: var(--g-zon);
  height: 2rem;
}

.bedragregel { display: flex; align-items: baseline; gap: .5rem; }
.bedragregel .euro { font-size: 1.5rem; font-weight: 800; color: var(--g-zon); }
.bedragregel .euro-bij { font-size: .8125rem; color: #9AA8A5; }

.keuzerij { display: flex; flex-wrap: wrap; gap: .5rem; }
.keuzerij button {
  flex: 1 1 auto;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  padding: .65rem .9rem;
  min-height: 2.9rem;
  background: #1B2726;
  color: #D3DCDA;
  border: 1px solid #33403E;
  cursor: pointer;
}
.keuzerij button[aria-pressed="true"] {
  background: var(--g-zon);
  border-color: var(--g-zon);
  color: #2B1F00;
}

.reken-uitkomst { border-top: 1px solid #33403E; padding-top: 1.35rem; }

.hoofduitkomst {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.1rem;
}
.hoofduitkomst .etiket {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #9AA8A5;
  display: block;
  margin-bottom: .2rem;
}
.hoofduitkomst .groot {
  font-size: clamp(2rem, 8vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--g-papier);
}
.hoofduitkomst .naast { text-align: right; }
.hoofduitkomst .naast .groot { font-size: clamp(1.4rem, 5vw, 1.8rem); color: var(--g-zon); }

/* Signatuur: de kostenstrook */
.strook {
  display: flex;
  height: 1.6rem;
  overflow: hidden;
  margin-bottom: .75rem;
  background: #1B2726;
}
.strook span {
  display: block;
  height: 100%;
  transition: width .28s ease;
}
.strook .s-belasting { background: var(--g-zon); }
.strook .s-notaris   { background: #8FA3A0; }
.strook .s-registro  { background: #6E827F; }
.strook .s-advies    { background: #52645F; }
.strook .s-rest      { background: #3C4B48; }

.strook-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  font-size: .8125rem;
  color: #BDC7C5;
  margin-bottom: 1.3rem;
}
.strook-legenda span { display: flex; align-items: center; gap: .4rem; }
.strook-legenda i { width: .7rem; height: .7rem; display: inline-block; }
.strook-legenda i.s-belasting { background: var(--g-zon); }
.strook-legenda i.s-notaris   { background: #8FA3A0; }
.strook-legenda i.s-registro  { background: #6E827F; }
.strook-legenda i.s-advies    { background: #52645F; }
.strook-legenda i.s-rest      { background: #3C4B48; }

.postenlijst { margin: 0; font-size: .9375rem; }
.postenlijst div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid #2A3634;
}
.postenlijst dt { color: #D3DCDA; }
.postenlijst dd { margin: 0; font-weight: 600; white-space: nowrap; }
.postenlijst .totaalregel { border-bottom: 0; border-top: 2px solid var(--g-zon); margin-top: .35rem; padding-top: .7rem; font-size: 1.0625rem; }
.postenlijst .totaalregel dt { color: var(--g-papier); font-weight: 700; }
.postenlijst .toelichting { font-size: .8125rem; color: #8B9793; display: block; font-weight: 400; }

.reken-voetnoot {
  font-size: .8125rem;
  color: #8B9793;
  margin: 1.2rem 0 0;
  line-height: 1.5;
}
.reken-voetnoot a { color: #D3DCDA; }

/* --- Stappenplan --------------------------------------------------------- */

.stappen { list-style: none; counter-reset: stap; margin: 1.5rem auto; padding: 0; }
.stappen > li {
  counter-increment: stap;
  position: relative;
  padding: 0 0 1.35rem 3.25rem;
  border-left: 2px solid var(--g-lijn);
  margin-left: 1.1rem;
}
.stappen > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.stappen > li::before {
  content: counter(stap);
  position: absolute;
  left: -1.1rem;
  top: -.15rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  background: var(--g-accent);
  color: var(--g-papier);
  font-weight: 800;
  font-size: .9375rem;
  border-radius: 50%;
}
.stappen h3 { margin: 0 0 .3rem; font-size: 1.0625rem; }
.stappen p { margin-bottom: .5rem; }

/* --- Controlelijst ------------------------------------------------------- */

.checklijst { list-style: none; margin: 1.25rem auto; padding: 0; }
.checklijst li { border-bottom: 1px solid var(--g-lijn); }
.checklijst label {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .7rem .25rem;
  cursor: pointer;
  min-height: 2.75rem;
}
.checklijst input { width: 1.15rem; height: 1.15rem; margin-top: .28rem; accent-color: var(--g-accent); flex: 0 0 auto; }
.checklijst input:checked + span { color: var(--g-inkt-flets); text-decoration: line-through; }
.checkstand {
  font-size: .875rem;
  color: var(--g-accent-diep);
  font-weight: 600;
  margin-top: .9rem;
}

/* --- Genummerde aandachtspunten ----------------------------------------- */

.punten { list-style: none; margin: 1.25rem auto; padding: 0; counter-reset: punt; }
.punten > li {
  counter-increment: punt;
  display: grid;
  grid-template-columns: 2.3rem 1fr;
  gap: .1rem .9rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--g-lijn);
}
.punten > li::before {
  content: counter(punt, decimal-leading-zero);
  grid-row: 1 / 3;
  font-weight: 800;
  color: var(--g-zon);
  font-size: .9375rem;
  padding-top: .15rem;
}
.punten strong { display: block; }
.punten p { margin: .15rem 0 0; font-size: .9375rem; color: var(--g-inkt-zacht); }

/* --- Veelgestelde vragen ------------------------------------------------- */

.vragen { margin: 1.25rem auto; }
.vragen details { border-bottom: 1px solid var(--g-lijn); }
.vragen summary {
  font-weight: 700;
  cursor: pointer;
  padding: .9rem 2rem .9rem 0;
  position: relative;
  list-style: none;
  min-height: 2.75rem;
}
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after {
  content: "+";
  position: absolute;
  right: .25rem;
  top: .8rem;
  font-size: 1.3rem;
  color: var(--g-accent);
  line-height: 1;
}
.vragen details[open] summary::after { content: "–"; }
.vragen details > *:not(summary) { padding-right: 2rem; }
.vragen details > p:last-child { padding-bottom: .9rem; }

/* --- Verder lezen -------------------------------------------------------- */

.verder { margin: 1.5rem auto 0; }
.verder-raster {
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 38rem) { .verder-raster { grid-template-columns: 1fr 1fr; } }
.verder-raster a {
  display: block;
  padding: .9rem 1rem;
  border: 1px solid var(--g-lijn);
  text-decoration: none;
  color: var(--g-inkt);
  font-weight: 600;
  font-size: .9375rem;
  min-height: 3rem;
  transition: border-color .15s ease, background .15s ease;
}
.verder-raster a:hover { border-color: var(--g-accent); background: var(--g-kalk); }
.verder-raster em {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: .8125rem;
  color: var(--g-inkt-flets);
  margin-top: .15rem;
}

.leesook {
  border-left: 3px solid var(--g-zon);
  padding: .35rem 0 .35rem .9rem;
  margin: 1.5rem auto;
  font-size: .9375rem;
}
.leesook strong { text-transform: uppercase; font-size: .7rem; letter-spacing: .12em; color: var(--g-inkt-flets); display: block; }

/* --- Bronnen ------------------------------------------------------------- */

.bronnen { font-size: .9375rem; color: var(--g-inkt-zacht); }
.bronnen ul { padding-left: 1.15rem; }
.bronnen li { margin-bottom: .45rem; }

.voorbehoud {
  background: var(--g-kalk);
  padding: 1.1rem 1.25rem;
  font-size: .875rem;
  color: var(--g-inkt-zacht);
  margin-top: 2rem;
}
.voorbehoud p:last-child { margin-bottom: 0; }

/* --- Lijsten in lopende tekst ------------------------------------------- */

.gids-blok > ul, .gids-blok > ol { padding-left: 1.25rem; margin: 0 auto 1.2rem; }
.gids-blok > ul.checklijst, .gids-blok > ul.verder-raster,
.gids-blok > ol.punten, .gids-blok > ol.stappen { padding-left: 0; }
.gids-blok li { margin-bottom: .35rem; }

/* --- Toegankelijkheid ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .gids-blok *, .gids-blok *::before, .gids-blok *::after { transition-duration: .01ms !important; }
}

@media print {
  .reken, .inhoud, .verder { display: none; }
}

/* --- Illustraties -------------------------------------------------------- */

.gids-blok .beeld { margin: 2rem auto; }
.gids-blok .beeld img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--g-kalk);
}
.gids-blok .beeld figcaption {
  font-size: .8125rem;
  color: var(--g-inkt-flets);
  padding-top: .55rem;
  border-top: 1px solid var(--g-lijn);
  margin-top: .55rem;
}

/* --- Kostenmeter (kostenartikel) ---------------------------------------- */

.meter { margin: 1.5rem auto 2rem; }
.meter-rij {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  align-items: center;
  gap: .5rem .9rem;
  padding: .45rem 0;
}
.meter-rij .naam { font-size: .875rem; font-weight: 600; }
.meter-rij .naam em { display: block; font-style: normal; font-weight: 400; color: var(--g-inkt-flets); font-size: .75rem; }
.meter-balk { position: relative; background: var(--g-kalk-diep); height: 1.5rem; }
.meter-balk span { display: block; height: 100%; background: var(--g-accent); }
.meter-balk span.groot { background: var(--g-zon); }
.meter-balk b {
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translateY(-50%);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--g-inkt);
}
@media (max-width: 30rem) {
  .meter-rij { grid-template-columns: 1fr; gap: .15rem; }
}

/* --- Kerncijfer ---------------------------------------------------------- */

.kerngetal {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--g-lijn);
  border: 1px solid var(--g-lijn);
  margin: 1.75rem auto;
}
@media (min-width: 34rem) { .kerngetal { grid-template-columns: repeat(3, 1fr); } }
.kerngetal div { background: var(--g-papier); padding: 1rem 1.1rem; }
.kerngetal .cijfer {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--g-accent-diep);
  line-height: 1.1;
}
.kerngetal .bij { display: block; font-size: .8125rem; color: var(--g-inkt-zacht); margin-top: .3rem; }

.meter-balk .deel-vol       { width: 100%; }
.meter-balk .deel-elf       { width: 11.1%; }
.meter-balk .deel-drie      { width: 3.1%; }
.meter-balk .deel-twee      { width: 2%; }
.meter-balk .deel-anderhalf { width: 1.6%; }
.meter-balk .deel-min       { width: 1%; }

/* Binnen de artikelkolom breekt niets uit; brede blokken vullen de kolom. */
.gids-blok .breed { width: 100%; }

/* --- Verwijzing naar de rekenmodule ------------------------------------- */

.gids-blok .verwijsblok {
  background: var(--g-inkt);
  color: var(--g-papier);
  padding: 1.35rem 1.4rem 1.2rem;
  margin: 2rem 0;
  border-left: 5px solid var(--g-zon);
}
.gids-blok .verwijsblok-label {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--g-zon);
  margin: 0 0 .35rem;
}
.gids-blok .verwijsblok h3 { margin: 0 0 .5rem; font-size: 1.3rem; }
.gids-blok .verwijsblok h3 a { color: var(--g-papier); text-decoration: none; }
.gids-blok .verwijsblok h3 a:hover { text-decoration: underline; }
.gids-blok .verwijsblok p { color: #C4CCCA; margin-bottom: .6rem; font-size: .9375rem; }
.gids-blok .verwijsblok-actie { margin: 0; }
.gids-blok .verwijsblok-actie a {
  display: inline-block;
  background: var(--g-zon);
  color: #2B1F00;
  font-weight: 700;
  font-size: .9375rem;
  padding: .65rem 1.1rem;
  min-height: 2.75rem;
  line-height: 1.5;
  text-decoration: none;
}
.gids-blok .verwijsblok-actie a:hover { background: #FFC91F; color: #2B1F00; }