feat: How-To/Anleitung page + nav link

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XNQ8ghPfzAfsyVYd6HgFb6

src/pages/anleitung.astro

@@ -0,0 +1,83 @@
+---
+import Base from '../layouts/Base.astro';
+---
+<Base title="Anleitung · Klarbild">
+  <div class="howto">
+    <div class="hkopf">
+      <h1>So funktioniert Klarbild</h1>
+      <button class="druck" onclick="window.print()">Als PDF / drucken</button>
+    </div>
+    <p class="lead">Aus Screenshots und Fundstücken werden druckfertige Bilder — bereinigt, freigestellt,
+      im richtigen Format, optional direkt bei Picdrop. Alles geht über die Website und über Telegram.</p>
+
+    <section>
+      <h2>1 · Bild bearbeiten</h2>
+      <ol>
+        <li>Im <b>Studio</b> oben <b>Bearbeiten</b> wählen.</li>
+        <li>Screenshots hochladen — ziehen, mit ⌘/Strg + V einfügen oder tippen (bis zu 100 auf einmal).</li>
+        <li>Wählen, was passieren soll: <b>Bereinigen</b> (Rahmen, Wand, Shop-Oberfläche weg),
+          <b>Freistellen</b> (Motiv frei, Hintergrund transparent), <b>Format</b> (z. B. 30 × 40 cm oder The Frame),
+          <b>Kontur</b> (weißer Stickerrand).</li>
+        <li>Beim Format „<b>Zuschneiden</b>" oder „<b>Erweitern</b>" wählen — Erweitern erzeugt mehr Szene rund ums
+          Motiv (Outpainting), ideal für The Frame.</li>
+        <li><b>Qualität</b> und Ziel (<b>Bibliothek</b>, <b>Picdrop</b> oder beides) wählen, dann <b>Loslegen</b>.</li>
+      </ol>
+    </section>
+
+    <section>
+      <h2>2 · Mehrere Bilder kombinieren</h2>
+      <p>Modus <b>Kombinieren</b>: mindestens zwei Bilder hochladen und beschreiben, was entstehen soll —
+        z. B. „das Poolbild, aber mit unserer Hündin Frieda am Beckenrand". Das erste Bild ist die Leitszene,
+        weitere liefern Personen oder Motive. Es entsteht ein neues, zusammengesetztes Bild.</p>
+    </section>
+
+    <section>
+      <h2>3 · Neues Bild aus Text</h2>
+      <p>Modus <b>Neu erzeugen</b>: ganz ohne Vorlage, nur aus einer Beschreibung. Je genauer der Text,
+        desto besser das Ergebnis.</p>
+    </section>
+
+    <section>
+      <h2>4 · Bibliothek, Ordner & Alternativen</h2>
+      <p>Alle Ergebnisse landen in der <b>Bibliothek</b>. Über die Ordner-Leiste oben lässt sich nach Ordner
+        filtern; jedem Ordner kann eine eigene Picdrop-Galerie zugeordnet werden. Mit <b>+ Alternative</b>
+        entsteht eine weitere Fassung desselben Bildes — die Fassungen liegen gruppiert beieinander und lassen
+        sich per Miniaturleiste umschalten. <b>Vorher/Nachher</b> zeigt den Vergleich zum Original.</p>
+    </section>
+
+    <section>
+      <h2>5 · Alles per Telegram</h2>
+      <ul>
+        <li>Einmalig koppeln: im Admin einen Code erzeugen und im Chat mit dem Bot eingeben.</li>
+        <li><b>Bearbeiten:</b> Bilder weiterleiten (am besten als <i>Datei</i> für volle Qualität) → Rezept wählen.</li>
+        <li><b>Kombinieren:</b> zwei oder mehr Bilder mit einer Bildunterschrift senden (z. B. „mit unserer Hündin
+          Frieda") → Knopf „🔀 Kombinieren".</li>
+        <li><b>Neu erzeugen:</b> <code>/neu &lt;Beschreibung&gt;</code> — z. B. <code>/neu ein Olivenzweig auf Sand</code>.</li>
+        <li>Der Bot meldet sich einmal, wenn alles fertig ist — mit den Ergebnissen und Links.</li>
+      </ul>
+    </section>
+
+    <section>
+      <h2>Tipps</h2>
+      <ul>
+        <li>Für Druck immer 300 dpi und ein cm-Format wählen — die Pixelmaße stehen direkt dabei.</li>
+        <li>In Telegram Bilder als <i>Datei</i> senden, nicht als Foto — sonst komprimiert Telegram.</li>
+        <li>Sticker: Freistellen + Kontur zusammen wählen.</li>
+      </ul>
+    </section>
+  </div>
+
+  <style>
+    .howto{max-width:760px;margin:0 auto;}
+    .hkopf{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
+    .howto h1{font-family:var(--font-display);font-size:1.7rem;letter-spacing:-.02em;margin:6px 0 4px;}
+    .druck{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 15px;cursor:pointer;font-family:inherit;font-size:.85rem;color:var(--ink);}
+    .lead{color:var(--soft);line-height:1.6;margin:4px 0 20px;}
+    .howto section{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;}
+    .howto h2{font-size:1.05rem;margin:0 0 10px;}
+    .howto ol,.howto ul{margin:0;padding-left:20px;line-height:1.65;}
+    .howto li{margin-bottom:6px;}
+    .howto code{font-family:var(--font-mono);font-size:.85em;background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:1px 5px;}
+    @media print{.topbar,.tabbar,.druck{display:none !important;}.howto section{break-inside:avoid;}}
+  </style>
+</Base>