/* Globale Stile und Definition der Gold-Farbe */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0a0a0a; /* Sehr dunkles Schwarz */
    color: #f0f0f0;
    /* HINZUGEFÜGT: Verhindert horizontales Scrollen/Ruckeln */
    overflow-x: hidden; 
    scroll-behavior: smooth; /* Sanftes Scrollen bei Klick auf Ankerlinks */
}

/* Definition der Gold-Farbe für Tailwind */
.text-gold {
    color: #D4AF37; /* Ein klassischer Goldton */
}
.bg-gold {
    background-color: #D4AF37;
}
.border-gold {
    border-color: #D4AF37;
}

/* Stil für den 3D-Canvas */
#three-canvas {
    width: 100%;
    height: 400px;
    display: block;
}

/* Header-Stil für "Sticky"-Effekt */
header {
    transition: background-color 0.3s ease;
}

/* Parallax-Effekt-Container */
/* Standard-Stil (Mobile First) */
.parallax-container {
    min-height: 300px;
    position: relative; /* Notwendig für das absolut positionierte <img> */
    overflow: hidden; /* Verhindert, dass das Bild übersteht */
    background-color: #111; /* Fallback-Hintergrund */
}

/* Media Query für Desktop (ab 768px) - Die stabile, ursprüngliche Methode */
@media (min-width: 768px) {
    .parallax-container {
        overflow: visible; /* Wichtig, damit der fixed-Effekt korrekt funktioniert */
        /* Nur auf dem Desktop das Bild laden und den Parallax-Effekt anwenden */
        background-image: url('../assets/sm-logos.jpg');
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
        min-height: 400px; /* Höhe für Desktop */
    }
}

/* Weicher, kreisförmiger Übergang für das Logo */
.logo-img {
    mask-image: radial-gradient(circle, black 60%, transparent 85%);
    -webkit-mask-image: radial-gradient(circle, black 60%, transparent 85%);
}

/* Textschatten für bessere Lesbarkeit auf Bildern */
.text-shadow {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

/* ===== Partner Logo Karussell ===== */
.carousel-container {
    width: 100%;
    max-width: 900px;
    margin: auto;
    overflow: hidden;
    position: relative;
    /* Weiche Kanten für das Karussell */
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.carousel-container:hover .carousel-track {
    animation-play-state: paused; /* Animation anhalten bei Hover */
}

.carousel-track {
    display: flex;
    width: calc(300px * 6); /* Breite pro Logo * Anzahl der Logos (inkl. Duplikate) */
    animation: scroll-logos 20s linear infinite;
}

.carousel-slide {
    width: 300px; /* Breite pro Logo-Container */
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes scroll-logos {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-300px * 3)); } /* Verschiebung um die Breite der 3 Original-Logos */
}

/* Dark Mode für Google Maps iFrame */
.map-dark {
    filter: invert(100%) hue-rotate(180deg);
}