/* site.css — de marketinglaag.
   Dit is de helft van het product die moet overtuigen, en daarom de helft die
   breed, groot en verticaal mag zijn (docs/ui-standaard.md §6).

   WAT ERIN ZIT
   Alleen klassen die de publieke site gebruikt: de hero, het raster, de
   pakketten, de kennisbank, het imprint en de beschikbaarheid. Wat de site met
   het paneel deelt — het frame, de knop, de kaart, de tabel, de badge, het
   formulierveld — staat in tokens.css, en wat alleen het paneel gebruikt staat
   in paneel.css.

   WAT ER NIET IN ZIT
   Geen enkele kleur, geen enkele rem-waarde voor ruimte en geen enkele
   lettergrootte als los getal. Alleen `--opp-*`, `--t-*`, `--b-*`, `--lijn`,
   `--e*`, `--r-*`, `--s-*`, `--f-*`, `--d-*` en `--ease`. De poort
   `scripts/css-lagen-toets.mjs` meet dat (regels U3 en U4) en maakt er een
   groene of rode regel van; een waarde zonder naam is een tweede taal.
*/

/* De site heeft een eigen wortel op de body, zoals het paneel die op
   .paneel-werkvlak heeft. Zonder die wortel is de enige manier om de site een
   eigen breedte te geven een tweede `main`-regel naast tokens.css:282, en dat is
   een tweede taal in plaats van een gescopete regel. Het paneel heeft zijn
   eigen breedte in paneel.css (.paneel-werkvlak > main). */
.site-wortel main { max-width: var(--max-site); }

/* De publieke chroom heeft een eigen ritme: een rustige utilityrij, daarna de
   routes en de paneelknop. Het paneel houdt zijn eigen schelp in paneel.css. */
.site-wortel .kop {
  display: block;
  padding: 0;
  background: var(--opp-1);
  border-bottom: 1px solid var(--lijn);
}
.kop-frame, .voet-binnen { max-width: var(--max-site); margin: 0 auto; padding: 0 var(--s-5); }
.kop-utility { background: var(--opp-0); border-bottom: 1px solid var(--lijn); }
.kop-utility .kop-frame,
.kop-utility-rechts { display: flex; align-items: center; gap: var(--s-3); }
.kop-utility .kop-frame { justify-content: space-between; padding-top: var(--s-2); padding-bottom: var(--s-2); }
.kop-tagline, .kop-utility-rechts > a { color: var(--t-2); font-size: var(--f-2); }
.kop-utility-rechts > a:hover { color: var(--b-1); }
.kop-hoofd .kop-frame {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-6);
  padding-top: var(--s-4);
  padding-bottom: var(--s-4);
}
.kop-hoofd .merk a, .voet-merk > a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--t-1);
  font-size: var(--f-6);
  font-weight: 700;
  letter-spacing: var(--letter-dicht);
}
.kop-hoofd .merk a:hover, .voet-merk > a:hover { text-decoration: none; }
.kop-hoofd .logo, .voet-merk .logo {
  display: inline-grid;
  place-items: center;
  width: var(--s-6);
  height: var(--s-6);
  border-radius: var(--r-m);
  background: var(--b-subtiel);
  color: var(--b-1);
  font-size: var(--f-5);
}
.site-wortel .hoofdnav { justify-content: center; flex-wrap: nowrap; min-width: 0; }
.site-wortel .hoofdnav a { white-space: nowrap; }
.site-wortel .kop-rechts { margin: 0; }
.kop-account { white-space: nowrap; }

/* De voet is een routekaart. Elk adres staat er één keer, met de juridische
   pagina's zichtbaar in de bedrijfskolom en de actuele status bij Support. */
.site-wortel .voet { background: var(--opp-1); border-top: var(--s-1) solid var(--b-1); padding: 0; }
.voet-binnen {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  padding-top: var(--s-8);
  padding-bottom: var(--s-5);
}
.voet-merk p { max-width: var(--max-lees); margin: var(--s-4) 0 0; color: var(--t-2); font-size: var(--f-4); }
.voet-kolom { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.voet-kolom h2 {
  margin: 0 0 var(--s-2);
  color: var(--t-3);
  font-size: var(--f-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--letter);
}
.voet-kolom a { color: var(--t-1); font-size: var(--f-4); }
.voet-kolom a:hover { color: var(--b-1); }
.voet-onder {
  grid-column: 1 / -1;
  /* Twee regels in één strook: het jaar, en de betaalregel. Zonder de wrap
     schuift een IBAN met een lange tenaamstelling het jaar van zijn plek op
     smalle schermen. Zie `voetBetaling` in apps/mvp/server.mjs. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  border-top: 1px solid var(--lijn);
  padding-top: var(--s-4);
  color: var(--t-3);
  font-size: var(--f-2);
}
.voet-betalen { overflow-wrap: anywhere; }

/* ── de typografie van de site ───────────────────────────────────────────
   De site gebruikt vier stappen van de schaal: display voor de hero, kop 1
   voor de paginatitel, kop 2 voor een sectie, en de standaard voor tekst. */
h1 {
  font-size: var(--f-display); line-height: var(--lh-display);
  letter-spacing: var(--letter-verf); margin: 0 0 var(--s-4);
}
h2 { font-size: var(--f-7); line-height: var(--lh-kop); letter-spacing: var(--letter-dicht); margin: 0 0 var(--s-4); }
h3 { font-size: var(--f-5); line-height: var(--lh-kop); margin: 0 0 var(--s-2); }

.lead { font-size: var(--f-5); color: var(--t-2); max-width: var(--max-lees); }
.eyebrow {
  text-transform: uppercase; letter-spacing: var(--letter-verf);
  font-size: var(--f-1); font-weight: 700; color: var(--b-1);
  margin: 0 0 var(--s-2);
}
.smal { max-width: var(--max-lees); }

/* ── de hero ──────────────────────────────────────────────────────────────
   Het cijfer van de pagina is de hero, en niets anders is dat ook. */
.hero { padding: var(--s-9) 0 var(--s-8); max-width: var(--max-lees); }
.acties { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-5); }

/* Op de startpagina is de eerste blik een keuze én een onderbouwing. De drie
   bestaande CMS-voordelen staan naast de hoofdboodschap in plaats van een
   scherm lager; een gekozen paginabeeld blijft op diezelfde plek zichtbaar. */
.hero-home > .hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-8);
  max-width: none;
  padding: var(--s-8) 0;
}
.hero-kopie { max-width: var(--max-lees); }
.hero-kopie h1 { max-width: var(--max-lees); }
.hero-kopie .lead { max-width: var(--max-lees); }
.hero-bewijs {
  min-width: 0;
  background: var(--opp-1);
  border: 1px solid var(--lijn);
  border-top: var(--s-1) solid var(--b-1);
  border-radius: var(--r-l);
  box-shadow: var(--e3);
  padding: var(--s-5) var(--s-6);
}
.hero-bewijs h2 { font-size: var(--f-7); margin-bottom: var(--s-2); }
.hero-bewijs-rij {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--lijn);
}
.hero-bewijs-rij h3 { font-size: var(--f-5); margin-bottom: var(--s-1); }
.hero-bewijs-rij p { margin: 0; color: var(--t-2); font-size: var(--f-3); }
.hero-bewijs-nummer {
  flex: 0 0 auto;
  color: var(--b-1);
  font-family: var(--mono);
  font-size: var(--f-2);
  font-weight: 700;
}
.hero-bewijs .hero-beeld { margin: 0 0 var(--s-5); }

