/* Datei: assets/css/style.css */

/* Basis Einstellungen */
body { 
    font-family: 'Open Sans', sans-serif; 
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; }

/* Farben Definition */
:root {
    --brand-red: #ce1f26;
    --brand-dark: #a0181d;
}

/* Hero Hintergrund STARTSEITE */
.hero-bg {
    background-color: #1a1a1a; 
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)), url('../img/fassadensanierung-gewerbe-krefeld.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
}

/* Hero Hintergrund KARRIERE SEITE */
.hero-career {
    background-image: linear-gradient(rgba(26, 26, 26, 0.85), rgba(26, 26, 26, 0.7)), url('../img/handwerker-team-fahrzeugflotte.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* WICHTIG: Mobile Fix für background-attachment: fixed (iOS Safari Support) */
@media (hover: none), (pointer: coarse) {
    .hero-bg, .hero-career {
        background-attachment: scroll;
    }
}

/* Utilities */
.text-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.big-number { font-family: 'Montserrat', sans-serif; font-weight: 900; }

/* Animationen */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.whatsapp-pulse { animation: pulse-green 2s infinite; }

/* Navigation Transition */
nav.scrolled {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Karriere Button Animation */
@keyframes subtle-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.career-pulse { animation: subtle-pulse 2s infinite; }