.play-knop {
  position: fixed; right: 22px; bottom: 22px; z-index: 25;
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 20px 0 16px; border-radius: 23px;
  background: var(--inkt); color: #fbfbf9;
  font: 500 15px/1 inherit; letter-spacing: .02em;
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.6);
  transition: transform .25s ease;
}
.play-knop:hover { transform: translateY(-2px); }
.play-knop .driehoek { width: 0; height: 0; border-left: 10px solid var(--geel); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
body.speelt .play-knop { display: none; }

.play-scherm { position: fixed; inset: 0; z-index: 40; display: none; background: #2f312f; color: #f4f3ef; }
.play-scherm.aan { display: grid; grid-template-rows: 3px 1fr auto; animation: play-in .3s ease; }
@keyframes play-in { from { opacity: 0; } to { opacity: 1; } }
.play-balk { background: rgba(255,255,255,.14); }
.play-balk.loopt::after { content: ""; display: block; height: 100%; width: 0; background: var(--geel); animation: play-loop 7s linear forwards; }
@keyframes play-loop { from { width: 0; } to { width: 100%; } }
.play-beeld { position: relative; overflow: hidden; background: color-mix(in srgb, var(--toon, #dcead9) 60%, #2f312f); cursor: pointer; }
.play-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: play-zoom 9s ease forwards; }
@keyframes play-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
.play-tekst { display: grid; gap: 8px; padding: 30px 40px 36px; }
.play-tekst .label { color: #a9aba6; }
.play-tekst h2 { margin: 0; font-weight: 600; font-size: 34px; line-height: 1.12; color: #f8f7f3; }
.play-tekst p { margin: 0; font-size: 18px; color: #cfd0cb; }
.play-lees { justify-self: start; margin-top: 8px; padding-bottom: 2px; font-size: 16px; border-bottom: 1px solid var(--geel); }
.play-sluit { position: fixed; top: 18px; right: 22px; z-index: 41; width: 38px; height: 38px; border-radius: 19px; background: rgba(255,255,255,.12); color: #f4f3ef; font-size: 18px; }
.play-pauze { position: fixed; top: 20px; left: 22px; z-index: 41; height: 34px; padding: 0 14px; border-radius: 17px; background: rgba(255,255,255,.12); color: #f4f3ef; font-size: 14px; }

@media (max-width: 900px) {
  .play-knop { right: 16px; bottom: 16px; }
  .play-tekst { padding: 20px 20px 26px; }
  .play-tekst h2 { font-size: 24px; }
  .play-tekst p { font-size: 16px; }
}