# Styleguide: E-TIB Rework

Dieser Styleguide definiert die visuellen Rahmenbedingungen für das neue E-TIB Next.js-Rework auf Basis des "Systematic Atomic" Paradigmas der Mintel-Standardisierung.

## 1. Markenidentität und Ästhetik
**Vibe:** "Premium Industrial"
**Eindruck:** Robust, verlässlich, extrem professionell (Top Modern), mit einem Hauch von High-End-Engineering.

Das Design darf nicht verspielt wirken. Es basiert auf großen, markanten und sehr klaren Flächen sowie technischer Präzision.

## 2. Farbpalette
Die Tailwind-Konfiguration bildet die Identität exakt ab:

- **E-TIB Corporate Grün (Primary):**
  - **Base:** `#117c61` (Kerngewicht für Buttons, Links, Hero-Akzente)
  - **Dark:** `#0d5d49` (Hover-Status)
  - **Light:** `#149d7b` (Subtile UI-Elemente)
- **Secondary (Dunkles Grün):**
  - **Base:** `#225522`
- **Neutral / Hintergrund:**
  - **Light Background:** `#fafafa`
  - **Dark Background / Contrast:** `#333333`
  - **Pure Black (Text):** `#1a1a1a`

## 3. Typografie
Das Rework nutzt eine "Brute Simplicity"-Typografie gepaart mit Fluid-Skalierung, um absolute Klarheit aufzubauen.

- **Schriftarten:** `Inter`, `system-ui`, `sans-serif` (Google Font per Next-Font injiziert)
- **Hierarchie:**
  - `<h1>`: Extreme Präsenz, kurze Headlines (z. B. *DIE EXPERTEN FÜR KABELTIEFBAU*).
  - P-Text: Lesefreundlich und luftig formatiert mit Line-Height 1.6 bis 1.7.

## 4. Grid System & UI Patterns
- **Full Viewport Immersions:** Cinematic Videos im Headbereich nehmen den vollen Viewport ein und haben ein dunkles Overlay, um den hellen Text durchbrechen zu lassen.
- **Grids:** Einsatz einer modernen Architektur analog zum "Bento-Grid"-Ansatz. Dies zeigt die Kompetenzen kompakt und technisch ansprechend auf einem Blick (mit leichten Shadow-`[0 4px 6px ...]` Effekten).
- **Abrundungen (Border Radius):** Standardisierte, leichte Abrundungen.
  - Buttons und Forms: `0.5rem` (`rounded`)
  - Große Kompetenz-Kacheln: `0.75rem` (`rounded-lg`) bis `1.5rem` (`rounded-2xl`)

## 5. Animationen & Micro-Interactions
*Framer Motion* treibt sämtliche Bewegungen an. Prinzipien:
1. **Glassmorphism Fade-ins:** Boxen der Unter-Unternehmen (E-TIB GmbH, Bohrtechnik) schweben durch Scroll-Trigger elegant ins Bild (Ease-Industrial Kurve).
2. **Hover States:** Klar und direkt. Keine Wipp- oder Bouncy-Effekte, sondern hartes Feedback mit kurzen Transitions.
3. **Timeline Scroll-Wave:** Einträge aus der Firmengeschichte werden asynchron bei Sichtbarkeit eingeflogen.

## 6. Fotografie & Footage
- Das Hero-Video darf keine Bedienelemente haben (Autoplay, muted, loop) und wird so integriert, wie von *schleicher-gruppe.de* gelobt.
- Die Fotografien sind kontrastreich und idealerweise etwas entsättigt, um das Corporate Grün noch stärker wirken zu lassen.