/* ==========================================================================
   Amelung. - Website (één pagina)
   Gebruikt de tokens uit styles.css. Bouwt op dezelfde patronen als
   huisstijl.css: maatlijn, knoppen, lijsten, badges.
   Structuur en bronnen: docs/amelung-website-outline.md.
   Groen komt uit tokens/colors.css en benadrukt alleen positieve
   resultaten: een enkel getal of woord.
   ========================================================================== */

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:root {
  --white: #FFFFFF;
  --fs-body: 17px;   /* stijlgids: lopende tekst nooit kleiner dan 17px */
  --fs-klein: 15px;
  --fs-bijschrift: 14px;
  --fs-meta: 12px;
  --ls-meta: 0.08em;
  --line-hair: 1px;
  --line-base: 2px;
  --page-marge: var(--space-9);
  --rule-tick: 13px;
  --rule-lead: 32px;
  --rule-gap: 12px;
  --rule-label: 12px;
}

/* --- Typografie ------------------------------------------------------------ */

.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--text-caption);
}

.woordmerk {
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.woordmerk .punt { color: var(--accent); }

.woordmerk-omschrijving {
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-body);
}

.sectiekop {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 28px 0 12px;
  text-wrap: pretty;
}

.subkop {
  font: var(--type-h2);
  margin: 0 0 var(--space-2);
}

.lead {
  font: var(--type-body);
  color: var(--text-body);
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.prose {
  font: var(--type-body);
  color: var(--text-body);
  max-width: var(--measure);
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}
.prose strong { color: var(--text-heading); }

/* Vakterm (kennisexpert, kennisleider): de kernbelofte, in de signaalkleur.
   Ook binnen .prose, dat zijn eigen kleur op strong zet. */
.term,
.prose .term { color: var(--accent); }

.noot {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  color: var(--text-caption);
  line-height: 1.6;
  margin-top: var(--space-2);
  max-width: var(--measure);
}

/* --- Maatlijn -------------------------------------------------------------- */

.maatlijn {
  display: flex;
  align-items: center;
  gap: var(--rule-gap);
}

.maatlijn__tick {
  flex: none;
  width: var(--line-base);
  height: var(--rule-tick);
  background: var(--border-subtle);
}

.maatlijn__aanloop {
  flex: 0 0 var(--rule-lead);
  height: 1px;
  background: var(--border-subtle);
}

.maatlijn__lijn {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.maatlijn__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--rule-label);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-heading);
  white-space: nowrap;
}

.maatlijn--accent .maatlijn__tick:first-child,
.maatlijn--accent .maatlijn__aanloop { background: var(--accent); }

.op-donker .maatlijn__label { color: var(--text-on-dark); }

/* --- Lijsten --------------------------------------------------------------- */

.lijst {
  list-style: none;
  margin: var(--space-3) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
}

.lijst > li {
  display: flex;
  gap: var(--space-2);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-body);
}

.lijst > li::before {
  content: '-';
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-klein);
  color: var(--ink);
}

.lijst--ruim {
  max-width: var(--measure);
  gap: 14px;
}

/* Vinkjes: alleen in de samenwerkingscriteria, op verzoek van Sep. */
.lijst--vink > li::before {
  content: '\2713';
  color: var(--accent);
  font-size: var(--fs-body);
}
.lijst--ruim > li { font: var(--type-body); }

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

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-klein);
  font-weight: 500;
  line-height: 1.2;
  border: 0;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
}

.knop--primair { background: var(--accent); color: var(--text-on-dark); }
.knop--primair:hover,
.knop--primair:focus-visible { background: var(--accent-hover); color: var(--text-on-dark); }

.knop--tertiair {
  background: transparent;
  color: var(--ink);
  border: var(--line-hair) solid var(--ink);
  padding: 11px 23px;
}
.knop--tertiair:hover,
.knop--tertiair:focus-visible { background: var(--ink); color: var(--text-on-dark); }

.knop--groot { padding: 14px 28px; font-size: 16px; }
.knop--klein { min-height: 0; padding: 10px 20px; }

