/* ══════════════════════════════════════════════════════════════════
   STARTSEITE — Kapitel-Sektionen (Hero .tp-fh, Zahlen, Jahre,
   Programm, Reel, Sponsorenband, Sponsoren-Modal, Egg, Mini-Game).
   Ausgelagert aus neuaufbau.css, damit das Fundament wirklich nur
   Fundament ist. Ladereihenfolge unveraendert: direkt nach
   neuaufbau.css, vor allen anderen Sektions-Dateien.
   Eigentuemer: Seiten-Agent STARTSEITE.
   ══════════════════════════════════════════════════════════════════ */

/* ═══════════ KOMPENSATION: Theme-Einzug auf Listen ═══════════
   Das Theme setzt `.single-content ul, .single-content ol { padding-left: 2em }`
   (= 34 px). Das schlaegt jedes `padding: 0` einer Komponente, weil (0,1,1)
   staerker ist als (0,1,0). Folge, alles gemessen: die Bullet-Reihe unter
   „PULL MIT." sass 17 px neben der Mittelachse, der Zeitplan in den
   Programm-Karten stand 34 px eingerueckt, und die Jahres-Timeline lief 20 px
   ueber ihre Spalte hinaus. Darum hier dieselben Regeln mit zwei Klassen. */
.tp-tpush .tp-tpush__bullets,
.tp-lineup .tp-lineup__acts,
.tp-jahre .tp-jahre__line{ padding-left: 0; padding-inline-start: 0; }

/* Die Zäsur traegt ihr Foto auf einem Kind-Layer. Ohne eigene Grundfarbe
   nimmt jede Messung (und jeder Ladefehler) Weiss an — darum d0 als Boden. */
.nb-zaesur{ background-color: var(--tp-d0); }

/* ═══════════ HERO — Kapitel 0: Foto, Veil, Grain, zentrierter Anker ═══════════ */

.tp-fh{
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: max(640px, 92svh);
  background: var(--nb-d0);
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  color: var(--nb-ondark);
  padding: 0;
}
.tp-fh__photo{
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--tp-fh-bg);
  background-size: cover;
  background-position: center 42%;
  filter: saturate(.78) contrast(1.04);
}
.tp-fh__grad{
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(15,17,21,.82) 0%, rgba(15,17,21,.52) 34%,
                            rgba(15,17,21,.72) 68%, rgba(15,17,21,.97) 100%),
    radial-gradient(78% 62% at 50% 46%, rgba(15,17,21,.10) 0%, rgba(15,17,21,.86) 100%);
}
.tp-fh__noise{
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Utility-Leiste oben: eine Mono-Zeile, Hairline darunter */
.tp-fh__top{ position: relative; z-index: 3; border-bottom: 1px solid var(--nb-hair-d); }
.tp-fh__top-inner{
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  padding-block: 18px;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--nb-ondark-2);
}
.tp-fh__top-eye{ display: inline-flex; align-items: center; gap: 10px; }
.tp-fh__live-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--nb-red);
  animation: tpRecBlink 1.6s ease-in-out infinite;
}
.tp-fh__top-venue{ text-align: right; }

/* Mittelteil: alles auf einer Mittelachse */
.tp-fh__cine-inner{
  position: relative; z-index: 3;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding-block: 72px 110px;
}
.tp-fh__title{
  font-family: var(--nb-font-display);
  font-weight: 400;
  text-transform: uppercase;
  /* Eine Stufe größer als das Fundament-Token und enger gesetzt: Der Hero ist
     die einzige Stelle, an der die Schrift wirklich laut sein darf. Drei
     Zeilen, die dicht übereinander stehen, wirken wie ein Plakat — mit dem
     Standard-Zeilenabstand zerfiel der Block in drei einzelne Zeilen. */
  color: var(--nb-ondark);
  text-shadow: 0 2px 40px rgba(0,0,0,.4);
  margin: 0;
}
/* Größe und Zeilenabstand brauchen ZWEI Klassen (0,2,0).
   Grund: Eine Sammelregel im globalen Token-Block von treckerparty-design.php
   setzt `.tp-fh__title, .tp-phero__title, … { line-height: 1.05 }` — gleiche
   Spezifität wie eine Einzelklasse, steht aber später in der Kaskade und
   gewinnt damit. Mit `.tp-fh .tp-fh__title` ist das sauber erledigt, ohne
   !important und ohne den globalen Block anzufassen. */
.tp-fh .tp-fh__title{
  font-size: clamp(58px, 8.6vw, 118px);
  line-height: .86;
  letter-spacing: -.005em;
}
.tp-fh__title span{ display: block; }

/* AKZENTZEILE — rote Schrift mit Lichtreflex
   Der frühere Bild-Ausschnitt („Farbloch") ist raus: Auf einem dunklen
   Trecker-Foto blieb er graubraun und damit stumpf. Rot ist die Markenfarbe
   und trägt hier viel weiter.
   TOKEN-REGEL: Auf dunklem Grund NIE --tp-red (das ist die Flächenfarbe),
   sondern --tp-red-lift — nur die hält den Kontrast als Schrift.
   Der Glanz läuft über eine zweite Ebene (::after mit demselben Text aus
   data-text), damit die Grundfarbe Rot bleibt und nicht durch den Verlauf
   ersetzt wird. Alle 6 Sekunden ein Reflex, dazwischen Ruhe — ein Hero,
   der dauernd blinkt, wirkt billig. */
