diff --git a/docs/it-hilfe-sofort-bauplan.md b/docs/it-hilfe-sofort-bauplan.md new file mode 100644 index 0000000..19a4d72 --- /dev/null +++ b/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 + + +``` +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""" + + + + + {title} | IT-Hilfe-Sofort.de + + + + +
{content}
+ + +""" + +# ── 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.