/* ============================================================================
   lustfeind.com — Stylesheet
   ----------------------------------------------------------------------------
   Gestaltung: "dunkles Kino". Das Musikvideo läuft groß im Hintergrund, davor
   steht nur sehr wenig: der Titel in weit gesperrter, dünner Schrift, eine
   technische Zeile und die Store-Links.

   Zwei Entscheidungen tragen das ganze Design:

   1. Die Schrift Archivo wird über ihre BREITE gesteuert, nicht über die Farbe.
      Titel = sehr breit und sehr dünn (wie Filmabspann), technische Angaben =
      schmal und fett (wie Beschriftungen an Geräten). Eine Schriftfamilie,
      zwei völlig verschiedene Stimmen.

   2. Der Titel liegt mit "mix-blend-mode: difference" ÜBER dem Video. Wird das
      Bild dahinter hell, kippt die Schrift ins Dunkle und umgekehrt. Der Titel
      lebt also mit dem Film. Das ist der eine auffällige Effekt der Seite —
      alles andere bleibt bewusst ruhig.

   Farben: fast schwarz mit einem Blaustich, warmes Gebrochen-Weiß für Text und
   EINE Signalfarbe (Natriumdampf-Orange, wie eine Kontrolllampe). Hat ein Cover
   eine kräftige eigene Farbe, überschreibt die Song-Seite --signal per style-
   Attribut — jede Veröffentlichung bekommt so ihren eigenen Ton.
   ========================================================================== */

