prepare intranet for first Dokploy deployment

2026-08-26 12:59:51 +02:00
parent 5cfe688bdc
commit 29dfb85fef
1321 changed files with 227234 additions and 0 deletions
@@ -0,0 +1,130 @@
+# 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