# 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
> **Stil:** Seriös + agil — KEINE Icons/Emojis, klare Typografie, viel Weißraum, reduzierte Farbpalette
> **Coding:** BSN Coding Standards BINDEND — Typ-Annotationen (PEP 604), deutsche Docstrings, Ruff+Mypy+Pytest

---

## 📁 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
```

---

## Sitemap (keine Icons in Navigation/Titeln)

| Route | Titel | Inhalt |
|---|---|---|
| `/` | Startseite | Hero, Leistungs-Übersicht, 3 Value-Props, 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, KEINE Icons)

**Stilrichtung: Seriös + Agil**
- Keine Emojis, keine SVG-Icons, keine dekorativen Elemente
- Klare Typografie als Hauptgestaltungsmittel
- Großzügiger Weißraum, reduzierte Farbpalette
- Seriös wie eine Unternehmensberatung, agil wie ein Tech-Startup

```css
/* Farben — zurückhaltend, professionell */
:root {
  --primary: #20228a;      /* BSN-Blau — CTAs, Links */
  --primary-dark: #161e6e; /* Hover */
  --bg: #F9FAFB;           /* Hintergrund */
  --card-bg: #FFFFFF;      /* Karten */
  --text: #1F2937;         /* Fließtext */
  --text-muted: #6B7280;   /* Sekundärtext */
  --border: #E5E7EB;       /* Trennlinien */
  --accent: #F3F4F6;       /* Hervorhebung (hellgrau) */
}

