/* Slotorado gids: official colors and font, container 1200 */
@font-face { font-family: Outfit; font-weight: 400; font-display: swap; src: url(letters/outfit-400.woff2) format("woff2"); }
@font-face { font-family: Outfit; font-weight: 500; font-display: swap; src: url(letters/outfit-500.woff2) format("woff2"); }
@font-face { font-family: Outfit; font-weight: 600; font-display: swap; src: url(letters/outfit-600.woff2) format("woff2"); }
@font-face { font-family: Outfit; font-weight: 700; font-display: swap; src: url(letters/outfit-700.woff2) format("woff2"); }
@font-face { font-family: Outfit; font-weight: 900; font-display: swap; src: url(letters/outfit-900.woff2) format("woff2"); }

:root {
  --nacht: #0B1620; --bodem: #101B26; --vlak: #1B2835; --rij: #233240;
  --smaragd: #2DAB7D; --mint: #2BDEA8; --goud: #FFA034; --licht: #F1F1F1; --mist: #94A4B0;
  --lijn: rgba(126, 146, 161, .18); --ritme: 40px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bodem); color: var(--mist); font: 400 16px/1.5 Outfit, system-ui, sans-serif; }
body.dor-slot { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; color: var(--licht); line-height: 1.2; }
h1 { font-size: 40px; font-weight: 900; }
h2 { font-size: 24px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 700; }
p { margin: 0; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

.dor-bak { width: 100%; max-width: 1200px; margin-inline: auto; }

/* Header */
.dor-kop { position: sticky; top: 0; z-index: 30; background: var(--nacht); }
.dor-koprand { display: flex; align-items: center; gap: 12px; height: 60px; }
.dor-merk-lang { width: 119px; height: 40px; }
.dor-merk-kort { display: none; width: 39px; height: 40px; }
.dor-kopknop { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.dor-burger { display: none; grid-template-columns: repeat(3, 5px); gap: 3px; place-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: var(--bodem); cursor: pointer; }
.dor-burger i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }

/* 18+ mark */
.dor-18 { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border: 2px solid var(--goud); border-radius: 50%; color: var(--goud); font-size: 14px; font-weight: 700; }
.dor-18-groot { width: 64px; height: 64px; font-size: 20px; }

/* Buttons: dark text, light text on the green has 2.6:1 contrast */
.dor-knop { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 40px; border-radius: 50px; background: var(--smaragd); color: var(--nacht); font-size: 18px; font-weight: 700; white-space: nowrap; transition: background .15s; }
.dor-knop:hover { background: var(--mint); }
.dor-knop-klein { min-height: 40px; padding: 0 20px; font-size: 16px; }
.dor-knoprij { position: relative; display: flex; align-items: center; justify-content: center; margin-top: var(--ritme); }
.dor-knoprij .dor-18 { position: absolute; left: calc(50% + 150px); }

/* Menu: round official icons */
.dor-rondmenu { background: var(--bodem); padding: 16px 0 0; }
.dor-rondmenu ul { display: flex; justify-content: space-between; }
.dor-rondmenu a { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; font-size: 14px; text-align: center; transition: color .15s; }
.dor-rond { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--vlak); color: var(--mist); border: 2px solid transparent; transition: border-color .15s; }
.dor-rond svg { width: 28px; height: 28px; }
.dor-rondmenu a:hover, .dor-rondmenu a[aria-current] { color: var(--licht); }
.dor-rondmenu a:hover .dor-rond, .dor-rondmenu a[aria-current] .dor-rond { border-color: var(--smaragd); }

/* First screen */
.dor-eerste { display: grid; grid-template-columns: 1fr 560px; grid-template-areas: "tekst paneel" "dek paneel" "knop knop"; column-gap: 40px; row-gap: 20px; margin-top: 24px; }
.dor-eerste-tekst { grid-area: tekst; }
.dor-dek { grid-area: dek; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-self: end; }
.dor-dek img, .dor-plank img { width: 100%; border-radius: 14px; transition: transform .15s; }
.dor-dek a:hover img, .dor-plank a:hover img { transform: translateY(-4px); }
.dor-eerste > .dor-wissel { grid-area: paneel; }
.dor-eerste > .dor-knoprij { grid-area: knop; margin-top: 4px; }
.dor-label { display: block; margin-bottom: 8px; color: var(--goud); font-weight: 600; }
.dor-cijfers { display: flex; gap: 12px; margin: 16px 0 12px; }
.dor-cijfers div { flex: 1; padding: 12px 16px; border-radius: 14px; background: var(--vlak); }
.dor-cijfers strong { display: block; color: var(--goud); font-size: 36px; font-weight: 900; line-height: 1.1; }
.dor-cijfers span { color: var(--licht); }