/* Pijl achter de knoptekst: teken uit het mono-register, schuift bij hover. */
.knop__pijl {
  font-family: var(--font-mono);
  margin-left: 10px;
  transition: transform 0.2s ease;
  display: inline-block;
}
.knop:hover .knop__pijl,
.knop:focus-visible .knop__pijl { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .knop__pijl { transition: none; }
  .knop:hover .knop__pijl { transform: none; }
}

/* --- Badges ---------------------------------------------------------------- */

.badge {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: var(--radius);
  align-self: flex-start;
}
.badge--omlijnd { border: var(--line-hair) solid var(--ink); padding: 5px 10px; }
.badge--ink { background: var(--ink); color: var(--text-on-dark); }

/* --- Topbalk: belregel boven de navigatie ---------------------------------- */

.topbalk {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  text-align: center;
  padding: 8px var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
}
.topbalk a {
  color: var(--text-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.topbalk a:hover { color: var(--gray-300); }

/* --- Navigatiebalk --------------------------------------------------------- */

.balk {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface-page);
  border-bottom: var(--line-hair) solid var(--border-subtle);
}

.balk__binnen {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px var(--page-marge);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.balk__merk {
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.balk__merk .woordmerk { font-size: 20px; }
.balk__merk .woordmerk-omschrijving { font-size: 10px; color: var(--text-caption); }

.balk__menu {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}
.balk__menu a {
  font-size: var(--fs-klein);
  color: var(--text-body);
  text-decoration: none;
}
.balk__menu a:hover { color: var(--accent); }
.balk__menu a.knop { color: var(--text-on-dark); }

/* Laadbalk: dun oranje spoor bovenin dat meevult met de scrollpositie. */
.laadbalk {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
}
.laadbalk__vulling { height: 100%; width: 0; background: var(--accent); }

/* --- Secties --------------------------------------------------------------- */

.sectie {
  scroll-margin-top: 88px;
}

.sectie__binnen {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-12) var(--page-marge);
}

.sectie--zand { background: var(--surface-alt); }

/* --- Hero (gecentreerd, met logostrip) ------------------------------------- */

.hero__binnen {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-12) var(--page-marge) var(--space-9);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

.hero__rating {
  font-family: var(--font-mono);
  font-size: var(--fs-bijschrift);
  letter-spacing: var(--ls-meta);
  color: var(--text-body);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Groene stip: de uitzondering op --radius 0, een stip is rond. */
.hero__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--groen);
  animation: hero-dot 2s ease-in-out infinite;
}

@keyframes hero-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgb(46 122 82 / 0.45); }
  50%      { box-shadow: 0 0 0 6px rgb(46 122 82 / 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__dot { animation: none; }
}

.hero__sterren {
  color: var(--accent);
  font-size: var(--fs-bijschrift);
  letter-spacing: 0.15em;
}

.hero__belofte {
  font: var(--type-display);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  max-width: 800px;
  text-wrap: pretty;
}
.hero__belofte .punt { color: var(--accent); }

.hero__toelichting {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
  max-width: 640px;
  text-wrap: pretty;
}

.hero__acties {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* Logostrip: drie logo's zichtbaar, schuift per positie door. */
.vertrouwd {
  margin-top: var(--space-6);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.strip {
  width: min(720px, 100%);
  overflow: hidden;
  border-top: var(--line-hair) solid var(--border-hairline);
  border-bottom: var(--line-hair) solid var(--border-hairline);
}

/* Standaard breken de logo's af op meerdere regels, zodat ze alle vijf te
   zien zijn. Er passen er maar drie naast elkaar, dus zonder deze regel
   zouden Moves en Eco-Dispo buiten de strook vallen en nooit verschijnen -
   en dat gebeurt in twee gevallen: als de bezoeker "beweging beperken" aan
   heeft staan, en als JavaScript niet draait. In beide gevallen schuift de
   strook niet door.
   Pas als het script het doorschuiven daadwerkelijk start, zet het
   `is-schuivend` en gaat alles op één rij staan. */
.strip__track {
  display: flex;
  flex-wrap: wrap;
  will-change: transform;
}
.strip.is-schuivend .strip__track { flex-wrap: nowrap; }

.strip__item {
  flex: 0 0 33.3333%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-2);
  min-height: 96px;
}

.strip__item img {
  max-height: 44px;
  max-width: 75%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
}

/* --- Aanpak ---------------------------------------------------------------- */

.stappen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: var(--line-hair) solid var(--border-subtle);
  margin-top: var(--space-4);
}

.stap {
  background: var(--surface-page);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sectie--zand .stap { background: var(--surface-alt); }
.stap__icoon {
  display: block;
  width: 28px;
  height: 28px;
  color: var(--ink);
}
.stap__icoon svg { width: 100%; height: 100%; display: block; }
.stap__nummer {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  color: var(--accent);
}
.stap__kop { font-size: 18px; font-weight: 600; margin: 0; }
.stap__tekst { font-size: var(--fs-body); line-height: 1.6; color: var(--text-body); margin: 0; }

/* --- Waarom: tekst links, 95%-meter rechts --------------------------------- */

.waarom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-4);
}

