diff --git a/public/f12-rocks/f12-rocks-hero.png b/public/f12-rocks/f12-rocks-hero.png
new file mode 100644
index 0000000..e38f6b9
Binary files /dev/null and b/public/f12-rocks/f12-rocks-hero.png differ
diff --git a/public/f12-rocks/index.html b/public/f12-rocks/index.html
new file mode 100644
index 0000000..823292d
--- /dev/null
+++ b/public/f12-rocks/index.html
@@ -0,0 +1,343 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="f12.rocks — Fotografie mit Geschichten. Festivals, Football, Konzerte. Auf Instagram und im Blog.">
+  <title>f12.rocks — Fotografie mit Geschichten</title>
+  <style>
+    :root {
+      --bg: #0a0908;
+      --surface: #14110f;
+      --border: #2a221c;
+      --text: #f5efe8;
+      --muted: #a89888;
+      --amber: #e8a045;
+      --magenta: #c44b7a;
+      --rust: #8b3a2a;
+      --max: 44rem;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.65;
+      font-size: 1.05rem;
+    }
+
+    .hero {
+      position: relative;
+      padding: 3rem 1.5rem 2.75rem;
+      text-align: center;
+      overflow: hidden;
+    }
+
+    .hero::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background:
+        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232, 160, 69, 0.18), transparent),
+        radial-gradient(ellipse 50% 40% at 85% 70%, rgba(196, 75, 122, 0.12), transparent),
+        var(--bg);
+      z-index: 0;
+    }
+
+    .hero > * { position: relative; z-index: 1; }
+
+    .logo-mark {
+      display: inline-block;
+      font-size: 0.75rem;
+      font-weight: 700;
+      letter-spacing: 0.22em;
+      text-transform: uppercase;
+      color: var(--amber);
+      margin-bottom: 1.25rem;
+      padding: 0.35rem 0.75rem;
+      border: 1px solid rgba(232, 160, 69, 0.35);
+      border-radius: 2rem;
+    }
+
+    .hero-image {
+      display: block;
+      width: min(100%, 32rem);
+      margin: 0 auto 1.75rem;
+      border-radius: 0.5rem;
+      border: 1px solid var(--border);
+      box-shadow:
+        0 20px 50px rgba(0, 0, 0, 0.55),
+        0 0 80px rgba(232, 160, 69, 0.08);
+    }
+
+    .hero h1 {
+      font-size: clamp(2.2rem, 6vw, 3.2rem);
+      font-weight: 800;
+      letter-spacing: -0.04em;
+      margin-bottom: 0.5rem;
+      line-height: 1.1;
+    }
+
+    .hero h1 span {
+      background: linear-gradient(135deg, var(--amber), var(--magenta));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+
+    .tagline {
+      color: var(--muted);
+      font-size: 1.15rem;
+      max-width: 28rem;
+      margin: 0 auto 1.75rem;
+    }
+
+    .cta-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.75rem;
+      justify-content: center;
+    }
+
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.45rem;
+      padding: 0.75rem 1.35rem;
+      border-radius: 0.5rem;
+      font-weight: 600;
+      font-size: 0.95rem;
+      text-decoration: none;
+      transition: transform 0.15s, box-shadow 0.15s;
+    }
+
+    .btn:hover {
+      transform: translateY(-2px);
+    }
+
+    .btn-primary {
+      background: linear-gradient(135deg, var(--amber), #c47a2a);
+      color: #1a1208;
+      box-shadow: 0 4px 20px rgba(232, 160, 69, 0.3);
+    }
+
+    .btn-secondary {
+      background: var(--surface);
+      color: var(--text);
+      border: 1px solid var(--border);
+    }
+
+    .btn-secondary:hover {
+      border-color: var(--magenta);
+      box-shadow: 0 4px 20px rgba(196, 75, 122, 0.15);
+    }
+
+    main {
+      max-width: var(--max);
+      margin: 0 auto;
+      padding: 0 1.5rem 4rem;
+    }
+
+    section { margin-bottom: 2.5rem; }
+
+    h2 {
+      font-size: 0.82rem;
+      text-transform: uppercase;
+      letter-spacing: 0.12em;
+      color: var(--amber);
+      margin-bottom: 0.75rem;
+    }
+
+    p { margin-bottom: 1rem; }
+
+    .topics {
+      list-style: none;
+      display: grid;
+      gap: 0.7rem;
+    }
+
+    .topics li {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 0.65rem;
+      padding: 1rem 1.15rem;
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 0.85rem;
+      align-items: start;
+    }
+
+    .topics .icon {
+      font-size: 1.4rem;
+      line-height: 1;
+    }
+
+    .topics strong {
+      display: block;
+      color: var(--text);
+      margin-bottom: 0.15rem;
+    }
+
+    .topics span {
+      color: var(--muted);
+      font-size: 0.95rem;
+    }
+
+    .quote {
+      background: linear-gradient(135deg, rgba(139, 58, 42, 0.2), rgba(196, 75, 122, 0.08));
+      border: 1px solid var(--border);
+      border-left: 4px solid var(--magenta);
+      border-radius: 0.75rem;
+      padding: 1.35rem 1.5rem;
+      font-size: 1.1rem;
+      font-style: italic;
+      color: var(--text);
+    }
+
+    .quote cite {
+      display: block;
+      margin-top: 0.75rem;
+      font-style: normal;
+      font-size: 0.85rem;
+      color: var(--muted);
+    }
+
+    .callout {
+      text-align: center;
+      padding: 2rem 1.5rem;
+      background:
+        radial-gradient(ellipse 60% 80% at 50% 100%, rgba(232, 160, 69, 0.1), transparent),
+        var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 1rem;
+    }
+
+    .callout h2 {
+      font-size: clamp(1.3rem, 4vw, 1.7rem);
+      text-transform: none;
+      letter-spacing: -0.02em;
+      color: var(--text);
+      margin-bottom: 0.5rem;
+    }
+
+    .callout p {
+      color: var(--muted);
+      margin-bottom: 1.25rem;
+    }
+
+    footer {
+      max-width: var(--max);
+      margin: 0 auto;
+      padding: 1.5rem;
+      border-top: 1px solid var(--border);
+      color: var(--muted);
+      font-size: 0.82rem;
+      text-align: center;
+    }
+
+    footer a { color: var(--amber); }
+  </style>
+</head>
+<body>
+
+  <header class="hero">
+    <p class="logo-mark">Fotografie · Blog · Insta</p>
+    <img
+      class="hero-image"
+      src="f12-rocks-hero.png"
+      alt="Konzertfotografie: Silhouetten in warmem Bühnenlicht, Blick aus dem Publikum"
+      width="512"
+      height="512"
+    >
+    <h1><span>f12.rocks</span></h1>
+    <p class="tagline">Geschichten hinter den Fotos — nicht nur Pixel, sondern was davor und danach passiert ist.</p>
+    <div class="cta-row">
+      <a class="btn btn-primary" href="https://www.instagram.com/f12.rocks" rel="noopener">@f12.rocks auf Instagram</a>
+      <a class="btn btn-secondary" href="https://f12.rocks" rel="noopener">Galerie &amp; Blog</a>
+    </div>
+  </header>
+
+  <main>
+
+    <section>
+      <h2>Was ist das?</h2>
+      <p>
+        <strong>f12.rocks</strong> ist die Fotografie-Ecke von Frank Schwenk: Konzerte, Festivals,
+        Football an der Sideline, Bands in freier Wildbahn — und der Blog dazu,
+        der erklärt, <em>warum</em> ein Bild entstanden ist und was beim Shooting schiefging
+        (oder glorreich funktioniert hat).
+      </p>
+      <p>
+        Kein Stock-Foto-Universum. Kein „Lifestyle inspiriert"-Blabla.
+        Echte Orte, echtes Licht, echte Geschichten — von der Haustür bis zum Schlossplatz.
+      </p>
+    </section>
+
+    <section>
+      <h2>Wo du f12.rocks triffst</h2>
+      <ul class="topics">
+        <li>
+          <span class="icon" aria-hidden="true">🎸</span>
+          <div>
+            <strong>Konzerte &amp; Festivals</strong>
+            <span>Rock, Punk, schwäbisch-laut — von der Chapel bis zur Unterführung. Licht, das Fotografen lieben oder fluchen lassen.</span>
+          </div>
+        </li>
+        <li>
+          <span class="icon" aria-hidden="true">🏈</span>
+          <div>
+            <strong>Football an der Sideline</strong>
+            <span>Crusaders Game Days: GFL-Pflicht, zwei Kameras, Respekt vor der Geschwindigkeit auf dem Feld.</span>
+          </div>
+        </li>
+        <li>
+          <span class="icon" aria-hidden="true">📝</span>
+          <div>
+            <strong>Blog: Geschichten hinter den Fotos</strong>
+            <span>Autopilot für Faule — die Imagepipeline arbeitet, du liest, was dahintersteckt. darktable, Hitze, Panikmodus inklusive.</span>
+          </div>
+        </li>
+        <li>
+          <span class="icon" aria-hidden="true">📷</span>
+          <div>
+            <strong>Instagram @f12.rocks</strong>
+            <span>Neue Bilder, kurze Einblicke, Drag-to-scroll-Galerie auf der Website — alles aus einer Hand.</span>
+          </div>
+        </li>
+      </ul>
+    </section>
+
+    <section>
+      <blockquote class="quote">
+        „350 Meter vom Wohnzimmer zum Schlossplatz — Konzert, alte Bekannte,
+        und ein Abend, der mehr Familientreffen als Fotoshooting war."
+        <cite>— aus dem f12.rocks Blog</cite>
+      </blockquote>
+    </section>
+
+    <section>
+      <div class="callout">
+        <h2>Lust auf mehr als nur Likes?</h2>
+        <p>
+          Folge <strong>@f12.rocks</strong> für neue Bilder — oder tauch im Blog ein,
+          wenn du wissen willst, was hinter dem Auslöser passiert.
+        </p>
+        <div class="cta-row">
+          <a class="btn btn-primary" href="https://www.instagram.com/f12.rocks" rel="noopener">Instagram folgen</a>
+          <a class="btn btn-secondary" href="https://f12.rocks/blog/" rel="noopener">Zum Blog</a>
+        </div>
+      </div>
+    </section>
+
+  </main>
+
+  <footer>
+    Erstellt von @cursor · Gitea Issue #5 ·
+    <a href="https://gitea.schwenk.online/froxxxy/playground/issues/5">froxxxy/playground</a>
+    · Bild: KI-generiert (Cursor), lokal im Repo
+  </footer>
+
+</body>
+</html>
