/*
 * Privacycentrum (privacybeleid, gebruiksvoorwaarden, account verwijderen) in de stijl van het spel:
 * foto-achtergrond, glaspanelen, gekleurde tegels. Op een computer past alles in één scherm: links de onderwerpen,
 * rechts het gekozen onderwerp (zie juridisch.js). Zonder JavaScript of op de telefoon: alles onder elkaar.
 */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/outfit.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/outfit-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --text: #fbf3f6;
  --soft: rgb(251 243 246 / 0.76);
  --faint: rgb(251 243 246 / 0.5);
  --gold: #ffc28f;
  --line: rgb(255 255 255 / 0.12);
  --glass: rgb(28 13 29 / 0.66);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
* {
  box-sizing: border-box;
}
html {
  background: #12060f;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
a {
  color: var(--gold);
  text-underline-offset: 3px;
}
a:hover {
  color: #ffdcbd;
}
strong {
  color: var(--text);
  font-weight: 600;
}

/* ---------- achtergrond: foto uit het spel, donker en zacht ---------- */
.decor {
  position: fixed;
  inset: -20px;
  z-index: -1;
  background: url('/assets/bg-brug.jpg') center 35% / cover no-repeat;
  filter: blur(8px) saturate(1.1);
  /* Eigen laag: de vervaagde foto wordt één keer getekend en niet bij elke wijziging opnieuw */
  will-change: transform;
  transform: translateZ(0);
}
.decor::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgb(40 10 34 / 0.45), rgb(14 4 12 / 0.9) 75%),
    linear-gradient(180deg, rgb(42 15 46 / 0.55), rgb(18 6 15 / 0.92));
}

