---
import Base from '../layouts/Base.astro';
---
<Base title="Anleitung · Klarbild">
  <div class="howto">
    <div class="hkopf">
      <h1>So funktioniert Klarbild</h1>
      <div class="hkopf-akt">
        <a class="druck" href="/changelog">Changelog</a>
        <button class="druck" onclick="window.print()">Als PDF / drucken</button>
      </div>
    </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 & Weiterbearbeiten</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 (Pfeil am Ordner = eigene
        Galerie hinterlegt).</p>
      <ul>
        <li><b>+ Alternative</b>: erzeugt eine weitere Fassung desselben Bildes. Die Fassungen liegen gruppiert
          beieinander und lassen sich per Miniaturleiste umschalten (Badge „Fassung 2/3").</li>
        <li><b>Weiterbearbeiten</b>: übernimmt ein fertiges Bild als neue Vorlage ins Studio — dort erneut
          bearbeiten, ins nächste Format bringen oder im Modus Kombinieren mit weiteren Bildern mischen.</li>
        <li><b>Vorher/Nachher</b>: zeigt den Vergleich Vorlage ↔ Ergebnis (bei reinen Text-Bildern entfällt das).</li>
        <li><b>Ordner verwalten</b>: Ordner-Chip antippen, dann ✎ zum Umbenennen (inkl. Galerie) oder ✕ zum Löschen
          (die Bilder bleiben erhalten).</li>
        <li><b>Mehrere auf einmal</b>: Bilder markieren, dann als <b>ZIP laden</b> oder gesammelt <b>in einen Ordner</b>
          verschieben.</li>
      </ul>
    </section>

    <section>
      <h2>5 · Alles per Telegram — ohne Befehle</h2>
      <p>Einmalig koppeln: im Admin einen Code erzeugen und im Chat mit dem Bot eingeben. Danach läuft alles über
        die Knöpfe unten im Chat — kein Tippen von Befehlen nötig.</p>
      <ul>
        <li><b>Bearbeiten:</b> Bild(er) schicken (am besten als <i>Datei</i> für volle Qualität) → unten das
          Rezept antippen.</li>
        <li><b>Kombinieren:</b> zwei oder mehr Bilder schicken, ins Bild-Textfeld eine Beschreibung wie
          „mit unserer Hündin Frieda" — dann „🔀 Kombinieren" antippen. (Ohne Beschreibung fragt der Bot nach.)</li>
        <li><b>Neu erzeugen:</b> unten auf „✨ Neues Bild" tippen und beschreiben, was entstehen soll.</li>
        <li><b>Weiterbearbeiten:</b> ein fertiges Bild vom Bot einfach wieder zurückschicken.</li>
        <li>Über „❓ Hilfe" gibt es die Kurzanleitung, über „📁 Rezept wählen" das Standard-Rezept.</li>
      </ul>
      <p class="mini">Für Profis gibt es zusätzlich das „/"-Befehlsmenü (/neu, /rezepte, /status) — nötig ist es nicht.</p>
    </section>

    <section>
      <h2>6 · Sicherung & sauber neu starten (Admin)</h2>
      <p>Im Admin-Bereich lässt sich eine <b>zweite Sicherung aufs NAS</b> einrichten (SFTP/FTPS, auch über
        Tailscale) — jedes fertige Bild wird dann zusätzlich gespiegelt und in der Bibliothek mit <b>„NAS ✓"</b>
        markiert. Mit <b>„Alle vorhandenen Bilder aufs NAS sichern"</b> lassen sich auch ältere Bilder nachsichern.</p>
      <p>Zum Aufräumen gibt es <b>„Bibliothek &amp; Aufträge zurücksetzen"</b>: löscht alle Bilder, Aufträge und Ordner
        (Nutzer, Einstellungen, Modelle und Rezepte bleiben) — mit Sicherheitsabfrage. Am besten vorher einmal
        aufs NAS sichern.</p>
    </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;}
    .hkopf-akt{display:flex;gap:8px;align-items:center;}
    .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);text-decoration:none;}
    .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;}
    .howto .mini{font-size:.82rem;color:var(--soft);margin:8px 0 0;}
    @media print{.topbar,.tabbar,.druck{display:none !important;}.howto section{break-inside:avoid;}}
  </style>
</Base>