/* customvideo.eu - donker thema in het Busimatch-palet, geen frameworks
 *
 * Alleen kleuren uit het vaste Busimatch-palet:
 *   wit #FFFFFF, zwart #111111, rood #E11D2A, oranje BUSI #F97316,
 *   geel BUZZZ #FFCC00, groen #16A34A, blauw #2563EB, paars CAT #7C3AED,
 *   zilver #C0C0C0, marineblauw #1E3A8A, smaragd #059669, turkoois #14B8A6
 *
 * Tussentinten worden NIET verzonnen: die zijn doorschijnend wit over het zwart,
 * zodat er geen kleuren buiten het palet bijkomen.
 *
 * Twee vaste designregels van Didier: alles gecentreerd, en een zachte
 * gekleurde gloed per blok. Getypte tekst in invulvelden blijft links staan,
 * want centreren tijdens het typen leest slecht.
 */

:root {
  --zwart:      #111111;
  --wit:        #ffffff;
  --oranje:     #f97316;
  --geel:       #ffcc00;
  --paars:      #7c3aed;
  --blauw:      #2563eb;
  --marine:     #1e3a8a;
  --groen:      #16a34a;
  --smaragd:    #059669;
  --turkoois:   #14b8a6;
  --rood:       #e11d2a;
  --zilver:     #c0c0c0;

  /* dieptes, opgebouwd uit doorschijnend wit over het zwart */
  --vlak:       rgba(255, 255, 255, .045);
  --vlak-op:    rgba(255, 255, 255, .075);
  --lijn:       rgba(255, 255, 255, .12);
  --lijn-sterk: rgba(255, 255, 255, .22);
  --zacht:      rgba(255, 255, 255, .62);

  --gloed:      0 0 34px rgba(249, 115, 22, .16);
  --gloed-op:   0 0 44px rgba(249, 115, 22, .30);
  --rond:       14px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--wit);
  background: var(--zwart);
  text-align: center;             /* designregel: alles gecentreerd */
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--oranje); }
a:hover { color: var(--geel); }

.verborgen {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

::selection { background: var(--oranje); color: var(--zwart); }

/* ------------------------------------------------------------------ kop */

.kop {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid var(--lijn);
  background: var(--zwart);
  position: sticky; top: 0; z-index: 20;
}

.merk {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 19px; text-decoration: none; color: var(--wit);
}
.merk:hover { color: var(--wit); }
.merk-logo { width: 40px; height: 40px; flex: none; }
.merk-punt {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--oranje); flex: none;
}
.merk-eu { color: var(--oranje); font-weight: 700; }

.kop-nav { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.kop-nav a { color: var(--zacht); text-decoration: none; font-size: 15px; }
.kop-nav a:hover, .kop-nav a.nu { color: var(--oranje); }

/* Taalkeuze: uitklapmenu met de vlaggen van Busimatch.
   Gebouwd met details/summary, dus het werkt zonder JavaScript. */

.taalkeuze { position: relative; }

.taalkeuze summary {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 11px; cursor: pointer; list-style: none;
  border: 1px solid var(--lijn); border-radius: 9px;
  background: var(--vlak); color: var(--wit); font-size: 14px;
  white-space: nowrap;
}
.taalkeuze summary::-webkit-details-marker { display: none; }
.taalkeuze summary:hover { border-color: var(--oranje); }
.taalkeuze summary img { border-radius: 3px; outline: 1px solid var(--lijn); }
.taalkeuze-naam { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }

.taalkeuze-pijl {
  width: 0; height: 0; margin-inline-start: 2px;
  border-inline-start: 4px solid transparent;
  border-inline-end: 4px solid transparent;
  border-top: 5px solid var(--zacht);
  transition: transform .15s ease;
}
.taalkeuze[open] .taalkeuze-pijl { transform: rotate(180deg); }
.taalkeuze[open] summary { border-color: var(--oranje); }

.taallijst {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 190px; max-height: 60vh; overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--lijn-sterk); border-radius: 12px;
  background: var(--zwart);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6), var(--gloed);
}