/* ---------- kopregel: logo | documenten | terug ---------- */
.kopregel {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 18px 24px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  font-size: 22px;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.logo:hover {
  color: var(--text);
}
.logo .merk {
  display: grid;
  place-items: center;
  width: 54px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff8a4c, #ff4f7a);
  box-shadow: 0 8px 20px -8px rgb(255 110 80 / 0.9);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.logo b {
  font-weight: 700;
}
.logo .licht {
  font-weight: 300;
}
.tabs {
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.38);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  color: var(--soft);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.tabs a:hover {
  color: var(--text);
  background: rgb(255 255 255 / 0.08);
}
.tabs a[aria-current='page'] {
  color: #3b1d00;
  background: linear-gradient(90deg, #ffd9b8, #ffb47a);
  box-shadow: 0 0 22px -6px rgb(255 194 143 / 0.9);
}
.tabs svg {
  width: 16px;
  height: 16px;
}
.terug {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  color: #b3123a;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  box-shadow: 0 12px 30px -12px rgb(0 0 0 / 0.7);
  white-space: nowrap;
}
.terug:hover {
  color: #8c0f2c;
}

/* ---------- centrum: links het overzicht, rechts het onderwerp ---------- */
.centrum {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 20px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 4px 24px 24px;
  /* Eén scherm, maar op een heel hoog scherm niet hoger dan nodig */
  height: min(calc(100vh - 82px), 860px);
  min-height: 560px;
  width: 100%;
  /* Op een hoog scherm verticaal in het midden van wat er onder de kopregel over is */
  margin-block: auto;
}
.zijbalk,
.paneel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 28px;
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(24px);
  box-shadow: 0 30px 80px -20px rgb(10 0 12 / 0.8);
  overflow: hidden;
}
.zijkop {
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--line);
}
.kicker {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.zijkop h1 {
  margin: 6px 0 2px;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.datum {
  margin: 0;
  font-size: 13px;
  color: var(--faint);
}
.inhoud {
  list-style: none;
  margin: 0;
  padding: 10px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.no-js .inhoud {
  display: none;
}
.inhoud a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 14px;
  color: var(--soft);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.25;
  transition: background 0.2s, color 0.2s;
}
.inhoud a:hover {
  background: rgb(255 255 255 / 0.06);
  color: var(--text);
}
.inhoud a[aria-current='true'] {
  background: rgb(255 194 143 / 0.12);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgb(255 194 143 / 0.4);
}
.inhoud .nr {
  margin-left: auto;
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.icoon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3);
}
.icoon svg {
  width: 18px;
  height: 18px;
}

/* Rustig: één warme accentkleur in plaats van een kleur per onderwerp. De k-*-klassen (juridisch.js) geven alleen nog
   een donkere ondergrond met een gouden icoon. */
.k-blauw,
.k-oranje,
.k-paars,
.k-groen,
.k-goud,
.k-robijn,
.k-zee,
.k-nacht {
  background: rgb(255 194 143 / 0.1);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgb(255 194 143 / 0.22);
}
.inhoud a[aria-current='true'] .icoon {
  background: linear-gradient(135deg, #ffd9b8, #ffb47a);
  color: #3b1d00;
  box-shadow: 0 0 18px -4px rgb(255 194 143 / 0.8);
}

/* ---------- het onderwerp ---------- */
.onderwerp {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.no-js .onderwerp + .onderwerp {
  border-top: 1px solid var(--line);
}
.js .onderwerp:not(.actief) {
  display: none;
}
.js .onderwerp.actief {
  animation: in 0.45s var(--ease);
}
@keyframes in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
/* Gekleurde kop met een groot kaartsymbool, zoals de speeltegels */
.band {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px 36px;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 150px;
  border-bottom: 1px solid var(--line);
}
.band[class*='k-'] {
  background:
    radial-gradient(120% 140% at 0% 0%, rgb(255 138 76 / 0.22), transparent 55%),
    linear-gradient(180deg, rgb(255 255 255 / 0.04), rgb(255 255 255 / 0));
  box-shadow: none;
  color: var(--text);
}
.band::after {
  content: '';
  position: absolute;
  right: -20px;
  bottom: -70px;
  width: 220px;
  height: 220px;
  background: rgb(255 194 143 / 0.07);
  -webkit-mask: var(--suit) center / contain no-repeat;
  mask: var(--suit) center / contain no-repeat;
  transform: rotate(12deg);
}
.band .icoon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffd9b8, #ffb47a);
  color: #3b1d00;
  box-shadow: 0 10px 30px -10px rgb(255 160 90 / 0.8);
}
.band .icoon svg {
  width: 28px;
  height: 28px;
}
.band .kicker {
  color: var(--gold);
}
.band h2 {
  margin: 2px 0 0;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.tekst {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 30px 36px 10px;
}
/* Lopende tekst in twee kolommen als er ruimte is (breed lezen in plaats van lang) */
.tekst.kolommen {
  columns: 2 380px;
  column-gap: 44px;
}
.tekst.kolommen > * {
  break-inside: avoid;
}
.tekst p,
.tekst li {
  color: var(--soft);
  font-size: 17px;
}
.tekst p {
  margin: 0 0 14px;
}
.tekst h3 {
  margin: 4px 0 8px;
  font-size: 17px;
  font-weight: 600;
}
.tekst ul,
.tekst ol {
  margin: 0 0 14px;
  padding-left: 22px;
}
.tekst li {
  margin: 6px 0;
}
.tekst li::marker {
  color: var(--gold);
}
.voetbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.no-js .voetbalk {
  display: none;
}
.voetbalk button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 45%;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(255 255 255 / 0.06);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.voetbalk button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voetbalk button[data-volgende] {
  background: linear-gradient(90deg, #ffd9b8, #ffb47a);
  color: #3b1d00;
  border-color: transparent;
}
.voetbalk button:hover:not(:disabled) {
  filter: brightness(1.08);
}
.voetbalk button:disabled {
  opacity: 0.3;
  cursor: default;
}
.voetbalk .stand {
  font-size: 13px;
  color: var(--faint);
}

/* ---------- "in het kort": gekleurde tegels ---------- */
.tegels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.tegel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 22px;
  border-radius: 20px;
  color: var(--text);
  box-shadow: none;
}
.tegel[class*='k-'] {
  background: linear-gradient(160deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.025));
  border: 1px solid var(--line);
  box-shadow: none;
  color: var(--text);
}
.tegel .icoon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgb(255 194 143 / 0.12);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgb(255 194 143 / 0.3);
}
.tegel .icoon svg {
  width: 22px;
  height: 22px;
}
.tegel b {
  display: block;
  margin-top: auto;
  padding-top: 14px;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.tegel .uitleg {
  display: block;
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--soft);
}
.tekst .intro {
  font-size: 17px;
  max-width: 980px;
}

/* ---------- tabel (welke gegevens) ---------- */
.tabel {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14.5px;
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--soft);
}
th {
  color: var(--gold);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom-color: rgb(255 194 143 / 0.35);
}
td:first-child {
  color: var(--text);
  font-weight: 500;
  width: 30%;
}
.label {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
  background: rgb(255 255 255 / 0.06);
  border: 1px solid var(--line);
}
.label.belang {
  background: rgb(255 194 143 / 0.1);
  border-color: rgb(255 194 143 / 0.35);
}

/* ---------- kaders, diensten, stappen ---------- */
.kader {
  margin: 4px 0 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgb(255 194 143 / 0.1);
  border: 1px solid rgb(255 194 143 / 0.3);
  break-inside: avoid;
}
.kader p {
  margin: 0;
}
.dienst {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 16px;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid var(--line);
  break-inside: avoid;
}
.dienst p {
  margin: 0;
}
.rijen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.rij {
  padding: 18px 20px;
  border-radius: 16px;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid var(--line);
}
.rij b {
  display: block;
  color: var(--text);
  font-size: 17px;
}
.rij span {
  display: block;
  margin-top: 2px;
  color: var(--soft);
  font-size: 15.5px;
  line-height: 1.5;
}
.stappen {
  list-style: none;
  padding: 0 !important;
  counter-reset: stap;
}
.stappen li {
  position: relative;
  padding-left: 46px;
  min-height: 34px;
  margin: 12px 0 !important;
}
.stappen li::before {
  counter-increment: stap;
  content: counter(stap);
  position: absolute;
  left: 0;
  top: -3px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffd9b8, #ffb47a);
  color: #3b1d00;
  font-weight: 800;
  font-size: 15px;
}
.knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 11px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff8a4c, #ff4f7a);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 30px -12px rgb(255 110 80 / 0.9);
}
.knop svg {
  width: 18px;
  height: 18px;
}