.meter {
  margin: 0;
  justify-self: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: 220px;
  text-align: center;
}

.meter__staaf {
  width: 72px;
  height: 180px;
  border: var(--line-hair) solid var(--ink);
  background: var(--surface-page);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 4px;
}

.meter__vulling {
  height: 0%;
  background: var(--delft);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  transition: height 1.2s ease;
}
.meter__vulling.is-vol { height: 95%; }

.meter__waarde {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--text-on-dark);
  padding-top: 8px;
}

.meter figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  color: var(--text-caption);
  line-height: 1.6;
}

/* --- Resultaten (cases, gecentreerd) --------------------------------------- */

.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.kaart {
  border: var(--line-hair) solid var(--border-subtle);
  border-top: var(--line-base) solid var(--ink);
  padding: 28px;
  background: var(--surface-page);
}
.kaart__getal {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 500;
}
.kaart__getal--groen { color: var(--groen); }
.kaart__omschrijving {
  font-size: var(--fs-klein);
  font-weight: 600;
  margin-top: 4px;
}
.kaart__tekst {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-body);
  margin: 10px 0 0;
}
.kaart .kicker { display: block; margin-bottom: var(--space-2); }
/* Vaste band waarin elk logo gecentreerd hangt, ongeacht zijn verhouding. */
.kaart__logovak {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.kaart__logo {
  display: block;
  max-height: 100%;
  max-width: 70%;
  width: auto;
  object-fit: contain;
}

/* Langgerekte logo's kleiner zetten, zodat de visuele breedte gelijk oogt. */
.kaart__logo--breed { max-height: 19px; }

/* --- Gecentreerde secties -------------------------------------------------- */

.sectie--midden .sectie__binnen { text-align: center; }
.sectie--midden .kaart { text-align: center; }

.maatlijn--midden .maatlijn__lijn { background: var(--border-subtle); }
.maatlijn--midden .maatlijn__tick:first-child { background: var(--accent); }

.lead--midden,
.prose--midden { margin-left: auto; margin-right: auto; }

/* --- Diensten -------------------------------------------------------------- */

.diensten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
  align-items: start;
}

.dienst {
  border: var(--line-hair) solid var(--border-subtle);
  border-top: var(--line-base) solid var(--ink);
  background: var(--surface-page);
  padding: var(--space-4);
}
.dienst__kop { font: var(--type-h2); margin: 0 0 10px; }
.dienst__intro { font-size: var(--fs-body); line-height: 1.6; color: var(--text-body); margin: 0; }
.dienst .lijst { margin-bottom: 0; }

/* --- Team ------------------------------------------------------------------ */

.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: var(--space-6) auto 0;
  max-width: 900px;
}

.lid { margin: 0; }
.lid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border: var(--line-hair) solid var(--border-subtle);
}
.lid figcaption {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.lid .li-link { margin: 4px 0 0; }
.lid__naam { font-size: var(--fs-klein); font-weight: 600; color: var(--ink); }
.lid__rol {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  color: var(--text-caption);
}

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

.pakketten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
  align-items: stretch;
}


