/* Bandmaschine auf den Album-Seiten (siehe tonband.js) – flacher Plakatstil: Creme, Schwarz, Musik-Rot */
.tb{--tb-rot:#DD2133; --tb-creme:#F8EDD3; --tb-schwarz:#161616; margin:0 0 22px}
.tb-geraet{padding:12px 12px 14px; border-radius:16px; background:var(--tb-rot); color:var(--tb-creme)}
.tb-kopf{display:flex; justify-content:space-between; gap:10px; margin:0 4px 8px; font-size:.64rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase}
.tb-buehne{position:relative}
.tb-svg{display:block; width:100%; height:auto; overflow:visible}

.tb-koerper{fill:var(--tb-creme); stroke:var(--tb-schwarz); stroke-width:3.5}
.tb-bandweg{fill:none; stroke:var(--tb-schwarz); stroke-width:2.6; stroke-linejoin:round}
.tb-rolle{fill:var(--tb-creme); stroke:var(--tb-schwarz); stroke-width:2.5}

/* Spulen: schwarzer Bandwickel, darüber der drehende Teller mit Ring, Punkten und rotem Dreiblatt */
.tb-wickel{fill:var(--tb-schwarz); transition:r 1s linear}
.tb-ring{fill:none; stroke:var(--tb-schwarz); stroke-width:2.5}
.tb-punkt{fill:var(--tb-schwarz)}
.tb-nabe{fill:var(--tb-creme)}
.tb-fluegel{fill:var(--tb-rot); stroke:var(--tb-schwarz); stroke-width:1.6}
.tb-achse{fill:var(--tb-schwarz)}
.tb-dreh{transform-box:fill-box; transform-origin:center}
.tb.laeuft .tb-dreh{animation:tb-dreh 2.4s linear infinite}
.tb.laeuft .tb-dreh.rechts{animation-duration:1.9s}
@keyframes tb-dreh{to{transform:rotate(-360deg)}}

/* Tonköpfe */
.tb-traeger{fill:var(--tb-creme); stroke:var(--tb-schwarz); stroke-width:2.5}
.tb-kopf-teil{fill:var(--tb-schwarz)}

/* Bedienfeld: schwarze Felder, runde VU-Meter, Regler, Zählwerk */
.tb-feld{fill:var(--tb-schwarz)}
.tb-vu-fenster{fill:var(--tb-creme)}
.tb-vu-text{fill:var(--tb-schwarz); font:700 5.5px/1 'Poppins',system-ui,sans-serif; letter-spacing:.08em}
.tb-vu-skala{fill:none; stroke:var(--tb-schwarz); stroke-width:1.3; stroke-dasharray:1.2 2.4}
.tb-vu-rot{fill:none; stroke:var(--tb-rot); stroke-width:2.6}
.tb-nadel{stroke:var(--tb-schwarz); stroke-width:1.6; stroke-linecap:round}
.tb-regler{fill:var(--tb-creme); stroke:var(--tb-schwarz); stroke-width:3}
.tb-regler-strich{stroke:var(--tb-schwarz); stroke-width:2.2; stroke-linecap:round}
.tb-zeit{fill:var(--tb-creme); font:700 15px/1 'Poppins',system-ui,sans-serif; letter-spacing:.06em; font-variant-numeric:tabular-nums}

/* Der rote Knopf (echter Button, liegt genau auf dem Bedienfeld) */
.tb-start{position:absolute; left:calc(153 / 300 * 100%); top:calc(209 / 262 * 100%); width:calc(34 / 300 * 100%); aspect-ratio:1;
  padding:0; border:0; border-radius:50%; cursor:pointer; background:var(--tb-rot);
  box-shadow:0 0 0 calc(3 / 300 * 100cqw) var(--tb-schwarz); box-shadow:0 0 0 3px var(--tb-schwarz), 0 3px 0 3px var(--tb-schwarz);
  transition:transform .06s, box-shadow .06s; animation:tb-lock 2.4s ease-in-out infinite}
.tb-start span{position:absolute; inset:30%; border-radius:50%; background:rgba(255,255,255,.18)}
.tb-start:hover{filter:brightness(1.08)}
.tb-start:active,.tb-start[aria-pressed="true"]{transform:translateY(3px); box-shadow:0 0 0 3px var(--tb-schwarz), 0 0 0 3px var(--tb-schwarz); animation:none}
.tb-start:focus-visible{outline:3px solid var(--tb-creme); outline-offset:4px}
.tb.laeuft .tb-start span{background:#ffd9dd; box-shadow:0 0 8px #fff}
@keyframes tb-lock{50%{box-shadow:0 0 0 3px var(--tb-schwarz), 0 3px 0 3px var(--tb-schwarz), 0 0 0 9px rgba(221,33,51,.28)}}
.tb-hinweis{margin:10px 4px 0; font-size:.8rem; line-height:1.4}
.tb-hinweis b{font-weight:700}
.tb-einwilligung{margin:6px 4px 0; font-size:.7rem; line-height:1.4; opacity:.9}
.tb-einwilligung a{color:inherit; font-weight:700}

/* Fach unter dem Gerät: Einwilligung und Spotify */
.tb-fach{margin-top:10px}
.tb-rahmen{position:relative; min-height:80px; border-radius:12px; overflow:hidden; background:var(--tb-schwarz)}
.tb-rahmen[hidden]{display:none}
.tb-rahmen iframe{display:block; border:0; width:100%; height:152px}
.tb-laedt{position:absolute; inset:0; margin:0; display:grid; place-items:center; color:var(--tb-creme); font-weight:700; font-size:.84rem; animation:tb-glimm 1.3s ease-in-out infinite alternate}
@keyframes tb-glimm{from{opacity:.45} to{opacity:1}}
.tb-frage{padding:12px 14px; border-radius:12px; background:var(--creme-hoch,#F8EFD9); box-shadow:inset 0 0 0 1px var(--gravur,rgba(33,26,20,.15)); font-size:.8rem; line-height:1.45; color:var(--grau,#453C34)}
.tb-frage p{margin:0}
.tb-frage b{color:var(--rot-text,#9E1223)}
.tb-ein{width:100%; margin-top:10px; border:0; border-radius:99px; padding:10px 16px; font:inherit; font-weight:700; font-size:.92rem; cursor:pointer; color:#fff;
  background:var(--rot-flae,#DD2133); box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.tb-ein:hover{background:var(--rot-tief,#B01B29)}
.tb-fuss{margin:8px 0 0; font-size:.8rem; font-weight:700}
@media (prefers-reduced-motion:reduce){ .tb.laeuft .tb-dreh,.tb-start,.tb-laedt{animation:none} }

/* Hinweis, wenn der Browser (iPhone/iPad) einen Tipp im Spotify-Player verlangt */
.tb-tipp{margin:0 0 8px; padding:9px 12px; border-radius:10px; background:#fff3cf; color:#171717; font-size:.78rem; line-height:1.4;
  box-shadow:inset 0 0 0 2px var(--tb-schwarz); animation:tb-tipp 1.2s ease-in-out infinite alternate}
.tb-tipp b{display:block; color:var(--tb-rot)}
@keyframes tb-tipp{to{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){ .tb-tipp{animation:none} }