.taallijst-rij {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px;
  text-decoration: none; color: var(--wit); font-size: 14px;
  white-space: nowrap;
}
.taallijst-rij img { border-radius: 3px; outline: 1px solid var(--lijn); flex: none; }
.taallijst-rij:hover { background: var(--vlak-op); color: var(--oranje); }
.taallijst-rij.is-nu {
  background: rgba(249, 115, 22, .16); color: var(--oranje); font-weight: 600;
}

@media (max-width: 720px) {
  .taalkeuze-naam { display: none; }
  .taallijst { inset-inline-end: auto; inset-inline-start: 50%; transform: translateX(-50%); }
  [dir="rtl"] .taallijst { transform: translateX(50%); }
}

/* winkelwagen in de kop */
.wagen-knop {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--lijn-sterk); color: var(--wit); font-size: 14px;
}
.wagen-knop:hover { border-color: var(--oranje); color: var(--oranje); }
.wagen-teller {
  min-width: 20px; height: 20px; border-radius: 999px;
  background: var(--oranje); color: var(--zwart);
  font-size: 12px; font-weight: 700; line-height: 20px; padding: 0 6px;
}
.tegoed-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(22, 163, 74, .16); border: 1px solid var(--groen);
  color: var(--wit); font-size: 13px; font-weight: 600;
}

/* --------------------------------------------------------------- inhoud */

.inhoud { max-width: 1180px; margin: 0 auto; padding: 28px 20px 60px; }
.smal   { max-width: 640px; margin: 0 auto; }

h1 { font-size: 28px; line-height: 1.25; margin: 0 0 12px; }
h2 { font-size: 21px; margin: 28px 0 10px; }
h3 { font-size: 16px; margin: 0 0 6px; }

.uitleg { color: var(--zacht); font-size: 15px; }

.held { padding: 10px 0 26px; }
.held-titel { font-size: clamp(24px, 4vw, 38px); max-width: 780px; margin: 0 auto 10px; }
.held-onder { color: var(--zacht); margin: 0 0 6px; }
.held-prijs { margin: 0 0 20px; font-size: 17px; }
.held-prijs strong { color: var(--oranje); }

.zoekbalk { display: flex; gap: 8px; max-width: 460px; margin: 0 auto 10px; }
.zoekbalk input {
  flex: 1; padding: 11px 14px; font: inherit; text-align: start;
  border: 1px solid var(--lijn); border-radius: 10px;
  background: var(--vlak); color: var(--wit);
}
.zoekbalk input::placeholder { color: var(--zacht); }
.zoekbalk button {
  padding: 11px 16px; font: inherit; cursor: pointer; color: var(--wit);
  border: 1px solid var(--lijn-sterk); border-radius: 10px; background: var(--vlak);
}
.zoekbalk button:hover { border-color: var(--oranje); color: var(--oranje); }
.aantal { color: var(--zacht); font-size: 14px; margin: 0; }

.melding {
  padding: 14px 16px; border-radius: var(--rond);
  background: var(--vlak); border: 1px solid var(--lijn);
}
.melding-goed { border-color: var(--groen); background: rgba(22, 163, 74, .12); }

.fouten {
  list-style: none;
  margin: 0 0 16px; padding: 12px 16px;
  border: 1px solid var(--rood); background: rgba(225, 29, 42, .12);
  border-radius: var(--rond); color: var(--wit);
}

.terug { text-decoration: none; font-size: 15px; color: var(--zacht); }
.terug:hover { color: var(--oranje); }

/* --------------------------------------------------------------- raster */

.raster {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.kaart {
  border: 1px solid var(--lijn); border-radius: var(--rond);
  background: var(--vlak); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--gloed);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.kaart:hover {
  box-shadow: var(--gloed-op); transform: translateY(-3px);
  border-color: rgba(249, 115, 22, .5);
}

.kaart-video {
  position: relative; display: block; background: #000;
  aspect-ratio: 16 / 9;
}
.kaart-video video { width: 100%; height: 100%; object-fit: cover; }

.kaart-speel {
  position: absolute; inset: 0; margin: auto;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(17, 17, 17, .72); border: 2px solid var(--oranje);
  transition: opacity .15s ease;
}
.kaart-speel::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border-left: 12px solid var(--oranje);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  transform: translateX(2px);
}
.kaart-video:hover .kaart-speel { opacity: 0; }

