/* ==========================================================================
   Dakota Lane – Offizielle Website
   Design: reduziert, schwarz/weiß, Gold-Neon-Akzent (80s Euro Disco)
   ========================================================================== */

/* ---------- Fonts (lokal gehostet, DSGVO-freundlich) ----------
   Vier Familien mit klarer Aufgabe:
     Bebas Neue          Schriftzug und der Songname im Kopfbereich
     M PLUS Rounded 1c   Oberflaeche: Ueberschriften, Navigation, Etiketten
     Nunito Sans         alles Grosse: Songtitel, Ueberschriften, Fragen
     Geist               Fliesstext
   Alle drei letzten koennen Kyrillisch, sonst braechen /ru/ und /uk/. */

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bebas-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bebas Neue kennt kein Kyrillisch. Damit die Ueberschriften auf /ru/
   und /uk/ nicht in eine Systemschrift fallen, steht Oswald dahinter -
   ebenfalls schmal. Laedt nur, wenn kyrillische Zeichen vorkommen. */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/oswald-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bebas-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/mplus-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/mplus-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/mplus-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/mplus-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/mplus-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/mplus-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/nunito-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/geist-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- Design-Tokens ---------- */
:root {
  --ink:        #08080a;
  --ink-soft:   #0f0f13;
  --surface:    #141419;
  --surface-2:  #1b1b21;
  --paper:      #ffffff;
  --muted:      rgba(255, 255, 255, .60);
  --muted-2:    rgba(255, 255, 255, .40);
  --line:       rgba(255, 255, 255, .12);
  --line-soft:  rgba(255, 255, 255, .07);

  --gold:       #e9b55c;
  --gold-light: #f7d79b;
  --pink:       #ff3d8a;
  --accent-grad: linear-gradient(100deg, var(--gold) 0%, var(--gold-light) 38%, var(--pink) 100%);

  /* Die japanischen Schriften am Ende greifen zeichenweise:
     Lateinische Buchstaben bleiben Bebas Neue bzw. Inter. */
  --font-cjk: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic Medium', 'Yu Gothic', Meiryo, 'MS PGothic';
  --font-mark: 'Bebas Neue', 'Oswald', var(--font-cjk), 'Arial Narrow', sans-serif;
  --font-ui:   'M PLUS Rounded 1c', 'Segoe UI', var(--font-cjk), system-ui, sans-serif;
  --font-song: 'Nunito Sans', 'Segoe UI', var(--font-cjk), sans-serif;   /* alles Grosse */
  --font-body: 'Geist', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, var(--font-cjk), sans-serif;
  /* Verweis: alle bestehenden Stellen erben damit die Oberflaechenschrift.
     Wer Nunito oder Bebas will, setzt --font-song bzw. --font-mark gezielt. */
  --font-display: var(--font-ui);

  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 118px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

/* Muss nach den Komponenten-Regeln greifen: mehrere Bausteine (Buttons,
   Lightbox, Sprachblöcke) werden per hidden-Attribut ein- und ausgeblendet. */
[hidden] { display: none !important; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--gold); color: #000; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; background: var(--gold); color: #000;
  padding: .65rem 1.25rem; font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- Typografie-Bausteine ---------- */
.eyebrow {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
}
.eyebrow--muted { color: var(--muted-2); }

.display {
  font-family: var(--font-mark);
  font-weight: 400;
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section-head__title { font-size: clamp(2.4rem, 5.6vw, 4rem); }
.section-head .eyebrow { margin-bottom: .6rem; }
.section-head__note {
  font-size: .82rem;
  color: var(--muted);
  letter-spacing: .04em;
  max-width: 34ch;
}

.section { padding-block: clamp(4.5rem, 9vw, 8rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--alt { background: var(--ink-soft); }

.rule {
  height: 1px;
  background: var(--line-soft);
  border: 0;
  margin: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1rem 2.1rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: transform .35s var(--ease), background-color .3s, color .3s, border-color .3s, box-shadow .35s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }

.btn--primary {
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-light) 38%, var(--pink) 100%);
  color: #17110a;
  box-shadow: 0 10px 40px -14px rgba(233, 181, 92, .8);
}
.btn--primary:hover { box-shadow: 0 18px 50px -14px rgba(255, 61, 138, .75); }

.btn--ghost {
  border-color: var(--line);
  color: var(--paper);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--paper); background: rgba(255, 255, 255, .06); }

.btn--sm { padding: .78rem 1.5rem; font-size: .68rem; }

/* ---------- Kopfbereich ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.25rem;
  transition: padding .45s var(--ease);
}
/* Der Unschärfe-Hintergrund liegt bewusst in einem Pseudo-Element:
   backdrop-filter direkt auf .site-header würde für das mobile
   Overlay-Menü einen neuen Bezugsrahmen (containing block) erzeugen. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 10, .86);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.site-header.is-stuck { padding-block: .75rem; }
.site-header.is-stuck::before { opacity: 1; }

.site-header__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.wordmark {
  position: relative;
  z-index: 3;
  grid-column: 2;
  justify-self: center;
  display: block;
  text-align: center;
  font-family: var(--font-mark);
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  letter-spacing: .22em;
  line-height: 1;
  padding-left: .22em; /* optischer Ausgleich zum Letterspacing */
  transition: opacity .3s;
}
.wordmark:hover { opacity: .75; }

/* Schimmer über dem Schriftzug: ein Lichtreflex, der langsam durchwandert.
   Nur im Kopfbereich, damit der Footer ruhig bleibt. */
