/* ============================================================================= custom.css — NeoStart Quick-Fixes ohne SCSS-Recompile ============================================================================= Wird nach neostart.css geladen (siehe template.xml ). Hier kleine, projektspezifische CSS-Overrides eintragen, die keinen vollen SCSS-Build rechtfertigen. Fuer strukturelle Aenderungen lieber _components.scss nutzen. ============================================================================= */ /* ----------------------------------------------------------------------------- Invictus, 30.09.2026 1) Produktkacheln: Bildfenster wieder weiß _probe.scss:191 setzt .etk-lbl-win auf var(--etk-field-2) = #eef2f6. Die Produktfotos sind auf reinem Weiß freigestellt und sitzen mit object-fit: contain im quadratischen Fenster. Alles, was das Bild nicht ausfüllt, zeigt deshalb Grau. Auf schmalen Kacheln (mobil) entstehen so sichtbare graue Bänder ober- und unterhalb des Objekts. -------------------------------------------------------------------------- */ .etk-lbl-win { background: var(--etk-paper); } /* ----------------------------------------------------------------------------- 2) Info-Buttons an den Auswahlfeldern im Konfigurator Markup: productdetails/variation.tpl (Block-Override) Fragezeichen und Infotext werden per CSS erzeugt, nicht als Elementinhalt. Grund: Die Zusammenfassung rechts und der Hinweis "Noch offen" lesen den Textinhalt der
-Zeile aus. Stünde etwas davon im Element, tauchte es dort mit auf. -------------------------------------------------------------------------- */ .etk-info { display: inline-block; position: relative; margin-left: .35rem; vertical-align: middle; } .etk-info > summary { list-style: none; cursor: pointer; display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1px solid var(--etk-rule-2); background: var(--etk-paper); font-size: .72rem; font-weight: 700; line-height: 1; color: var(--etk-ink); transition: background .15s ease, color .15s ease; } .etk-info > summary::-webkit-details-marker { display: none; } .etk-info > summary::before { content: "?"; } .etk-info > summary:hover, .etk-info[open] > summary { background: var(--etk-ink); color: var(--etk-paper); } .etk-info > summary:focus-visible { outline: 2px solid var(--etk-ink); outline-offset: 2px; } .etk-info[open] > summary::after { content: attr(data-info); position: absolute; z-index: 40; left: 0; top: calc(100% + .45rem); width: min(19rem, 78vw); padding: .7rem .85rem; background: var(--etk-paper); border: 1px solid var(--etk-rule-2); box-shadow: 0 6px 22px rgba(0,0,0,.10); font-size: .82rem; line-height: 1.45; font-weight: 400; color: var(--etk-ink); text-transform: none; letter-spacing: normal; white-space: normal; text-align: left; cursor: default; } @media (max-width: 560px) { .etk-info[open] > summary::after { left: auto; right: 0; width: min(17rem, 86vw); } } /* ----------------------------------------------------------------------------- 3) Produktkacheln auf schmalen Bildschirmen: Felder untereinander Bei 375 px Viewport ist eine Kachel 148 px breit. Darin liegen Preis und Datensatz in zwei Spalten zu je 73 px, abzüglich Innenabstand bleiben 47 px Textbreite. Die Beschriftung DATENSATZ braucht 67 px und wurde zu DATENSAT abgeschnitten, die Preisspanne 99,00 € bis 148,00 € brach in vier Zeilen um und STL-Dateien wurde als STL-Datei-en getrennt. Unterhalb von 480 px deshalb einspaltig. Dadurch stehen rund 122 px zur Verfügung und alle Beschriftungen passen in eine Zeile. -------------------------------------------------------------------------- */ @media (max-width: 480px) { .etk-lbl-fields { grid-template-columns: 1fr; } .etk-lbl-fields > div + div { border-top: 1px solid var(--etk-rule); } .etk-lbl-fields dd { overflow-wrap: normal; hyphens: manual; } } /* ----------------------------------------------------------------------------- 4) Info-Popup auf schmalen Bildschirmen korrekt positionieren Das Popup hing am Fragezeichen, das je nach Länge der Beschriftung mitten in der Zeile sitzt. Bei 375 px lief es dadurch links aus dem Bild, der Text begann mitten im Wort. Lösung: Auf schmalen Bildschirmen ist nicht mehr der Button der Bezugspunkt, sondern die gesamte Beschriftungszeile. Das Popup spannt sich über deren Breite und sitzt darunter. Damit kann es nicht mehr seitlich herauslaufen, unabhängig davon, wie lang die Beschriftung ist. -------------------------------------------------------------------------- */ @media (max-width: 560px) { .etk-blk dt:has(> .etk-info) { position: relative; } .etk-info { position: static; } .etk-info[open] > summary::after { left: 0; right: auto; width: 100%; top: calc(100% + .35rem); } } /* =========================================================================== 3D-Hintergrund (Invictus, 01.10.2026) Portiert aus dem abgenommenen Probeshop. Geladen von js/bg3d/boot.js, erst nach dem vollstaendigen Seitenaufbau und nur auf Desktop. Deaktivieren: in js/custom.js die bg3d-Zeile entfernen. Dieser Block bleibt dann wirkungslos, weil .has-3d nie gesetzt wird. =========================================================================== */ #cnGl { display: none; } .has-3d #cnGl { display: block; position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; } .has-3d { background: #ffffff; } .has-3d body { background: transparent; } html.has-3d main, html.has-3d .content-wrapper, html.has-3d #content { background: transparent !important; } /* NOVA setzt hier deckendes Weiss, das den Canvas verdeckt. !important, weil eine Regel aus dem Parent-Theme sonst gewinnt. Greift nur bei aktivem 3D. */ .has-3d .etk-hero { background: transparent; } .has-3d .etk-hero-bg { will-change: opacity; } .has-3d section.etk-wrap { background: rgba(255,255,255,0.82); } .has-3d section.etk-wrap.etk-hero-in { background: none; } @media (max-width: 1023px) { .has-3d section.etk-wrap { background: #ffffff; } } /* =========================================================================== Trust-Leiste unter dem Hero + Icons in den Prozess-Schritten (Invictus, 01.10.2026). Portiert aus dem abgenommenen Probeshop. =========================================================================== */ .etk-trustbar { background: var(--etk-field, #f6f7f8); border-bottom: 1px solid var(--etk-rule, #e6e8ea); } .etk-trustbar-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.6rem; padding-block: .85rem; } .etk-trustbar-item { display: inline-flex; align-items: center; gap: .55rem; font-size: .86rem; letter-spacing: .01em; color: var(--etk-ink-2, #5a5f66); white-space: nowrap; } .etk-trustbar-item svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--etk-orange, #EC6608); } .etk-trustbar-item img { height: 26px; width: auto; flex: 0 0 auto; } .etk-trustbar-sep { width: 1px; height: 18px; background: var(--etk-rule, #e6e8ea); } .has-3d .etk-trustbar { background: rgba(246,247,248,0.88); } /* Icon statt Ziffer im orangen Kreis */ .etk-step-n svg { width: 26px; height: 26px; } @media (max-width: 760px) { .etk-trustbar-sep { display: none; } .etk-trustbar-in { gap: .5rem 1.1rem; } .etk-trustbar-item { font-size: .8rem; } } /* =========================================================================== Consent-Fingerabdruck ueber die mobile Bestellleiste heben (Invictus, 01.10.2026) Der schwebende Button des Consent-Managers sitzt unten links auf bottom:16px und lag damit genau auf dem Preis in .etk-mbar (68 px hoch, erscheint ab 991.98px). Wir heben ihn auf dieselbe Hoehe plus Abstand. Auf dem Desktop gibt es die Leiste nicht, dort bleibt er unveraendert. =========================================================================== */ @media (max-width: 991.98px) { #consent-settings-btn { bottom: 84px !important; } } /* =========================================================================== Agentur-Credit in der Fusszeile (Invictus, 26.10.2026) Bewusst zurueckhaltend: gleiche Groesse wie die Copyright-Zeile daneben, Link nur beim Hover farbig. =========================================================================== */ .etk-credit a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; } .etk-credit a:hover, .etk-credit a:focus-visible { color: var(--etk-orange, #EC6608); } /* ====================================================================== BETA-HINWEIS, nur fuer die Testphase. Gehoert zum Block in layout/header.tpl. Zum Go-Live beides entfernen. Angelegt 05.11.2026, ueberarbeitet am selben Tag. Invictus Marketing. z-index-Landkarte im Shop: 1030 Sticky-Header · 1031 dieser Balken · 1035 Badge 1040 mobile Kauf-Leiste · 1045 Mobile-Navigation · 1050 Consent-Button ====================================================================== */ /* Der Balken klebt oben und bleibt beim Scrollen stehen. Der Header rutscht darunter, statt auf top: 0 zu kleben: seine eigene Hoehe kommt aus --etk-beta-h, gesetzt vom kleinen Skript in der header.tpl. */ :root { --etk-beta-h: 38px; } /* Rueckfall, falls das Skript nicht laeuft */ header.etk-hdr { top: var(--etk-beta-h, 38px); } .etk-beta-bar { position: sticky; top: 0; z-index: 1031; background: var(--etk-ink, #2a2a29); color: #fff; font-size: .82rem; line-height: 1.35; padding: .55rem 0; text-align: center; } .etk-beta-bar .etk-wrap { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; } .etk-beta-tag { flex: 0 0 auto; background: var(--etk-orange, #EC6608); color: #fff; font-weight: 700; font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; padding: .2rem .45rem; border-radius: 3px; } .etk-beta-txt { color: rgba(255, 255, 255, .86); } /* Einfarbig, in der Form der Shop-Badges (.etk-lbl-badge „Beliebt"): dasselbe dunklere Orange und dieselbe Pillenform. Das hellere --etk-orange traegt weisse Schrift nur mit 3,2:1, --etk-orange-ink kommt auf 4,6:1. */ .etk-beta-badge { position: fixed; right: 1rem; bottom: 1rem; z-index: 1035; background: var(--etk-orange-ink, #C4530A); color: var(--etk-paper, #fff); font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; box-shadow: 0 2px 12px rgba(0, 0, 0, .2); pointer-events: none; } @media (max-width: 575.98px) { :root { --etk-beta-h: 48px; } /* zweizeilig, gemessener Wert als Rueckfall */ .etk-beta-bar { font-size: .74rem; padding: .5rem 0; } /* Schmale Schirme: Tag laeuft im Textfluss mit, sonst steht er allein auf der ersten Zeile und der Balken wird drei Zeilen hoch. */ .etk-beta-bar .etk-wrap { display: block; } .etk-beta-tag { display: inline; margin-right: .4rem; } .etk-beta-badge { right: .6rem; bottom: .6rem; font-size: .6rem; } } @media (max-width: 991.98px) { /* Auf Produktdetailseiten liegt unten die fixierte Kauf-Leiste .etk-mbar (68px hoch, z-index 1040). Ohne diese Regel verschwindet das Badge dahinter. */ body:has(.etk-mbar) .etk-beta-badge { bottom: 5rem; } } @media print { .etk-beta-bar, .etk-beta-badge { display: none !important; } }