.kaart-tekst { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.kaart-titel { font-size: 15px; margin: 0; }
.kaart-bestand {
  margin: 0; font-size: 12px; color: var(--zacht);
  font-family: ui-monospace, Consolas, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kaart-knoppen { display: flex; gap: 8px; margin-top: auto; }
.kaart-knoppen > * { flex: 1; }

/* ------------------------------------------------------------- categorieen */

/* snelkoppelingen bovenaan, zodat je met 221 video's niet moet scrollen */
.cat-nav {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 0 0 34px;
}
.cat-nav a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--lijn); color: var(--zacht);
  font-size: 13px; background: var(--vlak);
}
.cat-nav a:hover { border-color: var(--oranje); color: var(--oranje); }
.cat-nav a span {
  font-size: 11px; font-weight: 700; color: var(--zwart);
  background: var(--zilver); border-radius: 999px; padding: 1px 7px;
}
.cat-nav a:hover span { background: var(--oranje); }

/* ruimte tussen de categorieen, dat was de vraag */
.categorie { margin: 0 0 62px; scroll-margin-top: 84px; }
.categorie:last-of-type { margin-bottom: 20px; }

.cat-titel {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 22px; margin: 0 0 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--lijn);
}
.cat-titel::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--oranje); flex: none;
  box-shadow: 0 0 12px rgba(249, 115, 22, .8);
}
.cat-aantal {
  font-size: 12px; font-weight: 700; color: var(--zacht);
  border: 1px solid var(--lijn); border-radius: 999px; padding: 2px 9px;
}

/* ---------------------------------------------------------------- knoppen */

.knop {
  display: inline-block; text-align: center; text-decoration: none;
  padding: 10px 16px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--oranje); color: var(--zwart); font: inherit; font-weight: 700;
  font-size: 15px;
}
.knop:hover { background: var(--geel); color: var(--zwart); }
.knop-groot { width: 100%; padding: 14px 18px; font-size: 16px; }
.knop-stil {
  background: transparent; color: var(--wit); border: 1px solid var(--lijn-sterk);
  font-weight: 600;
}
.knop-stil:hover { background: var(--vlak-op); color: var(--oranje); border-color: var(--oranje); }
.knop-bt {
  background: var(--paars); color: var(--wit);
}
.knop-bt:hover { background: var(--blauw); color: var(--wit); }
.knop:disabled, .knop[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed;
}
.knop-in-wagen { background: var(--groen); color: var(--wit); }
.knop-in-wagen:hover { background: var(--smaragd); color: var(--wit); }

/* ---------------------------------------------------------------- detail */

.detail { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 880px) { .detail { grid-template-columns: 1.3fr 1fr; align-items: start; } }

.detail-video video {
  width: 100%; border-radius: var(--rond); background: #000;
  border: 1px solid var(--lijn); box-shadow: var(--gloed);
}
.detail-bestand {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px; color: var(--zacht); margin: 10px 0 0; word-break: break-all;
}

.detail-bestel {
  background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: var(--rond); padding: 20px; box-shadow: var(--gloed);
}
.detail-prijs { margin: 0 0 4px; }
.detail-prijs strong { font-size: 26px; color: var(--oranje); }
.detail-prijs small { color: var(--zacht); display: block; }
.detail-levering { color: var(--groen); font-size: 15px; margin: 6px 0 18px; }

/* ------------------------------------------------------------ formulieren */

.formulier { display: flex; flex-direction: column; gap: 16px; }