.site-header .wordmark {
  background: linear-gradient(100deg,
    #fff 0%, #fff 36%,
    var(--gold-light) 44%, var(--gold) 49%, var(--pink) 54%,
    #fff 62%, #fff 100%);
  background-size: 320% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wordmarkShine 7s ease-in-out infinite;
  transition: letter-spacing .5s var(--ease), padding-left .5s var(--ease);
}
/* Beim Überfahren gehen nur die Buchstaben auseinander.
   Hier bewusst kein background gesetzt: Die Kurzschreibweise würde
   background-clip mit zurücksetzen, der Verlauf liefe dann über die
   ganze Fläche statt durch die Buchstaben – der Name wäre weg. */
.site-header .wordmark:hover {
  opacity: 1;
  letter-spacing: .34em;
  padding-left: .34em;
}
.site-header .wordmark small {
  /* Der Untertitel bleibt gedeckt und nimmt am Schimmer nicht teil. */
  color: var(--muted-2);
}
@keyframes wordmarkShine {
  0%, 100% { background-position: 135% 0; }
  50%      { background-position: -35% 0; }
}
/* Sicherheitsnetz: Wo background-clip:text fehlt, bliebe der Schriftzug
   sonst unsichtbar. Dann schlicht weiß setzen. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .site-header .wordmark { background: none; color: var(--paper); animation: none; }
}
.wordmark small {
  display: block;
  font-family: var(--font-body);
  font-size: .52rem;
  font-weight: 500;
  letter-spacing: .42em;
  color: var(--muted-2);
  margin-top: .45rem;
  padding-left: .42em;
}

.site-nav {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.1rem, 2.4vw, 2.4rem);
  margin-top: 1rem;
}
.site-nav a {
  position: relative;
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  padding-block: .3rem;
  transition: color .3s;
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.site-nav a:hover, .site-nav a.is-active { color: var(--paper); }
.site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); }

/* Rechte Kopfzeilen-Gruppe: Social-Icons + Sprachumschalter.
   z-index 3 hält sie über dem mobilen Overlay-Menü (z-index 2). */
.header-right {
  position: relative;
  z-index: 3;
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.header-social {
  display: flex;
  gap: .35rem;
}
.icon-link {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  color: rgba(255, 255, 255, .62);
  transition: color .3s, background-color .3s, transform .3s var(--ease);
}
.icon-link svg { width: 17px; height: 17px; fill: currentColor; }
.icon-link:hover { color: var(--paper); background: rgba(255, 255, 255, .09); transform: translateY(-2px); }

/* ---------- Sprachumschalter ---------- */
.lang { position: relative; }

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .48rem .68rem .48rem .58rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .78);
  transition: color .3s, border-color .3s, background-color .3s;
}
.lang__btn:hover,
.lang.is-open .lang__btn {
  color: var(--paper);
  border-color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .06);
}
.lang__globe { width: 15px; height: 15px; fill: currentColor; flex: none; }
.lang__chevron {
  width: 12px; height: 12px;
  fill: currentColor;
  opacity: .55;
  flex: none;
  transition: transform .35s var(--ease);
}
.lang.is-open .lang__chevron { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  z-index: 5;
  min-width: 178px;
  padding: .4rem;
  background: rgba(18, 18, 22, .97);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .95);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; }

.lang__menu button,
.lang__menu a {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .55rem .7rem;
  border-radius: 6px;
  text-align: left;
  color: rgba(255, 255, 255, .74);
  transition: background-color .25s, color .25s;
}
.lang__menu button:hover,
.lang__menu a:hover { background: rgba(255, 255, 255, .08); color: var(--paper); }
.lang__menu button.is-active,
.lang__menu a.is-active { color: var(--gold); }
.lang__code {
  width: 1.7em;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  opacity: .55;
}
.lang__menu button.is-active .lang__code,
.lang__menu a.is-active .lang__code { opacity: 1; }
.lang__name { font-size: .86rem; font-weight: 400; letter-spacing: .02em; }

.nav-toggle {
  position: relative;
  z-index: 3;
  grid-column: 1;
  justify-self: start;
  display: none;
  width: 42px; height: 42px;
  place-items: center;
}
.nav-toggle span {
  position: relative;
  display: block;
  width: 22px; height: 1.5px;
  background: var(--paper);
  transition: background-color .2s;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px; height: 1.5px;
  background: var(--paper);
  transition: transform .35s var(--ease);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('../img/banner.jpg') center 28% / cover no-repeat;
  /* Weichzeichnen: das Motiv bleibt als Neon-Atmosphäre erhalten,
     der im Bild eingebrannte Schriftzug tritt nicht mit der Headline in Konkurrenz. */
  transform: scale(1.14);
  filter: blur(14px) saturate(125%) brightness(.85);
}
/* Die ganze Kopfzone nimmt die Farbe der aktuellen Single an. banner.jpg
   liegt fest und aendert sich nie - das Cover wechselt jede Woche. Es
   liegt hier ein zweites Mal, so stark weichgezeichnet, dass keine Form
   mehr zu erkennen ist, und wird als Licht dazugerechnet statt als Bild
   darueber. Dadurch faerbt sich der Hintergrund mit jeder neuen
   Veroeffentlichung von allein um, ohne dass jemand etwas anfasst.
   Keine zusaetzliche Datei: dieselbe Adresse, laengst geladen.
   Der Weichzeichner des Elternteils kommt oben drauf. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(8, 8, 10, .95) 0%, rgba(8, 8, 10, .78) 42%, rgba(8, 8, 10, .55) 70%, rgba(8, 8, 10, .85) 100%),
    linear-gradient(to bottom, rgba(8, 8, 10, .9) 0%, rgba(8, 8, 10, .3) 35%, rgba(8, 8, 10, .96) 100%);
}
/* Die Farbe der laufenden Single ueber die ganze Kopfzone. banner.jpg
   liegt fest und aendert sich nie - das Cover wechselt jede Woche.
   Es liegt hier ein zweites Mal, so stark weichgezeichnet, dass keine Form
   mehr zu erkennen ist, und wird als Licht dazugerechnet.
   Wichtig ist die Reihenfolge: unter der abdunkelnden Schicht gemessen
   blieben davon 1,7 Helligkeitsstufen uebrig, also nichts. Deshalb liegt
   es darueber - dieselbe z-Ebene, aber spaeter im Dokument.
   Keine zusaetzliche Datei: dieselbe Adresse, laengst geladen. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../img/hero-cover.jpg?v=cheri-my-love-tonight') center 45% / 130% auto no-repeat;
  filter: blur(64px) saturate(1.7);
  opacity: .2;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* Ein Weichzeichner dieser Groesse kostet auf schmalen Geraeten spuerbar
   Rechenzeit, und die Kopfzone ist dort ohnehin klein. */
