/* Lindeboom Administratie, voorbeeld van TAQQLE (15 november 2026). Eigen stijl, geen framework.
   Merk: bosgroen #1f3a2d en okergoud #e3b04b, letter Figtree (zelf gehost). Rustig en zakelijk, als een nette prijslijst op papier. */

@font-face { font-family: "Figtree"; src: url("/assets/font/figtree-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Figtree terugval"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 98%; ascent-override: 96%; descent-override: 25%; line-gap-override: 0%; }

:root {
  --groen: #1f3a2d;       /* hoofdkleur: knop, slot, koppen-accent */
  --groen-2: #2c4d3c;
  --goud: #e3b04b;        /* accent: alleen vlak, rand, punt; tekst erop in inkt (8,3:1) */
  --goud-zacht: #f6e8c6;
  --papier: #fbfaf6;      /* grond */
  --wit: #ffffff;
  --inkt: #18211c;        /* tekst, 15:1 op papier */
  --zacht: #4f5952;       /* secundaire tekst, 7:1 op papier */
  --lijn: #e4dfd2;        /* decoratieve lijnen */
  --veldrand: #7c8279;    /* rand van velden, 3,9:1 op wit */
  --link: #1f3a2d;
  --fout: #b42318;
  --focus: #1f3a2d;
  --op-groen-zacht: #c9d7cd; /* 8,3:1 op groen */

  --letter: "Figtree", "Figtree terugval", Arial, sans-serif;
  --hoek: 12px;
  --breed: 1180px;
  --rand: clamp(16px, 4vw, 40px);

  --t-klein: 0.9375rem;
  --t-basis: 1.0625rem;
  --t-m: 1.25rem;
  --t-l: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  --t-xl: clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem);
  --t-kop: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--papier); color: var(--inkt); font-family: var(--letter); font-size: var(--t-basis); line-height: 1.6; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
p { margin: 0; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.slot :focus-visible, .voet :focus-visible { outline-color: var(--goud); }
.binnen { width: 100%; max-width: var(--breed); margin: 0 auto; padding: 0 var(--rand); }

.overslaan { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--wit); color: var(--inkt); padding: 12px 16px; border-radius: 8px; font-weight: 600; }
.overslaan:focus { top: 12px; }

/* ---------- Knoppen ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 26px; border: 0; border-radius: 999px; background: var(--groen); color: var(--wit); font: 700 1.0625rem/1.2 var(--letter); text-decoration: none; cursor: pointer; transition: background-color .15s ease; }
.knop:hover { background: var(--groen-2); }
.knop:active { transform: translateY(1px); }
.knop--klein { min-height: 44px; padding: 8px 18px; font-size: 1rem; }
.knop--vol { width: 100%; }
.knop--goud { background: var(--goud); color: var(--inkt); }
.knop--goud:hover { background: #ecc26b; }
.knop[disabled] { opacity: .7; cursor: progress; }

/* ---------- Seizoensregel en balk ---------- */
.seizoen { background: var(--goud); text-align: center; font-size: var(--t-klein); font-weight: 600; }
.seizoen a { display: block; padding: 11px var(--rand); color: var(--inkt); text-decoration: none; min-height: 44px; }
.seizoen a:hover { text-decoration: underline; }
.balk { border-bottom: 1px solid var(--lijn); background: var(--papier); }
.balk__binnen { max-width: var(--breed); margin: 0 auto; padding: 0 var(--rand); min-height: 68px; display: flex; align-items: center; gap: 12px; }
.merk { display: inline-flex; align-items: center; gap: 10px; color: var(--groen); text-decoration: none; min-height: 44px; }
.merk__teken { width: 34px; height: 34px; flex: none; }
.merk__naam { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1; }
.merk__sub { font-weight: 500; color: var(--zacht); letter-spacing: 0; }
.menu { margin-left: auto; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--inkt); text-decoration: none; font-weight: 600; font-size: 1rem; }
.menu a:hover { text-decoration: underline; }
.menu__breed { display: none; }
.balk__knop { display: none; }
@media (max-width: 440px) { .merk__sub { display: none; } }
@media (min-width: 760px) { .balk__knop { display: inline-flex; } }
@media (min-width: 1000px) { .menu__breed { display: block; } .menu { margin-right: 8px; } }

