/* Custom Styles */
body {
    font-family: 'Open Sans', sans-serif;
    background-color: #1a1a1a;
    color: #ffffff;
    scroll-behavior: smooth;
}

h1, h2, h3, h4 {
    font-family: 'Open Sans', sans-serif;
}

/* Feines Raster im Hintergrund */
.bg-grid {
    background-image: radial-gradient(circle at 2px 2px, #333333 1px, transparent 0);
    background-size: 40px 40px;
}

/* Grüner Schein für Buttons und Akzente */
.accent-glow {
    box-shadow: 0 0 15px rgba(108, 194, 74, 0.25);
}

/* Das pulsierende Licht von oben */
.top-glow {
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: 600px;
    background: radial-gradient(
        circle at 50% 0%, 
        rgba(108, 194, 74, 0.08) 0%, 
        rgba(108, 194, 74, 0.02) 40%, 
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
    animation: pulseGlow 8s ease-in-out infinite;
}

/* Pulsierende Animation für das Licht */
@keyframes pulseGlow {
    0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

/* Anpassung des Rasters für besseren Kontrast */
.bg-grid {
    background-image: radial-gradient(circle at 2px 2px, #333333 1px, transparent 0);
    background-size: 40px 40px;
    background-color: #1a1a1a;
    position: relative;
}

/* Logo Styling */
.nav-logo {
    height: 40px; /* Hier kannst du die Höhe deines Logos anpassen */
    width: auto;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.nav-logo:hover {
    opacity: 1;
    transform: scale(1.05);
    filter: drop-shadow(0 0 8px rgba(108, 194, 74, 0.6));
}

/* Animation für die Navigationstexte (Lösung, Branchen, Kontakt) */
.nav-text-anim {
    animation: navEntrance 0.8s ease-out backwards;
}

/* Verzögerung für nacheinander folgendes Einblenden (Staggering) */
.nav-text-anim:nth-child(2) { animation-delay: 0.1s; }
.nav-text-anim:nth-child(3) { animation-delay: 0.2s; }

@keyframes navEntrance {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Schwebende Animation für das Hauptbild */
.floating { 
    animation: floating 6s ease-in-out infinite;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 20px); }
    100%   { transform: translate(0, -0px); }   
}

/* Verfeinerung des Hintergrund-Rasters (Parallax-Gefühl) */
.bg-grid {
    background-attachment: fixed;
}

/* Roboter Bild Anpassung: Dunkler, kontrastreicher & grüner Schein */
.robot-style {
    filter: brightness(0.9) contrast(1.1) drop-shadow(0 0 15px rgba(108, 194, 74, 0.3));
}

.hero-robot-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 140%;
    background: radial-gradient(circle, rgba(108, 194, 74, 0.08) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
}

/* Styling für das Studio Bild */
.studio-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 2rem auto; /* Zentriert und Abstand nach unten */
    border-radius: 1rem; /* Passt zu rounded-2xl */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Dezenter Rahmen wie bei den Cards */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5); /* Tiefer Schatten */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.studio-img:hover {
    transform: scale(1.01);
    border-color: rgba(108, 194, 74, 0.4); /* Grüner Akzent beim Drüberfahren */
}