/* ============================================================ digibord
   Een eigen stijl voor in de klas. Alles groot: een leerkracht bedient dit van
   een meter afstand, soms met een vinger op een aanraakscherm, en de klas kijkt
   mee vanaf de achterste rij. Vandaar de forse knoppen en het hoge contrast.

   De kleuren zijn de Sinterklaaskleuren: rood, wit, paars, zwart en
   chocoladebruin. Goud gebruiken we alleen als accent, voor de ster in het
   logo en voor de focusrand.

   Dit bestand staat los van site.css: het digibord deelt de kleuren maar niet
   de opmaak van de website. */

:root {
  /* de vijf hoofdkleuren */
  --db-rood:       #C11617;
  --db-rood-licht: #E02A2B;
  --db-rood-diep:  #870F14;

  --db-paars:       #832883;
  --db-paars-licht: #A63CAA;
  --db-paars-diep:  #45124A;

  --db-choco:       #6B3F26;
  --db-choco-licht: #8E5733;
  --db-choco-diep:  #37200F;

  --db-wit:   #FFFFFF;
  --db-room:  #FBF1E4;
  --db-zwart: #0B0711;

  --db-goud:  #FFCD00;

  --db-rand:  rgba(255, 255, 255, .18);
  --db-balk:  clamp(3.5rem, 7vh, 5rem);

  /* De gradiënt die als rand om de vlakken ligt: licht aan de bovenkant,
     donker aan de onderkant, alsof er licht van boven op valt. */
  --db-rim: linear-gradient(145deg,
              rgba(255, 255, 255, .78) 0%,
              rgba(255, 255, 255, .14) 42%,
              rgba(0, 0, 0, .45) 100%);
}

.db, .db__body { height: 100%; }

.db__body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--db-wit);
  background:
    radial-gradient(85% 55% at 50% -8%,  rgba(131, 40, 131, .55), transparent 62%),
    radial-gradient(70% 55% at 108% 104%, rgba(107, 63, 38, .60), transparent 60%),
    radial-gradient(60% 45% at -8% 92%,   rgba(193, 22, 23, .35), transparent 60%),
    linear-gradient(180deg, #1B1026 0%, var(--db-zwart) 72%);
  background-attachment: fixed;
}

/* Een heel licht spikkeltje over het geheel, als strooigoed op een donkere
   tafel. Zonder dit oogt zo'n groot vlak op een beamer nogal vlak. */
.db__body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px),
    radial-gradient(rgba(255, 205, 0, .16) 1px, transparent 1px);
  background-size: 96px 96px, 140px 140px;
  background-position: 0 0, 48px 70px;
  opacity: .5;
}

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

/* ---------------------------------------------------------------- balk */
.db__balk {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  height: var(--db-balk);
  padding: 0 clamp(.8rem, 2vw, 1.6rem);
  background: linear-gradient(180deg, rgba(11, 7, 17, .94), rgba(11, 7, 17, .55));
  backdrop-filter: blur(12px);
  flex: none;
  z-index: 2;
}

/* Een dun lint in de huiskleuren onder de balk. */
.db__balk::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--db-rood) 0%, var(--db-goud) 28%, var(--db-wit) 50%,
    var(--db-paars) 72%, var(--db-choco) 100%);
  opacity: .9;
}

.db__logo {
  display: flex; align-items: center; gap: .55rem;
  color: var(--db-wit); text-decoration: none;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  white-space: nowrap;
}
.db__logo strong { color: var(--db-goud); }
.db__ster {
  width: 1.5em; height: 1.5em;
  color: var(--db-goud); fill: var(--db-goud);
  filter: drop-shadow(0 0 10px rgba(255, 205, 0, .55));
}

.db__titel {
  margin: 0; flex: 1;
  text-align: center;
  font-size: clamp(1.05rem, 2.2vw, 1.7rem);
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

.db__acties { display: flex; gap: .5rem; margin-left: auto; }

.db__knop {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 3rem; padding: 0 1.2rem;
  font: inherit; font-weight: 700; font-size: clamp(.95rem, 1.4vw, 1.1rem);
  color: var(--db-wit);
  border: 2px solid transparent;
  border-radius: 99px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06)) padding-box,
    var(--db-rim) border-box;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
  cursor: pointer;
}
.db__knop:hover { background:
    linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .12)) padding-box,
    var(--db-rim) border-box; }