/* Het beeld dat de beheerder voor een pagina koest. Boven de vouw, dus níet lui
   laden: een lui beeld is een lege plek op de plek waar de bezoeker al naar
   kijkt. De breedte volgt de kolom en de hoogte volgt de breedte, zodat een foto
   van 4000 px breed de mobiele pagina niet uitrekt. Geen width/height-attributes
   in de markup, want wij kennen de verhouding van andermans foto niet en zouden
   dan een verkeerde verhouding vastpinnen.

   Eén regel voor elke pagina die zo'n beeld kan hebben — de startpagina,
   /diensten, /docs, /support en alle dienstpagina's — en dus ook één `<img>`-vorm
   in server.mjs: `beeldTag`. Vier klassen voor vier pagina's is vier keer dezelfde
   CSS die op één dag uit elkaar loopt, en vijf klassen voor vijf pagina's is een
   vijfde. Het maakt niet uit hoeveel pagina's het er zijn: de klasse staat op de
   plek van het beeld, niet op de pagina. */
.hero-beeld {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--s-6);
  border: 1px solid var(--lijn);
  border-radius: var(--r-l);
}

/* ── de secties en het raster ─────────────────────────────────────────── */
.blok { padding: var(--s-7) 0; border-top: 1px solid var(--lijn); }
.blok:first-child { border-top: 0; }
.smal { max-width: var(--max-lees); }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--kolom-min), 1fr)); gap: var(--s-5); }

/* ── de pakketten ─────────────────────────────────────────────────────── */
.pakket-blok-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-6);
  margin-bottom: var(--s-5);
}
.pakket-blok-kop h2 { margin-bottom: 0; }
.pakket-blok-kop p { margin: 0; max-width: var(--max-lees); color: var(--t-2); }
.pakket { display: flex; flex-direction: column; border-top: var(--s-1) solid var(--lijn-sterk); }
.pakket[data-beschikbaar="true"] { border-top-color: var(--b-1); }
.pakket h3 { font-size: var(--f-7); }
.pakket .prijs {
  margin-top: auto;
  padding-top: var(--s-5);
  font-size: var(--f-5);
  font-weight: 700;
  color: var(--t-1);
}
.pakket-acties { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.pakket .knop { align-self: flex-start; }
.diensten-overzicht {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  margin: var(--s-7) 0;
}
.diensten-overzicht > .blok {
  min-width: 0;
  margin: 0;
  padding: var(--s-5);
  background: var(--opp-1);
  border: 1px solid var(--lijn);
  border-radius: var(--r-l);
}
.diensten-overzicht > [data-beschikbaar="1"] {
  grid-column: 1 / -1;
  border-top: var(--s-1) solid var(--b-1);
}
.diensten-overzicht > .blok h2 { margin-bottom: var(--s-2); }
.diensten-overzicht > .blok .raster { margin-top: var(--s-5); }
.pakket-keuze { border-color: var(--b-1); margin: var(--s-5) 0; }
.pakket-keuze h2 { font-size: var(--f-5); margin-bottom: var(--s-1); }
.eu-blok {
  background: var(--opp-1); border: 1px solid var(--lijn);
  border-radius: var(--r-l); padding: var(--s-6);
}
.gevaar-zone { border-color: var(--fout); }

/* ── de statistiekrij ─────────────────────────────────────────────────────
   Groot betekent overtuigen, niet opscheppen: het cijfer is groot, de bron eronder. */
.statistieken { grid-template-columns: repeat(auto-fit, minmax(var(--kolom-min-stat), 1fr)); }
.statistiek { display: flex; flex-direction: column; gap: var(--s-1); }
.statistiek .cijfer { font-size: var(--f-9); font-weight: 700; letter-spacing: var(--letter-dicht); }
.statistiek span:last-child { color: var(--t-2); font-size: var(--f-2); }

/* ── de kennisbank (docs) ─────────────────────────────────────────────── */
.kennislijst { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.kennislijst li { border-left: 3px solid var(--lijn-sterk); padding-left: var(--s-2); }
.kennislijst .vraag { color: var(--t-2); font-size: var(--f-2); }
.kennisitem { margin-top: var(--s-4); }

/* Een kennisbank-item is een artikel dat je leest, geen campagnetitel. Zonder
   deze regel erft zijn `h1` de display-maat van de site — clamp tot 5,5rem —
   in een kolom van 65 tekens, en dat zijn drie regels van twaalf tekens. */
.kennisitem-inhoud h1 { font-size: var(--f-8); line-height: var(--lh-kop); letter-spacing: var(--letter-verf); }
.kennisitem-inhoud .eyebrow { margin-top: var(--s-3); }

/* ── het raster van kaarten ────────────────────────────────────────────────
   De blogoverzicht en de zoekresultaten zetten hun kaarten in een doos zonder
   regel, dus de bezoeker zag een muur van blokken. `auto-fill` en niet
   `auto-fit`, want de laatste trekt de laatste rij over de hele breedte uit en
   één zoekresultaat wordt dan een kaart van 1280px. */
.kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--kolom-min), 1fr));
  gap: var(--s-5);
}

/* ── de prijzen van één dienst ────────────────────────────────────────────
   Eén regel per koopbaar plan, met de naam links en het bedrag rechts, zodat
   twee plannen naast elkaar te vergelijken zijn zonder de regels te lezen. De
   rij breekt om op een smalle pagina in plaats van het bedrag te plakken. */
.prijzen { list-style: none; margin: var(--s-5) 0; padding: 0; }
.prijzen li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s-1) var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--lijn);
}
.prijzen li:first-child { border-top: 1px solid var(--lijn); }
.prijzen strong { color: var(--t-1); }
/* Het bedrag is geen element: het staat als tekst na de `—` in dezelfde `<li>`.
   Geen regel die het apart wil kleuren, want CSS wijst een kale tekstnode niet aan.
   Een `:last-child` zou hier de naam pakken, want dat is wél het laatste
   element — en dan stond de plannaam in grijs. */

/* ── de beheerdersmelding ──────────────────────────────────────────────────
   De zin die een beheerder tegen bezoekers zegt terwijl er iets mis is. Zij
   draagt `class="kaart melding"` en staat daarom in tokens.css de vorm van de
   kaart, maar ziet er anders uit dan onze storingskaart: geen schaduw, geen
   omhooggeschoven rand, en een balk links in plaats van een volle rand.

   WAAROM DAT, en niet alleen een andere kleur. Onze storingskaart zegt "wij
   konden het niet lezen" en heeft een "Opnieuw proberen"; deze zin zegt "we
   werken eraan" en heeft geen knop. Een bezoeker die twee gelijkvormige
   gesloten dozen op dezelfde pagina ziet, leest ze als twee storingen en
   vertrouwt geen van beide.

   De balk links is de enige vorm die de status zelf draagt en de kleur niet
   alleen: kleur is nooit de enige betekenis (huisstijl, en de poort op de
   badge). Wie de pagina niet kan zien, leidt de melding nog af uit de balk en
   uit de tekst erachter. */
.kaart.melding {
  border-left: var(--s-1) solid var(--lijn-sterk);
  box-shadow: var(--e1);
}
.kaart.melding p { color: var(--t-1); }