/* ── Schriften (selbst gehostet, keine Verbindung zu Google) ──────────────── */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  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+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  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: 'Newsreader';
  src: url('fonts/newsreader-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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: 'Newsreader';
  src: url('fonts/newsreader-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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: 'Newsreader';
  src: url('fonts/newsreader-italic-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
  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: 'Newsreader';
  src: url('fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
  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;
}

/* ── Grundwerte ──────────────────────────────────────────────────────────── */

:root {
  --void:   #05060a;            /* Grund: fast schwarz mit Blaustich */
  --panel:  #0b0d13;            /* zweite Ebene */
  --panel-2:#11141c;
  --bone:   #ede9e0;            /* Text: warmes Gebrochen-Weiß, wie Filmpapier */
  --ash:    #767d8c;            /* Nebenangaben */
  --hair:   rgba(237, 233, 224, .13);
  --hair-2: rgba(237, 233, 224, .07);
  --signal: #ff7a1a;            /* die eine Signalfarbe */

  --breit:  min(1580px, 100% - clamp(1.4rem, 5vw, 6rem));
  --schmal: min(760px, 100% - clamp(1.4rem, 5vw, 6rem));

  /* Beschriftungen an Geräten sind schmal und fett — das ist die Sprache
     aller technischen Angaben auf dieser Seite. */
  --label-var: 'wdth' 79, 'wght' 580;
  --label-ls:  .19em;

  --ease: cubic-bezier(.16, .84, .34, 1);
}

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

html {
  background: var(--void);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

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

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

.nur-vorleser {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Sprung zum Inhalt — für Tastatur- und Vorlesebedienung */
.skip {
  position: fixed; top: -100px; left: 1rem; z-index: 200;
  background: var(--bone); color: var(--void);
  padding: .7rem 1.1rem; font-size: 12px;
  font-variation-settings: var(--label-var); letter-spacing: var(--label-ls);
  text-transform: uppercase; transition: top .2s;
}
.skip:focus { top: 1rem; }

/* ── Wiederkehrende Bausteine ────────────────────────────────────────────── */

/* Technische Beschriftung: schmal, fett, weit gesperrt, Großbuchstaben. */
.label {
  font-variation-settings: var(--label-var);
  letter-spacing: var(--label-ls);
  text-transform: uppercase;
  font-size: clamp(10px, .72rem, 11.5px);
  color: var(--ash);
  line-height: 1.4;
}

/* Filmkorn über der ganzen Seite. Nimmt dem Schwarz das Digitale und lässt
   Farbverläufe nicht bandig wirken. */
.korn {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
  opacity: .042;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Kopfleiste ──────────────────────────────────────────────────────────── */

.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(.9rem, 2vw, 1.5rem) clamp(1.4rem, 5vw, 3rem);
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease),
              backdrop-filter .4s var(--ease);
}
.kopf.ist-gescrollt {
  background: rgba(5, 6, 10, .82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--hair-2);
}

.kopf-marke {
  font-variation-settings: 'wdth' 112, 'wght' 380;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-size: clamp(12px, 1.3vw, 15px);
  white-space: nowrap;
}
.kopf-marke:hover { color: var(--signal); }

.kopf-menue { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.2rem); }
.kopf-menue a { position: relative; }
.kopf-menue a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -5px;
  height: 1px; background: var(--signal);
  transition: right .35s var(--ease);
}
.kopf-menue a:hover::after, .kopf-menue a[aria-current='page']::after { right: 0; }
.kopf-menue a[aria-current='page'] { color: var(--bone); }

/* ── Die Bühne: ein Song, ganzer Bildschirm ──────────────────────────────── */

.buehne {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(5rem, 12vh, 8rem) 0 clamp(1.6rem, 4vh, 2.6rem);
  overflow: hidden;
  isolation: isolate;             /* hält den difference-Effekt in dieser Ebene */
}

/* Video- bzw. Coverebene, formatfüllend beschnitten */
.buehne-film {
  position: absolute; inset: 0; z-index: -3;
  background: var(--void);
  overflow: hidden;
}

/* Die sichtbare Fläche. Alles darin wird abgeschnitten, was darüber hinausragt —
   und genau darüber verschwinden die schwarzen Balken eines Kinoformat-Videos
   und die YouTube-Leisten am oberen und unteren Rand des Videorahmens.
   container-type: size macht sie zur Bezugsgröße für die Einheiten cqw/cqh. */
.film-flaeche { position: absolute; inset: 0; overflow: hidden; container-type: size; }

.film-flaeche iframe,
.film-flaeche .buehne-standbild {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* Formatfüllend über die Fläche gelegt und dann mit --film-zoom weiter
     aufgezogen. GENAU EINE Zahl steuert den Beschnitt:
     Adminbereich → Einstellungen → „Zoom des Hintergrundvideos" (bzw. pro Song).
     Mehr Zoom schneidet mehr weg — schwarze Balken eines Kinoformat-Videos
     ebenso wie YouTubes Titelzeile oben und Bedienleiste unten.
     Reservefassung mit Fenstermaßen, siehe @supports weiter unten. */
  width:  calc(max(100vw, 177.78svh) * var(--film-zoom, 1.6));
  height: calc(max(56.25vw, 100svh)  * var(--film-zoom, 1.6));
  /* Muss sein: die allgemeine Regel img/iframe { max-width: 100% } würde das
     Überziehen sonst wieder zurückschneiden. */
  max-width: none;
  border: 0;
  pointer-events: none;
}

/* Wichtig: gerechnet wird gegen die FLÄCHE, nicht gegen das Fenster.
   Bei einem langen Songtitel wird die Bühne höher als der Bildschirm — mit
   Fenstermaßen wäre das Video dann ein paar Pixel zu klein und der schwarze
   Balken blitzte oben wieder hervor. */
@supports (container-type: size) {
  .film-flaeche iframe,
  .film-flaeche .buehne-standbild {
    width:  calc(max(100cqw, 177.78cqh) * var(--film-zoom, 1.6));
    height: calc(max(56.25cqw, 100cqh)  * var(--film-zoom, 1.6));
  }
}
.buehne-standbild { object-fit: cover; }

/* Das Standbild liegt über dem Video, bis das Video wirklich läuft. Sonst sieht
   man in den ersten Sekunden YouTubes Abspielknopf und Bedienleiste. */
.film-flaeche .buehne-standbild { z-index: 2; opacity: 1; transition: opacity 1.2s var(--ease); }
.film-flaeche.laeuft .buehne-standbild { opacity: 0; }

/* Ohne Video steht das Cover im Hintergrund — und zwar genauso großflächig wie
   ein Video: über die ganze Bühne, an den Rändern beschnitten statt hineingequetscht,
   scharf und mit derselben Abdunkelung. Das ist kein Notbehelf, sondern der
   zweite gleichwertige Fall.
   (Früher stand es rechtsbündig wie auf einem Filmplakat. Das sah bei hellen
   Covern nach einem Fehler aus: links eine schwarze Fläche, rechts eine harte
   Bildkante, und abgedunkelt wurde es überhaupt nicht.) */
.buehne-film.ist-cover .buehne-standbild {
  top: 0; left: 0; transform: none;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* Ein Cover ist oft eine flächig helle Grafik — ein Video ist das selten. Beim
   selben Reglerwert bliebe ein weißes Cover deshalb blendend hell und der Titel
   darauf unlesbar. Also greift hier derselbe Regler kräftiger zu.
   Bei „Abdunkelung 0" bleibt auch das Cover unangetastet — die Rechnung ergibt
   dann genau 1. */
.buehne-film.ist-cover {
  filter: brightness(calc(1 - .70 * var(--film-dunkel, .55))) saturate(.9);
}

@media (min-width: 900px) {
  /* Zusätzlich wird die linke Hälfte abgedunkelt, genau dort steht der Titel.
     Rechts bleibt das Bild kräftig. Die Stärke hängt weiter am Regler
     „Abdunkelung" (die Deckkraft erbt dieser Verlauf von .buehne-film::after). */
  .buehne-film.ist-cover::after {
    background:
      linear-gradient(100deg,
        rgba(5, 6, 10, .96) 0%, rgba(5, 6, 10, .90) 24%, rgba(5, 6, 10, .68) 44%,
        rgba(5, 6, 10, .34) 66%, rgba(5, 6, 10, .18) 84%, rgba(5, 6, 10, .34) 100%),
      linear-gradient(to top,
        rgba(5, 6, 10, .95) 0%, rgba(5, 6, 10, .58) 34%, rgba(5, 6, 10, .12) 72%,
        rgba(5, 6, 10, .30) 100%);
  }
}

/* Das Bild wird leicht gedämpft, damit der Titel darüber steht — aber nur
   leicht, es soll erkennbar bleiben.
   Zum Nachstellen: Adminbereich → Einstellungen → „Abdunkelung des Videos".
   Die Zahl steht dort in Prozent; 0 = gar nicht abdunkeln. */
/* --film-dunkel kommt aus den Einstellungen: 0 = Bild völlig unangetastet,
   1 = maximal abgedunkelt. Es steuert ALLE Ebenen, die abdunkeln — diesen
   Filter, den Verlauf gleich darunter und den Schatten unter dem Text.
   Vorher hing nur der Filter daran, deshalb schien der Regler wirkungslos;
   und das Cover war ganz ausgenommen, deshalb blendete es. */
.buehne-film {
  filter: brightness(calc(1 - .45 * var(--film-dunkel, .55))) saturate(.95);
}

/* Die Arbeit für die Lesbarkeit macht dieser Verlauf: er ist dort dunkel, wo
   Text steht (unteres Drittel), und lässt das Bild darüber hell. */
.buehne-film::after {
  content: ''; position: absolute; inset: 0;
  opacity: var(--film-dunkel, .55);
  background:
    linear-gradient(to top,
      rgba(5, 6, 10, .97) 0%,
      rgba(5, 6, 10, .90) 22%,
      rgba(5, 6, 10, .62) 44%,
      rgba(5, 6, 10, .22) 68%,
      rgba(5, 6, 10, .10) 88%,
      rgba(5, 6, 10, .34) 100%),
    radial-gradient(130% 100% at 50% 38%, transparent 34%, rgba(5, 6, 10, .5) 100%);
}

/* Gemeinsamer, leichter Fuß über beiden Fällen — fängt den Übergang zum
   nächsten Abschnitt ab. */
.buehne-schleier {
  position: absolute; inset: 0; z-index: -2;
  opacity: var(--film-dunkel, 1);
  background: linear-gradient(to top,
    rgba(5, 6, 10, .82) 0%, rgba(5, 6, 10, .42) 16%, transparent 34%);
}

.buehne-inhalt { width: var(--breit); margin-inline: auto; position: relative; }

/* Ein weicher dunkler Fleck GENAU unter dem Text — nicht über dem ganzen Bild.
   Dadurch bleibt das Video hell und farbig, während Titel und Store-Links auf
   ruhigem Grund stehen. Wichtig für die Lesbarkeit bei hellen Videos: das ist
   der Ersatz dafür, dass früher der ganze Film stark abgedunkelt wurde. */
.buehne-inhalt::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  opacity: var(--film-dunkel, 1);
  inset: -26% -12% -34% -14%;
  background: radial-gradient(74% 76% at 27% 52%,
    rgba(5, 6, 10, .95) 0%,
    rgba(5, 6, 10, .89) 28%,
    rgba(5, 6, 10, .68) 48%,
    rgba(5, 6, 10, .36) 68%,
    rgba(5, 6, 10, .12) 84%,
    transparent 94%);
}

/* Technische Zeile über dem Titel — die trägt echte Angaben, keine Deko:
   Katalognummer · Art · Datum · Länge · Genre */
.technik {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .55rem clamp(.7rem, 1.6vw, 1.3rem);
  margin-bottom: clamp(1rem, 2.4vh, 1.8rem);
  color: var(--ash);
}
/* Über einem Film braucht diese Zeile mehr Kontrast als sonst — sonst
   verschwindet sie in hellen Bildstellen. */
.buehne .technik { color: color-mix(in srgb, var(--bone) 74%, transparent); }
.technik .trenner { opacity: .4; }
.technik .katalog { color: var(--signal); }

/* Der Titel — der eine große Auftritt.
   Sehr breit, sehr dünn, weit gesperrt: die Anmutung eines Filmabspanns. */
.titel {
  margin: 0;
  font-variation-settings: 'wdth' 116, 'wght' 205;
  font-size: var(--titel-groesse, clamp(2.7rem, 10.4vw, 10.5rem));
  line-height: .93;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--bone);
  text-wrap: balance;
  /* Das ist der Effekt: die Schrift verrechnet sich mit dem Film dahinter. */
  mix-blend-mode: difference;
}
/* Lange Titel dürfen nicht die halbe Seite füllen. */
.titel.ist-lang    { --titel-groesse: clamp(2.1rem, 6.6vw, 6.4rem);  letter-spacing: .06em; }
.titel.ist-sehr-lang { --titel-groesse: clamp(1.7rem, 4.6vw, 4.3rem); letter-spacing: .045em; }

.band-zeile {
  margin: clamp(.9rem, 2.2vh, 1.5rem) 0 0;
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
}
.band-zeile .strich { width: clamp(28px, 5vw, 70px); height: 1px; background: var(--signal); flex: none; }
.band-name {
  font-variation-settings: 'wdth' 100, 'wght' 420;
  letter-spacing: .26em; text-transform: uppercase;
  font-size: clamp(12px, 1.35vw, 15px);
}
a.band-name:hover { color: var(--signal); }

/* ── Hörprobe + Anzahl der Stores ────────────────────────────────────────── */

.probe-reihe {
  display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.4rem);
  margin-top: clamp(1.4rem, 3.4vh, 2.4rem);
  flex-wrap: wrap;
}

