Accessify

{"uuid":"ed32452e-b918-4456-8d1b-3cea073448b8","provider":"wsw-nova","model":"sirius","image_strategy":"ai_self_select","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":true,"html":"<style>\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 {\n font-family: inherit;\n box-sizing: border-box;\n background: transparent;\n padding: 3.5rem 1.5rem;\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 *,\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 *::before,\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 *::after {\n box-sizing: inherit;\n }\n\n /* Layout */\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-inner {\n max-width: 1100px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 3rem;\n align-items: center;\n }\n\n /* Text column */\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-text-col {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n }\n\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-badge {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n background: rgba(146, 44, 96, 0.08);\n color: #922C60;\n padding: 0.35rem 1rem;\n border-radius: 100px;\n font-size: 0.85rem;\n font-weight: 700;\n letter-spacing: 0.06rem;\n width: fit-content;\n text-transform: uppercase;\n }\n section.wsw-theme-d #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-badge,\n section.wsw-theme-db #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-badge,\n section.wsw-theme-b #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-badge,\n section.wsw-theme-bb #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-badge {\n background: rgba(146, 44, 96, 0.25);\n color: #d17aaa;\n }\n section.wsw-theme-a #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-badge {\n background: rgba(255, 255, 255, 0.2);\n color: var(--wsw-color-white, #fff);\n }\n\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-badge-icon {\n font-size: 1rem;\n }\n\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 h2 {\n color: #922C60;\n margin: 0;\n line-height: 1.2;\n }\n\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-lead {\n color: var(--wsw-color-black, #333);\n line-height: 1.7;\n max-width: 65ch;\n margin: 0;\n }\n section.wsw-theme-d #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-lead,\n section.wsw-theme-db #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-lead,\n section.wsw-theme-b #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-lead,\n section.wsw-theme-bb #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-lead {\n color: var(--wsw-color-light, #f5f5f5);\n }\n section.wsw-theme-a #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-lead {\n color: var(--wsw-color-white, #fff);\n }\n\n /* Highlight stats bar */\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-stats {\n display: flex;\n gap: 1.5rem;\n margin-top: 0.5rem;\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-stat {\n display: flex;\n flex-direction: column;\n gap: 0.2rem;\n padding: 1rem 1.25rem;\n border-radius: 12px;\n background: var(--wsw-color-light, #f5f5f5);\n flex: 1;\n transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-stat:hover {\n transform: translateY(-3px);\n box-shadow: 0 6px 20px rgba(0,0,0,0.08);\n }\n section.wsw-theme-d #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-stat,\n section.wsw-theme-db #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-stat {\n background: rgba(255,255,255,0.08);\n }\n section.wsw-theme-b #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-stat,\n section.wsw-theme-bb #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-stat {\n background: rgba(255,255,255,0.06);\n }\n section.wsw-theme-a #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-stat {\n background: rgba(255,255,255,0.15);\n }\n\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-stat-number {\n font-size: clamp(1.5rem, 3vw, 2rem);\n font-weight: 700;\n color: #922C60;\n line-height: 1.1;\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-stat-label {\n font-size: 0.82rem;\n color: var(--wsw-color-dark, #b0a9b4);\n line-height: 1.3;\n }\n section.wsw-theme-d #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-stat-label,\n section.wsw-theme-db #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-stat-label,\n section.wsw-theme-b #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-stat-label,\n section.wsw-theme-bb #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-stat-label {\n color: rgba(255,255,255,0.6);\n }\n section.wsw-theme-a #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-stat-label {\n color: rgba(255,255,255,0.7);\n }\n\n /* Image column */\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-img-col {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-img-wrapper {\n position: relative;\n border-radius: 20px;\n overflow: hidden;\n box-shadow: 0 8px 40px rgba(146, 44, 96, 0.15), 0 2px 12px rgba(0,0,0,0.06);\n cursor: pointer;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;\n width: 100%;\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-img-wrapper:hover {\n transform: translateY(-6px) scale(1.01);\n box-shadow: 0 16px 56px rgba(146, 44, 96, 0.22), 0 4px 16px rgba(0,0,0,0.08);\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-img-wrapper:focus-visible {\n outline: 3px solid #922C60;\n outline-offset: 4px;\n }\n\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-img-wrapper img {\n width: 100%;\n height: auto;\n display: block;\n border-radius: 20px;\n }\n\n /* Zoom icon overlay */\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-zoom-icon {\n position: absolute;\n bottom: 1rem;\n right: 1rem;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n background: rgba(146, 44, 96, 0.85);\n color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.2rem;\n pointer-events: none;\n opacity: 0;\n transform: scale(0.8);\n transition: opacity 0.25s ease-out, transform 0.25s ease-out;\n backdrop-filter: blur(4px);\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-img-wrapper:hover .acc-zoom-icon {\n opacity: 1;\n transform: scale(1);\n }\n\n /* Decorative accent shapes */\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-deco-1 {\n position: absolute;\n top: -16px;\n right: -16px;\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background: rgba(146, 44, 96, 0.1);\n z-index: -1;\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-deco-2 {\n position: absolute;\n bottom: -12px;\n left: -12px;\n width: 56px;\n height: 56px;\n border-radius: 12px;\n background: rgba(146, 44, 96, 0.07);\n transform: rotate(15deg);\n z-index: -1;\n }\n\n /* Lightbox overlay */\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-lightbox {\n display: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 9999;\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-lightbox.is-open {\n display: flex;\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-lightbox-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0,0,0,0.82);\n backdrop-filter: blur(6px);\n z-index: 10000;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n opacity: 0;\n transition: opacity 0.3s ease-out;\n cursor: pointer;\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-lightbox.is-open .acc-lightbox-backdrop {\n opacity: 1;\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-lightbox-img {\n max-width: 90vw;\n max-height: 85vh;\n border-radius: 16px;\n box-shadow: 0 20px 80px rgba(0,0,0,0.5);\n transform: scale(0.9);\n transition: transform 0.3s ease-out;\n cursor: default;\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-lightbox.is-open .acc-lightbox-img {\n transform: scale(1);\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-lightbox-close {\n position: fixed;\n top: 1.5rem;\n right: 1.5rem;\n z-index: 10001;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n border: none;\n background: rgba(255,255,255,0.15);\n color: #fff;\n font-size: 1.5rem;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.2s ease-out, transform 0.2s ease-out;\n backdrop-filter: blur(4px);\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-lightbox-close:hover {\n background: rgba(255,255,255,0.3);\n transform: scale(1.1);\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-lightbox-close:focus-visible {\n outline: 2px solid #fff;\n outline-offset: 2px;\n }\n\n /* WCAG badge on image */\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-wcag-badge {\n position: absolute;\n top: 1rem;\n left: 1rem;\n background: #922C60;\n color: #fff;\n padding: 0.3rem 0.75rem;\n border-radius: 8px;\n font-size: 0.72rem;\n font-weight: 700;\n letter-spacing: 0.08rem;\n text-transform: uppercase;\n pointer-events: none;\n box-shadow: 0 2px 8px rgba(146, 44, 96, 0.3);\n }\n\n /* Responsive */\n @media (max-width: 768px) {\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 {\n padding: 2.5rem 1rem;\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-inner {\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-img-col {\n order: -1;\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-stats {\n flex-direction: column;\n gap: 0.75rem;\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-stat {\n flex-direction: row;\n align-items: center;\n gap: 0.75rem;\n padding: 0.85rem 1rem;\n }\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-deco-1,\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 .acc-deco-2 {\n display: none;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 *,\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 *::before,\n #wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8\">\n <div class=\"acc-inner\">\n\n <div class=\"acc-text-col\">\n <span class=\"acc-badge\">\n <span class=\"acc-badge-icon\">♿</span>\n <span>Accessify</span>\n </span>\n\n <h2>Barrierefreiheit wird im digitalen Alltag immer wichtiger.</h2>\n\n <span class=\"acc-lead\">Nicht nur, weil gesetzliche Anforderungen zunehmen, sondern weil Inhalte für möglichst viele Menschen zugänglich sein sollten. Mit Accessify erhält deine Website ein zusätzliches Barrierefreiheits-Tool, das über 20 Funktionen bereitstellt – leicht verständlich, direkt nutzbar und ohne Eingriff ins bestehende Design für nur CHF 4,90/Monat (ca. € 5,30/Monat).</span>\n\n <span class=\"acc-lead\">Accessify ist WCAG 2.1-konform und aktualisiert sich automatisch. Du musst dich nicht um Updates kümmern.</span>\n\n <div class=\"acc-stats\">\n <div class=\"acc-stat\">\n <span class=\"acc-stat-number\">20+</span>\n <span class=\"acc-stat-label\">Barrierefreiheits-Funktionen</span>\n </div>\n <div class=\"acc-stat\">\n <span class=\"acc-stat-number\">WCAG 2.1</span>\n <span class=\"acc-stat-label\">Konform & zertifiziert</span>\n </div>\n </div>\n </div>\n\n <div class=\"acc-img-col\">\n <div class=\"acc-deco-1\"></div>\n <div class=\"acc-deco-2\"></div>\n <div class=\"acc-img-wrapper\" tabindex=\"0\" role=\"button\" aria-label=\"Bild vergrößern: Accessify-Funktionen\">\n <span class=\"acc-wcag-badge\">WCAG 2.1</span>\n <img src=\"/s3/d/wsw.website.913/public/images/pages/folder.149/accessify-bild-5.webp\" alt=\"Accessify-Funktionen – Übersicht aller Barrierefreiheits-Features\" loading=\"lazy\">\n <span class=\"acc-zoom-icon\">⊕</span>\n </div>\n\n <div class=\"acc-lightbox\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Bildervorschau\">\n <div class=\"acc-lightbox-backdrop\">\n <button class=\"acc-lightbox-close\" aria-label=\"Schließen\">✕</button>\n <img class=\"acc-lightbox-img\" src=\"/s3/d/wsw.website.913/public/images/pages/folder.149/accessify-bild-5.webp\" alt=\"Accessify-Funktionen – Großansicht\">\n </div>\n </div>\n </div>\n\n </div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n\n var el = document.getElementById('wsw-snippet-ed32452e-b918-4456-8d1b-3cea073448b8');\n if (!el) return;\n\n var wrapper = el.querySelector('.acc-img-wrapper');\n var lightbox = el.querySelector('.acc-lightbox');\n var closeBtn = el.querySelector('.acc-lightbox-close');\n var backdrop = el.querySelector('.acc-lightbox-backdrop');\n var lbImg = el.querySelector('.acc-lightbox-img');\n\n if (!wrapper || !lightbox || !closeBtn || !backdrop) return;\n\n function openLightbox() {\n lightbox.classList.add('is-open');\n document.body.style.overflow = 'hidden';\n closeBtn.focus();\n }\n\n function closeLightbox() {\n lightbox.classList.remove('is-open');\n document.body.style.overflow = '';\n wrapper.focus();\n }\n\n wrapper.addEventListener('click', openLightbox);\n wrapper.addEventListener('keydown', function(e) {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n openLightbox();\n }\n });\n\n closeBtn.addEventListener('click', function(e) {\n e.stopPropagation();\n closeLightbox();\n });\n\n backdrop.addEventListener('click', function(e) {\n if (e.target === backdrop) {\n closeLightbox();\n }\n });\n\n if (lbImg) {\n lbImg.addEventListener('click', function(e) {\n e.stopPropagation();\n });\n }\n\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape' && lightbox.classList.contains('is-open')) {\n closeLightbox();\n }\n });\n\n})();\n</script>","summary":null,"version":1,"inserted_version":1,"total_cost":0.34521339999999995,"total_messages_sent":1,"summarized_at_total":0}

