/* Borderless — de welkomspagina
 *
 * Eén ontwerp, geen richtingen meer. De vijf varianten (reis, wereld, redactie, menu, stil)
 * met hun toneel, decorlagen en stijlkiezer zijn eruit: dat was gereedschap om te kiezen, en
 * die keuze is gemaakt. Wat er stond — een verlopen nachthemel met een getekende zonsondergang
 * eroverheen — verkocht bovendien niets: het toonde een tekening in plaats van het product.
 *
 * Wat dit ontwerp wél doet, en waarom:
 *
 *   Beige papier.   De applicatie is donker. Op een donkere pagina verdrinken de
 *                   schermafbeeldingen in de achtergrond; op papier springen ze eruit en zijn
 *                   zíj de kleur van de pagina. Warm beige in plaats van wit, met terracotta
 *                   als enige accent — een grond die bij de wereldkaarten en de stempels past.
 *   Geen verlopen.  Geen gloed, geen schaduw die niets draagt, geen decoratieve tekening.
 *                   Vlakke vlakken, haarlijnen, ruimte.
 *   Knoppen.        Je scrolt niet door de hele pagina: onder het eerste scherm staan zes
 *                   knoppen en je kiest er één. Zonder JavaScript staan de onderdelen gewoon
 *                   onder elkaar en zijn de knoppen sprongen — de pagina blijft dan heel.
 *   Eén maat.       Eén typografische schaal (--t-*), één kaartbehandeling (.kaart), één
 *                   venster om elke schermafbeelding (.scherm). Wie iets toevoegt gebruikt die
 *                   en verzint geen nieuwe getallen.
 *
 * Dit blad staat op zichzelf: het leest géén tokens.css. De applicatie mag haar tokens
 * veranderen zonder dat de verkooppagina meebeweegt.
 */

:root {
  --papier: #f4eee2;
  --papier-2: #eae2d3;
  --wit: #fdfbf6;
  --inkt: #1f1811;
  --inkt-2: #5b5044;
  --inkt-3: #766a58;
  --lijn: #ded4c2;
  --lijn-2: #c9bda7;
  /* Het warme accent. Spaarzaam: de actieve knop, de stapnummers, de streep boven een prijs. */
  --warm: #a8512b;
  --warm-2: #8e4322;
  /* De applicatie zelf, in de schermcitaten en de gespreksballon. Die is donker en blauw; dat
     wordt hier niet warm gemaakt, want het is een citaat. Het accent erbinnen wel. */
  --nacht: #12172c;
  --nacht-inkt: #e8ecf7;
  --nacht-warm: #e79a63;

  /* De typografische schaal. Vijf treden, overal dezelfde. */
  --t-h1: clamp(31px, 4.3vw, 50px);
  --t-h2: clamp(24px, 2.7vw, 33px);
  --t-h3: 18px;
  --t-lood: 17.5px;
  --t-tekst: 15.5px;
  --t-fijn: 13.5px;
  --t-opschrift: 12px;

  /* De kaart: één rand, één ronding, één zachte schaduw. */
  --kaart-rand: 1px solid var(--lijn);
  --kaart-schaduw: 0 1px 2px rgba(31, 24, 17, .05), 0 12px 32px -24px rgba(31, 24, 17, .4);

  --breed: 1120px;
  --gat: 28px;
  --ronding: 10px;
  --ronding-knop: 6px;
  /* De hoogte van wat bovenaan plakt: de balk met het logo, de zes knoppen en de drie dingen
     rechts. Op een smaller scherm staan de knoppen op een tweede regel; zie de mediaquery's. */
  --plak: 62px;

  --font: "Inter var", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Japans staat op deze pagina als voorbeeld. Zonder een eigen familie kiest de browser per
     teken een terugvalfont, en dan komt van sommige kanji een zwart blok in beeld. */
  --font-ja: "Yu Gothic UI", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Noto Sans JP", "MS PGothic", sans-serif;
}

* { box-sizing: border-box; }

/* Geen `scroll-behavior: smooth` op html: welkom.js scrolt zelf, met een eigen keuze voor
   zacht of niet, en een tweede zachte laag eroverheen maakt elke scrollpositie onzeker. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: 640; letter-spacing: -.028em; line-height: 1.08; }
h1 { font-size: var(--t-h1); letter-spacing: -.033em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.018em; }
p { margin: 0; }

:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; border-radius: 3px; }

/* ══ Gedeelde bouwstenen ══════════════════════════════════════════════════════ */

.breed { max-width: var(--breed); margin: 0 auto; padding: 0 var(--gat); }

