html {
    scrollbar-gutter: stable; 
}

/* === HEADER & NAVIGATION === */

nav.container {
    padding: 30px 20px;
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    position: relative; 
    z-index: 100;
}

/* LOGO */
.logo { 
    font-family: 'Segoe UI', sans-serif; /* Auch im Logo */
    font-size: 1.5rem; 
    font-weight: 800; 
    letter-spacing: 1px; 
    color: #05AB89; 
    text-decoration: none; 
    display: flex; 
    align-items: center; 
}
.logo span.first-v { color: #970100; }
.logo span.dot { color: #00d2ff; } 
.custom-a { display: inline-block; transform: rotate(180deg); position: relative; top: 3px; }

/* MENÜ CONTAINER */
.menu { display: flex; gap: 40px; align-items: center; }

/* === DER BASIS-STYLE FÜR ALLE LINKS === */
.nav-item {
    font-family: 'Segoe UI', sans-serif; /* Hier ist die Änderung! */
    font-weight: 700;          /* Fett */
    font-size: 0.95rem;        
    text-transform: uppercase; /* GROSSSCHREIBUNG */
    text-decoration: none;
    letter-spacing: 1px;       /* Leichter Abstand */
    transition: all 0.3s ease;
    position: relative;
}

/* 1. COMMERCE (Cyan Verlauf) */
.nav-gradient.commerce {
    background: linear-gradient(90deg, #fff 30%, #00d2ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nav-gradient.commerce:hover {
    text-shadow: 0 0 20px rgba(0, 210, 255, 0.6);
}

/* 2. INTELLIGENCE (Violett Verlauf) */
.nav-gradient.ai {
    background: linear-gradient(90deg, #fff 30%, #9d00ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nav-gradient.ai:hover {
    text-shadow: 0 0 20px rgba(157, 0, 255, 0.6);
}

/* 3. WHITE LINKS (Agentur & Kontakt) */
.nav-white {
    color: #ffffff;
    opacity: 0.8; /* Leicht abgedimmt für Eleganz */
}
.nav-white:hover, .nav-white.active {
    opacity: 1;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

/* Mobile Anpassung */
@media(max-width: 900px) {
    .menu { display: none; }
	
}


@media (max-width: 900px) {
    /* 1. Hamburger sichtbar machen */
    .mobile-toggle {
        display: block !important;
    }

    /* 2. Das Menü verstecken und neu positionieren */
    .menu {
        display: none; /* Erstmal weg damit */
        position: absolute;
        top: 100%; /* Direkt unter der Leiste */
        left: 0;
        width: 100%;
        background-color: #0f1115; /* Dunkler Hintergrund */
        border-bottom: 2px solid var(--col-magento); /* Abschlusskante */
        flex-direction: column; /* Links untereinander */
        align-items: center;
        padding: 30px 0;
        gap: 25px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        z-index: 999;
    }

    /* 3. Klasse zum Einblenden (wird per JS gesetzt) */
    .menu.active {
        display: flex;
        animation: slideDown 0.3s ease-out forwards;
    }

    /* Animation für sanftes Öffnen */
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* Button im mobilen Menü anpassen */
    .menu .btn {
        width: 80%;
        text-align: center;
        margin: 0;
    }
}


/* === FOOTER STYLES (Central Tech Stack) === */

.vermonta-footer {
    background: #080a0e;
    padding: 80px 0 60px 0;
    margin-top: 100px;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-family: 'Segoe UI', sans-serif;
    position: relative;
    text-align: center; /* Alles zentrieren */
}

/* Gradient Line oben */
.vermonta-footer::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent 0%, #00d2ff 50%, #9d00ff 50%, transparent 100%);
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.4);
}

.footer-container {
    display: flex;
    flex-direction: column; /* Alles untereinander */
    align-items: center;    /* Alles mittig */
    gap: 50px;              /* Abstand zwischen Brand-Block und Legal-Block */
}

/* --- ZENTRALER MARKEN BLOCK --- */
.footer-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.footer-logo {
    font-size: 2rem;       /* Etwas größer */
    font-weight: 800;
    letter-spacing: 4px;   /* Breiter */
    color: #fff;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff, #888); /* Leichter Metallic-Effekt */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-claim {
    color: #8892b0;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 1px;
}

/* Status Dot - Mittig & Cool */
.system-status {
    display: inline-flex; 
    align-items: center; 
    gap: 10px;
    font-size: 0.8rem; 
    color: #555; 
    text-transform: uppercase; 
    letter-spacing: 2px;
    margin-top: 15px;
    background: rgba(255,255,255,0.02); /* Sehr dezenter Hintergrund */
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.05);
}

.status-dot {
    width: 8px; height: 8px; 
    background-color: #00ff9d; 
    border-radius: 50%;
    box-shadow: 0 0 8px #00ff9d; 
    animation: pulse-green 3s infinite;
}
@keyframes pulse-green { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } }


/* --- UNTEN: RECHTLICHES --- */
.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 30px;
    width: 100%;
    max-width: 600px; /* Nicht zu breit ziehen */
}

