/* ===========================================================================
   AVELTO — huisstijl "Zacht & Menselijk"
   Vastgesteld 25 augustus 2026. Dit bestand is de enige bron van waarheid voor
   de vormgeving van avelto.nl en van het werkscherm op mijn.avelto.nl.

   Uitgangspunten:
   - Gedempte natuurtinten, ruime afronding, zachte schaduwen. Vriendelijk
     zonder kinderlijk te worden — het tegengif voor technische hosting.
   - Gedempt betekent niet contrastarm: elke tekstkleur haalt ten minste
     WCAG AA op de ondergrond waar hij voor bedoeld is. De lichtste toegestane
     tekstkleur is --gedempt (#626E67, 4,8:1 op papier). Niets lichter.
   - Nunito Sans draagt alles wat gelezen en bediend wordt. Fraunces heeft
     precies twee taken: het woordmerk en de kernzin. Eén accentstem, verder rust.
   - Bedragen staan in tabulaire cijfers en rechts uitgelijnd, altijd.
   - Statuskleur is nooit de enige drager van betekenis; er staat altijd een
     woord bij, want kleurenblindheid en zwart-witdruk bestaan.

   Het lettertype wordt met een <link> geladen, niet met @import — een @import
   houdt het renderen tegen tot het bestand binnen is:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Nunito+Sans:wght@400;600;700&display=swap">

   Het merk zelf staat in /merk/ (SVG, PNG en favicons) en wordt daar met
   merk/genereer.py uit één bron gemaakt.
   =========================================================================== */

/* --- reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, p, ul, ol, li, figure, blockquote, dl, dt, dd, table, fieldset, legend, pre { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
th { text-align: left; font-weight: 400; }
a { color: inherit; text-decoration: none; }
fieldset { border: 0; min-width: 0; }
:focus-visible { outline: 2.5px solid var(--salie-600); outline-offset: 2px; }

/* --- tokens --- */
:root {
  --salie-900: #22392F; --salie-800: #2A4A3C; --salie-700: #33594A; --salie-600: #3D6B55;
  --salie-500: #4F7A63; --salie-300: #A9C0B2; --salie-150: #CFDED4; --salie-100: #DEE9E1; --salie-50: #EDF3EE;
  --zand-700: #6B5138; --zand-600: #7A5C43; --zand-400: #C9A882; --zand-200: #EADFCD; --zand-100: #F4ECDF;
  --abrikoos-700: #96502F; --abrikoos-600: #B0603A; --abrikoos-300: #EFB490; --abrikoos-200: #F7D3BC; --abrikoos-100: #FBEADF;
  --wit: #FDFCFA; --papier: #F6F3EE; --papier-diep: #EFEAE1;
  --vlak-warm: #FCFAF7; --rij-hover: #FBF9F5;
  --rij-let: #FDF6EE; --rij-let-hover: #FBF0E4; --rij-alarm: #FCF0EC; --rij-alarm-hover: #FAE9E3;
  --inkt: #2E3A33; --tekst: #4A574F; --gedempt: #626E67; --gedempt-diep: #5B6660;
  --rand: #E5DED4; --rand-zacht: #EFE9E0; --rand-sterk: #7F8C85;
  --succes: #2C6349; --succes-vlak: #E4EFE7; --succes-rand: #B6D2C0;
  --waarschuwing: #8A6414; --waarschuwing-vlak: #FAF0DA; --waarschuwing-rand: #E5CE9A;
  --fout: #A03A2E; --fout-vlak: #F9E9E4; --fout-rand: #E5BCAF;
  --info: #2F6478; --info-vlak: #E4EEF1; --info-rand: #B3CDD6;
  --r-xs: 8px; --r-s: 12px; --r-m: 16px; --r-l: 20px; --r-xl: 28px; --r-rond: 999px;
  --schaduw-s: 0 1px 2px rgba(46,58,51,.04), 0 3px 10px rgba(46,58,51,.05);
  --schaduw-m: 0 2px 4px rgba(46,58,51,.035), 0 12px 28px rgba(46,58,51,.07);
  --schaduw-l: 0 4px 10px rgba(46,58,51,.05), 0 26px 56px rgba(46,58,51,.10);
  --ring: 0 0 0 4px rgba(79,122,99,.28);
  --sans: 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
}

/* --- basis --- */
body { background: var(--papier); color: var(--tekst); font-family: var(--sans); font-size: 16.5px; line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { color: var(--inkt); font-weight: 700; line-height: 1.22; letter-spacing: -0.012em; }
h1 { font-size: 40px; } h2 { font-size: 29px; } h3 { font-size: 21px; } h4 { font-size: 17px; letter-spacing: -0.004em; }
p { max-width: 68ch; }
strong, b { font-weight: 700; color: var(--inkt); }
em { font-style: italic; }
small { font-size: 14px; }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; }
.gedempt { color: var(--gedempt); }
.klein { font-size: 14px; line-height: 1.6; }
.micro { font-size: 12.5px; line-height: 1.55; }
.etiket { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gedempt); }
.bedrag { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; white-space: nowrap; }
.rechts { text-align: right; }
.noot { font-size: 14px; line-height: 1.6; color: var(--gedempt); }
.noot--voor { margin: -8px 0 18px; }
.noot--na { margin-top: 16px; }

/* --- layout --- */
/* De pagina volgt het scherm mee tot driekwart van de breedte, met een bodem
   zodat hij op een laptop niet krap wordt en een plafond zodat hij op een
   zeer breed scherm niet uit elkaar valt. Losse tekstblokken houden hun eigen
   maximum van 68 tekens (zie de p-regel hierboven): de kaders worden breder,
   de leesregels niet. */
.wrap { width: 100%; max-width: clamp(1160px, 75vw, 1800px); margin: 0 auto; padding: 0 40px; }
/* Leespaginas (voorwaarden, privacy) blijven bewust smal: daar is de regellengte
   het hele punt. */