/* Abgerundetes Quadrat statt Kreis — das greift die Form des
   Lustfeind-Zeichens auf (schwarze Kachel mit weichen Ecken). */
.probe-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(52px, 5.6vw, 64px); aspect-ratio: 1;
  border: 1px solid var(--hair);
  border-radius: 22%;
  background: rgba(237, 233, 224, .05);
  color: var(--bone);
  cursor: pointer; flex: none;
  transition: border-color .3s var(--ease), background .3s var(--ease),
              color .3s var(--ease), transform .3s var(--ease);
}
.probe-knopf:hover { border-color: var(--signal); color: var(--signal); transform: scale(1.05); }
.probe-knopf svg { width: 40%; height: 40%; }
.probe-knopf .zeichen-pause { display: none; }
.probe-knopf[aria-pressed='true'] { border-color: var(--signal); color: var(--signal); }
.probe-knopf[aria-pressed='true'] .zeichen-pause { display: block; }
.probe-knopf[aria-pressed='true'] .zeichen-play  { display: none; }

.probe-text { display: flex; flex-direction: column; gap: .18rem; }
.probe-text b {
  font-variation-settings: 'wdth' 88, 'wght' 520;
  letter-spacing: .16em; text-transform: uppercase; font-size: 12px;
  font-weight: 400;
}