.pakket {
  border: var(--line-hair) solid var(--border-subtle);
  border-top: var(--line-base) solid var(--ink);
  background: var(--surface-page);
  padding: var(--space-6) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Uitgelicht pakket: oranje omlijning en een lint, zodat de keuze duidelijk is. */
.pakket--uitgelicht {
  position: relative;
  border-color: var(--accent);
  outline: var(--line-base) solid var(--accent);
  outline-offset: -2px;
}

.pakket__lint {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--accent);
  color: var(--text-on-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  padding: 6px 12px;
}

.pakket--uitgelicht .pakket__prijs { color: var(--accent); }
.pakket--uitgelicht .lijst > li::before { color: var(--accent); }

/* Knop onderaan elke kaart, op gelijke hoogte doordat de lijst uitrekt. */
.pakket .lijst { flex: 1; }
.pakket .knop { align-self: flex-start; margin-top: var(--space-2); }
.pakket__prijs { font-family: var(--font-mono); font-size: 30px; font-weight: 500; }
.pakket__prijs span { font-size: var(--fs-bijschrift); color: var(--text-caption); }
.pakket__intro { font-size: var(--fs-body); line-height: 1.6; color: var(--text-body); margin: 0; }
.pakket .lijst { margin: var(--space-1) 0 0; }
/* Beide kaarten delen dezelfde rijen, zodat badge, prijs, intro, lijst en
   knop op gelijke hoogte staan ook als de tekst anders afbreekt. */
@supports (grid-template-rows: subgrid) {
  .pakketten { grid-template-rows: auto auto auto 1fr auto; }
  .pakket {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
  }
  .pakket .lijst { flex: none; align-self: start; }
  .pakket .knop { justify-self: start; align-self: end; }
}

/* --- Match: criteria links, matchmeter rechts ------------------------------ */

.match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--space-6);
  align-items: start;
}

/* De sectiekop staat in de linkerkolom, zodat de vraag rechts ernaast
   op dezelfde hoogte begint. */
.match .sectiekop { margin-top: 28px; }

.match .lijst { margin-top: 0; }

.match__figuur {
  margin: 0;
  justify-self: center;
  align-self: start;
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 260px;
  max-width: 100%;
  text-align: center;
  align-items: center;
}
.match__figuur img {
  width: 190px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border: var(--line-hair) solid var(--border-subtle);
}
.match__vraag { font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; }
.match__figuur .knop { justify-content: center; }

/* --- Vragen: uitklapbaar in twee kolommen ---------------------------------- */

.vragen {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  align-items: start;
}

.vraag {
  border: var(--line-hair) solid var(--border-subtle);
  border-top: var(--line-base) solid var(--ink);
  background: var(--surface-page);
}

.vraag summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: 18px 22px;
}
.vraag summary::-webkit-details-marker { display: none; }

.vraag__kop { font-size: 17px; font-weight: 600; margin: 0; }

.vraag__teken {
  flex: none;
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
  transition: transform 0.2s ease;
}
.vraag[open] .vraag__teken { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .vraag__teken { transition: none; }
}

.vraag__tekst {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
  padding: 0 22px 18px;
}

/* --- Slot (kennismaking) --------------------------------------------------- */

.slot { background: var(--surface-dark); color: var(--text-on-dark); }

.slot__binnen {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-12) var(--page-marge);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.slot__kolom {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  max-width: var(--measure);
}

.slot__kop {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  text-wrap: pretty;
}

.slot__tekst {
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
  max-width: var(--measure);
  color: var(--gray-300);
  text-wrap: pretty;
}

/* Ingebedde boekingswidget: lichtvlak op het donkere slot, zodat de kaart
   uit de tool (die zelf al inkt-omlijnd is) niet tegen een donkere rand
   botst. De hoogte komt van postMessage vanuit de widget zelf.
   960px is bewust breder dan de paragraaf: de widget heeft zelf twee
   omslagpunten (zijpaneel/kalender, en kalender/tijden) die alletwee
   minstens ~640px eigen ruimte nodig hebben; smaller dan dit stapelt
   alles onder elkaar en wordt de widget onnodig langwerpig. */
.slot__embedvak {
  max-width: 960px;
  background: var(--paper);
  padding: var(--space-3);
}
.slot__embed {
  display: block;
  width: 100%;
  border: 0;
}