.veld { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; }
.veld > span, .veld > legend { font-weight: 600; font-size: 14px; }
.veld input[type=text], .veld input[type=email], .veld input[type=tel],
.veld input[type=password], .veld textarea, .veld select {
  padding: 11px 13px; font: inherit; text-align: start;   /* typen leest links beter */
  border: 1px solid var(--lijn); border-radius: 10px;
  background: var(--vlak); color: var(--wit);
  width: 100%;
}
.veld input::placeholder, .veld textarea::placeholder { color: var(--zacht); }
.veld input:focus, .veld textarea:focus, .veld select:focus {
  outline: 2px solid var(--oranje); outline-offset: 1px; border-color: var(--oranje);
}
.veld small { color: var(--zacht); font-size: 13px; }
.veld textarea { resize: vertical; }
.veld input[type=file] { color: var(--zacht); font-size: 14px; }

.keuze {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 8px 10px; cursor: pointer;
  border: 1px solid var(--lijn); border-radius: 10px; background: var(--vlak);
}
.keuze:hover { border-color: var(--oranje); }
.keuze input { width: 18px; height: 18px; accent-color: var(--oranje); }

.veld-akkoord {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 9px; font-size: 14px; text-align: start;
}
.veld-akkoord input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--oranje); }

.bon {
  font-family: ui-monospace, Consolas, monospace; font-size: 13px;
  background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: 8px; padding: 10px 12px; display: inline-block;
}

/* --------------------------------------------------------- bedrijfsgegevens */

.bedrijfskaart {
  border: 1px solid var(--lijn); border-radius: var(--rond);
  background: var(--vlak); padding: 26px 20px; margin: 22px 0 30px;
  box-shadow: var(--gloed);
}
.bedrijfskaart-logo { margin: 0 auto 12px; }
.bedrijfskaart-naam { margin: 0; font-size: 22px; font-weight: 700; }
.bedrijfskaart-familie {
  margin: 2px 0 16px; font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--oranje);
}
.bedrijfskaart-adres {
  font-style: normal; line-height: 1.7; margin: 0 0 16px; color: var(--wit);
}
.bedrijfskaart-nummer { margin: 0 0 14px; font-size: 14px; color: var(--zacht); }
.bedrijfskaart-nummer strong {
  color: var(--wit); font-family: ui-monospace, Consolas, monospace; font-size: 15px;
}
.bedrijfskaart-mail a { font-weight: 600; }

/* ------------------------------------------------------------- pakketten */

.pakketten {
  display: grid; gap: 18px; margin: 22px 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.pakket {
  border: 1px solid var(--lijn); border-radius: var(--rond);
  background: var(--vlak); padding: 20px 18px; box-shadow: var(--gloed);
}
.pakket-beste {
  border-color: var(--oranje); box-shadow: var(--gloed-op);
}
.pakket-aantal { font-size: 32px; font-weight: 700; color: var(--oranje); margin: 0; }
.pakket-wat { color: var(--zacht); font-size: 14px; margin: 2px 0 12px; }
.pakket-euro { font-size: 22px; font-weight: 700; margin: 0; }
.pakket-bt { color: var(--paars); font-weight: 600; margin: 4px 0 0; }
.pakket-per { color: var(--zacht); font-size: 13px; margin: 6px 0 14px; }
.pakket-label {
  display: inline-block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--oranje); color: var(--zwart);
  border-radius: 999px; padding: 3px 10px; margin-bottom: 10px;
}

/* ------------------------------------------------------------ winkelwagen */