♿ Accessify

Barrierefreiheit wird im digitalen Alltag immer wichtiger.

Nicht nur, weil gesetzliche Anforderungen zunehmen, sondern weil Inhalte für möglichst viele Menschen zugänglich sein sollten. Mit Accessify erhält deine Website ein zusätzliches Barrierefreiheits-Tool, das über 20 Funktionen bereitstellt – leicht verständlich, direkt nutzbar und ohne Eingriff ins bestehende Design für nur CHF 4,90/Monat (ca. € 5,30/Monat). Accessify ist WCAG 2.1-konform und aktualisiert sich automatisch. Du musst dich nicht um Updates kümmern.

20+ Barrierefreiheits-Funktionen

WCAG 2.1 Konform & zertifiziert

WCAG 2.1

Accessify-Funktionen – Übersicht aller Barrierefreiheits-Features

⊕

{"uuid":"422e72d3-6109-4d07-8995-d4d2ab0e149e","provider":"wsw-nova","model":"sirius","image_strategy":"ai_self_select","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":true,"html":"<style>\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e {\n font-family: inherit;\n box-sizing: border-box;\n padding: 4rem 1.5rem;\n background: transparent;\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e *,\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e *::before,\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e *::after {\n box-sizing: inherit;\n }\n\n /* --- Variables --- */\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e {\n --snippet-accent: #922C60;\n --snippet-accent-light: rgba(146, 44, 96, 0.08);\n --snippet-accent-glow: rgba(146, 44, 96, 0.18);\n --snippet-radius: 20px;\n --snippet-transition: 0.25s ease-out;\n }\n\n /* --- Container --- */\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-container {\n max-width: 1100px;\n margin: 0 auto;\n }\n\n /* --- Header --- */\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-header {\n text-align: center;\n margin-bottom: 2rem;\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-badge {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n background: var(--snippet-accent-light);\n color: var(--snippet-accent);\n border-radius: 100px;\n padding: 0.4rem 1.2rem;\n font-weight: 700;\n letter-spacing: 0.06rem;\n margin-bottom: 1.5rem;\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-badge svg {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-header h2 {\n color: var(--snippet-accent);\n margin: 0 0 1rem 0;\n line-height: 1.2;\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-header-desc {\n max-width: 65ch;\n margin: 0 auto;\n color: var(--wsw-color-black, #333);\n line-height: 1.65;\n }\n\n /* --- Steps connector line --- */\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-steps {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0;\n margin-top: 3rem;\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-steps::before {\n content: '';\n position: absolute;\n left: 2rem;\n top: 0;\n bottom: 0;\n width: 3px;\n background: linear-gradient(180deg, var(--snippet-accent-glow) 0%, var(--snippet-accent) 30%, var(--snippet-accent) 70%, var(--snippet-accent-glow) 100%);\n border-radius: 3px;\n }\n\n /* --- Step item --- */\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step {\n position: relative;\n display: flex;\n align-items: flex-start;\n gap: 2rem;\n padding: 2rem 0;\n }\n\n /* --- Step number circle --- */\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-num {\n flex-shrink: 0;\n width: 4rem;\n height: 4rem;\n border-radius: 50%;\n background: var(--snippet-accent);\n color: var(--wsw-color-white, #fff);\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-size: 1.3rem;\n position: relative;\n z-index: 2;\n box-shadow: 0 0 0 6px var(--snippet-accent-light), 0 4px 16px rgba(146,44,96,0.18);\n transition: transform var(--snippet-transition), box-shadow var(--snippet-transition);\n }\n\n /* --- Step card --- */\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card {\n flex: 1;\n background: var(--wsw-color-white, #fff);\n border: 2px solid var(--snippet-accent);\n border-radius: var(--snippet-radius);\n padding: 2rem;\n position: relative;\n overflow: hidden;\n transition: transform var(--snippet-transition), box-shadow var(--snippet-transition);\n box-shadow: 0 2px 12px rgba(0,0,0,0.04);\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 4px;\n background: linear-gradient(90deg, var(--snippet-accent), rgba(146,44,96,0.3));\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 32px rgba(146,44,96,0.12);\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step:hover .wwa-step-num {\n transform: scale(1.08);\n box-shadow: 0 0 0 8px var(--snippet-accent-light), 0 6px 20px rgba(146,44,96,0.22);\n }\n\n /* --- Card image --- */\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-card-img {\n width: 100%;\n max-height: 300px;\n object-fit: contain;\n border-radius: 14px;\n margin-bottom: 1.5rem;\n }\n\n /* --- Card content --- */\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card h3 {\n color: var(--snippet-accent);\n margin: 0 0 0.75rem 0;\n line-height: 1.3;\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card .wwa-text {\n color: var(--wsw-color-black, #333);\n line-height: 1.65;\n margin: 0 0 1rem 0;\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card ul {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: 0.6rem;\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card li {\n display: flex;\n align-items: flex-start;\n gap: 0.6rem;\n color: var(--wsw-color-black, #333);\n line-height: 1.55;\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card li::before {\n content: '';\n flex-shrink: 0;\n width: 8px;\n height: 8px;\n margin-top: 0.5em;\n border-radius: 50%;\n background: var(--snippet-accent);\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card .wwa-highlight {\n display: inline-block;\n background: var(--snippet-accent-light);\n color: var(--snippet-accent);\n font-weight: 700;\n padding: 0.6rem 1rem;\n border-radius: 12px;\n margin-top: 1rem;\n }\n\n /* --- Reduced motion --- */\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e *,\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e *::before,\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n /* --- Dark / black themes --- */\n section.wsw-theme-d #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-header-desc,\n section.wsw-theme-db #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-header-desc,\n section.wsw-theme-b #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-header-desc,\n section.wsw-theme-bb #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-header-desc {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card,\n section.wsw-theme-db #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card,\n section.wsw-theme-b #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card,\n section.wsw-theme-bb #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card {\n background: rgba(255,255,255,0.06);\n border-color: rgba(146,44,96,0.6);\n }\n section.wsw-theme-d #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card .wwa-text,\n section.wsw-theme-db #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card .wwa-text,\n section.wsw-theme-b #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card .wwa-text,\n section.wsw-theme-bb #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card .wwa-text,\n section.wsw-theme-d #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card li,\n section.wsw-theme-db #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card li,\n section.wsw-theme-b #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card li,\n section.wsw-theme-bb #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card li {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card h3,\n section.wsw-theme-db #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card h3,\n section.wsw-theme-b #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card h3,\n section.wsw-theme-bb #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card h3 {\n color: #d86aa5;\n }\n section.wsw-theme-a #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-header h2,\n section.wsw-theme-a #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-header-desc,\n section.wsw-theme-a #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card .wwa-text,\n section.wsw-theme-a #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card li {\n color: rgba(255,255,255,0.9);\n }\n section.wsw-theme-a #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card {\n background: rgba(255,255,255,0.1);\n border-color: rgba(255,255,255,0.3);\n }\n section.wsw-theme-a #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-badge {\n background: rgba(255,255,255,0.15);\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-num {\n background: var(--wsw-color-white, #fff);\n color: var(--snippet-accent);\n box-shadow: 0 0 0 6px rgba(255,255,255,0.15), 0 4px 16px rgba(0,0,0,0.2);\n }\n section.wsw-theme-a #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-steps::before {\n background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0.1) 100%);\n }\n section.wsw-theme-a #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card .wwa-highlight {\n background: rgba(255,255,255,0.15);\n color: var(--wsw-color-white, #fff);\n }\n\n /* --- Scroll animation --- */\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-animate {\n opacity: 0;\n transform: translateY(30px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-animate.wwa-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* --- Responsive --- */\n @media (max-width: 768px) {\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e {\n padding: 2.5rem 1rem;\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-steps::before {\n left: 1.25rem;\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step {\n gap: 1.25rem;\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-num {\n width: 2.5rem;\n height: 2.5rem;\n font-size: 1rem;\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-step-card {\n padding: 1.5rem;\n }\n #wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e .wwa-card-img {\n max-height: 200px;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e\">\n <div class=\"wwa-container\">\n\n \n <div class=\"wwa-header wwa-animate wwa-visible\" style=\"transition-delay: 0s;\">\n <div class=\"wwa-badge\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2a10 10 0 1010 10A10 10 0 0012 2zm-1.7 14.3l-3.6-3.6 1.4-1.4 2.2 2.2 5.2-5.2 1.4 1.4z\"></path></svg>\n <span>So funktioniert's</span>\n </div>\n <h2>Wie wir mit Accessify arbeiten</h2>\n <span class=\"wwa-header-desc\">Für Websites auf Basis des Worldsoft Site Wizards übernehmen wir das Einrichten direkt im System. Wenn du ein anderes CMS nutzt, bekommst du von uns den passenden Code für dein Tool. Hier im Überblick die Details:</span>\n </div>\n\n \n <div class=\"wwa-steps\">\n\n \n <div class=\"wwa-step wwa-animate wwa-visible\" style=\"transition-delay: 0.15s;\">\n <div class=\"wwa-step-num\"><span>1</span></div>\n <div class=\"wwa-step-card\">\n <img class=\"wwa-card-img\" src=\"/s3/d/wsw.website.913/public/images/pages/folder.149/accessify-bild-3.webp\" alt=\"Für unsere WSW-Kunden\" loading=\"lazy\">\n <h3>Für unsere WSW-Kunden (Worldsoft All-In-One-Lösung)</h3>\n <span class=\"wwa-text\">Unsere Kunden arbeiten vollständig mit dem Worldsoft-System. Hier übernehmen wir:</span>\n <ul>\n <li><span>das einmalige Einrichten (€ 49,50 inkl. MwSt.)</span></li>\n <li><span>das Platzieren des Widgets</span></li>\n <li><span>die Abstimmung auf Farben und Position</span></li>\n <li><span>Funktionsauswahl</span></li>\n <li><span>technische Prüfung</span></li>\n <li><span>Unterstützung, wenn Anpassungen sinnvoll sind</span></li>\n </ul>\n <span class=\"wwa-highlight\">Accessify läuft danach eigenständig und aktualisiert sich automatisch.</span>\n </div>\n </div>\n\n \n <div class=\"wwa-step wwa-animate wwa-visible\" style=\"transition-delay: 0.3s;\">\n <div class=\"wwa-step-num\"><span>2</span></div>\n <div class=\"wwa-step-card\">\n <img class=\"wwa-card-img\" src=\"/s3/d/wsw.website.913/public/images/pages/folder.149/accessify-bild-4.webp\" alt=\"Für alle anderen Website-Systeme\" loading=\"lazy\">\n <h3>Für andere Systeme (WordPress, Strato, IONOS, Wix, Webflow usw.)</h3>\n <span class=\"wwa-text\">Für externe Systeme bieten wir kein Einrichten auf der Website und keinen Support an. Du erhältst von uns:</span>\n <ul>\n <li><span><strong>den erstellten Widget-Code</strong> (€ 49,50 inkl. MwSt)</span></li>\n <li><span>eine kurze Information, wo dieser üblicherweise eingefügt wird</span></li>\n </ul>\n <span class=\"wwa-text\" style=\"margin-top: 1rem;\">Die Integration in den <head>-Bereich deines Systems führst du selbst durch – oder dein Webmaster, sofern das jeweilige CMS dies zulässt.</span>\n <span class=\"wwa-highlight\">Updates übernimmt Accessify automatisch.</span>\n </div>\n </div>\n\n </div>\n </div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-422e72d3-6109-4d07-8995-d4d2ab0e149e');\n if (!el) return;\n\n var items = el.querySelectorAll('.wwa-animate');\n if (!items.length) return;\n\n if (!('IntersectionObserver' in window)) {\n items.forEach(function(item) { item.classList.add('wwa-visible'); });\n return;\n }\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('wwa-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n\n items.forEach(function(item, i) {\n item.style.transitionDelay = (i * 0.15) + 's';\n observer.observe(item);\n });\n})();\n</script>","summary":null,"version":3,"inserted_version":3,"total_cost":1.12371,"total_messages_sent":3,"summarized_at_total":0}