.wrap-smal { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 40px; }
.sectie { padding: 84px 0; }
.sectie-strak { padding: 60px 0; }
.vlak-wit { background: var(--wit); }
.stapel-12 > * + * { margin-top: 12px; }
.sectiekop { max-width: 68ch; margin-bottom: 40px; }
.sectiekop h2 { margin-bottom: 12px; }
.sectiekop p { color: var(--gedempt); font-size: 17px; }

/* --- merk --- */
.merk { display: inline-flex; align-items: center; gap: 12px; }
.merk-teken { width: 36px; height: 36px; flex: 0 0 36px; }
.merk-naam { font-family: var(--serif); font-weight: 600; font-size: 27px; color: var(--salie-800); letter-spacing: -0.018em; line-height: 1; padding-top: 2px; }
.merk--groot { gap: 22px; }
.merk--groot .merk-teken { width: 76px; height: 76px; flex-basis: 76px; }
.merk--groot .merk-naam { font-size: 68px; letter-spacing: -0.028em; }
.merk--mini { gap: 8px; }
.merk--mini .merk-teken { width: 22px; height: 22px; flex-basis: 22px; }
.merk--mini .merk-naam { font-size: 17px; }
.merk--licht .merk-naam { color: var(--wit); }

/* --- knoppen --- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 13px 26px; border-radius: var(--r-rond); font-size: 16px; font-weight: 700; letter-spacing: -0.005em; border: 1.5px solid transparent; text-align: center; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.knop:hover { transform: translateY(-1px); }
.knop:active { transform: translateY(0); }
.knop-primair { background: var(--salie-600); color: var(--wit); box-shadow: var(--schaduw-s); }
.knop-primair:hover, .knop-primair.toon-hover { background: var(--salie-700); box-shadow: var(--schaduw-m); }
.knop-primair:focus-visible, .knop-primair.toon-focus { box-shadow: var(--ring); }
.knop-secundair { background: var(--wit); color: var(--salie-700); border-color: var(--salie-500); }
.knop-secundair:hover, .knop-secundair.toon-hover { background: var(--salie-50); border-color: var(--salie-700); }
.knop-tekst { background: none; color: var(--salie-700); padding: 10px 8px; min-height: 40px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; text-decoration-color: var(--salie-500); }
.knop-tekst:hover { color: var(--salie-800); text-decoration-color: var(--salie-700); }
.knop[disabled], .knop:disabled { background: var(--papier-diep); color: var(--gedempt-diep); border-color: var(--rand-sterk); cursor: not-allowed; box-shadow: none; transform: none; }
.knop-klein { min-height: 40px; padding: 8px 18px; font-size: 14.5px; }
.knop-blok { display: flex; width: 100%; }
.link { color: var(--salie-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--salie-500); text-decoration-thickness: 1.5px; }
.link:hover { color: var(--salie-800); text-decoration-color: var(--salie-700); }

/* --- formulier --- */
.veldlabel { display: block; font-size: 15px; font-weight: 700; color: var(--inkt); margin-bottom: 7px; }
.veld { width: 100%; min-height: 54px; padding: 13px 18px; background: var(--wit); border: 1.5px solid var(--rand-sterk); border-radius: var(--r-s); color: var(--inkt); font-size: 16.5px; transition: border-color .16s ease, box-shadow .16s ease; }
.veld::placeholder { color: var(--gedempt-diep); opacity: 1; }
.veld:hover { border-color: var(--salie-500); }
.veld:focus, .veld.toon-focus { outline: none; border-color: var(--salie-600); box-shadow: var(--ring); }
.veld.is-fout { border-color: var(--fout); background: #FFFBFA; }
.veld.is-fout:focus { box-shadow: 0 0 0 4px rgba(160,58,46,.20); }
.hulptekst { display: block; margin-top: 7px; font-size: 13.5px; color: var(--gedempt); }
.foutregel { display: flex; align-items: flex-start; gap: 7px; margin-top: 7px; font-size: 13.5px; font-weight: 600; color: var(--fout); }
.foutregel svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px; }
.vink, .rondje { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; flex: 0 0 24px; margin: 0; background: var(--wit); border: 2px solid var(--rand-sterk); display: grid; place-content: center; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.vink { border-radius: var(--r-xs); }
.rondje { border-radius: 50%; }
.vink::after { content: ""; width: 11px; height: 6px; border-left: 2.6px solid var(--wit); border-bottom: 2.6px solid var(--wit); transform: rotate(-45deg) translate(1px, -2px); opacity: 0; transition: opacity .12s ease; }
.rondje::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--wit); opacity: 0; transition: opacity .12s ease; }
.vink:hover, .rondje:hover { border-color: var(--salie-600); }
.vink:checked, .rondje:checked { background: var(--salie-600); border-color: var(--salie-600); }
.vink:checked::after, .rondje:checked::after { opacity: 1; }
.vink:focus-visible, .rondje:focus-visible { outline: none; box-shadow: var(--ring); }
.keuzerij { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; padding: 16px 18px; background: var(--wit); border: 1.5px solid var(--rand); border-radius: var(--r-m); cursor: pointer; transition: border-color .16s ease, background-color .16s ease; }
.keuzerij:hover { border-color: var(--salie-500); background: var(--vlak-warm); }
.keuzerij-kop { display: block; font-weight: 600; color: var(--inkt); font-size: 15.5px; line-height: 1.5; }
.keuzerij-sub { display: block; margin-top: 4px; font-size: 13.5px; color: var(--gedempt); }

