/* Stijl D, Academie. Identiteitslaag boven /css/basis.css.
 *
 * Karakter: redactioneel en premium. Veel wit, hairlijnen in plaats van
 * kaders, koppen in Hanken Grotesk 800 zonder kapitalen, drukgroen als
 * accentkleur, foto's met een strak inktkader. De donkere secties van de
 * basis worden hier licht: deze stijl kent geen inktvlakken buiten de voet.
 *
 * Kleurregel: geen eigen hexwaarden; alles via de tokens van basis.css.
 * Gemeten contrasten (tools/contrast.py): drukgroen op wit 5.18, drukgroen
 * op papier-zacht 4.84, inkt op wit 11.90, inkt op papier-zacht 11.11,
 * tekstgrijs op wit 5.41, tekstgrijs op papier-zacht 5.05, wit op
 * drukgroen 5.18, wit op inkt 11.90, inkt op teal 4.69. Merkgroen op wit
 * (4.16) en op papier-zacht (3.89) alleen groot: hier enkel de stapnummers
 * van 1.8rem vet. */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --f-kop: "Hanken Grotesk", Verdana, sans-serif;
  --f-label: "Hanken Grotesk", Verdana, sans-serif;
  --f-tekst: "Hanken Grotesk", Verdana, sans-serif;
  --maat: 68rem;
}

/* Koppen: geen kapitalen (de basis zet uppercase), gewicht 800, strakke
 * spatiering. Kleiner geklampt dan de condensed basis. */
h1, h2, h3 {
  text-transform: none;
  font-weight: 800;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.08; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.1; }
h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.005em; }

/* De basis vraagt op veel labels gewicht 700; Hanken laadt 400, 600 en 800,
 * en 700 zou naar 800 vallen. Microlabels horen in deze stijl op 600. */
th, caption, .veldgroep label, fieldset.veldgroep legend, .contactlijst__label,
.feitenstrook .feit-l, .feitenlijst .feit-naam, .overzichtlijst dt,
.stroomkop li, .vakkenraster li, .clublijst li, .beeldvak span, .fotonoot,
.plekken__tekst, .wachtlijstband, .prijslijst .prijs-l, .prijsregel small,
.woordmerk small, .menuknop, .cijferband .cijfer-l, .kaart-meta,
.conceptstempel { font-weight: 600; }

/* ---------- Header: hairlijn in plaats van inktkader ---------- */

.kop-balk { border-bottom: var(--hairlijn) solid var(--papier-lijn); }

.woordmerk {
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  border-left: 4px solid var(--groen);
  padding-left: 0.7rem;
}
.woordmerk__blok { display: none; }

.menuknop { border-width: var(--hairlijn); }

.hoofdnav a {
  text-transform: none;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0;
}
.hoofdnav .nav-actie {
  background: var(--wit);
  color: var(--inkt);
  border: var(--hairlijn) solid var(--inkt);
  padding: 0.5rem 1.2rem;
}
.hoofdnav .nav-actie:hover {
  background: var(--groen-diep);
  border-color: var(--groen-diep);
  color: var(--wit);
}
.hoofdnav .nav-actie[aria-current="page"] {
  background: var(--groen-diep);
  border-color: var(--groen-diep);
  color: var(--wit);
}

/* ---------- Knoppen ---------- */

/* Wit op drukgroen is 5.18 en haalt ook de kleine-tekstgrens. */
.knop {
  text-transform: none;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0;
  padding: 0.8rem 1.8rem;
  background: var(--groen-diep);
  border-color: var(--groen-diep);
}
.knop:hover { background: var(--inkt); border-color: var(--inkt); color: var(--wit); }

/* Varianten opnieuw vastzetten: dit bestand laadt na basis.css, dus de
 * .knop-regel hierboven zou ze anders overschrijven. */
