# AI Website Template Brösling

> The coffee bar with a bakery whose cup in cross-section shows what is inside and which pastry goes with it.

Brösling is a complete template for a coffee bar with its own roastery and bakery at two addresses, with 17 pages. At its heart is the cross-section. A cup cut open shows layer by layer what is in a coffee, espresso, milk and foam in millilitres, and anyone who picks a pastry on the home page gets the coffee that goes with it, with the reason why. The menu shows nine drinks in cross-section side by side, plus six pairings of cup and plate. Add a menu with four tabs and filters for vegan and new, a brew calculator and three brewing guides with a running timer for pour-over, French press and cezve, a 72-hour dough clock with a folding calculator for the butter layers, a calculator that pairs coffee and pastry, six coffees with a price per kilo and a basket that leads to an order request, table reservations with free times taken from the opening hours, four courses with a calendar, a live opening status, the team as initials and a contact form for five topics.

- Price: €99 one-time, VAT included
- Industry: Coffee bar & bakery
- Page: https://ai-website.com/templates/broesling

## Pages included

- Home page with a barista at the brew station in front of a brick wall, the cross-section with three pastries and three coffees, the coffee menu from the board, five routes to the roastery, courses, breakfast, bakery and brew calculator, a day from seven to six with a dot for now, three sample testimonials, two addresses with opening status and six sample suppliers from the surrounding area
- Menu with the board of the day, four tabs for coffee, drinks without coffee, bakery and breakfast, a filter for vegan and new, prices with pairings, nine drinks in cross-section from 20 ml of espresso to 260 ml of cold brew, six pairings of cup and plate and four answers on milk, allergens, the evening price and reusable cups
- Coffee with the roastery at the Kanalspeicher, six coffees with origin, process, tasting notes and price per kilo, a table of which bean suits which brewing method, a roast curve for filter and espresso, five steps from green to brown and a week of degassing from Tuesday to Monday
- Bakery with a clock over 72 hours in six stations from the starter dough to the oven, a folding calculator from zero to four folds with the butter layers, a long read on 27 butter layers between 28 dough layers, six ingredients with their origin and the morning in six trays
- Breakfast with seven dishes from French toast to the basket for two, the basket in seven parts, a Cup and Plate calculator with the discount and a recommendation, a Saturday in five times of day and six questions
- Brewing with a brew calculator for method, amount of water and strength, three methods compared, a grind scale in six steps and three points on water, plus a page each for pour-over, French press and cezve with key figures, equipment, a running timer in five steps, background, a table for off flavours and the matching bean
- Courses with four formats and a filter, all dates in November and December as a calendar, the basic course in four stations, an enquiry with a tick box for a gift voucher and five questions, plus beans with six coffees in 250 g or 1 kg, five grinds, a price per kilo beside every price, a basket that leads to an order request, pickup or shipping and six questions up to the right of withdrawal
- About us with a timeline from 2014 to 2026 in six steps, four people as initials, three sentences from the counter and six sample suppliers, plus reservations for one to eight people, free times every half hour, four areas on a sketch of the cafe, the week in hours and three rules at the table
- Contact with two addresses including opening hours and directions, a table of what is where, a drawn route sketch through the park, a form for five topics and four short answers, a custom 404 page plus legal notice with photo credits and privacy policy as placeholders with instructions

## Scope

- 17 pages
- Cross-section with the matching pastry
- Brew calculator and dough clock
- Astro 7, static

## Design

- Colours: Flour white #f4f1ea, Wheat #e8ddc8, Crust #a3502a, Roast #211915
- Headline type: Antonio in narrow capitals and Lora with one word in italics
- Body type: Lora

## Built for

- Coffee bars and cafes with their own bakery whose guests want to know what is in the cup and what goes with it
- Businesses with a roastery at a second address that sell beans, run courses and take table reservations
- Agencies that deliver websites for cafes, roasteries and bakeries repeatedly and predictably

## Not built for

- Coffee houses whose guests first look for the right bean, Tellhoven fits that with its coffee finder
- Houses with a long menu, several locations and a rewards programme, Brennhoven fits that with its taste configurator
- Coffee bars that mainly sell beans by subscription, Holm fits that with its quantity calculator and stamp card
- Roasteries that tell the story of roast level and origin down to the farm, Darnholt is built for that with its roast scale
- Cafes where guests should pick their own table on a floor plan, Brösling reserves by area, not by table

