/* * AHK-HQ-Category-Tree – Stylesheet v1.4.3 * Typografie, Buttons und Karten an die aktuelle LieferReparatur-Startseite angepasst. * Nur Funnel-Elemente; Flex-Layout, Breiten, Breakpoints und Linkstruktur bleiben erhalten. * Roboto folgt dem Shop-Design; Arial dient als Fallback. Keine neue Font-Datei und kein @import. */ /* Äußere Funnel-Fläche: H1-Hintergrund der Start-/Produktseite. * Header bis H1 wie /apple-watch-glas-reparatur/ (06.09.2026): * Desktop 56 + 50 = 106 px, Tablet 42 + 50 = 92 px, Mobil 28 + 10 = 38 px. * Nur der Elementor-Elterncontainer mit unserer H1 wird angesprochen. * Keine neue Wrapper-Struktur, keine Änderung am Header oder an Produktseiten. */ body.ahkct-tree-route .e-con.e-parent:has(#ahkct-heading) { --ahkct-surface: #F4F8FB; --ahkct-heading-offset: 106px; background-color: var(--ahkct-surface) !important; padding-top: 0 !important; } body.ahkct-tree-route .e-con.e-parent:has(#ahkct-heading) > .e-con-inner { padding-top: var(--ahkct-heading-offset) !important; } body.ahkct-tree-route .elementor-widget-text-editor:has(#ahkct-heading) { margin-top: 0 !important; padding-top: 0 !important; } /* Elementor erzeugt vor der H1 einen leeren Absatz mit 0,9 rem Außenabstand. * Nur dessen Abstand neutralisieren; Inhalt und DOM bleiben erhalten. */ body.ahkct-tree-route .elementor-widget-text-editor > p:has(+ #ahkct-heading) { margin: 0 !important; } body.ahkct-tree-route #ahkct-heading { margin-top: 0 !important; } @media (max-width: 1024px) { body.ahkct-tree-route .e-con.e-parent:has(#ahkct-heading) { --ahkct-heading-offset: 92px; } } @media (max-width: 767px) { body.ahkct-tree-route .e-con.e-parent:has(#ahkct-heading) { --ahkct-heading-offset: 38px; } } /* ───────────────────────────────────────────────────────── */ /* Meta-Viewport (bitte ins einfügen, nicht hier) */ /* */ /* ───────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────── */ /* 1. Container (für Kategorien) */ /* ───────────────────────────────────────────────────────── */ #ahkct-container { --ahkct-stylesheet: 1; /* Eindeutiger Marker für NitroPack-Inline-CSS-Ausschlüsse. */ font-family: "Roboto", Arial, sans-serif !important; color: #5F6F7D !important; position: relative !important; /* Anker für Loader */ } /* ───────────────────────────────────────────────────────── */ /* 2. Kategorie-Baum (Flex-Layout, responsive Wrap) */ /* – nur auf Kategorie-Seiten, Produktseiten unverändert */ /* ───────────────────────────────────────────────────────── */ #ahkct-tree { width: 100% !important; max-width: none !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 0.75rem !important; justify-content: flex-start !important; overflow: visible !important; transition: max-height 0.3s ease !important; min-height: 600px !important; border: none !important; align-content: flex-start !important; } @media (max-width: 768px) { #ahkct-tree { gap: 0.5rem !important; } } /* ───────────────────────────────────────────────────────── */ /* 3. Kategorie-Pillen (nur .product-category) */ /* ───────────────────────────────────────────────────────── */ #ahkct-tree li.product-category { list-style: none !important; margin: 0 !important; flex: 0 1 240px !important; max-width: 240px !important; } @media (max-width: 480px) { #ahkct-tree li.product-category { flex: 1 1 100% !important; max-width: 100% !important; } } @media (min-width: 1025px) { #ahkct-tree li.product-category { flex: 0 1 33.3333% !important; max-width: 33.3333% !important; } } #ahkct-tree li.product-category a { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; min-height: 46px !important; padding: 11px 20px !important; font-family: "Roboto", Arial, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; background-color: #045C9C !important; color: #fff !important; border-radius: 10px !important; text-align: center !important; text-decoration: none !important; line-height: 1.4 !important; overflow-wrap: anywhere !important; transition: background-color 0.2s ease !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; } #ahkct-tree li.product-category a:hover { background-color: #001769 !important; } /* ───────────────────────────────────────────────────────── */ /* 4. Titel-Abstand statt Tree-Margin */ /* ───────────────────────────────────────────────────────── */ #ahkct-heading { color: #045C9C !important; font-family: "Roboto", Arial, sans-serif !important; font-size: clamp(28px, 2.2vw + 12px, 36px) !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -0.4px !important; overflow-wrap: anywhere !important; text-align: center !important; margin-bottom: 1rem !important; } /* ───────────────────────────────────────────────────────── */ /* 5. Breadcrumb (sticky unten, gleiche Funnel-Fläche) */ /* ───────────────────────────────────────────────────────── */ #ahkct-breadcrumb { position: sticky !important; bottom: 0 !important; /* Deckend lassen, damit beim Sticky-Scrollen kein Inhalt durchscheint. */ background: var(--ahkct-surface, #F4F8FB) !important; padding: 0.5rem 0 !important; margin-top: 15px !important; font-family: "Roboto", Arial, sans-serif !important; font-size: 14px !important; line-height: 1.5 !important; color: #5F6F7D !important; overflow-wrap: anywhere !important; box-shadow: none !important; z-index: 10 !important; } #ahkct-breadcrumb a { color: #045C9C !important; text-decoration: none !important; } #ahkct-breadcrumb a:hover { color: #001769 !important; text-decoration: underline !important; } /* ───────────────────────────────────────────────────────── */ /* 6. Responsive-Spalten für Produktlisten */ /* ───────────────────────────────────────────────────────── */ @media (min-width: 1025px) { :where(#ahkct-container) ul.products.columns-2 { grid-template-columns: repeat(2, 1fr) !important; } :where(#ahkct-container) ul.products.columns-3 { grid-template-columns: repeat(3, 1fr) !important; } :where(#ahkct-container) ul.products.columns-4 { grid-template-columns: repeat(4, 1fr) !important; } :where(#ahkct-container) ul.products.columns-5 { grid-template-columns: repeat(5, 1fr) !important; } :where(#ahkct-container) ul.products.columns-6 { grid-template-columns: repeat(6, 1fr) !important; } :where(#ahkct-container) ul.products.columns-7 { grid-template-columns: repeat(7, 1fr) !important; } :where(#ahkct-container) ul.products.columns-8 { grid-template-columns: repeat(8, 1fr) !important; } :where(#ahkct-container) ul.products.columns-9 { grid-template-columns: repeat(9, 1fr) !important; } :where(#ahkct-container) ul.products.columns-10 { grid-template-columns: repeat(10, 1fr) !important; } :where(#ahkct-container) ul.products.columns-11 { grid-template-columns: repeat(11, 1fr) !important; } :where(#ahkct-container) ul.products.columns-12 { grid-template-columns: repeat(12, 1fr) !important; } } @media (max-width: 1024px) { :where(#ahkct-container) .products { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; justify-content: center !important; justify-items: center !important; } } @media (max-width: 767px) { :where(#ahkct-container) .products { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; justify-content: center !important; justify-items: center !important; } } /* ───────────────────────────────────────────────────────── */ /* 7. Loader-Overlay */ /* ───────────────────────────────────────────────────────── */ #ahkct-loader { position: absolute !important; inset: 0 !important; background: rgba(255,255,255,0.8) !important; display: flex !important; align-items: center !important; justify-content: center !important; pointer-events: all !important; z-index: 100 !important; } #ahkct-loader[hidden] { display: none !important; pointer-events: none !important; } /* Sichtbarer Ladehinweis ohne Overlay: Links und schnelle Auswahlwechsel bleiben nutzbar. */ #ahkct-container[aria-busy="true"]::after { content: "" !important; position: absolute !important; top: 0 !important; right: 0 !important; width: 20px !important; height: 20px !important; box-sizing: border-box !important; border: 3px solid #DFE8EF !important; border-top-color: #045C9C !important; border-radius: 50% !important; pointer-events: none !important; animation: ahkct-spin 1s linear infinite !important; } #ahkct-loader .spinner, :where(#ahkct-container) .spinner { width: 48px !important; height: 48px !important; border: 6px solid #E8F1F8 !important; border-top-color: #045C9C !important; border-radius: 50% !important; animation: ahkct-spin 1s linear infinite !important; } @keyframes ahkct-spin { to { transform: rotate(360deg); } } /* ───────────────────────────────────────────────────────── */ /* 8. Typografie & Grundlayout */ /* ───────────────────────────────────────────────────────── */ :where(#ahkct-container) .products { display: grid !important; text-align: center !important; list-style: none !important; margin: 0 !important; padding: 0 !important; grid-column-gap: 35px !important; grid-row-gap: 13px !important; } #ahkct-container .products h2, #ahkct-container .products h3 { font-family: "Roboto", Arial, sans-serif !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: normal !important; color: #263746 !important; overflow-wrap: anywhere !important; margin: 0.5rem 0 !important; } :where(#ahkct-container) .price { color: #263746 !important; font-family: "Roboto", Arial, sans-serif !important; font-weight: 600 !important; } :where(#ahkct-container) .price[data-price="0"], :where(#ahkct-container) .price[data-price="0,00"] { font-size: 0 !important; position: relative !important; display: inline-block !important; } :where(#ahkct-container) .price[data-price="0"]::after, :where(#ahkct-container) .price[data-price="0,00"]::after { content: "" !important; font-size: 1rem !important; font-family: "Roboto", Arial, sans-serif !important; font-weight: 600 !important; position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #263746 !important; } /* ───────────────────────────────────────────────────────── */ /* 9. Skeleton-Cards */ /* ───────────────────────────────────────────────────────── */ :where(#ahkct-container) .skeleton-card { background: #F2F6FA !important; border-radius: 4px !important; aspect-ratio: 1/1 !important; animation: ahkct-pulse 1.2s ease-in-out infinite !important; } @keyframes ahkct-pulse { 0% { opacity: .7; } 50% { opacity: .4; } 100% { opacity: .7; } } /* ───────────────────────────────────────────────────────── */ /* 10. Produkt-Card-Boxen auf Basis .products & type-product */ /* ───────────────────────────────────────────────────────── */ :where(#ahkct-container) .products > li.type-product { list-style: none !important; background-color: #fff !important; border: 1px solid #DFE8EF !important; border-radius: 22px !important; box-shadow: 0 14px 35px rgba(4,92,156,0.08) !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 1rem !important; transition: transform 0.2s ease !important; } :where(#ahkct-container) .products > li.type-product:hover { transform: translateY(-4px) !important; } :where(#ahkct-container) .products > li.type-product > a { display: flex !important; flex-direction: column !important; align-items: center !important; text-decoration: none !important; color: inherit !important; width: 100% !important; } :where(#ahkct-container) .products > li.type-product > a > img { max-width: 100% !important; height: auto !important; margin-bottom: 0.75rem !important; border-radius: 0.5rem !important; } #ahkct-container .products > li.type-product > a > h2 { font-family: "Roboto", Arial, sans-serif !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: normal !important; color: #263746 !important; overflow-wrap: anywhere !important; margin: 0.5rem 0 !important; } :where(#ahkct-container) .products > li.type-product > a > .price { font-family: "Roboto", Arial, sans-serif !important; font-weight: 600 !important; margin-bottom: 0.75rem !important; } :where(#ahkct-container) .products > li.type-product .button, :where(#ahkct-container) .products > li.type-product .add_to_cart_button { margin-top: auto !important; background-color: #045C9C !important; color: #fff !important; border: none !important; border-radius: 10px !important; min-height: 46px !important; padding: 11px 20px !important; font-family: "Roboto", Arial, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.4 !important; overflow-wrap: anywhere !important; box-sizing: border-box !important; transition: background-color 0.2s ease !important; } :where(#ahkct-container) .products > li.type-product .button:hover, :where(#ahkct-container) .products > li.type-product .add_to_cart_button:hover { background-color: #001769 !important; } /* ───────────────────────────────────────────────────────── */ /* 10. Produkt-Card-Boxen auf Basis .products & type-product */ /* + fixe Größe / Seitenverhältnis */ /* ───────────────────────────────────────────────────────── */ :where(#ahkct-container) .products > li.type-product { /* alles wie gehabt… */ list-style: none !important; background-color: #fff !important; border: 1px solid #DFE8EF !important; border-radius: 22px !important; box-shadow: 0 14px 35px rgba(4,92,156,0.08) !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 1rem !important; transition: transform 0.2s ease !important; /* Quadrat bevorzugen, aber lange Titel und Preise nicht abschneiden. */ aspect-ratio: 1 / 1 !important; min-height: min-content !important; width: 100% !important; /* volle Spalten-Breite */ max-width: 300px !important; /* max. Breite je nach Spaltenzahl */ } /* ───────────────────────────────────────────────────────── */ /* Zentriere Kategorie-Pillen im Container */ /* ───────────────────────────────────────────────────────── */ #ahkct-tree { justify-content: center !important; /* statt flex-start */ } /* falls du im Mobile-Breakpoint nochmal anders enctypst: */ @media (max-width: 768px) { #ahkct-tree { justify-content: center !important; } } /* ───────────────────────────────────────────────────────── */ /* Zentriere das Produkt-Grid und seine Items */ /* ───────────────────────────────────────────────────────── */ :where(#ahkct-container) .products { justify-content: center !important; /* zentriert das Grid-Tracks-Layout */ justify-items: center !important; /* zentriert die Cards in den Tracks */ } /* falls du für Desktop-Grid explizit .columns-Klassen nutzt: */ @media (min-width: 1025px) { :where(#ahkct-container) ul.products[class*="columns-"] { justify-content: center !important; justify-items: center !important; } } /* Tastaturfokus nur innerhalb der Funnel-Auswahl und ihres Breadcrumbs. */ #ahkct-container a:focus-visible, #ahkct-breadcrumb a:focus-visible, #ahkct-heading:focus-visible { outline: 3px solid #045C9C !important; outline-offset: 3px !important; } /* Innenliegender Fokus bleibt trotz overflow:hidden der Produktkarte sichtbar. */ #ahkct-tree > li.type-product > a:focus-visible { outline-offset: -3px !important; } /* Ladezustand bleibt sichtbar; Bewegung folgt der Systemeinstellung. */ @media (prefers-reduced-motion: reduce) { #ahkct-tree, #ahkct-tree li.product-category a, :where(#ahkct-container) .products > li.type-product, :where(#ahkct-container) .products > li.type-product .button, :where(#ahkct-container) .products > li.type-product .add_to_cart_button { transition: none !important; } #ahkct-loader .spinner, #ahkct-container[aria-busy="true"]::after, :where(#ahkct-container) .spinner, :where(#ahkct-container) .skeleton-card { animation: none !important; } :where(#ahkct-container) .products > li.type-product:hover { transform: none !important; } }