/* ── Seinr: de basis ────────────────────────────────────────────────────
   Sinds 14 oktober 2026 de stijl van opzetje D ("Thuis"): licht, blauw en
   rustig, voor een wat ouder publiek. Grote letters, ronde knoppen van
   minstens 48 pixels, en zo min mogelijk tekst per scherm. Het oude merk van
   papier, inkt en een gele markeerstift is weg, en daarmee het donkere
   thema: Sam koos voor alleen licht.

   Dit bestand is de basis voor elke pagina van seinr.nl, ook de 700 pagina's
   die commissies/lezen.py schrijft: letters, kleuren, de kop, de voet,
   knoppen, typografie en de bouwstenen die overal terugkomen. Wat bij één
   pagina hoort staat in stijl.css.

   Letters: Lexend voor koppen en grote getallen (open en ruim, makkelijk te
   lezen), Public Sans voor de tekst (strak; de letter van de Amerikaanse
   overheid, waar onze gegevens vandaan komen). Allebei variabel, van onze
   eigen server, net als de oude letters: geen IP-adres naar Google. */

@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/lettertype/lexend-latin.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: "Lexend";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/lettertype/lexend-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/lettertype/public-sans-latin.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: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/lettertype/public-sans-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --grond: #ffffff;
  --lucht: #eaf2fd;
  --lucht-2: #d5e5fa;
  --zacht: #f4f7fb;
  --lijn: #d7e0eb;
  --inkt: #0f2a47;
  --inkt-2: #44566c;
  --inkt-3: #5a6b80;
  --blauw: #1b5fcc;
  --blauw-diep: #154ea9;
  --plus: #17784a;
  --min: #b3261e;
  --ster: #f2a516;
  --kop: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tekst: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gat: 16px;
  --rond: 26px;
  --breed: 72rem;
  --smal: 46rem;
  color-scheme: light;
}
@media (min-width: 40rem) { :root { --gat: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font: 400 1.125rem/1.6 var(--tekst);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 60rem) { body { font-size: 1.1875rem; } }

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blauw); text-underline-offset: 0.18em; }
a:hover { color: var(--blauw-diep); }
:focus-visible { outline: 3px solid var(--blauw); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--lucht-2); color: var(--inkt); }
[hidden] { display: none !important; }

h1, h2, h3 { margin: 0; font-family: var(--kop); font-weight: 600; text-wrap: balance; line-height: 1.15; letter-spacing: -0.025em; color: var(--inkt); }
h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 3.6rem); letter-spacing: -0.035em; line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
p { margin: 0 0 1rem; text-wrap: pretty; overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 0.4rem; }
b, strong { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--lijn); margin: 2rem 0; }

.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--breed); margin: 0 auto; padding-left: var(--gat); padding-right: var(--gat); }
.smal { max-width: var(--smal); }
.leiding { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.35rem); line-height: 1.55; color: var(--inkt-2); }
.klein { font-size: 0.9375rem; line-height: 1.55; color: var(--inkt-2); }
.stil { color: var(--inkt-2); }
.leestekst { max-width: 60ch; }

/* Het label boven een kop. Was een geel streepje met kleine kapitalen; nu
   een rustige regel in het blauw. */
.merk { display: inline-block; font-family: var(--tekst); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0; color: var(--blauw); }
.kopje { margin-bottom: 0.75rem; }
/* De oude markeerstift op een woord: nu gewoon dat woord in het blauw. */
.streep { color: var(--blauw); }

