/* --- lettertypen, zelf gehost -------------------------------------------------
   Stonden bij Google. Daarmee ging het IP-adres van elke bezoeker, en van elke
   ingelogde klant bij elk paginabezoek, naar een derde partij buiten de EU. Daar
   is geen grondslag voor en het staat niet in de privacyverklaring.

   Dit zijn exact de bestanden die Google serveerde, dus de weergave is
   ongewijzigd. Alleen latin en latin-ext: de site is Nederlands.

   Fraunces en Nunito Sans staan onder de SIL Open Font License 1.1, die zelf
   hosten uitdrukkelijk toestaat. De licentie staat in assets/fonts/OFL.txt.

   Het zijn variabele lettertypen: een bestand per familie en subset draagt alle
   gewichten. De declaraties hieronder zetten er per gewicht een instantie van,
   precies zoals Google dat deed.

   Verversen: draai het script opnieuw dat deze regels heeft gemaakt. De namen
   van de bestanden zijn beschrijvend en niet de hashnamen van Google, zodat een
   nieuwe versie er gewoon overheen gaat.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fraunces-latin-ext.a04d353989ad.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fraunces-latin.069cb90e11a3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fraunces-latin-ext.a04d353989ad.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fraunces-latin.069cb90e11a3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/nunito-sans-latin-ext.9359f35055cf.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/nunito-sans-latin.e010923d59d4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/nunito-sans-latin-ext.9359f35055cf.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/nunito-sans-latin.e010923d59d4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/nunito-sans-latin-ext.9359f35055cf.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/nunito-sans-latin.e010923d59d4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===========================================================================
   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: 13px; line-height: 1.55; color: var(--gedempt); }
.noot--voor { margin: -8px 0 18px; }
.noot--na { margin-top: 10px; }

/* --- 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: 26px 0 54px; }
.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. */
/* De zoeker haalt de overige extensies pas op nadat de pagina er staat, dus die
   regels beginnen op "bezig". Bewust dezelfde vorm als de andere statuslabels:
   de regel verspringt niet zodra het antwoord binnen is. */
.status--bezig { background: var(--papier-diep); color: var(--gedempt); border-color: var(--rand); }
.status--bezig::before { display: none; }
.tolt {
  width: 11px; height: 11px; flex: 0 0 11px; margin-right: 2px;
  border: 2px solid var(--rand-sterk); border-top-color: transparent;
  border-radius: 50%; animation: tol .7s linear infinite;
}
@keyframes tol { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .tolt { animation: none; border-top-color: var(--rand); }
}
.zoekrij td { transition: background .2s ease; }

.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: 46px; }
.zoeker-rij .knop { flex: 0 0 auto; min-height: 46px; }
.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; }
/* Twee pakketten naast elkaar, gecentreerd: met de gewone drie kolommen zou er
   een gat aan de rechterkant blijven staan. */
.pakketten--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; }
.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, .pakketten--twee { 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: 60px; }
.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; }
/* Op het zoekscherm mag de kolom smaller: daar staat een samenvatting in, geen
   formulier. En de onderrand kan krapper, want er staat al een noot onder. */
.bestel-raster--zoek { grid-template-columns: 1fr 300px; gap: 24px; padding: 22px 0 56px; }
.bestel-raster > main { min-width: 0; }
.bestel-kop { margin-bottom: 16px; }
.bestel-kop h1 { font-family: var(--serif); font-weight: 500; font-size: 27px; line-height: 1.18; letter-spacing: -0.016em; color: var(--salie-900); margin-bottom: 4px; }
.bestel-kop p { color: var(--gedempt); font-size: 14.5px; }
.blok { background: var(--wit); border: 1.5px solid var(--rand); border-radius: var(--r-l); box-shadow: var(--schaduw-s); overflow: hidden; }
.blok + .blok { margin-top: 14px; }
.blok-kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1.5px solid var(--rand-zacht); background: var(--vlak-warm); }
.blok-kop h2 { font-size: 16px; }
.blok-lijf { padding: 16px 18px; }
.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 p { margin: 0; max-width: none; }
/* --- zoekpagina: extensiekaarten --- */
/* Acht regels in een tabel dwongen het oog van boven naar beneden en maakten van
   "is mijn naam vrij" een leesoefening. Als kaarten in een raster is het in een
   oogopslag te zien. In de kaart staat alleen de extensie: de naam zelf staat al
   in de kop erboven, en die acht keer herhalen voegt niets toe. Voor schermlezers
   staat de volledige naam er wel bij, verborgen voor het oog (.vh).

   De kaart is bewust klein: extensie, status, prijs, knop. De knop staat in de
   rechterbovenhoek en buiten de tekststroom, zodat een kaart zonder knop (bezet)
   precies even hoog blijft als een kaart met knop. Acht kaarten passen zo op een
   enkele rij in plaats van twee. */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.zoeknaam { font-family: var(--serif); font-weight: 600; color: var(--salie-800); }
