# Homepage Relaunch – Technische Dokumentation

**Datum:** 2026-06-21
**Theme:** drogentest-online (v1.4.0)
**Umsetzung:** Mockup-basiertes Redesign als medizinisches Fachportal

---

## Zusammenfassung

Die Startseite (`front-page.php`) wurde komplett neugestaltet und orientiert sich am Mockup (`/images/mockup/mockup-dto.png`). Ziel: professionelles Fachportal-Design statt Online-Shop-Optik. Alle WooCommerce-/Shop-UI-Elemente (Warenkorb, Wunschliste, Mein-Konto-Icons) wurden aus dem sichtbaren Bereich entfernt.

---

## Geänderte Dateien

| Datei | Typ | Beschreibung |
|-------|-----|-------------|
| `wp-content/themes/drogentest-online/front-page.php` | Rewrite | Komplett neu geschrieben (694 Zeilen), 13 Sektionen |
| `wp-content/themes/drogentest-online/functions.php` | Ergänzung | `dgt_pixabay_credit()` Helper hinzugefügt (~7 Zeilen) |

## Neue Dateien (Bilder)

| Datei | Größe | Quelle | Verwendung |
|-------|-------|--------|-----------|
| `images/home/hero-bg.webp` | 51 KB (1702x924) | Eigenes Mockup-Asset | Hero-Hintergrundbild |
| `images/home/aufklaerung.webp` | 24 KB (800x450) | Pixabay #3827738 (Belova59) | Discover-Kachel "Drogen Aufklärung" |
| `images/home/suchtberatung.webp` | 48 KB (800x450) | Pixabay #858005 (amosii) | Discover-Kachel "Suchtberatung" |
| `images/home/drogengesetze.webp` | 32 KB (800x450) | Pixabay #5281693 (MagnusGuenther) | Discover-Kachel "Drogengesetze" |
| `images/home/blog.webp` | 60 KB (800x450) | Pixabay #865073 (picjumbo_com) | Discover-Kachel "Blog" |

## WordPress-Medien (bereits in Media Library)

| Attachment ID | Datei | `wp_options`-Key |
|---------------|-------|-----------------|
| 1328 | teststreifen-analogicus.webp | `dgt_pixabay_teststrip_id` |
| 1329 | weltkarte-geralt.webp | `dgt_pixabay_worldmap_id` |
| 1330 | nachtfahrt-jplenio.webp | `dgt_pixabay_nightdrive_id` |

## Nicht geänderte Dateien

| Datei | Grund |
|-------|-------|
| `assets/css/main.css` | Alle bestehenden Klassen weiterverwendet |
| `inc/content-sections.php` | Helper-Funktionen unverändert genutzt |
| `inc/seo.php` | SEO-Meta wird per `dgt_seo_meta()` aufgerufen |
| `header.php` | Bereits Shop-frei, Navigation über WP-Menü |
| `footer.php` | Keine Änderungen erforderlich |

---

## Seitenstruktur (13 Sektionen)

| # | Sektion | CSS-Klasse | Quelle / Helper |
|---|---------|-----------|----------------|
| 1 | Hero mit Hintergrundbild | `.dgt-hero--bg` | Inline-Template |
| 2 | Trust-Bar (4 Vorteile) | `.dgt-trustbar` | Inline-Template |
| 3 | Quicklinks (4 Testarten) | `.dgt-quicklink` | Inline-Template |
| 4 | Entdecken & Beraten (4 Bild-Kacheln) | `.dgt-discover-card` | Inline + Pixabay-Bilder |
| 5 | Vertrauen & Qualität (4 Stats) | `.dgt-trust-section` | Inline-Template |
| 6 | Häufig gesuchte Drogentests | `.dgt-products-home` | `dgt_aff_products()` |
| 7 | Drogenwissen kompakt (8 Karten) | `.dgt-home-knowledge` | `dgt_link_cards()` |
| 8 | SEO-Content-Hub | `.dgt-home-hub` | Inline (SEO-Fließtext) |
| 9 | Beliebte Kategorien (20 Chips) | `.dgt-home-popular` | Inline-Template |
| 10 | Drogengesetze weltweit | `.dgt-home-dp-cats` | `dgt_dp_categories()` |
| 11 | Aktuelle Beiträge (4 Posts) | `.dgt-latest` | WP_Query |
| 12 | Hilfe & Beratung CTA | `.dgt-cta-band` | `dgt_cta_band()` |
| 13 | FAQ (10 Fragen + Schema) | `.dgt-home-faq` | `dgt_faq()` + FAQPage JSON-LD |