So funktioniert's

Wie wir mit Accessify arbeiten

Für Websites auf Basis des Worldsoft Site Wizards übernehmen wir das Einrichten direkt im System. Wenn du ein anderes CMS nutzt, bekommst du von uns den passenden Code für dein Tool. Hier im Überblick die Details:

1

Für unsere WSW-Kunden (Worldsoft All-In-One-Lösung)

Unsere Kunden arbeiten vollständig mit dem Worldsoft-System. Hier übernehmen wir:

das einmalige Einrichten (€ 49,50 inkl. MwSt.)
das Platzieren des Widgets
die Abstimmung auf Farben und Position
Funktionsauswahl
technische Prüfung
Unterstützung, wenn Anpassungen sinnvoll sind

Accessify läuft danach eigenständig und aktualisiert sich automatisch.

2

Für andere Systeme (WordPress, Strato, IONOS, Wix, Webflow usw.)

Für externe Systeme bieten wir kein Einrichten auf der Website und keinen Support an. Du erhältst von uns:

den erstellten Widget-Code (€ 49,50 inkl. MwSt)
eine kurze Information, wo dieser üblicherweise eingefügt wird

Die Integration in den <head>-Bereich deines Systems führst du selbst durch – oder dein Webmaster, sofern das jeweilige CMS dies zulässt. Updates übernimmt Accessify automatisch.