## What is in the package

- `src/pages/ + src/data/site.ts`: 17 pages and the file that feeds the menu, recipes, opening hours, beans, courses, team and locations.
- `src/lib/becher.ts + src/data/texte.ts`: The cross-section with the shape of its cup and every sentence of the calculators, timers and forms, which is also where the form of address lives.
- `src/components/`: The components, from the cup and the coffee bag through opening status and the day on the home page to the basket and the initials.
- `src/assets/images/ + src/data/bildnachweis.json`: 38 photos from Pexels with credits for every image.
- `CLAUDE.md + Wissen/`: The project’s memory with rules, audience, tone, build plan and SEO strategy.
- `.claude/skills/`: Seven skills for start, rebuild, copy, design, SEO, checks and system knowledge.
- `styleguide.html + LIZENZEN.md`: Colours, type scale and measured contrasts, plus the licences of fonts and photos.

## FAQ

**How does the cross-section work?**

A cup cut open shows the layers of a coffee in millilitres. On the home page there are three pastries on the left and three coffees on the right. Tap one and you see the matching pairing, the cup with espresso, milk and foam and a sentence on why the two go together. The menu shows nine drinks in cross-section side by side, from 20 ml of espresso to 260 ml of cold brew.

**Are the amounts in the cup right?**

Yes, they follow the recipes on the menu. A cappuccino has 36 ml of espresso, 90 ml of milk and 60 ml of foam, a flat white 36, 120 and 15. The cup holds 265 ml up to the lid and widens towards the top, so src/lib/becher.ts works out the height of each layer from the volume rather than in a straight line. The recipes live in src/data/site.ts, and a specialist review recalculated them in October 2026.

**How is Brösling different from the other cafe templates?**

All five are built for cafes with their own roasting, but each answers a different first question. Tellhoven finds the right coffee with eight answers, Brennhoven sorts a long menu with a taste configurator, Holm works out how much a bean subscription needs, Darnholt explains the roast level on a scale. Brösling shows what is in the cup and which pastry goes with it, and puts the bakery on an equal footing with the roastery, light in flour white with crust as the signal.

**How do the brew calculator and the timer work?**

Choose a method, set the amount of water and the strength, and the calculator gives grams of coffee, ratio, tablespoons and brewing time. Pour-over and French press use 1 to 18, 1 to 16.7 or 1 to 15, the cezve 1 to 10, 1 to 9 or 1 to 8. Each method also has its own page with a timer that runs along and highlights the current step, three minutes for pour-over, nine for the French press including the rest and four for the cezve.

**What can the bakery page do?**

A clock over 72 hours follows six stations from the starter dough to the oven as you scroll. A folding calculator from zero to four folds shows how one butter layer becomes 27 after three single folds, with the dough layers beside it. Add a long read that explains the calculation and why a fourth fold does not make the croissant better, six ingredients with their origin and the morning in six trays with time and price.

**How do reservations work?**

Date, one to eight people, time and area. The free times come from the opening hours, every half hour until one hour before closing, and for today only from two hours after now. From nine people the page leads to the contact form. A sketch of the cafe highlights the chosen area, there is deliberately no seat picker. Nothing is sent yet, your AI sets up the sending.

**Is this an online shop?**

No, nobody pays on the site. Six coffees can go into a basket with size and grind, and the browser remembers what is in it. The button to request an order takes the basket to the contact form, and the business replies with the roast date and how to pay. If you want to connect a shop, your AI points the buttons there.

**What has to be on the page when selling beans?**

Beside every price of a bag stands the price per kilo, and in the shop also including VAT and plus shipping. The questions on the beans page state the right of withdrawal of 14 days from receipt when people order by email or form, and that the information on it comes with the confirmation. What else applies to running your own roastery is in the knowledge layer. These notes are not legal advice.

**How are allergens and vegan options shown?**

The menu marks vegan drinks and dishes and has a filter for them. A box names gluten, milk, egg and traces of nuts and says that the list of the 14 main allergens is available at both counters. You keep that list in the shop, for loose food it is mandatory. Oat or almond drink costs 40 cents extra.

**How do I enter our menu, opening hours and prices?**

Menu, recipes, opening hours, beans, courses, team and locations live in src/data/site.ts, the long texts of the bakery and the brewing guides in src/data/langtexte.ts. The opening hours are entered once and feed the header, footer, opening status, the day on the home page and the free times for reservations. A pastry price appears in more than one place, on the menu and in the bakery’s tray plan, and your AI updates them all.