/* ── de leespagina's: imprint, beschikbaarheid en een cms-pagina ──────────
   Drie pagina's die je leest en niet verkoopt. Ze delen één vorm, en daarom
   delen ze één regel: het zijn letterlijk dezelfde pagina met andere inhoud.
   De titel is een schermtitel uit de schaal en niet de display-maat van `h1`
   — het paneel doet het ook zo (paneel.css), en een klant die /imprint opent
   zit geen marketingcampagne te lezen. */
.imprint h1, .status h1, .cms-pagina h1 {
  font-size: var(--f-8); line-height: var(--lh-kop); letter-spacing: var(--letter-verf);
}
.cms-pagina .cms-inhoud { margin: var(--s-4) 0 var(--s-5); }

/* ── het imprint ─────────────────────────────────────────────────────────
   Een lijst, geen alinea: het label staat boven de waarde, zodat een leger
   veld zichtbaar leeg blijft in plaats van naast de waarde ervan te verdwijnen. */
.imprint-velden { margin: var(--s-5) 0 var(--s-4); }
.imprint-velden dt { font-weight: 600; margin-top: var(--s-2); }
.imprint-velden dd { margin: var(--s-1) 0 0; }
/* `.leeg` staat in tokens.css, want de lege toestand komt ook in het paneel voor
   en die laag wordt op /imprint niet geladen. Tot 29-09 stond `.leeg` in
   paneel.css en de commentaar hier zei dat de markup die klasse nergens gaf —
   server.mjs:3708 geeft haar juist op, en de velden kwamen ongestyled aan. */

/* ── de beschikbaarheid (/status) ─────────────────────────────────────────
   Het cijfer is het enige dat groot is, en dat is met opzet zo: op deze pagina
   is één ding belangrijk, en dat is wat de meting van die dag zegt. `data-staat`
   op de stand en op de tabelregel is de enige plek waar de kleur van de uitkomst
   woont, zodat de styling geen oordeel over de stand uitspreekt — dat oordeel
   zit in lib/uptime.mjs, en nergens anders. */
.status-stand {
  background: var(--opp-1); border: 1px solid var(--lijn); border-radius: var(--r-l);
  padding: var(--s-5); box-shadow: var(--e2); margin: var(--s-5) 0 var(--s-2);
}
.status-vandaag { margin: 0; color: var(--t-2); font-size: var(--f-2); }
.status-cijfer {
  margin: var(--s-1) 0 var(--s-1); font-size: var(--f-10);
  line-height: var(--lh-display); font-weight: 700; letter-spacing: var(--letter-dicht);
}
.status-eenheid { font-size: var(--f-6); font-weight: 500; color: var(--t-2); }
.status-onbekend { font-size: var(--f-7); color: var(--t-2); font-weight: 600; }
.status-stand[data-staat="gemeten"] .status-cijfer { color: var(--ok); }
.status-stand[data-staat="onbekend"] .status-cijfer { color: var(--t-2); }
.status-aantal { margin: var(--s-1) 0 0; color: var(--t-2); }
.status-tabel { width: 100%; border-collapse: collapse; margin: var(--s-2) 0 0; font-size: var(--f-3); }
.status-tabel th, .status-tabel td { text-align: left; padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--lijn); }
.status-tabel th { color: var(--t-2); font-weight: 600; }
.status-tabel td:last-child, .status-tabel th:last-child { text-align: right; }
.status-tabel tr[data-staat="gemeten"] td:nth-child(2) { color: var(--ok); }
.status-tabel tr[data-staat="onbekend"] td:nth-child(2) { color: var(--t-2); }

/* ── op een telefoon ─────────────────────────────────────────────────────
   De site mag verticaal zijn, maar hij mag niet breken. */
@media (max-width: 960px) {
  .kop-tagline { display: none; }
  .kop-utility .kop-frame { justify-content: flex-end; }
  .kop-hoofd .kop-frame { grid-template-columns: 1fr auto; gap: var(--s-3); }
  .site-wortel .hoofdnav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .site-wortel .kop-rechts { grid-column: 2; grid-row: 1; }
  .voet-binnen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .voet-merk { grid-column: 1 / -1; }
  .hero-home > .hero { grid-template-columns: 1fr; gap: var(--s-5); }
  .hero-kopie { max-width: none; }
  .hero-bewijs { padding: var(--s-5); }
  .hero-bewijs-lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
  .hero-bewijs-rij { display: block; }
  .hero-bewijs-nummer { display: block; margin-bottom: var(--s-2); }
}

@media (max-width: 760px) {
  .diensten-overzicht { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .kop-utility-rechts > a { display: none; }
  .kop-utility .kop-frame { justify-content: center; }
  .kop-utility-rechts { flex-wrap: wrap; justify-content: center; }
  .kop-utility .thema-knop { padding-inline: var(--s-2); }
  .kop-utility .thema-knop-tekst { display: none; }
  .kop-hoofd .kop-frame { padding-top: var(--s-3); padding-bottom: var(--s-3); }
  .site-wortel .hoofdnav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-1);
    border-top: 1px solid var(--lijn);
    padding-top: var(--s-2);
  }
  .site-wortel .hoofdnav a { padding: var(--s-1); text-align: center; font-size: var(--f-2); white-space: normal; }
  .site-wortel .kop-rechts { width: auto; }
  .voet-binnen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); padding-top: var(--s-7); }
  .voet-merk, .voet-kolom:last-of-type { grid-column: 1 / -1; }
  .hero { padding: var(--s-7) 0 var(--s-6); }
  .hero-home > .hero { padding: var(--s-7) 0 var(--s-6); }
  .hero-bewijs-lijst { display: block; }
  .hero-bewijs-rij { display: flex; }
  .hero-bewijs-nummer { margin: 0; }
  .pakket-blok-kop { display: block; }
  .pakket-blok-kop h2 { margin-bottom: var(--s-2); }
  .raster { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .site-wortel .hoofdnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet-binnen { grid-template-columns: 1fr; }
  .voet-merk, .voet-kolom:last-of-type { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .kaart, .knop, a { transition: none; }
  .kaart:hover { box-shadow: var(--e2); }
}

/* ── Hostingot public identity ───────────────────────────────────────── */
.site-wortel {
  --opp-0: var(--site-page); --opp-1: var(--site-surface); --opp-2: var(--site-soft);
  --lijn: var(--site-line); --t-1: var(--site-text); --t-2: var(--site-muted);
  --b-1: var(--site-accent);
}
.site-wortel main { padding-top: 0; }
.site-wortel h1 { font-size: var(--f-site-page); letter-spacing: var(--site-letter); font-weight: 650; text-wrap: balance; }
.site-wortel h2 { font-size: var(--f-site-section); font-weight: 600; line-height: 1.12; text-wrap: balance; }
.site-wortel h3 { font-weight: 600; }
.site-wortel p { text-wrap: pretty; }
.site-wortel .eyebrow { letter-spacing: 0.09em; line-height: 1.5; }
.site-icoon { width: var(--s-5); height: var(--s-5); flex: none; vertical-align: middle; }
.merk-teken { width: var(--s-6); height: var(--s-6); color: var(--b-1); flex: none; }
.site-wortel .knop { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: var(--s-7); border-radius: var(--r-s); font-size: var(--f-3); }
.site-wortel .knop-groot { font-size: var(--f-4); padding: var(--s-4) var(--s-5); }
.site-wortel .knop .site-icoon { width: var(--s-4); height: var(--s-4); }
.tekst-link { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--f-3); font-weight: 600; }
.tekst-link .site-icoon { width: var(--s-4); height: var(--s-4); }
.muted-link { font-size: var(--f-2); color: var(--t-2); }
.site-wortel :focus-visible { outline-offset: var(--s-1); }

