╔══════════════════════════════════════════════════════════════════════╗
║             KOTSCH.TECH — DESIGN SYSTEM REFERENZ                     ║
╚══════════════════════════════════════════════════════════════════════╝

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SCHRIFT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Hauptschrift:  Plus Jakarta Sans (400, 500, 700, 800)
Quelle:        @fontsource/plus-jakarta-sans (via app.css Vite)
               ODER Google Fonts CDN für Standalone-Seiten

Schriftgewichte:
  400  — Fließtext, Labels
  600  — Subtexte, Captions
  700  — UI-Beschriftungen, Buttons
  800  — Headlines, Kicker-Badges, Section-Titel
  900  — Große Hero-Überschriften

Headline-Stil:
  font-weight: 800–900
  letter-spacing: -2px bis -3px
  line-height: 0.93–1.1
  font-size: clamp(2.4rem, 7vw, 5.2rem)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
FARBEN — CSS-VARIABLEN (:root in app.css)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Hintergründe:
  --bg          #ffffff        Seiten-Hintergrund
  --bg-light    #f8fafc        Sections, Cards
  --bg-dark     #020617        Dunkle Sections (Eco-Bereich)

Text:
  --text-main   #0f172a        Primärtext (fast schwarz)
  --text-muted  #64748b        Sekundärtext, Subtexte
  --text-light  #cbd5e1        Deaktiviert, Placeholders

Hauptfarbe (Blau):
  --primary       #2563eb      CTA-Buttons, Links, Highlights
  --primary-dark  #1e40af      Hover-Zustände
  --primary-light #60a5fa      Soft-Highlights
  --primary-soft  rgba(37,99,235,0.12)   Badge-Hintergründe
  --primary-glow  rgba(37,99,235,0.25)   Glow-Effekte

Akzent (Lila):
  --accent      #7c3aed        Sekundäre Highlights

Erfolg (Grün):
  --success     #10b981        Bestätigungen, Verfügbar-Status

Rahmen:
  --border      #e2e8f0        Alle Linien und Card-Borders

Schatten:
  --shadow-soft  0 24px 60px -32px rgba(15,23,42,0.28)
  --shadow-lg    0 40px 90px -40px rgba(15,23,42,0.35)

Spezial-App-Farben (verwendet in iOS/Windows-Seiten):
  Campus/DE-Companion:  #008a9e (Teal)
  Windows-Seiten:       #0f172a (Dark Navy)
  Hackepeter-Tool:      #e11d48 (Rot)
  Morse-Tool:           #10b981 (Grün)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ABSTÄNDE & LAYOUT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Container-Breite:  max 1400px (--container-width)
Section-Padding:   120px 5%   (--section-padding)
Mobile-Padding:    clamp(20px, 5vw, 32px)

Nav-Höhe:          92px (position: fixed, top: 0)
→ Seiteninhalte brauchen: padding-top: 92px

Hero-Sections:     padding: 156px 5% 94px
Card-Radius:       --radius: 24px
Button min-height: 48px (--tap-min)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
KOMPONENTEN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Nav-Button (CTA):
  class="btn-nav"
  background: #0f172a → hover: #2563eb
  padding: 14px 28px, border-radius: 999px
  font-weight: 800

Primär-Button (App-Seiten):
  class="btn-apple-primary"
  background: #007aff, color: white
  padding: 12px 30px, border-radius: 50px

Kicker-Badge:
  display: inline-flex, padding: 7–8px 12–14px
  border-radius: 999px
  background: rgba(primary, 0.10–0.15)
  color: primary
  font-size: 0.72–0.75rem, font-weight: 900
  text-transform: uppercase, letter-spacing: 1.5–2px

Status-Badge "Verfügbar":
  background: #f0fdf4, color: #166534, border: 1px solid #bbf7d0
  padding: 4–6px 10–12px, border-radius: 999px
  font-size: 0.7–0.75rem, font-weight: 800

Status-Badge "In Entwicklung":
  background: #f1f5f9, color: #334155
  (class="app-status")

Cards:
  background: white, border: 1px solid #e2e8f0
  border-radius: 22–24px, padding: 28–32px
  box-shadow: var(--shadow-soft)

Hub-Hero (Sektions-Header):
  class="hub-hero"
  Hintergrund: weißes Radialgradient + Gitter-Overlay
  padding: 156px 5% 94px, text-align: center

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ICONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Font Awesome 6 Free  (via @fortawesome/fontawesome-free in app.css)
Prefix: "fas" (solid), "fab" (brands), "far" (regular)
Beispiele: fas fa-arrow-right, fab fa-apple, fas fa-download

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ANIMATIONEN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Reveal-Animation:   class="reveal" → IntersectionObserver in app.js
                    Elemente faden beim Scrollen ein
Hover-Transitions:  0.3s standard, transform: translateY(-2px)
                    box-shadow verstärkt sich

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
NEUE SEITEN ERSTELLEN (Blade-Template)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Standard-Seite mit Nav + Footer:
  @extends('layouts.app')
  @section('content')
    ...
  @endsection

Web-Tool:
  @extends('layouts.app')
  @section('content')
  <style>
    .tool-page { padding-top: 92px; /* nav-höhe */ ... }
  </style>
  <div class="tool-page">
    ...
  </div>
  @endsection

iOS-App-Seite (mit Phone-Vorschau):
  @extends('apple.apple_layout')
  @section('app-ui') ... @endsection    ← Phone-Screen
  @section('app-name', 'App Name')
  @section('app-desc', 'Beschreibung')
  @section('app-category', 'iOS App')
  @section('app-specs') <li>...</li> @endsection

Windows-App-Seite:
  @extends('demos.windows.app_layout')
  @section('app-ui') ... @endsection
  @section('app-description') ... @endsection
  @section('app-cta') ... @endsection
  @section('app-specs') <li>...</li> @endsection

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
WERBUNG (Google AdSense)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Publisher-ID:   ca-pub-4893145615904722  (in .env: ADSENSE_PUBLISHER_ID)
Auto-Ads-Script: automatisch in layouts/app.blade.php (alle Seiten)
Tool-Banner:    resources/views/tools/_ads_banner.blade.php
                → @include('tools._ads_banner') vor </body>-Äquivalent

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DATEISTRUKTUR (wichtigste Pfade)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
resources/
  css/app.css                    Haupt-CSS (Tailwind + Variablen + Nav/Footer)
  js/app.js                      Haupt-JS (Reveal-Animationen etc.)
  views/
    layouts/app.blade.php        Basis-Layout (Nav + Footer)
    welcome.blade.php            Startseite
    tools/                       Web-Tools
    demos/windows/               Windows-App-Seiten
    apple/                       iOS/macOS-App-Seiten
    android/                     Android-App-Seiten
    shop/                        Demo-Shop
    hosting/                     Hosting-Seiten

config/
  apple_apps.php                 iOS-App-Metadaten (App Store URLs, Preise)

public/
  img/                           Bilder (Icons, Screenshots)
  downloads/                     Download-Dateien (EXE-Versionen)