Case Study · 2024–2026

RAD
Elster.

Neuer Radladen am Rand des Vogtlands, direkt am Bäderdreieck. Aus dem ersten Auftritt 2024 wurde 2026 eine durchgängige Plattform: Static-Site auf Vercel, dreisprachig DE/CZ/EN, plus ein vierstufiger Buchungs-Wizard für den Verleih — vom Kalender bis zur SEPA-Bestätigung, alles direkt am Handy.

Live CI-treu umgesetzt Buchungs-Wizard DE / CZ / EN Mobil-first Lighthouse 95+

radelster.de

Vorgabe · Logo Wortmarke „RAD ELSTER" plus Vogel-Symbol

Vorgabe · Farbe #1A8489 Teal

Unsere Aufgabe Webseite, Buchungs-Wizard, Stack-Migration auf Vercel, SEO & Mehrsprachigkeit

Live

Aus dem Stand auf Kurs.

Kein Auftritt zum Aufpolieren — der Laden war neu, die Webseite musste sofort als Visitenkarte funktionieren. Hero, Leistungen, Verleih, Team, Reviews, Kontakt: alles auf einer Seite, in einer Reihenfolge, die eine Kundin durch den Erstbesuch trägt.

Live

Verleih

Verleih als zweites
Standbein.

Im Bäderdreieck kommt ein Großteil der Räder gar nicht zum Verkauf in den Laden — sondern zum Verleih an Kurgäste, Wanderer und Radtouristen. Auf der Webseite ist Verleih deshalb kein versteckter Unterpunkt, sondern eine eigene Spalte mit transparenter Kalkulation.

Was inklusive ist, was die Tour kostet, was am Ende beim Kauf verrechnet wird — alles vor der Kontaktanfrage sichtbar. Das spart Rückfragen und positioniert den Laden gegen reine Schraubläden mit Verleih-Notizzettel an der Tür.

Im Mietpreis enthalten radelster.de/fahrradverleih

Tages- und Wochenend-TarifPauschalpreise — am Wochenende und für Mehrtages-Touren günstiger als zwei Einzeltage
Versicherung, Helm & SchlossDiebstahl- und Haftpflichtschutz, Helm in jeder Größe, Schloss für die Pause
Zubuchbares ZubehörFahrradkorb, Kindersitz und weiteres — pro Rad einzeln wählbar, Preis-Snapshot direkt im Wizard
Tourtipps für die RegionLokale Routenvorschläge je nach Kondition — Vogtland, Bäderdreieck, Eger
Mietkosten beim Kauf anrechenbarWer das Mietrad behalten will, zahlt nur die Differenz

Buchungs-Wizard

Vier Schritte zum Rad.

Statt PDF-Formular und „Wir melden uns" gibt es einen vierstufigen Buchungs-Wizard direkt auf der Verleihseite. Tarif wählen, Rad picken, Daten eintragen, fertig — alles in unter zwei Minuten, jederzeit speicherbar, mit Live-Bestand aus der Datenbank und einer Sticky-Bar, die immer den aktuellen Preis zeigt.

Live-Screenshot des Buchungs-Wizards von radelster.de in Schritt 2 — zwei Bike-Cards mit Produktfotos, das E-Bike Tourenrad ist ausgewählt und zeigt darunter Körpergrößen-Slider, Rahmengrößen-Auswahl und optionales Zubehör

Vier Schritte im Detail

Schritt 1 des Wizards: Tarif-Auswahl Tagestarif/Wochenende und Monatskalender mit ausgewähltem Zeitraum

Schritt Zeitraum

Wann willst du fahren?

Tagestarif oder Pauschal-Wochenend-Tarif — beide Preise transparent vor der Kalender-Auswahl. Heute ist bewusst nicht buchbar, schon vergebene Tage werden im Kalender gesperrt.

Schritt 2 des Wizards: zwei Bike-Cards nebeneinander mit Produktfotos, Preisen pro Tag und Wochenende, Konfigurieren-Button

Schritt Rad

Welches Rad?

Bis zu vier Räder pro Anfrage — Live-Bestand pro Größe gegen schon ausgewählte Räder gerechnet, Zubehör pro Bike einzeln dazu wählbar. Was leer ist, wird ausgegraut.

Schritt 3 des Wizards: strukturiertes Daten-Formular mit Name, E-Mail, Telefon, Anschrift