/* Desktop navigation and native disclosure menu; mobile enhancement is optional. */
.site-wortel .kop { position: relative; z-index: var(--z-menu); }
.kop-utility { background: var(--site-ink); color: var(--site-on-ink); border: 0; }
.kop-utility .kop-frame { padding-top: var(--s-1); padding-bottom: var(--s-1); }
.kop-tagline, .kop-utility-rechts > a { color: var(--site-on-ink-muted); font-size: var(--f-1); }
.kop-utility-rechts > a:hover { color: var(--site-on-ink); }
.kop-utility .talen { padding: var(--dun); border: 0; background: var(--site-ink-raised); box-shadow: none; }
.kop-utility .talen a { color: var(--site-on-ink-muted); min-height: var(--s-6); }
.kop-utility .talen a:hover { background: var(--site-ink); color: var(--site-on-ink); }
.kop-utility .talen a[aria-current="true"] { background: var(--site-mint); color: var(--site-ink); }
.kop-utility .talen-icoon { color: var(--site-on-ink-muted); }
.kop-utility .thema-knop { border: 0; background: var(--site-ink-raised); color: var(--site-on-ink-muted); box-shadow: none; }
.kop-utility .thema-spoor { background: var(--site-ink); }
.kop-utility .thema-duim { background: var(--site-mint); color: var(--site-ink); }
.kop-hoofd .kop-frame { grid-template-columns: auto minmax(0,1fr) auto; gap: var(--s-5); padding-block: var(--s-4); }
.kop-hoofd .merk a, .voet-merk > a { font-size: var(--f-7); font-weight: 750; letter-spacing: var(--letter-verf); gap: var(--s-3); }
.site-navigatie { min-width: 0; }
.site-wortel .hoofdnav { display: flex; flex-wrap: nowrap; justify-content: center; gap: var(--s-2); grid-column: auto; grid-row: auto; padding: 0; border: 0; }
.site-wortel .hoofdnav a, .nav-ontdek summary { font-size: var(--f-3); color: var(--t-2); padding: var(--s-2); white-space: nowrap; }
.site-wortel .hoofdnav a[aria-current="page"] { color: var(--b-1); background: var(--opp-2); }
.nav-ontdek { position: relative; }
.nav-ontdek summary { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; font-weight: 500; list-style: none; }
.nav-ontdek summary::-webkit-details-marker { display: none; }
.nav-ontdek[open] summary { color: var(--b-1); }
.nav-dropdown { position: absolute; right: 0; top: calc(100% + var(--s-2)); min-width: var(--kolom-min); padding: var(--s-2); background: var(--opp-1); border: 1px solid var(--lijn); border-radius: var(--r-m); box-shadow: var(--site-shadow); }
.nav-dropdown a { display: block; }
.site-menuknop { display: none; }
.site-wortel .kop-rechts { grid-column: auto; grid-row: auto; }

/* First impression: large editorial type with an original product illustration. */
.hero-home { position: relative; }
.hero-home > .hero { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: var(--s-6); padding: var(--s-9) 0 var(--s-8); }
.hero-kopie h1 { white-space: pre-line; font-size: var(--f-site-hero); line-height: 1.04; margin: var(--s-5) 0; }
.hero-kopie .lead { font-size: var(--f-5); max-width: 49ch; line-height: 1.75; }
.hero-badge { display: flex; align-items: center; gap: var(--s-2); }
.hero-badge .site-icoon { width: var(--s-4); height: var(--s-4); }
.hero-kopie .acties { align-items: center; gap: var(--s-5); margin-top: var(--s-6); }
.hero-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); color: var(--t-2); font-size: var(--f-1); margin-top: var(--s-5); }
.hero-note .site-icoon { width: var(--s-4); height: var(--s-4); color: var(--b-1); }
.hero-note a { display: block; }
.hero-art { min-width: 0; }
.platform-visual { position: relative; margin: 0; padding: var(--s-6) var(--s-3); isolation: isolate; }
.visual-orbit { overflow: clip; position: absolute; z-index: -1; inset: -7% -3%; border-radius: 50%; background: radial-gradient(ellipse at center, var(--site-haze), transparent 68%); }
.visual-orbit::before, .visual-orbit::after { content: ''; position: absolute; inset: 6%; border: 1px solid var(--lijn); border-radius: 50%; transform: rotate(-28deg); }
.visual-orbit::after { inset: 19% -2%; transform: rotate(32deg); }
.visual-console { background: var(--opp-1); border: 1px solid var(--lijn); border-radius: var(--r-l); box-shadow: var(--site-shadow); transform: rotate(-2deg); overflow: hidden; }
.console-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4); border-bottom: 1px solid var(--lijn); background: var(--opp-2); font-size: var(--f-1); color: var(--t-2); }
.console-bar > .site-icoon { width: var(--s-4); height: var(--s-4); }
.console-dots { letter-spacing: 0.15em; color: var(--lijn-sterk); font-size: var(--f-1); }
.console-layout { display: grid; grid-template-columns: var(--s-8) minmax(0,1fr); }
.console-rail { display: flex; flex-direction: column; align-items: center; gap: var(--s-6); padding: var(--s-5) var(--s-3); border-right: 1px solid var(--lijn); color: var(--t-2); }
.console-rail .merk-teken { width: var(--s-5); height: var(--s-5); margin-bottom: var(--s-2); }
.console-rail .site-icoon { width: var(--s-4); height: var(--s-4); }
.console-content { padding: var(--s-5); }
.console-label { margin: 0 0 var(--s-2); font-size: var(--f-1); letter-spacing: 0.1em; color: var(--t-2); }
.console-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.console-title strong { font-size: var(--f-5); font-weight: 600; }
.console-pill { border: 1px solid var(--lijn); background: var(--opp-2); padding: var(--s-1) var(--s-2); border-radius: var(--r-v); font-size: var(--f-1); }
.console-site { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin: var(--s-5) 0; align-items: center; }
.mini-site { min-height: 180px; position: relative; background: var(--site-ink); color: var(--site-mint); padding: var(--s-4); border-radius: var(--r-s); overflow: hidden; }
.mini-site-brand { width: var(--s-3); height: var(--s-3); display: block; background: var(--site-mint); border-radius: 50%; margin-bottom: var(--s-5); }
.mini-site-line { display: block; width: 82%; height: var(--s-2); margin-bottom: var(--s-2); background: var(--site-on-ink); border-radius: var(--r-v); }
.mini-site-line.short { width: 62%; }
.mini-site-button { display: block; width: var(--s-8); height: var(--s-4); margin-top: var(--s-4); border: 1px solid var(--site-mint); border-radius: var(--r-s); }
.mini-site-shapes { display: flex; gap: var(--s-1); margin-top: var(--s-5); }
.mini-site-shapes i { display: block; width: 33%; aspect-ratio: 1; background: var(--site-ink-raised); border: 1px solid var(--site-on-ink-muted); border-radius: 50% 50% 0 0; }
.mini-site-shapes i:nth-child(2) { border-radius: 50%; background: var(--site-mint); }
.mini-site-shapes i:nth-child(3) { border-radius: 0; }
.console-wp { display: inline-grid; place-items: center; width: var(--s-6); height: var(--s-6); border: 1px solid var(--lijn-sterk); border-radius: 50%; font-family: Georgia, serif; font-size: var(--f-6); margin-bottom: var(--s-3); }
.console-site-meta strong { display: block; font-size: var(--f-3); }
.console-site-meta p { font-size: var(--f-1); color: var(--t-2); line-height: 1.6; }
.console-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.console-tools > span { display: flex; align-items: center; gap: var(--s-1); background: var(--opp-2); padding: var(--s-2); font-size: var(--f-1); border-radius: var(--r-s); }
.console-tools .site-icoon { width: var(--s-3); height: var(--s-3); }
.console-bottom { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--lijn); font-size: var(--f-1); color: var(--t-2); }
.console-bottom .site-icoon { width: var(--s-4); height: var(--s-4); }
.console-location { margin-left: auto; font-family: var(--mono); font-size: var(--f-1); }
.platform-visual figcaption { text-align: center; margin-top: var(--s-5); font-size: var(--f-1); color: var(--t-2); }
.foundation-strip { display: grid; grid-template-columns: repeat(4,1fr); border-block: 1px solid var(--lijn); padding: var(--s-5) 0; gap: var(--s-3); }
.foundation-strip > span { display: flex; align-items: center; justify-content: center; gap: var(--s-3); font-size: var(--f-2); color: var(--t-2); }
.foundation-strip .site-icoon { width: var(--s-5); color: var(--b-1); }

