# NAK Intranet – Design-Richtlinien
## Basierend auf dem CD-Manual NAK 2026

---

## 1. Farben (Digital-Palette)

| Farbe           | HEX-Wert  | Verwendung                            |
|-----------------|-----------|---------------------------------------|
| NAK Blau        | `#2786cf` | Primärfarbe, Buttons, Links, Header   |
| Schwarz         | `#000000` | Texte, Icons                          |
| Sonnengelb      | `#ffdc0f` | Akzente, Warnungen                    |
| Orange          | `#f08200` | Akzente                               |
| Rot             | `#d21400` | Fehlermeldungen, Warnstufen           |
| Himbeere        | `#d73282` | Akzente                               |
| Lila            | `#731e7d` | Seelsorge-Bereich                     |
| Dunkelblau      | `#1243a0` | Akzente                               |
| Türkisblau      | `#00a091` | Akzente                               |
| Dunkelgrün      | `#006e14` | Entwickler-Bereich, Erfolg            |
| Gelbgrün        | `#82be23` | Akzente                               |

### Neutrale Farben (Graustufen)
- Hintergrund: `#f8f9fa` (Gray-50)
- Karten/Panels: `#ffffff`
- Trennlinien: `#e9ecef` (Gray-200)
- Sekundärer Text: `#6c757d` (Gray-600)
- Primärer Text: `#212529` (Gray-900)

---

## 2. Typografie

- **Hausschrift**: Suisse Int'l (als woff2 eingebunden)
  - Light (300) – Fließtext
  - Medium (500) – Überschriften, Labels
  - Semibold (600) – Buttons, Hervorhebungen
- **Fallback**: Arial, sans-serif

### Schriftgrößen
| Token       | Größe     |
|-------------|-----------|
| xs          | 0.75rem   |
| sm          | 0.875rem  |
| base        | 1rem      |
| md          | 1.125rem  |
| lg          | 1.25rem   |
| xl          | 1.5rem    |
| 2xl         | 2rem      |
| 3xl         | 2.5rem    |

---

## 3. Formsprache: Eckiges Design

Das CD-Manual schreibt eine **eckige Formsprache** vor:
- **Keine abgerundeten Ecken** (border-radius: 0) für UI-Elemente
- Ausnahme: Profilbilder (kreisförmig, border-radius: 50%)
- Ausnahme: Pillentags/Badges (border-radius: 9999px)
- Klare, geradlinige Kanten
- Scharfe Konturen bei Karten, Buttons, Eingabefeldern, Modals

---

## 4. Logo – Wort-Bild-Marke

- Das offizielle NAK-Logo wird immer zusammen mit dem Schriftzug verwendet
- Anordnung: Logo-Symbol links, daneben:
  - Zeile 1: **Neuapostolische Kirche** (Medium, 500)
  - Zeile 2: *Berlin-Reinickendorf* (Light, 300)
- Mindestgröße: Logo-Symbol 44px (Desktop), 36px (Mobile)
- Das Logo darf nicht verzerrt, eingefärbt oder manipuliert werden

---

## 5. Header

- Weißer Hintergrund (`#ffffff`)
- 3px NAK-Blau-Linie am unteren Rand
- Logo + Wordmark links
- Profilbild rechts (kreisrund)
  - **Desktop**: Hover → Name + Abmelden ausfahren
  - **Mobile**: Klick → Name + Abmelden ausfahren
- Sticky mit Hide-on-scroll-down, Show-on-scroll-up

---

## 6. Footer

- Weißer Hintergrund
- 2px NAK-Blau-Linie oben
- Zentrierte Links: Impressum | Admin kontaktieren | Datenschutz
- Kein Release-Marker (entfernt)

---

## 7. Hauptmenü (Intranet Startseite)

- **Desktop**: Volle Bildschirmbreite, Grid-Layout
- **Mobile**: Zentriert, angepasstes Grid (2 Spalten)
- Buttons: Eckig, mit Schatten, Hover-Effekt (leichte Vergrößerung)
- Farbige Buttons gemäß Bereichszugehörigkeit (Blau, Lila, Rot, Schwarz, Grün)

---

## 8. Authorization-Seiten (Login, Registrierung, Passwort-Reset)

- Zentriertes Card-Layout
- NAK-Logo mit Wordmark oben
- Eckige Eingabefelder
- Eckige Buttons (Pillform für primäre Actions beibehalten als Ausnahme)
- Hintergrund: Leichter Gradient (Gray-50 → NAK-Blau-Light)

---

## 9. Profil-Seiten

- Zentriertes Layout, max. 600px Breite
- Großes, kreisrundes Profilbild mit Hover-Effekt
- Eckige Eingabefelder und Karten
- Klare Gruppenübersicht

---

## 10. Allgemeine Regeln

- **Schatten**: Dezent, mehrstufig (sm, md, lg, xl)
- **Übergänge**: 150ms (schnell), 250ms (standard), 400ms (langsam)
- **Abstände**: Konsistentes Spacing-System (0.25rem bis 4rem)
- **Responsive**: Mobile-first, Breakpoints bei 480px und 768px
- **Barrierefreiheit**: Focus-Styles beibehalten, ausreichender Kontrast