# AI Website Template Brösling

> Die Kaffeebar mit Backstube, deren Becher im Querschnitt zeigt, was drin ist und welches Gebäck passt.

Brösling ist ein vollständiges Template für eine Kaffeebar mit eigener Rösterei und Backstube an zwei Adressen, mit 17 Seiten. Das Herz ist der Querschnitt. Ein aufgeschnittener Becher zeigt Schicht für Schicht, was in einem Kaffee steckt, Espresso, Milch und Schaum in Millilitern, und wer auf der Startseite ein Gebäck wählt, bekommt den passenden Kaffee samt Begründung. Auf der Karte stehen neun Getränke im Schnitt nebeneinander, darunter sechs Paare aus Tasse und Teller. Dazu kommen eine Karte mit vier Reitern und Filter für vegan und neu, ein Brührechner und drei Anleitungen mit mitlaufendem Timer für Handfilter, French Press und Cezve, eine 72-Stunden-Uhr der Backstube mit einem Faltrechner für die Butterlagen, ein Kombi-Rechner für Kaffee und Gebäck, sechs Bohnen mit Grundpreis und einem Korb, der in eine Bestellanfrage führt, eine Reservierung mit freien Zeiten aus den Öffnungszeiten, vier Kurse mit Kalender, ein Öffnungsstatus in Echtzeit, das Team als Kürzel und ein Kontaktformular für fünf Anliegen.

- Preis: 99 € einmalig, inkl. MwSt.
- Branche: Kaffeebar & Backstube
- Seite: https://ai-website.com/de/templates/broesling

## Enthaltene Seiten

- Startseite mit einer Barista an der Brühstation vor Backstein, dem Querschnitt mit drei Gebäcken und drei Kaffees, der Kaffeekarte von der Tafel, fünf Wegen zu Rösterei, Kursen, Frühstück, Backstube und Brührechner, einem Tageslauf von sieben bis sechs mit einem Punkt für jetzt, drei Beispielstimmen, zwei Adressen mit Öffnungsstatus und sechs Beispielbetrieben aus dem Umland
- Karte mit der Tafel des Tages, vier Reitern für Kaffee, Getränke ohne Kaffee, Backstube und Frühstück, einem Filter für vegan und neu, Preisen mit Paarungen, neun Getränken im Querschnitt von 20 ml Espresso bis 260 ml Cold Brew, sechs Paaren aus Tasse und Teller und vier Antworten zu Milch, Allergenen, Abendpreis und Mehrwegbecher
- Kaffee mit der Rösterei im Kanalspeicher, sechs Kaffees mit Herkunft, Aufbereitung, Noten und Grundpreis, einer Tabelle, welche Bohne in welche Zubereitung gehört, einer Röstkurve für Filter und Espresso, fünf Schritten von Grün zu Braun und einer Woche Ausgasen von Dienstag bis Montag
- Backstube mit einer Uhr über 72 Stunden in sechs Stationen vom Vorteig bis zum Ofen, einem Faltrechner von null bis vier Touren mit den Butterlagen, einem Langtext über 27 Butterlagen zwischen 28 Teiglagen, sechs Zutaten mit ihrer Herkunft und dem Morgen in sechs Blechen
- Frühstück mit sieben Gerichten von French Toast bis zum Korb für zwei, dem Korb in sieben Teilen, einem Rechner für Tasse und Teller mit Nachlass und Empfehlung, einem Samstag in fünf Uhrzeiten und sechs Fragen
- Zubereitung mit einem Brührechner für Methode, Wassermenge und Stärke, drei Methoden im Vergleich, einer Mahlgradskala in sechs Stufen und drei Punkten zum Wasser, dazu je eine Seite für Handfilter, French Press und Cezve mit Eckdaten, Ausrüstung, einem mitlaufenden Timer in fünf Schritten, Hintergrund, einer Tabelle für Fehlgeschmack und der passenden Bohne
- Kurse mit vier Formaten und Filter, allen Terminen im November und Dezember als Kalender, dem Grundkurs in vier Stationen, einer Anfrage mit Haken für einen Gutschein und fünf Fragen, dazu Bohnen mit sechs Kaffees in 250 g oder 1 kg, fünf Mahlungen, Grundpreis an jedem Preis, einem Korb, der in eine Bestellanfrage führt, Abholung oder Versand und sechs Fragen bis zum Widerruf
- Über uns mit einer Chronik von 2014 bis 2026 in sechs Schritten, vier Menschen als Kürzel, drei Sätzen vom Tresen und sechs Beispielbetrieben, dazu Reservieren mit eins bis acht Personen, freien Zeiten im Halbstundentakt, vier Bereichen auf einer Skizze des Cafés, der Woche in Stunden und drei Regeln am Tisch
- Kontakt mit zwei Adressen samt Öffnungszeiten und Anfahrt, einer Tabelle, was es wo gibt, einer gezeichneten Wegskizze durch den Park, einem Formular für fünf Anliegen und vier Kurzantworten, eine eigene 404-Seite sowie Impressum mit Bildnachweis und Datenschutz als Platzhalter mit Anleitung