.opschrift {
  font-size: var(--t-opschrift);
  font-weight: 580;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--inkt-3);
  margin-bottom: 14px;
}

.lood { font-size: var(--t-lood); line-height: 1.62; color: var(--inkt-2); margin-top: 18px; max-width: 60ch; }
.breed-tekst { max-width: 76ch; }
.fijn { font-size: var(--t-fijn); line-height: 1.55; color: var(--inkt-3); margin-top: 18px; }
.fijn[hidden] { display: none; }

.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--inkt);
  color: var(--wit);
  border: 1px solid var(--inkt);
  border-radius: var(--ronding-knop);
  padding: 12px 20px;
  font: inherit;
  font-size: 15px;
  font-weight: 560;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
/* Drie standen die je voelt: rust, erboven, ingedrukt. */
.knop:hover { background: #33271b; border-color: #33271b; transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(31, 24, 17, .55); }
.knop:active { transform: translateY(0); box-shadow: none; }
.knop.stil { background: transparent; color: var(--inkt); border-color: var(--lijn-2); }
.knop.stil:hover { background: var(--wit); border-color: var(--inkt-3); }
.knop.klein { padding: 8px 14px; font-size: 14px; }

.tekstlink { font-size: 14.5px; color: var(--inkt-2); text-decoration: none; }
.tekstlink:hover { color: var(--warm); text-decoration: underline; text-underline-offset: 3px; }

/* De kaart. Eén behandeling voor de prijzen en de drie voorbeeldcursussen. */
.kaart {
  background: var(--wit);
  border: var(--kaart-rand);
  border-radius: var(--ronding);
  box-shadow: var(--kaart-schaduw);
  padding: 22px 24px;
}

/* Het venster om een schermafbeelding: een smalle kop met drie stippen en een naam, dan het
   beeld. Alle drie de uitsnedes lezen zo als één reeks. */
.scherm { margin: 0; }
.scherm-venster {
  background: var(--wit);
  border: 1px solid var(--lijn-2);
  border-radius: var(--ronding);
  box-shadow: var(--kaart-schaduw);
  overflow: hidden;
}
.scherm-kop {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: var(--papier-2);
  border-bottom: 1px solid var(--lijn);
}
.scherm-kop i { width: 8px; height: 8px; border-radius: 50%; background: var(--lijn-2); }
.scherm-kop span { margin-left: 8px; font-size: 11.5px; font-weight: 560; letter-spacing: .02em; color: var(--inkt-3); }
.scherm img { width: 100%; }
.scherm figcaption { margin-top: 12px; font-size: 13px; color: var(--inkt-3); }

/* ══ De balk ══════════════════════════════════════════════════════════════════ */

/* Logo links, de zes onderdelen in het midden, taal/inloggen/beginnen rechts. De hele balk
   plakt bovenaan, zodat je vanaf elke plek op de pagina een onderdeel kunt kiezen zonder
   eerst terug te scrollen. */
.balk { position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--lijn); background: var(--papier); }
.balk-binnen { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); height: var(--plak); }

.merk { display: inline-flex; align-items: center; gap: 9px; font-weight: 620; font-size: 16.5px; letter-spacing: -.015em; text-decoration: none; }
.merk img { border-radius: 5px; }
.merk.klein { font-size: 14.5px; gap: 8px; }

.balk-rechts { display: flex; align-items: center; gap: 16px; }

.taalknop { display: inline-flex; border: 1px solid var(--lijn-2); border-radius: var(--ronding-knop); overflow: hidden; }
.taalknop[hidden] { display: none; }
.taalknop button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 580;
  letter-spacing: .06em;
  color: var(--inkt-3);
  padding: 6px 9px;
}
.taalknop button + button { border-left: 1px solid var(--lijn-2); }
.taalknop button:hover { color: var(--inkt); }
.taalknop button.actief { background: var(--inkt); color: var(--wit); }

/* ══ Hero ═════════════════════════════════════════════════════════════════════ */

.hero { padding: clamp(44px, 6vw, 72px) 0 clamp(40px, 5vw, 60px); }
.hero-binnen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero-tekst { max-width: 34rem; }
.hero-tekst h1 { max-width: 15ch; }
.hero-tekst .lood { margin-top: 22px; }
/* De kern in twee zinnen, naast een korte warme streep. Geen kader: het is een zin, geen
   mededeling. */
.tweezijdig {
  margin-top: 20px;
  padding-left: 16px;
  border-left: 2px solid var(--warm);
  font-size: 16px;
  line-height: 1.55;
  max-width: 34rem;
}
.tweezijdig span { display: block; }
.tweezijdig span + span { margin-top: 6px; }