Hier Accessify bestellen

{"uuid":"6655ece7-0592-4a9e-8400-b32ed6760192","provider":"wsw-nova","model":"sirius","image_strategy":"ai_self_select","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":true,"html":"<style>\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 {\n font-family: inherit;\n box-sizing: border-box;\n background: transparent;\n padding: 3rem 1.5rem;\n }\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 *,\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 *::before,\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 *::after {\n box-sizing: inherit;\n }\n\n /* --- Variables --- */\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 {\n --snippet-accent: #922C60;\n --snippet-accent-light: rgba(146, 44, 96, 0.08);\n --snippet-accent-glow: rgba(146, 44, 96, 0.15);\n --snippet-radius: 16px;\n --snippet-transition: 0.25s ease-out;\n }\n\n /* --- Header --- */\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .overview-header {\n text-align: center;\n max-width: 720px;\n margin: 0 auto 3rem;\n }\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .overview-header h2 {\n color: #922C60;\n margin: 0 0 1rem;\n line-height: 1.2;\n }\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .overview-header .overview-subtitle {\n color: var(--wsw-color-black, #333);\n max-width: 65ch;\n margin: 0 auto;\n line-height: 1.6;\n opacity: 0.85;\n }\n\n /* --- Single Row: 5 columns --- */\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .features-row {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 1rem;\n width: 100%;\n margin: 0 auto;\n }\n\n /* --- Card --- */\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card {\n background: var(--wsw-color-white, #fff);\n border: 2px solid var(--snippet-accent-light);\n border-radius: var(--snippet-radius);\n padding: 1.75rem 1.25rem 1.5rem;\n display: flex;\n flex-direction: column;\n transition: transform var(--snippet-transition), box-shadow var(--snippet-transition), border-color var(--snippet-transition);\n position: relative;\n overflow: hidden;\n }\n\n /* --- Top accent edge --- */\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(90deg, #922C60, rgba(146, 44, 96, 0.4));\n transition: height var(--snippet-transition), box-shadow var(--snippet-transition);\n }\n\n /* --- Hover --- */\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card:hover::before {\n height: 6px;\n box-shadow: 0 2px 12px rgba(146, 44, 96, 0.35);\n }\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card:hover {\n transform: translateY(-6px);\n box-shadow: 0 12px 32px rgba(146, 44, 96, 0.12), 0 4px 12px rgba(0,0,0,0.06);\n border-color: var(--snippet-accent);\n }\n\n /* --- Card Icon --- */\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .card-icon {\n width: 44px;\n height: 44px;\n border-radius: 10px;\n background: var(--snippet-accent-light);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.75rem;\n transition: background var(--snippet-transition), transform var(--snippet-transition);\n }\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card:hover .card-icon {\n background: var(--snippet-accent-glow);\n transform: scale(1.08);\n }\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .card-icon svg {\n width: 22px;\n height: 22px;\n fill: none;\n stroke: var(--snippet-accent);\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n /* --- Card Title --- */\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card h3 {\n color: #922C60;\n margin: 0 0 0.35rem;\n font-size: 1.05rem;\n white-space: nowrap;\n }\n\n /* --- Card Description --- */\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .card-desc {\n color: var(--wsw-color-black, #333);\n opacity: 0.75;\n margin-bottom: 0.6rem;\n line-height: 1.45;\n font-size: 0.82rem;\n }\n\n /* --- Feature List --- */\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-list {\n list-style: none;\n padding: 0;\n margin: 0;\n flex: 1;\n }\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-list li {\n display: flex;\n align-items: flex-start;\n gap: 0.4rem;\n padding: 0.25rem 0;\n color: var(--wsw-color-black, #333);\n line-height: 1.4;\n font-size: 0.82rem;\n }\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-list li::before {\n content: '✓';\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: var(--snippet-accent-light);\n color: var(--snippet-accent);\n font-size: 0.6rem;\n font-weight: 700;\n margin-top: 0.1rem;\n }\n\n /* --- Badge --- */\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .card-badge {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n margin-top: 0.85rem;\n padding: 0.25rem 0.65rem;\n border-radius: 999px;\n background: var(--snippet-accent-light);\n color: var(--snippet-accent);\n font-weight: 700;\n font-size: 0.7rem;\n letter-spacing: 0.02rem;\n align-self: flex-start;\n }\n\n /* --- Responsive --- */\n @media (max-width: 1024px) {\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .features-row {\n grid-template-columns: repeat(3, 1fr);\n }\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card h3 {\n white-space: normal;\n }\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .card-desc,\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-list li {\n font-size: 0.88rem;\n }\n }\n @media (max-width: 768px) {\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 {\n padding: 2rem 1rem;\n }\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .features-row {\n grid-template-columns: 1fr;\n gap: 1.25rem;\n }\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card {\n padding: 1.5rem 1.25rem 1.25rem;\n }\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .card-desc,\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-list li {\n font-size: 0.92rem;\n }\n }\n\n /* --- Reduced Motion --- */\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 *,\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 *::before,\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n /* --- Scroll Animation --- */\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card {\n opacity: 0;\n transform: translateY(24px);\n }\n #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card.is-visible {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 0.5s ease-out, transform 0.5s ease-out, box-shadow var(--snippet-transition), border-color var(--snippet-transition);\n }\n\n /* --- Dark / Black Theme --- */\n section.wsw-theme-d #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .overview-header .overview-subtitle,\n section.wsw-theme-db #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .overview-header .overview-subtitle,\n section.wsw-theme-b #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .overview-header .overview-subtitle,\n section.wsw-theme-bb #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .overview-header .overview-subtitle {\n color: var(--wsw-color-light, #f5f5f5);\n }\n section.wsw-theme-d #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card,\n section.wsw-theme-db #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card,\n section.wsw-theme-b #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card,\n section.wsw-theme-bb #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card {\n background: rgba(255,255,255,0.06);\n border-color: rgba(146, 44, 96, 0.25);\n }\n section.wsw-theme-d #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card:hover,\n section.wsw-theme-db #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card:hover,\n section.wsw-theme-b #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card:hover,\n section.wsw-theme-bb #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card:hover {\n border-color: var(--snippet-accent);\n box-shadow: 0 12px 32px rgba(146, 44, 96, 0.2), 0 4px 12px rgba(0,0,0,0.15);\n }\n section.wsw-theme-d #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .card-desc,\n section.wsw-theme-db #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .card-desc,\n section.wsw-theme-b #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .card-desc,\n section.wsw-theme-bb #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .card-desc,\n section.wsw-theme-d #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-list li,\n section.wsw-theme-db #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-list li,\n section.wsw-theme-b #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-list li,\n section.wsw-theme-bb #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-list li {\n color: var(--wsw-color-light, #f5f5f5);\n }\n section.wsw-theme-d #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card h3,\n section.wsw-theme-db #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card h3,\n section.wsw-theme-b #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card h3,\n section.wsw-theme-bb #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card h3 {\n color: #d4609a;\n }\n section.wsw-theme-d #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .overview-header h2,\n section.wsw-theme-db #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .overview-header h2,\n section.wsw-theme-b #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .overview-header h2,\n section.wsw-theme-bb #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .overview-header h2 {\n color: #d4609a;\n }\n section.wsw-theme-d #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card::before,\n section.wsw-theme-db #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card::before,\n section.wsw-theme-b #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card::before,\n section.wsw-theme-bb #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card::before {\n background: linear-gradient(90deg, #d4609a, rgba(212, 96, 154, 0.4));\n }\n\n /* --- Accent Theme --- */\n section.wsw-theme-a #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .overview-header h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .overview-header .overview-subtitle {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card {\n background: rgba(255,255,255,0.12);\n border-color: rgba(255,255,255,0.2);\n }\n section.wsw-theme-a #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .card-desc,\n section.wsw-theme-a #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-list li {\n color: rgba(255,255,255,0.85);\n }\n section.wsw-theme-a #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .card-icon {\n background: rgba(255,255,255,0.15);\n }\n section.wsw-theme-a #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .card-icon svg {\n stroke: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-list li::before {\n background: rgba(255,255,255,0.15);\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .card-badge {\n background: rgba(255,255,255,0.15);\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192 .feature-card::before {\n background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2));\n }\n</style>\n\n<div id=\"wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192\">\n\n \n <div class=\"overview-header\">\n <h2>Alle Accessify-Funktionen im Überblick</h2>\n <span class=\"overview-subtitle\">Accessify bringt eine breite Auswahl an Funktionen mit, die die Nutzung einer Website erleichtern. Alle Funktionen werden direkt im Browser aktiviert – ohne Änderungen am Layout.</span>\n </div>\n\n \n <div class=\"features-row\">\n\n \n <div class=\"feature-card is-visible\">\n <div class=\"card-icon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M4 7V4h16v3\"></path><path d=\"M9 20h6\"></path><path d=\"M12 4v16\"></path></svg>\n </div>\n <h3>Textanpassungen</h3>\n <span class=\"card-desc\">Für bessere Lesbarkeit und ein angenehmes Nutzungserlebnis.</span>\n <ul class=\"feature-list\">\n <li>Schriftgröße anpassen</li>\n <li>Inhalt skalieren (Zoom)</li>\n <li>Zeilenhöhe anpassen</li>\n <li>Buchstabenabstand</li>\n <li>Wortabstand</li>\n <li>Textabstand</li>\n <li>Textausrichtung (links, rechts, zentriert, Blocksatz)</li>\n <li>Lesbare Schrift (dyslexie-freundliche Schriftart)</li>\n </ul>\n <span class=\"card-badge\">8 Funktionen</span>\n </div>\n\n \n <div class=\"feature-card is-visible\">\n <div class=\"card-icon\">\n <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><path d=\"M12 2v20a10 10 0 0 1 0-20z\"></path></svg>\n </div>\n <h3>Kontrast & Farben</h3>\n <span class=\"card-desc\">Für mehr Sichtbarkeit und weniger Belastung.</span>\n <ul class=\"feature-list\">\n <li>Kontrast-Modi (hoch, negativ, hell, leuchtend, Graustufen)</li>\n <li>Nachtmodus</li>\n <li>Blaufilter (einstellbar)</li>\n <li>Sepia-Filter</li>\n <li>Farbschwäche-Filter</li>\n </ul>\n <span class=\"card-badge\">5 Funktionen</span>\n </div>\n\n \n <div class=\"feature-card is-visible\">\n <div class=\"card-icon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M3 12h18\"></path><path d=\"M3 6h18\"></path><path d=\"M3 18h18\"></path><circle cx=\"18\" cy=\"12\" r=\"2\"></circle></svg>\n </div>\n <h3>Navigation</h3>\n <span class=\"card-desc\">Für eine bessere Bedienbarkeit.</span>\n <ul class=\"feature-list\">\n <li>Cursor-Größe (verschiedene Varianten)</li>\n <li>Tastatur-Navigation mit Fokus-Indikatoren</li>\n <li>Verstärkter Fokusrahmen</li>\n <li>Hover-Hervorhebung</li>\n </ul>\n <span class=\"card-badge\">4 Funktionen</span>\n </div>\n\n \n <div class=\"feature-card is-visible\">\n <div class=\"card-icon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"></path><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"></path></svg>\n </div>\n <h3>Lesehilfen</h3>\n <span class=\"card-desc\">Für Nutzer, die zusätzliche Unterstützung benötigen.</span>\n <ul class=\"feature-list\">\n <li>Lesehilfe (fokussierter Bereich folgt dem Mauszeiger)</li>\n <li>Links hervorheben</li>\n <li>Titel hervorheben</li>\n <li>Vorlesen (Text-to-Speech)</li>\n </ul>\n <span class=\"card-badge\">4 Funktionen</span>\n </div>\n\n \n <div class=\"feature-card is-visible\">\n <div class=\"card-icon\">\n <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"3\"></circle><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1.08-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1.08 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1.08 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.26.604.852.997 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1.08z\"></path></svg>\n </div>\n <h3>Weitere Optionen</h3>\n <span class=\"card-desc\">Für Nutzer, die maximale Reduktion bevorzugen.</span>\n <ul class=\"feature-list\">\n <li>Bilder ausblenden</li>\n <li>Animationen stoppen</li>\n </ul>\n <span class=\"card-badge\">2 Funktionen</span>\n </div>\n\n </div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-6655ece7-0592-4a9e-8400-b32ed6760192');\n if (!el) return;\n\n var cards = el.querySelectorAll('.feature-card');\n if (!('IntersectionObserver' in window)) {\n cards.forEach(function(c) { c.classList.add('is-visible'); });\n return;\n }\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n var idx = Array.prototype.indexOf.call(cards, entry.target);\n setTimeout(function() {\n entry.target.classList.add('is-visible');\n }, idx * 100);\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n\n cards.forEach(function(c) { observer.observe(c); });\n})();\n</script>","summary":null,"version":5,"inserted_version":5,"total_cost":2.287054,"total_messages_sent":5,"summarized_at_total":0}

