/* ============================================================
   CLASSY — Konzeptstudie · main.css

   Zusammengeführt aus dem Quellprojekt (Webseiten/Classy):
   tokens.css → base.css → sections.css → responsive.css, in dieser
   Reihenfolge. Übernommen ist nur, was die drei Teile der Studie
   brauchen — Hero, Sound-Panel, Footer. Manifest, Ären-Strecke,
   DJs, Spot und FAQ gehören nicht dazu; ihre Regeln fehlen hier
   bewusst.

   Neu gegenüber dem Original:
   - 5  XXL-Footer
   - 6  Laufbänder im Sound-Panel unter 720 px (Fehler im Original)
   ============================================================ */


/* ============================================================
   1 — TOKENS
   Alle Farben sind aus dem Logo und dem Referenz-Artwork gemessen.
   ============================================================ */
:root {
  /* --- Papier --- */
  --paper:        #E7DFD2;
  --paper-light:  #F0EAE0;
  --paper-dark:   #D5C9B8;
  --paper-deep:   #C5B09B;

  /* --- Marke ---
     --orange gehört auf Flächen, Grafik und Riesen-Typo. Für
     Kleintext reicht es auf Papier nicht (3.6:1) — dafür die beiden
     abgeleiteten Textfarben. */
  --orange:        #BE5321;
  --orange-bright: #C85F2A;
  --orange-deep:   #A0431A;
  --orange-text:   #88350F;  /* Kleintext auf Papier */
  --orange-on-dark:#D2703C;  /* Kleintext auf dunklem Grund — 5.3:1 */
  --on-orange:     #FCFAF6;  /* Text auf oranger Fläche — deckend lassen */

  /* --- Tinte --- */
  --ink:          #312823;
  --ink-soft:     #5A4A40;
  --ink-faint:    #5D4C3E;
  --ink-deep:     #1A1512;

  /* --- Schrift --- */
  --font-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-ui:      'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --fs-xs:    clamp(0.69rem, 0.66rem + 0.15vw, 0.78rem);
  --fs-sm:    clamp(0.81rem, 0.78rem + 0.17vw, 0.92rem);
  --fs-base:  clamp(0.95rem, 0.90rem + 0.25vw, 1.08rem);
  --fs-md:    clamp(1.10rem, 1.00rem + 0.45vw, 1.35rem);
  --fs-lg:    clamp(1.40rem, 1.15rem + 1.10vw, 2.10rem);

  --track-wide:  0.28em;
  --track-mid:   0.16em;
  --track-tight: -0.02em;

  /* --- Raster --- */
  --gutter:     clamp(1.25rem, 0.80rem + 2.20vw, 4.00rem);
  --maxw:       84rem;

  /* --- Bewegung --- */
  --dur-fast:  0.25s;
  --dur-mid:   0.55s;
  --dur-slow:  1.10s;
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Ebenen --- */
  --z-grain:   9000;
  --z-nav:     8000;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01s;
    --dur-mid:  0.01s;
    --dur-slow: 0.01s;
  }
}


/* ============================================================
   2 — BASIS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: none) {
  a:active { opacity: 0.62; }
}

h1, h2, p { margin: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

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

.skip-link {
  position: absolute;
  top: -100vh; left: var(--gutter);
  z-index: 10002;
  padding: 0.85rem 1.4rem;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}
.skip-link:focus { top: 3rem; }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
}

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

/* --- Korn: liegt über allem, fängt keine Klicks --- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.30;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  will-change: transform;
}
.js-on .grain { animation: grain-shift 0.7s steps(4) infinite; }
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1.5%); }
  50%  { transform: translate(1.5%, -1%); }
  75%  { transform: translate(-1%, -1.5%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .js-on .grain { animation: none; }
}

/* --- Navigation ---
   Im Original trug sie sechs Sprungmarken. Fünf davon zeigten auf
   Sektionen, die nicht Teil der Studie sind — übrig bleibt das Logo. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  padding: max(1.1rem, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right))
           1.1rem max(var(--gutter), env(safe-area-inset-left));
  transition: background-color var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--paper-deep);
}
.nav.is-hidden { transform: translateY(-105%); }

.nav__logo {
  display: flex;
  align-items: center;
  width: clamp(88px, 9vw, 124px);
  min-height: 44px;
}
.nav__logo img { width: 100%; }

/* --- Marquee --- */
.marquee {
  --marquee-dur: 34s;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2.2rem;
  padding-right: 2.2rem;
  white-space: nowrap;
}
/* Nur mit JS animieren: die Endlosschleife braucht den zweiten,
   per JS eingefügten Durchlauf. Ohne ihn liefe eine Lücke durchs Bild. */