Schritt Daten

Deine Daten.

Strukturierte Anschrift statt Freitext, weil sie direkt in den Leihvertrag-PDF vorausgefüllt wird. Pflichtfelder zeigen einen roten Banner und scrollen zum ersten Fehler.

Schritt 4 des Wizards: Buchungs-Zusammenfassung mit Zeitraum, Rad, Anfragender, Gesamtpreis und AGB-Checkbox

Schritt Senden

Passt alles?

Letzter Blick auf Zeitraum, Räder, Zubuchungen, Gesamtpreis. Submit löst Eingangsbestätigung per Mail aus — finale Buchung kommt nach Admin-Freigabe mit Leihvertrag und SEPA-QR.

Live-Bestand Echtzeit-Stock aus der DB — keine statische Liste, keine Doppel-Buchungen. Größen ohne Bestand werden ausgeblendet, statt erst beim Absenden zu scheitern.

Sauberes Feedback Validation läuft IMMER durch. Roter Banner, Shake auf der AGB-Box, Scroll zum ersten Fehler — nie ein toter, ausgegrauter Button ohne Erklärung.

PDF + Mail aus einem Stück Adresse strukturiert erfasst, automatisch in den Leihvertrag eingefüllt, Bestätigung kommt mit AGB-PDF und SEPA-QR-Mail-Embed über Resend — direkt in der Inbox, kein Spam.

Stack

Vom WordPress-Auftritt
zum Vercel-Stack.

Der Erstauftritt 2024 lief auf WordPress + Elementor — sauber für den Start, aber zu langsam und zu pflegeaufwändig für drei Sprachen plus Buchungs-Wizard. 2026 dann der Cut: Static-Site auf Vercel mit URL-basierter i18n, Reviews per Edge-Function live aus Google Places, Verleih-Backend als eigene PWA in Next.js.

Ergebnis: Mobile-Lighthouse-Score von vorher 78 auf jetzt 95/92/96/100. Mail-Versand komplett auf Resend, DSGVO-clean ohne Cookie-Banner, weil Fonts und Reviews self-hosted bzw. Edge-gecached laufen.

Vorher · 2024

WordPress + Elementor Pro
All-Inkl-Shared-Hosting
WPML für DE/CZ/EN
Kontakt via WP-Mail

Jetzt · 2026

Static-Site auf Vercel
Next.js-PWA für Verleih
URL-i18n DE/CZ/EN
Resend + Edge-Functions

Lighthouse · Mobile radelster.de · Mai 2026

Performance

Accessibility

Best Practices

100

SEO

Sprachen

Drei Länder, eine Webseite.

Bad Elster liegt im Bäderdreieck zwischen Deutschland, Tschechien und dem Bayerischen Wald. Die Webseite spricht alle drei Gruppen gleichwertig an — nicht als Google-Translate-Anhängsel, sondern als drei abgeschlossene Sprachversionen mit eigenen Keywords und Meta-Daten.

Dein neuer Fahrradhändler in Bad Elster.

/ — Hero-Headline der DE-Version

DE Vogtland · Bayerischer Wald · Erzgebirge — Wandergäste, Kurgäste, Radtouristen aus dem Inland

CZ Aš · Cheb · Karlovy Vary — tschechische Gäste aus dem direkt angrenzenden Egerland

EN Backup-Sprache für internationale Kurgäste, die weder Deutsch noch Tschechisch lesen

Mobil

Vom Hotelzimmer
direkt aufs Rad.

Kurgäste recherchieren ihren Ausflug nicht am Schreibtisch, sondern auf der Wanderbank, im Café oder vom Hotelzimmer aus. Die Webseite ist deshalb kein Desktop-Auftritt mit Mobil-Notlösung — sie ist primär fürs Handy gemacht und skaliert nach oben.

~70 % Mobile-Traffic

< 2 s Time to Hero

3 Tap zum Kontakt

Mobil-Ansicht radelster.de: Hero mit Hauptclaim und Sprachumschalter

Vercel · Static + Edge Next.js · TypeScript Postgres Resend Mail PWA · Verleih-Admin Mehrsprachig DE / CZ / EN JSON-LD & lokales SEO Lighthouse 95 / 92 / 96 / 100 Mobile-First CI-treu umgesetzt