@media (max-width: 700px) {
  .hero::after { filter: blur(40px) saturate(1.6); opacity: .16; }
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  width: 100%;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .42rem 1rem .42rem .5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 1.6rem;
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(8px);
}
.hero__badge i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 4px rgba(255, 61, 138, .22);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 61, 138, .28); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 61, 138, 0); }
}

/* Der Songname oben laeuft in Bebas Neue in Versalien - so, wie die
   Buchstaben auch auf den Covern stehen. Alle Werte wie urspruenglich.
   Gilt NUR hier; Ueberschriften und Songnamen weiter unten bleiben Nunito. */
.hero__title {
  font-family: var(--font-mark);
  font-weight: 400;
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
  font-size: clamp(3.1rem, 9.5vw, 7.4rem);
  max-width: 12ch;
  text-wrap: balance;
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-light) 38%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Enger gesetzt, damit Datum, Genre und Stil auf eine Zeile passen. */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  margin: 1.6rem 0 2.4rem;
  font-size: .67rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__meta > span { white-space: nowrap; }
/* Nur die direkten Kinder sind Aufzählungspunkte – innerhalb des ersten
   Punktes steckt ein weiteres span mit dem übersetzten Label. */
.hero__meta > span { display: inline-flex; align-items: center; gap: 1.1rem; }
.hero__meta > span::after {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--muted-2);
}
.hero__meta > span:last-child::after { display: none; }

.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.hero__cover {
  position: relative;
  justify-self: center;
  width: min(100%, 460px);
  aspect-ratio: 1;
}
/* Das Cover soll nicht als Kachel im Raum stehen, sondern in den
   Hintergrund auslaufen. Deshalb kein Rahmen, kein Schatten, keine Ecken -
   stattdessen eine Maske, die zu den Raendern hin weich verschwindet.
   Die Mitte bleibt voll deckend, damit Gesicht und Titel scharf bleiben. */
.hero__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
  -webkit-mask-image: radial-gradient(ellipse 96% 96% at 50% 48%, #000 58%, rgba(0,0,0,.55) 82%, transparent 100%);
          mask-image: radial-gradient(ellipse 96% 96% at 50% 48%, #000 58%, rgba(0,0,0,.55) 82%, transparent 100%);
}
/* Sehr langsames Atmen - man sieht es kaum, man spuert es. */
@media (prefers-reduced-motion: no-preference) {
  .hero__cover img {
    animation: coverAtmen 18s var(--ease) infinite alternate;
    will-change: transform;
  }
  @keyframes coverAtmen {
    from { transform: scale(1) translateY(0); }
    to   { transform: scale(1.035) translateY(-6px); }
  }
}
/* Wo Masken fehlen, bliebe das Bild hart abgeschnitten - dann lieber
   die alte Darstellung mit weicher Ecke. */
@supports not ((-webkit-mask-image: radial-gradient(#000, transparent)) or (mask-image: radial-gradient(#000, transparent))) {
  .hero__cover img { border-radius: 4px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95); }
}
/* Das Bild setzt sich nach aussen fort: dieselbe Datei noch einmal,
   stark vergroessert und weichgezeichnet, dahinter gelegt. Dadurch laufen
   Farben und Formen organisch weiter statt an einer Kante zu enden - und
   es bleibt automatisch richtig, weil hero-cover.jpg jede Woche neu
   geschrieben wird. Kostet keine einzige zusaetzliche Datei. */
.hero__cover::before {
  content: '';
  position: absolute;
  inset: -42%;
  z-index: -2;
  background-image: url('../img/hero-cover.jpg?v=cheri-my-love-tonight');
  background-size: cover;
  background-position: center;
  filter: blur(52px) saturate(1.35);
  opacity: .58;
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 0%, rgba(0,0,0,.6) 52%, transparent 80%);
          mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 0%, rgba(0,0,0,.6) 52%, transparent 80%);
  pointer-events: none;
}
/* Der goldene Schein bleibt, jetzt dezenter - die Farbe kommt vom Bild. */
.hero__cover::after {
  content: '';
  position: absolute;
  inset: -14%;
  z-index: -1;
  background: radial-gradient(circle at 50% 55%, rgba(233, 181, 92, .26), rgba(255, 61, 138, .14) 46%, transparent 72%);
  filter: blur(34px);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__cover::before {
    animation: scheinAtmen 26s var(--ease) infinite alternate;
  }
  @keyframes scheinAtmen {
    from { transform: scale(1) rotate(0deg); opacity: .5; }
    to   { transform: scale(1.12) rotate(2deg); opacity: .66; }
  }
}

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 1.8rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.hero__scroll::after {
  content: '';
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .5), transparent);
  animation: drift 2.6s var(--ease) infinite;
}
@keyframes drift {
  0%   { transform: scaleY(.25); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1);   transform-origin: top; opacity: 1; }
  100% { transform: scaleY(.25); transform-origin: bottom; opacity: 0; }
}

