Seit dem Barrierefreiheitsstärkungsgesetz (BFSG) müssen viele Unternehmen ihre Websites barrierefrei gestalten. Doch wie prüfen Sie schnell und effektiv, ob Ihre Website die Anforderungen erfüllt? In diesem Artikel zeigen wir Ihnen, wie Sie in nur 30 Minuten ein grundlegendes BFSG-Audit durchführen können – auch ohne technisches Spezialwissen. So verschaffen Sie sich einen ersten Überblick und wissen genau, wo Handlungsbedarf besteht.

Was ist das BFSG und wen betrifft es?

Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt die EU-Richtlinie 2019/882 (European Accessibility Act) in deutsches Recht um. Ab dem 28. Juni 2025 müssen Unternehmen, die Produkte oder Dienstleistungen für Verbraucher anbieten, diese barrierefrei gestalten – das schließt auch Websites und Online-Shops ein.

Betroffen sind:

Online-Shops und E-Commerce-Plattformen
Banken und Finanzdienstleister
Telekommunikationsanbieter
Verkehrsunternehmen mit Online-Buchungssystemen
E-Book-Anbieter und digitale Medien
Unternehmen mit mehr als 10 Mitarbeitern und über 2 Mio. Euro Jahresumsatz

Wichtig: Auch wenn Sie formal nicht unter das BFSG fallen, profitieren Sie von einer barrierefreien Website. Sie erreichen mehr Nutzer, verbessern Ihre SEO-Rankings und zeigen soziale Verantwortung.

Die technische Grundlage bilden die Web Content Accessibility Guidelines (WCAG) 2.1 auf Level AA. Diese international anerkannten Standards definieren, was eine barrierefreie Website ausmacht.

Vorbereitung: Was Sie für Ihr 30-Minuten-Audit brauchen

Bevor Sie starten, sollten Sie folgende Tools und Hilfsmittel bereithalten:

Browser-Erweiterungen: WAVE (Web Accessibility Evaluation Tool), axe DevTools oder Lighthouse (in Chrome integriert)
Tastatur: Für die Navigation ohne Maus
Screenreader: NVDA (Windows, kostenlos) oder VoiceOver (Mac, vorinstalliert)
Kontrastprüfer: WebAIM Contrast Checker oder direkt im WAVE-Tool
Checkliste: Eine einfache Liste zum Abhaken (siehe unten)

Wählen Sie für Ihr Audit repräsentative Seiten aus Ihrer Website aus:

Startseite
Eine Inhaltsseite mit Text und Bildern
Kontaktformular oder Anmeldeseite
Produktseite (bei Online-Shops)
Navigation und Menü

Tipp: Dokumentieren Sie Ihre Prüfungen mit Screenshots. So können Sie später nachvollziehen, welche Probleme wo aufgetreten sind und den Fortschritt nach Optimierungen messen.

Phase 1: Automatische Prüfung mit Tools (10 Minuten)

Automatisierte Tools erfassen etwa 30-40% aller Barrierefreiheitsprobleme – ein guter Startpunkt für Ihr Audit.

WAVE Browser-Extension nutzen

Installieren Sie WAVE für Chrome oder Firefox und rufen Sie Ihre Startseite auf. Klicken Sie auf das WAVE-Icon, um die Analyse zu starten. Das Tool zeigt Ihnen:

Errors (rot): Kritische Probleme, die sofort behoben werden müssen
Alerts (gelb): Potenzielle Probleme, die manuell geprüft werden sollten
Features (grün): Vorhandene Accessibility-Features
Contrast Errors: Farbkontraste, die zu schwach sind

Google Lighthouse verwenden

Öffnen Sie die Chrome DevTools (F12), wechseln Sie zum Tab "Lighthouse" und führen Sie eine Accessibility-Prüfung durch. Sie erhalten einen Score von 0-100 sowie konkrete Verbesserungsvorschläge.

Häufigste automatisch erkannte Probleme:

Fehlende Alt-Texte bei Bildern
Zu geringe Farbkontraste (Text zu hell auf hellem Hintergrund)
Fehlende Formular-Labels
Fehlende ARIA-Landmarks für die Seitenstruktur
Überschriften-Hierarchie nicht logisch (H1, dann H3, ohne H2)

Praxis-Tipp: Notieren Sie die Anzahl der Errors pro Seitentyp. So identifizieren Sie schnell, welche Templates in Ihrem Webdesign überarbeitet werden müssen.

Phase 2: Tastatur-Navigation testen (10 Minuten)

Viele Menschen mit Behinderungen navigieren ohne Maus – nur mit der Tastatur. Dieser Test ist essentiell und schnell durchführbar.

Die wichtigsten Tastatur-Tests

Legen Sie Ihre Maus beiseite und navigieren Sie ausschließlich mit diesen Tasten:

Tab: Zum nächsten interaktiven Element springen
Shift + Tab: Zum vorherigen Element zurück
Enter: Links und Buttons aktivieren
Leertaste: Checkboxen aktivieren, scrollen
Pfeiltasten: In Dropdown-Menüs navigieren

Worauf Sie achten sollten

Prüfen Sie folgende Punkte auf jeder Testseite:

Sichtbarer Focus: Sehen Sie immer, wo Sie sich gerade befinden? Der Fokus-Indikator muss deutlich erkennbar sein (meist ein farbiger Rahmen).
Logische Reihenfolge: Folgt die Tab-Reihenfolge dem visuellen Aufbau der Seite?
Erreichbarkeit: Können Sie alle interaktiven Elemente (Links, Buttons, Formulare, Menüs) erreichen?
Tastaturfallen: Können Sie aus jedem Element auch wieder heraus navigieren (z.B. aus Modal-Dialogen)?
Skip-Links: Gibt es einen "Zum Inhalt springen"-Link am Seitenanfang?

Häufiger Fehler: Dropdown-Menüs, die nur auf Hover funktionieren, sind mit der Tastatur nicht bedienbar. Stellen Sie sicher, dass auch Tasten-Navigation unterstützt wird.

Phase 3: Screenreader-Check (10 Minuten)

Ein kurzer Test mit einem Screenreader zeigt Ihnen, wie Menschen mit Sehbehinderung Ihre Website erleben. Für den Schnellcheck reicht eine Basisprüfung.

Screenreader starten

Windows (NVDA): Nach Installation mit Strg + Alt + N starten
Mac (VoiceOver): Cmd + F5 drücken
iPhone: Einstellungen → Bedienungshilfen → VoiceOver

Basis-Navigation mit Screenreader

Sie müssen kein Screenreader-Experte sein. Testen Sie einfach:

Seitentitel: Wird beim Laden der Seite der korrekte Titel vorgelesen?
Überschriften: Navigieren Sie mit H (NVDA) bzw. Cmd+H (VoiceOver) durch die Überschriften. Ergeben sie eine logische Struktur?
Links: Sind Linktexte aussagekräftig? "Hier klicken" ist nicht barrierefrei, "Mehr über unsere Leistungen" schon.
Bilder: Werden Bilder mit sinnvollen Alt-Texten beschrieben?
Formulare: Wird bei jedem Eingabefeld vorgelesen, was eingetragen werden soll?

Hören Sie sich mindestens die Startseite und ein Formular an. Das gibt Ihnen einen guten Eindruck, ob die wichtigsten Informationen auch auditiv zugänglich sind.

