# Startseiten-Konzept kotsch.tech — „Werkkatalog" (auf Basis von Demo-Vorlage 9)

> **Status:** Konzept / Auftrag. Stand 2026-06-23.
> **Datei zum Bauen:** `resources/views/welcome.blade.php` (die echte Startseite).
> **Referenz-Look:** Demo-Vorlage **9** — `resources/views/demos/9.blade.php`, live unter `/demo/9` (von Arthur als „geil" bestätigt).

---

## 1. Auftrag in einem Satz

Die echte Startseite wird im **Layout-/Präsentations-Stil von Vorlage 9** („Risograph-Werkkatalog") neu aufgebaut — **aber** mit dem **bestehenden Header** und den **bestehenden Markenfarben**. Alle aktuellen Inhalte bleiben erhalten, nur **wie** sie dargestellt werden, wird perfektioniert.

## 2. Harte Vorgaben (nicht verhandelbar)

1. **Header bleibt gleich.** Die globale Navigation `<nav class="site-nav">` (Logo-Wortmarke + Welt-Links + Webtools-Dropdown) aus `resources/views/layouts/app.blade.php` bleibt sichtbar. **NICHT** ausblenden (das war der Fehler der Demos: `nav{display:none}`). Die neue Startseite läuft also normal über `@extends('layouts.app')` **mit** sichtbarer Navigation und sichtbarem Footer.
2. **Farben bleiben gleich.** Es werden die Marken-Tokens verwendet, **nicht** die Riso-Farben (Cream/Indigo/Coral) von Vorlage 9:
   - `--primary` (#2563eb, Blau) · `--accent` (#7c3aed, Violett) · `--accent-2` (#FF5D2E, Orange)
   - Pro Welt die **Akzentfarbe aus der `SubdomainRegistry`** (`$t['accent']`, im aktuellen Code als `--c` gesetzt) — diese Welt-Farben bleiben erhalten.
   - Heller Untergrund wie bisher (#ffffff / #fafbfd Wechsel), Tinte #0f172a / #334155. **Kein** Dark Mode.
3. **Alle Inhalte abbilden.** Sämtliche aktuellen Inhalte der Startseite bleiben (siehe §4). Es wird nichts erfunden und nichts Inhaltliches weggelassen.
4. **Darstellung perfektionieren.** Der Inhalt wird im Werkkatalog-Stil klarer, dichter und eleganter präsentiert (siehe §5).

## 3. Was von Vorlage 9 übernommen wird (der Look) — übersetzt auf die Markenfarben

Die **Gestaltungs-Prinzipien** von Vorlage 9, NICHT deren Farben:

- **Werkkatalog-Idee:** die Welten als nummerierte „Platten/Plates" (01–09) eines Katalogs, statt der bisherigen Vollbild-Video-Bänder.
- **Asymmetrisches Editorial-Raster:** 6-Spalten-Grid, Flaggschiff-Welten breiter (span 3), Rest span 2 → lebendige, redaktionelle Komposition statt monotoner Reihe.
- **Karten mit Charakter:** feiner Rahmen + **harter Offset-Schatten** in der jeweiligen Welt-Akzentfarbe; **„Press-down"-Hover** (Karte verschiebt sich um den Schatten-Offset, Schatten kollabiert).
- **Monospace-Akzente:** Plattennummern, Kennzahlen, kleine Labels/URLs in Monospace (Sachlichkeit/Technik-Anmutung).
- **Masthead-Kicker:** dünne Impressumszeile oben (Ausgabe/Ort/Marke) zwischen zwei Linien.
- **Große Versal-Display-Typo** für Überschriften (vorhandene Schrift „Plus Jakarta Sans"/„Space Grotesk" nutzen), enge Zeilenhöhe.
- **Signatur-Detail:** ein dezentes „Stempel/Siegel"-Element bzw. Geisterziffern hinter Flaggschiff-Karten — als wiedererkennbarer Akzent, in Markenfarbe.
- **Kontakt-Coupon:** der CTA am Ende als „Bestellschein/Anfrage"-Block mit gestricheltem Rahmen.
- **Feinschliff:** `prefers-reduced-motion` respektieren, Hover/Focus sichtbar, sauberer Tastatur-Fokus.

> Kurz: die **Komposition & Mikro-Interaktion** von #9, gekleidet in das **kotsch.tech-Blau/Orange + Welt-Akzente**.

## 4. Inhalts-Inventar (alles muss vorkommen)

**Marke:** Arthur Kotsch — Student Digital Engineering & Entwickler aus Lichtenstein (Sachsen). Kontakt über `route('kontakt')` / `/kontakt`.

**Kennzahlen-Leiste** (dynamische Blade-Werte verwenden, keine festen Zahlen hardcoden):
- `{{ $appCount }}` iOS- & Mac-Apps · `9` Windows-Tools · `{{ $toolCount }}` Web-Tools · `{{ number_format($articleCount,0,',','.') }}` Artikel

**Die 9 Welten** (Quelle: `SubdomainRegistry`, Reihenfolge wie bisher; Label/Tagline/Akzent kommen aus der Registry, Links via `$registry->url($key)`):

| Nº | Welt | Kurzbeschreibung | Ziel |
|----|------|------------------|------|
| 01 | iOS & Mac Apps | `{{ $appCount }}` Apps im App Store (iPhone · iPad · Mac), regelmäßige Updates. **Live-Block „zuletzt aktualisiert"** beibehalten (echte App-Icons/Versionen via `AppStoreService`). | `$registry->url('ios')` |
| 02 | Windows | 9 Programme — Cleaner · Commander · Notes · Taskmanager · CodeEditor. Direkt-Download. | `$registry->url('windows')` |
| 03 | Android | Native Apps, in Entwicklung, bald im Play Store. | `$registry->url('android')` |
| 04 | Web-Tools | `{{ $toolCount }}` Tools im Browser — ohne Login, ohne Installation, vieles lokal. | `$registry->url('webtools')` |
| 05 | Shop | Digitale Produkte, Sofort-Download, sichere Zahlung. | `$registry->url('shop')` |
| 06 | Hosting | Managed Webhosting, vServer/VPS, DSGVO-konform. | `$registry->url('hosting')` |
| 07 | News | Ratgeber & Tutorials, verständlich erklärt, regelmäßig Neues. | `$registry->url('news')` |
| 08 | IT-Hilfe | Vor Ort & Remote (Region Glauchau–Lichtenstein), „keine Lösung = kein Preis". | `$registry->url('it-hilfe')` |
| 09 | Webdesign | Studio & Vorlagen, 20 Branchen-Demos, modernes Webdesign. | `$registry->url('webdesign')` |

**Versteckte H1** (SEO) bleibt erhalten. **Zweisprachigkeit** (`$tr`/`$en`) bleibt erhalten.

**Bereits entfernt & bleibt entfernt** (war doppelt): die unteren Sektionen „News & Wissen / Neueste Artikel", „Web-Tools / Beliebte Werkzeuge", „Über KOTSCH.TECH" — diese Inhalte sind über Header, Welt-Karten und Footer abgedeckt und kommen **nicht** zurück.

## 5. Sektions-Aufbau der neuen Startseite (von oben nach unten)

1. **(Header global)** — bestehende `site-nav`, unverändert.
2. **Masthead-Kicker** — dünne Zeile: „KOTSCH.TECH — Werkkatalog" · „Lichtenstein, Sachsen" · Jahr. In Marken-Tinte, Monospace.
3. **Hero** — große Versal-Headline (Marke/Claim) + ein Satz Subline + primärer CTA (z. B. „Projekt anfragen" → `/kontakt`). Optional dezentes Signatur-/Stempel-Element in `--accent-2`.
4. **Kennzahlen-Leiste** — 4 Felder (s. §4), Monospace-Zahlen, in Markenfarbe.
5. **Werkkatalog — die 9 Welten als Platten** (Kernstück): asymmetrisches Grid, Flaggschiffe (iOS, Web-Tools, IT-Hilfe, Webdesign) breiter; jede Platte = Nummer + Icon + Titel + Tagline + CTA-Pfeil; Offset-Schatten & Press-down-Hover in der **Welt-Akzentfarbe**. Die **iOS-Platte** zeigt zusätzlich den Live-„zuletzt aktualisiert"-Block.
6. **Kontakt-Coupon** — „Anfrage einsenden"-Block (gestrichelter Rahmen) → `/kontakt`.
7. **(Footer global)** — bestehender Footer, unverändert.

## 6. Technik & Qualität

- Datei: `resources/views/welcome.blade.php`, weiterhin `@extends('layouts.app')` + `@section('content')`. **Kein** `nav/footer`-Reset.
- CSS scoped mit eigenem Präfix (z. B. `hp9-`), damit nichts mit Layout/anderen Seiten kollidiert. Inline-`<style>` im View (wie bisher).
- **Performance:** keine erneute Schleife über alle 1.412 Artikeldateien (die alte `$recentArticles`-Bremse bleibt entfernt). App-Store-Daten weiter über den gecachten `AppStoreService` (mit `rescue`-Fallback).
- **Responsive:** Grid bricht sauber 6→2→1 Spalten, kein horizontaler Overflow < 380 px (clamp/auto-fit/minmax, `min-width:0` auf Grid-Kinder).
- **Barrierefreiheit:** genau eine H1, Heading-Reihenfolge h1→h2→h3, sichtbarer `:focus-visible`, ausreichender Kontrast, `aria` wo nötig, `prefers-reduced-motion` respektiert.
- **SEO:** Title/Meta/`$tr` wie gehabt; interne Links auf die kanonischen Subdomain-URLs (`$registry->url(...)`).
- **Verifikation vor „fertig":** lokal + live HTTP 200, kein Blade-Fehler, alle 9 Welten-Links vorhanden, Screenshot Desktop + Mobile.

## 7. Abgrenzung

- Die übrigen Demo-Vorlagen (`/demo/1–8`, `/demo/10`) sind **verworfen** und können gelöscht werden. **Vorlage 9 bleibt** als Referenz (`/demo/9`).
- Es wird **keine** zweite/parallele Startseite gebaut — die echte `welcome.blade.php` wird umgesetzt.