/*
 * De voordeur.
 *
 * Dezelfde kleuren als het dashboard en de documentatie, want het is één
 * product -- maar met meer lucht. Hier wordt niet gewerkt, hier wordt gekeken
 * of dit iets voor je is.
 *
 * Wat er groot mag: de zin die uitlegt wat het is, en de afdrukken zelf. Dat
 * laatste is geen decoratie maar het bewijs: dit is letterlijk wat er uit de
 * printer komt, gerenderd door dezelfde code die het op papier zet.
 */
:root {
  --papier:     #fbfaf8;
  --vlak:       #ffffff;
  --verzonken:  #f2f0ec;
  --lijn:       #e2ded7;
  --inkt:       #14181a;
  --zacht:      #4d5457;
  --vaag:       #7d8487;
  --accent:     #0e6660;
  --accent-inkt:#ffffff;
  --accent-vlak:#e3efed;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:     #0e1112;
    --vlak:       #171b1c;
    --verzonken:  #1c2122;
    --lijn:       #2a3032;
    --inkt:       #eceeed;
    --zacht:      #a6afb1;
    --vaag:       #7e8789;
    --accent:     #3fb3a6;
    --accent-inkt:#06201d;
    --accent-vlak:#12302d;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

/* ------------------------------------------------------------------- balk */

.balk {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.5rem; max-width: 72rem; margin: 0 auto;
}
.merk {
  font-weight: 700; letter-spacing: -.02em; font-size: 1.05rem;
  color: inherit; text-decoration: none;
}
.balk nav {
  margin-left: auto; display: flex; gap: 1.2rem; align-items: center;
  flex-wrap: wrap;
}
.balk nav a { color: var(--zacht); text-decoration: none; font-size: .9rem; }
.balk nav a:hover { color: var(--inkt); }

.knop {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem 1rem; border-radius: .6rem;
  background: var(--accent); color: var(--accent-inkt) !important;
  text-decoration: none; font-weight: 550; font-size: .9rem;
}
.knop.stil {
  background: transparent; color: var(--inkt) !important;
  box-shadow: inset 0 0 0 1px var(--lijn);
}
.knop.groot { padding: .8rem 1.4rem; font-size: 1rem; }
.knoppen { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.75rem 0 1rem; }

main { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }

/* ---------------------------------------------------------------- opening */

.opening {
  display: grid; gap: 3rem; align-items: center;
  padding: 3.5rem 0 4.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .opening { grid-template-columns: 1fr 1fr; gap: 4rem; padding: 5rem 0 6rem; }
}

h1 {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.05; letter-spacing: -.035em; margin: 0 0 1.25rem;
  text-wrap: balance;
}
.groot { font-size: 1.15rem; color: var(--zacht); max-width: 34rem; margin: 0; }
.klein { font-size: .875rem; color: var(--vaag); max-width: 32rem; }

/* De afdrukken. Wit vel met een schaduw: het gaat om inkt op papier. */
.papier { display: flex; flex-direction: column; gap: 1.5rem; }
.papier figure { margin: 0; }
.papier img {
  display: block; width: 100%; height: auto;
  background: #fff; border-radius: .3rem;
  box-shadow: 0 .1rem .3rem rgb(0 0 0 / .12), 0 1rem 2.5rem rgb(0 0 0 / .16);
}
.papier figure:first-child img { max-width: 19rem; }
.papier figcaption {
  margin-top: .6rem; font-size: .8rem; color: var(--vaag);
}

/* ---------------------------------------------------------------- stroken */

.strook { padding: 3.5rem 0; border-top: 1px solid var(--lijn); }
h2 {
  font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.025em;
  margin: 0 0 1.75rem; text-wrap: balance;
}
h3 { font-size: 1.05rem; margin: 0 0 .4rem; letter-spacing: -.01em; }
.strook p { color: var(--zacht); margin: 0; max-width: 34rem; }

.stappen {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.stappen .nr {
  display: inline-grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--accent-vlak); color: var(--accent);
  font-size: .85rem; font-weight: 700; margin-bottom: .75rem;
}

.raster {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* code naast tekst */

.code { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 62rem) {
  .code { grid-template-columns: 1fr 1.15fr; gap: 3rem; }
}
.code p + p { margin-top: .9rem; }
.code pre {
  margin: 0; background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: .8rem; padding: 1.1rem 1.25rem; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem; line-height: 1.65; color: var(--inkt);
}

/* slot */

.slot {
  padding: 4rem 0 5rem; border-top: 1px solid var(--lijn);
}
.slot p { color: var(--zacht); max-width: 38rem; }

footer {
  border-top: 1px solid var(--lijn);
  padding: 1.75rem 1.5rem 3rem; text-align: center;
  color: var(--vaag); font-size: .875rem;
}
footer a { color: var(--zacht); text-decoration: none; }
footer a:hover { color: var(--accent); }

/* Voor wie is dit? Direct onder de belofte, kleiner gezet: het is een
   afbakening, geen tweede belofte. */
.voor {
  margin: 1rem 0 0; font-size: .95rem; color: var(--vaag);
  max-width: 32rem;
}

/*
 * Twee deuren naast elkaar.
 *
 * Wie een printer heeft en wie hem gaat koppelen zijn zelden dezelfde persoon,
 * en ze zoeken iets anders. Naast elkaar zetten is eerlijker dan één pad
 * kiezen en de ander laten afhaken.
 */
.deuren {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.deuren .deur h2 { font-size: 1.35rem; margin-bottom: .9rem; }
.deuren .deur p + p { margin-top: .8rem; }
.deuren code {
  background: var(--verzonken); padding: .1rem .3rem; border-radius: .3rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875em;
}

/* ------------------------------------------------------------- merkbalk */

.merkbalk {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  padding: 1.5rem 0;
  border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn);
}
.merk-groep { display: flex; flex-direction: column; gap: .25rem; }
.merk-naam {
  font-weight: 650; letter-spacing: -.01em; font-size: 1rem;
}
.merk-detail { font-size: .8rem; color: var(--vaag); }
.merk-voet {
  margin-top: 1.25rem !important; font-size: .875rem; max-width: 40rem;
}

/* --------------------------------------------------------------- opties */

.opties {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.optie {
  padding: 1.25rem 1.4rem; border-radius: .9rem;
  border: 1px solid var(--lijn); background: var(--vlak);
}
.optie h3 { margin-bottom: .5rem; }
/* De derde is niet mooier gemaakt, alleen aangewezen: dit is wat wij doen. */
.optie.nadruk {
  border-color: var(--accent);
  background: var(--accent-vlak);
}
.optie.nadruk h3 { color: var(--accent); }

/* De taalkeuze staat in de balk, klein: het is een instelling, geen bestemming. */


/*
 * Een menu-item met zijn eigen schermen eronder.
 *
 * Het uitklappen zit op hover én op focus-within, zodat het ook met het
 * toetsenbord opengaat. Op een aanraakscherm klapt er niets uit -- daar is de
 * bovenste link genoeg, want die brengt je naar dezelfde winkel.
 */
.menu-groep { position: relative; display: inline-flex; }

/*
 * De brug over het gat.
 *
 * Het paneel hangt een halve regel onder het woord, en dat gat was dood
 * gebied: zodra je muis daar kwam verloor `:hover` zijn greep en klapte het
 * menu dicht terwijl je ernaartoe bewoog. Dit vlakje is onzichtbaar, ligt
 * precies in dat gat en steekt aan weerskanten uit, zodat je er ook schuin
 * naartoe kunt.
 */
.menu-groep::after {
  content: "";
  position: absolute; top: 100%; left: -6rem; right: -6rem; height: .9rem;
}

.submenu {
  position: absolute; top: 100%; left: 50%; translate: -50% 0;
  display: grid; gap: .1rem; min-width: 11rem;
  padding: .45rem; margin-top: .5rem;
  background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: .7rem; box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .18);
  z-index: 10;

  /* Dichtgaan mag even wachten. Wie er met de muis net langs schiet hoeft niet
     opnieuw te beginnen; opengaan blijft wel meteen. */
  opacity: 0; visibility: hidden;
  transition: opacity .12s ease .2s, visibility 0s linear .32s;
}
.menu-groep:hover .submenu,
.menu-groep:focus-within .submenu {
  opacity: 1; visibility: visible;
  transition: opacity .12s ease 0s, visibility 0s linear 0s;
}
.balk nav .submenu a {
  padding: .4rem .6rem; border-radius: .45rem; font-size: .85rem;
}
.balk nav .submenu a:hover { background: var(--gedempt, var(--lijn)); }

@media (prefers-reduced-motion: reduce) { .submenu { transition: none; } }

.balk nav a.taal {
  font-size: .82rem; padding: .25rem .55rem; border-radius: .4rem;
  box-shadow: inset 0 0 0 1px var(--lijn);
}

/*
 * De taalkeuze klapt naar rechts uit in plaats van vanuit het midden.
 *
 * Hij staat als laatste in de balk, tegen de rand aan. Een paneel dat zich om
 * zijn eigen midden centreert steekt daar half buiten het scherm, en dan komt
 * er een horizontale schuifbalk onder de hele pagina te hangen -- op elke
 * pagina, want de balk staat overal.
 */
.taalkeuze .submenu { left: auto; right: 0; translate: none; min-width: 9.5rem; }
.taalkeuze::after { left: -2rem; right: 0; }

.balk nav .taalkeuze .submenu a { display: flex; align-items: center; }

/* De taal waarin je leest staat aangevinkt en niet alleen vet: bij twee regels
   die op elkaar lijken is "welke ben ik" de enige vraag die telt. */
.balk nav .taalkeuze .submenu a.hier {
  color: var(--inkt); background: var(--gedempt, var(--lijn));
}
.balk nav .taalkeuze .submenu a.hier::after {
  content: "\2713"; margin-left: auto; padding-left: .6rem;
  color: var(--accent); font-weight: 600;
}

/* --------------------------------------------------------------- prijzen */

/*
 * Drie pakketten naast elkaar.
 *
 * Het middelste heeft nadruk, want dat is waar de meeste zaken op uitkomen --
 * en een rij waarin alles even zwaar weegt laat iemand zelf uitzoeken wat hij
 * moet hebben. Dat is geen keuzevrijheid maar werk doorschuiven.
 */
.pakketten {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  align-items: start;
}

.pakket {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.5rem 1.5rem 1.75rem;
  border: 1px solid var(--lijn); border-radius: 1rem;
  background: var(--vlak);
}
.pakket.nadruk {
  border-color: var(--accent);
  background: var(--accent-vlak);
}
.pakket h3 { font-size: 1.35rem; margin: 0; letter-spacing: -.02em; }
.pakket-voor {
  margin: 0; font-size: .72rem; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vaag);
}
.pakket.nadruk .pakket-voor { color: var(--accent); }

.prijs {
  margin: .4rem 0 .6rem; display: flex; align-items: baseline; gap: .4rem;
  flex-wrap: wrap;
}
.prijs-cijfer {
  font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.prijs-per { font-size: .82rem; color: var(--vaag); }

.pakket-lijst {
  list-style: none; margin: 0 0 .4rem; padding: 0;
  font-size: .9rem;
}
.pakket-lijst li {
  margin: .3rem 0; padding-left: 1.1rem; position: relative;
  font-variant-numeric: tabular-nums;
}
.pakket-lijst li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .35rem; height: .35rem; border-radius: 50%;
  background: var(--accent);
}
.pakket-lijst li.vaag { color: var(--vaag); }
.pakket-lijst li.vaag::before { background: var(--lijn); }

.pakket-regel {
  margin: 0 0 1rem; font-size: .875rem; color: var(--zacht);
  flex: 1;
}
.pakket .knop { align-self: flex-start; }

/* ---------------------------------------------------------------- schema */

.schema-uitleg { margin-bottom: 1.5rem !important; }
.schema-vlak {
  border: 1px solid var(--lijn); border-radius: .9rem;
  background: var(--vlak); padding: 1.5rem 1rem;
  overflow-x: auto;
}
.schema-vlak img { display: block; width: 100%; min-width: 34rem; height: auto; }

/* Het tweede voorbeeld staat bij de merken, waar het over past-of-niet gaat --
   niet in de hero, waar het met de bon om aandacht vocht. */
.merk-beeld { margin: 1.75rem 0 0; max-width: 26rem; }
.merk-beeld img {
  display: block; width: 100%; height: auto; background: #fff;
  border-radius: .3rem;
  box-shadow: 0 .1rem .3rem rgb(0 0 0 / .1), 0 .6rem 1.6rem rgb(0 0 0 / .12);
}
.merk-beeld figcaption {
  margin-top: .6rem; font-size: .8rem; color: var(--vaag);
}

/* De hero draagt nu één afdruk, dus die mag groter. */
.papier figure:first-child img { max-width: 22rem; }

/* De templatestrook krijgt de nadruk van een eigen ondergrond: dit is het
   verschil waar het om draait, niet nog een rijtje eigenschappen. */
.templates {
  background: var(--vlak);
  border-radius: 1.1rem; border: 1px solid var(--lijn);
  padding: 2.5rem 2rem; margin: 3.5rem 0;
}
.templates > .groot { margin-bottom: 2rem; max-width: 44rem; }
@media (max-width: 40rem) { .templates { padding: 1.75rem 1.25rem; } }

/* ------------------------------------------------------ menu en voettekst */

.balk nav a.hier { color: var(--inkt); font-weight: 600; }

.specs { width: 100%; border-collapse: collapse; max-width: 44rem; }
.specs td { padding: .7rem 0; border-bottom: 1px solid var(--lijn);
            vertical-align: top; }
.specs td:first-child { width: 12rem; color: var(--zacht); }

/*
 * De voettekst draagt alles wat niet in het menu paste.
 *
 * Boven staan vier ingangen voor wie oriënteert; hier staat de hele kaart voor
 * wie iets zoekt. Dat scheelt een menu waar alles in moet.
 */
.voet {
  border-top: 1px solid var(--lijn);
  padding: 3rem 1.5rem 3.5rem;
  text-align: left;
}
.voet-groepen {
  max-width: 72rem; margin: 0 auto;
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.voet-kop {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--inkt); font-weight: 650; margin: 0 0 .7rem;
}
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { margin: .35rem 0; }
.voet a { color: var(--zacht); text-decoration: none; font-size: .875rem; }
.voet a:hover { color: var(--accent); }
.voet-slot {
  max-width: 72rem; margin: 2.5rem auto 0;
  font-size: .82rem; color: var(--vaag);
}

/*
 * De printer hangt bovenaan zijn kolom.
 *
 * Gecentreerd zou de kast omhoog kruipen zodra de bon eruit komt: het vak wordt
 * hoger en het midden schuift mee. Nu staat de printer stil en groeit alleen
 * het papier naar beneden, zoals bij een echte.
 */
.proef {
  display: grid; gap: 2.5rem; align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) { .proef { grid-template-columns: 1fr 20rem; } }
/*
 * Invullen of opbouwen.
 *
 * Twee tabbladen boven hetzelfde vak, want het gaat over dezelfde bon: wat
 * erop staat, en waar hij uit bestaat.
 */
.proef-tabs {
  display: flex; gap: .25rem; margin: 1.5rem 0 0;
  padding: .25rem; border-radius: .7rem;
  background: var(--verzonken); width: fit-content;
}
.proef-tab {
  border: 0; background: transparent; cursor: pointer;
  padding: .45rem .9rem; border-radius: .5rem;
  font: inherit; font-size: .875rem; color: var(--zacht);
}
.proef-tab.hier { background: var(--vlak); color: var(--inkt); font-weight: 550; }

/*
 * De blokken van de bon, om te slepen.
 *
 * Zo staan ze in de studio ook: een greepje links, de naam, en rechts of hij
 * meedoet. Wie hier iets versleept snapt zonder uitleg wat een template is.
 */
.proef-blokken {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; gap: .35rem; max-width: 24rem;
  touch-action: pan-y;
}
.pblok {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .7rem;
  background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: .6rem; font-size: .9rem;
}
.pblok.sleept {
  border-color: var(--accent);
  box-shadow: 0 .4rem 1.2rem rgb(0 0 0 / .18);
}
.pgrip {
  width: .625rem; height: 1rem; flex: none;
  fill: var(--vaag); cursor: grab; touch-action: none;
}
.pblok.sleept .pgrip { cursor: grabbing; }
.pnaam { flex: 1; }
.pblok input { accent-color: var(--accent); width: 1rem; height: 1rem; }
/* Wat vaststaat is niet uitgegrijsd tot onleesbaar: je moet nog kunnen lezen
   dat het er is, alleen niet kunnen aanzetten dat het weggaat. */
.pblok input:disabled { opacity: .5; cursor: default; }
.pblok:has(input:disabled) .pnaam { color: var(--vaag); }

.proef-velden { display: grid; gap: .75rem; margin: 1.5rem 0 .5rem;
                max-width: 24rem; }
.proef-velden label { display: grid; gap: .25rem; font-size: .82rem;
                      color: var(--zacht); }
.proef-velden input {
  padding: .55rem .7rem; border-radius: .55rem; font: inherit;
  border: 1px solid var(--lijn); background: var(--vlak); color: var(--inkt);
}
.proef button.knop { cursor: pointer; border: 0; font: inherit;
                     font-weight: 550; }

/*
 * Het mobiele menu.
 *
 * Zeven links naast elkaar passen niet op een telefoon, en ze onder elkaar in
 * de balk proppen kost een halve schermhoogte voordat de pagina begint. Dus:
 * een knop rechtsboven, en daarachter het hele menu over het scherm.
 *
 * Zonder javascript. Een verborgen aankruisvakje onthoudt of het openstaat en
 * de opmaak doet de rest -- op elke pagina van de site, ook de statische.
 */
.menu-schakelaar { position: absolute; opacity: 0; width: 0; height: 0; }
.menu-knop { display: none; }

.vlag {
  width: 1.05rem; height: .75rem; border-radius: 1.5px;
  margin-right: .4rem; vertical-align: -1px;
  box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .25);
}
.balk nav a.taal { display: inline-flex; align-items: center; }

