--- title: Website-Relaunch exner-glas.de — Umsetzungsplan date: 2026-08-06 tags: - exner - website - relaunch - astro status: draft --- # Website-Relaunch exner-glas.de — Umsetzungsplan **Kurzüberblick:** Relaunch der Website der Bau- und Kunstglaserei Exner (Newel bei Trier) als statische Astro-Website. Die neue Seite verzahnt zwei gleichwertige Pfade: **Kunden gewinnen** (Anfragen, Aufmaßtermine) und **Bewerber gewinnen** (Gesellen, Meister, Azubis, Quereinsteiger). Dieser Plan ist die verbindliche Arbeitsgrundlage für das Beratungsgespräch, das Screendesign im Design-Modus und die spätere Astro-Umsetzung. Grundlage: Moodboard (`2026-08-05_website-moodboard_exner.md`), Benchmark-Recherche (`2026-08-05_website-inspiration-glasereien_v3.md`), Logo-Dateien, Brand-Farbwelt und Ist-Analyse der Live-Seite. --- ## 1. Ist-Zustand (Stand 06.08.2026) | Aspekt | Befund | |---|---| | Technik | Website-Baukasten, träge Ladezeichen (Lazy-Platzhalter), Karte hinter Cookie-Wall | | Struktur | Nur 5 Seiten: Home, Glaskunst, Pflegetipps, Über uns, Kontakt | | Karriere | Stellenanzeige als Textblock auf der Startseite, kein eigener Bereich, keine Benefits | | Leistungen | Als schlichte Bullet-Liste auf der Startseite, keine Leistungsseiten, keine Nutzenargumentation | | Referenzen | Nicht vorhanden (nur Galerien in „Glaskunst") | | Tonalität | Uneinheitlich, Tippfehler („deshlab"), Fax-Nummer, teils verwaiste Formulierungen | | Conversion | Telefonnummer im Header — sonst keine klare CTA-Führung | **Kernaussage:** Der Ist-Auftritt informiert, führt aber weder Kunden noch Bewerber. Der Relaunch ist kein Facelift, sondern ein struktureller Neubau. --- ## 2. Ziele und Zielgruppen ### Primärziele 1. **Kunden-Conversion:** Anfragen und Aufmaß-/Beratungstermine für Bauglaserei und Kunstglas, regional (Newel, Trier, Umgebung). 2. **Bewerber-Conversion:** Qualifizierte Kurzbewerbungen für offene Rollen — ohne Formularhürde. 3. **Vertrauen & Sichtbarkeit:** „Seit 1973, Inhaberin-geführt" als Differenzierer; bessere lokale Auffindbarkeit (Google, KI-Suchen). ### Zielgruppen | Gruppe | Bedürfnis | Erfolgssignal | |---|---|---| | Privatkunden (Hausbesitzer, 35–70) | Vertrauen, Beratung, saubere Ausführung | Anruf / Anfrageformular | | Gewerbe & Architekten | Zuverlässigkeit, Referenzen, Termintreue | Projektanfrage | | Gesellen/Meister (m/w/d) | Konditionen, Teamklima, Sicherheit | Kurzbewerbung | | Azubis/Quereinsteiger | Niedrigschwelle, menschlicher Eindruck | Kurzbewerbung / Anruf | ### Messbare Zielwerte (nach Launch, 6 Monate) - Anfragen/Monat über Formular + getrackte Anrufe (Baseline: heute nicht messbar) - ≥ 2–3 Kurzbewerbungen/Quartal über die Karriereseite - PageSpeed mobil ≥ 90, LCP < 2,5 s --- ## 3. Marken- und Designrichtung ### Farbwelt (aus `EXNER_Brand-Color.png` und Logo, verbindlich) | Rolle | Wert | Einsatz | |---|---|---| | Primär Petrol | `#11888F` | Header-Akzente, Links, primäre Buttons, Icons | | Helles Aqua | `#A0D5D9` | Flächige Sektionshintergründe, Hover-Flächen | | Gelb | `#F2E205` | **Nur** als Grafik-Akzent (Logo-Striche, feine Linien, Marker) — nie als Fläche hinter Text, nie für Text (Kontrast) | | Hellgrau | `#CCCCCC` | Linien, Borders, dezente Trennung | | Dunkelgrau | `#393939` | Fließtext, dunkle Flächen (Footer) | | Neutral | Weiß/Off-White | Grundfläche, viel Weißraum | Bei der Umsetzung werden die Hex-Werte 1:1 als OKLch-Tokens abgeleitet (`brand-spec.md` im Design-Schritt), keine neuen Farben erfinden. ### Typografie-Richtung - **Display:** klar, modern, leicht technisch (passt zu Glas/Präzision) — konkrete Auswahl im Design-Schritt. - **Fließtext:** sehr gut lesbare, ruhige Sans. - Display ≠ Fließtext; keine Serifen-Show — der Betrieb ist Handwerk, nicht Galerie. ### Bildsprache (kritischster Erfolgsfaktor) - **Ausschließlich echte Fotos:** Werkstatt Newel, Montage, Team, Inhaberin, Projekte (vorher/nachher), Glas-Details. Keine Stockfotos. - Hell, ruhig, großzügig beschnitten (Referenz: Glas Monschau); Glas-Detailaufnahmen für den Kunstglas-Strang (Referenz: Lamberts). ### Grundrichtung — Empfehlung **Variante A (bildgeführt, hell, ruhig) als Basis, plus Variante-B-Elemente im Karrierebereich** (kräftige Teamstimme, Trust-Zahlen, „Warum Exner"). Begründung: Der Kundenpfad profitiert von Ruhe und Weißraum; der Bewerberpfad braucht Persönlichkeit. Beide CTAs bleiben ab dem Hero gleichwertig sichtbar, aber visuell unterscheidbar. > TODO: Grundrichtung im Beratungsgespräch mit Frau Exner bestätigen. ### Tonalität - Kundenbereich: **Sie**, sachlich-warm, konkret („Beratung, Aufmaß und Montage durch eigene Mitarbeiter — keine Subunternehmer"). - Karrierebereich: **Du**, direkt, bodenständig, Eifel-nah — keine Berliner-Kiez-Sprache, keine leeren Floskeln. - Leitton (Moodboard): „Wir arbeiten seit 1973 mit Glas. Sorgfältig, persönlich und als Team." > TODO: Anrede-Split (Sie Kunden / Du Karriere) bestätigen. --- ## 4. Informationsarchitektur (Sitemap) ``` / Startseite (beide Pfade) /leistungen/ Übersicht Bauglaserei & Interior /leistungen/glasduschen/ /leistungen/kuechenrueckwaende/ /leistungen/glasvordaecher/ /leistungen/glastueren-ganzglas/ /leistungen/spiegel/ /leistungen/reparatur-glasnotdienst/ /glaskunst/ Glaskunst & Veredelung (Unikate, Sandstrahl, Bleiverglasung, Druck) /referenzen/ Projekte mit Kontext (Filter: Bauglas / Kunstglas) /karriere/ Karriere-Welt (Warum Exner, Team, Rollen, Kurzbewerbung) /ueber-uns/ Geschichte seit 1973, Inhaberin, Team, Werkstatt /ratgeber/ Pflegetipps & Wartung (SEO-/AI-Sichtbarkeit) — optional Phase 2 /kontakt/ Anfahrt, Formular, Öffnungszeiten, Notdienst-Hinweis /impressum/ · /datenschutz/ ``` Entscheidungen hinter der Struktur: - **Karriere als Top-Level-Punkt** (Benchmarks: Alexglaserei, Monschau, Peper, Zitto — übereinstimmend). - **Leistungen mit eigenen Unterseiten** statt Bullet-Liste (Benchmark: DIE GLASER) — jede Seite trägt eine Suchintention („Glasdusche Trier" etc.). - **Reparatur/Notdienst als eigene Leistungsseite** — hohes Suchvolumen, direkter Kunden-Pull (Benchmark: Monschau). - **Glaskunst bleibt eigenständig** (Traditions-Strang, emotionalisiert), aber gestrafft. - **Pflegetipps → Ratgeber**: bestehender Inhalt wird übernommen und ausgebaut; als Phase-2-Baustein markiert, falls der Aufwand zum Launch zu hoch ist. > TODO: Gewicht Kunstglas vs. Bauglas/Reparatur im Gespräch klären (beeinflusst Reihenfolge in Navi und Startseite). > TODO: Notdienst-Kommunikation klären: Gibt es einen echten Glasnotdienst? Wenn ja, mit Erreichbarkeits-Zeiten prominent; wenn nein, nur „Reparatur-Schnelldienst" formulieren. --- ## 5. Seitenpläne ### 5.1 Startseite `/` **Ziel:** Erstorientierung in < 5 Sekunden; Weiterleitung in beide Pfade. | # | Sektion | Inhalt | CTA | |---|---|---|---| | 1 | Hero | Großes echtes Projekt-/Werkstattfoto, Claim (Arbeitstitel: „Visionen in Glas — seit 1973" oder kürzer), Nutzen-Satz, Trust-Badge „Meisterbetrieb seit 1973" | **Primär:** „Projekt besprechen" · **Sekundär gleichwertig:** „Karriere entdecken" | | 2 | Leistungs-Cards | 6 Cards mit echte Foto + 1 Nutzenzeile (Duschen, Küchenrückwände, Vordächer, Glastüren, Spiegel, Reparatur) | Card-Link → Leistungsseite | | 3 | Glaskunst-Teaser | Emotionaler Bildblock, Kurztext Unikate/Veredelung | „Glaskunst ansehen" (Textlink) | | 4 | Trust-Zahlen | Seit 1973 · inhabergeführt · 4 Mitarbeitende · Region Trier/Newel — nur nach Bestätigung | — | | 5 | Referenzen-Teaser | 3 Projekte mit Ort + Kurzbeschreibung | „Alle Projekte" | | 6 | Karriere-Band | Teamfoto, 2–3 echte Gründe („Warum Exner"), Rollen-Kurzliste | „In 2 Minuten bewerben" | | 7 | Kontakt-Band | Telefon groß, Öffnungszeiten, Adresse, Karten-Teaser (ohne Cookie-Wall, siehe § 8) | „Jetzt anrufen" / Formular-Link | **Medienbedarf:** Hero-Foto (Projekt oder Werkstatt, quer), 6 Leistungsfotos, 1 Glaskunst-Detail, 3 Referenzfotos, 1 Teamfoto. ### 5.2 Leistungs-Übersicht + Unterseiten **Ziel:** Suchintention bedienen, Anfrage auslösen. Jede Unterseite gleiches, wiedererkennbares Muster: 1. Hero-Bild der Leistung + Nutzen-Claim (räumlicher Nutzen, vgl. „Licht. Leichtigkeit. Lebensraum.") 2. „Das übernehmen wir": 3–5 konkrete Leistungsbausteine (Beratung, Aufmaß, Fertigung, Montage — durch eigene Mitarbeiter) 3. 2–3 Beispielprojekte/Detailfotos 4. Mini-FAQ (2–4 Fragen: Ablauf, Dauer, Preisrahmen-Hinweis) 5. CTA-Band: „Unverbindlich beraten lassen" → Kontaktformular mit vorausgewählter Leistung **Sonderseite Reparatur:** Telefon-First-Layout, Foto-Upload-Hinweis („Foto vom Schaden schicken"), Ablauf in 3 Schritten, ggf. Notdienst-Zeiten. ### 5.3 Glaskunst & Veredelung `/glaskunst/` **Ziel:** Positionierung als Kunstglas-Spezialbetrieb, Emotionalisierung. 1. Hero mit Glas-Detailaufnahme (Lamberts-Niveau anstreben) 2. Techniken als kompakte Module: Sandstrahldekore, Bleiverglasung, Drucktechniken, Edelstahl-Kombinationen, Fusing/UV-Verklebung (prüfen, was Exner tatsächlich anbietet) 3. Galerie mit Kontext-Zeilen (Objekt, Technik, Ort) — nicht als dekorative Bilderwand 4. CTA: „Unikat anfragen" > TODO: Technik-Liste mit Betrieb verifizieren (Ist-Text nennt Druck, Sandstrahl, Edelstahl; Moodboard nennt zusätzlich Fusing/UV — was stimmt?). ### 5.4 Referenzen `/referenzen/` **Ziel:** Beweis führen, nicht dekorieren. - Filter: Alle / Bauglas / Kunstglas - Projektkarte: Foto, Ort, Leistung, 1–2 Sätze Kontext; ggf. vorher/nachher bei Reparaturen - Launch-Umfang: 6–9 Projekte reichen völlig > TODO: Projektauswahl + Freigaben der Kunden einholen. ### 5.5 Karriere `/karriere/` — der zweite Hauptpfad **Ziel:** Kurzbewerbung ohne Hürde. Referenz: Glas-Zitto + Alexglaserei. | # | Sektion | Inhalt | |---|---|---| | 1 | Karriere-Hero | Echtes Teamfoto, persönliche Ansprache („Ich bin Michaela Exner-van der Sanden …"), Du-Form | | 2 | Warum Exner | 4–6 konkrete Benefits (keine Floskeln): z. B. familiengeführt, abwechslungsreich, gute Bezahlung, Entwicklung, Wochenende frei — **echte Liste im Gespräch erheben** | | 3 | Arbeitsalltag | Werkstatt/Montage-Bildband, kurze „So läuft das bei uns"-Texte | | 4 | Offene Rollen | Karten je Rolle (Ist-Bestand: Glasermeister/in, Glasergeselle/in, Helfer/Quereinsteiger/Praktikum — **aktuellen Stand bestätigen**, Ausbildung explizit ergänzen falls geplant): Aufgaben, Anforderungen, Eckdaten (Vollzeit/Teilzeit, IHK etc.) | | 5 | Team-Stimmen / Heldengeschichten | 1–2 kurze Entwicklungswege — sobald Fotos/Zitate vorliegen, sonst Phase 2 | | 6 | Kurzbewerbung | Name, Telefon/Mail, Rolle, Nachricht — fertig. Alternativ direkte Mail `m.exner@exner-glas.de` prominent. Kein Pflicht-Lebenslauf-Upload. | ### 5.6 Über uns `/ueber-uns/` **Ziel:** Verlässlichkeit und persönliche Nähe. - Timeline: Gründung 1973 (Matthias Exner) → Übernahme 2011 (Michaela Exner-van der Sanden) → heute - Porträt der Inhaberin + Teamvorstellung mit echten Fotos - Qualitätsversprechen als eigenes Element (Beratung/Aufmaß/Montage ohne Subunternehmer — 1:1 von Zitto übernehmbar) - CTA am Ende: „Lernen Sie uns kennen" → Kontakt ### 5.7 Ratgeber `/ratgeber/` (Phase 2) - Bestehende Pflegetipps übernehmen (Glaspflege, Beschläge, Türband-Justierung), neu strukturieren als kurze Artikel - Zweck: Kundenbindung + SEO/AI-Sichtbarkeit („Wie pflegt man eine Glasdusche?") - Bei Launch optional: Ist-Inhalt 1:1 mitnehmen, Ausbau später ### 5.8 Kontakt `/kontakt/` - Telefon prominent (mobil: Sticky-Call-Button erwägen), Formular mit Leistungs-Auswahl, Adresse Kreuzerberg 11, 54309 Newel, Öffnungszeiten (**TODO: erheben**), Anfahrt - Karte datenschutzfreundlich: statisches Kartenbild oder OpenStreetMap-Einbettung statt Google-Maps-Cookie-Wall --- ## 6. CTA-System und Conversion-Logik | Kontext | Primär-CTA (Petrol, solid) | Sekundär | |---|---|---| | Header | Telefonnummer + „Projekt besprechen" | — | | Hero Startseite | „Projekt besprechen" | „Karriere entdecken" (gleichwertig gestylt, andere Farbführung: Outline/Dunkelgrau) | | Leistungsseiten | „Unverbindlich beraten lassen" | Telefon-Textlink | | Karriere | „In 2 Minuten bewerben" | „Ruf einfach an" (Textlink) | | Footer | Adresse, Telefon, Mail | Rechtliches | Regeln: Pro Viewport **maximal eine** primäre Solid-Fläche; Kunden- und Karriere-CTA sind farblich unterscheidbar, aber gleichwertig prominent (Moodboard-Regel). Mobil: Anruf und Kurzbewerbung ohne Scrollen erreichbar. --- ## 7. Content- und Medienbedarf ### Fototermin Shotlist (1 Tag, vor Design-Finalisierung) - [ ] Team-Gruppenfoto (Werkstatt/vor dem Laden) — Karriere-Hero - [ ] Inhaberin-Porträt Michaela Exner-van der Sanden (Arbeitssituation + Portrait) - [ ] Werkstatt: Zuschnitt, Schleiferei, Veredelung, Detailhände - [ ] Montage-Situationen (Dusche, Vordach, Küchenrückwand) - [ ] 6–9 abgeschlossene Projekte (außen/innen, querformatig, gutes Licht) - [ ] Glaskunst-Details (Sandstrahl, Bleiverglasung, Nahaufnahmen) - [ ] Außenansicht Betrieb / Werkstatt Newel ### Texte - Neue Microcopy nach Tonalitäts-Regeln (§ 3); Ist-Texte werden **nicht** übernommen (Tippfehler, Fax, uneinheitlich). - Trust-Angaben nur nach Bestätigung: gegründet 1973 ✓ (steht in Logo-Claim „Visionen in Glas seit 1973"), Führung seit 2011 ✓ (Ist-Text), Mitarbeiterzahl 4 ❗ (aus Moodboard, Bestätigung offen), Region/Einzugsgebiet ❗. ### Sonstiges - Google-Bewertungen prüfen: nutzbar als Trust-Element? (TODO) - Öffnungszeiten, Einzugsgebiet, Notdienst-Regelung (TODO) --- ## 8. Technische Umsetzung als Astro-Projekt **Warum Astro passt:** Inhaltsgetriebene Marketing-Site, maximal schnell (Zero-JS by default), Content Collections für Leistungen/Referenzen/Jobs/Ratgeber, saubere Bild-Pipeline — ideal für einen lokalen Betrieb ohne Redaktionssystem. ### Projektstruktur (Ziel) ``` src/ layouts/ BaseLayout.astro (Header, Footer, SEO-Meta, Schema) components/ Hero, ServiceCard, TrustStats, ReferenceCard, JobCard, QuickApplyForm, ContactForm, SectionBand … content/ leistungen/ je eine MD(X)-Datei pro Leistung (Frontmatter: Titel, Claim, Bild, FAQ) referenzen/ Frontmatter: Titel, Ort, Kategorie, Bilder jobs/ Frontmatter: Rolle, Typ, Eckdaten ratgeber/ (Phase 2) pages/ index, glaskunst, karriere, ueber-uns, kontakt, … assets/ optimierte Bilder (Astro , AVIF/WebP) public/ Logo-SVGs, Favicons, statische Assets ``` ### Leitplanken - **Bilder:** Astro Image-Pipeline, AVIF + WebP, responsive `srcset`, Hero eager / Rest lazy. Ziel: LCP < 2,5 s mobil. - **SEO-Basics:** sprechende Title/Descriptions je Seite, Canonicals, Sitemap, Open Graph mit echtem Projektfoto. - **Strukturierte Daten:** `LocalBusiness`/`GlassBusiness`-nahes Schema (Name, Adresse Kreuzerberg 11, 54309 Newel, Tel. 06505 565, Öffnungszeiten, Geo), `JobPosting` auf Karriere-Rollen, `FAQPage` auf Leistungsseiten. - **Formulare:** statisch-kompatibel — Formular-Service (z. B. Formspree/Web3Forms) oder kleiner Server-Endpoint; Kurzbewerbung zusätzlich immer mit sichtbarer Mail-Alternative. Spam-Schutz ohne hartes Captcha (Honeypot/Turnstile). - **Karte:** statisches Kartenbild mit Routen-Link oder OpenStreetMap — keine Cookie-Wall wie aktuell. - **Consent:** Wenn keine Marketing-Tracker eingesetzt werden, entfällt der Cookie-Banner komplett (Empfehlung: datenschutzfreundliche, cookielose Statistik, z. B. Cloudflare Web Analytics). - **Deployment:** Static Build → Cloudflare Pages/Netlify; Redirects von alten URLs (`/glaskunst` bleibt, `/pflegetipps` → `/ratgeber/…` oder 301 auf Ratgeber-Übersicht, `/ueber-uns` bleibt). - **Content-Pflege:** Inhalte als Markdown — Frau Exner/Agentur kann Jobs und Referenzen ohne Code-Kenntnisse ergänzen (optional später: Decap CMS, nicht MVP). --- ## 9. Lokale SEO und Sichtbarkeit - Keyword-Fokus je Leistungsseite: „Glasdusche Trier", „Küchenrückwand Glas Trier", „Glasreparatur Trier/Newel", „Glasvordach" etc. — final nach kurzer Keyword-Recherche (TODO). - NAP-Konsistenz: Name/Adresse/Telefon identisch zu Google Unternehmensprofil; GBP-Eintrag parallel prüfen/optimieren (eigener Baustein). - AI-Sichtbarkeit: Ratgeber-Artikel in klarer Frage-Antwort-Struktur, saubere semantische HTML-Struktur, `llms.txt` optional. --- ## 10. Responsive und Accessibility - Mobile First: Anruf, Karriere und Kurzbewerbung ohne Suchen erreichbar (Moodboard-Regel). - Touch-Ziele ≥ 44 px; Kontraste ≥ 4,5:1 (Achtung: Gelb `#F2E205` nie hinter/mit Text; Petrol-Buttons mit weißem Text prüfen, ggf. dunkleres Petrol für Hover). - Semantische Überschriften-Hierarchie, Fokus-Ringe, Alt-Texte aus den Kontext-Zeilen der Projekte. - Reduced-Motion respektieren; keine Auto-Slider. --- ## 11. Projektphasen | Phase | Inhalt | Ergebnis | |---|---|---| | 1 — Planung ✂️ | Dieser Plan, Beratungsgespräch, offene Punkte klären | Freigegebener Plan | | 2 — Content | Fototermin, Texte, Projektauswahl, Benefits/Rollen erheben | Content-Paket | | 3 — Design | `brand-spec.md` + Startseite als HTML-Prototyp (Design-Modus), danach Karriere + eine Leistungsseite | Freigegebenes Screendesign | | 4 — Astro-Build | Komponenten, Collections, alle Seiten, SEO, Formulare | Staging-Website | | 5 — Launch | Redirects, GBP-Abgleich, Statistik, QA (Lighthouse, a11y, Forms) | Livegang | | 6 — Phase 2 | Ratgeber-Ausbau, Team-Stimmen/Heldengeschichten, ggf. Recruiting-Video, Decap CMS | Ausbau | --- ## 12. Offene Fragen (für das Beratungsgespräch) - [ ] Grundrichtung A+B-Mix bestätigt? - [ ] Anrede: Sie (Kunden) / Du (Karriere) bestätigt? - [ ] Kunstglas-Gewicht gegenüber Bauglas/Reparatur? - [ ] Offene Rollen aktuell? Ausbildungsplatz anbieten? - [ ] Konkrete Benefits-Liste (echte, keine Floskeln)? - [ ] Notdienst ja/nein — und wie erreichbar? - [ ] Einzugsgebiet definieren (für Texte + SEO)? - [ ] Mitarbeiterzahl/Team-Namen für Trust-Zahlen und Teamseite freigegeben? - [ ] Google-Bewertungen vorhanden und nutzbar? - [ ] Öffnungszeiten? - [ ] Fototermin terminieren (vor Design-Phase 3)? - [ ] Ratgeber zum Launch oder Phase 2? - [ ] Wer pflegt künftig Jobs/Referenzen — Agentur oder Betrieb? --- ## Nächster Schritt 1. **Diesen Plan prüfen und direkt hier im Dokument editieren** — besonders § 4 (Sitemap), § 5 (Seitenpläne) und die offenen Fragen in § 12. 2. Beratungsgespräch mit Frau Exner anhand von § 12 führen und Antworten eintragen. 3. Wenn der Plan steht: **Übergabe an den Design-Modus** — dort wird zuerst `brand-spec.md` aus der Brand-Farbwelt erzeugt und die **Startseite als hochwertiger HTML-Prototyp** gebaut (danach Karriere- und Leistungsseite).