Initial commit: Vanity on Tour Linktree landing page

- Static HTML/CSS Linktree-style landing page - Responsive design with dark theme - Project showcase (StaySense, Expense Logbook, Blog, RSS-Bot) - Social media links and contact information - GitHub Actions workflow for automated deployment - Complete documentation and setup instructions 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2026-02-24 11:13:29 +01:00 · 2026-02-24 11:13:29 +01:00 · 1b5762a849
commit 1b5762a849
11 changed files with 764 additions and 0 deletions
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git init)",
+      "Bash(git add .)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@ -0,0 +1,29 @@
+name: Deploy go.vanityontour.de
+
+on:
+  push:
+    branches: [ "main" ]
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install rsync
+        run: sudo apt-get update && sudo apt-get install -y rsync
+
+      - name: Setup SSH
+        shell: bash
+        run: |
+          mkdir -p ~/.ssh
+          echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+          ssh-keyscan -p "${{ secrets.SSH_PORT }}" "${{ secrets.SSH_HOST }}" >> ~/.ssh/known_hosts
+
+      - name: Deploy via rsync
+        shell: bash
+        run: |
+          rsync -az --delete             --exclude ".git/"             --exclude ".github/"             -e "ssh -p ${{ secrets.SSH_PORT }} -i ~/.ssh/id_ed25519"             ./             "${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }}:${{ secrets.DEPLOY_PATH }}"
--- a/1
+++ b/1
@ -0,0 +1 @@
+go.vanityontour.de
--- a/CODEX_NOTES.md
+++ b/CODEX_NOTES.md
@ -0,0 +1,38 @@
+# CODEX_NOTES.md – Deploy & Betrieb (Copy/Paste für Codex)
+
+## Ziel
+Statische Landingpage soll automatisch bei jedem Push auf `main` nach `go.vanityontour.de` deployed werden.
+
+## Repo-Struktur
+- `index.html`
+- `assets/css/style.css`
+- `assets/img/*`
+- `.github/workflows/deploy.yml`
+
+## Deployment-Mechanik
+- GitHub Actions Workflow:
+  - Checkout Repo
+  - SSH-Key in Runner schreiben
+  - `rsync` der Dateien auf Server
+  - Optional: Berechtigungen setzen
+
+## GitHub Secrets (Actions)
+- `SSH_HOST`: Hostname oder IP
+- `SSH_USER`: SSH-User
+- `SSH_PORT`: SSH-Port (default 22)
+- `SSH_PRIVATE_KEY`: Private Key (PEM/OPENSSH)
+- `DEPLOY_PATH`: Zielpfad auf dem Server (CloudPanel: `/home/cloudpanel/htdocs/go.vanityontour.de/`)
+
+## Server Anforderungen
+- SSH aktiv
+- `rsync` installiert
+- Zielordner existiert und ist beschreibbar
+- Webserver (Nginx/Apache) zeigt auf `DEPLOY_PATH`
+
+## DNS
+- `go.vanityontour.de` → A/AAAA auf Server-IP
+- SSL via Let's Encrypt (CloudPanel kann das)
+
+## Hinweise
+- OpenGraph Bild: ersetze `assets/img/og.jpg` (1200x630)
+- Links in `index.html` aktualisieren (App Store, GitHub Repo URLs, Social URLs)
--- a/DOMAINS.md
+++ b/DOMAINS.md
@ -0,0 +1,54 @@
+# Vanity on Tour – Domain Brainstorm
+
+## Ultra Kurz (Branding-Level)
+- vot.one
+- vot.zone
+- vot.page
+- vot.run
+- vot.tools
+- vot.live
+- vot.link
+- vot.bio
+- vot.to
+- vot.app
+
+## Mit Vanity im Fokus
+- vanitygo.de
+- vanityhub.de
+- vanity.tools
+- vanity.live
+- vanity.page
+- vanity.bio
+- vanity.click
+- vanity-now.de
+- vanity.app
+- vanity.run
+
+## Vanlife + Tech Touch
+- vanitytech.de
+- vantech.life
+- vanity.dev
+- vanity.tools
+- vot.dev
+- vanity.digital
+- vanity.systems
+- vanity.space
+- vanity.network
+- vot.systems
+
+## Persönlicher Ansatz
+- olivergo.de
+- go-oliver.de
+- giertz.link
+- giertz.tech
+- giertz.dev
+
+---
+
+## Empfohlene Favoriten
+
+1. vot.to
+2. vanity.link
+3. vot.app
+4. vanity.tools
+5. go.vanityontour.de
--- a/README.md
+++ b/README.md
@ -0,0 +1,62 @@
+# go.vanityontour.de – Static Landing
+
+Diese Seite ist **komplett statisch** (HTML/CSS). Kein Build-Step, kein Node, kein Stress.
+
+## Lokal testen
+Einfach den Ordner öffnen – oder z.B. mit Python:
+
+```bash
+python3 -m http.server 8080
+```
+
+Dann im Browser: http://localhost:8080
+
+## Links anpassen
+In `index.html` sind ein paar **Platzhalter-Links** (z.B. GitHub Repo / App-Store). Ersetze sie durch deine echten URLs.
+
+---
+
+# Deployment via GitHub Actions (SSH + rsync)
+
+Die Workflow-Datei liegt hier:
+`.github/workflows/deploy.yml`
+
+## Voraussetzungen auf dem Server
+- SSH-Zugriff
+- Zielverzeichnis existiert (z.B. CloudPanel):
+  - `/home/cloudpanel/htdocs/go.vanityontour.de/` (häufig)
+  - oder dein eigener Pfad
+
+- `rsync` installiert:
+  - Debian/Ubuntu: `sudo apt-get update && sudo apt-get install -y rsync`
+
+## GitHub Secrets anlegen (Repo → Settings → Secrets and variables → Actions)
+- `SSH_HOST` (z.B. `your-server.example`)
+- `SSH_USER` (z.B. `root` oder `cloudpanel`)
+- `SSH_PORT` (z.B. `22`)
+- `SSH_PRIVATE_KEY` (private key für den Deploy-User)
+- `DEPLOY_PATH` (z.B. `/home/cloudpanel/htdocs/go.vanityontour.de/`)
+
+## DNS (go.vanityontour.de)
+Setze einen **A-Record** (oder AAAA) auf die Server-IP.
+Alternativ ein CNAME auf eine passende Ziel-Subdomain, wenn du das so betreibst.
+
+## Nginx (Beispiel)
+Wenn du Nginx selbst konfigurierst:
+
+```nginx
+server {
+  server_name go.vanityontour.de;
+  root /home/cloudpanel/htdocs/go.vanityontour.de;
+  index index.html;
+
+  location / {
+    try_files $uri $uri/ =404;
+  }
+}
+```
+
+Danach:
+```bash
+sudo nginx -t && sudo systemctl reload nginx
+```
--- a/assets/css/style.css
+++ b/assets/css/style.css
@ -0,0 +1,284 @@
+:root{
+  --bg:#0b0f14;
+  --panel:#0f1720;
+  --panel2:#0c141c;
+  --text:#e9eef6;
+  --muted:#a8b3c2;
+  --line:rgba(255,255,255,.10);
+  --accent:#ff9b54;
+  --accent2:#ffd29a;
+  --shadow: 0 18px 60px rgba(0,0,0,.45);
+  --radius:18px;
+  --max:1100px;
+  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
+}
+
+*{ box-sizing:border-box; }
+html,body{ height:100%; }
+body{
+  margin:0;
+  font-family:var(--font);
+  background: radial-gradient(1200px 700px at 20% -10%, rgba(255,155,84,.18), transparent 65%),
+              radial-gradient(900px 600px at 85% 5%, rgba(255,210,154,.12), transparent 60%),
+              var(--bg);
+  color:var(--text);
+  line-height:1.55;
+}
+
+a{ color:inherit; text-decoration:none; }
+a:hover{ text-decoration:underline; }
+
+.container{
+  width: min(var(--max), calc(100% - 40px));
+  margin: 0 auto;
+}
+
+.skip{
+  position:absolute; left:-999px; top:auto;
+  width:1px; height:1px; overflow:hidden;
+}
+.skip:focus{
+  left:20px; top:16px; width:auto; height:auto;
+  padding:10px 14px; border-radius:10px;
+  background:var(--panel); border:1px solid var(--line);
+  z-index:999;
+}
+
+.site-header{
+  position:sticky; top:0; z-index:50;
+  background: rgba(11,15,20,.75);
+  backdrop-filter: blur(10px);
+  border-bottom:1px solid var(--line);
+}
+.header-inner{
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+  padding: 14px 0;
+  gap:16px;
+}
+
+.brand{ display:flex; align-items:center; gap:12px; }
+.brand-mark{ filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
+.brand-title{ font-weight:800; letter-spacing:.2px; }
+.brand-sub{ font-size:.92rem; color:var(--muted); }
+
+.top-nav{ display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
+.nav-link{
+  padding:8px 10px;
+  border-radius:10px;
+  border:1px solid transparent;
+  color:var(--muted);
+}
+.nav-link:hover{
+  text-decoration:none;
+  color:var(--text);
+  border-color: var(--line);
+  background: rgba(255,255,255,.03);
+}
+
+.hero{ padding: 56px 0 36px; }
+.hero-inner{
+  display:grid;
+  grid-template-columns: 1.2fr .8fr;
+  gap: 28px;
+  align-items:center;
+}
+.kicker{
+  display:inline-block;
+  padding:6px 10px;
+  border-radius:999px;
+  border:1px solid var(--line);
+  background: rgba(255,255,255,.03);
+  color:var(--muted);
+  margin:0 0 14px;
+}
+h1{
+  margin:0 0 14px;
+  font-size: clamp(2.0rem, 3.4vw, 3.2rem);
+  line-height:1.1;
+  letter-spacing:-.6px;
+}
+.accent{ color: var(--accent2); }
+.lead{
+  margin:0 0 18px;
+  color:var(--muted);
+  max-width: 52ch;
+}
+
+.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
+.btn{
+  display:inline-flex; align-items:center; justify-content:center;
+  padding: 11px 14px;
+  border-radius: 12px;
+  border:1px solid var(--line);
+  background: rgba(255,255,255,.03);
+  box-shadow: 0 0 0 rgba(0,0,0,0);
+  font-weight:700;
+  transition: transform .12s ease, background .12s ease, border-color .12s ease;
+  white-space:nowrap;
+}
+.btn:hover{ text-decoration:none; transform: translateY(-1px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
+.btn.primary{
+  border-color: rgba(255,155,84,.55);
+  background: linear-gradient(180deg, rgba(255,155,84,.28), rgba(255,155,84,.10));
+}
+.btn.ghost{ color:var(--text); }
+
+.hero-badges{ display:flex; gap:10px; flex-wrap:wrap; }
+.badge{
+  font-size:.88rem;
+  padding:6px 10px;
+  border-radius:999px;
+  border:1px solid var(--line);
+  color:var(--muted);
+  background: rgba(255,255,255,.02);
+}
+
+.hero-art{
+  color: var(--accent);
+  background: linear-gradient(180deg, rgba(255,155,84,.16), rgba(255,155,84,.05));
+  border: 1px solid rgba(255,255,255,.10);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 14px;
+}
+.hero-art svg{ width:100%; height:auto; display:block; }
+
+.section{ padding: 44px 0; }
+.section.alt{
+  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+.section-head h2{
+  margin:0 0 6px;
+  font-size: 1.6rem;
+  letter-spacing:-.2px;
+}
+.section-head p{ margin:0 0 18px; color:var(--muted); }
+
+.grid{
+  display:grid;
+  grid-template-columns: repeat(2, minmax(0,1fr));
+  gap: 16px;
+}
+.card{
+  border-radius: var(--radius);
+  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
+  border:1px solid var(--line);
+  box-shadow: 0 10px 40px rgba(0,0,0,.25);
+  padding: 18px;
+  display:flex;
+  flex-direction:column;
+  justify-content:space-between;
+  min-height: 210px;
+}
+.card h3{ margin:8px 0 10px; font-size:1.25rem; }
+.card p{ margin:0 0 14px; color:var(--muted); }
+
+.card-actions{ display:flex; gap:10px; flex-wrap:wrap; }
+.pill{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  padding: 5px 10px;
+  border-radius: 999px;
+  background: rgba(255,155,84,.18);
+  border:1px solid rgba(255,155,84,.35);
+  font-size:.85rem;
+  font-weight:800;
+  color: var(--accent2);
+}
+.pill.subtle{
+  background: rgba(255,255,255,.05);
+  border-color: var(--line);
+  color: var(--muted);
+}
+
+.note{
+  margin-top: 16px;
+  padding: 14px 16px;
+  border-radius: 14px;
+  border:1px dashed rgba(255,255,255,.18);
+  background: rgba(255,255,255,.02);
+  color: var(--muted);
+}
+
+.split{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap: 18px;
+  flex-wrap:wrap;
+}
+.support-actions{ display:flex; gap:10px; flex-wrap:wrap; }
+
+.social{
+  display:flex;
+  gap:10px;
+  flex-wrap:wrap;
+  margin-bottom: 18px;
+}
+.social-link{
+  border:1px solid var(--line);
+  background: rgba(255,255,255,.03);
+  padding: 10px 12px;
+  border-radius: 12px;
+  color: var(--text);
+}
+.social-link:hover{ text-decoration:none; transform: translateY(-1px); }
+
+.contact{
+  border-radius: var(--radius);
+  border:1px solid var(--line);
+  background: rgba(255,255,255,.02);
+  padding: 16px;
+}
+.contact h3{ margin:0 0 8px; }
+.fineprint{ margin:10px 0 0; color:var(--muted); font-size:.92rem; }
+
+.faq{
+  border-radius: var(--radius);
+  border:1px solid var(--line);
+  background: rgba(255,255,255,.02);
+  padding: 12px 14px;
+  margin: 10px 0;
+}
+.faq summary{
+  cursor:pointer;
+  font-weight:800;
+}
+.faq-body{ color:var(--muted); padding-top: 10px; }
+code{
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: .95em;
+  background: rgba(255,255,255,.06);
+  border: 1px solid var(--line);
+  padding: 2px 6px;
+  border-radius: 8px;
+}
+
+.site-footer{
+  padding: 22px 0;
+  border-top:1px solid var(--line);
+  color: var(--muted);
+}
+.footer-inner{
+  display:flex;
+  justify-content:space-between;
+  align-items:flex-start;
+  gap: 12px;
+  flex-wrap:wrap;
+}
+.footer-links{ display:flex; gap:12px; flex-wrap:wrap; }
+.footer-links a{ color: var(--muted); }
+.footer-links a:hover{ color: var(--text); text-decoration:none; }
+
+.muted{ color: var(--muted); }
+
+@media (max-width: 900px){
+  .hero-inner{ grid-template-columns: 1fr; }
+  .hero-art{ order: -1; }
+  .grid{ grid-template-columns: 1fr; }
+}
--- a/assets/img/favicon.svg
+++ b/assets/img/favicon.svg
@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#ff9b54"/>
+      <stop offset="1" stop-color="#ffd29a"/>
+    </linearGradient>
+  </defs>
+  <rect x="8" y="8" width="48" height="48" rx="14" fill="url(#g)" opacity="0.95"/>
+  <path d="M18 39h28c3 0 6 2 6 5v4H12v-4c0-3 3-5 6-5z" fill="#0b0f14" opacity="0.35"/>
+  <path d="M22 37l5-14h14l5 14" stroke="#0b0f14" stroke-opacity="0.55" stroke-width="4" stroke-linecap="round"/>
+  <circle cx="22" cy="48" r="4" fill="#0b0f14" opacity="0.55"/>
+  <circle cx="42" cy="48" r="4" fill="#0b0f14" opacity="0.55"/>
+</svg>
--- a/assets/img/og.jpg
+++ b/assets/img/og.jpg
@ -0,0 +1,2 @@
+This is a placeholder file. Replace it with a real OpenGraph image (recommended: 1200x630 JPG/PNG) at:
+assets/img/og.jpg
--- a/assets/img/van.svg
+++ b/assets/img/van.svg
@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  <path d="M14 40h34c4 0 8 3 8 7v5H6v-5c0-4 4-7 8-7z" fill="#ff9b54" fill-opacity="0.22"/>
+  <path d="M20 38l6-16h20l6 16" stroke="#ffd29a" stroke-opacity="0.85" stroke-width="4" stroke-linecap="round"/>
+  <circle cx="20" cy="52" r="4.5" fill="#ffd29a" fill-opacity="0.9"/>
+  <circle cx="44" cy="52" r="4.5" fill="#ffd29a" fill-opacity="0.9"/>
+  <path d="M27 28h10" stroke="#ffd29a" stroke-opacity="0.85" stroke-width="4" stroke-linecap="round"/>
+</svg>
--- a/index.html
+++ b/index.html
@ -0,0 +1,264 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <meta name="description" content="Vanity on Tour: Vanlife trifft Technik – Apps, Tools, Blog & Projekte." />
+  <title>Vanity on Tour – Go</title>
+
+  <!-- Open Graph -->
+  <meta property="og:title" content="Vanity on Tour – Go" />
+  <meta property="og:description" content="Vanlife trifft Technik – Apps, Tools, Blog & Projekte an einem Ort." />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://go.vanityontour.de/" />
+  <meta property="og:image" content="https://go.vanityontour.de/assets/img/og.jpg" />
+
+  <link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml" />
+  <link rel="stylesheet" href="/assets/css/style.css" />
+</head>
+
+<body>
+  <a class="skip" href="#content">Zum Inhalt springen</a>
+
+  <header class="site-header">
+    <div class="container header-inner">
+      <div class="brand">
+        <img class="brand-mark" src="/assets/img/van.svg" alt="" width="40" height="40" />
+        <div class="brand-text">
+          <div class="brand-title">Vanity on Tour</div>
+          <div class="brand-sub">Vanlife trifft Technik</div>
+        </div>
+      </div>
+
+      <nav class="top-nav" aria-label="Schnellzugriff">
+        <a class="nav-link" href="#projekte">Projekte</a>
+        <a class="nav-link" href="#support">Support</a>
+        <a class="nav-link" href="#social">Social</a>
+      </nav>
+    </div>
+  </header>
+
+  <main id="content">
+    <section class="hero">
+      <div class="container hero-inner">
+        <div class="hero-copy">
+          <p class="kicker">🚐 unterwegs. technisch. ehrlich.</p>
+          <h1>Alles Wichtige von <span class="accent">Vanity on Tour</span> – an einem Ort.</h1>
+          <p class="lead">
+            Tools, Apps, Blog & Projekte – für Menschen, die lieber frei stehen als still sitzen.
+          </p>
+
+          <div class="hero-cta">
+            <a class="btn primary" href="#projekte">Aktuelle Projekte</a>
+            <a class="btn ghost" href="https://vanityontour.de" target="_blank" rel="noopener">Zum Blog</a>
+          </div>
+
+          <div class="hero-badges" aria-label="Highlights">
+            <span class="badge">Schnell</span>
+            <span class="badge">Mobile‑first</span>
+            <span class="badge">DSGVO‑freundlich</span>
+          </div>
+        </div>
+
+        <div class="hero-art" aria-hidden="true">
+          <!-- Lightweight inline SVG (no external images required) -->
+          <svg viewBox="0 0 540 420" role="img" aria-label="">
+            <defs>
+              <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+                <stop offset="0%" stop-color="currentColor" stop-opacity="0.35" />
+                <stop offset="100%" stop-color="currentColor" stop-opacity="0.05" />
+              </linearGradient>
+              <filter id="b" x="-20%" y="-20%" width="140%" height="140%">
+                <feGaussianBlur stdDeviation="18" />
+              </filter>
+            </defs>
+            <rect x="40" y="40" width="460" height="300" rx="26" fill="url(#g)" />
+            <circle cx="390" cy="140" r="78" fill="currentColor" opacity="0.14" filter="url(#b)"/>
+            <circle cx="180" cy="260" r="96" fill="currentColor" opacity="0.10" filter="url(#b)"/>
+            <path d="M140 250h230c20 0 36 16 36 36v22H104v-22c0-20 16-36 36-36z" fill="currentColor" opacity="0.16"/>
+            <path d="M160 244l26-66h168l26 66" fill="none" stroke="currentColor" stroke-opacity="0.28" stroke-width="10" stroke-linecap="round" />
+            <circle cx="175" cy="324" r="22" fill="currentColor" opacity="0.22"/>
+            <circle cx="355" cy="324" r="22" fill="currentColor" opacity="0.22"/>
+            <path d="M220 196h100" stroke="currentColor" stroke-opacity="0.18" stroke-width="10" stroke-linecap="round"/>
+            <path d="M240 148h60" stroke="currentColor" stroke-opacity="0.18" stroke-width="10" stroke-linecap="round"/>
+          </svg>
+        </div>
+      </div>
+    </section>
+
+    <section id="projekte" class="section">
+      <div class="container">
+        <div class="section-head">
+          <h2>Projekte</h2>
+          <p>Das Zeug, das wirklich klickt. (Und hoffentlich dein Vanlife leichter macht.)</p>
+        </div>
+
+        <div class="grid">
+          <article class="card">
+            <div class="card-top">
+              <span class="pill">Neu</span>
+              <h3>StaySense</h3>
+              <p>
+                Standort-Infos für Camper: Wetter‑Kontext, Umgebung & nützliche Hinweise –
+                direkt im Browser. <strong>Spots in der Nähe</strong> sind geplant (2026).
+              </p>
+            </div>
+            <div class="card-actions">
+              <a class="btn primary" href="https://staysense.vanityontour.de" target="_blank" rel="noopener">StaySense öffnen</a>
+              <a class="btn ghost" href="#faq">Was kann das?</a>
+            </div>
+          </article>
+
+          <article class="card">
+            <div class="card-top">
+              <span class="pill subtle">App</span>
+              <h3>Vanity Expense Logbook</h3>
+              <p>
+                Ausgaben & Fahrten im Griff – fürs Leben unterwegs.
+                Ideal, wenn du wissen willst, wohin dein Geld fährt.
+              </p>
+            </div>
+            <div class="card-actions">
+              <a class="btn primary" href="https://vanityontour.de" target="_blank" rel="noopener">Mehr erfahren</a>
+              <a class="btn ghost" href="#contact">Feedback geben</a>
+            </div>
+          </article>
+
+          <article class="card">
+            <div class="card-top">
+              <span class="pill subtle">Blog</span>
+              <h3>Vanity on Tour</h3>
+              <p>
+                Produkttests, Stellplatz‑Tests, Technik‑Kram und gesellschaftliche Themen –
+                ohne Marketing-Zuckerguss.
+              </p>
+            </div>
+            <div class="card-actions">
+              <a class="btn primary" href="https://vanityontour.de" target="_blank" rel="noopener">Zum Blog</a>
+              <a class="btn ghost" href="https://vanityontour.de" target="_blank" rel="noopener">Neueste Artikel</a>
+            </div>
+          </article>
+
+          <article class="card">
+            <div class="card-top">
+              <span class="pill subtle">Tooling</span>
+              <h3>RSS‑News‑Bot</h3>
+              <p>
+                Automatisches Einlesen, Umformulieren, Tagging & Entwürfe für WordPress –
+                für News ohne Copy‑Paste‑Marathon.
+              </p>
+            </div>
+            <div class="card-actions">
+              <a class="btn primary" href="https://github.com/" target="_blank" rel="noopener">GitHub (Repo)</a>
+              <a class="btn ghost" href="#faq">Wie läuft das?</a>
+            </div>
+          </article>
+        </div>
+
+        <div class="note">
+          <strong>Tipp:</strong> Ersetze „Mehr erfahren“ / „GitHub (Repo)“ durch deine finalen Links (App‑Store, Repo‑URL etc.).
+        </div>
+      </div>
+    </section>
+
+    <section id="support" class="section alt">
+      <div class="container split">
+        <div>
+          <h2>Support</h2>
+          <p>
+            Wenn dir meine Tools, Tests oder Artikel helfen: Ein kleiner Support ist wie ein
+            Monster Energy – nicht zwingend gesund, aber sehr effektiv. 😄
+          </p>
+        </div>
+        <div class="support-actions">
+          <a class="btn primary" href="https://vanityontour.de" target="_blank" rel="noopener">Support-Seite öffnen</a>
+          <a class="btn ghost" href="#contact">Kooperation anfragen</a>
+        </div>
+      </div>
+    </section>
+
+    <section id="social" class="section">
+      <div class="container">
+        <div class="section-head">
+          <h2>Social & Kontakt</h2>
+          <p>Such dir den Kanal aus – ich bin nicht wählerisch.</p>
+        </div>
+
+        <div class="social">
+          <a class="social-link" href="https://vanityontour.de" target="_blank" rel="noopener" aria-label="Website">🌐 Website</a>
+          <a class="social-link" href="https://github.com/" target="_blank" rel="noopener" aria-label="GitHub">💻 GitHub</a>
+          <a class="social-link" href="https://youtube.com" target="_blank" rel="noopener" aria-label="YouTube">▶️ YouTube</a>
+          <a class="social-link" href="https://instagram.com" target="_blank" rel="noopener" aria-label="Instagram">📷 Instagram</a>
+          <a class="social-link" href="https://bsky.app" target="_blank" rel="noopener" aria-label="Bluesky">🦋 Bluesky</a>
+          <a class="social-link" href="https://x.com" target="_blank" rel="noopener" aria-label="X">𝕏 X</a>
+        </div>
+
+        <div id="contact" class="contact">
+          <h3>Kontakt</h3>
+          <p>
+            Für Kooperationen, Presse oder „Kannst du mal eben…?“
+            <br />
+            <a href="mailto:kontakt@vanityontour.de">kontakt@vanityontour.de</a>
+          </p>
+          <p class="fineprint">
+            Hinweis: Diese Seite ist bewusst statisch & leichtgewichtig. Tracking nur, wenn du es aktiv einbaust.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <section id="faq" class="section alt">
+      <div class="container">
+        <div class="section-head">
+          <h2>Mini‑FAQ</h2>
+          <p>Damit niemand raten muss, was Sache ist.</p>
+        </div>
+
+        <details class="faq">
+          <summary>Ist StaySense eine App?</summary>
+          <div class="faq-body">
+            <p>
+              Eher eine Website, die sich wie eine App anfühlt. Du kannst sie überall nutzen –
+              ohne Store‑Download: <a href="https://staysense.vanityontour.de" target="_blank" rel="noopener">staysense.vanityontour.de</a>
+            </p>
+          </div>
+        </details>
+
+        <details class="faq">
+          <summary>Warum keine Spots?</summary>
+          <div class="faq-body">
+            <p>
+              Fokus auf Standort‑Infos statt „hier ist ein Spot“. Spots in der Nähe sind geplant –
+              aber erst, wenn es sauber & sinnvoll umgesetzt ist.
+            </p>
+          </div>
+        </details>
+
+        <details class="faq">
+          <summary>Kann ich das Layout schnell anpassen?</summary>
+          <div class="faq-body">
+            <p>
+              Ja: Links & Texte findest du in <code>index.html</code>. Styling in <code>assets/css/style.css</code>.
+              Kein Build‑Step, kein Framework, kein Drama.
+            </p>
+          </div>
+        </details>
+      </div>
+    </section>
+  </main>
+
+  <footer class="site-footer">
+    <div class="container footer-inner">
+      <div>
+        <strong>Oliver / Vanity on Tour</strong><br/>
+        <span class="muted">Vanlife seit Jahren – Technik im Kopf, Staub an den Reifen.</span>
+      </div>
+
+      <div class="footer-links">
+        <a href="https://vanityontour.de" target="_blank" rel="noopener">Impressum</a>
+        <a href="https://vanityontour.de" target="_blank" rel="noopener">Datenschutz</a>
+      </div>
+    </div>
+  </footer>
+</body>
+</html>