/* Erlebnis-Funktionen: klingender Tempel, Plattenteller, Teilen und Vibration */

/* Hinweis auf das Booklet */
.neu-hinweis{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:8px 16px 8px 8px;border:1px solid var(--linie);border-radius:999px;color:var(--text);text-decoration:none;font-size:.95rem;background:rgba(212,174,106,.08)}
.neu-hinweis b{padding:3px 10px;border-radius:999px;background:var(--gold);color:#1a1205;font-size:.8rem;letter-spacing:.04em}
.neu-hinweis:hover{border-color:var(--gold);color:var(--gold-hell)}
.booklet-kachel{position:relative}
.booklet-kachel .neu{position:absolute;top:12px;left:12px;padding:3px 10px;border-radius:999px;background:var(--gold);color:#1a1205;font-family:var(--body);font-size:.8rem}

/* Tempel zum Antippen */
#tempel{cursor:pointer}
.temple{position:relative}
.tempel-tipp{position:absolute;left:0;right:0;bottom:2%;margin:0;text-align:center;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);opacity:.75;pointer-events:none;transition:opacity .6s}
.tempel-tipp.weg{opacity:0}
@media (prefers-reduced-motion:no-preference){.tempel-tipp:not(.weg){animation:tipp-atmen 2.4s ease-in-out infinite}}
@keyframes tipp-atmen{50%{opacity:.35}}

/* Plattenteller */
.teller{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;margin:0 0 clamp(40px,6vw,64px)}
@media (max-width:760px){.teller{grid-template-columns:1fr;justify-items:center;text-align:center}}
.deck{position:relative;width:min(340px,78vw);aspect-ratio:1;border-radius:24px;padding:22px;
  background:linear-gradient(145deg,#1a2a3e,#0c1724);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -30px rgba(0,0,0,.8);border:1px solid var(--linie)}
#platte{position:relative;width:100%;height:100%;border-radius:50%;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  background:radial-gradient(circle,#111 0 18%,transparent 18.5%),repeating-radial-gradient(circle,#161616 0 2px,#0c0c0c 2px 4px);
  box-shadow:0 0 0 6px #0a0a0a,0 18px 40px -10px rgba(0,0,0,.9),0 0 50px -10px rgb(var(--c1) / .45)}
#platte:active{cursor:grabbing}
#platte .label{position:absolute;inset:31%;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px rgba(0,0,0,.6)}
#platte .label img{width:100%;height:100%;object-fit:cover;display:block}
#platte .loch{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#d8d2c4;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
#platte .glanz{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 10%,rgba(255,255,255,.07) 14%,transparent 20% 60%,rgba(255,255,255,.05) 64%,transparent 70%);pointer-events:none}
.arm{position:absolute;right:8px;top:18px;width:30%;height:58%;pointer-events:none;transform-origin:85% 8%;transform:rotate(18deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.deck.laeuft .arm{transform:rotate(34deg)}
.arm::before{content:"";position:absolute;right:6%;top:0;width:18px;height:18px;border-radius:50%;background:#c9c2b4;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.arm::after{content:"";position:absolute;right:calc(6% + 7px);top:9px;width:4px;height:92%;background:linear-gradient(#d8d2c4,#9a937f);border-radius:2px;transform-origin:top;transform:rotate(14deg)}
.teller h3{font-size:clamp(1.5rem,3.4vw,2.1rem);margin-bottom:10px}
.teller p{color:#c9ccce;max-width:44ch}
.teller .jetzt{margin-top:16px;font-size:.95rem;color:var(--gold-hell);min-height:1.5em}
.teller .tipp{margin-top:6px;font-size:.88rem;color:var(--leise)}

/* Mitlaufender Songtext */
.karaoke{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:19;width:min(860px,calc(100vw - 32px));
  text-align:center;pointer-events:none;padding:18px 20px 14px;border-radius:18px;background:linear-gradient(180deg,rgba(8,18,30,0),rgba(8,18,30,.78) 30%,rgba(8,18,30,.86));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.karaoke[hidden]{display:none}
.karaoke p{margin:0}
.k-jetzt{font-family:var(--display);font-size:clamp(1.25rem,3vw,1.9rem);line-height:1.3;color:rgba(246,239,226,.45)}
.k-jetzt span{transition:color .15s,text-shadow .15s}
.k-jetzt span.an{color:#f6efe2;text-shadow:0 0 18px rgb(var(--c1) / .8)}
.k-dann{margin-top:6px!important;font-size:.95rem;color:var(--leise)}
@media (max-width:760px){.karaoke{bottom:calc(186px + env(safe-area-inset-bottom,0px));padding:12px 14px 10px}.k-jetzt{font-size:1.15rem}.k-dann{font-size:.85rem}}

/* Player: Teilen und Bass spüren */
.p-bar .p-extra{flex:none;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid transparent;background:none;color:var(--text);display:grid;place-items:center;cursor:pointer}
.p-bar .p-extra:hover{border-color:var(--linie)}
.p-bar .p-extra[hidden]{display:none}
.p-bar .p-extra svg{width:18px;height:18px;fill:currentColor}
.p-bar .p-extra.an{color:rgb(var(--c1));border-color:rgb(var(--c1) / .6)}
.toast{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;padding:10px 18px;border-radius:999px;background:#f4efe6;color:#1b2433;font-size:.95rem;box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}

/* Tempel kippt beim Scrollen leicht in den Raum */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .temple{perspective:900px}
    .temple canvas{animation:tempel-kipp linear both;animation-timeline:view();animation-range:cover 30% cover 100%;transform-origin:50% 80%}
    @keyframes tempel-kipp{from{transform:rotateX(0) rotateY(0)}to{transform:rotateX(18deg) rotateY(-10deg) scale(.94);opacity:.6}}
  }
}
@media (prefers-reduced-motion:reduce){#platte{animation:none}}