feat: extract and integrate clean HeroAndBento component

.agents/skills/accessible-inclusive-design/SKILL.md

@@ -0,0 +1,10 @@
+---
+name: accessible-inclusive-design
+description: Gewährleistet, dass jede Website ohne Einschränkungen barrierefrei nach den WCAG 2.2 AA Richtlinien bedienbar und rechtssicher ist.
+---
+
+# Accessible Inclusive Design Guidelines
+
+*   **Kontrast & Lesbarkeit:** Strikte Einhaltung des Kontrastverhältnisses von mindestens 4.5:1 für Fließtext und 3:1 für große Überschriften und UI-Komponenten.
+*   **Keyboard-Navigierbarkeit:** Alle interaktiven Elemente (Buttons, Links, Formulare) müssen logisch mit der Tabulatortaste ansteuerbar sein und einen deutlich sichtbaren `:focus`-State besitzen.
+*   **Screenreader-Konformität:** Jedes Bild benötigt ein präzises, beschreibendes `alt`-Attribut. Formularfelder müssen über explizite `<label>`-Tags oder `aria-label` eindeutig verknüpft sein.

.agents/skills/adaptive-responsive-fluidity/SKILL.md

@@ -0,0 +1,10 @@
+---
+name: adaptive-responsive-fluidity
+description: Garantiere makellose, flüssige Layouts auf allen erdenkbaren Bildschirmgrößen (von der Smartwatch bis zum 4K-Monitor) ohne Layout-Shifts.
+---
+
+# Adaptive Responsive Fluidity Guidelines
+
+*   **Fluid Typography & Spacing:** Konsequente Nutzung von Tailwinds modernen Funktionen oder CSS-Funktionen wie `clamp()`, `calc()` und relativen Einheiten (`rem`, `vw`), damit Schriften und Abstände stufenlos mit der Bildschirmgröße mitatmen.
+*   **Mobile Daumenzone:** Platzierung aller kritischen Interaktionselemente (Menüs, primäre CTAs) im unteren und mittleren Drittel des Smartphones.
+*   **Flex- & Grid-Sicherungen:** Jedes Grid muss mit `minmax()` oder intelligenten Autofit-Klassen abgesichert sein, um Textüberlappungen oder abgeschnittene Bilder bei ungewöhnlichen Display-Ratios zu verhindern.

.agents/skills/astro-expert/SKILL.md

@@ -0,0 +1,38 @@
+---
+name: astro-expert
+description: Guidelines for Astro full-stack development, Bento-grid layouts, corporate dark mode, page speed optimization, and UI/UX design.
+---
+
+# Astro & UI/UX Expert Guidelines
+
+## SECTION 1: GIT & WORKFLOW-SKILLS
+1. **Atomare Commits:** Generiere Code so, dass jede logische Änderung isoliert committet werden kann (z. B. Navbar separat von Hero).
+2. **Semantic Commits:** Nutze für Commit-Vorschläge zwingend die standardisierten Präfixe: `feat:`, `fix:`, `docs:`, `style:`, `refactor:`.
+3. **Imperative Sprache:** Formuliere Commit-Nachrichten immer als prägnanten Befehl (z. B. `feat: add bento grid layout`).
+4. **Clean History & Qualitäts-Check:** Prüfe vor jeder Ausgabe die korrekte Formatierung und stelle sicher, dass keine ungenutzten Imports verbleiben.
+
+## SECTION 2: CORPORATE DARK MODE & UI-REGELN
+5. **Striktes Farbschema:** Basis-Hintergrund: Edles Anthrazit/Schwarz (`#0B0F19`), Haupttext: Reinweiß, Akzente & Highlights: Arktis-Blau (`#38BDF8`). Keine Ausnahmen.
+6. **8pt-Grid-System:** Nutze für Layouts, Paddings und Margins konsequent Tailwind-Abstände in 4er-/8er-Schritten (`p-4`, `p-8`, `gap-4`, `gap-8`, `space-y-4`).
+7. **Visuelle Hierarchie & Scannbarkeit:** Slogans groß und markant, Fließtext in cleanem Weiß/Grau. Halte die Zeilenlänge für optimale Lesbarkeit kurz (`max-w-xl` bis `max-w-2xl`).
+8. **WCAG-Barrierefreiheit:** Garantiere bei allen Text- und Hintergrund-Kombinationen ein Kontrastverhältnis von mindestens 4.5:1 für perfekte Lesbarkeit.
+9. **Mobile-First-Responsive-Design:** Plane Layouts immer zuerst einspaltig für Smartphones (`grid-cols-1`) und skaliere sie am Desktop dynamisch (z. B. `md:grid-cols-3`).
+
+## SECTION 3: ULTRA-MODERN DESIGN PATTERNS & EFFECTS
+10. **Matte Boxen (Glassmorphismus):** Bento-Kacheln erhalten ein leicht helleres Anthrazit mit transluzenten Rändern: `bg-slate-900/50 backdrop-blur border border-white/10`.
+11. **Glow & Aurora Effekte:** Platziere subtile, arktis-blaue Hintergrund-Glows hinter Kacheln oder Texten für Tiefe: `bg-sky-500/10 blur-[120px] absolute`.
+12. **Bento-Grid Asymmetrie:** Erzeuge visuelle Spannung, indem du Kacheln unterschiedliche Breiten gibst (`col-span-1`, `md:col-span-2`), um das Auge des Nutzers zu leiten.
+13. **Text-Slicing & Gradients:** Verleihe wichtigen Schlüsselwörtern in Slogans einen progressiven Verlauf: `bg-clip-text text-transparent bg-gradient-to-r from-sky-400 to-white`.
+14. **Premium Micro-Interactions:** Jedes interaktive Element reagiert elegant via Hover. Kacheln heben sich leicht an und Ränder werden heller: `transition-all duration-300 hover:scale-[1.01] hover:border-sky-500/30`.
+15. **Bento-Inhalte-Mix:** Vermeide Monotonie. Mixe Text-Kacheln mit visuellen Elementen (z. B. einer Mini-PageSpeed-Anzeige, interaktiven Tool-Icons oder animierten Prozess-Schritten).
+
+## SECTION 4: ASTRO & REACT ARCHITEKTUR
+16. **Astro Island Architektur:** Nutze für 100% statischen HTML-Code native Astro-Komponenten. Reines CSS/HTML hat immer Vorrang.
+17. **React-Teilhydration:** Setze React-Komponenten (`client:visible` oder `client:load`) extrem sparsam und nur dort ein, wo echte Nutzer-Interaktion zwingend nötig ist (z. B. Kontaktformular).
+18. **PageSpeed-Garantie:** Halte Skripte minimal, nutzen die native Astro `<Image />` Komponente zur Bildoptimierung und erzeuge Code, der die 95%-Performance-Marke knackt.
+19. **Modulare UI-Vorlagen:** Baue das Projekt strukturiert auf:
+    * `BaseLayout.astro`: Zentrales Template für SEO, OpenGraph-Metatags und CSS-Reset.
+    * `Navbar`: Fixierter Header mit Logo, Navigation und prominentem CTA-Button ("Erstgespräch buchen").
+    * `Hero`: Starker Slogan gekoppelt mit einem visuellen Indikator für extreme Ladegeschwindigkeit.
+    * `BentoGrid`: Die 3 Kern-Säulen (*Webdesign*, *SEO/Sichtbarkeit*, *Hosting/Betrieb*) attraktiv verpackt.
+20. **Strukturierte Formulare:** Designe das Kontaktformular barrierefrei mit sichtbaren Labels, klaren Fokus-Zuständen (`focus:ring-2 focus:ring-sky-500`) und eindeutigen Fehlermeldungen.

.agents/skills/astro-react-architecture/SKILL.md

@@ -0,0 +1,16 @@
+---
+name: astro-react-architecture
+description: Guidelines for Astro Island architecture, light React partial hydration, page speed guarantees (>95%), modular templates, and accessible structured forms.
+---
+
+# Astro & React Architecture Guidelines
+
+16. **Astro Island Architektur:** Nutze für 100% statischen HTML-Code native Astro-Komponenten. Reines CSS/HTML hat immer Vorrang.
+17. **React-Teilhydration:** Setze React-Komponenten (`client:visible` oder `client:load`) extrem sparsam und nur dort ein, wo echte Nutzer-Interaktion zwingend nötig ist (z. B. Kontaktformular).
+18. **PageSpeed-Garantie:** Halte Skripte minimal, nutzen die native Astro `<Image />` Komponente zur Bildoptimierung und erzeuge Code, der die 95%-Performance-Marke knackt.
+19. **Modulare UI-Vorlagen:** Baue das Projekt structured auf:
+    * `BaseLayout.astro`: Zentrales Template für SEO, OpenGraph-Metatags und CSS-Reset.
+    * `Navbar`: Fixierter Header mit Logo, Navigation und prominentem CTA-Button ("Erstgespräch buchen").
+    * `Hero`: Starker Slogan gekoppelt mit einem visuellen Indikator für extreme Ladegeschwindigkeit.
+    * `BentoGrid`: Die 3 Kern-Säulen (*Webdesign*, *SEO/Sichtbarkeit*, *Hosting/Betrieb*) attraktiv verpackt.
+20. **Strukturierte Formulare:** Designe das Kontaktformular barrierefrei mit sichtbaren Labels, klaren Fokus-Zuständen (`focus:ring-2 focus:ring-sky-500`) und eindeutigen Fehlermeldungen.

.agents/skills/bento-content-shuffling/SKILL.md

@@ -0,0 +1,12 @@
+---
+name: bento-content-shuffling
+description: Verhindert visuelle Monotonie durch die gezielte Durchmischung von Inhaltstypen innerhalb des asymmetrischen Grid-Layouts.
+---
+
+# Bento Content Shuffling Guidelines
+
+*   **Der 3-Elemente-Mix:** Ein Raster darf niemals nur aus Text-Bild-Kombinationen bestehen. Es wechselt strikt zwischen:
+    1. Rein visuellen Cards (z.B. ein isoliertes, hochauflösendes UI-Element eines Handwerker-Dashboards).
+    2. Daten-Getriebenen Cards (z.B. ein animierter PageSpeed-Kreis, der live auf 100% hochzählt).
+    3. Story-Cards (z.B. ein großes, prägnantes Zitat eines Malermeisters im fetten Typografie-Stil).
+*   **Größen-Dynamik:** Strikter Wechsel der Card-Dimensionen (1x1, 2x1, 1x2, 2x2) basierend auf der Wichtigkeit des Inhalts, um eine natürliche visuelle Hierarchie zu erzeugen.

.agents/skills/bento-grid-architecture/SKILL.md

@@ -0,0 +1,10 @@
+---
+name: bento-grid-architecture
+description: Bento-grid layout rules (Non-Linear Layouts, Content-Mix Rule, Visual Anchor).
+---
+
+# Bento Grid Architecture Guidelines
+
+*   **Non-Linear Layouts:** Brich monotone Listen auf. Nutze asymmetrische Tailwind-Grids (`grid-cols-1 md:grid-cols-3`) mit unterschiedlichen Box-Breiten (`md:col-span-2` vs. `md:col-span-1`).
+*   **Content-Mix Rule:** Befülle das Bento-Grid dynamisch. Kombiniere reine Text-Kacheln mit visuellen Kacheln (z. B. interaktiven Metriken, Prozess-Schritten oder Tech-Icons).
+*   **Visual Anchor:** Eine Kachel im Grid muss immer als Haupt-Blickfang (Visual Anchor) dominieren (größer, farbintensiver oder animiert).

.agents/skills/bento-interaction-states/SKILL.md

@@ -0,0 +1,10 @@
+---
+name: bento-interaction-states
+description: Steuert dynamische und abwechslungsreiche Hover- und Interaktionszustände innerhalb des Bento-Grids, um den Entdeckerdrang zu wecken.
+---
+
+# Bento Interaction States Guidelines
+
+*   **Asymmetrischer Reveal:** Beim Hovern über eine Bento-Card verschieben sich Bildelemente im Inneren leicht (Parallaxe über CSS `transform: translateY(-5px)`), oder es wird ein versteckter CTA-Pfeil flüssig eingeblendet.
+*   **Spotlight-Glow:** Implementierung eines mausfolgenden JavaScript-freien oder minimalen CSS-Glow-Effekts, bei dem der Rand der Card exakt dort aufleuchtet (Sky-Blue), wo der Mauszeiger sich befindet.
+*   **Status-Indikatoren:** Jedes Template im Katalog erhält "Live-Tags" (z.B. pulsierende grüne Punkte für "Live-Vorschau aktiv" oder kleine animierte Lade-Icons bei Interaktion), die Hochwertigkeit signalisieren.

.agents/skills/clean-code-architecture/SKILL.md