.db__knop:focus-visible { outline: 3px solid var(--db-goud); outline-offset: 3px; }
.db__knop svg { width: 1.3em; height: 1.3em; }

.db__knop--terug {
  color: var(--db-wit);
  background:
    linear-gradient(180deg, var(--db-rood-licht), var(--db-rood-diep)) padding-box,
    var(--db-rim) border-box;
}
.db__knop--terug:hover {
  background:
    linear-gradient(180deg, #F03537, var(--db-rood)) padding-box,
    var(--db-rim) border-box;
}

/* ---------------------------------------------------------------- hoofd */
.db__hoofd {
  position: relative; z-index: 1;
  flex: 1; min-height: 0;
  padding: clamp(1rem, 3vh, 2.2rem) clamp(.8rem, 2vw, 2rem);
  overflow-y: auto;
}

/* Verbergen moet ook echt verbergen. Een klasse met display wint het anders
   van het hidden-attribuut, en dan blijft bijvoorbeeld de Terug-knop staan op
   het startscherm. */
.db__body [hidden] { display: none !important; }

.db__kop {
  margin: 0 0 clamp(1rem, 3vh, 2rem);
  text-align: center;
  font-size: clamp(1.6rem, 4vw, 3rem);
  letter-spacing: -.01em;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .5);
}

/* Op een digibord staat het startscherm midden in beeld in plaats van
   bovenaan met een gat eronder. */
[data-scherm="start"] {
  min-height: calc(100vh - var(--db-balk) - clamp(2rem, 6vh, 4.4rem));
  display: flex; flex-direction: column; justify-content: center;
}

/* ---------------------------------------------------------- de tegels */
.db__tegels {
  /* width: 100% is nodig: zonder dat krimpt deze lijst in het flexvak van het
     startscherm tot de breedte van de inhoud en blijven de tegels smal. */
  list-style: none; margin: 0 auto; padding: 0;
  width: 100%; max-width: 1600px;
  display: grid; gap: clamp(.9rem, 1.8vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

/* Vijf of zes tegels passen op een breed bord netjes op één rij. Daaronder
   doet auto-fit zijn werk. */
@media (min-width: 1500px) {
  .db__tegels--5 { grid-template-columns: repeat(5, 1fr); }
  .db__tegels--6 { grid-template-columns: repeat(6, 1fr); }
}

/* Op een laptop of een kleiner bord passen er geen vijf naast elkaar. Dan
   drie boven en twee eronder, maar wel netjes in het midden in plaats van
   links aangeplakt. Zes worden twee rijen van drie. */
@media (min-width: 880px) and (max-width: 1499px) {
  .db__tegels--5 { grid-template-columns: repeat(6, 1fr); }
  .db__tegels--5 > li { grid-column: span 2; }
  .db__tegels--5 > li:nth-child(4) { grid-column: 2 / span 2; }
  .db__tegels--5 > li:nth-child(5) { grid-column: 4 / span 2; }

  .db__tegels--6 { grid-template-columns: repeat(3, 1fr); }
}

.db__tegel {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .7rem;
  min-height: clamp(9.5rem, 30vh, 22rem);
  padding: clamp(1.4rem, 3vh, 2.4rem) 1rem;
  font: inherit; color: var(--db-wit); text-align: center;
  border: 2px solid transparent;
  border-radius: 30px;
  cursor: pointer;
  background:
    linear-gradient(162deg, var(--tegel-licht), var(--tegel-donker)) padding-box,
    var(--db-rim) border-box;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .35),
    inset 0 -24px 40px -22px rgba(0, 0, 0, .75),
    0 14px 0 -2px var(--tegel-voet),
    0 26px 44px -14px rgba(0, 0, 0, .8);
  transition: transform .14s ease, box-shadow .14s ease;
}

.db__tegel:hover {
  transform: translateY(-5px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .4),
    inset 0 -24px 40px -22px rgba(0, 0, 0, .75),
    0 19px 0 -2px var(--tegel-voet),
    0 34px 54px -14px rgba(0, 0, 0, .85),
    0 0 0 5px var(--tegel-gloed);
}
.db__tegel:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .25),
    0 5px 0 -2px var(--tegel-voet),
    0 10px 20px -8px rgba(0, 0, 0, .8);
}
.db__tegel:focus-visible { outline: 4px solid var(--db-goud); outline-offset: 5px; }

