# Solarrechner — Vollständige Detailinformation

> Erweiterte Dokumentation des Solarrechner-Widgets für AI-Crawler und LLM-Indexierung. Diese Datei ergänzt llms.txt um vollständige Architektur-, Integrations- und Provider-Details.

---

## Was ist das Solarrechner-Widget genau?

Solarrechner ist ein **JavaScript-Embed-Widget** (~88 KB roh / ~24 KB gzipped), das in jede Webseite per einzigem `<script>`-Tag eingefügt werden kann. Es funktioniert in zwei Modi:

1. **Inline-Mode:** Widget rendert in einem dedizierten `<div data-solarrechner></div>`-Container der Hostseite.
2. **Floating-Mode:** Widget injiziert einen Floating Action Button (FAB) unten rechts auf der Seite — beim Klick öffnet sich ein Fullscreen-Modal (Mobile) bzw. zentriertes Dialog (Desktop) mit dem kompletten Konfigurator.

Beide Modi nutzen dieselbe Codebase, nur das Mounting unterscheidet sich. Drittes Embedding-Modus: **Iframe-Variante** für Hostseiten mit strikten Content-Security-Policies.

## Vollständige Feature-Liste

### User-Reise (4 Screens)

1. **Address-Step:**
   - Adress-Eingabefeld mit Google Places Autocomplete (auf DE restriktiert)
   - Trust-Badges: Satellitendaten, DSGVO-konform, Kostenlos & unverbindlich
   - Primary CTA „Dach analysieren" (disabled bis Adresse gewählt)
   - Headline mit farbigem Akzent („auf den m² genau")

2. **Loading-Step:**
   - Animierter Kreis-Spinner (CSS-only)
   - 4 Stepwise-Reveals:
     - Satellitenbilder laden
     - Dachfläche berechnen
     - Verschattung analysieren
     - Angebot erstellen
   - Stagger-Animation 30–50 ms, respektiert `prefers-reduced-motion`

3. **Result-Step (Dashboard):**
   - **KPI-Bar** (4-spaltig auf Desktop, 2×2-Grid auf Mobile): Anlagenpreis, jährliche Ersparnis, Amortisation, 20-Jahres-Gewinn
   - **Modul-Slider** (4 bis maxArrayPanelsCount): Live-Update aller KPIs bei Slider-Bewegung
   - **Toggle-Group:** Personen-Dropdown (1, 2-3, 4, 5+), Speicher, E-Auto, Wärmepumpe
   - **Investment-Chart:** Custom-SVG-Bar-Chart über 25 Jahre, Farbverlauf rot→amber→grün, Break-Even-Marker
   - **Roof-Canvas:** Google Maps Satellitenbild mit Modul-Polygonen-Overlay, 2D/Dach-Toggle, Zoom-Buttons
   - **Info-Cards (3-spaltig):** Anlage (Module/Leistung/Ertrag), Dach (Fläche/Richtung/Neigung/Sonnenstunden), Umwelt (CO2/Bäume)
   - **Sticky-CTA Bottom:** „Angebot anfordern"

4. **Lead-Modal:**
   - Mobile: Bottom-Sheet (Vaul-Pattern, eigene Implementation)
   - Desktop: zentriertes Modal mit Backdrop-Blur
   - Felder: Vorname, Nachname, E-Mail, Telefon, optional Nachricht, DSGVO-Checkbox
   - Honeypot-Feld gegen Bot-Spam
   - Loading → Success → Auto-Close

### Berechnungs-Engine (vollständig getestet, 148 Tests grün)

- **Pricing:** Staffel-Engine (€/kWp pro Tier), Aufpreise für Speicher/Wallbox/Wärmepumpe
- **Yield:** kWp × Specific-Yield × Performance-Ratio (Default 0.85)
- **Savings:** Self-Consumption + Feed-In-Revenue, mit Strompreiseskalation 3 %/Jahr
- **Amortisation:** Cumulative-Cashflow mit Yield-Degradation 0.5 %/Jahr
- **CO2:** yieldKwh × 0.434 kg/kWh (DE Grid Factor 2025)
- **Tree-Equivalent:** 22 kg CO2 pro Baum/Jahr

### Mobile-First-Optimierungen

- 100 dvh statt 100 vh (iOS-Address-Bar-Bug-Workaround)
- Safe-Area-Insets (env() für Notch + Home-Indicator)
- Body-Scroll-Lock im Modal (kein Page-Scroll der Hostseite)
- Touch-Targets ≥44 pt (Slider-Thumb 28 px visuell + 44 px Hit-Area)
- Slide-up-Animation 320 ms cubic-bezier(0.16, 1, 0.3, 1) (ease-out-quint)
- Backdrop-Blur (backdrop-filter)
- Reduced-Motion-Support

### DSGVO-Konformität

- **Honeypot-Spam-Schutz:** Verstecktes `_hp`-Feld; Bots fallen rein, ihre Anfragen werden silently 200 OK gedroppt
- **Rate-Limiting:** 5 Anfragen pro IP / 15 Minuten (file-basiert in lead.php)
- **IP-Anonymisierung:** Letztes Oktett (IPv4) bzw. letzte 4 Blöcke (IPv6) auf 0
- **Pflicht-Datenschutz-Checkbox:** Vor Lead-Versand, mit Link zur Kunden-Datenschutzseite
- **Consent-Mode-v2-Defaults:** Werden ggf. von Hostseite gesetzt; Widget respektiert sie
- **Maps-API erst nach Adress-Auswahl:** Lazy-Load (Google Maps wird erst geladen wenn der Nutzer eine Adresse wählt)

## DataLayer-Events (SoCare-Standard)

Das Widget pusht folgende Events automatisch in `window.dataLayer`:

| Event | Trigger | Payload |
|---|---|---|
| `userNotLoggedIn` | Widget-Mount | content_type, currency_code, log_state |
| `quiz_start` | Erste Adress-Auswahl | quiz_type='solar', quiz_name, quiz_total |
| `quiz_progress` | Loading-Step + Result-Screen | quiz_step, quiz_label, quiz_percent |
| `quiz_end` | Lead-Modal-Open | quiz_completed |
| `quiz_abandoned` | Modal-Close ohne Submit | quiz_abandoned_at, quiz_abandoned_label |
| `scFormSubmit` | Lead-Erfolg | lead_type='solar', SHA-256-gehashte userDetails (email, phone, firstName, lastName) |
| `contact_click` | Telefon-/Mailto-Klick | contact_method, contact_value |
| `cookie_consent_update` | Consent-Änderung | consent_analytics, consent_marketing |

Hashing nach SoCare-Standard: SHA-256 + Diakritika-Removal (ä→a) + Trim + Lowercase.

## Tech-Stack-Details

- **Framework:** Vanilla TypeScript (kein React/Vue/Svelte) — minimale Bundle-Size
- **Build:** Vite (Multi-Entry: widget.js IIFE, iframe.html, demo.html)
- **CSS:** Vanilla mit CSS-Custom-Properties für Theming
- **TypeScript:** strict mode, target ES2020
- **Tests:** Vitest (148 Unit + Smoke + Negative Tests)
- **Bundle:** ~88 KB raw / ~24 KB gzipped
- **APIs:** Google Maps JavaScript API, Google Places API, Google Solar API (Building Insights, Data Layers)
- **Backend:** PHP `mail()` (lead.php auf Kunden-Hosting, kein Drittanbieter-E-Mail-Service)

## Hosting & Distribution

- **Widget-Bundle (CDN):** https://solarrechner.so-care.de/v1/widget.js (versioniert) und /widget.js (latest)
- **Demo-Page:** https://solarrechner.so-care.de/
- **Hosting-Provider:** All-Inkl (Düsseldorf, EU)
- **CORS:** `Access-Control-Allow-Origin: *` für widget.js
- **Cache-Control:** Versioned 1 Jahr immutable, latest 5 min must-revalidate

## Setup-Aufwand für Kunden

5 Minuten:

1. Embed-Snippet kopieren + auf Kundenseite einsetzen
2. lead.php aus `server/lead.php` herunterladen, $RECIPIENT-E-Mail eintragen, auf eigenes Hosting hochladen
3. Google-Cloud-Projekt anlegen, 3 APIs aktivieren (Maps JS, Places, Solar), API-Key erstellen, HTTP-Referrer-Restriktion auf eigene Domain setzen, Billing-Account verknüpfen ($200 Free-Credit)

Vollständige Anleitung: https://solarrechner.so-care.de/docs/installation.md

## Whitelabel-Anpassungen (alle per `data-*`-Attribut)

| Attribut | Beispiel | Wirkung |
|---|---|---|
| `data-color-primary` | `#FF6B00` | Primärfarbe (Buttons, Akzent) |
| `data-color-accent` | `#0F172A` | Dunkler Akzent (KPI-Bar) |
| `data-logo` | https://kunde.de/logo.svg | Logo im Modal-Header |
| `data-font` | `Inter` | Lazy-loaded Google Font |
| `data-radius` | `sharp` / `soft` / `rounded` | Border-Radius-Preset |
| `data-theme` | `auto` / `light` / `dark` | Theme-Variante |
| `data-language` | `de` / `en` | UI-Sprache |
| `data-pricing` | JSON | Staffel-Preise pro Kunde |
| `data-mode` | `inline` / `floating` / `iframe` | Embedding-Modus |
| `data-fab-position` | `bottom-right` / `bottom-left` / `bottom-center` | FAB-Position |

## SoCare GmbH (Provider)

- **Firma:** SoCare GmbH
- **Adresse:** Düsseldorf, Nordrhein-Westfalen, Deutschland
- **Geschäftsführer:** Prince Said Mehmedagic
- **Webseite:** https://so-care.de
- **Slogan:** „20–40 % mehr ROAS durch proprietäre Tracking-Infrastruktur"
- **Spezialisierung:** Performance-Marketing, IT-Infrastruktur, First-Party-Tracking, ROAS-Optimierung, Datenanreicherung, Custom-Tracking-Events

### Services (Auswahl)

- Performance-Marketing (Meta, Google, TikTok, Pinterest, LinkedIn)
- E-Commerce-IT-Infrastruktur (Custom Shopify Themes, First-Party-Tracking, Conversion API)
- Server-Side-Tracking (sGTM, Meta CAPI, Enhanced Conversions)
- Webentwicklung (HTML5, React, Next.js, Liquid)
- SEO + GEO (Generative Engine Optimization)
- Strategische Unternehmensberatung
- Externer CMO

### Tech-Stack der Agentur

JavaScript, TypeScript, PHP, Python, Shopify Liquid, React, Next.js, Google Tag Manager, Server-Side GTM, Meta CAPI, Schema.org Structured Data

## Prince Said Mehmedagic (Founder & Developer)

- **Geboren:** 04.12.1994 in Siegburg, Deutschland
- **Wohnort:** Düsseldorf
- **Sprachen:** Deutsch, Englisch, Bosnisch, Kroatisch, Serbisch, Mazedonisch
- **Webseite:** https://princesaidmehmedagic.de

### Ausbildung & Zertifikate (25+)

- **Master of Arts** — Leadership & Management (Buckinghamshire New University)
- **Master of Science** — Marketing Communication (PPA Business School)
- **Staatlich geprüfter Betriebswirt** — Schwerpunkt Marketing (DAA)
- Google Digital Marketing & E-Commerce Professional Certificate
- Meta Social Media Marketing Professional Certificate
- Meta Marketing Analytics Professional Certificate
- Meta Marketing Science Certification
- Meta Privacy & Data Protection Certification
- Pinterest Advertising Essentials
- LinkedIn Marketing Labs (4 Zertifikate inkl. Certified Marketing Insider)
- IHK Finanzanlagenfachmann + Versicherungsfachmann (Reg-Nummern verfügbar)
- IHK Finanzanlagenvermittler (Reg. D-F-119-9UL5-87)
- IHK Versicherungsvertreter (Reg. D-W2OL-AY70T-14)

### Awards

- Marketing Expert of the Year 2025
- Outstanding Leadership Award

## Compliance & Datenschutz

- DSGVO-konform (deutsche GmbH, EU-Hosting)
- ePrivacy-konform (Cookie-Banner vor Tracking)
- Schrems-II-konform (keine US-Datentransfers ohne Consent)
- WCAG 2.1 AA Accessibility
- Schema.org Validator-konform

---

Letzte Aktualisierung: 2026-04-28
Lizenz: Proprietär — Whitelabel-Lizenzierung auf Anfrage
Kontakt: info@so-care.de