Design-Optimierung: A11y, AI-Tell-Reduktion, Self-Hosted Fonts, Tailwind-Migration #5

Merged

glow merged 12 commits from feature/design-optimierung-issue-2 into main 2026-06-16 10:33:39 +00:00

Conversation 1 Commits 12 Files changed 22 +407 -737

glow commented 2026-06-09 22:10:06 +00:00 (Migrated from gitlab.fluffyplace.de)

Copy link

Setzt den Optimierungsplan aus Issue #2 vollständig um (12 Commits, ein Plan-Schritt pro Commit-Gruppe). Verifiziert per Tests, Lint, Build und Vorher/Nachher-Screenshots aller Routen (Desktop 1440px + Mobile 390px).

P1 – Accessibility (Pflicht-Fixes)

• Accordion auf /leistungen tastaturbedienbar: <button> mit aria-expanded/aria-controls statt <div onClick>; Service-Karten als echte <Link>-Elemente; globaler :focus-visible-Ring
• Toter Button gefixt: "Inhaltswunsch senden" auf /wissen hatte gar keinen onClick – jetzt an ContactDialog angebunden
• WCAG-AA-Kontraste: Impressum/Datenschutz-Links waren mit #374151 auf Navy (~1,8:1) fast unsichtbar → ak-dim (#8b96a5, ~5,6:1); gleiches für Preishinweise, Captions, Tab-Labels
• prefers-reduced-motion wird global respektiert (inkl. scroll-behavior)

P2 – AI-Tell-Reduktion

• 7 Eyebrow-Pills entfernt (identische Uppercase-Pill über jeder Sektion); nur die Hero-Pill bleibt
• Ein Akzent statt Regenbogen: Karten-Farben (Grün/Violett/Orange/Pink) auf ak-sky vereinheitlicht; Gelb bleibt exklusiv für Hero + Icon-Flächen; Verdict-Badges behalten semantische Statusfarben
• Ein CTA-Label: 5 Varianten ("Frage stellen", "Anfragen", …) → überall "Kontakt aufnehmen"
• Neon-Glow von allen CTA-Hovers entfernt; drehender Deko-Kreis + Float-Endlosschleife am Hero-Bild gestrichen

P3 – DSGVO & Assets

• Roboto self-hosted via @fontsource/roboto statt Google-Fonts-CDN (LG München I: IP-Übermittlung an Google ist abmahnfähig); Google-Origins aus der Backend-CSP entfernt. Die Seite lädt jetzt keine einzige Drittanbieter-Ressource mehr außer dem Exali-Siegel.

P4 – Layout

• /leistungen öffnet das erste Accordion-Item per Default (Preis + CTA sofort sichtbar statt 5 zugeklappter Balken)
• Unterseiten-Header linksbündig, Startseite behält zentrierte Sektions-Header

P5 – Tailwind-Migration (komplette Codebasis)

• Alle Komponenten und Seiten von Inline-Styles auf Tailwind-Klassen mit den ak-*-Tokens migriert (~640 Zeilen weniger Code); neue Tokens ak-dim, ak-accent-hover
• Gemeinsame .btn-primary/.btn-secondary/.btn-sm-Klassen — Bonus-Fund: NotFoundPage referenzierte btn-primary, die Klasse existierte nie (404-CTA war unstyled)
• JS-Hover (onMouseEnter + useState) komplett durch CSS hover:/group-hover: ersetzt (kein Re-Render pro Hover, Fokus-Stile inklusive); ContactDialog-focused-State durch natives :focus ersetzt
• transition: all durch gezielte Properties ersetzt
• Verbleibende Inline-Styles: nur dynamische Werte (FAQ-Höhenanimation, Verdict-Statusfarben)

Nicht umgesetzt (bewusst)

• P3.2 Hero-Foto statt Illustration: Inhaber-Entscheidung, siehe Issue #2

Verifikation

• ✅ 14/14 Frontend-Tests, 8/8 Backend-Tests, Lint sauber, Builds grün
• ✅ Alle 6 Routen als Screenshot geprüft (Desktop + Mobile), visuelle Parität bis auf die geplanten Änderungen

Nachher-Screenshots

Startseite	/leistungen

Closes #2

🤖 Generated with Claude Code