.tp-fh .tp-fh__title-accent{
  position: relative;
  display: block;
  color: var(--tp-red-lift);
  text-shadow:
    0 2px 30px rgba(227, 6, 19, .45),
    0 0 90px rgba(227, 6, 19, .28);
}
.tp-fh .tp-fh__title-accent::after{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Schmales Band statt breitem Verlauf: 42–58 % ergaben eine Aufhellung
     über die halbe Zeile — das sah nach Fehler aus, nicht nach Reflex.
     8 % Bandbreite blitzen sichtbar durch. */
  background-image: linear-gradient(104deg,
      transparent 46%,
      rgba(255, 255, 255, .96) 50%,
      transparent 54%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Diese beiden Zeilen sind NICHT optional:
     - text-shadow: none — der rote Leuchtschatten wird sonst vom Eltern-
       Element geerbt und übermalt den hellen Reflex vollständig (genau so
       war der Effekt zuerst unsichtbar, obwohl die Animation lief).
     - -webkit-text-fill-color — manche Chromium-Stände ignorieren
       `color: transparent` beim Zusammenspiel mit background-clip: text. */
  text-shadow: none;
  -webkit-text-fill-color: transparent;
}
/* Nur wenn Bewegung erlaubt ist — .tp-anim setzt der Loader in
   treckerparty-redesign.php, und zwar nur ohne prefers-reduced-motion. */
.tp-anim .tp-fh .tp-fh__title-accent::after{
  animation: tpAkzentGlanz 6s cubic-bezier(.4, 0, .2, 1) 1.2s infinite;
}
@keyframes tpAkzentGlanz{
  0%   { background-position: 150% 0; }
  22%  { background-position: -50% 0; }
  100% { background-position: -50% 0; }
}
/* Auftritt: Die Zeile wächst beim ersten Erscheinen einmal kurz auf.
   Kein Transform auf dem Eltern-Element — das würde einen Stacking-Context
   erzeugen (siehe Kommentar oben, Chrome-Falle bei background-clip). */
.tp-anim .tp-fh .tp-fh__title-accent{
  animation: tpAkzentAuftritt .9s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes tpAkzentAuftritt{
  from { opacity: 0; letter-spacing: .12em; }
  to   { opacity: 1; letter-spacing: -.005em; }
}
@media (prefers-reduced-motion: reduce){
  .tp-fh .tp-fh__title-accent,
  .tp-fh .tp-fh__title-accent::after{ animation: none; }
}

/* Ornament: Linie – rote Raute – Linie (zwischen Headline und Subline) */
.tp-fh__tag::before{
  content: "";
  display: block;
  width: 216px; height: 10px;
  margin: 34px auto 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='216' height='10'%3E%3Crect y='4.5' width='94' height='1' fill='%23F3EFE8' fill-opacity='.34'/%3E%3Crect x='121' y='4.5' width='94' height='1' fill='%23F3EFE8' fill-opacity='.34'/%3E%3Crect x='103.6' y='.6' width='8.8' height='8.8' transform='rotate(45 108 5)' fill='%23E30613'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.tp-fh__tag{
  font-family: var(--tp-font-text);
  font-size: var(--tp-fs-lead);
  line-height: var(--tp-lh-lead);
  color: var(--tp-ondark-2);
  max-width: var(--tp-measure-lead);
  margin: 0 auto var(--tp-s5);
}

/* CTAs: Rot + Ghost, ein Paar, zentriert */
.tp-fh__ctas{ display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.tp-fh__cta,
.tp-fh__cta:link, .tp-fh__cta:visited{
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); font-weight: 600; letter-spacing: .012em; line-height: 1;
  text-transform: none; text-decoration: none;
  padding: 19px 34px;
  border: 1px solid transparent;
  border-radius: var(--nb-r-ui);
  background: var(--nb-red); color: #fff;
  box-shadow: none;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
}
.tp-fh__cta:hover{ background: var(--nb-red-dark); color: #fff; transform: translateY(-2px); }
.tp-fh__cta-arrow{ transition: transform .18s var(--nb-ease); }
.tp-fh__cta:hover .tp-fh__cta-arrow{ transform: translateX(4px); }
.tp-fh__cta-link,
.tp-fh__cta-link:link, .tp-fh__cta-link:visited{
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); font-weight: 600; letter-spacing: .012em; line-height: 1;
  text-decoration: none;
  padding: 19px 34px;
  border: 1px solid rgba(243,239,232,.32);
  border-radius: var(--nb-r-ui);
  background: transparent;
  color: var(--nb-ondark);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.tp-fh__cta-link:hover{
  background: rgba(243,239,232,.07);
  border-color: var(--nb-ondark);
  color: var(--nb-ondark);
  transform: translateY(-2px);
}

/* Kaufargument unter dem Ticket-CTA — eine Zeile, kein zweiter Button.
   ACHTUNG SPEZIFITÄT: Das Eltern-Theme setzt `.single-content p { margin-top:0 }`.
   Dieser Selektor (Klasse + Element = 0,1,1) schlägt eine einzelne Klasse
   (0,1,0) — die Zeile klebte dadurch ohne jeden Abstand am Button.
   Deshalb wird der Abstand über `.tp-fh .tp-fh__cta-note` (0,2,0) gesetzt.
   Kein !important nötig; wer hier umbaut, muss die zwei Klassen behalten. */
.tp-fh__cta-note{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.5;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tp-ondark-2);
  text-align: center;
}
.tp-fh .tp-fh__cta-note{ margin: var(--tp-s3) auto 0; }
@media (max-width: 520px){
  /* Auf schmalen Geräten enger setzen, damit die Zeile eine Zeile bleibt */
  .tp-fh__cta-note{ letter-spacing: .05em; }
  .tp-fh .tp-fh__cta-note{ margin-top: var(--tp-s2); }
}

/* Fakten-Leiste am Hero-Fuß (Entwurfsmuster „hero-bar") */
.tp-fh__bar{
  position: relative; z-index: 3;
  border-top: 1px solid var(--nb-hair-d);
  background: rgba(15,17,21,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tp-fh__bar-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.tp-fh__bar-grid > div{
  padding: 24px 30px;
  text-align: center;
  border-left: 1px solid var(--nb-hair-d);
}
.tp-fh__bar-grid > div:first-child{ border-left: 0; }
.tp-fh__bar-l{
  display: block;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--nb-ondark-3);
}
.tp-fh__bar-grid p{
  margin: 9px 0 0;
  font-size: var(--tp-fs-body); font-weight: 500;
  color: var(--nb-ondark);
}
@media (max-width: 900px){
  .tp-fh__bar-grid{ grid-template-columns: 1fr; }
  .tp-fh__bar-grid > div{ border-left: 0; border-top: 1px solid var(--nb-hair-d); padding: 14px 18px; }
  .tp-fh__bar-grid > div:first-child{ border-top: 0; }
}

/* Scroll-Cue: steht IM Fluss auf derselben Mittelachse wie Headline und CTAs
   und zeigt auf die Fakten-Leiste darunter. (Kein display:none — das Element
   ist Teil der Hero-Komposition, nicht Deko daneben.) */
.tp-fh__scroll{
  position: relative; z-index: 3;
  display: flex;
  margin: 0 auto 26px;
  flex-direction: column; align-items: center; gap: 10px;
}
.tp-fh__scroll-txt{
  font-family: var(--nb-font-mono);
  font-size: var(--tp-fs-mono); letter-spacing: .3em; text-transform: uppercase;
  color: var(--nb-ondark-3);
}
.tp-fh__scroll-bar{
  position: relative;
  width: 1px; height: 44px;
  background: var(--nb-hair-d);
  overflow: hidden;
}
.tp-fh__scroll-bar::after{
  content: "";
  position: absolute; left: 0; top: -40%;
  width: 100%; height: 40%;
  background: var(--nb-red);
  animation: nbScroll 2.2s ease-in-out infinite;
}
@keyframes nbScroll{ 0%{ top: -40%; } 100%{ top: 110%; } }

@media (max-width: 640px){
  .tp-fh{ min-height: max(560px, 88svh); }
  /* Die Utility-Leiste bricht auf zwei zentrierte Zeilen, statt die zweite
     Angabe zu verstecken (Regel: umbrechen, nicht ausblenden). */
  .tp-fh__top-inner{ flex-direction: column; align-items: center; gap: 6px; text-align: center; }
  .tp-fh__top-venue{ text-align: center; }
  .tp-fh__cine-inner{ padding-block: 56px 80px; }
  .tp-fh__ctas{ width: 100%; flex-direction: column; }
  .tp-fh__cta, .tp-fh__cta-link{ width: 100%; }
  .tp-fh__tag::before{ width: 156px; background-size: 156px 10px; }
}
@media (prefers-reduced-motion: reduce){
  .tp-fh__scroll-bar::after, .tp-fh__live-dot{ animation: none; }
}

/* ═══════════ MARQUEE — das SIGNAL-BAND ═══════════
   Eigenes Material zwischen dunklem Hero und hellem Kapitel 01: die Marke
   auf voller Breite. Weiss auf --tp-red ist gemessen 4.9:1. Alle drei
   Theme-Varianten des Shortcodes laufen bewusst auf denselben Ton, damit
   das Band auf jeder Seite gleich aussieht.                            */
.tp-mqx{
  overflow: hidden;
  padding-block: var(--tp-s3);
  background: var(--tp-red);
  color: #fff;
  border-block: 0;
}
.tp-mqx--light, .tp-mqx--dark, .tp-mqx--red{
  background: var(--tp-red);
  color: #fff;
}
.tp-mqx__track{
  display: flex; gap: var(--tp-s4); align-items: center;
  animation: tp-mqx-scroll 38s linear infinite;
  width: max-content;
  font-family: var(--tp-font-display);
  font-size: var(--tp-fs-d3);
  text-transform: uppercase;
  letter-spacing: var(--tp-ls-display);
  white-space: nowrap;
  line-height: 1;
}
/* Trennzeichen: ruhige Raute statt roter Punkt (auf Rot waere Rot unsichtbar) */
.tp-mqx__dot{
  color: #fff;                      /* voll deckend: 4.9:1 auf --tp-red */
  font-size: var(--tp-fs-mono);
  transform: translateY(-.18em);
}
@keyframes tp-mqx-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-33.333%); } }
@media (prefers-reduced-motion: reduce){ .tp-mqx__track{ animation: none; } }

/* ═══════════ KAPITEL 01 · ZAHLEN — Kennzahlen-Band aus Hairlines ═══════════ */

.tp-zh-intro{ margin-bottom: var(--tp-s6); }
.tp-zh-board{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--tp-hair-l);
  border-bottom: 1px solid var(--tp-hair-l);
}
.tp-zh-stat{
  padding: var(--tp-s5) var(--tp-s3);
  text-align: center;
  border-left: 1px solid var(--tp-hair-l);
}
.tp-zh-stat:first-child{ border-left: 0; }
.tp-zh-num{
  display: flex;
  align-items: baseline; justify-content: center; gap: .06em;
  font-family: var(--tp-font-display);
  font-size: var(--tp-fs-d2);
  line-height: 1;
  letter-spacing: var(--tp-ls-display);
  color: var(--tp-ink);
}
/* Einheit steht EINE Stufe tiefer auf der Skala (48 → 34) und auf derselben
   Grundlinie — kein hochgestellter Zwischenwert. */
.tp-zh-k{
  font-size: var(--tp-fs-d3);
  color: var(--tp-ink-3);   /* Einheit, kein Signal — sonst faellt EINE der
                               vier Zahlen ohne Grund aus der Reihe */
  vertical-align: baseline;
  margin-left: 0;
}
.tp-zh-lab{
  display: block;
  margin-top: var(--tp-s2);
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ink-3);
}
/* Wachstums-Zeile: zentrierter Text braucht eine zentrierte Box. */
.tp-zh-grow{
  max-width: var(--tp-measure);
  margin: var(--tp-s5) auto 0;
  text-align: center;
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--tp-ink-2);
}
.tp-zh-grow b{ color: var(--tp-red-ink); font-weight: 700; }
/* Waisen-Reihen vermeiden: 4 Zahlen laufen auf 4 · 2 · 2 — nie auf 3+1. */
@media (max-width: 900px){
  .tp-zh-board{ grid-template-columns: 1fr 1fr; }
  .tp-zh-stat{ border-left: 1px solid var(--tp-hair-l); border-bottom: 1px solid var(--tp-hair-l); }
  .tp-zh-stat:nth-child(2n+1){ border-left: 0; }
  .tp-zh-stat:nth-child(n+3){ border-bottom: 0; }
}
@media (max-width: 560px){
  .tp-zh-stat{ padding: var(--tp-s4) var(--tp-s2); }
}

/* ═══════════ KAPITEL 04 · JAHRE — dunkler Foto-Split (Entwurfsmuster „split") ═══════════ */

