klarbild/src/pages/anleitung.astro

---
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 · Passbilder &amp; Druckbogen — exakte Maße und Schnittmarken (ohne KI)</h2>
      <p class="lead">Der Reiter <b>Passbilder</b> ist der Fotolabor-Teil von Klarbild: kein Modell, keine Kosten,
        keine Wartezeit. Nur Zuschnitt, Skalierung und Geometrie — vom biometrischen Passbild bis zum
        30 × 40-Poster.</p>
      <ol>
        <li>Bilder hochladen (ziehen, ⌘/Strg + V, oder <b>Aus Bibliothek</b> ein fertiges Ergebnis holen).</li>
        <li>Je Bild das <b>Endmaß</b> wählen. Es sind <b>alle Formate der KI-Generierung</b> da —
          biometrisches Passbild 35 × 45 mm, 2 × 3 bis 6 × 9 cm, 9 × 13 bis 24 × 30,
          Poster- und Rahmenmaße 30 × 40 bis 70 × 100, Quadrate, DIN A6–A2 und die
          Seitenverhältnisse (16:9 „The Frame", 9:16, 3:2, 4:3, 5:4) — oder <b>Eigenes Maß</b>:
          <code>12x15</code> (cm), <code>35x45mm</code>, <code>5</code> (= 5 × 5 cm) oder
          <code>4:3/15</code> (Verhältnis 4:3, längere Kante 15 cm).</li>
        <li><b>Wenn das Bild nicht zum Format passt</b>, entscheidest du je Bild:
          <b>Zuschneiden</b> (das Format wird ausgefüllt, außen fehlt etwas — Standard) oder
          <b>Rand lassen</b> (das ganze Bild bleibt sichtbar, außen steht die <b>Randfarbe</b> —
          weiß, schwarz, papierfarben oder frei gewählt). <b>Verzerrt wird nie.</b></li>
        <li>Auf das Vorschaubild tippen → <b>Zuschnitt</b>: schieben und zoomen. Das Seitenverhältnis bleibt
          fest am Zielformat, verzerrt wird nie.</li>
        <li><b>Anzahl</b> je Bild setzen — so entsteht der Passbild- oder Kita-Satz.</li>
        <li><b>Papierformat</b> wählen: DIN A6–A2 inklusive <b>A3+ (329 × 483 mm)</b>, Fotopapier-Zuschnitte
          9 × 13 bis 20 × 30, US Letter/Legal — oder ein eigenes Papiermaß.</li>
        <li><b>Schnitthilfen</b>: <b>Eckmarken</b> (feine Marken außerhalb des Endformats, wie in Photoshop
          und InDesign) oder <b>durchgehende Linien</b> über den ganzen Bogen fürs Schneidelineal.
          Die durchgehenden Linien laufen nie durch ein anderes Motiv.</li>
        <li><b>Druck-PDF erzeugen</b>. Die PDF-Seite hat exakt das Bogenmaß.</li>
      </ol>
      <p class="hinweis"><b>Wichtig beim Drucken:</b> im Druckdialog „Tatsächliche Größe" bzw. „100 %" wählen —
        <b>nicht</b> „an Seitengröße anpassen". Sonst stimmt das Maß nicht mehr. Wer randlos drucken kann,
        setzt den Rand auf 0; sonst 3–5 mm, sonst schneidet der Drucker die Marken weg.</p>
      <ul>
        <li><b>Beschnittzugabe</b> (0–10 mm): das Bild ragt über die Schnittkante hinaus, damit bei leicht
          schiefem Schnitt kein weißer Rand entsteht. Der Abstand zwischen zwei Bildern wächst automatisch mit.</li>
        <li><b>Einzeln herunterladen</b>: ein Bild exakt auf Maß als PNG/JPG mit dpi-Metadaten — ohne Bogen.</li>
        <li><b>Auflösungswarnung</b>: reicht die Quelle nicht für die gewählte dpi, steht es rot unter dem Bild.</li>
        <li><b>Vorlagen</b>: die ganze Bogen-Einstellung (Papier, Marken, Formate, Stückzahlen) speichern.
          Mitgeliefert sind <b>Kita-Satz (A4)</b> (1 × 13 × 18, 2 × 9 × 13, 8 × Passbild),
          <b>Schulsatz klein (A4)</b>, <b>Passbildbogen 35 × 45 (A4)</b> und
          <b>2 × 10 × 7,5 auf Fotopapier 10 × 15</b>. Lädst du eine mehrformatige Vorlage bei nur
          <i>einem</i> Bild, wird das Bild automatisch für jedes Format übernommen — ein Klick,
          fertiger Satz.</li>
        <li><b>Randprofile</b>: <b>Randlos</b> (0 mm), <b>Standard</b> (5 mm) oder <b>Sicher</b> (10 mm)
          per Knopf, der genaue Wert bleibt frei eintragbar.</li>
        <li><b>Wohin?</b>: der fertige Bogen kann zusätzlich an Picdrop, aufs NAS oder an ein
          Zusatzziel gelegt werden — wie die Bilder aus dem Studio.</li>
        <li><b>Automatische Anordnung</b>: gleich große Bilder ergeben ein sauberes Raster; bei gemischten
          Größen werden die kleinen automatisch in die Restflächen neben den großen gesetzt.</li>
      </ul>
      <p class="mini">Auch per Telegram: Bild schicken → „📐 Passbilder" → Maß und Anzahl antippen → PDF zurück.
        Und am Handy funktioniert die Seite genauso wie am Rechner.</p>
    </section>

    <section>
      <h2>6 · 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><b>Druckbogen (ohne KI):</b> Bild schicken → „📐 Druckbogen" → Endmaß und Anzahl antippen.
          Zurück kommt ein A4-PDF mit Schnittmarken in 100-%-Größe.</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>7 · Sicherung &amp; 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;}
    .howto .hinweis{background:var(--accent-bg);border-left:3px solid var(--accent);padding:10px 13px;margin:12px 0;font-size:.92rem;line-height:1.55;}
    .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>