/* ===================================================================
   De donkere huisstijl van soliddeploy.com: gedeelde basis
   ===================================================================

   ⚠️ Dit bestand is een uitzondering op de regel "één <style>-blok per
   pagina". Die regel houdt stand zolang er één pagina is; bij zeven
   pagina's betekent hij zeven kopieën van dezelfde duizend regels, en
   dan loopt de stijl gegarandeerd uit elkaar. Wat híer staat is wat
   álle pagina's delen: kleuren, typografie, de sectie-opbouw, knoppen,
   glas, de navigatiebalk en de footer.

   Wat één pagina eigen heeft (het archiefrek in de hero, het raster van
   de kennisbank, de scan) blijft in een <style>-blok op die pagina
   zelf staan.

   De volledige uitleg staat in brand/huisstijl.md. Wijkt daar iets af
   van dit bestand, dan wint dit bestand.
   =================================================================== */

:root{
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Het glas van de hero: mosgroen, natsteen, diep bosgroen. */
  --glas-licht: rgba(170, 200, 165, .15);
  --glas-mid:   rgba(16, 34, 23, .64);
  --glas-diep:  rgba(5, 12, 9, .80);

  --oranje:       #F05A28;
  --oranje-hover: #E8481A;

  --wit:         #FFFFFF;
  --wit-zacht:   rgba(255, 255, 255, .78);
  --wit-gedempt: rgba(255, 255, 255, .55);
  --rand:        rgba(255, 255, 255, .22);

  --grond:  #0A140E;   /* de paginagrond */
  --dieper: #070F0B;   /* de footer, een tint dieper */

  --op: #8BE0A4;       /* goed, groei */
  --af: #FF9B7A;       /* let op, daling */
}

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font);
  background: var(--grond);
  color: var(--wit);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection{ background: rgba(240,90,40,.35); }

a{ color: inherit; }


/* ------------------------------------------------------- ACHTERGROND */

/* Op een pagina die uit meerdere secties bestaat legt elke sectie zijn
   eigen vlekken neer, en dan zie je de naad tussen twee secties. Voor
   een tekstpagina is één vaste laag achter de hele pagina rustiger:
   .stroom--vast, en de secties eroverheen met .sec--open (doorzichtig).
   Vijf grote kleurvlekken die traag over elkaar heen drijven. Ze geven
   het glas iets om te blurren; zonder deze laag oogt elke glazen kaart
   als een dood grijs vlak.

   Er beweegt alleen transform, dus dit draait op de grafische kaart en
   niet op de processor. */
.stroom{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .55;
}

/* Eén laag achter de hele pagina in plaats van per sectie. */
.stroom--vast{ position: fixed; }

.vlek{
  position: absolute;
  width: 58vw;
  height: 58vw;
  min-width: 380px;
  min-height: 380px;
  border-radius: 50%;
  /* ⚠️ Hier stond filter: blur(90px). Dat was de duurste regel van de
     hele site: vijf lagen van bijna 1000 bij 1000 pixels die de browser
     stuk voor stuk moest vervagen vóórdat er iets op het scherm kwam.
     Een radial-gradient die op 70% al helemaal doorzichtig is, ís al
     vaag: de blur legde onzichtbaar werk bovenop iets wat er niet
     anders van ging uitzien. Weggehaald; zet hem niet terug.

     Ook `will-change: transform` is eruit. Dat pint de laag vast op de
     videokaart, ook als de sectie niet in beeld staat, en voor een
     animatie die daar tóch al draait levert het niets op. */
}

/* ⚠️ De duren zijn onderling ondeelbaar (37, 43, 53, 47, 61). Daardoor
   komen de vijf nooit samen terug op hun beginstand en herhaalt het
   patroon zich niet zichtbaar. Rond ze niet af naar mooie getallen. */