.js-on .marquee__track {
  animation: marquee-run var(--marquee-dur) linear infinite;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
/* FEHLER IM ORIGINAL, hier behoben: dort stand nur .marquee__track.
   Die Laufregel oben heisst .js-on .marquee__track und gewinnt über die
   Spezifität — mit „Bewegung reduzieren" liefen alle vier Laufbänder
   weiter, obwohl die README genau das Gegenteil verspricht. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track,
  .js-on .marquee__track { animation: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.marquee__dot { color: var(--orange); font-size: 0.8em; }

/* --- Scroll-Reveal: ohne JS bleibt alles sichtbar --- */
.js-on .reveal {
  opacity: 0;
  transform: translateY(26px);
}
.js-on .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .js-on .reveal { opacity: 1; transform: none; }
}


/* ============================================================
   3 — HERO
   Das Referenz-Artwork ist nicht als Bild eingebunden, sondern in
   echte Ebenen zerlegt. Alle liegen in derselben Grid-Zelle und
   werden per JS unterschiedlich schnell bewegt.
   ============================================================ */
.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.hero > * { grid-area: 1 / 1; }

/* Ebene 1 — Papier mit Vignette */
.hero__paper {
  background:
    radial-gradient(120% 90% at 50% 8%,  var(--paper-light) 0%, var(--paper) 46%, var(--paper-dark) 100%);
  z-index: 1;
}
.hero__paper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(75% 60% at 50% 42%, transparent 40%, rgba(49,40,35,0.14) 100%);
}

/* Ebene 2 — Riesen-Typo (das Logo selbst) */
.hero__type {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 3.4rem;
  will-change: transform;
}
.hero__type img { width: min(94%, 78rem); }

/* Ebene 3 — freigestellte Person, liegt VOR der Typo */
.hero__person {
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  will-change: transform;
}
.hero__person img {
  width: auto;
  height: min(82svh, 46rem);
  max-width: 96%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 34px 46px rgba(49, 40, 35, 0.30));
}

/* Ebene 4 — Tagline rechts, wie im Artwork */
.hero__tagline {
  z-index: 4;
  align-self: center;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.9rem;
  margin-top: clamp(4rem, 10vw, 9rem);
  padding-right: var(--gutter);
  text-align: right;
  pointer-events: none;
  will-change: transform;
}
.hero__tagline-text {
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 0.62rem + 0.5vw, 1.05rem);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink);
}
.hero__tagline-rule {
  width: clamp(48px, 6vw, 92px);
  height: 1.5px;
  background: var(--ink);
}

