/* Auszug aus dem Sport-Register (referenz/tokens/sport.css), nach
   Uebergabe Abschnitt 2.3: nur Tokens, gelbe Schraege, Zierstreifen und
   Markenlaufband. Unveraendert kopiert - Aenderungen gehoeren ins
   Designsystem, nicht hierher. */

:root {
  --pc-sport-grund:   #0b0d0f;          /* Seite                  */
  --pc-sport-deko:  rgba(255,255,255,.10);  /* die geneigten Streifen, reine Zier          */
  --pc-trenner-hoehe:  20px;
  --pc-trenner-winkel: 1.2deg; /* @kind other */
  --pc-sport-ecke:     12px;   /* Handlungsflächen */
  --pc-sport-ecke-bild: 26px;  /* Bilder           */
  --pc-sport-neigung:  18deg; /* @kind other */ /* Zierstreifen     */
  --pc-breite-sport:     78%;   /* Schlagzeile, Ziffer            */
  --pc-breite-sport-h2:  82%;   /* Abschnittsüberschrift          */
  --pc-breite-sport-sub: 88%;   /* Unterüberschrift, Handlung     */
  --pc-gewicht-sport: 760; /* @kind font */ /* Schlagzeile                    */
  --pc-gewicht-sport-titel: 750; /* @kind font */
  --pc-sperrung-sport: .16em;   /* die gelbe Beschriftung         */
}

.sp-trenner {
  --pc-trenner-versatz: calc(100vw * tan(var(--pc-trenner-winkel)));
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--pc-trenner-hoehe) + var(--pc-trenner-versatz));
  pointer-events: none;
  z-index: 1;
}
.sp-trenner::before, .sp-trenner::after { content: ''; position: absolute; inset: 0; }
.sp-trenner::before {
  background: var(--pc-signal);
  clip-path: polygon(0 var(--pc-trenner-versatz), 100% 0, 100% var(--pc-trenner-hoehe), 0 100%);
}
/* Das untere Polygon läuft 2px über die Abschnittskante hinaus (der
   Abschnitt schneidet es dort ab): läge seine Unterkante genau auf der
   Kante, würde die Kantenglättung des clip-path dort den dunklen Grund
   des Abschnitts durchscheinen lassen — eine graue Haarlinie auf Weiß.
   Die Schräge bleibt dieselbe, nur der Fußpunkt links rückt mit. */
.sp-trenner::after {
  bottom: -2px;
  background: var(--pc-trenner-unten, var(--pc-sport-grund));
  clip-path: polygon(0 calc(100% - 2px), 100% var(--pc-trenner-hoehe), 100% 100%, 0 100%);
}
/* Der Abschnitt, der den Trenner trägt, hält unten den Platz frei und
   schließt mit einer 1-px-Kante in der Farbe des nächsten Abschnitts:
   seine Unterkante liegt bei svh-Höhen auf einem Bruchteil eines Pixels,
   und die letzte Zeile würde sonst aus seinem dunklen Grund und dem
   Weiß darunter zu einer grauen Haarlinie verrechnet. */
.sp-traegt-trenner {
  padding-bottom: calc(var(--pc-trenner-hoehe) + 100vw * tan(var(--pc-trenner-winkel)));
  border-bottom: 1px solid var(--pc-trenner-unten, var(--pc-sport-grund));
}

.sp-zier {
  position: absolute; top: -20%;
  width: 3px; height: 150%;
  background: var(--pc-sport-deko);
  transform: rotate(var(--pc-sport-neigung));
  pointer-events: none;
}
.sp-zier-schwach { opacity: .6; }

.sp-lauf-feld { margin-top: 24px; overflow: hidden; white-space: nowrap; }
.sp-lauf {
  display: inline-flex;
  animation: sp-lauf 30s linear infinite;
}
/* `will-change` nur, solange das Band wirklich läuft. Dauerhaft
   gesetzt hielte es eine eigene Compositing-Ebene über die ganze
   Seitenlänge offen — für eine Zier, die meistens außer Sicht ist.
   Das Attribut setzt das Skript am Seitenende; ohne JavaScript
   läuft das Band weiter, nur ohne den Hinweis. */
.sp-lauf[data-sichtbar] { will-change: transform; }
.sp-lauf span {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: var(--pc-gewicht-sport-titel);
  font-stretch: var(--pc-breite-sport-h2);
  text-transform: uppercase;
  color: var(--pc-hell-hover);
}
.sp-lauf i { font-style: normal; color: var(--pc-signal); padding: 0 .5em; }

@keyframes sp-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .sp-lauf { animation: none; }
  .sp-lauf > span:last-child { display: none; }
}

.sp-trenner-oben {
  top: 0; bottom: auto;
  background: var(--pc-anfrage-oben, #ffffff);
  --pc-trenner-unten: var(--pc-core-950);
}