/* TV-etalage speler.
   LET OP - deze stylesheet draait op showroom-TV's, niet op een moderne laptop.
   Een Samsung uit 2017 (Tizen 3.0) heeft Chromium 47 aan boord: geen CSS-variabelen
   (49+), geen clamp() (79+), geen flex gap (84+), geen inset (87+). Alles hieronder
   staat daarom dubbel: eerst een vaste waarde die overal werkt, daarna de moderne
   regel die een nieuwe browser eroverheen legt. Een oude browser gooit die tweede
   regel weg en houdt de eerste. De vaste waarde is de clamp()-uitkomst bij 1920px
   breed, dus op een TV is het beeld identiek.
   Nieuwe regels toevoegen? Altijd dit patroon aanhouden. */

:root {
  --accent: #ffb020;
  --inkt: #0b1622;
  --wit: #f6f7f9;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: #000;
  overflow: hidden;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #f6f7f9;
  color: var(--wit);
}

#scherm {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
}

/* ---- achtergrondlagen (crossfade + langzame zoom) ---- */
#lagen { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.laag {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0;
  -webkit-transition: opacity 1.1s ease;
  transition: opacity 1.1s ease;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-animation: kenburns 16s ease-out forwards;
  animation: kenburns 16s ease-out forwards;
}
.laag.actief { opacity: 1; z-index: 2; }
.laag.vorig { opacity: 0; z-index: 1; }

@-webkit-keyframes kenburns {
  from { -webkit-transform: scale(1); }
  to   { -webkit-transform: scale(1.09); }
}
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}

.laag:after {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: -webkit-linear-gradient(bottom, rgba(5,8,12,.88) 0%, rgba(5,8,12,.55) 24%, rgba(5,8,12,.05) 46%, rgba(5,8,12,.35) 100%);
  background: linear-gradient(to top, rgba(5,8,12,.88) 0%, rgba(5,8,12,.55) 24%, rgba(5,8,12,.05) 46%, rgba(5,8,12,.35) 100%);
}

/* ---- kop ---- */
#kop {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 5;
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;
  padding: 34px 48px;
  padding: clamp(16px, 2.2vw, 34px) clamp(20px, 3vw, 48px);
  font-size: 26px;
  font-size: clamp(16px, 1.5vw, 26px);
  letter-spacing: .04em;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  opacity: .92;
}
#bedrijfsnaam { font-weight: 700; text-transform: uppercase; }
#bedrijfscontact { font-size: .78em; opacity: .72; letter-spacing: .02em; margin-top: .25em; }
#bedrijfscontact:empty { display: none; }
#kop-rechts {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
}
#reelvideologo {
  height: 30px;
  height: clamp(18px, 2vw, 30px);
  width: auto; opacity: .88;
}
/* marge i.p.v. flex-gap: gap bestaat pas vanaf Chromium 84 */
#klok { font-variant-numeric: tabular-nums; opacity: .85; margin-left: 28px; }

/* ---- content per item (kind van .laag, deelt de crossfade) ---- */
.paneel {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -webkit-box-direction: normal;
  -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
  -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end;
  padding: 64px 72px 96px;
  padding: clamp(28px, 4vw, 64px) clamp(28px, 4vw, 72px) clamp(60px, 6vw, 96px);
}

.categorie {
  display: inline-block;
  -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start;
  background: #ffb020;
  background: var(--accent);
  color: #1a1200;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 20px;
  font-size: clamp(13px, 1.1vw, 20px);
  padding: .35em .9em;
  border-radius: 999px;
  margin-bottom: 20px;
  margin-bottom: clamp(10px, 1.4vw, 20px);
}

.titel {
  font-size: 72px;
  font-size: clamp(32px, 5vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  max-width: 78%;
  text-shadow: 0 4px 24px rgba(0,0,0,.55);
}

.plaats {
  margin-top: .35em;
  font-size: 28px;
  font-size: clamp(16px, 1.6vw, 28px);
  opacity: .85;
}

.rij {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end;
  -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;
  margin-top: 34px;
  margin-top: clamp(18px, 2.4vw, 34px);
}

.specs {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
  max-width: 68%;
}
/* marges i.p.v. gap (zie #klok) */
.specs div { min-width: 120px; margin: 0 32px 14px 0; }
.specs .sk {
  display: block;
  font-size: 15px;
  font-size: clamp(11px, .9vw, 15px);
  text-transform: uppercase; letter-spacing: .06em;
  opacity: .65;
}
.specs .sv {
  display: block;
  font-size: 28px;
  font-size: clamp(17px, 1.7vw, 28px);
  font-weight: 600;
}

.prijs {
  -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
  text-align: right;
  margin-left: 48px;
  font-size: 58px;
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 800;
  color: #ffb020;
  color: var(--accent);
  text-shadow: 0 3px 18px rgba(0,0,0,.5);
  white-space: nowrap;
}
.prijs.tekst {
  font-size: 30px;
  font-size: clamp(18px, 2vw, 30px);
  color: #f6f7f9;
  color: var(--wit);
  opacity: .9;
}

.qr {
  position: absolute;
  right: 60px; right: clamp(24px, 3.5vw, 60px);
  bottom: 190px; bottom: clamp(120px, 13vw, 190px);
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -webkit-box-direction: normal;
  -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
  -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
  background: rgba(255,255,255,.96);
  padding: 16px;
  padding: clamp(10px, 1vw, 16px);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.qr img {
  display: block;
  width: 140px;
  width: clamp(84px, 8vw, 140px);
  height: auto;
}
.qr span {
  color: #0b1622;
  color: var(--inkt);
  font-size: 15px;
  font-size: clamp(11px, .85vw, 15px);
  font-weight: 600;
  text-align: center;
  margin-top: 8px;
}

/* ---- voortgangsbalk ---- */
#voet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 0 48px 26px;
  padding: 0 clamp(20px, 3vw, 48px) clamp(14px, 1.6vw, 26px);
}
#voortgang { height: 5px; width: 100%; background: rgba(255,255,255,.18); border-radius: 4px; overflow: hidden; }
#voortgang-balk { height: 100%; width: 0%; background: #ffb020; background: var(--accent); }

/* Foutmelding: op een TV zonder toetsenbord is dit het enige diagnosemiddel.
   Daarom geen [hidden]-truc alleen, maar ook een expliciete display-regel. */
#foutmelding {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 9;
  display: none;
  background: #0b1622; color: #fff;
  font-size: 30px;
  font-size: clamp(18px, 2vw, 30px);
  line-height: 1.4;
  text-align: center; padding: 5vw;
}
#foutmelding.aan { display: block; padding-top: 18vh; }