/* Varied section rhythm: benefits, plan comparison, platform, steps and FAQ. */
.marketing-section { padding: var(--s-9) 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-7); margin-bottom: var(--s-7); }
.section-heading h2 { margin: 0; max-width: 20ch; }
.section-heading > p { color: var(--t-2); max-width: 46ch; margin: 0; }
.benefit-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s-5); }
.benefit-card { padding: var(--s-6); background: var(--opp-1); border: 1px solid var(--lijn); border-radius: var(--r-m); }
.icon-box { display: inline-grid; place-items: center; width: var(--s-7); height: var(--s-7); background: var(--opp-2); color: var(--b-1); border-radius: var(--r-m); margin-bottom: var(--s-5); }
.benefit-card h3, .benefit-card h2 { font-size: var(--f-6); margin: 0 0 var(--s-3); }
.benefit-card p { margin: 0; color: var(--t-2); font-size: var(--f-3); line-height: 1.8; }
.pakket-blok { border-top: 1px solid var(--lijn); }
.plan-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.site-wortel .pakket { position: relative; padding: var(--s-6); box-shadow: none; border: 1px solid var(--lijn); border-radius: var(--r-m); }
.site-wortel .pakket[data-plan="platinum"] { border-color: var(--b-1); background: linear-gradient(160deg, var(--opp-2), var(--opp-1) 55%); }
.pakket h3 { font-size: var(--f-8); margin: var(--s-2) 0 var(--s-3); }
.pakket .prijs { margin-top: var(--s-4); padding-top: 0; font-size: var(--f-6); line-height: 1.5; color: var(--t-1); }
.pakket .plan-capaciteit { font-size: var(--f-2); margin-top: var(--s-3); padding-bottom: var(--s-5); border-bottom: 1px solid var(--lijn); }
.check-list { padding: 0; list-style: none; margin: var(--s-5) 0; display: grid; gap: var(--s-3); }
.check-list li { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--f-3); color: var(--t-2); }
.check-list .site-icoon { width: var(--s-4); height: var(--s-4); margin-top: var(--s-1); color: var(--b-1); }
.pakket-acties { margin-top: auto; padding-top: var(--s-5); display: flex; flex-direction: column-reverse; }
.pakket-acties .knop { width: 100%; }
.pakket-acties .knop-zacht { border-color: transparent; background: transparent; min-height: var(--s-6); font-size: var(--f-2); }
.plan-advice { padding: var(--s-6); display: flex; flex-direction: column; align-items: flex-start; }
.plan-advice h3 { font-size: var(--f-7); }
.plan-advice p { color: var(--t-2); font-size: var(--f-3); }
.plan-advice .tekst-link { margin: auto 0 var(--s-4); }
.plan-note { text-align: center; color: var(--t-2); font-size: var(--f-1); margin: var(--s-5) 0 0; }
.platform-feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: center; border-block: 1px solid var(--lijn); }
.platform-copy > p:not(.eyebrow) { color: var(--t-2); }
.platform-copy h2 { max-width: 15ch; }
.platform-stack { position: relative; padding: var(--s-7) 0; background-image: linear-gradient(var(--site-grid) 1px,transparent 1px),linear-gradient(90deg,var(--site-grid) 1px,transparent 1px); background-size: var(--s-6) var(--s-6); }
.platform-stack > div { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5); margin: var(--s-3) var(--s-5); border: 1px solid var(--lijn); border-radius: var(--r-m); background: var(--opp-1); box-shadow: var(--e1); font-size: var(--f-4); }
.platform-stack > .stack-top { background: var(--site-ink); color: var(--site-on-ink); border-color: var(--site-ink); }
.stack-label { margin-left: auto; font-size: var(--f-1); color: var(--t-2); }
.stack-top .stack-label { color: var(--site-on-ink-muted); }
.platform-stack > p { margin: var(--s-5) var(--s-6) 0; font-size: var(--f-1); color: var(--t-2); text-align: center; }
.steps-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s-7); }
.step-number { display: block; color: var(--b-1); font-family: var(--mono); font-size: var(--f-3); border-top: 1px solid var(--lijn-sterk); padding-top: var(--s-5); margin-bottom: var(--s-5); }
.steps-grid h3 { font-size: var(--f-6); }
.steps-grid p { font-size: var(--f-3); color: var(--t-2); }
.eu-feature { display: grid; grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr); align-items: center; gap: var(--s-8); background: var(--opp-2); border: 1px solid var(--lijn); padding: var(--s-7); border-radius: var(--r-l); }
.eu-feature p:not(.eyebrow) { color: var(--t-2); }
.eu-illustration { display: grid; place-items: center; gap: var(--s-5); padding: var(--s-6) 0; background: radial-gradient(ellipse,var(--site-haze),transparent 70%); }
.eu-ring { position: relative; display: grid; place-items: center; width: 180px; aspect-ratio: 1; border: 1px solid var(--b-1); border-radius: 50%; font-size: var(--f-10); font-weight: 500; letter-spacing: var(--site-letter); color: var(--b-1); outline: 1px solid var(--lijn-sterk); outline-offset: var(--s-5); }
.eu-dot { position: absolute; width: var(--s-4); height: var(--s-4); border-radius: 50%; background: var(--b-1); top: var(--s-5); right: var(--s-4); box-shadow: 0 0 0 var(--s-2) var(--opp-2); }
.eu-caption { font-family: var(--mono); letter-spacing: 0.12em; font-size: var(--f-1); color: var(--t-2); margin-top: var(--s-5); }
.faq-section { display: grid; grid-template-columns: minmax(0,0.7fr) minmax(0,1.3fr); gap: var(--s-9); }
.faq-section > div > p:not(.eyebrow) { color: var(--t-2); font-size: var(--f-3); }
.faq-list { border-top: 1px solid var(--lijn); }
.faq-item { border-bottom: 1px solid var(--lijn); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 0; font-weight: 600; font-size: var(--f-4); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--b-1); font-size: var(--f-7); font-weight: 400; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { color: var(--t-2); font-size: var(--f-3); line-height: 1.8; margin: 0 0 var(--s-5); max-width: var(--max-lees); }
.closing-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-7); background: var(--site-ink); border-radius: var(--r-l); padding: var(--s-8) var(--s-7); color: var(--site-on-ink); }
.closing-cta h2 { max-width: 19ch; }
.closing-cta .eyebrow { color: var(--site-mint); }
.closing-cta p:not(.eyebrow) { color: var(--site-on-ink-muted); margin-bottom: 0; }
.closing-cta .acties { margin: 0; flex-direction: column; flex: 0 0 auto; }
.closing-cta .knop { background: var(--site-mint); color: var(--site-ink); }
.closing-cta .knop:hover { background: var(--site-on-ink); }
.closing-cta .knop-zacht { background: transparent; color: var(--site-on-ink); border-color: var(--site-on-ink-muted); }
.closing-cta .knop-zacht:hover { background: var(--site-ink-raised); }