/* ---------- Kop ---------- */
.kop { padding: 28px 0 40px; }
.kop__binnen { max-width: var(--breed); margin: 0 auto; padding: 0 var(--rand); display: grid; gap: 28px; grid-template-areas: "tekst" "rechts" "bewijs"; grid-template-columns: minmax(0, 1fr); }
.kop__tekst { grid-area: tekst; display: grid; gap: 18px; align-content: start; }
.kop__rechts { grid-area: rechts; }
.persoon { display: flex; align-items: center; gap: 14px; }
.persoon__foto { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--papier), 0 0 0 5px var(--goud); }
.persoon__tekst { display: grid; line-height: 1.3; }
.persoon__tekst span { color: var(--zacht); font-size: var(--t-klein); }
.kop__titel { font-size: var(--t-kop); line-height: 1.08; color: var(--groen); font-weight: 800; letter-spacing: -0.025em; }
.kop__intro { font-size: var(--t-basis); max-width: 34em; }
.mini { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.mini li { display: grid; gap: 2px; padding: 12px 14px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--hoek); align-content: start; }
.mini__naam { font-weight: 700; }
.mini__prijs { font-weight: 800; font-size: 1.625rem; line-height: 1.1; color: var(--groen); font-variant-numeric: tabular-nums; }
.mini__prijs small { font-size: .875rem; font-weight: 500; color: var(--zacht); }
.mini__wat { color: var(--zacht); font-size: .9375rem; line-height: 1.35; hyphens: auto; overflow-wrap: break-word; }
.mini__noot { color: var(--zacht); font-size: var(--t-klein); margin-top: -6px; }
.kop__beeld { display: none; margin: 0; }
.bewijs { grid-area: bewijs; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bewijs li { position: relative; padding-left: 28px; }
.bewijs li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 12px; border-radius: 50% 0 50% 50%; background: var(--goud); transform: rotate(-45deg); }

@media (min-width: 960px) {
  .kop { padding: 48px 0 72px; }
  .kop__binnen { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "tekst rechts" "bewijs rechts"; grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 32px; align-items: start; }
  .kop__tekst { gap: 22px; padding-top: 12px; }
  .kop__intro { font-size: var(--t-m); }
  .kop__beeld { display: block; border-radius: var(--hoek) var(--hoek) 0 0; overflow: hidden; }
  .kop__beeld img { width: 100%; height: 220px; object-fit: cover; object-position: 60% 22%; }
  .kop__rechts .blad { margin-top: -40px; position: relative; }
  .bewijs { grid-template-columns: 1fr 1fr; column-gap: 28px; padding-top: 24px; border-top: 1px solid var(--lijn); }
}