/* Der Fortschrittsbalken der Hörprobe: eine Haarlinie, die mitläuft. */
.probe-balken {
  width: clamp(90px, 16vw, 190px); height: 2px;
  background: var(--hair); overflow: hidden;
}
.probe-balken span {
  display: block; height: 100%; width: 0;
  background: var(--signal);
  transition: width .2s linear;
}

/* Der Hauptknopf: das Video groß auf dieser Seite ansehen. */
.film-knopf {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .6rem 1.3rem .6rem .6rem;
  border: 1px solid var(--signal);
  border-radius: 999px;
  background: color-mix(in srgb, var(--signal) 14%, transparent);
  color: var(--bone); font: inherit; cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.film-knopf:hover { background: color-mix(in srgb, var(--signal) 26%, transparent); transform: translateY(-2px); }
.film-knopf-zeichen {
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--signal); color: #14100a;
}
.film-knopf-zeichen svg { width: 15px; height: 15px; margin-left: 2px; }
.film-knopf-text { display: flex; flex-direction: column; gap: .1rem; text-align: left; }
.film-knopf-text b {
  font-variation-settings: 'wdth' 92, 'wght' 520;
  letter-spacing: .11em; text-transform: uppercase; font-size: 12.5px; font-weight: 400;
}

/* Ein Knopf, der wie ein Link aussieht (in der Datentabelle). */
.als-link {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; border-bottom: 1px solid var(--signal);
}
.als-link:hover { color: var(--signal); }