/* Dedicated, crawlable content pages. */
.page-intro { padding: var(--s-9) 0 var(--s-7); max-width: 900px; }
.page-intro h1 { max-width: 20ch; }
.page-intro .lead { max-width: 64ch; line-height: 1.8; }
.platform-page-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: center; }
.editorial-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); border-top: 1px solid var(--lijn); }
.editorial-split p:not(.eyebrow) { color: var(--t-2); margin-top: 0; }
.about-statement { display: flex; align-items: center; gap: var(--s-8); padding: var(--s-8); background: var(--site-ink); color: var(--site-on-ink); border-radius: var(--r-l); }
.about-statement p { font-size: var(--f-7); margin: 0; max-width: 46ch; line-height: 1.6; }
.about-monogram .merk-teken { width: 128px; height: 128px; color: var(--site-mint); --t-inverse: var(--site-ink); }
.migration-intro { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5) var(--s-6); background: var(--opp-2); border: 1px solid var(--lijn); border-radius: var(--r-m); }
.migration-intro .icon-box { margin: 0; }
.migration-intro p { margin: 0; color: var(--t-2); font-size: var(--f-3); }
.migration-checklist { padding: var(--s-7); border: 1px solid var(--lijn); border-radius: var(--r-l); background: var(--opp-1); }
.diensten-overzicht { margin-top: 0; }
.diensten-overzicht > .blok { padding: var(--s-6); }
.diensten-overzicht > [data-beschikbaar="1"] { border: 1px solid var(--lijn); background: var(--opp-2); }
.diensten-overzicht > [data-beschikbaar="0"] h2 { font-size: var(--f-7); }
.diensten-overzicht .lead { font-size: var(--f-4); }
.dienst-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-8); }
.dienst-detail .page-intro, .dienst-detail [data-sectie="wat-het-kost"], .dienst-detail [data-sectie="plannen"], .dienst-detail [data-sectie="actie"], .dienst-detail [data-sectie="status"] { grid-column: 1 / -1; }
.dienst-detail [data-sectie="wat-het-kost"] { padding: var(--s-6); margin-bottom: var(--s-7); background: var(--opp-2); border: 1px solid var(--lijn); border-radius: var(--r-m); }
.dienst-detail .blok h2 { font-size: var(--f-7); }
.dienst-detail .blok p { color: var(--t-2); font-size: var(--f-4); }
.dienst-voordelen { padding-left: var(--s-5); color: var(--t-2); }
.dienst-voordelen li { margin-top: var(--s-2); }
.dienst-voordelen li::marker { color: var(--b-1); }
.support-layout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,0.8fr); gap: var(--s-9); padding-top: var(--s-7); }
.support-aside { padding-top: var(--s-7); }
.support-aside .benefit-card { margin: var(--s-5) 0; }
.support-aside .benefit-card > .site-icoon { color: var(--b-1); margin-bottom: var(--s-5); }
.support-aside .tekst-link { margin-top: var(--s-5); }
.kennislijst { gap: var(--s-4); }
.kennislijst li { background: var(--opp-1); border: 1px solid var(--lijn); border-radius: var(--r-m); padding: var(--s-5); }
.kennislijst a { font-weight: 600; }

/* Footer as a clear second navigation, with a distinct brand signature. */
.site-wortel .voet { --b-1: var(--site-mint); --t-inverse: var(--site-ink); background: var(--site-ink); color: var(--site-on-ink); border-top: 0; }
.voet-binnen { padding-top: var(--s-8); gap: var(--s-8); }
.voet-merk > a { color: var(--site-on-ink); }
.voet-merk p { color: var(--site-on-ink-muted); max-width: 25ch; line-height: 1.7; }
.voet-locatie { display: flex; align-items: center; gap: var(--s-2); font-size: var(--f-1); color: var(--site-on-ink-muted); margin-top: var(--s-5); }
.voet-locatie .site-icoon { width: var(--s-4); height: var(--s-4); }
.voet-kolom h2 { color: var(--site-on-ink-muted); font-size: var(--f-1); letter-spacing: 0.08em; margin-bottom: var(--s-3); }
.voet-kolom a { color: var(--site-on-ink); font-size: var(--f-3); padding-block: var(--s-1); }
.voet-onder { color: var(--site-on-ink-muted); border-color: var(--site-ink-raised); padding-top: var(--s-5); }

