Eigene PDF-Vorlagen

1. So geht’s

Der empfohlene Weg in vier Schritten – Sie brauchen dafür einen Text- oder Code-Editor und Grundkenntnisse in HTML.

1. Standard-Vorlage exportieren. In der App unter Einstellungen → PDF-Vorlagen (nur für Administratoren sichtbar) den gewünschten Dokumenttyp wählen und „Standard-Vorlage exportieren“ klicken. Sie erhalten die mitgelieferte HTML-Datei als Ausgangspunkt – inklusive aller Platzhalter und des Druck-Layouts.
2. Vorlage anpassen. Die HTML-Datei in einem Editor bearbeiten: Texte ändern, Abschnitte ergänzen oder entfernen, eigenes Logo als eingebettetes Bild aufnehmen. Die Platzhalter aus der Referenz unten werden beim Erzeugen automatisch durch die Vertragsdaten ersetzt.
3. Vorlage registrieren. Wieder unter Einstellungen → PDF-Vorlagen: Dokumenttyp wählen, einen sprechenden Namen vergeben (z. B. „Leihvertrag Gemeinde“) und die HTML-Datei auswählen. Empfehlung: Legen Sie die Datei in Ihren Dokumenten-Ausgabeordner – dann ist sie in Ihrer eigenen Datensicherung enthalten.
4. Beim Erzeugen auswählen. Auf der Vertragsdetail-Seite erscheint im Dialog „Dokumente erzeugen“ jetzt eine Vorlagen-Auswahl. Standard bleibt vorausgewählt – die eigene Vorlage wählen Sie bewusst pro Fall.

2. Regeln & Grenzen

• Alles in einer Datei. Die Vorlage muss eine einzelne .html-Datei sein (max. 2 MB). Keine externen Ressourcen – kein Nachladen von Schriften, Stylesheets oder Bildern aus dem Internet. Bilder (z. B. ein Logo) als Base64 direkt einbetten: <img src="data:image/png;base64,…">.
• A4-Druck-Layout über @page. Die Seitenränder gehören ins CSS, z. B. @page { size: A4; margin: 20mm 22mm 18mm; }. Die exportierte Standard-Vorlage bringt ein erprobtes Layout inklusive Seitenumbruch-Steuerung mit – am einfachsten dort nur die Inhalte ändern.
• Die Datei bleibt bei Ihnen. Die App merkt sich nur den Dateipfad und liest die Vorlage bei jeder Erzeugung frisch ein – Änderungen an der Datei wirken sofort. Wird die Datei verschoben oder gelöscht, meldet die App das beim Erzeugen und in den Einstellungen („Datei nicht gefunden“).
• Entwurfs-Wasserzeichen bleibt. Bei Verträgen im Status Entwurf oder In Prüfung fügt die App das Wasserzeichen automatisch in jedes erzeugte PDF ein – unabhängig von der Vorlage. Erst freigegebene Verträge ergeben ein Dokument ohne Wasserzeichen.
• Unbekannte Platzhalter bleiben stehen. Was die App nicht kennt, wird nicht ersetzt – ein Tippfehler ist also im PDF sichtbar statt stillschweigend verschluckt.
• Fern-Unterschrift nutzt immer den Standard. E-Mail-Anhänge der Funktion „Unterschrift per E-Mail anfordern“ werden stets mit der Standard-Vorlage erzeugt.

3. Platzhalter-Referenz

Platzhalter stehen in doppelten geschweiften Klammern und werden beim Erzeugen durch die Daten des Vertrags ersetzt. Leere Felder erscheinen als Gedankenstrich (–). Welche Platzhalter zur Verfügung stehen, hängt vom Dokumenttyp ab.

3a. Leihverträge Lehrkraft Schüler Verlängerung

Gilt für alle drei Vertragsvorlagen. Felder, die zum Vertragstyp nicht passen (z. B. Lehrkraft-Felder im Schülervertrag), werden als – ausgegeben.

3b. Empfangsbestätigung Empfangsbestätigung

3c. Rückgabeprotokoll Rückgabeprotokoll

Zusätzlich hängt die App automatisch die Foto-Anlage an, wenn Ausgabe- oder Rückgabe-Fotos vorhanden sind.

3d. Schadens- & Verlustmeldung Schadensmeldung Verlustmeldung

4. Unterschriften-Blöcke

Die SIGNATURE_…_BLOCK-Platzhalter werden nicht durch Text ersetzt, sondern durch einen kompletten HTML-Block: Unterschriftsbild (falls digital unterschrieben) oder Linie, darunter die Rollenbezeichnung. Fehlt die Partei (z. B. keine Erziehungsberechtigten), bleibt der Platzhalter leer.

Damit die Blöcke sauber aussehen, übernehmen Sie die zugehörigen CSS-Klassen aus der exportierten Standard-Vorlage – oder dieses Minimum:

.signatures-row { display: flex; gap: 8mm; margin-top: 14mm; }
.sig-block      { flex: 1; min-width: 0; }
.sig-img-wrap   { height: 18mm; display: flex; align-items: flex-end; }
.sig-img-empty  { height: 18mm; }
.sig-img        { max-height: 18mm; max-width: 100%; object-fit: contain; display: block; }
.sig-line       { border-top: 1pt solid #000; margin-top: 0; height: 0; }
.sig-role       { font-size: 9pt; color: #444; padding-top: 1.5mm; }
.sig-name       { font-size: 8pt; color: #666; font-style: italic; margin-top: 0.5mm; }

Und im Dokument an der Unterschriftenstelle (Beispiel Schülervertrag):

<div class="signatures-row">
  {{SIGNATURE_STUDENT_BLOCK}}
  {{SIGNATURE_GUARDIAN_BLOCK}}
  {{SIGNATURE_SCHOOL_REP_BLOCK}}
</div>