## Umfang

- 17 Seiten
- Querschnitt mit passendem Gebäck
- Brührechner und Teiguhr
- Astro 7, statisch

## Gestaltung

- Farben: Mehlweiß #f4f1ea, Weizen #e8ddc8, Kruste #a3502a, Röst #211915
- Headline-Schrift: Antonio in schmalen Versalien und Lora mit einer kursiven Betonung
- Textschrift: Lora

## Gedacht fuer

- Kaffeebars und Cafés mit eigener Backstube, deren Gäste wissen wollen, was im Becher ist und was dazu schmeckt
- Betriebe mit einer Rösterei an zweiter Adresse, die Bohnen verkaufen, Kurse geben und Tische reservieren lassen
- Agenturen, die Websites für Cafés, Röstereien und Bäckereien wiederholt und planbar ausliefern

## Nicht gedacht fuer

- Kaffeehäuser, deren Gäste zuerst die passende Bohne suchen, dafür passt Tellhoven mit dem Kaffeefinder
- Häuser mit langer Karte, mehreren Standorten und Bonusprogramm, dafür passt Brennhoven mit dem Geschmackskonfigurator
- Kaffeebars, die vor allem Bohnen im Abo verkaufen, dafür passt Holm mit dem Bedarfsrechner und der Stempelkarte
- Röstereien, die den Röstgrad und die Herkunft bis zum Hof erzählen, dafür ist Darnholt mit der Röstgradskala gebaut
- Cafés, in denen Gäste ihren Tisch im Raumplan selbst aussuchen sollen, Brösling reserviert nach Bereich und nicht nach Tisch

## Was im Paket liegt

- `src/pages/ + src/data/site.ts`: 17 Seiten und die Datei, aus der Karte, Rezepte, Öffnungszeiten, Bohnen, Kurse, Team und Standorte kommen.
- `src/lib/becher.ts + src/data/texte.ts`: Der Querschnitt mit seiner Becherform und jeder Satz der Rechner, Timer und Formulare, dort steht auch die Anrede.
- `src/components/`: Die Bauteile, vom Becher und der Tüte über Öffnungsstatus und Tageslauf bis zu Korb und Kürzeln.
- `src/assets/images/ + src/data/bildnachweis.json`: 38 Fotos von Pexels mit Nachweis zu jedem Motiv.
- `CLAUDE.md + Wissen/`: Das Gedächtnis des Projekts mit Regeln, Zielgruppe, Ton, Bauplan und SEO-Strategie.
- `.claude/skills/`: Sieben Skills für Start, Umbau, Texte, Design, SEO, Prüfung und Systemwissen.
- `styleguide.html + LIZENZEN.md`: Farben, Schriftstufen und gemessene Kontraste, dazu die Lizenzen von Schriften und Fotos.

## FAQ

**Wie funktioniert der Querschnitt?**

