/* ============================================================ PRINT.CSS — Druckoptimierung / PDF-Export Wird nur aktiv bei window.print() oder Strg+P. Zwei Layout-Klassen auf : .print-minimal → nur QR + Beschriftung .print-poster → QR + Titel + Inhalt + Anleitung ============================================================ */ @media print { /* ── ALLES AUSBLENDEN ─────────────────────────────────── */ *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; animation: none !important; transition: none !important; } .bg-grid, .bg-orb, .site-header, .controls-col, .site-footer, .panel-title, .download-grid, .btn--primary, .btn--ghost, .content-preview, .divider, #pdf-bar { display: none !important; } /* ── SEITEN-SETUP ─────────────────────────────────────── */ @page { size: A4 portrait; margin: 20mm; } html, body { background: #fff !important; color: #000 !important; font-family: 'SyneMono', 'Courier New', monospace; font-size: 12pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .page-wrapper { padding: 0 !important; max-width: 100% !important; animation: none !important; } .main-grid { display: block !important; } /* ── PREVIEW PANEL ────────────────────────────────────── */ .preview-col, .preview-panel { display: block !important; border: none !important; background: none !important; padding: 0 !important; } .preview-panel .qr-canvas-wrapper { background: #fff !important; border: none !important; padding: 0 !important; margin: 0 !important; min-height: unset !important; justify-content: center !important; animation: none !important; } /* QR-Code zentrieren */ #qr-canvas { display: flex !important; justify-content: center !important; } #qr-canvas canvas, #qr-canvas svg { max-width: 100% !important; } /* ── PRINT WRAPPER (wird per JS eingefügt) ────────────── */ .print-wrapper { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; page-break-inside: avoid !important; } /* ── LAYOUT: MINIMAL ──────────────────────────────────── */ /* Nur QR + kurze Beschriftung */ body.print-minimal .print-wrapper { padding-top: 20mm; } body.print-minimal .print-caption { display: block !important; margin-top: 6mm; font-size: 11pt; color: #333; word-break: break-all; max-width: 80mm; } body.print-minimal .print-title, body.print-minimal .print-content-box, body.print-minimal .print-instructions { display: none !important; } /* ── LAYOUT: POSTER (WiFi-Aushang etc.) ──────────────── */ body.print-poster .print-wrapper { padding-top: 10mm; gap: 6mm; } body.print-poster .print-title { display: block !important; font-family: 'Iceberg', sans-serif; font-size: 26pt; font-weight: 700; color: #000; margin-bottom: 4mm; letter-spacing: 1px; } body.print-poster .print-caption { display: none !important; } body.print-poster .print-content-box { display: block !important; margin: 4mm 0; padding: 4mm 8mm; border: 2px solid #000; border-radius: 6px; font-size: 12pt; max-width: 120mm; word-break: break-all; background: #f8f8f8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.print-poster .print-content-box .cb-label { font-size: 8pt; letter-spacing: 2px; text-transform: uppercase; color: #666; margin-bottom: 2mm; } body.print-poster .print-content-box .cb-value { font-size: 13pt; font-weight: bold; color: #000; } body.print-poster .print-instructions { display: block !important; margin-top: 5mm; font-size: 10pt; color: #555; max-width: 120mm; line-height: 1.6; border-top: 1px solid #ccc; padding-top: 4mm; } }