diff --git a/docs/it-hilfe-sofort-bauplan.md b/docs/it-hilfe-sofort-bauplan.md index 19a4d72..d03abf1 100644 --- a/docs/it-hilfe-sofort-bauplan.md +++ b/docs/it-hilfe-sofort-bauplan.md @@ -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`