.tp-jahre{ display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: stretch; }
.tp-jahre__media{
  position: relative;
  min-height: 452px;
  background-image: var(--tp-jahre-bg);
  background-size: cover;
  background-position: center 46%;
  filter: saturate(.82) contrast(1.03);
  border: 1px solid var(--nb-hair-d);
  border-radius: var(--nb-r-fl);
}
.tp-jahre__txt .tp-lead{ margin-top: 22px; margin-bottom: 34px; }
.tp-jahre__mark{ color: var(--tp-red-ink); }
.tp-jahre__line{
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0;
  border-left: 2px solid var(--nb-hair-d);
  position: relative;
}
.tp-jahre__line::after{
  content: ''; position: absolute; left: -2px; top: 0;
  width: 2px; height: 100%;
  background: linear-gradient(180deg, rgba(243,239,232,.28) 0%, var(--nb-red) 100%);
  transform-origin: top;
}
.tp-jahre__line li{
  display: grid; grid-template-columns: 92px 1fr; gap: 24px;
  align-items: baseline;
  padding: 15px 0 15px 26px;
  border-top: 1px solid var(--nb-hair-d);
  position: relative;
}
.tp-jahre__line li:first-child{ border-top: 0; }
.tp-jahre__line li::before{
  content: ''; position: absolute; left: -8px; top: 1.35rem;
  width: 15px; height: 15px; box-sizing: border-box;
  background: var(--nb-d1);
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  border: 2px solid var(--nb-ondark-3);
  border-radius: 50%;
  z-index: 1;
}
.tp-jahre__line li.is-now::before{
  background: var(--nb-red); border-color: var(--nb-red);
  box-shadow: 0 0 0 6px rgba(227,6,19,.18);
}
.tp-jahre__y{
  font-family: var(--nb-font-display);
  font-size: var(--nb-fs-m);
  letter-spacing: .01em; line-height: 1;
  color: var(--nb-ondark);
}
.tp-jahre__line li.is-now .tp-jahre__y{ color: var(--tp-red-ink); }
.tp-jahre__l{ font-family: var(--nb-font-text); font-size: var(--tp-fs-body); color: var(--nb-ondark-2); }
.tp-jahre__line li.is-now .tp-jahre__l{ color: var(--nb-ondark); font-weight: 500; }
@media (max-width: 900px){
  .tp-jahre__media{ min-height: 280px; }
}

@keyframes tpJahrePulse{ 0%,100%{ box-shadow: 0 0 0 5px rgba(227,6,19,.16); } 50%{ box-shadow: 0 0 0 12px rgba(227,6,19,0); } }
.tp-jahre__line.is-live li.is-now::before{ animation: tpJahrePulse 2.2s ease-in-out infinite; }
html.tp-anim .tp-jahre__line::after{ transform: scaleY(0); transition: transform 1.4s var(--nb-ease); }
html.tp-anim .tp-jahre__line.is-live::after{ transform: scaleY(1); }
html.tp-anim .tp-jahre__line li{ transition: opacity .6s var(--nb-ease), transform .6s var(--nb-ease); }
html.tp-anim .tp-jahre__line li::before{ transition: transform .45s var(--nb-ease); }
html.tp-anim .tp-jahre__line:not(.is-live) li{ opacity: 0; transform: translateX(20px); }
html.tp-anim .tp-jahre__line:not(.is-live) li::before{ transform: scale(0); }
html.tp-anim .tp-jahre__line.is-live li:nth-child(1){ transition-delay: .15s; }
html.tp-anim .tp-jahre__line.is-live li:nth-child(2){ transition-delay: .30s; }
html.tp-anim .tp-jahre__line.is-live li:nth-child(3){ transition-delay: .45s; }
html.tp-anim .tp-jahre__line.is-live li:nth-child(4){ transition-delay: .60s; }
html.tp-anim .tp-jahre__line.is-live li:nth-child(5){ transition-delay: .75s; }
@media (max-width: 900px){ .tp-jahre{ grid-template-columns: 1fr; gap: 40px; } }
@media (prefers-reduced-motion: reduce){ .tp-jahre__line.is-live li.is-now::before{ animation: none; } }

/* ═══════════ KAPITEL 03 · PROGRAMM — Drei Tages-Karten ═══════════ */

.tp-lineup{
  width: min(100% - 44px, var(--nb-shell));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--nb-gap);
  align-items: stretch;
}
.tp-lineup__day{
  position: relative;
  background: var(--nb-surface);
  color: var(--nb-ink);
  border: 1px solid var(--nb-hair-l);
  border-radius: var(--nb-r-fl);
  padding: 40px 34px 36px;
  box-shadow: 0 1px 0 rgba(22,24,28,.03);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.tp-lineup__day::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--nb-hair-l);
}
.tp-lineup__day:hover{ transform: translateY(-4px); box-shadow: 0 18px 44px -22px rgba(22,24,28,.45); }
.tp-lineup__day > .tp-c{ width: 100%; }

/* Feature-Tag = dunkle Akzentkarte mit roter Topline */
.tp-lineup__day.is-feature{
  background-color: var(--nb-d2);
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  background-image: linear-gradient(180deg, var(--nb-d2) 0%, #1C2028 100%);
  color: var(--nb-ondark);
  border-color: var(--nb-hair-d);
  box-shadow: none;
}
.tp-lineup__day.is-feature::before{ background: var(--nb-red); }
.tp-lineup__day.is-feature:hover{ box-shadow: 0 18px 44px -22px rgba(0,0,0,.6); }

/* Kopf der Karte: Mono-Zeile → Anton-Thema → Hairline */
.tp-lineup__head{
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--nb-hair-l);
}
.tp-lineup__day.is-feature .tp-lineup__head{ border-bottom-color: var(--nb-hair-d); }
.tp-lineup__head-l{
  display: flex; align-items: baseline; gap: .6em;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--tp-red-ink);
  margin-bottom: 18px;
}
.tp-lineup__day.is-feature .tp-lineup__head-l{ color: var(--tp-red-ink); }
.tp-lineup__num{ opacity: 1; }
.tp-lineup__num::after{ content: " ·"; }
.tp-lineup__day-name::after{ content: " ·"; }
.tp-lineup__day-name, .tp-lineup__day-date{
  font-family: inherit; font-size: inherit;
  letter-spacing: inherit; line-height: inherit;
  color: inherit; opacity: 1;
}
.tp-lineup__theme{
  font-family: var(--nb-font-display);
  font-size: var(--nb-fs-m);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: left;
  margin: 0;
  color: inherit;
}

/* Zeitplan in der Karte */
.tp-lineup__acts{ list-style: none; padding: 0; margin: 0; }
.tp-lineup__act{ border-bottom: 1px solid var(--nb-hair-l); }
.tp-lineup__day.is-feature .tp-lineup__act{ border-bottom-color: var(--nb-hair-d); }
.tp-lineup__act:last-child{ border-bottom: 0; }
.tp-lineup__act-inner,
.tp-lineup__act-inner:hover, .tp-lineup__act-inner:focus, .tp-lineup__act-inner:active{
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 4px 12px;
  align-items: baseline;
  padding: 12px 0 11px;
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
  outline: none !important;
  transition: padding-left .2s var(--nb-ease);
}
.tp-lineup__act.has-link .tp-lineup__act-inner:hover{ padding-left: 6px; cursor: pointer; }
.tp-lineup__act.has-link .tp-lineup__act-inner:hover .tp-lineup__name{ color: var(--tp-red-ink); }
.tp-lineup__day.is-feature .tp-lineup__act.has-link .tp-lineup__act-inner:hover .tp-lineup__name{ color: var(--tp-red-ink); }
.tp-lineup__arrow{
  display: inline-block;
  margin-left: .4em;
  font-size: .7em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
  color: var(--tp-red-ink);
}
.tp-lineup__act.has-link:hover .tp-lineup__arrow{ opacity: 1; transform: translateX(0); }
.tp-lineup__time{
  grid-row: 1 / 3;
  font-family: var(--nb-font-mono);
  font-size: var(--tp-fs-mono);
  letter-spacing: .06em;
  color: var(--nb-ink-3);
  white-space: nowrap;
}
.tp-lineup__day.is-feature .tp-lineup__time{ color: var(--nb-ondark-3); }
.tp-lineup__name{
  font-family: var(--nb-font-display);
  text-transform: uppercase;
  font-size: var(--tp-fs-lead);
  line-height: 1.1;
  letter-spacing: .014em;
  word-break: keep-all;
  hyphens: manual;
  transition: color .15s;
}
.tp-lineup__tag{
  font-family: var(--nb-font-mono);
  font-size: var(--tp-fs-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nb-ink-3);
  border: 0; padding: 0;
  white-space: normal;
}
.tp-lineup__day.is-feature .tp-lineup__tag{ color: var(--nb-ondark-3); }

@media (max-width: 1000px){
  .tp-lineup{ grid-template-columns: 1fr; }
  .tp-lineup__day{ padding: 32px 26px 28px; }
}

/* ═══════════ KAPITEL 02 · REEL — zwei Bildbänder + Lightbox (dunkel) ═══════════ */