/* ---------- Streaming-Leiste ---------- */
.platforms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.platform {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 1.5rem;
  background: var(--ink);
  transition: background-color .4s var(--ease), color .3s;
}
.platform:hover { background: var(--surface); }
.platform svg { width: 26px; height: 26px; fill: currentColor; flex: none; color: var(--gold); transition: color .3s; }
.platform:hover svg { color: var(--pink); }
.platform b {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.platform small {
  display: block;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: .15rem;
}

/* ---------- Release-Karten ---------- */
.release-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* Filter und Spotify-Knopf teilen sich eine Zeile */
.music-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin: clamp(.5rem, 2vw, 1.5rem) 0 clamp(2rem, 4vw, 3rem);
}
.btn--follow {
  position: relative;
  padding: 1.05rem 2.4rem;
  gap: .9rem;
}
.btn--follow svg { width: 1.55em; height: 1.55em; }
.btn--follow::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  opacity: 0;
  animation: followPulse 3.2s var(--ease) infinite;
  pointer-events: none;
}
@keyframes followPulse {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.14); opacity: 0; }
  100% { transform: scale(1.14); opacity: 0; }
}

.release {
  display: flex;
  flex-direction: column;
  gap: .95rem;
}
.release__art {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 3px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
}
.release__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease), filter .5s;
}
.release:hover .release__art img { transform: scale(1.06); filter: brightness(.55); }

