it-hilf-sofort/ALICIA.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 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

/* 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 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 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):

<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

#!/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)

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