.extkaarten { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 9px; }
.extkaart { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--wit); border: 1.5px solid var(--rand); border-radius: var(--r-m); padding: 9px 10px; transition: border-color .16s ease, box-shadow .16s ease; }
.extkaart--vrij { border-color: var(--succes-rand); background: linear-gradient(180deg, var(--succes-vlak) 0%, var(--wit) 58%); }
.extkaart--vrij:hover { box-shadow: var(--schaduw-m); }
.extkaart--in-mand { border-color: var(--salie-500); background: var(--salie-50); }
.extkaart-ext { display: block; padding-right: 32px; font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1.15; letter-spacing: -0.01em; color: var(--salie-900); }
.extkaart .status { font-size: 12px; padding: 1px 8px 1px 6px; gap: 5px; }
.extkaart .status::before { width: 6px; height: 6px; flex-basis: 6px; }
.extkaart-prijs { font-size: 14.5px; font-weight: 700; color: var(--inkt); letter-spacing: -0.012em; line-height: 1.3; }
.extkaart:not(.extkaart--vrij) .extkaart-prijs { color: var(--gedempt-diep); font-weight: 600; }
.extkaart form, .extkaart .mandknop--in { position: absolute; top: 7px; right: 7px; }
/* 30x30 blijft ruim boven de ondergrens van 24x24 uit WCAG 2.5.8 en houdt met de
   afstand tot de buurkaart genoeg speling over voor een vinger */
.mandknop { display: grid; place-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--salie-600); color: var(--wit); border: 0; box-shadow: var(--schaduw-s); transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.mandknop svg { width: 16px; height: 16px; }
.mandknop:hover { background: var(--salie-700); transform: translateY(-1px); box-shadow: var(--schaduw-m); }
.mandknop:focus-visible { box-shadow: var(--ring); }
.mandknop--in { background: var(--succes); box-shadow: none; cursor: default; }
.mandknop--in:hover { background: var(--succes); transform: none; }
/* Verhuizen: een tekstknop onder in de kaart van een bezette naam, bewust geen icoon.
   Een tweede rond knopje naast het winkelmandje zou niemand als "verhuizen" lezen. */
.extkaart .verhuisvorm { position: static; margin-top: 2px; }
.verhuisknop { padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--salie-500); background: var(--wit); color: var(--salie-800); font-size: 12.5px; font-weight: 700; line-height: 1.3; cursor: pointer; transition: background-color .16s ease, color .16s ease; }
.verhuisknop:hover { background: var(--salie-600); border-color: var(--salie-600); color: var(--wit); }
.verhuisknop:focus-visible { box-shadow: var(--ring); outline: none; }
@media (max-width: 1240px) { .extkaarten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .extkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- schakelaar incl./excl. btw --- */
/* Geen losse weergavevoorkeur maar echt de klantsoort: prijzen aan consumenten
   moeten inclusief btw (art. 38 Wet OB), dus "uit" betekent zakelijk bestellen.
   Het vinkje blijft een echt vinkje, alleen onzichtbaar, zodat het met het
   toetsenbord bereikbaar blijft en schermlezers hem gewoon aankondigen. */
.btw-vorm { display: flex; align-items: center; gap: 12px; }
.btw-schakelaar { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--inkt); cursor: pointer; white-space: nowrap; }
.btw-schakelaar input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.schuif { position: relative; flex: 0 0 44px; width: 44px; height: 25px; border-radius: var(--r-rond); background: var(--rand-sterk); transition: background-color .16s ease, box-shadow .16s ease; }
.schuif::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--wit); box-shadow: var(--schaduw-s); transition: transform .16s ease; }
.btw-schakelaar input:checked + .schuif { background: var(--salie-600); }
.btw-schakelaar input:checked + .schuif::after { transform: translateX(19px); }
.btw-schakelaar input:focus-visible + .schuif { box-shadow: var(--ring); }