/* Hörprobe direkt auf dem Cover */
.release__preview {
  position: absolute;
  left: 50%; top: 50%;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(8, 8, 10, .5);
  backdrop-filter: blur(4px);
  color: var(--paper);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.9);
  transition: opacity .35s var(--ease), transform .45s var(--ease), background-color .3s, border-color .3s, color .3s;
}
.release:hover .release__preview,
.release:focus-within .release__preview,
.release.is-current .release__preview {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.release__preview:hover {
  background: var(--gold);
  border-color: transparent;
  color: #17110a;
  transform: translate(-50%, -50%) scale(1.08);
}
.release__preview svg { width: 19px; height: 19px; fill: currentColor; }
.release__preview .ic-play { margin-left: 3px; }
.release__preview .ic-pause { display: none; }
.release.is-playing .release__preview .ic-play { display: none; }
.release.is-playing .release__preview .ic-pause { display: block; }
.release.is-playing .release__art img { filter: brightness(.5); }

/* Auf Touch-Geräten gibt es kein Hover – Button dauerhaft zeigen */
@media (hover: none) {
  .release__preview { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Laufende Hörprobe: kleine Pegelanzeige */
.release__now {
  position: absolute;
  right: .7rem; bottom: .7rem;
  display: none;
  align-items: flex-end;
  gap: 3px;
  height: 15px;
  padding: .3rem .45rem;
  border-radius: 2px;
  background: rgba(8, 8, 10, .72);
  backdrop-filter: blur(6px);
  box-sizing: content-box;
}
.release.is-playing .release__now { display: flex; }
.release__now i {
  width: 3px;
  border-radius: 1px;
  background: var(--gold);
  animation: level .9s var(--ease) infinite;
}
.release__now i:nth-child(1) { height: 40%; animation-delay: -.2s; }
.release__now i:nth-child(2) { height: 100%; animation-delay: -.5s; }
.release__now i:nth-child(3) { height: 65%; }
@keyframes level {
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}

/* Link zum Store */
.release__store {
  position: absolute;
  top: .6rem; right: .6rem;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(8, 8, 10, .7);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .8);
  opacity: 0;
  transition: opacity .35s var(--ease), color .3s, background-color .3s;
}
.release:hover .release__store,
.release:focus-within .release__store { opacity: 1; }
.release__store:hover { color: var(--gold); background: rgba(8, 8, 10, .92); }
.release__store svg { width: 15px; height: 15px; fill: currentColor; }
@media (hover: none) { .release__store { opacity: 1; } }

/* Der Textknopf sitzt links neben dem Apple-Knopf, gleiche Groesse und
   gleiches Verhalten - beides sind Wege aus dem Cover heraus. */
.release__lyrics {
  right: calc(.6rem + 32px + .35rem);
  border: 0;
  cursor: pointer;
  padding: 0;
}
.release__lyrics:hover { color: var(--gold); background: rgba(8, 8, 10, .92); }
.release:hover .release__lyrics,
.release:focus-within .release__lyrics { opacity: 1; }
@media (hover: none) { .release__lyrics { opacity: 1; } }

.release__tag {
  position: absolute;
  top: .7rem; left: .7rem;
  padding: .28rem .6rem;
  border-radius: 2px;
  background: rgba(8, 8, 10, .78);
  backdrop-filter: blur(6px);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.release__tag--new { background: var(--pink); color: #17110a; }

.release__title {
  margin: 0;
  font-family: var(--font-song);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
}
.release__meta {
  margin: .3rem 0 0;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* Filter-Chips */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.filter {
  padding: .58rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .3s, border-color .3s, background-color .3s;
}
.filter:hover { color: var(--paper); border-color: rgba(255, 255, 255, .4); }
.filter[aria-pressed='true'] {
  background: var(--paper);
  border-color: var(--paper);
  color: #08080a;
}

.more-row { display: flex; justify-content: center; margin-top: clamp(2.25rem, 4vw, 3.25rem); }

/* ---------- Video-Bühne (Karussell) ---------- */
.stage {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  padding-inline: var(--gutter);
}

.stage__track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.stage__track::-webkit-scrollbar { display: none; }

.vslide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.vslide__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 3px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 44px 90px -50px rgba(0, 0, 0, 1);
}
.vslide__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease), filter .5s;
}
.vslide__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vslide__frame:hover img { transform: scale(1.03); filter: brightness(.6); }

.vslide__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.vslide__play::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(62px, 7vw, 92px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(8, 8, 10, .42);
  backdrop-filter: blur(4px);
  transition: transform .45s var(--ease), background-color .35s, border-color .35s;
}
.vslide__play:hover::before {
  transform: translate(-50%, -50%) scale(1.09);
  background: var(--gold);
  border-color: transparent;
}
.vslide__play svg {
  position: relative;
  width: clamp(20px, 2.2vw, 28px);
  height: clamp(20px, 2.2vw, 28px);
  margin-left: 5px;
  fill: var(--paper);
  transition: fill .35s;
}
.vslide__play:hover svg { fill: #17110a; }

/* Pfeile – vertikal auf der Videofläche zentriert, weil die Bühne
   ausschließlich die 16:9-Folien enthält. */
.stage__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(8, 8, 10, .68);
  backdrop-filter: blur(8px);
  color: var(--paper);
  transition: background-color .3s, border-color .3s, opacity .3s, transform .3s var(--ease);
}
.stage__nav svg { width: 17px; height: 17px; fill: currentColor; }
.stage__nav:hover { background: rgba(8, 8, 10, .92); border-color: rgba(255, 255, 255, .45); }
.stage__nav:disabled { opacity: .25; pointer-events: none; }
.stage__nav--prev { left: calc(var(--gutter) + .9rem); }
.stage__nav--next { right: calc(var(--gutter) + .9rem); }
.stage__nav--prev:hover { transform: translateY(-50%) translateX(-3px); }
.stage__nav--next:hover { transform: translateY(-50%) translateX(3px); }

.stage__info {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-top: clamp(1.4rem, 2.5vw, 2rem);
}
.stage__title {
  font-family: var(--font-song);
  margin: 0;
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: balance;
}
.stage__meta {
  margin: .45rem 0 0;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.stage__counter {
  margin: 0;
  flex: none;
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: .06em;
  color: var(--gold);
}
/* Einwilligungshinweis direkt auf dem Standbild bzw. über dem Raster */
.vslide__consent {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 1.15rem clamp(1rem, 3vw, 2rem);
  background: linear-gradient(to top, rgba(6, 6, 8, .92), rgba(6, 6, 8, 0));
  font-size: .72rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
  pointer-events: none;
}
.vslide__consent a {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  pointer-events: auto;
}
.vslide__consent a:hover { color: var(--paper); }

.consent-note {
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  max-width: 78ch;
  font-size: .72rem;
  line-height: 1.6;
  color: var(--muted-2);
}
.consent-note a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent-note a:hover { color: var(--paper); }

/* Streifen mit allen Videos */
.rail {
  display: flex;
  gap: .8rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-bottom: .75rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 2px; }

.rail__item {
  flex: 0 0 clamp(146px, 18vw, 206px);
  scroll-snap-align: start;
  padding: 0;
  text-align: left;
  opacity: .45;
  transition: opacity .35s var(--ease);
}
.rail__item:hover, .rail__item.is-active { opacity: 1; }
.rail__item img {
  width: 100%;
  /* height:auto ist nötig, damit aspect-ratio das height-Attribut schlägt */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 2px;
  transition: box-shadow .3s;
}
.rail__item.is-active img { box-shadow: 0 0 0 2px var(--gold); }
.rail__item span {
  font-family: var(--font-song);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: .55rem;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--muted);
}

/* Letzte Folie im grossen Karussell: dieselbe Tuer zum Kanal wie unten im
   Streifen. Wer sich oben durchklickt, soll nicht an einer Wand landen. */
.vslide__kanal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  text-decoration: none;
  background-color: var(--surface-2);
  border: 1px solid var(--gold);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.vslide__kanalzeichen {
  display: block;
  width: clamp(56px, 9vw, 104px);
  aspect-ratio: 1;
}
.vslide__kanalzeichen svg {
  width: 100%;
  height: 100%;
  fill: var(--gold);
  transition: fill .3s var(--ease);
}
.vslide__kanaltext {
  font-family: var(--font-song);
  font-size: clamp(1.1rem, 2.1vw, 1.6rem);
  letter-spacing: .02em;
  color: var(--gold);
  text-align: center;
  padding: 0 1.5rem;
  transition: color .3s var(--ease);
}
.vslide__kanalzahl {
  font-family: var(--font-body);
  font-size: clamp(.72rem, 1.05vw, .84rem);
  letter-spacing: .04em;
  color: var(--muted);
  text-align: center;
  margin-top: -.7rem;
  transition: color .3s var(--ease);
}
.vslide__kanal:hover,
.vslide__kanal:focus-visible { background-color: var(--gold); border-color: var(--gold); }
.vslide__kanal:hover .vslide__kanalzahl,
.vslide__kanal:focus-visible .vslide__kanalzahl { color: rgba(23, 17, 10, .75); }

.vslide__kanal:hover .vslide__kanalzeichen svg,
.vslide__kanal:focus-visible .vslide__kanalzeichen svg { fill: #17110a; }
.vslide__kanal:hover .vslide__kanaltext,
.vslide__kanal:focus-visible .vslide__kanaltext { color: #17110a; }

/* Letzte Kachel im Videostreifen: die Tuer zum Kanal. Die Regeln nennen den
   Elternteil mit: .rail__item span waere sonst spezifischer und ueberschriebe
   das display:flex mit seinem -webkit-box - dann klebte das Symbol in der
   Ecke statt in der Mitte. Sie bleibt immer voll
   sichtbar - die Videokacheln daneben sind bewusst gedimmt, damit sie auffaellt. */
.rail__item--kanal {
  display: block;
  opacity: 1;
  text-decoration: none;
}
.rail__item--kanal .rail__kanal {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background-color: var(--surface-2);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.rail__item--kanal .rail__kanal svg {
  /* Das Symbol ist quadratisch (viewBox 0 0 24 24). Mit width UND height in
     Prozent einer 16:9-Flaeche wurde es breitgezogen - deshalb die Hoehe aus
     dem Seitenverhaeltnis ableiten statt sie zu setzen. */
  width: 42%;
  height: auto;
  aspect-ratio: 1;
  fill: var(--gold);
  transition: fill .3s var(--ease);
}
.rail__item--kanal:hover .rail__kanal,
.rail__item--kanal:focus-visible .rail__kanal {
  background-color: var(--gold);
  border-color: var(--gold);
}
.rail__item--kanal:hover .rail__kanal svg,
.rail__item--kanal:focus-visible .rail__kanal svg { fill: #17110a; }
.rail__item--kanal span { color: var(--gold); }

/* ---------- Aufruf zum YouTube-Kanal ---------- */
.yt-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background:
    radial-gradient(ellipse 60% 140% at 12% 50%, rgba(255, 0, 60, .16), transparent 70%),
    var(--ink-soft);
}

.yt-cta__main {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex: 1 1 260px;
  min-width: 0;
}
.yt-cta__logo {
  width: 46px; height: 46px;
  flex: none;
  fill: #ff0033;
  transition: transform .4s var(--ease);
}
.yt-cta__main:hover .yt-cta__logo { transform: scale(1.1); }
.yt-cta__text { min-width: 0; }
.yt-cta__text b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
}
.yt-cta__text small {
  display: block;
  margin-top: .35rem;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--muted-2);
}
.yt-cta__arrow {
  width: 20px; height: 20px;
  flex: none;
  fill: var(--muted-2);
  transition: transform .4s var(--ease), fill .3s;
}
.yt-cta__main:hover .yt-cta__arrow { transform: translateX(5px); fill: var(--paper); }

.yt-cta__all {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: border-color .3s, background-color .3s, transform .35s var(--ease);
}
.yt-cta__all svg { width: 1em; height: 1em; fill: currentColor; }
.yt-cta__all:hover {
  border-color: var(--paper);
  background: rgba(255, 255, 255, .06);
  transform: translateY(-2px);
}

/* ---------- Hörproben-Player ---------- */
.player {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  padding-block: .7rem;
  background: rgba(13, 13, 17, .94);
  backdrop-filter: blur(18px) saturate(140%);
  border-top: 1px solid var(--line);
  animation: playerIn .45s var(--ease);
}
@keyframes playerIn { from { transform: translateY(100%); } to { transform: none; } }

/* Platz schaffen, damit der Footer nicht unter der Leiste verschwindet */
body:has(.player:not([hidden])) { padding-bottom: 88px; }

.player__inner {
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 1.6vw, 1.15rem);
}
.player__cover {
  width: 50px; height: 50px;
  flex: none;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
.player__toggle {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pink);
  color: #17110a;
  transition: transform .3s var(--ease);
}
.player__toggle:hover { transform: scale(1.07); }
.player__toggle svg { width: 15px; height: 15px; fill: currentColor; }
.player__toggle .ic-play { margin-left: 2px; }
.player__toggle .ic-pause { display: none; }
.player.is-playing .ic-play { display: none; }
.player.is-playing .ic-pause { display: block; }

.player__body { flex: 1 1 auto; min-width: 0; }
.player__title {
  margin: 0;
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player__sub {
  margin: .12rem 0 .55rem;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.player__bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}
.player__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--pink);
  transition: width .25s linear;
}

.player__store {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  transition: color .3s, background-color .3s;
}
.player__store:hover { color: var(--paper); background: rgba(255, 255, 255, .08); }
.player__store svg { width: 17px; height: 17px; fill: currentColor; }

.player__close {
  width: 36px; height: 36px;
  flex: none;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--muted-2);
  transition: color .3s;
}
.player__close:hover { color: var(--paper); }

