183 lines
9.4 KiB
Markdown
183 lines
9.4 KiB
Markdown
---
|
||
name: waas-guide
|
||
description: Leitfaden fuer High-End-Webdesign (Bento-Grid), Conversion-Optimierung, DSGVO-Haertung und WaaS-B2B-Vertrieb.
|
||
---
|
||
|
||
# N&D IT Solutions: WaaS-Erweiterungsstrategie
|
||
|
||
## SÄULE 1: Branchenspezifische Design-Strategien & Bento-Layouts
|
||
|
||
### 1. Lokales Premium-Handwerk (Innenausbau, Solarteure)
|
||
* **Farbpsychologie:**
|
||
* Hintergrund: `#0B0F19` (Corporate Dark Mode)
|
||
* Sekundärfarbe: Warmbronze (`hsl(35, 35%, 45%)` / `#9C7A4E`)
|
||
* Akzentfarbe: Kupfer-Glow (`hsl(20, 70%, 55%)` / `#DE6B32`)
|
||
* Wirkung: Vermittelt Hitze, Energie, präzise Handwerksqualität und Wertigkeit.
|
||
* **Branchenspezifische Eye-Catcher:**
|
||
* *Tactile Craftsman UI:* Subtiles SVG-Rauschen über radialen Verläufen simuliert physikalische Oberflächen (z. B. geschliffenes Holz/Metall).
|
||
* *Kanten-Effekt:* Lichtkanten via `border-[0.5px] border-amber-900/30` und diffuse Schatten (`box-shadow: 0 0 25px -5px rgba(222, 107, 50, 0.15)`).
|
||
* **Bento-Layout-Struktur (3-Säulen-Grid):**
|
||
* *Säule 1:* Box 1 (Hero-Statement, col-span-2) | Box 2 (Vorher-Nachher Slider, col-span-1)
|
||
* *Säule 2:* Box 3 (Material-Galerie, col-span-1) | Box 4 (Rhythmusbrecher: Übergroßes, asymmetrisches Textzitat "Maßarbeit statt Masse." mit 20% Opacity Kupfer-Glow im Hintergrund, col-span-2)
|
||
* *Säule 3:* Box 5 (Festpreis-Garantie, col-span-1) | Box 6 (Kontakt-Schnittstelle, col-span-2)
|
||
|
||
### 2. Medizinische Praxen & Kanzleien (Rechtsanwälte, High-End-Zahnärzte)
|
||
* **Farbpsychologie:**
|
||
* Hintergrund: `#0B0F19`
|
||
* Sekundärfarbe: Tiefes Smaragdgrün (`hsl(160, 40%, 25%)` / `#265C45`)
|
||
* Akzentfarbe: Arktis-Blau (`hsl(199, 95%, 74%)` / `#7DD3FC`)
|
||
* Wirkung: Signalisiert beruhigende Professionalität, Hygiene, absolute Diskretion und Vertrauen.
|
||
* **Branchenspezifische Eye-Catcher:**
|
||
* *Liquid Glass:* Extreme Transparenz (`backdrop-blur-xl bg-slate-900/60`).
|
||
* *Kanten-Reflexion:* Dünner, linearer Randverlauf (`border-[0.5px] border-white/10`) ohne Textur für sterile Ästhetik.
|
||
* **Bento-Layout-Struktur (3-Säulen-Grid):**
|
||
* *Säule 1:* Box 1 (H1 Expertise-Statement, col-span-2) | Box 2 (Direktbuchungs-Terminkalender, col-span-1)
|
||
* *Säule 2:* Box 3 (Rhythmusbrecher: Kreisförmige Foto-Maske des Inhabers bricht eckiges Grid, col-span-1) | Box 4 (Fachgebiete & Kernkompetenzen, col-span-2)
|
||
* *Säule 3:* Box 5 (Datenschutz-Zertifikat, col-span-1) | Box 6 (FAQ-Akkordeon, col-span-2)
|
||
|
||
### 3. Lokale Premium-Dienstleister (Boutique-Fitness, Agenturen)
|
||
* **Farbpsychologie:**
|
||
* Hintergrund: `#0B0F19`
|
||
* Sekundärfarbe: Muted Violett (`hsl(270, 30%, 35%)` / `#533C6F`)
|
||
* Akzentfarbe: Neon-Cyan-Glow (`hsl(180, 100%, 50%)` / `#00FFFF`)
|
||
* Wirkung: Vermittelt Exklusivität, hohe Dynamik, Luxus und Modernität.
|
||
* **Branchenspezifische Eye-Catcher:**
|
||
* *Aurora Glow:* Animierte, extrem weiche Glow-Verläufe im Hintergrund (`animate-pulse-slow` mit max. 10% Deckkraft).
|
||
* *Hover-Glow:* Kanten leuchten interaktiv bei Mausbewegung (CSS-Radialgradient-Border).
|
||
* **Bento-Layout-Struktur (3-Säulen-Grid):**
|
||
* *Säule 1:* Box 1 (Visual Hero, col-span-2) | Box 2 (Mitgliedschafts-Modell, col-span-1)
|
||
* *Säule 2:* Box 3 (Kundenvorteile, col-span-1) | Box 4 (Rhythmusbrecher: Dynamisch blinkende Live-Auslastungs-Anzeige, col-span-2)
|
||
* *Säule 3:* Box 5 (Social Proof / Testimonials, col-span-2) | Box 6 (Kontakt, col-span-1)
|
||
|
||
---
|
||
|
||
## SÄULE 2: UI/UX & Verkaufspsychologie (Conversion-Driven UX)
|
||
|
||
### 1. Wizard-Optimierung (Absprungrate reduzieren bei Schritt 3)
|
||
* **Sorgenfrei-Versprechen (Mikro-Copy):** Direkt über dem E-Mail-/Telefon-Eingabefeld Platzierung von: *"Kein Spam. Kein Telefonterror. Nur Ihr fertiges Design-Konzept innerhalb von 24 Stunden."*
|
||
* **Fortschrittserhalt:** Visuelle Anzeige, dass die Daten aus Schritt 1 & 2 bereits lokal gesichert sind und das Konzept reserviert ist.
|
||
* **Alternative Interaktionswege:** Biete dem Nutzer neben dem Formular einen direkten WhatsApp-Short-Link an, der den Wizard-Fortschritt verschlüsselt als Text vorausfüllt.
|
||
|
||
### 2. Bento-Interaction-States (Barrierefrei & CLS-frei)
|
||
* Keine Änderungen an Layout-Größen (`width`, `height`, `padding`, `border-width`), da diese Layout-Shifts (CLS) triggern.
|
||
* Ausschließliche Nutzung von Hardware-beschleunigten CSS-Eigenschaften (`transform`, `opacity`, `box-shadow`, `border-color`).
|
||
* Tastatur-Navigation: `:focus-visible` repliziert die Hover-Glow-Stile exakt.
|
||
|
||
```css
|
||
.bento-card {
|
||
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease;
|
||
outline: none;
|
||
}
|
||
.bento-card:hover, .bento-card:focus-visible {
|
||
transform: translateY(-4px) scale(1.01);
|
||
border-color: rgba(56, 189, 248, 0.4);
|
||
box-shadow: 0 10px 30px -10px rgba(56, 189, 248, 0.2);
|
||
}
|
||
```
|
||
|
||
### 3. White-Space-Asymmetry (Preise im Fokus)
|
||
* **Freiraum-Kontrast:** Die WaaS-Preise erhalten die 2,5-fache vertikale Polsterung (`py-28`) im Vergleich zu restlichen Inhaltsabschnitten (`py-12`).
|
||
* **Asymmetrische Anordnung:** Platzierung der Preiskarten auf der linken Seite des Grids (2/3-Breite), während rechts freie, ununterbrochene Leere herrscht, die lediglich durch einen minimalen Arktis-Blau-Glow (z-0, 5% Opacity) akzentuiert wird. Dies lenkt den Blickpfad unweigerlich auf das Pricing.
|
||
|
||
---
|
||
|
||
## SÄULE 3: Datenschutz & Performance (Security-Hardening-Privacy)
|
||
|
||
### 1. DSGVO-Marketing-Textierung für KMUs
|
||
```html
|
||
<section class="py-20 bg-[#0B0F19] text-white">
|
||
<div class="max-w-5xl mx-auto px-6">
|
||
<span class="text-xs uppercase tracking-widest text-[#38BDF8] font-bold">100% Abmahnsicher</span>
|
||
<h2 class="text-3xl font-extrabold mt-2 mb-6">Keine Abmahnfallen. Keine US-Server. Maximaler Datenschutz.</h2>
|
||
<div class="grid md:grid-cols-2 gap-8">
|
||
<div>
|
||
<p class="text-slate-300 leading-relaxed">
|
||
Herkömmliche Baukasten-Websites laden Schriftarten, Icons und Analysedienste unbemerkt von US-Servern (Google, Adobe etc.). Das ist illegal nach DSGVO und führt zu teuren Abmahnungen.
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p class="text-slate-300 leading-relaxed">
|
||
Unsere statische Astro-Architektur liefert <strong>alles lokal</strong> aus Ihrem eigenen Webspace aus. Keine unbemerkt geladenen Fremddienste, keine zustimmungspflichtigen Tracking-Cookies, kein Ärger. Nur reine Performance und absolute Rechtssicherheit.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
```
|
||
|
||
### 2. Code-Härtung (Standard-Security-Header)
|
||
* **Content Security Policy (CSP):**
|
||
```http
|
||
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; frame-ancestors 'none'; upgrade-insecure-requests;
|
||
```
|
||
* **Sicherheitsrelevante HTTP-Response-Header:**
|
||
* `X-Frame-Options: DENY` (Verhindert Clickjacking-Angriffe)
|
||
* `X-Content-Type-Options: nosniff` (Verhindert MIME-Sniffing)
|
||
* `Referrer-Policy: strict-origin-when-cross-origin`
|
||
* `Permissions-Policy: geolocation=(), camera=(), microphone=()`
|
||
|
||
---
|
||
|
||
## SÄULE 4: B2B-Vertrieb & WaaS-Skalierung
|
||
|
||
### 1. WaaS-Einwandvorwegnahme (Argumentationskette)
|
||
* **Die Leasing-Analogie:** *"Sie kaufen für Ihren Betrieb keinen Firmenwagen bar für 60.000 €, der nach vier Jahren veraltet ist. Sie leasen ihn inklusive Full-Service. WaaS ist das Leasing-Modell für Ihre Website."*
|
||
* **Finanzielle Optimierung:** *Einmalkauf (3.000 €) blockiert Ihre Liquidität und muss über Jahre abgeschrieben werden. WaaS (99 €/Monat) ist sofort zu 100% als Betriebsausgabe steuerlich absetzbar. Hosting und Wartung sind bereits integriert (Ersparnis: ~70 €/Monat).*
|
||
* **Die Veraltungs-Garantie:** *Websites altern rasant. Bei unserem WaaS-Modell erhalten Sie nach 24 Monaten Laufzeit einen vollständigen visuellen und technischen Relaunch Ihrer Seite – komplett kostenfrei.*
|
||
|
||
### 2. KI-Automatisierungs-Schnittstelle (JSON Payload für MDX-Erstellung)
|
||
Das nachfolgende JSON-Format wird vom Onboarding-Wizard generiert und per Webhook an die KI-Pipeline gesendet, um die Astro MDX Content Collections automatisch zu strukturieren:
|
||
|
||
```json
|
||
{
|
||
"client_metadata": {
|
||
"agency_id": "nd-it-solutions",
|
||
"timestamp": "2026-07-18T23:31:00Z",
|
||
"domain": "innenausbau-schmidt.de"
|
||
},
|
||
"branding": {
|
||
"industry": "craftsman",
|
||
"company_name": "Schreinerei Schmidt",
|
||
"branding_style": "minimal-dark",
|
||
"primary_color": "hsl(35, 35%, 45%)",
|
||
"secondary_color": "hsl(20, 70%, 55%)"
|
||
},
|
||
"structure": {
|
||
"sections": ["hero", "bento-portfolio", "roi-calculator", "gdpr-trust", "contact-form"],
|
||
"features": {
|
||
"before_after_slider": true,
|
||
"online_calendar": false,
|
||
"custom_calculator": "roi"
|
||
}
|
||
},
|
||
"content_data": {
|
||
"usps": [
|
||
"30 Jahre Meisterbetrieb",
|
||
"Festpreisgarantie vor Baubeginn",
|
||
"Staubfreie Montage"
|
||
],
|
||
"services": [
|
||
{
|
||
"title": "Edler Innenausbau",
|
||
"description": "Individuelle Raumkonzepte für Küche und Wohnbereich."
|
||
},
|
||
{
|
||
"title": "Möbel nach Maß",
|
||
"description": "Unikate aus Meisterhand, perfekt angepasst."
|
||
}
|
||
],
|
||
"testimonials": [
|
||
{
|
||
"author": "M. Weber",
|
||
"quote": "Beste Entscheidung! Der Umbau war absolut staubfrei."
|
||
}
|
||
]
|
||
},
|
||
"contact": {
|
||
"phone": "+49 123 456789",
|
||
"email": "info@innenausbau-schmidt.de",
|
||
"address": "Hauptstraße 42, 80331 München"
|
||
}
|
||
}
|
||
```
|