/* DIVA Song – song.diva-weiden.de
   Konzept „Morgen ↔ Nacht“: die ganze Seite wechselt ihre Lichtstimmung mit dem aktiven Mix.
   Gold ist Akzent (Play, Fortschritt, Haarlinien), nie Fläche. */

@font-face {
  font-family: "Italiana";
  src: url(../fonts/italiana.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url(../fonts/jost.woff2) format("woff2-variations"), url(../fonts/jost.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Registrierte Farben, damit der Morgen/Nacht-Wechsel weich überblendet statt springt */
@property --glow  { syntax: "<color>"; inherits: true; initial-value: #e59a4f; }
@property --glow2 { syntax: "<color>"; inherits: true; initial-value: #ffc27a; }
@property --tint  { syntax: "<color>"; inherits: true; initial-value: #120c07; }

:root {
  --noir: #0b0a0c;
  --ivory: #f1eadf;
  --muted: rgba(241, 234, 223, .62);
  --faint: rgba(241, 234, 223, .58);
  --line: rgba(241, 234, 223, .10);
  --gold: #d8b97e;
  --gold-hi: #f4e2b6;
  --gold-lo: #a57c44;
  --gold-line: rgba(216, 185, 126, .38);
  /* opaker Goldverlauf für Haarlinien-Rahmen: bleibt auch über violettem Halo gold */
  --gold-frame: linear-gradient(160deg, #f4e2b6, #a57c44 45%, #d8b97e 70%, #f4e2b6);
  --gold-grad: linear-gradient(180deg, #f7e8c2 0%, #dcbc7f 46%, #a47a43 100%);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --display: "Italiana", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  /* Original-Logo DIVA P. E.: Vektorpfade 1:1 aus DIVA_STAMP_PRODUCE.pdf (= LOGO_BON_DIVA.bmp), nur als Maske,
     d. h. ausschließlich einfarbig umgefärbt. Nie nachzeichnen, verzerren oder beschneiden. */
  --diva-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.601 2.756 65.353 65.353'%3E%3Cg fill='%23000'%3E%3Cpath transform='matrix(1,0,0,-1,14.0128,37.403898)' d='M0 0C1.451 .022 2.761 .293 3.933 .813 5.104 1.334 6.107 2.059 6.942 2.989 7.777 3.919 8.416 5.007 8.86 6.251 9.303 7.496 9.525 8.845 9.525 10.298 9.525 10.84 9.481 11.551 9.392 12.429 8.542 17.896 5.635 20.629 .673 20.629 .595 20.629 .475 20.624 .313 20.613 .151 20.602 .026 20.597-.063 20.597ZM-2.113 22.793H1.19C2.312 22.793 3.421 22.639 4.52 22.329 5.618 22.02 6.663 21.486 7.655 20.727 8.646 19.967 9.504 18.898 10.229 17.518 10.955 16.137 11.435 14.431 11.67 12.397 11.758 11.643 11.802 10.876 11.802 10.095 11.802 8.094 11.49 6.315 10.863 4.759 10.237 3.202 9.401 1.909 8.355 .878 7.309-.152 6.16-.922 4.907-1.431 3.655-1.941 2.416-2.196 1.19-2.196H-2.113Z'/%3E%3Cpath transform='matrix(1,0,0,-1,0,70.8661)' d='M29.786 31.266H27.736V56.255H29.786Z'/%3E%3Cpath transform='matrix(1,0,0,-1,37.8661,30.571099)' d='M0 0 3.687 15.96H5.8L0-9.029-5.58 15.96H-3.53Z'/%3E%3Cpath transform='matrix(1,0,0,-1,48.7633,17.539196)' d='M0 0V-3.067H3.749V0C3.749 .374 3.566 .661 3.201 .862 2.835 1.063 2.398 1.163 1.886 1.163 1.359 1.163 .913 1.063 .548 .862 .183 .661 0 .374 0 0M0-22.061H-2.113V-5.263H-3.201L-3.874-3.067H-2.113V0C-2.113 .802-1.916 1.467-1.519 1.993-1.123 2.519-.621 2.896-.014 3.124 .593 3.351 1.228 3.465 1.89 3.465 2.979 3.465 3.919 3.192 4.709 2.648 5.499 2.103 5.893 1.22 5.893 0V-22.061H3.749V-5.263H0Z'/%3E%3Cpath transform='matrix(1,0,0,-1,30.8097,50.580099)' d='M0 0C0-.92-.294-1.598-.875-2.016-1.421-2.409-1.999-2.666-2.595-2.781V2.597C-2.227 2.525-1.855 2.386-1.487 2.185-1.055 1.948-.694 1.633-.414 1.25-.139 .876 0 .455 0 0M.491 2.049C.026 2.606-.567 3.041-1.271 3.341-1.97 3.637-2.67 3.788-3.349 3.788-3.49 3.788-3.593 3.783-3.665 3.774L-3.812 3.753V-5.732H-2.595V-3.916C-2.444-3.884-2.234-3.839-1.962-3.779-1.58-3.694-1.147-3.529-.674-3.286-.186-3.036 .249-2.637 .62-2.099 .995-1.556 1.191-.843 1.205 .025V.072C1.205 .816 .965 1.481 .491 2.049'/%3E%3Cpath transform='matrix(1,0,0,-1,31.741,56.185396)' d='M0 0C-.213 0-.398 .075-.554 .223-.71 .372-.788 .555-.788 .771-.788 .983-.71 1.164-.554 1.312-.398 1.46-.213 1.534 0 1.534 .214 1.534 .396 1.461 .548 1.313 .701 1.166 .777 .986 .777 .771 .777 .553 .701 .37 .548 .222 .396 .074 .214 0 0 0'/%3E%3Cpath transform='matrix(1,0,0,-1,35.1138,50.282098)' d='M0 0H2.143L1.666 1.132H0V2.177H1.749V3.284H-1.196V1.132H-1.999L-1.598 0H-1.196V-6.03H1.749V-4.899H0Z'/%3E%3Cpath transform='matrix(1,0,0,-1,38.6107,56.185396)' d='M0 0C-.214 0-.398 .075-.554 .223-.71 .372-.788 .555-.788 .771-.788 .983-.71 1.164-.554 1.312-.398 1.46-.214 1.534 0 1.534 .213 1.534 .396 1.461 .548 1.313 .7 1.166 .777 .986 .777 .771 .777 .553 .7 .37 .548 .222 .396 .074 .213 0 0 0'/%3E%3Cpath transform='matrix(1,0,0,-1,54.7488,43.284399)' d='M0 0H-42.942-43.113V-.171-.968-1.139H-42.942 0 .171V-.968-.171 0Z'/%3E%3Cpath transform='matrix(1,0,0,-1,0,70.8661)' d='M2.193 4.349H64.362V66.518H2.193ZM65.954 2.757H.60100558V68.11H65.954Z'/%3E%3C/g%3E%3C/svg%3E");
  /* Blattgold: schräger Metallverlauf + wandernder Lichtreflex */
  --foil: linear-gradient(125deg, #a57c44 0%, #f1dcaa 26%, #c9a15f 44%, #fff1d2 57%, #b88a4b 76%, #ebd29c 100%);
  --shine: linear-gradient(107deg, transparent 40%, rgba(255, 249, 234, 0) 43%, rgba(255, 249, 234, .95) 50%, rgba(255, 249, 234, 0) 57%, transparent 60%);

  --glow: #e59a4f;
  --glow2: #ffc27a;
  --tint: #120c07;
  transition: --glow 1.2s ease, --glow2 1.2s ease, --tint 1.2s ease;
  color-scheme: dark;
  background: var(--noir);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
:root[data-track="club-mix"] {
  --glow: #6f4dff;
  --glow2: #3d47e0;
  --tint: #07060f;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overscroll-behavior-y: none; }   /* kein Pull-to-Refresh mitten im Song */
html { scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom)); }   /* Fokus nie hinter dem Let's-Do-Band */
/* NFC-Intro: dahinter nichts scrollen lassen (sonst kippt die Leiste und das Cover fliegt ins Leere) */
html.has-intro, html.has-intro body { overflow: hidden; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--noir);
  color: var(--ivory);
  font: 300 15px/1.5 var(--sans);
  letter-spacing: .01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, a, input { touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 1.5px solid var(--gold-hi); outline-offset: 3px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─────────────────────────── Atmosphäre ─────────────────────────── */
.backdrop {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: var(--tint);
  pointer-events: none;
}
.backdrop__img {
  position: absolute; inset: -18%;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
  animation: drift 42s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
:root[data-track="radio-mix"] .backdrop__img[data-bg="radio-mix"] { opacity: .32; filter: saturate(1.35) contrast(1.1); }
:root[data-track="club-mix"] .backdrop__img[data-bg="club-mix"] { opacity: .6; }

/* Abdunkeln zur Lesbarkeit, getönt in der Farbe der Tageszeit */
.backdrop::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--tint) 72%, transparent) 0%,
      color-mix(in srgb, var(--tint) 84%, transparent) 40%,
      color-mix(in srgb, var(--tint) 97%, transparent) 100%);
}
/* Lichtbahnen: Sonne durch die Tür am Morgen, Spot durch den Dunst in der Nacht */
.backdrop__shaft {
  position: absolute; inset: -30%; z-index: 1;
  background:
    radial-gradient(45% 32% at 22% 18%, color-mix(in srgb, var(--glow) 30%, transparent), transparent 70%),
    linear-gradient(112deg, transparent 38%, color-mix(in srgb, var(--glow2) 26%, transparent) 44%, transparent 49%),
    linear-gradient(112deg, transparent 54%, color-mix(in srgb, var(--glow2) 12%, transparent) 58%, transparent 62%);
  mix-blend-mode: screen;
  animation: sway 22s ease-in-out infinite alternate;
}
.backdrop__glow {
  position: absolute; z-index: 1;
  left: 50%; top: 30%;
  width: 150vmax; height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--glow) 42%, transparent) 0%,
    color-mix(in srgb, var(--glow) 14%, transparent) 38%,
    transparent 70%);
  mix-blend-mode: screen;
  opacity: .55;
  will-change: opacity, transform;
}
.backdrop__vignette {
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(120% 90% at 50% 38%, transparent 40%, rgba(0, 0, 0, .85) 100%);
}
.backdrop__grain {
  position: absolute; inset: -60px; z-index: 3;
  opacity: .085;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.1s steps(6) infinite;
}
@keyframes drift {
  from { transform: scale(1.05) translate3d(-2%, -1%, 0) rotate(-1deg); }
  to   { transform: scale(1.18) translate3d(2%, 2%, 0) rotate(1.5deg); }
}
@keyframes sway {
  from { transform: translate3d(-6%, 0, 0) rotate(-2deg); }
  to   { transform: translate3d(6%, 2%, 0) rotate(2deg); }
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-22px, 14px); }
  40% { transform: translate(18px, -26px); } 60% { transform: translate(-12px, -8px); }
  80% { transform: translate(26px, 20px); } 100% { transform: translate(0, 0); }
}

/* ─────────────────────────── Layout ─────────────────────────── */
.app {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  /* Halo darf leuchten, aber nie die Seite vergrößern: sonst pulsiert auf dem Desktop (1440×900) die
     Scrollleiste im Takt der Musik und das Layout springt seitlich. clip (nicht hidden) hält .ld sticky. */
  overflow-x: clip;
  overflow: clip;
  padding:
    env(safe-area-inset-top)
    max(16px, env(safe-area-inset-right))
    0
    max(16px, env(safe-area-inset-left));
}
.stage { flex: 1; display: flex; flex-direction: column; align-items: center; }
.deck { width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; }

/* Kopf: das Original-Logo in Blattgold über dem Schaufenster */
.top { padding-top: 14px; text-align: center; }
.brand { --brand: clamp(46px, 13.4vw, 52px); margin: 0 auto; width: var(--brand); height: var(--brand); }
.brand__logo, .intro__logo {
  display: block; width: 100%; height: 100%;
  -webkit-mask: var(--diva-logo) center / contain no-repeat;
  mask: var(--diva-logo) center / contain no-repeat;
  background-image: var(--shine), var(--foil);
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0, 0 0;
}
.brand__logo { animation: shine 2.6s cubic-bezier(.45, 0, .2, 1) 1.1s both; }
@keyframes shine { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }
.top__sub {
  margin: 10px 0 0;
  font-size: 10px; font-weight: 400; letter-spacing: .38em; text-transform: uppercase;
  color: var(--muted);
  padding-left: .38em;
}

/* Cover: das Schaufenster mit Goldrahmen */
.cover {
  --size: clamp(220px, min(84vw, calc(100vh - 524px)), 440px);
  position: relative;
  width: var(--size); aspect-ratio: 1 / 1;
  margin: 22px 0 0;
  perspective: 1200px;
}
@supports (height: 100svh) {
  .cover { --size: clamp(220px, min(84vw, calc(100svh - 524px)), 440px); }
}
.cover::before { /* Haarlinien-Rahmen wie der DIVA-P.E.-Kasten und der echte Bilderrahmen */
  content: ""; position: absolute; inset: -9px; z-index: 2;
  border: 1px solid transparent; border-image: var(--gold-frame) 1;
  opacity: .7;
  pointer-events: none;
}
.cover::after { /* kleine Raute oben mittig im Rahmen */
  content: ""; position: absolute; z-index: 2; left: 50%; top: -12.5px;
  width: 6px; height: 6px; margin-left: -3px;
  background: var(--gold); transform: rotate(45deg);
  box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 70%, transparent);
}
.cover__halo {
  position: absolute; inset: -28%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 55%, transparent), transparent 72%);
  opacity: .5;
  will-change: opacity, transform;
}
.cover__tilt {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .6s var(--ease);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.cover__breathe {
  position: absolute; inset: 0; overflow: hidden;
  background: #151210;
  box-shadow:
    0 60px 90px -45px rgba(0, 0, 0, .95),
    0 30px 70px -30px color-mix(in srgb, var(--glow) 55%, transparent);
  will-change: transform;
}
.cover__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.1s ease;
}
.cover__img.is-active { opacity: 1; }
.cover__glare {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at var(--gx, 30%) var(--gy, 20%), rgba(255, 240, 210, .22), transparent 70%);
  mix-blend-mode: screen; opacity: 0; transition: opacity .5s ease;
}
.cover.is-tilting .cover__glare { opacity: 1; }