/* --- status --- */
.status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 10px; border-radius: var(--r-rond); font-size: 13px; font-weight: 700; line-height: 1.5; border: 1px solid transparent; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 7px; }
.status--betaald { background: var(--succes-vlak); color: var(--succes); border-color: var(--succes-rand); }
.status--open { background: var(--waarschuwing-vlak); color: var(--waarschuwing); border-color: var(--waarschuwing-rand); }
.status--opgeschort, .status--gestorneerd { background: var(--fout-vlak); color: var(--fout); border-color: var(--fout-rand); }
.status--concept { background: var(--papier-diep); color: #56625B; border-color: var(--rand-sterk); }
.status--info { background: var(--info-vlak); color: var(--info); border-color: var(--info-rand); }
/* Uitkomsten van de domeinzoeker. "Onbekend" krijgt bewust dezelfde neutrale
   behandeling als "bezet" en niet iets groens: een domein waarvan we de status
   niet konden vaststellen mag er nooit uitzien als beschikbaar. */
.status--vrij { background: var(--succes-vlak); color: var(--succes); border-color: var(--succes-rand); }
.status--premium { background: var(--waarschuwing-vlak); color: var(--waarschuwing); border-color: var(--waarschuwing-rand); }
.status--bezet, .status--onbekend { background: var(--papier-diep); color: #56625B; border-color: var(--rand-sterk); }
.merkje { display: inline-block; padding: 4px 12px; border-radius: var(--r-rond); background: var(--abrikoos-100); color: var(--abrikoos-700); border: 1px solid var(--abrikoos-200); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }

/* --- meldingen --- */
.melding { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 16px 20px; border-radius: var(--r-m); border: 1.5px solid transparent; font-size: 15px; line-height: 1.6; }
.melding svg { width: 22px; height: 22px; margin-top: 2px; }
.melding-kop { display: block; font-weight: 700; color: inherit; margin-bottom: 2px; }
.melding--succes { background: var(--succes-vlak); border-color: var(--succes-rand); color: var(--succes); }
.melding--waarschuwing { background: var(--waarschuwing-vlak); border-color: var(--waarschuwing-rand); color: var(--waarschuwing); }
.melding--fout { background: var(--fout-vlak); border-color: var(--fout-rand); color: var(--fout); }
.melding--info { background: var(--info-vlak); border-color: var(--info-rand); color: var(--info); }
.melding p { color: inherit; max-width: 70ch; }
.melding strong, .melding b { color: inherit; }

/* --- kaarten --- */
.kaart { background: var(--wit); border: 1.5px solid var(--rand); border-radius: var(--r-xl); box-shadow: var(--schaduw-s); padding: 30px 32px; }
.kaart--zacht { border-color: var(--rand-zacht); box-shadow: var(--schaduw-m); }
.kaart-kop { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.kaart-kop h3 { font-size: 19px; }
.icoonvlak { width: 54px; height: 54px; border-radius: 18px; display: grid; place-content: center; background: var(--salie-100); color: var(--salie-700); margin-bottom: 20px; }
.icoonvlak svg { width: 26px; height: 26px; }
.icoonvlak--zand { background: var(--zand-200); color: var(--zand-700); }
.icoonvlak--abrikoos { background: var(--abrikoos-100); color: var(--abrikoos-700); }

/* --- tabellen --- */
.tabelhouder { background: var(--wit); border: 1.5px solid var(--rand); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--schaduw-s); }
.tabel { font-size: 15.5px; }
.tabel thead th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gedempt); background: var(--salie-50); padding: 13px 20px; border-bottom: 1.5px solid var(--rand); }
.tabel tbody td { padding: 15px 20px; border-bottom: 1px solid var(--rand-zacht); color: var(--tekst); }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover td { background: var(--rij-hover); }
.tabel th.rechts, .tabel td.rechts { text-align: right; }
.tabel .naam { color: var(--inkt); font-weight: 600; }
.tabel tfoot td { padding: 16px 20px; background: var(--salie-50); border-top: 1.5px solid var(--rand); color: var(--inkt); font-weight: 700; }
.tabel--dicht { font-size: 14.5px; }
.tabel--dicht thead th { padding: 11px 18px; }
.tabel--dicht tbody td { padding: 11px 18px; line-height: 1.45; }
.tabel--dicht tbody tr:hover td { background: var(--salie-50); }
.rij-let td { background: var(--rij-let); }
.rij-let td:first-child { box-shadow: inset 3px 0 0 var(--abrikoos-600); }
.rij-let:hover td { background: var(--rij-let-hover); }
.rij-alarm td { background: var(--rij-alarm); }
.rij-alarm td:first-child { box-shadow: inset 3px 0 0 var(--fout); }
.rij-alarm:hover td { background: var(--rij-alarm-hover); }