Ein aufgeschnittener Becher zeigt die Schichten eines Kaffees in Millilitern. Auf der Startseite stehen links drei Gebäcke und rechts drei Kaffees. Wer eines antippt, sieht das passende Paar, den Becher mit Espresso, Milch und Schaum und einen Satz, warum beides zusammenpasst. Auf der Karte stehen neun Getränke im Schnitt nebeneinander, von 20 ml Espresso bis 260 ml Cold Brew.

**Stimmen die Mengen im Becher?**

Ja, sie folgen den Rezepten der Karte. Ein Cappuccino hat 36 ml Espresso, 90 ml Milch und 60 ml Schaum, ein Flat White 36, 120 und 15. Der Becher fasst 265 ml bis unter den Deckel und wird nach oben weiter, deshalb rechnet src/lib/becher.ts die Höhe jeder Schicht aus dem Volumen und nicht linear. Die Rezepte stehen in src/data/site.ts, eine Fachprüfung hat sie im Oktober 2026 nachgerechnet.

**Was unterscheidet Brösling von den anderen Café-Templates?**

Alle fünf sind für Cafés mit eigener Röstung gebaut, aber jedes beantwortet eine andere erste Frage. Tellhoven findet mit acht Antworten den passenden Kaffee, Brennhoven sortiert eine lange Karte mit einem Geschmackskonfigurator, Holm rechnet den Bedarf für ein Bohnen-Abo, Darnholt erklärt den Röstgrad auf einer Skala. Brösling zeigt, was im Becher steckt und welches Gebäck dazu passt, und stellt die Backstube gleichrangig neben die Rösterei, hell in Mehlweiß mit Kruste als Signal.

**Wie funktionieren Brührechner und Timer?**

Methode wählen, Wassermenge und Stärke einstellen, und der Rechner nennt Gramm Kaffee, Verhältnis, Esslöffel und Brühzeit. Handfilter und French Press rechnen mit 1 zu 18, 1 zu 16,7 oder 1 zu 15, die Cezve mit 1 zu 10, 1 zu 9 oder 1 zu 8. Jede Methode hat dazu eine eigene Seite mit einem Timer, der mitläuft und den aktuellen Schritt hervorhebt, drei Minuten für den Handfilter, neun für die French Press samt Ruhe und vier für die Cezve.

**Was kann die Backstube?**

Eine Uhr über 72 Stunden folgt beim Scrollen sechs Stationen vom Vorteig bis zum Ofen. Ein Faltrechner zeigt von null bis vier Touren, wie aus einer Butterlage nach drei einfachen Touren 27 werden, mit den Teiglagen daneben. Dazu ein Langtext, der die Rechnung erklärt und sagt, warum eine vierte Tour das Croissant nicht besser macht, sechs Zutaten mit Herkunft und der Morgen in sechs Blechen mit Uhrzeit und Preis.

**Wie funktioniert die Reservierung?**

Datum, eins bis acht Personen, Uhrzeit und Bereich. Die freien Zeiten kommen aus den Öffnungszeiten, im Halbstundentakt bis eine Stunde vor Schluss und für heute erst ab zwei Stunden nach jetzt. Ab neun Personen führt die Seite ins Kontaktformular. Eine Skizze des Cafés hebt den gewählten Bereich hervor, eine Platzwahl gibt es bewusst nicht. Verschickt wird noch nichts, den Versand richtet deine KI ein.

**Ist das ein Onlineshop?**

Nein, bezahlt wird nicht auf der Seite. Sechs Kaffees lassen sich mit Größe und Mahlung in einen Korb legen, der sich im Browser merkt, was drin ist. Der Knopf Bestellung anfragen führt mit dem Korb ins Kontaktformular, und der Betrieb meldet sich mit Röstdatum und Zahlungsweg. Wer einen Shop anbinden will, lässt deine KI die Knöpfe dorthin führen.

**Was muss beim Bohnenverkauf auf der Seite stehen?**