Alle Accessify-Funktionen im Überblick

Accessify bringt eine breite Auswahl an Funktionen mit, die die Nutzung einer Website erleichtern. Alle Funktionen werden direkt im Browser aktiviert – ohne Änderungen am Layout.

Textanpassungen

Für bessere Lesbarkeit und ein angenehmes Nutzungserlebnis.

Schriftgröße anpassen
Inhalt skalieren (Zoom)
Zeilenhöhe anpassen
Buchstabenabstand
Wortabstand
Textabstand
Textausrichtung (links, rechts, zentriert, Blocksatz)
Lesbare Schrift (dyslexie-freundliche Schriftart)

8 Funktionen

Kontrast & Farben

Für mehr Sichtbarkeit und weniger Belastung.

Kontrast-Modi (hoch, negativ, hell, leuchtend, Graustufen)
Nachtmodus
Blaufilter (einstellbar)
Sepia-Filter
Farbschwäche-Filter

5 Funktionen

Navigation

Für eine bessere Bedienbarkeit.

Cursor-Größe (verschiedene Varianten)
Tastatur-Navigation mit Fokus-Indikatoren
Verstärkter Fokusrahmen
Hover-Hervorhebung

4 Funktionen

Lesehilfen

Für Nutzer, die zusätzliche Unterstützung benötigen.

