BFSG-Audit: Barrierefreie Website in 30 Minuten prüfen

Barrierefreie Website prüfen leicht gemacht: Praktische Anleitung für ein schnelles BFSG-Audit. Mit Checkliste und Tools für Ihr Accessibility-Check.

21.03.2026 • TwoPixels Redaktion • SEO • 11 Min. Lesezeit
BFSG-Audit: Barrierefreie Website in 30 Minuten prüfen

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.

Passend dazu: unser Ratgeber dazu

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> <p><strong>Tipp:</strong> Mit unserem <a href="/website-audit">kostenlosen Website-Audit</a> (SEO, GEO & CRO) sehen Sie sofort, wo Ihre Seite Potenzial hat.</p> </div> <!-- Share Buttons --> <div class="share-buttons"> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwebagentur-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%2Fwebagentur-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> <!-- CTA --> <section class="section"> <div> <h2>Verwandte Artikel</h2> <div> <a href="/blog-post.php?slug=lokales-seo-2026-Änderungen"> <span>SEO</span> <span>Lokales SEO 2026: Was sich ändert und wie Sie profitieren</span> </a> <a href="/blog-post.php?slug=google-updates-2025-zusammenfassung"> <span>SEO</span> <span>Google Updates 2025: Alle Änderungen im Überblick</span> </a> <a href="/blog-post.php?slug=seo-strategien-lokale-unternehmen-schortens"> <span>SEO</span> <span>Lokales SEO Schortens: So wirst du bei Google gefunden</span> </a> <a href="/blog-post.php?slug=google-maps-optimierung-local-seo"> <span>SEO</span> <span>Google Maps SEO: So landest du im Local 3-Pack</span> </a> </div> </div> </section> <section class="cta-section"> <div> <h2>Haben Sie Fragen zu diesem Thema?</h2> <p>Wir beraten Sie gerne persönlich und unverbindlich</p> <div> <a href="/contact" class="btn btn-primary">Kontakt aufnehmen</a> <a href="/artikel" class="btn btn-outline">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> <div class="tp-exit-popup" id="exitPopup"> <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> </div> </main> <footer> <div class="wrap"> <div class="foot-top"> <div class="foot-brand"> <img class="flogo" src="/img/gen/img-e3b2432e5883.png" alt="TwoPixels" width="63" height="24"> <p>Webagentur für JTL, Shopify und KI-Webdesign aus Schortens in Friesland. Persönlich, technisch, ehrlich.</p> <div class="social"> <a href="#" aria-label="Instagram"><svg viewBox="0 0 24 24"><path d="M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.8.3 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.3 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.8-.3-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c.1-1.2.3-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.1 0-3.5 0-4.7.1-1.1.1-1.7.2-2.1.4-.5.2-.9.4-1.3.8-.4.4-.6.8-.8 1.3-.2.4-.3 1-.4 2.1C2.6 9.5 2.6 9.9 2.6 12s0 2.5.1 3.3c.1 1.1.2 1.7.4 2.1.2.5.4.9.8 1.3.4.4.8.6 1.3.8.4.2 1 .3 2.1.4 1.2.1 1.6.1 4.7.1s3.5 0 4.7-.1c1.1-.1 1.7-.2 2.1-.4.5-.2.9-.4 1.3-.8.4-.4.6-.8.8-1.3.2-.4.3-1 .4-2.1.1-1.2.1-1.6.1-3.3s0-2.5-.1-3.3c-.1-1.1-.2-1.7-.4-2.1-.2-.5-.4-.9-.8-1.3-.4-.4-.8-.6-1.3-.8-.4-.2-1-.3-2.1-.4-1.2-.1-1.6-.1-4.7-.1zm0 3.1a4.9 4.9 0 1 1 0 9.8 4.9 4.9 0 0 1 0-9.8zm0 8.1a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4zm6.3-8.3a1.1 1.1 0 1 1-2.3 0 1.1 1.1 0 0 1 2.3 0z"/></svg></a> <a href="#" aria-label="Facebook"><svg viewBox="0 0 24 24"><path d="M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.3-1.5 1.6-1.5h1.7V3.6c-.3 0-1.3-.1-2.5-.1-2.5 0-4.2 1.5-4.2 4.3v2.1H7.3V13h2.8v8h3.4z"/></svg></a> <a href="#" aria-label="LinkedIn"><svg viewBox="0 0 24 24"><path d="M6.9 8.8H3.6V21h3.3V8.8zM5.2 3.5a1.9 1.9 0 1 0 0 3.8 1.9 1.9 0 0 0 0-3.8zM21 21h-3.3v-6.4c0-1.6-.6-2.6-2-2.6-1.1 0-1.7.7-2 1.4-.1.3-.1.6-.1 1V21H10.3s.1-11.1 0-12.2h3.3v1.7c.4-.7 1.2-1.7 3-1.7 2.2 0 3.9 1.4 3.9 4.5V21z"/></svg></a> <a href="#" aria-label="TikTok"><svg viewBox="0 0 24 24"><path d="M16.5 3c.3 2.1 1.5 3.4 3.5 3.5v2.4c-1.2.1-2.3-.3-3.5-1v6.2c0 3.1-2.3 5.4-5.3 5.4-2.8 0-5-2.1-5-4.9 0-3 2.5-5.1 5.6-4.7v2.5c-.4-.1-.8-.2-1.2-.2-1.3 0-2.3 1-2.3 2.4 0 1.4 1 2.4 2.3 2.4 1.4 0 2.4-1 2.4-2.6V3h3z"/></svg></a> </div> </div> <div class="foot-cols"> <div><h4>Leistungen</h4><a href="/leistungen">Webdesign</a><a href="/leistungen">Online-Shop</a><a href="/leistungen">Shopify</a><a href="/leistungen">JTL-Wawi</a><a href="/leistungen">TwoPixels Bridge</a><a href="/leistungen">SEO & GEO</a><a href="/leistungen">IT-Sicherheit</a></div> <div><h4>Agentur</h4><a href="/agentur">Die Agentur</a><a href="/referenzen">Referenzen</a><a href="/referenzen">Case Studies</a><a href="/#preise">Preise</a><a href="/#tools">Wissen & Tools</a><a href="/kontakt">Kontakt</a></div> </div> <div class="foot-cols"> <div><h4>Regionen</h4><a href="/kontakt">Schortens</a><a href="/kontakt">Wilhelmshaven</a><a href="/kontakt">Jever</a><a href="/kontakt">Oldenburg</a><a href="/kontakt">Friesland</a></div> <div class="foot-news"> <h4>Newsletter</h4> <p>Tipps zu Web, SEO und JTL. Ein Mal im Monat, kein Spam.</p> <form class="row" id="newsForm"><input type="email" placeholder="Ihre E-Mail" aria-label="E-Mail"><button type="submit">Abonnieren</button></form> </div> </div> </div> <div class="foot-bar"> <div class="legal"><a>Impressum</a><a>Datenschutz</a><a>AGB</a><a href="/kontakt">Kontakt</a></div> <span class="made">© 2026 TwoPixels GmbH · Made with ❤ in Schortens</span> </div> <div class="foot-imp">Geschäftsführer: Tim Bauer und Christopher Schütz · TwoPixels GmbH, Nadorster Straße 26, 26419 Schortens · HRB 223549 (Amtsgericht Oldenburg) · USt-IdNr. DE350927276 · Konzept-Vorschau, nicht die Live-Seite.</div> </div> </footer> <script src="/js/premium.js" defer></script> </body> </html>