/* Jetzt läuft */
.now { margin-top: 26px; text-align: center; transition: opacity .3s ease, filter .3s ease, transform .3s ease; }
.now.is-swapping { opacity: 0; filter: blur(6px); transform: translateY(4px); }
.eyebrow {
  margin: 0; font-size: 10.5px; font-weight: 400; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold);
}
.title {
  margin: 6px 0 4px;
  font: 400 clamp(38px, 11vw, 60px)/1.02 var(--display);
  letter-spacing: .04em;
}
.meta { margin: 0; font-size: 13px; letter-spacing: .06em; color: var(--muted); }

/* Wellenform: Messingstange mit Spiegelung im Marmorboden */
.scrub { width: 100%; margin-top: 18px; }
.wave {
  position: relative; height: 64px; cursor: pointer;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  outline-offset: 6px;
}
.wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wave__tip {
  position: absolute; bottom: calc(100% + 2px); left: 0;
  padding: 3px 7px; border-radius: 2px;
  font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .04em;
  background: rgba(11, 10, 12, .85); color: var(--gold-hi);
  border: 1px solid var(--gold-line);
  transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .2s;
}
.wave.is-hover .wave__tip { opacity: 1; }
.times {
  display: flex; justify-content: space-between; margin-top: 4px; padding: 0 6px;   /* bündig mit den Balken (Canvas-Innenrand 6px) */
  font-size: 11.5px; font-weight: 400; letter-spacing: .08em; font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* Bedienung */
.controls { display: flex; align-items: center; justify-content: center; gap: clamp(4px, 2.6vw, 16px); margin-top: 12px; }
.controls > * { flex: none; }
.ctl {
  position: relative; width: 52px; height: 52px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--ivory);
  transition: background .25s, color .25s, transform .15s;
}
.ctl svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ctl svg .fill { fill: currentColor; stroke: none; }
.ctl:active { transform: scale(.92); }
.ctl--sm { width: 46px; height: 46px; color: var(--muted); }
.ctl--sm svg { width: 20px; height: 20px; }
.ctl--xs { width: 44px; height: 44px; color: var(--muted); }
.ctl--xs svg { width: 18px; height: 18px; }
@media (hover: hover) { .ctl:hover { background: rgba(241, 234, 223, .07); color: var(--ivory); } }
#btn-repeat[data-mode="all"], #btn-repeat[data-mode="one"] { color: var(--gold); }
.ctl__badge {
  position: absolute; top: 9px; right: 7px;
  font-size: 8.5px; font-weight: 500; line-height: 1;
  color: var(--gold); opacity: 0;
}
#btn-repeat[data-mode="one"] .ctl__badge { opacity: 1; }

