/* Fonts (Inter + Outfit) werden zentral via im jeder HTML-Seite geladen – siehe index.html / invoice.html / contracts.html etc. Dadurch ist die Schriftart sofort auf allen Geräten verfügbar, ohne render-blockierendes @import. */ /* CSS Custom Properties für einfache Anpassung */ :root { --brand-dark: #0B171A; --brand-surface: #11232A; --brand-input: #142B33; --brand-accent: #80C8BE; --brand-accent-hover: #9DD8D0; --brand-accent-glow: rgba(128, 200, 190, 0.15); --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; --border-subtle: rgba(128, 200, 190, 0.1); --border-default: rgba(128, 200, 190, 0.2); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 20px rgba(128, 200, 190, 0.1); --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1); } * { box-sizing: border-box; } body { background-color: var(--brand-dark); color: var(--text-primary); font-family: 'Outfit', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Dokument verwendet weiterhin Inter */ .a4-page { font-family: 'Inter', sans-serif; } /* Mobile Responsive Layout */ @media (max-width: 1023px) { /* Editor Panel */ #editor-panel { min-width: unset !important; max-width: unset !important; height: auto !important; min-height: 50vh; max-height: none; border-right: none !important; border-bottom: 1px solid var(--brand-input); } /* Preview skalieren für mobile Geräte */ #preview-wrapper { transform: scale(0.5) !important; transform-origin: top center; } /* Navigation anpassen */ nav { flex-wrap: wrap; height: auto !important; padding: 0.75rem !important; gap: 0.5rem; } nav > div:first-child h1 { font-size: 0.875rem !important; } nav > div:first-child h1 span { display: none; } } /* Glasmorphism Navbar - Browser Compatible */ nav { background: rgba(17, 35, 42, 0.95) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle) !important; } /* Section Collapse Transition */ .fa-chevron-down { transition: transform var(--transition-normal); } .section-content { max-height: 2000px; transition: max-height var(--transition-slow), opacity var(--transition-normal), padding var(--transition-normal); overflow: hidden; opacity: 1; } .section-content.collapsed { max-height: 0 !important; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; } /* Modern Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--brand-input); border-radius: 3px; transition: background var(--transition-fast); } ::-webkit-scrollbar-thumb:hover { background: var(--brand-accent); } /* Firefox Scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--brand-input) transparent; } /* A4 Paper Styling for Preview */ .a4-page { width: 210mm; min-height: 297mm; height: 297mm; /* Feste Höhe für Pagination */ padding: 0; /* Padding handled inside via DIN margins */ background: white; color: black; box-shadow: 0 0 20px rgba(0,0,0,0.5); margin: 0 auto 20px auto; /* Abstand zwischen Seiten */ position: relative; overflow: hidden; box-sizing: border-box; page-break-after: always; /* Scale logic is handled in JS for responsiveness */ } /* Hintergrundbild als CSS Background */ .bg-pattern { position: absolute; right: 0; top: 0; width: 100%; height: 100%; opacity: 1; pointer-events: none; background-image: url('src/bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Bedingte Anzeige nur bei Rechnungen */ .invoice-only { display: block; } body[data-doc-type="quote"] .invoice-only { display: none !important; } /* Für mehrere Seiten Container */ #preview-wrapper { display: flex; flex-direction: column; gap: 30px; padding: 20px 0; align-items: center; } /* Zweite Seite und Folgeseiten */ #preview-wrapper .a4-page:not(:first-child) { margin-top: 0; } /* Seitentrennlinie zwischen Seiten in Vorschau */ #preview-wrapper .a4-page { box-shadow: 0 0 20px rgba(0,0,0,0.5); } /* DIN 5008 Layout Helpers */ .din-header { height: 45mm; position: relative; z-index: 1; /* reserved header area */ } .logo-position { top: 15mm; right: 20mm; /* Rechts statt links */ } .logo-image { height: 15mm; width: auto; } .address-field { position: absolute; top: 45mm; /* Form A: 27mm, Form B: 45mm (Standard) */ left: 20mm; width: 85mm; height: 45mm; font-size: 10pt; padding-top: 5mm; /* Sender line area */ z-index: 1; } .sender-line { font-size: 8pt; text-decoration: underline; margin-bottom: 2mm; color: #555; } .info-block { position: absolute; top: 45mm; /* Aligned with address block top */ right: 20mm; /* 20mm margin right */ width: 80mm; /* Erweitert für QR-Code */ text-align: left; font-size: 10pt; z-index: 1; } .content-area { margin-top: 60mm; /* Noch weiter reduziert von 70mm */ margin-left: 20mm; margin-right: 20mm; margin-bottom: 20mm; position: relative; z-index: 1; } .fold-mark-1 { position: absolute; left: 0; top: 105mm; width: 5mm; border-top: 1px solid #ccc; z-index: 1; } .fold-mark-2 { position: absolute; left: 0; top: 210mm; width: 5mm; border-top: 1px solid #ccc; z-index: 1; } .punch-mark { position: absolute; left: 0; top: 148.5mm; width: 7mm; border-top: 1px solid #000; z-index: 1; } /* Print Specifics */ @media print { @page { size: A4; margin: 0; } * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } body { margin: 0; padding: 0; background: white !important; } /* Alles außer die A4-Seiten ausblenden */ nav, #editor-panel { display: none !important; } /* Live-Vorschau Badge ausblenden */ .absolute.top-4.right-4 { display: none !important; } /* Preview-Bereich als einziges sichtbares Element */ body > div.flex { display: block !important; } body > div.flex > div:first-child { display: none !important; /* Editor ausblenden */ } body > div.flex > div:last-child { display: block !important; position: static !important; width: 100% !important; height: auto !important; overflow: visible !important; background: white !important; padding: 0 !important; } #preview-wrapper { display: block !important; transform: none !important; scale: 1 !important; padding: 0 !important; margin: 0 !important; width: 100% !important; } .a4-page { box-shadow: none !important; margin: 0 !important; page-break-after: always; page-break-inside: avoid; display: block !important; width: 210mm !important; height: 297mm !important; position: relative !important; } /* Zweite Seite nur drucken wenn sie existiert */ #doc-preview-page-2 { page-break-before: always; } /* Footer MUSS sichtbar sein */ .a4-page > .absolute.bottom-0 { display: block !important; page-break-inside: avoid !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; } /* Hintergrundbild im Druck anzeigen */ .bg-pattern { opacity: 1 !important; display: block !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* QR-Code Wrapper sichtbar machen */ #qr-container-wrapper { display: flex !important; } #qrcode { display: inline-block !important; } } /* Form Inputs - Modern Style */ .input-group { position: relative; } .input-group label { display: block; font-size: 0.7rem; color: var(--brand-accent); margin-bottom: 0.375rem; font-weight: 500; letter-spacing: 0.025em; text-transform: uppercase; opacity: 0.85; transition: opacity var(--transition-fast), color var(--transition-fast); } .input-group:focus-within label { opacity: 1; color: var(--brand-accent-hover); } .input-field { width: 100%; background-color: var(--brand-input); border: 1px solid var(--border-subtle); color: var(--text-primary); padding: 0.625rem 0.75rem; border-radius: var(--radius-md); font-size: 0.875rem; transition: all var(--transition-fast); backdrop-filter: blur(4px); } .input-field::placeholder { color: var(--text-muted); opacity: 0.7; } .input-field:hover { border-color: var(--border-default); background-color: rgba(20, 43, 51, 0.8); } .input-field:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 3px var(--brand-accent-glow); background-color: rgba(20, 43, 51, 0.95); } /* Textarea Specific */ textarea.input-field { resize: vertical; min-height: 60px; line-height: 1.5; } /* Modern Toggle Switch */ .toggle-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--brand-input); border: 1px solid var(--border-default); transition: background var(--transition-fast), border-color var(--transition-fast); border-radius: 24px; } .toggle-slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color: var(--text-muted); transition: transform var(--transition-fast), background var(--transition-fast); border-radius: 50%; } .toggle-switch input:checked + .toggle-slider { background-color: var(--brand-accent); border-color: var(--brand-accent); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); background-color: var(--brand-dark); } .toggle-switch input:focus + .toggle-slider { box-shadow: 0 0 0 3px var(--brand-accent-glow); } /* Legacy checkbox styling (for backwards compatibility) */ input[type="checkbox"]:not(.toggle-switch input) { appearance: none; -webkit-appearance: none; width: 1.25rem; height: 1.25rem; background: var(--brand-input); border: 2px solid var(--border-default); border-radius: var(--radius-sm); cursor: pointer; position: relative; transition: all var(--transition-fast); } input[type="checkbox"]:not(.toggle-switch input):hover { border-color: var(--brand-accent); background: rgba(128, 200, 190, 0.1); } input[type="checkbox"]:not(.toggle-switch input):checked { background: var(--brand-accent); border-color: var(--brand-accent); } input[type="checkbox"]:not(.toggle-switch input):checked::after { content: ''; position: absolute; left: 5px; top: 2px; width: 5px; height: 10px; border: solid var(--brand-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); } input[type="checkbox"]:not(.toggle-switch input):focus { outline: none; box-shadow: 0 0 0 3px var(--brand-accent-glow); } .toggle-checkbox:checked { right: 0; border-color: var(--brand-accent); } .toggle-checkbox:checked + .toggle-label { background-color: var(--brand-accent); } /* Doc Type Toggle - Modern Segmented Control */ .doc-type-toggle { display: flex; background: var(--brand-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 4px; gap: 4px; } .doc-type-toggle button { padding: 0.5rem 1.25rem; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; transition: background var(--transition-fast), color var(--transition-fast); border: none; background: transparent; color: var(--text-muted); } .doc-type-toggle button:hover:not(.active) { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); } .doc-type-toggle button.active { background: var(--brand-accent); color: var(--brand-dark); } /* Language Toggle - Modern Style */ .language-toggle { display: flex; align-items: center; gap: 4px; } .lang-btn { width: 36px; height: 36px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; border: 2px solid transparent; background: transparent; cursor: pointer; transition: all var(--transition-fast); padding: 4px; } .lang-btn:hover { background: rgba(255, 255, 255, 0.1); } .lang-btn.active { border-color: var(--brand-accent); background: var(--brand-accent)/20; } .lang-btn img { width: 24px; height: 24px; border-radius: 4px; object-fit: cover; } /* Icon Buttons (Upload/Download) */ .icon-btn { width: 40px; height: 40px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; border: none; font-size: 1rem; transition: all var(--transition-fast); } .icon-btn:hover { transform: scale(1.05); } /* Toast Notification Styles */ .toast { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--radius-lg); background: var(--brand-surface); border: 1px solid var(--brand-accent); box-shadow: var(--shadow-lg), 0 0 20px rgba(128, 200, 190, 0.2); color: var(--text-primary); font-size: 0.875rem; font-weight: 500; animation: toastSlideIn 0.3s ease-out, toastFadeOut 0.3s ease-in 2.7s forwards; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .toast.success { border-color: var(--brand-accent); } .toast.success .toast-icon { color: var(--brand-accent); } .toast-icon { font-size: 1rem; } .toast-message { flex: 1; } @keyframes toastSlideIn { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } @keyframes toastFadeOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100px); } } .position-box input { background: rgba(24, 51, 61, 0.8) !important; } .position-box:hover input { background: rgba(24, 51, 61, 1) !important; } /* Export Dropdown Styles - Modern with Backdrop Blur */ #export-dropdown { animation: dropdownSlideIn 0.2s ease-out; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background: rgba(17, 35, 42, 1) !important; } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } #export-dropdown button { transition: background var(--transition-fast); } #export-dropdown button:hover { background: rgba(128, 200, 190, 0.1) !important; } #export-dropdown button:last-child { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); } /* eRechnung Badge */ .einvoice-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #059669 0%, #10B981 100%); color: white; font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } /* PDF Export Container Styles (für Multi-Page Export) */ .pdf-page { width: 210mm; min-height: 297mm; height: 297mm; background: white; position: relative; font-family: 'Inter', sans-serif; font-size: 10pt; color: black; page-break-after: always; box-sizing: border-box; overflow: hidden; } .pdf-page .bg-pattern { position: absolute; right: 0; top: 0; width: 100%; height: 100%; opacity: 1; pointer-events: none; background: url('src/bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; } /* Verbesserte Print Styles für Multi-Page */ @media print { .pdf-page { page-break-after: always !important; page-break-inside: avoid !important; } .pdf-page:last-child { page-break-after: auto !important; } /* Dropdown im Druck ausblenden */ #export-dropdown, #export-dropdown-container .absolute { display: none !important; } /* Sicherstellen dass alle Seiten gedruckt werden */ .a4-page, .pdf-page { display: block !important; visibility: visible !important; } } /* Tooltip für eRechnung Info - Modern */ .tooltip-einvoice { position: relative; } .tooltip-einvoice::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: rgba(31, 41, 55, 0.95); backdrop-filter: blur(8px); color: white; padding: 8px 12px; border-radius: var(--radius-md); font-size: 11px; white-space: nowrap; opacity: 0; visibility: hidden; transition: all var(--transition-fast); z-index: 100; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.1); } .tooltip-einvoice:hover::after { opacity: 1; visibility: visible; bottom: calc(100% + 8px); } /* ============================================ MODERN UI ENHANCEMENTS ============================================ */ /* Section Cards - Clean Style */ section.bg-brand-surface { background: rgba(17, 35, 42, 0.85) !important; border: 1px solid var(--border-subtle) !important; transition: border-color var(--transition-fast); } /* Section Headers */ section .cursor-pointer { border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin: -1px -1px 0 -1px; /* padding: 1.25rem 1.5rem !important; */ } /* Modern Buttons - Base */ button { cursor: pointer; font-weight: 500; } /* Primary Action Button (Export) */ .bg-brand-accent { background: var(--brand-accent) !important; transition: background var(--transition-fast); border: none; } .bg-brand-accent:hover { background: var(--brand-accent-hover) !important; } /* Secondary Buttons */ .bg-white\/5 { border: 1px solid var(--border-subtle); transition: background var(--transition-fast), color var(--transition-fast); } .bg-white\/5:hover { background: rgba(255, 255, 255, 0.1) !important; } /* Add Item Button */ .bg-brand-input { transition: background var(--transition-fast), color var(--transition-fast); } button.bg-brand-input:hover { background: var(--brand-accent) !important; color: var(--brand-dark) !important; } /* Position Item Cards */ .position-box { background: rgba(17, 35, 42, 0.6) !important; border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-lg) !important; position: relative; overflow: hidden; border-left: 3px solid var(--brand-accent) !important; } /* Delete Button in Position Box */ .position-box button[onclick*="removeItem"] { opacity: 0.6; transition: opacity var(--transition-fast), color var(--transition-fast); } .position-box:hover button[onclick*="removeItem"] { opacity: 1; } .position-box button[onclick*="removeItem"]:hover { color: #ef4444 !important; } /* Preview Panel Background Pattern */ .bg-dots { background-image: radial-gradient(rgba(128, 200, 190, 0.08) 1px, transparent 1px); background-size: 24px 24px; } /* Live Preview Badge */ .absolute.top-4.right-4 { background: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(8px); border: 1px solid var(--border-subtle); padding: 0.375rem 0.75rem; border-radius: var(--radius-md); font-weight: 500; letter-spacing: 0.025em; } /* Editor Panel Scrollbar Gutter */ #editor-panel { background: linear-gradient(180deg, var(--brand-dark) 0%, rgba(11, 23, 26, 0.95) 100%) !important; border-right: 1px solid var(--border-subtle) !important; } /* Icon Styling in Headers */ h2 i.fa-solid:not(.fa-chevron-down) { font-size: 0.9em; opacity: 0.9; } /* Header Badges - Pill Style */ .header-badge { display: inline-flex; align-items: center; padding: 0.375rem 0.875rem; font-size: 0.75rem; font-weight: 600; border-radius: 9999px; background: rgba(128, 200, 190, 0.15); color: var(--brand-accent); border: 1px solid rgba(128, 200, 190, 0.3); } /* Focus Ring for Accessibility */ *:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; } /* A4 Page Styling */ .a4-page { box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); } /* Text Selection */ ::selection { background: rgba(128, 200, 190, 0.3); color: var(--text-primary); } /* Loading States Animation */ @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(128, 200, 190, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(128, 200, 190, 0); } } .pulse-glow { animation: pulse-glow 2s infinite; } /* Divider Lines */ .border-brand-input { border-color: var(--border-subtle) !important; } /* Footer Columns Textarea */ textarea.h-20 { min-height: 5rem; } /* Number Input Spinner Styling */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { opacity: 0.5; transition: opacity var(--transition-fast); } input[type="number"]:hover::-webkit-inner-spin-button, input[type="number"]:hover::-webkit-outer-spin-button, input[type="number"]:focus::-webkit-inner-spin-button, input[type="number"]:focus::-webkit-outer-spin-button { opacity: 1; } /* Bold Button in Text Editors */ .bold-btn { transition: all var(--transition-fast); border: 1px solid var(--border-subtle); } .bold-btn:hover { background: var(--brand-accent) !important; color: var(--brand-dark) !important; border-color: var(--brand-accent); } /* Section Icons - Static */ section h2 i.text-brand-accent:not(.fa-chevron-down) { transition: none; } /* Hide scrollbar when not needed */ #editor-panel::-webkit-scrollbar-thumb { background: transparent; } #editor-panel:hover::-webkit-scrollbar-thumb { background: var(--brand-input); } /* Responsive Enhancements */ @media (max-width: 1023px) { section.bg-brand-surface:hover { transform: none; } .position-box::before { opacity: 1; } }