/* --- 1. GLOBALE VARIABLEN & BASIS --- */
:root {
    --bg: #050505;
    --card-bg: #111111;
    --red: #e63946;
    --wa-green: #25D366;
    --gray: #a0a0a0;
}

/* FLÜSSIGES SCROLLEN AKTIVIEREN */
html { 
    scroll-behavior: smooth; 
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Inter', sans-serif; 
}

body { 
    background: var(--bg); 
    color: white; 
    line-height: 1.6; 
    overflow-x: hidden; 
}

/* --- 2. ANIMATIONEN --- */
@keyframes glow-red {
    0%, 100% { box-shadow: 0 0 5px var(--red); }
    50% { box-shadow: 0 0 20px var(--red); }
}

@keyframes glow-wa {
    0%, 100% { transform: translateY(-50%) scale(1); box-shadow: 0 0 10px var(--wa-green); }
    50% { transform: translateY(-50%) scale(1.1); box-shadow: 0 0 25px var(--wa-green); }
}

/* --- 3. WHATSAPP & TOP BAR --- */
.wa-glow-sticky {
    position: fixed; right: 25px; top: 50%; width: 60px; height: 60px; 
    background: var(--wa-green); color: white; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 30px; z-index: 9999; text-decoration: none; animation: glow-wa 2s infinite;
}