/* De vijf kleuren. Elke tegel heeft een licht- en een donkervariant voor het
   verloop, een donkere voet voor de opstaande rand en een gloed voor hover. */
.db__tegel--rood {
  --tegel-licht: var(--db-rood-licht); --tegel-donker: var(--db-rood-diep);
  --tegel-voet: #5E0A0E; --tegel-gloed: rgba(224, 42, 43, .38);
}
.db__tegel--paars {
  --tegel-licht: var(--db-paars-licht); --tegel-donker: var(--db-paars-diep);
  --tegel-voet: #2C0B31; --tegel-gloed: rgba(166, 60, 170, .38);
}
.db__tegel--choco {
  --tegel-licht: var(--db-choco-licht); --tegel-donker: var(--db-choco-diep);
  --tegel-voet: #24130A; --tegel-gloed: rgba(142, 87, 51, .45);
}
.db__tegel--wit {
  --tegel-licht: #FFFFFF; --tegel-donker: #E4D5C3;
  --tegel-voet: #A8937D; --tegel-gloed: rgba(255, 255, 255, .45);
  color: #3B2213;
}
.db__tegel--zwart {
  --tegel-licht: #2E1A44; --tegel-donker: #0A0610;
  --tegel-voet: #050309; --tegel-gloed: rgba(131, 40, 131, .5);
}

/* Het icoon in een rond vlakje, alsof er een lampje op schijnt. */
.db__tegel__icoon {
  display: grid; place-items: center;
  width: clamp(3.6rem, 7vw, 5.2rem); aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .14) 58%,
                    rgba(0, 0, 0, .22) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 6px 14px rgba(0, 0, 0, .3);
}
.db__tegel__icoon svg {
  width: 54%; height: 54%;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
.db__tegel--wit .db__tegel__icoon {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .9), rgba(107, 63, 38, .12) 58%,
                    rgba(107, 63, 38, .22) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 14px rgba(107, 63, 38, .25);
}
.db__tegel--wit .db__tegel__icoon svg { filter: none; }

.db__tegel__naam {
  font-size: clamp(1.3rem, 2.5vw, 2rem); font-weight: 800; line-height: 1.1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .22);
}
.db__tegel__onder { font-size: clamp(.9rem, 1.4vw, 1.1rem); opacity: .88; }
.db__tegel--wit .db__tegel__naam { text-shadow: none; }
.db__tegel--wit .db__tegel__onder { opacity: .75; }