/* --- stijlblad --- */
.blad { padding: 56px 0 96px; }
.blad-hoofd { background: var(--wit); border: 1.5px solid var(--rand); border-radius: var(--r-xl); padding: 46px 48px; box-shadow: var(--schaduw-m); position: relative; overflow: hidden; }
.blad-hoofd::after { content: ""; position: absolute; right: -110px; top: -130px; width: 420px; height: 380px; background: radial-gradient(circle at 40% 45%, rgba(169,192,178,.42), rgba(169,192,178,0) 68%); border-radius: 52% 48% 44% 56% / 56% 44% 56% 44%; pointer-events: none; }
.blad-hoofd > * { position: relative; }
.blad-sectie { margin-top: 64px; }
.blad-sectie > h2 { margin-bottom: 6px; }
.blad-sectie > h2 + p { color: var(--gedempt); margin-bottom: 28px; max-width: 74ch; }
.blad-blok { background: var(--wit); border: 1.5px solid var(--rand); border-radius: var(--r-l); padding: 28px 30px; box-shadow: var(--schaduw-s); }
.blad-blok + .blad-blok { margin-top: 20px; }
.blad-blok > h4 { margin-bottom: 18px; }
.blad-raster-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.blad-raster-2 > * { min-width: 0; }
.stalen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.staal { border: 1.5px solid var(--rand); border-radius: var(--r-m); overflow: hidden; background: var(--wit); }
.staal-vlak { height: 80px; border-bottom: 1.5px solid var(--rand); }
.staal-info { padding: 12px 14px 14px; }
.staal-naam { font-weight: 700; color: var(--inkt); font-size: 14.5px; }
.staal-hex { font-size: 12.5px; color: var(--gedempt); letter-spacing: .04em; font-variant-numeric: tabular-nums; text-transform: uppercase; margin-top: 1px; }
.staal-rol { font-size: 12.5px; color: var(--gedempt); margin-top: 7px; line-height: 1.5; }
.ladder-rij { display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rand-zacht); }
.ladder-rij:last-child { border-bottom: 0; }
.ladder-spec { font-size: 12.5px; color: var(--gedempt); line-height: 1.5; }
.ladder-spec b { display: block; color: var(--inkt); font-size: 13px; }
.duo { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.notitie-lijst li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 9px 0; font-size: 15px; border-bottom: 1px solid var(--rand-zacht); }
.notitie-lijst li:last-child { border-bottom: 0; }
.notitie-lijst svg { width: 18px; height: 18px; margin-top: 5px; }
.punt-ja { color: var(--succes); }
.punt-nee { color: var(--fout); }
.maatstaaf { display: flex; align-items: flex-end; gap: 10px; margin-top: 6px; }
.maatstaaf span { display: block; background: var(--salie-150); border-radius: 4px 4px 0 0; border: 1px solid var(--salie-300); border-bottom: 0; width: 46px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--salie-800); padding-top: 4px; }
.hoekrij { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.hoekstaal { width: 66px; height: 66px; flex: 0 0 auto; background: var(--salie-100); border: 1.5px solid var(--salie-300); display: grid; place-content: center; font-size: 12px; font-weight: 700; color: var(--salie-800); }
.schaduwrij { display: flex; gap: 20px; }
.schaduwstaal { flex: 1; height: 84px; background: var(--wit); border: 1px solid var(--rand-zacht); border-radius: var(--r-m); display: grid; place-content: center; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--gedempt); padding: 0 12px; }

/* --- landing --- */
/* Overslaan naar de inhoud: voor wie met het toetsenbord navigeert of een
   schermlezer gebruikt. Onzichtbaar tot hij focus krijgt, dan springt hij in
   beeld. Op een site met een menu van zes items scheelt dat bij elke pagina
   zes tabslagen. */
.overslaan {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--salie-600); color: var(--wit);
  padding: 12px 20px; border-radius: 0 0 var(--r-s) 0;
  font-weight: 700; text-decoration: none;
}
.overslaan:focus { left: 0; }

.balk { background: var(--wit); border-bottom: 1.5px solid var(--rand); position: relative; z-index: 3; }
.balk-in { display: flex; align-items: center; gap: 40px; height: 84px; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a:not(.knop) { padding: 10px 15px; border-radius: var(--r-rond); font-size: 15.5px; font-weight: 600; color: var(--tekst); transition: background-color .15s ease, color .15s ease; }
.nav a:not(.knop):hover { background: var(--salie-50); color: var(--salie-800); }
.balk .knop { margin-left: 14px; }
.hero { position: relative; overflow: hidden; padding: 78px 0 20px; }
.hero::before { content: ""; position: absolute; right: -160px; top: -180px; width: 720px; height: 640px; background: radial-gradient(circle at 45% 50%, rgba(169,192,178,.55), rgba(169,192,178,0) 66%); border-radius: 54% 46% 38% 62% / 48% 56% 44% 52%; pointer-events: none; }
.hero::after { content: ""; position: absolute; left: -220px; bottom: -240px; width: 560px; height: 520px; background: radial-gradient(circle at 50% 50%, rgba(239,180,144,.30), rgba(239,180,144,0) 68%); border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; pointer-events: none; }
.hero-in { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: center; }
.hero-etiket { display: inline-flex; align-items: center; gap: 9px; background: var(--wit); border: 1.5px solid var(--salie-300); color: var(--salie-800); font-size: 13.5px; font-weight: 700; padding: 7px 16px 7px 12px; border-radius: var(--r-rond); box-shadow: var(--schaduw-s); margin-bottom: 24px; }
.hero-etiket svg { width: 16px; height: 16px; }
.hero h1 { font-family: var(--serif); font-weight: 500; font-size: 58px; line-height: 1.1; letter-spacing: -0.022em; color: var(--salie-900); margin-bottom: 22px; }
.hero-intro { font-size: 18.5px; line-height: 1.68; color: var(--tekst); max-width: 54ch; }
.zoeker { margin-top: 34px; background: var(--wit); border: 1.5px solid var(--rand); border-radius: var(--r-xl); padding: 22px 24px 20px; box-shadow: var(--schaduw-m); max-width: 570px; }
.zoeker-label { font-size: 15px; font-weight: 700; color: var(--inkt); margin-bottom: 10px; display: block; }
.zoeker-rij { display: flex; gap: 12px; }
.zoeker-rij .veld { flex: 1; min-width: 0; min-height: 56px; }
.zoeker-rij .knop { flex: 0 0 auto; min-height: 56px; }
.zoeker-regel { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; font-size: 14px; color: var(--gedempt); max-width: none; }
.zoeker-regel svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 4px; color: var(--succes); }
.hero-kaart { background: var(--wit); border: 1.5px solid var(--rand); border-radius: var(--r-xl); box-shadow: var(--schaduw-l); padding: 30px 32px; }
/* De kop van de zijkaart hoort semantisch een H2 te zijn: hij volgt direct op
   de H1 van de pagina, en een sprong naar H3 laat schermlezers en zoekmachines
   denken dat er een niveau ontbreekt. De opmaak is voor beide gelijk, zodat
   het niveau puur een kwestie van betekenis is. */