/* Package switch */
.dor-wissel { padding: 16px; border-radius: 14px; background: var(--vlak); }
.dor-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 50px; background: var(--nacht); }
.dor-tabs button { min-height: 40px; border: 0; border-radius: 50px; background: transparent; color: var(--mist); font: 500 16px Outfit, sans-serif; cursor: pointer; }
.dor-tabs button[aria-selected="true"] { background: var(--goud); color: var(--nacht); font-weight: 700; }
.dor-tabkop { display: flex; align-items: center; gap: 16px; margin: 12px 0; }
.dor-tabkop img { flex: none; width: 90px; height: 90px; }
.dor-tabkop span { color: var(--goud); }
.dor-pakregel { display: grid; grid-template-columns: 1.1fr .7fr 1fr .8fr; align-items: center; min-height: 48px; margin-top: 6px; padding: 0 16px; border-radius: 50px; background: var(--rij); }
.dor-pakregel b { color: var(--licht); font-weight: 700; }
.dor-pakregel .dor-fs { color: var(--mint); text-align: right; }
.dor-som { background: var(--nacht); border: 1px solid var(--goud); }
.dor-som > b:first-of-type, .dor-som span b { color: var(--goud); }

/* Section headings */
.dor-sectie { margin-top: var(--ritme); scroll-margin-top: 76px; }
.dor-koprij { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.dor-koprij h2 { display: flex; align-items: center; gap: 10px; }
.dor-h2teken { flex: none; width: 24px; height: 24px; color: var(--mist); }
.dor-h2teken svg { display: block; width: 100%; height: 100%; }
.dor-meer { flex: none; color: #7E92A1; white-space: nowrap; }
.dor-meer:hover { color: var(--licht); }
.dor-meer i { font-style: normal; }
.dor-paneel { padding: 20px; border-radius: 14px; background: var(--vlak); }

/* Collapsed capsule TOC */
.dor-inhoud { margin-top: 24px; border-radius: 40px; background: var(--vlak); }
.dor-inhoud summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 20px 6px 6px; }
.dor-inhoud summary > i { margin-left: auto; font-size: 24px; font-style: normal; line-height: 1; transition: transform .15s; }
.dor-inhoud[open] summary > i { transform: rotate(90deg); }
.dor-pil { display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px; border-radius: 12px; background: var(--bodem); color: var(--licht); font-weight: 500; }
.dor-inhoud summary .dor-pil { border-radius: 40px; }
.dor-inhoud ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 20px 16px; }
.dor-inhoud li a:hover { color: var(--mint); }

