/* Gedeelde stijl voor de Andamp-pagina's. De kleuren en vormen komen uit de
   app zelf: het blauwgroene bureaublad, de houtskoolgrijze vensters met hun
   donkergroene titelbalk, en het mintgroen van de display. Het oranje van de
   bliksem in het icoon is er alleen voor wat aangeklikt moet worden. */

:root {
  --bureau: #008080;
  --grond: #101616;
  --venster: #1b2222;
  --lijst: #090f0f;
  --rand: #3a4444;
  --titel: #004f4f;
  --mint: #80d5d4;
  --knopgrijs: #b2cecd;
  --keuze: #4a7373;
  --tekst: #e6ecec;
  --dof: #94a3a2;
  --oranje: #ffb300;
  --inkt: #0b1010;
  --goed: #7ddb64;
  --over: var(--mint);
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* {
  margin: 0;
  box-sizing: border-box;
}

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

body {
  background: var(--grond);
  color: var(--tekst);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100dvh;
}

main {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 20px 72px;
}

/* Smallere kolom voor het formulier. */
main.smal {
  max-width: 560px;
}

p {
  margin: 12px 0;
}

strong {
  font-weight: 700;
}

/* Links. De streep is er voor één ding: een link die de site verlaat is
   onderstreept en krijgt een pijltje, en geen andere link is onderstreept; een
   knop die de site verlaat krijgt alleen het pijltje. Een
   link binnen de site staat in lopende tekst in het mintgroen; in een menu, een
   knop of een kaart heeft hij de kleur van zijn omgeving. */
a {
  color: var(--mint);
  text-decoration: none;
}

a:hover {
  color: #fff;
}

a[href^='http']:not([href^='https://mattix.nl']):not(.knop) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--mint);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a[href^='http']:not([href^='https://mattix.nl']):not(.knop):hover {
  color: var(--over);
}

a[href^='http']:not([href^='https://mattix.nl'])::after {
  content: '\2197\FE0E';
  display: inline-block;
  margin-left: 0.2em;
  font-family: var(--mono);
  font-size: 0.8em;
  line-height: 1;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--oranje);
  outline-offset: 2px;
}

/* --- koppen --- */
h1 {
  font-size: clamp(1.9rem, 6vw, 2.5rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}

/* Documentkop (privacybeleid): leest als tekst, niet als banner. */
h1.doc {
  font-size: 1.8rem;
  line-height: 1.2;
  margin-bottom: 8px;
}

/* Tussenkoppen staan als het opschrift van een venster: klein, gespatieerd,
   met de streep van de titelbalk erachter. */
h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
  margin: 44px 0 12px;
}

h2::after {
  content: '';
  flex: 1;
  height: 5px;
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
}

.zweep {
  color: var(--oranje);
}

.meta {
  color: var(--dof);
  font-size: 0.9rem;
  margin-bottom: 28px;
}

.klein {
  color: var(--dof);
  font-size: 0.88rem;
}

/* --- kop van de binnenpagina's --- */
.kop {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  color: inherit;
  width: max-content;
  text-decoration: none;
}

.kop:hover {
  color: inherit;
}

.kop img {
  width: 48px;
  height: 48px;
  border-radius: 22%;
}

.kop strong {
  display: block;
  font-family: var(--mono);
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  line-height: 1.3;
}

.kop span {
  display: block;
  color: var(--dof);
  font-size: 0.82rem;
}

/* Het regeltje boven een kop: tekst op de display. */
.status {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
  background: var(--lijst);
  border: 1px solid var(--rand);
  padding: 3px 9px 2px;
  margin-bottom: 16px;
}

/* --- lijsten --- */
ul {
  margin: 12px 0;
  padding-left: 22px;
}

li {
  margin: 6px 0;
}

li::marker {
  color: var(--mint);
}

/* --- blokken en knoppen --- */
.kader {
  background: var(--venster);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--mint);
  padding: 16px 20px;
  margin: 28px 0;
}

.kader p {
  margin: 8px 0;
}

