/* Wunschzettel zum Ausdrucken (/wunschzettel/{vorlage}): eine DIN-A4-Seite, wenig Farbe, Linien zum Ausmalen. */
@page { size: A4; margin: 0; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #eceff1; color: #2c3e50; font-family: "DejaVu Serif", Georgia, serif; }
.blatt {
    width: 210mm; height: 297mm; margin: 12mm auto; padding: 14mm 16mm 12mm;
    background: #fff; position: relative; overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
}
.rahmen { position: absolute; inset: 7mm; border: 1.2mm solid #c44569; border-radius: 6mm; pointer-events: none; }
.rahmen::after { content: ""; position: absolute; inset: 1.6mm; border: .4mm dashed #c44569; border-radius: 4.5mm; }
.kopf { text-align: center; position: relative; }
.kopf h1 { font-size: 30pt; margin: 4mm 0 2mm; letter-spacing: .5pt; }
.kopf .sterne { display: flex; justify-content: center; gap: 6mm; }
.kopf .sterne svg { width: 9mm; height: 9mm; }
.baum { position: absolute; top: 0; width: 22mm; height: 30mm; }
.baum.links { left: 2mm; } .baum.rechts { right: 2mm; transform: scaleX(-1); }
.angaben { display: flex; gap: 8mm; margin: 6mm 0 5mm; font-size: 14pt; }
.angaben span { flex: 1; display: flex; align-items: flex-end; gap: 2mm; white-space: nowrap; }
.angaben span::after { content: ""; flex: 1; border-bottom: .35mm solid #7f8c8d; height: 1px; }
.angaben .kurz { flex: 0 0 45mm; }
.hinweis { text-align: center; font-size: 12pt; color: #7f8c8d; margin: 0 0 4mm; }

/* Vorlage "malen": sechs grosse Felder */
.felder { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 5mm; }
.feld { border: .5mm dashed #7f8c8d; border-radius: 4mm; position: relative; }
.feld .nr { position: absolute; top: 2mm; left: 2mm; width: 9mm; height: 9mm; }
.feld .nr text { font: bold 7px "DejaVu Serif", serif; fill: #2c3e50; }

/* Vorlage "schreiben": Linien */
.an { font-size: 15pt; margin: 4mm 0 3mm; display: flex; align-items: flex-end; gap: 2mm; }
.an::after { content: ""; flex: 1; border-bottom: .35mm solid #7f8c8d; }
.abschnitt { font-size: 14pt; font-weight: bold; margin: 4mm 0 1mm; }
ol.linien { list-style: none; margin: 0; padding: 0; counter-reset: wunsch; }
ol.linien li { counter-increment: wunsch; height: 12mm; border-bottom: .35mm solid #b0bec5; display: flex; align-items: flex-end; font-size: 13pt; padding-bottom: 1mm; }
ol.linien li::before { content: counter(wunsch) "."; width: 9mm; color: #c44569; font-weight: bold; }
.groesster { border: .5mm dashed #c44569; border-radius: 4mm; height: 30mm; margin-top: 2mm; padding: 2mm 3mm; font-size: 11pt; color: #7f8c8d; }
.leer { height: 12mm; border-bottom: .35mm solid #b0bec5; }
.gruss { margin-top: auto; font-size: 14pt; display: flex; align-items: flex-end; gap: 2mm; padding-top: 6mm; }
.gruss::after { content: ""; width: 70mm; border-bottom: .35mm solid #7f8c8d; }

.fuss { text-align: center; font-size: 9pt; color: #9aa5ab; margin-top: 4mm; }
.leiste { text-align: center; margin: 6mm auto 0; font-family: system-ui, sans-serif; }
.leiste button, .leiste a { font: inherit; padding: 2.5mm 6mm; border-radius: 2mm; border: 0; background: #c44569; color: #fff; text-decoration: none; cursor: pointer; margin: 0 1mm; }
.leiste a.zweit { background: #fff; color: #2c3e50; border: .3mm solid #7f8c8d; }

@media print {
    html, body { background: #fff; }
    .blatt { margin: 0; box-shadow: none; }
    .leiste { display: none; }
}