/* VIP carousel: exactly 5 cards in the container */
.dor-carrousel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 16px; margin-top: 8px; }
.dor-spoor { grid-column: 1 / -1; grid-row: 1; display: flex; gap: 10px; overflow-x: auto; padding: 16px 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
.dor-spoor::-webkit-scrollbar { display: none; }
.dor-niveau { position: relative; flex: 0 0 232px; min-height: 420px; padding: 16px 12px; overflow: hidden; border: 1px solid var(--lijn); border-radius: 14px; background: var(--vlak); scroll-snap-align: center; transition: transform .25s, opacity .25s; }
.dor-niveau.is-mid { z-index: 2; transform: scale(1.08); border-color: #425869; }
.dor-niveau.is-ver { opacity: .45; }
.dor-niveau-gloed { position: absolute; inset: 0 0 auto; width: 100%; }
.dor-munt { position: relative; width: 128px; height: 128px; margin: 0 auto 8px; }
.dor-niveau h3 { position: relative; margin-bottom: 10px; color: var(--goud); font-size: 16px; text-align: center; }
.dor-plaat { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; margin-top: 6px; padding: 4px 12px; border-radius: 50px; background: var(--rij); font-size: 14px; }
.dor-plaat b { color: var(--licht); font-weight: 600; text-align: right; }
.dor-plaat a:hover { color: var(--mint); }
.dor-vink { display: block; width: 18px; height: 18px; color: var(--smaragd); }
.dor-pijl { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--rij); color: var(--licht); font: 700 24px/1 Outfit, sans-serif; cursor: pointer; }
.dor-pijl:hover { background: var(--smaragd); color: var(--nacht); }
.dor-pijl-l { grid-column: 1; grid-row: 2; }
.dor-pijl-r { grid-column: 3; grid-row: 2; }
.dor-streepjes { grid-column: 2; grid-row: 2; display: flex; justify-content: center; gap: 6px; }
.dor-streepjes i { width: 16px; height: 4px; border-radius: 4px; background: #425869; }
.dor-streepjes i.is-aan { background: var(--goud); }

/* Promotions 2x2 */
.dor-actieraster { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.dor-actie { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center; padding: 16px; border-radius: 14px; background: var(--vlak); }
.dor-gloedvak { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 14px; }
.dor-gloedvak img { width: 100%; }
.dor-gloedvak strong { position: absolute; inset: 0; display: grid; place-items: center; color: var(--licht); font-size: 40px; font-weight: 900; }

/* Game shelf 6x2 */
.dor-plank { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 14px; }

/* Two panels side by side */
.dor-tweeluik { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.dor-platen .dor-plaat { min-height: 44px; font-size: 16px; }
.dor-platen .dor-plaat b { max-width: 62%; }
.dor-platen .dor-tabkop { margin-top: 0; }
.dor-platen .dor-plaat:first-child { margin-top: 0; }
.dor-platen .dor-plaat b { line-height: 1.25; }
.dor-platen .dor-plaat { border-radius: 22px; }

/* Single-column FAQ */
.dor-vraag { border-top: 1px solid var(--lijn); }
.dor-vraag:first-of-type { margin-top: 14px; }
.dor-vraag summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; color: var(--licht); font-weight: 500; }
.dor-vraag summary i { flex: none; font-size: 22px; font-style: normal; line-height: 1; transition: transform .15s; }
.dor-vraag[open] summary i { transform: rotate(90deg); }
.dor-vraag .dor-notitie { padding-bottom: 14px; }

/* RG */
.dor-rg { display: grid; grid-template-columns: auto 1fr 420px; align-items: center; gap: 20px; }
.dor-rgregels .dor-plaat:first-child { margin-top: 0; }

/* /bonus */
.dor-eerste-bonus { display: block; }
.dor-bonuskop { margin-bottom: 16px; }
.dor-stortingen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.dor-storting { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: var(--rij); }
.dor-stortinginfo { display: grid; gap: 4px; }
.dor-stortinginfo span b { color: var(--licht); font-size: 18px; }
.dor-stortinginfo .dor-fs { color: var(--mint); font-size: 18px; }
.dor-wissel-breed .dor-tabs { max-width: 560px; margin-inline: auto; }
.dor-wissel-breed .dor-som { margin-top: 12px; }
.dor-eerste-bonus .dor-knoprij { margin-top: 20px; }
.dor-wielen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 12px; }
.dor-wiel { padding: 12px; border-radius: 14px; background: var(--vlak); text-align: center; }
.dor-wiel .dor-gloedvak { max-width: 210px; margin: 0 auto 10px; }
.dor-rijplaten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.dor-rijplaten .dor-plaat { margin-top: 0; }

/* Pill-row table */
.dor-regeltabel { margin-top: 12px; }
.dor-regelkop, .dor-regelrij { display: grid; grid-template-columns: var(--kol, 2.4fr 1.2fr .6fr 2fr .6fr 1.1fr 1fr); align-items: center; gap: 12px; padding: 0 20px; }
.dor-regelkop { min-height: 36px; color: #7E92A1; font-size: 14px; }
.dor-regelrij { min-height: 56px; margin-top: 6px; border-radius: 50px; background: var(--vlak); color: var(--licht); }
.dor-regelnaam { color: var(--goud); font-weight: 600; }

/* Footer */
.dor-voet { margin-top: var(--ritme); padding: var(--ritme) 0 24px; background: var(--nacht); }
.dor-voetkaarten { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.dor-voetkaart { padding: 20px; border-radius: 14px; background: var(--bodem); }
.dor-voetkaart h4 { margin-bottom: 10px; font-size: 18px; }
.dor-voetkaart ul { columns: 3; column-gap: 16px; }
.dor-voetkaarten > :last-child ul { columns: 1; }
.dor-voetkaart li { padding: 3px 0; }
.dor-voetkaart a:hover { color: var(--licht); }
.dor-voetjuridisch { margin-top: 16px; }
.dor-juridisch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.dor-juridisch .dor-plaat { margin-top: 0; }
.dor-voetonder { display: flex; align-items: center; gap: 16px; margin-top: 16px; font-size: 14px; }

.dor-onderbalk { display: none; }
/* Copy: paragraphs stay under 820 px, side panels hold the right edge */
.dor-datum { display: block; margin: 8px 0 0; color: #7E92A1; font-size: 14px; }
.dor-lead { margin-top: 12px; color: var(--licht); }
.dor-lead a, .dor-proza a, .dor-vraag a, .dor-kaart a, .dor-tip a, .dor-rgmidden a, .dor-stappen a { color: var(--mint); text-decoration: underline; text-underline-offset: 2px; }
.dor-proza { max-width: 820px; }
.dor-proza p { margin-top: 12px; }
.dor-proza p:first-child { margin-top: 6px; }
.dor-naast { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.dor-naast .dor-paneel { margin-top: 6px; }
.dor-regeltabel + .dor-proza, .dor-tweeluik + .dor-proza, .dor-kaarten + .dor-proza, .dor-actieraster + .dor-proza, .dor-stappen + .dor-proza, .dor-wielen + .dor-proza, .dor-carrousel + .dor-proza, .dor-naast + .dor-proza { margin-top: 16px; }
.dor-proza + .dor-regeltabel, .dor-proza + .dor-kaarten { margin-top: 16px; }
.dor-stappen { counter-reset: stap; display: grid; grid-template-columns: repeat(var(--stappen, 3), 1fr); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.dor-stappen li { counter-increment: stap; padding: 14px 16px; border-radius: 14px; background: var(--vlak); }
.dor-stappen li::before { content: counter(stap); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 8px; border-radius: 50%; background: var(--goud); color: var(--nacht); font-weight: 700; }
.dor-kaarten { display: grid; grid-template-columns: repeat(var(--kaarten, 3), 1fr); gap: 12px; margin-top: 14px; }
.dor-kaart { padding: 16px; border-radius: 14px; background: var(--vlak); }
.dor-kaart p { margin-top: 6px; }
.dor-tip { margin-top: 14px; padding: 14px 18px; border-radius: 14px; background: var(--nacht); border: 1px solid #425869; }
.dor-kopblok { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: center; margin-top: 24px; }
.dor-kopblok-om { grid-template-columns: 400px minmax(0, 1fr); }
.dor-kopblok-om > .dor-kopzij { order: -1; }
.dor-kopzij { padding: 16px; border-radius: 14px; background: var(--vlak); }
.dor-kopzij .dor-plaat:first-of-type { margin-top: 10px; }
.dor-kopbeeld { display: block; width: 90px; height: 90px; margin: 0 auto; }
.dor-kopbeeld-munt { width: 148px; height: 148px; }
.dor-tekstpagina { max-width: 820px; margin-top: 24px; }
.dor-tekstpagina h2 { margin-top: 28px; }
.dor-tekstpagina p, .dor-tekstpagina ul { margin-top: 10px; }
.dor-tekstpagina ul { padding-left: 20px; list-style: disc; }
.dor-tekstpagina a { color: var(--mint); text-decoration: underline; }
.dor-vraag p { padding-bottom: 14px; }
.dor-tekstraster { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; }
.dor-zij { position: sticky; top: 76px; margin-top: 24px; }
.dor-zij a { color: var(--mint); }
.dor-volgt { min-height: 40vh; padding-top: 60px; text-align: center; }

/* Narrow desktop */
@media (max-width: 1290px) {
  .dor-bak { padding-inline: 16px; }
  main.dor-bak { padding-inline: 16px; }
  .dor-rondmenu a { width: 72px; }
}

@media (max-width: 1020px) {
  .dor-eerste { grid-template-columns: 1fr; grid-template-areas: "tekst" "paneel" "knop" "dek"; }
  .dor-actieraster, .dor-tweeluik, .dor-rijplaten { grid-template-columns: 1fr; }
  .dor-stortingen { grid-template-columns: 1fr; }
  .dor-rg { grid-template-columns: auto 1fr; }
  .dor-naast, .dor-kopblok, .dor-kopblok-om, .dor-tekstraster { grid-template-columns: minmax(0, 1fr); }
  .dor-zij { position: static; }
  .dor-kopblok-om > .dor-kopzij { order: 0; }
  .dor-stappen, .dor-kaarten { grid-template-columns: 1fr 1fr; }
  .dor-rgregels { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  :root { --ritme: 28px; }
  html { scroll-padding-top: 64px; }
  body { padding-bottom: 68px; }
  h1 { font-size: 28px; }
  h2 { font-size: 20px; }
  h3 { font-size: 16px; }

  .dor-koprand { height: 56px; gap: 10px; }
  .dor-burger { display: grid; }
  .dor-merk-lang { display: none; }
  .dor-merk-kort { display: block; }
  .dor-kopknop .dor-knop-klein { display: none; }

  /* Burger only: 4x3 icon grid */
  .dor-rondmenu { display: none; position: fixed; inset: 56px 0 0; z-index: 25; overflow-y: auto; padding: 20px 0; background: var(--nacht); }
  .dor-rondmenu.is-open { display: block; }
  .dor-rondmenu ul { flex-wrap: wrap; justify-content: center; gap: 20px 0; }
  .dor-rondmenu li { flex: 0 0 25%; }
  .dor-rondmenu a { width: 100%; font-size: 14px; }

  .dor-eerste { margin-top: 12px; row-gap: 12px; }
  .dor-label { margin-bottom: 4px; }
  .dor-cijfers { margin: 10px 0 8px; gap: 8px; }
  .dor-cijfers div { padding: 8px 12px; }
  .dor-cijfers strong { font-size: 26px; }
  .dor-dek { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .dor-dek a:nth-child(5) { display: none; }
  .dor-wissel { padding: 10px; }
  .dor-tabkop { gap: 10px; margin: 8px 0; }
  .dor-tabkop img { width: 56px; height: 56px; }
  .dor-pakregel { min-height: 40px; margin-top: 4px; padding: 0 12px; font-size: 14px; grid-template-columns: 1.15fr .6fr 1.05fr .75fr; }
  .dor-vanaf { display: none; }
  .dor-stappen, .dor-kaarten { grid-template-columns: 1fr; }
  .dor-kopblok { gap: 12px; margin-top: 12px; }
  .dor-kopbeeld { width: 64px; height: 64px; }
  .dor-kopbeeld-munt { width: 96px; height: 96px; }
  .dor-knop { width: 100%; max-width: 262px; padding: 0 16px; }
  .dor-knoprij .dor-18 { left: calc(50% + 138px); }

  .dor-koprij { flex-wrap: wrap; }
  .dor-niveau { flex-basis: 232px; }
  .dor-streepjes { gap: 3px; }
  .dor-streepjes i { width: 12px; }

  .dor-actie { grid-template-columns: 112px 1fr; gap: 12px; padding: 12px; }
  .dor-actie .dor-plaat { min-height: 30px; padding: 3px 10px; gap: 8px; }
  .dor-gloedvak strong { font-size: 24px; }

  .dor-paneel { padding: 14px; }
  .dor-plank { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dor-platen .dor-plaat { font-size: 14px; }

  .dor-rg { gap: 12px; }
  .dor-18-groot { width: 52px; height: 52px; font-size: 16px; }

  .dor-storting { grid-template-columns: 84px 1fr; gap: 10px; padding: 8px; }
  .dor-storting .dor-gloedvak strong { font-size: 22px; }
  .dor-stortingen { gap: 6px; margin-top: 8px; }
  .dor-stortinginfo { grid-template-columns: 1fr auto; gap: 0 8px; }
  .dor-stortinginfo h3 { grid-column: 1 / -1; }
  .dor-stortinginfo span b, .dor-stortinginfo .dor-fs { font-size: 16px; }
  .dor-wielen { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Mobile table: every row becomes a card */
  .dor-regelkop { display: none; }
  .dor-regelrij { display: block; padding: 12px 14px; border-radius: 14px; }
  .dor-regelrij > span { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; font-size: 14px; text-align: right; }
  .dor-regelrij > span::before { content: attr(data-kop); color: var(--mist); text-align: left; }

  .dor-voetkaarten, .dor-juridisch { grid-template-columns: 1fr; }
  .dor-voetkaart ul { columns: 2; }

  /* Bottom bar: 3 icons and button */
  .dor-onderbalk { position: fixed; inset: auto 0 0; z-index: 20; display: grid; grid-template-columns: repeat(3, 56px) 1fr; align-items: center; gap: 8px; height: 60px; padding: 0 12px; background: var(--nacht); border-top: 1px solid var(--lijn); }
  .dor-onderbalk > a:not(.dor-knop) { display: grid; justify-items: center; gap: 2px; font-size: 12px; }
  .dor-onderbalk svg { width: 22px; height: 22px; }
  .dor-onderbalk .dor-knop { min-height: 42px; max-width: none; font-size: 16px; }
}