Lesehilfe (fokussierter Bereich folgt dem Mauszeiger)
Links hervorheben
Titel hervorheben
Vorlesen (Text-to-Speech)

4 Funktionen

Weitere Optionen

Für Nutzer, die maximale Reduktion bevorzugen.

Bilder ausblenden
Animationen stoppen

2 Funktionen

{"uuid":"e75bf00d-b0a0-4f0b-854e-533cd0df3f79","provider":"wsw-nova","model":"sirius","image_strategy":"ai_self_select","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":true,"html":"<style>\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 {\n font-family: inherit;\n box-sizing: border-box;\n background: transparent;\n padding: 3.5rem 1.5rem;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 *,\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 *::before,\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 *::after {\n box-sizing: inherit;\n }\n\n /* Variables */\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 {\n --snippet-accent: #922C60;\n --snippet-accent-light: rgba(146, 44, 96, 0.08);\n --snippet-accent-medium: rgba(146, 44, 96, 0.15);\n --snippet-radius: 16px;\n --snippet-transition: 0.25s ease-out;\n }\n\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .snippet-inner {\n max-width: 1100px;\n margin: 0 auto;\n }\n\n /* ── Section Header ── */\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .section-header {\n text-align: center;\n margin-bottom: 3rem;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .section-badge {\n display: inline-block;\n background: var(--snippet-accent-light);\n color: var(--snippet-accent);\n font-weight: 700;\n font-size: 0.8rem;\n letter-spacing: 0.12rem;\n text-transform: uppercase;\n padding: 0.4rem 1.2rem;\n border-radius: 50px;\n margin-bottom: 1.25rem;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .section-header h2 {\n color: var(--snippet-accent);\n margin: 0 0 0.5rem;\n line-height: 1.25;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .section-header .section-divider {\n width: 60px;\n height: 3px;\n background: var(--snippet-accent);\n border-radius: 3px;\n margin: 1rem auto 0;\n border: none;\n }\n\n /* ── Main Content Grid ── */\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .content-block {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2.5rem;\n align-items: start;\n margin-bottom: 3rem;\n }\n\n /* Left: intro text */\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .intro-text {\n line-height: 1.7;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .intro-text span {\n display: block;\n color: var(--wsw-color-black, #333);\n margin-bottom: 1rem;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .intro-text .highlight-line {\n background: var(--snippet-accent-light);\n border-left: 3px solid var(--snippet-accent);\n padding: 0.75rem 1rem;\n border-radius: 0 8px 8px 0;\n margin-bottom: 1.25rem;\n font-weight: 600;\n color: var(--snippet-accent);\n }\n\n /* Right: benefit list */\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .benefit-list {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .benefit-list li {\n display: flex;\n align-items: flex-start;\n gap: 0.75rem;\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(146, 44, 96, 0.12);\n border-radius: 12px;\n padding: 0.85rem 1rem;\n transition: transform var(--snippet-transition), box-shadow var(--snippet-transition);\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .benefit-list li:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(146, 44, 96, 0.1);\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .benefit-icon {\n flex-shrink: 0;\n width: 28px;\n height: 28px;\n background: var(--snippet-accent);\n color: var(--wsw-color-white, #fff);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.85rem;\n margin-top: 0.1rem;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .benefit-list li span {\n color: var(--wsw-color-black, #333);\n }\n\n /* ── SEO / Google Block ── */\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-block {\n background: linear-gradient(135deg, var(--snippet-accent), #7a2450);\n border-radius: var(--snippet-radius);\n padding: 2.5rem;\n color: var(--wsw-color-white, #fff);\n margin-bottom: 3rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-block::before {\n content: '';\n position: absolute;\n top: -40px;\n right: -40px;\n width: 180px;\n height: 180px;\n border-radius: 50%;\n background: rgba(255,255,255,0.08);\n pointer-events: none;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-block::after {\n content: '';\n position: absolute;\n bottom: -60px;\n left: -30px;\n width: 140px;\n height: 140px;\n border-radius: 50%;\n background: rgba(255,255,255,0.05);\n pointer-events: none;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-block h3 {\n color: var(--wsw-color-white, #fff);\n margin: 0 0 1rem;\n position: relative;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-block span {\n display: block;\n color: rgba(255,255,255,0.92);\n line-height: 1.65;\n position: relative;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-block span + span {\n margin-top: 1rem;\n }\n\n /* ── SEO Benefits Cards ── */\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-benefits {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1.5rem;\n margin-bottom: 3rem;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-card {\n background: var(--wsw-color-white, #fff);\n border-radius: var(--snippet-radius);\n padding: 1.75rem 1.5rem;\n text-align: center;\n border: 1px solid rgba(146, 44, 96, 0.1);\n transition: transform var(--snippet-transition), box-shadow var(--snippet-transition);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: var(--snippet-accent);\n border-radius: 3px 3px 0 0;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 32px rgba(146, 44, 96, 0.12);\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-card-icon {\n width: 48px;\n height: 48px;\n background: var(--snippet-accent-light);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 1rem;\n font-size: 1.4rem;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-card h4 {\n color: var(--snippet-accent);\n margin: 0 0 0.5rem;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-card span {\n color: var(--wsw-color-black, #333);\n line-height: 1.55;\n display: block;\n }\n\n /* ── Bottom Insight Block ── */\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .insight-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n margin-bottom: 2.5rem;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .insight-card {\n background: var(--snippet-accent-light);\n border-radius: var(--snippet-radius);\n padding: 2rem;\n text-align: center;\n transition: transform var(--snippet-transition);\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .insight-card:hover {\n transform: translateY(-3px);\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .insight-number {\n display: block;\n font-size: clamp(2rem, 5vw, 3rem);\n font-weight: 700;\n color: var(--snippet-accent);\n line-height: 1.1;\n margin-bottom: 0.5rem;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .insight-card span {\n display: block;\n color: var(--wsw-color-black, #333);\n line-height: 1.55;\n }\n\n /* ── Closing statement ── */\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .closing {\n text-align: center;\n max-width: 800px;\n margin: 0 auto;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .closing span {\n display: block;\n color: var(--wsw-color-black, #333);\n line-height: 1.65;\n margin-bottom: 1rem;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .closing .closing-highlight {\n font-weight: 700;\n color: var(--snippet-accent);\n font-size: 1.15em;\n }\n\n /* ── Dark / Black Themes ── */\n section.wsw-theme-d #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .intro-text span,\n section.wsw-theme-db #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .intro-text span,\n section.wsw-theme-b #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .intro-text span,\n section.wsw-theme-bb #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .intro-text span,\n section.wsw-theme-d #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .benefit-list li span,\n section.wsw-theme-db #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .benefit-list li span,\n section.wsw-theme-b #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .benefit-list li span,\n section.wsw-theme-bb #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .benefit-list li span,\n section.wsw-theme-d #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-card span,\n section.wsw-theme-db #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-card span,\n section.wsw-theme-b #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-card span,\n section.wsw-theme-bb #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-card span,\n section.wsw-theme-d #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .insight-card span,\n section.wsw-theme-db #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .insight-card span,\n section.wsw-theme-b #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .insight-card span,\n section.wsw-theme-bb #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .insight-card span,\n section.wsw-theme-d #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .closing span,\n section.wsw-theme-db #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .closing span,\n section.wsw-theme-b #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .closing span,\n section.wsw-theme-bb #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .closing span {\n color: var(--wsw-color-white, #fff);\n }\n\n section.wsw-theme-d #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .benefit-list li,\n section.wsw-theme-db #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .benefit-list li,\n section.wsw-theme-b #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .benefit-list li,\n section.wsw-theme-bb #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .benefit-list li {\n background: rgba(255,255,255,0.06);\n border-color: rgba(146, 44, 96, 0.25);\n }\n\n section.wsw-theme-d #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-card,\n section.wsw-theme-db #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-card,\n section.wsw-theme-b #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-card,\n section.wsw-theme-bb #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-card {\n background: rgba(255,255,255,0.06);\n border-color: rgba(146, 44, 96, 0.25);\n }\n\n section.wsw-theme-d #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .insight-card,\n section.wsw-theme-db #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .insight-card,\n section.wsw-theme-b #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .insight-card,\n section.wsw-theme-bb #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .insight-card {\n background: rgba(146, 44, 96, 0.2);\n }\n\n /* Accent theme */\n section.wsw-theme-a #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .section-header h2,\n section.wsw-theme-a #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-card h4 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .section-badge {\n background: rgba(255,255,255,0.2);\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .intro-text span,\n section.wsw-theme-a #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .benefit-list li span,\n section.wsw-theme-a #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-card span,\n section.wsw-theme-a #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .insight-card span,\n section.wsw-theme-a #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .closing span {\n color: var(--wsw-color-white, #fff);\n }\n\n /* ── Reduced Motion ── */\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 *,\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 *::before,\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n /* ── Scroll Animation Initial State ── */\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .animate-on-scroll {\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.5s ease-out, transform 0.5s ease-out;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .animate-on-scroll.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 {\n padding: 2.5rem 1rem;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .content-block {\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-benefits {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .seo-block {\n padding: 1.75rem 1.25rem;\n }\n #wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79 .insight-grid {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79\">\n <div class=\"snippet-inner\">\n\n \n <div class=\"section-header animate-on-scroll is-visible\">\n <span class=\"section-badge\">Barrierefreiheit</span>\n <h2>Warum Accessify eine sinnvolle Ergänzung ist</h2>\n <div class=\"section-divider\"></div>\n </div>\n\n \n <div class=\"content-block animate-on-scroll is-visible\">\n <div class=\"intro-text\">\n <span>Accessify ersetzt keine vollständig barrierefrei entwickelte Website, ist aber WCAG 2.1-konform und erfüllt somit internationale Barriere-Standards.</span>\n <span>Es verbessert die Nutzbarkeit spürbar – insbesondere für Menschen mit Sehschwächen, Konzentrationsschwierigkeiten oder eingeschränkter Motorik.</span>\n <span class=\"highlight-line\">Gerade kleine Unternehmen profitieren davon:</span>\n </div>\n <ul class=\"benefit-list\">\n <li>\n <span class=\"benefit-icon\">✓</span>\n <span>weil die technische Umsetzung einfach bleibt</span>\n </li>\n <li>\n <span class=\"benefit-icon\">✓</span>\n <span>weil Accessify die Inhalte sofort zugänglicher macht</span>\n </li>\n <li>\n <span class=\"benefit-icon\">✓</span>\n <span>weil das Tool unabhängig vom System arbeitet</span>\n </li>\n </ul>\n </div>\n\n \n <div class=\"seo-block animate-on-scroll is-visible\">\n <h3>Barrierefreiheit & SEO – ein starkes Duo</h3>\n <span>Und: Es kann helfen, Barrieren zu reduzieren, ohne ein Redesign der gesamten Website vorzunehmen.</span>\n <span>Google bewertet Websites längst nicht mehr nur nach Ladezeit und Keywords. Entscheidend ist, wie nutzerfreundlich deine Seite wirklich ist – und Barrierefreiheit gehört ganz vorne mit dazu. Eine zugängliche Website stärkt nicht nur deine Sichtbarkeit, sondern auch dein Standing als modernes, verantwortungsvolles Unternehmen.</span>\n <span>Viele unterschätzen, wie stark Barrierefreiheit die Core Web Vitals beeinflusst. Google schaut genau hin – und schlechte UX kostet Sichtbarkeit.</span>\n </div>\n\n \n <div class=\"seo-benefits\">\n <div class=\"seo-card animate-on-scroll is-visible\">\n <div class=\"seo-card-icon\">📈</div>\n <h4>Bessere Rankings</h4>\n <span>Bessere Rankings dank optimierter UX</span>\n </div>\n <div class=\"seo-card animate-on-scroll is-visible\">\n <div class=\"seo-card-icon\">🌐</div>\n <h4>Mehr Reichweite</h4>\n <span>Mehr Reichweite und zufriedenere Nutzer</span>\n </div>\n <div class=\"seo-card animate-on-scroll is-visible\">\n <div class=\"seo-card-icon\">🛡</div>\n <h4>Rechtliche Sicherheit</h4>\n <span>Rechtliche Sicherheit mit Blick auf die neuen Vorgaben</span>\n </div>\n </div>\n\n \n <div class=\"closing animate-on-scroll is-visible\" style=\"margin-bottom: 2.5rem;\">\n <span>Barrierefreie Websites bieten eine klare Struktur, gute Lesbarkeit, intuitive Navigation und starke Kontraste. Genau das, was Google liebt: weniger Absprünge, bessere Interaktionen, mehr Anfragen.</span>\n </div>\n\n \n <div class=\"insight-grid\">\n <div class=\"insight-card animate-on-scroll is-visible\">\n <span class=\"insight-number\">74 %</span>\n <span>der befragten Unternehmen glauben, bereits Kunden verloren zu haben aufgrund fehlender Barrierefreiheitsmaßnahmen auf ihrer Website.</span>\n </div>\n <div class=\"insight-card animate-on-scroll is-visible\">\n <span class=\"insight-number\">39 %</span>\n <span>der Unternehmen konnten bestätigen, eine verbesserte SEO-Leistung und mehr Kundenreichweite zu erzielen, nachdem Maßnahmen implementiert wurden.</span>\n </div>\n </div>\n\n \n <div class=\"closing animate-on-scroll is-visible\">\n <span class=\"closing-highlight\">Wenn du jetzt nachrüstest, sicherst du dir einen echten Vorsprung.</span>\n <span>Accessify unterstützt dich dabei, deine Website Schritt für Schritt barrierefreier und nutzerfreundlicher zu machen.</span>\n </div>\n\n </div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-e75bf00d-b0a0-4f0b-854e-533cd0df3f79');\n if (!el) return;\n\n var items = el.querySelectorAll('.animate-on-scroll');\n if (!items.length) return;\n\n if (!('IntersectionObserver' in window)) {\n items.forEach(function(item) { item.classList.add('is-visible'); });\n return;\n }\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n\n items.forEach(function(item) { observer.observe(item); });\n})();\n</script>","summary":null,"version":1,"inserted_version":1,"total_cost":0.39507159999999997,"total_messages_sent":1,"summarized_at_total":0}