.tp-reel-sec{ padding-bottom: calc(var(--nb-sec) * .75); }
.tp-reel-strips{
  margin: 64px 0 0;
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tp-reel-strip{ overflow: hidden; }
.tp-reel-track{ display: flex; gap: 14px; width: max-content; will-change: transform; }
.tp-reel-strip--ltr .tp-reel-track{ animation: tpReelLtr var(--tp-reel-dur-1, 40s) linear infinite; }
.tp-reel-strip--rtl .tp-reel-track{ animation: tpReelRtl var(--tp-reel-dur-2, 45s) linear infinite; }
.tp-reel-strips:hover .tp-reel-track{ animation-play-state: paused; }
@keyframes tpReelLtr{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(-50%,0,0); } }
@keyframes tpReelRtl{ from{ transform: translate3d(-50%,0,0); } to{ transform: translate3d(0,0,0); } }

/* Die Karte traegt eine eigene Flaeche mit Diagonal-Schraffur. Solange ein
   Bild noch laedt (loading="lazy") oder fehlt, sieht die Zelle nach Platzhalter
   aus — nicht nach Loch im Band. */
.tp-reel-card{
  flex: 0 0 auto;
  position: relative; overflow: hidden;
  margin: 0; padding: 0; cursor: pointer;
  background-color: var(--tp-d2);
  background-image: repeating-linear-gradient(135deg,
    rgba(243,239,232,.05) 0 1px, transparent 1px 9px);
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  border: 1px solid var(--tp-hair-d);
  border-radius: var(--tp-r-fl);
  width: 280px; height: 180px;
  transition: transform .25s var(--tp-ease);
}
.tp-reel-card img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.82) contrast(1.03);
  transition: transform .5s var(--nb-ease), filter .3s;
}
.tp-reel-card:hover{ transform: translateY(-3px); }
.tp-reel-card:hover img{ transform: scale(1.06); filter: none; }
.tp-reel-card::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(15,17,21,.55) 100%);
  opacity: 0; transition: opacity .25s;
  pointer-events: none;
}
.tp-reel-card:hover::after{ opacity: 1; }
.tp-reel-card::before{
  content: '+'; position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; border-radius: var(--nb-r-ui);
  background: var(--nb-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; line-height: 1; font-weight: 300;
  opacity: 0; transform: scale(.7);
  transition: opacity .25s, transform .25s;
  z-index: 2;
}
.tp-reel-card:hover::before{ opacity: 1; transform: scale(1); }

.tp-reel-foot{
  margin-top: 44px;
  display: flex; justify-content: center; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.tp-reel-count{
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--nb-ondark-3);
}
.tp-reel-more{
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); font-weight: 600; letter-spacing: .012em;
  color: var(--nb-ondark); text-decoration: none;
  padding: 13px 22px;
  border: 1px solid rgba(243,239,232,.32);
  border-radius: var(--nb-r-ui);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.tp-reel-more:hover{
  background: rgba(243,239,232,.07);
  border-color: var(--nb-ondark);
  color: var(--nb-ondark);
  transform: translateY(-2px);
}

@media (max-width: 760px){
  .tp-reel-card{ width: 220px; height: 140px; }
  .tp-reel-track{ gap: 10px; }
  .tp-reel-strips{ gap: 10px; }
}
@media (prefers-reduced-motion: reduce){
  .tp-reel-strip--ltr .tp-reel-track,
  .tp-reel-strip--rtl .tp-reel-track{ animation: none; transform: none; }
  .tp-reel-strips{ overflow-x: auto; }
}

/* Lightbox (Funktion unverändert, Optik ins System geholt) */
.tp-lb{
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15,17,21,.95);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: tpLbIn .25s var(--nb-ease);
}
.tp-lb[hidden]{ display: none; }
@keyframes tpLbIn{ from{ opacity: 0; } to{ opacity: 1; } }
.tp-lb__img{
  max-width: 92vw; max-height: 88vh; object-fit: contain;
  border-radius: var(--nb-r-ui);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.tp-lb__close, .tp-lb__nav{
  position: absolute; background: rgba(33,37,44,.85); color: var(--nb-ondark);
  border: 1px solid var(--nb-hair-d);
  width: 56px; height: 56px; border-radius: 50%;
  font-size: 1.8rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, transform .15s;
}
.tp-lb__close{ top: 24px; right: 24px; }
.tp-lb__nav--prev{ left: 24px; top: 50%; transform: translateY(-50%); }
.tp-lb__nav--next{ right: 24px; top: 50%; transform: translateY(-50%); }
.tp-lb__close:hover, .tp-lb__nav:hover{ background: var(--nb-red); border-color: var(--nb-red); color: #fff; }
.tp-lb__nav--prev:hover{ transform: translateY(-50%) translateX(-2px); }
.tp-lb__nav--next:hover{ transform: translateY(-50%) translateX(2px); }
.tp-lb__counter{
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-family: var(--nb-font-mono); font-size: var(--nb-fs-mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--nb-ondark-2);
  padding: .5rem 1rem;
  background: rgba(33,37,44,.6); border-radius: var(--nb-r-ui);
}
@media (max-width: 600px){
  .tp-lb__close, .tp-lb__nav{ width: 44px; height: 44px; font-size: 1.4rem; }
  .tp-lb__close{ top: 12px; right: 12px; }
  .tp-lb__nav--prev{ left: 8px; }
  .tp-lb__nav--next{ right: 8px; }
}

/* ═══════════ PULL MIT — randabfallende Foto-Zäsur mit CTA ═══════════ */

/* Material FOTO: das Bild bleibt sichtbar (Zäsur-Wirkung), der Text steht
   NICHT direkt darauf, sondern auf einer eigenen dunklen Platte. So ist der
   Kontrast unabhaengig vom Bildmotiv messbar — statt „ungefaehr dunkel genug". */
.tp-tpush{
  position: relative; overflow: hidden;
  background: var(--tp-d0);
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  color: var(--tp-ondark);
  padding-block: var(--tp-sec);
  border: 0;
}
.tp-tpush__photo{
  position: absolute; inset: 0; z-index: 0;
  background: var(--tp-pull-bg) center 32% / cover no-repeat;
  filter: saturate(.78) contrast(1.04);
}
.tp-tpush__scrim{
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(76% 62% at 50% 50%, rgba(15,17,21,.30) 0%, rgba(15,17,21,.80) 100%),
    linear-gradient(180deg, rgba(15,17,21,.86) 0%, rgba(15,17,21,.42) 34%,
                            rgba(15,17,21,.42) 66%, rgba(15,17,21,.86) 100%);
}
/* Trecker-Silhouette: Linienzeichnung als Kapitel-Ornament ueber der
   Kopfgruppe — auf DERSELBEN Mittelachse wie Etikett, Headline und CTA.
   Sie bleibt ein Button (Easter Egg: 2x Klick), darf also nicht verschwinden. */
.tp-tpush__silhouette{
  position: relative; z-index: 3;
  display: block;
  width: clamp(150px, 17vw, 210px);
  /* sitzt mit ihrer unteren Haelfte auf der Platte: dort liest sich die
     Linienzeichnung, auf dem Foto allein wirkte sie wie ein Fehler */
  margin: 0 auto calc(var(--tp-s5) * -1);
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
  opacity: 1;
  /* der Schein hebt die duennen Linien vom Foto ab, ohne sie zu ueberzeichnen */
  filter: drop-shadow(0 0 7px rgba(227,6,19,.38));
  transition: filter var(--tp-dur) var(--tp-ease), transform var(--tp-dur) var(--tp-ease);
  -webkit-tap-highlight-color: transparent;
}
.tp-tpush__silhouette svg{ display: block; width: 100%; height: auto; }
.tp-tpush__silhouette:hover{ filter: drop-shadow(0 0 12px rgba(227,6,19,.6)); transform: translateY(-2px); }
.tp-tpush__silhouette:focus-visible{ outline: 2px solid var(--tp-red); outline-offset: 6px; }
/* Die PLATTE: eine zentrierte dunkle Flaeche auf dem Foto. Alles darin steht
   auf EINER Mittelachse — Etikett, rote Linie, Headline, Lead, Bullets, CTA. */
.tp-tpush__inner{
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  /* 940 px = drei Bullet-Spalten a 262 px + Stege: so bleibt jede Bullet
     einzeilig und die Reihe symmetrisch. */
  max-width: 940px;
  padding: var(--tp-s7) var(--tp-s5) var(--tp-s5);
  background: rgba(15,17,21,.90);
  border: 1px solid var(--tp-hair-d);
  border-radius: var(--tp-r-fl);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.tp-tpush__left{ display: contents; }
.tp-tpush__eye{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ondark-3);
  margin-bottom: 0;
}
.tp-tpush__h{
  font-family: var(--tp-font-display);
  font-size: var(--tp-fs-d2);
  line-height: var(--tp-lh-display);
  letter-spacing: var(--tp-ls-display);
  color: var(--tp-ondark);
  max-width: var(--tp-measure-head);
  margin: 0 auto;
  white-space: normal;
}
.tp-tpush__h::before{
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: var(--tp-red);
  margin: var(--tp-s3) auto var(--tp-s4);
}
.tp-tpush__sub{
  font-family: var(--tp-font-text);
  font-size: var(--tp-fs-lead);
  line-height: var(--tp-lh-lead);
  letter-spacing: 0;
  text-transform: none;
  color: var(--tp-ondark-2);
  max-width: var(--tp-measure-lead);
  /* margin-inline:auto — sonst sitzt die BOX links, obwohl der TEXT zentriert
     ist: gemessen Mitte 597 statt 640. */
  margin: var(--tp-s3) auto 0;
}
/* Drei Bullets = drei gleich breite Spalten, damit die Reihe ein Raster ist
   und nicht drei zufaellig platzierte Zeilen. */
.tp-tpush__bullets{
  list-style: none; padding: 0;
  margin: var(--tp-s5) 0 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--tp-s3);
}
.tp-tpush__bullets li{
  display: flex; flex-direction: column; align-items: center; gap: var(--tp-s1);
  font-family: var(--tp-font-text);
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  font-weight: 500;
  color: var(--tp-ondark);
  padding-top: var(--tp-s3);
  border-top: 1px solid var(--tp-hair-d);
}
.tp-tpush__bullet-num{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  letter-spacing: var(--tp-ls-mono);
  color: var(--tp-red-ink);
  border: 0; padding: 0; background: transparent;
}
.tp-tpush__cta{
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--tp-s2);
  margin-top: var(--tp-s5);
}
@media (max-width: 700px){
  .tp-tpush__inner{ padding: var(--tp-s5) var(--tp-s3) var(--tp-s4); }
  .tp-tpush__bullets{ grid-template-columns: 1fr; gap: var(--tp-s2); }
}
.tp-tpush__btn,
.tp-tpush__btn:hover, .tp-tpush__btn:focus, .tp-tpush__btn:active{
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  background: var(--nb-red) !important;
  background-color: var(--nb-red) !important;
  background-image: none !important;
  color: #fff !important;
  padding: 19px 34px !important;
  font-family: var(--nb-font-text);
  text-transform: none; letter-spacing: .012em;
  font-size: var(--tp-fs-body); font-weight: 600; line-height: 1;
  text-decoration: none;
  border: 0 !important;
  outline: none !important;
  border-radius: var(--nb-r-ui);
  box-shadow: none !important;
  -webkit-appearance: none !important; appearance: none !important;
  transition: background-color .18s ease, transform .15s !important;
  -webkit-tap-highlight-color: transparent;
}
.tp-tpush__btn:hover{
  background: var(--nb-red-dark) !important;
  background-color: var(--nb-red-dark) !important;
  transform: translateY(-2px);
}
.tp-tpush__btn-arrow{ transition: transform .15s; display: inline-block; }
.tp-tpush__btn:hover .tp-tpush__btn-arrow{ transform: translateX(4px); }
.tp-tpush__note{
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nb-ondark-3);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