/* ---------- Über ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2rem, 4.5vw, 4rem);
}
.about__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .95);
}
.about__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.about__portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 10, .55), transparent 45%);
}

/* ---------- After Dark: die Tuer in die begehbare Welt ---------- */
.welt {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 4.5vw, 4rem);
}
.welt__tor {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .95);
}
.welt__tor img { display: block; width: 100%; height: auto; }
/* Die Nacht im Bild wird zum Rand hin dichter - das Bild soll wie ein
   Blick durch eine Tuer wirken, nicht wie eine aufgeklebte Postkarte. */
.welt__rahmen {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 55%, transparent 40%, rgba(6, 4, 12, .55) 100%),
    linear-gradient(to top, rgba(8, 8, 10, .5), transparent 45%);
  transition: opacity .5s var(--ease, ease);
}
.welt__tor:hover .welt__rahmen,
.welt__tor:focus-visible .welt__rahmen { opacity: .45; }
.welt__hinweis {
  margin: 1.1rem 0 1.6rem;
  font-size: .9rem;
  color: var(--muted-2);
}
.welt__knopf { margin-top: 0; }

@media (prefers-reduced-motion: no-preference) {
  .welt__tor img { transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
  .welt__tor:hover img,
  .welt__tor:focus-visible img { transform: scale(1.035); }
}
@media (max-width: 860px) {
  .welt { grid-template-columns: minmax(0, 1fr); }
}

/* Der Songtitel als Verweis auf die Songseite. Er soll wie Text
   aussehen und sich erst beim Ueberfahren als Weg zu erkennen geben -
   die Karte hat mit Hoerprobe, Apple und Text schon drei Knoepfe. */
/* Der Weg zu allen Songtexten, unter dem Satz im Kopf des Abschnitts. */
.section-head__mehr { margin: .9rem 0 0; }
.section-head__mehr a {
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(233, 181, 92, .35);
  padding-bottom: .15rem;
}
.section-head__mehr a:hover,
.section-head__mehr a:focus-visible { border-bottom-color: var(--gold); }

.release__seite { color: inherit; text-decoration: none; }
.release__seite:hover,
.release__seite:focus-visible { color: var(--gold); text-decoration: underline; text-underline-offset: .18em; }

.about__lead {
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--paper);
  margin: 0 0 1.5rem;
  text-wrap: pretty;
}
.about__body p {
  color: var(--muted);
  margin: 0 0 1.15rem;
  max-width: 62ch;
}
.about__body p:last-of-type { margin-bottom: 0; }

