/* =========================================
   LOKALE SCHRIFTARTEN (DSGVO-konform)
   ========================================= */

/* Montserrat (Sans-Serif) */
@font-face {
    font-family: 'Montserrat';
    src: url('../../public/fonts/montserrat-v31-latin-regular.woff2') format('woff2'); 
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../../public/fonts/montserrat-v31-latin-500.woff2') format('woff2'); 
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../../public/fonts/montserrat-v31-latin-600.woff2') format('woff2'); 
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../../public/fonts/montserrat-v31-latin-700.woff2') format('woff2'); 
    font-weight: 700;
    font-display: swap;
}

/* Playfair Display (Serif) */
@font-face {
    font-family: 'Playfair Display';
    src: url('../../public/fonts/playfair-display-v40-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('../../public/fonts/playfair-display-v40-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('../../public/fonts/playfair-display-v40-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

/* Versteckt die Scrollbar für Chrome, Safari und Opera */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Versteckt die Scrollbar für IE, Edge und Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Cursor-Styling für die Drag-Slider (Karussells) */
.drag-slider {
    cursor: grab;
}

.drag-slider:active {
    cursor: grabbing;
}

/* Cursor-Styling für den Vorher-Nachher Slider */
.ba-slider {
    cursor: ew-resize; /* Zeigt den Links-Rechts-Pfeil an */
}

/* =========================================
   MARQUEE ANIMATION (Kundenstimmen)
   ========================================= */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

.animate-marquee {
    display: flex;
    width: max-content; /* Zwingt den Container so breit zu sein wie alle Karten zusammen */
    animation: marquee 40s linear infinite; /* 40 Sekunden = sehr langsames, edles Gleiten */
}

/* Stoppt die Animation, wenn man mit der Maus drüber geht */
.marquee-container:hover .animate-marquee {
    animation-play-state: paused;
}
/* =========================================
   MOBILE: Kein horizontales Scrollen/Wackeln
   ========================================= */
html, body {
    overflow-x: hidden;
}

/* =========================================
   MOBILE: Kundenstimmen lesbar machen
   Auto-Laufband aus -> per Wischen steuerbar (statischer Text)
   Ab 768px (md) bleibt das automatische Gleiten aktiv.
   ========================================= */
@media (max-width: 767px) {
    /* Kundenstimmen als lesbare, gestapelte Karten statt Laufband */
    .animate-marquee {
        flex-direction: column;
        width: 100%;
        animation: none;      /* kein automatisches Scrollen mehr */
    }
}