BSN-Chatsystem/docs/it-hilfe-sofort-bauplan.md

# 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.