/* Ebene 5 — Ort/Jahr links unten + Scroll-Hinweis */
.hero__meta {
  z-index: 4;
  align-self: end;
  justify-self: start;
  padding: 0 var(--gutter) clamp(5rem, 9vw, 7rem);
  pointer-events: none;
}
.hero__meta-line {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__meta-line + .hero__meta-line { margin-top: 0.3rem; color: var(--orange-text); }

/* Rechts statt mittig: mittig läge der Hinweis auf der Figur. */
.hero__scroll {
  z-index: 5;
  align-self: end;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding-right: var(--gutter);
  padding-bottom: clamp(4.5rem, 8vw, 6.5rem);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
  pointer-events: none;
}
.hero__scroll-line {
  width: 1px; height: 46px;
  background: linear-gradient(var(--ink-faint), transparent);
  transform-origin: top center;
}
.js-on .hero__scroll-line { animation: scroll-pulse 2.1s var(--ease-io) infinite; }
@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
  50%      { transform: scaleY(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .js-on .hero__scroll-line { animation: none; transform: none; }
}

/* Ticker am unteren Hero-Rand */
.hero__ticker {
  z-index: 6;
  align-self: end;
  justify-self: stretch;
  padding-top: 0.85rem;
  padding-bottom: max(0.85rem, env(safe-area-inset-bottom));
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--ink);
}
.hero__ticker .marquee__item { color: var(--paper); }
.hero__ticker .marquee__dot  { color: var(--orange-bright); }


/* ============================================================
   4 — SOUND — Orange-Panel mit Figur

   Gleicher Bauplan wie der Hero: EIN Grid, EINE Zelle, alle Ebenen
   per grid-area 1/1 gestapelt, positioniert über align-/justify-self.

   Auf .sound selbst darf niemals transform, filter oder will-change
   landen — das machte die Sektion zum Containing Block für
   position:fixed. Parallax läuft ausschliesslich auf .sound__figure.

   --fig-h ist die Höhe der Figur. Sie steht als Variable hier, weil
   die Laufbänder auf dem Handy daran ausgerichtet werden (Abschnitt 6).
   ============================================================ */
.sound {
  --fig-h: min(88svh, 52rem);
  position: relative;
  display: grid;
  /* minmax(0,1fr): die Laufschriften sind nowrap und mehrere tausend
     Pixel breit. Eine auto-Spalte wüchse darauf. */
  grid-template-columns: minmax(0, 1fr);
  min-height: 100svh;
  background: var(--orange);
  color: var(--on-orange);
  overflow: hidden;
  isolation: isolate;
}
.sound > * { grid-area: 1 / 1; min-width: 0; }

/* Ebene 1 — Panel mit Tiefenverlauf */
.sound__panel {
  z-index: 1;
  background:
    radial-gradient(96% 74% at 50% 42%,
      var(--orange-bright) 0%, var(--orange) 52%, var(--orange-deep) 100%);
}

/* Ebenen 2 + 4 — die beiden Laufbänder: das hintere unter der Figur,
   das vordere darüber. Daraus entsteht die Tiefe.
   align-self:start statt center — bei zentrierten Grid-Items wirkt ein
   margin-top nur zur Hälfte. */
.sound__band {
  align-self: start;
  justify-self: stretch;
  pointer-events: none;
}
.sound__band--back  { z-index: 2; margin-top: clamp(17rem, 42svh, 26rem); }
.sound__band--front { z-index: 4; margin-top: clamp(27rem, 66svh, 40rem); }

.sound__band .marquee__item {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1rem + 6.4vw, 7rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: var(--track-tight);
}
/* Hinteres Band deckend — Kontrastfläche hinter der Figur */
.sound__band--back .marquee__item { color: var(--on-orange); }
.sound__band--back .marquee__dot  { color: var(--ink-deep); }

/* Vorderes Band als Kontur, sonst verdeckte es die Figur */
.sound__band--front .marquee__item {
  color: transparent;
  -webkit-text-stroke: 1.6px var(--on-orange);
}
.sound__band--front .marquee__dot {
  color: var(--ink-deep);
  -webkit-text-stroke: 0;
}

/* Ebene 3 — die freigestellte Figur */
.sound__figure {
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  will-change: transform;
  pointer-events: none;
}
.sound__figure img {
  width: auto;
  height: var(--fig-h);
  max-width: 92%;
  object-fit: contain;
  object-position: bottom center;
  /* Ragt bewusst unter den Panelrand hinaus — der Parallax schiebt
     die Figur nach oben, ohne Überstand risse unten eine Lücke auf. */
  margin-bottom: -5rem;
  filter: drop-shadow(0 30px 50px rgba(26, 21, 18, 0.34));
}

/* Ebene 5 — Kopfzeile und Notiz */
.sound__head {
  z-index: 5;
  align-self: start;
  justify-self: start;
  max-width: min(21rem, 52%);
  padding: clamp(3.5rem, 8vw, 5.5rem) var(--gutter) 0;
}
.sound__head .eyebrow { color: var(--on-orange); }
.sound__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.98;
  margin-top: 0.7rem;
}
.sound__note {
  z-index: 5;
  align-self: end;
  justify-self: end;
  max-width: min(24rem, 54%);
  padding: 0 var(--gutter) clamp(2rem, 4vw, 3rem);
  text-align: right;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--on-orange);
}