/* Typografie — das Hauptgestaltungsmittel */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Überschriften: fett, viel Luft */
h1 { font-size:2rem; font-weight:800; letter-spacing:-0.02em; line-height:1.2; }
h2 { font-size:1.5rem; font-weight:700; letter-spacing:-0.01em; }
h3 { font-size:1.15rem; font-weight:600; }
/* Fließtext: großzügig */
p { font-size:1rem; line-height:1.7; color:#374151; }

/* Cards — clean, kein Schnickschnack */
.card { 
  background:#fff; 
  border:1px solid #E5E7EB;  /* dezente Border statt Schatten */
  border-radius:8px; 
  padding:2rem; 
}

/* Header: Anthrazit, zurückhaltend */
.site-header { 
  background:#1F2937; 
  padding:1rem 1.5rem; 
  display:flex; 
  align-items:center; 
  justify-content:space-between;
}
.site-header .logo { 
  color:#F9FAFB; 
  font-weight:700; 
  font-size:1.05rem; 
  letter-spacing:-0.01em;
  text-decoration:none;
}

/* Navigation: Text-Links, kein Dropdown-Icon */
.nav-link { color:#9CA3AF; text-decoration:none; font-size:0.9rem; padding:0.5rem; }
.nav-link:hover, .nav-link.active { color:#F9FAFB; }

/* Hero: BSN-Blau, viel Luft */
.hero { 
  background:linear-gradient(135deg,#20228a,#161e6e); 
  color:#fff; 
  padding:5rem 1.5rem;  /* mehr Höhe = seriöser */
  text-align:center;
}
.hero h1 { font-size:2.2rem; margin-bottom:1rem; }
.hero p { color:rgba(255,255,255,0.85); font-size:1.1rem; max-width:600px; margin:0 auto; }

/* CTA-Buttons */
.btn-primary { 
  background:#20228a; 
  color:#fff; 
  border:none; 
  border-radius:6px; 
  padding:0.8rem 2rem; 
  font-size:0.95rem; 
  font-weight:600;
  letter-spacing:0.01em;
  cursor:pointer;
  transition:background 0.2s;
}
.btn-primary:hover { background:#161e6e; }

/* Footer: Anthrazit, aufgeräumt */
.site-footer { 
  background:#1F2937; 
  color:#9CA3AF; 
  padding:3rem 1.5rem; 
  font-size:0.85rem; 
}
.site-footer a { color:#D1D5DB; text-decoration:none; }
.site-footer a:hover { color:#F9FAFB; }

/* Mobile Nav: Textbasiert, kein Hamburger-Icon (Wort „Menü" stattdessen) */
.menu-toggle { 
  background:none; 
  border:none; 
  color:#9CA3AF; 
  font-size:0.9rem; 
  font-weight:600;
  cursor:pointer;
  padding:0.5rem;
}
```

**Wichtige Regeln:**
- ❌ Keine `svg`-Inline-Icons
- ❌ Keine Emojis in Titeln/Texten
- ❌ Keine `box-shadow`-Overdoses (max. `0 1px 3px rgba(0,0,0,0.04)`)
- ✅ Borders statt Schatten für Abgrenzung
- ✅ Typografie-Größen als Hierarchie-Mittel
- ✅ Großzügige `padding`-Werte (mind. 2rem bei Cards, 5rem bei Hero)
- ✅ Farbakzente NUR durch BSN-Blau

---

## 📄 Seiten-Templates (Inhalt)

### 🏠 Startseite `/`

```
Hero: „IT-Hilfe für das Gesundheitswesen"
Sub: „Sicher, schnell, spezialisiert auf Pflegeeinrichtungen."

3 Value Props (nebeneinander, clean):
  „DSGVO-konform" — Ihre Patientendaten in sicheren Händen
  „24/7 Support" — Wir sind da, wenn Sie uns brauchen
  „Förderfähig" — KfW-Anträge stellen wir gemeinsam

CTA: „Beratungsgespräch vereinbaren" → /kontakt

Sektion „Unsere Leistungen" (6 Cards, 2×3 Grid):
  Pflegedienste | Pflegeheime | Tagespflegen
  Hardware | Netzwerk | Support

⚠️ KEINE Icons oder Emojis — nur Text in den Cards!
```

### 📝 Blog-Seiten (6 Routen, 24 Artikel)

**Einheitliches Layout:**
- Header: Titel + Datum
- Inhaltsbereich: 720px max-width, Fließtext
- Seitenleiste (Desktop) oder unten (Mobile): Weitere Blog-Artikel
- CTA am Ende: „Fragen? → /kontakt"

**Artikel sind fertig** (24 HTML-Dateien von Basti, semantisches HTML mit Quellen).
Alicia muss sie NUR in `_base_template()` wrappen — kein Neuschreiben!

| Route | Artikel | Datei |
|---|---|---|
| `/blog/telematik-vorschriften` | 01 — TI-Anschlusspflicht 2025 | `artikel-01-ti-anschlusspflicht.html` |
| | 02 — Elektronische Abrechnung ab 12/2026 | `artikel-02-elektronische-abrechnung.html` |
| | 03 — SMC-B-Karte – 33% Abdeckung | `artikel-03-smc-b-karte.html` |
| | 07 — NIS-2 Registrierungsfrist | `artikel-07-nis2.html` |
| | 17 — ePA für alle – Opt-out | `artikel-17-epa.html` |
| `/blog/dsgvo-it-sicherheit` | 04 — 46,9 Mio. € DSGVO-Bußgelder | `artikel-04-dsgvo-bussgelder.html` |
| | 05 — BSI: 13 Schwachstellen Pflegesoftware | `artikel-05-bsi-schwachstellen.html` |
| | 06 — 138 Sicherheitsvorfälle Gesundheitswesen | `artikel-06-sicherheitsvorfaelle.html` |
| | 18 — Cloud-Hosting Deutschland | `artikel-18-cloud-hosting.html` |
| | 22 — E-Mail-Verschlüsselung | `artikel-22-email-verschluesselung.html` |
| `/blog/fachkraeftemangel` | 08 — 200.000 unbesetzte Pflegestellen | `artikel-08-fachkraeftemangel.html` |
| | 09 — 62% Altenpflege, Personalplanung | `artikel-09-personalplanung.html` |
| | 10 — KI-Sprachassistent spart 27% Zeit | `artikel-10-ki-sprachassistent.html` |
| `/blog/foerderung-finanzierung` | 11 — Bis 12.000 € Digitalisierungszuschuss | `artikel-11-digitalisierungszuschuss.html` |
| | 12 — DiPA – 70 € monatlich ab 2026 | `artikel-12-dipa.html` |
| | 13 — Pflegeversicherung 1 Mrd. Defizit | `artikel-13-pflegeversicherung.html` |
| `/blog/qualitaet-pruefung` | 14 — QPR ambulant ab Juli 2026 | `artikel-14-qpr-ambulant.html` |
| | 15 — PeBeM verpflichtend ab 2026 | `artikel-15-pebem.html` |
| | 16 — MDK-Prüfung digital bestehen | `artikel-16-mdk-pruefung.html` |
| `/blog/praxis-tipps` | 19 — Tablets für die Pflege – Top 5 | `artikel-19-tablets.html` |
| | 20 — WLAN im Pflegeheim | `artikel-20-wlan.html` |
| | 21 — Offline-Dokumentation | `artikel-21-offline.html` |
| | 23 — Medikationsplan digital | `artikel-23-medikationsplan.html` |
| | 24 — IT-Notfallplan 10-Punkte | `artikel-24-it-notfallplan.html` |

### ⚙️ Leistungen (3 Seiten)

Cards mit Titel + Beschreibung (KEINE Icons):
- 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`

Aufklappbare Fragen (reines HTML/CSS/JS, kein Icon). 8-10 Fragen:
1. „Wie schnell sind Sie vor Ort?"
2. „Was kostet der IT-Support?"
3. „Übernehmen Sie die komplette IT?"
4. „Wie stellen Sie DSGVO-Compliance sicher?"
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)

**BSN Coding Standards sind BINDEND.** Alicia muss den Skill `bsn-coding-standards` laden und einhalten:

- **Typ-Annotationen:** Jede Funktion mit `X | None` (PEP 604), `-> None` explizit
- **Docstrings:** Deutsch, Google-Style (Args, Returns, Raises)
- **Keine Secrets** im Code (API-Keys via `.env`)
- **Max 50 Statements/Funktion** (Ruff PLR0915)
- **McCabe ≤ 10** (Ruff C901)

```bash
# Vor JEDEM Commit:
ruff check . --fix && ruff format . && 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.