.top-bar { background: #000; padding: 10px 5%; border-bottom: 1px solid #222; font-size: 12px; }
.top-bar-container { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; }
.top-left a { color: var(--gray); text-decoration: none; margin-right: 20px; transition: 0.3s; }
.top-left a:hover { color: white; }

/* --- 4. NAVIGATION --- */
.main-header { 
    height: 80px; 
    background: rgba(5,5,5,0.95); 
    backdrop-filter: blur(10px); 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    border-bottom: 1px solid #222; 
    display: flex;
    align-items: center;
}

.navbar { 
    max-width: 1400px; 
    margin: 0 auto; 
    width: 100%;
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 0 5%; 
}

.mini-logo { height: 45px; }

.nav-links { display: flex; list-style: none; gap: 20px; }
.nav-links a { 
    color: var(--gray); 
    text-decoration: none !important; 
    font-size: 12px; 
    font-weight: 600; 
    text-transform: uppercase; 
    transition: 0.3s; 
}
.nav-links a:hover { color: var(--red); }

.nav-right { display: flex; gap: 10px; align-items: center; }
.btn-nav-call { background: var(--red); color: white; padding: 10px 20px; border-radius: 50px; text-decoration: none !important; font-size: 11px; font-weight: 700; animation: glow-red 2s infinite; }
.btn-nav-route { border: 1px solid #333; color: white; padding: 10px 20px; border-radius: 50px; text-decoration: none !important; font-size: 11px; font-weight: 700; transition: 0.3s; }
.btn-nav-route:hover { background: white; color: black; }

/* --- 5. HERO SEKTION --- */
.hero-section { height: 85vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero-logo-main { width: 450px; max-width: 90%; margin-bottom: 10px; }
.hero-slogan { color: var(--gray); letter-spacing: 5px; text-transform: uppercase; margin-bottom: 40px; font-size: 14px; }
.hero-btns { display: flex; gap: 15px; justify-content: center; }
.btn-main { background: white; color: black; padding: 15px 40px; border-radius: 50px; text-decoration: none !important; font-weight: 700; transition: 0.3s; border: 2px solid white; }
.btn-main:hover { background: var(--red); border-color: var(--red); color: white; box-shadow: 0 0 20px var(--red); }
.btn-outline-large { border: 2px solid rgba(255,255,255,0.2); color: white; padding: 15px 40px; border-radius: 50px; text-decoration: none !important; transition: 0.3s; font-weight: 600; }
.btn-outline-large:hover { border-color: var(--red); color: var(--red); }

/* --- 6. SERVICES --- */
.services-section { padding: 80px 5%; text-align: center; }
.sub-title { font-size: 32px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 50px; }
.card-container { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
.glass-card { background: var(--card-bg); padding: 40px 30px; border-radius: 30px; width: 450px; border: 1px solid #222; transition: 0.3s; }
.glass-card:hover { border-color: var(--red); transform: translateY(-5px); }
.glass-card .icon { font-size: 40px; color: var(--red); margin-bottom: 20px; }
.red-bullet-list { list-style: none; text-align: left; margin: 30px 0; }
.red-bullet-list li { position: relative; padding-left: 25px; margin-bottom: 12px; color: var(--gray); font-size: 15px; }
.red-bullet-list li::before { content: "•"; color: var(--red); font-size: 25px; position: absolute; left: 0; top: -5px; }
.btn-card-fancy { display: block; border: 1px solid var(--red); color: white; padding: 15px; border-radius: 12px; text-decoration: none !important; font-weight: 700; transition: 0.3s; text-transform: uppercase; font-size: 13px; }
.btn-card-fancy:hover { background: var(--red); box-shadow: 0 0 20px var(--red); color: white !important; }

/* --- 7. KONTAKT & MAP --- */
.contact-section { padding: 80px 5%; }
.contact-wrapper { max-width: 1400px; margin: 0 auto; display: flex; gap: 30px; align-items: stretch; }
.map-container { flex: 1.5; border-radius: 25px; overflow: hidden; border: 1px solid #222; min-height: 500px; }
.contact-info-column { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.info-card { background: var(--card-bg); padding: 25px; border-radius: 20px; display: flex; gap: 20px; align-items: center; border: 1px solid #222; flex: 1; transition: 0.3s; }
.info-card:hover { border-color: var(--red); }
.info-icon { font-size: 26px; color: var(--red); }
.contact-footer-link { color: white !important; text-decoration: none !important; font-weight: 600; font-size: 16px; transition: 0.3s; display: inline-block; }
.contact-footer-link:hover { color: var(--red) !important; transform: translateX(5px); }
.btn-route-glow { display: inline-block; margin-top: 10px; background: var(--red); color: white !important; padding: 12px 25px; border-radius: 8px; text-decoration: none !important; font-weight: 800; animation: glow-red 2s infinite; text-transform: uppercase; }

/* --- 8. RECHTLICHE SEITEN (DATENSCHUTZ & IMPRESSUM) --- */
.legal-content { padding: 120px 5% 80px; max-width: 900px; margin: 0 auto; }
.legal-container { max-width: 900px; margin: 0 auto; }
.main-title { font-size: 32px; color: var(--red); margin-bottom: 40px; text-transform: uppercase; }
.legal-section { margin-bottom: 40px; }
.legal-section h2 { 
    font-size: 19px; color: white; margin-bottom: 15px; 
    border-bottom: 1px solid #222; padding-bottom: 8px; text-transform: uppercase;
}
.legal-section p { color: var(--gray); font-size: 15px; margin-bottom: 15px; }

/* SPEZIELLE KONTAKT LINKS (BUTTON-STIL) */
.legal-contact-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.contact-action-link {
    display: flex; align-items: center; gap: 15px; background: #0f0f0f;
    padding: 14px 22px; border-radius: 14px; border: 1px solid #222;
    color: white !important; text-decoration: none !important; width: fit-content;
    transition: 0.3s ease;
}
.contact-action-link i { color: var(--red); font-size: 18px; }
.contact-action-link:hover { border-color: var(--red); transform: translateX(8px); background: #151515; }

/* --- 9. FOOTER --- */
.main-footer { background: #0a0a0a; padding: 60px 5% 40px; border-top: 1px solid #1a1a1a; margin-top: 80px; }
.footer-container { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; }
.footer-logo { height: 45px; margin-bottom: 20px; }
.footer-col h4 { color: white; font-size: 15px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; }
.footer-col p { color: #888; font-size: 14px; margin-bottom: 10px; }
.footer-link-sub, .footer-list a { color: #888 !important; text-decoration: none !important; transition: 0.3s; display: block; margin-bottom: 8px; font-size: 14px; }
.footer-link-sub:hover, .footer-list a:hover { color: var(--red) !important; }
.footer-list { list-style: none; }

/* --- 10. MOBILE OPTIMIERUNG --- */
@media (max-width: 992px) {
    .top-bar, .hide-mobile, .nav-links { display: none; }
    .contact-wrapper { flex-direction: column; }
    .map-container { order: 2; height: 350px; width: 100%; margin-top: 20px; }
    .hero-logo-main { width: 320px; }
    .footer-container { grid-template-columns: 1fr; text-align: center; }
    .footer-col { display: flex; flex-direction: column; align-items: center; }
    .contact-action-link { width: 100%; justify-content: center; }
}