/* Een knop zoals op de speler: plat vlak, lichte rand linksboven, donkere
   rechtsonder, en hij zakt in als je drukt. */
.knop,
button {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  line-height: 1.3;
  padding: 11px 22px;
  border: 0;
  border-radius: 3px;
  background: var(--oranje);
  color: var(--inkt);
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.55),
    inset -1px -1px 0 rgba(0, 0, 0, 0.3),
    3px 3px 0 #000;
}

.knop {
  margin-top: 8px;
}

.knop:hover,
button:hover {
  color: var(--inkt);
  background: #ffc533;
}

.knop:active,
button:active {
  transform: translate(2px, 2px);
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.3),
    1px 1px 0 #000;
}

button:disabled {
  opacity: 0.6;
  cursor: default;
  background: var(--oranje);
}

/* --- formulier (beta) --- */
form {
  margin: 26px 0 8px;
}

.rij {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

input[type='email'] {
  flex: 1 1 260px;
  font: inherit;
  padding: 11px 14px;
  border: 1px solid var(--rand);
  border-radius: 3px;
  background: var(--lijst);
  color: var(--tekst);
  min-width: 0;
  box-shadow: inset 1px 1px 0 #000;
}

input[type='email']::placeholder {
  color: var(--dof);
}

input[type='email']:focus {
  outline: 2px solid var(--mint);
  outline-offset: 0;
  border-color: var(--mint);
}

/* Honeypot: onzichtbaar voor mensen, ingevuld door bots. */
.web {
  position: absolute;
  left: -9999px;
}

.melding {
  background: var(--venster);
  border: 1px solid var(--rand);
  border-left-width: 3px;
  padding: 14px 18px;
  margin-top: 18px;
  display: none;
}

.melding.goed {
  display: block;
  border-left-color: var(--goed);
}

.melding.fout {
  display: block;
  border-left-color: var(--oranje);
}

/* --- tabel (privacybeleid) --- */
.tabelwrap {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 14px 0;
  font-size: 0.95rem;
}

th,
td {
  text-align: left;
  padding: 9px 12px;
  border: 1px solid var(--rand);
  vertical-align: top;
}

th {
  background: var(--venster);
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--mint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--lijst);
  border: 1px solid var(--rand);
  padding: 1px 5px;
  color: var(--mint);
}

hr {
  border: 0;
  border-top: 1px solid var(--rand);
  margin: 36px 0 20px;
}

/* --- voet --- */
.voet {
  margin-top: 64px;
  padding-top: 18px;
  border-top: 1px solid var(--rand);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--dof);
  display: flex;
  gap: 8px 22px;
  flex-wrap: wrap;
  align-items: center;
}

.voet a {
  color: inherit;
}

.voet a:hover {
  color: var(--over);
}

.merk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.voetnoot {
  margin-top: 20px;
  color: var(--dof);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* --- venster ---
   Een blok dat eruitziet als een venster van de speler: titelbalk met het
   opschrift in het midden en strepen links en rechts, daaronder de inhoud. */
.venster {
  background: var(--venster);
  border: 1px solid #000;
  border-radius: 7px 7px 3px 3px;
  box-shadow: 6px 8px 0 rgba(0, 0, 0, 0.35);
  overflow: hidden;
  margin: 28px 0 40px;
}

.venster-titel {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 24px;
  margin: 0;
  border-bottom: 1px solid #000;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  white-space: nowrap;
  padding: 0 48px 0 24px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='9' shape-rendering='crispEdges' fill='%2380d5d4'%3E%3Cpath d='M0 1h7v1H0zM0 4h7v1H0zM0 7h7v1H0z'/%3E%3C/svg%3E") no-repeat 9px center,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='9' shape-rendering='crispEdges' fill='%2380d5d4'%3E%3Cpath d='M0 6h7v2H0zM12 5h2v2h-2zM14 3h3v2h-3zM17 5h2v2h-2zM24 1h2v2h-2zM29 1h2v2h-2zM26 3h3v3h-3zM24 6h2v2h-2zM29 6h2v2h-2z'/%3E%3C/svg%3E") no-repeat right 9px center,
    var(--titel);
}