/* ══ De feiten ════════════════════════════════════════════════════════════════ */

.feiten { border-top: 1px solid var(--lijn); }
.feiten-binnen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feit { padding: 20px 0; }
.feit + .feit { padding-left: 24px; border-left: 1px solid var(--lijn); }
.feit strong { display: block; font-size: 22px; font-weight: 640; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.feit span { display: block; margin-top: 3px; font-size: 13px; color: var(--inkt-3); }

/* ══ De knoppenbalk en de onderdelen ══════════════════════════════════════════
 * Met JavaScript: één onderdeel tegelijk, gekozen met de knoppen. Zonder JavaScript: de
 * knoppen zijn ankers en alle onderdelen staan onder elkaar. */

/* De knoppen staan in het midden van de balk en vullen zijn hoogte, zodat de streep onder de
   actieve knop precies op de onderrand van de balk valt. */
.tabs { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; justify-content: center; }
.tabs-binnen { display: flex; gap: clamp(14px, 1.8vw, 24px); }
.tabs a {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 14.5px;
  font-weight: 540;
  color: var(--inkt-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease;
}
.tabs a:hover { color: var(--inkt); }
.tabs a.actief { color: var(--inkt); font-weight: 600; }
.tabs a.actief::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--warm);
}

.paneel { padding: clamp(44px, 6vw, 76px) 0; }
/* Zonder JavaScript staat alles onder elkaar; dan scheidt een haarlijn de onderdelen. */
.paneel + .paneel > .breed { border-top: 1px solid var(--lijn); padding-top: clamp(44px, 6vw, 76px); }
.paneel + .paneel { padding-top: 0; }
.js .paneel { display: none; }
.js .paneel > .breed { border-top: 0; padding-top: 0; width: 100%; }
/* Het getoonde onderdeel vult minstens het venster onder de knoppenbalk, en staat daarbinnen
   gecentreerd. Twee dingen tegelijk: er is altijd genoeg hoogte om de balk tot bovenaan te
   scrollen (anders blijft bij een kort onderdeel de onderkant van het eerste scherm hangen),
   en een kort onderdeel staat midden in beeld in plaats van met een leeg vlak eronder. */
.js .paneel.actief {
  display: flex;
  align-items: center;
  /* `--balk-hoog` wordt door welkom.js opgemeten en bijgehouden; `--plak` is de terugval.
     Die twee moeten los blijven: `--plak` bepaalt de hóógte van de balk, dus daar de gemeten
     maat in terugschrijven zou hem bij elke meting een randbreedte laten groeien. */
  min-height: calc(100svh - var(--balk-hoog, var(--plak)));
  padding: clamp(36px, 4.5vw, 60px) 0;
  animation: paneel-op .22s ease both;
}
@keyframes paneel-op { from { opacity: 0; } to { opacity: 1; } }

/* Alleen op het eerste onderdeel staat de pagina eromheen: het openingsscherm erboven, de
 * vragen en het slot eronder. Klik je een ánder onderdeel aan, dan is dat onderdeel het hele
 * scherm — er valt dan niets weg te scrollen naar de verkooptekst of de vragen, en scrollen
 * blijft binnen het onderdeel zelf. De balk bovenaan blijft altijd staan, dus je raakt nooit
 * de weg terug kwijt. Zonder JavaScript geldt dit niet: dan staat alles gewoon onder elkaar. */
.js.alleen-paneel .hero,
.js.alleen-paneel .feiten,
.js.alleen-paneel .vragen,
.js.alleen-paneel .slot,
.js.alleen-paneel .voet { display: none; }

/* De secties onder de onderdelen (vragen, slot): gewoon onder elkaar. */
.band { padding: clamp(44px, 6vw, 72px) 0; }
.band > .breed { border-top: 1px solid var(--lijn); padding-top: clamp(44px, 6vw, 72px); }
.band { padding-top: 0; }

/* ══ Werkwijze ════════════════════════════════════════════════════════════════ */

.stappen { list-style: none; margin: 40px 0 0; padding: 0; }
.stap {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding: 30px 0;
  border-top: 1px solid var(--lijn);
}
.stap:last-child { border-bottom: 1px solid var(--lijn); }
.stap-nummer {
  font-size: 13px;
  font-weight: 620;
  color: var(--warm);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  padding-top: 3px;
}
.stap-tekst p { margin-top: 10px; color: var(--inkt-2); font-size: var(--t-tekst); line-height: 1.6; }