@media (max-width: 1100px) {
  .kop-tagline { display: none; }
  .kop-utility .kop-frame { justify-content: flex-end; }
  .kop-hoofd .kop-frame { gap: var(--s-3); }
  .site-wortel .hoofdnav { gap: 0; }
  .site-wortel .hoofdnav a, .nav-ontdek summary { font-size: var(--f-2); padding: var(--s-2); }
  .hero-home > .hero { gap: var(--s-5); }
  .console-content { padding: var(--s-4); }
  .console-layout { grid-template-columns: var(--s-7) minmax(0,1fr); }
  .console-site { grid-template-columns: 1fr; }
  .console-site-meta { display: none; }
  .mini-site { min-height: 160px; }
  .mini-site-shapes { position: absolute; width: 35%; right: var(--s-4); bottom: var(--s-4); }
  .plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .plan-advice { grid-column: 1 / -1; border: 1px solid var(--lijn); border-radius: var(--r-m); }
  .plan-advice .icon-box { display: none; }
  .platform-feature, .faq-section { gap: var(--s-7); }
}
@media (max-width: 900px) {
  .kop-hoofd .kop-frame { grid-template-columns: 1fr auto auto; gap: var(--s-3); }
  .site-menuknop:not([hidden]) { display: inline-flex; align-items: center; gap: var(--s-2); background: transparent; border: 1px solid var(--lijn); padding: var(--s-2) var(--s-3); border-radius: var(--r-s); font: inherit; font-size: var(--f-3); color: var(--t-1); min-height: var(--s-7); grid-column: 3; grid-row: 1; cursor: pointer; }
  .site-wortel .kop-rechts { grid-column: 2; grid-row: 1; }
  .site-navigatie { grid-column: 1 / -1; grid-row: 2; }
  .site-navigatie[data-collapsed="true"] { display: none; }
  .site-wortel .hoofdnav { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--lijn); }
  .nav-dropdown { position: static; min-width: 0; box-shadow: none; margin-top: var(--s-2); }
  .hero-home > .hero, .platform-page-hero { grid-template-columns: 1fr; }
  .hero-home > .hero { padding-top: var(--s-7); }
  .hero-kopie { text-align: center; }
  .hero-kopie .lead { margin-inline: auto; }
  .hero-kopie h1 { font-size: var(--f-site-page); }
  .hero-badge, .hero-kopie .acties, .hero-note { justify-content: center; }
  .hero-art { width: 100%; max-width: 560px; margin: auto; }
  .console-site { grid-template-columns: 1fr 1fr; }
  .console-site-meta { display: block; }
  .mini-site-shapes { position: static; width: auto; }
  .foundation-strip { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .foundation-strip > span { justify-content: flex-start; }
  .benefit-grid { gap: var(--s-3); }
  .benefit-card { padding: var(--s-5); }
  .section-heading { display: block; }
  .section-heading > p, .section-heading > a { margin-top: var(--s-5); }
  .marketing-section { padding: var(--s-8) 0; }
  .platform-feature { grid-template-columns: 1fr; }
  .platform-copy h2 { max-width: none; }
  .platform-stack { max-width: 640px; width: 100%; margin: auto; }
  .eu-feature { gap: var(--s-7); padding: var(--s-6); }
  .closing-cta { padding: var(--s-7) var(--s-6); }
  .about-statement { padding: var(--s-7); gap: var(--s-7); }
  .support-layout { gap: var(--s-6); }
  .voet-binnen { gap: var(--s-6); }
}
@media (max-width: 640px) {
  .site-wortel main, .kop-frame, .voet-binnen { padding-inline: var(--s-5); }
  .kop-utility .kop-frame { justify-content: center; }
  .kop-utility-rechts { gap: var(--s-2); flex-wrap: nowrap; }
  .kop-hoofd .merk a { font-size: var(--f-6); gap: var(--s-2); }
  .kop-hoofd .merk-teken { width: var(--s-5); height: var(--s-5); }
  .site-wortel .kop-account { font-size: var(--f-2); padding-inline: var(--s-3); }
  .site-menuknop:not([hidden]) { font-size: var(--f-2); padding-inline: var(--s-2); }
  .site-wortel .hoofdnav { display: grid; grid-template-columns: 1fr 1fr; text-align: left; }
  .site-wortel .hoofdnav a { text-align: left; padding: var(--s-3); white-space: normal; }
  .nav-ontdek { grid-column: 1 / -1; }
  .nav-ontdek summary { padding: var(--s-3); }
  .hero-home > .hero { padding: var(--s-7) 0 var(--s-6); }
  .hero-kopie { text-align: left; }
  .hero-badge, .hero-kopie .acties, .hero-note { justify-content: flex-start; }
  .hero-kopie .eyebrow { font-size: var(--f-1); letter-spacing: 0.04em; }
  .hero-kopie h1 { margin: var(--s-5) 0; }
  .hero-kopie .lead { font-size: var(--f-4); }
  .hero-kopie .acties { gap: var(--s-4); }
  .hero-note { line-height: 1.6; }
  .platform-visual { padding: var(--s-5) 0; }
  .visual-console { transform: none; }
  .visual-orbit { inset: 0; }
  .console-layout { grid-template-columns: var(--s-6) minmax(0,1fr); }
  .console-rail { gap: var(--s-5); padding: var(--s-4) var(--s-1); }
  .console-rail .merk-teken { width: var(--s-4); height: var(--s-4); }
  .console-content { padding: var(--s-4); }
  .console-title strong { font-size: var(--f-4); }
  .console-bar { padding: var(--s-3); }
  .console-site { gap: var(--s-3); margin-block: var(--s-4); }
  .console-site-meta p { font-size: var(--f-1); }
  .mini-site { padding: var(--s-3); }
  .console-tools { gap: var(--s-1); }
  .console-tools > span { padding: var(--s-1); }
  .foundation-strip > span { font-size: var(--f-1); gap: var(--s-2); }
  .foundation-strip .site-icoon { width: var(--s-4); height: var(--s-4); }
  .marketing-section { padding: var(--s-7) 0; }
  .section-heading { margin-bottom: var(--s-6); }
  .benefit-grid, .plan-grid, .steps-grid, .faq-section, .eu-feature, .editorial-split, .support-layout, .dienst-detail { grid-template-columns: 1fr; }
  .benefit-grid { gap: var(--s-4); }
  .benefit-card { padding: var(--s-6); }
  .plan-advice { grid-column: auto; padding: var(--s-6); }
  .platform-feature { gap: var(--s-5); }
  .platform-stack { padding-block: var(--s-4); }
  .platform-stack > div { padding: var(--s-4); margin-inline: var(--s-2); font-size: var(--f-3); gap: var(--s-2); }
  .platform-stack .site-icoon { width: var(--s-4); height: var(--s-4); }
  .stack-label { font-size: var(--f-1); }
  .steps-grid { gap: var(--s-5); }
  .step-number { margin-bottom: var(--s-3); }
  .eu-feature { padding: var(--s-6); gap: var(--s-5); }
  .eu-ring { width: 140px; }
  .eu-illustration { padding-top: var(--s-5); }
  .faq-section { gap: var(--s-6); }
  .faq-item summary { font-size: var(--f-3); }
  .closing-cta { flex-direction: column; align-items: stretch; padding: var(--s-7) var(--s-5); gap: var(--s-6); }
  .closing-cta .acties { align-items: stretch; }
  .page-intro { padding: var(--s-7) 0 var(--s-6); }
  .platform-page-hero { gap: 0; }
  .editorial-split { gap: var(--s-3); }
  .about-statement { flex-direction: column; align-items: flex-start; padding: var(--s-6); gap: var(--s-5); }
  .about-statement p { font-size: var(--f-5); }
  .about-monogram .merk-teken { width: var(--s-8); height: var(--s-8); }
  .migration-intro { align-items: flex-start; padding: var(--s-5); gap: var(--s-3); }
  .migration-checklist { padding: var(--s-5); }
  .support-layout { padding-top: 0; gap: 0; }
  .support-aside { padding-top: 0; }
  .diensten-overzicht > .blok { padding: var(--s-5); }
  .site-wortel .pakket { padding: var(--s-5); }
  .voet-binnen { grid-template-columns: 1fr 1fr; padding-top: var(--s-7); }
  .voet-merk, .voet-kolom:last-of-type { grid-column: 1 / -1; }
}
/* Long-form guidance and product concepts: readable, linked, server rendered. */
.content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.content-grid[data-collection="guides"], .content-grid[data-collection="roadmap"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: var(--s-6); border: 1px solid var(--site-line); border-radius: var(--r-m); background: var(--site-surface); transition: border-color 160ms ease; }
.content-card:hover { border-color: var(--site-accent); }
.content-card:focus-within { outline: 2px solid var(--site-accent); outline-offset: 3px; }
.content-card-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); width: 100%; margin-bottom: var(--s-5); }
.content-card h3 { font-size: var(--f-5); line-height: 1.35; margin: 0 0 var(--s-3); }
.content-card h3 a { color: var(--site-text); text-decoration: none; }
.content-card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-m); }
.content-card > p { color: var(--site-muted); line-height: 1.75; margin: 0 0 var(--s-5); }
.content-card-arrow { margin-top: auto; color: var(--site-accent); }
.content-status { display: inline-block; width: fit-content; font-size: var(--f-1); font-weight: 650; line-height: 1.5; padding: var(--s-1) var(--s-3); border: 1px solid var(--site-line); border-radius: var(--r-s); color: var(--site-accent); background: var(--site-soft); }
.content-status[data-content-status="concept"] { border-style: dashed; color: var(--site-text); }
.content-hub-intro h1 { max-width: 22ch; }
.content-hub-intro .lead { max-width: 65ch; }
.content-hub-note { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-5) var(--s-6); border-left: 3px solid var(--site-accent); background: var(--site-soft); border-radius: 0 var(--r-s) var(--r-s) 0; }
.content-hub-note .site-icoon { flex-shrink: 0; margin-top: var(--s-1); }
.content-hub-note p { max-width: 88ch; margin: 0; color: var(--site-muted); line-height: 1.75; }
.content-crosslinks { display: flex; flex-wrap: wrap; gap: var(--s-5); padding: var(--s-7) 0 var(--s-8); }
.content-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-6) 0; color: var(--site-muted); font-size: var(--f-2); }
.content-breadcrumb a { color: var(--site-muted); }
.content-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.48fr); align-items: center; gap: var(--s-8); padding: var(--s-5) 0 var(--s-8); border-bottom: 1px solid var(--site-line); }
.content-hero h1 { font-size: var(--f-site-page); letter-spacing: var(--site-letter); line-height: 1.1; margin: var(--s-5) 0; max-width: 24ch; overflow-wrap: anywhere; }
.content-hero .lead { color: var(--site-muted); max-width: 58ch; margin: 0 0 var(--s-6); }
.content-hero .acties { gap: var(--s-5); }
.content-summary { padding: var(--s-6); background: var(--site-soft); border: 1px solid var(--site-line); border-radius: var(--r-m); }
.content-summary > .icon-box { margin-bottom: var(--s-5); }
.content-summary > p { line-height: 1.75; }
.content-summary .eyebrow { color: var(--site-accent); margin: 0; }
.concept-notice { font-size: var(--f-2); color: var(--site-muted); padding-top: var(--s-4); border-top: 1px solid var(--site-line); margin-bottom: 0; }
.content-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-8); padding-top: var(--s-8); }
.content-sidebar { min-width: 0; }
.content-toc { position: sticky; top: 130px; border-left: 1px solid var(--site-line); padding-left: var(--s-5); }
.content-toc > p { font-size: var(--f-1); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; margin: 0 0 var(--s-3); }
.content-toc a { display: flex; align-items: baseline; gap: var(--s-3); color: var(--site-muted); text-decoration: none; font-size: var(--f-2); line-height: 1.6; padding-block: var(--s-3); }
.content-toc a:hover { color: var(--site-accent); }
.content-toc a span { color: var(--site-accent); font-size: var(--f-1); font-variant-numeric: tabular-nums; }
.content-article { min-width: 0; max-width: 780px; }
.content-article > section { scroll-margin-top: 140px; margin-bottom: var(--s-8); }
.content-article h2 { font-size: var(--f-site-section); line-height: 1.2; letter-spacing: var(--site-letter); margin: 0 0 var(--s-5); }
.content-article p { line-height: 1.85; color: var(--site-muted); }
.content-article .eyebrow { color: var(--site-accent); }
.content-table-wrap { overflow-x: auto; border: 1px solid var(--site-line); border-radius: var(--r-m); }
.content-table { width: 100%; border-collapse: collapse; font-size: var(--f-3); line-height: 1.7; }
.content-table caption { text-align: left; padding: var(--s-5); color: var(--site-muted); font-size: var(--f-2); background: var(--site-soft); }
.content-table th, .content-table td { padding: var(--s-4) var(--s-5); text-align: left; vertical-align: top; border-bottom: 1px solid var(--site-line); }
.content-table thead th { color: var(--site-text); background: var(--site-soft); font-size: var(--f-2); }
.content-table tbody th { font-weight: 600; width: 30%; }
.content-table td { color: var(--site-muted); }
.content-table tr:last-child > * { border-bottom: 0; }
.content-checklist { padding: var(--s-6); border-radius: var(--r-m); background: var(--site-soft); border: 1px solid var(--site-line); }
.content-checklist ol { padding-left: var(--s-5); margin-bottom: 0; }
.content-checklist li { padding-left: var(--s-2); margin-top: var(--s-4); color: var(--site-muted); line-height: 1.75; }
.content-checklist li::marker { color: var(--site-accent); font-weight: 700; }
.content-source { font-size: var(--f-2); padding-block: var(--s-3); }
.content-next { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding: var(--s-6); background: var(--site-soft); border: 1px solid var(--site-line); border-radius: var(--r-m); }
.content-next h2 { font-size: var(--f-6); line-height: 1.3; margin: 0 0 var(--s-3); }
.content-next p { color: var(--site-muted); line-height: 1.75; max-width: 64ch; margin: 0; }
.content-next > a { flex-shrink: 0; }
.content-article .content-next { flex-direction: column; align-items: flex-start; }
@media (max-width: 1100px) {
  .content-hero { gap: var(--s-6); }
  .content-grid { gap: var(--s-4); }
  .content-card { padding: var(--s-5); }
  .content-layout { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-6); }
}
@media (max-width: 900px) {
  .content-hero { grid-template-columns: 1fr; padding-bottom: var(--s-7); }
  .content-hero h1 { max-width: 22ch; }
  .content-layout { grid-template-columns: 1fr; padding-top: var(--s-6); }
  .content-toc { position: static; }
  .content-article { max-width: none; }
  .content-next { align-items: flex-start; flex-direction: column; }
  .content-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .content-grid, .content-grid[data-collection] { grid-template-columns: 1fr; }
  .content-card { padding: var(--s-6); }
  .content-breadcrumb { padding-block: var(--s-5); }
  .content-hero { gap: var(--s-6); padding-top: var(--s-3); }
  .content-hero h1 { font-size: var(--f-site-section); }
  .content-hero .lead { font-size: var(--f-4); }
  .content-summary, .content-checklist, .content-next { padding: var(--s-5); }
  .content-hub-note { padding: var(--s-4); gap: var(--s-3); }
  .content-table th, .content-table td { padding: var(--s-3); overflow-wrap: anywhere; }
  .content-table tbody th { width: 34%; }
  .content-article > section { margin-bottom: var(--s-7); }
  .content-crosslinks { padding-bottom: var(--s-7); }
}
@media (prefers-reduced-motion: reduce) {
  .content-card { transition: none; }
}
@media (max-width: 370px) {
  .site-wortel main, .kop-frame, .voet-binnen { padding-inline: var(--s-4); }
  .kop-hoofd .kop-frame { gap: var(--s-2); }
  .kop-hoofd .merk a { font-size: var(--f-5); }
  .site-menuknop span { display: none; }
  .console-site { grid-template-columns: 1fr; }
  .console-site-meta { display: none; }
  .mini-site { min-height: 140px; }
  .mini-site-shapes { position: absolute; width: 35%; right: var(--s-3); bottom: var(--s-3); }
  .console-bottom { font-size: var(--f-1); gap: var(--s-1); padding-inline: var(--s-2); }
}