/* * theme.css – Bootstrap 5 Theme für Pfefferwerk Mediengestaltung * Primärfarbe: #e3000f (Pfefferwerk-Rot) */ /* ── CSS-Variablen Override ─────────────────────────────────────────────────── */ :root { --pw-red: #e3000f; --pw-red-dark: #b5000c; --pw-red-light: #fde8e9; --pw-text: #1a1a1a; --pw-muted: #6c757d; --pw-border: #dee2e6; --pw-bg: #f4f4f4; /* Bootstrap 5 Überschreibungen */ --bs-primary: #e3000f; --bs-primary-rgb: 227, 0, 15; --bs-link-color: #e3000f; --bs-link-hover-color: #b5000c; --bs-focus-ring-color: rgba(227, 0, 15, 0.25); } /* ── Typografie & Basis ─────────────────────────────────────────────────────── */ /* * Puffin Display – Schriftdateien in new-form/fonts/ ablegen: * fonts/PuffinDisplay-Regular.woff2 / fonts/PuffinDisplay-Regular.woff * fonts/PuffinDisplay-Bold.woff2 / fonts/PuffinDisplay-Bold.woff * Lizenz: Fontfabric (https://www.fontfabric.com/fonts/puffin-display/) */ @font-face { font-family: 'Puffin Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/PuffinDisplay-Regular.woff2') format('woff2'), url('fonts/PuffinDisplay-Regular.woff') format('woff'); } @font-face { font-family: 'Puffin Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/PuffinDisplay-Bold.woff2') format('woff2'), url('fonts/PuffinDisplay-Bold.woff') format('woff'); } /* * Atkinson Hyperlegible wird per Google Fonts geladen (siehe index.php ). * Fallback greift, solange der Font noch nicht im Cache ist. */ body { font-family: 'Atkinson Hyperlegible', 'Segoe UI', Arial, sans-serif; background-color: var(--pw-bg); color: var(--pw-text); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .pw-branding .contact, .card-title { font-family: 'Puffin Display', 'Segoe UI', Arial, sans-serif; font-weight: 700; } a { color: var(--pw-red); } a:hover { color: var(--pw-red-dark); } /* ── Header / Branding ─────────────────────────────────────────────────────── */ .pw-branding { background: #fff; border-bottom: 3px solid var(--pw-red); padding: 1rem 0; } .pw-branding .logo img { max-height: 56px; width: auto; } .pw-branding .contact { font-size: 0.875rem; line-height: 1.6; text-align: right; } .pw-branding .contact a { color: var(--pw-red); text-decoration: none; } /* ── Info-Box (rot) ─────────────────────────────────────────────────────────── */ .pw-intro { background-color: var(--pw-red); color: #fff; border-radius: 4px; padding: 1.25rem 1.5rem; font-size: 0.95rem; line-height: 1.5; } .pw-intro p { margin-bottom: 0.5rem; } .pw-intro p:last-child { margin-bottom: 0; } .pw-intro a { color: #fff; text-decoration: underline; } .pw-intro a:hover { color: #ffe0e0; } /* Bestätigungs-Checkbox in der roten Box */ .pw-confirm-box { background-color: var(--pw-red); color: #fff; border-radius: 0 0 4px 4px; padding: 1rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.3); } .pw-confirm-box .form-check-input:checked { background-color: #fff; border-color: #fff; } .pw-confirm-box .form-check-input:checked+.form-check-label::before { color: var(--pw-red); } .pw-confirm-box .form-check-label { color: #fff; font-weight: 600; cursor: pointer; } .pw-confirm-box .btn-outline-light { border-color: rgba(255, 255, 255, 0.7); color: #fff; font-size: 0.85rem; } .pw-confirm-box .btn-outline-light:hover { background-color: rgba(255, 255, 255, 0.15); } /* ── ×-Schließen-Button in der roten Info-Box ──────────────────────────────── */ .pw-intro-close { position: absolute; top: 0.75rem; right: 0.75rem; background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; color: #fff; width: 28px; height: 28px; line-height: 1; font-size: 0.9rem; cursor: not-allowed; opacity: 0.45; transition: opacity 0.2s, background 0.2s; display: flex; align-items: center; justify-content: center; } .pw-intro-close:not(:disabled) { cursor: pointer; opacity: 1; } .pw-intro-close:not(:disabled):hover { background: rgba(255, 255, 255, 0.2); } /* Schließen-Button in der confirm-box ebenfalls gedimmt wenn gesperrt */ .pw-confirm-box .btn-outline-light:disabled { opacity: 0.45; cursor: not-allowed; } /* ── Stepper ───────────────────────────────────────────────────────────────── */ .pw-stepper { display: flex; align-items: center; justify-content: center; gap: 0; padding: 1.5rem 0 0.5rem; overflow-x: auto; } .pw-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; } .pw-step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--pw-border); color: var(--pw-muted); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; transition: background 0.25s, color 0.25s; border: 2px solid var(--pw-border); } .pw-step-label { font-size: 0.75rem; color: var(--pw-muted); font-weight: 500; white-space: nowrap; transition: color 0.25s; } .pw-step.active .pw-step-num { background: var(--pw-red); color: #fff; border-color: var(--pw-red); } .pw-step.active .pw-step-label { color: var(--pw-red); font-weight: 700; } .pw-step.completed .pw-step-num { background: #28a745; color: #fff; border-color: #28a745; } .pw-step.completed .pw-step-label { color: #28a745; } .pw-step-line { flex: 1; min-width: 32px; height: 2px; background: var(--pw-border); align-self: center; margin-bottom: 20px; transition: background 0.25s; } .pw-step-line.completed { background: #28a745; } /* ── Formular-Card ─────────────────────────────────────────────────────────── */ .pw-form-card { border: none; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .pw-form-card .card-body { padding: 2rem; } /* ── Bootstrap Primary Overrides ───────────────────────────────────────────── */ .btn-primary { --bs-btn-bg: var(--pw-red); --bs-btn-border-color: var(--pw-red); --bs-btn-hover-bg: var(--pw-red-dark); --bs-btn-hover-border-color: var(--pw-red-dark); --bs-btn-active-bg: var(--pw-red-dark); --bs-btn-focus-shadow-rgb: 227, 0, 15; } .form-control:focus, .form-select:focus { border-color: var(--pw-red); box-shadow: 0 0 0 0.2rem rgba(227, 0, 15, 0.2); } .form-check-input:checked { background-color: var(--pw-red); border-color: var(--pw-red); } .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(227, 0, 15, 0.2); border-color: var(--pw-red); } /* ── Produkt-Detailbereiche ────────────────────────────────────────────────── */ .product-details { background: #fafafa; border: 1px solid var(--pw-border); border-radius: 6px; padding: 1.25rem 1.5rem; margin-top: 0.5rem; margin-bottom: 1rem; } .product-details h5 { font-size: 0.95rem; font-weight: 600; color: var(--pw-muted); margin-bottom: 1rem; } /* ── Richtpreis-Badge ──────────────────────────────────────────────────────── */ #preis-info { border-left: 4px solid var(--pw-red) !important; background: var(--pw-red-light) !important; } #preis-value { background-color: var(--pw-red) !important; font-size: 0.875rem !important; padding: 0.3em 0.65em; } /* ── Zusammenfassung ───────────────────────────────────────────────────────── */ .summary-section { border: 1px solid var(--pw-border); border-radius: 6px; overflow: hidden; margin-bottom: 1rem; } .summary-section-header { background: var(--pw-red-light); border-bottom: 1px solid var(--pw-border); padding: 0.6rem 1rem; font-weight: 700; font-size: 0.9rem; color: var(--pw-red-dark); cursor: pointer; } .summary-section-body { padding: 0.75rem 1rem; font-size: 0.9rem; } .summary-section-body dl { display: grid; grid-template-columns: 1fr 2fr; gap: 0.25rem 0.75rem; margin: 0; } .summary-section-body dt { color: var(--pw-muted); font-weight: 500; } .summary-section-body dd { margin: 0; } /* ── Prozessschritte (Info-Box unten) ──────────────────────────────────────── */ .process-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.75rem; margin-top: 0.75rem; } .process-step { background: #fff; border: 1px solid var(--pw-border); border-radius: 6px; padding: 0.75rem; text-align: center; font-size: 0.8rem; line-height: 1.4; } .process-step strong { display: block; font-size: 0.85rem; margin-bottom: 2px; color: var(--pw-red); } /* ── Validierungsfehler ────────────────────────────────────────────────────── */ .is-invalid~.invalid-feedback { display: block; } .step-error-summary { font-size: 0.9rem; } /* ── Datei-Vorschau ────────────────────────────────────────────────────────── */ .file-preview-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; background: #f8f9fa; border: 1px solid var(--pw-border); border-radius: 4px; margin-bottom: 0.4rem; font-size: 0.875rem; } .file-preview-item .file-icon { font-size: 1.1rem; } .file-preview-item .file-name { flex: 1; } .file-preview-item .file-size { color: var(--pw-muted); font-size: 0.8rem; } /* ── Responsive ────────────────────────────────────────────────────────────── */ @media (max-width: 576px) { .pw-form-card .card-body { padding: 1.25rem; } .pw-step-label { display: none; } .pw-step-line { min-width: 16px; } .summary-section-body dl { grid-template-columns: 1fr; } .summary-section-body dt::after { content: ':'; } }