docs: IT-Hilfe-Sofort.de Bauplan (19 Routen, Design, CRM-Formular)

docs/it-hilfe-sofort-bauplan.md

@@ -0,0 +1,280 @@
+# IT-Hilfe-Sofort.de — Alicia Bauplan
+
+> **Für Alicia (Qwen 3.6, 256K Context)**
+> **Stand:** 25.06.2026
+> **Repo:** `git@git.datenhimmel.work:danielkrause/it-hilfe-sofort.git`
+> **Domain:** it-hilfe-sofort.de (via Cloudflare Tunnel)
+> **Port:** 5003 (lokal)
+> **Framework:** Flask + Inline-CSS (wie BSN-Chatsystem)
+> **Design-System:** `BSN-Blau #20228a`, Off-White `#F9FAFB`, System-Fonts, Mobile-First
+
+---
+
+## 📁 Projektstruktur
+
+```
+it-hilfe-sofort.de/
+├── app.py                 # Flask-App (Routing, Templates, CSS)
+├── requirements.txt       # flask, requests
+├── .env                   # NICHT committen
+├── .gitignore
+├── it_hilfe.db            # SQLite (optional: Kontakt-Formular-Speicher)
+├── static/
+│   └── logo.png           # IT-Hilfe-Sofort Logo
+├── templates/             # (optional, sonst inline in app.py)
+└── docs/
+    └── alicia-aufgaben-it-hilfe.md
+```
+
+---
+
+## 🗺️ Routen-Plan (alle als Flask-Routen in app.py)
+
+| Route | Titel | Inhalt |
+|---|---|---|
+| `/` | 🏠 Startseite | Hero, Leistungs-Übersicht, 3 USPs, CTA |
+| `/blog/telematik-vorschriften` | Telematik-Vorschriften | Artikel zu TI, KIM, ePA |
+| `/blog/dsgvo-it-sicherheit` | DSGVO & IT-Sicherheit | Datenschutz im Gesundheitswesen |
+| `/blog/fachkraeftemangel` | Fachkräftemangel | IT-Lösungen gegen Personalmangel |
+| `/blog/foerderung-finanzierung` | Förderung & Finanzierung | KfW, Digitalisierungszuschüsse |
+| `/blog/qualitaet-pruefung` | Qualität & Prüfung | MDK, QPR, Vorbereitung |
+| `/blog/praxis-tipps` | Praxis-Tipps | Konkrete How-tos |
+| `/leistungen/pflegedienste` | Pflegedienste | IT-Lösungen für ambulante Pflege |
+| `/leistungen/pflegeheime` | Pflegeheime | IT-Lösungen für stationäre Pflege |
+| `/leistungen/tagespflegen` | Tagespflegen | IT-Lösungen für Tagespflege |
+| `/it-service/hardware` | Hardware | Server, Clients, Drucker |
+| `/it-service/netzwerk` | Netzwerk | WLAN, VPN, Firewall |
+| `/it-service/email-kommunikation` | E-Mail & Kommunikation | Exchange, Teams, Telefonie |
+| `/it-service/support-wartung` | Support & Wartung | SLA, Fernwartung, 24/7 |
+| `/ueber-uns` | Über uns | Daniel Krause, Team |
+| `/faq` | FAQ | Häufige Fragen |
+| `/kontakt` | Kontakt | → CRM-Formular (iframe) |
+| `/impressum` | Impressum | Pflicht |
+| `/datenschutz` | Datenschutzerklärung | Pflicht |
+
+---
+
+## 🎨 Design (Mobile-First, Inline-CSS)
+
+```css
+/* Farben */
+:root {
+  --bsn-blau: #20228a;
+  --bg: #F9FAFB;
+  --card-bg: #FFFFFF;
+  --text: #1F2937;
+  --text-muted: #6B7280;
+  --border: #E5E7EB;
+}
+
+/* Typografie */
+font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+/* Header: Anthrazit mit Logo + Nav */
+.site-header { background:#1F2937; padding:1rem; }
+.site-header .logo { color:#F9FAFB; font-weight:800; font-size:1.1rem; }
+
+/* Hero: BSN-Blau Gradient */
+.hero { background:linear-gradient(135deg,#20228a,#161e6e); color:#fff; padding:3rem 1.5rem; }
+
+/* Cards: Weiß, leichter Schatten, 12px Border-Radius */
+.card { background:#fff; border-radius:12px; padding:1.5rem; box-shadow:0 2px 12px rgba(0,0,0,0.04); }
+
+/* CTA-Buttons */
+.btn-primary { background:#20228a; color:#fff; border:none; border-radius:8px; padding:0.8rem 1.5rem; }
+.btn-primary:hover { background:#161e6e; }
+
+/* Mobile Nav: Hamburger + Offcanvas (wie BSN-Chatsystem) */
+/* Footer: Anthrazit */
+.site-footer { background:#1F2937; color:#9CA3AF; padding:2rem 1.5rem; }
+```
+
+---
+
+## 📄 Seiten-Templates (Inhalt)
+
+### 🏠 Startseite `/`
+
+```
+Hero: „IT-Hilfe für das Gesundheitswesen — einfach, sicher, sofort."
+Sub: „Spezialisiert auf Pflegedienste, Heime & Tagespflegen."
+
+3 Cards:
+  🛡️ „DSGVO-konform" — Ihre Patientendaten sicher
+  ⚡ „Sofort-Hilfe" — 24/7 Support-Hotline
+  💰 „Förderfähig" — Wir helfen bei KfW-Anträgen
+
+CTA: „Jetzt Beratungsgespräch vereinbaren" → /kontakt
+
+Sektion „Unsere Leistungen" (6 Cards: je 3 Pflege + 3 IT)
+```
+
+### 📝 Blog-Seiten (6 Seiten)
+
+Einheitliches Layout:
+- Header: Titel + Datum
+- Inhaltsbereich: 720px max-width, Fließtext
+- Seitenleiste (Desktop) oder unten (Mobile): Weitere Blog-Artikel
+- CTA am Ende: „Fragen? → /kontakt"
+
+**Dummy-Inhalte** (Platzhalter, 200-400 Wörter pro Seite):
+1. Telematik-Vorschriften: TI-Anbindung, KIM, ePA-Pflicht ab 2026
+2. DSGVO: Auftragsverarbeitung, Bußgelder, techn.-org. Maßnahmen
+3. Fachkräftemangel: Digitalisierung als Lösung, Workflow-Automation
+4. Förderung: KfW 455, Digitalisierungszuschuss Pflege, Antragshilfe
+5. Qualität: MDK-Prüfung, Indikatoren, IT-seitige Vorbereitung
+6. Praxis-Tipps: Passwort-Manager, Backups, Phishing-Schutz
+
+### ⚙️ Leistungen (3 Seiten)
+
+Cards mit Icon + Beschreibung:
+- Pflegedienste: Tourenplanung, Mobile Datenerfassung, Abrechnung
+- Pflegeheime: Heimverwaltung, Biometrie, Dokumentation
+- Tagespflegen: Terminbuchung, Fahrdienst, Aktivierungsangebote
+
+### 🔧 IT-Service (4 Seiten)
+
+- Hardware: Server, Thin Clients, Drucker, Beschaffung
+- Netzwerk: WLAN-Ausleuchtung, VPN, Firewall, Segmentierung
+- E-Mail: Microsoft 365, Exchange, Spam-Schutz, Archivierung
+- Support: SLA-Stufen, Reaktionszeiten, Fernwartung, Monitoring
+
+### 👤 Über uns `/ueber-uns`
+
+- Foto (Platzhalter)
+- Text: Daniel Krause, IT-Berater im Gesundheitswesen
+- Werte: Transparenz, Schnelligkeit, DSGVO-Compliance
+
+### ❓ FAQ `/faq`
+
+Akkordeon-Komponente (JS inline). 8-10 Fragen:
+1. „Wie schnell seid ihr vor Ort?"
+2. „Was kostet der IT-Support?"
+3. „Übernehmt ihr die komplette IT?"
+4. „Seid ihr DSGVO-zertifiziert?"
+5. ...
+
+### 📩 Kontakt `/kontakt`
+
+**CRM-Formular (iframe):**
+```html
+<iframe
+    src="https://crm.companyhub.io/widget/form/iEDHWbU9iII32UkhXj2b"
+    style="width:100%;height:100%;border:none;border-radius:8px"
+    id="inline-iEDHWbU9iII32UkhXj2b"
+    data-layout="{'id':'INLINE'}"
+    data-trigger-type="alwaysShow"
+    data-activation-type="alwaysActivated"
+    data-deactivation-type="neverDeactivate"
+    data-form-name="Daniel Krause IT-Buddy.Care"
+    data-height="946"
+    data-form-id="iEDHWbU9iII32UkhXj2b"
+    title="Daniel Krause IT-Buddy.Care">
+</iframe>
+<script src="https://crm.companyhub.io/js/form_embed.js"></script>
+```
+Gerendert in einem Container (max-width: 720px, zentriert).
+
+---
+
+## 🔧 Technische Umsetzung
+
+### app.py — Kernstruktur
+
+```python
+#!/usr/bin/env python3
+"""IT-Hilfe-Sofort.de — Flask Webapp."""
+import os
+from pathlib import Path
+from flask import Flask
+
+# ── Config ──
+BASE_DIR = Path(__file__).parent
+PORT = int(os.environ.get("PORT", "5003"))
+app = Flask(__name__)
+
+# ── Hilfsfunktionen ──
+def _base_template(title: str, content: str, active: str = "") -> str:
+    """Wrapper für einheitliches Layout."""
+    return f"""<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>{title} | IT-Hilfe-Sofort.de</title>
+  <style>
+    /* ── Global Styles ── */
+    *,*::before,*::after{{box-sizing:border-box;margin:0;padding:0}}
+    body{{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#F9FAFB;color:#1F2937;line-height:1.6}}
+    ...
+  </style>
+</head>
+<body>
+  <header class="site-header">...</header>
+  <main>{content}</main>
+  <footer class="site-footer">...</footer>
+</body>
+</html>"""
+
+# ── Alle Routen (wie oben definiert) ──
+
+if __name__ == "__main__":
+    app.run(host="127.0.0.1", port=PORT)
+```
+
+### Deployment
+
+- Lokal: Port 5003
+- Cloudflare Tunnel: `it-hilfe-sofort.de` → `localhost:5003`
+- Start: `source .env && python3 app.py` (wie BSN-Chatsystem)
+
+---
+
+## 📋 Aufgaben-Batches für Alicia
+
+### Batch 1: Grundgerüst (1 Datei)
+- `app.py` anlegen mit Flask, `_base_template()`, Header/Footer
+- Routen: `/`, `/impressum`, `/datenschutz`
+- Design: BSN-Blau, Mobile-First, Hamburger-Menü
+
+### Batch 2: Blog (6 Routen)
+- 6 Blog-Seiten mit Dummy-Text
+- Einheitliches Blog-Layout, Seitenleiste
+
+### Batch 3: Leistungen + IT-Service (7 Routen)
+- 3 Leistungen-Seiten, 4 IT-Service-Seiten
+- Card-basiertes Layout mit Icons
+
+### Batch 4: Über uns + FAQ + Kontakt (3 Routen)
+- FAQ mit Akkordeon-JS
+- Kontakt mit CRM-iframe
+- Über-uns-Seite
+
+### Batch 5: Deployment
+- `requirements.txt`, `.gitignore`
+- `cloudflared` Tunnel-Konfiguration
+- Test aller 19 Routen
+
+---
+
+## ✅ Qualitäts-Checks (vor JEDEM Commit)
+
+```bash
+ruff check app.py --fix && ruff format app.py
+python3 -c "from app import app; client=app.test_client(); assert client.get('/').status_code==200"
+```
+
+- **Conventional Commits:** `feat(blog):` / `feat(leistungen):` / `fix(css):`
+- **Inline-CSS** (keine separaten CSS-Dateien)
+- **Mobile-First:** Touch-Targets ≥ 44px, kein Hover-only
+- **BSN-Blau:** `#20228a` für CTAs und Links
+
+---
+
+## ⚠️ Wichtige Hinweise
+
+1. **Startseite existiert bereits** — Daniel hat einen Entwurf. Alicia soll den integrieren/erweitern, nicht ersetzen.
+2. **CRM-Formular ist Live** — das iframe-Snippet nicht verändern, nur einbetten.
+3. **Dummy-Texte** mit ChatGPT-Gedächtnis schreiben (Pflege-IT-Kontext), nicht zu generisch.
+4. **Navigation:** Desktop = horizontales Menü (Dropdown für Blog/Leistungen), Mobile = Hamburger + Offcanvas.
+5. **Footer:** Immer Impressum + Datenschutz-Links.