**How does the site know whether you are open?**

Header and home page work out from the opening hours whether the cafe is open right now and until when, in German time. The day on the home page puts a dot on the current hour, and the week on the reservation page marks today. Without scripts the opening hours stand as a list.

**Can people book courses online?**

They enquire rather than book. The courses page shows four formats with a filter, all dates in November and December as a calendar and a form with a tick box for a gift voucher. Payment follows the confirmation. The cancellation rule is right there, free up to seven days before, after that a replacement person or a new date. Dates and prices are sample data.

**Are the names, prices and testimonials real?**

No. The business, people, prices, dates, key figures, suppliers and testimonials are made up, and the site says so right where they appear, on every testimonial, on the menu, with the course dates, on the team page, with the suppliers and in the footer of every page. The street and the Kanalspeicher address are made up, and you replace phone and email with your own. Südvorstadt, Plagwitz, the Karli and the tram are real geography.

**Who is in the photos?**

Strangers in sample photos from Pexels. The licence allows commercial use, a model release is not available. That is why the team appears as initials instead of portraits, and the photos from the bakery and the course room only show hands. Before going live you replace the photos of people with your own, taken with written consent, and the team page says where your team photos belong.

**Can I keep the photos?**

The 38 photos come from Pexels and may be used commercially. They show no real business. src/data/bildnachweis.json names the photographer, source and licence for every image, and the legal notice lists all names. The cup, roast curve, dough clock, route sketch, coffee bag and the croissant sign are the template’s own drawings.

**Are legal notice and privacy policy included?**

As placeholder pages with instructions, not as pre-written legal texts, and marked noindex and left out of the sitemap until they are filled in. The instructions list what a cafe, a bakery and a bean mail order need, such as the chamber of crafts and the master craftsman title, the VAT number, consumer dispute resolution and the withdrawal notice for shipping. Below that are the photo credits. These notes are not legal advice.

**Does the site load anything from third-party servers?**

No. Antonio and Lora live in public/fonts/, the photos in the project, the route sketch is drawn, and no map is embedded. The browser runs its own JavaScript without a library. The cookie banner writes the choice to the dataLayer, statistics and external media are not connected to any service.

**Are search engines and share images prepared?**

Yes. Every page has its own title, description and breadcrumbs, plus a CafeOrCoffeeShop schema with both addresses, opening hours and a menu with prices. The pages add HowTo for the guides, Course for the courses, Product for the beans, FAQPage, AboutPage and ContactPage. The share images at 1200 by 630 pixels are built from a photo of each page.

**Does the site work without JavaScript?**

Yes. Every heading and every text is there without scripts. The cross-section then shows the pairing of croissant and cappuccino, the calculators a fixed example, questions stand open, tabs stand one below the other, and the menu on the phone opens too. The choice in the cup, timers, basket, free times and opening status need JavaScript.

**How does the template address visitors?**

With the informal you throughout, and the business speaks as we. The sentences of the calculators, timers and forms are collected in src/data/texte.ts, and the pages under src/pages/ carry their own copy. Your AI switches to a formal tone if that suits your guests better.

**Does this work for a bakery or a roastery without a cafe?**

The structure does. A bakery takes out the roastery and the brewing pages and keeps the cross-section, bakery and breakfast. A roastery without a cafe drops breakfast and reservations and moves beans and courses to the front. With only one address, your AI merges the two locations.

**Where can I host the site?**

Anywhere static files may live. Astro builds the site into a folder of finished HTML that you upload to your host. Before that, your AI sets your own domain in astro.config.mjs and in robots.txt.

**Do I own the template?**

Yes. Pay once, yours for good, for your own projects and client projects. You get the complete source code without a watermark.

**Is the site included in English too?**

Yes. In the English package the whole website is in English, with an English knowledge layer and English skills. The scripts format numbers, euros, times and dates in the language of the page.

**Do I need programming skills?**

No. You tell your AI in the project folder what should change, and it finds the place through CLAUDE.md and the seven skills. If you want to edit things yourself, you will find menu, recipes and opening hours in src/data/site.ts and the shape of the cup in src/lib/becher.ts.

---

Canonical page: https://ai-website.com/templates/broesling · German: https://ai-website.com/de/templates/broesling · All templates: https://ai-website.com/llms.txt