/* ------------------------------------------------------------ de lijst */
.db__lijst {
  list-style: none; margin: 0 auto; padding: 0;
  width: 100%; max-width: 1600px;
  display: grid; gap: clamp(.8rem, 1.6vw, 1.3rem);
  /* Een bovengrens per kaart, zodat twee liedjes niet over het hele bord
     uitgerekt worden, en het rijtje netjes in het midden staat. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 300px));
  justify-content: center;
}

.db__item {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; gap: .55rem;
  padding: .9rem;
  font: inherit; color: var(--db-wit); text-align: left;
  border: 2px solid transparent;
  border-radius: 22px;
  cursor: pointer;
  background:
    linear-gradient(165deg, rgba(142, 87, 51, .40), rgba(11, 7, 17, .55)) padding-box,
    var(--db-rim) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 26px -12px rgba(0, 0, 0, .85);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.db__item:hover {
  transform: translateY(-4px);
  background:
    linear-gradient(165deg, rgba(166, 60, 170, .48), rgba(11, 7, 17, .5)) padding-box,
    var(--db-rim) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 20px 34px -12px rgba(0, 0, 0, .9),
              0 0 0 4px rgba(255, 205, 0, .2);
}
.db__item:focus-visible { outline: 4px solid var(--db-goud); outline-offset: 3px; }

.db__item__beeld {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; width: 100%;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, rgba(0, 0, 0, .45), rgba(55, 32, 15, .55));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.db__item__beeld--breed { aspect-ratio: 16 / 9; }
.db__item__beeld img { width: 100%; height: 100%; object-fit: cover; }
.db__item__beeld svg { width: 38%; height: 38%; opacity: .55; }

.db__item__naam { font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 700; line-height: 1.2; }
.db__item__bij  { font-size: .9rem; opacity: .72; }

/* ----------------------------------------------------------- de speler */
.db__scherm--speler { height: 100%; }

.db__speler { display: grid; gap: 1rem; height: 100%; }
.db__speler.heeft-zij { grid-template-columns: 1fr; }

@media (min-width: 1000px) {
  .db__speler.heeft-zij { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}

.db__speler__beeld {
  display: flex; align-items: center; justify-content: center;
  background: #000;
  border: 2px solid transparent;
  border-radius: 22px; overflow: hidden;
  aspect-ratio: 16 / 9; width: 100%;
  background:
    linear-gradient(#000, #000) padding-box,
    var(--db-rim) border-box;
  box-shadow: 0 26px 50px -18px rgba(0, 0, 0, .95);
}
.db__speler__beeld iframe { width: 100%; height: 100%; border: 0; display: block; }
.db__audio { width: min(100%, 40rem); }

.db__speler__zij {
  overflow-y: auto;
  max-height: 72vh;
  padding: 1.3rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 22px;
  background:
    linear-gradient(170deg, rgba(55, 32, 15, .75), rgba(11, 7, 17, .8)) padding-box,
    var(--db-rim) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* De songtekst, groot genoeg om vanaf de achterste rij mee te lezen. */
.db__couplet {
  margin: 0 0 1.3rem;
  font-size: clamp(1.1rem, 1.9vw, 1.6rem);
  line-height: 1.45;
  font-weight: 600;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}
.db__couplet span { display: block; }
.db__stappen p { margin: 0 0 .8rem; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.5; }
.db__leeg { font-size: 1.2rem; opacity: .8; }

/* ----------------------------------------------------------- aftellen */
.db__scherm--aftellen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1rem, 3vh, 2rem); text-align: center;
  min-height: calc(100vh - var(--db-balk) - clamp(2rem, 6vh, 4.4rem));
}
.db__scherm--aftellen[hidden] { display: none; }

.db__aftel__kop {
  margin: 0; font-size: clamp(1.4rem, 3.4vw, 2.6rem); font-weight: 800;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}

.db__aftel { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.6rem, 2vw, 1.4rem); }
.db__aftel__vak {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  min-width: clamp(5rem, 13vw, 9rem);
  padding: clamp(.8rem, 2vw, 1.4rem) 1rem;
  border: 2px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(165deg, var(--db-rood-licht), var(--db-choco-diep)) padding-box,
    var(--db-rim) border-box;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .3),
    0 12px 0 -2px #4A0A0C,
    0 24px 40px -14px rgba(0, 0, 0, .85);
}
.db__aftel__vak strong {
  font-size: clamp(2rem, 6vw, 4.5rem); line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--db-wit);
  text-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}
.db__aftel__vak small { font-size: clamp(.8rem, 1.3vw, 1.05rem); opacity: .85; }
.db__aftel__datum {
  margin: 0; font-size: clamp(1rem, 1.8vw, 1.4rem);
  color: var(--db-goud); font-weight: 700;
  text-shadow: 0 0 18px rgba(255, 205, 0, .35);
}

/* ------------------------------------------------------------ zonder js */
.db__geenjs {
  position: relative; z-index: 1;
  margin: 0; padding: .9rem 1.2rem; text-align: center;
  background: rgba(0, 0, 0, .45); font-size: .95rem;
}

@media (prefers-reduced-motion: reduce) {
  .db__tegel, .db__item { transition: none; }
  .db__tegel:hover, .db__item:hover { transform: none; }
}

/* ========================================================= karaokespeler
   Een eenvoudig muziekspelertje: het hoesje groot in beeld, daaronder de
   knoppen. Bedoeld om vanaf een meter afstand met een vinger te bedienen,
   dus alles fors en met veel ruimte ertussen. */