.knop--tweede {
  background: var(--wit);
  color: var(--inkt);
  border-color: var(--inkt);
}
.knop--tweede:hover {
  background: var(--groen-diep);
  border-color: var(--groen-diep);
  color: var(--wit);
}
.knop--dicht {
  background: var(--papier-zacht);
  color: var(--tekstgrijs);
  border-color: var(--papier-lijn);
}
.knop--dicht:hover {
  background: var(--papier-zacht);
  border-color: var(--papier-lijn);
  color: var(--tekstgrijs);
}

/* ---------- Kaartsysteem: hairlijnen, transparante kop ---------- */

.kaart { border: var(--hairlijn) solid var(--papier-lijn); }

.kaart-kop {
  background: transparent;
  color: var(--inkt);
  border-bottom: var(--hairlijn) solid var(--papier-lijn);
  padding: 0.7rem 1rem;
}
.kaart-kop__nr { color: var(--groen-diep); font-weight: 800; }
.kaart-kop__titel { color: var(--groen-diep); font-weight: 600; letter-spacing: 0.18em; }
.kaart-meta {
  font-family: var(--f-label);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--tekstgrijs);
}
.dienstkaart:hover .kaart-kop {
  background: transparent;
  border-bottom-color: var(--groen);
}

/* ---------- Held: de donkere kaart wordt licht ---------- */

.held__kaart { border: var(--hairlijn) solid var(--papier-lijn); }
.held__zij { border-left: var(--hairlijn) solid var(--papier-lijn); }

/* Zelfde selectors als de donkere regels in basis.css; dit bestand laadt
 * later en wint, zodat de held op elke pagina licht staat. */
.held--donker .held__kaart {
  background: var(--wit);
  border-color: var(--papier-lijn);
  color: var(--inkt);
}
.held--donker h1 { color: var(--inkt); }
.held--donker .held__tekst p { color: var(--tekstgrijs); }
.held--donker .kernregel { color: var(--inkt); }
.held--donker .held__zij { border-color: var(--papier-lijn); }
.held--donker .feitenstrook { border-top-color: var(--papier-lijn); }
.held--donker .feitenstrook > div { border-color: var(--papier-lijn); }
.held--donker .feitenstrook .feit-w { color: var(--inkt); }
.held--donker .feitenstrook .feit-l { color: var(--tekstgrijs); }
.held--donker .knop--tweede {
  background: var(--wit);
  color: var(--inkt);
  border-color: var(--inkt);
}
.held--donker .knop--tweede:hover {
  background: var(--groen-diep);
  border-color: var(--groen-diep);
  color: var(--wit);
}
@media (max-width: 860px) {
  .held__zij {
    border-top-width: var(--hairlijn);
    border-top-color: var(--papier-lijn);
  }
}

/* Het feitenpaneel in de held van de dienstpagina's: licht met groene kop. */
.held__feiten {
  background: var(--wit);
  color: var(--inkt);
  border-top: 3px solid var(--groen);
}
.held__feiten .feitenlijst li { border-color: var(--papier-lijn); }
.held__feiten .feitenlijst .feit-naam { color: var(--tekstgrijs); }
.held__feiten .feitenlijst .feit-waarde { color: var(--inkt); }

/* ---------- Donkere secties worden zacht papier ---------- */

.sectie--donker {
  background: var(--papier-zacht);
  color: var(--inkt);
}
.sectie--donker h1, .sectie--donker h2, .sectie--donker h3 { color: var(--inkt); }
.sectie--donker p { color: var(--tekstgrijs); }
.sectie--donker .kernregel { color: var(--inkt); }
.sectie--donker a { color: var(--groen-diep); }
.sectie--donker a:hover { color: var(--inkt); }
.sectie--donker .fotovak { border-color: var(--inkt); }
.sectie--donker .knop--tweede {
  background: var(--wit);
  color: var(--inkt);
  border-color: var(--inkt);
}
.sectie--donker .knop--tweede:hover {
  background: var(--groen-diep);
  border-color: var(--groen-diep);
  color: var(--wit);
}

