/* ===========================================================
   RE:CODED — Corporate-Look "Pass"
   Weisser Grund, schwarze Schrift wie die STAFF-Paesse, kein Pink.
   Partnerband und Fuss schwarz wie der ARTIST-Pass. Kuehlblaues
   Negativ-Band wie im Announcement-Video.
   Liegt ueber main.css und stellt dort Farben, Schrift und Layout um.

   Aufbau
     1. Grundwerte          7. The Code
     2. Schrift             8. Tickets
     3. Kopfzeile, Knoepfe  9. Newsletter, Kontakt, Fuss
     4. Abschnitte         10. Negativ-Baender
     5. Kopf als Plakat    11. Intro und Marke
     6. Line-up, DJ-Seite  12. Bewegung
                           13. Cookie-Banner
   =========================================================== */

/* -----------------------------------------------------------
   1. Grundwerte
   ----------------------------------------------------------- */
:root {
  color-scheme: light;
  --black: #f8f8f8;   /* Seitengrund                       */
  --ink:   #ffffff;   /* Kacheln                           */
  --white: #080808;   /* Schrift                           */
  --line:  #080808;   /* Linien                            */
  --grey:  #080808;   /* Nebentext: ebenfalls voll schwarz */
  --key:   #080808;   /* Kaufaktion                        */
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --neg-h: clamp(60px, 7.8vw, 120px);
}
@media (max-width: 52rem) { :root { --neg-h: 60px; } }

/* Schwarze Kontrastflaechen */
.partners,
footer {
  --black: #080808;
  --ink:   #111111;
  --white: #f8f8f8;
  --line:  #2a2a2a;
  --grey:  #9a9a9a;
  background: #080808;
  color: #f8f8f8;
  border-color: #080808;
}
footer { color: var(--grey); padding-top: 40px; }
.partners { padding-top: clamp(12px, 1.6vw, 18px); }

