/* Die Jukebox auf /jukebox/ – im Stil der amerikanischen Automaten der Fünfziger:
   Im Musik-Ungestört-Kleid: Elfenbeinlack, Musik-Rot, Chrom, leuchtender Bogen, Blubberröhren, Münzschlitz. */
.jb{--kirsch:#DD2133; --kirsch-tief:#9E1223; --elfenbein:#FBF3E1; --butter:#FFD166; --mint:#3CC7B7; --creme-hell:#FFF6E0;
  --chrom:linear-gradient(180deg,#ffffff 0%,#d9dde1 18%,#8f979e 45%,#eef1f3 62%,#9aa3aa 82%,#f5f7f8 100%);
  display:grid; grid-template-columns:minmax(0,520px) minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:start; margin-top:clamp(28px,4vw,44px)}

/* ---------- Gehäuse: bauchig, Elfenbeinlack, Chromrand, Leuchtbogen ---------- */
.jb-gehaeuse{position:relative; isolation:isolate; padding:30px 48px 0; margin-top:6px;
  border-radius:50% 50% 38px 38px / 210px 210px 38px 38px;
  background:
    linear-gradient(90deg,rgba(60,30,10,.34) 0%,rgba(60,30,10,.08) 9%,rgba(255,255,255,.55) 24%,rgba(255,255,255,0) 38%,rgba(0,0,0,0) 70%,rgba(255,255,255,.18) 84%,rgba(60,30,10,.36) 100%),
    linear-gradient(180deg,var(--elfenbein) 0%,#f1dfba 55%,#e2c794 100%);
  box-shadow:0 0 0 3px #eef1f3, 0 0 0 5px #8f979e, 0 0 0 7px #4d5358,
    inset 0 3px 0 rgba(255,255,255,.9), inset 0 -18px 30px rgba(120,70,20,.25),
    0 60px 80px -44px rgba(33,26,20,.95), 0 20px 40px -30px rgba(33,26,20,.6)}
/* Leuchtbogen */
.jb-gehaeuse::before{content:""; position:absolute; z-index:-1; inset:13px 15px 118px; border-radius:50% 50% 22px 22px / 196px 196px 22px 22px;
  background:linear-gradient(180deg,#fff3cf 0%,#ffc36b 18%,#ff8a3d 40%,var(--rot,#E34554) 66%,var(--kirsch-tief) 100%);
  box-shadow:0 0 22px rgba(255,160,80,.75), inset 0 0 12px rgba(255,255,255,.7);
  animation:jb-bogen 6s ease-in-out infinite}
@keyframes jb-bogen{50%{filter:hue-rotate(-18deg) saturate(1.25) brightness(1.08)}}
/* Rote Lackfront mit Glanz */
.jb-gehaeuse::after{content:""; position:absolute; z-index:-1; inset:29px 31px 132px; border-radius:50% 50% 14px 14px / 180px 180px 14px 14px;
  background:
    radial-gradient(60% 34% at 34% 12%,rgba(255,255,255,.42),rgba(255,255,255,0) 70%),
    linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,0) 16%,rgba(255,255,255,.14) 30%,rgba(0,0,0,0) 44%,rgba(0,0,0,0) 80%,rgba(0,0,0,.35)),
    radial-gradient(120% 70% at 50% 16%,#f0505f 0%,var(--kirsch) 42%,var(--kirsch-tief) 100%);
  box-shadow:0 0 0 4px #eef1f3, 0 0 0 6px #6f767c, inset 0 -40px 60px rgba(0,0,0,.35)}
.jb-gehaeuse > *{position:relative}

/* Krone: das Musik-Ungestört-Schild als beleuchtetes Oval */
.jb-krone{display:block; width:62%; max-width:250px; margin:18px auto 14px; padding:5px; border-radius:50%;
  background:linear-gradient(180deg,#ffffff,#c9ced2 40%,#8f979e 60%,#f5f7f8);
  box-shadow:0 0 0 2px #4d5358, 0 6px 14px -6px #000, 0 0 30px rgba(255,214,150,.75)}
.jb-krone img{display:block; width:100%; height:auto; border-radius:50%; background:#F2E3C4}
.jb-krone::after{content:""; position:absolute; inset:5px; border-radius:50%; pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%)}
.jb.spielt .jb-krone{animation:jb-neon 2.4s ease-in-out infinite}
@keyframes jb-neon{50%{box-shadow:0 0 0 2px #4d5358, 0 6px 14px -6px #000, 0 0 52px rgba(255,214,150,1)}}

/* Blubberröhren im Leuchtbogen */
.jb-gehaeuse > .jb-roehre{position:absolute; top:190px; bottom:150px; width:14px; border-radius:10px; overflow:hidden;
  background:linear-gradient(180deg,var(--butter),#ff8a3d 35%,var(--kirsch) 60%,var(--mint));
  box-shadow:inset 3px 0 4px rgba(255,255,255,.75), inset -3px 0 5px rgba(0,0,0,.35), 0 0 14px rgba(255,160,80,.7), 0 0 0 2px #eef1f3, 0 0 0 4px #6f767c}
.jb-roehre.links{left:15px} .jb-roehre.rechts{right:15px}
.jb-roehre i{position:absolute; left:4px; bottom:-10px; width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.85); box-shadow:inset -1px -1px 1px rgba(0,0,0,.2); animation:jb-blase 5s linear infinite}
.jb-roehre i:nth-child(2){animation-delay:-.8s; left:5px; width:4px; height:4px}
.jb-roehre i:nth-child(3){animation-delay:-1.7s}
.jb-roehre i:nth-child(4){animation-delay:-2.5s; left:4px; width:5px; height:5px}
.jb-roehre i:nth-child(5){animation-delay:-3.4s; left:3px}
.jb-roehre i:nth-child(6){animation-delay:-4.2s; width:4px; height:4px; left:6px}
.jb-roehre.rechts i{animation-duration:5.6s}
@keyframes jb-blase{to{transform:translateY(-700px)}}
.jb.spielt .jb-roehre i{animation-duration:2.6s}

/* Fenster mit Plattenteller */
.jb-fenster{margin:0 auto; width:100%; aspect-ratio:1.4; border-radius:170px 170px 14px 14px; overflow:hidden;
  background:radial-gradient(circle at 50% 28%,#4a3a2a,#140f0b 72%);
  box-shadow:inset 0 0 0 5px #eef1f3, inset 0 0 0 8px #8f979e, inset 0 0 0 10px #4d5358, inset 0 14px 34px rgba(0,0,0,.8), 0 10px 20px -8px rgba(0,0,0,.6)}
.jb-teller{position:absolute; left:50%; top:57%; width:58%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  background:#1c1c1c; box-shadow:0 0 0 7px #b9bfc4, 0 0 0 9px #6f767c, 0 18px 30px -10px #000}
.jb-platte{position:absolute; inset:3%; border-radius:50%;
  background:conic-gradient(from 20deg,rgba(255,255,255,.08),transparent 12%,transparent 45%,rgba(255,255,255,.07) 55%,transparent 65%),
    repeating-radial-gradient(circle,#0e0e0e 0 2px,#1d1d1d 2px 3px);
  transition:transform .5s ease, opacity .4s ease}
.jb-platte::after{content:""; position:absolute; left:50%; top:50%; width:5%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:#e9dcc0}
.jb-label{position:absolute; inset:32%; border-radius:50%; background:var(--kirsch) center/cover no-repeat; box-shadow:0 0 0 2px #000}
.jb.spielt .jb-platte{animation:jb-dreh 1.8s linear infinite}
@keyframes jb-dreh{to{transform:rotate(360deg)}}
.jb.wechselt .jb-platte{transform:translateY(-120%) scale(.8); opacity:0}
.jb-arm{position:absolute; right:10%; top:17%; width:8px; height:46%; background:linear-gradient(90deg,#f4f4f4,#8c8c8c); border-radius:4px;
  transform-origin:50% 6px; transform:rotate(-8deg); transition:transform .6s ease}
.jb-arm::before{content:""; position:absolute; top:-9px; left:-9px; width:26px; height:26px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#fff,#9aa0a6 60%,#5f666c)}
.jb-arm::after{content:""; position:absolute; bottom:-4px; left:-4px; width:16px; height:20px; border-radius:3px; background:#c9ced2}
.jb.spielt .jb-arm{transform:rotate(22deg)}
.jb-glanz{position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(70% 45% at 30% 8%,rgba(255,255,255,.38),rgba(255,255,255,0) 60%),
    linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.05) 28%,transparent 40%,transparent 70%,rgba(255,255,255,.12) 82%,transparent 90%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}

/* Anzeige */
.jb-anzeige{margin:14px auto 0; padding:10px 14px; border-radius:10px; background:#140f0b; min-height:3.3em; display:flex; align-items:center; gap:12px;
  box-shadow:inset 0 0 0 2px #3a2a1a, 0 0 0 3px #cfd4d8, 0 0 0 5px #6f767c; font-weight:700; font-variant-numeric:tabular-nums}
.jb-code{font-size:1.55rem; letter-spacing:.06em; min-width:2.2em; color:#ff9a3d; text-shadow:0 0 6px rgba(255,140,40,.9),0 0 16px rgba(255,120,30,.5)}
.jb-titel{font-size:.86rem; line-height:1.3; color:#ffe9c2}

/* Titelstreifen wie gedruckte Kärtchen */
.jb-streifen{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:14px; padding:8px; border-radius:8px;
  background:#e9dcc0; box-shadow:inset 0 0 0 3px #cfd4d8, inset 0 0 0 5px #6f767c}
.jb-streifen button{display:flex; gap:8px; align-items:center; text-align:left; padding:6px 8px 6px 0; border:0; border-radius:3px; cursor:pointer;
  background:var(--creme-hell); color:#171717; font:inherit; font-size:.72rem; line-height:1.2;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.12), inset 0 0 0 1px rgba(125,10,29,.18); transition:transform .12s ease}
.jb-streifen button:hover,.jb-streifen button:focus-visible{transform:translateY(-1px); background:#fff; outline:2px solid var(--butter)}
.jb-streifen b{flex:none; align-self:stretch; display:grid; place-items:center; width:2.5em; margin:-6px 2px -6px 0; border-radius:3px 0 0 3px;
  background:var(--kirsch); color:#fff; font-size:.78rem; letter-spacing:.03em}
.jb-streifen span{overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.jb-streifen small{display:block; color:#6b5a4a; text-transform:uppercase; letter-spacing:.06em; font-size:.62rem}

/* Münzschlitz – oben unter dem Schild, gleich im Blick */
.jb-muenze{display:flex; align-items:center; justify-content:center; gap:14px; margin:0 auto 16px; width:max-content; max-width:100%;
  padding:9px 16px 9px 12px; border-radius:99px; color:#fff3cf; font-size:.9rem; font-weight:700; line-height:1.15;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.2)); box-shadow:inset 0 0 0 1px rgba(255,243,207,.25)}
.jb-muenze small{display:block; font-weight:400; font-size:.74rem; opacity:.8}
.jb-muenze .jb-schlitz{animation:jb-lock 2.6s ease-in-out infinite}
.jb-schlitz{position:relative; flex:none; width:64px; height:40px; border:0; border-radius:8px; cursor:pointer; color:transparent; font:inherit;
  background:var(--chrom); box-shadow:0 3px 0 #4d5358, 0 6px 12px -6px #000}
.jb-schlitz::before{content:""; position:absolute; left:50%; top:50%; width:6px; height:24px; transform:translate(-50%,-50%); border-radius:3px; background:#1a1a1a; box-shadow:inset 0 2px 3px #000}
.jb-schlitz::after{content:"25\00A2"; position:absolute; left:50%; top:-26px; transform:translateX(-50%); width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font-size:.62rem; font-weight:700; color:#6b5a1a;
  background:radial-gradient(circle at 35% 30%,#fff7c8,#e6c35c 55%,#a8842a); box-shadow:0 2px 4px rgba(0,0,0,.4); opacity:0; transition:opacity .15s}
.jb-schlitz:hover::after,.jb-schlitz:focus-visible::after{opacity:1}
.jb-schlitz.faellt::after{opacity:1; animation:jb-muenze .6s ease-in forwards}
@keyframes jb-muenze{70%{transform:translate(-50%,22px) scaleX(.2)} 100%{transform:translate(-50%,30px) scaleX(.1); opacity:0}}
.jb-schlitz:active{transform:translateY(2px); box-shadow:0 1px 0 #4d5358}

/* Chromgitter mit Medaillon */
.jb-gitter{height:74px; margin:14px -18px 0; border-radius:10px 10px 0 0; overflow:hidden;
  background:repeating-linear-gradient(90deg,#eef1f3 0 3px,#9aa3aa 3px 4px,#3a0a12 4px 10px);
  box-shadow:inset 0 0 0 4px #cfd4d8, inset 0 10px 18px rgba(0,0,0,.45)}
.jb-medaillon{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; font-weight:700; font-size:.95rem; letter-spacing:.04em; color:var(--kirsch-tief);
  background:radial-gradient(circle at 35% 30%,#fff,#dfe3e6 45%,#8f979e); box-shadow:0 0 0 3px #6f767c, 0 4px 10px rgba(0,0,0,.5)}
.jb-fuesse{display:flex; justify-content:space-between; height:14px; margin:0 -30px}
.jb-fuesse i{width:70px; height:14px; border-radius:0 0 12px 12px; background:var(--chrom); box-shadow:0 6px 10px -6px #000}

/* ---------- Bedienpult im Diner-Stil ---------- */
.jb-pult{position:relative; overflow:hidden; background:var(--creme-hoch); border:1px solid var(--gravur); border-radius:18px;
  padding:clamp(30px,3vw,36px) clamp(18px,2.4vw,26px) clamp(18px,2.4vw,26px)}
.jb-pult::before{content:""; position:absolute; left:0; right:0; top:0; height:14px;
  background:conic-gradient(#171717 25%,#fff6e0 0 50%,#171717 0 75%,#fff6e0 0) 0 0/14px 14px}
.jb-pult h2{font-size:1.15rem; margin:0 0 .7em}
.jb-tasten{display:grid; grid-template-columns:repeat(8,1fr); gap:10px}
.jb-tasten.zahlen{grid-template-columns:repeat(10,1fr); margin-top:12px; gap:8px}
.jb-taste{aspect-ratio:1; border:0; border-radius:50%; cursor:pointer; font:inherit; font-weight:700; font-size:1rem; color:#171717;
  background:radial-gradient(circle at 35% 30%,#fffdf8,#f1e3c3 60%,#d9c59a);
  box-shadow:0 0 0 3px #cfd4d8, 0 0 0 4px #7a8187, 0 4px 0 4px #5f666c, 0 8px 12px 2px rgba(0,0,0,.25);
  transition:transform .06s, box-shadow .06s}
.jb-tasten.zahlen .jb-taste{background:radial-gradient(circle at 35% 30%,#ffffff,#e8ecef 60%,#b8bfc5)}
.jb-taste:active{transform:translateY(3px); box-shadow:0 0 0 3px #cfd4d8, 0 0 0 4px #7a8187, 0 1px 0 4px #5f666c}
.jb-taste[aria-pressed="true"]{background:radial-gradient(circle at 35% 30%,#ff7a8a,var(--kirsch) 60%,var(--kirsch-tief)); color:#fff}
.jb-taste:disabled{opacity:.35; cursor:default}
.jb-stimmung{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.jb-stimmung button{border:0; border-radius:99px; padding:9px 16px; font:inherit; font-weight:700; font-size:.88rem; cursor:pointer; color:#171717;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18), 0 2px 0 rgba(0,0,0,.12); transition:transform .1s ease}
.jb-stimmung button:hover{transform:translateY(-2px)}
.jb-stimmung button[data-s="regen"]{background:#9fd8e4}
.jb-stimmung button[data-s="party"]{background:var(--butter)}
.jb-stimmung button[data-s="sonntag"]{background:#f7d9c4}
.jb-stimmung button[data-s="laut"]{background:#171717; color:#fff6e0}
.jb-stimmung button[data-s="nacht"]{background:#3b3561; color:#fff6e0}
.jb-stimmung button.zufall{background:var(--kirsch); color:#fff}
.jb-zeile{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:26px}
.jb-ton{border:1px solid var(--gravur-stark); background:transparent; border-radius:99px; padding:5px 12px; font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; color:var(--dunkel)}
.jb-jetzt{margin-top:22px; display:grid; grid-template-columns:110px 1fr; gap:16px; align-items:start; padding:14px; border-radius:12px; background:#fffaf0;
  box-shadow:inset 0 0 0 1px var(--gravur)}
.jb-jetzt[hidden]{display:none}
.jb-jetzt img{width:110px; height:110px; border-radius:6px; object-fit:cover; box-shadow:0 10px 22px -12px rgba(33,26,20,.8); background:var(--sand); transform:rotate(-2deg)}
.jb-jetzt h3{margin:0 0 .15em; font-size:1.25rem; line-height:1.2}
.jb-jetzt .wer{margin:0; font-weight:700; color:var(--rot-text); font-size:.9rem}
.jb-jetzt .satz{margin:.5em 0 .8em; font-size:.92rem; color:var(--grau); line-height:1.45}
.jb-jetzt .links{display:flex; flex-wrap:wrap; gap:8px 14px; font-size:.88rem; font-weight:700; margin:0}
.jb-hinweis{font-size:.85rem; color:var(--grau); margin-top:18px}

@media (max-width:899px){
  .jb{grid-template-columns:1fr}
  .jb-gehaeuse{max-width:520px; margin:0 auto; width:100%}
  .jb-tasten{grid-template-columns:repeat(5,1fr); gap:14px}
  .jb-tasten.zahlen{grid-template-columns:repeat(5,1fr); gap:14px}
}
@media (max-width:480px){
  .jb-gehaeuse{padding:24px 30px 0}
  .jb-gehaeuse::before{inset:10px 16px 60px}
  .jb-gehaeuse > .jb-roehre{width:12px; top:100px; bottom:240px}
  .jb-roehre.links{left:3px} .jb-roehre.rechts{right:3px}
  .jb-streifen{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ .jb-roehre i,.jb.spielt .jb-platte,.jb.spielt .jb-krone{animation:none} }

/* ---------- Lautsprecher mit Spotify-Player im Gehäuse ---------- */
.jb-zeit{margin-left:auto; flex:none; font-size:.78rem; color:#ff9a3d; text-shadow:0 0 6px rgba(255,140,40,.7)}
.jb-radio{margin-top:14px; padding:10px 12px 12px; border-radius:16px;
  background:
    radial-gradient(circle,rgba(0,0,0,.55) 1.4px,transparent 1.6px) 0 0/7px 7px,
    linear-gradient(180deg,#3a0a12,#1e0509);
  box-shadow:inset 0 0 0 2px #3a2a1a, 0 0 0 4px #cfd4d8, 0 0 0 6px #6f767c, inset 0 10px 22px rgba(0,0,0,.6)}
.jb-radio-kopf{display:flex; align-items:center; gap:9px; margin-bottom:9px; color:#ffe9c2; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase}
.jb-lampe{width:10px; height:10px; border-radius:50%; background:#5a1a1a; box-shadow:inset 0 1px 2px rgba(0,0,0,.6); transition:background .3s, box-shadow .3s}
.jb.laeuft .jb-lampe{background:#ff4d5e; box-shadow:0 0 6px #ff4d5e, 0 0 14px rgba(255,77,94,.7)}
.jb-vu{margin-left:auto; display:flex; align-items:flex-end; gap:3px; height:16px}
.jb-vu i{width:4px; height:3px; border-radius:1px; background:linear-gradient(0deg,var(--mint),var(--butter) 60%,#ff6a3d)}
.jb.laeuft .jb-vu i{animation:jb-vu .9s ease-in-out infinite alternate}
.jb-vu i:nth-child(2){animation-delay:-.3s!important} .jb-vu i:nth-child(3){animation-delay:-.6s!important; animation-duration:.7s!important}
.jb-vu i:nth-child(4){animation-delay:-.15s!important} .jb-vu i:nth-child(5){animation-delay:-.45s!important; animation-duration:1.1s!important}
.jb-vu i:nth-child(6){animation-delay:-.75s!important} .jb-vu i:nth-child(7){animation-delay:-.2s!important; animation-duration:.8s!important}
@keyframes jb-vu{0%{height:3px} 40%{height:14px} 70%{height:7px} 100%{height:16px}}

.jb-spieler{position:relative}
.jb-sp-rahmen{position:relative; min-height:152px; border-radius:12px; overflow:hidden; background:#140f0b;
  box-shadow:0 0 0 3px #e9dcc0, 0 0 0 5px #8f979e, 0 10px 20px -10px #000}
.jb-sp-rahmen[hidden]{display:none}
.jb-sp-rahmen iframe{display:block; border:0; width:100%; height:152px; border-radius:12px}
.jb-sp-laedt{position:absolute; inset:0; margin:0; display:grid; place-items:center; color:#ff9a3d; font-weight:700; font-size:.86rem;
  text-shadow:0 0 8px rgba(255,140,40,.8); animation:jb-gluehen 1.4s ease-in-out infinite alternate}
@keyframes jb-gluehen{from{opacity:.45} to{opacity:1}}
.jb-sp-text[hidden]{display:none}
.jb-sp-leer{margin:0; padding:22px 16px; border-radius:10px; text-align:center; font-size:.84rem; line-height:1.45; color:#ffe9c2;
  background:rgba(20,15,11,.72); box-shadow:inset 0 0 0 1px rgba(255,233,194,.15)}
.jb-sp-frage{padding:13px 15px; border-radius:10px; background:var(--creme-hell); color:#4a3b2e; font-size:.78rem; line-height:1.45;
  box-shadow:inset 0 0 0 1px rgba(125,10,29,.25), inset 0 -2px 0 rgba(0,0,0,.08)}
.jb-sp-frage b{color:var(--kirsch-tief); font-size:.9rem}
.jb-sp-frage p{margin:0}
.jb-sp-frage a{color:var(--kirsch-tief); font-weight:700}
.jb-sp-knoepfe{margin-top:10px !important}
.jb-sp-laden{width:100%; border:0; border-radius:99px; padding:11px 18px; font:inherit; font-weight:700; font-size:.95rem; cursor:pointer; color:#fff;
  background:radial-gradient(120% 140% at 50% 0%,#ff5a6e,var(--kirsch) 55%,var(--kirsch-tief));
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.25), 0 0 0 3px #cfd4d8, 0 0 0 4px #6f767c, 0 0 18px rgba(255,90,110,.45);
  animation:jb-lock 2.2s ease-in-out infinite}
.jb-sp-laden:hover{filter:brightness(1.08)}
@keyframes jb-lock{50%{box-shadow:inset 0 -3px 0 rgba(0,0,0,.25), 0 0 0 3px #cfd4d8, 0 0 0 4px #6f767c, 0 0 30px rgba(255,90,110,.8)}}
.jb-radio-tasten{display:flex; align-items:center; gap:10px; margin-top:11px}
.jb-chrom{border:0; border-radius:8px; padding:7px 14px; font:inherit; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  color:#3a0a12; background:var(--chrom); box-shadow:0 3px 0 #4d5358, 0 6px 10px -6px #000}
.jb-chrom:active{transform:translateY(2px); box-shadow:0 1px 0 #4d5358}
.jb-chrom:disabled{opacity:.4; cursor:default; transform:none}
.jb-reject{color:var(--kirsch)}
.jb-radio .jb-sp-link{margin-left:auto; font-size:.74rem; font-weight:700; color:#ffe9c2; text-decoration:none; border-bottom:1px solid rgba(255,233,194,.4)}
.jb-radio .jb-sp-link[hidden]{display:none}
/* Mit Spotify dreht der Teller nur, solange wirklich Musik läuft. */
.jb.mitsp.spielt:not(.laeuft) .jb-platte{animation-play-state:paused}
.jb.mitsp.spielt:not(.laeuft) .jb-arm{transform:rotate(14deg)}
.jb.laeuft .jb-roehre i{animation-duration:1.8s}
@media (prefers-reduced-motion:reduce){ .jb.laeuft .jb-vu i,.jb-sp-laden,.jb-sp-laedt{animation:none} }

/* ---------- Pult: gezielt und spielerisch ---------- */
.jb-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.jb-suche{position:relative; margin-bottom:18px}
.jb-suchfeld{width:100%; box-sizing:border-box; padding:13px 16px 13px 44px; border:0; border-radius:99px; font:inherit; font-size:.98rem; color:#171717;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171717' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") 16px 50%/18px no-repeat;
  box-shadow:0 0 0 3px #cfd4d8, 0 0 0 4px #7a8187, inset 0 2px 4px rgba(0,0,0,.12)}
.jb-suchfeld:focus{outline:none; box-shadow:0 0 0 3px var(--kirsch), 0 0 0 4px var(--kirsch-tief), inset 0 2px 4px rgba(0,0,0,.12)}
.jb-such-liste{list-style:none; margin:10px 0 0; padding:6px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px var(--gravur), 0 16px 30px -18px rgba(33,26,20,.7)}
.jb-such-liste[hidden]{display:none}
.jb-such-liste button{display:flex; align-items:center; gap:10px; width:100%; padding:6px 8px; border:0; border-radius:10px; background:transparent; font:inherit; font-size:.9rem;
  text-align:left; cursor:pointer; color:#171717; line-height:1.25}
.jb-such-liste button:hover,.jb-such-liste button:focus-visible{background:var(--creme-hoch); outline:none}
.jb-such-liste img{width:40px; height:40px; border-radius:4px; object-fit:cover; flex:none; background:var(--sand)}
.jb-such-liste small{display:block; color:var(--grau); font-size:.76rem}
.jb-such-liste button > b{margin-left:auto; flex:none; padding:3px 7px; border-radius:5px; background:var(--kirsch); color:#fff; font-size:.74rem}
.jb-such-liste .ini{flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:700; color:#fff; background:var(--dunkel)}
.jb-such-liste .leer{padding:10px; font-size:.88rem; color:var(--grau)}
.jb-schritt{display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; margin:18px 0 10px; font-weight:700; font-size:.92rem}
.jb-schritt b{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--dunkel); color:var(--creme); font-size:.78rem}
.jb-schritt small{font-weight:400; color:var(--grau); font-size:.78rem}
.jb-tasten.buchstaben{grid-template-columns:repeat(9,1fr); gap:9px}
.jb-tasten.buchstaben .jb-taste{font-size:.92rem}
.jb-taste.blinkt{background:radial-gradient(circle at 35% 30%,#fff7c8,var(--butter) 60%,#e0a52a); box-shadow:0 0 0 3px #cfd4d8, 0 0 0 4px #7a8187, 0 4px 0 4px #5f666c, 0 0 22px 6px rgba(255,209,102,.9)}
.jb-kuenstler{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px}
.jb-kuenstler:empty{display:none}
.jb-kuenstler button{border:0; border-radius:99px; padding:7px 13px; font:inherit; font-size:.84rem; font-weight:700; cursor:pointer; color:#171717;
  background:#fff; box-shadow:inset 0 0 0 1px var(--gravur-stark), 0 2px 0 rgba(0,0,0,.08); transition:transform .1s}
.jb-kuenstler button:hover{transform:translateY(-1px)}
.jb-kuenstler button small{font-weight:400; color:var(--grau); margin-left:2px}
.jb-kuenstler button.p::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--kirsch); margin-right:6px; vertical-align:1px}
.jb-kuenstler button[aria-pressed="true"]{background:var(--dunkel); color:var(--creme); box-shadow:none}
.jb-kuenstler button[aria-pressed="true"] small{color:rgba(242,227,196,.7)}
.jb-spiel{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:stretch; margin:8px 0 12px}
.jb-roulette{display:flex; align-items:center; gap:12px; border:0; border-radius:16px; padding:10px 16px 10px 10px; font:inherit; cursor:pointer; text-align:left; color:#fff3cf;
  background:radial-gradient(120% 140% at 30% 0%,#3a2e22,#171717); box-shadow:inset 0 -3px 0 rgba(0,0,0,.4), 0 0 0 3px #cfd4d8, 0 0 0 4px #7a8187}
.jb-roulette b{display:block; font-size:.95rem} .jb-roulette small{display:block; font-size:.74rem; opacity:.75}
.jb-rad{flex:none; width:42px; height:42px; border-radius:50%;
  background:conic-gradient(var(--kirsch) 0 45deg,#fff3cf 0 90deg,var(--kirsch) 0 135deg,#fff3cf 0 180deg,var(--kirsch) 0 225deg,#fff3cf 0 270deg,var(--kirsch) 0 315deg,#fff3cf 0);
  box-shadow:0 0 0 3px #cfd4d8, inset 0 0 0 14px transparent; position:relative}
.jb-rad::after{content:""; position:absolute; inset:15px; border-radius:50%; background:var(--chrom)}
.jb-roulette:hover .jb-rad{transform:rotate(30deg); transition:transform .3s}
.jb-roulette.dreht .jb-rad{animation:jb-dreh .5s linear infinite}
.jb-zeitreise{display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 10px; border-radius:16px; background:#fffaf0; box-shadow:inset 0 0 0 1px var(--gravur)}
.jb-zr-titel{width:100%; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--grau)}
.jb-zeitreise button{border:0; border-radius:8px; padding:6px 9px; font:inherit; font-size:.82rem; font-weight:700; cursor:pointer; color:#3a0a12;
  background:var(--chrom); box-shadow:0 2px 0 #4d5358}
.jb-zeitreise button:active{transform:translateY(2px); box-shadow:none}
.jb-zeitreise button:disabled{opacity:.35; cursor:default}
.jb-streifen{max-height:320px; overflow:auto; scrollbar-width:thin}
.jb-streifen button.an{outline:2px solid var(--kirsch); background:#fff}
@media (max-width:899px){
  .jb-tasten.buchstaben{grid-template-columns:repeat(7,1fr); gap:11px}
}
@media (max-width:560px){
  .jb-spiel{grid-template-columns:1fr}
}
/* Nummerntasten: nur die Platten des gewählten Buchstabens, beschriftet wie die Kärtchen */
.jb-tasten.zahlen{grid-template-columns:repeat(8,1fr); gap:10px; margin-top:0}
.jb-tasten.zahlen .jb-taste{font-size:.95rem; line-height:1}
.jb-tasten.zahlen .jb-taste i{font-style:normal; font-size:.62em; color:var(--kirsch); margin-right:1px; vertical-align:.25em}
.jb-tasten.zahlen .jb-taste.an{background:radial-gradient(circle at 35% 30%,#ff7a8a,var(--kirsch) 60%,var(--kirsch-tief)); color:#fff}
.jb-tasten.zahlen .jb-taste.an i{color:#fff3cf}
.jb-streifen button.zeigt{outline:2px solid var(--butter); background:#fff; transform:translateY(-1px)}
@media (max-width:899px){ .jb-tasten.zahlen{grid-template-columns:repeat(6,1fr); gap:12px} }
/* Roulette: größeres Rad mit Zeiger, Box darauf abgestimmt */
.jb-roulette{gap:16px; padding:14px 20px 14px 14px; border-radius:18px}
.jb-rad{width:68px; height:68px; box-shadow:0 0 0 4px #cfd4d8, 0 0 0 5px #7a8187, 0 6px 12px -4px rgba(0,0,0,.6);
  background:conic-gradient(var(--kirsch) 0 30deg,#fff3cf 0 60deg,var(--kirsch) 0 90deg,#fff3cf 0 120deg,var(--kirsch) 0 150deg,#fff3cf 0 180deg,var(--kirsch) 0 210deg,#fff3cf 0 240deg,var(--kirsch) 0 270deg,#fff3cf 0 300deg,var(--kirsch) 0 330deg,#fff3cf 0)}
.jb-rad::after{inset:24px}
.jb-rad::before{content:""; position:absolute; z-index:1; top:-9px; left:50%; transform:translateX(-50%); border:7px solid transparent; border-top:11px solid var(--butter); filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.jb-roulette b{font-size:1.1rem}
.jb-roulette small{font-size:.8rem; margin-top:2px}
@media (max-width:560px){ .jb-rad{width:58px; height:58px} .jb-rad::after{inset:20px} }
.jb-spiel{grid-template-columns:1fr}
.jb-roulette{justify-content:flex-start}
.jb-zeitreise{gap:7px}
.jb-zeitreise button{flex:1 1 0; min-width:48px}
@media (max-width:560px){ .jb-zeitreise{display:grid; grid-template-columns:repeat(4,1fr)} .jb-zr-titel{grid-column:1/-1} }
/* Kärtchen: gewählter Künstler vorn markiert, Nachbarn aus dem nächsten Buchstaben leicht zurückgenommen */
.jb-streifen button.wahl{background:#fff; box-shadow:inset 0 -1px 0 rgba(0,0,0,.12), inset 0 0 0 2px var(--butter)}
.jb-streifen button.nachbar b{background:#6f767c}
.jb-tasten.zahlen .jb-taste.wahl{box-shadow:0 0 0 3px var(--butter), 0 0 0 4px #7a8187, 0 4px 0 4px #5f666c, 0 8px 12px 2px rgba(0,0,0,.25)}