Antepli Baklava – Landing Page mit Shop-Konzept und Blech-Konfigurator
Ein Konzeptvorschlag für einen Bremer Betrieb für Baklava, Künefe und Kadayif: eine dunkle, goldene Landing Page mit scroll-gesteuerter 3D-Anatomie der Baklava, sechs Produkten mit Warenkorb, Blech-Konfigurator und einer eigenen Shop-Seite. Dazu ein Bestell-Backend auf Cloudflare, das im Konzept-Modus Testbestellungen per Telegram meldet.
- Zeitraum
- Juli – September 2026
- Status
- Landing Page online (indexierbar); Bestell-Backend im Konzept-Modus, nicht deployed
- Art
- Konzeptvorschlag für einen realen Betrieb, kein Auftrag
- Branche
- Bäckerei / Süßspeisen
- Umfang
- Landing Page + Shop-Seite + Impressum/Datenschutz + Worker
- Technik
- HTML/CSS/JS, Cormorant Garamond + Manrope, Cloudflare Worker
Konzept: unbeauftragter Entwurf für einen echten Betrieb – nicht der offizielle Auftritt.
Ausgangslage
ANTEPLI am Waller Ring verkauft handgemachte Baklava, Künefe und Kadayif – Produkte, die man sehen und fast riechen muss. Ich habe dem Betrieb ohne Auftrag einen Konzeptvorschlag gebaut, der zeigt, wie sich diese Handwerkskunst online inszenieren lässt und wie Bestellungen für ganze Bleche direkt über die Website laufen könnten.
Der Inhaber fand das Konzept gut; mein Angebot für die bezahlte Umsetzung blieb unbeantwortet. Deshalb steht die Seite als Konzeptvorschlag online, mit Hinweis-Popup, und das Bestellsystem läuft in einem Modus, in dem nichts wirklich bestellt oder bezahlt wird.
Technisch baut das Bestell-Backend auf meinem Pizza-Blitz-Bestellsystem auf – nur statt einer Kassenschnittstelle gibt es ein Küchen-Ticket und eine Telegram-Meldung. Für Cafés und Bäckereien ist das oft der pragmatischere Weg.
Ziele
6 Ziele, an denen sich das Projekt messen lässt
- Das Produkt so zeigen, dass es Appetit macht – ohne Stockfotos, mit echten Freistellern
- Bestellungen für Einzelprodukte und ganze Bleche direkt über die Website vorbereiten
- Konditionen (Mindestbestellwert, Lieferung, Vorlauf für Bleche) serverseitig erzwingen
- Suchmaschinen-Sichtbarkeit für „Baklava Bremen“ mit strukturierten Daten
- Große Produktbilder, trotzdem schnelle Ladezeit
- Ehrlich bleiben: sichtbarer Konzept-Modus, solange kein Auftrag besteht
Lösung
Was gebaut wurde – Baustein für Baustein
Landing Page mit Hero und sechs Produkten
Die Startseite zeigt die beliebtesten Produkte mit Freistellern, Größenwahl und „In den Warenkorb“ – direkt im ersten Scroll.
Scroll-gesteuerte 3D-Anatomie
Sieben Schichten einer Baklava fächern sich beim Scrollen auf und reagieren auf die Mausbewegung mit leichtem Tilt. Jede Schicht bekommt eine Erklärung – Teig, Pistazie, Sirup.
Blech-Konfigurator
Ganze Bleche für Feiern lassen sich konfigurieren: Sorte, Größe, Abholtag. Der Vorlauf von einem Tag wird serverseitig geprüft.
Shop-Seite mit vier Kategorien
bestellen.html zeigt das volle Sortiment nach Kategorien. Warenkorb-Button, Schublade und Kasse teilen sich ein gemeinsames shop.js mit der Landing Page.
Bestell-Backend im Konzept-Modus
Cloudflare Worker prüft jede Bestellung serverseitig, legt ein Küchen-Ticket im KV ab und meldet per Telegram. Ohne Stripe-Key wird nicht kassiert – die Kasse zeigt das offen an.
Öffnungszeiten über Mitternacht
Der Betrieb schließt nach Mitternacht. Die Zeitlogik im Worker und im Frontend rechnet das korrekt, statt um 0 Uhr zu „schließen“.
Instagram-Grid, Reservierung, Kontakt
Statisches Bild-Grid mit Links zu den Posts (kein Live-Embed, kein Layout-Shift), Reservierungsformular und Kontakt mit Zwei-Klick-Karte.
Design
Die Farbwelt ist dunkel und edel: ein fast schwarzes Grün als Grund, dazu Gold in zwei Abstufungen und ein warmes Creme für Text. Die Produktfreisteller leuchten auf dem dunklen Grund – das ist der ganze Trick. Kein Weiß, kein Rosa, nichts, was nach Konditorei-Klischee aussieht.
Überschriften in der Cormorant Garamond, einer feinen Serife mit hohem Kontrast, die das Handwerkliche betont. Der Lauftext in der Manrope, damit Produktnamen, Größen und Formulare klar bleiben. Beide Schriften self-hosted.
Die Bewegung ist das Herzstück: Die 3D-Anatomie ist scroll-gesteuert, die Produkte kippen leicht zur Maus. Alles ist an prefers-reduced-motion gekoppelt – wer Bewegung abstellt, sieht die Schichten statisch nebeneinander.
Technik
8 Bausteine – und warum genau diese
Vanilla HTML/CSS/JS
Zwei Seiten, ein gemeinsames shop.js – ohne Framework, ohne Build.
Cormorant Garamond + Manrope (self-hosted)
Edle Typografie ohne Google-Fonts-Request.
Cloudflare Worker + KV (antepli-orders)
Serverseitige Prüfung, Küchen-Ticket im KV, Telegram – kostenlos im Free-Plan; noch nicht deployed.
Stripe Checkout (vorbereitet)
Für den Echtbetrieb: Zahlung über Stripe, Telegram-Meldung erst nach bestätigtem Webhook.
Konzept-Modus im Worker
Ohne Stripe-Key wird nichts kassiert; Bestellungen werden trotzdem geprüft, gespeichert und gemeldet – ehrlich als Test gekennzeichnet.
WebP-Produktfreisteller
15 Motive von 27,3 MB auf 1,4 MB – große Bilder, kleine Dateien.
JSON-LD Bakery + Menu
Strukturierte Daten für Betrieb, Öffnungszeiten und Produkte; Sitemap mit Bildern.
Eigener Consent-Tracker mit Shop-Events
Warenkorb- und Kassen-Ereignisse messen, ohne Google Analytics.
Antippen zeigt, warum ich mich dafür entschieden habe.
SEO
6
- Indexierbar (index, follow) – der Betrieb hat keine vergleichbare Website, das Konzept schadet niemandem
- Meta-Title mit Produkten und Ort: „Künefe · Baklava · Kadayif · Bremen“
- JSON-LD vom Typ Bakery mit Adresse, Öffnungszeiten und OrderAction; Menu-Daten für Produkte
- Sitemap mit Bildeinträgen für die Produktfreisteller, robots.txt vorhanden
- Eigene Shop-Seite mit eigenem Title („Online bestellen – ANTEPLI“)
- max-image-preview:large, damit Google die Produktbilder groß zeigen darf
Barrierefreiheit
5
- Gold auf Dunkelgrün für Text auf Kontrast geprüft; Creme für Fließtext
- Skip-Link, semantische Landmarks, sichtbare Fokusringe
- Warenkorb-Schublade und Kasse als Dialoge mit Fokus-Management
- Touch-Ziele mindestens 44 Pixel, Größenwahl auch per Tastatur
- 3D-Anatomie und Tilt-Effekte deaktivieren sich bei prefers-reduced-motion
Datenschutz
5
- Schriften self-hosted, keine externen CDNs
- Google Maps nur nach Zwei-Klick-Zustimmung
- Instagram als statisches Grid – kein Meta-Skript auf der Seite
- Formulare und Bestellungen gehen über den eigenen Worker an Telegram
- Consent-Tracker: keine Cookies und keine Messung vor der Einwilligung
Performance
Gemessen am 16. September 2026, mobil (simulierte 4G-Drosselung) mit Lighthouse.
- Produktbilder
- 27,3 MB → 1,4 MB15 Freisteller als WebP, je etwa 60–120 KB
- Fonts
- self-hosted, 0 externe Requests
- statisches Grid statt Embedkein Fremdskript, kein Layout-Shift
- Backend
- Cloudflare-Edgekein eigener Server
Ablauf
6 Schritte von der Idee bis online
Konzept statt Kaltakquise
Landing Page ohne Auftrag gebaut, um dem Betrieb konkret zu zeigen, was möglich ist.
Produktbilder
Freisteller der echten Produkte erhalten, zu WebP verkleinert, Originale aus dem Deploy genommen.
Baklava-Anatomie
Sieben Schichten als scroll-gesteuerte 3D-Szene mit Maus-Tilt gebaut.
Shop + Backend
Warenkorb, Kasse und Shop-Seite mit gemeinsamem shop.js; Worker nach Pizza-Blitz-Vorbild mit Küchen-Ticket statt WinOrder.
Konzept-Modus
Kasse zeigt offen „Testbestellung“, Worker kassiert nicht ohne Stripe-Key – ehrlich, solange kein Auftrag besteht.
Vorstellung
Konzept gefiel dem Inhaber; das Angebot für die Umsetzung blieb unbeantwortet.
Ergebnis
Was am Ende belegbar dasteht
- Landing Page und Shop-Seite online, indexierbar, mit Bakery- und Menu-JSON-LD
- Produktbilder von 27,3 MB auf 1,4 MB reduziert
- Bestell-Backend fertig programmiert, inklusive Konzept-Modus – Deploy steht aus
- Konzept dem Inhaber vorgestellt, positives Feedback, kein Auftrag
Learnings
Was ich mitnehme
Ein positives „Gefällt mir“ ist noch kein Auftrag. Beim nächsten Mal kläre ich den nächsten Schritt direkt im Gespräch.
Bei einem Betrieb, der schon einen eigenen Shop hat, muss das Konzept einen klaren Mehrwert zeigen – nicht nur schöner sein.
Öffnungszeiten über Mitternacht sind ein klassischer Stolperstein in der Zeitlogik; einmal sauber gelöst, wiederverwendbar.
Der Konzept-Modus im Worker war die richtige Absicherung: Niemand kann versehentlich etwas bestellen, was nicht geliefert wird.
Fragen zum Projekt
Häufige Fragen
Kann ich auf der Seite wirklich bestellen?
Nein. Das Bestellsystem läuft im Konzept-Modus: Die Kasse kennzeichnet jede Bestellung als Test, es wird nichts bezahlt und nichts geliefert. Der Betrieb hat den Vorschlag nicht beauftragt.
Warum ist das Backend nicht deployed?
Ohne Auftrag gibt es keinen Grund, einen Worker mit Telegram-Anbindung für den Betrieb zu betreiben. Der Code ist fertig und würde mit KV-Namespace und Secrets in wenigen Minuten laufen.
Funktioniert so ein Shop auch für meine Bäckerei oder Konditorei?
Ja. Torten, Bleche, Plattenservice – alles mit Vorlauf und Abholtag lässt sich so abbilden. Details unter Online-Bestellsystem.
Wie sind die Produktbilder entstanden?
Es sind Freisteller der echten Produkte des Betriebs, die ich als WebP optimiert habe. Keine KI-Fantasieprodukte, keine Stockfotos.
Passende Leistungen
Das steckt dahinter
Ähnliches Projekt?
Sie brauchen so etwas für Ihren Betrieb?
Schreiben Sie mir, was Sie vorhaben. Ich sage Ihnen ehrlich, was sinnvoll ist, und nenne einen Festpreis.