.play {
  position: relative; width: 78px; height: 78px; aspect-ratio: 1; margin: 0 4px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  color: #140e08;
  background: radial-gradient(circle at 34% 28%, #fbefd0 0%, #dfc083 44%, #a47a43 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 0 0 1px rgba(255, 236, 192, .35),
    0 16px 36px -12px color-mix(in srgb, var(--glow) 80%, transparent);
  transition: transform .2s var(--ease), box-shadow 1.2s ease;
}
.play:active { transform: scale(.94); }
.play__icon {
  position: absolute; width: 30px; height: 30px; fill: currentColor;
  transition: transform .45s var(--ease), opacity .3s ease;
}
.play__icon--pause { opacity: 0; transform: scale(.5) rotate(90deg); }
.is-playing .play__icon--play { opacity: 0; transform: scale(.5) rotate(-90deg); }
.is-playing .play__icon--pause { opacity: 1; transform: none; }
.play__ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid transparent; border-top-color: var(--gold-hi); border-right-color: rgba(244, 226, 182, .3);
  opacity: 0; transition: opacity .3s;
}
.is-waiting .play__ring { opacity: 1; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Lautstärke: nur mit Maus (iOS ignoriert sie ohnehin) */
.volume { display: none; align-items: center; gap: 6px; margin-top: 6px; }
@media (hover: hover) and (pointer: fine) { .volume { display: flex; } }
.no-volume .volume { display: none !important; }   /* iPad mit Trackpad: volume ist dort schreibgeschützt */
.is-muted .vol-wave { opacity: .15; }
#volume {
  --v: 100%;
  -webkit-appearance: none; appearance: none;
  width: 130px; height: 20px; background: transparent; cursor: pointer;
}
#volume::-webkit-slider-runnable-track {
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold) var(--v), rgba(241, 234, 223, .18) var(--v));
}
#volume::-moz-range-track { height: 2px; background: rgba(241, 234, 223, .18); }
#volume::-moz-range-progress { height: 2px; background: var(--gold); }
#volume::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px; margin-top: -4.5px;
  background: var(--gold-hi); border: 0; transform: rotate(45deg); border-radius: 1px;
}
#volume::-moz-range-thumb { width: 10px; height: 10px; background: var(--gold-hi); border: 0; border-radius: 1px; transform: rotate(45deg); }

/* Trackliste */
.tracks { width: 100%; margin-top: 40px; }
.tracks__label {
  display: flex; align-items: center; gap: 14px; margin: 0 0 14px;
  font-size: 10px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.tracks__label::before, .tracks__label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line)); }
