spike(spa-mini): responsive layout + erläuterungstext nach oben

- Erklärung zur Implementierungstechnik als Intro-Box direkt unter dem
  Tech-Spike-Banner (statt versteckt im Footer).
- Footer reduziert auf einen Link zum Quellcode.
- Mobile-Anpassungen: kleinerer Title auf < 640px, weniger Padding,
  Tags wrappen sauber, lange URLs/Code/Tabellen brechen ohne Overflow.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

preview/spa-mini/index.html

@@ -30,26 +30,37 @@
       font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       color: var(--fg);
       background: var(--bg);
-      padding: 1.5rem;
+      padding: 1.5rem 1rem;
+    }
+    @media (min-width: 640px) {
+      body { padding: 1.5rem; }
     }
     main {
       max-width: 720px;
       margin: 0 auto;
     }
-    header.banner {
+    header.banner,
+    .intro {
       border: 1px solid var(--border);
       border-radius: 6px;
       padding: 0.7rem 1rem;
-      margin-bottom: 2rem;
+      margin-bottom: 1rem;
       background: var(--code-bg);
       font-size: 0.85rem;
       color: var(--muted);
     }
+    .intro {
+      margin-bottom: 2rem;
+    }
     header.banner strong { color: var(--fg); }
     h1.post-title {
-      font-size: 2rem;
+      font-size: 1.5rem;
-      line-height: 1.2;
+      line-height: 1.25;
       margin: 0 0 0.4rem;
+      word-wrap: break-word;
+    }
+    @media (min-width: 640px) {
+      h1.post-title { font-size: 2rem; line-height: 1.2; }
     }
     .meta {
       color: var(--muted);
@@ -62,29 +73,38 @@
       background: var(--code-bg);
       border-radius: 3px;
       padding: 1px 7px;
-      margin-right: 4px;
+      margin: 0 4px 4px 0;
       font-size: 0.85em;
     }
+    article {
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+    }
     article img {
       max-width: 100%;
       height: auto;
       border-radius: 4px;
     }
-    article a { color: var(--accent); }
+    article a {
+      color: var(--accent);
+      word-break: break-word;
+    }
     article pre {
       background: var(--code-bg);
       padding: 0.8rem;
       border-radius: 4px;
       overflow-x: auto;
       font-size: 0.88em;
+      max-width: 100%;
     }
     article code {
       background: var(--code-bg);
       padding: 1px 4px;
       border-radius: 3px;
       font-size: 0.92em;
+      word-break: break-word;
     }
-    article pre code { padding: 0; background: none; }
+    article pre code { padding: 0; background: none; word-break: normal; }
     article hr {
       border: none;
       border-top: 1px solid var(--border);
@@ -92,9 +112,20 @@
     }
     article blockquote {
       border-left: 3px solid var(--border);
-      padding-left: 1rem;
+      padding: 0 0 0 1rem;
-      color: var(--muted);
       margin: 1rem 0;
+      color: var(--muted);
+    }
+    article h1, article h2, article h3, article h4 {
+      line-height: 1.3;
+      word-wrap: break-word;
+    }
+    article ul, article ol { padding-left: 1.5rem; }
+    article table {
+      display: block;
+      max-width: 100%;
+      overflow-x: auto;
+      border-collapse: collapse;
     }
     .status {
       padding: 1rem;
@@ -116,6 +147,7 @@
       border-top: 1px solid var(--border);
       color: var(--muted);
       font-size: 0.85rem;
+      text-align: center;
     }
     footer a { color: var(--accent); }
   </style>
@@ -126,20 +158,22 @@
     <strong>Tech-Spike:</strong> Diese Seite ist ein Machbarkeitsbeweis,
     keine produktive Webseite. Sie lädt einen einzigen, hartcodierten
     Nostr-Post live von Public-Relays und rendert ihn im Browser.
-    Für die volle SPA siehe
-    <a href="https://github.com/joerglohrer/joerglohrerde">Repo</a>.
   </header>
 
+  <div class="intro">
+    Eigenständig signiertes <code>kind:30023</code>-Event (NIP-23),
+    geladen über <code>nostr-tools</code> via WebSocket aus mehreren Relays.
+    Markdown-Rendering: <code>marked</code> + <code>DOMPurify</code>.
+    Bild via Blossom-Server. Kein Server-Backend, nur statisches HTML
+    plus JavaScript im Browser.
+  </div>
+
   <div id="content">
     <p class="status">Lade Post von Nostr-Relays …</p>
   </div>
 
   <footer>
-    Eigenständig signiertes <code>kind:30023</code>-Event (NIP-23),
+    <a href="https://forgejo.joerglohrer.synology.me/joerglohrer/joerglohrerde">Quellcode &amp; Spezifikation</a>
-    geladen über <code>nostr-tools</code> via WebSocket aus mehreren Relays.
-    Markdown-Rendering: <code>marked</code> + <code>DOMPurify</code>.
-    Bild via Blossom-Server. Kein Server-Backend, nur statisches HTML
-    plus JavaScript im Browser.
   </footer>
 </main>