/* Diensten naast elkaar */
.diensten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.diensten .dienst {
  flex-direction: column;
  margin: 0;
  padding: 18px;
}

/* Wisselen tussen documenten (juridisch.js): alleen het middendeel vloeit over, de kopregel en achtergrond blijven staan */
.centrum {
  view-transition-name: centrum;
  transition: opacity 0.14s ease;
}
.centrum.wissel {
  opacity: 0;
}
::view-transition-old(centrum) {
  animation: 0.16s ease both uit;
}
::view-transition-new(centrum) {
  animation: 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both erin;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}
@keyframes uit {
  to {
    opacity: 0;
  }
}
@keyframes erin {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Tabbladen: op een smalle telefoon de korte naam (Privacy / Voorwaarden / Account) */
.tabs .kort {
  display: none;
}
/* Vanuit de app geopend (juridisch.js zet .in-app): geen knop naar de website, logo niet klikbaar */
.in-app .terug {
  display: none;
}
.in-app .logo {
  pointer-events: none;
}

/* ---------- tablet en smal scherm (tot 960): alles onder elkaar, onderwerpen als chips bovenin ---------- */
@media (max-width: 960px) {
  .kopregel {
    padding: 14px 16px;
  }
  .tabs a {
    padding: 8px 14px;
    font-size: 14px;
  }
  .logo .naam {
    display: none;
  }
  .centrum {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
    padding: 4px 16px 24px;
  }
  .zijbalk,
  .paneel {
    border-radius: 22px;
  }
  .inhoud {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .inhoud::-webkit-scrollbar {
    display: none;
  }
  .inhoud a {
    white-space: nowrap;
    padding: 6px 10px;
  }
  .inhoud .nr {
    display: none;
  }
  .band {
    padding: 20px;
    min-height: 0;
  }
  .tegels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .tegel {
    min-height: 140px;
    padding: 16px;
  }
  .tegel b {
    font-size: 17px;
  }
  .tekst {
    padding: 20px 20px 4px;
    overflow: visible;
  }
}
/* Tabbladen op een tweede regel als ze niet naast het logo en de knop passen */
@media (max-width: 760px) {
  .kopregel {
    grid-template-columns: 1fr auto;
  }
  .tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }
  /* In de app is er geen knop; dan staan de tabbladen gewoon op de eerste regel, zonder logo ervoor */
  .in-app .kopregel {
    grid-template-columns: minmax(0, 1fr);
  }
  .in-app .logo {
    display: none;
  }
  .in-app .tabs {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ---------- telefoon (smal, of liggend en laag): alles compacter, zoals het spel zelf op een telefoon ---------- */
@media (max-width: 760px), ((max-height: 500px) and (orientation: landscape)) {
  .kopregel {
    padding: 10px 14px;
    gap: 10px;
  }
  .logo .merk {
    width: 42px;
    height: 34px;
    border-radius: 10px;
    font-size: 16px;
  }
  .tabs {
    padding: 4px;
    gap: 2px;
  }
  .tabs a {
    padding: 7px 12px;
    font-size: 13px;
    gap: 6px;
  }
  .tabs svg {
    width: 14px;
    height: 14px;
  }
  .terug {
    padding: 8px 14px;
    font-size: 13px;
  }
  .centrum {
    gap: 10px;
    padding: 0 12px 16px;
  }
  .zijbalk,
  .paneel {
    border-radius: 18px;
  }
  /* Titelblok op één regel: naam van het document en de datum */
  .zijkop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    padding: 12px 14px 10px;
  }
  .zijkop .kicker {
    display: none;
  }
  .zijkop h1 {
    margin: 0;
    font-size: 16px;
  }
  .datum {
    margin-left: auto;
    font-size: 12px;
    white-space: nowrap;
  }
  /* Onderwerpen: smalle chips */
  .inhoud {
    padding: 8px;
    gap: 4px;
  }
  .inhoud a {
    padding: 4px 10px 4px 4px;
    gap: 8px;
    border-radius: 999px;
    font-size: 13px;
  }
  .inhoud .icoon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
  }
  .inhoud .icoon svg {
    width: 14px;
    height: 14px;
  }
  /* Kop van het onderwerp */
  .band {
    padding: 14px 16px;
    gap: 12px;
  }
  .band .icoon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .band .icoon svg {
    width: 20px;
    height: 20px;
  }
  .band .kicker {
    font-size: 10px;
    letter-spacing: 0.22em;
  }
  .band h2 {
    font-size: 20px;
  }
  .band::after {
    right: -24px;
    bottom: -50px;
    width: 140px;
    height: 140px;
  }
  /* Tekst */
  .tekst {
    padding: 16px 16px 4px;
  }
  .tekst p,
  .tekst li,
  .tekst .intro,
  .rij span {
    font-size: 15px;
  }
  .tekst p {
    margin-bottom: 12px;
  }
  .tekst h3 {
    font-size: 15.5px;
  }
  /* "In het kort": rijen met het icoon links in plaats van hoge tegels */
  .tegels {
    gap: 8px;
    margin-bottom: 14px;
  }
  .tegel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    align-content: center;
    column-gap: 12px;
    min-height: 0;
    padding: 12px 14px;
    border-radius: 14px;
  }
  .tegel .icoon {
    grid-row: 1 / 3;
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .tegel .icoon svg {
    width: 18px;
    height: 18px;
  }
  .tegel b {
    margin-top: 0;
    padding-top: 0;
    font-size: 15px;
  }
  .tegel .uitleg {
    margin-top: 1px;
    font-size: 13px;
  }
  .rijen,
  .diensten {
    gap: 8px;
    margin-bottom: 12px;
  }
  .rij {
    padding: 12px 14px;
    border-radius: 14px;
  }
  .rij b {
    font-size: 15px;
  }
  .dienst,
  .diensten .dienst {
    margin-bottom: 8px;
    padding: 12px 14px;
    border-radius: 14px;
  }
  .kader {
    padding: 12px 14px;
    border-radius: 14px;
  }
  .stappen li {
    padding-left: 40px;
  }
  .stappen li::before {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 13px;
  }
  .knop {
    padding: 10px 16px;
    font-size: 14px;
  }
  table {
    font-size: 13.5px;
  }
  th,
  td {
    padding: 8px 10px;
  }
  .voetbalk {
    padding: 10px 12px;
  }
  .voetbalk button {
    padding: 8px 12px;
    font-size: 13px;
  }
  .voetbalk .stand {
    font-size: 12px;
  }
}

/* ---------- telefoon rechtop: korte tabbladnamen, tegels onder elkaar, tabel gestapeld ---------- */
@media (max-width: 600px) {
  .tabs .lang {
    display: none;
  }
  .tabs .kort {
    display: inline;
  }
  .tegels {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Drie smalle kolommen lezen slecht: per rij een blokje met de gegevens, waarvoor en de grondslag */
  table,
  tbody,
  tr,
  td {
    display: block;
  }
  thead {
    display: none;
  }
  tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }
  td {
    width: auto;
    padding: 1px 0;
    border: 0;
  }
  td:first-child {
    width: auto;
    font-weight: 600;
    color: var(--text);
  }
  td:last-child {
    padding-top: 6px;
  }
}
@media (max-height: 560px) and (orientation: landscape) {
  .centrum {
    height: auto;
  }
  .tekst {
    overflow: visible;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .onderwerp.actief {
    animation: none;
  }
}