.tracks__label::after { background: linear-gradient(270deg, transparent, var(--gold-line)); }
.tracks__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.track {
  position: relative; padding: 8px 8px 10px;
  border: 1px solid var(--line); border-radius: 3px;
  background: rgba(10, 9, 11, .42);
  transition: border-color .6s ease, background-color .6s ease;
}
.track.is-active {
  border-color: rgba(216, 185, 126, .46);
  background: color-mix(in srgb, var(--glow) 10%, rgba(10, 9, 11, .5));
}
.track__main {
  width: 100%; min-height: 64px; padding: 4px;
  display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center;
  border: 0; background: none; text-align: left;
}
.track__thumb { width: 56px; height: 56px; border-radius: 1px; box-shadow: 0 0 0 1px rgba(216, 185, 126, .25); }
.track__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.track__name { font: 400 23px/1.1 var(--display); letter-spacing: .03em; }
.track__meta { font-size: 12px; color: var(--muted); }
.track__meta > span { display: inline-block; white-space: nowrap; }   /* bricht nur zwischen Genre und Stimmung */
.track__end { display: flex; flex-direction: column; align-items: center; gap: 5px; padding-right: 6px; }   /* Equalizer unter der Laufzeit: kostet keine Textbreite */
.track__dur { font-size: 12px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.track.is-active .track__dur { color: var(--gold); }

/* Equalizer neben der Laufzeit, nur solange der Mix wirklich läuft */
.eq {
  display: flex; align-items: flex-end; gap: 2px; width: 10px; height: 11px;
  opacity: 0; transition: opacity .4s;
}
.eq i { width: 2px; height: 30%; background: var(--gold-hi); border-radius: 1px; }
.is-playing .track.is-active .eq { opacity: 1; }
.is-playing .track.is-active .eq i { animation: eq .9s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: -.3s !important; animation-duration: .7s !important; }
.eq i:nth-child(3) { animation-delay: -.6s !important; animation-duration: 1.1s !important; }
@keyframes eq { 0% { height: 20%; } 50% { height: 100%; } 100% { height: 45%; } }

.track__dl { display: flex; gap: 8px; margin-top: 8px; }
.dl {
  flex: 1; min-width: 0; min-height: 50px; padding: 8px 14px;
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--gold-line); border-radius: 2px;
  background: linear-gradient(180deg, rgba(216, 185, 126, .12), rgba(216, 185, 126, .03));
  color: var(--gold-hi); text-decoration: none;
  transition: background .25s, border-color .25s;
}
.dl svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dl__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.dl__label { font-size: 13.5px; font-weight: 400; letter-spacing: .02em; white-space: nowrap; }
.dl__size { font-size: 11px; color: var(--muted); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.dl-cover {
  flex: none; min-height: 50px; padding: 0 14px;
  display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: 2px;
  color: var(--muted); font-size: 12px; letter-spacing: .04em; text-decoration: none; white-space: nowrap;
  transition: color .25s, border-color .25s;
}
.dl-cover span { display: none; }
@media (min-width: 400px) { .dl-cover span { display: inline; white-space: pre; } }
@media (hover: hover) {
  .dl:hover { background: linear-gradient(180deg, rgba(216, 185, 126, .22), rgba(216, 185, 126, .08)); border-color: rgba(216, 185, 126, .7); }
  .dl-cover:hover { color: var(--ivory); border-color: rgba(241, 234, 223, .3); }
  .track__main:hover .track__name { color: var(--gold-hi); }
}

/* Fuß */
.foot { margin-top: 44px; padding-bottom: 14px; text-align: center; font-size: 11.5px; color: var(--faint); letter-spacing: .03em; }
.foot p { margin: 0; }
.foot__credit { text-wrap: balance; }
.foot__credit span { display: inline-block; }
.foot__links { margin-top: 2px !important; display: flex; justify-content: center; gap: 10px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ivory); }
.foot__note {
  margin-top: 2px !important;
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: rgba(241, 234, 223, .42);
}