/* ---------- Formulier ---------- */
.blad { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--hoek); padding: 24px 20px 20px; box-shadow: 0 24px 48px -28px rgba(31, 58, 45, .35); }
.blad__titel { font-size: var(--t-l); color: var(--groen); }
.blad__intro { color: var(--zacht); margin-top: 6px; }
.blad__onder { margin-top: 12px; color: var(--zacht); font-size: var(--t-klein); text-align: center; }
.blad__noot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lijn); color: var(--zacht); font-size: .875rem; }
.formulier { display: grid; gap: 16px; margin-top: 18px; }
.veld { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.veld__label { font-weight: 600; font-size: 1rem; padding: 0; }
.veld__hulp { color: var(--zacht); font-size: .9375rem; margin-top: -4px; }
.veld__invoer { width: 100%; min-height: 50px; padding: 10px 14px; border: 1.5px solid var(--veldrand); border-radius: 10px; background: var(--wit); color: var(--inkt); font: 400 1.0625rem/1.3 var(--letter); }
.veld__invoer:hover { border-color: var(--inkt); }
.veld__invoer:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--inkt); }
.veld__invoer[aria-invalid="true"] { border-color: var(--fout); border-width: 2px; }
.veld__fout { color: var(--fout); font-weight: 600; font-size: .9375rem; display: flex; gap: 6px; }
.veld__fout::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--fout); color: var(--wit); font-size: .75rem; font-weight: 800; }
.keuzes { display: grid; grid-template-columns: 1.35fr .8fr 1fr; gap: 8px; }
.keuze { position: relative; }
.keuze input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.keuze span { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 8px 6px; border: 1.5px solid var(--veldrand); border-radius: 999px; font-weight: 600; background: var(--wit); font-size: 1rem; }
.keuze input:hover + span { border-color: var(--inkt); }
.keuze input:checked + span { background: var(--groen); border-color: var(--groen); color: var(--wit); }
.keuze input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.veld[aria-invalid="true"] .keuze span { border-color: var(--fout); }
.samenvatting { padding: 14px 16px; border: 2px solid var(--fout); border-radius: 10px; background: #fdf3f2; }
.samenvatting:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.samenvatting__titel { font-weight: 700; color: var(--fout); }
.samenvatting__lijst { margin: 6px 0 0; padding-left: 20px; }
.samenvatting__lijst a { color: var(--fout); font-weight: 600; display: inline; }
.samenvatting__lijst li { padding: 3px 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 960px) { .blad { padding: 28px 28px 22px; } }

/* ---------- Pakketten ---------- */
.pakketten { background: var(--wit); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding: 56px 0; }
.sectiekop { display: grid; gap: 8px; margin-bottom: 28px; }
.sectiekop h2 { font-size: var(--t-xl); color: var(--groen); }
.sectiekop p { color: var(--zacht); }
.pakketlijst { display: grid; gap: 16px; }
.pakket { border: 1px solid var(--lijn); border-radius: var(--hoek); background: var(--papier); overflow: hidden; }
.pakket__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 18px 20px; border-bottom: 1px solid var(--lijn); background: var(--wit); }
.pakket__kop h3 { font-size: var(--t-l); }
.pakket__prijs { color: var(--zacht); }
.pakket__prijs strong { font-size: 2rem; font-weight: 800; color: var(--groen); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pakket__inhoud { margin: 0; padding: 4px 20px 8px; }
.pakket__inhoud > div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px dashed var(--lijn); }
.pakket__inhoud > div:last-child { border-bottom: 0; }
.pakket__inhoud dt { font-weight: 700; font-size: .9375rem; }
.pakket__inhoud dd { margin: 0; }
.pakket__apart dd { color: var(--zacht); }
.pakketten__meer { margin: 20px 0 20px; }
@media (min-width: 560px) { .pakket__inhoud > div { grid-template-columns: 8.5rem 1fr; gap: 16px; } }
@media (min-width: 900px) {
  .pakketten { padding: 88px 0; }
  .pakketlijst { grid-template-columns: 1fr 1fr; gap: 24px; }
  .sectiekop { grid-template-columns: 1fr 1fr; align-items: end; gap: 24px; }
}

/* ---------- Marieke ---------- */
.marieke { padding: 56px 0; }
.marieke__binnen { display: grid; gap: 28px; }
.marieke__beeld { margin: 0; }
.marieke__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 30%; border-radius: var(--hoek); }
.marieke__beeld figcaption { margin-top: 8px; color: var(--zacht); font-size: var(--t-klein); }
.marieke__tekst { display: grid; gap: 18px; align-content: center; }
.marieke__tekst h2 { font-size: var(--t-xl); color: var(--groen); }
.marieke__ik { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.4; font-weight: 500; padding-left: 20px; border-left: 4px solid var(--goud); }
.marieke__wie { display: grid; line-height: 1.35; }
.marieke__wie span { color: var(--zacht); font-size: var(--t-klein); }
@media (min-width: 960px) {
  .marieke { padding: 96px 0; }
  .marieke__binnen { grid-template-columns: 7fr 5fr; gap: 64px; }
}