.wagen-lijst { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
.wagen-regel {
  display: flex; align-items: center; gap: 14px; text-align: start;
  border: 1px solid var(--lijn); border-radius: var(--rond);
  background: var(--vlak); padding: 10px 14px;
}
.wagen-regel img, .wagen-regel video {
  width: 96px; height: 54px; object-fit: cover; border-radius: 8px;
  background: #000; flex: none;
}
.wagen-regel-titel { flex: 1; font-size: 15px; font-weight: 600; }
.wagen-leeg { color: var(--zacht); padding: 30px 0; }

/* -------------------------------------------------------------- hoe werkt */

.hoe { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--lijn); }
.stappen { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stap {
  background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: var(--rond); padding: 18px; box-shadow: var(--gloed);
}
.stap h3 { color: var(--oranje); }
.stap p { margin: 0; color: var(--zacht); font-size: 14px; }

/* -------------------------------------------------------------------- voet */

.voet {
  border-top: 1px solid var(--lijn); padding: 26px 20px 40px;
  color: var(--zacht); font-size: 14px;
}
.voet-nav { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.voet-klein { font-size: 13px; margin: 6px 0 0; }

/* ------------------------------------------------- aanmelden en niveaubadge */

.kop-knop {
  padding: 7px 13px; border: 1px solid var(--lijn-sterk); border-radius: 9px;
  text-decoration: none; font-size: 14px; color: var(--wit); background: transparent;
  white-space: nowrap;
}
.kop-knop:hover { background: var(--vlak-op); color: var(--oranje); border-color: var(--oranje); }
.kop-knop-aan {
  background: var(--oranje); border-color: var(--oranje); color: var(--zwart); font-weight: 700;
}
.kop-knop-aan:hover { background: var(--geel); border-color: var(--geel); color: var(--zwart); }

.lid { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.lid-naam {
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--zacht);
}
.lid-niveau {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border-radius: 999px; padding: 2px 9px; color: var(--wit); background: var(--zilver);
}
.niveau-free     { background: var(--zilver); color: var(--zwart); }
.niveau-plus     { background: var(--blauw); }
.niveau-pro      { background: var(--oranje); color: var(--zwart); }
.niveau-ltd      { background: var(--paars); }
.niveau-business { background: var(--marine); }
.niveau-admin    { background: var(--geel); color: var(--zwart); }

/* ------------------------------------------------------------------ reclame */

.reclame {
  margin: 22px 0; padding: 10px;
  border: 1px solid var(--lijn); border-radius: var(--rond); background: var(--vlak);
  overflow: hidden;
}
.reclame-label {
  margin: 0 0 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--zacht);
}
.reclame ins { min-height: 90px; }
.reclame-weg { margin: 8px 0 0; font-size: 13px; }
.reclame-weg a { color: var(--zacht); text-decoration: underline; }
.reclame-weg a:hover { color: var(--oranje); }

/* ------------------------------------------------------------------ paneel */

body.paneel { background: var(--zwart); }
body.paneel .inhoud { max-width: 1040px; }

.opdracht {
  background: var(--vlak); border: 1px solid var(--lijn);
  border-inline-start: 4px solid var(--lijn-sterk);
  border-radius: var(--rond); margin-bottom: 14px; overflow: hidden; text-align: start;
}
.opdracht.status-betaald      { border-inline-start-color: var(--oranje); }
.opdracht.status-in_bewerking { border-inline-start-color: var(--geel); }
.opdracht.status-geleverd     { border-inline-start-color: var(--groen); }
.opdracht.status-geannuleerd  { border-inline-start-color: var(--rood); }

.opdracht-kop { padding: 14px 16px; }
.opdracht-kop h2 { margin: 0 0 4px; font-size: 17px; display: flex; gap: 10px; align-items: center; }
.opdracht-kop h2 a { text-decoration: none; font-family: ui-monospace, Consolas, monospace; }
.opdracht-samen { margin: 0; font-size: 14px; color: var(--zacht); }

.label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  background: var(--vlak-op); border: 1px solid var(--lijn);
  border-radius: 999px; padding: 2px 9px; font-weight: 600; color: var(--zacht);
}

.opdracht-body { padding: 0 16px 18px; border-top: 1px solid var(--lijn); }

.template {
  background: rgba(249, 115, 22, .14); border: 1px solid var(--oranje);
  border-radius: 10px; padding: 12px 14px; margin: 14px 0; font-size: 14px;
}
.template code { font-size: 14px; font-weight: 700; word-break: break-all; color: var(--oranje); }

.gegevens { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; margin: 14px 0; font-size: 14px; }
.gegevens dt { color: var(--zacht); }
.gegevens dd { margin: 0; }
.gegevens pre {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font: inherit; background: var(--vlak-op); padding: 8px 10px; border-radius: 8px;
}

