/* Wrapper für den gesamten Countdown */
.lan-countdown {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Richtet die Unterkante von Zahlen und Doppelpunkten aus */
    padding: 30px;
    border-radius: 8px;
    font-family: 'Roboto', 'Arial', sans-serif;
}

/* Container für Label und Zahl (D, H, M, S) */
.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Die kleinen Buchstaben oben (D, H, M, S) */
.countdown-label {
    color: #ff3300; /* Das leuchtende Rot/Orange */
    font-size: var(--countdown-labels);
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 8px;
    text-shadow: 0 0 5px rgba(255, 51, 0, 0.7); /* Leichter Glow-Effekt */
}

/* Die großen Zahlen */
.countdown-value {
    color: #ff3300;
    font-size: var(--countdown-numbers); /* Größe der Zahlen */
    font-weight: 800;
    line-height: 1;
    /* Starker Neon-Glow in mehreren Schichten für den Leuchteffekt */
    text-shadow: 0 0 10px rgba(255, 51, 0, 0.8), 0 0 20px rgba(255, 51, 0, 0.5); 
}

/* Die Doppelpunkte als Trenner */
.countdown-separator {
    color: #ff3300;
    font-size: var(--countdown-separator);
    font-weight: bold;
    line-height: 1;
    margin: 0 10px;
    padding-bottom: 6px; /* Richtet die Doppelpunkte optisch mittig zu den Zahlen aus */
    text-shadow: 0 0 10px rgba(255, 51, 0, 0.8);
}

/* Responsives Design: Auf Smartphones etwas kleiner machen */
@media (max-width: 600px) {
    .lan-countdown { padding: 15px; }
}

.home .footer-banner-wrapper { 
  width: 100%;
}
.footer-banner-wrapper {
  position: fixed; /* Nutze 'absolute' falls es nur am Ende der Seite, nicht immer im Bild sein soll */
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  border-bottom: 2px solid #ff2a00; /* Leuchtendes Rot für die untere Linie */
  z-index: 0;
}

/* Der äußere Shape agiert als leuchtend roter Rahmen */
.sponsor-shape-outer {
  background-color: #ff2a00; /* Rand-Farbe */
  /* Trapez-Form: Oben links (40px rein), Oben rechts (40px rein), Unten rechts, Unten links */
  clip-path: polygon(60px 0, calc(100% - 60px) 0, 100% 100%, 0 100%);
  width: 90%; /* Breite des Gesamt-Banners */
  max-width: 1200px;
  /* Padding erzeugt die Dicke des roten Randes (oben, rechts, unten, links) */
  padding: 2px 2px 0 2px; 
}

/* Der innere Shape enthält deinen eigentlichen dunklen Hintergrund */
.sponsor-shape-inner {
  /* Dunkelroter Verlauf, passend zum Bild */
  background: linear-gradient(90deg, #4a1010 0%, #7c1616 50%, #4a1010 100%);
  /* Der innere Clip-Path ist um 1px angepasst, damit der schräge Rand gleichmäßig aussieht */
  clip-path: polygon(59px 0, calc(100% - 59px) 0, 100% 100%, 0 100%);
  height: 65px; /* Höhe des Banners */
  display: flex;
  align-items: center;
  justify-content: center; /* Ändere dies später zu 'space-evenly' oder 'space-between' für deine Logos */
  /*padding: 0 60px; /* Schützt Logos davor, in die schrägen Ecken zu rutschen */
}



/* Container, der alles ausserhalb abschneidet */
.swl-sponsor-ticker-container {
    width: 100%;
    overflow: hidden;
    padding: 15px 0;
    display: flex;
}

.swl-sponsor-ticker-container-normal {
    width: 100%;
    overflow: hidden;
    display: flex;
}

/* Die Schiene, auf der die Logos laufen */
.swl-sponsor-ticker-track {
    display: flex;
    width: fit-content;
    /* 40s Laufzeit - passe den Wert an, falls es zu schnell/langsam ist */
    animation: swl-ticker-scroll 30s linear infinite;
}

/* Bonus: Ticker pausiert, wenn man mit der Maus drüber geht */
.swl-sponsor-ticker-container:hover .swl-sponsor-ticker-track, .swl-sponsor-ticker-container-normal:hover .swl-sponsor-ticker-track {
    animation-play-state: paused;
}

/* Die Logo-Listen nebeneinanderlegen */
.swl-sponsor-ticker-list {
    display: flex;
    align-items: center;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0;
}

/* Abstand zwischen den Logos */
.sponsor-item {
    margin: 0 40px; 
}

/* Logo Styling */
.sponsor-img {
    display: block;
    height: 50px !important;
    width: auto !important;
    max-width: none !important; /* Wichtig, falls das Theme Bilder auf 100% Breite zwingt */
    transition: opacity 0.3s ease;
}

/* Leichter Hover-Effekt bei Links */
.sponsor-item a:hover .sponsor-img {
    opacity: 0.7;
}

/* Die Keyframe Animation für den nahtlosen Loop */
@keyframes swl-ticker-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Verschiebt die Schiene genau um die Breite der ersten Liste, danach springt es unsichtbar zurück auf 0% */
        transform: translateX(-50%); 
    }
}