docs: IT-Hilfe-Sofort — Design-Regeln (keine Icons, seriös+agil, reine Typografie)

2026-06-25 15:35:28 +02:00
parent 9e939c3775
commit a51f08d516
1 changed files with 119 additions and 35 deletions
@@ -7,6 +7,7 @@
 > **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

 ---

@@ -28,11 +29,11 @@ it-hilfe-sofort.de/

 ---

-## 🗺️ Routen-Plan (alle als Flask-Routen in app.py)
+## Sitemap (keine Icons in Navigation/Titeln)

 | Route | Titel | Inhalt |
 |---|---|---|
-| `/` | 🏠 Startseite | Hero, Leistungs-Übersicht, 3 USPs, CTA |
+| `/` | 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 |
@@ -54,41 +55,120 @@ it-hilfe-sofort.de/

 ---

-## 🎨 Design (Mobile-First, Inline-CSS)
+## 🎨 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 */
+/* Farben — zurückhaltend, professionell */
 :root {
-  --bsn-blau: #20228a;
-  --bg: #F9FAFB;
-  --card-bg: #FFFFFF;
-  --text: #1F2937;
-  --text-muted: #6B7280;
-  --border: #E5E7EB;
+  --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 */
+/* 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; }

-/* Header: Anthrazit mit Logo + Nav */
-.site-header { background:#1F2937; padding:1rem; }
-.site-header .logo { color:#F9FAFB; font-weight:800; font-size:1.1rem; }
+/* Cards — clean, kein Schnickschnack */
+.card { 
+  background:#fff; 
+  border:1px solid #E5E7EB;  /* dezente Border statt Schatten */
+  border-radius:8px; 
+  padding:2rem; 
+}

-/* Hero: BSN-Blau Gradient */
-.hero { background:linear-gradient(135deg,#20228a,#161e6e); color:#fff; padding:3rem 1.5rem; }
+/* 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;
+}

-/* 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); }
+/* 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:8px; padding:0.8rem 1.5rem; }
+.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; }

-/* Mobile Nav: Hamburger + Offcanvas (wie BSN-Chatsystem) */
-/* Footer: Anthrazit */
-.site-footer { background:#1F2937; color:#9CA3AF; padding:2rem 1.5rem; }
+/* 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)
@@ -96,17 +176,21 @@ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 ### 🏠 Startseite `/`

 ```
-Hero: „IT-Hilfe für das Gesundheitswesen — einfach, sicher, sofort."
-Sub: „Spezialisiert auf Pflegedienste, Heime & Tagespflegen."
+Hero: „IT-Hilfe für das Gesundheitswesen"
+Sub: „Sicher, schnell, spezialisiert auf Pflegeeinrichtungen."

-3 Cards:
-  🛡️ „DSGVO-konform" — Ihre Patientendaten sicher
-  ⚡ „Sofort-Hilfe" — 24/7 Support-Hotline
-  💰 „Förderfähig" — Wir helfen bei KfW-Anträgen
+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: „Jetzt Beratungsgespräch vereinbaren" → /kontakt
+CTA: „Beratungsgespräch vereinbaren" → /kontakt

-Sektion „Unsere Leistungen" (6 Cards: je 3 Pflege + 3 IT)
+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)
@@ -127,7 +211,7 @@ Einheitliches Layout:

 ### ⚙️ Leistungen (3 Seiten)

-Cards mit Icon + Beschreibung:
+Cards mit Titel + Beschreibung (KEINE Icons):
 - Pflegedienste: Tourenplanung, Mobile Datenerfassung, Abrechnung
 - Pflegeheime: Heimverwaltung, Biometrie, Dokumentation
 - Tagespflegen: Terminbuchung, Fahrdienst, Aktivierungsangebote
@@ -147,11 +231,11 @@ Cards mit Icon + Beschreibung:

 ### ❓ FAQ `/faq`

-Akkordeon-Komponente (JS inline). 8-10 Fragen:
-1. „Wie schnell seid ihr vor Ort?"
+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. „Übernehmt ihr die komplette IT?"
-4. „Seid ihr DSGVO-zertifiziert?"
+3. „Übernehmen Sie die komplette IT?"
+4. „Wie stellen Sie DSGVO-Compliance sicher?"
 5. ...

 ### 📩 Kontakt `/kontakt`