.bestanden { margin: 0 0 14px; padding-inline-start: 20px; font-size: 14px; }
.bestanden small { color: var(--zacht); }

.acties { display: grid; gap: 20px; margin-top: 18px; }
@media (min-width: 700px) { .acties { grid-template-columns: 1fr 1fr; align-items: start; } }
.acties form {
  background: var(--vlak-op); border: 1px solid var(--lijn);
  border-radius: var(--rond); padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}

.tabel {
  width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 18px;
  background: var(--vlak); text-align: start;
}
.tabel th, .tabel td { text-align: start; padding: 9px 10px; border-bottom: 1px solid var(--lijn); }
.tabel th { background: var(--vlak-op); font-size: 13px; }
.tabel code { font-size: 12px; word-break: break-all; color: var(--zacht); }
.tabel tr.is-uit td { opacity: .5; }

/* ------------------------------------------------------- installatiecontrole */

.stand {
  display: inline-block; min-width: 54px; text-align: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border-radius: 999px; padding: 3px 9px; color: var(--wit); background: var(--zilver);
}
tr.stand-goed     .stand { background: var(--groen); }
tr.stand-let-op   .stand { background: var(--geel); color: var(--zwart); }
tr.stand-fout     .stand { background: var(--rood); }
tr.stand-onbekend .stand { background: var(--zilver); color: var(--zwart); }
tr.stand-fout   td { background: rgba(225, 29, 42, .10); }
tr.stand-let-op td { background: rgba(255, 204, 0, .08); }

/* ------------------------------------------------------- rechts naar links */

[dir="rtl"] .kaart-speel::after { transform: translateX(-2px) scaleX(-1); }

/* ------------------------------------------------- categorie-uitklapmenu */

.catkeuze { position: relative; }

.catkeuze summary {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 13px; cursor: pointer; list-style: none;
  border: 1px solid var(--lijn); border-radius: 9px;
  background: var(--vlak); color: var(--wit); font-size: 14px; white-space: nowrap;
}
.catkeuze summary::-webkit-details-marker { display: none; }
.catkeuze summary:hover { border-color: var(--oranje); }
.catkeuze[open] summary { border-color: var(--oranje); }
.catkeuze-naam { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }

.catlijst {
  position: absolute; inset-inline-start: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 240px; max-height: 62vh; overflow-y: auto; padding: 6px;
  border: 1px solid var(--lijn-sterk); border-radius: 12px; background: var(--zwart);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6), var(--gloed);
}
.catlijst-rij {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 11px; border-radius: 8px; text-decoration: none;
  color: var(--wit); font-size: 14px; white-space: nowrap;
}
.catlijst-rij:hover { background: var(--vlak-op); color: var(--oranje); }
.catlijst-rij.is-nu { background: rgba(249, 115, 22, .16); color: var(--oranje); font-weight: 600; }
.catlijst-aantal {
  font-size: 11px; font-weight: 700; color: var(--zwart);
  background: var(--zilver); border-radius: 999px; padding: 1px 8px;
}
.catlijst-rij:hover .catlijst-aantal,
.catlijst-rij.is-nu .catlijst-aantal { background: var(--oranje); }

/* schakelaar boven een categorieraster */
.cat-schakel {
  display: flex; gap: 10px; justify-content: center; align-items: center;
  flex-wrap: wrap; margin: 0 0 22px;
}

/* hoe werkt het, nu bovenaan de homepage */
.hoe-boven {
  margin-top: 10px; padding-top: 0; border-top: 0;
  border-bottom: 1px solid var(--lijn); padding-bottom: 30px; margin-bottom: 34px;
}

/* doorbladeren onderaan een categoriepagina */
.cat-blader {
  display: flex; justify-content: space-between; gap: 14px;
  margin: 44px 0 10px; flex-wrap: wrap;
}
.held-cat { padding-bottom: 6px; }

@media (max-width: 720px) {
  .catkeuze-naam { max-width: 120px; }
  .catlijst { inset-inline-start: 50%; transform: translateX(-50%); min-width: 220px; }
  [dir="rtl"] .catlijst { transform: translateX(50%); }
}