@media (max-width: 56rem) {
  .balk { padding: .9rem 1.1rem; }

  .menu-knop {
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 60; margin-left: auto;
    width: 2.5rem; height: 2.5rem; border-radius: .6rem;
    background: var(--papier);
    box-shadow: inset 0 0 0 1px var(--lijn);
    cursor: pointer;
  }
  .menu-schakelaar:focus-visible + .menu-knop {
    box-shadow: inset 0 0 0 2px var(--accent);
  }
  .menu-knop span {
    position: relative; display: block;
    width: 1.15rem; height: 2px; border-radius: 2px; background: var(--inkt);
    transition: background .15s;
  }
  .menu-knop span::before,
  .menu-knop span::after {
    content: ""; position: absolute; left: 0;
    width: 100%; height: 2px; border-radius: 2px; background: var(--inkt);
    transition: transform .2s;
  }
  .menu-knop span::before { top: -6px; }
  .menu-knop span::after { top: 6px; }

  /* Open: de streepjes worden een kruis, zodat dezelfde knop hem ook sluit. */
  .menu-schakelaar:checked + .menu-knop span { background: transparent; }
  .menu-schakelaar:checked + .menu-knop span::before {
    transform: translateY(6px) rotate(45deg);
  }
  .menu-schakelaar:checked + .menu-knop span::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  .balk nav {
    position: fixed; inset: 0; z-index: 50;
    margin: 0; padding: 4.8rem 1.4rem 2.5rem;
    background: var(--papier);
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    /*
     * Niet afbreken.
     *
     * De balk erboven staat op `flex-wrap: wrap`, en dat erft dit vak. Als
     * kolom betekent wrappen: wordt de inhoud hoger dan het scherm, dan zet hij
     * de rest in een tweede kolom ernaast. Dat gebeurde ook -- zodra er zes
     * branches in het menu stonden paste het niet meer, en schoof de helft
     * buiten beeld. Hier moet het scrollen, niet naast zichzelf gaan staan.
     */
    flex-wrap: nowrap;
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; pointer-events: none;
    transform: translateY(-1.5rem); opacity: 0;
    transition: transform .22s ease, opacity .22s ease, visibility .22s;
  }
  .menu-schakelaar:checked ~ nav {
    visibility: visible; pointer-events: auto;
    transform: none; opacity: 1;
  }

  .balk nav a {
    font-size: 1.1rem; color: var(--inkt);
    padding: .9rem .2rem; border-bottom: 1px solid var(--lijn);
  }

  /*
   * Uitklapmenu's klappen op een telefoon niet uit: hover bestaat daar niet,
   * en een menu dat je niet open krijgt is geen menu. Ze staan er dus meteen
   * bij -- als volwaardige regels, niet als een rijtje kleine woordjes.
   *
   * Dat laatste ging eerst mis. De branches stonden als grijze woorden achter
   * elkaar, 34 punten hoog en soms maar 41 breed. Dat is te klein om met een
   * duim te raken, en het waren juist de belangrijkste links van het menu.
   */
  .balk nav .menu-groep { display: block; width: 100%; }
  .menu-groep::after { display: none; }
  .balk nav .menu-groep > a { display: block; }
  .balk nav .submenu {
    position: static; translate: none; min-width: 0;
    display: block;
    background: none; border: 0; box-shadow: none;
    margin: 0; padding: 0;

    /*
     * Meedoen met het menu, niet zelf beslissen.
     *
     * Hier stond `visibility: visible`, om het uitklapvak dat op een groot
     * scherm verborgen is hier altijd te tonen. Maar het hele menu staat dicht
     * op `visibility: hidden`, en een kind dat zichzelf weer zichtbaar zet komt
     * daaronder vandaan. Het menu was doorzichtig, maar de links lagen wel
     * degelijk over de pagina -- dus tikte je ergens bovenaan en stond je op
     * een andere pagina.
     *
     * `inherit` laat ze het menu volgen: dicht is dicht.
     */
    opacity: 1; visibility: inherit;

    /* En geen overgang. Het uitklapvak vervaagt op een groot scherm netjes in
       en uit, met een vertraging zodat hij niet dichtklapt als je muis er net
       langs gaat. Hier is er niets om uit te klappen: het staat er gewoon, en
       een vertraagde overgang betekent dat het na het openen nog een derde
       seconde onzichtbaar blijft. */
    transition: none;
  }
  .balk nav .submenu a {
    display: block;
    font-size: .95rem; color: var(--zacht);
    padding: .75rem .2rem .75rem 1.1rem;
    border-bottom: 1px solid var(--lijn); border-radius: 0;
  }

  /*
   * Op een telefoon klapt er niets uit: de twee talen staan er allebei, als
   * gewone regels. De knop erboven zou dan een derde regel zijn die hetzelfde
   * doet als een van de twee eronder, dus die gaat weg.
   */
  .balk nav .taalkeuze > a.taal { display: none; }
  .balk nav .taalkeuze .submenu a {
    display: flex; align-items: center;
    font-size: .95rem; color: var(--zacht);
  }
  .balk nav .taalkeuze { margin-top: 1.2rem; }
  .balk nav a.knop {
    margin-top: .8rem; border-bottom: 0;
    justify-content: center; font-size: 1rem; padding: .8rem 1rem;
  }
}

/* Achter een openstaand menu hoort de pagina niet mee te scrollen. */
body:has(.menu-schakelaar:checked) { overflow: hidden; }