/* ── Der Kinosaal: das Video groß auf dieser Seite ───────────────────────── */

.kinosaal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(3, 4, 7, .96);
  backdrop-filter: blur(18px);
  animation: kinoAuf .35s var(--ease);
}
.kinosaal[hidden] { display: none; }
@keyframes kinoAuf { from { opacity: 0; } to { opacity: 1; } }

/* 16:9, so groß wie das Fenster es zulässt — hier wird NICHTS beschnitten:
   im Kinosaal soll das Video vollständig zu sehen sein. */
.kinosaal-buehne {
  width: min(100%, calc((100svh - 9rem) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .8);
}
.kinosaal-rahmen, .kinosaal-rahmen iframe { width: 100%; height: 100%; border: 0; display: block; }

.kinosaal-zu {
  position: absolute; top: clamp(.8rem, 2.5vw, 1.6rem); right: clamp(.8rem, 2.5vw, 1.6rem);
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(237, 233, 224, .1); border: 1px solid var(--hair);
  color: var(--bone); cursor: pointer;
  transition: background .25s, transform .25s;
}
.kinosaal-zu:hover { background: rgba(237, 233, 224, .2); transform: rotate(90deg); }
.kinosaal-zeile { margin: 0; text-align: center; }

/* Solange der Kinosaal offen ist, soll die Seite dahinter nicht scrollen. */
body.kino-offen { overflow: hidden; }

/* ── Store-Links ─────────────────────────────────────────────────────────── */

.stores { margin-top: clamp(1.6rem, 4vh, 2.8rem); }

.stores-titel {
  display: flex; align-items: baseline; gap: .8rem;
  margin-bottom: .9rem;
}

.store-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  max-width: 1180px;
}