@@ -0,0 +1,10 @@
+---
+name: clean-code-architecture
+description: Erzwingt eine saubere, modulare und leicht wartbare Code-Architektur basierend auf Best Practices des modernen Software-Engineering.
+---
+
+# Clean Code Architecture Guidelines
+
+*   **Single-Responsibility-Prinzip:** Jede UI-Komponente (z.B. `Button.astro`, `Card.astro`) erfüllt genau eine Aufgabe. Logik und visuelle Präsentation werden strikt getrennt.
+*   **DRY (Don't Repeat Yourself):** Wiederkehrende Layout-Muster, Farbkombinationen oder Abstände werden konsequent in globale CSS-Variablen, Tailwind-Configs oder wiederverwendbare Unterkomponenten ausgelagert.
+*   **Selbstdokumentierender Code:** Nutzung von aussagekräftigen, semantischen CSS- und Komponenten-Namen (z.B. `BentoGridGold.astro` statt `Grid2.astro`). Komplexe Logik wird inline kurz und prägnant kommentiert.

.agents/skills/conversion-driven-ux/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: conversion-driven-ux
+description: Richtet jedes Layout, jeden Textabschnitt und jedes UI-Element kompromisslos auf Verkaufspsychologie, Nutzerführung und Lead-Generierung aus.
+---
+
+# Conversion Driven UX Guidelines
+
+*   **3-Sekunden-Regel:** Der Hero-Bereich muss in unter 3 Sekunden drei Fragen beantworten: Was wird angeboten? Für wen ist es? Was ist der nächste Schritt?
+*   **Visuelle Hierarchie (F- & Z-Muster):** Platzierung von Vertrauenselementen (Bewertungen, Siegel) und CTAs exakt entlang des natürlichen Scan-Pfads des Nutzers.
+*   **Reibungsreduktion:** Formulare so kurz wie möglich halten. Komplexe Prozesse in mehrstufige, interaktive Funnels (Multi-Step-Forms) aufteilen, um die Absprungrate zu minimieren.
+*   **Einwand-Vorwegnahme:** Strategisches Platzieren von FAQs und Risikominderern (z.B. "In 2 Minuten erledigt", "Kostenfrei & unverbindlich") direkt in der Nähe von Conversion-Punkten.

.agents/skills/core-web-vitals-perfection/SKILL.md

@@ -0,0 +1,10 @@
+---
+name: core-web-vitals-perfection
+description: Optimiert den generierten Code auf maximale Ladegeschwindigkeit und erzwingt Werte von >95% in Google Lighthouse / Core Web Vitals.
+---
+
+# Core Web Vitals Perfection Guidelines
+
+*   **LCP (Largest Contentful Paint):** Hero-Bilder müssen immer das Attribut `loading="eager"` und `fetchpriority="high"` erhalten. Niemals Lazy-Loading im sichtbaren Bereich über dem Falz.
+*   **CLS (Cumulative Layout Shift) verhindern:** Jedes Bild und jedes interaktive Element (wie Slider oder Akkordeons) MUSS feste Breiten- und Höhenangaben (`width`, `height` oder `aspect-ratio`) besitzen, damit das Layout beim Laden nicht springt.
+*   **Semantisches HTML & CSS-First:** JavaScript-freie Alternativen bevorzugen. Animationen und interaktive States (wie Dropdowns oder Modals) wenn möglich über reines CSS (:hover, :focus-within, Details/Summary-Tags) lösen.

.agents/skills/corporate-dark-mode/SKILL.md

@@ -0,0 +1,12 @@
+---
+name: corporate-dark-mode
+description: Strict color scheme (#0B0F19 background, white text, #38BDF8 accents), 8pt grid system, high scannability, WCAG contrast (4.5:1), and mobile-first design.
+---
+
+# Corporate Dark Mode & UI Guidelines
+
+5. **Striktes Farbschema:** Basis-Hintergrund: Edles Anthrazit/Schwarz (`#0B0F19`), Haupttext: Reinweiß, Akzente & Highlights: Arktis-Blau (`#38BDF8`). Keine Ausnahmen.
+6. **8pt-Grid-System:** Nutze für Layouts, Paddings und Margins konsequent Tailwind-Abstände in 4er-/8er-Schritten (`p-4`, `p-8`, `gap-4`, `gap-8`, `space-y-4`).
+7. **Visuelle Hierarchie & Scannbarkeit:** Slogans groß und markant, Fließtext in cleanem Weiß/Grau. Halte die Zeilenlänge für optimale Lesbarkeit kurz (`max-w-xl` bis `max-w-2xl`).
+8. **WCAG-Barrierefreiheit:** Garantiere bei allen Text- und Hintergrund-Kombinationen ein Kontrastverhältnis von mindestens 4.5:1 für perfekte Lesbarkeit.
+9. **Mobile-First-Responsive-Design:** Plane Layouts immer zuerst einspaltig für Smartphones (`grid-cols-1`) und skaliere sie am Desktop dynamisch (z. B. `md:grid-cols-3`).

.agents/skills/git-workflow/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: git-workflow
+description: Rules for atomic commits, semantic commit prefixes (feat, fix, docs, style, refactor), imperative language, and clean history checking.
+---
+
+# Git & Workflow Guidelines
+
+1. **Atomare Commits:** Generiere Code so, dass jede logische Änderung isoliert committet werden kann (z. B. Navbar separat von Hero).
+2. **Semantic Commits:** Nutze für Commit-Vorschläge zwingend die standardisierten Präfixe: `feat:`, `fix:`, `docs:`, `style:`, `refactor:`.
+3. **Imperative Sprache:** Formuliere Commit-Nachrichten immer als prägnanten Befehl (z. B. `feat: add bento grid layout`).
+4. **Clean History & Qualitäts-Check:** Prüfe vor jeder Ausgabe die korrekte Formatierung und stelle sicher, dass keine ungenutzten Imports verbleiben.

.agents/skills/glassmorphism-glow-effects/SKILL.md

@@ -0,0 +1,10 @@
+---
+name: glassmorphism-glow-effects
+description: Glassmorphism and glow guidelines (Matte Boxen, Background Aurora Glows, Reactive Micro-Interactions).
+---
+
+# Glassmorphism & Glow Effects Guidelines
+
+*   **Matte Boxen (Glassmorphismus):** Gestalte Kacheln mit transluzenten Ebenen und extrem feinen Rändern: `bg-slate-900/50 backdrop-blur-md border border-white/[0.08]`.
+*   **Background Aurora Glows:** Platziere extrem weiche, farbige Lichtpunkte hinter den Kacheln für visuelle Tiefe: `bg-sky-500/10 blur-[120px] absolute pointer-events-none`.
+*   **Reactive Micro-Interactions:** Jede Kachel muss auf Hover edel reagieren: Leichtes Anheben, Erhöhung der Rand-Helligkeit und Intensivierung des Glows (`transition-all duration-300 hover:scale-[1.01] hover:border-sky-500/30`).

.agents/skills/hybrid-bento-scrolling/SKILL.md

@@ -0,0 +1,9 @@
+---
+name: hybrid-bento-scrolling
+description: Kombiniert klassisches vertikales Scrollen mit horizontalen oder fixierten Elementen innerhalb des Bento-Grids, um die Verweildauer zu maximieren.
+---
+
+# Hybrid Bento Scrolling Guidelines
+
+*   **Sticky-Anchor-Cards:** In einem 3-Spalten-Grid bleibt die linke, große Haupt-Card (z.B. mit dem Titel "Maler-Templates") beim Scrollen fixiert (CSS `sticky top-24`), während die rechten, kleineren Cards mit den Design-Variationen flüssig vorbeiscrollen.
+*   **CSS-Driven Scroll Animations:** Nutzung von nativen CSS `@keyframes` gekoppelt an den Scroll-Fortschritt, um Elemente flüssig einzublenden oder zu transformieren.

.agents/skills/layout-archetype-matrix/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: layout-archetype-matrix
+description: Bento-grid layout rules (Non-Linear Layouts, Content-Mix Rule, Visual Anchor).
+---
+
+# Layout Archetype Matrix Guidelines
+
+*   **Typ A: Das "Asymmetrische Bento"** (Strikte mathematische Ordnung, ungleiche Kachelgrößen, ideal für daten- und featurelastige Dienstleister).
+*   **Typ B: Das "Split-Screen & Monolith"-Layout** (Vertikal zweigeteilter Viewport: Eine Bildschirmhälfte bleibt fixiert kleben [z.B. Hero-Statement], während die andere Hälfte hochauflösenden, einspaltigen Content scrollt. Ideal für Premium-Handwerk).
+*   **Typ C: Das "Magazin-Raster"** (Große, fette Typografie bricht aus dem Raster aus, Text überlappt Bilder dezent, starker Einsatz von Whitespace, unkonventionelle Spalten-Pfade. Perfekt für moderne Architekten/Planer).
+*   **Typ D: Das "Zentralisierte Fokus-Layout"** (Ein dominierendes, interaktives Kernelement in der Bildschirmmitte [z.B. ein konfigurierbarer 3D-Rechner oder Live-Preiskalkulator], um das herum sich die Navigations- und Vertrauens-Elemente radial oder minimalistisch anordnen).

.agents/skills/micro-layout-breakers/SKILL.md

@@ -0,0 +1,10 @@
+---
+name: micro-layout-breakers
+description: Verhindert visuelle Ermüdung (Scroll-Fatigue) durch das gezielte Einstreuen von Rhythmusbrechern innerhalb einer einzelnen Seite.
+---
+
+# Micro Layout Breakers Guidelines
+
+*   **Der Text-Slam:** Nach einer bildreichen Sektion folgt eine reine, riesige Text-Sektion (z.B. ein dreizeiliges Kundenversprechen in 4xl-Schriftgröße), die 100% der Bildschirmbreite einnimmt und maximalen Kontrast erzeugt.
+*   **Das "Infinite Ribbon":** Einbindung von unendlichen, leicht schräg gestellten Text-Ticker-Bändern (CSS-Marquees), die flüssig durch das Layout laufen und starre Sektionsgrenzen physisch durchbrechen.
+*   **Element-Überlappung (Negative Margins):** Bilder oder Bento-Cards ragen aus ihrer eigentlichen Sektion heraus und rücken bis zu 50px in die obere oder untere Sektion vor (`-mt-12`), um starre Trennlinien zu eliminieren.

.agents/skills/security-hardening-privacy/SKILL.md

@@ -0,0 +1,12 @@
+---
+name: security-hardening-privacy
+description: Eliminiert digitale Fingerabdrücke (Information Disclosure), härtet den Code gegen gängige Web-Schwachstellen ab und sorgt für DSGVO-konformen Datenschutz.
+---
+
+# Security Hardening & Privacy Guidelines
+
+*   **Anti-Fingerprinting (Tarnung):** Automatisches Entfernen von Meta-Tags, die Rückschlüsse auf das System zulassen (z.B. den `<meta name="generator" content={Astro.generator} />` Tag komplett löschen oder deaktivieren).
+*   **Sichere HTTP-Header & Konfiguration:** Generierung von Konfigurationen (z.B. für .htaccess, Nginx oder Hosting-Plattformen), die X-Powered-By-Header entfernen und strikte Security-Header setzen (Content Security Policy [CSP], X-Frame-Options: DENY, X-Content-Type-Options: nosniff).
+*   **DSGVO-Konformität (Zero-Third-Party):** Keine dynamischen Abrufe von externen Servern (z.B. Google Fonts). Alle Schriftarten, Icons und Skripte werden lokal auf dem deutschen Server gehostet. IP-Adressen von Nutzern dürfen niemals ungefragt an Drittstaaten-Server (USA) abfließen.
+*   **Formular-Absicherung:** Jedes Kontaktformular muss serverseitig validiert werden. Eingabefelder müssen gegen Cross-Site Scripting (XSS) und SQL-Injections geschützt sein (Sanitizing von User-Input). Integration von barrierefreien, unsichtbaren Honeypot-Feldern zur Spam-Abwehr statt nerviger Google-ReCaptchas.
+*   **Fehlermeldungen verbergen:** Im produktiven Code dürfen niemals detaillierte System-Fehlermeldungen oder Stack-Traces für den Endnutzer sichtbar sein, da diese Pfade und Server-Strukturen verraten.

.agents/skills/tactile-craftsman-ui/SKILL.md

@@ -0,0 +1,10 @@
+---
+name: tactile-craftsman-ui
+description: Verleiht dem modernen UI subtile, physische Design-Elemente, die Präzision, Handwerk und Wertigkeit vermitteln, ohne die Performance zu belasten.
+---
+
+# Tactile Craftsman UI Guidelines
+
+*   **Subtile Texturen:** Nutzung von extrem leichten, CSS-basierten Noise-Overlays (z.B. opacity-[0.015] im Hintergrund) auf Cards, um eine feine, matte "Material-Haptik" (wie geschliffenes Metall oder feiner Putz) zu erzeugen.
+*   **"Blueprint"-Raster:** Gezielter Einsatz von feinen, unterbrochenen Gitternetzlinien (Subtle Grid Borders, 1px border-slate-800/60) im Hintergrund von Sektionen, die an technische Zeichnungen erinnern.
+*   **Akzent-Indikatoren:** Nutzung von kleinen, geometrischen UI-Details wie simulierten Fadenkreuzen, Ecken-Markierungen (Border Corners) oder dezenten Tech-Badges in den Ecken von Bento-Cards, um "Präzisionsarbeit" visuell zu spiegeln.

.agents/skills/technical-seo-semantic/SKILL.md

@@ -0,0 +1,12 @@
+---
+name: technical-seo-semantic
+description: Implementiert vollautomatisch modernste On-Page-SEO, technische Indexierungs-Richtlinien und semantische HTML-Strukturen für maximale Sichtbarkeit bei Google.
+---
+
+# Technical SEO & Semantic Guidelines
+
+*   **Semantische HTML-Hierarchie:** Striktes Einhalten der Überschriften-Kette (Genau eine H1 pro Seite, gefolgt von logischen H2 und H3). Reine Design-Elemente dürfen niemals als H-Tags missbraucht werden.
+*   **Strukturierte Daten (Schema.org / JSON-LD):** Jede Mustervorlage erhält automatisch ein dynamisches, valides JSON-LD-Skript im `<head>` (z.B. Typ `LocalBusiness`, `Handyman` oder `ProfessionalService`) inklusive Geo-Koordinaten, Öffnungszeiten und Bewertungs-Mockups.
+*   **Meta-Daten & OpenGraph:** Automatisches Bereitstellen von performanten SEO-Title-Tags (maximal 60 Zeichen), Meta-Descriptions (maximal 155 Zeichen) und OpenGraph-Tags für perfekte Previews beim Teilen auf WhatsApp/Social Media.
+*   **Crawler-Sicherheit (Akkordeons & Tabs):** Textinhalte in ausklappbaren Elementen (FAQs) werden niemals per CSS `display: none` vor Crawlern versteckt, sondern via barrierefreier Techniken im DOM gehalten, damit Google den Content voll indexieren kann.
+*   **Core-Web-Vitals als Rankingfaktor:** Erzwingen von korrekten Bild-Dimensionen (WebP/AVIF mit width/height) und Vermeidung von JavaScript im kritischen Render-Pfad, um die Google-Metrik "INP" (Interaction to Next Paint) zu optimieren.

.agents/skills/ui-element-best-practices/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: ui-element-best-practices
+description: UI element guidelines (Smart Navbar, Accessible Inputs, SEO Accordions, Utility Badges).
+---
+
+# UI Element Best Practices Guidelines
+
+*   **Smart Navbar:** Muss fixiert (`sticky top-0`) oder intelligent einblendbar sein. Der primäre CTA-Button platziert sich unübersehbar ganz rechts.
+*   **Accessible Inputs:** Verwende in Formularen niemals verschwindende Platzhalter als Ersatz für Labels. Nutze feste Labels und markante Focus-Zustände (`focus:ring-2 focus:ring-sky-500`).
+*   **SEO Accordions:** Nutze strukturierte Akkordeons (z. B. für FAQs) im Footer-Bereich, um die Seite visuell sauber zu halten, aber maximalen Text für das Google-Ranking bereitzustellen.
+*   **Utility Badges:** Setze kleine, pillenförmige Indikatoren (`px-3 py-1 rounded-full text-xs`) über Headlines ein, um den Blick des Nutzers vorzufiltern.

.agents/skills/ultra-modern-design/SKILL.md

@@ -0,0 +1,13 @@
+---
+name: ultra-modern-design
+description: Matte boxen (glassmorphism), glow & aurora effects, bento-grid asymmetry, text-slicing gradients, premium micro-interactions, and diverse bento content mix.
+---
+
+# Ultra-Modern Design Patterns & Effects Guidelines
+
+10. **Matte Boxen (Glassmorphismus):** Bento-Kacheln erhalten ein leicht helleres Anthrazit mit transluzenten Rändern: `bg-slate-900/50 backdrop-blur border border-white/10`.
+11. **Glow & Aurora Effekte:** Platziere subtile, arktis-blaue Hintergrund-Glows hinter Kacheln oder Texten für Tiefe: `bg-sky-500/10 blur-[120px] absolute`.
+12. **Bento-Grid Asymmetrie:** Erzeuge visuelle Spannung, indem du Kacheln unterschiedliche Breiten gibst (`col-span-1`, `md:col-span-2`), um das Auge des Nutzers zu leiten.
+13. **Text-Slicing & Gradients:** Verleihe wichtigen Schlüsselwörtern in Slogans einen progressiven Verlauf: `bg-clip-text text-transparent bg-gradient-to-r from-sky-400 to-white`.
+14. **Premium Micro-Interactions:** Jedes interaktive Element reagiert elegant via Hover. Kacheln heben sich leicht an und Ränder werden heller: `transition-all duration-300 hover:scale-[1.01] hover:border-sky-500/30`.
+15. **Bento-Inhalte-Mix:** Vermeide Monotonie. Mixe Text-Kacheln mit visuellen Elementen (z. B. einer Mini-PageSpeed-Anzeige, interaktiven Tool-Icons oder animierten Prozess-Schritten).

.agents/skills/viewport-axis-shifting/SKILL.md

@@ -0,0 +1,9 @@
+---
+name: viewport-axis-shifting
+description: Steuert den Wechsel der Bewegungssymmetrie auf der Seite, um dem Nutzer ein interaktives Raumgefühl zu vermitteln.
+---
+
+# Viewport Axis Shifting Guidelines
+
+*   **Horizontal-Scroll-Inseln:** Integration von Sektionen (z.B. der Vorlagen-Katalog oder eine Projekt-Timeline), bei denen das vertikale Scrollen des Nutzers nahtlos in eine horizontale Schiebe-Bewegung übersetzt wird (via Tailwind `overflow-x-scroll scroll-smooth snap-x`).
+*   **Akkordeon-Stapel (Z-Achse):** Statt Listen untereinander anzuzeigen, stapeln sich Elemente wie ein Kartendeck übereinander. Beim Scrollen schiebt sich die nächste Karte über die vorherige (CSS `sticky top-28`).

.agents/skills/webdesign-foundations/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: webdesign-foundations
+description: Strategische Design-Grundregeln (3-Second-Rule, Visual Hierarchy, Whitespace Mastery, Thumb-Zone & Mobile-First).
+---
+
+# Webdesign Foundations Guidelines
+
+*   **3-Second-Rule:** Jedes Einstiegs-Layout (Hero) muss sofort Klarheit über Angebot, Nutzen und den nächsten Schritt (CTA) liefern.
+*   **Visual Hierarchy:** Lenke das Auge gezielt über markante Größenunterschiede, fette Typografie und kontraststarke Aktions-Elemente.
+*   **Whitespace Mastery:** Nutze großzügigen Leerraum (`py-16`, `py-24`, `space-y-12`), um Inhalten Raum zum Atmen zu geben und ein Premium-Gefühl zu erzeugen.
+*   **Thumb-Zone & Mobile-First:** Platziere interaktive Elemente in der mobilen Ansicht so, dass sie perfekt mit dem Daumen erreichbar sind.

.agents/skills/white-space-asymmetry/SKILL.md

@@ -0,0 +1,9 @@
+---
+name: white-space-asymmetry
+description: Nutzt gezielte, ungleiche Freiräume, um Exklusivität zu erzeugen und das Auge des Nutzers millimetergenau zu steuern.
+---
+
+# White Space Asymmetry Guidelines
+
+*   **Die 60-40-Regel:** Vermeidung von perfekten 50/50-Aufteilungen bei Text und Bild. Einbindung von asymmetrischen Spaltenlayouts (z.B. `grid-cols-5` mit einer `col-span-3` für Content und `col-span-2` für puren Leerraum).
+*   **"Atem-Pausen":** Mut zum bewussten "Leerraum-Monolithen". Das bedeutet: Sektionen, die absichtlich nur ein einziges, kleines UI-Element (z.B. ein glänzendes Gütesiegel) inmitten von viel dunklem Freiraum (`py-32` or `py-48`) inszenieren.

.gitea/workflows/deploy.yml

@@ -1,17 +1,12 @@
 name: Production Build & Deploy
 
-on:
-  push:
-    branches:
-      - master
-      - main
-      - staging
+on: [push] # Triggert testweise bei absolut jedem Push, um die Blockade zu lösen
 
 jobs:
   build-and-deploy:
     runs-on: webserver
     container:
-      image: catthehacker/ubuntu:act-latest # Behebt den "docker: command not found" Fehler
+      image: catthehacker/ubuntu:act-latest
     steps:
       - name: Code auschecken
         uses: actions/checkout@v4
@@ -21,10 +16,10 @@ jobs:
 
       - name: Build Docker image
         run: |
-          docker build -t gitea.hephex.de/daniel/websitedummy:latest -f Dockerfile .
+          docker build -t gitea.hephex.de/daniel/ndsolutionswebsite:latest -f Dockerfile .
 
       - name: Push Docker image
-        run: docker push gitea.hephex.de/daniel/websitedummy:latest
+        run: docker push gitea.hephex.de/daniel/ndsolutionswebsite:latest
 
       - name: Clean up runner Docker cache
         run: |
@@ -32,13 +27,26 @@ jobs:
           docker builder prune -f
 
       - name: Deploy via SSH to Debian Server
-        uses: appleboy/ssh-action@v1.0.3 # Aktualisiert auf eine stabilere Version
+        uses: appleboy/ssh-action@v1.0.3
         with:
           host: 192.168.178.164
           username: ${{ secrets.PROXMOX_USER }}
           key: ${{ secrets.PROXMOX_SSH_KEY }}
           script: |
+            mkdir -p /opt/websitedummy
             cd /opt/websitedummy
+            
+            # Schreibt die Docker Compose Datei sauber ohne Einrückung
+            cat << 'EOF' > docker-compose.yml
+            version: '3.8'
+            services:
+              website:
+                image: gitea.hephex.de/daniel/ndsolutionswebsite:latest
+                restart: always
+                ports:
+                  - "8080:8080"
+            EOF
+
             echo "${{ secrets.REGISTRY_TOKEN }}" | docker login gitea.hephex.de -u "${{ secrets.REGISTRY_USER }}" --password-stdin
             docker compose pull
             docker compose up -d

Dockerfile

@@ -1,5 +1,5 @@
 # Build-Phase
-FROM node:20-alpine AS builder
+FROM node:20-slim AS builder
 WORKDIR /app
 COPY package*.json ./
 RUN npm install --legacy-peer-deps
@@ -7,11 +7,13 @@ COPY . .
 RUN npm run build
 
 # Production-Phase
-FROM nginx:alpine
+FROM nginx:1.25
+
+# Eigene Nginx-Konfiguration kopieren
+COPY default.conf /etc/nginx/conf.d/default.conf
 
 # Nginx konfigurieren für non-root Port 8080
-RUN sed -i 's/listen\( \)*80;/listen 8080;/g' /etc/nginx/conf.d/default.conf && \
-    touch /var/run/nginx.pid && \
+RUN touch /var/run/nginx.pid && \
     chown -R nginx:nginx /var/run/nginx.pid /var/cache/nginx /var/log/nginx /etc/nginx/conf.d
 
 USER nginx

default.conf

@@ -0,0 +1,20 @@
+server {
+    listen 8080;
+    server_name localhost;
+    
+    # Erzwingt relative Redirects (z.B. Location: /templates/ statt http://...:8080/templates/)
+    absolute_redirect off;
+    port_in_redirect off;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        try_files $uri $uri/ =404;
+    }
+
+    error_page 404 /404.html;
+    location = /404.html {
+        root /usr/share/nginx/html;
+        internal;
+    }
+}

docker-compose.yml

@@ -1,18 +1,9 @@
 version: '3.8'
 
 services:
-  websitedummy:
+  website:
     image: gitea.hephex.de/daniel/websitedummy:latest
-    container_name: websitedummy
+    container_name: websitedummy_app
     restart: always
-    read_only: true
-    tmpfs:
-      - /var/cache/nginx
-      - /var/run
     ports:
-      - "127.0.0.1:8080:8080"
-    deploy:
-      resources:
-        limits:
-          cpus: '0.5'
-          memory: 256M
+      - "8080:8080"

funktionen.md

@@ -0,0 +1,42 @@
+# Website Funktionen & Designkonzept - N&D i-t SOLUTIONS
+
+## 1. Design & Aussehen (Aesthetics)
+- **Stil**: Minimalistisches, hochprofessionelles Tech-Design (Corporate Dark Mode).
+- **Farben**: Tiefes Anthrazit/Schwarz (#0B0F19), reines Weiß, dezentes Arktis-Blau (#38BDF8) als Fokusfarbe.
+- **Bento-Grid**: Hauptlayout basiert auf einem asymmetrischen, klar strukturierten Raster (Bento-Boxen).
+- **Karten-Stil**: Mattes Finish (Subtiler 1px Border in Dunkelgrau statt starkem Glassmorphismus).
+- **Typografie**: Seriöse, geometrische Sans-Serif (z. B. Inter oder Geist Sans via Google Fonts).
+
+## 2. Effekte & Interaktion (Wirkung)
+- **Micro-Interactions**: Keine verspielten Animationen; nur direkte, extrem schnelle Hover-Reaktionen.
+- **Grid-Hover**: Angesteuerte Bento-Zellen erhalten einen minimalen arktis-blauen Schein am Rand.
+- **Sticky Navbar**: Ultradünne, fixierte Navigationsleiste mit maximaler Hintergrund-Unschärfe (Blur).
+
+## 3. Struktur & Sektionen (Die 3-Säulen-Bento-Architektur)
+
+### Navbar (Navigation)
+- **Komponenten**: Logo, Direktlinks (Leistungen, Tech-Stack, Ablauf), Button "Erstgespräch buchen".
+
+### Hero- & Wert-Sektion (Oberes Raster)
+- **Zelle 1 (Groß - Hauptfokus)**: 
+  - *Überschrift*: "Websites, die performen. Von der Idee bis zum Live-Gang."
+  - *Subtext*: "Wir konzipieren, optimieren und hosten Ihre neue Website. Technisch perfekt. Sichtbar bei Google. Komplett betreut."
+  - *CTA*: Primärer Button "Projekt anfragen".
+- **Zelle 2 (Mittel - Das Versprechen)**: "Full-Service-Garantie" – Sie kümmern sich um Ihr Geschäft, wir um den gesamten Web-Auftritt.
+- **Zelle 3 (Klein - USP)**: Visualisierung: PageSpeed-Score >95% (Fokus auf extreme Ladegeschwindigkeit).
+
+### Die 3 Kern-Säulen (Zentrales Bento-Raster)
+- **Zelle 4 (Groß - Säule 1: Webdesign)**: 
+  - *Inhalt*: Individuelles UI/UX-Design & Entwicklung von Grund auf (Keine billigen WordPress-Templates). Blitzschnell im Code umgesetzt.
+- **Zelle 5 (Mittel - Säule 2: Sichtbarkeit & SEO)**: 
+  - *Inhalt*: Technische Suchmaschinenoptimierung, semantischer Code, schnelle Indexierung und Google-optimierte Struktur von Tag 1 an.
+- **Zelle 6 (Mittel - Säule 3: Hosting & Betrieb)**: 
+  - *Inhalt*: Sicheres, DSGVO-konformes Premium-Hosting auf deutschen Servern. Inklusive SSL-Zertifikaten, automatischen Backups und Wartung.
+
+### Tech-Stack & Methode (Unteres Raster)
+- **Zelle 7 (Breit)**: Sichtbare Logos der State-of-the-Art Tools (Astro, Tailwind CSS, React, Vercel/Netlify).
+- **Zelle 8 (Mittel - Vertrauensaufbau)**: "Unser 3-Schritte-Prozess" – 1. Erstgespräch | 2. Design & Code | 3. Hosting & Launch.
+
+### Contact & Footer
+- **Zelle 9 (Groß)**: Minimalistisches Typografie-Kontaktformular (Wenige Klicks) + direkte Mail/Telefon-Verbindung.
+- **Footer**: Rechtliches (Impressum, Datenschutz), GitHub/LinkedIn Links, Copyright.

src/components/HeroAndBento.astro

@@ -0,0 +1,150 @@
+<!-- src/components/HeroAndBento.astro -->
+<!-- Hero-Sektion: Erfüllt 3-Second-Rule & Conversion-UX -->
+<section class="relative pt-32 pb-20 overflow-hidden bg-[#0B0F19] border-b border-white/5">
+  <!-- Tactile Blueprint-Raster im Hintergrund -->
+  <div class="absolute inset-0 opacity-[0.03] pointer-events-none" style="background-size: 40px 40px; background-image: linear-gradient(to right, #38BDF8 1px, transparent 1px), linear-gradient(to bottom, #38BDF8 1px, transparent 1px);"></div>
+  
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+    <div class="max-w-3xl">
+      <!-- Utility Badge: Vorfilterung -->
+      <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-sky-400/20 bg-sky-400/5 text-sky-400 text-[10px] font-mono font-bold uppercase tracking-wider mb-6">
+        <span class="w-1.5 h-1.5 rounded-full bg-sky-400 animate-pulse"></span>
+        Digitalpartner für den deutschen Mittelstand
+      </div>
+      
+      <!-- Haupt-Überschrift (H1): Klarheit in unter 3 Sekunden -->
+      <h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight text-white mb-6 leading-tight">
+        Moderne Websites für Ihren Betrieb.<br/>
+        <span class="bg-clip-text text-transparent bg-gradient-to-r from-sky-400 via-slate-200 to-white">
+          Komplett betreut. Absolut sorgenfrei.
+        </span>
+      </h1>
+      
+      <!-- Zielgruppen-Ansprache & Einwand-Vorwegnahme -->
+      <p class="text-zinc-400 text-sm sm:text-base max-w-xl leading-relaxed mb-8">
+        Wir bauen, hosten und pflegen Ihren neuen Internetauftritt. Ohne Zeitaufwand für Sie, rechtssicher nach DSGVO auf deutschen Servern und optimiert für lokale Kunden bei Google.
+      </p>
+
+      <!-- Conversion-Fokus: Direkte CTAs (Optimale Daumenzone mobil) -->
+      <div class="flex flex-wrap gap-4">
+        <a href="#contact" 
+           class="inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-sky-500 hover:bg-white text-zinc-950 font-bold text-xs uppercase tracking-wider rounded transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-sky-400 focus:outline-none"
+           aria-label="Kostenloses Erstgespräch anfragen">
+          Erstgespräch buchen
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-3 h-3 fill-current"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
+        </a>
+        <a href="/templates" 
+           class="inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-slate-900/60 hover:bg-slate-800 border border-white/10 text-white font-bold text-xs uppercase tracking-wider rounded transition-all focus:ring-2 focus:ring-offset-2 focus:ring-white/20 focus:outline-none"
+           aria-label="Vorlage-Designs ansehen">
+          Templates ansehen
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Haupt-Bento-Grid: Präzision, Wertigkeit & Content-Mix (Asymmetrisches Bento) -->
+<section class="py-20 bg-[#0B0F19] relative">
+  <!-- Subtile CSS-Noise Textur für matte Haptik (tactile-craftsman-ui) -->
+  <div class="absolute inset-0 opacity-[0.015] pointer-events-none bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div>
+
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-auto">
+      
+      <!-- KACHEL 1: Visual Anchor (Haupt-Blickfang, 2 Spalten, 2 Zeilen) -->
+      <div class="md:col-span-2 md:row-span-2 bg-slate-900/40 backdrop-blur-md border border-white/5 hover:border-sky-500/30 rounded-2xl p-8 sm:p-10 flex flex-col justify-between min-h-[380px] relative group overflow-hidden transition-all duration-300">
+        <!-- Blueprint Eckmarkierungen für handwerkliche Präzision -->
+        <span class="absolute top-4 left-4 w-3 h-3 border-t border-l border-sky-400/30"></span>
+        <span class="absolute top-4 right-4 w-3 h-3 border-t border-r border-sky-400/30"></span>
+        <span class="absolute bottom-4 left-4 w-3 h-3 border-b border-l border-sky-400/30"></span>
+        <span class="absolute bottom-4 right-4 w-3 h-3 border-b border-r border-sky-400/30"></span>
+
+        <div>
+          <span class="text-[10px] font-mono font-bold text-sky-400 uppercase tracking-widest">[ DAS KONZEPT ]</span>
+          <h2 class="text-2xl sm:text-3xl font-extrabold text-white mt-4 mb-4">Ihr digitaler Mitarbeiter für Neukunden</h2>
+          <p class="text-zinc-400 text-xs sm:text-sm leading-relaxed max-w-lg">
+            Eine gute Website ist kein Statussymbol, sondern Werkzeug. Wir programmieren Ihren Web-Auftritt so, dass er vollautomatisch Anfragen von echten Kunden aus Ihrer Region generiert.
+          </p>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-8 pt-6 border-t border-white/5">
+          <div class="flex items-center gap-2 text-xs text-zinc-300">
+            <svg class="w-4 h-4 text-sky-400 shrink-0 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
+            <span>Keine Baukästen</span>
+          </div>
+          <div class="flex items-center gap-2 text-xs text-zinc-300">
+            <svg class="w-4 h-4 text-sky-400 shrink-0 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
+            <span>100% DSGVO-sicher</span>
+          </div>
+          <div class="flex items-center gap-2 text-xs text-zinc-300">
+            <svg class="w-4 h-4 text-sky-400 shrink-0 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
+            <span>Feste Monats-Pauschale</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- KACHEL 2: USP Webdesign (1 Spalte) -->
+      <div class="bg-slate-900/40 backdrop-blur-md border border-white/5 hover:border-sky-500/30 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 relative group">
+        <div>
+          <div class="p-2.5 bg-sky-400/5 border border-sky-400/10 rounded w-fit mb-4 text-sky-400 group-hover:border-sky-400/30 transition-colors">
+            <svg class="w-5 h-5 fill-current" viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg"><path d="M64 96c0-35.3 28.7-64 64-64H512c35.3 0 64 28.7 64 64V352H512V96H128V352H64V96zM0 403.2C0 392.6 8.6 384 19.2 384H620.8c10.6 0 19.2 8.6 19.2 19.2c0 42.4-34.4 76.8-76.8 76.8H76.8C34.4 480 0 445.6 0 403.2zM288 432c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H304c-8.8 0-16 7.2-16 16z"/></svg>
+          </div>
+          <h3 class="text-lg font-bold text-white mb-2">Webdesign & UI/UX</h3>
+          <p class="text-zinc-400 text-xs leading-relaxed">
+            Individuelles Design, maßgeschneidert auf Ihr Handwerk. Extrem schnelle Ladezeiten auf Smartphones.
+          </p>
+        </div>
+        <span class="text-[9px] font-mono text-zinc-600 mt-6 tracking-wider">[ CODESCHREINEREI ]</span>
+      </div>
+
+      <!-- KACHEL 3: USP SEO (1 Spalte) -->
+      <div class="bg-slate-900/40 backdrop-blur-md border border-white/5 hover:border-sky-500/30 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 relative group">
+        <div>
+          <div class="p-2.5 bg-sky-400/5 border border-sky-400/10 rounded w-fit mb-4 text-sky-400 group-hover:border-sky-400/30 transition-colors">
+            <svg class="w-5 h-5 fill-current" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
+          </div>
+          <h3 class="text-lg font-bold text-white mb-2">Lokale Sichtbarkeit</h3>
+          <p class="text-zinc-400 text-xs leading-relaxed">
+            Google-Optimierung für Ihre Stadt. Damit Kunden Sie finden und nicht die Konkurrenz.
+          </p>
+        </div>
+        <span class="text-[9px] font-mono text-zinc-600 mt-6 tracking-wider">[ GOOGLE-DOMINANZ ]</span>
+      </div>
+
+      <!-- KACHEL 4: USP Hosting (1 Spalte) -->
+      <div class="bg-slate-900/40 backdrop-blur-md border border-white/5 hover:border-sky-500/30 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 relative group">
+        <div>
+          <div class="p-2.5 bg-sky-400/5 border border-sky-400/10 rounded w-fit mb-4 text-sky-400 group-hover:border-sky-400/30 transition-colors">
+            <svg class="w-5 h-5 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M48 24C48 10.7 37.3 0 24 0S0 10.7 0 24V488c0 13.3 10.7 24 24 24s24-10.7 24-24V24zM128 64c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32H128zm0 160c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V256c0-17.7-14.3-32-32-32H128zm0 160c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V416c0-17.7-14.3-32-32-32H128z"/></svg>
+          </div>
+          <h3 class="text-lg font-bold text-white mb-2">Sicheres Hosting</h3>
+          <p class="text-zinc-400 text-xs leading-relaxed">
+            Serverstandort Deutschland. Tägliche Backups, SSL-Verschlüsselung und volle Einhaltung aller DSGVO-Vorgaben.
+          </p>
+        </div>
+        <span class="text-[9px] font-mono text-zinc-600 mt-6 tracking-wider">[ 100% REGELKONFORM ]</span>
+      </div>
+
+      <!-- KACHEL 5: Rhythmusbrecher (Daten / Metrik, 1 Spalte) -->
+      <div class="bg-slate-900/40 backdrop-blur-md border border-white/5 hover:border-sky-500/30 rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all duration-300 relative">
+        <div>
+          <!-- Semantisch korrekt: Keine Headline, da reiner Datenpunkt -->
+          <div class="text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-wider mb-2">Google Lighthouse</div>
+          <div class="flex items-baseline gap-2">
+            <span class="text-4xl font-extrabold text-emerald-400 tracking-tight">100/100</span>
+            <span class="text-[10px] font-mono text-zinc-500">Punkte</span>
+          </div>
+          <p class="text-zinc-400 text-xs mt-3 leading-relaxed">
+            Optimierter Code führt zu maximaler Geschwindigkeit im Mobilnetz. Keine Abbrüche bei schwachem Signal.
+          </p>
+        </div>
+        <div>
+          <div class="w-full bg-zinc-800/80 h-1.5 rounded-full overflow-hidden mt-6" aria-hidden="true">
+            <div class="bg-emerald-400 h-full w-[100%] rounded-full shadow-[0_0_8px_#34d399]"></div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</section>

src/components/Navbar.astro

@@ -1,44 +1,36 @@
 ---
 // src/components/Navbar.astro
-import { FaSun, FaMoon, FaBars, FaTimes } from 'react-icons/fa';
+import { FaBars, FaTimes } from 'react-icons/fa';
 ---
 
-<header id="main-header" class="fixed top-0 left-0 w-full z-50 transition-all duration-300 py-4 bg-transparent">
+<header id="main-header" class="fixed top-0 left-0 w-full z-50 transition-all duration-300 py-3 bg-brand-darkBg/30 backdrop-blur-xl border-b border-brand-darkBorder">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="flex items-center justify-between h-16">
+    <div class="flex items-center justify-between h-14">
       
       <!-- Logo -->
       <a href="#" class="flex items-center gap-2 group">
-        <span class="text-xl sm:text-2xl font-bold tracking-wider text-white select-none">
-          N&D <span class="bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent group-hover:animate-pulse">i-t SOLUTIONS</span>
+        <span class="text-lg sm:text-xl font-bold tracking-wider text-white select-none">
+          N&D <span class="bg-gradient-to-r from-brand-arcticBlue to-blue-500 bg-clip-text text-transparent">i-t SOLUTIONS</span>
         </span>
       </a>
 
       <!-- Desktop Nav Links -->
       <nav class="hidden md:flex items-center gap-8">
-        <a href="#" class="text-sm font-semibold text-gray-300 hover:text-brand-cyan transition-colors">Home</a>
-        <a href="#services" class="text-sm font-semibold text-gray-300 hover:text-brand-cyan transition-colors">Services</a>
-        <a href="#tech" class="text-sm font-semibold text-gray-300 hover:text-brand-cyan transition-colors">Tech-Stack</a>
-        <a href="#about" class="text-sm font-semibold text-gray-300 hover:text-brand-cyan transition-colors">About</a>
-        <a href="#contact" class="text-sm font-semibold text-gray-300 hover:text-brand-cyan transition-colors">Kontakt</a>
+        <a href="#services" class="text-xs tracking-wider uppercase font-medium text-zinc-400 hover:text-brand-arcticBlue transition-colors">Leistungen</a>
+        <a href="#tech" class="text-xs tracking-wider uppercase font-medium text-zinc-400 hover:text-brand-arcticBlue transition-colors">Tech-Stack</a>
+        <a href="#concept" class="text-xs tracking-wider uppercase font-medium text-zinc-400 hover:text-brand-arcticBlue transition-colors">Ablauf</a>
       </nav>
 
       <!-- Right controls -->
       <div class="flex items-center gap-4">
-        <!-- Theme Toggle -->
-        <button id="theme-toggle" class="p-2.5 rounded-full bg-white/10 text-white hover:bg-white/20 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-cyan" aria-label="Toggle Theme">
-          <span class="dark:hidden"><FaMoon class="w-5 h-5 text-yellow-300" /></span>
-          <span class="hidden dark:inline"><FaSun class="w-5 h-5 text-orange-400" /></span>
-        </button>
-
         <!-- CTA button -->
-        <a href="#contact" class="hidden sm:inline-flex items-center justify-center px-5 py-2 text-xs font-semibold tracking-wider text-white border border-brand-cyan rounded-full hover:bg-brand-cyan hover:text-brand-primary transition-all duration-300 hover:shadow-[0_0_15px_rgba(0,229,255,0.4)]">
-          Anfrage starten
+        <a href="#contact" class="hidden sm:inline-flex items-center justify-center px-4 py-1.5 text-xs font-semibold tracking-wider text-white border border-brand-darkBorder rounded bg-zinc-900/50 hover:border-brand-arcticBlue hover:text-brand-arcticBlue transition-all duration-200">
+          Erstgespräch buchen
         </a>
 
         <!-- Mobile menu button -->
-        <button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg bg-white/10 text-white hover:bg-white/20 transition-all focus:outline-none" aria-label="Open Menu">
-          <FaBars class="w-6 h-6" />
+        <button id="mobile-menu-btn" class="md:hidden p-2 rounded bg-zinc-900 text-white hover:bg-zinc-800 transition-all focus:outline-none" aria-label="Open Menu">
+          <FaBars class="w-5 h-5" />
         </button>
       </div>
 
@@ -46,23 +38,21 @@ import { FaSun, FaMoon, FaBars, FaTimes } from 'react-icons/fa';
   </div>
 
   <!-- Mobile Menu Drawer -->
-  <div id="mobile-menu" class="fixed inset-0 z-50 bg-brand-primary/95 backdrop-blur-lg md:hidden translate-x-full transition-transform duration-300 ease-in-out">
-    <div class="flex justify-between items-center p-6 border-b border-white/10">
-      <span class="text-xl font-bold tracking-wider text-white">
-        N&D <span class="bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent">i-t SOLUTIONS</span>
+  <div id="mobile-menu" class="fixed inset-0 z-50 bg-brand-darkBg/98 backdrop-blur-xl md:hidden translate-x-full transition-transform duration-300 ease-in-out">
+    <div class="flex justify-between items-center p-6 border-b border-brand-darkBorder">
+      <span class="text-lg font-bold tracking-wider text-white">
+        N&D <span class="bg-gradient-to-r from-brand-arcticBlue to-blue-500 bg-clip-text text-transparent">i-t SOLUTIONS</span>
       </span>
-      <button id="mobile-close-btn" class="p-2 rounded-lg bg-white/10 text-white hover:bg-white/20 transition-all" aria-label="Close Menu">
-        <FaTimes class="w-6 h-6" />
+      <button id="mobile-close-btn" class="p-2 rounded bg-zinc-900 text-white hover:bg-zinc-800 transition-all" aria-label="Close Menu">
+        <FaTimes class="w-5 h-5" />
       </button>
     </div>
-    <nav class="flex flex-col gap-6 p-8 text-center text-xl font-semibold text-white">
-      <a href="#" class="hover:text-brand-cyan transition-colors py-2 border-b border-white/5" id="mobile-link-1">Home</a>
-      <a href="#services" class="hover:text-brand-cyan transition-colors py-2 border-b border-white/5" id="mobile-link-2">Services</a>
-      <a href="#tech" class="hover:text-brand-cyan transition-colors py-2 border-b border-white/5" id="mobile-link-3">Tech-Stack</a>
-      <a href="#about" class="hover:text-brand-cyan transition-colors py-2 border-b border-white/5" id="mobile-link-4">About</a>
-      <a href="#contact" class="hover:text-brand-cyan transition-colors py-2 border-b border-white/5" id="mobile-link-5">Kontakt</a>
-      <a href="#contact" class="inline-flex justify-center items-center py-3 bg-gradient-to-r from-brand-cyan to-brand-magenta text-brand-primary font-bold rounded-full mt-4" id="mobile-link-6">
-        Anfrage starten
+    <nav class="flex flex-col gap-6 p-8 text-center text-lg font-semibold text-white">
+      <a href="#services" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-brand-darkBorder/50" id="mobile-link-1">Leistungen</a>
+      <a href="#tech" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-brand-darkBorder/50" id="mobile-link-2">Tech-Stack</a>
+      <a href="#concept" class="hover:text-brand-arcticBlue transition-colors py-2 border-b border-brand-darkBorder/50" id="mobile-link-3">Ablauf</a>
+      <a href="#contact" class="inline-flex justify-center items-center py-2.5 bg-zinc-900 text-brand-arcticBlue border border-brand-darkBorder font-bold rounded mt-4" id="mobile-link-4">
+        Erstgespräch buchen
       </a>
     </nav>
   </div>
@@ -71,28 +61,21 @@ import { FaSun, FaMoon, FaBars, FaTimes } from 'react-icons/fa';
 <script>
   // Elements
   const header = document.getElementById('main-header');
-  const themeToggle = document.getElementById('theme-toggle');
   const mobileMenuBtn = document.getElementById('mobile-menu-btn');
   const mobileCloseBtn = document.getElementById('mobile-close-btn');
   const mobileMenu = document.getElementById('mobile-menu');
 
-  // Change header background on scroll
+  // Change header opacity on scroll
   window.addEventListener('scroll', () => {
-    if (window.scrollY > 50) {
-      header?.classList.remove('bg-transparent', 'py-4');
-      header?.classList.add('bg-brand-primary/80', 'backdrop-blur-md', 'shadow-lg', 'border-b', 'border-white/10', 'py-2');
+    if (window.scrollY > 30) {
+      header?.classList.remove('bg-brand-darkBg/30');
+      header?.classList.add('bg-brand-darkBg/80', 'shadow-lg');
     } else {
-      header?.classList.remove('bg-brand-primary/80', 'backdrop-blur-md', 'shadow-lg', 'border-b', 'border-white/10', 'py-2');
-      header?.classList.add('bg-transparent', 'py-4');
+      header?.classList.remove('bg-brand-darkBg/80', 'shadow-lg');
+      header?.classList.add('bg-brand-darkBg/30');
     }
   });
 
-  // Toggle Theme
-  themeToggle?.addEventListener('click', () => {
-    const isDark = document.documentElement.classList.toggle('dark');
-    localStorage.setItem('theme', isDark ? 'dark' : 'light');
-  });
-
   // Mobile Menu open/close
   const toggleMobileMenu = () => {
     mobileMenu?.classList.toggle('translate-x-full');
@@ -102,7 +85,7 @@ import { FaSun, FaMoon, FaBars, FaTimes } from 'react-icons/fa';
   mobileCloseBtn?.addEventListener('click', toggleMobileMenu);
 
   // Close mobile menu on link click
-  for (let i = 1; i <= 6; i++) {
+  for (let i = 1; i <= 4; i++) {
     const link = document.getElementById(`mobile-link-${i}`);
     link?.addEventListener('click', toggleMobileMenu);
   }

src/layouts/Layout.astro

@@ -14,7 +14,6 @@ const { title, description = "Professionelles Webdesign & moderne Websites für
 		<meta name="description" content={description} />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 		
 		<!-- Google Fonts -->
@@ -34,7 +33,7 @@ const { title, description = "Professionelles Webdesign & moderne Websites für
 			})();
 		</script>
 	</head>
-	<body class="bg-brand-lightBg text-brand-primary dark:bg-brand-darkBg dark:text-gray-100 font-sans transition-colors duration-300 antialiased selection:bg-brand-cyan selection:text-brand-primary">
+	<body class="bg-brand-darkBg text-brand-lightText font-sans transition-colors duration-300 antialiased selection:bg-brand-arcticBlue/20 selection:text-brand-arcticBlue">
 		<slot />
 	</body>
 </html>
@@ -78,4 +77,26 @@ const { title, description = "Professionelles Webdesign & moderne Websites für
 	::-webkit-scrollbar-thumb:hover {
 		background: #333;
 	}
+
+	/* Tactile Craftsman UI CSS classes */
+	.tactile-grid-bg {
+		background-image: 
+			linear-gradient(to right, rgba(35, 45, 69, 0.2) 1px, transparent 1px),
+			linear-gradient(to bottom, rgba(35, 45, 69, 0.2) 1px, transparent 1px);
+		background-size: 40px 40px;
+	}
+	.tactile-noise {
+		position: relative;
+	}
+	.tactile-noise::before {
+		content: "";
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0.025;
+		pointer-events: none;
+		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+		z-index: 1;
+	}
 </style>

src/pages/index.astro

@@ -1,22 +1,55 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import Navbar from '../components/Navbar.astro';
-import Hero from '../components/Hero.astro';
-import Services from '../components/Services.astro';
-import TechStack from '../components/TechStack.astro';
-import About from '../components/About.astro';
-import Contact from '../components/Contact.astro';
 import Footer from '../components/Footer.astro';
+import HeroAndBento from '../components/HeroAndBento.astro';
 ---
 
-<Layout title="N&D i-t SOLUTIONS | Professionelles Webdesign & Websites für Kleinbetriebe">
-	<Navbar />
-	<main>
-		<Hero />
-		<Services />
-		<TechStack />
-		<About />
-	</main>
-	<Contact />
-	<Footer />
+<Layout title="N&D i-t SOLUTIONS | Webdesign & Entwicklung">
+  <Navbar />
+  
+  <main>
+    {/* Clean, modular Hero and Bento section (0 KB JS, tactile details) */}
+    <HeroAndBento />
+    
+    <!-- Contact section (separate, clean layout) -->
+    <section id="contact" class="py-20 bg-[#0B0F19] relative border-t border-white/5">
+      <div class="absolute inset-0 opacity-[0.015] pointer-events-none bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div>
+      <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div class="bg-slate-900/40 backdrop-blur-md border border-white/5 rounded-2xl p-8 sm:p-10 transition-all duration-300 relative tactile-noise">
+          <span class="absolute top-2.5 left-2.5 w-2 h-2 border-t border-l border-zinc-700/50"></span>
+          <span class="absolute top-2.5 right-2.5 w-2 h-2 border-t border-r border-zinc-700/50"></span>
+          <span class="absolute bottom-2.5 left-2.5 w-2 h-2 border-b border-l border-zinc-700/50"></span>
+          <span class="absolute bottom-2.5 right-2.5 w-2 h-2 border-b border-r border-zinc-700/50"></span>
+          
+          <h2 class="text-3xl font-extrabold text-white mb-2 uppercase tracking-tight">Bereit für Ihr Projekt?</h2>
+          <p class="text-zinc-400 text-xs mb-8">
+            Schreiben Sie uns direkt. Wir melden uns innerhalb von 24 Stunden persönlich bei Ihnen.
+          </p>
+          
+          <form class="space-y-4" onsubmit="event.preventDefault()">
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div>
+                <label for="name" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">Name</label>
+                <input type="text" id="name" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" />
+              </div>
+              <div>
+                <label for="email" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">E-Mail</label>
+                <input type="email" id="email" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors" />
+              </div>
+            </div>
+            <div>
+              <label for="message" class="block text-[10px] font-bold text-zinc-400 uppercase mb-1">Nachricht</label>
+              <textarea id="message" rows="4" required class="w-full bg-zinc-950 border border-brand-darkBorder rounded p-2.5 text-xs text-white focus:outline-none focus:border-brand-arcticBlue transition-colors resize-none"></textarea>
+            </div>
+            <button type="submit" class="w-full py-3 bg-brand-arcticBlue text-zinc-950 font-bold text-xs uppercase tracking-wider rounded hover:bg-white transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-brand-arcticBlue focus:outline-none">
+              Anfrage senden
+            </button>
+          </form>
+        </div>
+      </div>
+    </section>
+  </main>
+  
+  <Footer />
 </Layout>

src/pages/templates.astro

@@ -0,0 +1,427 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Navbar from '../components/Navbar.astro';
+import Footer from '../components/Footer.astro';
+import { FaArrowLeft, FaEye, FaDesktop } from 'react-icons/fa';
+
+// List of 20 design templates showcasing maximum diversity in color, structure, and style
+const templates = [
+  {
+    id: "01",
+    name: "Der Handwerker-Klassiker",
+    style: "Einfach & Bodenständig",
+    layout: "Boxed Layout",
+    design: "Brutalismus",
+    colorScheme: "Warm & Earthy (Sand & Terrakotta)",
+    bgClass: "bg-[#FDFBF7] text-[#2C1A11] border-[#2C1A11]/20",
+    theme: "light",
+    accentColor: "bg-[#D97706]",
+    badgeClass: "bg-[#D97706]/10 text-[#D97706]",
+    layoutPreview: "boxed"
+  },
+  {
+    id: "02",
+    name: "Dachdecker Meister",
+    style: "Elegant & Professionell",
+    layout: "Split-Screen",
+    design: "Glassmorphismus",
+    colorScheme: "Deep Dark (Anthrazit & Gold)",
+    bgClass: "bg-[#18181B] text-white border-yellow-500/20",
+    theme: "dark",
+    accentColor: "bg-yellow-500",
+    badgeClass: "bg-yellow-500/10 text-yellow-400",
+    layoutPreview: "split"
+  },
+  {
+    id: "03",
+    name: "Solar & Photovoltaik",
+    style: "Tech & Zukunft",
+    layout: "Bento-Grid",
+    design: "SaaS-Minimalismus",
+    colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
+    bgClass: "bg-zinc-900 text-zinc-100 border-orange-500/20",
+    theme: "dark",
+    accentColor: "bg-orange-500",
+    badgeClass: "bg-orange-500/10 text-orange-400",
+    layoutPreview: "bento"
+  },
+  {
+    id: "04",
+    name: "Die Kanzlei",
+    style: "Seriös & Clean",
+    layout: "Asymmetrisch",
+    design: "Glassmorphismus",
+    colorScheme: "Deep Dark (Anthrazit & Smaragd-Grün)",
+    bgClass: "bg-[#0B0F19] text-white border-emerald-500/20",
+    theme: "dark",
+    accentColor: "bg-emerald-500",
+    badgeClass: "bg-emerald-500/10 text-emerald-400",
+    layoutPreview: "asymmetric"
+  },
+  {
+    id: "05",
+    name: "Bio-Hofladen",
+    style: "Rustikal & Natur",
+    layout: "Minimalistisch 1-spaltig",
+    design: "Neomorphismus",
+    colorScheme: "Warm & Earthy (Terrakotta)",
+    bgClass: "bg-[#FAF7F2] text-[#4A3B32] border-[#E8DCC4]",
+    theme: "light",
+    accentColor: "bg-[#C2410C]",
+    badgeClass: "bg-[#C2410C]/10 text-[#C2410C]",
+    layoutPreview: "single"
+  },
+  {
+    id: "06",
+    name: "Sanitär & Heizung",
+    style: "Klar & Zuverlässig",
+    layout: "Bento-Grid",
+    design: "SaaS-Minimalismus",
+    colorScheme: "Clean Light (Weiß & Navy-Blau)",
+    bgClass: "bg-white text-slate-800 border-slate-200",
+    theme: "light",
+    accentColor: "bg-blue-800",
+    badgeClass: "bg-blue-800/10 text-blue-800",
+    layoutPreview: "bento"
+  },
+  {
+    id: "07",
+    name: "KFZ-Werkstatt Schnellservice",
+    style: "Dynamisch & Direkt",
+    layout: "Split-Screen",
+    design: "Brutalismus",
+    colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
+    bgClass: "bg-zinc-800 text-white border-zinc-700",
+    theme: "dark",
+    accentColor: "bg-orange-600",
+    badgeClass: "bg-orange-600/15 text-orange-400",
+    layoutPreview: "split"
+  },
+  {
+    id: "08",
+    name: "Schreinerei Holzart",
+    style: "Handwerk & Präzision",
+    layout: "Boxed Layout",
+    design: "SaaS-Minimalismus",
+    colorScheme: "Warm & Earthy (Sand-Töne)",
+    bgClass: "bg-[#F5F2EB] text-[#3D3A36] border-[#D9D2C5]",
+    theme: "light",
+    accentColor: "bg-[#8B5A2B]",
+    badgeClass: "bg-[#8B5A2B]/10 text-[#8B5A2B]",
+    layoutPreview: "boxed"
+  },
+  {
+    id: "09",
+    name: "Steuerberater Premium",
+    style: "Exklusiv & Diskret",
+    layout: "Bento-Grid",
+    design: "Glassmorphismus",
+    colorScheme: "Deep Dark (Anthrazit & Gold)",
+    bgClass: "bg-slate-900 text-slate-100 border-amber-500/20",
+    theme: "dark",
+    accentColor: "bg-amber-500",
+    badgeClass: "bg-amber-500/10 text-amber-400",
+    layoutPreview: "bento"
+  },
+  {
+    id: "10",
+    name: "Garten- & Landschaftsbau",
+    style: "Frisch & Modern",
+    layout: "Asymmetrisch",
+    design: "Glassmorphismus",
+    colorScheme: "Clean Light (Weiß & Salbei-Grün)",
+    bgClass: "bg-[#F3F7F4] text-slate-800 border-emerald-200",
+    theme: "light",
+    accentColor: "bg-emerald-700",
+    badgeClass: "bg-emerald-700/10 text-emerald-800",
+    layoutPreview: "asymmetric"
+  },
+  {
+    id: "11",
+    name: "Modern Dentists Zahnarzt",
+    style: "Clean & Vertrauensvoll",
+    layout: "Minimalistisch 1-spaltig",
+    design: "SaaS-Minimalismus",
+    colorScheme: "Clean Light (Weiß & Navy-Blau)",
+    bgClass: "bg-slate-50 text-slate-800 border-slate-200",
+    theme: "light",
+    accentColor: "bg-[#1E3A8A]",
+    badgeClass: "bg-[#1E3A8A]/10 text-[#1E3A8A]",
+    layoutPreview: "single"
+  },
+  {
+    id: "12",
+    name: "Bäckerei Traditionsbäcker",
+    style: "Gemütlich & Lecker",
+    layout: "Boxed Layout",
+    design: "Neomorphismus",
+    colorScheme: "Warm & Earthy (Terrakotta)",
+    bgClass: "bg-[#FDF9F3] text-[#5C3E21] border-[#EADCC9]",
+    theme: "light",
+    accentColor: "bg-[#B45309]",
+    badgeClass: "bg-[#B45309]/10 text-[#B45309]",
+    layoutPreview: "boxed"
+  },
+  {
+    id: "13",
+    name: "Elektro-Technik Meister",
+    style: "Präzise & Leistungsstark",
+    layout: "Split-Screen",
+    design: "Brutalismus",
+    colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
+    bgClass: "bg-neutral-900 text-neutral-100 border-purple-500/20",
+    theme: "dark",
+    accentColor: "bg-purple-600",
+    badgeClass: "bg-purple-600/10 text-purple-400",
+    layoutPreview: "split"
+  },
+  {
+    id: "14",
+    name: "Fitness- & Kraftstudio",
+    style: "Stark & Motivierend",
+    layout: "Asymmetrisch",
+    design: "Brutalismus",
+    colorScheme: "Deep Dark (Schwarz & Neon-Orange)",
+    bgClass: "bg-black text-white border-orange-500/20",
+    theme: "dark",
+    accentColor: "bg-orange-500",
+    badgeClass: "bg-orange-500/10 text-orange-500",
+    layoutPreview: "asymmetric"
+  },
+  {
+    id: "15",
+    name: "Architekturbüro Struktur",
+    style: "Minimalismus & Ästhetik",
+    layout: "Split-Screen",
+    design: "SaaS-Minimalismus",
+    colorScheme: "Clean Light (Weiß & Navy-Blau)",
+    bgClass: "bg-white text-zinc-900 border-zinc-200",
+    theme: "light",
+    accentColor: "bg-zinc-900",
+    badgeClass: "bg-zinc-950/10 text-zinc-900",
+    layoutPreview: "split"
+  },
+  {
+    id: "16",
+    name: "Physiotherapie Praxis",
+    style: "Achtsam & Gesund",
+    layout: "Minimalistisch 1-spaltig",
+    design: "Glassmorphismus",
+    colorScheme: "Clean Light (Weiß & Salbei-Grün)",
+    bgClass: "bg-[#F7FAFC] text-slate-800 border-emerald-100",
+    theme: "light",
+    accentColor: "bg-emerald-600",
+    badgeClass: "bg-emerald-600/10 text-emerald-700",
+    layoutPreview: "single"
+  },
+  {
+    id: "17",
+    name: "Metallbau & Schlosserei",
+    style: "Hart & Präzise",
+    layout: "Boxed Layout",
+    design: "Brutalismus",
+    colorScheme: "Deep Dark (Anthrazit & Smaragd-Grün)",
+    bgClass: "bg-stone-900 text-stone-100 border-emerald-500/20",
+    theme: "dark",
+    accentColor: "bg-emerald-600",
+    badgeClass: "bg-emerald-600/10 text-emerald-400",
+    layoutPreview: "boxed"
+  },
+  {
+    id: "18",
+    name: "Restaurant & Gaststube",
+    style: "Rustikal & Einladend",
+    layout: "Bento-Grid",
+    design: "Neomorphismus",
+    colorScheme: "Warm & Earthy (Sand-Töne)",
+    bgClass: "bg-[#FAF6F0] text-[#543D2B] border-[#EFEAE2]",
+    theme: "light",
+    accentColor: "bg-[#A75D5D]",
+    badgeClass: "bg-[#A75D5D]/10 text-[#A75D5D]",
+    layoutPreview: "bento"
+  },
+  {
+    id: "19",
+    name: "Software-Entwicklung Byte",
+    style: "Sauber & Strukturiert",
+    layout: "Bento-Grid",
+    design: "SaaS-Minimalismus",
+    colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
+    bgClass: "bg-[#1C1B22] text-zinc-100 border-indigo-500/20",
+    theme: "dark",
+    accentColor: "bg-indigo-500",
+    badgeClass: "bg-indigo-500/10 text-indigo-400",
+    layoutPreview: "bento"
+  },
+  {
+    id: "20",
+    name: "Malerbetrieb Farbenfroh",
+    style: "Kreativ & Präzise",
+    layout: "Asymmetrisch",
+    design: "Glassmorphismus",
+    colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
+    bgClass: "bg-[#1E1E2E] text-zinc-100 border-orange-500/20",
+    theme: "dark",
+    accentColor: "bg-orange-500",
+    badgeClass: "bg-orange-500/10 text-orange-400",
+    layoutPreview: "asymmetric"
+  }
+];
+---
+
+<Layout title="Template-Katalog | N&D i-t SOLUTIONS">
+  <Navbar />
+  
+  <main class="relative min-h-screen bg-brand-darkBg text-white pt-28 pb-20 px-4 sm:px-6 lg:px-8 overflow-hidden tactile-grid-bg">
+    
+    <!-- Background Glow (Aurora Effect - kept extremely subtle) -->
+    <div class="absolute top-1/4 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-sky-500/[0.02] blur-[150px] pointer-events-none rounded-full"></div>
+    <div class="absolute top-2/3 left-1/3 w-[400px] h-[400px] bg-blue-600/[0.02] blur-[120px] pointer-events-none rounded-full"></div>
+
+    <div class="max-w-7xl mx-auto relative z-10">
+      
+      <!-- Back Link -->
+      <a href="/" class="inline-flex items-center gap-2 text-zinc-400 hover:text-brand-arcticBlue text-xs uppercase tracking-wider font-semibold mb-8 group transition-colors">
+        <FaArrowLeft class="w-3 h-3 group-hover:-translate-x-1 transition-transform" />
+        Zurück zur Startseite
+      </a>
+
+      <!-- Header Section -->
+      <div class="max-w-3xl mb-16">
+        <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-brand-arcticBlue/20 bg-brand-arcticBlue/5 text-brand-arcticBlue text-[10px] font-semibold uppercase tracking-wider mb-4">
+          Handwerk trifft moderne Architektur
+        </div>
+        <h1 class="text-4xl sm:text-6xl font-bold tracking-tight mb-4">
+          Die perfekte Struktur für <span class="bg-clip-text text-transparent bg-gradient-to-r from-brand-arcticBlue to-white">jeden Betrieb.</span>
+        </h1>
+        <p class="text-zinc-400 text-sm sm:text-base leading-relaxed">
+          Egal ob klassische Schreinerei, moderne Anwaltskanzlei oder lokaler Handwerker: Wir passen das Design perfekt an Ihren Stil an. Hier sind 20 beispielhafte Bento-Kombinationen, Farbwelten und Layout-Konzepte.
+        </p>
+      </div>
+
+      <!-- Grid System Container (20 Bento-Kacheln) -->
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        
+        {templates.map((tpl) => (
+          <a href={`/templates/${tpl.id}`} class={`group relative rounded-2xl p-6 border transition-all duration-300 hover:scale-[1.01] flex flex-col justify-between h-[340px] ${tpl.bgClass} ${tpl.theme === 'dark' ? 'hover:border-white/20' : 'hover:border-black/20'} shadow-lg cursor-pointer block tactile-noise`}>
+            
+            {/* Precision Blueprint Corner Markers */}
+            <span class="absolute top-2 left-2 w-1.5 h-1.5 border-t border-l border-current/25"></span>
+            <span class="absolute top-2 right-2 w-1.5 h-1.5 border-t border-r border-current/25"></span>
+            <span class="absolute bottom-2 left-2 w-1.5 h-1.5 border-b border-l border-current/25"></span>
+            <span class="absolute bottom-2 right-2 w-1.5 h-1.5 border-b border-r border-current/25"></span>
+
+            {/* Overlay glow for modern style */}
+            <div class="absolute inset-0 bg-white/[0.01] dark:bg-white/[0.02] rounded-2xl pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+
+            <div>
+              {/* Badge & ID & Status Indicator */}
+              <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center gap-2">
+                  <span class={`text-[10px] font-mono font-bold uppercase px-2 py-0.5 rounded ${tpl.badgeClass}`}>
+                    {tpl.style}
+                  </span>
+                  <span class="relative flex h-2 w-2" title="Vorschau aktiv">
+                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                    <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+                  </span>
+                </div>
+                <span class="text-xs font-mono opacity-40">#{tpl.id}</span>
+              </div>
+
+              {/* Title & Description */}
+              <h3 class="text-lg font-bold tracking-tight mb-2 line-clamp-2 leading-snug">
+                {tpl.name}
+              </h3>
+              
+              <div class="space-y-1 mt-3">
+                <div class="flex items-center gap-1.5 text-[11px] opacity-70">
+                  <span class="font-bold">Stil:</span> {tpl.design}
+                </div>
+                <div class="flex items-center gap-1.5 text-[11px] opacity-70">
+                  <span class="font-bold">Farbe:</span> {tpl.colorScheme}
+                </div>
+              </div>
+            </div>
+
+            {/* Visual Mini-Layout Preview Component inside card (Bento Content-Mix) */}
+            <div class="my-4 h-16 w-full rounded border border-black/[0.06] dark:border-white/[0.06] bg-black/5 dark:bg-white/5 p-1.5 flex gap-1 justify-center items-stretch relative overflow-hidden">
+              
+              {tpl.layoutPreview === "bento" && (
+                <div class="w-full grid grid-cols-3 gap-1">
+                  <div class={`col-span-2 rounded ${tpl.accentColor} opacity-70`}></div>
+                  <div class="rounded bg-black/10 dark:bg-white/10"></div>
+                  <div class="rounded bg-black/10 dark:bg-white/10"></div>
+                  <div class="col-span-2 rounded bg-black/10 dark:bg-white/10"></div>
+                </div>
+              )}
+
+              {tpl.layoutPreview === "split" && (
+                <div class="w-full flex gap-1">
+                  <div class={`w-1/2 rounded ${tpl.accentColor} opacity-70`}></div>
+                  <div class="w-1/2 rounded bg-black/10 dark:bg-white/10"></div>
+                </div>
+              )}
+
+              {tpl.layoutPreview === "boxed" && (
+                <div class="w-full flex justify-center items-center p-2">
+                  <div class="w-full h-full rounded border border-black/20 dark:border-white/20 p-1 flex gap-1">
+                    <div class={`w-1/3 rounded ${tpl.accentColor} opacity-70`}></div>
+                    <div class="w-2/3 rounded bg-black/10 dark:bg-white/10"></div>
+                  </div>
+                </div>
+              )}
+
+              {tpl.layoutPreview === "asymmetric" && (
+                <div class="w-full grid grid-cols-4 gap-1">
+                  <div class="rounded bg-black/10 dark:bg-white/10"></div>
+                  <div class={`col-span-2 rounded ${tpl.accentColor} opacity-70`}></div>
+                  <div class="rounded bg-black/10 dark:bg-white/10"></div>
+                </div>
+              )}
+
+              {tpl.layoutPreview === "single" && (
+                <div class="w-full flex flex-col gap-1 justify-center">
+                  <div class={`h-3 w-3/4 mx-auto rounded ${tpl.accentColor} opacity-70`}></div>
+                  <div class="h-2 w-1/2 mx-auto rounded bg-black/10 dark:bg-white/10"></div>
+                  <div class="h-2 w-2/3 mx-auto rounded bg-black/10 dark:bg-white/10"></div>
+                </div>
+              )}
+            </div>
+
+            {/* CTA action bottom */}
+            <div class="flex items-center justify-between pt-3 border-t border-black/[0.06] dark:border-white/[0.06]">
+              <span class="text-[10px] font-mono opacity-50 uppercase">{tpl.layout}</span>
+              <div class="flex items-center gap-1.5 text-xs font-semibold group-hover:translate-x-0.5 transition-transform">
+                <span>Vorschau</span>
+                <FaDesktop class="w-3 h-3 opacity-60" />
+              </div>
+            </div>
+
+          </a>
+        ))}
+
+      </div>
+
+      <!-- Bottom Info Callout -->
+      <div class="mt-20 p-8 rounded-2xl bg-brand-darkCard/40 border border-brand-darkBorder relative overflow-hidden group">
+        <div class="absolute inset-0 bg-gradient-to-r from-brand-arcticBlue/5 to-transparent pointer-events-none"></div>
+        <div class="relative z-10 flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
+          <div>
+            <h3 class="text-xl font-bold mb-2">Ihr Wunsch-Design ist nicht dabei?</h3>
+            <p class="text-zinc-400 text-xs sm:text-sm max-w-2xl leading-relaxed">
+              Kein Problem. Jedes Layout wird von uns individuell im Code programmiert. Wir nutzen keine starren Fertig-Systeme. Teilen Sie uns einfach Ihre Vorstellungen mit, und wir setzen sie passgenau um.
+            </p>
+          </div>
+          <a href="/#contact" class="inline-flex items-center gap-2 px-5 py-2.5 bg-brand-arcticBlue text-zinc-950 font-semibold text-xs tracking-wider uppercase rounded hover:bg-white transition-all duration-200 shrink-0">
+            Design besprechen
+            <FaDesktop class="w-3 h-3" />
+          </a>
+        </div>
+      </div>
+
+    </div>
+  </main>
+
+  <Footer />
+</Layout>

src/pages/templates/[id].astro

@@ -0,0 +1,575 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import Navbar from '../../components/Navbar.astro';
+import Footer from '../../components/Footer.astro';
+import { FaArrowLeft, FaCheck, FaPhoneAlt, FaEnvelope, FaDesktop } from 'react-icons/fa';
+
+export function getStaticPaths() {
+  const templates = [
+    // --- GRUPPE 1: INDUSTRIE-BRUTALISMUS ---
+    {
+      id: "01",
+      name: "Der Handwerker-Klassiker",
+      style: "Einfach & Bodenständig",
+      group: "Brutalismus",
+      layoutType: "Typ B", // Split-Screen & Monolith
+      colorScheme: "Warm & Earthy (Sand & Terrakotta)",
+      bgClass: "bg-[#F4F1EA] text-[#2C1A11] tactile-noise",
+      cardClass: "bg-[#FAF8F5] border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] rounded-none",
+      accentText: "text-[#D95D39]",
+      accentBg: "bg-[#D95D39] hover:bg-[#b54a2a] text-white border-2 border-black shadow-[4px_4px_0_0_rgba(0,0,0,1)] active:translate-x-1 active:translate-y-1 active:shadow-none rounded-none",
+      theme: "light",
+      businessType: "Schreinerei & Innenausbau"
+    },
+    {
+      id: "07",
+      name: "KFZ-Werkstatt Schnellservice",
+      style: "Dynamisch & Direkt",
+      group: "Brutalismus",
+      layoutType: "Typ B", // Split-Screen
+      colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
+      bgClass: "bg-[#E5E7EB] text-zinc-950",
+      cardClass: "bg-white border-3 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] rounded-none",
+      accentText: "text-[#FF5500]",
+      accentBg: "bg-[#FF5500] text-white border-2 border-black font-bold hover:-translate-x-1 hover:-translate-y-1 active:translate-x-0 active:translate-y-0 shadow-[4px_4px_0_0_rgba(0,0,0,1)] transition-transform rounded-none",
+      theme: "light",
+      businessType: "Kfz-Meisterbetrieb"
+    },
+    {
+      id: "13",
+      name: "Elektro-Technik Meister",
+      style: "Präzise & Leistungsstark",
+      group: "Brutalismus",
+      layoutType: "Typ B", // Split-Screen
+      colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
+      bgClass: "bg-zinc-900 text-zinc-100",
+      cardClass: "bg-zinc-800 border-2 border-purple-500 shadow-[6px_6px_0px_0px_rgba(139,92,246,0.3)] rounded-none relative overflow-hidden",
+      accentText: "text-purple-400 font-mono",
+      accentBg: "bg-purple-600 hover:bg-purple-700 text-white border border-purple-400 rounded-none shadow-[3px_3px_0_0_rgba(255,255,255,0.2)]",
+      theme: "dark",
+      businessType: "Elektrotechnik & Smart Home"
+    },
+    {
+      id: "14",
+      name: "Fitness- & Kraftstudio",
+      style: "Stark & Motivierend",
+      group: "Brutalismus",
+      layoutType: "Typ A", // Asymmetrisches Bento
+      colorScheme: "Deep Dark (Schwarz & Neon-Orange)",
+      bgClass: "bg-[#0A0A0A] text-white",
+      cardClass: "bg-zinc-950 border-2 border-[#FF5700] rounded-none shadow-[8px_8px_0_0_rgba(255,87,0,0.15)]",
+      accentText: "text-[#FF5700]",
+      accentBg: "bg-[#FF5700] hover:bg-[#e04c00] text-black font-black uppercase rounded-none border border-black shadow-[4px_4px_0_0_rgba(255,255,255,0.1)]",
+      theme: "dark",
+      businessType: "Premium Gym & Fitness"
+    },
+    {
+      id: "17",
+      name: "Metallbau & Schlosserei",
+      style: "Hart & Präzise",
+      group: "Brutalismus",
+      layoutType: "Typ B", // Split-Screen
+      colorScheme: "Deep Dark (Anthrazit & Smaragd-Grün)",
+      bgClass: "bg-[#1A1D20] text-zinc-200 border-dashed border-slate-700",
+      cardClass: "bg-zinc-900 border border-zinc-700 hover:border-emerald-500/50 shadow-md rounded-none",
+      accentText: "text-emerald-400",
+      accentBg: "bg-emerald-600 hover:bg-emerald-700 text-white rounded-none border border-emerald-500",
+      theme: "dark",
+      businessType: "Schlosserei & Konstruktion"
+    },
+
+    // --- GRUPPE 2: GLASSMORPHISMUS ---
+    {
+      id: "02",
+      name: "Dachdecker Meister",
+      style: "Elegant & Professionell",
+      group: "Glassmorphismus",
+      layoutType: "Typ A", // Bento
+      colorScheme: "Deep Dark (Anthrazit & Gold)",
+      bgClass: "bg-[#0F1115] text-white",
+      cardClass: "bg-white/[0.03] backdrop-blur-xl border border-white/10 hover:border-amber-500/30 transition-all duration-300 rounded-2xl shadow-xl",
+      accentText: "text-amber-400",
+      accentBg: "bg-gradient-to-r from-amber-500 to-yellow-600 hover:from-amber-600 hover:to-yellow-700 text-zinc-950 font-bold rounded-lg shadow-lg shadow-amber-500/10",
+      theme: "dark",
+      businessType: "Dachdeckerei & Spenglerei"
+    },
+    {
+      id: "04",
+      name: "Die Kanzlei",
+      style: "Seriös & Clean",
+      group: "Glassmorphismus",
+      layoutType: "Typ A", // Bento
+      colorScheme: "Deep Dark (Anthrazit & Smaragd-Grün)",
+      bgClass: "bg-[#0B0F19] text-white",
+      cardClass: "bg-slate-900/50 backdrop-blur-md border border-emerald-500/20 hover:border-emerald-500/40 rounded-xl transition-all",
+      accentText: "text-emerald-400 font-serif",
+      accentBg: "bg-emerald-800 hover:bg-emerald-950 text-white border border-emerald-500/30 rounded px-6 py-2.5",
+      theme: "dark",
+      businessType: "Rechtsanwälte & Notare"
+    },
+    {
+      id: "09",
+      name: "Steuerberater Premium",
+      style: "Exklusiv & Diskret",
+      group: "Glassmorphismus",
+      layoutType: "Typ A", // Bento
+      colorScheme: "Deep Dark (Anthrazit & Gold)",
+      bgClass: "bg-slate-950 text-slate-100",
+      cardClass: "bg-white/[0.02] backdrop-blur-lg border border-white/[0.08] hover:border-amber-400/20 rounded-2xl",
+      accentText: "text-amber-400",
+      accentBg: "bg-amber-500 hover:bg-amber-600 text-zinc-950 rounded px-5 py-2.5 font-semibold",
+      theme: "dark",
+      businessType: "Steuerberatungskanzlei"
+    },
+    {
+      id: "10",
+      name: "Garten- & Landschaftsbau",
+      style: "Frisch & Modern",
+      group: "Glassmorphismus",
+      layoutType: "Typ C", // Magazin-Raster
+      colorScheme: "Clean Light (Weiß & Salbei-Grün)",
+      bgClass: "bg-[#F8FAF9] text-slate-800",
+      cardClass: "bg-white/70 backdrop-blur-md border border-emerald-100 hover:border-emerald-300 shadow-sm rounded-2xl",
+      accentText: "text-emerald-800",
+      accentBg: "bg-emerald-700 hover:bg-emerald-800 text-white rounded-full px-6 py-2.5",
+      theme: "light",
+      businessType: "Garten- & Landschaftsbau"
+    },
+    {
+      id: "16",
+      name: "Physiotherapie Praxis",
+      style: "Achtsam & Gesund",
+      group: "Glassmorphismus",
+      layoutType: "Typ C", // Magazin-Raster
+      colorScheme: "Clean Light (Weiß & Salbei-Grün)",
+      bgClass: "bg-slate-50 text-slate-800",
+      cardClass: "bg-white/60 backdrop-blur-xl border border-emerald-500/10 hover:border-emerald-500/20 rounded-3xl shadow-sm",
+      accentText: "text-emerald-700",
+      accentBg: "bg-emerald-600 hover:bg-emerald-700 text-white rounded-full",
+      theme: "light",
+      businessType: "Physiotherapie & Osteopathie"
+    },
+    {
+      id: "20",
+      name: "Malerbetrieb Farbenfroh",
+      style: "Kreativ & Präzise",
+      group: "Glassmorphismus",
+      layoutType: "Typ C", // Magazin-Raster
+      colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
+      bgClass: "bg-[#1E1E2E] text-zinc-100",
+      cardClass: "bg-slate-900/60 backdrop-blur-md border border-white/10 hover:border-orange-500/30 rounded-2xl",
+      accentText: "text-orange-400",
+      accentBg: "bg-orange-500 hover:bg-orange-600 text-white rounded-xl",
+      theme: "dark",
+      businessType: "Maler- & Lackiererbetrieb"
+    },
+
+    // --- GRUPPE 3: SAAS-MINIMALISMUS ---
+    {
+      id: "03",
+      name: "Solar & Photovoltaik",
+      style: "Tech & Zukunft",
+      group: "SaaS-Minimalismus",
+      layoutType: "Typ D", // Zentralisiertes Fokus-Layout
+      colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
+      bgClass: "bg-[#F9FAFB] text-zinc-900",
+      cardClass: "bg-white border border-zinc-200 hover:border-orange-500/30 rounded-xl shadow-sm",
+      accentText: "text-orange-600",
+      accentBg: "bg-orange-600 hover:bg-orange-700 text-white rounded-lg px-6 py-2.5",
+      theme: "light",
+      businessType: "Solartechnik & Energiesysteme"
+    },
+    {
+      id: "06",
+      name: "Sanitär & Heizung",
+      style: "Klar & Zuverlässig",
+      group: "SaaS-Minimalismus",
+      layoutType: "Typ A", // Bento
+      colorScheme: "Clean Light (Weiß & Navy-Blau)",
+      bgClass: "bg-white text-slate-800",
+      cardClass: "bg-white border border-slate-200 hover:border-blue-500/30 shadow-sm rounded-xl",
+      accentText: "text-blue-800",
+      accentBg: "bg-blue-800 hover:bg-blue-900 text-white rounded px-6 py-2.5",
+      theme: "light",
+      businessType: "Heizung, Sanitär & Klima"
+    },
+    {
+      id: "08",
+      name: "Schreinerei Holzart",
+      style: "Handwerk & Präzision",
+      group: "SaaS-Minimalismus",
+      layoutType: "Typ B", // Split-Screen
+      colorScheme: "Warm & Earthy (Sand-Töne & dunkles Holz)",
+      bgClass: "bg-[#FAF9F5] text-[#3D3A36]",
+      cardClass: "bg-white border border-[#EBE6DC] hover:border-[#8B5A2B]/40 rounded-lg shadow-sm",
+      accentText: "text-[#8B5A2B]",
+      accentBg: "bg-[#8B5A2B] hover:bg-[#6f4823] text-white rounded px-6 py-2.5",
+      theme: "light",
+      businessType: "Möbel- & Bauschreinerei"
+    },
+    {
+      id: "11",
+      name: "Modern Dentists Zahnarzt",
+      style: "Clean & Vertrauensvoll",
+      group: "SaaS-Minimalismus",
+      layoutType: "Typ D", // Zentralisiertes Fokus-Layout
+      colorScheme: "Clean Light (Weiß & Navy-Blau)",
+      bgClass: "bg-white text-slate-900",
+      cardClass: "bg-slate-50 border border-slate-200 hover:border-blue-700/30 shadow-sm rounded-xl",
+      accentText: "text-blue-700",
+      accentBg: "bg-blue-700 hover:bg-blue-800 text-white rounded-lg",
+      theme: "light",
+      businessType: "Zahnarztpraxis"
+    },
+    {
+      id: "15",
+      name: "Architekturbüro Struktur",
+      style: "Minimalismus & Ästhetik",
+      group: "SaaS-Minimalismus",
+      layoutType: "Typ C", // Magazin-Raster
+      colorScheme: "Clean Light (Weiß & Navy-Blau)",
+      bgClass: "bg-white text-zinc-900 border-blue-100", // Blueprint Grid
+      cardClass: "bg-white border border-zinc-200 hover:border-zinc-900 shadow-sm rounded-none",
+      accentText: "text-zinc-900",
+      accentBg: "bg-zinc-950 hover:bg-zinc-800 text-white rounded-none px-6 py-2.5",
+      theme: "light",
+      businessType: "Architektur & Generalplanung"
+    },
+    {
+      id: "19",
+      name: "Software-Entwicklung Byte",
+      style: "Sauber & Strukturiert",
+      group: "SaaS-Minimalismus",
+      layoutType: "Typ A", // Bento
+      colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
+      bgClass: "bg-[#1C1B22] text-zinc-100",
+      cardClass: "bg-[#25242A] border border-zinc-800 hover:border-purple-500/30 rounded-xl",
+      accentText: "text-purple-400",
+      accentBg: "bg-purple-600 hover:bg-purple-700 text-white rounded-lg",
+      theme: "dark",
+      businessType: "Software & Webanwendungen"
+    },
+
+    // --- GRUPPE 4: NEOMORPHISMUS ---
+    {
+      id: "05",
+      name: "Bio-Hofladen",
+      style: "Rustikal & Natur",
+      group: "Neomorphismus",
+      layoutType: "Typ C", // Magazin-Raster
+      colorScheme: "Warm & Earthy (Terrakotta & Creme)",
+      bgClass: "bg-[#FDFBF7] text-[#4A3B32]",
+      cardClass: "bg-[#FDFBF7] border border-transparent shadow-[inset_0_0_0_1px_rgba(255,255,255,0.6),_9px_9px_16px_rgba(163,177,198,0.2),_-9px_-9px_16px_rgba(255,255,255,0.7)] rounded-3xl",
+      accentText: "text-[#C2410C]",
+      accentBg: "bg-[#C2410C] hover:bg-[#a13307] text-white rounded-full px-6 py-2.5",
+      theme: "light",
+      businessType: "Bio-Bauernhof & Hofladen"
+    },
+    {
+      id: "12",
+      name: "Bäckerei Traditionsbäcker",
+      style: "Gemütlich & Lecker",
+      group: "Neomorphismus",
+      layoutType: "Typ B", // Split-Screen
+      colorScheme: "Warm & Earthy (Terrakotta & Creme)",
+      bgClass: "bg-[#FDFBF7] text-[#5C3E21]",
+      cardClass: "bg-[#FDFBF7] border border-transparent shadow-[inset_0_0_0_1px_rgba(255,255,255,0.6),_6px_6px_12px_rgba(163,177,198,0.15),_-6px_-6px_12px_rgba(255,255,255,0.75)] rounded-2xl",
+      accentText: "text-[#B45309]",
+      accentBg: "bg-[#B45309] hover:bg-[#92400E] text-white rounded-xl shadow-md",
+      theme: "light",
+      businessType: "Feinbäckerei & Konditorei"
+    },
+    {
+      id: "18",
+      name: "Restaurant & Gaststube",
+      style: "Rustikal & Einladend",
+      group: "Neomorphismus",
+      layoutType: "Typ A", // Bento
+      colorScheme: "Warm & Earthy (Sand-Töne & Dunkelbraun)",
+      bgClass: "bg-[#FAF6F0] text-[#543D2B]",
+      cardClass: "bg-[#FAF6F0] border border-transparent shadow-[inset_0_0_0_1px_rgba(255,255,255,0.5),_8px_8px_16px_rgba(0,0,0,0.03),_-8px_-8px_16px_rgba(255,255,255,0.8)] hover:shadow-inner rounded-3xl transition-all duration-300",
+      accentText: "text-[#A75D5D]",
+      accentBg: "bg-[#A75D5D] hover:bg-[#8B4C4C] text-white rounded-2xl",
+      theme: "light",
+      businessType: "Wirtshaus & Feinkost"
+    }
+  ];
+
+  return templates.map((tpl) => ({
+    params: { id: tpl.id },
+    props: { tpl }
+  }));
+}
+
+const { tpl } = Astro.props;
+---
+
+<Layout title={`${tpl.name} | Live-Vorschau`}>
+  {/* Header Frame control */}
+  <div class="fixed top-0 left-0 w-full bg-[#0b0f19]/90 backdrop-blur border-b border-white/10 py-3 z-50 text-white flex justify-between items-center px-4 sm:px-8">
+    <div class="flex items-center gap-3">
+      <a href="/templates" class="flex items-center gap-1 text-xs uppercase tracking-wider text-zinc-400 hover:text-brand-arcticBlue transition-colors font-bold">
+        <FaArrowLeft class="w-3 h-3" /> Zurück
+      </a>
+      <span class="text-zinc-600">|</span>
+      <div class="text-xs sm:text-sm font-semibold">
+        Design-Vorschau: <span class="text-brand-arcticBlue">{tpl.name}</span>
+      </div>
+    </div>
+    <div class="flex items-center gap-2">
+      <span class="text-[10px] uppercase font-mono px-2 py-0.5 bg-white/10 rounded">Gruppe: {tpl.group}</span>
+      <span class="text-[10px] uppercase font-mono px-2 py-0.5 bg-brand-arcticBlue/20 text-brand-arcticBlue rounded">{tpl.layoutType}</span>
+    </div>
+  </div>
+
+  {/* Outer Page Shell */}
+  <div class={`min-h-screen pt-20 pb-12 ${tpl.bgClass} ${tpl.name === "Architekturbüro Struktur" ? "tactile-grid-bg" : ""}`}>
+    
+    {/* Aurora Background glows for Glassmorphism group */}
+    {tpl.group === "Glassmorphismus" && (
+      <div class="absolute inset-0 pointer-events-none overflow-hidden z-0">
+        <div class="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-emerald-500/5 dark:bg-amber-500/5 blur-[120px] rounded-full"></div>
+        <div class="absolute top-1/2 right-1/4 w-[400px] h-[400px] bg-sky-500/5 dark:bg-blue-600/5 blur-[100px] rounded-full animate-pulse"></div>
+      </div>
+    )}
+
+    {/* Blueprint line grid overlay if Architekturbüro */}
+    {tpl.name === "Architekturbüro Struktur" && (
+      <div class="absolute inset-0 pointer-events-none border-t border-l border-blue-500/10 z-0"></div>
+    )}
+
+    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      
+      {/* 1. Header component */}
+      <header class={`py-6 px-8 mb-8 flex justify-between items-center rounded-2xl ${tpl.cardClass}`}>
+        <div class="font-extrabold text-xl uppercase tracking-tighter">
+          {tpl.businessType.split(' ')[0]} <span class={tpl.accentText}>MUSTERMANN</span>
+        </div>
+        <nav class="hidden md:flex gap-8 text-xs uppercase tracking-wider font-bold opacity-80">
+          <span class="cursor-pointer hover:opacity-100 transition-opacity">Leistungen</span>
+          <span class="cursor-pointer hover:opacity-100 transition-opacity">Über uns</span>
+          <span class="cursor-pointer hover:opacity-100 transition-opacity">Referenzen</span>
+        </nav>
+        <button class={`px-4 py-1.5 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
+          Kontakt
+        </button>
+      </header>
+
+      {/* 2. Main content area rendering based on Layout-Type */}
+      {tpl.layoutType === "Typ B" ? (
+        // Split-Screen & Monolith Layout (Sticky-Anchor-Cards)
+        <div class="grid grid-cols-1 lg:grid-cols-5 gap-8 items-start">
+          {/* Sticky left monolithen */}
+          <div class={`lg:col-span-2 lg:sticky lg:top-32 p-8 rounded-2xl ${tpl.cardClass}`}>
+            <span class={`text-[10px] font-mono font-bold uppercase tracking-widest ${tpl.accentText}`}>Regionaler Partner</span>
+            <h1 class="text-3xl sm:text-5xl font-black tracking-tight mt-2 mb-6 uppercase leading-tight">
+              Echtes Handwerk.<br/>Ohne Kompromisse.
+            </h1>
+            <p class="opacity-80 text-xs sm:text-sm leading-relaxed mb-8">
+              Wir setzen Ihre Projekte mit Leidenschaft und Fachverstand um. Seit über 25 Jahren stehen wir für absolute Zuverlässigkeit und präzise Meisterleistung in unserer Region.
+            </p>
+            <button class={`w-full py-3 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
+              Jetzt Termin anfragen
+            </button>
+          </div>
+          
+          {/* Scrollable right content */}
+          <div class="lg:col-span-3 space-y-8">
+            <div class={`p-8 rounded-2xl ${tpl.cardClass}`}>
+              <h3 class="text-xl font-bold mb-4">Schritt 01: Beratung vor Ort</h3>
+              <p class="opacity-75 text-xs sm:text-sm leading-relaxed">
+                Wir besprechen Ihr Vorhaben direkt vor Ort. Sie erhalten eine ehrliche Einschätzung sowie verständliche Optionen, die zu Ihren Wünschen passen.
+              </p>
+            </div>
+            <div class={`p-8 rounded-2xl ${tpl.cardClass}`}>
+              <h3 class="text-xl font-bold mb-4">Schritt 02: Transparente Planung</h3>
+              <p class="opacity-75 text-xs sm:text-sm leading-relaxed">
+                Unsere Angebote enthalten alle Kosten übersichtlich aufgeschlüsselt. Keine überraschenden Nachträge oder versteckten Extrakosten.
+              </p>
+            </div>
+            <div class={`p-8 rounded-2xl ${tpl.cardClass}`}>
+              <h3 class="text-xl font-bold mb-4">Schritt 03: Saubere Ausführung</h3>
+              <p class="opacity-75 text-xs sm:text-sm leading-relaxed">
+                Wir arbeiten zügig, ordentlich und termingerecht. Nach Projektabschluss übergeben wir Ihren Arbeitsbereich besenrein.
+              </p>
+            </div>
+            
+            {/* Rhythmusbrecher (Text-Slam) */}
+            <div class="p-12 bg-zinc-950 text-white rounded-2xl text-center border border-zinc-800">
+              <h4 class="text-3xl font-extrabold mb-2 text-white">EIN WORT. EIN WERT.</h4>
+              <p class="text-xs text-zinc-400 max-w-sm mx-auto">100% verlässliche Handwerksqualität direkt aus Meisterhand.</p>
+            </div>
+          </div>
+        </div>
+      ) : tpl.layoutType === "Typ A" ? (
+        // Asymmetrisches Bento Grid
+        <div class="space-y-8">
+          <div class="max-w-xl">
+            <h1 class="text-3xl sm:text-5xl font-black uppercase tracking-tight mb-4">
+              Ihr Meisterbetrieb für <span class={tpl.accentText}>{tpl.businessType.split(' ')[0]}</span>
+            </h1>
+          </div>
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div class={`md:col-span-2 p-8 rounded-2xl ${tpl.cardClass} flex flex-col justify-between min-h-[220px]`}>
+              <div>
+                <h3 class="text-2xl font-bold mb-2">Unsere Arbeitsweise</h3>
+                <p class="opacity-75 text-xs leading-relaxed max-w-md">
+                  Wir verbinden traditionelle Fertigkeiten mit moderner Technik, um langlebige und ästhetisch anspruchsvolle Lösungen für Ihren Betrieb zu garantieren.
+                </p>
+              </div>
+              <div class="mt-4">
+                <button class={`px-5 py-2.5 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
+                  Konzept besprechen
+                </button>
+              </div>
+            </div>
+            
+            <div class={`p-8 rounded-2xl ${tpl.cardClass} flex flex-col justify-between`}>
+              <div class="text-3xl font-black opacity-80">DEUTSCHER MEISTER</div>
+              <p class="text-xs opacity-75 mt-2">Garantiert geprüftes Fachwissen und höchste Qualifikation.</p>
+            </div>
+            
+            <div class={`p-8 rounded-2xl ${tpl.cardClass} flex flex-col justify-between`}>
+              <div class="text-3xl font-black opacity-80">> 95%</div>
+              <p class="text-xs opacity-75 mt-2">Zuverlässigkeitsquote bei Terminen und Fertigstellungen.</p>
+            </div>
+            
+            <div class={`md:col-span-2 p-8 rounded-2xl ${tpl.cardClass}`}>
+              <h3 class="text-xl font-bold mb-4">Individuelle Sonderanfertigungen</h3>
+              <p class="opacity-75 text-xs sm:text-sm leading-relaxed">
+                Planung nach Maß: Wir fertigen für Sie genau das an, was Sie benötigen. Jedes Stück ist ein Unikat, handwerklich präzise nach Ihren Vorstellungen gearbeitet.
+              </p>
+            </div>
+          </div>
+        </div>
+      ) : tpl.layoutType === "Typ C" ? (
+        // Magazin-Raster (Asymmetrischer Whitespace & Überlappung)
+        <div class="space-y-16">
+          <div class="grid grid-cols-1 lg:grid-cols-5 gap-12 items-center">
+            <div class="lg:col-span-3">
+              <h1 class="text-4xl sm:text-6xl font-extrabold tracking-tighter leading-tight mb-8">
+                Räume neu <span class={tpl.accentText}>denken.</span>
+              </h1>
+              <p class="opacity-80 text-sm sm:text-base leading-relaxed mb-8 max-w-lg">
+                Wir konzipieren anspruchsvolle, nachhaltige Projekte, die Ästhetik und Nutzbarkeit perfekt vereinen. Ein Zusammenspiel aus Form, Material und Funktion.
+              </p>
+              <button class={`px-6 py-3 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
+                Portfolio ansehen
+              </button>
+            </div>
+            <div class="lg:col-span-2 -mt-6">
+              <div class={`p-8 rounded-2xl ${tpl.cardClass} -translate-y-4 hover:translate-y-0 transition-transform duration-300`}>
+                <h4 class="font-extrabold text-lg mb-2 uppercase">[ 01 ] Entwurf</h4>
+                <p class="opacity-75 text-xs">Individuelle Konzepte & 3D-Visualisierung.</p>
+              </div>
+              <div class={`p-8 rounded-2xl ${tpl.cardClass} translate-x-4 hover:translate-x-0 transition-transform duration-300`}>
+                <h4 class="font-extrabold text-lg mb-2 uppercase">[ 02 ] Konstruktion</h4>
+                <p class="opacity-75 text-xs">Exakte Planung und statische Berechnungen.</p>
+              </div>
+            </div>
+          </div>
+          
+          {/* Whitespace-Pause (Atem-Pause / pure Leerraum-Monolith) */}
+          <div class="py-24 text-center border-t border-b border-current/10">
+            <span class="text-xs uppercase tracking-widest opacity-40">Ausgezeichnetes Handwerk</span>
+            <div class="text-4xl font-black mt-2 uppercase tracking-widest opacity-80">PRÄZISION & MEISTERSCHAFT</div>
+          </div>
+        </div>
+      ) : (
+        // Typ D: Zentralisiertes Fokus-Layout (Kalkulator-Dummy oder radialer Fokus)
+        <div class="flex flex-col items-center justify-center py-12">
+          <div class="text-center max-w-xl mb-12">
+            <span class={`text-xs font-mono font-bold uppercase tracking-widest ${tpl.accentText}`}>{tpl.businessType}</span>
+            <h1 class="text-4xl sm:text-5xl font-black uppercase tracking-tight mt-2 mb-4">Direkt kalkulieren.</h1>
+            <p class="opacity-75 text-xs sm:text-sm">Ermitteln Sie Ihren Bedarf schnell und unverbindlich in nur wenigen Schritten.</p>
+          </div>
+          
+          {/* The centralized Calculator Block (Monolith) */}
+          <div class={`w-full max-w-xl p-8 rounded-3xl ${tpl.cardClass} relative overflow-hidden shadow-2xl z-20`}>
+            {tpl.group === "Glassmorphismus" && (
+              <div class="absolute inset-0 bg-white/[0.01] pointer-events-none rounded-3xl"></div>
+            )}
+            
+            <h3 class="text-lg font-bold mb-6 border-b border-current/10 pb-4">Bedarfs-Rechner</h3>
+            <div class="space-y-4">
+              <div>
+                <label class="block text-[10px] font-bold uppercase opacity-60 mb-2">Projekt-Fläche (ca. m²)</label>
+                <input type="range" min="10" max="500" value="120" class="w-full h-1 bg-current/10 rounded-lg appearance-none cursor-pointer" />
+                <div class="flex justify-between text-xs font-bold mt-2 opacity-80">
+                  <span>10 m²</span>
+                  <span class={tpl.accentText}>120 m²</span>
+                  <span>500 m²</span>
+                </div>
+              </div>
+              <div class="pt-4">
+                <label class="block text-[10px] font-bold uppercase opacity-60 mb-2">Dienstleistung</label>
+                <select class="w-full bg-current/5 border border-current/20 rounded p-2 text-xs focus:outline-none focus:border-current">
+                  <option>Komplettmontage & Service</option>
+                  <option>Nur Lieferung & Zuschnitt</option>
+                  <option>Wartung & Reparatur</option>
+                </select>
+              </div>
+              
+              <div class="bg-current/5 p-4 rounded-xl mt-6 border border-current/10 text-center">
+                <div class="text-[10px] uppercase font-bold opacity-60">Voraussichtliches Budget</div>
+                <div class="text-3xl font-black mt-1 uppercase tracking-tight">~ 2.450 €</div>
+                <div class="text-[9px] opacity-50 mt-1">Unverbindlicher Richtpreis inkl. MwSt.</div>
+              </div>
+              
+              <button class={`w-full py-3 mt-4 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
+                Ergebnis absenden & anfragen
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 3. Features Section (Grounded Handwerker-Werte) */}
+      <section class="border-t border-current/10 py-16 mt-16">
+        <div class="grid grid-cols-1 sm:grid-cols-3 gap-8">
+          <div class="space-y-2">
+            <div class={`font-mono font-bold text-lg ${tpl.accentText}`}>[ 01 ] Festpreis-Garantie</div>
+            <p class="opacity-70 text-xs leading-relaxed">Wir halten uns an vereinbarte Angebote. Keine überraschenden Mehrkosten oder Nachkalkulationen.</p>
+          </div>
+          <div class="space-y-2">
+            <div class={`font-mono font-bold text-lg ${tpl.accentText}`}>[ 02 ] Meisterqualität</div>
+            <p class="opacity-70 text-xs leading-relaxed">Alle Arbeiten werden nach offiziellen Richtlinien und handwerklichen Normen sorgfältig ausgeführt.</p>
+          </div>
+          <div class="space-y-2">
+            <div class={`font-mono font-bold text-lg ${tpl.accentText}`}>[ 03 ] Betreuung vor Ort</div>
+            <p class="opacity-70 text-xs leading-relaxed">Ein Ansprechpartner für Ihr gesamtes Vorhaben. Direkt ansprechbar und verlässlich.</p>
+          </div>
+        </div>
+      </section>
+
+      {/* 4. Mock Contact Form */}
+      <section class="border-t border-current/10 py-16">
+        <div class="max-w-xl mx-auto text-center mb-8">
+          <h2 class="text-2xl sm:text-3xl font-extrabold uppercase tracking-tight">Projekt anfragen</h2>
+          <p class="opacity-70 text-xs mt-2">Tragen Sie Ihr Vorhaben kurz ein. Wir antworten werktags innerhalb von 24 Stunden.</p>
+        </div>
+        <form class="max-w-md mx-auto space-y-4" onsubmit="event.preventDefault()">
+          <div>
+            <label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihr Name</label>
+            <input type="text" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
+          </div>
+          <div>
+            <label class="block text-[10px] font-bold uppercase opacity-60 mb-1">E-Mail-Adresse</label>
+            <input type="email" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
+          </div>
+          <div>
+            <label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihr Vorhaben / Nachricht</label>
+            <textarea rows="3" required class="w-full bg-[#1b1b26]/0 bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current resize-none"></textarea>
+          </div>
+          <button type="submit" class={`w-full py-2.5 rounded text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
+            Anfrage Senden
+          </button>
+        </form>
+      </section>
+
+    </div>
+
+  </div>
+
+  <Footer />
+</Layout>

tailwind.config.mjs

@@ -6,11 +6,11 @@ export default {
 		extend: {
 			colors: {
 				brand: {
-					primary: '#0a0a0a',
-					cyan: '#00e5ff',
-					magenta: '#ff00ff',
-					darkBg: '#111111',
-					lightBg: '#f9fafb',
+					darkBg: '#0b0f19',
+					darkCard: '#151b2c',
+					darkBorder: '#232d45',
+					arcticBlue: '#38bdf8',
+					lightText: '#f4f4f5',
 				}
 			}
 		},