.vlek--1{
  top: -18%; left: -12%;
  background: radial-gradient(circle, rgba(150, 200, 130, .70) 0%, rgba(150, 200, 130, 0) 70%);
  animation: drijf-a 37s ease-in-out infinite alternate;
}
.vlek--2{
  top: 8%; left: 34%;
  background: radial-gradient(circle, rgba(196, 232, 172, .55) 0%, rgba(196, 232, 172, 0) 70%);
  animation: drijf-b 43s ease-in-out infinite alternate;
}
.vlek--3{
  top: 26%; left: 58%;
  background: radial-gradient(circle, rgba(240, 90, 40, .40) 0%, rgba(240, 90, 40, 0) 70%);
  animation: drijf-c 53s ease-in-out infinite alternate;
}
.vlek--4{
  top: 42%; left: 4%;
  background: radial-gradient(circle, rgba(120, 178, 118, .60) 0%, rgba(120, 178, 118, 0) 70%);
  animation: drijf-d 47s ease-in-out infinite alternate;
}
.vlek--5{
  top: -6%; left: 62%;
  background: radial-gradient(circle, rgba(214, 240, 190, .45) 0%, rgba(214, 240, 190, 0) 70%);
  animation: drijf-b 61s ease-in-out -19s infinite alternate;
}

@keyframes drijf-a{
  from{ transform: translate3d(0,0,0)        scale(1);    }
  to  { transform: translate3d(14vw, 9vh, 0) scale(1.16); }
}
@keyframes drijf-b{
  from{ transform: translate3d(0,0,0)          scale(1.08); }
  to  { transform: translate3d(-12vw, 12vh, 0) scale(.92);  }
}
@keyframes drijf-c{
  from{ transform: translate3d(0,0,0)          scale(.95); }
  to  { transform: translate3d(-9vw, -11vh, 0) scale(1.2); }
}
@keyframes drijf-d{
  from{ transform: translate3d(0,0,0)         scale(1.1); }
  to  { transform: translate3d(16vw, -8vh, 0) scale(.9);  }
}


/* ------------------------------------------------------- NAVIGATIE */

.balk{
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 74rem;
  margin: 0 auto;
  padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.25rem, 5vw, 4rem);
}

.balk__merk{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--wit);
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.01em;
}
.balk__merk img{
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

.balk__links{
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
}
.balk__links a{
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wit-zacht);
  text-decoration: none;
  transition: color .2s ease;
}
.balk__links a:hover{ color: var(--wit); }

.balk__cta{
  padding: .5rem 1.125rem;
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--wit) !important;
}
.balk__cta:hover{ background: rgba(255,255,255,.16); }


/* ---------------------------------------------------------- SECTIE */

.sec{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--grond);
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1.25rem, 5vw, 4rem);
}

/* Doorzichtig, zodat de vaste achtergrondlaag eronder zichtbaar blijft. */
.sec--open{ background: transparent; }

/* Voor een sectie zonder .sec__inhoud-wikkel: de breedte gaat dan op de
   blokken zelf. Zie de kennisbank, waar een extra div het anker van het
   publicatiescript zou verschuiven. */
.sec--los > *{
  position: relative;
  z-index: 1;
  max-width: 74rem;
  margin-left: auto;
  margin-right: auto;
}

.sec__inhoud{
  position: relative;
  z-index: 1;
  max-width: 74rem;
  margin: 0 auto;
}
.sec__inhoud--smal{ max-width: 52rem; }

.sec__titel{
  margin: 0 auto;
  text-align: center;
  max-width: 24ch;
  font-size: clamp(1.75rem, 3.4vw, 3.1rem);
  font-weight: 360;
  line-height: 1.14;
  letter-spacing: -.03em;
  color: var(--wit);
  text-wrap: balance;
}

.sec__sub{
  margin: 1.25rem auto 0;
  text-align: center;
  max-width: 46rem;
  font-size: clamp(.9375rem, 1.3vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--wit-zacht);
  text-wrap: pretty;
}

/* Het kleine kopje boven een titel. */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oranje);
}

/* Het ™ mag niet meelopen met de titelgrootte: op 3rem wordt het
   anders een blok. */
.tm{
  font-size: .42em;
  font-weight: 400;
  vertical-align: super;
  line-height: 0;
  letter-spacing: 0;
  margin-left: .08em;
  color: rgba(255,255,255,.62);
}


/* --------------------------------------------------------- KNOPPEN */

.knop{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 1.5rem;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease,
              transform .25s ease, box-shadow .25s ease;
}
.knop:hover{ transform: translateY(-2px); }