/* --- LinkedIn ---------------------------------------------------------------
   Het merkteken van LinkedIn, in inkt zodat het binnen het palet blijft.
   ---------------------------------------------------------------------------- */

.li-icoon {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.li-link {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--ink);
  vertical-align: -3px;
  margin-left: var(--space-1);
}
.li-link:hover,
.li-link:focus-visible { color: var(--accent); }

.op-donker .li-link { color: var(--text-on-dark); }
.op-donker .li-link:hover { color: var(--accent); }

.li-lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-caption);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--fs-klein);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.li-lockup .li-icoon { width: 18px; height: 18px; }
.li-lockup:hover,
.li-lockup:focus-visible { color: var(--accent); }

/* --- Footer ---------------------------------------------------------------- */

.colofon {
  border-top: var(--line-base) solid var(--ink);
}

.colofon__binnen {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px var(--page-marge) var(--space-6);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--text-caption);
}

/* --- Responsief ------------------------------------------------------------ */

@media (max-width: 1100px) {
  :root { --page-marge: 40px; }
  .stappen { grid-template-columns: 1fr 1fr; }
  .team { grid-template-columns: repeat(3, 1fr); }
  .cases { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .vragen { grid-template-columns: 1fr; }
  .sectie--midden .cases { margin-left: auto; margin-right: auto; }
}

/* --- Beweging: reveal, meetlijn, hover ------------------------------------
   Toegevoegd augustus 2026 na onderzoek naar tien bureausites; de
   onderbouwing en de gemeten waarden staan in
   docs/amelung-website-outline.md §6. Alles staat bewust bij elkaar, zodat
   het in één keer terug te draaien is.

   Let op de opzet: het verbergen gebeurt uitsluitend binnen .js-beweging,
   een klasse die het script zelf op <html> zet. Laadt het script niet, of
   valt het om, dan staat alles gewoon zichtbaar. Nooit onzichtbare inhoud
   door een animatie - dat is de valkuil waar Leadbird en Searchlab wel in
   zitten.
--------------------------------------------------------------------------- */

/* Secties komen op bij binnenkomst. 0,6s en 20px: het midden van wat de
   onderzochte sites doen (0,5-0,7s, 24-40px). */
.js-beweging .onthul {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-beweging .onthul.is-zichtbaar { opacity: 1; transform: none; }

/* De meetlijn tekent zichzelf: de lijnstukken schalen open vanaf links, het
   label en de ticks komen daarna op. scaleX in plaats van width, zodat de
   browser niets hoeft te herberekenen. */
.js-beweging .maatlijn__aanloop,
.js-beweging .maatlijn__lijn {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-beweging .maatlijn__lijn { transition-delay: 0.18s; }
.js-beweging .maatlijn__label,
.js-beweging .maatlijn__tick {
  opacity: 0;
  transition: opacity 0.3s ease 0.22s;
}
.js-beweging .maatlijn.is-getekend .maatlijn__aanloop,
.js-beweging .maatlijn.is-getekend .maatlijn__lijn { transform: scaleX(1); }
.js-beweging .maatlijn.is-getekend .maatlijn__label,
.js-beweging .maatlijn.is-getekend .maatlijn__tick { opacity: 1; }

/* Kaarten geven mee bij hover: 2px, en de haarlijn wordt inkt. Geen schaduw,
   want de stijlgids kent er geen. Dezelfde 0,2s als de pijl en het
   plusteken, zodat het als één handschrift leest. */
.kaart,
.dienst,
.pakket {
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.kaart:hover,
.dienst:hover,
.pakket:hover {
  transform: translateY(-2px);
}
/* De uitgelichte Groei-kaart houdt zijn oranje rand: die hoort bij het lint
   "Meest gekozen" en bij de oranje outline eromheen. Zonder deze uitzondering
   wint `.pakket:hover` van `.pakket--uitgelicht` op specificiteit, en dan
   staat er tijdens hover een oranje outline om een grijze rand. */
.kaart:hover,
.dienst:hover,
.pakket:not(.pakket--uitgelicht):hover {
  border-color: var(--ink);
}

/* Links krijgen een lijn die uitgroeit. In de balk zonder de verschuiving
   die het voorbeeld had: die zat op een verticale lijst, en zijwaarts
   schuiven zou hier de hele navigatie laten verspringen. */
.balk__menu a:where(:not(.knop)) {
  position: relative;
  padding-bottom: 3px;
}
.balk__menu a:where(:not(.knop))::after,
.vraag summary .vraag__kop::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: var(--line-hair);
  background: var(--accent);
  transition: width 0.3s ease;
}
.balk__menu a:where(:not(.knop)):hover::after,
.balk__menu a:where(:not(.knop)):focus-visible::after { width: 100%; }

/* Bij de vragen loopt de lijn onder de vraagtekst door, zoals bij het
   voorbeeld dat hem in een uitklaplijst gebruikt. */
.vraag summary .vraag__kop {
  position: relative;
  padding-bottom: 3px;
}
.vraag summary:hover .vraag__kop::after,
.vraag summary:focus-visible .vraag__kop::after { width: 100%; }

/* Het antwoord schuift open in plaats van te springen. interpolate-size
   maakt de hoogte auto animeerbaar; Firefox kent ::details-content nog niet
   en klapt gewoon open zoals voorheen - er gaat niets stuk. */
.vraag { interpolate-size: allow-keywords; }
.vraag::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              content-visibility 0.32s allow-discrete;
}
.vraag[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
  .js-beweging .onthul,
  .js-beweging .onthul.is-zichtbaar { opacity: 1; transform: none; transition: none; }
  .js-beweging .maatlijn__aanloop,
  .js-beweging .maatlijn__lijn { transform: scaleX(1); transition: none; }
  .js-beweging .maatlijn__label,
  .js-beweging .maatlijn__tick { opacity: 1; transition: none; }
  .kaart, .dienst, .pakket { transition: none; }
  .kaart:hover, .dienst:hover, .pakket:hover { transform: none; }
  .balk__menu a:where(:not(.knop))::after,
  .vraag summary .vraag__kop::after { transition: none; }
  .vraag::details-content { transition: none; }
}

/* Afdrukken: alles zichtbaar, ongeacht hoe ver er is gescrold.
   Zonder dit blok drukt elke sectie die de bezoeker nog niet heeft bereikt
   blanco af, want die staat dan nog op opacity 0. Wie de hero leest en
   meteen "Opslaan als PDF" doet, zou zo een document met vrijwel lege
   pagina's krijgen. De tellers worden apart afgehandeld in het script
   onderaan index.html - die zouden anders als 0 afdrukken. */
@media print {
  .js-beweging .onthul,
  .js-beweging .onthul.is-zichtbaar {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js-beweging .maatlijn__aanloop,
  .js-beweging .maatlijn__lijn { transform: scaleX(1) !important; transition: none !important; }
  .js-beweging .maatlijn__label,
  .js-beweging .maatlijn__tick { opacity: 1 !important; transition: none !important; }
  /* De vragenlijst openklappen, anders drukken de antwoorden niet mee af. */
  .vraag::details-content { block-size: auto !important; overflow: visible !important; }
}

@media (max-width: 820px) {
  :root { --page-marge: var(--space-3); }
  .sectie__binnen, .hero__binnen, .slot__binnen { padding-top: var(--space-9); padding-bottom: var(--space-9); }
  .hero__belofte { font-size: 34px; line-height: 1.15; }
  .sectiekop, .slot__kop { font-size: 28px; }
  .balk__menu { gap: var(--space-2); }
  .balk__menu a:where(:not(.knop)) { display: none; }
  .stappen { grid-template-columns: 1fr; }
  .diensten { grid-template-columns: 1fr; }
  .pakketten { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; max-width: 240px; }
  .waarom { grid-template-columns: 1fr; }
  /* .meter blijft op de basisregel justify-self: center - hier eerder
     bewust op start gezet, maar dat wilde Sep juist gecentreerd zien. */
  .match { grid-template-columns: 1fr; }
  /* .match__figuur (foto + knop) blijft ook op de basisregel center,
     zelfde reden als .meter hierboven. */
  .strip__item { min-height: 72px; }
  .strip__item img { max-height: 36px; }
}