.store-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .72rem .9rem;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: rgba(237, 233, 224, .035);
  backdrop-filter: blur(6px);
  color: var(--bone);
  transition: border-color .28s var(--ease), background .28s var(--ease),
              transform .28s var(--ease);
}
.store-link:hover {
  /* Beim Zeigen bekennt der Store Farbe — vorher bleibt alles einfarbig,
     damit die Reihe nicht wie ein Aufkleberalbum aussieht. */
  border-color: var(--marke, var(--signal));
  background: rgba(237, 233, 224, .08);
  transform: translateY(-2px);
}
.store-link .store-mark { flex: none; color: var(--bone); opacity: .82; transition: color .28s, opacity .28s; }
.store-link:hover .store-mark { color: var(--marke, var(--signal)); opacity: 1; }
.store-name {
  font-variation-settings: 'wdth' 86, 'wght' 500;
  letter-spacing: .1em; text-transform: uppercase; font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.store-link .pfeil { margin-left: auto; opacity: .3; transition: opacity .28s, transform .28s; flex: none; }
.store-link:hover .pfeil { opacity: .9; transform: translate(2px, -2px); }

/* Hinweis am Fuß der Bühne */
.buehne-fuss {
  width: var(--breit); margin: clamp(1.6rem, 4vh, 2.6rem) auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.film-schalter {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 0; padding: .3rem 0; cursor: pointer;
  color: var(--ash); font: inherit;
}
.film-schalter:hover { color: var(--bone); }
.film-punkt {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ash); flex: none;
  transition: background .3s, box-shadow .3s;
}
.film-schalter[aria-pressed='true'] .film-punkt {
  background: var(--signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent);
  animation: pulsieren 2.6s ease-in-out infinite;
}
@keyframes pulsieren { 50% { opacity: .45; } }

.runter { display: inline-flex; align-items: center; gap: .5rem; color: var(--ash); }
.runter:hover { color: var(--bone); }
.runter svg { animation: sinken 2.4s var(--ease) infinite; }
@keyframes sinken { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Der Auftritt beim Öffnen: die Zeilen kommen nacheinander von unten herein.
   Das ist der EINZIGE Ablauf dieser Art auf der Seite — danach bewegt sich
   nichts mehr von allein. site.js setzt den Verzug je Zeile. */
.tritt-auf {
  animation: auftritt .7s var(--ease) both;
  animation-delay: var(--auftritt-verzug, 0ms);
}
@keyframes auftritt {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ── Zweiter Abschnitt: Cover und Liner Notes ────────────────────────────── */

.notizen {
  position: relative;
  background: var(--panel);
  border-top: 1px solid var(--hair-2);
  padding: clamp(3.5rem, 11vh, 8rem) 0;
}

.notizen-raster {
  width: var(--breit); margin-inline: auto;
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  align-items: start;
}

.cover {
  position: relative; aspect-ratio: 1;
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--hair-2);
  background: var(--panel-2);
}
.cover img { width: 100%; height: 100%; object-fit: cover; }

.notizen-text { max-width: 62ch; }

/* Die Liner Notes stehen in einer Serifenschrift — so, wie Texte in einem
   Plattencover gesetzt sind. Das setzt sie deutlich von den Geräte-
   beschriftungen ringsum ab. */
.notizen-text .fliess {
  font-family: 'Newsreader', Georgia, serif;
  font-variation-settings: 'opsz' 30;
  font-weight: 300;
  font-size: clamp(1.06rem, 1.35vw, 1.28rem);
  line-height: 1.72;
  color: color-mix(in srgb, var(--bone) 88%, transparent);
}
.notizen-text .fliess p { margin: 0 0 1.15em; }
.notizen-text .fliess p:first-of-type { font-style: italic; font-size: 1.12em; color: var(--bone); }
.notizen-text .fliess p:last-child { margin-bottom: 0; }

.abschnitt-marke {
  display: flex; align-items: center; gap: .9rem;
  margin-bottom: clamp(1.2rem, 3vh, 2rem);
}
.abschnitt-marke::after { content: ''; flex: 1; height: 1px; background: var(--hair-2); }

/* Technische Angaben als saubere Tabelle */
.angaben {
  margin-top: clamp(2rem, 5vh, 3.2rem);
  border-top: 1px solid var(--hair-2);
}
.angaben dl { margin: 0; display: grid; grid-template-columns: minmax(110px, 170px) 1fr; }
.angaben dt {
  padding: .8rem 1rem .8rem 0;
  border-bottom: 1px solid var(--hair-2);
  font-variation-settings: var(--label-var);
  letter-spacing: var(--label-ls); text-transform: uppercase;
  font-size: 10.5px; color: var(--ash);
}
.angaben dd {
  margin: 0; padding: .8rem 0;
  border-bottom: 1px solid var(--hair-2);
  font-size: .93rem;
  font-variation-settings: 'wdth' 96, 'wght' 340;
}
.angaben dd.zahlen { font-variant-numeric: tabular-nums; letter-spacing: .06em; color: var(--ash); }

/* ── Dritter Abschnitt: das Verzeichnis aller Veröffentlichungen ─────────── */

.verzeichnis {
  background: var(--void);
  border-top: 1px solid var(--hair-2);
  padding: clamp(3.5rem, 10vh, 7rem) 0 clamp(2rem, 6vh, 4rem);
}
.verzeichnis-kopf { width: var(--breit); margin: 0 auto clamp(1.5rem, 4vh, 2.6rem); }

.katalog-liste { list-style: none; margin: 0 auto; padding: 0; width: var(--breit); }

.katalog-zeile { border-top: 1px solid var(--hair-2); }
.katalog-zeile:last-child { border-bottom: 1px solid var(--hair-2); }

.katalog-link {
  position: relative;
  display: grid; align-items: center;
  gap: clamp(.6rem, 2vw, 2rem);
  grid-template-columns: 72px 64px minmax(0, 1.25fr) minmax(0, 1fr) 62px 20px;
  padding: clamp(.85rem, 2vh, 1.35rem) 0;
  transition: padding-left .4s var(--ease), color .3s var(--ease);
}
/* Beim Zeigen rückt die Zeile ein und links erscheint ein Signalstrich —
   das ersetzt einen bunten Hover-Kasten. */
.katalog-link::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 0; height: 60%; background: var(--signal);
  transition: width .35s var(--ease);
}
.katalog-link:hover { padding-left: 1.6rem; }
.katalog-link:hover::before { width: 3px; }

.katalog-nr { font-variant-numeric: tabular-nums; color: var(--ash); transition: color .3s; }
.katalog-link:hover .katalog-nr { color: var(--signal); }

.katalog-bild {
  width: 64px; aspect-ratio: 1; border-radius: 9px; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--hair-2);
  filter: grayscale(1) contrast(1.05); opacity: .55;
  transition: filter .4s var(--ease), opacity .4s var(--ease);
}
.katalog-link:hover .katalog-bild { filter: none; opacity: 1; }
.katalog-bild img { width: 100%; height: 100%; object-fit: cover; }

