# Startseiten-Varianten — Design-Spec

- **Datum:** 2026-06-04
- **Projekt:** kotsch.tech (Laravel 12, Blade)

## Ziel
10 eigenständige Startseiten-Varianten unter `/index1` … `/index10`, je ein anderer
Layout-/Darstellungs-Ansatz, identische Marke. Die aktuelle Startseite
(`resources/views/welcome.blade.php`) bleibt **unverändert**. Zusätzlich eine
Übersichtsseite `/index-varianten` zum Durchklicken.

## Entscheidungen
- **SEO-Indexierung:** alle 10 indexierbar (`index,follow`) — auf Wunsch des Nutzers.
  Jede Variante erhält EIGENE Title/Description/H1. Hinweis: nach Auswahl der
  Gewinner-Variante die übrigen 9 auf `noindex` setzen oder löschen (Duplicate Content).
- **Inhalt:** jede Variante deckt dieselben Bereiche ab (vollwertiger Drop-in-Ersatz),
  nur anders dargestellt.
- **Brand fix** (Farben/Font/Logo/Nav/Footer), Layout/Darstellung frei.

## Technischer Vertrag (jede Variante)
- `@extends('layouts.app')`; nur `@section(...)` + content; **kein** eigenes
  `<main>/<nav>/<footer>` (Layout umschließt content bereits mit `<main>`).
- Scoped CSS mit Präfix `.vN-`; Hero-Top-Padding ≥120px (fixe Navi 92px hoch).
- Nur Brand-CSS-Variablen, keine neuen Farben. Plus Jakarta Sans, Font Awesome 7.
- Alle Bereiche verlinkt via `route()`: `windows.index`, `apple.index`,
  `android.index`, `web.templates`, `webtools.show`, `news.index`, `shop.index`,
  `hosting.index`, `it-hilfe.index`, `kontakt`, `documents.index`.
- Nur existierende Bilder: `img/logo-mark.png`, `img/logo-wordmark-solid-cropped.png`,
  `img/arthur-kotsch.jpg`. Sonst Font-Awesome-Icons / Inline-SVG / CSS.
- Genau ein `<h1>`, semantische Struktur, alt-Texte, `prefers-reduced-motion`,
  responsive 360–1920px, vanilla-JS null-safe, kein externes CDN.
- Keine `@section('robots')`/`@section('canonical')` (Default = indexierbar).

## Dateien
- `resources/views/index-varianten/index1.blade.php` … `index10.blade.php`
- `resources/views/index-varianten/overview.blade.php` → Route `/index-varianten`
- Routen in `routes/web.php`

## Die 10 Ansätze
1. Bento-Grid
2. Editorial / Magazin
3. App-Shell / Sidebar (Scrollspy)
4. Horizontal-Story-Deck
5. Terminal / Developer
6. Vertikale Timeline
7. Floating-3D-Canvas
8. Split-Screen / Diagonal
9. Minimal / Swiss
10. Interaktiver Tab-Explorer

## Orchestrierung
10 parallele Agenten (Workflow), je eine Datei → keine Schreibkonflikte.
Danach: Routen registrieren + Übersichtsseite bauen + visuelle Verifikation.