design: implement Bento-Grid and Corporate Dark Mode redesign

funktionen.md

@@ -1,33 +1,43 @@
 # Website Funktionen & Designkonzept - N&D i-t SOLUTIONS
 
 ## 1. Design & Aussehen (Aesthetics)
-- **Stil**: Modernes, premium Tech-Design. Kombination aus dunklem Modus (Dark Mode) und edlen Akzentfarben (Neon-Blau, Violett).
-- **Glassmorphismus**: Teiltransparente Hintergründe mit Unschärfe-Effekt (backdrop-filter: blur) für Karten und die Navigationsleiste.
-- **Typografie**: Moderne Sans-Serif Schriftart (z.B. Outfit oder Inter via Google Fonts).
-- **Layout**: Vollständig responsiv (optimiert für Smartphones, Tablets, Desktops).
+- **Stil**: Minimalistisches, hochprofessionelles Tech-Design (Corporate Dark Mode). 
+- **Farben**: Tiefes Anthrazit/Schwarz, reines Weiß für Typografie, dezentes Arktis-Blau als Fokusfarbe.
+- **Bento-Grid**: Hauptlayout basiert auf einem asymmetrischen, klar strukturierten Raster (Bento-Boxen).
+- **Karten-Stil**: Mattes Finish (Subtiler Border-Gradient statt starkem Glassmorphismus) für maximale Lesbarkeit.
+- **Typografie**: Seriöse, geometrische Sans-Serif (z. B. Inter oder Geist Sans via Google Fonts).
+- **Layout**: Streng responsiv mit Fokus auf fehlerfreie Desktop-Raster und saubere Mobile-Kompression.
 
 ## 2. Effekte & Interaktion (Wirkung)
-- **Scroll-Animationen**: Sanftes Einblenden (Fade-In) von Sektionen beim Scrollen.
-- **Hover-Effekte**: 
-  - Buttons vergrößern sich minimal und leuchten leicht.
-  - Service-Karten erhalten einen farbigen Rahmen-Gradienten bei Mausberührung.
-- **Smooth Scroll**: Fließendes Navigieren zu den einzelnen Sektionen über das Menü.
-- **Sticky Navbar**: Navigationsleiste bleibt beim Scrollen oben fixiert und wird leicht transparent.
+- **Micro-Interactions**: Keine verspielten Animationen; nur direkte, extrem schnelle Hover-Reaktionen.
+- **Grid-Hover**: Angesteuerte Bento-Zellen heben sich durch eine minimale Aufhellung des Hintergrunds ab.
+- **Bento-Skalierung**: Inhaltselemente innerhalb einer Zelle verschieben sich bei Hover dezent (z. B. Pfeil-Icon wandert nach rechts oben).
+- **Sticky Navbar**: Ultradünne, fixierte Navigationsleiste mit maximaler Hintergrund-Unschärfe (Blur).
 
-## 3. Struktur & Sektionen
-- **Navbar (Navigation)**: Logo, Links zu Leistungen, Tech-Stack, Über uns, Kontakt. Button für Erstgespräch.
-- **Hero-Sektion**:
-  - *Überschrift*: "Digitale Exzellenz für Ihr Unternehmen"
-  - *Subtext*: "Wir bauen schnelle, moderne und SEO-optimierte Websites für Kleinbetriebe und Dienstleister."
-  - *Call-to-Action*: Button "Projekt starten" & "Mehr erfahren".
-- **Services (Dienstleistungen)**:
-  - *Karten*: Webdesign, Performance-Optimierung, SEO & Auffindbarkeit, Wartung & Support.
-- **Tech-Stack**:
-  - Visualisierung moderner Technologien (Astro, Tailwind CSS, React, Node.js).
-- **About (Über uns)**:
-  - Vorstellung von N&D i-t SOLUTIONS, Fokus auf persönlichen Service und faire Preise für Kleinbetriebe.
-- **Contact (Kontakt)**:
-  - Kontaktformular mit interaktiven Eingabefeldern.
-  - Direktkontakt (E-Mail, Telefon).
-- **Footer**:
-  - Links zu Impressum und Datenschutz, Social-Media-Icons, Copyright.
+## 3. Struktur & Sektionen (Bento-Architektur)
+
+### Navbar (Navigation)
+- **Komponenten**: Logo, Direktlinks (Services, Tech-Stack, Konzept), Button "Erstgespräch buchen".
+
+### Hero- & Wert-Sektion (Großes Bento-Raster oben)
+- **Zelle 1 (Groß - Hauptfokus)**: 
+  - *Überschrift*: "Webdesign, das konvertiert. Ohne Kompromisse."
+  - *Subtext*: "Maßgeschneiderte, blitzschnelle Websites für Dienstleister und Unternehmen. Technisch perfekt. Sichtbar bei Google."
+  - *CTA*: Primärer Button "Projekt anfragen".
+- **Zelle 2 (Mittel - Das Versprechen)**: Fokus auf "Keine Vorlagen" – Jedes Design entsteht individuell im Code.
+- **Zelle 3 (Klein - USP)**: "Performance-Garantie" (PageSpeed-Score Visualisierung >90).
+
+### Services & Expertise (Bento-Raster Mitte)
+- **Zelle 4 (Lang - Kernleistung)**: Individuelles Webdesign & UI/UX-Entwicklung von Grund auf.
+- **Zelle 5 (Quadratisch)**: SEO-Fundament (Semantischer Code, strukturierte Daten für Google).
+- **Zelle 6 (Quadratisch)**: Wartung & Hosting (Sicherheit, DSGVO-Konformität, Updates).
+
+### Tech-Stack & Methode (Bento-Raster unten)
+- **Zelle 7 (Breit)**: Sichtbare Logos der State-of-the-Art Tools (Astro, Tailwind CSS, React, Sanity CMS).
+- **Zelle 8 (Mittel - Da noch keine Kunden)**: "Unser Ansatz" – Transparenter 3-Schritte-Prozess vom Erstgespräch zum Launch.
+
+### Contact (Kontakt-Zone)
+- **Zelle 9 (Groß)**: Minimalistisches Typografie-Kontaktformular (Wenige Klicks) + direkte Mail/Telefon-Verbindung.
+
+### Footer
+- **Komponenten**: Rechtliches (Impressum, Datenschutz), GitHub/LinkedIn Links, Copyright.