/* Thema bachelor "Last Call at Bella's" (look branding/bella-latina/03 op het decor van bachelor3/08). SJABLOON van pakket A;
   eigenaar is nu pakket I3. Regels: (1) alleen rol-tokens uit basis.css deel 3 opnieuw zetten, onder [data-thema="bachelor"];
   (2) eigen onderdelen onderaan, klassen .bar-; (3) hoogstens vier letterbestanden (logo + Yellowtail + Bebas Neue + Special Elite);
   lopende tekst staat daarom in de systeemletter, Special Elite alleen voor labels en het barbonnetje;
   (4) neonrood (--bar-red) haalt geen 4,5:1, dus alleen voor grote koppen, randen en gloed, nooit voor gewone tekst. */

[data-thema="bachelor"]{
  --achter:var(--bar-black); --tekst:var(--bar-cream); --tekst-zacht:#D8C7A6;
  --vlak:#24140E; --vlak-tekst:var(--bar-cream); --rand:var(--bar-amber); --schaduw:var(--bar-red);
  --accent:var(--bar-amber); --accent-tekst:var(--bar-black); --accent2:var(--bar-teal); --accent2-tekst:var(--bar-black);
  --donker:var(--bar-mahogany); --donker-tekst:var(--bar-cream); --donker-zacht:#E2D2B2; --donker-vlak:#24140E; --donker-accent:var(--bar-amber);
  --link:var(--bar-amber); --focus:var(--bar-cream);
  --knop:var(--bar-amber); --knop-tekst:var(--bar-black); --knop-rand:var(--bar-cream); --knop-schaduw:var(--bar-red);
  --knop2-tekst:var(--bar-cream); --knop2-rand:var(--bar-cream);
  --letter-kop:"Bebas Neue",Impact,sans-serif; --letter-tekst:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --letter-knop:"Bebas Neue",Impact,sans-serif;
  --letter-accent:"Special Elite",monospace; --letter-nummer:"Bebas Neue",Impact,sans-serif;
  --kop-gewicht:400; --kop-spatie:.01em; --kop-hoogte:.95; --kop-opsz:normal; --kop-hoofdletters:uppercase;
  --rond:10px; --rond-klein:8px;
  /* logo in neon op donker hout */
  --wm-1:#FFE9D6; --wm-2:#FF6B74; --wm-bal1:var(--bar-red); --wm-bal2:var(--bar-teal);
  --logo-plaat:var(--bar-mahogany); --logo-plaat-rand:var(--bar-mahogany); --logo-plaat-pad:6px 12px 8px;
  --tv-kast:#1A0F0B; --tv-schaduw:var(--bar-red);
  --tv-scherm:radial-gradient(circle at 30% 40%,#2E5A3A 0,#173222 60%,#0D1E14 100%);
  --tv-bal:radial-gradient(circle at 35% 30%,#FF7A80,#E2333F 55%,#9E1620); --tv-bal-in:var(--bar-cream); --tv-bal-letter:var(--bar-red); --tv-bal-tekst:var(--bar-black);
  --tv-vak:rgba(243,232,210,.12); --tv-vak-tekst:rgba(243,232,210,.8); --tv-vak-aan:var(--bar-amber); --tv-vak-aan-tekst:var(--bar-black); --tv-bord-letter:var(--bar-cream);
  --tv-wolk:var(--bar-cream); --tv-wolk-tekst:var(--bar-black); --tv-wolk-wie:#9E1620;
  --tv-bingo:var(--bar-amber); --tv-bingo-tekst:var(--bar-black);
  /* de kaart als barbonnetje: zwart op wit */
  --kaart-achter:#FFFFFF; --kaart-rand:var(--bar-black); --kaart-kop:#FFFFFF; --kaart-kop-tekst:var(--bar-black); --kaart-letter:var(--bar-black);
  --kaart-vak:#FFFFFF; --kaart-vak-tekst:var(--bar-black); --kaart-vrij:var(--bar-black); --kaart-vrij-tekst:#FFFFFF; --kaart-naam-letter:"Special Elite",monospace;
}
[data-thema="bachelor"] .logo .wm{text-shadow:0 0 6px rgba(255,107,116,.7),0 0 18px rgba(226,51,63,.45)}
[data-thema="bachelor"] .bkaart-rij span{border:1px dashed var(--bar-black)}

/* ---------- eigen onderdelen bachelor (pakket I3): barklok, "Objection!", "Build a roast", jukebox, "Who wins?", barbonnetje ---------- */

/* kop en voet: donker hout, logo in neon */
[data-thema="bachelor"] .kop{background:var(--bar-black);border-bottom:1px solid rgba(229,154,58,.25)}
[data-thema="bachelor"] .voet{background:#080605;border-top:2px solid var(--bar-mahogany)}
[data-thema="bachelor"] h2{color:var(--tekst)}
[data-thema="bachelor"] .achter-accent{--knop:var(--bar-black);--knop-tekst:var(--bar-cream);--knop-rand:var(--bar-black);--knop-schaduw:var(--bar-red);border-top:0}
[data-thema="bachelor"] .achter-vlak{border-color:rgba(229,154,58,.45);border-width:1px}
[data-thema="bachelor"] .knop{letter-spacing:.04em;font-size:21px;padding:.62em 1.3em .5em}
[data-thema="bachelor"] .knop-groot{font-size:24px}
[data-thema="bachelor"] .knop-klein{font-size:17px;padding:.5em .95em .38em}
[data-thema="bachelor"] .label{font-family:var(--letter-accent);letter-spacing:.08em;font-weight:400}
[data-thema="bachelor"] .lees p em{font-style:normal;font-family:var(--letter-kop);font-size:1.3em;letter-spacing:.03em;color:var(--accent);margin-right:.2em}
[data-thema="bachelor"] .achter-vlak .lees p em,[data-thema="bachelor"] .achter-licht .lees p em{color:var(--bar-amber)}

/* het uithangbord: neon "Bingo Bingley" en "Last Call at Bella's" boven de opening */
.bar-uithang{padding:4px 0 8px;position:relative;overflow:hidden}
.bar-uithang::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 120% at 50% 0,rgba(226,51,63,.22),transparent 70%);pointer-events:none}
.bar-uithang-rij{position:relative;display:flex;justify-content:center}
.bar-neon{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:0 14px;text-align:center}
.bar-neon-woord{font-family:"BB Logo","Bricolage Grotesque",sans-serif;font-weight:800;font-size:34px;letter-spacing:-.02em;line-height:1;color:#FFE9D6;white-space:nowrap;
  text-shadow:0 0 2px #fff,0 0 8px #FF6B74,0 0 18px var(--bar-red),0 0 36px var(--bar-red)}
.bar-neon-w2{animation:bar-flikker 7s infinite}
.bar-neon-bord{font-family:"Yellowtail",cursive;font-size:30px;line-height:1.1;color:#FFD9A0;white-space:nowrap;text-shadow:0 0 6px var(--bar-amber),0 0 16px rgba(229,154,58,.7)}
@keyframes bar-flikker{0%,91%,93.5%,96%,100%{opacity:1}92%,95%{opacity:.35}}
@media (min-width:760px){ .bar-uithang{padding:30px 0 4px} .bar-neon{flex-direction:column;align-items:center;gap:4px} .bar-neon-woord{font-size:78px} .bar-neon-bord{font-size:46px} }
@media (min-width:1080px){ .bar-neon-woord{font-size:96px} }

/* opening: de kroeg erachter (mobiel) of ernaast in een lijst met neongloed (breed) */
[data-thema="bachelor"] .opening{padding-top:0}
[data-thema="bachelor"] .opening h1{max-width:16ch;font-size:clamp(2.6rem,12.2vw,5.6rem);color:var(--bar-cream)}
[data-thema="bachelor"] .opening .lead{color:var(--tekst)}
[data-thema="bachelor"] .opening .label{display:inline-block;background:#1B231E;color:var(--bar-cream);border:5px solid #5A3A22;border-radius:4px;padding:8px 12px 6px;margin:0;font-size:14px;letter-spacing:.04em;text-transform:none;line-height:1.35;transform:rotate(-1.2deg);box-shadow:0 6px 14px rgba(0,0,0,.5)}
[data-thema="bachelor"] .opening .prijs-groot{font-size:52px;color:var(--bar-amber);letter-spacing:.01em}
[data-thema="bachelor"] .opening-beeld{position:relative}
[data-thema="bachelor"] .opening-beeld img{border:0;border-radius:0;max-height:none}
@media (max-width:759px){
  [data-thema="bachelor"] .opening-beeld{margin:0 -16px}
  [data-thema="bachelor"] .opening-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(15,11,10,.15) 0,rgba(15,11,10,0) 30%,rgba(15,11,10,.75) 66%,var(--bar-black) 96%)}
  [data-thema="bachelor"] .opening-tekst{margin-top:-118px;position:relative;z-index:1;gap:12px}
  [data-thema="bachelor"] .opening-prijs{font-size:15px}
  [data-thema="bachelor"] .opening .prijs-groot{font-size:44px}
  [data-thema="bachelor"] .opening h1{font-size:clamp(2.4rem,11.4vw,3.4rem)}
  [data-thema="bachelor"] .opening .lead{font-size:17px;line-height:1.45}
  [data-thema="bachelor"] .kruimelpad li:last-child{min-width:0;flex:1}
  [data-thema="bachelor"] .kruimelpad li:last-child span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  [data-thema="bachelor"] .kruimelpad ol{flex-wrap:nowrap}
  [data-thema="bachelor"] .opening-rij{gap:0}
}
@media (min-width:760px){
  [data-thema="bachelor"] .opening{padding-top:24px}
  [data-thema="bachelor"] .opening-beeld img{border-radius:6px;border:6px solid #2A160F;box-shadow:0 0 0 2px rgba(229,154,58,.55),0 0 40px rgba(226,51,63,.35),0 20px 50px rgba(0,0,0,.6)}
}

/* geruststelling als bierviltjes */
[data-thema="bachelor"] .gerust-lijst li{border-color:rgba(229,154,58,.5);border-width:1px;background:#1E120D}
[data-thema="bachelor"] .balletje{--bal-kleur:var(--bar-red)}
[data-thema="bachelor"] .feiten{border-width:1px;border-color:rgba(229,154,58,.55);box-shadow:8px 8px 0 var(--bar-red)}

/* presentatoren met foto */
[data-thema="bachelor"] .persoon{border-width:1px;border-color:rgba(229,154,58,.5);box-shadow:8px 8px 0 #000}
[data-thema="bachelor"] .persoon-beeld{aspect-ratio:4/3;object-fit:cover;object-position:50% 18%;margin-bottom:6px}
[data-thema="bachelor"] .persoon h3{font-size:clamp(2.4rem,9vw,3.2rem);color:var(--bar-amber)}

/* stemmen en grappen */
[data-thema="bachelor"] .stem{border-width:1px;border-color:rgba(229,154,58,.5)}
[data-thema="bachelor"] .grap .stem{box-shadow:5px 5px 0 var(--bar-red)}
[data-thema="bachelor"] .speel{border-width:2px;border-color:var(--bar-cream)}

/* mini-tv als het tv-toestel boven de bar */
[data-thema="bachelor"] .tv{border:3px solid #3B2016;box-shadow:0 0 0 2px #000,0 0 50px rgba(226,51,63,.25),10px 10px 0 var(--bar-red)}
[data-thema="bachelor"] .tv-bal{background:radial-gradient(circle at 35% 30%,#FF7A80,#E2333F 55%,#9E1620)}
[data-thema="bachelor"] .tv-naam,[data-thema="bachelor"] .tv-bingo{font-family:var(--letter-kop);font-weight:400}

/* ---------- "Objection!" ---------- */
.bar-obj{position:relative;overflow:hidden}
.bar-obj::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 46px);pointer-events:none}
.bar-obj-rij{position:relative;display:grid;gap:30px}
.bar-obj-links .blok-kop{margin-bottom:22px}
.bar-obj h2{font-size:clamp(3.4rem,16vw,6.5rem);color:#FFE9D6;text-shadow:0 0 10px rgba(255,107,116,.8),0 0 28px var(--bar-red)}
.bar-obj-bank{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 18px}
.bar-viltje{width:96px;height:96px;border-radius:50%;background:#EADCC0;border:4px dashed #C9B48E;display:flex;align-items:center;justify-content:center;transform:rotate(-12deg);box-shadow:0 8px 16px rgba(0,0,0,.45);grid-row:span 2}
.bar-viltje span{font-family:var(--letter-accent);color:var(--bar-black);font-size:15px;text-align:center;line-height:1.1;width:70%}
.bar-obj-knop{justify-self:start;font-family:var(--letter-kop);font-size:34px;letter-spacing:.04em;line-height:1;color:var(--bar-cream);background:#A51B26;border:3px solid var(--bar-cream);border-radius:999px;padding:18px 28px 14px;min-height:64px;cursor:pointer;
  box-shadow:0 6px 0 #5E0C13,0 0 30px rgba(226,51,63,.55);transition:transform .08s,box-shadow .08s}
.bar-obj-knop:active{transform:translateY(5px);box-shadow:0 1px 0 #5E0C13,0 0 20px rgba(226,51,63,.5)}
.bar-obj-teller{font-family:var(--letter-accent);color:var(--donker-zacht);font-size:15px}
.bar-obj-dossier{font-family:var(--letter-accent);font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--donker-zacht);margin-bottom:12px}
.bar-obj-lijst{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.bar-zaak{display:grid;grid-template-columns:42px 1fr;gap:12px;background:#24140E;border:1px solid rgba(229,154,58,.5);border-radius:10px;padding:16px;position:relative}
.bar-zaak-nr{width:42px;height:42px;border-radius:50%;background:var(--bar-amber);color:var(--bar-black);font-family:var(--letter-kop);font-size:24px;display:flex;align-items:center;justify-content:center;padding-top:3px}
.bar-zaak-tekst{display:grid;gap:8px;min-width:0}
.bar-regel{font-size:18px;font-weight:600;line-height:1.4}
.bar-regel b{font-family:var(--letter-kop);font-weight:400;font-size:21px;letter-spacing:.04em;color:var(--bar-amber)}
.bar-zaak-stempel{justify-self:start;font-family:var(--letter-kop);font-size:24px;letter-spacing:.12em;color:#FF6B74;border:3px solid #FF6B74;border-radius:6px;padding:4px 10px 0;transform:rotate(-4deg);margin-top:4px}
.bar-zaak-stem{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--donker-zacht)}
.bar-obj-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.bar-obj-actief .bar-zaak.nu{border-color:var(--bar-amber);box-shadow:0 0 0 2px var(--bar-amber),0 0 34px rgba(229,154,58,.35);animation:bar-zaak .45s cubic-bezier(.2,1.4,.4,1)}
.bar-obj-actief .bar-zaak.nu .bar-zaak-stempel{animation:bar-stempel .5s .55s both cubic-bezier(.2,1.8,.4,1)}
.bar-obj-actief .bar-zaak:not(.nu){opacity:.55}
.bar-obj.klap .bar-viltje{animation:bar-klap .4s}
@keyframes bar-zaak{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}
@keyframes bar-stempel{from{transform:rotate(-4deg) scale(2.2);opacity:0}to{transform:rotate(-4deg);opacity:1}}
@keyframes bar-klap{0%,100%{transform:rotate(-12deg)}30%{transform:rotate(8deg) scale(1.08)}60%{transform:rotate(-18deg)}}
@media (min-width:760px){
  .bar-obj-rij{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
  .bar-viltje{width:130px;height:130px}
  .bar-obj-knop{font-size:44px;padding:22px 40px 16px}
}

/* ---------- "Build a roast" ---------- */
.bar-roast-vragen{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.bar-roast-vraag{background:var(--achter);border:1px solid rgba(229,154,58,.5);border-radius:12px;padding:18px;display:grid;gap:14px;align-content:start}
.bar-roast-kop{display:flex;gap:12px;align-items:baseline}
.bar-roast-nr{font-family:var(--letter-accent);color:var(--bar-amber);font-size:16px;flex:none}
.bar-roast-vraag h3{font-family:var(--letter-tekst);text-transform:none;font-weight:800;letter-spacing:0;font-size:20px;line-height:1.25}
.bar-roast-keus{display:flex;gap:10px}
.bar-jn{min-width:88px;min-height:48px;border-radius:999px;border:2px solid var(--bar-cream);background:transparent;color:var(--bar-cream);font-family:var(--letter-kop);font-size:24px;letter-spacing:.06em;padding:8px 18px 4px;cursor:pointer}
.bar-jn[aria-pressed="true"][data-antwoord="ja"]{background:var(--bar-amber);border-color:var(--bar-amber);color:var(--bar-black)}
.bar-jn[aria-pressed="true"][data-antwoord="nee"]{background:var(--bar-cream);color:var(--bar-black)}
.bar-roast-uit:empty{display:none}
.bar-roast-uit .stem{animation:bar-zaak .4s cubic-bezier(.2,1.4,.4,1);border-color:var(--bar-amber);background:#24140E}
.bar-roast-nee{font-family:var(--letter-accent);color:var(--tekst-zacht);font-size:16px}
.bar-roast-bron{margin-top:28px;display:grid;gap:14px}
.bar-roast-bronkop{font-size:clamp(1.6rem,6vw,2.2rem)}
@media (min-width:760px){ .bar-roast-vragen{grid-template-columns:repeat(3,1fr);gap:22px} .bar-roast-vraag{padding:24px} }

/* ---------- "Who wins?": de kaart als bon van de bar ---------- */
.bar-winnaar-rij{display:grid;gap:34px}
.bar-schakel{display:inline-flex;flex-wrap:wrap;gap:6px;background:#24140E;border:1px solid rgba(229,154,58,.5);border-radius:999px;padding:5px;margin-top:22px!important;max-width:100%}
.bar-schakel button{min-height:46px;border:0;border-radius:999px;background:transparent;color:var(--bar-cream);font-weight:800;font-size:16px;padding:8px 16px;cursor:pointer}
.bar-schakel button[aria-checked="true"]{background:var(--bar-amber);color:var(--bar-black)}
.bar-winnaar .knop{margin-top:18px}
.bar-bon{justify-self:center;width:100%;max-width:340px;background:#FFFDF6;color:var(--bar-black);padding:22px 20px 34px;font-family:var(--letter-accent);transform:rotate(1.5deg);box-shadow:0 18px 40px rgba(0,0,0,.55);position:relative;
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 10px repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 10px repeat-x}
.bar-bon-zaak{text-align:center;font-family:"Yellowtail",cursive;font-size:30px;color:#9E1620;line-height:1}
.bar-bon-kop{text-align:center;border-bottom:2px dashed var(--bar-black);padding:6px 0 10px;margin-bottom:12px;font-size:17px}
.bar-bon-kop b{font-size:22px}
.bar-bon-raster{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.bar-bon-raster span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:1px dashed var(--bar-black);font-size:17px;border-radius:50%}
.bar-bon-raster .aan{background:var(--bar-black);color:#FFFDF6;border-style:solid}
.bar-bon-raster .nu{background:#9E1620;border-color:#9E1620;transform:scale(1.12)}
.bar-bon-uit{min-height:1.4em;margin-top:14px;text-align:center;font-size:17px;color:#7A0F18}
.bar-gewonnen .bar-bon-uit{font-family:var(--letter-kop);font-size:26px;letter-spacing:.04em;border:3px solid #7A0F18;border-radius:6px;padding:6px 6px 2px;transform:rotate(-3deg);animation:bar-stempel .45s cubic-bezier(.2,1.8,.4,1)}
@media (min-width:760px){ .bar-winnaar-rij{grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:60px;align-items:center} .bar-bon{max-width:380px} }

/* ---------- "How the night goes" op het krijtbord ---------- */
.bar-krijt-bord{position:relative;background:#1B231E;border-radius:6px;overflow:hidden;margin:0 -16px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.bar-krijt-beeld{position:absolute;inset:0}
.bar-krijt-beeld img{width:100%;height:100%;object-fit:cover}
.bar-krijt-in{position:relative;padding:76px 34px 96px;color:#F6F1E4}
.bar-krijt-in h2{font-family:var(--letter-accent);text-transform:none;font-size:clamp(2rem,8vw,3.2rem);letter-spacing:0;line-height:1.1;margin-bottom:18px;color:#FFFFFF;text-shadow:0 0 1px rgba(255,255,255,.6)}
.bar-krijt-lijst{margin:0;padding:0;list-style:none;display:grid;gap:14px;counter-reset:krijt}
.bar-krijt-lijst li{font-size:17px;line-height:1.45;color:#F6F1E4;padding-left:34px;position:relative}
.bar-krijt-lijst li::before{counter-increment:krijt;content:counter(krijt);position:absolute;left:0;top:0;font-family:var(--letter-kop);font-size:24px;line-height:1;color:var(--bar-amber)}
.bar-krijt-lijst li:last-child::before{content:"⏱";font-size:18px}
.bar-krijt-lijst b{font-family:var(--letter-accent);font-weight:400;color:#FFE2B0}
@media (min-width:760px){
  .bar-krijt-bord{margin:0;aspect-ratio:3/2}
  .bar-krijt-in{position:absolute;inset:13% 23% 14% 23%;padding:0;overflow:auto}
  .bar-krijt-lijst li{font-size:16px}
}
@media (min-width:1080px){ .bar-krijt-lijst{gap:12px} .bar-krijt-lijst li{font-size:17px} }

/* ---------- de kaart als barbonnetje ---------- */
[data-thema="bachelor"] .bkaart{border-radius:2px;border:0;box-shadow:0 18px 40px rgba(0,0,0,.55);transform:rotate(-1deg);font-family:var(--letter-accent)}
[data-thema="bachelor"] .bkaart-kop{border-bottom:2px dashed var(--bar-black);margin:0 14px;padding:16px 4px 10px;display:flex;align-items:baseline;justify-content:center;gap:10px}
[data-thema="bachelor"] .bkaart-show{font-family:var(--letter-accent);text-transform:none;letter-spacing:.02em;font-size:18px;font-weight:400}
[data-thema="bachelor"] .bkaart-naam{font-weight:400;font-size:clamp(28px,8vw,38px)}
[data-thema="bachelor"] .bkaart-rij span{border-radius:50%;font-family:var(--letter-kop);font-weight:400}
[data-thema="bachelor"] .bkaart-rij .vrij{font-family:var(--letter-accent);font-size:12px;letter-spacing:0;text-transform:none}
[data-thema="bachelor"] .bkaart-letters span{font-weight:400}
@media print{ [data-thema="bachelor"] .bkaart{transform:none} }

/* ---------- de jukebox ---------- */
.bar-jukebox-rij{display:grid;gap:30px}
.bar-jb{position:relative;display:grid}
.bar-jb-beeld img{width:100%;border-radius:10px;transition:box-shadow .4s}
.bar-jb[data-actief="1"] img{box-shadow:0 0 50px rgba(229,154,58,.55)}
.bar-jb[data-actief="2"] img{box-shadow:0 0 50px rgba(226,51,63,.6)}
.bar-jb[data-actief="3"] img{box-shadow:0 0 50px rgba(43,168,156,.6)}
.bar-jb[data-actief="4"] img{box-shadow:0 0 60px rgba(255,233,214,.55)}
.bar-jb-strook{list-style:none;margin:-36px 12px 0;padding:0;display:grid;gap:8px;position:relative}
.bar-jb-set{width:100%;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;min-height:52px;text-align:left;background:#FFF6E2;color:var(--bar-black);border:0;border-top:4px solid var(--bar-red);border-bottom:4px solid var(--bar-red);padding:6px 14px;font-family:var(--letter-accent);font-size:17px;line-height:1.2;cursor:pointer;box-shadow:0 6px 14px rgba(0,0,0,.45)}
.bar-jb-set:disabled{cursor:default}
.bar-jb-nr{font-family:var(--letter-kop);font-size:26px;color:#9E1620;padding-top:3px}
.bar-jb-set .eq{height:20px;gap:3px;visibility:hidden}
.bar-jb-set .eq i{width:4px;background:#9E1620}
.bar-jb-set[aria-pressed="true"]{background:#FFE2B0;outline:3px solid var(--bar-amber);outline-offset:0}
.bar-jb-set[aria-pressed="true"] .eq{visibility:visible}
@media (min-width:760px){ .bar-jukebox-rij{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:60px;align-items:center} .bar-jb-strook{margin:-60px 40px 0} }

/* ---------- last call ---------- */
.bar-lastcall-rij{display:grid;gap:30px;align-items:center}
.bar-lastcall-klok{display:grid;justify-items:center;gap:6px;width:180px;justify-self:center}
.bar-lastcall-klok svg{width:180px;filter:drop-shadow(0 0 14px rgba(226,51,63,.75))}
.bar-lastcall-klok span{font-family:var(--letter-kop);font-size:34px;color:#FFE9D6;text-shadow:0 0 10px var(--bar-red);animation:bar-flikker 5s infinite}
@media (min-width:760px){ .bar-lastcall-rij{grid-template-columns:240px 1fr;gap:60px} .bar-lastcall-klok,.bar-lastcall-klok svg{width:240px} }

/* klokplaat (gedeeld door de barklok en last call) */
.bar-klok-plaat{fill:#1A0F0B;stroke:#FF6B74;stroke-width:3}
.bar-klok-streepjes path{stroke:var(--bar-cream);stroke-width:3;stroke-linecap:round}
.bar-klok-uur{stroke:var(--bar-cream);stroke-width:5;stroke-linecap:round}
.bar-klok-min{stroke:var(--bar-amber);stroke-width:3;stroke-linecap:round}
.bar-klok-as{fill:var(--bar-red)}

/* ---------- de barklok die meeloopt met scrollen (js/bachelor-uithangbord.js) ---------- */
.bar-klok{position:fixed;z-index:25;pointer-events:none;opacity:0;transition:opacity .3s}
html:not(.js) .bar-klok{display:none}
.bar-klok[data-zichtbaar]{opacity:1}
.bar-klok{top:0;left:0;right:0}
.bar-klok-balk{height:4px;background:rgba(15,11,10,.6)}
.bar-klok-balk i{display:block;height:100%;background:linear-gradient(90deg,var(--bar-amber),var(--bar-red));transform-origin:left;transform:scaleX(var(--p,0));box-shadow:0 0 10px var(--bar-red)}
.bar-klok-rond{display:none}
.bar-klok-tekst{position:absolute;right:10px;top:8px;display:flex;gap:6px;align-items:baseline;background:rgba(15,11,10,.88);border:1px solid rgba(229,154,58,.6);border-radius:999px;padding:4px 10px 2px;color:var(--bar-cream)}
.bar-klok-tekst b{font-family:var(--letter-kop);font-weight:400;font-size:18px;letter-spacing:.03em;color:#FFE9D6}
.bar-klok-tekst span{font-family:var(--letter-accent);font-size:12px;color:var(--bar-amber)}
.bar-klok[data-lastcall] .bar-klok-tekst{border-color:#FF6B74;box-shadow:0 0 14px rgba(226,51,63,.6)}
@media (min-width:1360px){
  .bar-klok{top:auto;right:auto;left:22px;bottom:22px;display:grid;justify-items:center;gap:6px;width:112px}
  .bar-klok-balk{display:none}
  .bar-klok-rond{display:block;width:96px;filter:drop-shadow(0 0 10px rgba(226,51,63,.6))}
  .bar-klok-tekst{position:static;flex-direction:column;align-items:center;gap:0;padding:6px 12px 4px;border-radius:12px}
  .bar-klok-uur,.bar-klok-min{transition:transform .3s}
}

/* fijnslijpen na de eerste schermafdrukken */
[data-thema="bachelor"] .vraag summary{font-family:var(--letter-tekst);text-transform:none;font-weight:800;font-size:18px;letter-spacing:0}
[data-thema="bachelor"] .vraag{border-width:1px;border-color:rgba(229,154,58,.5)}
@media (min-width:1080px){
  [data-thema="bachelor"] .gerust-lijst{grid-template-columns:repeat(5,1fr)}
  [data-thema="bachelor"] .opening.met-beeld .opening-rij{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:48px}
  [data-thema="bachelor"] .opening h1{font-size:clamp(3.6rem,5.4vw,5rem)}
}
.bar-zaak.dicht{grid-template-columns:42px 1fr;align-items:center;opacity:.6;border-style:dashed}
.bar-zaak.dicht .bar-zaak-tekst{display:none}
.bar-zaak.dicht::after{content:"Sealed";font-family:var(--letter-accent);color:var(--donker-zacht);font-size:16px;letter-spacing:.08em}
.bar-obj-actief .bar-zaak.dicht{opacity:.5}
/* barklok op smalle schermen: één dunne plank bovenaan met de tijd links, de voortgang eronder */
@media (max-width:1359px){
  .bar-klok-tekst{position:static;border:0;border-radius:0;background:rgba(15,11,10,.94);padding:3px 16px 1px;height:24px;align-items:center;border-bottom:1px solid rgba(229,154,58,.35)}
  .bar-klok-tekst b{font-size:16px}
  .bar-klok[data-lastcall] .bar-klok-tekst{box-shadow:none}
  .bar-klok{display:flex;flex-direction:column-reverse}
}
.bar-uithang::before{background:radial-gradient(closest-side,rgba(226,51,63,.2),transparent)}
@media (min-width:760px){ .bar-uithang{padding:18px 0 0} .bar-neon-woord{font-size:64px} .bar-neon-bord{font-size:38px} }
@media (min-width:1080px){
  .bar-neon-woord{font-size:76px}
  [data-thema="bachelor"] .opening h1{max-width:20ch;font-size:clamp(3.4rem,4.8vw,4.6rem)}
  [data-thema="bachelor"] .opening-tekst{gap:16px}
}