/* Design 3, dritte Stufe: Hörprobe, Equalizer-Bögen, Lichtschein, Seitenübergänge */
@view-transition{navigation:auto}
.site-header{view-transition-name:header}

/* Lichtschein folgt dem Zeiger im Hero */
.day-hero,.rfm3-hero{position:relative}
.day-hero:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(520px circle at var(--mx,70%) var(--my,30%),rgba(255,255,255,.55),transparent 60%);opacity:var(--glow,.7);transition:opacity .4s}
.day-hero>.shell{position:relative;z-index:1}

/* Hörprobe */
.dial-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:4px}
.listen{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:8px 22px 8px 10px;border:2px solid var(--ink);border-radius:999px;background:#fff;font-weight:800;font-size:14px;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.listen:hover{transform:translateY(-2px)}
.listen-icon{position:relative;width:28px;height:28px;border-radius:50%;background:var(--ink)}
.listen-icon:before{content:'';position:absolute;left:11px;top:8px;border-left:10px solid #fff;border-block:6px solid transparent}
.listen[aria-pressed=true]{background:var(--ink);color:#fff}
.listen[aria-pressed=true] .listen-icon{background:#fff}.listen[aria-pressed=true] .listen-icon:before{left:8px;top:8px;width:12px;height:12px;border:0;background:var(--ink);border-radius:2px}
.dial-eq{display:flex;align-items:flex-end;gap:6px;height:44px;padding-right:4px}
.dial-eq i{display:block;width:16px;height:calc(14% + var(--lv,0) * 86%);border-radius:16px 16px 0 0;background:var(--red);transition:height .08s linear}
.dial-eq i:nth-child(2){background:var(--orange)}.dial-eq i:nth-child(3){background:var(--blue)}.dial-eq i:nth-child(4){background:var(--green)}
.dial-marker{box-shadow:0 0 0 calc(var(--beat,0) * 14px) rgba(20,32,43,.18)}
.day-hero .arch-tint{opacity:calc(.5 + var(--beat,0) * .3)}

@media(max-width:520px){.listen{font-size:13px;padding-right:16px}.dial-eq i{width:12px}}
@media(prefers-reduced-motion:reduce){.dial-eq i,.listen{transition:none}.day-hero:before{display:none}}