/* Bij stap 1 en 2 stonden hier nagetekende blokjes; die zijn vervangen door uitsneden van de
   échte schermen (zie welkom.html). Wat overblijft is stap 3: het leerplan als lijstje, en dat
   is met opzet géén schermafdruk — het is een diagram van de opbouw, niet een claim over hoe
   één scherm eruitziet.

   Het was donker, "want de applicatie is donker". Sinds 8 september 2026 is de app zelf beige,
   dus dat citaat loog. Nu papier, in dezelfde vormentaal als de kaarten. */
.mock {
  background: var(--wit);
  color: var(--inkt);
  border: var(--kaart-rand);
  border-radius: 8px;
  padding: 15px 16px;
  font-size: 12.5px;
  line-height: 1.5;
}

.m-plan { display: grid; gap: 8px; }
.m-les { display: flex; align-items: center; gap: 9px; color: var(--inkt-3); }
.m-les .bol { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--lijn-2); flex: none; }
.m-les.klaar .bol { background: var(--lijn-2); border-color: transparent; }
.m-les.nu { color: var(--inkt); font-weight: 560; }
.m-les.nu .bol { background: var(--warm); border-color: transparent; }

/* ══ Persoonlijk ══════════════════════════════════════════════════════════════ */

.profielen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.profielen.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profiel { background: var(--wit); border: var(--kaart-rand); border-radius: var(--ronding); box-shadow: var(--kaart-schaduw); padding: 22px 24px; }
.profiel-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.profiel-kop strong { font-size: 17px; font-weight: 620; letter-spacing: -.015em; }
.profiel-kop span { font-size: 12.5px; color: var(--inkt-3); white-space: nowrap; }
.profiel-doel { margin-top: 4px; font-size: 14.5px; color: var(--inkt-2); }

.woorden { margin: 18px 0 0; }
.woorden > div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 0; border-top: 1px solid var(--lijn); }
.woorden dt { font-size: 14.5px; font-weight: 560; }
.woorden dt [lang="ja"] { font-family: var(--font-ja); }
/* De uitspraak op een eigen regel: naast een lange zin duwt hij de vertaling anders over twee
   regels, en dan valt de rij uit elkaar. */
.woorden dt i { display: block; font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--inkt-3); margin-top: 1px; }
.woorden dd { margin: 0; font-size: var(--t-fijn); color: var(--inkt-3); }

/* ══ Twee kolommen, tekst naast een beeld ═════════════════════════════════════
 * Om en om: het ene onderdeel tekst links, het volgende het beeld links. Drie keer dezelfde
 * indeling achter elkaar leest als een sjabloon. */

.twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4.5vw, 60px); align-items: center; }
.kolom-beeld { margin: 0; }
@media (min-width: 941px) { .twee.omgekeerd .kolom-beeld, .twee.omgekeerd .kolom-visueel { order: -1; } }

.regels { margin: 26px 0 0; }
.regels > div { padding: 15px 0; border-top: 1px solid var(--lijn); }
.regels > div:last-child { border-bottom: 1px solid var(--lijn); }
.regels dt { font-size: 15px; font-weight: 600; }
.regels dd { margin: 5px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--inkt-2); }

/* ══ Rollenspel ═══════════════════════════════════════════════════════════════ */

.gesprek { display: grid; gap: 9px; }
.bericht {
  max-width: 84%;
  border: 1px solid var(--lijn);
  background: var(--wit);
  border-radius: 10px 10px 10px 3px;
  padding: 11px 14px;
  font-size: 14.5px;
  line-height: 1.5;
  box-shadow: var(--kaart-schaduw);
}
.bericht.ik { margin-left: auto; background: var(--nacht); border-color: var(--nacht); color: var(--nacht-inkt); border-radius: 10px 10px 3px 10px; }

/* ══ Wat het kost ═════════════════════════════════════════════════════════════ */

