/* === ZENTRALE CSS-DATEI: css/main.css === Erstellen Sie diese Datei und konsolidieren Sie alle gemeinsamen Styles */ /* KRITISCHE STYLES - Diese bleiben inline im */ /* Nur für Above-the-fold Content - Navigation, Hero-Bereich */ /* ALLGEMEINE STYLES - Diese kommen in css/main.css */ /* Navigation Styles */ .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background-color: #21963F; transition: width 0.3s; } .nav-link:hover::after { width: 100%; } /* Dropdown Styles */ .dropdown { display: none; position: absolute; top: 100%; left: 0; background-color: white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); min-width: 200px; z-index: 10; border-radius: 8px; overflow: hidden; z-index: 50; } .dropdown-container:hover .dropdown { display: block; } /* Service Cards */ .service-card { transition: all 0.3s ease; } .service-card:hover { transform: scale(1.02); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } /* Button Styles */ .btn { transition: transform 0.3s ease; } .btn:hover { transform: scale(1.05); } /* Cookie Banner */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background-color: white; box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); z-index: 50; transform: translateY(100%); transition: transform 0.5s ease; } .cookie-banner.show { transform: translateY(0); } /* WhatsApp Button Animation */ @keyframes whatsapp-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } #whatsappButton a { animation: whatsapp-pulse 2s infinite; } /* Mobile Responsiveness */ @media (max-width: 768px) { #whatsappButton { bottom: 1rem; right: 1rem; } #whatsappButton a { width: 3.5rem; height: 3.5rem; } #whatsappButton i { font-size: 1.25rem; } } /* Input Number Styles */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Vorher-Nachher Slider (für Hochdruckreinigung) */ #sliderContainer { position: relative; } #beforeContainer img { transition: none; } /* RemixIcon Fallback */ :where([class^="ri-"])::before { content: "\f3c2"; } /* Performance Optimierungen */ * { box-sizing: border-box; } img { max-width: 100%; height: auto; } /* Smooth Scrolling */ html { scroll-behavior: smooth; } /* Font Loading Optimierung */ @font-face { font-family: 'remixicon'; src: url('remixicon.woff2') format('woff2'); font-display: swap; /* ← Diese Zeile hinzufügen */ } /* Focus Styles für Accessibility */ button:focus, a:focus, input:focus, textarea:focus { outline: 2px solid #21963F; outline-offset: 2px; } h1 { font-size: 2.25rem; /* entspricht z. B. text-4xl in Tailwind */ } /* CSS-Fix für Mobile Button-Probleme */ /* Fügen Sie diesen Code in Ihre main.css oder als