.venster-titel::before,
.venster-titel::after {
  content: '';
  flex: 1;
  height: 5px;
  border-top: 1px solid rgba(128, 213, 212, 0.4);
  border-bottom: 1px solid rgba(128, 213, 212, 0.4);
}

.venster-inhoud {
  padding: 14px 18px 16px;
}

.venster-inhoud > :first-child {
  margin-top: 0;
}

.venster-inhoud > :last-child {
  margin-bottom: 0;
}

/* Een uitlezing zoals op de display: mint op zwart. */
.lcd {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0 0 16px;
  padding: 10px 12px;
  background: var(--lijst);
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.6), 0 0 0 1px var(--rand);
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--mint);
}

.lcd span:first-child {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.lcd.vinger {
  display: block;
  margin: 8px 1px 12px;
  font-size: 0.76rem;
  word-break: break-all;
}

/* De lijst in een venster leest als de afspeellijst: genummerde regels op
   zwart, en de regel onder de aanwijzer licht op. */
ol.speellijst {
  list-style: none;
  counter-reset: nummer;
  margin: 6px;
  padding: 8px 0;
  background: var(--lijst);
  border: 1px solid #000;
}

ol.speellijst li {
  counter-increment: nummer;
  position: relative;
  margin: 0;
  padding: 5px 14px 5px 3.2em;
  color: #c9d6d5;
}

ol.speellijst li::before {
  content: counter(nummer) '.';
  position: absolute;
  left: 0;
  width: 2.6em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--dof);
}

/* het eerste nummer is het nummer dat speelt; bij stappen speelt er niets */
ol.speellijst:not(.stappen) li:first-child,
ol.speellijst li:hover {
  color: var(--mint);
}

ol.speellijst li:hover {
  background: rgba(74, 115, 115, 0.3);
}

/* --- landingspagina --- */
.bureau {
  background: var(--bureau);
  color: #fff;
}

.balk {
  max-width: 1040px;
  margin: 0 auto;
  padding: 18px 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
}

.balk .kop {
  margin-bottom: 0;
}

.balk .kop img {
  width: 40px;
  height: 40px;
}

.balk nav {
  display: flex;
  gap: 6px 20px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.8rem;
}

.balk nav a {
  color: inherit;
}

/* op het blauwgroen licht een link geel op, de kleur van de leus */
.bureau {
  --over: #ffd35c;
}

.bureau a:hover {
  color: var(--over);
}

/* De binnenpagina's: dezelfde balk, en een smalle strook bureaublad met de titel. */
.bureau.smal .balk,
.titelblok {
  max-width: 680px;
}

.balk nav a[aria-current] {
  color: var(--over);
}

.titelblok {
  margin: 0 auto;
  padding: 40px 20px 44px;
}

.titelblok h1 {
  font-family: var(--mono);
  font-size: clamp(1.6rem, 5.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--titel);
  margin: 0;
}

.titelblok .zweep {
  color: #ffd35c;
}

.titelblok .status {
  margin: 0 0 14px;
}

.titelblok .pad {
  margin: 0 0 16px;
  color: #fff;
}

.titelblok .bron-kop {
  margin: 0;
}

.titelblok .bron-kop span {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 4px;
}

.held {
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 20px 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px 64px;
  align-items: center;
}