/* Drei Kennzahlen, schmal und ohne Kaesten: nur Haarlinien dazwischen.
   Die Zahl steht oben und gross, die Beschriftung klein darunter.
   Sie muss eine siebenstellige Zahl mit Trennzeichen tragen (1.234.567),
   deshalb Ziffern mit fester Breite und kein Umbruch. */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 2.5rem;
  max-width: 31.5rem;
  background: none;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.facts div {
  display: flex;
  flex-direction: column;
  background: none;
  padding: 1.05rem 1rem 1.05rem 0;
}
.facts div + div { padding-left: 1rem; border-left: 1px solid var(--line-soft); }
.facts dt {
  order: 2;
  font-family: var(--font-ui);
  font-size: .56rem;
  font-weight: 400;
  letter-spacing: .14em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--muted-2);
}
.facts dd {
  order: 1;
  margin: 0 0 .45rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(1.02rem, 2.3vw, 1.5rem);
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.facts__top dd {
  background: var(--gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.facts__sub {
  order: 3;
  margin: .3rem 0 0;
  font-family: var(--font-ui);
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Freitagsraster ----------
   Eine Marke je Woche seit der ersten Veroeffentlichung. Gold = erschienen,
   Pink = die aktuelle Woche. Traegt die Aussage der Seite: woechentlich,
   ohne Luecke. */
.fridays {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line-soft);
}
.fridays__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .9rem;
}
.fridays__label {
  font-family: var(--font-ui);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.fridays__bar {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 52px;
  overflow: hidden;
}
.wk {
  flex: 1 1 0;
  min-width: 1px;
  height: 7px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .07);
  transition: height .3s var(--ease), opacity .3s var(--ease);
}
.wk--hit { height: 24px; background: var(--gold); opacity: .5; }
.wk--now { height: 52px; background: var(--pink); opacity: 1; }
.wk--hit:hover { opacity: 1; height: 32px; }
.fridays__note {
  margin: .9rem 0 0;
  font-size: .82rem;
  color: var(--muted);
  max-width: 54ch;
}
/* Ein einziger geordneter Moment: das Raster laeuft von links durch. */
@media (prefers-reduced-motion: no-preference) {
  .fridays__bar .wk {
    animation: wkRise .5s var(--ease) both;
    animation-delay: calc(var(--i) * 8ms);
  }
  @keyframes wkRise { from { height: 2px; opacity: 0; } }
}
@media (max-width: 780px) {
  .fridays__bar { height: 40px; gap: 1px; }
  .wk--now { height: 40px; }
}

/* ---------- Fragen ---------- */
.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.faq__item { background: var(--ink-soft); padding: 1.6rem 1.7rem; }
.faq__q {
  margin: 0 0 .7rem;
  font-family: var(--font-song);
  font-size: 1.14rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--paper);
  text-wrap: balance;
}
.faq__a {
  margin: 0;
  font-size: .93rem;
  line-height: 1.65;
  color: var(--muted);
}

/* ---------- Newsletter ---------- */
.newsletter { position: relative; overflow: hidden; }
.newsletter::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(255, 61, 138, .14), transparent 65%);
  pointer-events: none;
}
.newsletter__inner {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.newsletter__title { font-size: clamp(2.4rem, 6vw, 4.25rem); margin-bottom: 1rem; }
.newsletter__text { color: var(--muted); max-width: 52ch; margin: 0 auto 2.5rem; }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .75rem;
  margin-bottom: .75rem;
}
.field { text-align: left; }
.field input[type='text'],
.field input[type='email'] {
  width: 100%;
  padding: 1rem 1.15rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--paper);
  font: inherit;
  font-size: .92rem;
  transition: border-color .3s, background-color .3s;
}
.field input::placeholder { color: var(--muted-2); }
.field input:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, .07); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  text-align: left;
  margin: 1.35rem 0 1.75rem;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--muted);
}
.consent input { margin-top: .3rem; accent-color: var(--gold); width: 16px; height: 16px; flex: none; }
.consent a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }

.form-note {
  margin: 1.35rem 0 0;
  font-size: .8rem;
  letter-spacing: .04em;
  min-height: 1.2em;
}
.form-note[data-state='ok'] { color: var(--gold-light); }
.form-note[data-state='error'] { color: var(--pink); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
  background: var(--ink);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.footer-brand .wordmark { text-align: left; justify-self: start; font-size: 1.85rem; }
.footer-brand .wordmark small { text-align: left; }
.footer-brand p {
  margin: 1.2rem 0 1.6rem;
  font-size: .84rem;
  color: var(--muted);
  max-width: 34ch;
}
.footer-social { display: flex; gap: .3rem; margin-left: -9px; }

.footer-col h3 {
  margin: 0 0 1.2rem;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.footer-col li { margin-bottom: .65rem; }
.footer-col a {
  font-size: .85rem;
  color: rgba(255, 255, 255, .78);
  transition: color .3s, padding-left .3s var(--ease);
}
.footer-col a:hover { color: var(--gold); padding-left: 4px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
  font-size: .74rem;
  color: var(--muted-2);
  letter-spacing: .06em;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer-bottom a:hover { color: var(--paper); }

/* ---------- Rechtstexte (Unterseiten) ---------- */
.legal { padding-top: calc(var(--header-h) + clamp(3rem, 6vw, 5rem)); }
.legal__inner { max-width: 760px; }
.legal h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: 2.5rem; }
.legal h2 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 3rem 0 1rem;
}
.legal p, .legal li { color: var(--muted); }
.legal p { margin: 0 0 1.1rem; }
.legal ul { list-style: disc; padding-left: 1.3rem; margin: 0 0 1.1rem; }
.legal li { margin-bottom: .5rem; }
.legal a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.legal .lang-note {
  display: block;
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--muted-2);
}
.legal .hint {
  margin: -.5rem 0 1.6rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--line);
  font-size: .82rem;
  line-height: 1.65;
  color: var(--muted-2);
}
.legal code {
  padding: .1em .4em;
  border-radius: 2px;
  background: rgba(255, 255, 255, .08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  color: var(--gold-light);
}
.legal ul + p, .legal p + ul { margin-top: 0; }
.legal .todo {
  display: block;
  border-left: 2px solid var(--gold);
  background: rgba(233, 181, 92, .07);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  font-size: .85rem;
  color: var(--gold-light);
}

/* ---------- Japanisch ----------
   Bebas Neue enthält keine japanischen Zeichen; dort greift die
   System-Schrift. Die sehr enge Zeilenhöhe und das weite Sperren der
   lateinischen Auszeichnung passen dafür nicht, deshalb hier gelockert. */
:lang(ja) .display,
:lang(ja) .legal h2 {
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: .02em;
}
:lang(ja) .hero__title { line-height: 1.18; }
:lang(ja) .eyebrow { letter-spacing: .14em; }
:lang(ja) .btn,
:lang(ja) .filter,
:lang(ja) .hero__badge,
:lang(ja) .hero__meta,
:lang(ja) .release__meta,
:lang(ja) .release__tag,
:lang(ja) .stage__meta,
:lang(ja) .player__sub,
:lang(ja) .footer-col h3,
:lang(ja) .facts dt { letter-spacing: .08em; }
:lang(ja) .site-nav a { letter-spacing: .1em; }
/* Das Wortmarken-Logo bleibt immer lateinisch gesetzt. */
:lang(ja) .facts dd { letter-spacing: .02em; }

/* ---------- Scroll-Reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__title { max-width: none; margin-inline: auto; }
  .hero__meta, .hero__actions { justify-content: center; }
  .hero__cover { order: -1; width: min(78%, 340px); }
  .hero__scroll { display: none; }
  .about { grid-template-columns: 1fr; }
  .about__portrait { max-width: 520px; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  :root { --header-h: 74px; }

  .site-header { padding-block: .9rem; }
  .nav-toggle { display: grid; }
  .site-header .wordmark { font-size: 1.7rem; letter-spacing: .16em; padding-left: .16em; }
  .site-header .wordmark small { display: none; }
  .header-social { display: none; }
  .lang__btn { padding: .42rem .55rem; letter-spacing: .12em; }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    margin: 0;
    padding: 5rem 2rem;
    background: rgba(8, 8, 10, .97);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .4s var(--ease), transform .5s var(--ease), visibility .4s;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .site-nav a { font-size: 1.05rem; letter-spacing: .24em; }

  .hero { padding-top: calc(var(--header-h) + 3rem); }
  .hero__bg { background-position: 62% 20%; }

  .section-head { flex-direction: column; align-items: flex-start; }
  .stage__nav { width: 40px; height: 40px; }
  .stage__nav svg { width: 14px; height: 14px; }
  .stage__nav--prev { left: calc(var(--gutter) + .4rem); }
  .stage__nav--next { right: calc(var(--gutter) + .4rem); }
  .stage__info { align-items: center; }
  .stage__counter { font-size: 1.3rem; }
  .vslide__consent { padding: .8rem .9rem; font-size: .66rem; }
  .player__store { display: none; }
  /* Drei Kennzahlen bleiben auch am Handy in drei Spalten - bei zwei
     stuende die dritte allein. Enger gesetzt, damit die Zahl passt. */
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .facts div { padding: .9rem .5rem .9rem 0; }
  .facts div + div { padding-left: .6rem; }
  .facts dt, .facts__sub { font-size: .5rem; letter-spacing: .1em; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .release-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .release__title { font-size: .85rem; }
  .btn { width: 100%; }
  .hero__actions { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  /* Ohne Bewegung bliebe der Schimmer als zufälliger Farbverlauf stehen. */
  .site-header .wordmark { background: none; color: var(--paper); }
  .btn--follow::after { display: none; }
}

/* Druck */
@media print {
  .site-header, .hero__scroll, .player, .stage__nav, .newsletter { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- Songtext-Fenster ----------------------------------------
   Oeffnet ueber den Textknopf auf einem Cover. Bewusst schlicht: Der Text
   ist der Inhalt, alles andere waere Beiwerk.
   ------------------------------------------------------------------- */
.lyricbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(4, 4, 8, .86);
  backdrop-filter: blur(8px);
}
.lyricbox[hidden] { display: none; }
.lyricbox__inner {
  width: min(100%, 40rem);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  border: 1px solid rgba(233, 181, 92, .28);
  border-radius: 4px;
  background: rgba(12, 12, 16, .96);
}
.lyricbox__title {
  margin: 0;
  font-family: var(--font-mark);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.1;
  /* Der Songname in Gold - er ist die Ueberschrift, die Zeilen darunter
     bleiben weiss. So sieht man auf einen Blick, welches Lied offen ist. */
  color: var(--gold);
}
.lyricbox__text {
  overflow-y: auto;
  padding-right: .8rem;
  font-size: .95rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, .82);
}
.lyricbox__text p { margin: 0; }
.lyricbox__text p:empty { height: .7em; }
.lyricbox__marke {
  margin: 1.6em 0 .5em;
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}
.lyricbox__marke:first-child { margin-top: 0; }
.lyricbox__close {
  align-self: flex-start;
  padding: .7rem 1.3rem;
  border: 1px solid rgba(233, 181, 92, .4);
  border-radius: 2px;
  background: none;
  color: var(--gold);
  font: inherit;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
.lyricbox__close:hover { background: rgba(233, 181, 92, .12); color: #fff; }
body.lyric-offen { overflow: hidden; }