/* ============================================================
   Bausteinlager „Deine neue Webseite" — kassette.css (29.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung dnw-baustein-kassette-20261029
   Der Firmensong als Kassette: Spulen drehen sich beim Abspielen, links wird das Band weniger, rechts mehr.
   Mit dem Finger am Sichtfenster ziehen = spulen. Aus, bis man drückt (Matzes Regel für Songs).
   EINBAU:
     <div class="kassette" data-kassette data-src="musik/firmensong.mp3" data-titel="Sem Clean – Klare Sicht"
          data-unter="Unser Song · Seite A"></div>
   Farben: --ks-koerper (Gehäuse), --ks-etikett (Aufkleber), --ks-akzent (Streifen), --ks-tinte (Schrift)
   Standard aus glas.css: Gehäuse --marke, Streifen --signal.
   ============================================================ */
.kassette{
  --ks-koerper:var(--marke,#1E2A3A);--ks-etikett:#F7F2E7;--ks-akzent:var(--signal,#306CC0);--ks-tinte:#1B1B1B;
  position:relative;width:100%;max-width:440px;margin:0 auto;color:var(--tinte,#14213A);-webkit-tap-highlight-color:transparent
}
.ks-buehne{position:relative;isolation:isolate}
.ks-buehne svg{display:block;width:100%;height:auto;overflow:visible}
.ks-schatten{position:absolute;left:6%;right:6%;bottom:-8px;height:40%;border-radius:40px;background:rgba(10,18,30,.35);filter:blur(16px);z-index:-1}
/* Titel auf dem Aufkleber als echte Schrift (scharf, wechselt mit der Seite) */
.ks-etikett{position:absolute;left:8.5%;right:8.5%;top:9.5%;height:11.5%;display:flex;align-items:center;gap:8px;overflow:hidden;
  color:var(--ks-tinte);font-weight:800;font-size:clamp(13px,3.6vw,17px);line-height:1.1;letter-spacing:.01em;pointer-events:none}
.ks-etikett .ks-titel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks-etikett .ks-seite{margin-left:auto;flex:none;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:6px;background:var(--ks-akzent);color:#fff;font-size:.82em}
.ks-fenster{position:absolute;left:21%;width:58%;top:29%;height:33%;border-radius:999px;cursor:grab;touch-action:pan-y}
.ks-fenster.-zieht{cursor:grabbing}
.ks-fenster:focus-visible{outline:3px solid var(--ks-akzent);outline-offset:4px}
.ks-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:20px}
.ks-zeit{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;color:var(--tinte-2,#4A5568);min-width:92px}
.ks-spur{flex:1 1 120px;min-width:120px;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.ks-spur::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--ks-akzent) var(--ks-p,0%),rgba(20,33,58,.16) var(--ks-p,0%))}
.ks-spur::-moz-range-track{height:4px;border-radius:4px;background:rgba(20,33,58,.16)}
.ks-spur::-moz-range-progress{height:4px;border-radius:4px;background:var(--ks-akzent)}
.ks-spur::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 2px var(--ks-akzent),0 2px 6px rgba(0,0,0,.25)}
.ks-spur::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 2px var(--ks-akzent),0 2px 6px rgba(0,0,0,.25)}
.ks-spur:focus-visible{outline:3px solid var(--ks-akzent);outline-offset:2px;border-radius:6px}
.ks-knopf .tk-flaeche{width:58px;min-height:58px;padding:0;border-radius:50%}
.ks-knopf .tk-flaeche svg{width:24px;height:24px}
.ks-hinweis{margin:10px 0 0;text-align:center;font-size:13px;font-weight:600;color:var(--tinte-2,#4A5568)}