{"id":29774,"date":"2025-07-15T09:12:46","date_gmt":"2025-07-15T09:12:46","guid":{"rendered":"https:\/\/darksn.de\/?page_id=29774"},"modified":"2025-07-23T09:47:11","modified_gmt":"2025-07-23T09:47:11","slug":"testing-process","status":"publish","type":"page","link":"https:\/\/darksn.de\/de\/testing-process\/","title":{"rendered":"Pr\u00fcfablauf"},"content":{"rendered":"
\n\t\t\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 Work Process - 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 background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f4 100%);\r\n color: #333;\r\n line-height: 1.6;\r\n scroll-behavior: smooth;\r\n }\r\n\r\n \/* Ana B\u00f6l\u00fcm *\/\r\n .hero {\r\n background-image: url(https:\/\/darksn.de\/wp-content\/uploads\/2025\/07\/aerial-view-business-data-analysis-graph-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 \/* Ana \u0130\u00e7erik B\u00f6l\u00fcmleri *\/\r\n .main-content {\r\n background: #ffffff;\r\n margin-top: -50px;\r\n position: relative;\r\n z-index: 3;\r\n box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n \/* B\u00f6l\u00fcm Ba\u015fl\u0131klar\u0131 *\/\r\n .section-header {\r\n text-align: center;\r\n padding: 80px 20px 60px 20px;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .section-header h2 {\r\n font-size: 2.8rem;\r\n font-weight: 800;\r\n color: #F93825;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .section-header p {\r\n font-size: 1.3rem;\r\n color: #6c757d;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n line-height: 1.7;\r\n }\r\n\r\n \/* S\u00fcre\u00e7 Giri\u015f B\u00f6l\u00fcm\u00fc *\/\r\n .process-intro-section {\r\n padding: 80px 20px 60px 20px;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .process-intro-container {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 60px;\r\n align-items: center;\r\n }\r\n\r\n .process-intro-content h2 {\r\n font-size: 2.8rem;\r\n font-weight: 800;\r\n color: #F93825;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .process-intro-content p {\r\n font-size: 1.3rem;\r\n color: #6c757d;\r\n line-height: 1.7;\r\n margin-bottom: 0;\r\n }\r\n\r\n .process-intro-image {\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);\r\n }\r\n\r\n .process-intro-image img {\r\n width: 100%;\r\n height: 750px;\r\n object-fit: cover;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .process-intro-image:hover img {\r\n transform: scale(1.05);\r\n }\r\n\r\n \/* Modern Step Process Presentation - G\u00f6rseldeki Tasar\u0131m *\/\r\n .process-overview {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 20px 0px 20px;\r\n }\r\n\r\n .step-process-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-start;\r\n gap: 40px;\r\n margin: 60px 0;\r\n position: relative;\r\n padding: 40px 0;\r\n }\r\n\r\n \/* Timeline \u00e7izgisi *\/\r\n .step-process-container::before {\r\n content: '';\r\n position: absolute;\r\n top: 155px;\r\n left: 50px;\r\n right: 50px;\r\n height: 2px;\r\n background: repeating-linear-gradient(\r\n to right,\r\n #ccc 0,\r\n #ccc 10px,\r\n transparent 10px,\r\n transparent 20px\r\n );\r\n z-index: 1;\r\n }\r\n\r\n .step-process {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n position: relative;\r\n z-index: 2;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .step-process:hover {\r\n transform: translateY(-5px);\r\n }\r\n\r\n .step-icon {\r\n position: relative;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .icon-background {\r\n width: 80px;\r\n height: 80px;\r\n background: var(--icon-color);\r\n border-radius: 50% 50% 50% 0;\r\n transform: rotate(-45deg);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n }\r\n\r\n .icon-background::before {\r\n content: '';\r\n position: absolute;\r\n top: 8px;\r\n left: 8px;\r\n width: calc(100% - 16px);\r\n height: calc(100% - 16px);\r\n background: white;\r\n border-radius: 50% 50% 50% 0;\r\n z-index: 1;\r\n }\r\n\r\n .icon-background i {\r\n color: #333;\r\n font-size: 24px;\r\n transform: rotate(45deg);\r\n z-index: 2;\r\n position: relative;\r\n }\r\n\r\n \/* Dikey ba\u011flant\u0131 \u00e7izgisi *\/\r\n .step-process::after {\r\n content: '';\r\n position: absolute;\r\n top: 90px;\r\n left: 50%;\r\n width: 2px;\r\n height: 30px;\r\n background: var(--icon-color);\r\n transform: translateX(-50%);\r\n }\r\n\r\n \/* Timeline noktalar\u0131 *\/\r\n .step-process::before {\r\n content: '';\r\n position: absolute;\r\n top: 110px;\r\n left: 50%;\r\n width: 12px;\r\n height: 12px;\r\n background: #ff4444;\r\n border-radius: 50%;\r\n transform: translateX(-50%);\r\n z-index: 3;\r\n }\r\n\r\n .step-process:nth-child(1) {\r\n --icon-color: #ff6b35;\r\n }\r\n\r\n .step-process:nth-child(2) {\r\n --icon-color: #ffd700;\r\n }\r\n\r\n .step-process:nth-child(3) {\r\n --icon-color: #ff8c00;\r\n }\r\n\r\n .step-process:nth-child(4) {\r\n --icon-color: #ff69b4;\r\n }\r\n\r\n .step-process:nth-child(5) {\r\n --icon-color: #9370db;\r\n }\r\n\r\n .step-content {\r\n text-align: center;\r\n max-width: 200px;\r\n margin-top: 15px;\r\n }\r\n\r\n .step-content h3 {\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n color: var(--icon-color);\r\n margin-bottom: 8px;\r\n }\r\n\r\n .step-content p {\r\n font-size: 0.9rem;\r\n color: #666;\r\n line-height: 1.4;\r\n margin: 0;\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 768px) {\r\n .step-process-container {\r\n flex-direction: column;\r\n gap: 40px;\r\n padding: 20px 0;\r\n }\r\n \r\n \/* Mobilde dikey timeline *\/\r\n .step-process-container::before {\r\n content: '';\r\n position: absolute;\r\n top: 40px;\r\n bottom: 40px;\r\n left: 50%;\r\n width: 2px;\r\n background: repeating-linear-gradient(\r\n to bottom,\r\n #ccc 0,\r\n #ccc 10px,\r\n transparent 10px,\r\n transparent 20px\r\n );\r\n transform: translateX(-50%);\r\n }\r\n \r\n .step-process {\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 20px;\r\n width: 100%;\r\n max-width: 400px;\r\n }\r\n \r\n .step-icon {\r\n margin-bottom: 0;\r\n order: 1;\r\n }\r\n \r\n .step-content {\r\n order: 2;\r\n text-align: left;\r\n margin-top: 0;\r\n flex: 1;\r\n }\r\n \r\n .step-content h3 {\r\n font-size: 1.1rem;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .step-content p {\r\n font-size: 0.85rem;\r\n }\r\n \r\n .icon-background {\r\n width: 60px;\r\n height: 60px;\r\n }\r\n \r\n .icon-background i {\r\n font-size: 18px;\r\n }\r\n \r\n \/* Mobilde dikey ba\u011flant\u0131 \u00e7izgisi *\/\r\n .step-process::after {\r\n content: '';\r\n position: absolute;\r\n top: 30px;\r\n left: 30px;\r\n width: 2px;\r\n height: 20px;\r\n background: var(--icon-color);\r\n transform: rotate(90deg);\r\n }\r\n \r\n \/* Mobilde timeline noktalar\u0131 *\/\r\n .step-process::before {\r\n content: '';\r\n position: absolute;\r\n top: 30px;\r\n left: 30px;\r\n width: 10px;\r\n height: 10px;\r\n background: #ff4444;\r\n border-radius: 50%;\r\n transform: translateX(-4px);\r\n z-index: 3;\r\n }\r\n }\r\n\r\n \/* Detayl\u0131 Section'lar - YARATICI TASARIM *\/\r\n .detail-sections {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n position: relative;\r\n }\r\n\r\n\r\n .detail-section {\r\n margin-bottom: 100px;\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n min-height: 300px;\r\n }\r\n\r\n .detail-section:nth-child(odd) {\r\n flex-direction: row;\r\n }\r\n\r\n .detail-section:nth-child(even) {\r\n flex-direction: row-reverse;\r\n }\r\n\r\n .section-timeline {\r\n position: relative;\r\n width: 200px;\r\n height: 200px;\r\n flex-shrink: 0;\r\n z-index: 10;\r\n }\r\n\r\n .timeline-circle {\r\n width: 80px;\r\n height: 80px;\r\n background: linear-gradient(135deg, #F93825, #ff6b5b);\r\n border-radius: 50%;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 24px;\r\n color: white;\r\n box-shadow: 0 0 30px rgba(248, 56, 37, 0.6);\r\n animation: pulse 2s infinite;\r\n z-index: 3;\r\n }\r\n\r\n .timeline-circle::before {\r\n content: '';\r\n position: absolute;\r\n width: 120px;\r\n height: 120px;\r\n border: 3px solid rgba(248, 56, 37, 0.3);\r\n border-radius: 50%;\r\n animation: rotate 10s linear infinite;\r\n }\r\n\r\n .timeline-circle::after {\r\n content: '';\r\n position: absolute;\r\n width: 160px;\r\n height: 160px;\r\n border: 2px dashed rgba(248, 56, 37, 0.2);\r\n border-radius: 50%;\r\n animation: rotate 15s linear infinite reverse;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { transform: translate(-50%, -50%) scale(1); }\r\n 50% { transform: translate(-50%, -50%) scale(1.1); }\r\n }\r\n\r\n @keyframes rotate {\r\n from { transform: rotate(0deg); }\r\n to { transform: rotate(360deg); }\r\n }\r\n\r\n .section-content-wrapper {\r\n flex: 1;\r\n background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,249,250,0.9));\r\n backdrop-filter: blur(20px);\r\n border-radius: 25px;\r\n padding: 40px;\r\n margin: 0 30px;\r\n position: relative;\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.1);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n overflow: hidden;\r\n }\r\n\r\n .section-content-wrapper::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, #F93825, #ff6b5b, #F93825);\r\n background-size: 200% 100%;\r\n animation: gradientShift 3s ease-in-out infinite;\r\n }\r\n\r\n .section-content-wrapper::after {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n animation: float 6s ease-in-out infinite;\r\n }\r\n\r\n @keyframes float {\r\n 0%, 100% { transform: translate(0, 0) rotate(0deg); }\r\n 33% { transform: translate(30px, -30px) rotate(120deg); }\r\n 66% { transform: translate(-20px, 20px) rotate(240deg); }\r\n }\r\n\r\n .section-header-inline {\r\n display: flex;\r\n align-items: center;\r\n gap: 25px;\r\n margin-bottom: 30px;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .section-icon {\r\n width: 60px;\r\n height: 60px;\r\n background: linear-gradient(135deg, #F93825, #ff6b5b);\r\n border-radius: 15px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 24px;\r\n color: white;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .section-icon::before {\r\n content: '';\r\n position: absolute;\r\n top: -100%;\r\n left: -100%;\r\n width: 300%;\r\n height: 300%;\r\n background: linear-gradient(45deg, transparent, rgba(255,255,255,0.4), transparent);\r\n transform: rotate(45deg);\r\n animation: shimmer 3s infinite;\r\n }\r\n\r\n @keyframes shimmer {\r\n 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }\r\n 100% { transform: translateX(100%) translateY(100%) rotate(45deg); }\r\n }\r\n\r\n .section-title {\r\n font-size: 2.5rem;\r\n font-weight: 900;\r\n background: linear-gradient(135deg, #2c3e50, #F93825, #34495e);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n margin: 0;\r\n position: relative;\r\n }\r\n\r\n .section-title::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -8px;\r\n left: 0;\r\n width: 50px;\r\n height: 3px;\r\n background: linear-gradient(90deg, #F93825, #ff6b5b);\r\n border-radius: 2px;\r\n }\r\n\r\n .section-subtitle {\r\n color: #6c757d;\r\n font-size: 1.2rem;\r\n margin-top: 10px;\r\n font-weight: 500;\r\n }\r\n\r\n .section-content {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 40px;\r\n align-items: start;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .content-left {\r\n color: #495057;\r\n font-size: 1.1rem;\r\n line-height: 1.8;\r\n }\r\n\r\n .content-left p {\r\n margin-bottom: 20px;\r\n position: relative;\r\n padding-left: 25px;\r\n }\r\n\r\n .content-left p::before {\r\n content: '\u25c6';\r\n position: absolute;\r\n left: 0;\r\n color: #F93825;\r\n font-size: 1rem;\r\n animation: bounce 2s infinite;\r\n }\r\n\r\n @keyframes bounce {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-3px); }\r\n }\r\n\r\n .content-right {\r\n background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(248,249,250,0.8));\r\n backdrop-filter: blur(10px);\r\n padding: 30px;\r\n border-radius: 20px;\r\n border: 1px solid rgba(248, 56, 37, 0.1);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .content-right::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 3px;\r\n background: linear-gradient(90deg, #F93825, #ff6b5b);\r\n }\r\n\r\n .content-right h4 {\r\n color: #2c3e50;\r\n font-size: 1.4rem;\r\n font-weight: 700;\r\n margin-bottom: 25px;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n\r\n .content-right h4::before {\r\n content: '\u26a1';\r\n font-size: 1.2rem;\r\n animation: sparkle 1.5s infinite;\r\n }\r\n\r\n @keyframes sparkle {\r\n 0%, 100% { transform: scale(1) rotate(0deg); }\r\n 50% { transform: scale(1.2) rotate(180deg); }\r\n }\r\n\r\n .content-right ul {\r\n list-style: none;\r\n padding: 0;\r\n }\r\n\r\n .content-right li {\r\n padding: 15px 0;\r\n color: #495057;\r\n font-size: 1rem;\r\n display: flex;\r\n align-items: center;\r\n font-weight: 500;\r\n border-bottom: 1px solid rgba(248, 56, 37, 0.1);\r\n transition: all 0.4s ease;\r\n position: relative;\r\n }\r\n\r\n .content-right li:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n .content-right li:hover {\r\n color: #F93825;\r\n transform: translateX(8px);\r\n background: linear-gradient(90deg, rgba(248, 56, 37, 0.05), transparent);\r\n padding-left: 12px;\r\n border-radius: 8px;\r\n }\r\n\r\n .content-right li:before {\r\n content: '\u2726';\r\n color: #F93825;\r\n margin-right: 15px;\r\n font-weight: bold;\r\n font-size: 1.1rem;\r\n background: linear-gradient(135deg, rgba(248, 56, 37, 0.1), rgba(248, 56, 37, 0.2));\r\n width: 30px;\r\n height: 30px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n box-shadow: 0 4px 12px rgba(248, 56, 37, 0.2);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .content-right li:hover:before {\r\n transform: scale(1.15) rotate(180deg);\r\n box-shadow: 0 6px 20px rgba(248, 56, 37, 0.4);\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 1024px) {\r\n .detail-section {\r\n flex-direction: column !important;\r\n margin-bottom: 80px;\r\n }\r\n\r\n .section-timeline {\r\n width: 150px;\r\n height: 150px;\r\n margin: 0 auto 30px;\r\n }\r\n\r\n .timeline-circle {\r\n width: 60px;\r\n height: 60px;\r\n font-size: 20px;\r\n }\r\n\r\n .section-content-wrapper {\r\n margin: 0;\r\n padding: 35px;\r\n }\r\n\r\n .section-title {\r\n font-size: 2.2rem;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .section-content {\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n }\r\n\r\n .section-header-inline {\r\n flex-direction: column;\r\n text-align: center;\r\n gap: 20px;\r\n }\r\n\r\n .section-icon {\r\n width: 50px;\r\n height: 50px;\r\n font-size: 20px;\r\n }\r\n\r\n .section-title {\r\n font-size: 2rem;\r\n }\r\n\r\n .content-right {\r\n padding: 25px;\r\n }\r\n\r\n .content-right h4 {\r\n font-size: 1.3rem;\r\n }\r\n\r\n .content-right li {\r\n font-size: 0.95rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .section-content-wrapper {\r\n padding: 25px;\r\n }\r\n\r\n .section-icon {\r\n width: 45px;\r\n height: 45px;\r\n font-size: 18px;\r\n }\r\n\r\n .section-title {\r\n font-size: 1.8rem;\r\n }\r\n\r\n .content-right {\r\n padding: 20px;\r\n }\r\n }\r\n\r\n \/* \u0130statistikler *\/\r\n .stats-section {\r\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\r\n padding: 80px 20px;\r\n }\r\n\r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 40px;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .stat-item {\r\n background: #ffffff;\r\n border-radius: 20px;\r\n padding: 40px 30px;\r\n text-align: center;\r\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .stat-item:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);\r\n }\r\n\r\n .stat-number {\r\n font-size: 3rem;\r\n font-weight: 900;\r\n color: #F93825;\r\n display: block;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .stat-label {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n color: #2c3e50;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .stat-description {\r\n font-size: 0.95rem;\r\n color: #6c757d;\r\n line-height: 1.5;\r\n }\r\n\r\n \/* CTA Section *\/\r\n .cta-section {\r\n background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);\r\n color: white;\r\n padding: 80px 40px;\r\n text-align: center;\r\n }\r\n\r\n .cta-content {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .cta-section h3 {\r\n font-size: 2.5rem;\r\n font-weight: 800;\r\n margin-bottom: 25px;\r\n color: white;\r\n }\r\n\r\n .cta-section p {\r\n font-size: 1.3rem;\r\n margin-bottom: 40px;\r\n opacity: 0.95;\r\n max-width: 800px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .cta-buttons {\r\n display: flex;\r\n gap: 25px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .cta-btn {\r\n padding: 15px 30px;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n border: none;\r\n text-decoration: none;\r\n display: inline-block;\r\n }\r\n\r\n .cta-btn-primary {\r\n background: #F93825;\r\n color: white !important;\r\n }\r\n\r\n .cta-btn-primary:hover {\r\n background: #e0311e;\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .cta-btn-secondary {\r\n background: transparent;\r\n color: #F93825;\r\n border: 3px solid #F93825;\r\n }\r\n\r\n .cta-btn-secondary:hover {\r\n background: #F93825;\r\n color: white;\r\n transform: translateY(-3px);\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 768px) {\r\n .process-intro-container {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n\r\n .process-intro-content h2 {\r\n font-size: 2.2rem;\r\n }\r\n\r\n .process-intro-content p {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .process-steps {\r\n flex-direction: column;\r\n gap: 30px;\r\n }\r\n\r\n .process-step {\r\n padding: 25px 20px;\r\n min-width: auto;\r\n width: 100%;\r\n max-width: 300px;\r\n }\r\n\r\n .process-step::after {\r\n display: none;\r\n }\r\n\r\n .step-number {\r\n font-size: 2.5rem;\r\n }\r\n\r\n .step-description {\r\n font-size: 0.85rem;\r\n }\r\n\r\n .section-content {\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n }\r\n\r\n .stats-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .cta-buttons {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .section-header h2 {\r\n font-size: 2.2rem;\r\n }\r\n\r\n .detail-section {\r\n padding: 40px 25px;\r\n }\r\n\r\n .section-header-inline {\r\n flex-direction: column;\r\n text-align: center;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .process-steps {\r\n gap: 20px;\r\n }\r\n\r\n .process-step {\r\n padding: 20px 15px;\r\n max-width: 250px;\r\n }\r\n\r\n .step-number {\r\n font-size: 2rem;\r\n }\r\n\r\n .step-description {\r\n font-size: 0.8rem;\r\n }\r\n\r\n .hero-card {\r\n padding: 2rem;\r\n }\r\n\r\n .detail-section {\r\n padding: 30px 20px;\r\n }\r\n }\r\n\r\n \/* Legal Disclaimer Styles *\/\r\n .legal-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 .legal-disclaimer-card {\r\n max-width: 900px;\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 .legal-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 .legal-content 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 .legal-content 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: 700px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .legal-content p:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .legal-disclaimer {\r\n padding: 40px 15px;\r\n }\r\n\r\n .legal-disclaimer-card {\r\n padding: 30px 20px;\r\n }\r\n\r\n .legal-icon {\r\n width: 60px;\r\n height: 60px;\r\n font-size: 24px;\r\n }\r\n\r\n .legal-content h4 {\r\n font-size: 1.2rem;\r\n }\r\n\r\n .legal-content p {\r\n font-size: 0.95rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .legal-disclaimer-card {\r\n padding: 25px 15px;\r\n }\r\n\r\n .legal-icon {\r\n width: 50px;\r\n height: 50px;\r\n font-size: 20px;\r\n }\r\n\r\n .legal-content h4 {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .legal-content p {\r\n font-size: 0.9rem;\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>Unser Arbeitsprozess \u2013 So arbeiten wir<\/h1>\r\n <p>Entdecken Sie, wie unsere Barrierefreiheitsdienstleistungen Schritt f\u00fcr Schritt funktionieren. Wir erkl\u00e4ren unseren gesamten Prozess von der ersten Kontaktaufnahme bis zur finalen Lieferung transparent.<\/p>\r\n <a href=\"https:\/\/darksn.de\/de\/kontakt\/\"><button class=\"cta-button\">Prozess erkunden<\/button><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Ana \u0130\u00e7erik B\u00f6l\u00fcmleri -->\r\n <div class=\"main-content\">\r\n <!-- S\u00fcre\u00e7 Ba\u015fl\u0131\u011f\u0131 -->\r\n <div class=\"process-intro-section\">\r\n <div class=\"process-intro-container\">\r\n <div class=\"process-intro-content\">\r\n <h2>Unser Prozess f\u00fcr Barrierefreiheits-\ndienstleistungen<\/h2>\r\n <p>Sechs strategische Schritte, die Sie auf Ihrer Reise zur Barrierefreiheit begleiten. In jeder Phase arbeitet unser Expertenteam mit modernsten Technologien und bew\u00e4hrten Methoden, um Ihre Website gem\u00e4\u00df den WCAG 2.1 AA-Standards konform zu machen. Von Grund auf bis zur vollst\u00e4ndigen Konformit\u00e4t sind wir in jedem Schritt an Ihrer Seite.<\/p>\r\n <\/div>\r\n <div class=\"process-intro-image\">\r\n <img decoding=\"async\" src=\"https:\/\/darksn.de\/wp-content\/uploads\/2025\/07\/laptop-with-internet-browser-search-bar-screen-scaled.jpg\" alt=\"Accessibility Process Analysis\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Modern Step Process Presentation -->\r\n <div class=\"process-overview\" id=\"process-overview\">\r\n <div class=\"section-header\">\r\n <h2>Ein schrittweiser Prozess<\/h2>\r\n <p>Unser umfassender Prozess zur Umsetzung von Barrierefreiheit in f\u00fcnf strategischen Schritten<\/p>\r\n <\/div>\r\n \r\n <div class=\"step-process-container\">\r\n <div class=\"step-process\">\r\n <div class=\"step-icon\" onclick=\"scrollToSection('analysis')\">\r\n <div class=\"icon-background\">\r\n <i class=\"fas fa-chart-line\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step-content\">\r\n <h3>Step One<\/h3>\r\n <strong>Assessment<\/strong>\r\n <p>Bewertung des aktuellen Status und Ermittlung der Anforderungen<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"step-process\">\r\n <div class=\"step-icon\" onclick=\"scrollToSection('testing')\">\r\n <div class=\"icon-background\">\r\n <i class=\"fas fa-microscope\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step-content\">\r\n <h3>Step Two<\/h3>\r\n <strong>Pr\u00fcfung<\/strong>\r\n <p>Umfassende Barrierefreiheitstests und -bewertung<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"step-process\">\r\n <div class=\"step-icon\" onclick=\"scrollToSection('planning')\">\r\n <div class=\"icon-background\">\r\n <i class=\"fas fa-route\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step-content\">\r\n <h3>Step Three<\/h3>\r\n <strong>Planung<\/strong>\r\n <p>Entwicklung der Strategie und Implementierungsplanung<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"step-process\">\r\n <div class=\"step-icon\" onclick=\"scrollToSection('implementation')\">\r\n <div class=\"icon-background\">\r\n <i class=\"fas fa-cogs\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step-content\">\r\n <h3>Step Four<\/h3>\r\n <strong>Umsetzung<\/strong>\r\n <p>Umsetzung technischer Verbesserungen<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"step-process\">\r\n <div class=\"step-icon\" onclick=\"scrollToSection('delivery')\">\r\n <div class=\"icon-background\">\r\n <i class=\"fas fa-check-circle\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step-content\">\r\n <h3>Step Five<\/h3>\r\n <strong>Validierung<\/strong>\r\n <p>Abschlie\u00dfende Validierung und Dokumentations\u00fcbergabe<\/p>\r\n <\/div>\r\n <\/div>\r\n <!-- Bayrak (Flag) simgesi, s\u00fcrecin sonu i\u00e7in -->\r\n <div class=\"step-process\" style=\"cursor:default;\">\r\n <div class=\"step-icon\">\r\n <div class=\"icon-background\" style=\"background:#2ecc40;\">\r\n <i class=\"fas fa-flag\" style=\"color: black; font-size: 28px;\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step-content\">\r\n <h3 style=\"color:#2ecc40;\">Finish<\/h3>\r\n <strong>Finish<\/strong>\r\n <p>Process Complete<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Detayl\u0131 Section'lar -->\r\n <div class=\"detail-sections\">\r\n <div class=\"section-header\">\r\n <h2>Detaillierte Prozessbeschreibungen<\/h2>\r\n <p>Untersuchen Sie die Details jedes Schrittes und unserer Abl\u00e4ufe genau. Wir bieten Ihnen den besten Service durch den Einsatz moderner Technologien und unseres Expertenteams.<\/p>\r\n <\/div>\r\n\r\n <!-- Analiz Section -->\r\n <div class=\"detail-section\" id=\"analysis\">\r\n <div class=\"section-timeline\">\r\n <div class=\"timeline-circle\">\r\n <i class=\"fas fa-chart-line\"><\/i>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"section-content-wrapper\">\r\n <div class=\"section-header-inline\">\r\n <div class=\"section-icon\">\r\n <i class=\"fas fa-chart-line\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"section-title\">1. Analyse und Bewertung<\/h3>\r\n <p class=\"section-subtitle\">Wir analysieren den aktuellen Stand Ihres Projekts und ermitteln Ihre Anforderungen.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section-content\">\r\n <div class=\"content-left\">\r\n <p>Im ersten Schritt f\u00fchren wir eine umfassende Analyse Ihres Projekts durch. Wir bewerten den aktuellen Barrierefreiheitsstatus Ihrer Website, analysieren rechtliche Anforderungen und entwickeln eine ma\u00dfgeschneiderte Strategie f\u00fcr Sie.<\/p>\r\n \r\n <p>In dieser Phase erstellen wir einen kostenlosen Vorab-Bewertungsbericht und identifizieren die Bed\u00fcrfnisse Ihres Projekts im Detail. So k\u00f6nnen wir Ihnen die bestm\u00f6gliche L\u00f6sung anbieten.<\/p>\r\n <\/div>\r\n\r\n <div class=\"content-right\">\r\n <h4>Was wir in dieser Phase tun:<\/h4>\r\n <ul>\r\n <li>Erstberatung und Definition des Projektumfangs<\/li>\r\n <li>Analyse der aktuellen Website\/Anwendung<\/li>\r\n <li>Bewertung der gesetzlichen Anforderungen<\/li>\r\n <li>Festlegung von Budget und Zeitrahmen<\/li>\r\n <li>Kostenlose Vorab-Bewertungserstellung<\/li>\r\n <li>Entwicklung der Teststrategie<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Test Section -->\r\n <div class=\"detail-section\" id=\"testing\">\r\n <div class=\"section-timeline\">\r\n <div class=\"timeline-circle\">\r\n <i class=\"fas fa-microscope\"><\/i>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"section-content-wrapper\">\r\n <div class=\"section-header-inline\">\r\n <div class=\"section-icon\">\r\n <i class=\"fas fa-microscope\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"section-title\">2. Umfassender Testprozess<\/h3>\r\n <p class=\"section-subtitle\">Detaillierte Barrierefreiheitsanalyse mit automatisierten und manuellen Tests<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section-content\">\r\n <div class=\"content-left\">\r\n <p>Wir analysieren den Barrierefreiheitsstatus Ihrer Website umfassend mit professionellen Testtools und unserem Expertenteam. Dabei f\u00fchren wir alle Prozesse von automatisierten Scans bis hin zu manuellen Tests durch.<\/p>\r\n \r\n <p>Wir bieten eine vollst\u00e4ndige Analyse mit Screenreader-Tests, Tastaturnavigationspr\u00fcfungen und Bewertungen der mobilen Zug\u00e4nglichkeit an.<\/p>\r\n <\/div>\r\n\r\n <div class=\"content-right\">\r\n <h4>Unser Testprozess:<\/h4>\r\n <ul>\r\n <li>Kontrolle mit automatisierten Scan-Tools<\/li>\r\n <li>Screenreader-Tests (JAWS, NVDA, VoiceOver)<\/li>\r\n <li>Tastaturnavigations-Tests<\/li>\r\n <li>Tests zur mobilen Barrierefreiheit<\/li>\r\n <li>\u00dcberpr\u00fcfung der WCAG 2.1 AA Kriterien<\/li>\r\n <li>Analyse von Farbkontrast und Typografie<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Planlama Section -->\r\n <div class=\"detail-section\" id=\"planning\">\r\n <div class=\"section-timeline\">\r\n <div class=\"timeline-circle\">\r\n <i class=\"fas fa-route\"><\/i>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"section-content-wrapper\">\r\n <div class=\"section-header-inline\">\r\n <div class=\"section-icon\">\r\n <i class=\"fas fa-route\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"section-title\">3. Strategie und Planung<\/h3>\r\n <p class=\"section-subtitle\">Detaillierte Entwicklung der Umsetzungsstrategie basierend auf den Testergebnissen<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section-content\">\r\n <div class=\"content-left\">\r\n <p>Wir entwickeln eine ma\u00dfgeschneiderte Umsetzungsstrategie durch Analyse der Testergebnisse. Identifizierte Probleme werden nach Priorit\u00e4t kategorisiert und die effektivsten L\u00f6sungen geplant.<\/p>\r\n \r\n <p>In dieser Phase erstellen wir einen detaillierten Bericht, f\u00fchren eine Kostenanalyse durch und legen den Zeitplan f\u00fcr die Umsetzung fest.<\/p>\r\n <\/div>\r\n\r\n <div class=\"content-right\">\r\n <h4>Planungsprozess:<\/h4>\r\n <ul>\r\n <li>Analyse der Testergebnisse<\/li>\r\n <li>Festlegung der Priorit\u00e4tsstufen<\/li>\r\n <li>Erstellung von L\u00f6sungsvorschl\u00e4gen<\/li>\r\n <li>Erstellung des Umsetzungszeitplans<\/li>\r\n <li>Kostenanalyse und Berechnung des ROI<\/li>\r\n <li>Erstellung eines detaillierten Berichts<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Uygulama Section -->\r\n <div class=\"detail-section\" id=\"implementation\">\r\n <div class=\"section-timeline\">\r\n <div class=\"timeline-circle\">\r\n <i class=\"fas fa-cogs\"><\/i>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"section-content-wrapper\">\r\n <div class=\"section-header-inline\">\r\n <div class=\"section-icon\">\r\n <i class=\"fas fa-cogs\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"section-title\">4. Technische Umsetzung<\/h3>\r\n <p class=\"section-subtitle\">Implementierung von Barrierefreiheitsverbesserungen auf Code-Ebene<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section-content\">\r\n <div class=\"content-left\">\r\n <p>Wir setzen Barrierefreiheitsverbesserungen direkt auf Code-Ebene mit unserem erfahrenen Entwicklerteam um. Dabei bearbeiten wir alle technischen Details \u2013 von der HTML-Struktur \u00fcber CSS und JavaScript bis hin zu ARIA-Labels.<\/p>\r\n \r\n <p>Wir verbessern schrittweise, beginnend mit den kritischsten Punkten, und testen in jeder Phase sorgf\u00e4ltig.<\/p>\r\n <\/div>\r\n\r\n <div class=\"content-right\">\r\n <h4>Umsetzungsbereiche:<\/h4>\r\n <ul>\r\n <li>Optimierung der semantischen HTML-Struktur<\/li>\r\n <li>Hinzuf\u00fcgen von ARIA-Labels und -Rollen<\/li>\r\n <li>Verbesserungen der Barrierefreiheit im CSS<\/li>\r\n <li>Fehlerbehebungen zur Barrierefreiheit im JavaScript<\/li>\r\n <li>Optimierung des Farbkontrasts<\/li>\r\n <li>Verbesserungen der Tastaturnavigation<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- E\u011fitim Section -->\r\n <div class=\"detail-section\" id=\"training\">\r\n <div class=\"section-timeline\">\r\n <div class=\"timeline-circle\">\r\n <i class=\"fas fa-users\"><\/i>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"section-content-wrapper\">\r\n <div class=\"section-header-inline\">\r\n <div class=\"section-icon\">\r\n <i class=\"fas fa-users\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"section-title\">5. Schulung und Support<\/h3>\r\n <p class=\"section-subtitle\">Schulung Ihres Teams zur Barrierefreiheit<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section-content\">\r\n <div class=\"content-left\">\r\n <p>Wir schulen Ihr Team umfassend zum Thema Barrierefreiheit. Dabei bilden wir alle Teammitglieder aus \u2013 von Entwicklern \u00fcber Designer bis hin zu Content-Managern und Testexperten.<\/p>\r\n \r\n <p>Mit kontinuierlichem Support und Beratungsleistungen sichern wir Ihren langfristigen Erfolg.<\/p>\r\n <\/div>\r\n\r\n <div class=\"content-right\">\r\n <h4>Schulungsprogramm:<\/h4>\r\n <ul>\r\n <li>Grundlagen der Barrierefreiheit<\/li>\r\n <li>WCAG-Richtlinien und Standards<\/li>\r\n <li>Testmethoden und Werkzeuge<\/li>\r\n <li>Anforderungen zur Einhaltung der Vorschriften<\/li>\r\n <li>Kontinuierliche Unterst\u00fctzung und Beratung<\/li>\r\n <li>Empfehlungen zu Best Practices<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Teslim Section -->\r\n <div class=\"detail-section\" id=\"delivery\">\r\n <div class=\"section-timeline\">\r\n <div class=\"timeline-circle\">\r\n <i class=\"fas fa-trophy\"><\/i>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"section-content-wrapper\">\r\n <div class=\"section-header-inline\">\r\n <div class=\"section-icon\">\r\n <i class=\"fas fa-trophy\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"section-title\">6. Abschlie\u00dfende Validierung und Lieferung<\/h3>\r\n <p class=\"section-subtitle\">Test aller Verbesserungen und \u00dcbergabe der Dokumentation<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section-content\">\r\n <div class=\"content-left\">\r\n <p>Im letzten Schritt testen wir alle Verbesserungen umfassend und validieren die Barrierefreiheitskonformit\u00e4t. Wir \u00fcberpr\u00fcfen die gesetzlichen Anforderungen und erstellen die erforderliche Dokumentation.<\/p>\r\n \r\n <p>Das Projekt wird mit einer Barrierefreiheitserkl\u00e4rung, einem Konformit\u00e4tsbericht und technischer Dokumentation abgeschlossen.<\/p>\r\n <\/div>\r\n\r\n <div class=\"content-right\">\r\n <h4>Abschlie\u00dfender Prozess:<\/h4>\r\n <ul>\r\n <li>Test aller Verbesserungen<\/li>\r\n <li>\u00dcberpr\u00fcfung der Einhaltung von WCAG 2.1 AA<\/li>\r\n <li>Pr\u00fcfung der gesetzlichen Anforderungen<\/li>\r\n <li>Erstellung der Barrierefreiheitserkl\u00e4rung<\/li>\r\n <li>\u00dcbergabe der technischen Dokumentation<\/li>\r\n <li>Durchf\u00fchrung von Benutzertests<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0130statistikler -->\r\n <div class=\"stats-section\">\r\n <div class=\"section-header\">\r\n <h2>Warum Wir?<\/h2>\r\n <p>Wir machen den Unterschied durch unsere Erfahrung und Erfolge.<\/p>\r\n <\/div>\r\n\r\n <div class=\"stats-grid\">\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">100+<\/span>\r\n <div class=\"stat-label\">Abgeschlossene Projekte<\/div>\r\n <div class=\"stat-description\">Erfolgreich abgeschlossene Barrierefreiheitsprojekte<\/div>\r\n <\/div>\r\n\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">98%<\/span>\r\n <div class=\"stat-label\">Kundenzufriedenheit<\/div>\r\n <div class=\"stat-description\">Prozentsatz der zufriedenen Kunden mit unseren Leistungen<\/div>\r\n <\/div>\r\n\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">24\/7<\/span>\r\n <div class=\"stat-label\">Technischer Support<\/div>\r\n <div class=\"stat-description\">Ununterbrochener technischer Support und Beratung<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- CTA B\u00f6l\u00fcm\u00fc -->\r\n <div class=\"cta-section\">\r\n <div class=\"cta-content\">\r\n <h3>Lassen Sie uns Ihr Projekt starten<\/h3>\r\n <p>Kontaktieren Sie uns, um Ihren Barrierefreiheitsprozess zu beginnen. Wir k\u00f6nnen mit einer ersten Bewertung starten.<\/p>\r\n\r\n <div class=\"cta-buttons\">\r\n <a href=\"https:\/\/darksn.de\/de\/kontakt\/\" class=\"cta-btn cta-btn-primary\">Bewertung anfordern<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Legal Disclaimer -->\r\n <div class=\"legal-disclaimer\">\r\n <div class=\"legal-disclaimer-card\">\r\n <div class=\"legal-icon\">\r\n <i class=\"fa-solid fa-triangle-exclamation\"><\/i>\r\n <\/div>\r\n <div class=\"legal-content\">\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 <\/div>\r\n\r\n <script>\r\n \/\/ Smooth scroll function\r\n function scrollToSection(sectionId) {\r\n const section = document.getElementById(sectionId);\r\n if (section) {\r\n section.scrollIntoView({ \r\n behavior: 'smooth',\r\n block: 'start'\r\n });\r\n }\r\n }\r\n\r\n \/\/ Animasyonlar i\u00e7in Intersection Observer\r\n const observerOptions = {\r\n threshold: 0.1,\r\n rootMargin: '0px 0px -50px 0px'\r\n };\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.style.opacity = '1';\r\n entry.target.style.transform = 'translateY(0)';\r\n \r\n \/\/ Kart animasyonlar\u0131 i\u00e7in ek efektler\r\n if (entry.target.classList.contains('detail-section')) {\r\n entry.target.style.animation = 'slideInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1)';\r\n }\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n \/\/ CSS animasyonlar\u0131 i\u00e7in stil ekle\r\n const style = document.createElement('style');\r\n style.textContent = `\r\n @keyframes slideInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(50px) scale(0.95);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n }\r\n \r\n @keyframes fadeInScale {\r\n from {\r\n opacity: 0;\r\n transform: scale(0.8);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n }\r\n `;\r\n document.head.appendChild(style);\r\n\r\n \/\/ T\u00fcm animasyonlu \u00f6\u011feleri g\u00f6zlemle\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const animatedElements = document.querySelectorAll('.process-step, .detail-section, .stat-item');\r\n animatedElements.forEach((el, index) => {\r\n el.style.opacity = '0';\r\n el.style.transform = 'translateY(30px)';\r\n el.style.transition = 'all 0.6s ease';\r\n \r\n \/\/ Staggered animasyon i\u00e7in delay\r\n if (el.classList.contains('detail-section')) {\r\n el.style.animationDelay = `${index * 0.2}s`;\r\n }\r\n \r\n observer.observe(el);\r\n });\r\n });\r\n <\/script>\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>","protected":false},"excerpt":{"rendered":"<p>Work Process – Darksn Our Work Process – How We Operate Discover how our accessibility services work step by step. We transparently explain our entire process from initial contact to final delivery. Explore Process Our Accessibility Service Process Six strategic steps guiding your accessibility journey. At every stage, our expert team works with cutting-edge technologies and proven methodologies to bring your website into compliance with WCAG 2.1 AA standards. From ground zero to full compliance, we’re with you every step of the way. A Step Process Presentation Our comprehensive accessibility implementation process with 5 strategic steps Step One Assessment Assessment of current status and identification of requirements Step Two Testing Comprehensive accessibility testing and evaluation Step Three Planning Strategy development and implementation planning Step Four Implementation Implementation of technical improvements Step Five Validation Final validation and documentation delivery Finish Finish Process Complete Detailed Process Explanations Examine the details of each step and our processes closely. We provide you with the best service using modern technologies and our expert team. 1. Analysis and Assessment We analyze your project’s current status and identify your requirements In the first stage, we conduct a comprehensive analysis of your project. We evaluate your current website’s accessibility status, analyze legal requirements, and develop a customized strategy for you. At this stage, we prepare a free preliminary assessment report and identify your project’s needs in detail. This enables us to provide you with the most suitable solution. What We Do at This Stage: Initial consultation and project scope definition Current website\/application analysis Legal requirements assessment Budget and timeline determination Free preliminary assessment report Test strategy development 2. Comprehensive Testing Process Detailed accessibility analysis with automated and manual testing We comprehensively analyze your website’s accessibility status using professional testing tools and our expert team. We implement all processes from automated scans to manual testing. We provide a complete analysis with screen reader tests, keyboard navigation controls, and mobile accessibility assessments. Our Testing Process: Control with automated scanning tools Screen reader tests (JAWS, NVDA, VoiceOver) Keyboard navigation tests Mobile accessibility tests WCAG 2.1 AA criteria verification Color contrast and typography analysis 3. Strategy and Planning Detailed implementation strategy development based on test results We develop a customized implementation strategy by analyzing test results. We categorize identified issues by priority and plan the most effective solutions. At this stage, we prepare a detailed report, conduct cost analysis, and determine the implementation timeline. Planning Process: Analysis of test results Priority level determination Technical solution proposal preparation Implementation timeline creation Cost analysis and ROI calculation Detailed report preparation 4. Technical Implementation Code-level implementation of accessibility improvements We implement accessibility improvements directly at the code level with our expert development team. We address all technical details from HTML structure to CSS, JavaScript to ARIA labels. We make step-by-step improvements starting from critical issues and test at every stage. Implementation Areas: HTML semantic structure optimization ARIA labels and roles addition CSS accessibility improvements JavaScript accessibility fixes Color contrast optimization Keyboard navigation improvements 5. Training and Support Training your team on accessibility We comprehensively train your team on accessibility. We educate all team members from developers to designers, content managers to testing experts. We ensure long-term success with continuous support and consulting services. Training Program: Accessibility fundamentals training WCAG guidelines and standards Testing methodologies and tools Compliance requirements Continuous support and consulting Best practice recommendations 6. Final Validation and Delivery Testing all improvements and documentation delivery In the final stage, we comprehensively test all improvements and validate accessibility compliance. We verify legal requirements and prepare necessary documentation. We complete the project with accessibility statement, compliance report, and technical documentation. Final Process: Testing all improvements WCAG 2.1 AA compliance verification Legal requirements verification Accessibility statement preparation Technical documentation delivery User testing implementation Why Choose Us? We make a difference with our experience and achievements. 100+ Completed Projects Successfully completed accessibility projects 98% Customer Satisfaction Percentage of customers satisfied with our services 24\/7 Technical Support Uninterrupted technical support and consulting Let’s Start Your Project Contact us to start your accessibility process. We can begin with a preliminary assessment. Get Assessment 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 optimization and technology solutions, 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, WCAG implementation, 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 accessibility optimization or technology implementation decisions.<\/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-29774","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/pages\/29774","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=29774"}],"version-history":[{"count":41,"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/pages\/29774\/revisions"}],"predecessor-version":[{"id":30273,"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/pages\/29774\/revisions\/30273"}],"wp:attachment":[{"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/media?parent=29774"}],"wp:term":[{"taxonomy":"author","embeddable":true,"href":"https:\/\/darksn.de\/de\/wp-json\/wp\/v2\/coauthors?post=29774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}