# Analyse tierheim-hilden-ev.de – und Redesign-Entwurf „Steckbrief“ *Autor: CLAUDE-SONNET (Claude Code, Modell sonnet) · Stand der analysierten Live-Seite: 19.10.2026* **Methode.** Alle 16 geforderten Unterseiten per `curl` geladen (alle HTTP 200) plus die Paginierungen von `/hunde/` (3 Seiten), `/katzen/` (4), `/kleintiere/` (2) und `/news/`. Text und Struktur aus dem HTML extrahiert. Die Startseite wurde in Headless-Chromium bei 1440×900 und 390×844 geladen (Screenshots, Request-Zählung, DOM-Checks). Zahlen unten sind gemessen, nicht geschätzt. **Nicht gemessen:** echte Lighthouse-Werte, Screenreader-Test, Nutzerbefragung. Die Barrierefreiheits- und SEO-Aussagen sind Befunde aus dem Quelltext, keine Zertifizierung. --- ## 1. Executive Summary 1. **Die Seite hat starke Inhalte und eine sehr schwache Führung.** Es gibt echte Substanz (ehrliche Finanzierungserklärung, Vermittlungsablauf, detaillierte Tiersteckbriefe mit Alter, Kastration, Ankunft). Der Besucher wird aber nicht zu den drei wichtigen Handlungen geführt: *Tier finden · Besuch planen · helfen/spenden*. 2. **Die Öffnungszeiten sind die größte Alltags-Reibung.** Sie sind komplex (Mo/Mi/Fr nur mit Termin, Sa ohne Termin, So/Feiertage/24.+31.12. zu) und stehen im Header als vier Textzeilen in blassem Limettengrün (Kontrast grob 2 : 1 auf Weiß, aus dem Screenshot-Farbwert abgeschätzt) – auf Mobilgeräten verschwinden sie ganz. Auf `/kontakt/` folgt darunter ein langer Corona-Rechtfertigungstext. 3. **Technik und Datenschutz sind schwerfällig.** Die Startseite lädt 59 Requests (≈ 2,3 MB laut `content-length`), davon 18 Skripte, 10 Stylesheets, 5 Schriftdateien; schon *vor* der Einwilligung gehen Requests an `cdn.jsdelivr.net`, `use.fontawesome.com` und `s.w.org`. Karte, Newsletter und Formular-Captcha sind hinter Consent-Platzhaltern („Inhalt entsperren“) versteckt, also praktisch unbenutzbar ohne Klick. 4. **Barrierefreiheit und SEO sind Rohbau.** Auf der Startseite haben 15 von 15 Inhaltsbildern kein `alt`, 10 Links/Buttons keinen zugänglichen Namen (Social-/Icon-Links), es gibt keinen Skip-Link, keine Meta-Description, keine Open-Graph-Tags, kein JSON-LD. Tiernamen stehen in Bildern, die ohne Alt-Text bleiben – für Suchmaschinen und Screenreader sind die Tiere unsichtbar. 5. **Widersprüchliche und veraltete Inhalte schaden dem Vertrauen.** Beispiele: Startseite „AB JANUAR **2026**“ vs. Text „ab Januar **2027**“; Spendenquittung „bis 300 €“ (`/spenden/`) vs. „bis 200 €“ (`/patenschaften/`) mit zwei verschiedenen Freistellungsbescheiden (27.03.2020 vs. 20.09.2021); Patenschaftsseite nennt „Sid, Jacky und Tigra“ bzw. „Sarotti“, die Karten darunter zeigen andere Tiere; `/notfellchen/` ist leer („Keine Einträge gefunden“), obwohl in der Hundeliste ein Tier als „Notfall!“ markiert ist. 6. **Die Navigation ist zu breit und teils unklar.** Neun Hauptpunkte, Dopplungen/Leerseiten („Katzen“ *und* „Tierheimkatzen“, Letztere leer), unklare Labels („Großes bewirken“, „Dies & Das“), Ankerlinks als Unterseiten getarnt (`/tierheim/#vorstand`). 7. **Das visuelle Fundament ist brauchbar, aber ungepflegt.** Das Logo (Katze, Hund, Hörnchen) und das Limettengrün sind ein wiedererkennbarer Kern. Der Hero mit Golden Retriever und Katze ist stark. Das Limettengrün als *Textfarbe* auf Weiß scheitert aber an WCAG-AA, und das Magazin-Badge überlagert Navigation und Spenden-Button. 8. **Mein Entwurf „Steckbrief“** behält Logo, Grün und Fotos, löst die obigen Punkte aber strukturell: Live-Status „Heute geöffnet?“ statt Textwand, Tier-Karten als durchsuchbare Steckbriefe, ein konsistenter Spenden-/Patenschafts-Pfad, null externe Requests, semantisches HTML mit Skip-Link, JSON-LD und echten Alt-Texten. --- ## 2. Was funktioniert gut | # | Beobachtung | Wo | |---|---|---| | 1 | **Tierkarten enthalten die richtigen Fakten**: Rasse, Geschlecht, Kastriert, Alter (Geburtsdatum), Ankunft, bei Katzen Haltungsform (Hauskatze/Freigänger). Das ist mehr als bei vielen Tierheimen. | `/hunde/`, `/katzen/`, `/kleintiere/` | | 2 | **Statusmarker** „Vermittelt!“, „Vorvermittelt!“, „Notfall!“ sind eine gute Idee: ehrlich und aktuell. | Tierlisten | | 3 | **Radikal ehrliche Finanzierung**: Festbetrag der Vertragsstädte, keine Tagespauschale, wofür Geld gebraucht wird, Liste erledigter Projekte. Das schafft Vertrauen und gehört prominenter platziert. | `/tierheim/#finanzierung`, `/spenden/` | | 4 | **Vermittlungsablauf** ist transparent (Quarantäne, Impfungen, Vor-/Nachbesuch, Schutzgebühr deckt Tierarztkosten nicht). | `/vermittlung/` | | 5 | **Klare Aussage zu Fundtieren**: nur Ordnungsamt/Polizei/Feuerwehr können die Tierrettung rufen. Wichtig und korrekt platziert. | `/kontakt/` | | 6 | **Hero-Foto** (Golden Retriever + Katze unter Plaid) transportiert sofort Wärme; die Kombi „Hund + Katze“ steht für das ganze Haus. | Startseite | | 7 | **Konkrete Mitmach-Optionen** mit Voraussetzungen (Gassigehen: ab 18, Mitgliedschaft, Tetanus-Nachweis, Sachkundenachweis nach LHundG NRW). | `/mach-mit/` | | 8 | **Wiedererkennbare Marke**: Logo mit drei Tieren, Limettengrün + Schwarz. | überall | | 9 | **Neu**: Tiertrödel & Café Pfotenglück (jeden 1. Samstag 11–17 Uhr bzw. Café Sa 14–17 Uhr) – eine charmante, lokale Besuchsmotivation. | News/„Dies & Das“ | ## 3. Was ist schwach | # | Beobachtung | Wo | |---|---|---| | 1 | **Header mit 4 Zeilen Text + Kontaktblock + Logo + 3 Icons**, die Zeiten-Labels in Limettengrün auf Weiß (Kontrast grob 2 : 1, Farbwert aus Screenshot geschätzt, nicht aus dem CSS). Auf Mobil sind Zeiten, Telefon und IBAN nicht mehr sichtbar. | alle Seiten | | 2 | **Mobile Startseite**: Magazin-Badge deckt das obere Viertel, der Hero-Text liegt auf dem Fell des Hundes, kein CTA im ersten Bildschirm. | Startseite 390 px | | 3 | **Tierlisten ohne Filter/Suche**: 22 Hunde auf 3 Seiten, 29 Katzen auf 4 Seiten, strikt nach Datum. Wer eine ruhige Freigänger-Katze sucht, blättert. Die Hundeliste mischt Neuankömmlinge mit Langzeit-Bewohnern („Paten gesucht“ steckt im Namen als Freitext: „Tigra - Pflegestelle gesucht - Paten gesucht“). | `/hunde/` | | 4 | **Statusmarker nur als Overlay-Text**, Vermittelte Tiere bleiben gleichberechtigt in der Liste. | `/katzen/` | | 5 | **Alle Inhaltsbilder ohne Alt-Text**, Tiernamen nur in Bildunterschriften; 10 Icon-Links ohne Namen. | Startseite | | 6 | **Consent-Wand statt Inhalt**: Anfahrt-Karte, Newsletter, reCAPTCHA, Turnstile, Facebook, Instagram, X – überall der Satz „Sie sehen gerade einen Platzhalterinhalt“. Dazu eine reine Textbeschreibung der Anfahrt (5 Absätze Autobahnabfahrten, mit Tippfehlern: „fahten“, „hineinf“, „fFolgenden“). | `/kontakt/` | | 7 | **Corona-Text** (2020) erklärt die Terminregel in drei Absätzen; tonal defensiv („Die Interessen unserer Schützlinge überwiegen die der Zweibeiner“). Die Information gehört in zwei Sätze. | `/kontakt/#oeffnungszeiten` | | 8 | **Formular-Overhead**: DSGVO-Text als Wall, Captcha nur nach Consent, Pflichtfeld-Kennzeichnung als Wort „(Pflichtfeld)“, Feldlabel „Ihre Name“. | `/kontakt/` | | 9 | **Spenden-Seite ohne klaren Primärweg**: Konto, PayPal-Link (hinter Consent), Amazon-Wunschliste, Zookauf-Wunschliste, Sachspenden stehen als Fließtext. Die IBAN ist kein kopierbares Element. | `/spenden/` | | 10 | **Navigation**: 9 Hauptpunkte, 4 Ebenen im Tiere-Menü (`Tiere → Kleintiere → Kaninchen und Nager`), Menüs mit Ankerlinks, die die Seite nicht verlassen. | Header | | 11 | **Inhalts-Dopplungen und Widersprüche** (siehe Executive Summary Pkt. 5); `` ist kaputt zusammengesetzt: `» KontaktTierheim Hilden e.V.` (HTML-Entity, kein Trennzeichen, Seitenname klebt am Vereinsnamen); die Startseite heißt nur „Tierheim Hilden e.V.“ ohne Beschreibung. `/tierheimkatzen/` und `/notfellchen/` sind leere Seiten („Keine Einträge gefunden“), stehen aber im Menü. | global | | 12 | **News ohne Struktur**: 105 Seiten, Kategorie-Etiketten „Info“/„Rückblick“ auf der Startseite widersprechen sich (die aktuelle Stellenanzeige ist ein „Rückblick“). | Startseite, `/news/` | | 13 | **Telefonlink ohne Ländervorwahl** (`tel:0210354574`), E-Mail-Adressen im Fließtext nicht klickbar, kein Fax-Hinweis, dass Fax 02103 969711 existiert (nur Impressum/Kontakt). | `/kontakt/` | | 14 | **Wuchernde Technik**: 18 Skripte, 10 Stylesheets, Plugins für Flipbook, Lightbox, Custom-Field-Suche, Contact-Form-7, Borlabs-Cookie; WordPress-Generator-Meta im Kopf. | global | --- ## 4. Priorisierte Problemliste | Prio | Problem | Impact | Konkrete Lösung | |---|---|---|---| | 1 | Öffnungszeiten unklar/unsichtbar auf Mobil | **Hoch** | Ein Status-Widget „Heute geöffnet?“ (ohne Termin / nur mit Termin / geschlossen, inkl. Feiertage NRW) im Hero + Header-Pill; Zeiten als Tabelle auf Kontakt; Corona-Text auf 2 Sätze kürzen. | | 2 | Kein klarer Primär-CTA, Mobile-Hero ohne Handlung | **Hoch** | Hero mit 3 Aktionen: *Tiere ansehen · Besuch/Termin · Spenden*; Telefon als `tel:+49…`-Button. | | 3 | Tiere nicht durchsuchbar, Status/Paten nur im Namen | **Hoch** | Filterleiste (Art, Status, Geschlecht), Textsuche, strukturierte Felder (`paten`, `status`, `pflegestelle`) statt Freitext im Titel, Tiere nach Dringlichkeit sortieren (Notfall → Paten gesucht → neu). | | 4 | Alt-Texte, Skip-Link, Fokus, Icon-Links ohne Namen | **Hoch** | Jedes Tierfoto mit Alt („Bobby, Mischling, Rüde, 9 Jahre“), Skip-Link, sichtbarer Fokus 3 px, `aria-label` an Icon-Links. | | 5 | Drittanbieter-Requests vor Consent (jsdelivr, FontAwesome, s.w.org); Consent-Platzhalter für Karte/Newsletter | **Hoch** (DSGVO) | Schriften/Icons lokal, Emoji-Skript raus, Karte als *statische* Anfahrtsbeschreibung + Link „Karte öffnen“ (Zwei-Klick-Lösung), Newsletter erst nach Verfügbarkeit eines DSGVO-konformen Dienstes. | | 6 | Widersprüchliche Inhalte (Jahr, 200/300 €, Freistellungsbescheid, Patentiere) | **Hoch** (Vertrauen/Recht) | Inhaltsredaktion: *eine* Quelle der Wahrheit, Datum „Stand“ an jedem Text mit rechtlichem Gehalt; Freistellungsbescheid zentral an einer Stelle. | | 7 | Fehlerhafte `<title>` (`» KontaktTierheim Hilden e.V.`), keine Meta-Description/OG/JSON-LD | Mittel | Eindeutige `<title>` + Description je Seite, JSON-LD `AnimalShelter` + `OpeningHoursSpecification`; Tiere als `Pet`-Kandidaten später per Schema-Erweiterung. | | 8 | Performance (59 Requests, ≈ 2,3 MB) | Mittel | WebP, `loading="lazy"`, eine CSS-Datei, ein JS-Modul, lokale Variable-Fonts: Ziel < 15 Requests, < 600 KB Startseite. | | 9 | Navigation zu breit | Mittel | 6 Hauptpunkte (siehe Soll-Sitemap), keine Ankerlinks als Unterseiten. | | 10 | Spendenseite | Mittel | IBAN mit „Kopieren“-Button, Verwendungszweck-Hinweis als Callout, Wunschlisten gebündelt, Sachspenden-Liste als Ja/Nein-Tabelle. | | 11 | Anfahrt als Textwand | Mittel | Kurzroute (Straße, Parken, Navi-Adresse) + einklappbare Wegbeschreibung je Richtung. | | 12 | Kontrast Limette auf Weiß | Mittel | Text-Grün abdunkeln (`#3F6F0E`, ≈ 5,9 : 1), Limette nur als Fläche mit dunklem Text. | | 13 | `tel:`-Format, Mail nicht klickbar | Niedrig | `tel:+49210354574`, `mailto:` überall. | | 14 | Formular-UX | Niedrig | Pflichtfelder mit `*` + Legende, Inline-Fehler, kürzerer Datenschutztext mit Link. | --- ## 5. Informationsarchitektur: Ist vs. Soll ### Ist (aus dem Menü der Live-Seite) ``` Aktuelles Tierheim ├─ Organisation · Vorstand · Team (Anker) ├─ Projekte ├─ Vereinsmagazin └─ Finanzierung (Anker) Tiere ├─ Hunde ├─ Katzen ├─ Tierheimkatzen ← leere Seite ├─ Unsere Kleintiere │ └─ Kaninchen und Nager · Vögel · Exoten · Sonstige ├─ Vermittlung └─ Post von Ehemaligen Notfellchen ← aktuell leer Mach mit ├─ Spenden · Ehrenamt · Gassigehen · Mitgliedschaft (Anker) ├─ Antrag auf Mitgliedschaft ├─ Patenschaften └─ Patenschaft beantragen Großes bewirken ← unklares Label └─ Das Kleintierhaus · Das Katzenhaus Service ├─ Hundepension · Formulare (Anker) ├─ Dies & Das ├─ Spendenquittung └─ Links Vereinsmagazin Kontakt └─ Kontaktformular · Anfahrt · Öffnungszeiten (Anker) + Spenden-Button, Satzung, Datenschutz, Cookie-Richtlinie, Impressum ``` ### Soll (so im Prototyp umgesetzt) ``` Start (Status „Heute geöffnet?“, Notfälle, neue Tiere, 3 Wege zu helfen, Aktuelles) Tiere ├─ Hunde (Filter: Status · Paten gesucht · Suche) ├─ Katzen (Filter: Status · Haltung · Paten gesucht · Suche) ├─ Kleintiere (Filter: Kaninchen & Nager · Vögel · Exoten) └─ Notfälle (nur markierte Notfalltiere; ehrlicher Leerzustand) Aufnehmen (Vermittlung: Ablauf Hund/Katze/Kleintier, Schutzgebühr, Besuch) Helfen ├─ Spenden (Konto, Sachspenden, Spendenquittung-Formular) ├─ Patenschaft (Info, Patentiere, Antragsformular) └─ Mitmachen (Ehrenamt, Gassigehen, Mitgliedschaft + Formular) Verein ├─ Über uns (Organisation, Vorstand, Team, Finanzierung) ├─ Projekte └─ Service (Hundepension, Hundeschule, Tiertrödel & Café) Aktuelles (News) Kontakt (Formular, Öffnungszeiten, Anfahrt, Fundtier-Hinweis) Footer: Impressum · Datenschutz · Notfallhinweis (Fundtiere) · IBAN ``` Kernänderungen: von 9 auf 6 Hauptpunkte; „Großes bewirken“ geht in *Projekte*; „Dies & Das“/„Links“ gehen in *Service*; „Tierheimkatzen“ entfällt (die Seite ist live leer; ob sie einmal einen eigenen Zweck hatte, ist eine Redaktionsfrage). --- ## 6. Design-Vision „Steckbrief“ **Leitidee.** Ein Tierheim erzählt über *einzelne Tiere*, nicht über Flächen und Slogans. Das ganze Design ist ein **Steckbrief-System**: Jedes Tier hat eine Karte wie ein Halsband-Anhänger – oben ein Foto im Bogenfenster („die offene Tür zum Zuhause“), darunter harte Fakten in einem festen Raster. Dieselbe Bogenform wird für das Hero-Foto, Statusmarker und Hervorhebungen wiederholt. Alles andere bleibt ruhig, warm und lesbar. **Farbpalette** (alle Textpaare WCAG-AA-geprüft, Details im README): | Rolle | Hell | Dunkel | Verwendung | |---|---|---|---| | Papier | `#FBF7EF` | `#12170F` | Seitenhintergrund | | Karte | `#FFFFFF` | `#1B2217` | Steckbriefe, Formulare | | Tinte | `#1E221B` | `#EEEADD` | Fließtext, Überschriften | | Moos (Primär) | `#2F5A12` | `#A5DB5B` | Buttons, Links, Fokus | | Limette (Marke) | `#7ECB20` | `#7ECB20` | Flächen/Deko, nie als Textfarbe auf Hell | | Aprikose | `#F2A65A` | `#F2A65A` | Wärme-Akzent, Hervorhebung | | Backstein (Notfall) | `#B3341F` | `#FF8A73` | Notfall-Marker, Fehler | Die Palette baut auf dem Logo (Schwarz + Limette) auf, ergänzt es um ein tiefes Moosgrün für Lesbarkeit und ein warmes Aprikot als „Fellfarbe“. **Typografie.** *Bricolage Grotesque* (variable, OFL) für Überschriften: eigenwillig, freundlich, mit „handwerklichem“ Charakter – ohne verspielt zu sein. *Atkinson Hyperlegible* (OFL, vom Braille Institute für maximale Zeichenunterscheidbarkeit entwickelt) für Fließtext, Formulare und Tabellen. Das passt zu einer Zielgruppe mit vielen älteren Besuchern. Beide lokal als woff2, nur der Latin-Subset (≈ 110 KB gesamt). **Bildsprache.** Echte Tiere, Augenhöhe, Naturlicht; Tierfotos immer quadratisch im Bogenfenster; keine Stockfotos in Hero-Positionen (die Live-Seite nutzt viele Envato-Stockbilder auf Unterseiten – im Prototyp bleiben sie nur dort, wo kein Original existiert, und sind als zu ersetzen markiert). Ehrlich bei fehlendem Foto: Platzhalterkarte mit Logo statt Fake-Bild. **Ton.** Sie-Form wie auf der Live-Seite, aber kürzer: Sätze statt Absätze, keine Rechtfertigung („Die Interessen unserer Schützlinge überwiegen…“ → „Unter der Woche sehen wir Besucher nur nach Termin, damit die Hunde zur Ruhe kommen.“). Emojis aus den News werden im Prototyp nicht übernommen (Screenreader lesen sie vor). --- ## 7. Konkrete Empfehlungen mit Zielwerten ### SEO - Eindeutiger `<title>` (50–60 Zeichen) und Description (140–160 Zeichen) je Seite; kanonische URL; `lang="de"`. - JSON-LD: `AnimalShelter` (+ `LocalBusiness`), `PostalAddress`, `OpeningHoursSpecification` (Sa 14–17), `contactPoint`. Hinweis: Mo/Mi/Fr „nur mit Termin“ lässt sich in Schema.org nicht sauber abbilden – im Prototyp als Beschreibungstext ergänzt. - Genau ein `<h1>` je Seite, `h2`/`h3` lückenlos. - Jedes Tier eine eigene URL mit sprechendem Slug (`/hunde/bobby/`) – live schon vorhanden (`/2026/09/bobby/`), dort aber Datumsstruktur; Ziel: stabil und datumsfrei. - XML-Sitemap: live vorhanden (`/wp-sitemap.xml`, in `robots.txt` verlinkt) – okay. - **Prototyp bleibt `noindex,nofollow`** (Vorschau). - Zielwert: Lighthouse SEO ≥ 95. ### Performance - Zielwerte (Mobil, 4G): **LCP ≤ 2,0 s**, **CLS ≤ 0,05**, **INP ≤ 150 ms**, Startseite **< 15 Requests / < 600 KB** (Prototyp-Startseite: siehe README/QA). - Bilder: WebP, max. 1600 px, `width`/`height`, `loading="lazy"` unterhalb des Folds, Hero mit `fetchpriority="high"`. - Eine CSS-, eine JS-Datei, JS `defer`; kein jQuery, keine Icon-Font (Inline-SVG). - Schriften: 2 Familien, `font-display: swap`, nur Latin. ### Accessibility (Ziel: WCAG 2.2 AA) - Skip-Link; Landmarks `header/nav/main/footer`; Menü-Button mit `aria-expanded`/`aria-controls`. - Kontrast Text ≥ 4,5 : 1, große Schrift/UI ≥ 3 : 1; Fokusring ≥ 3 px, nie entfernt. - Zielgröße ≥ 44 × 44 px für Touch. - Alle Tierbilder mit beschreibendem Alt; dekorative Bilder `alt=""`. - Formulare: `label` ↔ `for`, `autocomplete`, Fehler per `aria-live="polite"`, nicht nur Farbe. - `prefers-reduced-motion`, `prefers-color-scheme`, Funktion ab 320 px, Zoom bis 200 % ohne Verlust. - Lighthouse Accessibility ≥ 95, axe: 0 kritische Verstöße. ### Datenschutz/Consent - Keine Drittanbieter-Requests im Normalbetrieb → **kein Cookie-Banner nötig** (Prototyp: 0 externe Requests, keine Cookies, kein localStorage). - Karte, Newsletter, Social: als *Links*, nicht als eingebettete Skripte; erst per bewusster Aktion verlassen Nutzer die Seite. - Kontakt-/Patenschaftsformulare nur mit serverseitigem, DSGVO-konformem Backend (im Prototyp bewusst *ohne* Senden). --- ## 8. Stärken und Schwächen meines eigenen Entwurfs (ehrliche Selbstkritik) **Stärken** - Löst die drei größten Alltagsprobleme direkt: Öffnungsstatus „heute“ (Statusleiste, Hero, Kontakt), Tiere mit Filter/Suche/Dringlichkeits-Sortierung, ein klarer Spendenweg mit kopierbarer IBAN. - Eigenständige Form (Steckbrief-Karten, Bogenfenster), trotzdem erkennbar das Tierheim (Logo, Limette, Hero-Foto). - Technisch schlank: Startseite 11 Requests / ≈ 400 KB (Live: 59 / ≈ 2,3 MB), alles lokal, keine Cookies, kein Consent-Banner nötig. - Barrierefreiheit von Anfang an mitgedacht und teils automatisch geprüft (Landmarks, Skip-Link, Labels, Kontrast hell/dunkel, 44-px-Ziele, Reduced Motion, 320 px). - Inhalte sind 1:1 übernommen; Widersprüche der Live-Seite sind sichtbar markiert statt versteckt. **Schwächen / offene Punkte** - **Statisches Abbild:** Die 66 Tiere sind ein Snapshot (19.10.2026). Im echten Betrieb bräuchte es ein CMS oder eine Datenquelle; mein Prototyp löst das Pflegeproblem der Tierlisten nicht. Außerdem gibt es keine Einzelseiten je Tier (die Live-Seite hat Detailtexte, die ich nicht übernommen habe), die Karten verweisen auf das Kontaktformular. - **Formulare ohne Backend:** Sie validieren nur. Kein Spam-Schutz, kein SEPA-Mandat, keine echte Verarbeitung; Captcha/Turnstile-Ersatz ist offen (Honeypot/serverseitige Prüfung wäre nötig). - **Öffnungslogik ist eine Ableitung** aus Fließtext. Sonderschließungen fehlen, Di/Do sind „kein Besucherverkehr“ nur aus der Abwesenheit geschlossen. Sie ersetzt keine redaktionelle Pflege. - **Karte fehlt bewusst.** Datenschutz gewinnt, Orientierung verliert: nur Adresse für die Navi-App plus Text-Wegbeschreibung (die ich leicht von Tippfehlern bereinigt, aber sonst übernommen habe). Eine Zwei-Klick-Karte oder statisches Kartenbild wäre die bessere Lösung. - **Bildmaterial:** Unterseiten nutzen teils Stockfotos der Live-Seite; Tierfotos sind 560 px (Retina-Displays zeigen sie leicht weich); Miss Monroe hat auf der Live-Seite nur das Logo als Foto, im Prototyp ein Platzhalter. Logo-Freistellung per Skript ist an den Kanten nicht perfekt – ein Vektor-Logo vom Grafiker wäre besser. - **Nicht getestet:** Safari/Firefox, echte Screenreader (VoiceOver/NVDA), Touch-Geräte, Lighthouse/axe (nicht verfügbar); nur Chromium-Headless plus eigene DOM-Prüfungen. Moderne CSS-Features (`color-mix`, `:user-invalid`, `translate`/`rotate`) schließen sehr alte Browser aus. - **Redaktionell noch offen:** Rechtstexte (Datenschutz, Impressum-Original, Satzung, Cookie-Richtlinie), Vereinsmagazin, „Post von Ehemaligen“, Newsletter, Satzung und Linkseite fehlen im Prototyp; Hundepension ohne Preis (steht live auch nicht). - **Designrisiko:** Die Atkinson-Ziffern (geschlitzte Null) wirken bei Datumsangaben ungewohnt; Bricolage Grotesque in Fett ist markant, aber dominant. Beides ist Geschmackssache und sollte mit dem Vorstand abgestimmt werden. - **Konzept-Grenze:** Die Sortierung „Notfall zuerst“ ist redaktionelle Priorisierung, die der Verein bewusst entscheiden muss. --- ## 9. Qualitätsprüfung (tatsächlich ausgeführt am 19.10.2026) | Prüfung | Ergebnis | |---|---| | Externe Requests im Code (`tools/check-external.sh`) | 0 Treffer außer `rel="canonical"` und JSON-LD-String-Werten; keine Muster `fetch`, `XMLHttpRequest`, `@import`, CDN, Storage, Cookie | | Referenzen (`tools/check-refs.py`) | 17 Seiten, 666 Referenzen, 0 fehlende Dateien, 0 fehlende Anker | | Browser `file://`, 17 Seiten × 3 Viewports (1440×900, 390×844, 320×640) | 0 Konsolenfehler/-warnungen, 0 nicht-lokale Requests, 0 horizontaler Überlauf, 0 geladene-nicht-darstellbare Bilder, genau 1 `h1`, alle Bilder mit `alt` | | DOM-Prüfung (Labels, doppelte IDs, Überschriftenfolge, Linknamen, Zielgröße ≥ 44 px, `lang`, `title`, Description, noindex, canonical) | 0 Befunde auf allen 17 Seiten (nach Korrektur von 8 Seiten mit Überschriftensprung h1→h3) | | Kontrast (`tools/check-contrast.py`) | alle Textpaare ≥ 4,5 : 1 in Hell und Dunkel (niedrigster Wert 5,36 : 1) | | Funktion | 26 Interaktionstests bestanden: Mobilmenü (auf/zu, Escape, `aria-expanded`), Filter (Notfall = 1, Paten = 9, Suche, Leerzustand, `aria-live`), 4 Formulare (leer/ungültig → Fehler, gültig → Demo-Bestätigung, **kein POST**, keine Navigation), Vorbelegung `?tier=`, Skip-Link als erstes Tab-Ziel, IBAN kopieren, Dark Mode + Reduced Motion | | Startseite Last | 11 Requests, ≈ 399 KB (Summe der Dateigrößen, lokal; ohne Kompression) | Während der Prüfung gefundene und behobene Fehler: Font-Preload erzeugte unter `file://` CORS-Konsolenfehler (Preload entfernt); horizontaler Überlauf von 12 px bei 320 px auf Start und Kontakt (Grid-Spalten auf `minmax(0,1fr)`); Überschriftensprünge auf 8 Seiten; Footer-Liste mit Aufzählungspunkten. Screenshots der Prüfung: `screenshots/`.