{"id":29707,"date":"2025-07-15T08:08:29","date_gmt":"2025-07-15T08:08:29","guid":{"rendered":"https:\/\/darksn.de\/?page_id=29707"},"modified":"2026-07-10T08:30:50","modified_gmt":"2026-07-10T08:30:50","slug":"barrierefreiheit-services","status":"publish","type":"page","link":"https:\/\/darksn.de\/barrierefreiheit-services\/","title":{"rendered":"Accessibility Services"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"29707\" class=\"elementor elementor-29707\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c6733cd e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"c6733cd\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-f130d32 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-child\" data-id=\"f130d32\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d90562 elementor-widget elementor-widget-html\" data-id=\"8d90562\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>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\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\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\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\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\r\n        .modern-timeline-shape span {\r\n            position: absolute;\r\n            left: -140px;\r\n            right: 0;\r\n            top: -62px;\r\n            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\r\n        .modern-timeline-shape::before {\r\n            content: '';\r\n            position: absolute;\r\n            left: -65px;\r\n            top: -28px;\r\n            width: 90px;\r\n            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\r\n        .step1 .modern-timeline-shape::before {\r\n            background: #F93825;\r\n            opacity: 0.85;\r\n        }\r\n\r\n        .step2 .modern-timeline-shape::before {\r\n            background: #b6d7a8;\r\n            opacity: 0.85;\r\n        }\r\n\r\n        .step3 .modern-timeline-shape::before {\r\n            background: #6ee7b7;\r\n            opacity: 0.85;\r\n        }\r\n\r\n        .step4 .modern-timeline-shape::before {\r\n            background: #b4a7d6;\r\n            opacity: 0.85;\r\n        }\r\n\r\n        .modern-timeline-content {\r\n            text-align: center;\r\n        }\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\r\n        .modern-timeline-desc {\r\n            font-size: 0.98rem;\r\n            color: #555;\r\n            opacity: 0.95;\r\n        }\r\n\r\n        @media (max-width: 900px) {\r\n            .modern-timeline-steps {\r\n                gap: 18px;\r\n            }\r\n\r\n            .modern-timeline-step {\r\n                width: 120px;\r\n                padding: 18px 6px 14px 6px;\r\n            }\r\n\r\n            .modern-timeline-shape {\r\n                width: 60px;\r\n                height: 60px;\r\n            }\r\n\r\n            .modern-timeline-shape span {\r\n                font-size: 1.1rem;\r\n            }\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\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\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\r\n            .modern-timeline-shape span {\r\n                position: absolute;\r\n                left: 0;\r\n                right: 0;\r\n                top: 0;\r\n                bottom: 0;\r\n                color: #fff;\r\n                font-size: 1.2rem;\r\n            }\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            <h1 style=\"color:white\">Comprehensive Accessibility Solutions & Digital Inclusion Services<\/h1>\r\n\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>Comprehensive Accessibility Services<\/h2>\r\n                <p>Explore our complete range of accessibility solutions designed to ensure your digital presence meets\r\n                    all legal requirements.<\/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>Digital Accessibility<\/h3>\r\n                    <p>Comprehensive digital accessibility solutions for websites, mobile apps, and digital platforms.\r\n                        We ensure your digital products are accessible to all users, including those with disabilities.\r\n                    <\/p>\r\n                    <div class=\"nav-card-features\">\r\n                        <span>WCAG 2.1 AA<\/span>\r\n                        <span>Mobile Accessibility<\/span>\r\n                        <span>Screen Reader<\/span>\r\n                    <\/div>\r\n                    <a href=\"https:\/\/darksn.de\/digital-accessibility\/\" class=\"nav-card-link\">View Accessibility \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>Accessibility Services<\/h3>\r\n                    <p>Professional accessibility testing and audit services using industry-standard tools and\r\n                        methodologies. Comprehensive evaluation to ensure WCAG 2.1 AA compliance and identify\r\n                        accessibility barriers.<\/p>\r\n                    <div class=\"nav-card-features\">\r\n                        <span>Automated Testing<\/span>\r\n                        <span>Manual Verification<\/span>\r\n                        <span>Compliance Reports<\/span>\r\n                    <\/div>\r\n                    <a href=\"https:\/\/darksn.de\/our-accessibility-services\/\" class=\"nav-card-link\">View Services \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>Testing Process<\/h3>\r\n                    <p>Systematic accessibility audit process following international standards. Our comprehensive audit\r\n                        methodology ensures thorough evaluation and detailed reporting of accessibility compliance.<\/p>\r\n                    <div class=\"nav-card-features\">\r\n                        <span>Systematic Review<\/span>\r\n                        <span>Detailed Reports<\/span>\r\n                        <span>Action Plans<\/span>\r\n                    <\/div>\r\n                    <a href=\"https:\/\/darksn.de\/testing-process\/\" class=\"nav-card-link\">View Process \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>Testing Criteria & Standards<\/h3>\r\n                    <p>Comprehensive testing methodologies following international accessibility standards. Our testing\r\n                        covers all WCAG 2.1 AA criteria with detailed reporting and actionable recommendations.<\/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>Global Compliance<\/span>\r\n                    <\/div>\r\n                    <a href=\"https:\/\/darksn.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>Legal Requirements 2025<\/h3>\r\n                    <p>Stay ahead of 2025 accessibility regulations with our expert guidance on\r\n                        Barrierefreiheitsst\u00e4rkungsgesetz (BFSG) and upcoming legal requirements. Prepare your\r\n                        organization for compliance deadlines.<\/p>\r\n                    <div class=\"nav-card-features\">\r\n                        <span>BFSG 2025<\/span>\r\n                        <span>Deadline Preparation<\/span>\r\n                        <span>Risk Assessment<\/span>\r\n                    <\/div>\r\n                    <a href=\"https:\/\/darksn.de\/legal-requirements-2025\/\" class=\"nav-card-link\">View Requirements \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>Accessibility Packages<\/h3>\r\n                    <p>Choose from our comprehensive accessibility packages designed for businesses of all sizes. From\r\n                        basic compliance to enterprise solutions, we offer scalable accessibility services.<\/p>\r\n                    <div class=\"nav-card-features\">\r\n                        <span>Basic Package<\/span>\r\n                        <span>Professional<\/span>\r\n                        <span>Enterprise<\/span>\r\n                    <\/div>\r\n                    <a href=\"https:\/\/darksn.de\/accessibility-package\/\" class=\"nav-card-link\">View Packages \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 Accessibility Audit<\/h2>\r\n                <p>Comprehensive accessibility testing and compliance solutions for German and European markets. Ensure\r\n                    your website meets all legal requirements and provides equal access for all users.<\/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\">Initial Analysis & Scan<\/div>\r\n                            <div class=\"modern-timeline-desc\">Automated accessibility scanning using industry-standard\r\n                                tools to identify potential compliance issues.<\/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\">Manual Testing<\/div>\r\n                            <div class=\"modern-timeline-desc\">Comprehensive manual testing with assistive technologies\r\n                                including screen readers and keyboard navigation.<\/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\">Report Generation<\/div>\r\n                            <div class=\"modern-timeline-desc\">Detailed compliance report with actionable recommendations\r\n                                and priority-based implementation 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\">Implementation Support<\/div>\r\n                            <div class=\"modern-timeline-desc\">Ongoing support and guidance for implementing\r\n                                accessibility improvements and maintaining 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>Initial Analysis & Scan<\/span>\r\n                        <\/div>\r\n                        <div class=\"timeline-description\">\r\n                            Automated accessibility scanning using industry-standard tools to identify potential\r\n                            compliance issues.\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>Manual Testing<\/span>\r\n                        <\/div>\r\n                        <div class=\"timeline-description\">\r\n                            Comprehensive manual testing with assistive technologies including screen readers and\r\n                            keyboard navigation.\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>Report Generation<\/span>\r\n                        <\/div>\r\n                        <div class=\"timeline-description\">\r\n                            Detailed compliance report with actionable recommendations and priority-based implementation\r\n                            roadmap.\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>Implementation Support<\/span>\r\n                        <\/div>\r\n                        <div class=\"timeline-description\">\r\n                            Ongoing support and guidance for implementing accessibility improvements and maintaining\r\n                            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\">What We Offer<\/h3>\r\n                    <\/div>\r\n                    <div class=\"card-content\">\r\n                        Complete accessibility audit and compliance solutions for your website, ensuring it meets German\r\n                        and European accessibility standards.\r\n                    <\/div>\r\n                    <ul class=\"feature-list\">\r\n                        <li>Visual accessibility testing<\/li>\r\n                        <li>Technical compliance verification<\/li>\r\n                        <li>Mobile accessibility assessment<\/li>\r\n                        <li>Screen reader compatibility<\/li>\r\n                        <li>Keyboard navigation testing<\/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>\r\n                        <\/div>\r\n                        <h3 class=\"card-title-large\">Key Testing Points<\/h3>\r\n                    <\/div>\r\n                    <div class=\"card-content\">\r\n                        Comprehensive evaluation of essential accessibility criteria to ensure full compliance with\r\n                        international standards.\r\n                    <\/div>\r\n                    <ul class=\"feature-list\">\r\n                        <li>Alt text for all images<\/li>\r\n                        <li>Color contrast ratios<\/li>\r\n                        <li>Keyboard navigation<\/li>\r\n                        <li>Form accessibility<\/li>\r\n                        <li>Semantic HTML structure<\/li>\r\n                        <li>Focus indicators<\/li>\r\n                        <li>Text resizing capabilities<\/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\">Legal Requirements & 2025 Regulations<\/h3>\r\n                    <\/div>\r\n                    <div class=\"card-content\">\r\n                        Stay compliant with the latest European and German accessibility laws and standards to avoid\r\n                        legal penalties.\r\n                    <\/div>\r\n                    <ul class=\"feature-list\">\r\n                        <li>WCAG 2.1 AA compliance<\/li>\r\n                        <li>BITV 2.0 German standards<\/li>\r\n                        <li>EU Web Accessibility Directive<\/li>\r\n                        <li>2025 accessibility updates<\/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>Legal Compliance & 2025 Updates<\/span>\r\n                <\/div>\r\n                <div class=\"legal-content\">\r\n                    <p>Ensure your website meets all legal requirements for accessibility in Germany and the European\r\n                        Union. Non-compliance can result in significant legal penalties and exclusion of users with\r\n                        disabilities.<\/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>International accessibility standard<\/p>\r\n                        <\/div>\r\n                        <div class=\"compliance-item fade-zoom-in\">\r\n                            <h4>BITV 2.0<\/h4>\r\n                            <p>German accessibility regulation<\/p>\r\n                        <\/div>\r\n                        <div class=\"compliance-item fade-zoom-in\">\r\n                            <h4>EU Directive<\/h4>\r\n                            <p>European accessibility requirements<\/p>\r\n                        <\/div>\r\n                        <div class=\"compliance-item fade-zoom-in\">\r\n                            <h4>2025 Updates<\/h4>\r\n                            <p>Latest 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>Success in Our Accessibility Solutions<\/h2>\r\n                <p>With years of experience and expertise, we have successfully completed thousands of projects. Here\r\n                    are our achievements in numbers:<\/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\">Customer Satisfaction<\/div>\r\n                    <div class=\"stat-description\">Our customer satisfaction rate<\/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\">On-Time Delivery<\/div>\r\n                    <div class=\"stat-description\">Percentage of projects completed on time<\/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\">Issue Resolution Success<\/div>\r\n                    <div class=\"stat-description\">Successfully resolved accessibility issues<\/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>Legal Disclaimer<\/h4>\r\n            <p>\r\n                The information provided on this website is for general informational purposes only. While we strive\r\n                to provide accurate and up-to-date information regarding accessibility compliance and barrier-free\r\n                technology requirements, we do not accept any legal responsibility or liability for the accuracy,\r\n                completeness, or suitability of this information for any specific purpose.\r\n            <\/p>\r\n            <p>\r\n                We strongly recommend consulting with qualified legal professionals for specific legal advice\r\n                regarding accessibility compliance, barrier law requirements, and regulatory obligations. Our\r\n                services are provided \"as is\" without any warranties, express or implied.\r\n            <\/p>\r\n            <p>\r\n                By using our services, you acknowledge that DARKSN is not responsible for any legal consequences,\r\n                penalties, or damages that may arise from non-compliance with accessibility laws or regulations.\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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Accessibility Solutions &#8211; Darksn Comprehensive Accessibility Solutions &#038; Digital Inclusion Services 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 &#038; 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 &#038; 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 &#038; 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 &#038; 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 &#038; 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 &#8220;as is&#8221; 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>\n","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\/wp-json\/wp\/v2\/pages\/29707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/darksn.de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/darksn.de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/darksn.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/darksn.de\/wp-json\/wp\/v2\/comments?post=29707"}],"version-history":[{"count":67,"href":"https:\/\/darksn.de\/wp-json\/wp\/v2\/pages\/29707\/revisions"}],"predecessor-version":[{"id":34081,"href":"https:\/\/darksn.de\/wp-json\/wp\/v2\/pages\/29707\/revisions\/34081"}],"wp:attachment":[{"href":"https:\/\/darksn.de\/wp-json\/wp\/v2\/media?parent=29707"}],"wp:term":[{"taxonomy":"author","embeddable":true,"href":"https:\/\/darksn.de\/wp-json\/wp\/v2\/coauthors?post=29707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}