/* Let's-Do-Band am unteren Rand. Logo 1:1: nie runden, nie beschneiden. */
.ld {
  position: sticky; bottom: 0; z-index: 5;
  width: 100%; max-width: 520px; margin: 10px auto 0;
  padding: 0 0 max(10px, env(safe-area-inset-bottom));
}
.ld::before { /* weicher Abschluss über die volle Breite: Inhalt taucht unter dem Band ab */
  content: ""; position: absolute; z-index: -1;
  left: 50%; width: 100vw; transform: translateX(-50%);
  top: -18px; bottom: 0;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--tint) 88%, transparent) 45%, var(--tint));
  pointer-events: none;
}
.ld__link {
  display: flex; align-items: center; gap: 12px;
  min-height: 54px; padding: 8px 14px 8px 8px;
  border: 1px solid rgba(216, 185, 126, .22); border-radius: 3px;   /* wie Karten und Knöpfe: scharf, Goldhaarlinie */
  background: rgba(12, 11, 13, .86);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8);
  color: var(--ivory); text-decoration: none;
}
.ld__logo { flex: none; width: 38px; height: auto; }
.ld__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ld__line { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld__line strong { font-weight: 500; }
.ld__sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld__arrow { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease), stroke .3s; }
@media (hover: hover) { .ld__link:hover .ld__arrow { transform: translateX(3px); stroke: #e3262b; } }

/* Toast – dunkles Glas mit Goldhaarlinie. Sitzt UNTER dem Logo (--toast-top setzt app.js aus der
   Unterkante des Kopfs; ist der Kopf weggescrollt, oben am Rand). Breite = Textbreite, höchstens
   Bildschirm − 32 px: left/right 0 + margin auto statt left:50%/translate, sonst kappt shrink-to-fit
   die Breite auf die halbe Viewportbreite und der Text bricht zum Klumpen um. */
.toast {
  position: fixed; left: 0; right: 0; z-index: 40;
  top: max(calc(12px + env(safe-area-inset-top)), var(--toast-top, 0px));
  width: max-content; max-width: calc(100vw - 32px); margin-inline: auto;
  padding: 10px 20px;
  background: rgba(14, 11, 12, .78);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--gold-line); border-radius: 20px;
  color: var(--ivory);
  font-size: 13px; font-weight: 400; letter-spacing: .03em; line-height: 1.45; text-align: center;
  text-wrap: balance;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(244, 226, 182, .10);
  transform: translateY(-10px); opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .35s var(--ease);
}
.toast.is-on { opacity: 1; transform: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .toast { background: rgba(14, 11, 12, .94); }
}

/* ─────────────────────────── Einblenden ─────────────────────────── */
[data-reveal] { animation: rise 1s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + 80ms); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cover[data-reveal] { animation-name: rise-cover; animation-duration: 1.4s; }
@keyframes rise-cover { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.ld { animation: rise 1s var(--ease) .7s both; }

/* ─────────────────────────── Intro (NFC-Rahmen / QR) ───────────────────────────
   Wie das Öffnen einer Geschenkbox: schwarzer Vorhang → das Logo erscheint im Streiflicht →
   es hebt sich wie ein Deckel → darunter steigt das Cover mit Goldrahmen auf → Widmung → Siegel.
   Phasen per Klasse: is-reveal → is-open (Geschenk/Laden) oder is-lift (Aus) → is-armed → is-leaving */
.intro { display: none; }
.has-intro .intro {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  /* unten Platz für die Zeile Impressum · Datenschutz, damit die Bühne nie in sie hineinragt */
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) calc(38px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  touch-action: none; overscroll-behavior: contain;
  overflow: hidden;
}
.has-intro .app [data-reveal], .has-intro .ld { animation-play-state: paused; }
.has-intro .app.is-in [data-reveal], .has-intro .app.is-in .ld { animation-play-state: running; }
.has-intro .app:not(.is-in) { visibility: hidden; }

.intro__room {   /* der Raum hinter dem Vorhang: warmes Licht aus der Box */
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 46% at 50% 44%, color-mix(in srgb, var(--glow) 24%, transparent), transparent 72%),
    rgba(8, 6, 5, .58);
  transition: opacity .9s ease;
}
.intro__curtain { position: absolute; inset: 0; background: #050405; }
.intro.is-open .intro__curtain { opacity: 0; transition: opacity 1.8s cubic-bezier(.5, 0, .3, 1) .15s; }
.intro.is-lift .intro__curtain { opacity: 0; transition: opacity 1.4s cubic-bezier(.5, 0, .3, 1) .45s; }
.intro__stage { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Logo: zuerst groß in der Mitte (JS setzt --lx/--ly/--ls), dann hebt es sich an seinen Platz */
.intro__mark {
  --logo: clamp(58px, min(22vw, 11vh), 104px);
  position: relative; z-index: 2; flex: none;   /* der Deckel liegt immer über dem aufsteigenden Cover */
  width: var(--logo); height: var(--logo);
  transform: translate(var(--lx, 0px), var(--ly, 0px)) scale(var(--ls, 1));
}
@supports (height: 100svh) { .intro__mark { --logo: clamp(58px, min(22vw, 11svh), 104px); } }
/* Der Deckel hebt sich zügig; das Cover steigt erst auf, wenn er den Weg frei gemacht hat (nie Gold über dem Foto) */
.intro.is-open .intro__mark { transform: none; transition: transform 1s cubic-bezier(.55, 0, .2, 1); }
.intro__logo { position: relative; clip-path: polygon(-40% 0, -40% 0, -70% 100%, -70% 100%); }
.intro.is-reveal .intro__logo { animation: foil-reveal 1.05s cubic-bezier(.55, .05, .25, 1) forwards, shine 1.05s cubic-bezier(.55, .05, .25, 1) forwards; }
.intro.is-open .intro__logo, .intro.is-lift .intro__logo { clip-path: none; animation: shine-idle 6.5s ease-in-out 1.4s infinite; }
@keyframes foil-reveal {
  from { clip-path: polygon(-40% 0, -40% 0, -70% 100%, -70% 100%); }
  to   { clip-path: polygon(-40% 0, 140% 0, 110% 100%, -70% 100%); }
}
@keyframes shine-idle {
  0%, 62% { background-position: 100% 0, 0 0; }
  100% { background-position: 0% 0, 0 0; }
}
.intro__aura {
  position: absolute; inset: -70%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(236, 196, 128, .30), rgba(229, 154, 79, .10) 45%, transparent 72%);
  opacity: 0; transform: scale(.6);
}
.intro.is-reveal .intro__aura { opacity: 1; transform: none; transition: opacity 1.6s ease .2s, transform 2.2s var(--ease) .1s; }
.intro.is-open .intro__aura { opacity: .55; transition: opacity 1.4s ease; }
.intro__glint {   /* Funkeln an der oberen rechten Kastenecke, wenn das Streiflicht dort ankommt */
  position: absolute; right: -15px; top: -15px; width: 30px; height: 30px; pointer-events: none;
  background:
    radial-gradient(closest-side, #fffaf0, rgba(255, 244, 214, .6) 30%, transparent 70%) center / 10px 10px no-repeat,
    linear-gradient(90deg, transparent, rgba(255, 246, 222, .95), transparent) center / 100% 1.5px no-repeat,
    linear-gradient(0deg, transparent, rgba(255, 246, 222, .95), transparent) center / 1.5px 100% no-repeat;
  opacity: 0; transform: scale(0) rotate(-30deg);
}
.intro.is-reveal .intro__glint { animation: glint 1s ease-out .82s both; }
@keyframes glint {
  0% { opacity: 0; transform: scale(0) rotate(-30deg); }
  35% { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(.4) rotate(40deg); }
}

/* Cover steigt aus der Box, der Goldrahmen zeichnet sich von der Raute aus */
.intro__cover {
  position: relative; flex: none;
  width: clamp(150px, min(70vw, calc(100vh - 410px)), 400px); aspect-ratio: 1 / 1;
  margin-top: clamp(26px, 4.4vh, 40px);
  opacity: 0; transform: translateY(40px) scale(.96);
  background: #151210;   /* falls das Bild doch noch dekodiert: dunkles Quadrat statt Loch */
}
@supports (height: 100svh) {
  .intro__cover { width: clamp(150px, min(70vw, calc(100svh - 410px)), 400px); margin-top: clamp(26px, 4.4svh, 40px); }
}
.intro.is-open .intro__cover { opacity: 1; transform: none; transition: opacity 1.2s ease .55s, transform 1.6s var(--ease) .45s; }
.intro__cover img {
  width: 100%; height: 100%; object-fit: cover;
  box-shadow: 0 60px 90px -40px rgba(0, 0, 0, .95), 0 30px 80px -30px color-mix(in srgb, var(--glow) 60%, transparent);
}
.intro__sweep { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.intro__sweep::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 60%;
  background: linear-gradient(105deg, transparent 10%, rgba(255, 238, 205, .06) 35%, rgba(255, 242, 215, .34) 50%, rgba(255, 238, 205, .06) 65%, transparent 90%);
  mix-blend-mode: screen; transform: translateX(0);
}
.intro.is-open .intro__sweep::before { animation: sweep 2.4s cubic-bezier(.5, 0, .3, 1) 1.6s both; }
@keyframes sweep { from { transform: translateX(0); } to { transform: translateX(280%); } }
.frame { position: absolute; inset: -9px; pointer-events: none; }
.frame i { position: absolute; display: block; background: var(--gold-frame); opacity: .78; }
.frame__t { left: 0; right: 0; top: 0; height: 1px; transform: scaleX(0); }
.frame__l, .frame__r { top: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: top; }
.frame__l { left: 0; } .frame__r { right: 0; }
.frame__bl, .frame__br { bottom: 0; height: 1px; transform: scaleX(0); }
.frame__bl { left: 0; right: 50%; transform-origin: left; }
.frame__br { left: 50%; right: 0; transform-origin: right; }
.frame .frame__gem {
  left: 50%; top: -3.5px; width: 6px; height: 6px; margin-left: -3px; opacity: 1;
  background: var(--gold-hi); box-shadow: 0 0 12px rgba(244, 226, 182, .8);
  transform: rotate(45deg) scale(0);
}
.intro.is-open .frame__gem { transform: rotate(45deg) scale(1); transition: transform .7s cubic-bezier(.3, 1.6, .5, 1) .85s; }
.intro.is-open .frame__t { transform: none; transition: transform 1s cubic-bezier(.65, 0, .25, 1) 1.05s; }
.intro.is-open .frame__l, .intro.is-open .frame__r { transform: none; transition: transform 1.1s cubic-bezier(.65, 0, .25, 1) 1.7s; }
.intro.is-open .frame__bl, .intro.is-open .frame__br { transform: none; transition: transform .9s cubic-bezier(.65, 0, .25, 1) 2.45s; }

/* Widmung (Geschenk) bzw. Begrüßung (Laden): Buchstabe für Buchstabe aus dem Unscharfen */
.intro__line {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: clamp(22px, 3.8vh, 34px) 0 0; min-height: 1.25em;
  font: 400 clamp(27px, 8.2vw, 38px)/1.25 var(--display); letter-spacing: .14em;
  color: #f6ecda;
}
.intro__line:not(.has-text) { visibility: hidden; }
.intro__text { max-width: min(74vw, 540px); padding-left: .14em; text-wrap: balance; }
.intro__text .w { display: inline-block; white-space: nowrap; }
.intro__text .c { display: inline-block; opacity: 0; filter: blur(7px); transform: translateY(.28em); }
.intro.is-open .intro__text .c {
  opacity: 1; filter: none; transform: none;
  transition: opacity 1s ease, filter 1.1s ease, transform 1.3s var(--ease);
  transition-delay: calc(1.5s + var(--i) * var(--step, 55ms));
}
.intro__rule { flex: none; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); transform: scaleX(0); transform-origin: right; }
.intro__rule:last-child { background: linear-gradient(270deg, transparent, var(--gold)); transform-origin: left; }
.intro.is-open .intro__rule { transform: none; transition: transform 1.4s var(--ease) 1.85s; }
.intro__line.is-mid { font-size: clamp(21px, 6vw, 29px); letter-spacing: .1em; gap: 12px; }
.intro__line.is-mid .intro__rule { width: 22px; }
.intro__line.is-long { font-size: clamp(19px, 5.2vw, 25px); letter-spacing: .06em; }
.intro__line.is-long .intro__rule { display: none; }
@media (max-width: 479px) { .intro__line.is-mid .intro__rule { display: none; } }

/* Das Siegel: runder Goldknopf, atmet ruhig, bis jemand tippt */
.seal {
  --seal: 76px;
  position: relative; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  margin-top: clamp(22px, 3.8vh, 34px); padding: 4px 22px 2px;
  border: 0; background: none; color: var(--ivory);
  opacity: 0; transform: translateY(16px); pointer-events: none;
}
/* --seal-at setzt app.js: das Siegel kommt, sobald die Widmung lesbar dasteht (nie davor, frühestens 2,05 s) */
.intro.is-open .seal { opacity: 1; transform: none; transition: opacity 1.1s ease var(--seal-at, 2.05s), transform 1.3s var(--ease) var(--seal-at, 2.05s); }
/* Tippbar erst, wenn man es sieht (JS setzt is-ready): ein Tipp ins Dunkle überspringt nie die Widmung */
.intro.is-ready .seal { pointer-events: auto; }
.seal:focus-visible { outline: none; }
.seal:focus-visible .seal__disc { outline: 1.5px solid var(--gold-hi); outline-offset: 6px; }   /* auch beim Atmen frei vom Schriftzug */
.seal__disc {
  position: relative; width: var(--seal); height: var(--seal); border-radius: 50%;
  display: grid; place-items: center; color: #140e08;
  background: radial-gradient(circle at 34% 28%, #fdf3da 0%, #e2c487 42%, #a47a43 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -8px 16px -8px rgba(90, 60, 20, .55),
    0 0 0 1px rgba(255, 236, 192, .35),
    0 20px 44px -14px color-mix(in srgb, var(--glow) 95%, transparent);
  transition: transform .25s var(--ease), box-shadow .6s ease;
}
.seal__disc::before {   /* atmender Lichthof */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(244, 226, 182, .4);
}
.intro.is-open .seal__disc::before { animation: halo 3.4s ease-out calc(var(--seal-at, 2.05s) + 1.2s) infinite; }
.intro.is-open .seal__disc { animation: breathe 3.4s ease-in-out calc(var(--seal-at, 2.05s) + 1.2s) infinite; }
@keyframes halo {
  0% { box-shadow: 0 0 0 0 rgba(244, 226, 182, .42), 0 0 28px 2px rgba(236, 180, 100, 0); }
  45% { box-shadow: 0 0 0 10px rgba(244, 226, 182, .10), 0 0 44px 10px rgba(236, 180, 100, .30); }
  100% { box-shadow: 0 0 0 20px rgba(244, 226, 182, 0), 0 0 44px 4px rgba(236, 180, 100, 0); }
}
@keyframes breathe { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.04); } }
.seal:active .seal__disc { transform: scale(.94); animation: none; }
.seal__icon { width: 30px; height: 30px; margin-left: 3px; fill: currentColor; transition: opacity .3s ease, transform .4s var(--ease); }
.seal__ring {
  position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px);
  opacity: 0; transition: opacity .5s ease; overflow: visible;
}
.seal__ring circle { fill: none; stroke: url(#seal-g); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 96 200; }
.intro.is-loading .seal__ring { opacity: 1; animation: spin 1.15s linear infinite; }
.seal__label {
  font-size: 11px; font-weight: 500; letter-spacing: .36em; text-transform: uppercase; padding-left: .36em;
  color: var(--gold-hi); transition: opacity .3s ease;
}
.intro.is-armed .seal { pointer-events: none; }
.intro.is-armed .seal__disc {
  animation: none; transform: scale(.97);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 1px rgba(255, 236, 192, .5), 0 0 60px 8px rgba(244, 206, 140, .55);
}
.intro.is-armed .seal__disc::before { animation: none; }
.intro.is-sounding .seal__label { opacity: 0; }   /* die Musik läuft schon, die Widmung steht noch kurz */
.intro.is-loading .seal__icon { opacity: .35; transform: scale(.85); }

.intro__hint {
  margin: 14px 0 0; font-size: 10px; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; padding-left: .32em;
  color: var(--faint); opacity: 0;
}
.intro.is-open .intro__hint { opacity: 1; transition: opacity 1.2s ease calc(var(--seal-at, 2.05s) + .5s); }

/* Impressum/Datenschutz: auch im Intro erreichbar, ohne die Musik starten zu müssen */
.intro__legal {
  position: absolute; left: 0; right: 0; bottom: max(2px, env(safe-area-inset-bottom)); z-index: 1;
  margin: 0; display: flex; justify-content: center; align-items: center;
  font-size: 9.5px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase;
  color: var(--faint); opacity: 0;
}
.intro__legal a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px 0 calc(12px + .26em);
  color: inherit; text-decoration: none; visibility: hidden;
}
.intro__legal span { opacity: .6; }
.intro.is-open .intro__legal { opacity: 1; transition: opacity 1.2s ease 2.3s; }
.intro.is-open .intro__legal a { visibility: visible; transition: visibility 0s 2.3s; }
@media (hover: hover) { .intro__legal a:hover { color: var(--ivory); } }
.intro.is-leaving .intro__legal { opacity: 0; transition: opacity .4s ease; }

/* Goldener Lichtblitz aus dem Siegel beim Tippen */
.intro__bloom {
  position: absolute; left: var(--bx, 50%); top: var(--by, 70%);
  width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 244, 220, .9), rgba(240, 200, 128, .45) 22%, rgba(229, 154, 79, .12) 50%, transparent 72%);
  mix-blend-mode: screen; pointer-events: none;
  opacity: 0; transform: scale(.02);
}
.intro.is-armed .intro__bloom { animation: bloom 1.6s cubic-bezier(.2, .7, .1, 1) forwards; }
@keyframes bloom {
  0% { opacity: 0; transform: scale(.02); }
  14% { opacity: .95; }
  100% { opacity: 0; transform: scale(1); }
}