/* De hoofdactie. Als enige vlak oranje, zodat er geen twijfel is waar je
   moet klikken: één oranje knop per scherm. */
.knop--oranje{
  background: linear-gradient(175deg, #F76A3A 0%, var(--oranje) 55%, #E9531F 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset,
              0 10px 30px -10px rgba(240, 90, 40, .65);
}
.knop--oranje:hover{
  background: linear-gradient(175deg, #F0602F 0%, var(--oranje-hover) 55%, #DE4715 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset,
              0 16px 40px -12px rgba(240, 90, 40, .8);
}

.knop--glas{
  background: rgba(255,255,255,.10);
  color: var(--wit);
  border: 1px solid var(--rand);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.knop--glas:hover{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.38);
}


/* ------------------------------------------------------------- GLAS */

/* Het recept voor elke kaart, tegel of paneel. Zet .glas op een element
   en het hoort bij de rest van de site. */
.glas{
  position: relative;
  border: 1px solid var(--rand);
  border-radius: 16px;
  background:
    linear-gradient(150deg, rgba(255,255,255,.16) 0%,
                            rgba(255,255,255,.04) 45%,
                            rgba(255,255,255,.02) 100%),
    rgba(9, 20, 14, .58);
  /* ⚠️ Geen backdrop-filter meer. Wat hierachter ligt is de zachte
     kleurenwolk van .stroom, en die is al vaag: hem nóg eens vervagen
     leverde geen zichtbaar verschil op, maar dwong de browser wel om
     bij elke beweging van die wolk opnieuw achter elke kaart te
     rekenen. De dekking van de ondergrond is iets opgehoogd zodat het
     glas even gesloten oogt. Op de balk en het menu staat hij nog wél:
     die schuiven over scherpe tekst, en daar doet hij echt werk. */
  box-shadow: 0 2px 1px rgba(255,255,255,.12) inset,
              0 30px 60px -25px rgba(0,0,0,.6);
  transition: transform .5s cubic-bezier(.2,.7,.25,1),
              box-shadow .5s cubic-bezier(.2,.7,.25,1),
              border-color .3s ease;
}
.glas--zweef:hover{
  transform: translateY(-4px);
  box-shadow: 0 2px 1px rgba(255,255,255,.16) inset,
              0 40px 80px -25px rgba(0,0,0,.65);
}


/* -------------------------------------------------------- LEESTEKST */

/* De opmaak voor een pagina die vooral tekst is: de juridische
   pagina's en de uitleg bij een formulier. Eén kolom, ruime regelval,
   koppen die je kunt scannen. */
.tekst{
  max-width: 44rem;
  margin: 0 auto;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--wit-zacht);
  text-wrap: pretty;
}

.tekst h2{
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 .875rem;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--wit);
}
.tekst h2:first-child{ margin-top: 0; }

.tekst h3{
  margin: 2rem 0 .625rem;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--wit);
}

.tekst p{ margin: 0 0 1.125rem; }
.tekst p:last-child{ margin-bottom: 0; }

.tekst ul,
.tekst ol{ margin: 0 0 1.125rem; padding-left: 1.25rem; }
.tekst li{ margin-bottom: .5rem; }
.tekst li::marker{ color: rgba(255,255,255,.4); }

.tekst a{
  color: var(--wit);
  text-decoration: underline;
  text-decoration-color: rgba(240,90,40,.6);
  text-underline-offset: .2em;
  transition: text-decoration-color .2s ease;
}
.tekst a:hover{ text-decoration-color: var(--oranje); }

.tekst strong{ color: var(--wit); font-weight: 500; }

/* Een tabel op een telefoon is breder dan het scherm. De wrapper mag
   schuiven; de pagina zelf nooit. */
.tekst__tabel{ overflow-x: auto; margin: 0 0 1.5rem; }
.tekst table{
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: .9375rem;
}
.tekst th,
.tekst td{
  padding: .75rem .875rem;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.12);
  vertical-align: top;
}
.tekst th{
  font-weight: 500;
  color: var(--wit);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wit-gedempt);
}

