:root{
  --navy:#03131f;
  --rood:#c8141b;
  --rood-donker:#6e0a0c;
  --goud:#e8b04a;
  --goud-licht:#ffe39a;
  --goud-donker:#8a5a12;
  --script:'Yellowtail', 'Brush Script MT', cursive;
  --cond:'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#010509;color:#fff;font-family:var(--cond)}
body{min-height:100vh;display:flex;justify-content:center}

/* ===== Vaste compositie (desktop) =====
   Alles is gepositioneerd in % van een 939 × 787 vlak (de maat van het origineel),
   lettergroottes in cqw zodat de verhoudingen bij elke breedte gelijk blijven. */
.pagina{
  position:relative;
  width:min(100vw, 939px);
  aspect-ratio:939/787;
  container-type:inline-size;
  overflow:hidden;
  background:var(--navy);
  isolation:isolate;
}
/* De illustratie: iets groter dan het vlak en omlaag geschoven, zodat de
   jukeboxboog onder de PLAY-knop valt (zoals in het origineel). */
.achtergrond{
  position:absolute;z-index:-2;
  left:-5.5%; width:111%;
  top:13.6%;
  aspect-ratio:16/9;
  background:url("../images/achtergrond.jpg") center/cover no-repeat;
}
/* Navy 'hemel'-paneel bovenaan dat zacht overloopt in de lucht van de illustratie */
.pagina::before{
  content:"";position:absolute;inset:0 0 auto 0;height:30%;z-index:-1;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(10,40,60,.55), transparent 70%),
    linear-gradient(to bottom, #02121d 0%, #02111c 45%, rgba(1,10,20,.75) 70%, rgba(0,9,20,0) 100%);
}
/* Gouden lijst rond de pagina */
.pagina::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  border:.45cqw solid transparent;
  border-image:linear-gradient(135deg,#7a4d10,#f3cd78 25%,#9a6418 50%,#f6d58a 75%,#7a4d10) 1;
  box-shadow:inset 0 0 0 .1cqw rgba(0,0,0,.6), inset 0 0 2.5cqw rgba(0,0,0,.6);
}

/* Muzieknoten in de hoeken */
.noot{position:absolute;top:2.2%;font-size:7cqw;line-height:1;color:var(--goud);
  background:linear-gradient(180deg,#ffe7a3,#d39a32 55%,#8d5a14);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 .2cqw .2cqw rgba(0,0,0,.8));}
.noot.links{left:3.6%}
.noot.rechts{right:4%}

/* 1) Logo */
.logo{
  position:absolute;left:0;right:0;top:-2.1%;
  text-align:center;
  font-family:var(--script);font-weight:400;
  font-size:9.95cqw;line-height:1.2;letter-spacing:.012em;
  color:#d4171f;
}
.logo a{color:inherit;text-decoration:none}
/* lichte glans over het rood */
.logo span{
  background:linear-gradient(180deg,#e8262c 0%,#d0161d 55%,#b10f15 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  padding:0 .15em;display:inline-block;
  -webkit-text-stroke:.2cqw #c9141b;
  filter:drop-shadow(0 0 .08cqw #3a0204) drop-shadow(.15cqw .28cqw 0 #1e0203) drop-shadow(.2cqw .45cqw .45cqw rgba(0,0,0,.8));
}

/* 2) Ondertitel */
.ondertitel{
  position:absolute;left:0;right:0;top:13.2%;
  display:flex;justify-content:center;align-items:center;gap:3.2cqw;
  font-weight:900;font-size:3.68cqw;line-height:1;letter-spacing:-.005em;
  text-shadow:.15cqw .2cqw .15cqw rgba(0,0,0,.9), 0 0 .6cqw rgba(0,0,0,.6);
}
.ster{width:2.9cqw;height:2.9cqw;flex:none;
  background:linear-gradient(160deg,#ffe7a0,#e2a83f 50%,#9b6618);
  clip-path:polygon(50% 0,61.8% 35.5%,100% 36.2%,69.1% 59%,80.9% 95.1%,50% 73%,19.1% 95.1%,30.9% 59%,0 36.2%,38.2% 35.5%);
  filter:drop-shadow(0 0 .2cqw rgba(0,0,0,.8));}

/* 3) Banner met gouden rand en afgeschuinde hoeken */
.banner{
  --hoek:1.5cqw;
  position:absolute;left:15.4%;width:70.4%;top:19.25%;height:8.1%;
  clip-path:polygon(var(--hoek) 0,calc(100% - var(--hoek)) 0,100% var(--hoek),100% calc(100% - var(--hoek)),calc(100% - var(--hoek)) 100%,var(--hoek) 100%,0 calc(100% - var(--hoek)),0 var(--hoek));
  background:linear-gradient(180deg,#f7d98c,#c98d2c 45%,#f0c46a 70%,#8e5b14);
  filter:drop-shadow(0 .3cqw .5cqw rgba(0,0,0,.7));
  display:flex;
}
.banner-binnen{
  --h2:1.2cqw;
  margin:.42cqw;flex:1;
  clip-path:polygon(var(--h2) 0,calc(100% - var(--h2)) 0,100% var(--h2),100% calc(100% - var(--h2)),calc(100% - var(--h2)) 100%,var(--h2) 100%,0 calc(100% - var(--h2)),0 var(--h2));
  background:
    radial-gradient(90% 140% at 50% 40%, #c8171d 0%, #a90f15 60%, #7d0a0e 100%);
  box-shadow:inset 0 0 1.2cqw rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:800;font-size:2.34cqw;line-height:1.08;letter-spacing:-.003em;
  text-shadow:.12cqw .16cqw .12cqw rgba(0,0,0,.85);
  padding:0 2cqw;
}

/* 4) PLAY-knop */
.play{
  position:absolute;left:36%;width:27.2%;top:26.7%;height:9.5%;
  font-family:var(--cond);font-weight:900;color:#fff;
  font-size:6.4cqw;letter-spacing:.01em;line-height:1;
  display:flex;align-items:center;justify-content:flex-start;gap:3cqw;
  padding:0 0 0 .9cqw;
  border-radius:1.5cqw;
  border:.32cqw solid #ffc25a;
  background:
    linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 45%),
    radial-gradient(120% 120% at 50% 35%,#b0141a 0%,#8c0c11 55%,#5e0609 100%);
  box-shadow:
    0 0 0 .18cqw #b8520c,
    0 0 1.2cqw .35cqw rgba(255,130,30,.85),
    0 0 3.2cqw .8cqw rgba(255,70,10,.4),
    inset 0 0 1.2cqw .25cqw rgba(255,140,40,.55),
    inset 0 0 .3cqw .1cqw rgba(255,230,160,.6);
  text-shadow:.15cqw .25cqw .2cqw rgba(0,0,0,.75);
  cursor:pointer;
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.play-icoon{
  width:6.6cqw;height:6.6cqw;flex:none;border-radius:50%;
  border:.62cqw solid #fff;
  background:radial-gradient(circle at 50% 40%,#c8161c,#8e0b10 70%);
  box-shadow:0 0 .6cqw rgba(0,0,0,.6), inset 0 0 .5cqw rgba(0,0,0,.5);
  position:relative;
}
.play-icoon::after{
  content:"";position:absolute;left:36%;top:25%;width:38%;height:50%;
  background:#fff;clip-path:polygon(0 0,100% 50%,0 100%);
  filter:drop-shadow(0 0 .2cqw rgba(0,0,0,.5));
}
.play:hover,.play:focus-visible{
  transform:scale(1.035);
  filter:brightness(1.12) saturate(1.1);
  box-shadow:
    0 0 0 .18cqw #c06a12,
    0 0 1.8cqw .5cqw rgba(255,170,60,.9),
    0 0 4cqw 1cqw rgba(255,110,30,.45),
    inset 0 0 1.4cqw .3cqw rgba(255,160,60,.65),
    inset 0 0 .3cqw .1cqw rgba(255,240,180,.7);
  outline:none;
}
.play:active{transform:scale(.99)}
.play.is-playing .play-icoon::after{
  clip-path:none;left:29%;top:27%;width:42%;height:46%;
  background:
    linear-gradient(#fff,#fff) 0 0/32% 100% no-repeat,
    linear-gradient(#fff,#fff) 100% 0/32% 100% no-repeat;
}


/* =====================================================================
   Rest van de pagina (desktop). Maten in --u = 1px van het 939-brede origineel.
   ===================================================================== */
.pagina{--u:calc(100cqw / 939);background:#07060a}
.u{}/* (alleen ter documentatie) */

/* Donkere houten band onder de illustratie, achter de footer */
.voet-achtergrond{position:absolute;z-index:-2;left:0;right:0;top:calc(672*var(--u));bottom:0;
  background:
    linear-gradient(to bottom,rgba(20,10,4,0) 0,#140a05 calc(22*var(--u)),#0d0704 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 calc(3*var(--u)),rgba(0,0,0,.04) calc(3*var(--u)) calc(7*var(--u)));
}

/* Gedeelde 'paneel'-stijl: navy vlak met gouden rand en afgeschuinde hoeken */
.paneel{
  --rand:calc(3*var(--u));
  border:var(--rand) solid transparent;
  border-radius:calc(9*var(--u));
  corner-shape:scoop;
  background:
    radial-gradient(120% 90% at 50% 30%,#0d2a40 0%,#071a2b 60%,#04111e 100%) padding-box,
    linear-gradient(160deg,#fbe2a0 0%,#c48a2c 30%,#f5cf7a 55%,#9a641a 80%,#e9bd62 100%) border-box;
  box-shadow:0 0 0 calc(1*var(--u)) rgba(0,0,0,.75),0 calc(4*var(--u)) calc(10*var(--u)) rgba(0,0,0,.65),
    inset 0 0 calc(10*var(--u)) rgba(0,0,0,.6);
}

/* ---------- Afspeellijst in het jukeboxscherm ---------- */
.afspeellijst{
  position:absolute;left:calc(293*var(--u));top:calc(344*var(--u));
  width:calc(351*var(--u));height:calc(245*var(--u));
  display:flex;flex-direction:column;overflow:hidden;
  padding:calc(5*var(--u)) calc(7*var(--u)) calc(5*var(--u));
  border-radius:calc(3*var(--u));corner-shape:round;
  border-width:calc(3*var(--u));
}
.nu,.lijst-status{
  flex:none;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-weight:800;letter-spacing:-.01em;
  text-shadow:0 calc(1*var(--u)) calc(1*var(--u)) rgba(0,0,0,.9);
}
.nu{height:calc(16*var(--u));font-size:calc(12*var(--u));line-height:calc(16*var(--u));color:#fff}
.lijst-status{height:calc(14*var(--u));font-size:calc(11*var(--u));line-height:calc(14*var(--u));color:#e7ae35}
.zoek-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.zoek{
  flex:none;width:100%;height:calc(24*var(--u));margin:calc(2*var(--u)) 0;
  padding:0 calc(8*var(--u));border:calc(1.4*var(--u)) solid #e2a645;border-radius:calc(5*var(--u));
  background:#04111e;color:#fff;font-family:var(--cond);font-weight:800;
  font-size:calc(13*var(--u));
}
.zoek::placeholder{color:rgba(255,255,255,.55)}
.zoek:focus{outline:none;border-color:#f6d27a;box-shadow:0 0 calc(6*var(--u)) rgba(240,190,90,.45)}
.nummers{
  flex:1 1 auto;min-height:0;overflow-y:auto;list-style:none;margin:0;padding:0;
  scrollbar-color:#e2a645 #04111e;
}
.nummer{
  flex:none;display:flex;align-items:center;gap:calc(6*var(--u));
  min-height:calc(44*var(--u));
  padding:calc(3*var(--u)) calc(3*var(--u)) calc(3*var(--u)) calc(2*var(--u));
  border-bottom:calc(1.4*var(--u)) solid rgba(214,164,70,.55);
  box-shadow:0 calc(1*var(--u)) 0 rgba(0,0,0,.5);
}
.nummer:last-child{border-bottom:0;box-shadow:none}
.hoes{
  flex:none;width:calc(46*var(--u));height:calc(44*var(--u));
  position:relative;overflow:hidden;
  border:calc(1.5*var(--u)) solid #e9d6a6;
  box-shadow:0 0 0 calc(1*var(--u)) #3a2208,0 calc(1*var(--u)) calc(3*var(--u)) rgba(0,0,0,.8);
  background:var(--hoes);
}
.hoes::before,.hoes::after{content:"";position:absolute;left:8%;right:8%;height:16%;border-radius:calc(2*var(--u));
  background:var(--strook,#b5161c);opacity:.95}
.hoes::before{top:6%}
.hoes::after{bottom:6%;background:var(--strook2,#e4c46a)}
.hoes svg{position:absolute;left:50%;top:52%;width:62%;height:62%;transform:translate(-50%,-50%);
  filter:drop-shadow(0 calc(1*var(--u)) calc(1*var(--u)) rgba(0,0,0,.6))}
.hoes img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
.hoes-1{--hoes:radial-gradient(circle at 50% 55%,#f4e9cf 0 30%,#8fb3c9 31%,#3e6f93 100%);--strook:#c4161c;--strook2:#1f4f7a}
.hoes-2{--hoes:radial-gradient(circle at 50% 50%,#f2dfb0 0 25%,#d7b06a 60%,#8a5a1c 100%);--strook:#b5161c;--strook2:#3b2a17}
.hoes-3{--hoes:radial-gradient(circle at 50% 50%,#2a1208 0 22%,#b3401a 55%,#6e1c0c 100%);--strook:#e8b04a;--strook2:#e8b04a}
.hoes-4{--hoes:radial-gradient(circle at 50% 50%,#efe3c4 0 26%,#9aa77a 60%,#4c5634 100%);--strook:#b5161c;--strook2:#d9a441}
.hoes-5{--hoes:radial-gradient(circle at 50% 50%,#3a1a0a 0 22%,#e08a2a 55%,#9b3d10 100%);--strook:#1d1d1d;--strook2:#c4161c}
.nummer-tekst{flex:1;min-width:0;text-transform:uppercase;font-weight:900;
  font-size:calc(13.4*var(--u));line-height:1.04;letter-spacing:-.005em;
  text-shadow:0 calc(1*var(--u)) calc(1*var(--u)) rgba(0,0,0,.9)}
.titel{display:block;color:#fff}
.artiest{display:block;color:#e7ae35;margin-top:calc(1*var(--u))}

/* Rode glanzende knop met gouden rand (AANVRAGEN) */
.knop-rood{
  font-family:var(--cond);font-weight:800;color:#fff;cursor:pointer;
  border:calc(1.6*var(--u)) solid #e2a645;
  background:
    linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.06) 48%,rgba(0,0,0,0) 52%),
    linear-gradient(180deg,#c81c23 0%,#a10f16 55%,#6e080c 100%);
  box-shadow:0 0 0 calc(1*var(--u)) #4a1a04,0 calc(2*var(--u)) calc(4*var(--u)) rgba(0,0,0,.7),
    inset 0 0 calc(4*var(--u)) rgba(255,190,90,.35);
  text-shadow:0 calc(1*var(--u)) calc(1.5*var(--u)) rgba(0,0,0,.8);
  transition:filter .15s ease,transform .15s ease,box-shadow .15s ease;
}
.knop-rood:hover,.knop-rood:focus-visible{filter:brightness(1.18);transform:translateY(calc(-1*var(--u)));outline:none;
  box-shadow:0 0 0 calc(1*var(--u)) #4a1a04,0 0 calc(8*var(--u)) rgba(255,140,40,.7),inset 0 0 calc(5*var(--u)) rgba(255,210,120,.5)}
.aanvragen{flex:none;font-weight:900;width:calc(90*var(--u));height:calc(27*var(--u));border-radius:calc(7*var(--u));
  font-size:calc(14.6*var(--u));letter-spacing:0;margin-left:auto}
.aanvragen:disabled{opacity:.5;cursor:default;filter:none;transform:none}
.meer{flex:none;width:100%;height:calc(26*var(--u));margin-top:calc(4*var(--u));
  border-radius:calc(6*var(--u));font-size:calc(13*var(--u));font-weight:900}
.meer[hidden]{display:none}
.lp-toast{
  position:fixed;z-index:40;left:50%;bottom:22px;transform:translateX(-50%);
  max-width:min(92vw,440px);padding:12px 16px;border-radius:8px;text-align:center;
  background:#071a2b;color:#fff;border:2px solid #e2a645;
  font-family:var(--cond);font-weight:800;font-size:16px;line-height:1.25;
  box-shadow:0 10px 28px rgba(0,0,0,.55);
}
.lp-toast.is-error{border-color:#c81c23}
.lp-toast[hidden]{display:none}
#lp-player{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- WhatsApp ---------- */
.whatsapp{
  position:absolute;left:calc(720*var(--u));top:calc(289*var(--u));width:calc(189*var(--u));height:calc(46*var(--u));
  display:flex;align-items:center;gap:calc(6*var(--u));padding:0 0 0 calc(8*var(--u));
  border-radius:calc(23*var(--u));
  border:calc(2.5*var(--u)) solid #d9f7cc;
  background:linear-gradient(180deg,#5fd34f 0%,#2fae2b 45%,#1e8d1d 100%);
  box-shadow:0 0 0 calc(1.5*var(--u)) #145e14,0 calc(3*var(--u)) calc(8*var(--u)) rgba(0,0,0,.6),
    inset 0 calc(2*var(--u)) calc(3*var(--u)) rgba(255,255,255,.35),inset 0 calc(-3*var(--u)) calc(5*var(--u)) rgba(0,60,0,.35);
  color:#fff;font-family:var(--cond);font-weight:800;font-size:calc(21.5*var(--u));letter-spacing:-.01em;
  text-decoration:none;
  text-shadow:0 calc(1*var(--u)) calc(2*var(--u)) rgba(0,0,0,.55);
  cursor:pointer;transition:filter .15s ease,transform .15s ease;
}
.whatsapp::after{ /* tekstballon-staartje */
  content:"";position:absolute;left:calc(14*var(--u));bottom:calc(-11*var(--u));width:calc(16*var(--u));height:calc(13*var(--u));
  background:linear-gradient(180deg,#1f8f1e,#1a7d1a);clip-path:polygon(0 0,100% 0,15% 100%);
  filter:drop-shadow(0 0 calc(1*var(--u)) #b9f0a6);
}
.whatsapp svg{width:calc(37*var(--u));height:calc(37*var(--u));flex:none;fill:#fff;
  filter:drop-shadow(0 calc(1*var(--u)) calc(1*var(--u)) rgba(0,0,0,.4))}
.whatsapp:hover,.whatsapp:focus-visible{filter:brightness(1.12);transform:translateY(calc(-1*var(--u)));outline:none}

/* ---------- Contactvak ---------- */
.contact{
  position:absolute;left:calc(25*var(--u));top:calc(327*var(--u));width:calc(157*var(--u));height:calc(238*var(--u));
  display:flex;flex-direction:column;align-items:center;
  padding:calc(10*var(--u)) calc(6*var(--u)) 0;
  text-align:center;font-weight:800;font-size:calc(13.9*var(--u));line-height:1.1;letter-spacing:-.01em;
  text-shadow:0 calc(1*var(--u)) calc(1.5*var(--u)) rgba(0,0,0,.9);
}
.icoon-rond{
  width:calc(40*var(--u));height:calc(40*var(--u));border-radius:50%;flex:none;
  display:grid;place-items:center;
  border:calc(2*var(--u)) solid #e3ad4e;
  background:radial-gradient(circle at 45% 35%,#e0353a 0%,#b5141b 50%,#740a0e 100%);
  box-shadow:0 0 0 calc(1*var(--u)) #3d1a05,0 calc(2*var(--u)) calc(4*var(--u)) rgba(0,0,0,.7),inset 0 calc(-3*var(--u)) calc(5*var(--u)) rgba(0,0,0,.35);
  transition:filter .15s ease;
}
.icoon-rond:hover{filter:brightness(1.2)}
.icoon-rond svg{width:58%;height:58%;fill:#fff}
.contact hr{width:calc(118*var(--u));border:0;height:calc(1.6*var(--u));margin:calc(12*var(--u)) 0 calc(12*var(--u));
  background:linear-gradient(90deg,rgba(212,160,70,.2),#d8a54a 20%,#f0c66d 50%,#d8a54a 80%,rgba(212,160,70,.2))}
.contact p{margin-top:calc(14*var(--u))}
.contact .geel{color:#f2bd3c;display:block}
.contact .tel{margin-top:calc(2*var(--u))}

/* ---------- STEM OP ONS ---------- */
.stemmen{
  position:absolute;left:calc(741*var(--u));top:calc(355*var(--u));width:calc(176*var(--u));height:calc(243*var(--u));
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(12*var(--u)) calc(10*var(--u));
}
.stem{
  height:calc(46*var(--u));width:100%;
  display:flex;align-items:center;justify-content:center;gap:calc(7*var(--u));
  font-family:var(--cond);font-weight:900;font-size:calc(17.6*var(--u));color:#fff;letter-spacing:-.005em;
  border:calc(2*var(--u)) solid transparent;border-radius:calc(8*var(--u));corner-shape:scoop;
  background:var(--vlak) padding-box,linear-gradient(160deg,#fbe2a0,#c48a2c 35%,#f2c86f 60%,#9a641a) border-box;
  box-shadow:0 0 0 calc(1*var(--u)) rgba(0,0,0,.8),0 calc(2*var(--u)) calc(5*var(--u)) rgba(0,0,0,.6);
  text-shadow:0 calc(1*var(--u)) calc(2*var(--u)) rgba(0,0,0,.9);
  cursor:pointer;transition:filter .15s ease,transform .15s ease;
}
.stem .ster{width:calc(13*var(--u));height:calc(13*var(--u));margin-top:calc(1*var(--u))}
.stem.navy{--vlak:radial-gradient(120% 120% at 50% 35%,#16304a,#0a1c2e 60%,#06111d)}
.stem.rood{--vlak:radial-gradient(120% 120% at 50% 35%,#c8181e,#a3121a 60%,#6f0a0e)}
.stem:hover,.stem:focus-visible{filter:brightness(1.22);transform:scale(1.03);outline:none}

/* ---------- Onderste banner ---------- */
.onderbanner{
  position:absolute;left:calc(243*var(--u));top:calc(600*var(--u));width:calc(447*var(--u));height:calc(76*var(--u));
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:800;font-size:calc(19.8*var(--u));line-height:1.14;letter-spacing:-.01em;
  padding:0 calc(14*var(--u));
  border-radius:calc(10*var(--u));corner-shape:scoop;
  text-shadow:0 calc(1*var(--u)) calc(2*var(--u)) rgba(0,0,0,.9);
}
.onderbanner .ster{position:absolute;bottom:calc(5*var(--u));width:calc(13*var(--u));height:calc(13*var(--u))}
.onderbanner .ster:first-child{left:calc(8*var(--u))}
.onderbanner .ster:last-child{right:calc(8*var(--u))}

/* ---------- Footer ---------- */
.voet-links{
  position:absolute;left:calc(5*var(--u));top:calc(695*var(--u));width:calc(473*var(--u));height:calc(88*var(--u));
  display:flex;align-items:center;gap:calc(16*var(--u));padding:calc(28*var(--u)) 0 0 calc(68*var(--u));
}
.badge{display:inline-grid;place-items:center;font-family:var(--cond);font-weight:800;color:#fff;
  box-shadow:0 calc(2*var(--u)) calc(4*var(--u)) rgba(0,0,0,.6);text-shadow:0 calc(1*var(--u)) calc(1*var(--u)) rgba(0,0,0,.4)}
.sena{width:calc(61*var(--u));height:calc(37*var(--u));font-size:calc(12.5*var(--u));
  background:linear-gradient(180deg,#ea8a45,#d66a2a);border-radius:calc(2*var(--u))}
.buma{width:calc(103*var(--u));height:calc(30*var(--u));font-size:calc(11*var(--u));margin-top:calc(-6*var(--u));
  background:linear-gradient(180deg,#8a1a2a,#6c1020);border-radius:calc(4*var(--u))}
.registratie{color:#e9c24a;font-weight:800;font-size:calc(15.6*var(--u));letter-spacing:.005em;
  text-shadow:0 calc(1*var(--u)) calc(2*var(--u)) rgba(0,0,0,.9)}
.vrienden{
  position:absolute;left:calc(487*var(--u));top:calc(695*var(--u));width:calc(448*var(--u));height:calc(88*var(--u));
  display:flex;align-items:flex-end;
  padding:0 calc(8*var(--u)) calc(6*var(--u));
}
.vrienden h2{
  position:absolute;z-index:1;left:calc(10*var(--u));right:calc(22*var(--u));top:calc(-8*var(--u));height:calc(27*var(--u));
  display:flex;align-items:center;justify-content:center;gap:calc(8*var(--u));
  font-weight:800;font-size:calc(19.5*var(--u));line-height:1;
  border:calc(1.5*var(--u)) solid #e0a845;border-radius:calc(3*var(--u));
  background:linear-gradient(180deg,#c3161d,#9b0f15 60%,#760a0f);
  box-shadow:0 0 0 calc(1*var(--u)) #3a1205,0 calc(2*var(--u)) calc(4*var(--u)) rgba(0,0,0,.6);
  text-shadow:0 calc(1*var(--u)) calc(2*var(--u)) rgba(0,0,0,.8);
}
.vrienden h2 .ster{width:calc(13*var(--u));height:calc(13*var(--u))}
.vrienden-rail{
  --banner:calc(55*var(--u));
  width:100%;height:var(--banner);overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 calc(14*var(--u)),#000 calc(100% - 14*var(--u)),transparent);
  mask-image:linear-gradient(to right,transparent,#000 calc(14*var(--u)),#000 calc(100% - 14*var(--u)),transparent);
}
.vrienden-track{display:flex;width:max-content;height:100%;animation:vrienden-marquee 22s linear infinite}
.vrienden:hover .vrienden-track,.vrienden:focus-within .vrienden-track{animation-play-state:paused}
.vrienden-set{display:flex;height:100%;gap:calc(8*var(--u));padding-right:calc(8*var(--u))}
.vriend{flex:none;display:block;height:100%;padding:calc(2*var(--u));overflow:hidden;
  border:calc(2*var(--u)) solid #c99437;border-radius:calc(2*var(--u));
  background:radial-gradient(120% 120% at 50% 30%,#0c2236,#06131f);
  box-shadow:0 0 0 calc(1*var(--u)) #000,inset 0 0 calc(6*var(--u)) rgba(0,0,0,.8);
  text-decoration:none;
  transition:border-color .15s ease,box-shadow .15s ease}
.vriend img{display:block;height:calc(var(--banner) - 8*var(--u));width:auto}
.vriend:hover,.vriend:focus-visible{border-color:#f6d27a;box-shadow:0 0 0 calc(1*var(--u)) #000,0 0 calc(8*var(--u)) rgba(240,190,90,.55),inset 0 0 calc(6*var(--u)) rgba(0,0,0,.6);outline:none}
@keyframes vrienden-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .vrienden-track{animation:none}
  .vrienden-set[aria-hidden="true"]{display:none}
  .vrienden-rail{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}


/* =====================================================================
   VERSIE 2 – niet meer 'boxed': volle breedte, illustratie gecentreerd
   met zachte fades naar navy. De compositie (.pagina) schaalt tot max
   1261px breed => illustratie max 1400px (bron 1280px, ~1,09× opgeschaald).
   ===================================================================== */
html,body{background:#02101a}
body{display:block}
.buhne{position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;
  overflow-x:clip;isolation:isolate;
  background:#02111c}
/* op hoge schermen de compositie verticaal centreren: navy erboven, houtkleur eronder */
.buhne::before{content:"";flex:1 0 0}
.pagina{width:min(100%,1261px);overflow:visible;background:transparent;flex:none;margin-top:clamp(6px,1.4vw,22px)}
/* muzieknootjes van de illustratie zelf wegpoetsen (we tonen eigen noten bij het logo, zoals in het origineel) */
.achtergrond::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(4.2% 7.5% at 5.6% 6.8%,#010a17 55%,rgba(1,10,23,0) 100%),
    radial-gradient(4.2% 7.5% at 94.6% 7.2%,#010a17 55%,rgba(1,10,23,0) 100%)}
.pagina::after{content:none}
/* navy hemel over de volle breedte */
.pagina::before{left:calc(50% - 50vw);right:auto;width:100vw;top:clamp(-22px,-1.4vw,-6px);height:calc(32% + clamp(6px,1.4vw,22px));
  background:
    linear-gradient(to bottom,#02111c 0%,#02111c 45%,rgba(2,17,28,.8) 68%,rgba(2,17,28,0) 100%)}
/* de illustratie zelf: zachte fade links/rechts (en iets onder) */
.achtergrond{
  --fade-x:linear-gradient(to right,transparent 0,rgba(0,0,0,.18) 2.5%,rgba(0,0,0,.5) 5%,rgba(0,0,0,.85) 8%,#000 10.5%,#000 89.5%,rgba(0,0,0,.85) 92%,rgba(0,0,0,.5) 95%,rgba(0,0,0,.18) 97.5%,transparent 100%);
  -webkit-mask-image:var(--fade-x),linear-gradient(to bottom,#000 0,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:var(--fade-x),linear-gradient(to bottom,#000 0,#000 92%,transparent 100%);
  mask-composite:intersect;
}
/* vervaagde, uitgerekte kopie achter de fades zodat brede schermen niet kaal ogen */
.wijd{position:absolute;z-index:-3;left:calc(50% - 50vw);width:100vw;top:13.6%;height:74.5%;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 78%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 78%,transparent 100%)}
.wijd::before{content:"";position:absolute;inset:-60px;
  background:url("../images/achtergrond.jpg") center/100% 100% no-repeat;
  filter:blur(40px) brightness(.55) saturate(1.1)}
/* footerband over de volle breedte */
.voet-achtergrond{left:calc(50% - 50vw);right:auto;width:100vw}
.rest{flex:1 0 auto;min-height:clamp(12px,1.6vw,28px);width:100%;background:#0d0704}
.onderstuk{position:relative;z-index:2;width:100%;background:#0d0704;display:flex;flex-direction:column;align-items:center;flex:1 0 auto}
.verhaal{width:min(100%,1261px);padding:clamp(26px,3vw,42px) clamp(18px,4vw,48px) 4px;color:#f6f1e6}
.verhaal h2{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:0 0 .75em;
  font-weight:800;font-size:clamp(22px,3.2vw,40px);line-height:1.1;letter-spacing:-.01em;text-align:center;
  text-shadow:0 2px 2px rgba(0,0,0,.85)}
.verhaal h2 .ster{width:22px;height:22px}
.verhaal-tekst{max-width:74ch;margin:0 auto;font-weight:700;font-size:clamp(16px,1.45vw,18.5px);line-height:1.55}
.verhaal-tekst p,
.verhaal-tekst ul,
.verhaal-tekst ol{display:block;margin:0 0 1.25em}
.verhaal-tekst p:last-child,
.verhaal-tekst ul:last-child,
.verhaal-tekst ol:last-child{margin-bottom:0}
.verhaal-tekst li{margin:0 0 .35em}
.verhaal-tekst a{color:#f2bd3c}
.copyright{width:min(100%,1261px);margin:0;padding:20px 16px 28px;text-align:center;color:#e9c24a;
  font-weight:800;font-size:15px;letter-spacing:.01em;text-shadow:0 1px 2px rgba(0,0,0,.9)}

/* ===== Mobiel: elementen onder elkaar, achtergrond als cover ===== */
@media (max-width:600px){
  .pagina{
    width:100%;aspect-ratio:auto;min-height:100vh;
    padding:22px 14px 40px;
    display:flex;flex-direction:column;align-items:center;gap:14px;
    container-type:normal;
  }
  /* jukebox iets ingezoomd, met de boog achter de PLAY-knop */
  .achtergrond{left:0;top:var(--boog,215px);width:100%;bottom:0;aspect-ratio:auto;
    background-size:1040px auto;background-position:50% 0;background-color:#1b0e06;}
  .pagina::before{height:calc(var(--boog,215px) + 60px);
    background:linear-gradient(to bottom,#02121d 0%,#02111c 70%,rgba(2,17,28,0) 100%);}
  .kop,.hero{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
  .pagina::after{border-width:3px}
  .noot{display:none}
  .logo,.ondertitel,.banner,.play{position:relative;inset:auto;left:auto;right:auto;top:auto}
  .logo{font-size:clamp(40px,12.8vw,64px);line-height:1.15;margin-top:-6px;
  }
  .logo span{-webkit-text-stroke:1px #c9141b;filter:drop-shadow(0 0 1px #3a0204) drop-shadow(1px 2px 0 #1e0203) drop-shadow(2px 3px 3px rgba(0,0,0,.8))}
  .ondertitel{font-size:clamp(17px,4.75vw,24px);gap:8px;white-space:nowrap;text-align:center;line-height:1.15;
    text-shadow:1px 2px 2px rgba(0,0,0,.9)}
  .ster{width:16px;height:16px}
  .banner-binnen br{display:none}
  .banner{--hoek:9px;width:100%;height:auto}
  .banner-binnen{--h2:7px;margin:3px;padding:12px 14px;font-size:clamp(16px,4.6vw,19px);line-height:1.2;
    text-shadow:1px 1px 1px rgba(0,0,0,.85)}
  .play{width:min(280px,80%);height:78px;font-size:52px;gap:24px;padding-left:9px;border-radius:14px;border-width:3px;
    margin-top:8px;
    box-shadow:0 0 0 2px #a5560f,0 0 14px 3px rgba(255,150,40,.75),0 0 28px 6px rgba(255,90,20,.35),
      inset 0 0 12px 3px rgba(255,140,40,.55),inset 0 0 3px 1px rgba(255,230,160,.6);
    text-shadow:1px 2px 2px rgba(0,0,0,.75)}
  .play-icoon{width:60px;height:60px;border-width:6px}
  .play:hover,.play:focus-visible{box-shadow:0 0 0 2px #c06a12,0 0 18px 5px rgba(255,170,60,.9),0 0 36px 10px rgba(255,110,30,.45),
      inset 0 0 14px 3px rgba(255,160,60,.65),inset 0 0 3px 1px rgba(255,240,180,.7)}
  /* ---------- Rest van de pagina (mobiel) ---------- */
  .pagina{--u:1px}
  /* vaste stadsachtergrond achter alles (geen kale stroken) */
  .achtergrond{position:fixed;inset:0;top:0;width:auto;height:auto;bottom:0;aspect-ratio:auto;
    background:linear-gradient(rgba(3,10,20,.3),rgba(3,10,20,.45)),url("../images/achtergrond.jpg") 12% 50%/cover no-repeat;}
  .pagina::before{height:260px}
  /* tweede scène (gracht met lichtjes) achter het onderste deel, loopt door tot onder */
  .voet-achtergrond{display:block;z-index:-1;top:640px;bottom:0;
    background:
      linear-gradient(to bottom,#060a12 0,rgba(6,10,18,.2) 160px,rgba(6,10,18,.25) 70%,rgba(6,8,12,.75) 100%),
      url("../images/achtergrond.jpg") 80% 0/auto max(100%,900px) no-repeat #0b0a0c;}
  .play,.kop,.banner{z-index:3}
  .onderbanner br{display:none}
  /* jukebox als blok: boog achter PLAY, afspeellijst in het scherm */
  .jukebox{position:relative;z-index:1;width:calc(100% + 28px);margin:-142px -14px 0;padding:243px 18px 30px}
  .jukebox::before{content:"";position:absolute;inset:0;z-index:-1;
    background:url("../images/achtergrond.jpg") 50% 0/1040px auto no-repeat;
    -webkit-mask-image:linear-gradient(transparent 0,#000 70px,#000 470px,transparent 585px);mask-image:linear-gradient(transparent 0,#000 70px,#000 470px,transparent 585px)}
  .afspeellijst,.whatsapp,.contact,.stemmen,.onderbanner,.voet-links,.vrienden{position:relative;left:auto;top:auto;width:100%;height:auto}
  .afspeellijst{padding:2px 8px}
  .nummer{min-height:60px;padding:6px 2px 6px 3px}
  .hoes{width:48px;height:46px}
  .nummer-tekst{font-size:13.5px}
  .aanvragen{width:96px;height:31px;font-size:14px}
  .afspeellijst{display:flex;flex-direction:column;overflow:hidden;height:auto;max-height:none}
  .nummers{max-height:280px;overflow-y:auto}
  .nummer{flex:none}
  .zoek{height:36px;font-size:15px}
  .nu{height:auto;font-size:13px;line-height:1.2;white-space:normal}
  .lijst-status{height:auto;font-size:12px;line-height:1.2}
  .meer{width:100%;height:36px;font-size:15px}
  .whatsapp{width:220px;height:50px;font-size:21px;margin:4px auto 10px}
  .stemmen{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
  .stem{font-size:16px}
  .onderbanner{padding:16px 22px;font-size:18px}
  .contact{padding:16px 16px 18px;font-size:15px}
  .contact .icoonrij{display:flex;align-items:center;gap:22px}
  .contact hr{display:none}
  .contact p{margin-top:12px}
  .voet{display:flex;flex-direction:column;gap:22px;width:100%}
  .voet-links{flex-wrap:wrap;justify-content:center;padding:16px 10px;gap:12px 14px}
  .buma{margin-top:0}
  .vrienden{padding:26px 8px 8px;gap:5px;margin-top:6px}
  .vrienden h2{top:-12px;left:20px;right:20px;height:30px}
  .vrienden-rail{--banner:52px;height:52px}
  .vriend{height:100%}
  /* versie 2 mobiel: als versie 1, zonder kader */
  .wijd,.rest,.buhne::before{display:none}
  .pagina{width:100%;min-height:100vh}
  .achtergrond{-webkit-mask-image:none;mask-image:none}
  .achtergrond::after{content:none}
  .pagina::before{left:0;width:100%;height:260px}
  .voet-achtergrond{left:0;width:100%}
}
.admin-bar .buhne{min-height:calc(100vh - 32px)}
@media (max-width:782px){
  .admin-bar .buhne{min-height:calc(100vh - 46px)}
}