/* ================= Rabe ================= */
.rv-ico{width:1.7em;height:1em;fill:currentColor;flex:none;overflow:visible;vertical-align:-.1em}
.rv-ico .rv-wl,.rv-ico .rv-wr{transform-box:view-box;transform-origin:58px 40px;animation:flapL 1.1s ease-in-out infinite}
.rv-ico .rv-wr{animation-name:flapR}
@keyframes flapL{50%{transform:rotate(26deg) scaleY(.85)}}
@keyframes flapR{50%{transform:rotate(-26deg) scaleY(.85)}}
.brand-rv{width:26px;height:16px;color:#fff;filter:drop-shadow(0 0 8px var(--a2))}

/* Hero-Plakette */
.aka{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:8px 18px 8px 14px;border-radius:99px;font-size:1rem;color:#e9eafc;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);transition:transform .3s var(--ease),box-shadow .3s,background .3s}
.aka .rv-ico{width:34px;height:20px;color:#fff;filter:drop-shadow(0 0 10px var(--a2))}
.aka span{text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:var(--mute)}
.aka b{font-size:1.25rem;letter-spacing:.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.aka:hover{transform:translateY(-3px) rotate(-2deg);box-shadow:0 12px 34px rgba(255,92,168,.35);background:rgba(255,255,255,.12)}
.aka.krah{animation:wob .5s ease}
@keyframes wob{25%{transform:rotate(-6deg) scale(1.08)}60%{transform:rotate(5deg) scale(1.08)}}

/* Rabe-Fakt-Zettel im Kapitel */
.rabe-note{display:flex;align-items:flex-start;gap:12px;width:max-content;max-width:min(100%,520px);margin:18px 0 0 8px;padding:13px 18px 14px 14px;border-radius:6px 16px 6px 16px;
  background:linear-gradient(135deg,#fff7c9,#ffe27a);color:#2a2410;transform:rotate(-1.6deg);box-shadow:0 14px 34px rgba(0,0,0,.45);transition:transform .4s var(--ease)}
.rabe-note:hover{transform:rotate(.6deg) scale(1.03)}
.rabe-note .rv-ico{width:38px;height:22px;margin-top:2px;color:#1b1630}
.rabe-note b{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:#8a6a00}
.rabe-note span{display:block;font-weight:600;line-height:1.35;font-size:.98rem}
.reveal.rabe-note.in{transform:rotate(-1.6deg)}
.reveal.rabe-note.in:hover{transform:rotate(.6deg) scale(1.03)}

/* Rabenschwarm-Laufband */
.rabe-head{display:flex;align-items:center;justify-content:center;gap:12px;margin:46px 16px 22px;font-size:clamp(1.2rem,3vw,1.8rem);font-weight:800;letter-spacing:-.02em}
.rabe-head .rv-ico{width:46px;height:28px;color:#fff;filter:drop-shadow(0 0 12px var(--a2))}
.marquee.rabe{animation-duration:120s}
.marquee.rabe .mq{background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(255,92,168,.12));border-color:rgba(255,255,255,.16)}
.marquee.rabe .mq::before{content:"";display:inline-block;width:30px;height:18px;margin-bottom:8px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70'%3E%3Cpath d='M54 36C46 18 30 8 6 6c14 8 24 20 30 36zM64 34C70 14 88 4 112 2c-14 10-22 22-28 38zM18 44C30 34 52 32 70 36c8-6 18-6 26-2l16 4-16 4c-6 8-20 12-34 12-16 0-32-4-44-10zM20 44L1 56l8-14z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70'%3E%3Cpath d='M54 36C46 18 30 8 6 6c14 8 24 20 30 36zM64 34C70 14 88 4 112 2c-14 10-22 22-28 38zM18 44C30 34 52 32 70 36c8-6 18-6 26-2l16 4-16 4c-6 8-20 12-34 12-16 0-32-4-44-10zM20 44L1 56l8-14z'/%3E%3C/svg%3E") center/contain no-repeat;color:#fff}

/* Finale-Zeile */
.aka-line{margin:-6px 0 30px;font-size:clamp(1rem,2.4vw,1.35rem);color:#d6d8ea;font-weight:600}
.aka-line b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.25em}

/* Fliegender Rabe */
.rv-fly{position:fixed;left:-160px;top:var(--y,20vh);z-index:140;width:110px;height:64px;color:#0d0a1c;cursor:pointer;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)) drop-shadow(0 0 1px rgba(255,255,255,.9));
  animation:flyx var(--dur,12s) linear forwards}
.rv-fly svg{width:100%;height:100%;fill:#161026;stroke:rgba(255,255,255,.55);stroke-width:1.2;animation:bobY 1.6s ease-in-out infinite}
.rv-fly svg .rv-wl,.rv-fly svg .rv-wr{animation-duration:.42s}
.rv-fly::after{content:"Krah!";position:absolute;left:50%;top:-26px;transform:translateX(-50%) scale(.6);padding:3px 12px;border-radius:99px;background:#fff;color:#161026;font-weight:800;font-size:.9rem;opacity:0;transition:.25s var(--ease);white-space:nowrap}
.rv-fly:hover::after,.rv-fly.say::after{opacity:1;transform:translateX(-50%) scale(1)}
@keyframes flyx{to{left:calc(100vw + 160px)}}
@keyframes bobY{50%{transform:translateY(-14px) rotate(-3deg)}}
.rv-fly.hit{animation-play-state:paused;transition:transform .5s,opacity .5s;transform:translateY(120vh) rotate(40deg);opacity:0}
.feather{position:fixed;z-index:310;width:10px;height:22px;border-radius:50% 50% 50% 50%/70% 70% 30% 30%;background:#161026;border:1px solid rgba(255,255,255,.5);pointer-events:none}
@media (prefers-reduced-motion:reduce){.rv-fly{display:none}}
@media (max-width:560px){.rv-fly{width:80px;height:46px}.rabe-note{margin-left:0}}

/* ================= Songtext ================= */
.pm-text{width:min(250px,42vw)}
.pm-text b{white-space:normal}
.pm-text span{white-space:normal;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;line-height:1.25;min-height:2.5em;transition:opacity .25s}
.ly{margin:6px 0 18px;min-height:132px;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 4px}
.ly p{line-height:1.25}
.ly-prev,.ly-next{font-size:.9rem;color:rgba(255,255,255,.3);font-weight:600;min-height:1.1em;transition:opacity .4s}
.ly-cur{--f:0%;font-size:clamp(1.15rem,3.4vw,1.55rem);font-weight:800;letter-spacing:-.015em;line-height:1.3;padding:3px 4px 8px;overflow-wrap:anywhere;
  background:linear-gradient(90deg,#ff9ad0,#ffd08a var(--f),rgba(255,255,255,.4) calc(var(--f) + .6%));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 calc(4px + var(--bass,0)*18px) rgba(255,92,168,.55))}
.ly-cur.in{animation:lyin .45s var(--ease)}
.ly-cur.gap{background:none;color:rgba(255,255,255,.55);-webkit-text-fill-color:currentColor;animation:gapPulse 1.6s ease-in-out infinite;letter-spacing:.3em}
@keyframes lyin{from{opacity:0;transform:translateY(14px)}}
@keyframes gapPulse{50%{opacity:.35}}
.ss-lyric{position:absolute;left:0;right:0;bottom:clamp(110px,18vh,170px);z-index:3;text-align:center;padding:0 7vw;font-size:clamp(1.3rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.02em;color:#fff;
  text-shadow:0 4px 30px rgba(0,0,0,.9),0 0 40px rgba(255,92,168,.45);pointer-events:none}
.ss-lyric.in{animation:lyin .5s var(--ease)}
@media (max-width:480px){.ly{min-height:104px}.ss-lyric{bottom:150px}}

/* Smartphone: Songtext gestochen scharf (Filter/Glow auf Text mit Verlauf wird mobil verschwommen gerendert) */
@media (max-width:820px),(pointer:coarse){
  .ly-cur{filter:none;transform:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  .ly-cur.in{animation:lyinM .35s var(--ease)}
  .ly-prev,.ly-next{filter:none}
}
@keyframes lyinM{from{opacity:0}}

/* Wortweise Markierung: folgt der Lesereihenfolge, auch ueber Zeilenumbrueche */
.ly-cur{background:none;color:rgba(255,255,255,.4);-webkit-text-fill-color:currentColor}
.ly-cur .w{--p:0%;background:linear-gradient(90deg,#ff9ad0,#ffd08a var(--p),rgba(255,255,255,.4) calc(var(--p) + .6%));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.ly-cur.gap{-webkit-text-fill-color:currentColor}