/* Abgang: Inhalt verblasst, Cover und Logo fliegen an ihre Plätze im Player (JS, FLIP) */
.intro.is-leaving .intro__room { opacity: 0; }
.intro.is-leaving .intro__aura { opacity: 0; transition: opacity .5s ease; }
.intro.is-leaving .intro__line,
.intro.is-leaving .seal,
.intro.is-leaving .intro__hint {
  opacity: 0; transform: translateY(-8px); filter: blur(4px);
  transition: opacity .5s ease, transform .5s ease, filter .5s ease;
}
.intro.is-leaving .frame { opacity: 0; transition: opacity .5s ease; }   /* der Player-Rahmen übernimmt */

/* Querformat-Handys: Cover links, Logo + Widmung + Siegel rechts */
@media (orientation: landscape) and (max-height: 540px) {
  .intro__stage {
    display: grid; grid-template-columns: auto auto; grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: clamp(28px, 7vw, 80px); align-items: center; justify-items: center;
  }
  .intro__cover { grid-column: 1; grid-row: 1 / 7; margin: 0; width: clamp(140px, min(44vw, calc(100vh - 64px)), 400px); }
  .intro__mark { grid-column: 2; grid-row: 2; --logo: clamp(46px, 16vh, 78px); }
  .intro__line { grid-column: 2; grid-row: 3; margin-top: 16px; font-size: clamp(20px, 6.4vh, 28px); }
  .intro__text { max-width: 40vw; }
  .seal { grid-column: 2; grid-row: 4; margin-top: 16px; --seal: 60px; gap: 12px; }
  .intro__hint { grid-column: 2; grid-row: 5; margin-top: 8px; }
  /* lange Widmung (bis 60 Zeichen): klein genug, dass das Logo oben nie angeschnitten wird */
  .intro__line.is-mid, .intro__line.is-long { font-size: clamp(15px, 5.4vh, 21px); letter-spacing: .05em; }
  .intro.has-long-line .intro__text { max-width: min(46vw, 440px); }
  .intro__legal { justify-content: flex-end; padding-right: max(8px, env(safe-area-inset-right)); }
}
@supports (height: 100svh) {
  @media (orientation: landscape) and (max-height: 540px) {
    .intro__cover { width: clamp(140px, min(44vw, calc(100svh - 64px)), 400px); }
    .intro__mark { --logo: clamp(46px, 16svh, 78px); }
  }
}
@media (orientation: portrait) and (max-height: 680px) {
  .seal { --seal: 64px; gap: 10px; }
  .intro__hint { margin-top: 10px; }
}
/* Sehr niedrige Schirme (iPhone SE mit Display-Zoom, Handy quer mit Leisten): der Hinweis ist Zierde und weicht
   Impressum/Datenschutz; bei langer Widmung wird das Cover kleiner, damit das Logo nie oben anstößt */