/* Besucher-Abzweig unter dem Starter-Button: klar nachgeordnet (kein zweiter
   Button, sonst konkurrieren zwei Handlungen), aber als Link erkennbar.
   Hairline darüber trennt Starter-Sache von Besucher-Sache.
   Der Abstand steht auf `.tp-tpush .tp-tpush__visitor` (0,2,0), weil das
   Eltern-Theme `.single-content p{margin-top:0}` (0,1,1) mitbringt. */
.tp-tpush .tp-tpush__visitor{
  margin: var(--tp-s3) 0 0;
  padding-top: var(--tp-s3);
  border-top: 1px solid rgba(243,239,232,.16);
  width: 100%;
  max-width: 34ch;
  text-align: center;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-small, 15px);
  line-height: 1.5;
  color: var(--nb-ondark-2);
}
.tp-tpush__visitor-link,
.tp-tpush__visitor-link:link, .tp-tpush__visitor-link:visited{
  color: var(--nb-ondark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--nb-red);
  text-underline-offset: .28em;
  text-decoration-thickness: 2px;
  white-space: nowrap;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.tp-tpush__visitor-link:hover{
  color: #fff;
  text-decoration-color: #fff;
}

/* Entrance (JS setzt .is-live auf der Sektion) */
html.tp-anim .tp-tpush__eye, html.tp-anim .tp-tpush__h, html.tp-anim .tp-tpush__sub,
html.tp-anim .tp-tpush__bullets li, html.tp-anim .tp-tpush__cta{
  transition: opacity .6s var(--nb-ease), transform .6s var(--nb-ease);
}
html.tp-anim .tp-tpush:not(.is-live) .tp-tpush__eye,
html.tp-anim .tp-tpush:not(.is-live) .tp-tpush__h,
html.tp-anim .tp-tpush:not(.is-live) .tp-tpush__sub,
html.tp-anim .tp-tpush:not(.is-live) .tp-tpush__bullets li,
html.tp-anim .tp-tpush:not(.is-live) .tp-tpush__cta{ opacity: 0; transform: translateY(22px); }
html.tp-anim .tp-tpush.is-live .tp-tpush__h{ transition-delay: .10s; }
html.tp-anim .tp-tpush.is-live .tp-tpush__sub{ transition-delay: .20s; }
html.tp-anim .tp-tpush.is-live .tp-tpush__bullets li:nth-child(1){ transition-delay: .35s; }
html.tp-anim .tp-tpush.is-live .tp-tpush__bullets li:nth-child(2){ transition-delay: .45s; }
html.tp-anim .tp-tpush.is-live .tp-tpush__bullets li:nth-child(3){ transition-delay: .55s; }
html.tp-anim .tp-tpush.is-live .tp-tpush__cta{ transition-delay: .55s; }

/* Easter-Egg-Modal (dormant, solange Foto-Modus aktiv) */
.tp-sil-egg{ position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 2rem; overflow: hidden; }
.tp-sil-egg[hidden]{ display: none; }
.tp-sil-egg__bg{
  position: absolute; inset: 0;
  background: rgba(15,17,21,.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.tp-sil-egg__panel{
  position: relative; z-index: 2;
  max-width: 520px;
  text-align: center;
  color: var(--nb-ondark);
  padding: 2.5rem 2rem;
  background: linear-gradient(180deg, var(--nb-d2), var(--nb-d1));
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  border: 1px solid var(--nb-hair-d);
  border-radius: var(--nb-r-fl);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.tp-sil-egg__pre{
  display: inline-block;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono); letter-spacing: .3em; text-transform: uppercase;
  color: var(--tp-red-ink);
  margin-bottom: 1rem;
}
.tp-sil-egg__title{
  font-family: var(--nb-font-display) !important;
  font-size: var(--nb-fs-m) !important;
  line-height: 1.08 !important;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0 0 .85rem !important;
  color: var(--nb-ondark) !important;
}
.tp-sil-egg__text{ font-size: var(--tp-fs-body); line-height: 1.6; color: var(--nb-ondark-2); margin: 0 0 1.5rem; }
.tp-sil-egg__text strong{ color: var(--nb-ondark); }
.tp-sil-egg__row{ display: flex; gap: 1.25rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.tp-sil-egg__cta{
  display: inline-flex; align-items: center; gap: .55em;
  background: var(--nb-red); color: #fff;
  padding: 14px 24px;
  font-family: var(--nb-font-text);
  text-transform: none; letter-spacing: .012em;
  font-size: var(--tp-fs-body); font-weight: 600; text-decoration: none;
  border-radius: var(--nb-r-ui);
  transition: background-color .18s ease, transform .15s;
}
.tp-sil-egg__cta:hover{ background: var(--nb-red-dark); color: #fff; transform: translateY(-2px); }
.tp-sil-egg__close,
.tp-sil-egg__close:hover, .tp-sil-egg__close:focus, .tp-sil-egg__close:active{
  background: transparent !important;
  color: var(--nb-ondark-2);
  border: 0 !important;
  border-bottom: 1px solid rgba(243,239,232,.25) !important;
  outline: none !important; box-shadow: none !important;
  -webkit-appearance: none !important; appearance: none !important;
  font-family: var(--nb-font-mono);
  font-size: var(--tp-fs-mono); letter-spacing: .15em; text-transform: uppercase;
  cursor: pointer;
  padding: .5rem 1rem;
  transition: color .2s, border-color .2s;
}
.tp-sil-egg__close:hover{ color: var(--nb-ondark); border-bottom-color: var(--nb-ondark) !important; }

/* ═══════════ KAPITEL 05 · SPONSOREN — helle Logo-Wand mit Lauf ═══════════ */

/* Der BG-Layer bleibt im Spiel: er setzt einen ruhigen Lichtpunkt hinter das
   Band, statt ausgeblendet zu werden. */
.tp-spons{ position: relative; }
.tp-spons__bg{
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(62% 48% at 50% 32%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%);
}
/* Abstaende kommen aus der Systemregel `.tp-sec-head + .tp-lead` — hier nur
   noch die Sonderheit: der Hinweis haengt als zweite Zeile darunter. */
.tp-spons__lead{ margin-bottom: 0; }
.tp-spons__hint{
  display: block;
  margin-top: var(--tp-s2);
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ink-3);
}

/* Easter-Egg-Knopf: kleine rote Raute, treibt ruhig */
.tp-spons__egg-zone{ position: relative; height: 0; }
.tp-spons-egg-drift{
  position: absolute; right: 6%; top: -10px;
  animation: nbEggDrift 9s ease-in-out infinite alternate;
}
@keyframes nbEggDrift{
  0%{ transform: translate(0, 0); }
  50%{ transform: translate(-30px, 18px); }
  100%{ transform: translate(10px, -12px); }
}
.tp-spons-egg,
.tp-spons-egg:hover, .tp-spons-egg:focus, .tp-spons-egg:active{
  position: relative;
  width: 44px; height: 44px;
  cursor: pointer;
  display: grid; place-items: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  padding: 0;
  box-shadow: none !important;
  outline: none;
  -webkit-appearance: none !important; appearance: none !important;
}
.tp-spons-egg__hint{
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-family: var(--nb-font-mono);
  font-size: var(--tp-fs-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--nb-ink-3);
  white-space: nowrap;
  opacity: 0; transition: opacity .2s;
}
.tp-spons-egg:hover .tp-spons-egg__hint{ opacity: 1; }
.tp-spons-egg__ring{
  position: absolute; inset: 0;
  border: 1px solid rgba(227,6,19,.4);
  border-radius: 50%;
  animation: nbEggRing 2.4s ease-out infinite;
}
.tp-spons-egg__ring--2{ animation-delay: 1.2s; }
@keyframes nbEggRing{
  from{ transform: scale(.6); opacity: 1; }
  to{ transform: scale(1.4); opacity: 0; }
}
.tp-spons-egg__core{
  width: 16px; height: 16px;
  background: var(--nb-red);
  transform: rotate(45deg);
  display: grid; place-items: center;
  transition: transform .2s;
}
.tp-spons-egg:hover .tp-spons-egg__core{ transform: rotate(45deg) scale(1.15); }
.tp-spons-egg__icon{ font-size: 9px; color: #fff; transform: rotate(-45deg); }

/* LOGO-BAND — zwei gegenlaeufige Reihen (Struktur des Shortcodes bleibt:
   Reihe A laeuft nach links, Reihe B nach rechts, jede Reihe ist 2x geklont,
   damit der Loop nahtlos ist). Gestalterisch ist es EIN Material: eine
   randabfallende helle Bandflaeche mit Haarlinien oben und unten, die Kacheln
   sind durch senkrechte Haarlinien getrennt. */
.tp-spons-stage{
  position: relative;
  margin-top: var(--tp-s6);
  /* randabfallend: die Sektion ist voll breit, das Band nutzt sie ganz aus */
  padding-block: var(--tp-s1);
  background: var(--tp-surface);
  border-block: 1px solid var(--tp-hair-l);
  overflow: hidden;
}
/* Weiche Kanten links/rechts: das Band laeuft aus, statt abgeschnitten zu wirken */
.tp-spons-stage__edge{
  position: absolute; top: 0; bottom: 0; z-index: 2;
  width: clamp(48px, 8vw, 130px);
  pointer-events: none;
}
.tp-spons-stage__edge--l{ left: 0;  background: linear-gradient(90deg, var(--tp-surface) 0%, rgba(252,250,246,0) 100%); }
.tp-spons-stage__edge--r{ right: 0; background: linear-gradient(270deg, var(--tp-surface) 0%, rgba(252,250,246,0) 100%); }

.tp-spons-track{
  display: flex;
  width: max-content;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  animation: tpSponsRun var(--dur, 40s) linear infinite;
}
.tp-spons-track + .tp-spons-track{ margin-top: var(--tp-s1); }
.tp-spons-track--b{ animation-direction: reverse; }
@keyframes tpSponsRun{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(-50%,0,0); } }
.tp-spons-stage:hover .tp-spons-track{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
  .tp-spons-track, .tp-spons-track--b{ animation: none; }
  /* ohne Lauf werden die Klone zur zweiten Bandhaelfte — nichts verschwindet */
  .tp-spons-stage{ overflow-x: auto; }
}

.tp-spons-tile{
  position: relative;
  flex: 0 0 auto;
  /* feste Kachelgroesse: beide Reihen sind exakt gleich hoch */
  width: clamp(180px, 21vw, 240px);
  height: 128px;
  display: grid; place-items: center;
  padding: var(--tp-s3) var(--tp-s4);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--tp-hair-l);
  border-radius: 0;
  cursor: pointer;
  overflow: hidden;
  transition: background-color .18s var(--tp-ease);
}
/* Stufe wird oben als 2-px-Kante gezeigt — Exklusiv rot, Premium Tinte */
.tp-spons-tile::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: transparent;
}
.tp-spons-tile--exklusiv::before{ background: var(--tp-red); }
.tp-spons-tile--premium::before{ background: var(--tp-hair-l); }
.tp-spons-tile:hover{ background: var(--tp-paper); }
.tp-spons-tile__inner{ display: grid; place-items: center; width: 100%; }
.tp-spons-tile__logo{ max-width: 100%; max-height: 58px; object-fit: contain; display: block; }
.tp-spons-tile__name{
  font-family: var(--tp-font-display);
  font-size: var(--tp-fs-lead); letter-spacing: var(--tp-ls-display); text-transform: uppercase;
  color: var(--tp-ink-2); text-align: center; line-height: 1.12;
}
.tp-spons-tile:hover .tp-spons-tile__name{ color: var(--tp-ink); }
/* Spotlight des 3D-Tilt-Eggs: folgt --mx/--my aus dem Skript */
.tp-spons-tile__spot{
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s var(--tp-ease);
  background: radial-gradient(120px 120px at var(--mx, 50%) var(--my, 50%), rgba(227,6,19,.14) 0%, rgba(227,6,19,0) 70%);
}
.tp-spons-tile:hover .tp-spons-tile__spot{ opacity: 1; }
/* Offene Zelle: bewusst leerer, lädt ein */
.tp-spons-tile--open{
  background: transparent;
  text-decoration: none;
}
.tp-spons-tile--open .tp-spons-tile__name{ color: var(--tp-ink-3); }
.tp-spons-tile--open:hover .tp-spons-tile__name{ color: var(--tp-red-ink); }
.tp-spons-tile__egg{
  position: absolute; top: var(--tp-s1); right: var(--tp-s2);
  font-size: var(--tp-fs-mono); color: var(--tp-red-ink);
}

/* CTA-Zeile unter dem Lauf */
.tp-spons__bottom-cta{
  margin-top: 48px;
  display: flex; justify-content: center; align-items: center;
  gap: 20px; flex-wrap: wrap;
}
.tp-spons__btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  background: var(--nb-red); color: #fff;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); font-weight: 600; letter-spacing: .012em; line-height: 1;
  padding: 19px 34px;
  border-radius: var(--nb-r-ui);
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.tp-spons__btn:hover{ background: var(--nb-red-dark); color: #fff; transform: translateY(-2px); }
.tp-spons__link{
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); font-weight: 600; letter-spacing: .012em; line-height: 1;
  padding: 18px 30px;
  color: var(--nb-ink);
  border: 1px solid rgba(22,24,28,.28);
  border-radius: var(--nb-r-ui);
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.tp-spons__link:hover{ background: rgba(22,24,28,.05); border-color: var(--nb-ink); color: var(--nb-ink); transform: translateY(-2px); }

/* Sponsor-Detail-Modal (JS befüllt #tpSponsModalContent) */
.tp-spons-modal{ position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.tp-spons-modal[hidden]{ display: none; }
.tp-spons-modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(15,17,21,.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tp-spons-modal__panel{
  position: relative; z-index: 2;
  width: min(560px, 100%);
  max-height: 88vh; overflow-y: auto;
  background: var(--nb-surface);
  color: var(--nb-ink);
  border: 1px solid var(--nb-hair-l);
  border-radius: var(--nb-r-fl);
  box-shadow: 0 30px 80px rgba(15,17,21,.35);
}
.tp-spons-modal__close{
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--nb-ink-2);
  border: 1px solid var(--nb-hair-l); border-radius: 50%;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  z-index: 3;
}
.tp-spons-modal__close:hover{ background: var(--nb-red); border-color: var(--nb-red); color: #fff; }
.tp-spons-modal__content{ padding: 2.5rem 2rem 2.2rem; }
.tp-spons-modal__head{ display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.tp-spons-modal__logo-box{
  flex: 0 0 auto;
  width: 120px; height: 88px;
  display: grid; place-items: center;
  background: var(--nb-paper);
  border: 1px solid var(--nb-hair-l);
  border-radius: var(--nb-r-ui);
  padding: 12px;
}
.tp-spons-modal__logo{ max-width: 100%; max-height: 64px; object-fit: contain; }
.tp-spons-modal__name-block{ min-width: 0; }
.tp-spons-modal__tier{
  display: inline-block;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--tp-red-ink);
  margin-bottom: 6px;
}
.tp-spons-modal__name{
  font-family: var(--nb-font-display);
  font-size: var(--nb-fs-s); line-height: 1.14; letter-spacing: .014em;
  text-transform: uppercase;
  color: var(--nb-ink);
  margin: 0;
}
.tp-spons-modal__branche{
  display: block;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--nb-ink-3);
  margin-top: 6px;
}
.tp-spons-modal__kurz{ font-size: var(--tp-fs-body); line-height: 1.65; color: var(--nb-ink-2); margin: 0 0 18px; }
.tp-spons-modal__bullets{ list-style: none; padding: 0; margin: 0 0 22px; }
.tp-spons-modal__bullets li{
  position: relative;
  padding: 9px 0 9px 22px;
  border-bottom: 1px solid var(--nb-hair-l);
  font-size: var(--tp-fs-body); color: var(--nb-ink-2);
}
.tp-spons-modal__bullets li:last-child{ border-bottom: 0; }
.tp-spons-modal__bullets li::before{
  content: ""; position: absolute; left: 2px; top: 17px;
  width: 7px; height: 7px;
  background: var(--nb-red);
  transform: rotate(45deg);
}
.tp-spons-modal__cta{
  display: inline-flex; align-items: center; gap: .55em;
  background: var(--nb-red); color: #fff;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); font-weight: 600; line-height: 1;
  padding: 14px 24px;
  border-radius: var(--nb-r-ui);
  text-decoration: none;
  transition: background-color .18s ease, transform .15s;
}
.tp-spons-modal__cta:hover{ background: var(--nb-red-dark); color: #fff; transform: translateY(-2px); }
/* BRANDSTA-Variante im Modal */
.tp-spons-modal__egg{ padding-top: 6px; }
.tp-spons-modal__egg::before{
  content: "✦"; display: block;
  color: var(--tp-red-ink); font-size: var(--tp-fs-mono);
  margin-bottom: 10px;
}
.tp-spons-modal__egg-mark{
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--tp-red-ink);
}
.tp-spons-modal__egg-text{ font-size: var(--tp-fs-body); line-height: 1.6; color: var(--nb-ink-2); margin: 8px 0 14px; }
.tp-spons-modal__egg-text strong{ color: var(--nb-ink); }
.tp-spons-modal__egg-cta{
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); font-weight: 600;
  color: var(--nb-ink); text-decoration: none;
  padding: 12px 20px;
  border: 1px solid rgba(22,24,28,.28); border-radius: var(--nb-r-ui);
  transition: border-color .18s, background-color .18s, transform .15s;
}
.tp-spons-modal__egg-cta:hover{ border-color: var(--nb-ink); background: rgba(22,24,28,.05); color: var(--nb-ink); transform: translateY(-2px); }

/* Egg-Takeover (BRANDSTA-Overlay mit Konfetti) */
.tp-egg-takeover{ position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 2rem; overflow: hidden; }
.tp-egg-takeover[hidden]{ display: none; }
.tp-egg-takeover__bg{
  position: absolute; inset: 0;
  background: rgba(15,17,21,.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.tp-egg-takeover__confetti{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tp-egg-piece{
  position: absolute; top: -12px; left: var(--x, 50%);
  width: 8px; height: 12px;
  background: var(--nb-red);
  transform: rotate(var(--r, 0deg));
  animation: nbConfetti var(--d, 2.4s) linear var(--s, 0s) infinite;
  opacity: 0;
}
.tp-egg-piece:nth-child(3n){ background: var(--nb-paper); }
.tp-egg-piece:nth-child(4n){ background: var(--nb-ondark-3); height: 8px; }
@keyframes nbConfetti{
  0%{ transform: translateY(0) rotate(var(--r, 0deg)); opacity: 0; }
  8%{ opacity: 1; }
  100%{ transform: translateY(105vh) rotate(calc(var(--r, 0deg) + 240deg)); opacity: .9; }
}
.tp-egg-takeover__panel{
  position: relative; z-index: 2;
  max-width: 560px;
  text-align: center;
  color: var(--nb-ondark);
  padding: 3rem 2.4rem 2.6rem;
  background: linear-gradient(180deg, var(--nb-d2), var(--nb-d1));
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  border: 1px solid var(--nb-hair-d);
  border-radius: var(--nb-r-fl);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.tp-egg-takeover__pre{
  display: inline-block;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono); letter-spacing: .3em; text-transform: uppercase;
  color: var(--tp-red-ink);
  margin-bottom: 1.1rem;
}
.tp-egg-takeover__title{
  font-family: var(--nb-font-display);
  font-size: var(--nb-fs-l);
  line-height: 1.02; letter-spacing: .008em;
  text-transform: uppercase;
  color: var(--nb-ondark);
  margin: 0 0 1rem;
}
.tp-egg-takeover__title-accent{ color: var(--tp-red-ink); }
.tp-egg-takeover__text{ font-size: var(--tp-fs-body); line-height: 1.65; color: var(--nb-ondark-2); margin: 0 0 1.6rem; }
.tp-egg-takeover__text strong{ color: var(--nb-ondark); }
.tp-egg-takeover__cta-row{ display: flex; gap: 1.2rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.tp-egg-takeover__cta{
  display: inline-flex; align-items: center; gap: .55em;
  background: var(--nb-red); color: #fff;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); font-weight: 600; line-height: 1;
  padding: 17px 30px;
  border-radius: var(--nb-r-ui);
  text-decoration: none;
  transition: background-color .18s ease, transform .15s;
}
.tp-egg-takeover__cta:hover{ background: var(--nb-red-dark); color: #fff; transform: translateY(-2px); }
.tp-egg-takeover__close{
  background: transparent !important;
  color: var(--nb-ondark-2);
  border: 0 !important;
  border-bottom: 1px solid rgba(243,239,232,.25) !important;
  font-family: var(--nb-font-mono);
  font-size: var(--tp-fs-mono); letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  padding: .5rem .6rem;
  transition: color .2s, border-color .2s;
}
.tp-egg-takeover__close:hover{ color: var(--nb-ondark); border-bottom-color: var(--nb-ondark) !important; }
.tp-egg-takeover__signature{
  display: block;
  margin-top: 1.6rem;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--nb-ondark-3);
}
@media (prefers-reduced-motion: reduce){
  .tp-spons-track{ animation: none; }
  .tp-spons-stage{ overflow-x: auto; }
  .tp-egg-piece{ animation: none; display: none; }
  .tp-spons-egg__ring{ animation: none; opacity: 0; }
  .tp-spons-egg-drift{ animation: none; }
}

/* ═══════════ MINI-GAME — nur Farb-Einpassung (Spielfeld-Geometrie bleibt!) ═══════════
   Die Spielfeld-Maße sind mit JS-Kollisionskonstanten gekoppelt — deshalb wird hier
   bewusst NUR die Farbwelt angepasst, nichts an Größen/Abständen des Spielfelds.   */
section.tp-mini{
  background: var(--nb-paper);
  color: var(--nb-ink);
  border-top: 1px solid var(--nb-hair-l);
}
section.tp-mini::before{ content: none; }
.tp-mini__pre{
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .24em;
  color: var(--nb-ink-3);
}
.tp-mini__title{
  font-family: var(--nb-font-display) !important;
  font-size: var(--nb-fs-l) !important;
  line-height: 1.04 !important;
  letter-spacing: .008em;
  color: var(--nb-ink) !important;
}
.tp-mini__title span{ color: var(--tp-red-ink); }
.tp-mini__desc{ color: var(--nb-ink-2); }
.tp-mini__desc strong{ color: var(--nb-ink); }
.tp-mini__runner, .tp-mini__runner:focus, .tp-mini__runner:focus-visible{
  border-radius: var(--nb-r-fl);
  border-color: var(--nb-hair-l);
}



/* ══════════════════════════════════════════════════════════════════
   SPONSORENBAND — 1:1 wie auf der Live-Seite
   Dennis: "bau es 1:1 auf der startseite um wie auf der liveseite".
   Quelle: Treckerparty-Case-Study/konzept/LIVE-sponsorenband.css
   (von treckerparty-schoenenbach.de abgezogen und gesichert).
   Die 27 Sponsoren laufen als --exklusiv: dunkle Kachel mit Radial-
   Verlauf, "★ EXKLUSIV"-Marke, roter Leuchtrand + Spotlight bei Hover.
   ABWEICHUNG (von Dennis gewünscht): ZWEI Reihen statt einer, damit
   bei 27 Sponsoren mehr gleichzeitig sichtbar sind. Reihe 2 laeuft
   gegenlaeufig — siehe .tp-spons-track--b im Shortcode.
   ══════════════════════════════════════════════════════════════════ */
.tp-spons-stage{position: relative;
  overflow: hidden;
  padding: 5.5rem 0; /* großzügig damit Hover-Shadow nicht abgeschnitten wird */
  margin: var(--tp-sp-md) 0;
  /* Horizontaler Fade — Maske ist großzügig damit Vertikal nichts clippt */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);}
.tp-spons-stage__edge{position: absolute; top: 0; bottom: 0; width: 120px; pointer-events: none; z-index: 3;}
.tp-spons-stage__edge--l{left: 0; background: linear-gradient(90deg, #0a0a0a, transparent);}
.tp-spons-stage__edge--r{right: 0; background: linear-gradient(-90deg, #0a0a0a, transparent);}
.tp-spons-track{display: flex; gap: 1.5rem;
  width: max-content;
  animation: tpSponsScroll var(--dur, 40s) linear infinite;
  will-change: transform;}
.tp-spons-stage:hover .tp-spons-track{animation-play-state: paused;}
@keyframes tpAngleSpin{to { --tp-angle: 360deg;}
.tp-spons-tile,
.tp-spons-tile:hover,
.tp-spons-tile:focus,
.tp-spons-tile:focus-visible,
.tp-spons-tile:active{flex: 0 0 auto;
  position: relative;
  width: 300px; height: 200px;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  border: 0 !important;
  outline: none !important;
  -webkit-appearance: none !important;
          appearance: none !important;
  padding: 0; margin: 0;
  border-radius: 14px;
  cursor: pointer;
  overflow: visible;
  box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  transition: box-shadow .4s var(--tp-ease);
  transform-style: preserve-3d;
  transform: perspective(900px);
  --mx: 50%; --my: 50%;
  -webkit-tap-highlight-color: transparent;}
.tp-spons-tile::before{content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--tp-angle, 0deg),
    transparent 0deg,
    var(--tp-rot) 60deg,
    transparent 120deg,
    transparent 240deg,
    var(--tp-rot) 300deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s;
  z-index: 1;
  pointer-events: none;}
.tp-spons-tile:hover{box-shadow: 0 28px 70px rgba(227,6,19,.55), 0 8px 24px rgba(227,6,19,.25); z-index: 10;}
.tp-spons-tile:hover::before{opacity: 1; animation: tpAngleSpin 2.5s linear infinite;}
.tp-spons-tile::after{content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle 220px at var(--mx) var(--my),
                rgba(227,6,19,.18) 0%,
                rgba(227,6,19,.08) 30%,
                transparent 55%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
  border-radius: inherit;
  z-index: 3;}
.tp-spons-tile:hover::after{opacity: 1;}
.tp-spons-tile__inner{position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 1.75rem;
  z-index: 2;
  border-radius: inherit;}
.tp-spons-tile__logo{max-width: 85%; max-height: 120px;
  object-fit: contain;
  display: block;
  transition: transform .35s var(--tp-ease);
  transform: translateZ(20px); /* hebt aus dem Plate raus */}
.tp-spons-tile:hover .tp-spons-tile__logo{transform: translateZ(40px) scale(1.04);}
.tp-spons-tile__name{font-family: var(--tp-font-headline);
  font-size: 1.55rem; line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--tp-schwarz);
  padding: .65rem 0;
  border-top: 2px solid var(--tp-schwarz);
  border-bottom: 2px solid var(--tp-schwarz);
  transition: color .25s, border-color .25s, transform .35s var(--tp-ease);
  transform: translateZ(15px);}
.tp-spons-tile:hover .tp-spons-tile__name{color: var(--tp-rot); border-color: var(--tp-rot); transform: translateZ(35px) scale(1.03);}
.tp-spons-tile__spot{display: none;}
.tp-spons-tile--exklusiv,
.tp-spons-tile--exklusiv:hover,
.tp-spons-tile--exklusiv:focus,
.tp-spons-tile--exklusiv:active{background:
    radial-gradient(ellipse at top left, rgba(227,6,19,.15), transparent 50%),
    linear-gradient(135deg, #1c1c1c 0%, #0a0a0a 100%) !important;
  background-color: #0a0a0a !important;}
.tp-spons-tile--exklusiv .tp-spons-tile__logo{filter: brightness(0) invert(1);}
.tp-spons-tile--exklusiv .tp-spons-tile__name{color: #fff; border-color: var(--tp-rot);}
.tp-spons-tile--exklusiv:hover .tp-spons-tile__name{color: var(--tp-rot); border-color: #fff;}
.tp-spons-tile--exklusiv::after{background: radial-gradient(circle 220px at var(--mx) var(--my),
                rgba(227,6,19,.55) 0%,
                rgba(227,6,19,.2) 30%,
                transparent 55%);}
.tp-spons-tile--exklusiv .tp-spons-tile__inner::before{content: '★ EXKLUSIV';
  position: absolute; top: 12px; left: 12px;
  font-family: var(--tp-font-mono);
  font-size: .7rem; letter-spacing: .25em;
  color: #fff; background: var(--tp-rot);
  padding: .3rem .65rem; border-radius: var(--tp-r-pill);
  z-index: 4;
  box-shadow: 0 4px 12px rgba(227,6,19,.5);
  transform: translateZ(50px);}
.tp-spons-tile__egg{position: absolute; top: 10px; right: 12px;
  font-size: 1.2rem;
  color: var(--tp-rot);
  opacity: .9;
  transition: opacity .25s, transform .25s, text-shadow .25s;
  z-index: 4;
  font-family: var(--tp-font-mono);
  animation: tpEggPulse 1.8s ease-in-out infinite;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(227,6,19,.6);}
.tp-spons-tile--agency:hover .tp-spons-tile__egg{opacity: 1;
  transform: rotate(360deg) scale(1.5);
  text-shadow: 0 0 16px var(--tp-rot);}
.tp-spons-tile{width: 220px; height: 140px;}
.tp-spons-track{gap: 1rem;}
.tp-spons-track{animation: none;}
.tp-spons-stage{overflow-x: auto;}
.tp-spons-tile').forEach(function(tile){tile.addEventListener('mousemove', function(e) {
        var r = tile.getBoundingClientRect();
        var x = (e.clientX - r.left) / r.width;   // 0..1
        var y = (e.clientY - r.top)  / r.height;  // 0..1
        var tiltX = (y - 0.5) * -12;  // -6..6 deg
        var tiltY = (x - 0.5) *  14;  // -7..7 deg
        tile.style.setProperty('--mx', (x * 100) + '%');
        tile.style.setProperty('--my', (y * 100) + '%');
        tile.style.transform = 'perspective(900px) rotateX(' + tiltX + 'deg) rotateY(' + tiltY + 'deg) translateY(-6px) scale(1.04)';}

/* Zwei Reihen: Abstand + gegenlaeufig. Die Buehne braucht dadurch
   weniger Innenabstand als live (dort eine Reihe mit 5.5rem). */
.tp-spons-stage { padding: 3.25rem 0 !important; }
.tp-spons-track + .tp-spons-track { margin-top: 16px; }
.tp-spons-track--b { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce){ .tp-spons-track--b { animation-direction: normal; } }

/* Logos auf eine gemeinsame optische Groesse bringen — die Abnahme hatte
   205px neben deutlich kleineren gemessen. Einheitliche Box, Bild wird
   eingepasst statt gestreckt. */
.tp-spons-tile__logo {
  max-width: 190px !important; max-height: 92px !important;
  width: auto !important; height: auto !important;
  object-fit: contain !important;
}


/* ── ABSCHLUSS: Live-Maße und Live-Optik durchsetzen ──────────────────
   Im uebernommenen Live-CSS stehen weiter unten Responsive-Regeln
   (220x140), die die Grundmaße wieder kippen. Zwei Klassen + !important
   sorgen dafuer, dass auf dem Desktop wirklich die Live-Kachel steht. */
.tp-spons-track .tp-spons-tile{
  width: 300px !important; height: 200px !important;
  border-radius: 12px !important;
}
/* Exklusiv-Kachel: dunkler Radial-Verlauf wie live (nicht weiss) */
.tp-spons-track .tp-spons-tile--exklusiv{
  background:
    radial-gradient(120% 100% at 50% 0%, #2A2F37 0%, #16181C 60%, #0F1115 100%) !important;
  border: 1px solid rgba(243,239,232,.14) !important;
}
.tp-spons-track .tp-spons-tile--exklusiv .tp-spons-tile__name{ color:#F3EFE8 !important; }
/* Logos weiss ausspielen — so wie live gewuenscht */
.tp-spons-track .tp-spons-tile__logo{
  filter: brightness(0) invert(1) !important; opacity: .92 !important;
}
@media (max-width: 700px){
  .tp-spons-track .tp-spons-tile{ width: 220px !important; height: 140px !important; }
  .tp-spons-track .tp-spons-tile__logo{ max-width: 140px !important; max-height: 68px !important; }
}


/* ══ SPONSORENBAND — Korrekturen nach Dennis' Rueckmeldung ══════════
   1) Beide Reihen laufen wieder, Reihe 2 gegenlaeufig.
      Ursache vorher: aus dem Live-CSS kam `.tp-spons-track{animation:none}`
      und hat die Bewegung komplett abgeschaltet.
   2) Weisse Buehne + seitliche Schatten raus — der Sektionshintergrund
      soll durchlaufen.
   ══════════════════════════════════════════════════════════════════ */
@keyframes tpSponsRun { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

.tp-spons-stage .tp-spons-track{
  animation: tpSponsRun 46s linear infinite !important;
  will-change: transform;
}
.tp-spons-stage .tp-spons-track--b{ animation-direction: reverse !important; }
/* Hover haelt das Band an (war live auch so) */
.tp-spons-stage:hover .tp-spons-track{ animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce){
  .tp-spons-stage .tp-spons-track{ animation: none !important; }
}

/* Buehne transparent: der Sektionshintergrund bleibt sichtbar */
.tp-spons-stage{
  background: transparent !important;
  box-shadow: none !important;
}
/* Seitliche Verlaufs-Kanten entfernen */
.tp-spons-stage__edge{ display: none !important; }