.katalog-titel {
  font-variation-settings: 'wdth' 108, 'wght' 300;
  font-size: clamp(1.05rem, 2.2vw, 1.65rem);
  letter-spacing: .05em; text-transform: uppercase;
  line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis;
}
.katalog-band { color: var(--ash); }
.katalog-jahr { font-variant-numeric: tabular-nums; color: var(--ash); text-align: right; }
.katalog-pfeil { color: var(--ash); opacity: .35; transition: opacity .3s, transform .3s; }
.katalog-link:hover .katalog-pfeil { opacity: 1; transform: translateX(3px); color: var(--signal); }

/* ── Fußzeile ────────────────────────────────────────────────────────────── */

.fuss {
  border-top: 1px solid var(--hair-2);
  padding: clamp(2.4rem, 6vh, 4rem) 0 clamp(1.8rem, 4vh, 2.6rem);
  background: var(--void);
}
.fuss-innen {
  width: var(--breit); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem;
  align-items: center; justify-content: space-between;
}
.fuss-menue { display: flex; flex-wrap: wrap; gap: 1.2rem 1.8rem; }
.fuss-menue a:hover { color: var(--signal); }

/* ── Einfache Textseiten (Impressum, Datenschutz) ────────────────────────── */

.textseite {
  width: var(--schmal); margin-inline: auto;
  padding: clamp(7rem, 16vh, 11rem) 0 clamp(4rem, 10vh, 7rem);
}
.textseite h1 {
  font-variation-settings: 'wdth' 114, 'wght' 240;
  font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: .08em;
  text-transform: uppercase; margin: 0 0 clamp(1.6rem, 4vh, 2.6rem);
  line-height: 1;
}
.textseite h2 {
  font-variation-settings: var(--label-var); letter-spacing: var(--label-ls);
  text-transform: uppercase; font-size: 11.5px; color: var(--ash);
  margin: 2.6rem 0 .7rem; font-weight: 400;
}
.textseite p, .textseite li {
  font-family: 'Newsreader', Georgia, serif;
  font-variation-settings: 'opsz' 26; font-weight: 300;
  font-size: 1.06rem; line-height: 1.75;
  color: color-mix(in srgb, var(--bone) 86%, transparent);
}
.textseite a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }

/* Übersichtsseite aller Veröffentlichungen */
.uebersicht-kopf {
  width: var(--breit); margin-inline: auto;
  padding: clamp(7rem, 16vh, 11rem) 0 clamp(2rem, 5vh, 3.4rem);
}
.uebersicht-kopf h1 {
  font-variation-settings: 'wdth' 116, 'wght' 215;
  font-size: clamp(2.4rem, 8vw, 6rem); letter-spacing: .09em;
  text-transform: uppercase; margin: .6rem 0 0; line-height: .95;
}
.uebersicht-kopf .einleitung {
  font-family: 'Newsreader', Georgia, serif; font-weight: 300; font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.7;
  color: var(--ash); max-width: 54ch; margin: 1.4rem 0 0;
}