/* -----------------------------------------------------------
   2. Schrift: fette, normal breite Grotesk wie auf den Plakaten
   ----------------------------------------------------------- */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap;
  src: url("../fonts/archivo-latin-800-normal.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: "Archivo"; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap;
  src: url("../fonts/archivo-latin-ext-800-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Archivo"; font-style: normal; font-weight: 900; font-stretch: 100%; font-display: swap;
  src: url("../fonts/archivo-latin-900-normal.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: "Archivo"; font-style: normal; font-weight: 900; font-stretch: 100%; font-display: swap;
  src: url("../fonts/archivo-latin-ext-900-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}
html * { font-stretch: 100% !important; }
.head, .nl__head, .poster__day, .dj h3, .rules dt, .entry__title,
.tier .price, .group__price .price, .group h3, .ev .date { letter-spacing: -.025em; }

/* Ausgewogen umbrechen: keine einzelnen Woerter in der letzten Zeile. */
.poster__label, .poster__step, .poster__xxl, .poster__addr, .rules dt, .rules dd,
.lede, .nl__text, .small, .dj .cap p { text-wrap: balance; }

/* Schwarze Marke und Zeichen (Vorlagen sind weiss) */
.brand img, .wmx img, .cd__sep, .top nav a.dress img { filter: invert(1); }
.top nav a.dress img { opacity: 1; }

/* -----------------------------------------------------------
   3. Kopfzeile und Knoepfe
   ----------------------------------------------------------- */
.top {
  background: rgba(248, 248, 248, .94);
  border-bottom: 2px solid #080808;
}
.top nav a,
.top nav a.dress .x { color: #080808; }
/* Unterstrich waechst weich von links */
.top nav a:not(.buy):not(.dress) {
  background: linear-gradient(#080808, #080808) left bottom / 0 1px no-repeat;
  transition: background-size .5s var(--ease-soft);
}
.top nav a:not(.buy):not(.dress):hover,
.top nav a:not(.buy):not(.dress):focus-visible { background-size: 100% 1px; color: #080808; }

.btn, .btn.acc, .btn.ghost, .top nav a.buy {
  background: #080808;
  background-image: none;
  border: 1px solid #080808;
  border-radius: 0;
  color: #f8f8f8;
  animation: none;
  transition: background-color .35s var(--ease-soft), color .35s var(--ease-soft),
              border-color .35s var(--ease-soft), transform .35s var(--ease-soft);
}
.btn:hover, .btn.acc:hover, .btn.ghost:hover, .top nav a.buy:hover {
  background: #ffffff; border-color: #080808; color: #080808;
}
.btn:active, .top nav a.buy:active, .nl__btn:active { transform: scale(.97); }
.top nav a.buy { padding: 4px 12px; }
.partners .btn, footer .btn { background: #f8f8f8; border-color: #f8f8f8; color: #080808; }

@media (hover: none) { a, button { -webkit-tap-highlight-color: rgba(0, 0, 0, .08); } }
@media (max-width: 52rem) { .top nav a { padding-block: 10px; } }

/* Ticketleiste (Telefon) */
@media (max-width: 48rem) {
  .ticketbar {
    background: rgba(248, 248, 248, .96);
    border-top: 2px solid #080808;
    color: #080808;
    transition: transform .6s var(--ease-soft), visibility 0s;
  }
  .ticketbar.is-off { transition: transform .5s var(--ease-soft), visibility 0s .5s; }
}

/* -----------------------------------------------------------
   4. Abschnitte: schwarze Linien, Koepfe mittig, gleiche Abstaende
   ----------------------------------------------------------- */
section {
  border-bottom: 2px solid #080808;
  padding-block: clamp(64px, 9vw, 120px);
}
.head, .nl__head { text-transform: uppercase; color: #080808; }
.head { font-size: clamp(48px, 8vw, 112px); line-height: .9; margin-bottom: clamp(28px, 4vw, 48px); }
.head em { color: #080808; }
section > .wrap > .head,
section > .wrap > .lede { text-align: center; }

/* Labels wie Techno, House, Group tickets: umrandet, mittig */
.floor {
  display: table; margin-left: auto; margin-right: auto;
  border: 2px solid #080808; padding: 8px 16px;
  font-weight: 700; color: #080808; letter-spacing: .4em;
}
.floor::after, #all-eyes-on .floor::before { display: none; }
#tickets .floor { margin-left: auto; margin-right: auto; }

.entry__content { color: #1a1a1a; }
.strip li + li::before { color: #9a9a9a; }
.nudge__sold { text-decoration-color: rgba(0, 0, 0, .4); }
.ev-visual img, .events img { filter: grayscale(1) contrast(1.1); }

/* -----------------------------------------------------------
   5. Kopf als Plakat
   ----------------------------------------------------------- */
.hero--poster { background: #f8f8f8; overflow: visible; border-bottom: 0; }
.hero--poster .poster {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  padding-block: clamp(36px, 6vw, 80px);
  min-height: calc(100svh - 80px - var(--neg-h));
  align-items: center;
}
.poster__left, .poster__right {
  display: grid; justify-items: center; text-align: center; align-content: center;
  padding-inline: clamp(16px, 4vw, 56px);
}
.poster__right { border-left: 2px solid #080808; align-self: stretch; gap: clamp(22px, 3vw, 34px); }
.hero--poster .wmx { width: min(100%, 520px); margin: 0 auto; }
.hero--poster .tag {
  margin: 14px 0 0; font-family: var(--mono); font-weight: 700; color: #080808;
  font-size: clamp(10px, 1.05vw, 14px); letter-spacing: .3em; text-transform: uppercase;
}
.poster__date, .poster__venue {
  width: 100%; border-top: 2px solid #080808;
  margin-top: clamp(22px, 3vw, 34px); padding-top: clamp(20px, 2.6vw, 30px);
}
.poster__day {
  margin: 0; font-family: var(--wide); font-weight: 900; color: #080808;
  font-size: clamp(44px, 6.6vw, 110px); line-height: .9; white-space: nowrap;
}
.poster__time, .poster__addr, .poster__xxl, .poster__label, .poster__place {
  margin: 12px 0 0; font-family: var(--mono); font-weight: 700; text-transform: uppercase;
  font-size: clamp(11px, 1.15vw, 15px); letter-spacing: .3em; color: #080808;
}
.poster__place { font-family: var(--wide); font-weight: 900; font-size: clamp(28px, 4vw, 48px); letter-spacing: -.02em; }
.poster__venue .poster__label { margin: 0 0 14px; }
.poster__rosa { display: block; width: clamp(170px, 20vw, 300px); height: auto; margin: 0 auto; }
.poster__right .cd { width: 100%; max-width: 520px; }
.poster__right .cd b, .cd span { color: #080808; }
.cd__sep { opacity: 1; animation: none; }
.poster__right .cta .btn { font-size: 16px; padding: 18px 34px; }
.poster__right > .poster__label { max-width: 30ch; }
.poster__step {
  margin: -6px 0 0; font-family: var(--mono); font-weight: 700;
  font-size: clamp(11px, 1.1vw, 14px); letter-spacing: .14em; text-transform: uppercase; color: #080808;
}

/* Handy: Marke, Datum, Zaehler, Kaufknopf — dann der Ort */
@media (max-width: 52rem) {
  .poster__left, .poster__right { display: contents; }
  .hero--poster .poster {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding-inline: var(--gut); gap: 0; min-height: 0;
  }
  .hero--poster .wmx      { order: 1; }
  .hero--poster .tag      { order: 2; letter-spacing: .24em; }
  .poster__date           { order: 3; }
  .poster__right .cd      { order: 4; margin-top: 22px; }
  .poster__right .cta     { order: 5; margin-top: 18px; width: 100%; }
  .poster__step           { order: 6; margin-top: 12px; }
  .poster__right > .poster__label { order: 7; margin-top: 10px; }
  .poster__venue          { order: 8; }
  .poster__day { font-size: clamp(44px, 16vw, 96px); }
  .poster__right .cta .btn {
    display: flex; justify-content: center; align-items: center;
    width: 100%; min-height: 56px; font-size: 15px;
  }
}

/* -----------------------------------------------------------
   6. Line-up (Techno | House) und DJ-Seite
   ----------------------------------------------------------- */
.dj { background: transparent; border: 0; aspect-ratio: auto; overflow: visible; display: flex; flex-direction: column; }
.dj::before, .dj .venue-logo, .dj .cn { display: none; }
.dj > img:not(.venue-logo) {
  position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1;
  object-fit: cover; border: 2px solid #080808; transform: none;
  filter: grayscale(1) contrast(1.1);
  transition: filter .7s var(--ease-soft);
}
.dj:hover > img:not(.venue-logo), .dj.on > img:not(.venue-logo) { transform: none; filter: grayscale(1) contrast(1.25); }
.dj .aeo { top: 10px; left: 10px; background: #f8f8f8; color: #080808; padding: 3px 0 3px 7px; text-shadow: none; }
.dj .aeo em { background: #080808; color: #f8f8f8; }
.dj .cap { position: static; background: none; padding: 16px 4px 6px; text-align: center; }
.dj h3, .dj h3 a { color: #080808; font-size: clamp(24px, 2.4vw, 34px); line-height: .95; }
.dj .cap .fl { margin-top: 10px; }

/* RE:CODED-Schriftzug faehrt ueber das Foto: kuehles Negativ darunter */
.dj .wmo {
  display: flex; align-items: center;
  position: absolute; left: 0; right: 0; top: 0; z-index: 1;
  aspect-ratio: 1 / 1; padding-inline: 7%;
  mix-blend-mode: difference; pointer-events: none;
}
.dj .wmo b { background: #dcecff; }
.dj .wmo .l b, .dj .wmo .r b { transition: transform .9s var(--ease-soft) .1s; }
.dj .wmo .c b { transition: opacity .25s var(--ease-soft); }
.dj:hover .wmo b, .dj.on .wmo b, .dj:focus-within .wmo b { transform: none; }
.dj:hover .wmo .c b, .dj.on .wmo .c b, .dj:focus-within .wmo .c b { opacity: 1; }

@media (min-width: 52.01rem) {
  #all-eyes-on .wrap { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; }
  #all-eyes-on .head { grid-column: 1 / -1; text-align: center; }
  #all-eyes-on .floor:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  #all-eyes-on .djs:nth-of-type(1)   { grid-column: 1; grid-row: 3; }
  #all-eyes-on .floor:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  #all-eyes-on .djs:nth-of-type(2)   { grid-column: 2; grid-row: 3; border-left: 2px solid #080808; }
  #all-eyes-on .djs {
    grid-template-columns: 1fr 1fr; gap: 28px 20px; margin: 24px 0 0;
    padding-inline: clamp(16px, 2.6vw, 40px);
  }
}

.profile__media { border: 2px solid #080808; }
.profile__media img { filter: grayscale(1) contrast(1.1); }

/* -----------------------------------------------------------
   7. The Code: grosse Saetze im Raster
   ----------------------------------------------------------- */
.rules { gap: 0; background: none; border: 2px solid #080808; grid-template-columns: 1fr 1fr; }
.rules div { background: transparent; border: 1px solid #080808; text-align: center; padding: clamp(24px, 3.4vw, 44px); }
.rules dt { font-size: clamp(24px, 3vw, 44px); line-height: .95; margin-bottom: 14px; color: #080808; overflow-wrap: normal; hyphens: none; }
.rules dd { font-size: 13px; letter-spacing: .04em; max-width: 34ch; margin-inline: auto; }
@media (max-width: 52rem) { .rules { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------
   8. Tickets: die Stufe, die gerade gilt, ist schwarz hinterlegt
   ----------------------------------------------------------- */
.tiers { border: 2px solid #080808; gap: 0; background: none; }
.tier {
  background: transparent; border: 0; margin: 0; opacity: 1;
  border-right: 2px solid #080808; box-shadow: none;
}
.tier:last-child { border-right: 0; }
.tier--now { background: #080808; color: #f8f8f8; box-shadow: none; }
.tier--now h3, .tier--now p, .tier--now .price { color: #f8f8f8; }
.tier--now .tier__flag { color: #080808; background: #f8f8f8; box-shadow: none; }
.tier--past, .ev--past { opacity: 1; }
.tier--past .price { color: #080808; text-decoration-color: #080808; text-decoration-thickness: 3px; }
.tier__flag { color: #080808; box-shadow: inset 0 0 0 1px #080808; }
@media (max-width: 52rem) {
  .tier { border-right: 0; border-bottom: 2px solid #080808; }
  .tier:last-child { border-bottom: 0; }
}
#tickets .small, #tickets .actions { text-align: center; justify-content: center; margin-inline: auto; }
#tickets .shops { justify-content: center; }

/* -----------------------------------------------------------
   9. Newsletter, Kontakt, Fuss
   ----------------------------------------------------------- */
.nl { --nl-accent: #080808; }
.nl__row { border: 1px solid #080808; }
.nl__input, .nl__input:focus { background: #ffffff; color: #080808; }
.nl__input::placeholder { color: #8a8a8a; }
.nl__btn { border-left-color: #080808; }
.nl__fine { color: #8a8a8a; }
@media (max-width: 600px) { .nl__btn { border-top-color: #080808; } }

.contact .wrap { text-align: center; }
.contact .lede { margin-inline: auto; }
.contact .cbtns { justify-content: center; }

@media (max-width: 52rem) {
  footer .wrap { align-items: center; text-align: center; gap: 18px; }
  footer img.colon { margin: 0 auto; }
  .footer-legal { justify-content: center; gap: 0 16px; }
  .footer-legal a { min-height: 40px; }
  footer .wrap > span { font-size: 11px; color: #9a9a9a; }
}

/* -----------------------------------------------------------
   10. Negativ-Baender
   Kuehlblaues Negativ aus dem Originalbild (Ausschnitt und Farben wie
   im Announcement-Video). Laufen endlos und gleichmaessig nach links,
   alle in dieselbe Richtung. Kachel nahtlos, Seitenverhaeltnis 15,925:1.
   Ausserhalb des Bildes pausieren sie (Klasse .is-idle, per Skript).
   ----------------------------------------------------------- */
.neg {
  position: relative; overflow: hidden; box-sizing: border-box;
  height: var(--neg-h); min-height: 0; flex: none;
  border-block: 2px solid #080808; background: #dfe8f1;
  contain: paint;
}
.neg + .neg, section + .neg { margin-top: -2px; }
.neg i {
  --tile: calc((var(--neg-h) - 4px) * 15.925);
  position: absolute; top: 0; left: 0; height: 100%;
  width: calc(100% + var(--tile));
  background-image: url("../img/neg/orig-band.jpg");
  background-image: image-set(url("../img/neg/orig-band.webp") type("image/webp"), url("../img/neg/orig-band.jpg") type("image/jpeg"));
  background-repeat: repeat-x;
  background-size: var(--tile) 100%;
  backface-visibility: hidden;
  will-change: transform;
  animation: neg-left 44s linear infinite;
}
.neg.is-idle i { animation-play-state: paused; }
@keyframes neg-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc((var(--neg-h) - 4px) * -15.925), 0, 0); }
}

/* -----------------------------------------------------------
   11. Intro und Marke
   ----------------------------------------------------------- */
/* Der ganze Intro-Raum wird umgekehrt: Grund hell, Marke schwarz. */
html.has-intro .rc-intro { background: #070707; filter: invert(1); }
.rc-intro .wmx img { filter: none; }
/* Sauber ausfahren: kein Schatten-Versatz, keine Unschaerfe */
.rc-intro .wmx .l { animation: none; }
@keyframes intro-out  { from { transform: translateX(var(--from)); } to { transform: translateX(0); } }
@keyframes intro-back { from { transform: translateX(0); opacity: 1; } 99% { opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }
/* Startposition tiefer im Versteck: bei genau 100 % blitzte ein Pixelstreifen. */
.rc-intro .wmx .l img { --from: 104%; }
.rc-intro .wmx .r img { --from: -104%; }
.rc-intro .wmx .l img, .rc-intro .wmx .r img { transform: translateX(var(--from)); }
.wmx .l img { transform: translateX(104%); }
.wmx .r img { transform: translateX(-104%); }
html.has-intro .hero .wmx .l img, html.has-intro .hero .wmx .r img,
html.intro-seen .hero .wmx .l img, html.intro-seen .hero .wmx .r img { transform: none; }
.wmx .l, .wmx .r { contain: paint; }
/* Ohne Intro (zweiter Besuch): Marke faehrt sofort aus */
html:not(.has-intro):not(.intro-seen) .hero .wmx .l img,
html:not(.has-intro):not(.intro-seen) .hero .wmx .r img { animation-delay: .35s; animation-duration: .8s; }
html:not(.has-intro):not(.intro-seen) .hero .wmx .c { animation-duration: .9s; animation-delay: 0s; }
/* Intro verlassen: weich aufzoomen und ausblenden */
html.has-intro-done .rc-intro__in { transform: scale(1.5); filter: none; opacity: 0; }
.rc-intro__in { transition: transform .8s var(--ease-soft), opacity .6s var(--ease-soft) !important; }

/* -----------------------------------------------------------
   12. Bewegung: nur transform/opacity, weich
   ----------------------------------------------------------- */
/* Kopf erscheint nacheinander — nach dem Intro bzw. beim Laden */
@keyframes rise-soft { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
.hero--poster .tag,
.hero--poster .poster__date,
.hero--poster .cd,
.hero--poster .cta,
.hero--poster .poster__step,
.hero--poster .poster__right > .poster__label,
.hero--poster .poster__venue { animation: rise-soft .9s var(--ease-soft) both; }
.hero--poster .tag            { animation-delay: .15s; }
.hero--poster .poster__date   { animation-delay: .25s; }
.hero--poster .cd             { animation-delay: .35s; }
.hero--poster .cta            { animation-delay: .45s; }
.hero--poster .poster__step   { animation-delay: .55s; }
.hero--poster .poster__right > .poster__label { animation-delay: .6s; }
.hero--poster .poster__venue  { animation-delay: .65s; }
html.has-intro:not(.has-intro-done) .hero--poster * { animation-play-state: paused; }

/* Einblenden beim Scrollen (nur mit Skript: html.rv) */
html.rv .rv-item {
  opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
  transition-delay: var(--rv-d, 0ms);
}
html.rv .rv-item.rv-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.rv .rv-item { opacity: 1; transform: none; transition: none; }
  .hero--poster * { animation: none !important; }
  .wmx .l img, .wmx .r img { transform: none; }
  .dj .wmo .l b, .dj .wmo .r b { transition: none; }
  /* Die Baender laufen weiter — langsam und gleichmaessig, ohne Spruenge. */
}

/* -----------------------------------------------------------
   13. Cookie-Banner (Complianz): weiss, schwarze eckige Knoepfe
   ----------------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
  background: #ffffff !important;
  color: #080808 !important;
  border: 2px solid #080808 !important;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .12) !important;
}
.cmplz-cookiebanner .cmplz-btn,
.cmplz-cookiebanner .cmplz-btn.cmplz-accept,
.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
  background: #080808 !important;
  border: 1px solid #080808 !important;
  color: #ffffff !important;
  border-radius: 0 !important;
}
.cmplz-cookiebanner .cmplz-btn:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover {
  background: #ffffff !important;
  color: #080808 !important;
}
.cmplz-cookiebanner .cmplz-category { background: #f8f8f8 !important; }
.cmplz-cookiebanner input:checked + .cmplz-slider { background-color: #080808 !important; }
.cmplz-cookiebanner .cmplz-link,
.cmplz-cookiebanner a { color: #080808 !important; }

/* -----------------------------------------------------------
   14. Handy: nichts darf sich verschieben oder mitziehen lassen
   ----------------------------------------------------------- */
@media (max-width: 52rem) {
  /* DJ-Reihen wischen nur seitlich; senkrecht ist alles fest. */
  .djs {
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
  }
  /* Kacheln in den Reihen blenden nur ein, ohne Versatz nach unten. */
  html.rv .djs .rv-item { transform: none; }
  /* Kein seitliches Verrutschen der ganzen Seite. */
  html, body { overscroll-behavior-x: none; }
}

/* -----------------------------------------------------------
   15. Negativ-Baender mit zwei Bewegungen: laufen endlos nach links
   und schweben dabei ruhig auf und ab. Das Bild ist 1,633x so hoch wie
   das Band (Rand oben/unten aus dem Original), Kachel 9,397 : 1.
   Alle Baender laufen synchron (keine Pause ausserhalb des Bildes).
   ----------------------------------------------------------- */
.neg i {
  --in:  calc(var(--neg-h) - 4px);
  --ih:  calc(var(--in) * 1.633);
  --tile: calc(var(--ih) * 9.397);
  top: calc(var(--in) * -.3165);
  height: var(--ih);
  width: calc(100% + var(--tile));
  background-image: url("../img/neg/orig-band-tall.jpg");
  background-image: image-set(url("../img/neg/orig-band-tall.webp") type("image/webp"), url("../img/neg/orig-band-tall.jpg") type("image/jpeg"));
  background-size: var(--tile) 100%;
  animation: neg-left2 44s linear infinite, neg-float 11s ease-in-out infinite alternate;
}
.neg.is-idle i { animation-play-state: running; }
@keyframes neg-left2 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--ih) * -9.397), 0, 0); }
}
@keyframes neg-float {
  from { translate: 0 -17%; }
  to   { translate: 0 17%; }
}
/* Das Band im Kopf wartet nicht auf das Intro — alle Baender bleiben synchron. */
html .hero--poster .neg i { animation-play-state: running !important; }
@keyframes neg-float {
  from { translate: 0 -14%; }
  to   { translate: 0 14%; }
}

/* -----------------------------------------------------------
   16. Bestaetigung nach dem Newsletter-Link: deutliches Fenster
   ----------------------------------------------------------- */
.nl-done {
  position: fixed; inset: 0; z-index: 9500;
  display: grid; place-items: center; padding: var(--gut);
  background: rgba(248, 248, 248, .86);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: nl-done-in .5s var(--ease-soft) both;
}
.nl-done.is-out { animation: nl-done-out .45s var(--ease-soft) both; }
.nl-done__box {
  width: min(100%, 520px); background: #f8f8f8; border: 2px solid #080808;
  padding: clamp(28px, 6vw, 48px) clamp(20px, 5vw, 44px); text-align: center;
  box-shadow: 10px 10px 0 #080808;
  animation: nl-box-in .7s var(--ease-soft) .05s both;
}
.nl-done__label { margin: 0; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .4em; text-transform: uppercase; }
.nl-done__check {
  width: 64px; height: 64px; margin: 18px auto 6px; display: grid; place-items: center;
  background: #080808; color: #f8f8f8; font-size: 34px; line-height: 1;
}
.nl-done__title {
  margin: 10px 0 12px; font-family: var(--wide); font-weight: 900; text-transform: uppercase;
  font-size: clamp(40px, 9vw, 64px); line-height: .9; letter-spacing: -.025em; color: #080808;
}
.nl-done__text { margin: 0 auto 26px; max-width: 34ch; font-family: var(--mono); font-size: 14px; line-height: 1.7; text-wrap: balance; }
.nl-done__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.nl-done__btns .btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 26px; cursor: pointer; font-family: var(--mono); }
.nl-done__btns .btn.ghost { background: #f8f8f8; color: #080808; }
.nl-done__btns .btn.ghost:hover { background: #080808; color: #f8f8f8; }
@media (max-width: 52rem) { .nl-done__btns .btn { flex: 1 1 100%; } }
@keyframes nl-done-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes nl-done-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes nl-box-in   { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.97); } to { opacity: 1; transform: none; } }