@media (orientation: portrait) and (max-height: 500px) {
  .intro__hint { display: none; }
  .intro__cover { margin-top: 20px; }
  .intro__line { margin-top: 14px; }
  .seal { margin-top: 12px; --seal: 56px; gap: 9px; }
  .intro.has-long-line .intro__cover { width: 110px; }
}
@media (orientation: landscape) and (max-height: 360px) {
  .intro__hint { display: none; }
}

/* ─────────── Kurze Handys (iPhone mit Safari-Leisten, SE): alles über dem Band ─────────── */
@media (max-width: 599px) and (max-height: 760px) {
  .top { padding-top: 12px; }
  .brand { --brand: 42px; }
  .top__sub { margin-top: 7px; }
  .cover { --size: clamp(150px, min(80vw, calc(100vh - 446px)), 400px); margin-top: 18px; }
  .now { margin-top: 16px; }
  .title { font-size: 34px; margin: 4px 0 2px; }
  .scrub { margin-top: 8px; }
  .wave { height: 54px; }
  .controls { margin-top: 4px; }
  .play { width: 70px; height: 70px; }
}
@supports (height: 100svh) {
  @media (max-width: 599px) and (max-height: 760px) {
    .cover { --size: clamp(150px, min(80vw, calc(100svh - 446px)), 400px); }
  }
}
/* Handys: Beschriftung der Trackliste lugt knapp über dem Band hervor – zeigt, dass unten noch was kommt.
   --room = Platz, den das Cover hätte; --cov = tatsächliche Covergröße (gedeckelt). Was der Deckel übrig lässt,
   geht als Abstand vor die Trackliste: so bleibt die Beschriftung auch auf großen Handys am Band, und keine Karte
   wird vom Band durchschnitten. 11.2vw = Zeilenhöhe des Titels (wächst mit der Breite). */
