/* Schrift direkt im Modul laden, damit sie auf jeder Seite verfügbar ist */
@font-face {
  font-family: "Chunky Sticker";
  src: url("https://www.meinbusiness.biz/hubfs/Chunky%20Sticker.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Verhindert horizontales Scrollen durch 100vw (Scrollbalken-Breite) */
body {
  overflow-x: clip;
}

/* Haupt-Container: volle Bildschirmbreite, fluide Höhe */
.ticker-cross-container {
  --ticker-angle: 3deg;                      /* Neigung der Bänder (Desktop) */
  position: relative;
  /* Full-Bleed: bricht aus dem Seiten-Container aus, bis an den Rand */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: clamp(140px, 12vw + 90px, 300px);  /* wächst/schrumpft mit der Bildschirmbreite */
  overflow: hidden;
  background-color: #f4ede7;                 /* Hintergrundfarbe hinter den Bändern */
}

/* Grund-Styling für die Bänder – alle Maße in em, skalieren mit der Schrift */
.ticker-band {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;                               /* immer breiter als der Container, auch bei Neigung */
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  padding: 0.68em 0;                         /* Bandhöhe = Padding + Höhe der Großbuchstaben */
  font-size: clamp(1.6rem, 0.9rem + 2.6vw, 3.2rem);  /* fluide Schriftgröße */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

/* Oberes Band (Blau) */
.ticker-band.band-dark {
  background-color: #44a7c1;
  color: #ffffff;
  transform: translate(-50%, -50%) rotate(calc(var(--ticker-angle) * -1));
  z-index: 1;
}

/* Unteres Band (Orange) */
.ticker-band.band-light {
  background-color: #ff6c20;
  color: #0c231a;
  transform: translate(-50%, -50%) rotate(var(--ticker-angle));
  z-index: 2;
}

/* Animations-Schiene */
.ticker-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* Text der Bänder */
.ticker-cross-item {
  font-family: "Chunky Sticker", "Montserrat", Arial, sans-serif;
  font-size: inherit;                        /* Größe kommt vom Band */
  font-weight: bold;
  line-height: 1.1;
  letter-spacing: 0.04em;
  word-spacing: 0.1em;
  padding-right: 0.6em;
  display: inline-block;
  text-box: trim-both cap alphabetic;        /* Text exakt mittig im Band */
}

/* Das Sternchen */
.ticker-cross-item .ticker-star {
  margin-left: 0.6em;
  display: inline-block;
}

/* Fallback für Browser ohne text-box-Unterstützung */
@supports not (text-box: trim-both cap alphabetic) {
  .ticker-band {
    padding: 0.45em 0;
  }
  .ticker-cross-item {
    position: relative;
    top: 0;  /* Schrift zu hoch? Positiven Wert eintragen (z. B. 0.05em). Zu tief? Negativen Wert. */
  }
}

/* --- Laufrichtungen --- */
.track-cross-left {
  animation: marquee-cross-left 50s linear infinite;
}

.track-cross-right {
  animation: marquee-cross-right 50s linear infinite;
}

@keyframes marquee-cross-right {
  0% { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes marquee-cross-left {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* --- Responsive: nur der Neigungswinkel wird stufenweise angepasst --- */
@media (max-width: 1024px) {
  .ticker-cross-container { --ticker-angle: 4deg; }
}

@media (max-width: 768px) {
  .ticker-cross-container { --ticker-angle: 5.5deg; }
}

@media (max-width: 480px) {
  .ticker-cross-container { --ticker-angle: 7deg; }
}

/* Barrierefreiheit: keine Bewegung, wenn vom Nutzer so eingestellt */
@media (prefers-reduced-motion: reduce) {
  .track-cross-left,
  .track-cross-right {
    animation: none;
  }
}