---

## Neues CSS (inline im Template)

Gesamtumfang: ~65 Zeilen in `<style>`-Block am Anfang von `front-page.php`.

| Komponente | Zeilen | Beschreibung |
|-----------|--------|-------------|
| `.dgt-hero--bg` | ~14 | Hero mit `::before` Hintergrundbild, Advantages-Liste |
| `.dgt-hero-img-right` | ~2 | Absolut positioniertes Produktbild rechts |
| `.dgt-trustbar` | ~7 | 4-Spalten-Grid Trust-Bar |
| `.dgt-quicklink` | ~8 | Flex-Cards mit Hover-Effekt |
| `.dgt-discover-card` | ~10 | Bild-Overlay-Kacheln mit Gradient |
| `.dgt-trust-section` | ~8 | Stats-Grid mit Hintergrund-Gradient |
| `.dgt-pixabay-credit` | ~1 | Pixabay-Quellenangaben |
| `.dgt-home-hub-card-img` | ~1 | Sidebar-Card-Bild |
| `.dgt-dp-map` | ~2 | Dekorative Weltkarte (float right) |

---

## Navigation

WordPress Primary Menu (ID 3) wurde auf 6 Einträge aktualisiert:

1. Drogentests kaufen → `/produkte/`
2. Drogen Aufklärung → `/einfach-aufgeklaert/`
3. Suchtberatung → `/suchtberatung/`
4. Blog → `/blog/`
5. Drogengesetze → `/einfach-aufgeklaert/drogenpolitik/`
6. Über uns → `/kontakt/`

---

## SEO

- **Einzelne H1:** "Drogentests kaufen – schnell, diskret & zuverlässig"
- **H2/H3-Hierarchie:** Korrekt durchgängig
- **Schema.org:** Organization + WebSite (aus `inc/seo.php`) + FAQPage (10 Fragen, inline JSON-LD)
- **Meta Description:** Via `dgt_seo_meta()` gesetzt
- **Open Graph / Twitter Cards:** Automatisch via `inc/seo.php`
- **Interne Verlinkung:** 30+ kontextuelle Links zu Substanz-, Ratgeber- und Produktseiten
- **20 Keyword-Chips:** Beliebte Kategorien mit title-Attributen

---

## Performance

- **Bilder:** Alle WebP, `loading="lazy"`, `decoding="async"`, `width`/`height` gesetzt
- **Hero-Hintergrundbild:** 51 KB WebP via CSS `background-image` (kein render-blocking)
- **Kachel-Bilder:** 24–60 KB je Bild, 800x450 px
- **Kein zusätzliches CSS/JS:** Alle Styles inline im Template, keine neuen externen Dateien
- **Bestehende Assets:** Bootstrap 5 + main.css + Inter Font weiterverwendet

---

## Pixabay-Lizenzen

Alle Pixabay-Bilder unterliegen der Pixabay Content License (kostenlose kommerzielle Nutzung, keine Namensnennung erforderlich). Quellenangaben wurden dennoch als Best Practice eingebaut:

- Belova59 (ID 3827738) — Labor/Pipette
- amosii (ID 858005) — Hände halten
- MagnusGuenther (ID 5281693) — Blaulicht/Streifenwagen
- picjumbo_com (ID 865073) — Laptop
- analogicus (ID 6961674) — Teststreifen (Media Library)
- geralt (ID 695164) — Weltkarte (Media Library)
- jplenio (ID 3404535) — Nachtfahrt (Media Library)

---

## Verifizierung

| Prüfpunkt | Status |
|-----------|--------|
| PHP-Syntax (`php8.4 -l`) | Fehlerfrei |
| HTTP 200 | Ja |
| Keine PHP-Errors in Ausgabe | Ja |
| Alle 13 Sektionen gerendert | Ja |
| Hero-Hintergrundbild lädt | Ja (200) |
| 4 Discover-Bilder laden | Ja (alle 200) |
| FAQPage JSON-LD vorhanden | Ja (10 Fragen) |
| Kein WooCommerce-Shop-UI | Ja (nur "Warenkorb" im Cookie-Hinweis) |
| Einzelne H1 | Ja |
| H2/H3-Hierarchie korrekt | Ja |