/* --- zoekpagina: aanbodkaarten (hosting en e-mail) --- */
.aanbodkaarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.aanbodkaart { display: flex; flex-direction: column; background: var(--wit); border: 1.5px solid var(--rand); border-radius: var(--r-m); padding: 14px 14px 13px; transition: border-color .16s ease, box-shadow .16s ease; }
.aanbodkaart:hover { border-color: var(--salie-300); box-shadow: var(--schaduw-m); }
.aanbodkaart--in-mand { border-color: var(--salie-500); background: var(--salie-50); }
.aanbodkaart h3 { font-size: 15px; line-height: 1.3; margin-bottom: 2px; }
.aanbodkaart-sub { font-size: 12.5px; line-height: 1.45; color: var(--gedempt); margin-bottom: 10px; max-width: none; }
.aanbodkaart-prijs { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.aanbodkaart-prijs b { font-size: 21px; font-weight: 700; color: var(--inkt); letter-spacing: -0.018em; }
.aanbodkaart-prijs span { font-size: 12.5px; color: var(--gedempt); }
.aanbodkaart-btw { font-size: 12px; color: var(--gedempt); margin: 1px 0 10px; }
.aanbodkaart-lijst { margin-bottom: 12px; }
.aanbodkaart-lijst li { display: grid; grid-template-columns: 15px 1fr; gap: 7px; padding: 3px 0; font-size: 12.5px; line-height: 1.45; color: var(--tekst); }
.aanbodkaart-lijst svg { width: 13px; height: 13px; margin-top: 4px; color: var(--salie-600); }
/* De inbegrepen mailbox krijgt bewust een eigen kleur: dat er bij webhosting al
   mail bij zit is precies wat klanten over het hoofd zien en alsnog los bestellen. */
.aanbodkaart-lijst li.inbegrepen { padding: 5px 0; border-bottom: 1px solid var(--rand-zacht); margin-bottom: 2px; }
.aanbodkaart-lijst li.inbegrepen svg { color: var(--abrikoos-600); }
.aanbodkaart-lijst li.inbegrepen b { font-size: 12.5px; color: var(--abrikoos-700); }
.aanbodkaart form { margin-top: auto; }
.aanbodkaart-in { display: flex; align-items: center; gap: 7px; margin-top: auto; padding: 8px 0 2px; font-size: 13px; font-weight: 700; color: var(--succes); max-width: none; }
.aanbodkaart-in svg { width: 15px; height: 15px; flex: 0 0 15px; }
/* Microsoft-onderdelen. De pictogrammen staan als losse bestanden in
   assets/microsoft/ en kunnen daar vervangen worden door de officiele
   partnerbestanden; de merkvermelding staat onder het e-mailblok. */
/* De iconenrij en de beperking horen bij elkaar in een kader: los van elkaar
   belooft de rij meer dan Business Basic geeft. Geen border-radius of achtergrond
   onder de pictogrammen zelf, want een officieel logo mag niet worden aangepast. */
.officeblok { padding: 8px 9px 7px; border: 1px solid var(--rand); border-radius: var(--r-s); background: var(--vlak-warm); margin-bottom: 11px; }
.officeblok--vol { border-color: var(--succes-rand); background: var(--succes-vlak); }
.officerij { display: flex; gap: 5px; margin-bottom: 5px; }
/* De officiele pictogrammen zijn geen van alle precies vierkant (92x97 tot
   105x108) en hebben elk een eigen hoeveelheid transparante rand. In een vast
   vierkant vakje zouden ze dus uitgerekt worden, en vervormen is precies wat de
   merkvoorwaarden verbieden. Vandaar een vakje van vaste maat met contain: de
   verhouding blijft, de rij blijft recht. */
.officerij img { display: block; width: 26px; height: 26px; object-fit: contain; object-position: center; }
/* Waar je die apps kunt gebruiken is het enige echte verschil tussen Basic en
   Standard, dus dat krijgt een eigen regel. Het teken draagt de betekenis en niet
   de kleur: een vinkje of een kruisje leest ook zwart-wit. */
.platformrij { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-bottom: 0; }
.platformrij li { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1.5; white-space: nowrap; }
.platformrij .teken { font-size: 12.5px; font-weight: 700; line-height: 1; }
.platformrij .ja { color: var(--succes); font-weight: 700; }
.platformrij .nee { color: var(--gedempt); }
.platformrij .nee .teken { color: var(--fout); }
@media (max-width: 1040px) { .aanbodkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .aanbodkaarten { grid-template-columns: 1fr; } }

/* --- winkelmand --- */
/* Per regel staat er niet alleen wat het kost maar ook waar het op gaat draaien.
   Zonder dat kan de levering niets opzetten: een hostingpakket moet op een vhost,
   een mailbox op een maildomein. Een complete regel klapt zijn velden weg, zodat
   de aandacht valt op wat nog ontbreekt. */
.balk-rechts { display: flex; align-items: center; gap: 16px; }
.mandteller { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 11px; border-radius: var(--r-rond); background: var(--salie-50); border: 1.5px solid var(--salie-150); color: var(--salie-800); font-weight: 700; font-size: 14px; transition: background-color .16s ease, border-color .16s ease; }
.mandteller:hover { background: var(--salie-100); border-color: var(--salie-300); }
.mandteller svg { width: 17px; height: 17px; }
.mandteller-getal { display: grid; place-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--r-rond); background: var(--salie-600); color: var(--wit); font-size: 12px; font-variant-numeric: tabular-nums; }
.mandteller-som { font-variant-numeric: tabular-nums; }
.mandteller--let { background: var(--waarschuwing-vlak); border-color: var(--waarschuwing-rand); color: var(--waarschuwing); }
.mandteller--let:hover { background: #F7E9C9; }
.mandteller--let .mandteller-getal { background: var(--waarschuwing); }
.mand-let { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 10px 18px; background: var(--waarschuwing-vlak); border-bottom: 1.5px solid var(--waarschuwing-rand); color: var(--waarschuwing); font-size: 13.5px; }
.mand-let svg { width: 18px; height: 18px; margin-top: 1px; }
.mand-let p { margin: 0; color: inherit; max-width: none; }
.mandregel { display: grid; grid-template-columns: 32px 1fr auto 30px; gap: 12px; align-items: start; padding: 12px 18px; border-bottom: 1px solid var(--rand-zacht); }
.mandregel:last-child { border-bottom: 0; }
.mandregel--onvolledig { background: var(--rij-let); }
.mandregel-teken { display: grid; place-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--salie-100); color: var(--salie-700); }
.mandregel-teken svg { width: 17px; height: 17px; }
.mandregel--onvolledig .mandregel-teken { background: var(--zand-200); color: var(--zand-700); }
.mandregel-tekst { min-width: 0; }
.mandregel-tekst > b { display: block; font-size: 15px; line-height: 1.35; color: var(--inkt); }
.mandregel-sub { display: block; font-size: 12.5px; color: var(--gedempt); margin-top: 1px; }
.mandregel-prijs { font-size: 15.5px; font-weight: 700; color: var(--inkt); text-align: right; white-space: nowrap; letter-spacing: -0.012em; }
.mandregel-prijs small { display: block; font-size: 11.8px; font-weight: 400; color: var(--gedempt); }
.mandregel-weg { display: grid; place-content: center; width: 30px; height: 30px; border-radius: 50%; background: none; border: 1.5px solid var(--rand); color: var(--gedempt); transition: border-color .16s ease, color .16s ease, background-color .16s ease; }
.mandregel-weg svg { width: 13px; height: 13px; }
.mandregel-weg:hover { border-color: var(--fout-rand); color: var(--fout); background: var(--fout-vlak); }
.mandregel-weg:focus-visible { box-shadow: var(--ring); }
.koppelvorm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-top: 7px; }
.koppelveld { display: block; }
.koppelveld > span { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--gedempt); margin-bottom: 3px; }
.veld--klein { min-height: 34px; padding: 6px 11px; font-size: 14px; border-radius: var(--r-xs); width: 190px; }
.mailrij { display: flex; align-items: center; gap: 5px; }
.mailrij .veld--klein { width: 110px; }
.mailstaart { font-size: 13.5px; color: var(--gedempt); white-space: nowrap; }
.koppelvorm .knop { min-height: 34px; padding: 6px 15px; font-size: 13.5px; }
.koppel-af { margin-top: 3px; }
.koppel-af summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 12.5px; color: var(--gedempt); }
.koppel-af summary::-webkit-details-marker { display: none; }
.koppel-af summary:focus-visible { outline: 2px solid var(--salie-600); outline-offset: 2px; border-radius: var(--r-xs); }
.koppel-samen b { font-weight: 700; color: var(--tekst); }
.koppel-wijzig { color: var(--salie-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.mand-voet { padding: 14px 18px 16px; background: var(--salie-50); border-top: 1.5px solid var(--salie-150); }
.mand-som { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.mand-som--deel { padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px dashed var(--salie-300); }
.mand-som--deel b { font-size: 19px; }
/* wat er nu daadwerkelijk van de rekening gaat, hetzelfde bedrag als bij het afrekenen */
.mand-som--nu { margin-top: 9px; padding-top: 9px; border-top: 1.5px solid var(--salie-300); }
.mand-som--nu span { font-size: 16px; }
.mand-som span { font-size: 15.5px; font-weight: 700; color: var(--inkt); }
.mand-som b { font-size: 25px; font-weight: 700; color: var(--salie-800); letter-spacing: -0.018em; }
.mand-btw { font-size: 12.5px; color: var(--tekst); margin: 3px 0 12px; max-width: none; }
@media (max-width: 620px) {
  .mandregel { grid-template-columns: 26px 1fr 30px; gap: 9px; padding: 11px 14px; }
  .mandregel-prijs { grid-column: 2 / 4; text-align: left; }
  .mandregel-prijs small { display: inline; margin-left: 5px; }
  .veld--klein, .mailrij .veld--klein { width: 100%; }
  .koppelveld { width: 100%; }
}

/* --- winkelmand als blok naast de zoeker --- */
/* Blijft in beeld terwijl je langs de pakketten scrolt, zodat je de mand ziet vollopen
   zonder je plek kwijt te raken. Bewust alleen namen en bedragen: de velden voor domein
   en mailadres horen op de mandpagina, waar ze de ruimte hebben. */
/* De rail kost driehonderd pixels, en die gaan van de kaarten af. Zonder correctie
   werden de extensiekaarten 82 pixels breed en de pakketkaarten 171: te smal om te
   lezen. Binnen dit raster dus minder kolommen, en pas op een echt breed scherm weer
   meer. De maten zijn nagerekend op 1440 breed, want dat is het werkscherm. */
.bestel-raster--zoek .extkaarten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bestel-raster--zoek .aanbodkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1900px) {
  .bestel-raster--zoek .extkaarten { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .bestel-raster--zoek .aanbodkaarten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .bestel-raster--zoek .extkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .bestel-raster--zoek .aanbodkaarten { grid-template-columns: 1fr; }
}
.mandrail { position: sticky; top: 14px; }
.mandrail-kaart { padding: 16px 18px 18px; border-radius: var(--r-l); }
.mandrail-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mandrail-kop h2 { font-size: 16px; }
.mandrail-aantal { display: grid; place-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-rond); background: var(--salie-600); color: var(--wit); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mandrail-leeg { font-size: 13px; line-height: 1.5; color: var(--gedempt); margin: 0; max-width: none; }
.mandrail-let { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 11px; padding: 8px 10px; background: var(--waarschuwing-vlak); border: 1px solid var(--waarschuwing-rand); border-radius: var(--r-s); color: var(--waarschuwing); font-size: 12.5px; line-height: 1.45; max-width: none; }
.mandrail-let svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; }
.mandrail-lijst { margin-bottom: 12px; }
.mandrail-lijst li { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--rand-zacht); font-size: 13.2px; }
.mandrail-lijst li:last-child { border-bottom: 0; }
.mandrail-lijst li.onvolledig .mandrail-naam::after { content: " (aanvullen)"; color: var(--waarschuwing); font-weight: 700; }
.mandrail-naam { color: var(--tekst); line-height: 1.4; }
.mandrail-prijs { color: var(--inkt); font-weight: 700; white-space: nowrap; }
.mandrail-prijs small { display: block; font-size: 10.8px; font-weight: 400; color: var(--gedempt); text-align: right; }
.mandrail-som { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1.5px solid var(--salie-150); }
.mandrail-som span { font-size: 14px; font-weight: 700; color: var(--inkt); }
.mandrail-som b { font-size: 21px; font-weight: 700; color: var(--salie-800); letter-spacing: -0.015em; }
.mandrail-btw { font-size: 11.5px; line-height: 1.4; color: var(--gedempt); margin: 3px 0 12px; max-width: none; }
/* lege mand op de eigen pagina */
.mand-leegvak { text-align: center; padding: 40px 20px 44px; }
.mand-leegvak svg { width: 40px; height: 40px; color: var(--salie-300); margin-bottom: 14px; }
.mand-leegvak h2 { font-size: 19px; margin-bottom: 5px; }
.mand-leegvak p { font-size: 14.5px; color: var(--gedempt); margin: 0 auto 18px; max-width: 44ch; }
@media (max-width: 1000px) {
  .mandrail { position: static; }
}

/* --- 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); }
/* Lopende tekst en formulieren binnen een paneel, met dezelfde binnenmaat als de
   kop en de werklijstregels erboven en eronder. */
.paneel-inhoud { padding: 18px 20px; }
.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; }
}