/* ========================================================================= Attika-Profi – Theme Farbwelt: Anthrazit/Stahl + Kupfer-Akzent (Bau/Fassade). 6 umschaltbare Akzent-Schemata über data-theme am -Element; das aktive Schema setzt config.php / Backend-Einstellungen (site_theme). @author S. Ludwig @date 06.2026 ========================================================================= */ :root { --ap-dark: #1f2429; --ap-dark-2: #2b3137; --ap-slate: #45525c; /* Zwei Grautöne: --ap-muted für Nebentext auf hellem Grund (auf Weiß 5,4:1, auf --ap-light 5,0:1), --ap-muted-l für dieselbe Rolle auf den dunklen Flächen (Topbar, Preisbox, Footer – dort 6,2:1). Ein gemeinsamer Wert war auf hellem Grund zu blass (2,5:1). */ --ap-muted: #626b73; --ap-muted-l: #9aa4ad; --ap-light: #f4f6f8; --ap-line: #e6eaee; --ap-accent: #c2682f; --ap-accent-2:#e09256; --ap-accent-c:#a8521f; --ap-accent-d:#8c4318; --ap-success: #2f9e57; --ap-radius: 14px; --ap-shadow: 0 18px 40px -18px rgba(15, 23, 30, .35); --ap-shadow-sm: 0 6px 18px -8px rgba(15, 23, 30, .25); --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* Akzent-Schemata: 1 Kupfer · 2 Stahlblau · 3 Moosgrün · 4 Rubinrot · 5 Schiefer · 6 Petrol Drei Tonwerte je Schema, weil ein einzelner nicht überall lesbar ist (WCAG AA, 4.5:1): --ap-accent Markenton – Ränder, Icons, Deko, Flächen ohne kleinen Text (3:1 genügt) --ap-accent-c „contrast“: alles, was Text ist oder weißen Text trägt (Buttons, Links) --ap-accent-d Hover-Zustand von accent-c (dunkler) --ap-accent-2 helle Variante für Text/Links auf den dunklen Flächen (Footer, Kopfbanner) Geprüft 07.2026: accent-c ↔ weiß 5,4–7,7 · accent-2 ↔ #2b3137 (helles Ende des Kopfbanner-Verlaufs, der ungünstigere Fall) 5,3–5,5. */ [data-theme="2"] { --ap-accent:#2f6fb0; --ap-accent-2:#7dabdc; --ap-accent-c:#245b94; --ap-accent-d:#1d4a79; } [data-theme="3"] { --ap-accent:#3f8a52; --ap-accent-2:#6bb47b; --ap-accent-c:#327043; --ap-accent-d:#285a36; } [data-theme="4"] { --ap-accent:#c0392b; --ap-accent-2:#ec8a7f; --ap-accent-c:#9e2d22; --ap-accent-d:#83251c; } [data-theme="5"] { --ap-accent:#6757b5; --ap-accent-2:#a89cdb; --ap-accent-c:#54479a; --ap-accent-d:#453a80; } [data-theme="6"] { --ap-accent:#1f8a99; --ap-accent-2:#45b3c2; --ap-accent-c:#16707d; --ap-accent-d:#115a65; } * { scroll-behavior: smooth; } body { font-family: var(--bs-body-font-family); color: #2a323a; background: #fff; } h1,h2,h3,h4,h5,h6 { font-weight: 700; color: var(--ap-dark); letter-spacing: -.01em; } a { text-decoration: none; } .skip-link { position: absolute; top: .5rem; left: .5rem; z-index: 2000; background: var(--ap-accent-c); color: #fff; padding: .5rem 1rem; border-radius: 8px; } /* ---- Buttons ---------------------------------------------------------- */ .btn { font-weight: 600; border-radius: 10px; padding: .6rem 1.3rem; transition: all .2s ease; } .btn-lg { padding: .8rem 1.7rem; } /* Flächen mit weißer Schrift und Akzent-Text laufen über --ap-accent-c: der reine Markenton erreicht in den Schemata 1, 3 und 6 nur ~4:1 gegen Weiß. */ .btn-accent { background: var(--ap-accent-c); border-color: var(--ap-accent-c); color: #fff; box-shadow: 0 4px 12px -8px rgba(15, 23, 30, .35); } .btn-accent:hover, .btn-accent:focus { background: var(--ap-accent-d); border-color: var(--ap-accent-d); color:#fff; transform: translateY(-2px); } .btn-outline-accent { color: var(--ap-accent-c); border-color: var(--ap-accent-c); background: transparent; } .btn-outline-accent:hover { background: var(--ap-accent-c); color: #fff; transform: translateY(-2px); } .btn-light:hover, .btn-outline-light:hover, .btn-outline-dark:hover { transform: translateY(-2px); } .text-accent { color: var(--ap-accent-c) !important; } /* ---- Topbar ----------------------------------------------------------- */ .topbar { background: var(--ap-dark); color: var(--ap-muted-l); font-size: .875rem; padding: .5rem 0; } .topbar a { color: var(--ap-muted-l); transition: color .2s; } .topbar a:hover { color: var(--ap-accent-2); } /* ---- Navbar ----------------------------------------------------------- */ .main-nav { background: #fff; box-shadow: 0 2px 16px -8px rgba(15, 23, 30, .25); padding: .6rem 0; } .main-nav.scrolled { box-shadow: 0 6px 22px -10px rgba(15, 23, 30, .4); } .navbar-brand { font-size: 1.4rem; color: var(--ap-dark); display: flex; align-items: center; gap: .5rem; } /* Wortmarke: heller Grund im Kopf, dunkler im Fuß – daher zwei Tonwerte. */ .navbar-brand .brand-text strong { color: var(--ap-accent-c); } .footer-brand strong { color: var(--ap-accent-2); } .brand-logo { height: 44px; width: auto; } .main-nav .nav-link { font-weight: 600; color: var(--ap-dark-2); padding: .5rem .8rem; position: relative; white-space: nowrap; } @media (min-width: 992px) and (max-width: 1199.98px) { .main-nav .nav-link { padding: .5rem .55rem; font-size: .95rem; } } .main-nav .nav-link::after { content: ''; position: absolute; left: .85rem; right: .85rem; bottom: .25rem; height: 2px; background: var(--ap-accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .main-nav .nav-link:hover::after, .main-nav .nav-link.active::after { transform: scaleX(1); } .main-nav .nav-link.active { color: var(--ap-accent-c); } /* Warenkorb-Link + Badge */ .cart-link { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: var(--ap-dark-2); font-size: 1.15rem; transition: background .2s, color .2s; } .cart-link:hover { background: var(--ap-light); color: var(--ap-accent-c); } .cart-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--ap-accent-c); color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; border-radius: 999px; } /* ---- Hero ------------------------------------------------------------- */ .hero { position: relative; color: #fff; overflow: hidden; background: linear-gradient(135deg, var(--ap-dark) 0%, var(--ap-dark-2) 55%, var(--ap-slate) 100%); padding: clamp(3.5rem, 8vw, 7rem) 0; } .hero-overlay { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--ap-accent) 28%, transparent), transparent 45%), radial-gradient(circle at 10% 90%, rgba(69, 82, 92, .4), transparent 40%); } .hero-kicker { display: inline-block; background: color-mix(in srgb, var(--ap-accent) 16%, transparent); color: var(--ap-accent-2); border: 1px solid color-mix(in srgb, var(--ap-accent) 38%, transparent); padding: .4rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 600; margin-bottom: 1.25rem; } .hero-title { color: #fff; font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.25rem; } .hero-text { color: #d6dee5; font-size: 1.125rem; max-width: 36rem; margin-bottom: 1.75rem; } .hero-badges span { color: #cdd6de; font-size: .95rem; } .hero-badges i { color: var(--ap-accent-2); } .hero-image-wrap { border-radius: var(--ap-radius); overflow: hidden; box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .1); transform: perspective(1200px) rotateY(-6deg) rotateX(2deg); transition: transform .4s ease; } .hero-image-wrap:hover { transform: perspective(1200px) rotateY(0) rotateX(0); } .hero-image { display: block; width: 100%; } /* ---- Sektionen -------------------------------------------------------- */ .section { padding: clamp(3rem, 6vw, 5.5rem) 0; } .section-light { background: var(--ap-light); } .section-dark { background: var(--ap-dark); color: #fff; } .section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; } .section-head { max-width: 46rem; margin: 0 auto 3rem; text-align: center; } .section-kicker { color: var(--ap-accent-c); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; } .section-title { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-top: .5rem; } .section-lead { color: #5a6670; font-size: 1.1rem; margin-top: .75rem; } /* ---- Feature-/USP-Cards ---------------------------------------------- */ .feature-card { background: #fff; border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 2rem; height: 100%; transition: transform .25s ease, box-shadow .25s ease; } .feature-card:hover { transform: translateY(-6px); box-shadow: var(--ap-shadow); border-color: transparent; } .feature-icon { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--ap-accent), var(--ap-accent-2)); color: #fff; font-size: 1.4rem; margin-bottom: 1.25rem; box-shadow: 0 6px 14px -10px rgba(15, 23, 30, .3); } .feature-card h3 { font-size: 1.2rem; margin-bottom: .6rem; } .feature-card p { color: #5a6670; margin-bottom: 0; } /* ---- Ablauf (Steps) --------------------------------------------------- */ .step { text-align: center; padding: 1rem; } .step-num { width: 52px; height: 52px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.25rem; color: #fff; background: var(--ap-accent); box-shadow: var(--ap-shadow-sm); } .step h3 { font-size: 1.1rem; } .step p { color: #5a6670; } /* ---- Produkt-Karten --------------------------------------------------- */ .product-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--ap-line); border-radius: var(--ap-radius); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .product-card:hover { transform: translateY(-6px); box-shadow: var(--ap-shadow); border-color: transparent; } .product-card-media { background: var(--ap-light); aspect-ratio: 16 / 10; overflow: hidden; } .product-card-media img { width: 100%; height: 100%; object-fit: cover; } .product-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; } .product-card-title { font-size: 1.25rem; margin: .25rem 0 .5rem; } .product-card-body p { color: #5a6670; } .product-price { font-weight: 800; color: var(--ap-dark); } .product-price small { color: var(--ap-muted); font-weight: 600; } /* ---- Bildraster / Galerie -------------------------------------------- */ .gallery-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--ap-radius); box-shadow: var(--ap-shadow-sm); } /* ---- Check-Liste ------------------------------------------------------ */ .check-list { list-style: none; padding: 0; margin: 1.25rem 0 0; } .check-list li { position: relative; padding-left: 2rem; margin-bottom: .75rem; color: #3a4450; } .check-list li i { position: absolute; left: 0; top: .25rem; color: var(--ap-success); } /* ---- Rich-Text (Beschreibungen aus dem Backend) ---------------------- */ .rich p { color: #3a4450; } .rich p:last-child { margin-bottom: 0; } .rich ul, .rich ol { padding-left: 1.25rem; color: #3a4450; } .rich h2, .rich h3, .rich h4 { margin: 1.1rem 0 .5rem; } .rich h2 { font-size: 1.2rem; } .rich h3 { font-size: 1.1rem; } .rich a { color: var(--ap-accent-c); } /* ---- Konfigurator ----------------------------------------------------- */ .config-media img { width: 100%; border-radius: var(--ap-radius); box-shadow: var(--ap-shadow); } /* ---- Geführter Konfigurator (nach Maß) ------------------------------- */ .mode-toggle .btn { flex: 1; } .garage-picker { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; } .garage-svg { width: 220px; max-width: 62%; height: auto; } .garage-svg .garage-body { fill: var(--ap-light); stroke: #cdd6de; stroke-width: 2; } .garage-svg .edge { stroke: #cdd6de; stroke-width: 7; stroke-linecap: round; cursor: pointer; transition: stroke .15s ease; } .garage-svg .edge:hover { stroke: var(--ap-accent-2); } .garage-svg .edge.on { stroke: var(--ap-accent); } .garage-svg .edge-label { fill: var(--ap-muted); font-size: 11px; } .edge-checks { display: flex; flex-direction: column; gap: .35rem; } .edge-check { font-weight: 500; color: var(--ap-dark-2); cursor: pointer; } .guided-summary { background: var(--ap-light); border-radius: 10px; padding: .8rem 1rem; margin-top: .75rem; } .guided-summary .gs-row { display: flex; justify-content: space-between; font-weight: 700; color: var(--ap-dark); } .guided-summary .gs-meta { color: var(--ap-muted); font-size: .85rem; margin-top: .25rem; } .guided-acc { margin-top: .75rem; } .guided-acc .acc-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .4rem 0; border-bottom: 1px dashed var(--ap-line); } .guided-acc .acc-qty { width: 80px; } .config-panel { background: #fff; border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1.75rem; } .config-group { margin-bottom: 1.25rem; } .config-group > label.form-label { font-weight: 600; color: var(--ap-dark-2); } /* Dezenter Hinweis im Konfigurator (z. B. Mess-Erklärung bei „Maße"). */ .config-hint { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .9rem; border-radius: 10px; line-height: 1.45; font-size: .85rem; color: var(--ap-dark-2); background: color-mix(in srgb, var(--ap-accent) 8%, #fff); border: 1px solid color-mix(in srgb, var(--ap-accent) 22%, transparent); } .config-hint i { flex-shrink: 0; margin-top: .12rem; color: var(--ap-accent); } /* Maßfehler direkt unter dem Feld: rot, aber ohne Bootstrap-Validierungs-Overhead. Die Farbe erreicht auf Weiß 4,8:1 (WCAG AA für Fließtext). */ .mass-error { margin-top: .35rem; font-size: .85rem; font-weight: 600; color: #b3261e; } .mass-error:empty { display: none; } .form-control.is-invalid { border-color: #b3261e; box-shadow: 0 0 0 .18rem rgba(179, 38, 30, .15); } .color-swatches { display: flex; flex-wrap: wrap; gap: .6rem; } .color-swatch { position: relative; cursor: pointer; } .color-swatch input { position: absolute; opacity: 0; } .color-swatch .dot { display: block; width: 38px; height: 38px; border-radius: 10px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ap-line); transition: box-shadow .15s, transform .15s; } .color-swatch:hover .dot { transform: scale(1.08); } .color-swatch input:checked + .dot { box-shadow: 0 0 0 2px var(--ap-accent); } /* Der Radio-Button selbst ist unsichtbar (opacity 0) – der Fokusring muss daher am sichtbaren Farbpunkt erscheinen, sonst ist bei Tastaturbedienung nicht erkennbar, wo man steht (analog zu .finish-option weiter unten). */ .color-swatch input:focus-visible + .dot { outline: 2px solid var(--ap-dark); outline-offset: 3px; } .color-swatch .ral { display: block; font-size: .7rem; color: var(--ap-muted); text-align: center; margin-top: .2rem; } /* RAL-Wunschfarbe: Regenbogen-Kachel + Eingabefelder */ .color-swatch-custom .dot-custom { display: flex; align-items: center; justify-content: center; font-size: .9rem; color: #2b2b2b; background: conic-gradient(from 0deg, #f25b5b, #f2c14e, #7bd16b, #4ec5c1, #5b8def, #b06bd1, #f25b5b); } /* Ausführung als Pills (RAL-Farbe / Feuerverzinkt / Fassadenputz) */ .finish-options { display: flex; flex-wrap: wrap; gap: .5rem; } .finish-option { position: relative; cursor: pointer; } .finish-option input { position: absolute; opacity: 0; } .finish-pill { display: block; padding: .45rem .95rem; border-radius: 999px; border: 1px solid var(--ap-line); font-size: .9rem; color: var(--ap-dark); background: #fff; transition: border-color .15s, background .15s, color .15s; } .finish-option:hover .finish-pill { border-color: var(--ap-accent); } .finish-option input:checked + .finish-pill { border-color: var(--ap-accent-c); background: var(--ap-accent-c); color: #fff; } .finish-option input:focus-visible + .finish-pill { outline: 2px solid var(--ap-accent); outline-offset: 2px; } .price-box { position: sticky; top: 90px; background: var(--ap-dark); color: #fff; border-radius: var(--ap-radius); padding: 1.5rem 1.75rem; } .price-box .price-now { font-size: 2.2rem; font-weight: 800; color: #fff; } .price-box .price-meta { color: var(--ap-muted-l); font-size: .9rem; } .price-box .price-unit { color: #cdd6de; } /* Unvollständige Konfiguration: Der Knopf bleibt fokussierbar (aria-disabled statt disabled), damit Tastaturnutzer ihn überhaupt finden und den Hinweis hören, was noch fehlt. Ein echtes disabled ist aus der Tabreihenfolge verschwunden. */ .btn[aria-disabled="true"] { opacity: .65; } .btn[aria-disabled="true"]:hover, .btn[aria-disabled="true"]:focus { transform: none; } /* ---- Referenz-Slider („Umgesetzte Projekte") ------------------------- */ /* Scroll-Snap statt Slider-Library: Ohne JavaScript bleibt der Streifen wischbar und mit den Pfeiltasten bedienbar; das Skript ergänzt nur Knöpfe und Punkte. --prj-per-view setzt index.php aus der Backend-Einstellung. */ .prj-slider { position: relative; --prj-per-view: 3; --prj-gap: 1.5rem; } /* Anzahl als Klasse statt Inline-Style: Die Frontend-CSP erlaubt keine style="…"-Attribute (§11), und ohne JavaScript soll die Einstellung trotzdem greifen. */ .prj-slider.prj-per-1 { --prj-per-view: 1; } .prj-slider.prj-per-2 { --prj-per-view: 2; } .prj-slider.prj-per-3 { --prj-per-view: 3; } .prj-slider.prj-per-4 { --prj-per-view: 4; } .prj-track { display: flex; gap: var(--prj-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: .5rem; scrollbar-width: none; /* Firefox: eigene Navigation genügt */ } .prj-track::-webkit-scrollbar { display: none; } .prj-track:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 4px; border-radius: var(--ap-radius); } .prj-item { flex: 0 0 calc((100% - (var(--prj-per-view) - 1) * var(--prj-gap)) / var(--prj-per-view)); scroll-snap-align: start; margin: 0; } .prj-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .prj-item figcaption { margin-top: .6rem; font-size: .9rem; color: var(--ap-muted); } /* Blätterknöpfe: außerhalb der Bilder, damit sie nichts verdecken. */ .prj-nav { position: absolute; top: 38%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ap-line); background: #fff; color: var(--ap-dark); box-shadow: var(--ap-shadow-sm); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s; } .prj-nav:hover { background: var(--ap-accent-c); color: #fff; border-color: var(--ap-accent-c); } .prj-nav:disabled { opacity: .35; cursor: default; } .prj-nav:disabled:hover { background: #fff; color: var(--ap-dark); border-color: var(--ap-line); } .prj-prev { left: -22px; } .prj-next { right: -22px; } @media (max-width: 1199.98px) { .prj-prev { left: 4px; } .prj-next { right: 4px; } } .prj-dots { display: flex; justify-content: center; gap: .4rem; margin-top: 1rem; } .prj-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: var(--ap-line); cursor: pointer; transition: background .2s, transform .2s; } .prj-dots button.active { background: var(--ap-accent-c); transform: scale(1.25); } /* Auf schmalen Schirmen immer ein Bild – mehr wäre nicht lesbar. Die Selektoren müssen die .prj-per-N-Klassen überstimmen, daher dieselbe Spezifität. */ @media (max-width: 767.98px) { .prj-slider.prj-per-1, .prj-slider.prj-per-2, .prj-slider.prj-per-3, .prj-slider.prj-per-4 { --prj-per-view: 1; --prj-gap: 1rem; } } @media (min-width: 768px) and (max-width: 991.98px) { .prj-slider.prj-per-3, .prj-slider.prj-per-4 { --prj-per-view: 2; } } /* ---- Tabellen (Warenkorb) -------------------------------------------- */ .cart-table { width: 100%; } .cart-table th { color: var(--ap-muted); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; } .cart-table td { vertical-align: middle; } /* Warenkorb-Konfiguration als Label-Wert-Liste (Label dezent, Werte ausgerichtet) */ .cart-cfg { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; font-size: .9rem; color: var(--ap-dark); margin: 4px 0 0; } .cart-cfg dt { color: var(--ap-muted); font-weight: 600; } .cart-cfg dd { margin: 0; } .cart-cfg-acc { grid-column: 1 / -1; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ap-line); display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; } .qty-input { width: 72px; } .summary-box { background: var(--ap-light); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1.5rem; } /* Textlinks in der Zusammenfassung in der Markenfarbe statt im Bootstrap-Blau (--ap-accent-c erreicht auf dem hellen Grund > 4,5:1, siehe §10). :not(.btn) ist zwingend – sonst trifft die Regel auch den „Zur Kasse"-Knopf und färbt dessen weiße Schrift orange, also unsichtbar auf orangem Grund. */ .summary-box a:not(.btn) { color: var(--ap-accent-c); } .summary-box a:not(.btn):hover { color: var(--ap-accent-d); } .summary-row { display: flex; justify-content: space-between; gap: .75rem; padding: .4rem 0; color: #3a4450; } /* Bezeichnung (links) darf umbrechen, Betrag (rechts) bleibt als Einheit zusammen – verhindert, dass "696,70 €" zwischen Zahl und Euro-Zeichen umbricht. */ .summary-row > span:first-child { min-width: 0; overflow-wrap: anywhere; } .summary-row > span:last-child { flex-shrink: 0; white-space: nowrap; text-align: right; } .summary-row.total { font-size: 1.25rem; font-weight: 800; color: var(--ap-dark); border-top: 1px solid var(--ap-line); margin-top: .5rem; padding-top: .8rem; } /* ---- Zahlart-Auswahl (Checkout) -------------------------------------- */ .pay-option { border: 1px solid var(--ap-line); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: .75rem; cursor: pointer; transition: border-color .2s, box-shadow .2s; } .pay-option:hover { border-color: var(--ap-accent); } .pay-option input:checked ~ .pay-label { color: var(--ap-accent-c); } .pay-option.selected { border-color: var(--ap-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ap-accent) 25%, transparent); } .pay-label { font-weight: 600; } /* ---- Checkout-Wizard (Schritte) -------------------------------------- */ /* Sidebar bleibt auf großen Screens beim Scrollen durch die Schritte sichtbar. */ @media (min-width: 992px) { .checkout-summary { position: sticky; top: 1rem; } } /* Fortschrittsanzeige */ .wizard-stepper { list-style: none; display: flex; padding: 0; margin: 0 0 1.5rem; } .wizard-stepper .ws-item { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; color: var(--ap-muted); font-size: .8rem; font-weight: 600; } .wizard-stepper .ws-num { position: relative; z-index: 1; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--ap-line); color: var(--ap-muted); font-weight: 700; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; } /* Verbindungslinie zwischen den Punkten */ .wizard-stepper .ws-item::before { content: ''; position: absolute; z-index: 0; top: 1rem; left: -50%; width: 100%; height: 2px; background: var(--ap-line); } .wizard-stepper .ws-item:first-child::before { display: none; } .wizard-stepper .ws-item.is-clickable { cursor: pointer; } .wizard-stepper .ws-item.is-active { color: var(--ap-accent-c); } .wizard-stepper .ws-item.is-active .ws-num { border-color: var(--ap-accent); color: var(--ap-accent-c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-accent) 18%, transparent); } .wizard-stepper .ws-item.is-done { color: var(--ap-dark-2); } .wizard-stepper .ws-item.is-done .ws-num { background: var(--ap-accent-c); border-color: var(--ap-accent-c); color: #fff; } .wizard-stepper .ws-item.is-done::before { background: var(--ap-accent); } .wizard-stepper .ws-text { display: none; } @media (min-width: 576px) { .wizard-stepper .ws-text { display: block; } } /* Schritt-Navigation (Zurück/Weiter) */ .wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } /* Kurzübersicht in Schritt 4 */ .review-summary { display: grid; gap: .75rem; } .review-block { border: 1px solid var(--ap-line); border-radius: 10px; padding: .85rem 1rem; } .review-block .rb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .3rem; } .review-block .rb-title { font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ap-muted); } .review-block .rb-edit { font-size: .8rem; font-weight: 600; color: var(--ap-accent-c); background: none; border: 0; padding: 0; cursor: pointer; } .review-block .rb-edit:hover { text-decoration: underline; } .review-block .rb-body { color: var(--ap-dark-2); font-size: .95rem; line-height: 1.55; } /* ---- Badges / Hinweise ----------------------------------------------- */ .badge-soft { background: color-mix(in srgb, var(--ap-accent) 14%, transparent); color: var(--ap-accent-d); font-weight: 600; padding: .35rem .7rem; border-radius: 999px; font-size: .8rem; } /* Weißer Text auf dem Band: beide Gradient-Enden müssen 4,5:1 tragen. */ .note-box { background: #fff7ef; border: 1px solid #f1d8c0; color: #8a5a2b; padding: 1rem 1.25rem; border-radius: var(--ap-radius); } /* ---- CTA-Band --------------------------------------------------------- */ .cta-band { background: linear-gradient(120deg, var(--ap-accent-d), var(--ap-accent-c)); padding: 2.5rem 0; } /* ---- Footer ----------------------------------------------------------- */ .site-footer { background: var(--ap-dark); color: #c5cfd8; padding: 3.5rem 0 1.5rem; } .footer-brand { color: #fff; font-size: 1.4rem; display: inline-flex; align-items: center; gap: .4rem; } .footer-heading { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1rem; } .footer-links, .footer-contact, .footer-legal { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: .55rem; } .footer-links a, .footer-contact a { color: #9aa4ad; transition: color .2s; } .footer-links a:hover, .footer-contact a:hover { color: var(--ap-accent-2); } .footer-contact li { margin-bottom: .55rem; color: #9aa4ad; } .footer-divider { border-color: rgba(255, 255, 255, .1); margin: 2.5rem 0 1.5rem; } .footer-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; } .footer-legal a { color: #9aa4ad; } .footer-legal a:hover { color: var(--ap-accent-2); } /* Das Farbschema wird zentral im Backend (Setting site_theme) gesetzt und serverseitig als data-theme am ausgegeben – kein Besucher-Umschalter. */ /* ---- Toast (AJAX-Warenkorb) ------------------------------------------ */ .ap-toast-wrap { position: fixed; right: 1rem; bottom: 1rem; z-index: 1080; display: flex; flex-direction: column; gap: .5rem; max-width: 360px; } .ap-toast { background: var(--ap-dark); color: #fff; border-radius: 10px; padding: .8rem 1rem; box-shadow: var(--ap-shadow); font-size: .95rem; opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; } .ap-toast.show { opacity: 1; transform: none; } .ap-toast i { color: var(--ap-accent-2); } .ap-toast a { color: var(--ap-accent-2); font-weight: 600; } .ap-toast-error { background: #9e2d22; } .ap-toast-error i { color: #fff; } /* ---- Back to top ------------------------------------------------------ */ .back-to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1000; width: 46px; height: 46px; border: none; border-radius: 50%; background: var(--ap-accent); color: #fff; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s ease; box-shadow: var(--ap-shadow-sm); } .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--ap-accent-d); } /* ---- Page-Header ------------------------------------------------------ */ .page-header { background: linear-gradient(135deg, var(--ap-dark), var(--ap-dark-2)); color: #fff; padding: clamp(3rem, 6vw, 4.5rem) 0; position: relative; overflow: hidden; } .page-header::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--ap-accent) 22%, transparent), transparent 45%); } .page-header h1 { color: #fff; position: relative; } .page-header .breadcrumb { position: relative; } .page-header .breadcrumb a { color: var(--ap-accent-2); } .page-header .breadcrumb-item.active { color: #c5cfd8; } .page-header .breadcrumb-item + .breadcrumb-item::before { color: #6c7a86; } /* ---- Rechtsseiten / Prosa -------------------------------------------- */ .legal-content h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; } .legal-content h2:first-child { margin-top: 0; } .legal-content p, .legal-content li { color: #3a4450; line-height: 1.7; } .legal-todo { background: #fff3cd; color: #8a6d3b; padding: .1rem .45rem; border-radius: 6px; font-style: italic; font-size: .95em; } .legal-note { background: #fff7ef; border: 1px solid #f1d8c0; color: #8a5a2b; padding: 1rem 1.25rem; border-radius: var(--ap-radius); margin-bottom: 2rem; } /* ---- Reveal ----------------------------------------------------------- */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .js .reveal.visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } } @media (max-width: 991.98px) { .hero-image-wrap { transform: none; margin-top: 2rem; } .main-nav .nav-link::after { display: none; } .price-box { position: static; margin-top: 1.5rem; } } /* ========================================================================= Hilfsklassen statt Inline-Styles (CSP: style-src ohne 'unsafe-inline'). Ersetzen frühere style="…"-Attribute 1:1 – keine optische Änderung. ========================================================================= */ .container-narrow { max-width: 820px; } /* Rechtstexte + Bestellbestätigung */ .lead-narrow { max-width: 42rem; } /* page-header Untertitel */ .contact-list-dark { color: #3a4450; } /* kontakt.php Kontaktliste */ .hp-field { position: absolute; left: -9999px; } /* Honeypot (kontakt.php) */ .acc-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; } /* Zubehörbild */ .cart-thumb { object-fit: cover; border-radius: 8px; } /* Warenkorb-Zeilenbild */ .qty-group { max-width: 160px; } /* Mengen-Feld (manueller Konfigurator) */ .qty-input-narrow { width: 70px; } /* Zubehör-Mengenfeld */ .confirm-icon { width: 72px; height: 72px; font-size: 2rem; } /* Bestellbestätigung-Icon */ /* === Bildergalerie (CSP-konform, ohne Library – siehe includes/_gallery.php) === */ .gallery-stage { position: relative; aspect-ratio: 4 / 3; background: var(--ap-light); border-radius: var(--ap-radius); overflow: hidden; box-shadow: var(--ap-shadow-sm); } .gallery-current { width: 100%; height: 100%; object-fit: contain; /* ganzes Bild zeigen – Uploads behalten ihr Seitenverhältnis */ cursor: zoom-in; display: block; } .gallery-arrow, .gallery-zoom { position: absolute; border: 0; background: rgba(31, 36, 41, .55); color: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease; z-index: 2; } .gallery-arrow:hover, .gallery-zoom:hover { background: var(--ap-accent); } .gallery-arrow { top: 50%; transform: translateY(-50%); } .gallery-prev { left: 12px; } .gallery-next { right: 12px; } .gallery-zoom { top: 12px; right: 12px; } .gallery-track { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; } .gallery--simple .gallery-track { display: none; } .gallery-dot { flex: 0 0 auto; width: 72px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--ap-light); cursor: pointer; } .gallery-dot img { width: 100%; height: 100%; object-fit: contain; display: block; } .gallery-dot.active { border-color: var(--ap-accent); } /* === Lightbox (Vollbild, dynamisch via main.js erzeugt) === */ .ap-lightbox { position: fixed; inset: 0; background: rgba(15, 23, 30, .9); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 1080; } .ap-lightbox.open { display: flex; } .ap-lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: var(--ap-shadow); } .ap-lightbox-close { position: absolute; top: 18px; right: 22px; border: 0; background: none; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; } /* ---- Einwilligung zur Besuchsmessung (Banner) -------------------------- */ /* Leiste am unteren Rand, kein Overlay: Die Seite bleibt vollständig bedienbar. Beide Schaltflächen sind bewusst identisch gestaltet – eine optisch bevorzugte Zustimmung wäre keine freie Entscheidung. */ .consent-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080; background: var(--ap-dark); color: #dfe5ea; border-top: 3px solid var(--ap-accent); box-shadow: 0 -10px 30px -15px rgba(15, 23, 30, .6); padding: 1rem 1.25rem; } .consent-inner { max-width: 1140px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; } .consent-text { flex: 1 1 420px; margin: 0; font-size: .9rem; line-height: 1.5; color: #c5cfd8; } .consent-text a { color: var(--ap-accent-2); text-decoration: underline; } .consent-text a:hover { color: #fff; } .consent-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; } .btn-consent { background: transparent; border: 1px solid var(--ap-accent-2); color: #fff; padding: .5rem 1.15rem; font-size: .9rem; font-weight: 600; white-space: nowrap; } .btn-consent:hover, .btn-consent:focus { background: var(--ap-accent-c); border-color: var(--ap-accent-c); color: #fff; } @media (max-width: 575.98px) { .consent-actions { width: 100%; } .btn-consent { flex: 1 1 auto; } } /* Platz am Seitenende, solange die Leiste steht: Sie darf nichts verdecken – vor allem nicht die Rechtslinks im Fußbereich. Der Wert hier ist eine ausreichend großzügige Reserve für den Fall ohne JavaScript; das Skript in footer.php trägt die tatsächlich gemessene Höhe in --consent-h nach. */ body.has-consent { padding-bottom: var(--consent-h, 15rem); } @media (min-width: 576px) { body.has-consent { padding-bottom: var(--consent-h, 10rem); } } @media (min-width: 992px) { body.has-consent { padding-bottom: var(--consent-h, 7rem); } } /* Auch der „Nach oben“-Knopf weicht der Leiste aus. */ body.has-consent .back-to-top { bottom: calc(1.5rem + var(--consent-h, 6rem)); } /* Zusammenstellung (§8a): Spaltenbreiten als Klassen – die strikte nonce-CSP verbietet style-Attribute im Markup. */ .zs-pos { width: 2.5rem; } .zs-qty { width: 4rem; } .zs-sum { width: 7rem; } /* =========================================================================== Druck (§8a: Zusammenstellung ausdrucken) Die Seite ist die Vorlage – gedruckt wird der Inhalt, nicht die Website. Navigation, Fußbereich, Consent-Leiste und alle Bedienelemente verschwinden; die Zusammenstellung bleibt als schlichtes Blatt übrig. =========================================================================== */ @media print { .topbar, .main-nav, .site-footer, .page-header, .consent-bar, .cta-band, .back-to-top, .breadcrumb, .d-print-none { display: none !important; } body { background: #fff !important; color: #000; padding-bottom: 0 !important; font-size: 11pt; } .section { padding: 0 !important; } .container { max-width: 100% !important; width: 100% !important; padding: 0 !important; } /* Der Panel-Rahmen ist Bildschirm-Zierde – auf Papier stört er nur. */ .print-plain { border: 0 !important; box-shadow: none !important; background: #fff !important; padding: 0 !important; } .table-responsive { overflow: visible !important; } /* Zeilen und Summenblock nicht über den Seitenumbruch reißen. */ table { page-break-inside: auto; } tr { page-break-inside: avoid; page-break-after: auto; } tfoot { display: table-footer-group; } a[href]::after { content: none !important; } /* keine ausgedruckten URLs */ }