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>
      <p class="hinweis"><b>Dateinamen sind eindeutig.</b> Jedes Ergebnis heißt
        <code>JJJJ-MM-TT_HHMMSS_motiv_format_kürzel</code>, also z. B.
        <code>2026-08-20_143207_lea-badge_the-frame_a3f9.jpg</code>. Weil Datum und Uhrzeit vorn stehen,
        sortiert jede Dateiliste — Picdrop, NAS, Finder — von allein chronologisch. Das Kürzel am Ende stammt
        aus der Kennung des Bildes: <b>zwei Bilder können sich beim Ausliefern nicht mehr überschreiben</b>,
        auch wenn du am selben Tag zweimal dasselbe Motiv im selben Format erzeugst.
        (Vor dem 21.08.2026 war das anders — dort ging in so einem Fall das erste Bild verloren.
        Unter <b>Admin → Dateinamen</b> lässt sich die vorhandene Bibliothek nachträglich umbenennen.)</p>
    </section>

    <section>
      <h2>5 · Drucken — exakte Maße und Schnittmarken (ohne KI)</h2>
      <p class="lead">Der Reiter <b>Drucken</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>Dasselbe Bild in zwei Maßen?</b> <b>Duplizieren</b> antippen — das Bild erscheint ein
          zweites Mal in der Liste und bekommt dort sein eigenes Maß. Kein Umbenennen und erneutes
          Hochladen mehr.</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>Ist das Endmaß größer als der Bogen</b> — etwa 20 × 30 cm auf DIN-A4-Fotopapier —
          erscheint direkt am Bild die Frage, wie es weitergehen soll:
          <b>Überstehen</b> legt das Bild mittig aufs ganze Blatt, der Überstand wird abgeschnitten
          (bei 20 × 30 auf A4 fehlen genau 3 mm in der Höhe, und genau das steht auch dabei), oder
          <b>Posterdruck</b> verteilt es auf mehrere Blätter zum Zusammenkleben.</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>Posterdruck</b>: Beim Verteilen auf mehrere Blätter überlappen sich die Kacheln um einen
          <b>Klebefalz</b> (Standard 10 mm, frei einstellbar). Der Falz wird auf beiden Nachbarblättern
          gedruckt und mit einer gestrichelten Linie markiert — beim Zusammensetzen legt man das eine
          Blatt entlang dieser Linie aufs andere. Jedes Blatt trägt oben seine Nummer samt Reihe und
          Spalte. 30 × 40 cm auf A4 ergibt 2 × 2 Blätter.</li>
        <li><b>Beschriftung</b>: Unter dem Bogen steht standardmäßig eine kleine Zeile mit Maßen, dpi und
          dem Druckhinweis. Sie lässt sich <b>ausschalten</b>, mit <b>eigenem Text</b> versehen (z. B.
          „Phoenix · August 2026") und an eine von sechs Stellen legen — oben oder unten, jeweils links,
          mittig oder rechts. Ist an der gewählten Kante kein Platz frei, entfällt sie automatisch;
          über ein Bild wird sie nie gedruckt.</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 — das ist
          bewusst mehr, als auf ein Blatt geht; die Vorschau sagt dir, wie viele Bogen es werden),
          <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 → „🖨 Drucken" → Maß und Anzahl antippen → PDF zurück.
        Am Handy steht die Vorschau oben und „Druck-PDF erzeugen" liegt als fester Balken griffbereit
        über der Navigation; am Rechner arbeitest du links und siehst rechts, was dabei herauskommt.
        Wer das Werkzeug jemandem zeigen will, ohne dass etwas hochgeladen werden kann, schickt den
        Link auf <a href="/vorstellung">die Vorstellungsseite</a>.</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>Unter <b>„Dateinamen"</b> lässt sich die vorhandene Bibliothek auf das eindeutige Namensschema bringen.
        <b>„Bibliothek prüfen"</b> zeigt zuerst, was sich ändern würde und wie viele Namen aktuell doppelt vergeben
        sind; <b>„Jetzt umbenennen"</b> setzt es um. Die Bilddateien selbst bleiben dabei unangetastet — sie liegen
        im Speicher unter ihrer Kennung, nicht unter ihrem Namen. Ein zweiter Lauf ändert nichts mehr.
        <b>„Erneut ausliefern"</b> lädt danach alle schon ausgelieferten Bilder unter dem neuen Namen erneut hoch;
        die alten Dateien bleiben bei Picdrop liegen und räumst du dort selbst weg.</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>Mein Konto, Teilen &amp; E-Mail</h2>
      <ul>
        <li><b><a href="/konto">Mein Konto</a></b>: E-Mail-Adresse hinterlegen — damit kannst du dir
          ein neues Passwort schicken lassen, wenn du deines vergisst. Dort lässt sich auch einschalten,
          dass du eine kurze Mail bekommst, sobald ein Auftrag fertig ist.</li>
        <li><b>Teilen</b>: In der Bibliothek auf <b>Teilen</b> tippen — einzeln oder für mehrere markierte
          Bilder auf einmal. Es entsteht ein Link, den auch jemand <b>ohne Klarbild-Konto</b> öffnen kann;
          von dort lässt sich das Bild in voller Auflösung herunterladen.</li>
        <li><b>Weitergeben</b> per <b>WhatsApp</b> (öffnet WhatsApp mit fertigem Text), über dein eigenes
          Mailprogramm, oder direkt aus Klarbild heraus per E-Mail an mehrere Empfänger.</li>
        <li><b>Sicher bleiben</b>: Jeder Link läuft von selbst ab (Standard 30 Tage), lässt sich jederzeit
          <b>abschalten</b> und auf Wunsch mit einem <b>Zugangswort</b> schützen. Das Wort schickst du dann
          getrennt vom Link — sonst nützt es nichts.</li>
        <li><b><a href="/teilen">Geteilte Links</a></b>: Übersicht über alles, was gerade offen ist —
          mit Aufrufen und Downloads. Festgehalten wird <b>wann</b> und <b>womit</b> geöffnet wurde,
          nicht <b>wer</b>: Die IP-Adresse liegt nur gehasht vor und lässt sich nicht zurückrechnen.</li>
        <li><b>Passwort vergessen?</b> Auf der Anmeldeseite unten auf „Passwort vergessen?" — der Link
          aus der Mail gilt eine Stunde und lässt sich nur einmal verwenden.</li>
      </ul>
      <p class="mini">Bilder aus einer <b>privaten Sitzung</b> lassen sich bewusst nicht teilen und lösen
        auch keine Benachrichtigung aus.</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>