Neben jedem Preis einer Tüte steht der Grundpreis je Kilogramm, am Shop dazu inklusive Mehrwertsteuer und zuzüglich Versand. Die Fragen auf der Bohnenseite nennen das Widerrufsrecht von 14 Tagen ab Erhalt, wenn per Mail oder Formular bestellt wird, und dass die Belehrung mit der Bestätigung kommt. Was rund um eine eigene Rösterei sonst gilt, steht in der Wissensschicht. Diese Hinweise sind keine Rechtsberatung.

**Wie stehen Allergene und vegane Angaben drin?**

Die Karte markiert vegane Getränke und Speisen und hat einen Filter dafür. Ein Kasten nennt Gluten, Milch, Ei und Spuren von Schalenfrüchten und sagt, dass die Liste der 14 Hauptallergene an beiden Tresen ausliegt. Diese Liste führst du im Laden, bei loser Ware ist sie Pflicht. Hafer- oder Mandeldrink kostet 40 Cent mehr.

**Wie trage ich Karte, Öffnungszeiten und Preise ein?**

Karte, Rezepte, Öffnungszeiten, Bohnen, Kurse, Team und Standorte stehen in src/data/site.ts, die langen Texte der Backstube und der Anleitungen in src/data/langtexte.ts. Die Öffnungszeiten stehen einmal und speisen Kopf, Fuß, Öffnungsstatus, Tageslauf und die freien Zeiten der Reservierung. Ein Gebäckpreis steht an mehreren Stellen, auf der Karte und im Blechplan der Backstube, deine KI zieht alle mit.

**Woher weiß die Seite, ob gerade offen ist?**

Kopf und Startseite rechnen aus den Öffnungszeiten, ob das Café gerade offen hat und bis wann, nach deutscher Zeit. Der Tageslauf setzt einen Punkt auf die aktuelle Stunde, die Woche auf der Reservierungsseite markiert heute. Ohne Skript stehen die Öffnungszeiten als Liste da.

**Kann man Kurse online buchen?**

Angefragt, nicht gebucht. Die Kursseite zeigt vier Formate mit Filter, alle Termine im November und Dezember als Kalender und ein Formular mit Haken für einen Gutschein. Bezahlt wird nach der Bestätigung. Die Absageregel steht dabei, bis sieben Tage vorher kostenlos, danach Ersatzperson oder Umbuchung. Termine und Preise sind Beispieldaten.

**Sind Namen, Preise und Stimmen echt?**

Nein. Betrieb, Menschen, Preise, Termine, Kennzahlen, Lieferanten und Stimmen sind erfunden, und die Seite sagt das an Ort und Stelle, an jeder Stimme, auf der Karte, bei den Kursterminen, auf der Teamseite, an den Lieferanten und im Fuß jeder Seite. Die Kaffeehändlerstraße und der Kanalspeicher sind erfunden, Telefon und Mail ersetzt du durch deine. Südvorstadt, Plagwitz, die Karli und die Tram stehen als echte Lage da.

**Wer ist auf den Fotos?**

Fremde Menschen auf Beispielmotiven von Pexels. Die Lizenz erlaubt die kommerzielle Nutzung, ein Model-Release liegt nicht vor. Deshalb steht das Team als Kürzel statt mit Porträts auf der Seite, und die Bilder aus Backstube und Kursraum zeigen nur Hände. Vor dem Livegang ersetzt du die Fotos mit Menschen durch eigene Aufnahmen mit schriftlicher Einwilligung, die Teamseite sagt, wo eure Teamfotos hingehören.

**Kann ich die Fotos behalten?**

Die 38 Fotos stammen von Pexels und dürfen kommerziell genutzt werden. Sie zeigen keinen echten Betrieb. src/data/bildnachweis.json nennt zu jedem Motiv Fotografin oder Fotograf, Quelle und Lizenz, das Impressum listet alle Namen. Becher, Röstkurve, Teiguhr, Wegskizze, Tüte und das Croissant-Zeichen sind eigene Zeichnungen des Templates.

**Sind Impressum und Datenschutz enthalten?**