.db__speler__beeld--pod {
  aspect-ratio: auto;
  background:
    linear-gradient(168deg, #2A1812, #0A0610) padding-box,
    var(--db-rim) border-box;
  padding: clamp(1.2rem, 3vh, 2.4rem) clamp(1rem, 3vw, 2.4rem);
}

.db__pod {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(.8rem, 2vh, 1.4rem);
  width: min(100%, 30rem);
}

.db__pod__hoes {
  display: grid; place-items: center;
  width: min(100%, 22rem); aspect-ratio: 1;
  border-radius: 24px; overflow: hidden;
  background: linear-gradient(160deg, var(--db-choco), #0A0610);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    0 24px 44px -16px rgba(0, 0, 0, .95);
}
.db__pod__hoes img { width: 100%; height: 100%; object-fit: cover; display: block; }
.db__pod__hoes { transition: border-radius .45s ease; }
.db__pod__noot { font-size: 4rem; opacity: .5; }

/* Terwijl het liedje speelt draait het hoesje heel rustig, zoals een plaat. */
.db__pod.speelt .db__pod__hoes { animation: db-plaat 24s linear infinite; }
@keyframes db-plaat { to { transform: rotate(360deg); } }
.db__pod.speelt .db__pod__hoes { border-radius: 50%; }

.db__pod__info { text-align: center; }
.db__pod__titel { display: block; font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 800; }
.db__pod__bij { font-size: .95rem; opacity: .7; }

.db__pod__tijdbalk {
  display: flex; align-items: center; gap: .7rem;
  width: 100%;
}
.db__pod__tijd { font-variant-numeric: tabular-nums; font-size: .9rem; opacity: .75; min-width: 2.6rem; }
.db__pod__tijd:last-child { text-align: right; }

/* Weet de browser de lengte niet, dan verdwijnt de schuifbalk en staat de
   verstreken tijd netjes in het midden in plaats van eenzaam links. */
.db__pod__tijdbalk.geen-balk { justify-content: center; }
.db__pod__tijdbalk.geen-balk .db__pod__tijd:last-child { display: none; }

.db__pod__zoek {
  flex: 1; height: 1.6rem;
  accent-color: var(--db-rood-licht);
  cursor: pointer;
}

.db__pod__knoppen { display: flex; align-items: center; gap: clamp(.8rem, 2.5vw, 1.6rem); }

.db__pod__knop {
  display: grid; place-items: center;
  width: 3.6rem; height: 3.6rem;
  font: inherit; color: var(--db-wit);
  border: 2px solid transparent; border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06)) padding-box,
    var(--db-rim) border-box;
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .9);
  cursor: pointer;
  position: relative;
}
.db__pod__knop:hover { background:
    linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .12)) padding-box,
    var(--db-rim) border-box; }
.db__pod__knop:active { transform: translateY(2px); }
.db__pod__knop:focus-visible { outline: 3px solid var(--db-goud); outline-offset: 3px; }

.db__pod__knop--groot {
  width: clamp(4.6rem, 9vw, 6rem); height: clamp(4.6rem, 9vw, 6rem);
  background:
    linear-gradient(180deg, var(--db-rood-licht), var(--db-rood-diep)) padding-box,
    var(--db-rim) border-box;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 12px 24px -8px rgba(0, 0, 0, .95);
}
.db__pod__knop--groot:hover {
  background:
    linear-gradient(180deg, #F03537, var(--db-rood)) padding-box,
    var(--db-rim) border-box;
}
.db__pod__knop--klein { width: 2.9rem; height: 2.9rem; font-size: 1.5rem; font-weight: 700; }

.db__pod__teken { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1; }
.db__pod__pijl  { font-size: 1.9rem; line-height: 1; }
.db__pod__cijfer {
  position: absolute; font-size: .62rem; font-weight: 800;
  letter-spacing: .02em;
}

.db__pod__geluid { display: flex; align-items: center; gap: .8rem; width: min(100%, 20rem); }
.db__pod__meter {
  flex: 1; height: .6rem; border-radius: 99px; overflow: hidden;
  background: rgba(0, 0, 0, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.db__pod__peil {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--db-choco-licht), var(--db-rood-licht), var(--db-goud));
}

@media (prefers-reduced-motion: reduce) {
  .db__pod.speelt .db__pod__hoes { animation: none; border-radius: 24px; }
}