/* LAIN · Single-Bereich der Startseite: Platten-Bühne (aus der früheren Release-Seite song.html übernommen). */
.plattenbuehne { --leiste: 64px; position: relative; height: 480vh; background: var(--ink); }
/* --leiste: Platz für die feste Aktionsleiste der Startseite (v15) am unteren Rand */
.plattenbuehne .fest { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(120% 80% at 50% 58%, #17151a 0%, var(--ink) 62%); }
.plattenbuehne canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; opacity: 0; transition: opacity 1.2s var(--weich); }
.gl-an .plattenbuehne canvas { opacity: 1; }
/* Ersatzbild: ohne WebGL bleibt das Cover sichtbar */
.plattenbuehne .ersatz { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(72vw, 54vh, 560px); aspect-ratio: 1; transform: translate(-50%, -50%); box-shadow: 0 40px 120px rgba(0,0,0,.7); }
.plattenbuehne .ersatz img { width: 100%; height: 100%; object-fit: cover; }
.gl-an .plattenbuehne .ersatz { display: none; }

/* Riesentitel liegt HINTER der Platte */
.plattenbuehne .titelbahn { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--kopf) + clamp(40px, 9vh, 96px)) var(--rand) calc(var(--leiste) + clamp(130px, 22vh, 210px)); pointer-events: none; }
.plattenbuehne .titelbahn h2 { flex: 1; display: flex; flex-direction: column; justify-content: space-between; margin: 0; }
.plattenbuehne .titelbahn .z { display: inline-block; align-self: flex-start; color: var(--bone); will-change: transform; }
.plattenbuehne .titelbahn .z2 { align-self: flex-end; color: transparent; -webkit-text-stroke: 1.5px rgba(202, 175, 62, .85); }

.plattenbuehne .ueber { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.plattenbuehne .ueber > * { pointer-events: auto; }
.plattenbuehne .kopfzeile { position: absolute; top: calc(var(--kopf) + 10px); left: var(--rand); right: var(--rand); display: flex; justify-content: space-between; gap: 16px; }
.plattenbuehne .fussleiste { position: absolute; left: var(--rand); right: var(--rand); bottom: calc(var(--leiste) + clamp(16px, 3vh, 32px)); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.plattenbuehne .ruf { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.plattenbuehne .rollhinweis { display: flex; align-items: center; gap: 12px; }
.plattenbuehne .rollhinweis i { display: block; width: 1px; height: 42px; background: linear-gradient(var(--gold), transparent); transform-origin: top; animation: pb-rinnen 2.2s var(--weich) infinite; }
@keyframes pb-rinnen { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Kapitel-Etiketten während der Fahrt */
.plattenbuehne .kapitel { position: absolute; z-index: 3; left: var(--rand); right: var(--rand); bottom: calc(var(--leiste) + clamp(20px, 5vh, 56px)); display: flex; flex-direction: column; gap: 10px; opacity: 0; pointer-events: none; }
.plattenbuehne .kapitel.rechts { align-items: flex-end; text-align: right; }
.plattenbuehne .kapitel .wort { font-size: clamp(28px, 4.4vw, 72px); }
.plattenbuehne .fahrt { position: absolute; z-index: 3; left: var(--rand); right: var(--rand); bottom: calc(var(--leiste) + 8px); height: 1px; background: var(--linie); }
.plattenbuehne .fahrt i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }

/* Schluss der Fahrt: Uhr und Weg zur Crew, wenn die Platte vorn einrastet */
.plattenbuehne .schluss { position: absolute; z-index: 4; left: var(--rand); right: var(--rand); bottom: calc(var(--leiste) + clamp(18px, 3.5vh, 40px)); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; opacity: 0; visibility: hidden; }
.plattenbuehne .schluss .uhr { display: flex; gap: clamp(14px, 2vw, 28px); }
.plattenbuehne .schluss .uhr > div { display: flex; flex-direction: column; gap: 6px; }
.plattenbuehne .schluss .uhr b { font: 900 clamp(34px, 4.4vw, 64px)/1 var(--breit); font-variation-settings: "wdth" 112; font-variant-numeric: tabular-nums; color: var(--bone); }
.plattenbuehne .schluss .tun { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }

@media (max-width: 860px) {
  .plattenbuehne { height: 420vh; }
  .plattenbuehne .titelbahn { padding-top: calc(var(--kopf) + 44px); padding-bottom: calc(var(--leiste) + 236px); }
  .plattenbuehne .schluss { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .plattenbuehne { height: auto; }
  .plattenbuehne .fest { position: relative; display: flow-root; height: auto; overflow: visible; }
  /* Schluss (Countdown, Knöpfe) unter die stehende Bühne, nicht über Titel und Kopfzeile */
  .plattenbuehne .schluss { margin-top: 100vh; margin-top: 100svh; }
  .plattenbuehne .titelbahn, .plattenbuehne .ueber, .plattenbuehne .fest > canvas { bottom: auto; height: 100vh; height: 100svh; }
  .plattenbuehne .rollhinweis i { animation: none; }
  .plattenbuehne .schluss { position: relative; opacity: 1; visibility: visible; left: auto; right: auto; bottom: auto; padding: 32px var(--rand); }
}