/* ── Anpassung an kleine Bildschirme ─────────────────────────────────────── */

@media (max-width: 899px) {
  /* Auf dem Handy wird aus dem formatfüllenden Hintergrund ein Band am oberen
     Rand: Video im Kinoformat, Cover quadratisch. Grund: ein 16:9-Video oder
     ein quadratisches Cover in ein hohes Handy-Fenster zu strecken vergrößert
     es auf ein Vielfaches — man sieht dann nur noch einen Ausschnitt.
     Darunter steht der Text auf ruhigem Schwarz. */
  .buehne { justify-content: flex-end; }

  /* Auf dem Handy liegt das Video als Band im Kinoformat oben. Der Zoom wirkt
     darin genauso wie am Rechner: was darüber hinausragt, wird abgeschnitten. */
  .buehne-film:not(.ist-cover) .film-flaeche {
    inset: 0 0 auto 0;
    height: 52vw;
  }
  .buehne-film:not(.ist-cover) .film-flaeche iframe,
  .buehne-film:not(.ist-cover) .film-flaeche .buehne-standbild {
    width:  calc(100vw * var(--film-zoom, 1.6));
    height: calc(56.25vw * var(--film-zoom, 1.6));
  }
  /* Der Verlauf gehört auf dem Handy ins Band, nicht über die ganze Bühne. */
  .buehne-film:not(.ist-cover)::after { background: none; }
  .buehne-film:not(.ist-cover) .film-flaeche::after {
    content: ''; position: absolute; inset: 0; z-index: 3;
    background: linear-gradient(to top,
      var(--void) 0%, rgba(5, 6, 10, .55) 38%, rgba(5, 6, 10, .12) 78%,
      rgba(5, 6, 10, .3) 100%);
  }

  /* Das quadratische Cover liegt als Band oben — es über ein hohes
     Handy-Fenster zu ziehen würde nur einen Ausschnitt übriglassen. */
  .buehne-film.ist-cover .buehne-standbild {
    width: 100%; height: auto; aspect-ratio: 1; object-position: 50% 50%;
  }
  .buehne-film.ist-cover::after {
    background: linear-gradient(to top,
      var(--void) 0%, var(--void) 50%, rgba(5, 6, 10, .74) 66%,
      rgba(5, 6, 10, .32) 84%, rgba(5, 6, 10, .5) 100%);
  }
}

@media (max-width: 900px) {
  .notizen-raster { grid-template-columns: minmax(0, 1fr); }
  .cover { max-width: 320px; }
  .katalog-link { grid-template-columns: 52px 46px minmax(0, 1fr) 46px; }
  .katalog-band, .katalog-pfeil { display: none; }
  .katalog-bild { width: 46px; border-radius: 7px; }
}

@media (max-width: 560px) {
  .kopf-menue { gap: 1rem; }
  .store-liste { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .buehne-fuss { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .angaben dl { grid-template-columns: 1fr; }
  .angaben dt { border-bottom: 0; padding-bottom: .2rem; }
  .angaben dd { padding-top: 0; }
  .katalog-link:hover { padding-left: .8rem; }
}

/* Sehr breite Bildschirme: der Titel darf nicht ins Unlesbare wachsen. */
@media (min-width: 1900px) {
  .titel { --titel-groesse: 11.5rem; }
}

/* ── Rücksicht auf Einstellungen der Besucher ────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .buehne-film.ist-cover .buehne-standbild { filter: blur(20px); }
}

/* Wer hohen Kontrast eingestellt hat, bekommt den Titel ohne Verrechnung —
   dort zählt Lesbarkeit mehr als der Effekt. */
@media (prefers-contrast: more) {
  .titel { mix-blend-mode: normal; text-shadow: 0 2px 30px rgba(5, 6, 10, .9); }
  .buehne-schleier { background: rgba(5, 6, 10, .82); }
  :root { --ash: #a8aebb; --hair: rgba(237, 233, 224, .3); }
}

/* Drucken: der Film fällt weg, der Inhalt bleibt. */
@media print {
  .kopf, .buehne-film, .buehne-schleier, .korn, .probe-reihe, .runter { display: none; }
  body { background: #fff; color: #000; }
  .titel { mix-blend-mode: normal; color: #000; }
}