Barrierefreiheit

Warum Accessify eine sinnvolle Ergänzung ist

Accessify ersetzt keine vollständig barrierefrei entwickelte Website, ist aber WCAG 2.1-konform und erfüllt somit internationale Barriere-Standards. Es verbessert die Nutzbarkeit spürbar – insbesondere für Menschen mit Sehschwächen, Konzentrationsschwierigkeiten oder eingeschränkter Motorik. Gerade kleine Unternehmen profitieren davon:

✓ weil die technische Umsetzung einfach bleibt
✓ weil Accessify die Inhalte sofort zugänglicher macht
✓ weil das Tool unabhängig vom System arbeitet

Barrierefreiheit & SEO – ein starkes Duo

Und: Es kann helfen, Barrieren zu reduzieren, ohne ein Redesign der gesamten Website vorzunehmen. Google bewertet Websites längst nicht mehr nur nach Ladezeit und Keywords. Entscheidend ist, wie nutzerfreundlich deine Seite wirklich ist – und Barrierefreiheit gehört ganz vorne mit dazu. Eine zugängliche Website stärkt nicht nur deine Sichtbarkeit, sondern auch dein Standing als modernes, verantwortungsvolles Unternehmen. Viele unterschätzen, wie stark Barrierefreiheit die Core Web Vitals beeinflusst. Google schaut genau hin – und schlechte UX kostet Sichtbarkeit.

📈

Bessere Rankings

Bessere Rankings dank optimierter UX

🌐

Mehr Reichweite

Mehr Reichweite und zufriedenere Nutzer

🛡

Rechtliche Sicherheit

Rechtliche Sicherheit mit Blick auf die neuen Vorgaben

Barrierefreie Websites bieten eine klare Struktur, gute Lesbarkeit, intuitive Navigation und starke Kontraste. Genau das, was Google liebt: weniger Absprünge, bessere Interaktionen, mehr Anfragen.

74 % der befragten Unternehmen glauben, bereits Kunden verloren zu haben aufgrund fehlender Barrierefreiheitsmaßnahmen auf ihrer Website.

39 % der Unternehmen konnten bestätigen, eine verbesserte SEO-Leistung und mehr Kundenreichweite zu erzielen, nachdem Maßnahmen implementiert wurden.

Wenn du jetzt nachrüstest, sicherst du dir einen echten Vorsprung. Accessify unterstützt dich dabei, deine Website Schritt für Schritt barrierefreier und nutzerfreundlicher zu machen.

Hier jetzt Accessify bestellen!

Mehr Barrierefreiheit für deine Website