/* css/style.css - Alle benutzerdefinierten Stile für Frontdrop.de */

:root {
    --black: #050505;
    --white: #FFFFFF;
}
body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    background-color: var(--black);a/*
================================================================================
css/style.css - Alle benutzerdefinierten Stile für Frontdrop.de
================================================================================
Dokumentation:
Diese Datei enthält alle CSS-Regeln, die nicht von Tailwind CSS abgedeckt werden.
Hier finden Sie benutzerdefinierte Stile für Animationen, das Layout und spezielle
Elemente wie den Cursor oder den Hamburger-Button.

Anpassbare Werte sind mit "ANPASSBAR:" markiert.
================================================================================
*/


/*
================================================================================
1. GLOBALE VARIABLEN & BODY-STILE
Hier werden grundlegende Einstellungen für die gesamte Seite definiert.
Änderungen hier haben die größten Auswirkungen.
================================================================================
*/

:root {
    /*
     * ANPASSBAR: Globale Farbvariablen.
     * Wenn Sie die Hauptfarben der Webseite ändern möchten, tun Sie es hier.
     * Beispiel: Um die Haupttextfarbe in ein helles Gelb zu ändern:
     * --white: #FFD700;
    */
    --black: #050505; /* Haupt-Hintergrundfarbe */
    --white: #FFFFFF; /* Haupt-Textfarbe und Akzentfarbe */
}

body {
    font-family: 'Inter', sans-serif; /* Globale Schriftart für die Webseite */
    overflow-x: hidden; /* Verhindert ungewolltes horizontales Scrollen */
    background-color: var(--black); /* Nutzt die oben definierte Hintergrundfarbe */
    
    /*
     * ANPASSBAR: Versteckt den normalen Mauszeiger.
     * Wenn Sie den Standard-Cursor des Betriebssystems wiederhaben möchten,
     * kommentieren Sie die folgende Zeile aus (fügen Sie /* davor und * / danach ein).
    */
    cursor: none;
}

/* Wird per JavaScript zum Body hinzugefügt, wenn das Menü offen ist, um das Scrollen der Seite zu sperren */
.menu-open {
    overflow: hidden;
}


/*
================================================================================
2. TYPOGRAFIE-HELFERKLASSEN
Diese Klassen werden für spezielle Textstile wie Überschriften verwendet.
================================================================================
*/

/* Stil für große, fette Überschriften */
.monolith {
    font-weight: 900; /* Schriftstärke (900 = extra fett) */
    
    /* ANPASSBAR: Buchstabenabstand. Ein negativer Wert rückt die Buchstaben enger zusammen. */
    /* Beispiel für weiteren Abstand: letter-spacing: -0.02em; */
    letter-spacing: -0.06em;
    
    /* ANPASSBAR: Zeilenhöhe. Ein Wert unter 1 sorgt für einen kompakten, überlappenden Look. */
    /* Beispiel für mehr Zeilenabstand: line-height: 1.2; */
    line-height: 0.85;
}

/* Stil für kleine, detailreiche Texte (z.B. "Jahre Erfahrung") */
.detail {
    /* ANPASSBAR: Schriftgröße des Detail-Textes */
    /* Beispiel: font-size: 12px; */
    font-size: 10px;
    
    text-transform: uppercase; /* Stellt den Text in Großbuchstaben dar */
    
    /* ANPASSBAR: Buchstabenabstand. Ein hoher Wert sorgt für einen luftigen Look. */
    /* Beispiel für weniger Abstand: letter-spacing: 0.3em; */
    letter-spacing: 0.5em;
    
    font-weight: 400; /* Normale Schriftstärke */
}


/*
================================================================================
3. SPEZIFISCHE ELEMENTE & KOMPONENTEN
Stile für wiederkehrende Elemente wie den Cursor, Linien, etc.
================================================================================
*/

/* Animierte Trennlinien, die per JavaScript ihre Breite ändern */
.line {
    background: rgba(255, 255, 255, 0.2); /* Farbe und Transparenz der Linie */
    height: 1px; /* Dicke der Linie */
    width: 0%; /* Startbreite ist 0, wird von GSAP animiert */
}

/* Der benutzerdefinierte Cursor */
#cursor {
    /* ANPASSBAR: Größe des Cursors. */
    /* Beispiel für einen größeren Punkt: width: 25px; height: 25px; */
    width: 15px;
    height: 15px;
    
    background: var(--white); /* Farbe des Cursors (nutzt die globale Variable) */
    border-radius: 50%; /* Macht das Element zu einem perfekten Kreis */
    position: fixed; /* Bleibt immer im sichtbaren Bereich */
    pointer-events: none; /* Sorgt dafür, dass man durch den Cursor "hindurchklicken" kann */
    z-index: 9999; /* Stellt sicher, dass der Cursor über allen anderen Elementen liegt */
    
    /* ANPASSBAR: Der Invertierungs-Effekt. */
    /* Wenn Sie diesen Effekt nicht möchten, kommentieren Sie die nächste Zeile aus. */
    mix-blend-mode: difference;
    
    /* ANPASSBAR: Wie schnell der Cursor der Maus folgt. */
    /* Beispiel für eine langsamere, "weichere" Bewegung: transition: transform 0.2s ease-out; */
    transition: transform 0.05s ease-out;
}

/* Wrapper für Bilder, auf die Effekte angewendet werden */
.image-container {
    position: relative;
    overflow: hidden; /* Verhindert, dass vergrößerte Bilder aus dem Container ragen */
    filter: grayscale(100%) contrast(110%); /* Start-Effekt: Schwarz-Weiß mit hohem Kontrast */
}