.held h1 {
  font-family: var(--mono);
  font-size: clamp(3rem, 11vw, 5.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 6px;
  text-shadow: 4px 4px 0 var(--titel);
}

.held .leus {
  font-family: var(--mono);
  font-size: clamp(1.2rem, 3.4vw, 1.6rem);
  font-weight: 700;
  color: #ffd35c;
  text-shadow: 2px 2px 0 var(--titel);
  margin: 0 0 24px;
}

.held .lead {
  font-size: 1.15rem;
  line-height: 1.55;
  max-width: 30em;
  margin: 0 0 28px;
}

.held .acties {
  display: flex;
  align-items: center;
  gap: 14px 24px;
  flex-wrap: wrap;
}

.held .acties .knop {
  margin-top: 0;
  padding: 13px 26px;
  font-size: 1.05rem;
}

.held .acties .knop:hover {
  color: var(--inkt);
  text-decoration: none;
}


/* De drie vensters van de speler, uitgesneden uit de eerste schermafdruk. Het
   bureaublad eromheen heeft dezelfde kleur als dit vlak, dus de speler staat
   los op de pagina. */
/* De speler staat waar de schermafdruk stond. */
.toestel {
  position: relative;
  justify-self: center;
  width: 328px;
  max-width: 100%;
}

.speler {
  position: relative;
  aspect-ratio: 328 / 517;
  overflow: hidden;
}

.speler img {
  position: absolute;
  width: calc(100% * 540 / 328);
  height: auto;
  left: calc(-100% * 105 / 328);
  top: calc(-100% * 364 / 517);
}

/* Webamp tekent de drie vensters op 275 punten breed in dit vak, en het vak
   wordt vergroot met --schaal, die het script op de pagina zo kiest dat een
   pixel van de skin een heel aantal schermpixels is. Tot Webamp er staat
   blijft de plek leeg, zodat de schermafdruk niet eerst verschijnt en dan
   verspringt; lukt het niet, dan komt de schermafdruk terug. */
.toestel.wacht,
.toestel.live {
  width: calc(275px * var(--schaal, 1));
  max-width: none;
  aspect-ratio: 275 / 435;
}

.webamp-plek {
  position: absolute;
  top: 0;
  left: 0;
  width: 275px;
  height: 435px;
  transform: scale(var(--schaal, 1));
  transform-origin: 0 0;
  display: none;
}

.toestel.wacht .webamp-plek,
.toestel.live .webamp-plek {
  display: block;
}

.toestel.wacht .speler,
.toestel.live .speler {
  display: none;
}

/* De pagina zet stijlen op kale elementen; in de speler horen die niet. */
#webamp ul,
#webamp li,
#webamp-context-menu ul,
#webamp-context-menu li {
  margin: 0;
  padding: 0;
}

#webamp a,
#webamp-context-menu a {
  color: inherit;
  text-decoration: none;
}

#webamp a::after,
#webamp-context-menu a::after {
  content: none;
}

/* De voorpagina begint met het venster half over de rand van het bureaublad. */
.voorpagina main {
  padding-top: 0;
}

.voorpagina main > .venster:first-child {
  margin-top: -28px;
}

@media (max-width: 860px) {
  .held {
    grid-template-columns: 1fr;
    padding: 36px 20px 64px;
  }
}

/* --- schermafdrukken --- */
/* De strook hieronder rekent met 100vw, en dat telt een zichtbare schuifbalk
   mee: zonder dit schuift de pagina dan een paar punten opzij. */
html {
  overflow-x: clip;
}

.schermen {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  /* de strook loopt door tot de rand van het scherm, en begint gelijk met de kolom */
  margin: 20px calc(50% - 50vw) 0;
  padding: 4px max(20px, calc(50vw - 320px)) 14px;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--keuze) transparent;
}

.schermen figure {
  flex: 0 0 auto;
  width: 214px;
  scroll-snap-align: center;
}

/* De telefoon uit de schermafdruk, zonder de kop die erboven in het beeld staat. */
.schermen .telefoon {
  position: relative;
  aspect-ratio: 428 / 855;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--rand);
  background: var(--lijst);
}

.schermen img {
  position: absolute;
  width: calc(100% * 540 / 428);
  height: auto;
  left: calc(-100% * 56 / 428);
  top: calc(-100% * 185 / 855);
}

.schermen figcaption {
  margin-top: 10px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--dof);
}

/* --- muziekbronnen (/andamp/extensions/…) --- */
.pad {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--dof);
  margin: -16px 0 28px;
}

.pad a {
  color: inherit;
}

.pad a:hover {
  color: var(--over);
}