Realitätscheck: Schließen Sie die Augen und versuchen Sie, sich nur über den Screenreader auf Ihrer Website zurechtzufinden. Würden Sie Ihr Ziel erreichen? Wenn nicht, haben Sie konkreten Optimierungsbedarf.

Checkliste: Die 15 wichtigsten Prüfpunkte

Nutzen Sie diese kompakte Checkliste für Ihr 30-Minuten-Audit. Haken Sie jeden Punkt ab, den Ihre Website erfüllt:

☐ Alle Bilder haben aussagekräftige Alt-Texte (oder alt="" bei Dekorationsbildern)
☐ Farbkontrast Text/Hintergrund mindestens 4,5:1 (normaler Text) bzw. 3:1 (große Texte)
☐ Überschriften logisch hierarchisch geordnet (H1 → H2 → H3)
☐ Alle Formularfelder haben sichtbare und verknüpfte Labels
☐ Fehlermeldungen in Formularen sind klar und hilfreich
☐ Komplette Navigation mit Tastatur möglich
☐ Fokus-Indikator immer deutlich sichtbar
☐ Skip-Link zum Hauptinhalt vorhanden
☐ Links haben aussagekräftige Texte (nicht "hier" oder "mehr")
☐ Videos haben Untertitel oder Transkripte
☐ Seite funktioniert bei 200% Zoom ohne horizontales Scrollen
☐ Keine automatisch abspielenden Medien oder Animationen (oder abschaltbar)
☐ Sprachangabe im HTML-Tag ()
☐ Seitentitel () ist eindeutig und beschreibend</li> <li>☐ Alle interaktiven Elemente sind groß genug (mindestens 44×44 Pixel)</li> </ul> <p>Je mehr Punkte Sie abhaken können, desto besser steht es um die Barrierefreiheit Ihrer Website. Bei weniger als 10 von 15 Punkten besteht dringender Handlungsbedarf.</p> <h2>Nach dem Audit: Nächste Schritte</h2> <p>Sie haben nun einen ersten Überblick über den Barrierefreiheitsstatus Ihrer Website. Was tun mit den Ergebnissen?</p> <h3>Prioritäten setzen</h3> <p>Nicht alle Probleme sind gleich kritisch. Konzentrieren Sie sich zuerst auf:</p> <ol> <li><strong>Kritische Barrieren:</strong> Probleme, die Nutzer komplett ausschließen (z.B. nicht mit Tastatur bedienbare Formulare)</li> <li><strong>Häufige Probleme:</strong> Fehler, die auf vielen Seiten auftreten (z.B. fehlende Alt-Texte in Templates)</li> <li><strong>Quick Wins:</strong> Einfach zu behebende Probleme mit großer Wirkung (z.B. Kontraste anpassen)</li> </ol> <h3>Professionelle Unterstützung</h3> <p>Ein 30-Minuten-Audit deckt Grundlagen ab, ersetzt aber kein umfassendes Accessibility-Audit. Für eine vollständige BFSG-Konformität empfehlen wir:</p> <ul> <li>Detailliertes technisches Audit durch Experten</li> <li>Benutzer-Tests mit Menschen mit Behinderungen</li> <li>Schulung Ihres Teams in barrierefreier Webentwicklung</li> <li>Kontinuierliche Überwachung bei neuen Inhalten</li> </ul> <div class="cta-box"> <h3>Barrierefreie Website von Anfang an</h3> <p>Sie planen eine neue Website oder einen Relaunch? Wir bei TwoPixels integrieren Barrierefreiheit von Beginn an in Ihre <a href="/webdesign">Webdesign-Projekte</a> – für eine Website, die alle Nutzer erreicht und BFSG-konform ist. <a href="/contact">Kontaktieren Sie uns</a> für ein unverbindliches Beratungsgespräch.</p> </div> <h2>Barrierefreiheit als Chance verstehen</h2> <p>Das BFSG mag zunächst wie eine zusätzliche Pflicht wirken, ist aber eine große Chance. Eine barrierefreie Website ist:</p> <ul> <li><strong>Nutzerfreundlicher für alle:</strong> Klare Struktur, gute Kontraste und logische Navigation helfen allen Besuchern</li> <li><strong>Besser für SEO:</strong> Suchmaschinen belohnen strukturierte, semantisch korrekte Websites</li> <li><strong>Zukunftssicher:</strong> Sie sind vorbereitet für wachsende rechtliche Anforderungen</li> <li><strong>Reichweitenstärker:</strong> Sie schließen 10-15% der Bevölkerung nicht aus</li> <li><strong>Image-fördernd:</strong> Sie zeigen soziale Verantwortung und Kundenorientierung</li> </ul> <p>Besonders für lokale Unternehmen in Friesland, Wilhelmshaven und Schortens ist eine barrierefreie Website ein Wettbewerbsvorteil – nicht nur gesetzeskonform, sondern auch kundenfreundlich.</p> <h2>Fazit: 30 Minuten, die sich lohnen</h2> <p>Ein schnelles BFSG-Audit verschafft Ihnen Klarheit über den Stand Ihrer Website-Barrierefreiheit. Mit automatischen Tools, Tastatur-Tests und einem Screenreader-Check decken Sie die wichtigsten Problembereiche auf. Die gewonnenen Erkenntnisse sind der erste Schritt zu einer inklusiven, BFSG-konformen Website, die alle Nutzer erreicht.</p> <p>Denken Sie daran: Barrierefreiheit ist kein einmaliges Projekt, sondern ein kontinuierlicher Prozess. Beginnen Sie mit den kritischen Punkten und verbessern Sie Ihre Website Schritt für Schritt. Ihr 30-Minuten-Audit ist dafür die perfekte Grundlage.</p> <p>Sie möchten mehr über barrierefreie Webentwicklung erfahren oder professionelle Unterstützung für Ihr BFSG-Audit? TwoPixels steht Ihnen mit umfassender <a href="/beratung">Beratung</a> und technischer Expertise zur Seite – von der Analyse bis zur Umsetzung.</p> <h2>Häufig gestellte Fragen</h2> <h3>Wann muss meine Website BFSG-konform sein?</h3> <p>Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt ab dem 28. Juni 2025 für Unternehmen, die Produkte oder Dienstleistungen für Verbraucher anbieten. Betroffen sind vor allem Online-Shops, Banken, Telekommunikationsanbieter und größere Unternehmen. Die Stichtagsregelung bedeutet: Websites, die nach dem 28. Juni 2025 erstellt oder wesentlich überarbeitet werden, müssen die Standards erfüllen. Bestehende Websites haben Übergangszeiträume, sollten aber zeitnah angepasst werden.</p> <h3>Reicht ein automatisches Tool-Audit aus?</h3> <p>Nein, automatische Tools wie WAVE oder Lighthouse erkennen nur etwa 30-40% aller Barrierefreiheitsprobleme. Sie sind hervorragend für einen ersten Überblick und erkennen technische Fehler wie fehlende Alt-Texte oder Kontrastprobleme. Für echte BFSG-Konformität brauchen Sie zusätzlich manuelle Tests (Tastatur, Screenreader) und idealerweise Tests mit Menschen mit Behinderungen. Kombinieren Sie automatische und manuelle Prüfungen für aussagekräftige Ergebnisse.</p> <h3>Was kostet es, eine Website barrierefrei zu machen?</h3> <p>Die Kosten variieren stark je nach aktuellem Zustand und Umfang der Website. Bei einem Relaunch von Grund auf entstehen kaum Mehrkosten, wenn Barrierefreiheit von Anfang an eingeplant wird. Nachträgliche Anpassungen an bestehenden Websites können zwischen 2.000 und 15.000 Euro kosten, abhängig von der Komplexität. Kleine Fixes (Kontraste, Alt-Texte) sind oft innerhalb weniger Stunden erledigt, strukturelle Änderungen (Navigation, Formulare) benötigen mehr Aufwand. Ein <a href="/webdesign">professionelles Webdesign-Team</a> kann Ihnen nach einem Audit eine konkrete Kostenschätzung geben.</p> <h3>Welche WCAG-Stufe muss ich erfüllen?</h3> <p>Das BFSG verlangt die Erfüllung der <strong>WCAG 2.1 Level AA</strong>. Das ist die mittlere von drei Stufen (A, AA, AAA). Level AA deckt die wichtigsten Barrierefreiheitsanforderungen ab und ist für die meisten Websites realistisch umsetzbar. Level AAA ist der höchste Standard und für spezielle Anwendungen (z.B. Gesundheitswesen, Behörden) relevant. Konzentrieren Sie sich zunächst auf AA – das erfüllt die gesetzlichen Anforderungen und bietet bereits ein hohes Maß an Zugänglichkeit.</p> <h3>Muss auch mein Online-Shop barrierefrei sein?</h3> <p>Ja, Online-Shops sind explizit vom BFSG betroffen. E-Commerce-Plattformen müssen vollständig barrierefrei sein – von der Produktsuche über die Detailseiten bis zum Checkout-Prozess. Das betrifft Shop-Systeme wie <a href="/webshop">WooCommerce</a>, <a href="/shopify">Shopify</a> oder <a href="/jtl-automatisierung">JTL-Shop</a>. Achten Sie besonders auf: navigierbare Produktfilter, verständliche Produktbeschreibungen, barrierefreie Warenkörbe und Checkout-Formulare mit klaren Fehlermeldungen. Eine barrierefreie Shop-Optimierung zahlt sich durch höhere Conversion-Rates aus.</p> <h3>Wie teste ich Farbkontraste richtig?</h3> <p>Farbkontraste prüfen Sie mit Tools wie dem WebAIM Contrast Checker oder direkt im WAVE-Tool. Der Mindestkontrast beträgt <strong>4,5:1 für normalen Text</strong> und <strong>3:1 für großen Text</strong> (ab 18pt oder 14pt fett). Testen Sie alle Text-Hintergrund-Kombinationen: Fließtext, Überschriften, Button-Beschriftungen, Link-Texte. Häufige Problemfälle sind graue Texte auf weißem Hintergrund oder helle Buttons. Tools zeigen Ihnen direkt das Kontrastverhältnis und ob es WCAG-konform ist. Tipp: Vermeiden Sie, Informationen nur über Farbe zu vermitteln (z.B. rote Fehlermeldungen ohne Text).</p> <h3>Was sind die häufigsten Barrierefreiheitsfehler?</h3> <p>Die Top 5 Barrierefreiheitsfehler auf Websites sind: <strong>1)</strong> Fehlende oder nichtssagende Alt-Texte bei Bildern, <strong>2)</strong> Zu geringe Farbkontraste zwischen Text und Hintergrund, <strong>3)</strong> Formulare ohne Labels oder mit unklaren Fehlermeldungen, <strong>4)</strong> Fehlende Tastatur-Bedienbarkeit bei interaktiven Elementen, <strong>5)</strong> Unlogische Überschriftenstruktur. Diese fünf Fehler machen etwa 70% aller Accessibility-Probleme aus. Die gute Nachricht: Sie lassen sich oft mit überschaubarem Aufwand beheben und haben sofort spürbare Verbesserungen zur Folge.</p> <h3>Brauche ich eine Barrierefreiheitserklärung auf meiner Website?</h3> <p>Eine <strong>Barrierefreiheitserklärung ist aktuell vor allem für öffentliche Stellen verpflichtend</strong> (nach EU-Richtlinie 2016/2102). Für private Unternehmen unter dem BFSG gibt es noch keine explizite Pflicht zu einer solchen Erklärung, es wird jedoch empfohlen. Eine freiwillige Erklärung zeigt Ihr Engagement und informiert Nutzer über den Status der Barrierefreiheit, bekannte Einschränkungen und Kontaktmöglichkeiten für Feedback. Sie kann auch rechtlich absichernd wirken, indem Sie dokumentieren, welche Maßnahmen Sie ergriffen haben. Beobachten Sie die Rechtsentwicklung – Anforderungen können sich konkretisieren.</p> <h2>Glossar: Wichtige Begriffe zur Barrierefreiheit</h2> <p><strong>BFSG (Barrierefreiheitsstärkungsgesetz):</strong> Deutsches Gesetz zur Umsetzung des European Accessibility Act. Verpflichtet Unternehmen ab Juni 2025, digitale Produkte und Dienstleistungen barrierefrei zu gestalten.</p> <p><strong>WCAG (Web Content Accessibility Guidelines):</strong> Internationale Standards für barrierefreie Webinhalte, entwickelt vom W3C. Aktuell relevant ist Version 2.1 mit drei Konformitätsstufen: A (minimal), AA (mittel, vom BFSG gefordert), AAA (höchste Stufe).</p> <p><strong>Alt-Text (Alternativtext):</strong> Textbeschreibung für Bilder, die von Screenreadern vorgelesen wird. Ermöglicht Menschen mit Sehbehinderung, Bildinhalte zu verstehen. Dekorative Bilder erhalten ein leeres alt="" Attribut.</p> <p><strong>Screenreader:</strong> Software, die Bildschirminhalte in Sprache oder Braille-Zeichen umwandelt. Ermöglicht blinden und sehbehinderten Menschen die Computernutzung. Beispiele: NVDA, JAWS, VoiceOver.</p> <p><strong>Fokus-Indikator:</strong> Visuelle Hervorhebung (meist farbiger Rahmen), die anzeigt, welches Element gerade bei Tastatur-Navigation ausgewählt ist. Essentiell für Nutzer, die ohne Maus navigieren.</p> <p><strong>ARIA (Accessible Rich Internet Applications):</strong> Technische Spezifikation zur Verbesserung der Barrierefreiheit von dynamischen Webinhalten. ARIA-Attribute liefern zusätzliche Informationen für assistive Technologien.</p> <p><strong>Kontrastverhältnis:</strong> Mathematisches Verhältnis zwischen der Helligkeit von Text und Hintergrund. WCAG AA fordert mindestens 4,5:1 für normalen Text und 3:1 für großen Text.</p> <p><strong>Assistive Technologien:</strong> Sammelbegriff für Hilfstechnologien, die Menschen mit Behinderungen die Computernutzung ermöglichen. Dazu gehören Screenreader, Vergrößerungssoftware, Sprachsteuerung und alternative Eingabegeräte.</p> </div>  <div class="share-buttons"> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.twopixels.de%2Fblog-post.php%3Fslug%3Dbarrierefreie-website-pruefen-bfsg-audit-30-minuten&title=BFSG-Audit%3A+Barrierefreie+Website+in+30+Minuten+pr%C3%BCfen" target="_blank" class="share-btn"> Auf LinkedIn teilen </a> <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.twopixels.de%2Fblog-post.php%3Fslug%3Dbarrierefreie-website-pruefen-bfsg-audit-30-minuten&text=BFSG-Audit%3A+Barrierefreie+Website+in+30+Minuten+pr%C3%BCfen" target="_blank" class="share-btn"> Auf Twitter teilen </a> </div> </article> </div> </section>  <section class="cta-section"> <div class="container"> <h2>Haben Sie Fragen zu diesem Thema?</h2> <p>Wir beraten Sie gerne persönlich und unverbindlich</p> <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;"> <a href="/contact" class="btn btn-primary" style="background: white; color: var(--primary-orange);">Kontakt aufnehmen</a> <a href="/artikel" class="btn btn-outline" style="border-color: white; color: white;">Weitere Artikel lesen</a> </div> </div> </section> <div class="tp-sticky-cta" id="tpStickyCta" aria-label="Kontakt aufnehmen"> <div class="tp-sticky-cta-inner"> <a href="tel:+4915567039821" class="btn-call" aria-label="Jetzt anrufen"> <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M20.487 17.14l-4.065-3.696a1.001 1.001 0 0 0-1.391.043l-2.393 2.461c-.576-.11-1.734-.471-2.926-1.66-1.192-1.193-1.553-2.354-1.66-2.926l2.459-2.394a1 1 0 0 0 .043-1.391L6.859 3.513a1 1 0 0 0-1.391-.087l-2.17 1.861a1 1 0 0 0-.29.649c-.015.25-.301 6.172 4.291 10.766C11.305 20.707 16.323 21 17.705 21c.202 0 .326-.006.359-.008a.992.992 0 0 0 .648-.291l1.86-2.171a.997.997 0 0 0-.085-1.39z"/></svg> Kostenlos beraten lassen </a> <a href="/contact" class="btn-msg" aria-label="Nachricht senden"> <svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg> </a> </div> </div> <script> (function() { var cta = document.getElementById('tpStickyCta'); if (!cta) return; var shown = false; var threshold = window.innerWidth <= 768 ? 200 : 400; function checkScroll() { var scrollY = window.pageYOffset || document.documentElement.scrollTop; if (scrollY > threshold && !shown) { shown = true; cta.classList.add('visible'); document.body.classList.add('has-sticky-cta'); } else if (scrollY <= threshold && shown) { shown = false; cta.classList.remove('visible'); document.body.classList.remove('has-sticky-cta'); } } window.addEventListener('scroll', checkScroll, { passive: true }); checkScroll(); })(); </script> <div class="tp-exit-popup" id="exitPopup" style="display:none;"> <div class="tp-exit-popup-overlay" onclick="document.getElementById('exitPopup').style.display='none'"></div> <div class="tp-exit-popup-content"> <button class="tp-exit-popup-close" onclick="document.getElementById('exitPopup').style.display='none'" aria-label="Schließen">×</button> <div class="tp-exit-popup-icon">🔍</div> <h3>Warten Sie!</h3> <p>Wie gut ist Ihre Website wirklich?<br>Finden Sie es in 30 Sekunden heraus — kostenlos.</p> <a href="/website-check" class="tp-exit-popup-btn">Jetzt kostenlosen Website-Check starten →</a> <span class="tp-exit-popup-note">Keine Registrierung nötig · Ergebnis sofort · 100% kostenlos</span> </div> </div> <script> (function(){ if(sessionStorage.getItem('tp_exit_shown')) return; var shown=false; // Desktop: mouse leaves viewport top document.addEventListener('mouseout',function(e){ if(shown) return; if(e.clientY < 5 && e.relatedTarget === null){ document.getElementById('exitPopup').style.display='flex'; sessionStorage.setItem('tp_exit_shown','1'); shown=true; } }); // Mobile: 60s inactivity var timer; function resetTimer(){ clearTimeout(timer); timer=setTimeout(function(){ if(shown) return; if(window.innerWidth <= 768){ document.getElementById('exitPopup').style.display='flex'; sessionStorage.setItem('tp_exit_shown','1'); shown=true; } },60000); } ['touchstart','scroll','click'].forEach(function(evt){ document.addEventListener(evt,resetTimer,{passive:true}); }); resetTimer(); })(); </script> </main> <footer id="main-footer-custom"> <div class="footer-wave"> <svg viewBox="0 0 1200 120" preserveAspectRatio="none"> <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="var(--dark)"></path> </svg> </div> <div class="footer-content-custom"> <div class="container">  <div class="ft-top"> <div class="ft-brand"> <a href="/" class="footer-logo-link" aria-label="TwoPixels"> <img src="/assets/images/logo.png" alt="TwoPixels Logo" class="ft-logo" width="56" height="56" loading="lazy" decoding="async"> </a> <div> <strong class="ft-name">TwoPixels</strong> <span class="ft-tagline">Webdesign, SEO & E-Commerce aus Schortens für die Nordseeküste.</span> </div> </div> <div class="ft-contact-row"> <a href="tel:+4944239279966" class="ft-contact-pill"> <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M20.487 17.14l-4.065-3.696a1.001 1.001 0 0 0-1.391.043l-2.393 2.461c-.576-.11-1.734-.471-2.926-1.66-1.192-1.193-1.553-2.354-1.66-2.926l2.459-2.394a1 1 0 0 0 .043-1.391L6.859 3.513a1 1 0 0 0-1.391-.087l-2.17 1.861a1 1 0 0 0-.29.649c-.015.25-.301 6.172 4.291 10.766C11.305 20.707 16.323 21 17.705 21c.202 0 .326-.006.359-.008a.992.992 0 0 0 .648-.291l1.86-2.171a.997.997 0 0 0-.085-1.39z"/></svg> +49 4423 9279966 </a> <a href="mailto:info@webagentur-twopixels.de" class="ft-contact-pill"> <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M0 3v18h24v-18h-24zm6.623 7.929l-4.623 5.712v-9.458l4.623 3.746zm-4.141-5.929h19.035l-9.517 7.713-9.518-7.713zm5.694 7.188l3.824 3.099 3.83-3.104 5.612 6.817h-18.779l5.513-6.812zm9.208-1.264l4.616-3.741v9.348l-4.616-5.607z"/></svg> info@webagentur-twopixels.de </a> <div class="ft-social"> <a href="https://www.facebook.com/twopixelsschortens" target="_blank" rel="noopener noreferrer" aria-label="Facebook"><svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg></a> </div> </div> </div>  <div class="ft-links"> <div class="ft-col"> <h4>Leistungen</h4> <a href="/webdesign">Webdesign</a> <a href="/seo">SEO</a> <a href="/shopify">Shopify</a> <a href="/webshop">Online Shop</a> <a href="/beratung">Beratung</a> <a href="/preise">Preise</a> <a href="/case-studies">Case Studies</a> </div> <div class="ft-col"> <h4>Regionen</h4> <a href="/webdesign-schortens">Schortens</a> <a href="/webdesign-wilhelmshaven">Wilhelmshaven</a> <a href="/webdesign-oldenburg">Oldenburg</a> <a href="/webdesign-friesland">Friesland</a> <a href="/standorte">Alle Standorte →</a> </div> <div class="ft-col"> <h4>Wissen & Tools</h4> <a href="/wissen">Ratgeber Übersicht</a> <a href="/wissen/website-kosten">Website Kosten</a> <a href="/wissen/local-seo">Local SEO Guide</a> <a href="/website-check/">Kostenloser Website-Check</a> <a href="/glossar">Glossar</a> <a href="/artikel">Blog</a> </div> <div class="ft-col"> <h4>Tools</h4> <a href="/tools">Alle Tools</a> <a href="/ssl-check">SSL-Check</a> <a href="/ladezeit-test">Ladezeit-Test</a> <a href="/preiskalkulator/">Preiskalkulator</a> <a href="/dsgvo-audit/">DSGVO-Audit</a> </div> </div> </div> </div>  <div class="ft-bottom"> <div class="container"> <div class="ft-bottom-inner"> <div class="ft-legal-links"> <a href="/impressum">Impressum</a> <a href="/datenschutz">Datenschutz</a> <a href="/agb">AGB</a> <a href="/widerruf">Widerrufsbelehrung</a> <a href="#" onclick="openCookieSettings(); return false;">Cookie Einstellungen</a> </div> <p class="ft-copy">© 2026 TwoPixels · Made with <svg width="12" height="12" fill="#E85D3F" viewBox="0 0 24 24" style="vertical-align:-1px"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg> in Schortens</p> </div> </div> </div>  <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "LocalBusiness", "@id": "https://webagentur-twopixels.de/#organization", "name": "TwoPixels", "description": "Webdesign, SEO & E-Commerce Agentur in Schortens, Friesland.", "url": "https://webagentur-twopixels.de", "telephone": "+49-4423-9279966", "email": "info@webagentur-twopixels.de", "address": { "@type": "PostalAddress", "streetAddress": "Nadorster Straße 26", "addressLocality": "Schortens", "postalCode": "26419", "addressRegion": "Niedersachsen", "addressCountry": "DE" }, "geo": {"@type": "GeoCoordinates", "latitude": "53.5289", "longitude": "7.9456"}, "openingHoursSpecification": [{"@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"], "opens": "09:00", "closes": "14:00"}], "priceRange": "€€", "image": "https://webagentur-twopixels.de/assets/images/logo.png", "sameAs": ["https://www.facebook.com/twopixelsschortens"], "areaServed": [ {"@type": "City", "name": "Schortens"}, {"@type": "City", "name": "Wilhelmshaven"}, {"@type": "City", "name": "Jever"}, {"@type": "AdministrativeArea", "name": "Friesland"} ] } </script> </footer>  <button id="accessibility-toggle" class="a11y-toggle-btn" aria-label="Barrierefreiheit-Einstellungen öffnen" title="Barrierefreiheit"> <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z"/> </svg> </button>  <div id="accessibility-panel" class="a11y-panel" role="dialog" aria-label="Barrierefreiheit-Einstellungen" aria-hidden="true"> <div class="a11y-panel-header"> <h2> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="vertical-align: middle; margin-right: 8px;"> <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z"/> </svg> Barrierefreiheit </h2> <button id="accessibility-close" class="a11y-close-btn" aria-label="Schließen"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> </svg> </button> </div> <div class="a11y-panel-content">  <div class="a11y-section"> <h3>Schriftgröße</h3> <div class="a11y-font-controls"> <button id="font-decrease" class="a11y-font-btn" aria-label="Schrift verkleinern">A-</button> <span id="font-size-display" class="a11y-font-display">100%</span> <button id="font-increase" class="a11y-font-btn" aria-label="Schrift vergrößern">A+</button> </div> </div>  <div class="a11y-section"> <h3>Darstellung</h3> <div class="a11y-options-grid"> <button id="toggle-contrast" class="a11y-option-btn" data-active="false"> <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20V4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z"/> </svg> <span>Hoher Kontrast</span> </button> <button id="toggle-links" class="a11y-option-btn" data-active="false"> <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> <path d="M3.9 12C3.9 10.29 5.29 8.9 7 8.9H11V7H7C4.24 7 2 9.24 2 12C2 14.76 4.24 17 7 17H11V15.1H7C5.29 15.1 3.9 13.71 3.9 12ZM8 13H16V11H8V13ZM17 7H13V8.9H17C18.71 8.9 20.1 10.29 20.1 12C20.1 13.71 18.71 15.1 17 15.1H13V17H17C19.76 17 22 14.76 22 12C22 9.24 19.76 7 17 7Z"/> </svg> <span>Links hervorheben</span> </button> <button id="toggle-readable" class="a11y-option-btn" data-active="false"> <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> <path d="M9 4V7H14V19H17V7H22V4H9ZM2 12H5V19H8V12H11V9H2V12Z"/> </svg> <span>Lesbare Schrift</span> </button> <button id="toggle-spacing" class="a11y-option-btn" data-active="false"> <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> <path d="M6 7H8V17H6V7ZM16 7H18V17H16V7ZM11 7H13V17H11V7Z"/> </svg> <span>Zeilenabstand</span> </button> <button id="toggle-cursor" class="a11y-option-btn" data-active="false"> <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> <path d="M13.64 21.97C13.14 22.21 12.54 22 12.31 21.5L10.13 16.76L7.62 18.78C7.45 18.92 7.24 19 7.02 19C6.55 19 6.15 18.61 6.15 18.14V3C6.15 2.45 6.6 2 7.15 2C7.37 2 7.58 2.08 7.75 2.22L19.08 12.14C19.5 12.5 19.5 13.14 19.08 13.5L15.53 16.29L17.69 21C17.93 21.5 17.73 22.1 17.23 22.35C16.73 22.6 16.13 22.39 15.89 21.89L13.64 21.97Z"/> </svg> <span>Großer Cursor</span> </button> <button id="toggle-animations" class="a11y-option-btn" data-active="false"> <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> <path d="M9 9H15V15H9V9ZM5 21C3.89 21 3 20.1 3 19V5C3 3.9 3.89 3 5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5Z"/> </svg> <span>Keine Animationen</span> </button> </div> </div>  <div class="a11y-section"> <button id="accessibility-reset" class="a11y-reset-btn"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C15.73 20 18.84 17.45 19.73 14H17.65C16.83 16.33 14.61 18 12 18C8.69 18 6 15.31 6 12C6 8.69 8.69 6 12 6C13.66 6 15.14 6.69 16.22 7.78L13 11H20V4L17.65 6.35Z"/> </svg> Zurücksetzen </button> </div>  <div class="a11y-footer"> <a href="/barrierefreiheit" class="a11y-info-link"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V11H13V17ZM13 9H11V7H13V9Z"/> </svg> Barrierefreiheitserklärung </a> </div> </div> </div> <style> /* ===== ACCESSIBILITY WIDGET STYLES ===== */ /* Alle Styles sind mit a11y- prefixed um Konflikte zu vermeiden */ .a11y-toggle-btn { position: fixed !important; left: 24px !important; bottom: 24px !important; width: 56px !important; height: 56px !important; background: #2D3748 !important; color: white !important; border: none !important; border-radius: 50% !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; z-index: 99999 !important; padding: 0 !important; margin: 0 !important; text-decoration: none !important; outline: none !important; } .a11y-toggle-btn:hover { background: #E85D3F !important; transform: scale(1.1) !important; } .a11y-toggle-btn:focus { outline: 3px solid #E85D3F !important; outline-offset: 3px !important; } .a11y-panel { position: fixed !important; left: 24px !important; bottom: 96px !important; width: 320px !important; max-height: calc(100vh - 140px) !important; background: white !important; border-radius: 16px !important; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.25) !important; z-index: 100000 !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(20px) scale(0.95) !important; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important; overflow: hidden !important; } .a11y-panel.a11y-active { opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; } .a11y-panel-header { background: #2D3748 !important; color: white !important; padding: 20px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } .a11y-panel-header h2 { font-size: 18px !important; font-weight: 700 !important; margin: 0 !important; color: white !important; display: flex !important; align-items: center !important; } .a11y-close-btn { background: rgba(255, 255, 255, 0.1) !important; border: none !important; color: white !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } .a11y-close-btn:hover { background: rgba(255, 255, 255, 0.2) !important; } .a11y-panel-content { padding: 20px !important; max-height: calc(100vh - 260px) !important; overflow-y: auto !important; background: white !important; } .a11y-section { margin-bottom: 24px !important; } .a11y-section:last-child { margin-bottom: 0 !important; } .a11y-section h3 { font-size: 13px !important; font-weight: 600 !important; color: #718096 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin: 0 0 12px 0 !important; } /* Font Size Controls */ .a11y-font-controls { display: flex !important; align-items: center !important; justify-content: center !important; gap: 16px !important; background: #F7FAFC !important; padding: 12px !important; border-radius: 8px !important; } .a11y-font-btn { width: 48px !important; height: 48px !important; background: white !important; border: 2px solid #E2E8F0 !important; border-radius: 8px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 700 !important; font-size: 16px !important; color: #2D3748 !important; padding: 0 !important; } .a11y-font-btn:hover { border-color: #E85D3F !important; color: #E85D3F !important; } .a11y-font-display { font-weight: 700 !important; font-size: 18px !important; color: #2D3748 !important; min-width: 60px !important; text-align: center !important; } /* Option Buttons Grid */ .a11y-options-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .a11y-option-btn { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 16px 8px !important; background: #F7FAFC !important; border: 2px solid transparent !important; border-radius: 10px !important; cursor: pointer !important; color: #4A5568 !important; text-decoration: none !important; } .a11y-option-btn span { font-size: 11px !important; font-weight: 600 !important; text-align: center !important; line-height: 1.3 !important; color: inherit !important; } .a11y-option-btn:hover { background: #EDF2F7 !important; border-color: #CBD5E0 !important; } .a11y-option-btn[data-active="true"] { background: #E85D3F !important; color: white !important; border-color: #E85D3F !important; } /* Reset Button */ .a11y-reset-btn { width: 100% !important; padding: 14px !important; background: #F7FAFC !important; border: 2px solid #E2E8F0 !important; border-radius: 8px !important; cursor: pointer !important; font-size: 14px !important; font-weight: 600 !important; color: #4A5568 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } .a11y-reset-btn:hover { background: #EDF2F7 !important; border-color: #CBD5E0 !important; } /* Footer Link */ .a11y-footer { margin-top: 20px !important; padding-top: 16px !important; border-top: 1px solid #E2E8F0 !important; } .a11y-info-link { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; color: #E85D3F !important; text-decoration: none !important; font-size: 14px !important; font-weight: 600 !important; background: transparent !important; padding: 0 !important; border: none !important; outline: none !important; } .a11y-info-link:hover { color: #C53030 !important; text-decoration: underline !important; } /* Mobile Responsive */ @media (max-width: 768px) { .a11y-toggle-btn { left: 16px !important; bottom: 16px !important; width: 50px !important; height: 50px !important; } .a11y-panel { left: 16px !important; right: 16px !important; bottom: 80px !important; width: auto !important; max-width: calc(100vw - 32px) !important; } } /* ===== ACCESSIBILITY EFFECTS ===== */ /* Diese Klassen werden auf den BODY angewendet */ /* Hoher Kontrast - nur auf Content, nicht auf fixed Elemente */ body.a11y-contrast-on #main-content, body.a11y-contrast-on footer, body.a11y-contrast-on header { filter: contrast(1.35) !important; } /* Links hervorheben - NUR Content-Links, nicht Widget */ body.a11y-links-on main a, body.a11y-links-on article a, body.a11y-links-on section a, body.a11y-links-on .container a, body.a11y-links-on footer a { background-color: #FFFF00 !important; color: #000000 !important; padding: 2px 6px !important; text-decoration: underline !important; box-shadow: 0 0 0 2px #000000 !important; border-radius: 2px !important; } /* Widget und Toggle von Link-Highlighting ausschließen */ body.a11y-links-on .a11y-panel a, body.a11y-links-on .a11y-toggle-btn, body.a11y-links-on .a11y-info-link { background-color: transparent !important; box-shadow: none !important; padding: 0 !important; } body.a11y-links-on .a11y-info-link { color: #E85D3F !important; } /* Lesbare Schrift (größer, klarer) */ body.a11y-readable-on { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.03em !important; word-spacing: 0.1em !important; } body.a11y-readable-on * { font-family: inherit !important; } /* Mehr Zeilenabstand */ body.a11y-spacing-on { line-height: 2 !important; } body.a11y-spacing-on p, body.a11y-spacing-on li, body.a11y-spacing-on h1, body.a11y-spacing-on h2, body.a11y-spacing-on h3, body.a11y-spacing-on h4, body.a11y-spacing-on h5, body.a11y-spacing-on h6 { line-height: 2 !important; margin-bottom: 1.5em !important; } /* Großer Cursor */ body.a11y-cursor-on, body.a11y-cursor-on * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1.5' d='M5 2v18l5-5h10z'/%3E%3C/svg%3E") 4 4, auto !important; } /* Keine Animationen */ body.a11y-noanim-on, body.a11y-noanim-on *, body.a11y-noanim-on *::before, body.a11y-noanim-on *::after { animation: none !important; transition: none !important; } /* ===== FONT SIZE SCALING ===== */ /* Verwendet transform: scale() auf main, um nur Content zu skalieren */ body.a11y-fontsize-80 #main-content { zoom: 0.8; } body.a11y-fontsize-90 #main-content { zoom: 0.9; } body.a11y-fontsize-110 #main-content { zoom: 1.1; } body.a11y-fontsize-120 #main-content { zoom: 1.2; } body.a11y-fontsize-130 #main-content { zoom: 1.3; } body.a11y-fontsize-140 #main-content { zoom: 1.4; } body.a11y-fontsize-150 #main-content { zoom: 1.5; } /* Firefox unterstützt kein zoom, daher transform als Fallback */ @supports not (zoom: 1) { body.a11y-fontsize-80 #main-content { transform: scale(0.8); transform-origin: top left; } body.a11y-fontsize-90 #main-content { transform: scale(0.9); transform-origin: top left; } body.a11y-fontsize-110 #main-content { transform: scale(1.1); transform-origin: top left; } body.a11y-fontsize-120 #main-content { transform: scale(1.2); transform-origin: top left; } body.a11y-fontsize-130 #main-content { transform: scale(1.3); transform-origin: top left; } body.a11y-fontsize-140 #main-content { transform: scale(1.4); transform-origin: top left; } body.a11y-fontsize-150 #main-content { transform: scale(1.5); transform-origin: top left; } } </style> <script> (function() { 'use strict'; // DOM Elements var toggleBtn = document.getElementById('accessibility-toggle'); var panel = document.getElementById('accessibility-panel'); var closeBtn = document.getElementById('accessibility-close'); var fontDecrease = document.getElementById('font-decrease'); var fontIncrease = document.getElementById('font-increase'); var fontSizeDisplay = document.getElementById('font-size-display'); var resetBtn = document.getElementById('accessibility-reset'); // Option Buttons var btnContrast = document.getElementById('toggle-contrast'); var btnLinks = document.getElementById('toggle-links'); var btnReadable = document.getElementById('toggle-readable'); var btnSpacing = document.getElementById('toggle-spacing'); var btnCursor = document.getElementById('toggle-cursor'); var btnAnimations = document.getElementById('toggle-animations'); // Default State var defaultSettings = { fontSize: 100, contrast: false, links: false, readable: false, spacing: false, cursor: false, animations: false }; // Current Settings var settings = Object.assign({}, defaultSettings); // Load Settings from localStorage function loadSettings() { try { var saved = localStorage.getItem('twopixels-a11y'); if (saved) { settings = JSON.parse(saved); } } catch (e) { console.log('A11y: Could not load settings'); } applyAllSettings(); } // Save Settings to localStorage function saveSettings() { try { localStorage.setItem('twopixels-a11y', JSON.stringify(settings)); } catch (e) { console.log('A11y: Could not save settings'); } } // Apply Font Size function applyFontSize() { // Remove all font size classes var classes = document.body.className.split(' ').filter(function(c) { return !c.startsWith('a11y-fontsize-'); }); document.body.className = classes.join(' '); // Add current font size class if not 100% if (settings.fontSize !== 100) { document.body.classList.add('a11y-fontsize-' + settings.fontSize); } // Update display fontSizeDisplay.textContent = settings.fontSize + '%'; } // Apply Toggle Setting function applyToggle(className, isActive) { if (isActive) { document.body.classList.add(className); } else { document.body.classList.remove(className); } } // Update Button State function updateButtonState(btn, isActive) { btn.setAttribute('data-active', isActive ? 'true' : 'false'); } // Apply All Settings function applyAllSettings() { applyFontSize(); applyToggle('a11y-contrast-on', settings.contrast); applyToggle('a11y-links-on', settings.links); applyToggle('a11y-readable-on', settings.readable); applyToggle('a11y-spacing-on', settings.spacing); applyToggle('a11y-cursor-on', settings.cursor); applyToggle('a11y-noanim-on', settings.animations); updateButtonState(btnContrast, settings.contrast); updateButtonState(btnLinks, settings.links); updateButtonState(btnReadable, settings.readable); updateButtonState(btnSpacing, settings.spacing); updateButtonState(btnCursor, settings.cursor); updateButtonState(btnAnimations, settings.animations); } // Toggle Panel function togglePanel() { var isOpen = panel.classList.contains('a11y-active'); if (isOpen) { panel.classList.remove('a11y-active'); panel.setAttribute('aria-hidden', 'true'); } else { panel.classList.add('a11y-active'); panel.setAttribute('aria-hidden', 'false'); closeBtn.focus(); } } // Event: Toggle Button Click toggleBtn.addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); togglePanel(); }); // Event: Close Button Click closeBtn.addEventListener('click', function(e) { e.preventDefault(); togglePanel(); }); // Event: Click Outside Panel document.addEventListener('click', function(e) { if (panel.classList.contains('a11y-active')) { if (!panel.contains(e.target) && !toggleBtn.contains(e.target)) { togglePanel(); } } }); // Event: Escape Key document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && panel.classList.contains('a11y-active')) { togglePanel(); toggleBtn.focus(); } }); // Event: Font Decrease fontDecrease.addEventListener('click', function(e) { e.preventDefault(); if (settings.fontSize > 80) { settings.fontSize -= 10; applyFontSize(); saveSettings(); } }); // Event: Font Increase fontIncrease.addEventListener('click', function(e) { e.preventDefault(); if (settings.fontSize < 150) { settings.fontSize += 10; applyFontSize(); saveSettings(); } }); // Event: Contrast Toggle btnContrast.addEventListener('click', function(e) { e.preventDefault(); settings.contrast = !settings.contrast; applyToggle('a11y-contrast-on', settings.contrast); updateButtonState(btnContrast, settings.contrast); saveSettings(); }); // Event: Links Toggle btnLinks.addEventListener('click', function(e) { e.preventDefault(); settings.links = !settings.links; applyToggle('a11y-links-on', settings.links); updateButtonState(btnLinks, settings.links); saveSettings(); }); // Event: Readable Font Toggle btnReadable.addEventListener('click', function(e) { e.preventDefault(); settings.readable = !settings.readable; applyToggle('a11y-readable-on', settings.readable); updateButtonState(btnReadable, settings.readable); saveSettings(); }); // Event: Spacing Toggle btnSpacing.addEventListener('click', function(e) { e.preventDefault(); settings.spacing = !settings.spacing; applyToggle('a11y-spacing-on', settings.spacing); updateButtonState(btnSpacing, settings.spacing); saveSettings(); }); // Event: Cursor Toggle btnCursor.addEventListener('click', function(e) { e.preventDefault(); settings.cursor = !settings.cursor; applyToggle('a11y-cursor-on', settings.cursor); updateButtonState(btnCursor, settings.cursor); saveSettings(); }); // Event: Animations Toggle btnAnimations.addEventListener('click', function(e) { e.preventDefault(); settings.animations = !settings.animations; applyToggle('a11y-noanim-on', settings.animations); updateButtonState(btnAnimations, settings.animations); saveSettings(); }); // Event: Reset Button resetBtn.addEventListener('click', function(e) { e.preventDefault(); settings = Object.assign({}, defaultSettings); applyAllSettings(); saveSettings(); }); // Initialize loadSettings(); })(); </script>  <script> (function(d,t) { var BASE_URL="https://chat.webagentur-twopixels.de"; var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=BASE_URL+"/packs/js/sdk.js";g.defer=true;g.async=true; s.parentNode.insertBefore(g,s); g.onload=function(){window.chatwootSDK.run({websiteToken:'Lynbsioo4fXCtrEwYE8CkjHA',baseUrl:BASE_URL})} })(document,"script"); </script>  <div id="cookie-banner" class="cookie-banner" style="display:none;"> <div class="cookie-content"> <div class="cookie-text"> <p><strong>Cookie-Einstellungen</strong></p> <p>Wir nutzen Cookies auf unserer Website. Technisch notwendige Cookies sind für die Grundfunktionen erforderlich. Analyse-Cookies (Google Analytics) helfen uns, die Website zu verbessern - diese werden nur mit Ihrer Zustimmung aktiviert. <a href="/datenschutz">Datenschutzerklärung</a></p> </div> <div class="cookie-buttons"> <button id="cookie-reject" class="cookie-btn cookie-btn-reject">Nur notwendige</button> <button id="cookie-accept" class="cookie-btn cookie-btn-accept">Alle akzeptieren</button> </div> </div> </div> <style> /* Footer Compact Layout */ .ft-top{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid rgba(255,255,255,.08)} .ft-brand{display:flex;align-items:center;gap:14px} .ft-logo{width:56px;height:56px;object-fit:contain;background:#fff;padding:8px;border-radius:12px} .ft-name{color:#fff;font-size:1.1rem;display:block} .ft-tagline{color:rgba(255,255,255,.5);font-size:.8rem;display:block;max-width:260px;line-height:1.4;margin-top:2px} .ft-contact-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .ft-contact-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(255,255,255,.08);border-radius:8px;color:rgba(255,255,255,.8);font-size:.82rem;text-decoration:none;transition:all .2s} .ft-contact-pill:hover{background:#E85D3F;color:#fff} .ft-contact-pill svg{color:#E85D3F;flex-shrink:0} .ft-contact-pill:hover svg{color:#fff} .ft-social{display:flex;gap:8px} .ft-social a{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border-radius:8px;color:rgba(255,255,255,.6);transition:all .2s;text-decoration:none} .ft-social a:hover{background:#E85D3F;color:#fff} .ft-links{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .ft-col h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.4);margin:0 0 12px;font-weight:600} .ft-col a{display:block;color:rgba(255,255,255,.65);font-size:.85rem;text-decoration:none;padding:3px 0;transition:color .2s} .ft-col a:hover{color:#E85D3F} .ft-bottom{border-top:1px solid rgba(255,255,255,.08);padding:16px 0} .ft-bottom-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px} .ft-legal-links{display:flex;gap:16px;flex-wrap:wrap} .ft-legal-links a{color:rgba(255,255,255,.45);font-size:.78rem;text-decoration:none;transition:color .2s} .ft-legal-links a:hover{color:#E85D3F} .ft-copy{color:rgba(255,255,255,.35);font-size:.78rem;margin:0} @media(max-width:900px){.ft-links{grid-template-columns:repeat(2,1fr);gap:20px}} @media(max-width:640px){ .ft-top{flex-direction:column;align-items:flex-start;gap:16px} .ft-contact-row{flex-direction:column;align-items:flex-start;gap:8px} .ft-links{grid-template-columns:1fr 1fr;gap:16px} .ft-col h4{margin-bottom:8px} .ft-col a{font-size:.82rem;padding:2px 0} .ft-bottom-inner{flex-direction:column;text-align:center} .ft-legal-links{justify-content:center;gap:10px} } /* Cookie Banner */ .cookie-banner{position:fixed;bottom:0;left:0;right:0;background:rgba(45,55,72,.98);backdrop-filter:blur(10px);color:#fff;padding:16px 20px;box-shadow:0 -4px 20px rgba(0,0,0,.25);z-index:10000;animation:slideUp .4s ease-out} @keyframes slideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}} @keyframes slideDown{from{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}} .cookie-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px} .cookie-text p{margin:0;line-height:1.5;font-size:13px;color:#fff} .cookie-text p:first-child{font-size:14px;margin-bottom:4px} .cookie-text a{color:#E85D3F;text-decoration:underline} .cookie-buttons{display:flex;gap:8px;flex-shrink:0} .cookie-btn{padding:10px 20px;border-radius:6px;font-weight:600;font-size:13px;cursor:pointer;transition:all .2s;border:2px solid transparent} .cookie-btn-reject{background:0 0;color:#fff;border-color:rgba(255,255,255,.4)} .cookie-btn-reject:hover{border-color:#fff;background:rgba(255,255,255,.1)} .cookie-btn-accept{background:#E85D3F;color:#fff;border-color:#E85D3F} .cookie-btn-accept:hover{background:#d14d31} @media(max-width:640px){.cookie-content{flex-direction:column;text-align:center}.cookie-buttons{width:100%;flex-direction:column}.cookie-btn{width:100%}} /* Mobile float elements */ @media(max-width:768px){ #tp-remote-float{display:none!important} .tp-sticky-cta{bottom:0!important;z-index:9985!important} .woot-widget-bubble,.woot--bubble-holder{bottom:76px!important;right:16px!important;z-index:9990!important} .woot-widget-holder,.woot--panel-holder{bottom:0!important;right:0!important;left:0!important;top:0!important;width:100%!important;height:100%!important;max-height:100%!important;border-radius:0!important;z-index:99999!important} .a11y-toggle-btn{bottom:76px!important;left:16px!important;width:44px!important;height:44px!important} .a11y-panel{bottom:130px!important;left:16px!important} } </style> <script src="/assets/js/main.min.js" defer></script>  <script> (function(){ var cb=document.getElementById('cookie-banner'),ab=document.getElementById('cookie-accept'),rb=document.getElementById('cookie-reject'); var _a='Ry1LU0wzM0w3WEpE',_h='Z29vZ2xldGFnbWFuYWdlcg==',_p='Z3RhZw=='; function loadGA(){var m=atob(_a),h=atob(_h),p=atob(_p),s=document.createElement('script');s.async=true;s.src='https://www.'+h+'.com/'+p+'/js?id='+m;document.head.appendChild(s);s.onload=function(){window.dataLayer=window.dataLayer||[];var f=new Function('window.dataLayer.push(arguments)');window[p]=f;f('js',new Date());f('config',m,{'anonymize_ip':true})};} function hide(){cb.style.animation='slideDown .4s ease-out';setTimeout(function(){cb.style.display='none'},400)} var c=localStorage.getItem('cookieConsent'); if(!c)setTimeout(function(){cb.style.display='block'},1000); else if(c==='all')loadGA(); ab.addEventListener('click',function(){localStorage.setItem('cookieConsent','all');localStorage.setItem('cookieConsentDate',new Date().toISOString());hide();loadGA()}); rb.addEventListener('click',function(){localStorage.setItem('cookieConsent','necessary');localStorage.setItem('cookieConsentDate',new Date().toISOString());hide()}); })(); function openCookieSettings(){var b=document.getElementById('cookie-banner');localStorage.removeItem('cookieConsent');localStorage.removeItem('cookieConsentDate');b.style.display='block';b.style.animation='slideUp .4s ease-out'} </script>  <button id="back-to-top" class="back-to-top-btn" aria-label="Zurück nach oben"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg> </button> <style>.back-to-top-btn{position:fixed;bottom:90px;left:20px;width:40px;height:40px;background:#4A5568;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:9996;opacity:0;visibility:hidden;transform:translateY(20px);transition:all .3s}.back-to-top-btn.visible{opacity:1;visibility:visible;transform:translateY(0)}.back-to-top-btn:hover{background:#E85D3F}@media(max-width:768px){.back-to-top-btn{bottom:160px;left:16px;width:36px;height:36px}}</style> <script>(function(){var b=document.getElementById('back-to-top'),t=false;window.addEventListener('scroll',function(){if(!t){window.requestAnimationFrame(function(){b.classList.toggle('visible',window.scrollY>300);t=false});t=true}});b.addEventListener('click',function(){window.scrollTo({top:0,behavior:'smooth'})})})();</script>  <a href="/fernwartung" id="tp-remote-float" title="Fernwartung" style="position:fixed;bottom:24px;left:24px;width:44px;height:44px;background:#065F46;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(6,95,70,.4);z-index:9998;text-decoration:none;transition:all .3s" onmouseover="this.style.background='#10B981'" onmouseout="this.style.background='#065F46'"> <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7l-2 3v1h8v-1l-2-3h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z"/></svg> </a> <script>document.querySelector('body.page-fernwartung #tp-remote-float')&&(document.getElementById('tp-remote-float').style.display='none');</script> </body> </html>