/* ===================================================================== TruckWashOffice – Optimierungen (nur truck-wash-office.html) Alles unter body.two-optimized gescoped -> andere Seiten unberuehrt. Zum Deaktivieren: zu dieser Datei aus truck-wash-office.html entfernen und Klasse "two-optimized" vom nehmen. Keine bestehenden Texte / Logos / Markenfarben geaendert. Farben: Blau #0aa8c6 / #16c4e0, Orange #ee7203, Dunkelgrau #3c3c3b. ===================================================================== */ /* --------------------------------------------------------------------- 1) KRITISCH: Hero auch OHNE JavaScript sichtbar Original startet .bulk-first .col-text mit opacity:0 und wird erst per JS eingeblendet -> bei JS-Fehler unsichtbar. Jetzt: per Default sichtbar, Einblenden nur noch als reine CSS-Progressive-Enhancement. --------------------------------------------------------------------- */ body.two-optimized .bulk-first .col-text { opacity: 1; transform: none; animation: twoHeroIn 0.7s cubic-bezier(.16, 1, .3, 1) both; } @keyframes twoHeroIn { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------------------- 2) KRITISCH: Vorteils-Checkliste sofort statt nach bis zu 11 Sekunden Original-Staffelung (style.css 2837-2856): 2s,3.5s,5s,6.5s,8s,9.5s,11s. Jetzt schneller Stagger unter ~0.7s gesamt. --------------------------------------------------------------------- */ body.two-optimized .video_functions.show .video_functions_row:nth-child(2) { transition-delay: 0.10s !important; } body.two-optimized .video_functions.show .video_functions_row:nth-child(3) { transition-delay: 0.18s !important; } body.two-optimized .video_functions.show .video_functions_row:nth-child(4) { transition-delay: 0.26s !important; } body.two-optimized .video_functions.show .video_functions_row:nth-child(5) { transition-delay: 0.34s !important; } body.two-optimized .video_functions.show .video_functions_row:nth-child(6) { transition-delay: 0.42s !important; } body.two-optimized .video_functions.show .video_functions_row:nth-child(7) { transition-delay: 0.50s !important; } body.two-optimized .video_functions.show .video_functions_row:nth-child(8) { transition-delay: 0.58s !important; } /* --------------------------------------------------------------------- 3) KRITISCH: Mobile CTAs wieder einblenden Original blendet .header-btn (max-width:767px) per display:none aus – das trifft Header UND Footer (gleiche Klasse). Kein Button auf dem Smartphone. Hier: wieder sichtbar, sauber zentriert/umgebrochen. --------------------------------------------------------------------- */ @media (max-width: 767px) { body.two-optimized .header-btn { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 14px; } body.two-optimized .header-btn a.primary_btn, body.two-optimized .header-btn a.secoundry_btn { margin: 0 !important; padding: 11px 22px; font-size: 15px; } } /* --------------------------------------------------------------------- 4) PERFORMANCE begleitend: sanfte Animationsdauer + reduced-motion --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.two-optimized *, body.two-optimized *::before, body.two-optimized *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; } body.two-optimized .bulk-first .col-text, body.two-optimized .video_functions_row { opacity: 1 !important; transform: none !important; } } /* --------------------------------------------------------------------- 5) BARRIEREFREIHEIT: sichtbare Fokuszustaende + Skip-Link style.css enthaelt keine einzige :focus-Regel. --------------------------------------------------------------------- */ body.two-optimized a:focus-visible, body.two-optimized button:focus-visible, body.two-optimized .toggle:focus-visible, body.two-optimized input:focus-visible, body.two-optimized textarea:focus-visible, body.two-optimized [tabindex]:focus-visible { outline: 3px solid #0aa8c6; outline-offset: 3px; border-radius: 4px; } body.two-optimized .two-skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: #0aa8c6; color: #fff; padding: 12px 20px; font-family: 'Roboto', Arial, sans-serif; font-weight: 700; text-decoration: none; border-radius: 0 0 6px 0; } body.two-optimized .two-skip-link:focus { left: 0; } /* --------------------------------------------------------------------- 6) STRUKTUR/DESIGN: Footer aus fixed loesen (verdeckte Inhalte, fixe Viewporthoehe). Wird zum normalen Footer am Seitenende. --------------------------------------------------------------------- */ body.two-optimized footer.site-footer { position: static; transform: none; height: auto; min-height: 75px; padding: 16px 0; } /* --------------------------------------------------------------------- 7) STRUKTUR/DESIGN: Service-Boxen aus der grauen Flaeche heben (dezenter Schatten + Hover-Lift, keine Farb-/Textaenderung) --------------------------------------------------------------------- */ body.two-optimized .service-boxes .service-box { border-radius: 8px; transition: box-shadow 0.25s ease, transform 0.25s ease; } body.two-optimized .service-boxes .service-box:hover { box-shadow: 0 12px 28px rgba(60, 60, 59, 0.14); transform: translateY(-4px); } /* --------------------------------------------------------------------- 8) CONVERSION: einheitlicher, dezenter Hover-Lift fuer alle CTAs --------------------------------------------------------------------- */ body.two-optimized .primary_btn, body.two-optimized .secoundry_btn { transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s, color 0.3s; } body.two-optimized .primary_btn:hover, body.two-optimized .secoundry_btn:hover { transform: translateY(-2px); } /* --------------------------------------------------------------------- 9) TRUST/STRUKTUR: Kundenlogo-Karussell vereinheitlichen (gleiche Zellhoehe, Logos bleiben unveraendert in Farbe) --------------------------------------------------------------------- */ body.two-optimized .bottom-crousel .item { height: 130px; display: flex; align-items: center; justify-content: center; padding: 0 12px; } body.two-optimized .bottom-crousel .item img { /* 120px statt 62px: quadratische Logos (TWV, Truck & Carwash) wurden sonst winzig; breite Logos begrenzt weiterhin width:200px aus style.css */ max-height: 120px; width: auto; object-fit: contain; } body.two-optimized .bottom-crousel .item h4 { margin: 0; font-size: 18px; color: #3c3c3b; } /* Ueberschrift der neu platzierten Social-Proof-Sektion */ body.two-optimized .bottom-section .start-heading { margin-bottom: 30px; }