/* ============================================================
   5 — XXL-FOOTER

   Das Original schloss mit einem Dreispalter und einer Kontur-
   Laufschrift. Hier trägt die Wortmarke selbst den Abschluss: über
   die volle Breite, bündig an der Unterkante. Sie läuft beim
   Erreichen des Seitenendes von unten ein (showcase.js) und steht
   ganz unten immer vollständig — das Ende der Animation fällt auf
   das Ende der Seite.

   Ein starker Moment pro Sektion: die Kontur-Laufschrift entfällt,
   sie hätte mit der Riesenmarke konkurriert.
   ============================================================ */
.footer {
  position: relative;
  background: var(--ink-deep);
  color: var(--paper);
  padding-top: clamp(3.5rem, 2rem + 5vw, 6.5rem);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem 3rem;
}
.footer__claim {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.2;
  max-width: 22ch;
}
.footer__claim em {
  font-style: normal;
  color: var(--orange-on-dark);
}

/* Trefferfläche über das Padding, nicht über den Abstand */
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
}
.footer__links a,
.footer__legal a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__links a:hover, .footer__links a:focus-visible,
.footer__legal a:hover, .footer__legal a:focus-visible { color: var(--orange-on-dark); }
.footer__links a span {
  transition: transform var(--dur-fast) var(--ease-out);
}
.footer__links a:hover span { transform: translateX(4px); }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem 1.6rem;
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
  padding-top: 0.6rem;
  border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  font-size: var(--fs-xs);
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}
.footer__legal nav { display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
.footer__legal a {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Die Marke selbst. overflow:hidden ist die Maske für den Einlauf. */
.footer__xxl {
  margin-top: clamp(1.2rem, 3vw, 2.6rem);
  padding-inline: clamp(0.6rem, 1.6vw, 1.4rem);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  line-height: 0;
}
.footer__xxl img {
  width: 100%;
  height: auto;
  will-change: transform;
}


/* ============================================================
   6 — RESPONSIVE
   Breakpoints wie im Original: 900 / 720 / 520
   ============================================================ */

/* ---------- < 900px : Tablet ---------- */
@media (max-width: 900px) {
  /* Gesperrte Versalien nicht unter 12 px */
  :root { --fs-xs: clamp(0.75rem, 0.70rem + 0.15vw, 0.80rem); }

  /* Hero neu komponiert: seitlich ist kein Platz, die Tagline wird zur
     Kopfzeile ÜBER der Riesen-Typo — sonst läge sie auf der Figur. */
  .hero__tagline {
    align-self: start;
    justify-self: center;
    align-items: center;
    text-align: center;
    margin-top: 5.2rem;
    padding-right: 0;
    padding-inline: var(--gutter);
  }
  .hero__tagline-text { font-size: clamp(.76rem, .66rem + .3vw, .86rem); line-height: 1.7; }
  .hero__tagline-text br { display: none; }
  .hero__tagline-text br + span::before {
    content: ' · ';
    color: var(--orange);
  }
  .hero__tagline-rule { display: none; }
  .hero__meta { display: none; }
  .hero__scroll { display: none; }

  /* Das Logo ist 2:1 — auf dem Handy läuft es über beide Ränder */
  .hero__type img { width: 108%; max-width: none; }
  /* Hochkant nach oben, die Figur überlappt die Unterkante */
  .hero__type {
    align-items: flex-start;
    padding-top: 8.2rem;
    padding-bottom: 0;
  }
  .hero__person img { height: min(74svh, 36rem); max-width: none; }

  /* Sound: Kopf und Notiz mittig */
  .sound { --fig-h: min(74svh, 38rem); }
  .sound__head {
    justify-self: center;
    max-width: min(34rem, 88%);
    text-align: center;
  }
  .sound__note {
    justify-self: center;
    max-width: min(30rem, 88%);
    text-align: center;
  }
}

/* ---------- < 720px : Handy ---------- */
@media (max-width: 720px) {
  .sound__band .marquee__item { font-size: clamp(1.6rem, 9vw, 3rem); }

  /* FEHLER IM ORIGINAL, hier behoben.
     Die Handywerte stammten noch aus der Zeit, als die Bänder mittig
     (align-self: center) sassen: hinten -5 bis -9rem, vorne 4 bis 7rem.
     Seit der Umstellung auf align-self: start landete das hintere Band
     über der Oberkante und das vordere mitten auf der Überschrift —
     bei 390 px liefen „Late Night" und „Zwei Jahrzehnte" ineinander,
     und die Figur hatte kein Band mehr vor oder hinter sich.

     Jetzt von unten gemessen, an der Figur selbst. Sie steht unten
     bündig und ragt 5rem über den Rand; ihre Höhe ist --fig-h. Die
     Mitte des hinteren Bands liegt auf 69 % ihrer Höhe (Brust), die
     des vorderen auf 42 % (Oberschenkel) — dieselben Stellen wie am
     Desktop. Abgezogen wird die halbe Bandhöhe, damit die Mitte trifft
     und nicht die Unterkante. */
  .sound__band { align-self: end; }
  .sound__band--back {
    margin-top: 0;
    margin-bottom: calc(var(--fig-h) * 0.69 - 5rem - clamp(0.8rem, 4.5vw, 1.5rem));
  }
  .sound__band--front {
    margin-top: 0;
    margin-bottom: calc(var(--fig-h) * 0.42 - 5rem - clamp(0.8rem, 4.5vw, 1.5rem));
  }

  .footer__top { flex-direction: column; align-items: flex-start; }
}

/* ---------- < 520px : kleines Handy ---------- */
@media (max-width: 520px) {
  .hero__type { padding-top: 7.4rem; }
  .hero__person img { height: min(72svh, 34rem); }

  .footer__legal { flex-direction: column; align-items: flex-start; padding-block: 0.6rem 0.4rem; }
}

/* ---------- Niedrige Viewports (Laptop quer) ---------- */
@media (max-height: 560px) and (min-width: 721px) {
  .hero__person img { height: min(72svh, 26rem); }
  .hero__type { padding-top: 4.5rem; }
  .hero__scroll { display: none; }
}

/* ---------- Handy im Querformat ---------- */
@media (max-height: 480px) and (max-width: 900px) {
  .hero__type { padding-top: 5.2rem; }
  .hero__type img { width: 84%; }
  .hero__person img { height: min(78svh, 20rem); }
  .hero__tagline { margin-top: 3.4rem; }

  /* Sound — ebenfalls ein Fehler aus dem Original. Gemessen bei 667×375
     und 844×390: Die Notiz lag unten auf dem vorderen Band (−60 px), und
     ab 721 px Breite schob das Band die Sektion auf 502 px Höhe — mehr
     als der Bildschirm. Die Bänder richten sich deshalb auch hier von
     unten an der Figur aus, wie am Handy hochkant. Kopf links oben,
     Notiz rechts oben daneben: unten ist im Querformat kein Platz. */
  .sound { --fig-h: min(88svh, 24rem); }
  .sound__band .marquee__item { font-size: clamp(1.6rem, 6vw, 3rem); }
  .sound__band { align-self: end; }
  .sound__band--back {
    margin-top: 0;
    margin-bottom: calc(var(--fig-h) * 0.69 - 5rem - clamp(0.8rem, 3vw, 1.5rem));
  }
  .sound__band--front {
    margin-top: 0;
    margin-bottom: calc(var(--fig-h) * 0.42 - 5rem - clamp(0.8rem, 3vw, 1.5rem));
  }
  /* Rechts ohne Aussenabstand und einen Grad kleiner: bei 667 px Breite
     brach der Titel sonst in fünf Zeilen und lief 6 px ins hintere Band. */
  .sound__head {
    justify-self: start;
    text-align: left;
    max-width: 48%;
    padding-right: 0;
  }
  .sound__title { font-size: clamp(1.1rem, 3.4vw, 1.6rem); }
  .sound__note {
    align-self: start;
    justify-self: end;
    text-align: right;
    max-width: 42%;
    padding: clamp(3.5rem, 8vw, 5.5rem) var(--gutter) 0;
  }
}

/* ---------- Zeigegeräte ohne Hover ---------- */
@media (hover: none) {
  .marquee:hover .marquee__track { animation-play-state: running; }
}

/* ---------- Druck ---------- */
@media print {
  .grain, .nav, .hero__ticker, .marquee, .splash, .pb-bar { display: none !important; }
  body { background: #fff; color: #000; padding-top: 0 !important; }
}