@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap');
        body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }

        /* Hintergrund Blobs */
        .blob-container {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: -1;
            overflow: hidden;
            background-color: #fcfdff;
        }
        .dark .blob-container { background-color: #0b0d17; }

        .blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            opacity: 0.3;
        }
        .blob-1 { width: 500px; height: 500px; background: #5c4b91; top: -10%; left: -5%; }
        .blob-2 { width: 600px; height: 600px; background: #a78bfa; top: 15%; right: -10%; }
        .blob-3 { width: 400px; height: 400px; background: #8b5cf6; bottom: -5%; left: 10%; opacity: 0.2; }

        /* Sticker Look für Hero Karten */
        .profile-card {
            background: white;
            padding: 3px; 
            border-radius: 2.5rem;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .dark .profile-card { background: #1e293b; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4); }

        .profile-label {
            background: #f1f5f9;
            padding: 2px 10px;
            border-radius: 9999px;
            font-size: 10px;
            font-weight: 700;
            margin-top: -6px;
            border: 2px solid white;
            display: inline-block;
            position: relative;
            z-index: 10;
        }
        .dark .profile-label { background: #334155; border-color: #1e293b; color: #cbd5e1; }

        /* How it works Karten */
        .step-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease;
        }
        .dark .step-card {
            background: rgba(30, 41, 59, 0.5);
            border-color: rgba(255, 255, 255, 0.1);
        }
        .step-card:hover { transform: translateX(10px); background: white; }
        .dark .step-card:hover { background: rgba(30, 41, 59, 0.8); }

        /* Marktplatz Karussell Design */
        .marketplace-card {
            min-width: 320px;
            height: 480px;
            border-radius: 2.5rem;
            overflow: hidden;
            position: relative;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }
        .marketplace-card:hover { transform: translateY(-12px); }
        .marketplace-card img {
            width: 100%; height: 100%; object-fit: cover;
            transition: transform 0.6s ease;
        }
        .marketplace-card:hover img { transform: scale(1.1); }
        
        .card-overlay {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.9));
            padding: 2.5rem 2rem;
            color: white;
        }

        /* Business List Styling */
        .business-list-item {
            background: white;
            border-radius: 1.5rem;
            transition: all 0.3s ease;
        }
        .dark .business-list-item { background: #1e293b; border: 1px solid rgba(255,255,255,0.05); }
        .business-list-item:hover { transform: scale(1.02); }

        /* Wall of Love Scrollbar */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        @keyframes float-slow {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(2deg); }
        }
        .animate-float { animation: float-slow 6s ease-in-out infinite; }

                /* Animation für den Logo-Ticker */
        @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-scroll {
    display: flex;
    width: max-content;
    animation: scroll 25s linear infinite;
}

/* 1. Grundbreite der Scrollbar */
::-webkit-scrollbar {
    width: 18px;
}

/* 2. Die Spur (Track) - Hier lag das Problem auf der hellen Seite */
::-webkit-scrollbar-track {
    /* Wir setzen den Hintergrund auf transparent und entfernen alle Schatten */
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 3. Der lila Balken (Thumb) */
::-webkit-scrollbar-thumb {
    /* Ein kräftigerer Verlauf, der auf Weiß UND Schwarz gut aussieht */
    background: linear-gradient(180deg, #8b5cf6 0%, #5c4b91 100%);
    
    /* Der "Abstand-Trick" für die Dicke */
    border: 5px solid transparent; 
    background-clip: padding-box;
    
    border-radius: 20px;
    /* Subtiler Schatten nach innen, damit er sich vom hellen Hintergrund abhebt */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

/* 4. Hover-Zustand */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #7c3aed 0%, #4c1d95 100%);
    background-clip: padding-box;
    /* Ein leichter Glow, der auch auf hellen Seiten edel wirkt */
    box-shadow: 0 0 10px rgba(92, 75, 145, 0.3);
}

/* 5. Firefox Fix */
* {
    scrollbar-width: auto;
    /* Erstes: Schieber-Farbe, Zweites: Spur-Farbe (transparent) */
    scrollbar-color: #5c4b91 transparent;
}