/* Een blok dat eruit springt binnen de lopende tekst. */
.tekst .kader{
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-radius: 14px;
  border: 1px solid var(--rand);
  background: rgba(9, 20, 14, .45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tekst .kader p:last-child{ margin-bottom: 0; }


/* ----------------------------------------------------- PAGINAKOP */

/* De kop van een subpagina: kleine bovenkop, titel, samenvatting. */
.kop{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.kop__inhoud{
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin: 0 auto;
}
.kop__titel{
  margin: 1rem 0 0;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: 360;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--wit);
  text-wrap: balance;
}
.kop__lead{
  margin: 1.25rem auto 0;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--wit-zacht);
}
.kop__datum{
  margin: 1.25rem 0 0;
  font-size: .8125rem;
  font-weight: 300;
  color: var(--wit-gedempt);
}


/* ------------------------------------------------------------ FOOTER */

.voet{
  position: relative;
  background: var(--dieper);
  border-top: 1px solid rgba(255,255,255,.10);
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4rem) 2rem;
  color: var(--wit-zacht);
}

.voet__inhoud{
  max-width: 74rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.voet__merk{
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--wit);
  text-decoration: none;
}
.voet__merk img{ display: block; width: 1.25rem; height: 1.25rem; }

.voet__over{
  margin: 1rem 0 0;
  max-width: 26rem;
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.65;
}

/* De bedrijfsgegevens onder het logo.
   ⚠️ <address> is hier het juiste element, maar browsers zetten het
   standaard schuin. Zonder deze regel staat het adres in cursief en
   wijkt de footer op de juridische pagina's af van de rest. */
.voet__gegevens{
  margin: 1rem 0 0;
  font-style: normal;
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--wit-zacht);
}

.voet__kop{
  margin: 0 0 .875rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wit-gedempt);
}
.voet__lijst{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.voet__lijst a{
  font-size: .875rem;
  font-weight: 300;
  color: var(--wit-zacht);
  text-decoration: none;
  transition: color .2s ease;
}
.voet__lijst a:hover{ color: var(--wit); }

.voet__streep{
  max-width: 74rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: .8125rem;
  font-weight: 300;
  color: rgba(255,255,255,.5);
}


/* --------------------------------------------------------- SLOT-CTA */

/* Eén blok, één vraag, één knop. Staat onderaan elke pagina die iets
   van de bezoeker wil. */
.slot{
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
  text-align: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 24px;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(240,90,40,.20) 0%, rgba(240,90,40,0) 62%),
    linear-gradient(150deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 45%, rgba(255,255,255,.02) 100%),
    rgba(9, 20, 14, .68);
  /* ⚠️ Geen backdrop-filter meer. Wat hierachter ligt is de zachte
     kleurenwolk van .stroom, en die is al vaag: hem nóg eens vervagen
     leverde geen zichtbaar verschil op, maar dwong de browser wel om
     bij elke beweging van die wolk opnieuw achter elke kaart te
     rekenen. De dekking van de ondergrond is iets opgehoogd zodat het
     glas even gesloten oogt. Op de balk en het menu staat hij nog wél:
     die schuiven over scherpe tekst, en daar doet hij echt werk. */

  box-shadow: 0 2px 1px rgba(255,255,255,.18) inset,
              0 40px 90px -30px rgba(0,0,0,.7),
              0 70px 140px -50px rgba(240,90,40,.35);
}

.slot__foto{
  display: block;
  width: clamp(5rem, 8vw, 6.5rem);
  height: clamp(5rem, 8vw, 6.5rem);
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 2px solid rgba(255,255,255,.28);
  /* ⚠️ Het portret is op een donkere achtergrond geschoten en wordt
     hier anders een donkere vlek. */
  filter: brightness(1.22) contrast(1.06);
}

.slot__titel{
  margin: 0;
  font-size: clamp(1.625rem, 3.2vw, 2.5rem);
  font-weight: 360;
  line-height: 1.16;
  letter-spacing: -.03em;
  color: var(--wit);
  text-wrap: balance;
}
.slot__sub{
  margin: 1rem auto 0;
  max-width: 34rem;
  font-size: clamp(.9375rem, 1.3vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--wit-zacht);
}
.slot__acties{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 2rem;
}
.slot__klein{
  margin: 1.25rem 0 0;
  font-size: .8125rem;
  font-weight: 200;
  color: rgba(255,255,255,.52);
}


/* ------------------------------------------------------------ MOBIEL */