Setzt den Optimierungsplan aus Issue #2 vollständig um (12 Commits, ein Plan-Schritt pro Commit-Gruppe). Verifiziert per Tests, Lint, Build und Vorher/Nachher-Screenshots aller Routen (Desktop 1440px + Mobile 390px). ## P1 – Accessibility (Pflicht-Fixes) - **Accordion auf /leistungen tastaturbedienbar**: `<button>` mit `aria-expanded`/`aria-controls` statt `<div onClick>`; Service-Karten als echte `<Link>`-Elemente; globaler `:focus-visible`-Ring - **Toter Button gefixt**: "Inhaltswunsch senden" auf /wissen hatte gar keinen `onClick` – jetzt an ContactDialog angebunden - **WCAG-AA-Kontraste**: Impressum/Datenschutz-Links waren mit `#374151` auf Navy (~1,8:1) fast unsichtbar → `ak-dim` (#8b96a5, ~5,6:1); gleiches für Preishinweise, Captions, Tab-Labels - **`prefers-reduced-motion`** wird global respektiert (inkl. `scroll-behavior`) ## P2 – AI-Tell-Reduktion - **7 Eyebrow-Pills entfernt** (identische Uppercase-Pill über jeder Sektion); nur die Hero-Pill bleibt - **Ein Akzent statt Regenbogen**: Karten-Farben (Grün/Violett/Orange/Pink) auf `ak-sky` vereinheitlicht; Gelb bleibt exklusiv für Hero + Icon-Flächen; Verdict-Badges behalten semantische Statusfarben - **Ein CTA-Label**: 5 Varianten ("Frage stellen", "Anfragen", …) → überall "Kontakt aufnehmen" - **Neon-Glow von allen CTA-Hovers entfernt**; drehender Deko-Kreis + Float-Endlosschleife am Hero-Bild gestrichen ## P3 – DSGVO & Assets - **Roboto self-hosted** via `@fontsource/roboto` statt Google-Fonts-CDN (LG München I: IP-Übermittlung an Google ist abmahnfähig); Google-Origins aus der Backend-CSP entfernt. Die Seite lädt jetzt **keine einzige Drittanbieter-Ressource** mehr außer dem Exali-Siegel. ## P4 – Layout - /leistungen öffnet das erste Accordion-Item per Default (Preis + CTA sofort sichtbar statt 5 zugeklappter Balken) - Unterseiten-Header linksbündig, Startseite behält zentrierte Sektions-Header ## P5 – Tailwind-Migration (komplette Codebasis) - Alle Komponenten und Seiten von Inline-Styles auf Tailwind-Klassen mit den `ak-*`-Tokens migriert (~640 Zeilen weniger Code); neue Tokens `ak-dim`, `ak-accent-hover` - Gemeinsame `.btn-primary`/`.btn-secondary`/`.btn-sm`-Klassen — **Bonus-Fund:** NotFoundPage referenzierte `btn-primary`, die Klasse existierte nie (404-CTA war unstyled) - JS-Hover (`onMouseEnter` + `useState`) komplett durch CSS `hover:`/`group-hover:` ersetzt (kein Re-Render pro Hover, Fokus-Stile inklusive); ContactDialog-`focused`-State durch natives `:focus` ersetzt - `transition: all` durch gezielte Properties ersetzt - Verbleibende Inline-Styles: nur dynamische Werte (FAQ-Höhenanimation, Verdict-Statusfarben) ## Nicht umgesetzt (bewusst) - **P3.2 Hero-Foto statt Illustration**: Inhaber-Entscheidung, siehe Issue #2 ## Verifikation - ✅ 14/14 Frontend-Tests, 8/8 Backend-Tests, Lint sauber, Builds grün - ✅ Alle 6 Routen als Screenshot geprüft (Desktop + Mobile), visuelle Parität bis auf die geplanten Änderungen ## Nachher-Screenshots | Startseite | /leistungen | |---|---| |  |  | Closes #2 🤖 Generated with [Claude Code](https://claude.com/claude-code)

glow commented 2026-06-16 10:33:39 +00:00 (Migrated from gitlab.fluffyplace.de)

Copy link

mentioned in commit f79a407be2

mentioned in commit f79a407be2fad6e60ee8792d2fcca3d2ba99829b

glow (Migrated from gitlab.fluffyplace.de) merged commit f79a407be2 into main 2026-06-16 10:33:39 +00:00

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

design

  

frontend

No labels

design

frontend

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

budmin/landingpage!5

No description provided.