/* ── knoppen ───────────────────────────────────────────────────────── */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.6rem 1.3rem;
  border-radius: 999px; border: 2px solid var(--blauw);
  background: var(--blauw); color: #fff;
  font: 600 1.0625rem/1.2 var(--tekst);
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.knop:hover { background: var(--blauw-diep); border-color: var(--blauw-diep); color: #fff; }
.knop:disabled { opacity: 0.6; cursor: default; }
.knop--groot { min-height: 60px; padding: 0.9rem 1.75rem; font-size: 1.1875rem; }
.knop--rand { background: transparent; border-color: var(--lijn); color: var(--inkt); }
.knop--rand:hover { background: var(--zacht); border-color: var(--lijn); color: var(--inkt); }
.knop--zacht { background: var(--lucht); border-color: var(--lucht); color: var(--blauw-diep); }
.knop--zacht:hover { background: var(--lucht-2); border-color: var(--lucht-2); color: var(--blauw-diep); }
.knop--wit { background: #fff; border-color: #fff; color: var(--blauw-diep); }
.knop--wit:hover { background: var(--lucht); border-color: var(--lucht); color: var(--blauw-diep); }
.knop--lijn { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.knop--lijn:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }
.knop--breed { width: 100%; }
.verder { font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.verder--lang { display: inline-block; margin-top: 0.5rem; }

/* ── de kop van elke pagina ───────────────────────────────────────── */
.kop { position: relative; z-index: 20; background: var(--grond); border-bottom: 1px solid var(--lijn); }
.kop__binnen { max-width: var(--breed); margin: 0 auto; padding: 0.75rem var(--gat); display: flex; align-items: center; gap: 1rem; }
.logo { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--blauw); text-decoration: none; }
.logo svg { width: 36px; height: 36px; flex: none; }
.logo span { font-family: var(--kop); color: var(--inkt); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.03em; }
.logo:hover span { color: var(--inkt); }
.menuknop {
  margin-left: auto; min-height: 48px; padding: 0 1rem;
  display: inline-flex; align-items: center; gap: 0.6rem;
  border: 2px solid var(--lijn); border-radius: 999px; background: var(--grond); color: var(--inkt);
  font: 600 1.0625rem var(--tekst); cursor: pointer;
}
.menuknop__streep, .menuknop__streep::before, .menuknop__streep::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
.menuknop__streep::before, .menuknop__streep::after { content: ""; position: absolute; left: 0; }
.menuknop__streep::before { top: -6px; }
.menuknop__streep::after { top: 6px; }
.menu {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--grond); border-bottom: 1px solid var(--lijn);
  padding: 0.5rem var(--gat) 1.25rem; box-shadow: 0 16px 24px -16px rgba(15, 42, 71, 0.25);
}
.menu.is-open { display: grid; gap: 0.25rem; }
.menu a:not(.knop) { color: var(--inkt); text-decoration: none; font-weight: 600; padding: 0.8rem 0; border-bottom: 1px solid var(--lijn); }
.menu a[aria-current="page"]:not(.knop) { color: var(--blauw); }
.menu .knop { margin-top: 0.6rem; min-height: 56px; }
@media (min-width: 60rem) {
  .menuknop { display: none; }
  .menu, .menu.is-open { display: flex; position: static; margin-left: auto; padding: 0; border: 0; box-shadow: none; align-items: center; gap: 1.4rem; }
  .menu a:not(.knop) { border: 0; padding: 0; font-size: 1.0625rem; font-weight: 500; }
  .menu a:not(.knop):hover { color: var(--blauw); }
  .menu .knop { margin-top: 0; min-height: 46px; }
  .menu .knop--rand { margin-left: 0.4rem; }
}

/* ── blokken ──────────────────────────────────────────────────────── */
.regel, .blok { padding: 4rem 0; }
@media (min-width: 60rem) { .regel, .blok { padding: 5.5rem 0; } }
.regel + .regel { padding-top: 0; }
.regel--lucht, .blok--lucht { background: var(--lucht); }
.regel--zacht, .blok--zacht { background: var(--zacht); }
.regel--lucht + .regel, .regel--zacht + .regel, .regel + .regel--lucht, .regel + .regel--zacht { padding-top: 4rem; }
@media (min-width: 60rem) { .regel--lucht + .regel, .regel--zacht + .regel, .regel + .regel--lucht, .regel + .regel--zacht { padding-top: 5.5rem; } }
.blok__titel, .regel h2 { margin-bottom: 1.25rem; }
.blok__kop { display: grid; gap: 0.75rem; margin-bottom: 2.25rem; max-width: 40rem; }

/* De opening van een gewone pagina: label, kop, één zin. */
.opening { background: linear-gradient(180deg, var(--lucht) 0, var(--grond) 100%); padding: 3rem 0 3.5rem; }
@media (min-width: 60rem) { .opening { padding: 4.5rem 0 4.5rem; } }
.opening h1 { margin-top: 0.6rem; max-width: 22ch; }
.opening .leiding { margin-top: 1.1rem; max-width: 42ch; }

/* Een knop halverwege een pagina, voor wie daar overtuigd raakt. */
.duw {
  margin-top: 2.5rem; padding: 1.5rem; border-radius: var(--rond); background: var(--lucht);
  display: grid; gap: 1rem; align-items: center;
}
@media (min-width: 46rem) { .duw { grid-template-columns: 1fr auto; padding: 1.75rem 2rem; } }
.duw__woord { font-family: var(--kop); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; margin: 0; }
.duw__noot { color: var(--inkt-2); margin: 0.25rem 0 0; }
.duw p { margin: 0; }

/* De afsluiter onderaan een pagina: blauw, kop links, knoppen rechts. */
.slot { background: var(--blauw); color: #fff; padding: 4rem 0; }
.regel.slot { padding: 4rem 0; }
.slot__in, .slot__binnen { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 56rem) { .slot__in, .slot__binnen { grid-template-columns: 1fr auto; gap: 3rem; } }
.slot h2, .slot__kop { color: #fff; margin: 0; }
.slot .streep { color: #fff; }
.slot p, .slot__noot, .slot__prijs { color: #dce8fc; font-size: 1.2rem; margin: 0.4rem 0 0; }
.slot__prijs { font-family: var(--kop); font-weight: 600; color: #fff; font-size: 1.6rem; letter-spacing: -0.02em; }
.slot__knoppen, .prijskaart__voet { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.slot .knop { background: #fff; border-color: #fff; color: var(--blauw-diep); }
.slot .knop:hover { background: var(--lucht); border-color: var(--lucht); }
.slot .knop--lijn { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.slot .verder { color: #fff; }
@media (max-width: 30rem) { .slot__knoppen .knop, .slot .prijskaart__voet .knop { width: 100%; } }

/* ── vragen die je openklikt ───────────────────────────────────────── */
.vragen, .regels--vraag { display: grid; gap: 0.75rem; padding: 0; margin: 0; list-style: none; }
details, .uitklap { background: var(--zacht); border-radius: 18px; }
.regel--zacht details, .blok--zacht details, .regel--lucht details { background: var(--grond); }
summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 1.35rem; min-height: 64px; font-weight: 600; font-size: 1.125rem; color: var(--inkt);
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lucht); color: var(--blauw); font-size: 1.5rem; line-height: 1;
}
.regel--zacht summary::after, .blok--zacht summary::after { background: var(--lucht); }
details[open] > summary::after { content: "\2212"; }
summary:hover { color: var(--blauw); }
details > :not(summary) { margin-left: 1.35rem; margin-right: 1.35rem; color: var(--inkt-2); max-width: 64ch; }
details > :last-child { margin-bottom: 1.35rem; }
details > summary + * { margin-top: 0; }

/* ── tegels: drie getallen naast elkaar ─────────────────────────────── */
.tegels { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .tegels { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.tegel { display: grid; gap: 0.3rem; align-content: start; padding: 1.5rem; border-radius: 22px; background: var(--lucht); }
.tegel__getal { font-family: var(--kop); font-size: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); font-weight: 600; line-height: 1.1; color: var(--blauw); letter-spacing: -0.03em; }
.tegel__getal--stil { color: var(--inkt-2); }
.tegel__wat { color: var(--inkt-2); }
.tegel__noot { font-size: 0.9375rem; color: var(--inkt-3); }

/* ── kaart: een wit vlak met een rand ──────────────────────────────── */
.kaart { background: var(--grond); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 1.75rem; box-shadow: 0 24px 48px -40px rgba(15, 42, 71, 0.45); }
@media (min-width: 40rem) { .kaart { padding: 2.25rem; } }

/* ── tabellen ─────────────────────────────────────────────────────── */
.tabelwikkel { overflow-x: auto; border: 1px solid var(--lijn); border-radius: 18px; }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
th, td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
th { font-weight: 600; color: var(--inkt-2); background: var(--zacht); font-size: 0.9375rem; }
tr:last-child td { border-bottom: 0; }

/* ── formulieren ──────────────────────────────────────────────────── */
input[type="email"], input[type="text"], input[type="tel"], input[type="number"], textarea, select {
  min-height: 56px; width: 100%; min-width: 0; padding: 0 1.25rem; border-radius: 16px;
  border: 2px solid var(--lijn); background: var(--grond); color: var(--inkt); font: inherit;
}
textarea { padding: 0.9rem 1.25rem; min-height: 9rem; line-height: 1.5; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--blauw); box-shadow: 0 0 0 3px rgba(27, 95, 204, 0.22); }
label { font-weight: 600; }
.vorm__melding { font-size: 1rem; background: var(--lucht); color: var(--inkt); padding: 0.75rem 1rem; border-radius: 14px; }

/* ── de voet ──────────────────────────────────────────────────────── */
footer { background: var(--zacht); border-top: 1px solid var(--lijn); color: var(--inkt-2); font-size: 0.9375rem; }
.voet { display: grid; gap: 2rem; padding-top: 3rem; padding-bottom: 7rem; }
@media (min-width: 46rem) { .voet { grid-template-columns: 1.4fr 1fr 1fr; padding-bottom: 3rem; } }
.voet p { margin: 0 0 0.75rem; max-width: 46ch; }
.voet .logo { margin-bottom: 1rem; }
.voet .logo svg { width: 30px; height: 30px; }
.voet .logo span { font-size: 1.3rem; }
.voet__bedrijf { line-height: 1.6; }
.voet__jaar { color: var(--inkt-3); }
.voetlijst { display: grid; gap: 0.15rem; align-content: start; }
.voetlijst .merk { margin-bottom: 0.5rem; color: var(--inkt); }
.voetlijst a { color: var(--inkt-2); text-decoration: none; padding: 0.35rem 0; }
.voetlijst a:hover { color: var(--blauw); text-decoration: underline; }

/* ── de balk onderin op telefoons ──────────────────────────────────── */
.plakbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 0.5rem;
  padding: 0.75rem var(--gat) calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--lijn);
  transform: translateY(110%); transition: transform 0.25s;
}
.plakbalk--aan { transform: none; }
.plakbalk .knop { min-height: 56px; padding-left: 0.75rem; padding-right: 0.75rem; font-size: 1.0625rem; }
.plakbalk--een { grid-template-columns: 1fr; }
@media (min-width: 46rem) { .plakbalk { display: none; } }
@media (prefers-reduced-motion: reduce) { .plakbalk { transition: none; } }

/* Op telefoons die geen muis hebben: tikdoelen van minstens 44 pixels. */
@media (hover: none) and (pointer: coarse) {
  .voetlijst a { min-height: 44px; display: flex; align-items: center; }
}

/* Na de opening geen tweede lap wit: het eerste blok begint dichterbij. */
.opening + .regel, .opening + .blok { padding-top: 1.5rem; }
@media (min-width: 60rem) { .opening + .regel, .opening + .blok { padding-top: 2rem; } }