/* Effekt, der beim Überfahren eines Bildes mit der Maus ausgelöst wird */
.image-container:hover {
    filter: grayscale(0%) contrast(100%); /* Das Bild wird farbig */
    
    /* ANPASSBAR: Geschwindigkeit des Einblend-Effekts der Farbe. */
    /* Beispiel für eine schnellere Animation: transition: filter 0.5s ease; */
    transition: filter 1.2s ease;
}

/* Großer Abstandshalter */
.spacer-vh {
    height: 30vh; /* Höhe beträgt 30% der Bildschirmhöhe */
}

/* NEU: Kleinerer Abstandshalter */
.spacer-vh-small {
    height: 15vh; /* Höhe beträgt 15% der Bildschirmhöhe */
}

.nav-fade-mask {
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}


/*
================================================================================
4. HAMBURGER-MENÜ-BUTTON
Stile für den Menü-Button und seine Linien im Normal- und geöffneten Zustand.
================================================================================
*/

/* Grundlegender Stil für die drei Linien im Button */
.hamburger-line {
    position: absolute;
    display: block;
    
    /* ANPASSBAR: Breite der Linien. */
    /* Beispiel: width: 32px; (für breitere Linien) */
    width: 28px;
    
    /* ANPASSBAR: Dicke der Linien. */
    /* Beispiel: height: 4px; (für dickere Linien) */
    height: 3px;
    
    background: white; /* Farbe der Linien */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Zentriert die Linien exakt im Button */
    
    /* ANPASSBAR: Geschwindigkeit der Animation zum "X". */
    /* Beispiel: transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; (schneller) */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Positioniert die obere Linie */
.hamburger-line:nth-child(1) {
    /* ANPASSBAR: Abstand der oberen Linie zur Mitte. */
    /* Ein größerer Wert (z.B. -12px) vergrößert den Abstand. */
    transform: translate(-50%, -50%) translateY(-10px);
}

/* Positioniert die untere Linie */
.hamburger-line:nth-child(3) {
    /* ANPASSBAR: Abstand der unteren Linie zur Mitte. */
    /* Ein größerer Wert (z.B. 12px) vergrößert den Abstand. */
    transform: translate(-50%, -50%) translateY(10px);
}

/* Stile für das "X", wenn das Menü geöffnet ist */
body.menu-open .hamburger-line:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg); /* Dreht die obere Linie */
}
body.menu-open .hamburger-line:nth-child(2) {
    opacity: 0; /* Blendet die mittlere Linie aus */
}
body.menu-open .hamburger-line:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg); /* Dreht die untere Linie */
}
    cursor: none;
}
.menu-open {
    overflow: hidden;
}
.monolith {
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 0.85;
}
.detail {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    font-weight: 400;
}
.line {
    background: rgba(255, 255, 255, 0.2);
    height: 1px;
    width: 0%;
}
#cursor {
    width: 15px;
    height: 15px;
    background: var(--white);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    transition: transform 0.05s ease-out;
}
.image-container {
    position: relative;
    overflow: hidden;
    filter: grayscale(100%) contrast(110%);
}
.image-container:hover {
    filter: grayscale(0%) contrast(100%);
    transition: filter 1.2s ease;
}
.spacer-vh {
    height: 30vh;
}
.nav-fade-mask {
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

/* === GEÄNDERTE STILE FÜR HAMBURGER-LINIEN === */
.hamburger-line {
    position: absolute;
    display: block;
    width: 28px;  /* Breiter als vorher */
    height: 3px;  /* Dicker als vorher */
    background: white;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.hamburger-line:nth-child(1) {
    transform: translate(-50%, -50%) translateY(-10px); /* Mehr Abstand */
}
.hamburger-line:nth-child(3) {
    transform: translate(-50%, -50%) translateY(10px);  /* Mehr Abstand */
}
body.menu-open .hamburger-line:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}
body.menu-open .hamburger-line:nth-child(2) {
    opacity: 0;
}
body.menu-open .hamburger-line:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
}
/*
================================================================================
5. NEUE SEKTIONEN (Kunden & Testimonials)
================================================================================
*/

/* --- Kundenlogo Endlos-Scroller --- */
.logo-scroller {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
    mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
}
.logo-scroller-track {
    display: flex;
    align-items: center;
    gap: 4rem; /* Abstand zwischen den Logos */
    width: fit-content;
    animation: scroll 30s linear infinite; /* Startet die Endlos-Animation */
}
.logo-scroller-track:hover {
    animation-play-state: paused; /* Hält die Animation an, wenn man darüber hovert */
}

/* Die CSS-Animation für das Scrollen */
@keyframes scroll {
    to {
        transform: translateX(calc(-50% - 2rem)); /* Scrollt genau die Hälfte der Breite */
    }
}
/* Um den nahtlosen Effekt zu erzeugen, müssen wir die Logoliste im HTML duplizieren. 
   Dieser Trick funktioniert, indem der Track seine Breite durch die Duplizierung verdoppelt
   und die Animation ihn genau um die Hälfte (-50%) verschiebt und dann zurückspringt. */
.logo-scroller-track > img {
    filter: grayscale(100%) brightness(0.7);
    transition: filter 0.3s ease;
}
.logo-scroller-track > img:hover {
    filter: grayscale(0%) brightness(1);
}


/* --- Testimonial Slider (Swiper.js) --- */
.testimonial-slider .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.5); /* Farbe der inaktiven Punkte */
    width: 10px;
    height: 10px;
    transition: background-color 0.3s ease;
}
.testimonial-slider .swiper-pagination-bullet-active {
    background-color: #ffffff; /* Farbe des aktiven Punktes */
}