/** * Accessibility CSS * Klassen für neurodivergente Nutzer (Autismus, ADHS, etc.) * Wird durch JavaScript dynamisch auf angewendet */ /* ======================================== BEWEGUNGEN REDUZIEREN ======================================== */ .reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* Stoppt Marquee-Slider (laufendes Banner) */ .reduce-motion .marquee-slider { animation: none !important; } /* Stoppt Hero-Slider (vertikale Bildslider) */ .reduce-motion .hero-images-slider-1, .reduce-motion .hero-images-slider-2 { animation: none !important; } /* Stoppt Slick Slider Autoplay */ .reduce-motion .slick-slider { animation: none !important; } .reduce-motion .slick-track { transform: translate3d(0, 0, 0) !important; transition: none !important; animation: none !important; } /* WOW.js Animationen deaktivieren */ .reduce-motion .wow { animation: none !important; visibility: visible !important; opacity: 1 !important; } /* Preloader sofort ausblenden */ .reduce-motion .preloader { display: none !important; } /* CSS Transforms und Scrolling stoppen */ .reduce-motion * { scroll-behavior: auto !important; } /* ======================================== ANIMATIONEN REDUZIEREN ======================================== */ .reduce-animations * { transition: none !important; animation: none !important; } .reduce-animations *::before, .reduce-animations *::after { transition: none !important; animation: none !important; } /* ======================================== HOHER KONTRAST ======================================== */ .high-contrast { filter: contrast(1.3); } .high-contrast body { background-color: #000 !important; color: #fff !important; } .high-contrast a { color: #ffeb3b !important; } .high-contrast button { border: 2px solid #fff !important; } .high-contrast .white { color: #fff !important; } .high-contrast p, .high-contrast span, .high-contrast div { color: inherit; } /* ======================================== SCHRIFTGRÖSSE ======================================== */ html[data-font-size="1"] { font-size: 112.5%; /* 18px bei 16px Base */ } html[data-font-size="1"] body { font-size: 1.125rem; } html[data-font-size="2"] { font-size: 125%; /* 20px bei 16px Base */ } html[data-font-size="2"] body { font-size: 1.25rem; } html[data-font-size="3"] { font-size: 137.5%; /* 22px bei 16px Base */ } html[data-font-size="3"] body { font-size: 1.375rem; } /* ======================================== ZEILENABSTAND ======================================== */ .increased-line-spacing * { line-height: 1.8 !important; } .increased-line-spacing p, .increased-line-spacing li, .increased-line-spacing span { line-height: 2 !important; } /* ======================================== VERSTÄRKTER FOKUS ======================================== */ .enhanced-focus *:focus { outline: 3px solid #ff69b4 !important; outline-offset: 3px !important; box-shadow: 0 0 0 5px rgba(255, 105, 180, 0.3) !important; } .enhanced-focus a:focus, .enhanced-focus button:focus, .enhanced-focus input:focus, .enhanced-focus textarea:focus, .enhanced-focus select:focus { outline: 3px solid #ff69b4 !important; outline-offset: 3px !important; box-shadow: 0 0 0 5px rgba(255, 105, 180, 0.5) !important; } /* ======================================== ABLENKUNGEN AUSBLENDEN ======================================== */ .hide-distractions .newsletter-popup, .hide-distractions .cookie-banner, .hide-distractions .sidebar, .hide-distractions .testimonials-sec, .hide-distractions .brand, .hide-distractions .scrollToTopBtn { display: none !important; } /* Popup-Overlays ausblenden */ .hide-distractions .popup-overlay, .hide-distractions .modal-backdrop { display: none !important; } /* ======================================== AUTOPLAY DEAKTIVIEREN ======================================== */ /* Wird durch JavaScript gehandhabt */ /* Videos mit autoplay-Attribut werden gestoppt */ /* ======================================== PREFERS-REDUCED-MOTION SUPPORT Browser-native Unterstützung ======================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .marquee-slider, .hero-images-slider-1, .hero-images-slider-2, .slick-slider { animation: none !important; } .wow { animation: none !important; visibility: visible !important; opacity: 1 !important; } }