.bron-kop {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.bron-kop img {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
}

.bron-kop h1 {
  margin-bottom: 0;
}

.bron-kop span {
  display: block;
  color: var(--dof);
  font-size: 0.92rem;
}

ul.bronnen {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  border: 1px solid var(--rand);
  background: var(--venster);
}

.venster ul.bronnen {
  margin: 0;
  border: 0;
  background: none;
}

.venster-inhoud + ul.bronnen {
  border-top: 1px solid var(--rand);
}

ul.bronnen + .venster-inhoud {
  border-top: 1px solid var(--rand);
}

ul.bronnen li {
  margin: 0;
}

ul.bronnen li + li {
  border-top: 1px solid var(--rand);
}

a.bron {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  color: inherit;
}

a.bron:hover {
  background: rgba(74, 115, 115, 0.22);
  color: inherit;
}

a.bron img {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

a.bron strong {
  display: block;
  font-size: 1.05rem;
}

a.bron span {
  display: block;
  color: var(--dof);
  font-size: 0.9rem;
  line-height: 1.45;
}

a.bron .pijl {
  margin-left: auto;
  color: var(--mint);
  font-family: var(--mono);
  font-size: 1.1rem;
}

.download .knop {
  margin-top: 4px;
}


ol.stappen {
  margin: 12px 0 12px 22px;
  padding: 0;
}

ol.stappen li {
  margin: 8px 0;
  padding-left: 4px;
}

ol.stappen li::marker {
  font-family: var(--mono);
  font-weight: 700;
}

/* stappen in een venster volgen de afspeellijst, niet de losse lijst */
ol.speellijst.stappen {
  margin: 6px;
  padding: 8px 0;
}

ol.speellijst.stappen li {
  margin: 0;
  padding: 6px 14px 6px 3.2em;
}

/* De volledige vingerafdruk is één lange regel zonder spaties. */
code.lang {
  word-break: break-all;
}

/* --- plug-inviewer --- */
ul.plugin-lijst {
  list-style: none;
  padding: 0;
  margin: 28px 0;
  display: grid;
  gap: 28px;
}

li.plugin {
  margin: 0;
}

.voorpagina main > .venster:first-child {
  margin-bottom: 44px;
}

.plugin-kop {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  flex-wrap: wrap;
}

.plugin-kop .lua {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--rand);
  background: var(--lijst);
  color: var(--mint);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
}

.plugin-tekst {
  flex: 1 1 220px;
  min-width: 0;
}

.plugin-tekst strong {
  display: block;
  font-size: 1.05rem;
}

.plugin-tekst strong small {
  color: var(--dof);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.76rem;
  margin-left: 4px;
}

.plugin-tekst span {
  display: block;
  color: var(--dof);
  font-size: 0.9rem;
}

.plugin-tekst .plugin-auteur {
  font-size: 0.82rem;
}

.plugin-acties {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.knop.knop-klein {
  margin-top: 0;
  padding: 7px 14px;
  font-size: 0.88rem;
}

/* De tweede knop: het grijsgroen van de knoppen op de speler. */
button.knop-rand {
  background: var(--knopgrijs);
  color: var(--inkt);
  padding: 7px 14px;
  font-size: 0.88rem;
}

button.knop-rand:hover {
  background: #c8dedd;
}

.plugin-code {
  border-top: 1px solid var(--rand);
  background: var(--lijst);
}

.plugin-balk {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--rand);
  flex-wrap: wrap;
}

.plugin-balk code {
  background: none;
  border: 0;
  padding: 0;
}

.plugin-balk .knop {
  margin-left: auto;
}

.plugin-code pre {
  margin: 0;
  padding: 14px 18px 18px;
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.55;
  tab-size: 2;
}

.plugin-code pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: #d6dbe1;
}

.lua-comment { color: var(--dof); font-style: italic; }
.lua-keyword { color: var(--oranje); font-weight: 600; }
.lua-string { color: #a5d6a7; }
.lua-number,
.lua-constant { color: var(--mint); }
.lua-function { color: var(--tekst); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .knop:active,
  button:active {
    transform: none;
  }
}