@media (max-width: 860px){
  .voet__inhoud{ grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------- HAMBURGERMENU */

/* Op een breed scherm bestaat de knop niet; daar is de balk gewoon een
   balk. Onder de 720px verdwijnen de links achter deze knop. */
.menuknop{
  display: none;
  position: relative;
  z-index: 5;
  width: 44px;            /* 44px is de kleinste maat die op een telefoon
                             betrouwbaar te raken is */
  height: 44px;
  padding: 0;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  color: var(--wit);
}
.menuknop span{
  position: absolute;
  left: 13px;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s cubic-bezier(.2,.7,.25,1), opacity .2s ease;
}
.menuknop span:nth-child(1){ top: 16px; }
.menuknop span:nth-child(2){ top: 21.5px; }
.menuknop span:nth-child(3){ top: 27px; }

/* Open: de bovenste en onderste streep draaien tot een kruis, de
   middelste dooft. */
.menuknop[aria-expanded="true"] span:nth-child(1){ transform: translateY(5.5px) rotate(45deg); }
.menuknop[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.menuknop[aria-expanded="true"] span:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg); }


@media (max-width: 720px){
  /* Ruimer: op een smal scherm staan de secties anders tegen elkaar aan
     en loopt de pagina als één lange lap door. */
  .sec{
    padding-top: clamp(4.5rem, 14vw, 6rem);
    padding-bottom: clamp(4.5rem, 14vw, 6rem);
  }
  .kop{ padding-bottom: clamp(3rem, 9vw, 4rem); }
  .sec__sub{ margin-top: 1rem; }

  .balk{
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    position: relative;
  }
  .menuknop{ display: block; }

  /* Het paneel valt onder de balk uit. Het staat er altijd, maar is
     dichtgeklapt: dat animeert netjes en houdt de links vindbaar voor
     een schermlezer zolang het open is. */
  .balk__links{
    position: absolute;
    top: calc(100% - .5rem);
    right: clamp(1.25rem, 5vw, 4rem);
    left: clamp(1.25rem, 5vw, 4rem);
    z-index: 4;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem;
    border: 1px solid var(--rand);
    border-radius: 16px;
    background:
      linear-gradient(150deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 45%, rgba(255,255,255,.02) 100%),
      rgba(9, 20, 14, .94);
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    box-shadow: 0 30px 60px -25px rgba(0,0,0,.75);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.25,1),
                visibility 0s linear .3s;
  }
  .balk__links.is-open{
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .balk__links a{
    padding: .875rem 1rem;
    border-radius: 10px;
    font-size: .8125rem;
    text-align: left;
  }
  .balk__links a + a{ border-top: 1px solid rgba(255,255,255,.08); }
  .balk__links a:active{ background: rgba(255,255,255,.06); }

  /* In het paneel is de knop een gewone regel: een pil tussen platte
     links oogt als een fout. */
  .balk__cta{
    border: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--oranje) !important;
  }
}

@media (max-width: 560px){
  .knop{ width: 100%; }

  /* Een tabel van vier kolommen is op een telefoon onleesbaar, ook als
     hij netjes schuift. Elke rij wordt daarom een blokje met het
     kolomkopje bóven de waarde. Dat kopje komt uit data-kop op de cel;
     zonder dat attribuut valt het gewoon weg. */
  .tekst__tabel{ overflow: visible; }
  .tekst table{ min-width: 0; }
  .tekst thead{ display: none; }
  .tekst tr{
    display: block;
    margin-bottom: .75rem;
    padding: .875rem 1rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
  }
  .tekst td{
    display: block;
    padding: .3125rem 0;
    border: 0;
  }
  .tekst td::before{
    content: attr(data-kop);
    display: block;
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wit-gedempt);
  }
  .tekst td:empty{ display: none; }
}

@media (max-width: 520px){
  .voet__inhoud{ grid-template-columns: 1fr; }
}


/* Wie liever geen beweging ziet, krijgt geen beweging. De vlekken
   bevriezen op hun plek in plaats van te verdwijnen: zonder die kleur
   wordt het beeld leeg. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .vlek{ animation-play-state: paused; }
  .knop:hover,
  .glas--zweef:hover{ transform: none; }
}