.hero-kaart h2, .hero-kaart h3 { font-size: 18px; margin-bottom: 4px; }
.hero-kaart > p { font-size: 14.5px; color: var(--gedempt); margin-bottom: 20px; }
.beloftelijst li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--rand-zacht); }
.beloftelijst li:last-child { border-bottom: 0; }
.beloftelijst .bol { width: 30px; height: 30px; border-radius: 50%; background: var(--salie-100); display: grid; place-content: center; color: var(--salie-700); }
.beloftelijst .bol svg { width: 16px; height: 16px; }
.beloftelijst b { display: block; font-size: 15px; color: var(--inkt); }
.beloftelijst span.uitleg { font-size: 13.5px; color: var(--gedempt); line-height: 1.55; display: block; }
.golf { display: block; width: 100%; height: 76px; margin-top: 40px; }
.dienstkaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dienstkaart { background: var(--wit); border: 1.5px solid var(--rand); border-radius: var(--r-xl); padding: 32px 32px 28px; box-shadow: var(--schaduw-s); display: flex; flex-direction: column; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.dienstkaart:hover { box-shadow: var(--schaduw-m); transform: translateY(-2px); border-color: var(--salie-300); }
.dienstkaart h3 { margin-bottom: 8px; }
.dienstkaart > p { font-size: 15.5px; color: var(--tekst); margin-bottom: 18px; }
.dienstlijst { margin-bottom: 22px; }
.dienstlijst li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 14.5px; padding: 5px 0; color: var(--tekst); }
.dienstlijst svg { width: 16px; height: 16px; margin-top: 5px; color: var(--salie-600); }
.dienstprijs { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--rand-zacht); display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.dienstprijs b { font-size: 22px; color: var(--inkt); font-variant-numeric: tabular-nums; }
.dienstprijs span { font-size: 13.5px; color: var(--gedempt); text-align: right; }
.pakketten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.pakketten--vier { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pakketten--vier .pakket { padding: 26px 20px; }
.pakketten--vier .pakket--uitgelicht { padding: 32px 20px; }
.pakketten--vier .pakket h3 { font-size: 17.5px; }
.pakketten--vier .pakket-sub { font-size: 13.5px; margin-bottom: 16px; }
.pakketten--vier .pakket-prijs b { font-size: 31px; }
.pakketten--vier .pakket-prijs span { font-size: 13.5px; }
.pakketten--vier .pakket-btw { font-size: 12.5px; margin-bottom: 18px; }
.pakketten--vier .pakket-lijst li { font-size: 13.8px; padding: 6px 0; grid-template-columns: 17px 1fr; gap: 9px; }
.pakketten--vier .pakket-lijst svg { width: 15px; height: 15px; margin-top: 4px; }
.pakketten--vier .pakket-vlag { font-size: 11.5px; padding: 5px 13px; }
@media (max-width: 1180px) { .pakketten--vier { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pakketten--vier { grid-template-columns: 1fr; } }

/* Veelgestelde vragen als uitklapbare onderdelen. Bewust met <details> en dus
   zonder JavaScript: het werkt in elke browser, is toetsenbordbedienbaar, en
   zoekmachines lezen de dichtgeklapte antwoorden gewoon mee. Dichtgeklapt
   nemen tien vragen een halve schermhoogte in plaats van drie. */
.vragenlijst { display: grid; gap: 10px; }
.vraag { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-m); }
.vraag[open] { box-shadow: var(--schaduw-s); }
.vraag summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 18px;
  padding: 15px 20px; font-size: 16px; font-weight: 700; color: var(--inkt);
  line-height: 1.45; border-radius: var(--r-m);
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary:hover { background: var(--salie-50); }
.vraag summary:focus-visible { outline: 2px solid var(--salie-600); outline-offset: -2px; }
.vraag summary::after {
  content: ""; flex: 0 0 9px; width: 9px; height: 9px;
  border-right: 2.2px solid var(--salie-600); border-bottom: 2.2px solid var(--salie-600);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .16s ease;
}
.vraag[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.vraag .antwoord { padding: 0 20px 17px; }
.vraag .antwoord p { margin: 0; color: var(--tekst); max-width: 74ch; }
@media (prefers-reduced-motion: reduce) { .vraag summary::after { transition: none; } }
.pakket { background: var(--wit); border: 1.5px solid var(--rand); border-radius: var(--r-xl); padding: 32px 30px; box-shadow: var(--schaduw-s); position: relative; }
.pakket--uitgelicht { border: 2px solid var(--salie-500); box-shadow: var(--schaduw-l); padding: 40px 30px; }
.pakket-vlag { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--salie-600); color: var(--wit); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; padding: 6px 18px; border-radius: var(--r-rond); white-space: nowrap; box-shadow: var(--schaduw-s); }
.pakket h3 { font-size: 20px; margin-bottom: 4px; }
.pakket-sub { font-size: 14.5px; color: var(--gedempt); margin-bottom: 20px; }
.pakket-prijs { display: flex; align-items: baseline; gap: 7px; }
.pakket-prijs b { font-size: 40px; color: var(--inkt); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pakket-prijs span { font-size: 15px; color: var(--gedempt); }
.pakket-btw { font-size: 13.5px; color: var(--gedempt); margin: 4px 0 22px; }
.pakket-lijst { margin-bottom: 26px; }
.pakket-lijst li { display: grid; grid-template-columns: 20px 1fr; gap: 11px; padding: 7px 0; font-size: 15px; border-bottom: 1px solid var(--rand-zacht); }
.pakket-lijst li:last-child { border-bottom: 0; }
.pakket-lijst svg { width: 17px; height: 17px; margin-top: 5px; color: var(--salie-600); }
.stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.stap-kaart { background: var(--wit); border: 1.5px solid var(--rand); border-radius: var(--r-l); padding: 26px 26px 24px; box-shadow: var(--schaduw-s); }
.stap-nr { width: 40px; height: 40px; border-radius: 50%; background: var(--zand-200); color: var(--zand-700); display: grid; place-content: center; font-weight: 700; font-size: 17px; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.stap-kaart h3, .stap-kaart h4 { font-size: 17px; margin-bottom: 6px; }
.stap-kaart p { font-size: 14.5px; color: var(--gedempt); }
.belofteblok { background: var(--salie-50); border: 1.5px solid var(--salie-150); border-radius: var(--r-xl); padding: 46px 48px; display: grid; grid-template-columns: 1fr 320px; gap: 52px; align-items: center; }
.belofteraster { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin-top: 26px; }
.belofteraster li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.belofteraster svg { width: 21px; height: 21px; margin-top: 4px; color: var(--salie-600); }
.belofteraster b { display: block; color: var(--inkt); font-size: 15.5px; }
.belofteraster span.uitleg { font-size: 13.5px; color: var(--gedempt); line-height: 1.55; display: block; }
.voet { background: var(--salie-900); color: #D5E0D8; padding: 60px 0 34px; }
.voet a { color: #D5E0D8; }
.voet h2, .voet h4 { color: var(--wit); font-size: 13px; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 16px; }
.voet-in { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 44px; }
.voet ul li { padding: 5px 0; font-size: 15px; }
.voet ul a:hover { color: var(--wit); text-decoration: underline; text-underline-offset: 3px; }
.voet-gegevens { font-size: 14.5px; line-height: 1.8; margin-top: 18px; }
.voet-gegevens b { color: var(--wit); font-weight: 600; }
.voet-gegevens a { text-decoration: underline; text-underline-offset: 3px; }
.voet-onder { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.22); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 13.5px; }
.voet .voet-herroep { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.10); border: 1.5px solid rgba(255,255,255,.48); color: var(--wit); font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: var(--r-rond); margin-top: 16px; }
.voet-herroep svg { width: 17px; height: 17px; }
.voet-herroep:hover { background: rgba(255,255,255,.18); }

/* --- bestellen --- */
.bestel-balk { background: var(--wit); border-bottom: 1.5px solid var(--rand); }
.bestel-balk-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 78px; }
.veilig { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--gedempt); font-weight: 600; }
.veilig svg { width: 18px; height: 18px; color: var(--salie-600); }
.stapbalk { display: flex; align-items: center; padding: 34px 0 10px; }
.stapbalk li { display: flex; align-items: center; gap: 12px; }
.stapbalk .lijn { flex: 1; height: 2.5px; background: var(--rand-sterk); border-radius: 2px; margin: 0 16px; opacity: .45; }
.stapbalk .lijn.af { background: var(--salie-500); opacity: 1; }
.stap-bol { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px; display: grid; place-content: center; font-weight: 700; font-size: 15px; background: var(--wit); border: 2px solid var(--rand-sterk); color: var(--gedempt); font-variant-numeric: tabular-nums; }
.stap-bol svg { width: 17px; height: 17px; }
.stap-bol.af { background: var(--salie-100); border-color: var(--salie-500); color: var(--salie-800); }
.stap-bol.nu { background: var(--salie-600); border-color: var(--salie-600); color: var(--wit); box-shadow: 0 0 0 5px rgba(79,122,99,.18); }
.stap-tekst { font-size: 14.5px; color: var(--gedempt); font-weight: 600; }
.stap-tekst.nu { color: var(--inkt); font-weight: 700; }
.bestel-raster { display: grid; grid-template-columns: 1fr 336px; gap: 32px; align-items: start; padding: 26px 0 80px; }
.bestel-raster > main { min-width: 0; }
.bestel-kop { margin-bottom: 26px; }
.bestel-kop h1 { font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1.16; letter-spacing: -0.018em; color: var(--salie-900); margin-bottom: 8px; }
.bestel-kop p { color: var(--gedempt); font-size: 16.5px; }
.blok { background: var(--wit); border: 1.5px solid var(--rand); border-radius: var(--r-xl); box-shadow: var(--schaduw-s); overflow: hidden; }
.blok + .blok { margin-top: 20px; }
.blok-kop { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 28px; border-bottom: 1.5px solid var(--rand-zacht); background: var(--vlak-warm); }
.blok-kop h2 { font-size: 18.5px; }
.blok-lijf { padding: 26px 28px; }
.gegevens { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; }
.gegevens dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gedempt); }
.gegevens dd { font-size: 16px; color: var(--inkt); margin-top: 2px; }
.orderregel { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--rand-zacht); }
.orderregel:first-child { padding-top: 2px; }
.orderregel b { display: block; font-size: 16.5px; color: var(--inkt); }
.orderregel span { display: block; font-size: 14px; color: var(--gedempt); margin-top: 2px; }
.orderregel .prijs { font-size: 17px; font-weight: 700; color: var(--inkt); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.orderregel .prijs small { display: block; font-size: 13px; font-weight: 400; color: var(--gedempt); }
.ordertotaal { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: baseline; margin-top: 18px; padding: 20px 22px; background: var(--salie-50); border: 1.5px solid var(--salie-150); border-radius: var(--r-m); }
.ordertotaal b { font-size: 18px; color: var(--inkt); }
.ordertotaal .som { font-size: 30px; font-weight: 700; color: var(--salie-800); font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
.ordertotaal .toelichting { grid-column: 1 / -1; font-size: 13.5px; color: var(--tekst); margin: 0; max-width: none; }
.looptijd { margin-top: 20px; padding: 20px 22px; background: var(--zand-100); border: 1.5px solid var(--zand-200); border-radius: var(--r-m); }
.looptijd h4 { font-size: 15.5px; margin-bottom: 8px; color: var(--zand-700); }
.looptijd p { font-size: 14.5px; color: var(--zand-700); max-width: none; }
.looptijd b { color: var(--zand-700); }
.vinkstapel > * + * { margin-top: 12px; }
.machtiging { margin-top: 14px; padding: 18px 20px; background: var(--vlak-warm); border: 1.5px solid var(--rand); border-radius: var(--r-m); font-size: 13.5px; line-height: 1.65; color: var(--tekst); }
.machtiging p { max-width: none; }
.machtiging p + p { margin-top: 9px; }
.bestelknop-vak { margin-top: 22px; padding: 26px 28px; background: var(--salie-50); border: 2px solid var(--salie-500); border-radius: var(--r-xl); }
.bestelknop-vak .samenvatting { display: grid; grid-template-columns: 1fr auto; gap: 9px 20px; font-size: 14.5px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1.5px dashed var(--salie-300); }
.bestelknop-vak .samenvatting dt { color: var(--tekst); }
.bestelknop-vak .samenvatting dd { color: var(--inkt); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.knop-bestellen { display: flex; width: 100%; align-items: center; justify-content: center; gap: 12px; min-height: 68px; padding: 18px 28px; background: var(--salie-600); color: var(--wit); border-radius: var(--r-rond); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; box-shadow: 0 4px 12px rgba(46,58,51,.14), 0 14px 30px rgba(61,107,85,.24); transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.knop-bestellen svg { width: 22px; height: 22px; flex: 0 0 22px; }
.knop-bestellen:hover { background: var(--salie-700); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(46,58,51,.16), 0 20px 40px rgba(61,107,85,.28); }
.knop-bestellen:focus-visible { outline-offset: 3px; }
.knop-onder { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; font-size: 13.5px; color: var(--tekst); max-width: none; }
.knop-onder svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 4px; color: var(--salie-600); }
.knop-onder p { max-width: none; }
.rail-kaart { background: var(--wit); border: 1.5px solid var(--rand); border-radius: var(--r-xl); padding: 26px; box-shadow: var(--schaduw-s); }
.rail-kaart + .rail-kaart { margin-top: 20px; }
.rail-kaart h3 { font-size: 17px; margin-bottom: 14px; }
.rail-lijst li { display: grid; grid-template-columns: 20px 1fr; gap: 11px; padding: 8px 0; font-size: 14.5px; }
.rail-lijst svg { width: 17px; height: 17px; margin-top: 5px; color: var(--salie-600); }
.rail-hulp { display: flex; gap: 14px; align-items: center; }
.rail-hulp 
/* --- dashboard --- */
.ops { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
.ops-zij { background: var(--salie-900); color: #C6D5CB; padding: 26px 18px; display: flex; flex-direction: column; gap: 26px; position: sticky; top: 0; align-self: start; height: 100vh; }
.ops-zij .merk { padding: 0 10px 2px; }
.ops-nav li + li { margin-top: 3px; }
.ops-nav a { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; border-radius: var(--r-s); font-size: 15px; font-weight: 600; color: #C6D5CB; transition: background-color .15s ease, color .15s ease; }
.ops-nav svg { width: 19px; height: 19px; }
.ops-nav a:hover { background: rgba(255,255,255,.09); color: var(--wit); }
.ops-nav a.actief { background: rgba(255,255,255,.16); color: var(--wit); }
.ops-nav .tel { background: var(--abrikoos-300); color: #4A2A16; font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: var(--r-rond); font-variant-numeric: tabular-nums; }
.ops-zij-voet { margin-top: auto; font-size: 13px; line-height: 1.6; color: #A4B9AC; border-top: 1px solid rgba(255,255,255,.16); padding: 16px 14px 0; }
.ops-zij-voet b { color: var(--wit); font-weight: 600; }
.ops-hoofd { padding: 30px 34px 60px; min-width: 0; position: relative; }
.ops-hoofd::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 360px; background: radial-gradient(760px 300px at 82% -30%, rgba(169,192,178,.34), rgba(169,192,178,0) 70%); pointer-events: none; }
.ops-hoofd > * { position: relative; }
.ops-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.ops-kop h1 { font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: -0.018em; color: var(--salie-900); margin-bottom: 3px; }
.ops-kop p { font-size: 14.5px; color: var(--gedempt); }
.cijferrij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 24px; }
.cijfer { background: var(--wit); border: 1.5px solid var(--rand); border-radius: var(--r-l); padding: 20px 22px; box-shadow: var(--schaduw-s); }
.cijfer .etiket { margin-bottom: 6px; display: block; }
.cijfer b { display: block; font-size: 27px; color: var(--inkt); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cijfer .voetnoot { font-size: 13px; color: var(--gedempt); margin-top: 5px; display: block; line-height: 1.5; }
.cijfer--let { background: #FDF7F0; border-color: var(--abrikoos-200); }
.cijfer--let b { color: var(--abrikoos-700); }
.paneel { background: var(--wit); border: 1.5px solid var(--rand); border-radius: var(--r-l); box-shadow: var(--schaduw-s); overflow: hidden; }
.paneel + .paneel { margin-top: 22px; }
.paneel-kop { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; border-bottom: 1.5px solid var(--rand-zacht); background: var(--vlak-warm); }
.paneel-kop h2 { font-size: 17px; }
.paneel-kop .sub { font-size: 13.5px; color: var(--gedempt); }
.werklijst li { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; padding: 13px 20px; border-bottom: 1px solid var(--rand-zacht); }
.werklijst li:last-child { border-bottom: 0; }
.werklijst li.tussenkop { display: block; padding: 9px 20px; background: var(--vlak-warm); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gedempt); }
.werk-bol { width: 32px; height: 32px; border-radius: 50%; display: grid; place-content: center; }
.werk-bol svg { width: 17px; height: 17px; }
.werk-bol--fout { background: var(--fout-vlak); color: var(--fout); }
.werk-bol--let { background: var(--waarschuwing-vlak); color: var(--waarschuwing); }
.werk-bol--info { background: var(--info-vlak); color: var(--info); }
.werk-bol--rustig { background: var(--salie-100); color: var(--salie-700); }
.werk-titel { font-size: 15px; color: var(--inkt); font-weight: 600; line-height: 1.45; display: block; }
.werk-sub { font-size: 13px; color: var(--gedempt); margin-top: 1px; line-height: 1.45; display: block; }
.werk-actie { display: flex; align-items: center; gap: 10px; }
.werklijst li.urgent { background: var(--rij-alarm); box-shadow: inset 3px 0 0 var(--fout); }
.ops-panelen { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; margin-top: 22px; }
.tabelscroll { overflow-x: auto; }
.runregel { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-top: 22px; padding: 13px 20px; background: var(--salie-50); border: 1.5px solid var(--salie-150); border-radius: var(--r-m); font-size: 14px; color: var(--salie-800); max-width: none; }
.runregel svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--salie-700); }
.runregel .scheiding { color: var(--salie-500); }
.dagen { display: inline-block; min-width: 82px; text-align: center; padding: 3px 10px; border-radius: var(--r-rond); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--salie-100); color: var(--salie-800); border: 1px solid var(--salie-300); white-space: nowrap; }
.dagen--let { background: var(--waarschuwing-vlak); color: var(--waarschuwing); border-color: var(--waarschuwing-rand); }
.dagen--nu { background: var(--fout-vlak); color: var(--fout); border-color: var(--fout-rand); }

/* --- leestekst ---
   Lange juridische pagina's: voorwaarden, privacyverklaring, herroepingsrecht.
   Eén rustige leeskolom van hoogstens 68 tekens breed, ruime witruimte tussen
   artikelen. Let op: de nummering van artikelleden staat in de tekst zelf
   ("1. ..."), daarom krijgt ol bewust géén eigen opsommingsteken — anders staat
   er twee keer een nummer en verschuift de verwijzing naar een artikellid. */
.leeskolom { max-width: 68ch; margin: 0 auto; }
.leeskolom > * + * { margin-top: 16px; }
.lees { padding: 38px 40px 44px; }
.lees > h1:first-child { font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.16; letter-spacing: -0.02em; color: var(--salie-900); margin-bottom: 20px; }
.lees h1 { font-size: 26px; margin: 0 0 16px; }
/* De juridische teksten hebben vier niveaus: titel, module, artikel, lid.
   De maten zijn zo gekozen dat een artikelkop even prominent blijft als
   voorheen, ook nu hij een niveau lager staat. */
.lees h2 { font-size: 22px; margin: 44px 0 12px; }
.lees h3 { font-size: 20px; margin: 34px 0 10px; }
.lees h4 { font-size: 17px; margin: 24px 0 8px; }
.lees p { max-width: none; margin-bottom: 14px; }
.lees ul, .lees ol { margin: 0 0 18px; }
.lees li { margin-bottom: 9px; }
.lees li:last-child { margin-bottom: 0; }
.lees ol > li { padding-left: 2.2em; text-indent: -2.2em; }
.lees ul > li { position: relative; padding-left: 1.5em; }
.lees ul > li::before { content: ""; position: absolute; left: 3px; top: .66em; width: 6px; height: 6px; border-radius: 50%; background: var(--salie-300); }
.lees hr { border: 0; border-top: 1.5px solid var(--rand); margin: 46px 0 32px; }
.lees blockquote { background: var(--salie-50); border: 1.5px solid var(--salie-150); border-left: 4px solid var(--salie-500); border-radius: var(--r-m); padding: 20px 22px; margin: 22px 0; }
.lees blockquote p:last-child { margin-bottom: 0; }
.lees em { color: var(--gedempt); font-style: italic; }
.lees a { color: var(--salie-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--salie-500); }
.lees a:hover { color: var(--salie-800); text-decoration-color: var(--salie-700); }

/* --- meebewegen --- */
@media (max-width: 1120px) {
  .stappen { grid-template-columns: repeat(2, 1fr); }
  .cijferrij { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  .hero-in { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { font-size: 46px; }
  .bestel-raster { grid-template-columns: 1fr; }
  .belofteblok { grid-template-columns: 1fr; gap: 32px; padding: 34px; }
  .voet-in { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 860px) {
  .wrap, .wrap-smal { padding: 0 24px; }
  .dienstkaarten, .pakketten { grid-template-columns: 1fr; }
  .stalen { grid-template-columns: 1fr 1fr; }
  .ops { grid-template-columns: 1fr; }
  .ops-zij { position: static; height: auto; }
  .ops-hoofd { padding: 24px 20px 48px; }
  .stapbalk .stap-tekst { display: none; }
  .blad-hoofd { padding: 30px 26px; }
  .merk--groot .merk-naam { font-size: 46px; }
  .merk--groot .merk-teken { width: 54px; height: 54px; flex-basis: 54px; }
  h1 { font-size: 32px; } h2 { font-size: 25px; }
}
@media (max-width: 620px) {
  .stalen, .blad-raster-2, .gegevens, .belofteraster, .stappen, .cijferrij { grid-template-columns: 1fr; }
  .schaduwrij { flex-direction: column; }
  .sectie { padding: 56px 0; }
  .hero h1 { font-size: 36px; }
  .balk-in { height: auto; padding: 16px 0; flex-wrap: wrap; gap: 14px; }
  .nav { flex-wrap: wrap; margin-left: 0; }
  .zoeker-rij { flex-direction: column; }
  .voet-in { grid-template-columns: 1fr; }
  .werklijst li { grid-template-columns: 34px 1fr; }
  .werk-actie { grid-column: 2; }
  .lees { padding: 26px 22px 32px; }
  .lees > h1:first-child { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .knop:hover, .knop-bestellen:hover, .dienstkaart:hover { transform: none; }
}