# Supp-Guide — Edit-Anleitung

> Wie du das Template bestückst. ~30-60 Min Aufwand wenn du deine Produkte schon im Kopf hast.

## Setup (einmalig, 2 Min)

1. **VS Code öffnen** → Ordner `Resource-Hub/supp-guide/` öffnen
2. **`index.html` öffnen** im Editor
3. **Live Server starten** (Rechtsklick auf `index.html` → "Open with Live Server")
   - Falls Extension nicht installiert: VS Code Extensions → "Live Server" (Ritwick Dey) → installieren
   - Alternative: `index.html` doppelklicken → öffnet im Browser, nach jeder Speicherung manuell Refreshen (F5)

→ Du hast jetzt links Code, rechts Browser-Preview. Änderung speichern = Browser refresht automatisch.

## Schritt 1 — Config anpassen (3 Zeilen, 30 Sek)

Springe ans Ende der `index.html` (Strg+End), finde diesen Block:

```js
const CONFIG = {
  code: "RHG",                                                    // ← dein Spar-Code
  brand: "@gigas_nutrition",                                      // ← der Brand-Tag
  affiliateBase: "https://gigasnutrition.com/?ref=david"          // ← deine Affiliate-URL
};
```

Diese 3 Werte einmal richtig setzen — wird automatisch überall eingesetzt (Sticky-Bar oben, Hero-Box, alle Produkt-Cards, Footer-Disclaimer).

## Schritt 2 — Produkt-Slots befüllen

Drück `Strg+F` → suche nach `PRODUKT-SLOT`. Springt zu jedem Slot. Jeder sieht so aus:

```html
<!-- PRODUKT-SLOT (Pick #1) — austauschen -->
<a href="#" class="pick" data-affiliate>
  <span class="pick-rank">#1</span>
  <span class="pick-tag">Pflicht</span>
  <div class="pick-name">[Produktname #1]</div>
  <div class="pick-desc">[1-Satz-Beschreibung: was es ist, warum unverhandelbar.]</div>
  <span class="pick-cta">Mit Code <span data-code></span></span>
</a>
```

**Was du änderst:**
- `[Produktname #1]` → echter Produktname (z.B. `Gigas Whey Vanille`)
- `[1-Satz-Beschreibung...]` → dein Text (max 1-2 Sätze, konkret)
- `pick-tag` Text (`Pflicht` / `Daily Driver` / `Situativ` / `Sleep` / `Recovery`) → anpassen oder löschen
- `href="#"` → optional durch konkreten Produkt-Link ersetzen (sonst zeigt's auf deine Affiliate-Basis)

**Nicht ändern:**
- `class="..."` Attribute (Styling)
- `data-affiliate`, `data-code` Attribute (Logik)
- `<span data-code></span>` Element (wird automatisch befüllt)

## Schritt 3 — Sektionen anpassen

7 Sektionen aktuell: Top-8 / Signature / Basics / Health / Performance / Recovery / Anti-Liste.

**Sektion umbenennen:** Suche nach `<h2 class="section-title">`, ändere den Text dazwischen.

**Sektion löschen:** Suche nach `<section id="...">`, markiere die ganze Sektion (vom öffnenden `<section>` bis zum schließenden `</section>`), löschen. Den Anker im `<nav class="anchor-nav">` oben auch löschen (Zeilen ~136-143).

**Sektion hinzufügen:** Kopiere eine bestehende `<section>`, ändere `id` und `<h2>`, fülle Produkte.

## Schritt 4 — Anti-Liste füllen (deine Differenzierung!)

Madsen hat keine. Das ist dein Vertrauens-Move. Suche nach `ANTI-SLOT`:

```html
<div class="cat-item" style="opacity:.7; ...">
  <div class="cat-item-text">
    <div class="cat-name" style="text-decoration: line-through; ...">[Hype-Produkt 1]</div>
    <div class="cat-desc">[Warum nicht: Studienlage / Marketing-Versprechen.]</div>
  </div>
</div>
```

3-5 Produkte die du explizit NICHT empfiehlst + kurze Begründung pro Produkt.

## Schritt 5 — Testen

- Browser-Preview anschauen (sollte sofort sichtbar sein bei Live Server)
- Mobile testen: Browser-DevTools öffnen (F12) → Device Toggle (Strg+Shift+M) → iPhone-Format
- Alle Links klicken — gehen sie wohin sie sollen?
- Sticky-Code-Bar oben bleibt sie beim Scrollen?

## Schritt 6 — Export als PDF (optional, für DM-Versand Phase 1)

1. Im Browser: `Strg+P` (Drucken)
2. Ziel: "Als PDF speichern"
3. Optionen: Hintergrundgrafiken aktivieren, Ränder minimal
4. Speichern als `supp-stack-dr-coaching.pdf`

→ PDF kannst du dann per DM verschicken. Print-CSS ist im Template eingebaut.

## Schritt 7 — Deploy (Phase 2, später)

Wenn du soweit bist die Seite live zu nehmen:
- Vercel-Account → neues Projekt → diesen Ordner verbinden
- Subdomain: `guides.dr-coaching.info/supp-stack` o.ä.
- Siehe `_master/cross-project-plans/resource-hub-funnel.md` für Distribution-Plan

## Häufige Stolpersteine

| Problem | Fix |
|---|---|
| Code zeigt nicht "RHG" sondern leer | Config-Block am Ende der Datei prüfen, Anführungszeichen vergessen? |
| Affiliate-Links gehen ins Leere | `affiliateBase` in CONFIG setzen oder pro Link `href="..."` setzen |
| Browser refresht nicht automatisch | Live Server muss aktiv laufen (rechts unten in VS Code "Port: 5500" sichtbar) |
| Layout zerschossen nach Edit | `<a>`, `<div>`, `<span>` Tags richtig geschlossen? Suche fehlende `>` oder `</...>` |

## Kein Coden-Skill nötig

Du tauschst nur Texte zwischen `[...]` Klammern aus. HTML-Struktur (Tags) nicht anfassen, dann kann nichts kaputtgehen.

Bei Problemen: Datei nicht speichern, alle Änderungen verwerfen (`Strg+Z` mehrmals), neu starten.