{"id":29707,"date":"2025-07-15T08:08:29","date_gmt":"2025-07-15T08:08:29","guid":{"rendered":"https:\/\/darksn.de\/?page_id=29707"},"modified":"2025-07-23T08:12:29","modified_gmt":"2025-07-23T08:12:29","slug":"accessibility-services","status":"publish","type":"page","link":"https:\/\/darksn.de\/de\/accessibility-services\/","title":{"rendered":"Barrierefreiheits Services"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n Accessibility Solutions - Darksn<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n line-height: 1.6;\r\n color: #333;\r\n }\r\n\r\n \/* Hero Section *\/\r\n .hero {\r\n background-image: url(https:\/\/darksn.de\/wp-content\/uploads\/2025\/07\/representations-user-experience-interface-design-scaled.jpg);\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n color: white;\r\n padding: 80px 0;\r\n text-align: center;\r\n position: relative;\r\n }\r\n\r\n .hero::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.5);\r\n z-index: 1;\r\n }\r\n\r\n .hero-content {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 2;\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n min-height: 400px;\r\n }\r\n\r\n .hero-card {\r\n background: rgba(0, 0, 0, 0.7);\r\n padding: 3rem;\r\n max-width: 750px;\r\n color: white;\r\n position: relative;\r\n top: 75px;\r\n }\r\n\r\n .hero-card h1 {\r\n font-size: 1.2rem;\r\n margin-bottom: 1rem;\r\n color: white;\r\n }\r\n\r\n .hero-card p {\r\n font-size: 1.1rem;\r\n margin-bottom: 2rem;\r\n color: rgba(255, 255, 255, 0.9);\r\n opacity: 1;\r\n }\r\n\r\n .cta-button {\r\n background: #F93825;\r\n color: white !important;\r\n padding: 15px 32px;\r\n border: none;\r\n font-size: 1.1rem;\r\n font-weight: bold;\r\n cursor: pointer;\r\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);\r\n transition: background 0.3s, color 0.3s;\r\n }\r\n\r\n .cta-button:hover,\r\n .cta-button:focus,\r\n .cta-button:hover * {\r\n background: #fff;\r\n color: #F93825 !important;\r\n }\r\n\r\n .cta-button a {\r\n color: white !important;\r\n }\r\n\r\n \/* Accessibility Services Section *\/\r\n .accessibility-section {\r\n padding: 80px 0;\r\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f4 100%);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .section-header {\r\n text-align: center;\r\n margin-bottom: 80px;\r\n }\r\n\r\n .section-header h2 {\r\n font-size: 3rem;\r\n color: #F93825;\r\n margin-bottom: 20px;\r\n font-weight: 800;\r\n text-shadow: 0 2px 4px rgba(249, 56, 37, 0.2);\r\n }\r\n\r\n @keyframes gradientShift {\r\n\r\n 0%,\r\n 100% {\r\n background-position: 0% 50%;\r\n }\r\n\r\n 50% {\r\n background-position: 100% 50%;\r\n }\r\n }\r\n\r\n .section-header p {\r\n font-size: 1.3rem;\r\n color: #6c757d;\r\n max-width: 700px;\r\n margin: 0 auto;\r\n line-height: 1.8;\r\n }\r\n\r\n \/* Production Timeline *\/\r\n .production-timeline {\r\n position: relative;\r\n margin: 60px 0;\r\n }\r\n\r\n .timeline-line {\r\n position: absolute;\r\n left: 50%;\r\n top: 0;\r\n bottom: 0;\r\n width: 4px;\r\n background: linear-gradient(180deg, #F93825, #ff6b6b, #F93825);\r\n transform: translateX(-50%);\r\n border-radius: 2px;\r\n box-shadow: 0 0 20px rgba(249, 56, 37, 0.3);\r\n }\r\n\r\n .timeline-item {\r\n display: flex;\r\n align-items: center;\r\n margin: 40px 0;\r\n position: relative;\r\n }\r\n\r\n .timeline-item:nth-child(odd) {\r\n flex-direction: row;\r\n }\r\n\r\n .timeline-item:nth-child(even) {\r\n flex-direction: row-reverse;\r\n }\r\n\r\n .timeline-content {\r\n background: rgba(255, 255, 255, 0.9);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(249, 56, 37, 0.1);\r\n border-radius: 20px;\r\n padding: 30px;\r\n width: 45%;\r\n position: relative;\r\n transition: all 0.4s ease;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n opacity: 0;\r\n transform: translateX(-100px) scale(0.8);\r\n }\r\n\r\n .timeline-content:nth-child(even) {\r\n transform: translateX(100px) scale(0.8);\r\n }\r\n\r\n .timeline-content.animate {\r\n animation: slideInFromLeft 0.8s ease-out forwards;\r\n }\r\n\r\n .timeline-content:nth-child(even).animate {\r\n animation: slideInFromRight 0.8s ease-out forwards;\r\n }\r\n\r\n .timeline-content:hover {\r\n transform: translateY(-10px) scale(1.02);\r\n background: rgba(255, 255, 255, 1);\r\n box-shadow: 0 20px 40px rgba(249, 56, 37, 0.2);\r\n border-color: rgba(249, 56, 37, 0.3);\r\n }\r\n\r\n @keyframes slideInFromLeft {\r\n 0% {\r\n opacity: 0;\r\n transform: translateX(-100px) scale(0.8);\r\n }\r\n\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0) scale(1);\r\n }\r\n }\r\n\r\n @keyframes slideInFromRight {\r\n 0% {\r\n opacity: 0;\r\n transform: translateX(100px) scale(0.8);\r\n }\r\n\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0) scale(1);\r\n }\r\n }\r\n\r\n .timeline-dot {\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n width: 20px;\r\n height: 20px;\r\n background: #F93825;\r\n border-radius: 50%;\r\n transform: translate(-50%, -50%) scale(0);\r\n box-shadow: 0 0 20px rgba(249, 56, 37, 0.6);\r\n z-index: 3;\r\n opacity: 0;\r\n }\r\n\r\n .timeline-dot.animate {\r\n animation: bounceIn 1s ease-out 0.5s both;\r\n }\r\n\r\n .timeline-dot::before {\r\n content: '';\r\n position: absolute;\r\n top: -8px;\r\n left: -8px;\r\n right: -8px;\r\n bottom: -8px;\r\n border: 2px solid rgba(249, 56, 37, 0.3);\r\n border-radius: 50%;\r\n animation: pulse 2s infinite 1.5s;\r\n }\r\n\r\n @keyframes bounceIn {\r\n 0% {\r\n opacity: 0;\r\n transform: translate(-50%, -50%) scale(0);\r\n }\r\n\r\n 50% {\r\n transform: translate(-50%, -50%) scale(1.2);\r\n }\r\n\r\n 100% {\r\n opacity: 1;\r\n transform: translate(-50%, -50%) scale(1);\r\n }\r\n }\r\n\r\n @keyframes pulse {\r\n 0% {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n\r\n 100% {\r\n transform: scale(1.5);\r\n opacity: 0;\r\n }\r\n }\r\n\r\n .timeline-title {\r\n font-size: 1.4rem;\r\n font-weight: 700;\r\n color: #2c3e50;\r\n margin-bottom: 15px;\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n }\r\n\r\n .timeline-icon {\r\n width: 40px;\r\n height: 40px;\r\n background: linear-gradient(135deg, #F93825, #ff6b6b);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 18px;\r\n color: white;\r\n }\r\n\r\n .timeline-description {\r\n color: #6c757d;\r\n line-height: 1.6;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .progress-bar {\r\n width: 100%;\r\n height: 8px;\r\n background: rgba(108, 117, 125, 0.2);\r\n border-radius: 4px;\r\n overflow: hidden;\r\n margin: 15px 0;\r\n }\r\n\r\n .progress-fill {\r\n height: 100%;\r\n background: linear-gradient(90deg, #F93825, #ff6b6b);\r\n border-radius: 4px;\r\n transition: width 0.8s ease;\r\n position: relative;\r\n width: 0%;\r\n }\r\n\r\n .progress-fill.animate {\r\n animation: fillProgress 1.5s ease-out 1s both;\r\n }\r\n\r\n .progress-fill::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\r\n animation: shimmer 2s infinite;\r\n }\r\n\r\n @keyframes shimmer {\r\n 0% {\r\n transform: translateX(-100%);\r\n }\r\n\r\n 100% {\r\n transform: translateX(100%);\r\n }\r\n }\r\n\r\n @keyframes fillProgress {\r\n 0% {\r\n width: 0%;\r\n }\r\n\r\n 100% {\r\n width: var(--progress-width, 25%);\r\n }\r\n }\r\n\r\n \/* Interactive Cards *\/\r\n .interactive-cards {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 30px;\r\n margin-top: 60px;\r\n }\r\n\r\n .interactive-card {\r\n opacity: 0;\r\n transform: translateY(50px) scale(0.9);\r\n transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.9));\r\n backdrop-filter: blur(20px);\r\n border: 2px solid transparent;\r\n border-radius: 20px;\r\n padding: 40px 35px;\r\n position: relative;\r\n overflow: hidden;\r\n cursor: pointer;\r\n box-shadow:\r\n 0 8px 32px rgba(0, 0, 0, 0.08),\r\n inset 0 1px 0 rgba(255, 255, 255, 0.8);\r\n transform-style: preserve-3d;\r\n perspective: 1000px;\r\n }\r\n\r\n .interactive-card.animate {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n\r\n .interactive-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n }\r\n\r\n .interactive-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .interactive-card:hover {\r\n transform: translateY(-12px) scale(1.02);\r\n box-shadow:\r\n 0 20px 40px rgba(0, 0, 0, 0.15),\r\n inset 0 1px 0 rgba(255, 255, 255, 0.9);\r\n border-color: rgba(249, 56, 37, 0.3);\r\n background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(252, 252, 252, 0.95));\r\n }\r\n\r\n .interactive-card:active {\r\n transform: translateY(-8px) scale(1.01);\r\n }\r\n\r\n .card-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .card-icon-large {\r\n width: 70px;\r\n height: 70px;\r\n min-width: 70px;\r\n background: linear-gradient(135deg, #F93825, #ff6b6b);\r\n border-radius: 18px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 28px;\r\n color: white;\r\n position: relative;\r\n flex-shrink: 0;\r\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n transform-style: preserve-3d;\r\n }\r\n\r\n .card-icon-large::after {\r\n content: '';\r\n position: absolute;\r\n top: -3px;\r\n left: -3px;\r\n right: -3px;\r\n bottom: -3px;\r\n border-radius: 21px;\r\n z-index: -1;\r\n opacity: 0.25;\r\n filter: blur(12px);\r\n transition: all 0.6s ease;\r\n }\r\n\r\n .interactive-card:hover .card-icon-large {\r\n transform: scale(1.1);\r\n }\r\n\r\n .interactive-card:hover .card-icon-large::after {\r\n opacity: 0.4;\r\n filter: blur(12px);\r\n transform: scale(1.1);\r\n }\r\n\r\n .card-title-large {\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n color: #2c3e50;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n }\r\n\r\n .interactive-card:hover .card-title-large {\r\n color: #2c3e50;\r\n transform: translateY(-2px);\r\n }\r\n\r\n .card-content {\r\n color: #6c757d;\r\n line-height: 1.7;\r\n }\r\n\r\n .interactive-card .card-content {\r\n color: #6c757d !important;\r\n line-height: 1.7 !important;\r\n margin-bottom: 20px !important;\r\n font-size: 1rem !important;\r\n display: block !important;\r\n opacity: 1 !important;\r\n visibility: visible !important;\r\n }\r\n\r\n .feature-list {\r\n list-style: none;\r\n padding: 0;\r\n margin-top: 20px;\r\n }\r\n\r\n .feature-list li {\r\n padding: 8px 0;\r\n color: #495057;\r\n position: relative;\r\n padding-left: 30px;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n transform: translateX(0);\r\n opacity: 0.8;\r\n }\r\n\r\n .feature-list li:hover {\r\n color: #2c3e50;\r\n transform: translateX(8px);\r\n opacity: 1;\r\n }\r\n\r\n .feature-list li::before {\r\n content: '\u25b6';\r\n position: absolute;\r\n left: 0;\r\n color: #F93825;\r\n font-size: 12px;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n transform: scale(1);\r\n }\r\n\r\n .feature-list li:hover::before {\r\n transform: scale(1.2);\r\n color: #F93825;\r\n }\r\n\r\n .interactive-card:hover .feature-list li {\r\n animation: slideInFromLeft 0.6s ease-out forwards;\r\n animation-delay: calc(var(--item-index, 0) * 0.1s);\r\n }\r\n\r\n \/* Legal Compliance Highlight *\/\r\n .legal-compliance {\r\n background: linear-gradient(135deg, rgba(249, 56, 37, 0.05), rgba(255, 107, 107, 0.05));\r\n border: 2px solid rgba(249, 56, 37, 0.2);\r\n border-radius: 20px;\r\n padding: 30px;\r\n margin-top: 40px;\r\n position: relative;\r\n overflow: hidden;\r\n background: rgba(255, 255, 255, 0.9);\r\n }\r\n\r\n .legal-compliance::before {\r\n content: '\\f24e';\r\n position: absolute;\r\n top: -20px;\r\n right: -15px;\r\n font-size: 100px;\r\n opacity: 0.1;\r\n transform: rotate(15deg);\r\n font-family: 'Font Awesome 6 Free';\r\n font-weight: 900;\r\n }\r\n\r\n .legal-title {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: #2c3e50;\r\n margin-bottom: 15px;\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n }\r\n\r\n .legal-content {\r\n color: #6c757d;\r\n line-height: 1.8;\r\n }\r\n\r\n .compliance-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 20px;\r\n margin-top: 20px;\r\n }\r\n\r\n .compliance-item {\r\n background: rgba(255, 255, 255, 0.8);\r\n border: 1px solid rgba(249, 56, 37, 0.1);\r\n border-radius: 10px;\r\n padding: 15px;\r\n text-align: center;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .compliance-item:hover {\r\n background: rgba(255, 255, 255, 1);\r\n transform: translateY(-5px);\r\n border-color: rgba(249, 56, 37, 0.3);\r\n box-shadow: 0 10px 20px rgba(249, 56, 37, 0.1);\r\n }\r\n\r\n .compliance-item h4 {\r\n color: #F93825;\r\n font-size: 1rem;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .compliance-item p {\r\n color: #6c757d;\r\n font-size: 0.9rem;\r\n }\r\n\r\n \/* Service Navigation Cards *\/\r\n .service-navigation {\r\n margin-top: 80px;\r\n margin-bottom: 80px;\r\n }\r\n\r\n .navigation-cards {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\r\n gap: 30px;\r\n margin-top: 50px;\r\n }\r\n\r\n .nav-card {\r\n background: #ffffff;\r\n border: 1px solid #e9ecef;\r\n padding: 35px 30px;\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.4s ease;\r\n cursor: pointer;\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n }\r\n\r\n .nav-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, #6c757d, #495057);\r\n transform: scaleX(0);\r\n transition: transform 0.4s ease;\r\n }\r\n\r\n .nav-card:hover::before {\r\n transform: scaleX(1);\r\n }\r\n\r\n .nav-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);\r\n border-color: #6c757d;\r\n }\r\n\r\n .nav-card-image {\r\n width: 100%;\r\n height: 200px;\r\n margin-bottom: 20px;\r\n overflow: hidden;\r\n position: relative;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .image-placeholder {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .image-placeholder.process-image {\r\n background-image: url(https:\/\/darksn.de\/wp-content\/uploads\/2025\/07\/woman-touching-smart-technology-holographic-interface-scaled.jpg);\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n }\r\n\r\n .image-placeholder.legal-image {\r\n background-image: url(https:\/\/darksn.de\/wp-content\/uploads\/2025\/07\/still-life-world-intellectual-property-day.jpg);\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n }\r\n\r\n .image-placeholder.sample-image {\r\n background-image: url(https:\/\/darksn.de\/wp-content\/uploads\/2025\/07\/workers-comparing-results-scaled.jpg);\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n }\r\n\r\n .image-placeholder.request-image {\r\n background-image: url(https:\/\/darksn.de\/wp-content\/uploads\/2025\/07\/handshake-man-woman-after-signing-business-contract-closeup-scaled.jpg);\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n }\r\n\r\n .nav-card:hover .image-placeholder {\r\n border-color: #6c757d;\r\n }\r\n\r\n .placeholder-text {\r\n font-size: 48px;\r\n color: #6c757d;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .nav-card:hover .placeholder-text {\r\n transform: scale(1.1);\r\n color: #495057;\r\n }\r\n\r\n .nav-card h3 {\r\n font-size: 1.3rem;\r\n font-weight: 600;\r\n color: #2c3e50;\r\n margin-bottom: 15px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .nav-card:hover h3 {\r\n color: #495057;\r\n }\r\n\r\n .nav-card p {\r\n color: #6c757d;\r\n line-height: 1.6;\r\n margin-bottom: 20px;\r\n font-size: 0.95rem;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .nav-card-features {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .nav-card-features span {\r\n background: rgba(108, 117, 125, 0.1);\r\n color: #495057;\r\n padding: 6px 12px;\r\n border-radius: 20px;\r\n font-size: 0.8rem;\r\n font-weight: 500;\r\n border: 1px solid rgba(108, 117, 125, 0.2);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .nav-card:hover .nav-card-features span {\r\n background: rgba(108, 117, 125, 0.15);\r\n color: #343a40;\r\n transform: translateY(-2px);\r\n }\r\n\r\n .nav-card-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #495057;\r\n text-decoration: none;\r\n font-weight: 600;\r\n font-size: 0.95rem;\r\n transition: all 0.3s ease;\r\n margin-top: auto;\r\n align-self: flex-start;\r\n }\r\n\r\n .nav-card-link::after {\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .nav-card-link:hover {\r\n color: #343a40;\r\n transform: translateX(5px);\r\n }\r\n\r\n .nav-card-link:hover::after {\r\n transform: translateX(3px);\r\n }\r\n\r\n \/* Sector-Specific Solutions *\/\r\n .sector-solutions {\r\n padding: 80px 0;\r\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f4 100%);\r\n }\r\n\r\n .sector-cards {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\r\n gap: 30px;\r\n margin-top: 50px;\r\n }\r\n\r\n .sector-card {\r\n background: #ffffff;\r\n border: 1px solid #e9ecef;\r\n border-radius: 20px;\r\n padding: 40px 35px;\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.4s ease;\r\n cursor: pointer;\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\r\n }\r\n\r\n .sector-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 4px;\r\n background: linear-gradient(90deg, #6c757d, #495057);\r\n transform: scaleX(0);\r\n transition: transform 0.4s ease;\r\n }\r\n\r\n .sector-card:hover::before {\r\n transform: scaleX(1);\r\n }\r\n\r\n .sector-card:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);\r\n border-color: #6c757d;\r\n }\r\n\r\n .sector-icon {\r\n width: 80px;\r\n height: 80px;\r\n background: linear-gradient(135deg, #6c757d, #495057);\r\n border-radius: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 36px;\r\n margin-bottom: 25px;\r\n color: white;\r\n transition: all 0.4s ease;\r\n box-shadow: 0 6px 20px rgba(108, 117, 125, 0.3);\r\n }\r\n\r\n .sector-card:hover .sector-icon {\r\n transform: scale(1.1);\r\n background: linear-gradient(135deg, #495057, #343a40);\r\n }\r\n\r\n .sector-card h3 {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: #2c3e50;\r\n margin-bottom: 20px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .sector-card:hover h3 {\r\n color: #495057;\r\n }\r\n\r\n .sector-card p {\r\n color: #6c757d;\r\n line-height: 1.7;\r\n margin-bottom: 25px;\r\n font-size: 1rem;\r\n }\r\n\r\n .sector-features {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .sector-features span {\r\n background: rgba(108, 117, 125, 0.1);\r\n color: #495057;\r\n padding: 8px 16px;\r\n border-radius: 25px;\r\n font-size: 0.85rem;\r\n font-weight: 500;\r\n border: 1px solid rgba(108, 117, 125, 0.2);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .sector-card:hover .sector-features span {\r\n background: rgba(108, 117, 125, 0.15);\r\n color: #343a40;\r\n transform: translateY(-2px);\r\n }\r\n\r\n .sector-benefits {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .benefit-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 12px 16px;\r\n background: rgba(108, 117, 125, 0.05);\r\n border-radius: 12px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .sector-card:hover .benefit-item {\r\n background: rgba(108, 117, 125, 0.1);\r\n transform: translateX(5px);\r\n }\r\n\r\n .benefit-icon {\r\n font-size: 18px;\r\n }\r\n\r\n .benefit-item span:last-child {\r\n font-weight: 600;\r\n color: #495057;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .sector-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #495057;\r\n text-decoration: none;\r\n font-weight: 700;\r\n font-size: 1rem;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .sector-link::after {\r\n content: '\u2192';\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .sector-link:hover {\r\n color: #343a40;\r\n transform: translateX(5px);\r\n }\r\n\r\n .sector-link:hover::after {\r\n transform: translateX(3px);\r\n }\r\n\r\n \/* Statistics Section *\/\r\n .statistics-section {\r\n padding: 80px 0;\r\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #ffffff 100%);\r\n }\r\n\r\n .statistics-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 30px;\r\n margin-top: 60px;\r\n }\r\n\r\n .stat-card {\r\n background: #ffffff;\r\n border: 1px solid #e9ecef;\r\n border-radius: 50%;\r\n padding: 60px 40px;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.4s ease;\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\r\n aspect-ratio: 1;\r\n }\r\n\r\n .stat-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 4px;\r\n background: linear-gradient(90deg, #6c757d, #495057);\r\n transform: scaleX(0);\r\n transition: transform 0.4s ease;\r\n }\r\n\r\n .stat-card:hover::before {\r\n transform: scaleX(1);\r\n }\r\n\r\n .stat-card:hover {\r\n transform: translateY(-10px) scale(1.02);\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\r\n border-color: #6c757d;\r\n }\r\n\r\n\r\n\r\n .stat-number {\r\n font-size: 3.5rem;\r\n font-weight: 800;\r\n color: #2c3e50;\r\n margin-bottom: 5px;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .stat-symbol {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n color: #6c757d;\r\n display: inline-block;\r\n margin-left: 5px;\r\n }\r\n\r\n .stat-label {\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n color: #495057;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .stat-description {\r\n font-size: 0.9rem;\r\n color: #6c757d;\r\n line-height: 1.5;\r\n }\r\n\r\n .stat-card:hover .stat-number {\r\n color: #495057;\r\n transform: scale(1.05);\r\n }\r\n\r\n \/* FAQ Section *\/\r\n .faq-section {\r\n padding: 80px 0;\r\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f4 100%);\r\n }\r\n\r\n .faq-container {\r\n max-width: 800px;\r\n margin: 50px auto 0;\r\n }\r\n\r\n .faq-item {\r\n background: #ffffff;\r\n border: 1px solid #e9ecef;\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .faq-item:hover {\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\r\n border-color: #6c757d;\r\n }\r\n\r\n .faq-question {\r\n padding: 25px 30px;\r\n cursor: pointer;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .faq-question:hover {\r\n background: #f8f9fa;\r\n }\r\n\r\n .faq-question h3 {\r\n font-size: 1.1rem !important;\r\n font-weight: 600;\r\n color: #2c3e50;\r\n margin: 0;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .faq-question:hover h3 {\r\n color: #495057;\r\n }\r\n\r\n .faq-toggle {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: #6c757d;\r\n transition: all 0.3s ease;\r\n min-width: 20px;\r\n text-align: center;\r\n }\r\n\r\n .faq-item.active .faq-toggle {\r\n transform: rotate(45deg);\r\n color: #495057;\r\n }\r\n\r\n .faq-answer {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n background: #f8f9fa;\r\n }\r\n\r\n .faq-item.active .faq-answer {\r\n max-height: 200px;\r\n }\r\n\r\n .faq-answer p {\r\n padding: 0 30px 25px;\r\n margin: 0;\r\n color: #6c757d;\r\n line-height: 1.6;\r\n font-size: 0.95rem;\r\n }\r\n\r\n \/* Sector-Specific Solutions - Bottom Section *\/\r\n .sector-solutions-bottom {\r\n padding: 80px 0;\r\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f4 100%);\r\n }\r\n\r\n .sector-content {\r\n display: grid;\r\n grid-template-columns: 1fr 400px;\r\n gap: 50px;\r\n align-items: start;\r\n }\r\n\r\n .sector-cards-vertical {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 30px;\r\n }\r\n\r\n .sector-card-vertical {\r\n background: #ffffff;\r\n border: 1px solid #e9ecef;\r\n border-radius: 16px;\r\n padding: 35px 30px;\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.4s ease;\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\r\n }\r\n\r\n .sector-card-vertical::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, #6c757d, #495057);\r\n transform: scaleX(0);\r\n transition: transform 0.4s ease;\r\n }\r\n\r\n .sector-card-vertical:hover::before {\r\n transform: scaleX(1);\r\n }\r\n\r\n .sector-card-vertical:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);\r\n border-color: #6c757d;\r\n }\r\n\r\n .sector-image-placeholder {\r\n position: sticky;\r\n top: 20px;\r\n }\r\n\r\n .image-container {\r\n padding: 40px 30px;\r\n text-align: center;\r\n height: 500px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.3s ease;\r\n background-image: url(https:\/\/darksn.de\/wp-content\/uploads\/2025\/07\/overhead-view-young-woman-sitting-wheelchair-using-laptop-scaled.jpg);\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n }\r\n\r\n\r\n .placeholder-text {\r\n color: #6c757d;\r\n }\r\n\r\n .placeholder-icon {\r\n font-size: 48px;\r\n display: block;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .placeholder-text h4 {\r\n font-size: 1.3rem;\r\n font-weight: 600;\r\n color: #495057;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .placeholder-text p {\r\n font-size: 0.95rem;\r\n line-height: 1.6;\r\n color: #6c757d;\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 900px) {\r\n .hero-content {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n min-height: 300px;\r\n }\r\n\r\n .hero-card {\r\n padding: 2rem;\r\n max-width: 100%;\r\n }\r\n\r\n .hero-card h1 {\r\n font-size: 2rem;\r\n }\r\n\r\n .hero-card p {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .timeline-line {\r\n left: 30px;\r\n }\r\n\r\n .timeline-item {\r\n flex-direction: row !important;\r\n }\r\n\r\n .timeline-content {\r\n width: calc(100% - 80px);\r\n margin-left: 60px;\r\n }\r\n\r\n .timeline-dot {\r\n left: 30px;\r\n }\r\n\r\n .section-header h2 {\r\n font-size: 2.5rem;\r\n }\r\n\r\n .interactive-cards {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .hero-card h1 {\r\n font-size: 1.8rem;\r\n }\r\n\r\n .cta-button {\r\n font-size: 1rem;\r\n padding: 15px 30px;\r\n }\r\n\r\n .section-header h2 {\r\n font-size: 2rem;\r\n }\r\n\r\n .timeline-content {\r\n padding: 20px;\r\n }\r\n\r\n .interactive-card {\r\n padding: 25px;\r\n }\r\n\r\n .sector-content {\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n }\r\n\r\n .sector-image-placeholder {\r\n position: static;\r\n }\r\n\r\n .image-container {\r\n height: 500px;\r\n }\r\n }\r\n\r\n\r\n\r\n \/* Fade-in Zoom Animasyon *\/\r\n .fade-zoom-in {\r\n opacity: 0;\r\n transform: scale(0.92) translateY(40px);\r\n transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .fade-zoom-in.animate {\r\n opacity: 1;\r\n transform: scale(1) translateY(0);\r\n }\r\n\r\n \/* Legal Disclaimer Styles *\/\r\n .disclaimer {\r\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\r\n padding: 60px 20px;\r\n width: 100%;\r\n }\r\n\r\n .disclaimer-content {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n background: rgba(220, 53, 69, 0.05);\r\n border: 2px solid rgba(220, 53, 69, 0.2);\r\n border-radius: 20px;\r\n padding: 40px 30px;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n backdrop-filter: blur(10px);\r\n box-shadow: 0 8px 32px rgba(220, 53, 69, 0.1);\r\n border-left: 5px solid #dc3545;\r\n }\r\n\r\n .disclaimer-icon {\r\n width: 80px;\r\n height: 80px;\r\n background: linear-gradient(135deg, #dc3545, #e74c3c);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 25px auto;\r\n font-size: 32px;\r\n color: white;\r\n box-shadow: 0 4px 20px rgba(220, 53, 69, 0.3);\r\n }\r\n\r\n .disclaimer h4 {\r\n color: #dc3545;\r\n font-size: 1.4rem;\r\n margin-bottom: 20px;\r\n font-weight: 700;\r\n }\r\n\r\n .disclaimer p {\r\n color: #495057;\r\n font-size: 1rem;\r\n line-height: 1.7;\r\n margin-bottom: 20px;\r\n max-width: 1000px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .disclaimer p:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .disclaimer {\r\n padding: 40px 15px;\r\n }\r\n\r\n .disclaimer-content {\r\n padding: 30px 20px;\r\n }\r\n\r\n .disclaimer-icon {\r\n width: 60px;\r\n height: 60px;\r\n font-size: 24px;\r\n }\r\n\r\n .disclaimer h4 {\r\n font-size: 1.2rem;\r\n }\r\n\r\n .disclaimer p {\r\n font-size: 0.95rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .disclaimer-content {\r\n padding: 25px 15px;\r\n }\r\n\r\n .disclaimer-icon {\r\n width: 50px;\r\n height: 50px;\r\n font-size: 20px;\r\n }\r\n\r\n .disclaimer h4 {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .disclaimer p {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n \/* Process Timeline Ba\u015flang\u0131c\u0131 *\/\r\n .process-timeline-horizontal-bg {\r\n padding: 64px 0 32px 0;\r\n overflow-x: auto;\r\n width: 100%;\r\n }\r\n\r\n .process-timeline-horizontal-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n position: relative;\r\n padding: 0 24px;\r\n }\r\n\r\n .process-timeline-horizontal-steps {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-between;\r\n position: relative;\r\n z-index: 1;\r\n gap: 48px;\r\n overflow-x: auto;\r\n padding-bottom: 32px;\r\n }\r\n\r\n .process-step-horizontal {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n min-width: 220px;\r\n flex: 1 1 220px;\r\n position: relative;\r\n }\r\n\r\n .process-dot-horizontal {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 50%;\r\n background: #232336;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #fff;\r\n font-size: 24px;\r\n border: 3px solid #6366f1;\r\n margin-bottom: 18px;\r\n z-index: 2;\r\n transition: background 0.3s, border 0.3s;\r\n }\r\n\r\n .process-dot-horizontal.highlight {\r\n background: #232336;\r\n color: #fff;\r\n border-color: #6366f1;\r\n }\r\n\r\n .process-card-horizontal {\r\n background: rgba(120, 119, 198, 0.08);\r\n border-radius: 18px;\r\n padding: 24px 18px;\r\n border: 2px solid transparent;\r\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);\r\n color: #fff;\r\n min-width: 200px;\r\n max-width: 260px;\r\n height: 225px;\r\n text-align: center;\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n transition: 0.3s;\r\n backdrop-filter: blur(4px);\r\n }\r\n\r\n .process-card-horizontal h3 {\r\n font-size: 1.1rem !important;\r\n font-weight: bold;\r\n margin: 0 0 10px 0;\r\n color: black;\r\n }\r\n\r\n .process-card-horizontal p {\r\n color: black;\r\n font-size: 0.98rem;\r\n margin: 0;\r\n }\r\n\r\n .process-card-horizontal.bg-purple {\r\n background: rgba(139, 92, 246, 0.12);\r\n border-color: #8b5cf6;\r\n }\r\n\r\n .process-card-horizontal.bg-indigo {\r\n background: rgba(99, 102, 241, 0.12);\r\n border-color: #6366f1;\r\n }\r\n\r\n .process-card-horizontal.bg-bluegray {\r\n background: rgba(71, 85, 105, 0.12);\r\n border-color: #475569;\r\n }\r\n\r\n .process-card-horizontal.bg-slate {\r\n background: rgba(71, 85, 105, 0.12);\r\n border-color: #334155;\r\n }\r\n\r\n .process-card-horizontal.highlight {\r\n box-shadow: 0 0 24px 4px rgba(99, 102, 241, 0.18);\r\n border-width: 3px;\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .process-timeline-horizontal-steps {\r\n gap: 24px;\r\n }\r\n\r\n .process-step-horizontal {\r\n min-width: 180px;\r\n }\r\n\r\n .process-card-horizontal {\r\n min-width: 160px;\r\n max-width: 200px;\r\n padding: 16px 8px;\r\n }\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .process-timeline-horizontal-bg {\r\n padding: 32px 0 16px 0;\r\n }\r\n\r\n .process-timeline-horizontal-container {\r\n padding: 0 4px;\r\n }\r\n\r\n .process-timeline-horizontal-steps {\r\n flex-direction: column;\r\n gap: 32px;\r\n padding-bottom: 0;\r\n }\r\n\r\n .process-step-horizontal {\r\n min-width: 0;\r\n width: 100%;\r\n align-items: center;\r\n }\r\n\r\n .process-card-horizontal {\r\n min-width: 200px;\r\n max-width: 300px;\r\n padding: 10px 4px;\r\n }\r\n\r\n .process-dot-horizontal {\r\n width: 32px;\r\n height: 32px;\r\n font-size: 16px;\r\n }\r\n }\r\n\r\n .modern-timeline {\r\n width: 100%;\r\n padding: 48px 0 32px 0;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n .modern-timeline-steps {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 48px;\r\n width: 100%;\r\n max-width: 1200px;\r\n justify-content: center;\r\n }\r\n .modern-timeline-step {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n width: 220px;\r\n min-width: 140px;\r\n background: #fff;\r\n border-radius: 18px;\r\n box-shadow: 0 4px 24px rgba(44,62,80,0.10), 0 1.5px 4px rgba(44,62,80,0.08);\r\n padding: 28px 16px 22px 16px;\r\n margin: 0;\r\n transition: box-shadow 0.3s, transform 0.3s;\r\n }\r\n .modern-timeline-step:hover {\r\n box-shadow: 0 8px 32px rgba(249,56,37,0.13), 0 2px 8px rgba(44,62,80,0.10);\r\n transform: translateY(-4px) scale(1.025);\r\n }\r\n .modern-timeline-shape {\r\n width: 90px;\r\n height: 90px;\r\n position: relative;\r\n margin-bottom: 18px;\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n }\r\n .modern-timeline-shape span {\r\n position: absolute;\r\n left: -140px; right: 0; top: -62px; bottom: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.6rem;\r\n font-weight: 700;\r\n color: black;\r\n z-index: 2;\r\n }\r\n .modern-timeline-shape::before {\r\n content: '';\r\n position: absolute;\r\n left: -65px; top: -28px;\r\n width: 90px; height: 90px;\r\n z-index: 1;\r\n clip-path: polygon(0 0, 100% 0, 0 100%);\r\n background: #F93825;\r\n opacity: 0.18;\r\n }\r\n .step1 .modern-timeline-shape::before {\r\n background: #F93825;\r\n opacity: 0.85;\r\n }\r\n .step2 .modern-timeline-shape::before {\r\n background: #b6d7a8;\r\n opacity: 0.85;\r\n }\r\n .step3 .modern-timeline-shape::before {\r\n background: #6ee7b7;\r\n opacity: 0.85;\r\n }\r\n .step4 .modern-timeline-shape::before {\r\n background: #b4a7d6;\r\n opacity: 0.85;\r\n }\r\n .modern-timeline-content {\r\n text-align: center;\r\n }\r\n .modern-timeline-title {\r\n font-size: 1.08rem;\r\n font-weight: 700;\r\n margin-bottom: 8px;\r\n color: #222;\r\n }\r\n .modern-timeline-desc {\r\n font-size: 0.98rem;\r\n color: #555;\r\n opacity: 0.95;\r\n }\r\n @media (max-width: 900px) {\r\n .modern-timeline-steps {\r\n gap: 18px;\r\n }\r\n .modern-timeline-step {\r\n width: 120px;\r\n padding: 18px 6px 14px 6px;\r\n }\r\n .modern-timeline-shape {\r\n width: 60px; height: 60px;\r\n }\r\n .modern-timeline-shape span {\r\n font-size: 1.1rem;\r\n }\r\n }\r\n @media (max-width: 600px) {\r\n .modern-timeline-steps {\r\n flex-direction: column;\r\n gap: 32px;\r\n align-items: center;\r\n }\r\n .modern-timeline-step {\r\n width: 100%;\r\n min-width: 0;\r\n padding: 16px 4px 12px 4px;\r\n align-items: center;\r\n }\r\n .modern-timeline-shape {\r\n position: relative !important;\r\n margin-bottom: 18px;\r\n left: 0 !important;\r\n top: 0 !important;\r\n transform: none !important;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .modern-timeline-shape span {\r\n position: absolute;\r\n left: 0; right: 0; top: 0; bottom: 0;\r\n color: #fff;\r\n font-size: 1.2rem;\r\n }\r\n .modern-timeline-shape::before {\r\n left: 0 !important;\r\n top: 0 !important;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <!-- Ana B\u00f6l\u00fcm -->\r\n <section class=\"hero\">\r\n <div class=\"hero-content\">\r\n <div class=\"hero-card\">\r\n <h1>Umfassende Barrierefreiheitsl\u00f6sungen & Services f\u00fcr digitale Inklusion<\/h1>\r\n <p>Mit umfangreicher Erfahrung in der Barrierefreiheits-Entwicklung nutzen wir modernste Technologien, um ma\u00dfgeschneiderte, inklusive digitale Erlebnisse mit einem ganzheitlichen Ansatz zu schaffen.<\/p>\r\n <a href=\"https:\/\/darksn.de\/de\/kontakt\/\"><button class=\"cta-button\">Kontakt<\/button><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Hizmet Kartlar\u0131 -->\r\n <div class=\"service-navigation\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <h2>Umfassende Barrierefreiheitsdienstleistungen<\/h2>\r\n <p>Entdecken Sie unser vollst\u00e4ndiges Angebot an Barrierefreiheitsl\u00f6sungen, das darauf ausgelegt ist, Ihre digitale Pr\u00e4senz rechtskonform zu gestalten.<\/p>\r\n <\/div>\r\n\r\n <div class=\"navigation-cards\">\r\n <div class=\"nav-card fade-zoom-in\">\r\n <div class=\"nav-card-image\">\r\n <div class=\"image-placeholder\"\r\n style=\"background-image: url('https:\/\/darksn.de\/wp-content\/uploads\/2025\/07\/business-freelancer-with-physical-impairment-sitting-wheelchair-working-laptop-disability-friendly-office-female-worker-with-chronic-health-condition-analyzing-website-presentation-scaled.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;\">\r\n <\/div>\r\n <\/div>\r\n <h3>Digitale Barrierefreiheit<\/h3>\r\n <p>Umfassende digitale Barrierefreiheitsl\u00f6sungen f\u00fcr Websites, mobile Apps und digitale Plattformen.\nWir stellen sicher, dass Ihre digitalen Produkte f\u00fcr alle Nutzer zug\u00e4nglich sind \u2013 einschlie\u00dflich Menschen mit Behinderungen.\r\n <\/p>\r\n <div class=\"nav-card-features\">\r\n <span>WCAG 2.1 AA<\/span>\r\n <span>Mobile Zug\u00e4nglichkeit<\/span>\r\n <span>Screenreader-Tests<\/span>\r\n <\/div>\r\n <a href=\"https:\/\/darksn.de\/de\/digital-accessibility\/\" class=\"nav-card-link\">Barrierefreiheit ansehen \u2192<\/a>\r\n <\/div>\r\n\r\n <div class=\"nav-card fade-zoom-in\">\r\n <div class=\"nav-card-image\">\r\n <div class=\"image-placeholder process-image\">\r\n <\/div>\r\n <\/div>\r\n <h3>Barrierefreiheits Services<\/h3>\r\n <p>Professionelle Barrierefreiheitstests und -pr\u00fcfungen mit branchen\u00fcblichen Tools und Methoden. Umfassende Bewertung zur Sicherstellung der WCAG 2.1 AA-Konformit\u00e4t und zur Identifizierung von Barrieren in der digitalen Zug\u00e4nglichkeit.<\/p>\r\n <div class=\"nav-card-features\">\r\n <span>Automatisierte Tests<\/span>\r\n <span>Manuelle Pr\u00fcfung<\/span>\r\n <span>Compliance-Berichte<\/span>\r\n <\/div>\r\n <a href=\"https:\/\/darksn.de\/de\/our-accessibility-services\/\" class=\"nav-card-link\">Services ansehen \u2192<\/a>\r\n <\/div>\r\n\r\n <div class=\"nav-card fade-zoom-in\">\r\n <div class=\"nav-card-image\">\r\n <div class=\"image-placeholder\"\r\n style=\"background-image: url('https:\/\/darksn.de\/wp-content\/uploads\/2025\/07\/aerial-view-business-data-analysis-graph-scaled.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;\">\r\n <\/div>\r\n <\/div>\r\n <h3>Pr\u00fcfablauf<\/h3>\r\n <p>Systematischer Barrierefreiheits-Audit nach internationalen Standards.\nUnsere umfassende Audit-Methodik garantiert eine gr\u00fcndliche Bewertung und detaillierte Berichte zur Einhaltung der Barrierefreiheitsanforderungen.<\/p>\r\n <div class=\"nav-card-features\">\r\n <span>Systematische \u00dcberpr\u00fcfung<\/span>\r\n <span>Detaillierte Berichte<\/span>\r\n <span>Ma\u00dfnahmenpl\u00e4ne<\/span>\r\n <\/div>\r\n <a href=\"https:\/\/darksn.de\/de\/testing-process\/\" class=\"nav-card-link\">Prozess ansehen \u2192<\/a>\r\n <\/div>\r\n\r\n <div class=\"nav-card fade-zoom-in\">\r\n <div class=\"nav-card-image\">\r\n <div class=\"image-placeholder sample-image\">\r\n <\/div>\r\n <\/div>\r\n <h3>Pr\u00fcfkriterien und Standards<\/h3>\r\n <p>Ganzheitliche Testmethoden gem\u00e4\u00df internationalen Barrierefreiheitsstandards.\nUnsere Tests decken alle WCAG 2.1 AA-Kriterien ab und liefern detaillierte Berichte mit konkreten Handlungsempfehlungen.<\/p>\r\n <div class=\"nav-card-features\">\r\n <span>WCAG 2.1\/2.2<\/span>\r\n <span>EU-Standards<\/span>\r\n <span>Globale Einhaltung<\/span>\r\n <\/div>\r\n <a href=\"https:\/\/darksn.de\/de\/testing-criteria-and-standards\/\" class=\"nav-card-link\">View Standards\r\n \u2192<\/a>\r\n <\/div>\r\n\r\n <div class=\"nav-card fade-zoom-in\">\r\n <div class=\"nav-card-image\">\r\n <div class=\"image-placeholder legal-image\">\r\n <\/div>\r\n <\/div>\r\n <h3>Gesetzliche Anforderungen 2025<\/h3>\r\n <p>Bereiten Sie sich mit unserer Expertise auf die kommenden Regelungen vor, insbesondere auf das Barrierefreiheitsst\u00e4rkungsgesetz (BFSG).\nWir unterst\u00fctzen Sie dabei, alle Fristen und Anforderungen rechtzeitig zu erf\u00fcllen.<\/p>\r\n <div class=\"nav-card-features\">\r\n <span>BFSG 2025<\/span>\r\n <span>Fristenvorbereitung<\/span>\r\n <span>Risikobewertung<\/span>\r\n <\/div>\r\n <a href=\"https:\/\/darksn.de\/de\/legal-requirements-2025\/\" class=\"nav-card-link\">Anforderungen ansehen \u2192<\/a>\r\n <\/div>\r\n\r\n <div class=\"nav-card fade-zoom-in\">\r\n <div class=\"nav-card-image\">\r\n <div class=\"image-placeholder request-image\">\r\n <\/div>\r\n <\/div>\r\n <h3>W\u00e4hlen Sie Ihr Barrierefreiheits-Paket<\/h3>\r\n <p>W\u00e4hlen Sie aus unseren ma\u00dfgeschneiderten Barrierefreiheits-Paketen \u2013 ideal f\u00fcr Unternehmen jeder Gr\u00f6\u00dfe.\nVon der Grundkonformit\u00e4t bis hin zu umfassenden Enterprise-L\u00f6sungen bieten wir skalierbare Services.<\/p>\r\n <div class=\"nav-card-features\">\r\n <span>Basic Paket<\/span>\r\n <span>Professionelle<\/span>\r\n <span>Enterprise<\/span>\r\n <\/div>\r\n <a href=\"https:\/\/darksn.de\/de\/accessibility-package\/\" class=\"nav-card-link\">Pakete ansehen \u2192<\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Eri\u015filebilirlik Hizmetleri B\u00f6l\u00fcm\u00fc -->\r\n <section class=\"accessibility-section\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <h2>Website-Barrierefreiheitspr\u00fcfung<\/h2>\r\n <p>Umfassende Barrierefreiheitspr\u00fcfungen und Compliance-L\u00f6sungen f\u00fcr den deutschen und europ\u00e4ischen Markt. Stellen Sie sicher, dass Ihre Website alle gesetzlichen Anforderungen erf\u00fcllt und allen Nutzern gleichberechtigten Zugang bietet.<\/p>\r\n <\/div>\r\n\r\n <!-- Process Timeline Ba\u015flang\u0131c\u0131 -->\r\n <div class=\"modern-timeline\">\r\n <div class=\"modern-timeline-steps\">\r\n <div class=\"modern-timeline-step step1\">\r\n <div class=\"modern-timeline-shape\">\r\n <span>01<\/span>\r\n <\/div>\r\n <div class=\"modern-timeline-content\">\r\n <div class=\"modern-timeline-title\">Initialanalyse & Scan<\/div>\r\n <div class=\"modern-timeline-desc\">Automatisierte Barrierefreiheits-Scans mit branchen\u00fcblichen Tools zur Identifizierung potenzieller Compliance-Probleme.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"modern-timeline-step step2\">\r\n <div class=\"modern-timeline-shape\">\r\n <span>02<\/span>\r\n <\/div>\r\n <div class=\"modern-timeline-content\">\r\n <div class=\"modern-timeline-title\">Manuelle Pr\u00fcfung<\/div>\r\n <div class=\"modern-timeline-desc\">Umfassende manuelle Tests mit unterst\u00fctzenden Technologien, einschlie\u00dflich Screenreadern und Tastaturnavigation.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"modern-timeline-step step3\">\r\n <div class=\"modern-timeline-shape\">\r\n <span>03<\/span>\r\n <\/div>\r\n <div class=\"modern-timeline-content\">\r\n <div class=\"modern-timeline-title\">Berichtserstellung<\/div>\r\n <div class=\"modern-timeline-desc\">Detaillierter Compliance-Bericht mit umsetzbaren Empfehlungen und einer priorit\u00e4tsbasierten Umsetzungs-Roadmap.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"modern-timeline-step step4\">\r\n <div class=\"modern-timeline-shape\">\r\n <span>04<\/span>\r\n <\/div>\r\n <div class=\"modern-timeline-content\">\r\n <div class=\"modern-timeline-title\">Implementierung<\/div>\r\n <div class=\"modern-timeline-desc\">Kontinuierliche Unterst\u00fctzung bei Barrierefreiheit und Compliance.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Process Timeline Sonu -->\r\n\r\n <!-- \u00dcretim Zaman \u00c7izelgesi -->\r\n <div class=\"production-timeline\">\r\n <div class=\"timeline-line\"><\/div>\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-content\">\r\n <div class=\"timeline-title\">\r\n <div class=\"timeline-icon\"><i class=\"fas fa-search\" aria-label=\"Magnifying glass\"><\/i><\/div>\r\n <span>Initialanalyse & Scan<\/span>\r\n <\/div>\r\n <div class=\"timeline-description\">\r\n Automatisiertes Barrierefreiheits-Scanning mit branchen\u00fcblichen Tools zur Identifikation potenzieller Compliance-Probleme.\r\n <\/div>\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\" style=\"--progress-width: 25%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"timeline-dot\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-content\">\r\n <div class=\"timeline-title\">\r\n <div class=\"timeline-icon\"><i class=\"fa-solid fa-gear\" aria-label=\"Cog\"><\/i><\/div>\r\n <span>Manuelle Pr\u00fcfung<\/span>\r\n <\/div>\r\n <div class=\"timeline-description\">\r\n Umfassende manuelle Pr\u00fcfungen unter Verwendung unterst\u00fctzender Technologien wie Screenreader und Tastaturnavigation.\r\n <\/div>\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\" style=\"--progress-width: 50%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"timeline-dot\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-content\">\r\n <div class=\"timeline-title\">\r\n <div class=\"timeline-icon\"><i class=\"fas fa-chart-bar\" aria-label=\"chart bar\"><\/i><\/div>\r\n <span>Berichtserstellung<\/span>\r\n <\/div>\r\n <div class=\"timeline-description\">\r\n Detaillierter Compliance-Bericht mit umsetzbaren Empfehlungen und einem priorit\u00e4tsbasierten Umsetzungsfahrplan.\r\n <\/div>\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\" style=\"--progress-width: 75%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"timeline-dot\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-content\">\r\n <div class=\"timeline-title\">\r\n <div class=\"timeline-icon\"><i class=\"fas fa-rocket\" aria-label=\"Rocket\"><\/i><\/div>\r\n <span>Implementierung<\/span>\r\n <\/div>\r\n <div class=\"timeline-description\">\r\n Kontinuierliche Unterst\u00fctzung und Beratung bei der Umsetzung von Barrierefreiheitsverbesserungen sowie der Aufrechterhaltung der Compliance.\r\n <\/div>\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\" style=\"--progress-width: 100%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"timeline-dot\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n <!-- Etkile\u015fimli Kartlar -->\r\n <div class=\"interactive-cards\">\r\n <div class=\"interactive-card\">\r\n <div class=\"card-header\">\r\n <div class=\"card-icon-large\"><i class=\"fas fa-search\" aria-label=\"Magnifying glass\"><\/i><\/div>\r\n <h3 class=\"card-title-large\">Was wir bieten<\/h3>\r\n <\/div>\r\n <div class=\"card-content\">\r\n Umfassende Accessibility-Pr\u00fcfung und Compliance-L\u00f6sungen f\u00fcr Ihre Website, damit diese den deutschen und europ\u00e4ischen Barrierefreiheitsstandards entspricht.\r\n <\/div>\r\n <ul class=\"feature-list\">\r\n <li>Visuelle Barrierefreiheitspr\u00fcfung<\/li>\r\n <li>Technische Compliance-\u00dcberpr\u00fcfung<\/li>\r\n <li>Mobile Barrierefreiheitsbewertung<\/li>\r\n <li>Kompatibilit\u00e4t mit Screenreadern<\/li>\r\n <li>Tastaturnavigationstests<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"interactive-card\">\r\n <div class=\"card-header\">\r\n <div class=\"card-icon-large\"><i class=\"fa-solid fa-circle-check\" aria-label=\"Circle Check\"><\/i><\/div>\r\n <h3 class=\"card-title-large\">Wichtige Testpunkte<\/h3>\r\n <\/div>\r\n <div class=\"card-content\">\r\n Umfassende Bewertung der wesentlichen Barrierefreiheitskriterien, um die vollst\u00e4ndige Einhaltung internationaler Standards sicherzustellen.\r\n <\/div>\r\n <ul class=\"feature-list\">\r\n <li>Alternativtexte f\u00fcr alle Bilder<\/li>\r\n <li>Farbkontrastverh\u00e4ltnisse<\/li>\r\n <li>Tastaturnavigation<\/li>\r\n <li>Barrierefreiheit von Formularen<\/li>\r\n <li>Semantische HTML-Struktur<\/li>\r\n <li>Fokus-Indikatoren<\/li>\r\n <li>M\u00f6glichkeit zur Textvergr\u00f6\u00dferung<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"interactive-card\">\r\n <div class=\"card-header\">\r\n <div class=\"card-icon-large\"><i class=\"fas fa-gavel\" aria-label=\"Gavel\"><\/i><\/div>\r\n <h3 class=\"card-title-large\">Gesetzliche Anforderungen & Vorschriften 2025<\/h3>\r\n <\/div>\r\n <div class=\"card-content\">\r\n Bleiben Sie konform mit den neuesten europ\u00e4ischen und deutschen Barrierefreiheitsgesetzen und Standards, um rechtliche Sanktionen zu vermeiden.\r\n <\/div>\r\n <ul class=\"feature-list\">\r\n <li>WCAG 2.1 AA Konformit\u00e4t<\/li>\r\n <li>BITV 2.0 (Deutsche Standards)<\/li>\r\n <li>EU-Richtlinie zur Barrierefreiheit von Websites<\/li>\r\n <li>Barrierefreiheitsaktualisierungen 2025<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Yasal Uyumluluk B\u00f6l\u00fcm\u00fc -->\r\n <div class=\"legal-compliance\">\r\n <div class=\"legal-title\">\r\n <span><i class=\"fas fa-gavel\"><\/i><\/span>\r\n <span>Rechtliche Konformit\u00e4t & Aktualisierungen 2025<\/span>\r\n <\/div>\r\n <div class=\"legal-content\">\r\n <p>Stellen Sie sicher, dass Ihre Website alle gesetzlichen Anforderungen zur Barrierefreiheit in Deutschland und der Europ\u00e4ischen Union erf\u00fcllt. Nicht-Einhaltung kann zu erheblichen rechtlichen Sanktionen und dem Ausschluss von Nutzern mit Behinderungen f\u00fchren.<\/p>\r\n\r\n <div class=\"compliance-grid\">\r\n <div class=\"compliance-item fade-zoom-in\">\r\n <h4>WCAG 2.1 AA<\/h4>\r\n <p>Internationaler Barrierefreiheitsstandard<\/p>\r\n <\/div>\r\n <div class=\"compliance-item fade-zoom-in\">\r\n <h4>BITV 2.0<\/h4>\r\n <p>Deutsche Barrierefreiheitsverordnung<\/p>\r\n <\/div>\r\n <div class=\"compliance-item fade-zoom-in\">\r\n <h4>EU-Richtlinie<\/h4>\r\n <p>Europ\u00e4ische Anforderungen zur Barrierefreiheit<\/p>\r\n <\/div>\r\n <div class=\"compliance-item fade-zoom-in\">\r\n <h4>Aktualisierungen 2025<\/h4>\r\n <p>Neueste Compliance-Standards<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u0130statistikler B\u00f6l\u00fcm\u00fc -->\r\n <section class=\"statistics-section\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <h2>Erfolg unserer Barrierefreiheitsl\u00f6sungen<\/h2>\r\n <p>Mit jahrelanger Erfahrung und Expertise haben wir tausende Projekte erfolgreich abgeschlossen. Hier sind unsere Erfolge in Zahlen:<\/p>\r\n <\/div>\r\n\r\n <div class=\"statistics-grid\">\r\n\r\n <div class=\"stat-card fade-zoom-in\">\r\n <div class=\"stat-number\" data-target=\"98\">0<\/div>\r\n <div class=\"stat-symbol\">%<\/div>\r\n <div class=\"stat-label\">Kundenzufriedenheit<\/div>\r\n <div class=\"stat-description\">Unsere Kundenzufriedenheitsrate<\/div>\r\n <\/div>\r\n\r\n <div class=\"stat-card fade-zoom-in\">\r\n <div class=\"stat-number\" data-target=\"96\">0<\/div>\r\n <div class=\"stat-symbol\">%<\/div>\r\n <div class=\"stat-label\">Termintreue<\/div>\r\n <div class=\"stat-description\">Prozentsatz der p\u00fcnktlich abgeschlossenen Projekte<\/div>\r\n <\/div>\r\n\r\n <div class=\"stat-card fade-zoom-in\">\r\n <div class=\"stat-number\" data-target=\"99\">0<\/div>\r\n <div class=\"stat-symbol\">%<\/div>\r\n <div class=\"stat-label\">Erfolgreiche Probleml\u00f6sung<\/div>\r\n <div class=\"stat-description\">Erfolgreich behobene Barrierefreiheitsprobleme<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n\r\n <!-- Feather Icons i\u00e7in CDN -->\r\n <script src=\"https:\/\/unpkg.com\/feather-icons\"><\/script>\r\n <script>feather.replace();<\/script>\r\n\r\n <script>\r\n \/\/ Scroll-tetiklenen animasyonlar\r\n const observerOptions = {\r\n threshold: 0.3,\r\n rootMargin: '0px 0px -100px 0px'\r\n };\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const timelineContent = entry.target.querySelector('.timeline-content');\r\n const timelineDot = entry.target.querySelector('.timeline-dot');\r\n const progressFill = entry.target.querySelector('.progress-fill');\r\n const interactiveCard = entry.target;\r\n\r\n if (timelineContent) {\r\n timelineContent.classList.add('animate');\r\n }\r\n if (timelineDot) {\r\n timelineDot.classList.add('animate');\r\n }\r\n if (progressFill) {\r\n progressFill.classList.add('animate');\r\n }\r\n if (interactiveCard.classList.contains('interactive-card')) {\r\n interactiveCard.classList.add('animate');\r\n }\r\n \/\/ Fade-zoom kartlar i\u00e7in\r\n if (entry.target.classList.contains('fade-zoom-in')) {\r\n entry.target.classList.add('animate');\r\n }\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n \/\/ Zaman \u00e7izelgesi \u00f6\u011feleri ve etkile\u015fimli kartlar\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const timelineItems = document.querySelectorAll('.timeline-item');\r\n const interactiveCards = document.querySelectorAll('.interactive-card');\r\n const fadeZoomCards = document.querySelectorAll('.fade-zoom-in');\r\n\r\n timelineItems.forEach(item => {\r\n observer.observe(item);\r\n });\r\n\r\n interactiveCards.forEach((card, index) => {\r\n observer.observe(card);\r\n \/\/ \u00d6\u011fe indeksini eklemek i\u00e7in gecikmeli animasyon\r\n const listItems = card.querySelectorAll('.feature-list li');\r\n listItems.forEach((item, itemIndex) => {\r\n item.style.setProperty('--item-index', itemIndex);\r\n });\r\n });\r\n\r\n \/\/ Fade-zoom animasyonlu kartlar\r\n fadeZoomCards.forEach(card => {\r\n observer.observe(card);\r\n });\r\n\r\n \/\/ \u0130statistik say\u0131lar\u0131n\u0131n sayd\u0131r\u0131lmas\u0131\r\n const statNumbers = document.querySelectorAll('.stat-number');\r\n\r\n const animateCounter = (element) => {\r\n const target = parseInt(element.getAttribute('data-target'));\r\n const duration = 2000; \/\/ 2 seconds\r\n const step = target \/ (duration \/ 16); \/\/ 60fps\r\n let current = 0;\r\n\r\n const timer = setInterval(() => {\r\n current += step;\r\n if (current >= target) {\r\n current = target;\r\n clearInterval(timer);\r\n }\r\n element.textContent = Math.floor(current);\r\n }, 16);\r\n };\r\n\r\n \/\/ \u0130statistik b\u00f6l\u00fcm\u00fcn\u00fcn g\u00f6zlemlenmesi\r\n const statsObserver = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const statNumbers = entry.target.querySelectorAll('.stat-number');\r\n statNumbers.forEach((number, index) => {\r\n setTimeout(() => {\r\n animateCounter(number);\r\n }, index * 200); \/\/ Stagger animation\r\n });\r\n statsObserver.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.5 });\r\n\r\n const statisticsSection = document.querySelector('.statistics-section');\r\n if (statisticsSection) {\r\n statsObserver.observe(statisticsSection);\r\n }\r\n\r\n \/\/ FAQ Toggle Functionality\r\n const faqItems = document.querySelectorAll('.faq-item');\r\n faqItems.forEach(item => {\r\n const question = item.querySelector('.faq-question');\r\n question.addEventListener('click', () => {\r\n const isActive = item.classList.contains('active');\r\n\r\n \/\/ Close all other items\r\n faqItems.forEach(otherItem => {\r\n otherItem.classList.remove('active');\r\n });\r\n\r\n \/\/ Toggle current item\r\n if (!isActive) {\r\n item.classList.add('active');\r\n }\r\n });\r\n });\r\n });\r\n <\/script>\r\n\r\n <!-- Legal Disclaimer -->\r\n <div class=\"disclaimer\">\r\n <div class=\"disclaimer-content\">\r\n <div class=\"disclaimer-icon\">\r\n <i class=\"fa-solid fa-triangle-exclamation\" aria-label=\"danger\"><\/i>\r\n <\/div>\r\n <h4>Rechtlicher Hinweis<\/h4>\r\n <p>\r\n Die auf dieser Website bereitgestellten Informationen dienen ausschlie\u00dflich allgemeinen Informationszwecken. Obwohl wir uns bem\u00fchen, genaue und aktuelle Informationen zu Barrierefreiheitsanforderungen und gesetzlicher Konformit\u00e4t bereitzustellen, \u00fcbernehmen wir keine rechtliche Verantwortung oder Haftung f\u00fcr die Richtigkeit, Vollst\u00e4ndigkeit oder Eignung dieser Informationen f\u00fcr bestimmte Zwecke.\r\n <\/p>\r\n <p>\r\n Wir empfehlen dringend, sich f\u00fcr konkrete rechtliche Fragen zu Barrierefreiheit, gesetzlichen Anforderungen und regulatorischen Verpflichtungen an qualifizierte Rechtsberater zu wenden. Unsere Dienstleistungen werden \u201ewie besehen\u201c ohne jegliche ausdr\u00fcckliche oder stillschweigende Gew\u00e4hrleistung bereitgestellt.\r\n <\/p>\r\n <p>\r\n Durch die Nutzung unserer Dienstleistungen erkennen Sie an, dass DARKSN nicht f\u00fcr rechtliche Konsequenzen, Bu\u00dfgelder oder Sch\u00e4den haftet, die sich aus der Nichteinhaltung von Barrierefreiheitsgesetzen oder -vorschriften ergeben k\u00f6nnen.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n<\/body>\r\n\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Accessibility Solutions – Darksn Comprehensive Accessibility Solutions & Digital Inclusion Services With extensive experience in accessibility development, we leverage cutting-edge technologies to create customized, inclusive digital experiences using a comprehensive approach. Contact Us Comprehensive Accessibility Services Explore our complete range of accessibility solutions designed to ensure your digital presence meets all legal requirements. Digital Accessibility Comprehensive digital accessibility solutions for websites, mobile apps, and digital platforms. We ensure your digital products are accessible to all users, including those with disabilities. WCAG 2.1 AA Mobile Accessibility Screen Reader View Accessibility \u2192 Accessibility Services Professional accessibility testing and audit services using industry-standard tools and methodologies. Comprehensive evaluation to ensure WCAG 2.1 AA compliance and identify accessibility barriers. Automated Testing Manual Verification Compliance Reports View Services \u2192 Testing Process Systematic accessibility audit process following international standards. Our comprehensive audit methodology ensures thorough evaluation and detailed reporting of accessibility compliance. Systematic Review Detailed Reports Action Plans View Process \u2192 Testing Criteria & Standards Comprehensive testing methodologies following international accessibility standards. Our testing covers all WCAG 2.1 AA criteria with detailed reporting and actionable recommendations. WCAG 2.1\/2.2 EU Standards Global Compliance View Standards \u2192 Legal Requirements 2025 Stay ahead of 2025 accessibility regulations with our expert guidance on Barrierefreiheitsst\u00e4rkungsgesetz (BFSG) and upcoming legal requirements. Prepare your organization for compliance deadlines. BFSG 2025 Deadline Preparation Risk Assessment View Requirements \u2192 Accessibility Packages Choose from our comprehensive accessibility packages designed for businesses of all sizes. From basic compliance to enterprise solutions, we offer scalable accessibility services. Basic Package Professional Enterprise View Packages \u2192 Website Accessibility Audit Comprehensive accessibility testing and compliance solutions for German and European markets. Ensure your website meets all legal requirements and provides equal access for all users. 01 Initial Analysis & Scan Automated accessibility scanning using industry-standard tools to identify potential compliance issues. 02 Manual Testing Comprehensive manual testing with assistive technologies including screen readers and keyboard navigation. 03 Report Generation Detailed compliance report with actionable recommendations and priority-based implementation roadmap. 04 Implementation Support Ongoing support and guidance for implementing accessibility improvements and maintaining compliance. Initial Analysis & Scan Automated accessibility scanning using industry-standard tools to identify potential compliance issues. Manual Testing Comprehensive manual testing with assistive technologies including screen readers and keyboard navigation. Report Generation Detailed compliance report with actionable recommendations and priority-based implementation roadmap. Implementation Support Ongoing support and guidance for implementing accessibility improvements and maintaining compliance. What We Offer Complete accessibility audit and compliance solutions for your website, ensuring it meets German and European accessibility standards. Visual accessibility testing Technical compliance verification Mobile accessibility assessment Screen reader compatibility Keyboard navigation testing Key Testing Points Comprehensive evaluation of essential accessibility criteria to ensure full compliance with international standards. Alt text for all images Color contrast ratios Keyboard navigation Form accessibility Semantic HTML structure Focus indicators Text resizing capabilities Legal Requirements & 2025 Regulations Stay compliant with the latest European and German accessibility laws and standards to avoid legal penalties. WCAG 2.1 AA compliance BITV 2.0 German standards EU Web Accessibility Directive 2025 accessibility updates Legal Compliance & 2025 Updates Ensure your website meets all legal requirements for accessibility in Germany and the European Union. Non-compliance can result in significant legal penalties and exclusion of users with disabilities. WCAG 2.1 AA International accessibility standard BITV 2.0 German accessibility regulation EU Directive European accessibility requirements 2025 Updates Latest compliance standards Success in Our Accessibility Solutions With years of experience and expertise, we have successfully completed thousands of projects. Here are our achievements in numbers: 0 % Customer Satisfaction Our customer satisfaction rate 0 % On-Time Delivery Percentage of projects completed on time 0 % Issue Resolution Success Successfully resolved accessibility issues Legal Disclaimer The information provided on this website is for general informational purposes only. While we strive to provide accurate and up-to-date information regarding accessibility compliance and barrier-free technology requirements, we do not accept any legal responsibility or liability for the accuracy, completeness, or suitability of this information for any specific purpose. We strongly recommend consulting with qualified legal professionals for specific legal advice regarding accessibility compliance, barrier law requirements, and regulatory obligations. Our services are provided “as is” without any warranties, express or implied. By using our services, you acknowledge that DARKSN is not responsible for any legal consequences, penalties, or damages that may arise from non-compliance with accessibility laws or regulations.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"coauthors":[35],"class_list":["post-29707","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/pages\/29707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/comments?post=29707"}],"version-history":[{"count":64,"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/pages\/29707\/revisions"}],"predecessor-version":[{"id":30264,"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/pages\/29707\/revisions\/30264"}],"wp:attachment":[{"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/media?parent=29707"}],"wp:term":[{"taxonomy":"author","embeddable":true,"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/coauthors?post=29707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}