/* Het groene vlak wordt een licht kader met groene kop; drukgroen op
 * papier-zacht is 4.84 en inkt 11.11. */
.groen-vlak {
  background: var(--papier-zacht);
  color: var(--inkt);
  border: var(--hairlijn) solid var(--papier-lijn);
  border-top: 3px solid var(--groen);
}
.groen-vlak h2, .groen-vlak h3 { color: var(--inkt); }
.groen-vlak p { color: var(--tekstgrijs); }
.groen-vlak a { color: var(--groen-diep); }
.groen-vlak .knop {
  background: var(--groen-diep);
  color: var(--wit);
  border-color: var(--groen-diep);
}
.groen-vlak .knop:hover {
  background: var(--inkt);
  border-color: var(--inkt);
  color: var(--wit);
}
.groen-vlak .knop--tweede {
  background: var(--wit);
  color: var(--inkt);
  border-color: var(--inkt);
}
.groen-vlak .knop--tweede:hover {
  background: var(--inkt);
  border-color: var(--inkt);
  color: var(--wit);
}

/* De cijferband wordt een lichte hairlijntabel. */
.cijferband {
  border-top: none;
  background: transparent;
  gap: 0;
}
.cijferband > div {
  background: transparent;
  border-left: var(--hairlijn) solid var(--papier-lijn);
  padding-block: 0.5rem;
}
.cijferband .cijfer-w {
  color: var(--groen-diep);
  text-transform: none;
  font-weight: 800;
}
.cijferband .cijfer-l { color: var(--tekstgrijs); }

/* ---------- Componenten ---------- */

.feitenstrook { border-top: var(--hairlijn) solid var(--papier-lijn); }
.feitenstrook .feit-w {
  text-transform: none;
  font-weight: 800;
  font-size: 1.45rem;
}

.feitenlijst .feit-waarde { text-transform: none; font-weight: 800; }

.stappenlijst { gap: 0; }
.stappenlijst > li {
  border: none;
  border-top: var(--hairlijn) solid var(--papier-lijn);
  background: transparent;
  padding: 1.4rem 0;
}
.stappenlijst > li:last-child {
  border-bottom: var(--hairlijn) solid var(--papier-lijn);
}
/* 1.8rem is boven de grens voor grote tekst; merkgroen mag daar. */
.stappenlijst .stapnr {
  border-right: none;
  font-weight: 800;
  color: var(--groen);
}

.vinkjes li::before {
  border: none;
  width: 0.6rem;
  height: 0.6rem;
  top: 1.05rem;
}

.stappenband { background: var(--papier-lijn); border-color: var(--papier-lijn); }
.stappenband .stap-nr { font-weight: 800; }

.groepknop { border-width: var(--hairlijn); }
.groepknop .tijd { font-weight: 800; }

th { color: var(--groen-diep); }
thead th { border-bottom: var(--hairlijn) solid var(--inkt); color: var(--groen-diep); }
tbody tr:last-child th,
tbody tr:last-child td { border-bottom: var(--hairlijn) solid var(--inkt); }

.prijslijst { border-top: var(--hairlijn) solid var(--inkt); }
.prijslijst .prijs-naam { text-transform: none; font-weight: 800; font-size: 1.15rem; }
.prijslijst .prijs-w { text-transform: none; font-weight: 800; font-size: 1.15rem; }

.prijsregel { text-transform: none; font-weight: 800; font-size: 1.35rem; }

.dienstkaart__titel { letter-spacing: -0.005em; }

.contactlijst a { font-weight: 600; font-size: 1.25rem; }

.melding { border-width: var(--hairlijn); }
.invulvak { border-width: var(--hairlijn); }

/* ---------- Voet: inkt zonder groene rand, stille kolomkoppen ---------- */

.voet { border-top: none; }
.voet h2 {
  font-family: var(--f-label);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}