.prijzen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.prijs { border-top: 3px solid var(--warm); border-top-left-radius: var(--ronding); border-top-right-radius: var(--ronding); padding: 24px 26px 26px; }
.prijs-bedrag { font-size: clamp(30px, 3.6vw, 40px); font-weight: 640; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.prijs-wanneer { margin-top: 3px; font-size: 13px; color: var(--inkt-3); }
.prijs p:last-child { margin-top: 14px; font-size: 14.5px; line-height: 1.6; color: var(--inkt-2); }

/* ══ Vragen ═══════════════════════════════════════════════════════════════════ */

.vragenlijst { margin-top: 28px; max-width: 76ch; border-top: 1px solid var(--lijn); }
.vraag { border-bottom: 1px solid var(--lijn); }
.vraag summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after { content: "+"; flex: none; font-weight: 400; font-size: 20px; line-height: 1; color: var(--inkt-3); transition: transform .16s ease; }
.vraag[open] summary::after { transform: rotate(45deg); }
.vraag summary:hover { color: var(--warm); }
.vraag p { padding: 0 0 18px; font-size: var(--t-tekst); line-height: 1.62; color: var(--inkt-2); max-width: 68ch; }

/* ══ Slot ═════════════════════════════════════════════════════════════════════ */

.slot-binnen h2 { max-width: 26ch; }

/* ══ De voet ══════════════════════════════════════════════════════════════════ */

.voet { border-top: 1px solid var(--lijn); padding: 40px 0 28px; }
.voet-binnen { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.voet-merk .fijn { margin-top: 12px; max-width: 34ch; }
.voet-kolom { display: flex; flex-direction: column; gap: 8px; }
.voet-kop { font-size: var(--t-opschrift); font-weight: 580; letter-spacing: .13em; text-transform: uppercase; color: var(--inkt-3); margin-bottom: 4px; }
.voet-kolom a { font-size: 14.5px; color: var(--inkt-2); text-decoration: none; width: fit-content; }
.voet-kolom a:hover { color: var(--warm); text-decoration: underline; text-underline-offset: 3px; }
.voet-onder { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--lijn); }
.copyright { font-size: 13px; color: var(--inkt-3); }

/* ══ Smaller dan een laptop ═══════════════════════════════════════════════════ */

/* Tot een laptopbreedte passen het logo, zes knoppen en de drie dingen rechts niet op één
   regel: de knoppen gaan naar een tweede regel ín de balk, en breken daar netjes af — ze
   schuiven nooit opzij, want dan zou je moeten vegen om te zien wat er is. De hele balk blijft
   plakken. */
@media (max-width: 1099px) {
  :root { --plak: 92px; }
  .balk-binnen { flex-wrap: wrap; height: auto; gap: 0 16px; }
  .merk, .balk-rechts { height: 52px; }
  .balk-rechts { margin-left: auto; }
  .tabs { order: 3; flex-basis: 100%; align-self: auto; justify-content: flex-start; margin: 0 calc(-1 * var(--gat)); padding: 0 var(--gat); border-top: 1px solid var(--lijn); }
  .tabs-binnen { flex-wrap: wrap; gap: 0 18px; }
  .tabs a { height: 38px; font-size: 14px; }
}

@media (max-width: 940px) {
  .hero-binnen, .twee { grid-template-columns: minmax(0, 1fr); }
  .hero-tekst { max-width: none; }
  .hero-tekst h1 { max-width: 18ch; }
  .profielen, .profielen.drie, .prijzen { grid-template-columns: minmax(0, 1fr); }
  .stap { grid-template-columns: 34px minmax(0, 1fr); }
  .stap .mock, .stap .fragment { grid-column: 2; }
  /* Onder de tekst mag de uitsnede zijn eigen breedte houden; uitrekken tot de volle kolom
     vergroot alleen de schermafbeelding en maakt hem wolliger, niet leesbaarder. */
  .stap .fragment { max-width: 364px; }
  .bericht { max-width: 92%; }
  /* Drie feiten onder elkaar, met een haarlijn ertussen in plaats van ernaast. */
  .feiten-binnen { grid-template-columns: minmax(0, 1fr); }
  .feit { padding: 14px 0; }
  .feit + .feit { padding-left: 0; border-left: 0; border-top: 1px solid var(--lijn); }
  .voet-binnen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .voet-merk { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  :root { --gat: 20px; }
  .balk-rechts { gap: 10px; }
  .tekstlink { display: none; }
  .knoppen .knop { flex: 1 1 auto; }
  :root { --plak: 128px; }
  .tabs-binnen { gap: 0 16px; }
  .tabs a { height: 36px; font-size: 13.5px; }
}

/* ══ Verminderde beweging ═════════════════════════════════════════════════════
 * Er beweegt op deze pagina niets uit zichzelf; alleen het wisselen van onderdeel en de
 * knopovergangen worden kort. Het scrollen naar een onderdeel doet welkom.js zelf. */
@media (prefers-reduced-motion: reduce) {
  .knop, .tabs a, .vraag summary::after { transition-duration: .01ms; }
  .knop:hover { transform: none; }
  .js .paneel.actief { animation-duration: .01ms; }
}