Als Platzhalterseiten mit Anleitung, nicht als vorformulierte Rechtstexte, und bis zum Ausfüllen mit noindex und ohne Eintrag in der Sitemap. Die Anleitung nennt, was bei Café, Bäckerei und Bohnenversand hineingehört, etwa Handwerkskammer und Meistertitel, Umsatzsteuer-Identifikationsnummer, Verbraucherstreitbeilegung und die Widerrufsbelehrung für den Versand. Darunter steht der Bildnachweis. Diese Hinweise sind keine Rechtsberatung.

**Lädt die Seite etwas von fremden Servern?**

Nein. Antonio und Lora liegen in public/fonts/, die Fotos im Projekt, die Wegskizze ist gezeichnet, und es wird keine Karte eingebettet. Im Browser läuft eigenes JavaScript ohne Bibliothek. Das Cookie-Fenster schreibt die Wahl in den dataLayer, Statistik und externe Medien sind mit keinem Dienst belegt.

**Sind Suchmaschinen und Teilen-Bilder vorbereitet?**

Ja. Jede Seite hat eigenen Titel, Beschreibung und Brotkrumen, dazu ein Schema CafeOrCoffeeShop mit beiden Adressen, Öffnungszeiten und Speisekarte mit Preisen. Die Seiten ergänzen HowTo für die Anleitungen, Course für die Kurse, Product für die Bohnen, FAQPage, AboutPage und ContactPage. Die Teilen-Bilder in 1200 mal 630 Pixeln baut Astro beim Bauen aus einem Foto der jeweiligen Seite.

**Funktioniert die Seite ohne JavaScript?**

Ja. Jede Überschrift und jeder Text steht ohne Skript da. Der Querschnitt zeigt dann das Paar aus Croissant und Cappuccino, die Rechner ein festes Beispiel, Fragen sind aufgeklappt, Reiter stehen untereinander, und das Menü am Telefon öffnet sich. Die Wahl im Becher, Timer, Korb, freie Zeiten und Öffnungsstatus brauchen JavaScript.

**Welche Anrede benutzt das Template?**

Durchgehend Du, der Betrieb spricht als wir. Die Sätze der Rechner, Timer und Formulare stehen in src/data/texte.ts, die Seiten unter src/pages/ tragen ihre Texte selbst. Deine KI stellt auf Sie um, wenn ihr eure Gäste siezt.

**Passt das auch für eine Bäckerei oder eine Rösterei ohne Café?**

Der Aufbau ja. Wer nur bäckt, nimmt Rösterei und Zubereitung heraus und behält Querschnitt, Backstube und Frühstück. Eine Rösterei ohne Café streicht Frühstück und Reservierung und rückt Bohnen und Kurse nach vorn. Mit nur einer Adresse fasst deine KI die beiden Standorte zusammen.

**Wo kann ich die Seite hosten?**

Überall, wo statische Dateien liegen dürfen. Astro baut die Seite in einen Ordner mit fertigem HTML, den du bei deinem Hoster hochlädst. Vorher setzt deine KI die eigene Domain in astro.config.mjs und in robots.txt ein.

**Gehört mir das Template?**

Ja. Einmal zahlen, für immer deins, für eigene Projekte und Kundenprojekte. Du bekommst den vollständigen Quellcode ohne Wasserzeichen.

**Ist die Seite auch auf Englisch dabei?**

Ja. Im englischen Paket ist die ganze Website englisch, mit englischer Wissensschicht und englischen Skills. Zahlen, Euro, Uhrzeiten und Datum formatieren die Skripte in der Sprache der Seite.

**Brauche ich Programmierkenntnisse?**

Nein. Du sagst deiner KI im Projektordner, was sich ändern soll, und sie findet die Stelle über CLAUDE.md und die sieben Skills. Wer selbst Hand anlegen will, findet Karte, Rezepte und Öffnungszeiten in src/data/site.ts und die Becherform in src/lib/becher.ts.

---

Kanonische Seite: https://ai-website.com/de/templates/broesling · Englisch: https://ai-website.com/templates/broesling · Alle Templates: https://ai-website.com/llms.txt