/* ---------- Overstappen ---------- */
.overstap { padding: 0 0 56px; }
.overstap__binnen { display: grid; gap: 28px; }
.overstap__tekst { display: grid; gap: 16px; align-content: center; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--hoek); padding: 28px 24px; }
.overstap__tekst h2 { font-size: var(--t-xl); color: var(--groen); }
.overstap__groot { font-size: var(--t-m); max-width: 28em; }
.overstap__datum { display: grid; gap: 6px; padding: 14px 16px; background: var(--goud-zacht); border-radius: 10px; font-weight: 600; }
.overstap__label { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); }
.overstap__beeld { margin: 0; justify-self: center; max-width: min(240px, 70vw); }
@media (min-width: 960px) { .overstap__beeld { max-width: 320px; } }
.overstap__beeld img { border-radius: var(--hoek); transform: rotate(-2deg); box-shadow: 0 24px 40px -26px rgba(24, 33, 28, .5); }
.overstap__beeld figcaption { margin-top: 14px; text-align: center; font-weight: 700; color: var(--groen); font-size: 1.0625rem; }
@media (min-width: 960px) {
  .overstap { padding: 0 0 96px; }
  .overstap__binnen { grid-template-columns: 1fr 320px; gap: 72px; align-items: center; }
  .overstap__tekst { padding: 44px 48px; }
}

/* ---------- Slot en voet ---------- */
.slot { background: var(--groen); color: var(--wit); padding: 56px 0; }
.slot__binnen { display: grid; gap: 16px; justify-items: start; }
.slot h2 { font-size: var(--t-xl); }
.slot p { color: var(--op-groen-zacht); max-width: 34em; }
@media (min-width: 960px) { .slot { padding: 80px 0; } }
.voet { background: #172c22; color: var(--op-groen-zacht); padding: 28px 0 36px; font-size: var(--t-klein); }
.voet__binnen { display: grid; gap: 8px; }
.voet__merk { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--wit); }
.voet__plaats::before { content: "·"; margin-right: 8px; }
.voet a { color: var(--wit); }

/* ---------- Bedankt ---------- */
.dank { padding: 40px 0 56px; }
.dank__binnen { display: grid; gap: 32px; }
.dank__kop { display: grid; gap: 18px; align-content: start; }
.dank__vink { width: 52px; height: 52px; border-radius: 50%; background: var(--goud); display: grid; place-items: center; }
.dank__vink svg { width: 28px; height: 28px; fill: none; stroke: var(--inkt); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dank__titel { font-size: var(--t-kop); color: var(--groen); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; }
.dank__lead { font-size: var(--t-m); max-width: 30em; }
.dank__brief { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--hoek); padding: 22px 22px 24px; box-shadow: 0 24px 48px -28px rgba(31, 58, 45, .3); display: grid; gap: 18px; align-self: start; }
.dank__brief .persoon__foto { width: 56px; height: 56px; }
.dank__brief h2 { font-size: var(--t-m); }
.stappen { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 0; }
.stappen li { counter-increment: s; position: relative; padding: 0 0 20px 44px; }
.stappen li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--papier); border: 1.5px solid var(--groen); color: var(--groen); font-weight: 700; font-size: .875rem; }
.stappen li.is-klaar::before { content: "✓"; background: var(--groen); color: var(--wit); }
.stappen li:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: 32px; bottom: 4px; width: 1.5px; background: var(--lijn); }
.stappen h3 { font-size: 1.0625rem; }
.stappen p { color: var(--zacht); }
.dank__aanvraag { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0; padding: 14px 18px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; max-width: 26rem; }
.dank__aanvraag dt { color: var(--zacht); }
.dank__aanvraag dd { margin: 0; font-weight: 700; }
.dank__tip { padding: 14px 16px; background: var(--goud-zacht); border-radius: 10px; }
.dank__terug { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.dank__terug a:not(.knop) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (min-width: 960px) {
  .dank { padding: 72px 0 96px; }
  .dank__binnen { grid-template-columns: 6fr 5fr; gap: 72px; }
  .dank__brief { padding: 30px 32px 32px; }
}

/* ---------- 404 ---------- */
.los { padding: 72px var(--rand); max-width: var(--breed); margin: 0 auto; display: grid; gap: 18px; justify-items: start; }
.los h1 { font-size: var(--t-xl); color: var(--groen); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.alleen-breed { display: none; }
@media (min-width: 480px) { .alleen-breed { display: inline; } }