.footer-links a {
    color: #8892b0;
    text-decoration: none;
    font-size: 0.9rem;
    margin: 0 10px;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.footer-copy {
    color: #444; /* Sehr dezent */
    font-size: 0.8rem;
}

.sep { color: #333; }




/* =========================================
   REPARATUR-KIT: MOBILE MENU
   ========================================= */

/* 1. DESKTOP STANDARD: Hamburger MUSS weg sein! */
.mobile-toggle {
    display: none;          /* WICHTIG: Versteckt ihn auf Desktop */
    cursor: pointer;        /* Zeigt die Hand beim Drüberfahren */
    font-size: 1.8rem;      /* Größe */
    color: #fff;            /* Farbe */
    padding: 10px;          /* Klickfläche vergrößern */
    z-index: 2000;          /* Muss ganz oben liegen */
    user-select: none;      /* Verhindert Markieren beim Klicken */
}

/* 2. MOBILE ÜBERSCHREIBUNGEN (unter 900px) */
@media (max-width: 900px) {
    
    /* Hamburger sichtbar machen */
    .mobile-toggle {
        display: block !important;
        position: absolute;
        
		right: 55px; 
        top: 25px;
    }

    /* Das Menü-Panel stylen */
    .menu {
        display: none; /* Standardmäßig zu */
        position: absolute;
        top: 80px; 
        left: 0;
        width: 100%;
        background-color: #0f1115;
        border-bottom: 2px solid #00d2ff; /* Cyan Linie unten */
        border-top: 1px solid rgba(255,255,255,0.1);
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        gap: 20px;
        z-index: 1999;
        box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    }

    /* WENN JS KLASSE 'active' SETZT -> ZEIGEN */
    .menu.active {
        display: flex !important; /* Erzwingt das Anzeigen */
    }

    /* Links größer machen für Finger */
    .nav-item {
        font-size: 1.1rem;
        padding: 10px;
        display: block;
    }
}

/* =========================================
   MOBILE FIX: SICHTBARKEIT ERZWINGEN
   ========================================= */

/* 1. Der Header darf nichts abschneiden */
/* === HEADER & NAVIGATION (Transparent & Floating) === */

nav.container {
    /* Layout */
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 30px 20px;
    
    /* POSITIONIERUNG: Damit er über dem Verlauf schwebt */
    position: absolute; 
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto; /* Zentriert den Container trotz absolute */
    
    /* OPTIK: Keine Farbe, damit der Verlauf durchscheint */
    background: transparent; 
    
    /* TECHNIK */
    width: 100%;
    max-width: 1200px; /* Deine Standard-Breite */
    z-index: 9999; /* Muss über allem liegen */
    overflow: visible !important; /* Wichtig für Mobile Menu */
	
	box-sizing: border-box;
}

/* 2. Mobile Menu Anpassung */
@media (max-width: 900px) {
	
	.custom-a { display: inline-block; transform: rotate(180deg); position: relative; top: -2px; }
	
	
    .menu {
        /* Stelle sicher, dass Hintergrund blickdicht ist */
        background-color: #0f1115 !important; 
        
        /* Muss über ALLEM anderen Inhalt liegen */
        z-index: 10000 !important; 
        
        /* Falls es transparenz-Probleme gibt */
        opacity: 1 !important;
        
        /* Sicherheitshalber ein fester Schatten, damit man die Kante sieht */
        box-shadow: 0 10px 50px rgba(0,0,0,0.95) !important;
    }
    
    /* Stelle sicher, dass die Links weiß und sichtbar sind */
    .menu a {
        color: #fff !important;
        opacity: 1 !important;
    }
}


/* =========================================
   MOBILE PADDING FIX (Das Anti-Kleben)
   ========================================= */

@media (max-width: 900px) {
    
    /* 1. Allen Haupt-Containern Luft geben */
    .container, section, article, header, footer {
        padding-left: 20px !important;
        padding-right: 20px !important;
        
        /* WICHTIG: Sorgt dafür, dass Padding nicht die 100% sprengt */
        box-sizing: border-box !important; 
        width: 100% !important;
    }

    /* 2. Ausnahme: Das Menü selbst (Nav) */
    /* Das haben wir oben schon speziell eingestellt, daher lassen wir es hier in Ruhe */
    nav.container {
        /* Behält seine eigenen Regeln */
        padding-left: 20px !important; 
        padding-right: 20px !important;
    }

    /* 3. Globaler Überlauf-Schutz */
    /* Verhindert, dass ein zu breites Bild seitliches Scrollen verursacht */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}