@media (max-width: 639px) {
  .stage {
    --room: calc(100vh - 480px - 11.2vw - max(0px, env(safe-area-inset-bottom) - 10px));
    --cov: clamp(220px, min(84vw, var(--room)), 440px);
  }
  .cover { --size: var(--cov); }
  .tracks { margin-top: max(18px, calc(18px + var(--room) - var(--cov))); scroll-margin-top: 24px; }
}
@supports (height: 100svh) {
  @media (max-width: 639px) {
    .stage { --room: calc(100svh - 480px - 11.2vw - max(0px, env(safe-area-inset-bottom) - 10px)); }
  }
}
@media (max-width: 599px) and (max-height: 760px) {
  .stage {
    --room: calc(100vh - 446px - max(0px, env(safe-area-inset-bottom) - 10px));
    --cov: clamp(150px, min(80vw, var(--room)), 400px);
  }
}
@supports (height: 100svh) {
  @media (max-width: 599px) and (max-height: 760px) {
    .stage { --room: calc(100svh - 446px - max(0px, env(safe-area-inset-bottom) - 10px)); }
  }
}
@media (max-width: 359px) {
  .ld__pre { display: none; }
  .controls { gap: 2px; }
  .ctl, .ctl--sm { width: 44px; height: 44px; }
  .play { margin: 0 2px; }
}

/* ─────────────────────────── Tablet ─────────────────────────── */
@media (min-width: 640px) {
  .tracks__list { grid-template-columns: 1fr 1fr; }
  .deck { max-width: 620px; }
  .scrub, .now { max-width: 480px; }
  .track__main { grid-template-columns: 48px 1fr auto; gap: 12px; }
  .track__thumb { width: 48px; height: 48px; }
  .dl-cover span { display: none; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  /* Tablet hochkant: Cover so bemessen, dass die Beschriftung der Trackliste über dem Let's-Do-Band hervorlugt */
  .cover { --size: clamp(240px, min(62vw, calc(100vh - 600px)), 470px); }
  @supports (height: 100svh) { .cover { --size: clamp(240px, min(62vw, calc(100svh - 600px)), 470px); } }
  .tracks { margin-top: 22px; scroll-margin-top: 24px; }
  .ld { max-width: 620px; }   /* bündig mit der Trackliste: der Schleier deckt die Karten ganz */
  .ld::before { top: -48px; }   /* Karten tauchen weich unter dem Band ab statt an seiner Kante abzubrechen */
}

/* ─────────────────────── Desktop & Querformat: zwei Spalten ─────────────────────── */
@media (min-width: 1024px), (min-width: 600px) and (orientation: landscape) and (max-height: 720px) {
  .app { padding-left: clamp(32px, 5vw, 80px); padding-right: clamp(32px, 5vw, 80px); }
  .top { padding-top: 20px; }
  .brand { --brand: 64px; }
  .stage {
    display: grid; grid-template-columns: auto minmax(300px, 470px);
    gap: clamp(36px, 7vw, 120px); align-items: center; align-content: center; justify-content: center;
    width: 100%; max-width: 1200px; margin: 0 auto; padding: 12px 0 6px;
  }
  .cover {
    --size: clamp(220px, min(42vw, calc(100vh - 210px)), 600px);
    margin: 0;
  }
  @supports (height: 100svh) { .cover { --size: clamp(220px, min(42vw, calc(100svh - 210px)), 600px); } }
  .deck { align-items: stretch; max-width: none; }
  .now { text-align: left; margin-top: 0; max-width: none; }
  .title { font-size: 64px; margin-top: 10px; }
  .scrub { max-width: none; margin-top: 26px; }
  .controls { justify-content: flex-start; margin-left: -10px; margin-top: 14px; }
  .volume { margin-left: -8px; }
  .tracks { margin-top: 30px; }
  .tracks__list { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .tracks__label::before { display: none; }
  .tracks__label { gap: 16px; }
  .track__meta { font-size: 11.5px; line-height: 1.35; }
  .track__main { grid-template-columns: 44px 1fr auto; gap: 12px; min-height: 56px; }
  .track__thumb { width: 44px; height: 44px; }
  .track__name { font-size: 21px; }
  .track__dl { flex-direction: column; gap: 2px; }
  .dl { min-height: 48px; }
  .dl-cover { min-height: 34px; justify-content: center; border: 0; font-size: 11.5px; }
  .dl-cover span { display: inline; white-space: pre; }
  .backdrop__glow { left: 33%; top: 52%; }
  .foot { margin-top: 8px; padding-bottom: 4px; }
  @media (hover: hover) and (pointer: fine) { .foot a { min-height: 32px; } }
  /* Auf dem Desktop passt alles auf einen Schirm: das Band steht einfach unten, ohne Kleben und Schleier */
  .ld { position: relative; margin-top: 6px; max-width: 520px; }
  .ld::before { display: none; }
}
/* Querformat mittlerer Breite (Handy quer, kleines Tablet quer): schmaleres Cover, damit die Bedienung
   nie an den Rand stößt; das Cover bleibt beim Scrollen zur Trackliste stehen */
@media (min-width: 600px) and (max-width: 1023px) and (orientation: landscape) and (max-height: 720px) {
  .app { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
  .stage { grid-template-columns: auto minmax(0, 470px); gap: clamp(24px, 4.5vw, 56px); align-items: start; }
  .cover { --size: clamp(190px, min(38vw, calc(100vh - 150px)), 420px); position: sticky; top: 16px; }
  @supports (height: 100svh) { .cover { --size: clamp(190px, min(38vw, calc(100svh - 150px)), 420px); } }
  .controls { gap: 6px; }
}
@media (min-width: 600px) and (max-height: 760px) {
  .tracks { margin-top: 20px; }
  .title { font-size: 52px; }
  .top { padding-top: 14px; }
  .brand { --brand: 48px; }
  .top__sub { display: none; }
}

/* ─────────────────────────── Weniger Bewegung ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .backdrop__img, .backdrop__shaft, .backdrop__grain { animation: none; }
  .is-playing .track.is-active .eq i { animation: none; height: 70%; }
  [data-reveal], .ld { animation-duration: .01s !important; animation-delay: 0s !important; }
  .brand__logo { animation: none; }
  .cover__tilt { transition: none; }
  /* Intro: nur ruhiges Überblenden, nichts fliegt, nichts funkelt */
  .intro *, .intro *::before { animation: none !important; transition-property: opacity !important; transition-duration: .6s !important; transition-delay: 0s !important; }
  .intro__mark, .intro__cover, .intro__text .c, .seal, .intro__rule, .frame i, .intro__aura { transform: none !important; filter: none !important; }
  .frame .frame__gem { transform: rotate(45deg) !important; }
  .intro__logo { clip-path: none !important; opacity: 0; }
  .intro.is-reveal .intro__logo { opacity: 1; }
  .intro__glint, .intro__bloom, .intro__sweep { display: none; }
  .intro.is-loading .seal__ring { opacity: 1; }
  .intro__curtain { transition: opacity .6s ease !important; }
}