/* * Platz für eigene Änderungen direkt als CSS * Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird. */ /* ===================================================================== Montserrat 700 --------------------------------------------------------------------- NOVA liefert Montserrat NUR im Schnitt 600 (SemiBold) aus. Jedes font-weight:700 fiel deshalb auf diesen Schnitt zurueck und sah nicht fett aus. Der Bold-Schnitt liegt jetzt selbst gehostet im Child-Template (SIL Open Font License, wie der bereits mitgelieferte SemiBold-Schnitt – siehe OFL.txt in templates/NOVA/themes/base/fonts/montserrat). Selbst gehostet, damit keine Anfrage an Google Fonts entsteht. ===================================================================== */ @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/templates/NOVAChild/themes/my-nova/fonts/montserrat/Montserrat-Bold-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/templates/NOVAChild/themes/my-nova/fonts/montserrat/Montserrat-Bold-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ===================================================================== Artikeldetailseite – Shop-Teil --------------------------------------------------------------------- Greift auf allen Artikeldetailseiten: die Klasse body.tn-pd setzt der Titel-Block in productdetails/details.tpl (Child-Template). Hier stehen die Bausteine, die zum SHOP gehoeren: Titel, Kennzahlen, Kurzbeschreibung, Preis-/Verfuegbarkeitskarte, Galerie, Reiter. Die Bausteine der Lizenzstrecke (Konfiguration, Domainbindung, Kaufbereich, Anmelde-Popup) liegen im Plugin: plugins/tn_licenseManager/frontend/css/licenseManager.css Farben und Radien fuehren die Artikelbeschreibung (.tn-md) und die Rechtstexte (.tn-legal) fort. Diese Datei ist die QUELLE der Token. ===================================================================== */ /* Die Token gelten shop-weit (Breadcrumb, spaeter Header); die Bausteine der Artikeldetailseite darunter greifen weiterhin nur bei body.tn-pd. */ :root { --tnp-primary: #2a94d6; --tnp-primary-dark: #1876b2; --tnp-deep: #173b52; --tnp-text: #25313c; --tnp-muted: #66727d; --tnp-border: #dfe5ea; --tnp-soft: #f5f7fa; --tnp-canvas: #e6edf5; --tnp-radius: 16px; --tnp-shadow: 0 8px 30px rgba(20, 35, 50, .08); --tnp-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace; } /* --- Titel --- Die Groesse setzt das Skript im Titel-Block passend zur Spaltenbreite (eine Zeile). Der clamp-Wert ist nur Ausgangs- und Notwert ohne JavaScript. */ body.tn-pd .tn-pd-title { margin-bottom: 14px; overflow: hidden; color: var(--tnp-primary); font-size: clamp(22px, 2.6vw, 34px); /* 600 ist der leichteste vorhandene Montserrat-Schnitt und zugleich das Gewicht aller uebrigen Ueberschriften im Shop. Fett bleibt dem Preis vorbehalten, damit im Kopf nicht zwei Elemente um Aufmerksamkeit ringen. */ font-weight: 600; letter-spacing: -.02em; line-height: 1.2; } /* --- Kennzahlen als Chips, Artikelnummer technisch gesetzt --- */ body.tn-pd #product-offer .product-info ul.info-essential { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; } body.tn-pd #product-offer ul.info-essential li { padding: 5px 11px; border: 1px solid var(--tnp-border); border-radius: 999px; background: var(--tnp-soft); color: var(--tnp-muted); font-size: 12.5px; line-height: 1.4; } body.tn-pd #product-offer ul.info-essential li.product-sku { font-family: var(--tnp-mono); font-size: 12px; letter-spacing: .01em; } body.tn-pd #product-offer .shortdesc { max-width: 62ch; margin-bottom: 24px; color: var(--tnp-muted); font-size: 15.5px; line-height: 1.6; } /* --- Preis und Verfuegbarkeit als Karte --- Die umgebende .row stammt aus NOVA und traegt keine eigene Klasse (sie liegt ausserhalb jedes Blocks). Sie wird deshalb ueber die enthaltene Preisspalte adressiert. Das #product-offer im Selektor ist noetig, weil NOVA den Abstand der Zeile ueber einen ID-Selektor setzt. */ body.tn-pd #product-offer .product-info .product-offer > .row:has(.tn-pd-price) { margin: 0; padding: 20px 24px 6px; border: 1px solid var(--tnp-border); border-radius: var(--tnp-radius); background: #fff; /* Schatten bewusst nur nach unten (negative Ausbreitung): ein rundum streuender Schatten wuerde als Naht auf dem Kaufbereich darunter liegen. */ box-shadow: 0 10px 30px -12px rgba(20, 35, 50, .18); } /* Folgt darunter der Kaufbereich, oeffnet sich die Karte nach unten. */ body.tn-pd #product-offer .product-info .product-offer > .row:has(.tn-pd-price):has(+ #add-to-cart .basket-form-inline) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } body.tn-pd .tn-pd-price, body.tn-pd #product-offer .product-offer > .row:has(.tn-pd-price) > [class*="col-"] { padding-left: 0; padding-right: 0; } body.tn-pd #product-offer .price_wrapper { margin-bottom: 0; } body.tn-pd #product-offer .price_wrapper .price, body.tn-pd #product-offer .price_wrapper .price span { font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.02em; color: var(--tnp-primary); } body.tn-pd #product-offer .price_wrapper .price-note, body.tn-pd #product-offer .price_wrapper .vat_info, body.tn-pd #product-offer .price_wrapper .shipment { color: var(--tnp-muted); font-size: 12.5px; } /* Preis links, "Frage zum Artikel" oben rechts auf gleicher Hoehe. */ body.tn-pd .tn-pd-price-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; } body.tn-pd .tn-pd-price-main { min-width: 0; } body.tn-pd .tn-pd-question { flex: 0 0 auto; padding: 0; color: var(--tnp-primary-dark); font-size: 13px; white-space: nowrap; text-decoration: none; } body.tn-pd .tn-pd-question:hover { text-decoration: underline; } /* Verfuegbarkeitszeile: ohne Trennlinie, direkt unter den Preisangaben. */ body.tn-pd .tn-pd-stock { margin-top: 8px; color: var(--tnp-muted); font-size: 13.5px; } /* --- Galerie --- :not(.fullscreen) ist wichtig: In der Vollbild-Ansicht setzt NOVA ueber #image_wrapper.fullscreen einen Innenabstand von 3rem. Unser Selektor "body.tn-pd #image_wrapper" ist spezifischer und hat diesen Wert bisher auch dort auf 14px ueberschrieben. Der Schliessen-Knopf wird per transform:translate(50%,-50%) absichtlich halb aus seinem Container geschoben – bei 48px Abstand ist dafuer Platz, bei 14px ragte er aus dem Fenster und wurde vom overflow:hidden abgeschnitten. Auch Rahmen, Radius und Hintergrund der Karte gehoeren nur in die normale Ansicht. */ body.tn-pd #image_wrapper:not(.fullscreen) { padding: 14px; border: 1px solid var(--tnp-border); border-radius: var(--tnp-radius); background: #fff; box-shadow: var(--tnp-shadow); } /* --- Reiter unterhalb der Artikelangaben --- */ body.tn-pd #product-tabs { gap: 4px; border-bottom: 1px solid var(--tnp-border); } body.tn-pd #product-tabs .nav-link { padding: 12px 4px; margin-right: 22px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--tnp-muted); font-size: 15px; font-weight: 600; transition: color .15s ease, border-color .15s ease; } body.tn-pd #product-tabs .nav-link:hover { color: var(--tnp-text); } body.tn-pd #product-tabs .nav-link.active { background: transparent; border-bottom-color: var(--tnp-primary); color: var(--tnp-primary-dark); } @media (max-width: 575.98px) { body.tn-pd #product-offer .product-info .product-offer > .row:has(.tn-pd-price) { padding: 18px 16px 6px; } } /* ===================================================================== Breadcrumb – shop-weit --------------------------------------------------------------------- NOVA blendet auf schmalen Fenstern den ganzen Pfad aus und zeigt nur den Rueckweg (.breadcrumb-arrow); ab 768px laeuft der volle Pfad. Dieses Verhalten bleibt unveraendert, nur die Optik ist neu: Trennzeichen als gezeichnetes Winkelzeichen statt "/", kein Rahmen um die Leiste, aktuelle Seite hervorgehoben, lange Pfade scrollen statt umzubrechen. ===================================================================== */ /* Leiste als eigene Flaeche statt der Linien ueber und unter dem Pfad (NOVA setzt ab 992px border-width:1px 0 – die Kurzform hier ersetzt das). */ .breadcrumb-wrapper { padding: 6px 18px; margin-bottom: 1.5rem; border: 1px solid var(--tnp-border, #dfe5ea); border-radius: 12px; background: var(--tnp-soft, #f5f7fa); } /* Vor-/Zurueck zwischen Artikeln sitzt in derselben Leiste. */ .breadcrumb-wrapper .navigation-arrows .btn { padding: 2px 8px; color: var(--tnp-muted, #66727d); } .breadcrumb-wrapper .navigation-arrows .btn:hover { color: var(--tnp-primary, #2a94d6); } .breadcrumb { flex-wrap: nowrap; overflow-x: auto; padding: .25rem 0; font-size: 13px; scrollbar-width: none; } .breadcrumb::-webkit-scrollbar { display: none; } .breadcrumb-item { align-items: center; white-space: nowrap; color: var(--tnp-muted, #66727d); } .breadcrumb-item + .breadcrumb-item { padding-left: 0; } /* Winkelzeichen aus zwei Rahmenkanten – unabhaengig von Schriftart und Icon-Font. */ .breadcrumb-item + .breadcrumb-item::before { float: none; width: 5px; height: 5px; margin: 0 11px; padding: 0; border: solid var(--tnp-border, #dfe5ea); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); content: ""; } .breadcrumb .breadcrumb-link { color: var(--tnp-muted, #66727d); transition: color .15s ease; } .breadcrumb .breadcrumb-link:hover, .breadcrumb .breadcrumb-link:focus-visible { color: var(--tnp-primary, #2a94d6); } .breadcrumb-item.active { color: var(--tnp-text, #25313c); font-weight: 600; } /* Aktuelle Seite darf den Pfad nicht sprengen. */ .breadcrumb-item.active > span { display: block; max-width: 42ch; overflow: hidden; text-overflow: ellipsis; } .tn-bc-home { margin-right: 7px; font-size: 12px; } /* Rueckweg: my-nova.css bringt bereits einen Winkel (:before) UND einen senkrechten Strich (:after) mit. Der Strich entfaellt zugunsten einer feinen Trennlinie; ein zweiter Winkel wird hier bewusst NICHT gezeichnet. */ .breadcrumb-item.breadcrumb-backtolist { padding-right: 14px; margin-right: 14px; border-right: 1px solid var(--tnp-border, #dfe5ea); } .breadcrumb-item.breadcrumb-backtolist::after { content: none; } .breadcrumb-item.breadcrumb-backtolist::before { color: var(--tnp-muted, #66727d); } @media (max-width: 767.98px) { .breadcrumb-wrapper { padding: 4px 12px; margin-bottom: 1rem; } .breadcrumb-item.active > span { max-width: 24ch; } } /* ===================================================================== Header – eine Zeile, Milchglas --------------------------------------------------------------------- NOVA legt Logo (.toggler-logo-wrapper) und Navigation (nav.navbar) als Geschwister in den Container; die Navigationsleiste bricht zusaetzlich um, weil .navbar-collapse mit flex-basis:100% arbeitet. Daraus entstehen die zwei Zeilen. Hier wird der Container zur Flexzeile und der Umbruch aufgehoben – bei drei Menuepunkten passt alles nebeneinander. Unter 992px bleibt alles wie gehabt: Burger, Logo, Icons und das eigene Suchfeld darunter. ===================================================================== */ /* Laufband wie in der Plugin-Verwaltung (#lm_navtabs): ein Verlauf mit 400% Groesse, dessen Position langsam wandert. Hier deutlich heller gehalten – Logo, Menuetext und Icons sind dunkel und wuerden auf dem satten Blau der Verwaltung untergehen. */ header#jtl-nav-wrapper { background-color: #084e78; /* Farbfolge wie #lm_navtabs in der Plugin-Verwaltung, durchgehend abgedunkelt. */ background-image: linear-gradient(-45deg, #0d86c4, #084e78, #1a7ea3, #063a5c); background-size: 400% 400%; animation: tnHeaderBand 12s ease infinite; box-shadow: none; border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; } @keyframes tnHeaderBand { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (prefers-reduced-motion: reduce) { header#jtl-nav-wrapper { animation: none; } } /* Erst beim Scrollen setzt sich die Leiste vom Inhalt ab. */ header#jtl-nav-wrapper.tn-scrolled { border-bottom-color: rgba(255, 255, 255, .35); box-shadow: 0 6px 24px rgba(20, 35, 50, .08); } @media (min-width: 992px) { header#jtl-nav-wrapper > .container-fluid { display: flex; align-items: center; gap: 24px; } header .toggler-logo-wrapper { position: static; float: none; flex: 0 0 auto; width: auto; margin: 0; } header .toggler-logo-wrapper .logo-wrapper { float: none; } header nav.navbar, header nav.navbar.align-items-lg-end { flex: 1 1 auto; display: flex; /* NOVA haengt hier .align-items-lg-end an (flex-end !important) – dagegen kommt man nur mit !important an. Sonst kleben Suche und Icons an der Unterkante statt mittig in der Leiste zu stehen. */ align-items: center !important; flex-wrap: nowrap; gap: 18px; height: 68px; min-height: 0; transition: height .2s ease; } /* Menuepunkte fuellen die Leiste in voller Hoehe aus, ihr Text sitzt darin mittig. Das ist wichtig fuer die Klappmenues: die haengen per top:100% am Menuepunkt. Ist der nur so hoch wie sein Text, oeffnen sie mitten in der Leiste bzw. mit Abstand darunter – erst die volle Hoehe dockt sie an die Unterkante des Headers an. Die Unterstreichung des aktiven Punktes sitzt damit ebenfalls wieder auf der Kante. */ header #mainNavigation { align-self: stretch; } header #mainNavigation .navbar-nav { height: 100%; } header #mainNavigation .navbar-nav > .nav-item { display: flex; align-items: stretch; height: 100%; } header #mainNavigation .navbar-nav > .nav-item > .nav-link { display: flex; align-items: center; height: 100%; } /* Menuepunkte: kein erzwungener Umbruch mehr */ header #mainNavigation { flex: 0 1 auto; flex-basis: auto; width: auto; } header #mainNavigation .navbar-nav { flex-direction: row; } /* Suche waechst, Icons stehen ganz rechts. Der freie Platz muss ZWISCHEN Suche und Icons liegen (margin-right:auto), sonst bleibt er hinter den Icons stehen und die haengen mitten in der Leiste. */ header #shop-nav { flex: 1 1 auto; margin-left: auto; justify-content: flex-end; align-items: center; /* NOVA gibt .nav-icons feste 2.8rem – damit sitzt die Suche im flachen Sticky-Zustand oben an der Kante statt mittig. Hoehe freigeben. */ height: auto; gap: 2px; } header #shop-nav > li { display: flex; align-items: center; } header #shop-nav #search { flex: 0 1 300px; max-width: 300px; /* Freier Platz liegt VOR der Suche – sie rueckt damit an die Icons heran. */ margin-left: auto; margin-right: 18px; } /* Das Feld muss seine Gruppe ausfuellen – sonst endet die Gruppe erst weit rechts vom sichtbaren Feld, und der Tastaturhinweis (rechts ausgerichtet) landet neben dem Feld statt darin. */ header #shop-nav #search .search-wrapper, header #shop-nav #search form, header #shop-nav #search .form-icon { width: 100%; } header #shop-nav #search .input-group { width: 100%; flex-wrap: nowrap; } /* typeahead.js legt zur Laufzeit ein um das Eingabefeld. Dieser Span ist dann das Flex-Kind – nicht das Feld. Ohne die folgende Regel bleibt er schmal, die Gruppe spannt aber auf volle Breite: der Fokusring liegt dann um einen leeren Bereich rechts vom Feld. NOVA loest das im Mega-Layout genauso (.main-search-wrapper .twitter-typeahead{flex:1}). */ header #shop-nav #search .twitter-typeahead { flex: 1 1 auto; width: auto !important; min-width: 0; } header #shop-nav #search .form-control, header #shop-nav #search .twitter-typeahead > .form-control { flex: 1 1 auto; width: 100%; min-width: 0; } /* Vorschlagsliste unter der vollen Feldbreite */ header #shop-nav #search .tt-menu { width: 100%; } header #jtl-nav-wrapper .navbar-brand { margin-right: 0; } /* Beim Scrollen bleibt die Leiste in Originalhoehe – nur Haarlinie und Schatten kommen dazu (siehe .tn-scrolled weiter oben). */ } /* Suchfeld: gleiche Formensprache wie die Felder auf der Artikelseite */ /* Rahmen und Fokusring greifen das Band auf: ein graues Feld wirkt auf dem blauen Verlauf wie ein Fremdkoerper, ein blauer Ring waere darauf unsichtbar. */ header #search .form-control { height: 40px; border: 0; border-radius: 10px 0 0 10px; background: #fff; font-size: 14.5px; } header #search .form-control:focus { box-shadow: none; } header #search .input-group:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, .38); border-radius: 10px; } header #search .btn { height: 40px; border: 0; border-radius: 0 10px 10px 0; /* Heller als das Band, damit der Knopf darauf hervortritt. */ background-color: #2a94d6; color: #fff; } header #search .btn:hover { background-color: #3fa5e4; } /* ===================================================================== Seitenflaeche und obere Leiste --------------------------------------------------------------------- Der Shop stand vollstaendig auf Weiss; Karten, Header und Inhalte gingen ineinander ueber. Die Grundflaeche ist jetzt ein gedaempftes Grau, auf dem die weissen Karten stehen. Alles, was vorher stillschweigend auf Weiss lag (Artikelkacheln, Reiterinhalt), bekommt dafuer eine eigene Flaeche. ===================================================================== */ body { background-color: #1e68c4; } /* Tiefblauer Grund mit weichem Farbverlauf statt eines Bildes: skaliert auf jeder Bildschirmgroesse ohne Kanten und kostet keine Ladezeit. Die geschwungenen Baender der Vorlage entstehen hier aus mehreren weichen Farbkreisen uebereinander. Feste Ebene hinter dem Inhalt (kein background-attachment:fixed, das ruckelt). */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: #1e68c4; /* Geschwungene Baender als SVG im Stylesheet: skaliert auf jede Bildschirm- groesse ohne Kanten, keine zusaetzliche Bilddatei, kein weiterer Aufruf. "slice" fuellt die Flaeche immer aus, egal welches Seitenverhaeltnis. */ background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201600%20900'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Crect%20width='1600'%20height='900'%20fill='%231e68c4'/%3E%3Cpath%20d='M0%2C0%20L1600%2C0%20L1600%2C210%20C1180%2C300%20760%2C120%20380%2C250%20C220%2C305%20100%2C300%200%2C275%20Z'%20fill='%232a7ddb'/%3E%3Cpath%20d='M980%2C0%20C1160%2C230%201380%2C430%201600%2C540%20L1600%2C0%20Z'%20fill='%233a8ce6'%20opacity='.42'/%3E%3Cpath%20d='M1320%2C900%20C1380%2C690%201490%2C545%201600%2C455%20L1600%2C900%20Z'%20fill='%233a8ce6'%20opacity='.3'/%3E%3Cpath%20d='M0%2C600%20C360%2C505%20760%2C690%201120%2C640%20C1330%2C610%201470%2C540%201600%2C470%20L1600%2C900%20L0%2C900%20Z'%20fill='%231a5fb8'/%3E%3Cpath%20d='M0%2C700%20C380%2C620%20800%2C800%201180%2C742%20C1360%2C715%201490%2C650%201600%2C585%20L1600%2C900%20L0%2C900%20Z'%20fill='%2316539f'/%3E%3Cpath%20d='M0%2C812%20C420%2C742%20900%2C866%201600%2C742%20L1600%2C900%20L0%2C900%20Z'%20fill='%23124a8f'%20opacity='.85'/%3E%3C/svg%3E"); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* Fussbereich bleibt unveraendert – bewusst keine eigenen Regeln hier. */ /* Obere Leiste dunkel: gibt der Seite oben einen Halt und hebt den Milchglas-Header davon ab. */ #header-top-bar, #header-top-bar.topbar-wrapper { background-color: var(--tnp-deep); color: rgba(255, 255, 255, .78); } #header-top-bar .nav-link { color: rgba(255, 255, 255, .78); font-size: 12.5px; padding-top: .7rem; padding-bottom: .7rem; transition: color .15s ease; } #header-top-bar a:not(.dropdown-item):not(.btn), #header-top-bar a:not(.dropdown-item):not(.btn):hover { color: rgba(255, 255, 255, .78); } #header-top-bar .nav-link:hover, #header-top-bar a:not(.dropdown-item):not(.btn):hover { color: #fff; } /* Trennstriche zwischen den Punkten zurueckhaltender */ #header-top-bar .nav-dividers .nav-item:not(:last-child)::after { opacity: .28; } /* --- Icons im Header --------------------------------------------------- NOVA setzt sie als reine Textlinks in Standardgroesse. Hier bekommen sie eine eigene Flaeche mit fester Groesse: groesseres Symbol, klare Trefferzone (42x42, also ueber der empfohlenen Mindestgroesse fuer Klickziele) und eine ruhige Hervorhebung beim Ueberfahren statt einer Farbaenderung am Text. */ @media (min-width: 992px) { header #shop-nav > li > .nav-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 42px; height: 42px; padding: 0 10px; border-radius: 12px; color: var(--tnp-text); transition: background-color .15s ease, color .15s ease; } header #shop-nav > li > .nav-link:hover, header #shop-nav > li.show > .nav-link { background-color: var(--tnp-soft); color: var(--tnp-primary); } header #shop-nav > li > .nav-link > span[class*="fa-"], header #shop-nav > li > .nav-link > i[class*="fa-"] { font-size: 19px; line-height: 1; } /* Warenkorbsumme neben dem Symbol */ header #shop-nav .cart-icon-dropdown > .nav-link { font-size: 13.5px; font-weight: 600; white-space: nowrap; } } /* Zaehler an Warenkorb und Wunschzettel: kleine Pille statt hochgestellter Zahl. Der weisse Ring loest sie vom Symbol, ueber dem sie sitzt. */ header #shop-nav .fa-sup, header #shop-nav .badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background-color: var(--tnp-primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px rgba(255, 255, 255, .92); } /* Motto links in der oberen Leiste. Die Leiste laeuft per flex-row-reverse, deshalb schiebt margin-right:auto das Motto an den linken Rand. */ #header-top-bar .topbar-motto { margin-right: auto; align-self: center; padding: .7rem 0; color: rgba(255, 255, 255, .82); font-size: 12.5px; line-height: 1.4; } @media (max-width: 991.98px) { #header-top-bar .topbar-motto { display: none; } } /* Symbole: leichtere Schnitte statt der gefuellten Standardsymbole und eine Groesse, die zur 42px-Flaeche passt. FontAwesome zeichnet die Symbole ueber ::before – deshalb wird hier Zeichen und Schriftschnitt getauscht, ohne das Markup von NOVA anzufassen. */ header #shop-nav .nav-link > span[class*="fa-"], header #shop-nav .nav-link > i[class*="fa-"] { font-size: 20px; } /* Konto: Kreis-Variante im leichten Schnitt */ header #shop-nav .nav-link > .fa-user::before, header #shop-nav .nav-link > .fa-user-check::before { font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f2bd"; } /* Wunschzettel: Herz als Umriss */ header #shop-nav .nav-link > .fa-heart::before { font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f004"; } /* Warenkorb: Tasche statt Einkaufswagen – ruhigere Form */ header #shop-nav .nav-link > .fa-shopping-cart::before { content: "\f290"; } /* --- Erste Ebene auf dem farbigen Band: Text und Symbole in Weiss ---------- Das Band ist jetzt satt blau; die dunklen Standardfarben von NOVA waeren darauf nicht mehr lesbar. Betrifft ausdruecklich nur die oberste Ebene – die Klappmenues stehen weiterhin auf weissem Grund mit dunklem Text. */ header #mainNavigation .navbar-nav > .nav-item > .nav-link, header #shop-nav > li > .nav-link, header #shop-nav > li > .nav-link > span, header #shop-nav > li > .nav-link > i, header .toggler-logo-wrapper .navbar-toggler { color: #fff; } /* Bestellvorgang: NOVA ersetzt die Navigation durch den Hinweis "Sichere Bezahlung" (.secure-checkout-icon). Der steht auf demselben blauen Band, erbt aber NOVAs dunkle Standardfarbe und war dadurch nicht zu lesen. */ header #jtl-nav-wrapper .secure-checkout-icon, header#jtl-nav-wrapper .secure-checkout-icon, header#jtl-nav-wrapper .secure-checkout-icon i, header#jtl-nav-wrapper .secure-checkout-icon a { color: #fff; } header #mainNavigation .navbar-nav > .nav-item > .nav-link:hover, header #mainNavigation .navbar-nav > .nav-item.show > .nav-link, header #shop-nav > li > .nav-link:hover, header #shop-nav > li.show > .nav-link { color: #fff; background-color: rgba(255, 255, 255, .18); } /* Unterstreichung des aktiven Punktes im dunklen Navy statt Weiss */ header #mainNavigation .navbar-nav > .nav-item > .nav-link::after, header #mainNavigation .navbar-nav > .nav-item > .nav-link::before { border-color: #173b52 !important; } header #mainNavigation .navbar-nav > .nav-item.active > .nav-link { border-bottom-color: #173b52; } /* Zaehler: auf dem blauen Band waere eine blaue Pille kaum zu sehen – deshalb umgekehrt, weisse Pille mit blauer Zahl. */ header #shop-nav .fa-sup, header #shop-nav .badge { background-color: #fff; color: #0b6aa2; box-shadow: 0 0 0 2px rgba(9, 82, 125, .35); } /* --- Schmale Fenster ------------------------------------------------------ */ @media (max-width: 575.98px) { /* "Frage zum Artikel" darf unter den Preis rutschen statt ihn zu quetschen. */ body.tn-pd .tn-pd-question { flex: 1 0 100%; white-space: normal; } } @media (max-width: 991.98px) { /* Mobiles Suchformular sitzt unterhalb der Leiste auf dem dunklen Band – gleiche Formensprache wie die Suche auf dem Desktop. */ header .search-form-wrapper-fixed .form-control { height: 40px; border: 0; border-radius: 10px 0 0 10px; } header .search-form-wrapper-fixed .btn { height: 40px; border: 0; border-radius: 0 10px 10px 0; background-color: #0b6aa2; color: #fff; } header .search-form-wrapper-fixed { padding-bottom: .6rem; } } /* ===================================================================== Warenkorb --------------------------------------------------------------------- Geltungsbereich: .basket (Container der Warenkorbseite). NOVA bringt die Zweispaltigkeit (Positionen links, Zusammenfassung rechts) bereits mit; hier geht es um Ordnung und Lesbarkeit: jede Position als eigene Karte, klare Spaltenkoepfe, ruhige Mengensteuerung, auffaellige Endsumme. ===================================================================== */ .basket .basket-heading { margin-bottom: 20px; color: var(--tnp-text); font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -.02em; } /* --- Kopfzeile der Positionsliste --- Entfaellt: jede Position bringt ihre Bezeichnungen selbst mit. Eine Kopfzeile ueber der Liste passt nur, solange alle Karten dieselbe Zeilenhoehe haben – sobald der Name umbricht, stimmt die Zuordnung nicht mehr. */ .basket .cart-items-header { /* !important ist noetig: NOVA haengt an dieselbe Zeile die Bootstrap-Klasse d-xl-flex, und die setzt display:flex ebenfalls mit !important. */ display: none !important; } /* Artikelname bekommt eine eigene Zeile ueber der ganzen Karte. Angesprochen wird die Spalte, die den Namen enthaelt – sie hat keine eigene Klasse. */ .basket .cart-items-body .align-items-baseline { align-items: flex-start !important; } .basket .cart-items-body .align-items-baseline > [class*="col"]:has(.cart-items-name) { flex: 0 0 100%; max-width: 100%; /* Keine Trennlinie: sie beginnt erst rechts vom Bild und wirkt dadurch abgeschnitten. Der Abstand traegt die Trennung. */ margin-bottom: 16px; } .basket .cart-items-name { font-size: 16px; } /* Titel und Aktionen ohne Unterstrich. Wichtig: Der Link TRAEGT die Klasse (.cart-items-name), er enthaelt sie nicht – ".cart-items-name a" ging deshalb ins Leere. Gegen die globale Regel "a:not(.btn){text-decoration:underline}" braucht es zudem genug Gewicht. */ .basket a.cart-items-name, .basket .cart-items-body a.wishlist-button, .basket .cart-items-body a.wishlist, .basket .cart-items-body .droppos, .basket .cart-items-body .cart-items-delete-button, .basket .cart-items-body .btn-link { text-decoration: none !important; } .basket a.cart-items-name:hover, .basket .cart-items-body a.wishlist-button:hover, .basket .cart-items-body .btn-link:hover { text-decoration: underline !important; } /* Stueckpreis, Anzahl und Preis linksbuendig als Gruppe unter dem Namen, statt ueber die ganze Breite verteilt. */ .basket .cart-items-body .align-items-baseline { justify-content: flex-start; } /* Bootstrap gibt den Spalten feste Breiten (col-md-*, col-xl-*) aus Media Queries. Ohne !important gewinnen die je nach Reihenfolge – deshalb hier ausdruecklich. Die drei Werte stehen damit als Gruppe links. */ .basket .cart-items-body .align-items-baseline > .cart-items-single-price, .basket .cart-items-body .align-items-baseline > .cart-items-quantity, .basket .cart-items-body .align-items-baseline > .cart-items-price { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; /* Der entscheidende Punkt: NOVA setzt an jeder dieser Spalten margin-left:auto – in einer Flex-Zeile drueckt das jede einzeln an den rechten Rand. Ohne diese Zeile bleibt alles rechts, egal was sonst folgt. */ margin-left: 0 !important; margin-right: 36px; /* Polsterung NICHT nullsetzen: die Spalten teilen sich damit die Achse des Artikelnamens. Frueher stand hier padding:0 – dadurch rutschten die Werte nach links und der Name musste hinterher, statt umgekehrt. */ text-align: left !important; } .basket .cart-items-body .align-items-baseline > .cart-items-price { margin-right: 0; } /* Mengensteuerung: feste, schmale Breite. NOVA gibt dem Wrapper max-w-sm und der Gruppe volle Breite – im schmalen Feld laeuft sie sonst ueber die Kante. */ .basket .cart-items-quantity .qty-wrapper { max-width: 160px; } .basket .cart-items-quantity .form-counter { width: 138px; max-width: 100%; margin: 0; } /* Die Zeile richtet Spalten an der Schriftlinie aus (align-items-baseline). Eine 42px hohe Mengensteuerung haengt dadurch nach unten aus der Reihe. */ .basket .cart-items-body .row.align-items-baseline { align-items: flex-start !important; } /* NOVA setzt am Fuss jeder Position und ueber der Liste eine Linie – in der Karte ist das eine Kante zu viel. */ .basket .cart-items-body hr, .basket .cart-items-body + hr, .basket .cart-items > hr { display: none; } /* Bezeichnungen ueber den Werten – "Stueckpreis" liefert NOVA bereits mit (.cart-items-price-text, sonst nur mobil sichtbar), "Anzahl" und "Preis" kommen hier dazu. */ .basket .cart-items-single-price .cart-items-price-text { display: block; } .basket .cart-items-single-price .cart-items-price-text, .basket .cart-items-quantity::before, .basket .cart-items-price::before { display: block; height: 16px; margin-bottom: 8px; color: var(--tnp-muted); font-size: 11px; font-weight: 700; line-height: 16px; text-transform: uppercase; letter-spacing: .07em; } .basket .cart-items-quantity::before { content: "Anzahl"; } .basket .cart-items-price::before { content: "Preis"; } /* --- Eine Position = eine Karte --- */ .basket .cart-items-body { position: relative; /* Bild oben buendig statt mittig – es soll neben dem Namen stehen, nicht neben den Preisen. */ align-items: flex-start; padding: 20px; margin: 0 0 12px; border: 1px solid var(--tnp-border); border-radius: var(--tnp-radius); background: #fff; box-shadow: 0 6px 20px -12px rgba(20, 35, 50, .35); transition: border-color .15s ease, box-shadow .15s ease; } .basket .cart-items-body:hover { border-color: rgba(42, 148, 214, .4); box-shadow: 0 10px 26px -12px rgba(20, 35, 50, .45); } /* Versand-, Kupon- und Gutscheinzeilen ruhiger als Artikelpositionen */ .basket .cart-items-body.type-2, .basket .cart-items-body.type-3, .basket .cart-items-body.type-4 { background: var(--tnp-soft); box-shadow: none; } .basket .cart-items-image img { border: 1px solid var(--tnp-border); border-radius: 10px; background: #fff; } .basket .cart-items-name { color: var(--tnp-text); font-size: 15.5px; font-weight: 600; line-height: 1.35; } .basket .cart-items-name a { color: inherit; } .basket .cart-items-name a:hover { color: var(--tnp-primary); } /* Artikelangaben (Artikelnummer, Versionsart, Domain, Hersteller) stehen als Liste untereinander und machen die Position unnoetig hoch. Als Chips nebeneinander ist dieselbe Information auf einen Blick erfassbar. */ .basket .cart-items-body ul.list-unstyled { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; } .basket .cart-items-body ul.list-unstyled > li { padding: 3px 10px; border: 1px solid var(--tnp-border); border-radius: 999px; background: var(--tnp-soft); color: var(--tnp-text); font-size: 12.5px; line-height: 1.5; } .basket .cart-items-body ul.list-unstyled > li > strong { color: var(--tnp-muted); font-weight: 600; } /* Hinweise und Kurzbeschreibung bleiben normaler Fliesstext */ .basket .cart-items-body ul.list-unstyled > li.shortdescription, .basket .cart-items-body ul.list-unstyled > li.notice { flex: 1 0 100%; padding: 0; border: 0; background: none; color: var(--tnp-muted); font-size: 13.5px; } /* Bild groesser und oben buendig */ .basket .cart-items-image { align-self: flex-start; } .basket .cart-items-image img { max-height: 110px; padding: 6px; } .basket .attribute, .basket .characteristic { display: inline-block; padding: 3px 9px; margin: 4px 6px 0 0; border: 1px solid var(--tnp-border); border-radius: 999px; background: var(--tnp-soft); color: var(--tnp-muted); font-size: 12px; } .basket .cart-items-single-price, .basket .baseprice { color: var(--tnp-muted); font-size: 13px; } .basket .price_overall, .basket .cart-items-price .price { color: var(--tnp-text); font-size: 17px; font-weight: 700; } /* --- Menge --- */ .basket .cart-items-quantity .form-counter { /* 42px waren zu hoch fuer die Zeile – die Steuerung stand damit tiefer als die uebrigen Werte und ragte nach unten heraus. 36px passen zur Zeilenhoehe von Stueckpreis und Preis. */ height: 36px; max-height: none; border-radius: 9px; border-color: var(--tnp-border); } .basket .cart-items-quantity .form-counter > .form-control, .basket .cart-items-quantity .form-counter .btn { height: auto; max-height: none; align-self: stretch; /* Bootstrap gibt Knoepfen und Feld eine eigene Innenpolsterung (.5rem 1rem). Die addiert sich auf die Zeilenhoehe und macht die Gruppe hoeher als die 36px des Containers – deshalb hier ausdruecklich klein halten. */ padding-top: 0; padding-bottom: 0; line-height: 1; font-family: inherit; font-size: 15px; } .basket .cart-items-quantity .form-counter .btn { padding-left: 12px; padding-right: 12px; } .basket .cart-items-quantity .form-counter > .form-control { padding-left: 4px; padding-right: 4px; } .basket .cart-items-quantity .form-counter:focus-within { border-color: var(--tnp-primary); box-shadow: 0 0 0 3px rgba(42, 148, 214, .16); } .basket .cart-items-delete-button .btn, .basket .droppos .btn { color: var(--tnp-muted); border-radius: 8px; } .basket .cart-items-delete-button .btn:hover, .basket .droppos .btn:hover { color: #c0392b; background: rgba(192, 57, 43, .08); } /* --- Zusammenfassung rechts --- */ .basket .cart-summary { top: 96px; } .basket .cart-summary .card, .basket .basket-summary { border: 1px solid var(--tnp-border); border-radius: var(--tnp-radius); background: #fff; box-shadow: 0 10px 30px -14px rgba(20, 35, 50, .35); } .basket .cart-summary .card-gray, .basket .cart-summary .card.card-gray { background: #fff; } .basket .cart-summary .card-header, .basket .cart-summary .card-gray .card-header { background: #fff; border-bottom: 1px solid var(--tnp-border); color: var(--tnp-muted); font-size: 13.5px; } /* Ist der Kopf der einzige Inhalt der Karte (Fall "kein Coupon verfuegbar"), ergaeben Trennlinie und eckige untere Kanten eine halbe Karte. */ .basket .cart-summary .card > .card-header:first-child:last-child { border-bottom: 0; border-radius: var(--tnp-radius); padding: 14px 18px; } /* Versandkostenrechner am Fuss der Liste */ /* Auswahlfelder im Versandrechner. Der Bereich heisst im Markup NICHT .shipping-calculator, sondern #shipping-estimate-form / .shipping-calculator-main – meine erste Fassung griff deshalb ins Leere. Das Laenderfeld ist ein ganz ohne Klasse – der Browser zeichnet sie dann in seiner Systemoptik, was neben den uebrigen Feldern der Produktseite fremd wirkt. Beide Auswahl- felder bekommen hier dieselbe Form wie Eingabefelder und Kaufbereich: eigener Pfeil, gleiche Kante, gleicher Fokusring. appearance:none schaltet die Systemdarstellung ab; der Pfeil kommt als eingebettetes SVG, damit keine zusaetzliche Datei geladen werden muss. */ body.tn-pd #product-offer select, body.tn-pd #buy_form select { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; height: 48px; padding: 0 42px 0 14px; border: 1px solid var(--tnp-border); border-radius: 10px; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2366727d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px 8px; color: var(--tnp-text); font-size: 15px; line-height: 1.3; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } body.tn-pd #product-offer select:hover, body.tn-pd #buy_form select:hover { border-color: #c3d1dd; } body.tn-pd #product-offer select:focus, body.tn-pd #buy_form select:focus { border-color: var(--tnp-primary); box-shadow: 0 0 0 3px rgba(42, 148, 214, .18); outline: 0; } body.tn-pd #product-offer select:disabled, body.tn-pd #buy_form select:disabled { background-color: var(--tnp-soft); color: var(--tnp-muted); cursor: not-allowed; } /* Die Eintraege selbst zeichnet das Betriebssystem – gestalten laesst sich daran nur die Farbe, und auch das nicht in jedem Browser. */ body.tn-pd #product-offer select option, body.tn-pd #buy_form select option { color: var(--tnp-text); } /* --- Klappliste von bootstrap-select ------------------------------------- NOVA laedt bootstrap-select; beide Auswahlfelder der Artikelseite laufen darueber. Die Komponente blendet das echte , sondern bootstrap-select: NOVA blendet das echte Feld aus und zeichnet Knopf plus Liste selbst nach. Deshalb laesst sich beides gestalten - anders als bei einem Browser-Optionsmenue, weswegen tn_giveAway dort ein eigenes Aufklappmenue bauen musste. Erkennbar an .bootstrap-select um das Feld herum. */ #result-wrapper .productbox-variations .bootstrap-select > .dropdown-toggle, #result-wrapper .productbox-variations .bootstrap-select > .btn { height: 42px; padding: 0 38px 0 14px; display: flex; align-items: center; border: 0; border-radius: 12px; background: var(--tnp-soft); box-shadow: none; color: var(--tnp-text); font-size: 13.5px; font-weight: 500; } #result-wrapper .productbox-variations .bootstrap-select > .dropdown-toggle:focus { background: #eaf2f9; box-shadow: 0 0 0 3px rgba(42, 148, 214, .18); outline: none; } #result-wrapper .productbox-variations .bootstrap-select .dropdown-menu { padding: 8px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 18px 44px -12px rgba(20, 35, 50, .45); } #result-wrapper .productbox-variations .bootstrap-select .dropdown-item { padding: 9px 12px; border-radius: 10px; color: var(--tnp-text); font-size: 13.5px; white-space: normal; } #result-wrapper .productbox-variations .bootstrap-select .dropdown-item:hover, #result-wrapper .productbox-variations .bootstrap-select .dropdown-item:focus { background: var(--tnp-soft); } #result-wrapper .productbox-variations .bootstrap-select .dropdown-item.active, #result-wrapper .productbox-variations .bootstrap-select .dropdown-item.selected { background: rgba(42, 148, 214, .12); color: var(--tnp-primary); font-weight: 600; } /* Der Aufpreis stand als Fliesstext hinter der Bezeichnung und brach in die naechste Zeile um. Als Pille rechts wird er zur Nebenangabe. */ #result-wrapper .productbox-variations .variation-badge { display: inline-block; padding: 2px 9px; margin-left: 8px; border-radius: 999px; background: rgba(42, 148, 214, .12); color: var(--tnp-primary); font-size: 11.5px; font-weight: 700; white-space: nowrap; } /* --- Ueberlagerung: Sitz und Form --- Ueber die volle Kartenbreite bis an den unteren Rand. Vorher stand sie 16px eingerueckt, wodurch Titel und Preis links und rechts daneben hervorlugten. */ #result-wrapper .productbox.productbox-show-variations .productbox-variations { left: 0; right: 0; bottom: 0; padding: 16px; border-radius: 0 0 20px 20px; box-shadow: 0 -10px 24px -14px rgba(20, 35, 50, .3); } /* --- Auszeichnung (Ribbon) --- Sass auf dem Bild und verdeckte die Verpackung. Kleiner, weiter in die Ecke, mit hellem Ring: so liest sie sich auf jedem Motiv, ohne es zuzudecken. */ #result-wrapper .productbox-ribbon.ribbon, #result-wrapper .productbox.productbox-hover:hover .productbox-ribbon.ribbon { top: 14px; left: 14px; padding: 4px 10px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 4px 12px -3px rgba(24, 118, 178, .55); font-size: 9.5px; letter-spacing: .1em; } /* --------------------------------------------------------------------------- LINKE LEISTE – Filterkaesten Die Zeilen bestehen aus einem Symbol, dem Text und einer Trefferzahl (a.filter-item > .box-link-wrapper > i + span + span.badge). Das Kaestchen ist KEIN Ankreuzfeld, sondern ein Schriftzeichen (far fa-square) - deshalb liess es sich nicht ueber die ueblichen Formularregeln gestalten. --------------------------------------------------------------------------- */ /* Ueberschrift des Kastens. Der blaue Rahmen im Screenshot war der Fokusrahmen von .btn-link - Bootstraps Standard, sichtbar nach jedem Klick. */ #sidepanel_left .btn-filter-box, #sidepanel_left .btn-filter-box:focus, #sidepanel_left .btn-filter-box:active { padding: 0 0 12px; margin-bottom: 10px; border: 0; border-bottom: 1px solid var(--tnp-border); border-radius: 0; box-shadow: none; color: var(--tnp-deep); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-align: left; text-decoration: none; text-transform: uppercase; } #sidepanel_left .btn-filter-box:hover { color: var(--tnp-primary); } /* Die Trennlinien am Kastenende sind neben der Kartenform doppelt gemoppelt. */ #sidepanel_left hr.box-normal-hr, #sidepanel_left hr.box-filter-hr { display: none; } /* Filterzeile als anklickbare Flaeche statt als Verweis im Fliesstext. */ #sidepanel_left .filter-item { display: block; padding: 2px 8px; margin: 0 -8px; border-radius: 10px; color: var(--tnp-text); transition: background .18s ease; } #sidepanel_left .filter-item:hover { background: #eef3f8; } #sidepanel_left .filter-item .box-link-wrapper { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; } #sidepanel_left .filter-item .word-break { flex: 1 1 auto; min-width: 0; } /* Das Kaestchen: ein Schriftzeichen, das wie ein Ankreuzfeld aussehen soll. Fester Platz und kraeftigere Farbe, damit es nicht wie ein Versehen wirkt. */ #sidepanel_left .filter-item .snippets-filter-item-icon-right { flex: 0 0 18px; width: 18px; color: #9aa8b5; font-size: 15px; text-align: center; transition: color .18s ease; } #sidepanel_left .filter-item:hover .snippets-filter-item-icon-right { color: var(--tnp-primary); } /* Gesetzter Filter: Zeile eingefaerbt, Zeichen und Text in der Leitfarbe. */ #sidepanel_left .filter-item.active, #sidepanel_left .filter-item.selected { background: rgba(42, 148, 214, .12); color: var(--tnp-primary); font-weight: 600; } #sidepanel_left .filter-item.active .snippets-filter-item-icon-right { color: var(--tnp-primary); } /* Trefferzahl: war ein umrandetes Bootstrap-Abzeichen in Grau. */ #sidepanel_left .filter-item .badge, #sidepanel_left .badge-outline-secondary { flex: 0 0 auto; min-width: 26px; padding: 4px 8px; border: 0; border-radius: 999px; background: #e7edf3; color: #56636f; font-size: 11.5px; font-weight: 700; line-height: 1.4; } #sidepanel_left .filter-item:hover .badge { background: var(--tnp-primary); color: #fff; } /* --------------------------------------------------------------------------- KONTRAST Die Bedienelemente lagen auf #f5f7fa - auf weissem Grund kaum zu erkennen. Sie bekommen einen deutlich tieferen Ton; die Schrift wird dunkler gesetzt. --------------------------------------------------------------------------- */ #result-wrapper .productlist-page-nav .btn-outline-secondary, #result-wrapper .productlist-page-nav .btn.dropdown-toggle, #result-wrapper .productlist-page-nav .btn-option, #result-wrapper .productbox-variations .bootstrap-select > .dropdown-toggle, #result-wrapper .productbox-variations .bootstrap-select > .btn, #result-wrapper .productbox-variations .custom-select, #result-wrapper .productlist-page-nav .custom-select { background-color: #e8eef4; color: var(--tnp-deep); font-weight: 600; } #result-wrapper .productlist-page-nav .btn-outline-secondary:hover, #result-wrapper .productlist-page-nav .btn.dropdown-toggle:hover, #result-wrapper .productlist-page-nav .btn-option:hover { background-color: #d4e2ee; } #result-wrapper .productlist-item-info { color: #56636f; font-weight: 600; } /* Aufklappmenues: hellgraue Zeilen auf Weiss waren kaum auseinanderzuhalten. */ #result-wrapper .productlist-page-nav .dropdown-item, #result-wrapper .productbox-variations .bootstrap-select .dropdown-item { color: var(--tnp-deep); } #result-wrapper .productlist-page-nav .dropdown-item:hover, #result-wrapper .productlist-page-nav .dropdown-item:focus, #result-wrapper .productbox-variations .bootstrap-select .dropdown-item:hover, #result-wrapper .productbox-variations .bootstrap-select .dropdown-item:focus { background: #e8eef4; } /* Die Ueberlagerung liegt auf der Karte, also Weiss auf Weiss. Ein feiner Rahmen trennt sie sichtbar ab. */ #result-wrapper .productbox.productbox-show-variations .productbox-variations { border: 1px solid var(--tnp-border); border-bottom: 0; box-shadow: 0 -14px 30px -16px rgba(20, 35, 50, .45); } /* =========================================================================== NACHBESSERUNG: Bezugsrahmen der Ueberlagerung und Bewegungsdauer =========================================================================== */ /* Die Ueberlagerung soll die Karte bis an alle drei Kanten decken. Sie tat es nicht, weil NOVA .productbox-inner auf position:relative setzt - damit war NICHT die Karte der Bezugsrahmen, sondern dieses Element, das 16px innerhalb der Karte beginnt. Genau dieser Rand blieb links und rechts sichtbar. .productbox-inner braucht die Positionierung nur fuer das weisse Pseudo-Element, das hier ohnehin stillgelegt ist. */ #result-wrapper .productbox .productbox-inner { position: static; } #result-wrapper .productbox.productbox-show-variations .productbox-variations { left: 0; right: 0; bottom: 0; border-radius: 0 0 20px 20px; } /* --- Bewegungsdauer --- Beim Verlassen lief die Bewegung sichtbar nach: NOVA blendet .productbox-onhover ueber 350ms aus (dazu gehoeren auch die Schnellaktionen), gleichzeitig federten Karte und Bild ueber 280 bzw. 500ms zurueck. Drei verschieden lange Bewegungen nacheinander lesen sich wie ein zweiter Durchlauf. Jetzt einheitlich kurz. */ #result-wrapper .productbox.productbox-column { transition: transform .16s ease-out, box-shadow .16s ease-out; } #result-wrapper .productbox-onhover { transition: opacity .12s linear; } #result-wrapper .productbox.productbox-show-variations .productbox-variations { transition: opacity .14s ease, transform .14s ease, visibility .14s; } /* Der Zoom auf dem Bild war die langsamste der Bewegungen und fiel beim Zuruecklaufen am staerksten auf. Ohne ihn wirkt die Karte ruhiger. */ #result-wrapper .productbox-images .inner, #result-wrapper .productbox:hover .productbox-images .inner { transform: none; transition: none; } /* =========================================================================== NACHBESSERUNG: Bezugsrahmen, gleiche Kartenhoehe, Gruppenkopf =========================================================================== */ /* --- Bezugsrahmen der Ueberlagerung ausdruecklich setzen --- .productbox-inner steht hier auf static (siehe oben), damit die Karte selbst der Bezugsrahmen ist. NOVA erklaert .productbox zwar zu position:relative, aber NUR im gebuendelten Stylesheet - im eingebetteten Start-Stylesheet fehlt die Regel. Beim ersten Seitenaufbau gab es deshalb gar keinen nahen Bezugsrahmen, und die Ueberlagerung spannte sich ueber den gesamten Inhaltsbereich auf: der "riesige" Hover. Hier ausdruecklich gesetzt, damit das nicht von fremden Ladereihenfolgen abhaengt. */ #result-wrapper .productbox { position: relative; } /* --- Gleiche Kartenhoehe in einer Reihe --- Die letzte Karte lief nach unten aus, weil sich die Hoehe aus dem Inhalt ergab statt aus der Reihe. Ausdrueckliche Dehnung auf beiden Ebenen: die Bahn dehnt ihre Kacheln, die Kachel dehnt die Karte darin. */ #result-wrapper .tn-pl-track { align-items: stretch; } #result-wrapper .tn-pl-item { align-items: stretch; } #result-wrapper .tn-pl-item > .productbox.productbox-column { height: 100%; min-height: 0; } /* =========================================================================== GRUPPEN der Artikelliste (nur Kategorie "JTL Plugin") Aufbau: .tn-pl-group > .tn-pl-group-head + .tn-pl-strip > .tn-pl-track Siehe productlist/index.tpl. Vorbild ist der Abschnitt "Einsatzbereiche" auf techneo.berlin (.usecase-card): weisse Karte, 20px Radius, feiner Rahmen, Symbolkachel mit Farbverlauf. Hier ist die Schichtung umgekehrt - die Gruppe ist die getoente Flaeche, die Artikelkarten darin bleiben weiss. Anders entstuende Weiss auf Weiss und damit gar kein Kontrast: der Inhaltsbereich des Shops (#main-wrapper) ist bereits weiss. =========================================================================== */ /* --- Die Gruppe als Karte --- .tn-pl-group ist eine Bootstrap-Spalte und bringt 15px Innenabstand mit; der wird hier durch den Kartenabstand ersetzt. */ #result-wrapper .tn-pl-group { padding: 32px 28px 26px; margin-bottom: 26px; border: 1px solid #d7e1ec; border-radius: 24px; background-image: linear-gradient(180deg, #f8fbfd 0%, #eaf1f8 100%); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); } /* --- Kopf der Gruppe --- Mittig, weil die Karten darunter ebenfalls mittig stehen. */ #result-wrapper .tn-pl-group-head { max-width: 70ch; margin: 0 auto 26px; text-align: center; } /* Symbolkachel – dieselben Zeichen wie auf techneo.berlin, damit Website und Shop als ein Auftritt lesbar bleiben. */ #result-wrapper .tn-pl-group-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 16px; background-image: linear-gradient(135deg, var(--tnp-primary) 0%, #147a9e 100%); box-shadow: 0 10px 22px -6px rgba(42, 148, 214, .55); } #result-wrapper .tn-pl-group-icon svg { width: 23px; height: 23px; fill: #fff; } #result-wrapper .tn-pl-group-title { margin: 0 0 10px; color: #0f2b3d; font-size: clamp(22px, 2.3vw, 28px); font-weight: 700; letter-spacing: -.025em; line-height: 1.22; } #result-wrapper .tn-pl-group-text { margin: 0 0 14px; color: #51606d; font-size: 14.5px; line-height: 1.6; } /* Anzahl als ruhige Nebenangabe unter der Beschreibung – oben haette sie mit der Symbolkachel um Aufmerksamkeit gerungen. */ #result-wrapper .tn-pl-group-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px #d7e1ec; color: #4a5b69; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } #result-wrapper .tn-pl-group-kicker:before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--tnp-primary); } /* --- Artikelkarten innerhalb der Gruppe --- Auf der getoenten Flaeche brauchen sie einen eigenen Rand, sonst verschwimmt die Kante trotz Schatten. */ #result-wrapper .tn-pl-item > .productbox.productbox-column { height: 100%; min-height: 0; border: 1px solid #e3eaf1; box-shadow: 0 2px 6px rgba(15, 23, 42, .05), 0 10px 22px -14px rgba(15, 23, 42, .3); } #result-wrapper .tn-pl-item > .productbox.productbox-hover:hover, #result-wrapper .tn-pl-item > .productbox.productbox-hover:focus-within { border-color: #bae0f7; box-shadow: 0 4px 10px rgba(15, 23, 42, .06), 0 26px 46px -22px rgba(15, 23, 42, .45); } /* Die Bildflaeche bekommt auf der getoenten Gruppe einen hellen Grund, damit die weissen Produktbilder nicht in die Karte ausfransen. */ #result-wrapper .tn-pl-item .productbox-image .productbox-images { background: #fbfcfe; } /* --- Bahn mit den Artikeln --- WICHTIG: Ohne .is-slider steht hier KEIN overflow. Ein Behaelter mit overflow-x wuerde auch senkrecht beschneiden (die Rechenregel des Browsers erzwingt das) - Kartenschatten, der angehobene Zustand beim Ueberfahren und vor allem das aufgeklappte Auswahlmenue waeren abgeschnitten. Den Ueberlauf schaltet js/custom.js erst zu, wenn die Reihe wirklich breiter ist als der Platz. */ #result-wrapper .tn-pl-strip { position: relative; } #result-wrapper .tn-pl-track { --tn-cols: 3; --tn-gap: 22px; display: flex; align-items: stretch; gap: var(--tn-gap); /* "safe" verhindert den bekannten Fehler zentrierter Flex-Reihen: bei Ueberlaenge waere sonst der Anfang nach links aus dem Behaelter geschoben und nicht mehr erreichbar. */ justify-content: safe center; padding: 2px 0 4px; } #result-wrapper .tn-pl-item { display: flex; align-items: stretch; flex: 0 0 calc((100% - (var(--tn-cols) - 1) * var(--tn-gap)) / var(--tn-cols)); max-width: calc((100% - (var(--tn-cols) - 1) * var(--tn-gap)) / var(--tn-cols)); } /* --- Schieber (erst ab Ueberlaenge, von js/custom.js gesetzt) --- */ #result-wrapper .tn-pl-strip.is-slider .tn-pl-track { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; padding: 10px 2px 26px; scrollbar-width: none; -ms-overflow-style: none; } #result-wrapper .tn-pl-strip.is-slider .tn-pl-track::-webkit-scrollbar { display: none; } #result-wrapper .tn-pl-strip.is-slider .tn-pl-item { scroll-snap-align: start; } #result-wrapper .tn-pl-nav { position: absolute; top: 42%; z-index: 6; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 4px 18px -4px rgba(15, 23, 42, .45); color: #0f2b3d; cursor: pointer; transition: background .18s ease, color .18s ease, opacity .18s ease; } #result-wrapper .tn-pl-nav:hover { background: var(--tnp-primary); color: #fff; } #result-wrapper .tn-pl-nav[hidden] { display: none; } #result-wrapper .tn-pl-nav:disabled { opacity: .35; cursor: default; } #result-wrapper .tn-pl-nav:disabled:hover { background: #fff; color: #0f2b3d; } #result-wrapper .tn-pl-prev { left: -12px; } #result-wrapper .tn-pl-next { right: -12px; } @media (max-width: 1499.98px) { #result-wrapper .tn-pl-track { --tn-cols: 3; } } @media (max-width: 991.98px) { #result-wrapper .tn-pl-track { --tn-cols: 2; --tn-gap: 16px; } #result-wrapper .tn-pl-group { padding: 26px 20px 22px; } } @media (max-width: 575.98px) { #result-wrapper .tn-pl-track { --tn-cols: 1.25; --tn-gap: 12px; } #result-wrapper .tn-pl-group { padding: 22px 16px 18px; border-radius: 20px; } #result-wrapper .tn-pl-group-text { font-size: 13.5px; } #result-wrapper .tn-pl-nav { display: none; } } /* =========================================================================== FEINABSTIMMUNG der Artikelliste - fuenf Karten je Ansicht - kleinere Rundungen - verbindlich gleiche Kartenhoehe =========================================================================== */ /* --- Fuenf Karten je Ansicht --- Die Breite ergibt sich aus Anzahl und Zwischenraum, nicht aus einem festen Wert - so bleiben die Karten ueber alle Gruppen gleich breit, auch wenn eine Gruppe nur einen Artikel enthaelt. Ab fuenf Karten je Ansicht schaltet js/custom.js bei mehr Artikeln auf Schieber um. */ #result-wrapper .tn-pl-track { --tn-cols: 4; --tn-gap: 20px; } /* Bei schmaleren Karten muessen Innenabstand und Schriftgroessen mitgehen, sonst bleibt fuer Bild und Titel zu wenig uebrig. */ #result-wrapper .tn-pl-item > .productbox.productbox-column { padding: 13px 13px 17px; } #result-wrapper .tn-pl-item .productbox-title { margin-top: 12px; margin-bottom: 6px; } #result-wrapper .tn-pl-item .productbox-title a { font-size: 14.5px; line-height: 1.4; } #result-wrapper .tn-pl-item .productbox .price, #result-wrapper .tn-pl-item .productbox .price span, #result-wrapper .tn-pl-item .productbox .productbox-price { font-size: 19px; } #result-wrapper .tn-pl-item .productbox-images img { padding: 6px; } /* Die Schnellaktionen nehmen in der schmalen Karte zu viel Bildflaeche ein. */ #result-wrapper .tn-pl-item .productbox-quick-actions { top: 14px; right: 14px; } #result-wrapper .tn-pl-item .productbox-quick-actions .btn { width: 33px; height: 33px; } #result-wrapper .tn-pl-item .productbox-ribbon.ribbon, #result-wrapper .tn-pl-item .productbox.productbox-hover:hover .productbox-ribbon.ribbon { top: 10px; left: 10px; padding: 3px 8px; font-size: 9px; } /* --- Rundungen --- Die bisherigen Werte stammten von der Artikeldetailseite, wo einzelne grosse Flaechen stehen. In einem Raster aus vielen kleinen Karten wirkt derselbe Radius wuchtig und laesst die Kanten weich aussehen. Durchgehend etwa halbiert. */ #result-wrapper .tn-pl-group { border-radius: 14px; } #result-wrapper .tn-pl-group-icon { border-radius: 11px; } #result-wrapper .tn-pl-item > .productbox.productbox-column, #result-wrapper .productbox.productbox-column { border-radius: 10px; } #result-wrapper .productbox-image .productbox-images { border-radius: 8px; } #result-wrapper .productbox.productbox-show-variations .productbox-variations { border-radius: 0 0 10px 10px; } #result-wrapper .productbox-variations .bootstrap-select > .dropdown-toggle, #result-wrapper .productbox-variations .bootstrap-select > .btn, #result-wrapper .productbox-variations .custom-select, #result-wrapper .productlist-page-nav .custom-select { border-radius: 8px; } #result-wrapper .productbox-variations .bootstrap-select .dropdown-menu, #result-wrapper .productlist-page-nav .dropdown-menu { border-radius: 10px; } #result-wrapper .productlist-page-nav .dropdown-item, #result-wrapper .productbox-variations .bootstrap-select .dropdown-item { border-radius: 7px; } #result-wrapper .productlist-page-nav .btn-option, #result-wrapper .productlist-page-nav .btn-group > .btn-option { border-radius: 9px; } #result-wrapper .pagination .page-link { border-radius: 8px; } #sidepanel_left .box { border-radius: 14px; } #sidepanel_left .filter-item { border-radius: 8px; } /* --- Gleiche Kartenhoehe, verbindlich --- Eine Karte lief nach unten aus, weil ihre Hoehe aus dem Inhalt kam statt aus der Reihe. Die Dehnung wird auf jeder Ebene der Kette ausdruecklich gesetzt: Bahn -> Kachel -> Karte -> Formular. Das Formular ist dabei leicht zu uebersehen - es liegt zwischen Karte und Inhalt und haette die Dehnung sonst nicht weitergereicht. */ #result-wrapper .tn-pl-track { align-items: stretch; } #result-wrapper .tn-pl-item { align-self: stretch; align-items: stretch; } #result-wrapper .tn-pl-item > .productbox.productbox-column { height: 100%; min-height: 0; align-self: stretch; } #result-wrapper .tn-pl-item > .productbox.productbox-column > form { height: 100%; } @media (max-width: 1199.98px) { #result-wrapper .tn-pl-track { --tn-cols: 3; } } @media (max-width: 991.98px) { #result-wrapper .tn-pl-track { --tn-cols: 2; --tn-gap: 14px; } } @media (max-width: 575.98px) { #result-wrapper .tn-pl-track { --tn-cols: 1.25; --tn-gap: 12px; } #result-wrapper .tn-pl-group { border-radius: 12px; } } /* =========================================================================== SEITENBREITE --------------------------------------------------------------------------- NOVA nutzt fuer Kopfleiste, Inhalt und Fuss die Klasse .container-fluid-xl mit 103.125rem (1650px) Hoechstbreite. Auf breiten Bildschirmen zieht das die Seite weit auseinander: die Artikelreihe wird sehr lang, Ueberschriften und Fliesstext laufen ueber unangenehm grosse Zeilenlaengen. Hier auf dieselbe Breite gesetzt, die NOVA seinem gewoehnlichen .container ab 1300px gibt (1250px). Kopfleiste, Inhalt und Fuss bleiben damit untereinander buendig - deshalb die gemeinsame Klasse und nicht nur der Inhaltsbereich. Unterhalb von 1250px aendert sich nichts: die Angabe begrenzt nur nach oben. =========================================================================== */ .container-fluid-xl { max-width: 1250px; } /* =========================================================================== NOVAS EIGENE AUFKLAPP-STEUERUNG STILLLEGEN --------------------------------------------------------------------------- NOVA loest das Aufklappen der Variationen per Skript (jtl3.js, registerImageHover): 1. mouseenter -> reserveSpace(box) setzt eine min-height als Inline-Stil auf .product-wrapper - aber NUR bei der letzten Kachel einer Reihe (isLastInRow). Genau daher kam der leere Streifen unter der jeweils letzten Karte einer Gruppe. 2. box bekommt die Klasse "focus" Daraufhin greift NOVAs Regel .productbox-inner.pos-abs{position:absolute}, damit der aufgeklappte Inhalt aus der Kachel herausschweben kann, ohne das Raster zu verschieben. 3. collapse('show') klappt den Block auf. Mit der Ueberlagerung (siehe .productbox-variations weiter oben) ist dieser ganze Weg ueberfluessig: Der Block liegt ohnehin absolut ueber der Karte. Beide Eingriffe muessen aber ausdruecklich zurueckgenommen werden, sonst wirken alte und neue Mechanik gegeneinander - der Inhalt sprengt die Karte auf, statt darueber zu liegen. =========================================================================== */ /* Der reservierte Platz kommt als Inline-Stil und ist nur so zu ueberschreiben. Das ist der Fall, fuer den !important gedacht ist. */ #result-wrapper .product-wrapper, #result-wrapper .tn-pl-item.product-wrapper { min-height: 0 !important; } /* NOVAs Ausweichposition fuer den aufgeklappten Zustand abschalten - die Karte ist hier selbst der Bezugsrahmen, siehe .productbox{position:relative}. */ #result-wrapper .productbox .productbox-inner.pos-abs, #result-wrapper .productbox.focus .productbox-inner, #result-wrapper .productbox:hover .productbox-inner { position: static; left: auto; top: auto; right: auto; } /* Die Klasse "focus" setzt NOVA per Skript. Sie soll dieselbe Wirkung haben wie das Ueberfahren mit der Maus - nicht mehr. */ #result-wrapper .productbox.productbox-show-variations.focus .productbox-variations { opacity: 1; visibility: visible; transform: translateY(0); } /* --- Kartenhoehe: letzte Absicherung --- NOVA schreibt beim Ueberfahren eine min-height als Inline-Stil auf die Kachel (reserveSpace in jtl3.js) und raeumt sie beim Verlassen wieder ab. Bleibt der Aufraeumschritt aus - etwa weil der Zeiger das Fenster verlaesst, bevor mouseleave feuert - behaelt genau eine Kachel ihre Hoehe. Betroffen ist immer die letzte einer Reihe, weil die Funktion nur dort ueberhaupt etwas setzt (isLastInRow). Hoehe und Mindesthoehe kommen hier ausschliesslich aus der Reihe. */ #result-wrapper .tn-pl-item, #result-wrapper .tn-pl-item.product-wrapper { height: auto !important; min-height: 0 !important; } #result-wrapper .tn-pl-item > .productbox.productbox-column { height: 100%; min-height: 0; max-height: none; } /* --- Der eigentliche Grund fuer die zu hohe letzte Karte --- NOVA setzt: #product-list .product-wrapper:not(:last-child){margin-bottom:4rem} Im Bootstrap-Raster erzeugt das den Zeilenabstand zwischen den Kachelreihen. In der waagerechten Bahn stehen die Kacheln jedoch NEBENeinander: alle ausser der letzten tragen dann 64px Aussenabstand nach unten. Die Zeilenhoehe einer Flex-Reihe richtet sich nach dem groessten Element EINSCHLIESSLICH seiner Aussenabstaende - und weil alle Kacheln gedehnt werden, fuellt ausgerechnet die letzte diese 64px mit eigener Flaeche, die bei den anderen Luft ist. Der senkrechte Abstand kommt hier aus row-gap bzw. aus der Gruppenkarte. */ #result-wrapper .tn-pl-track .product-wrapper:not(:last-child), #result-wrapper .tn-pl-track .product-wrapper { margin-bottom: 0; } /* --- Symbol und Name auf einer Zeile --- */ #result-wrapper .tn-pl-group-line { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; } #result-wrapper .tn-pl-group-icon { flex: 0 0 auto; width: 44px; height: 44px; margin-bottom: 0; } #result-wrapper .tn-pl-group-icon svg { width: 20px; height: 20px; } #result-wrapper .tn-pl-group-title { margin: 0; text-align: left; } /* --- Abstand zwischen den Gruppen --- Bisher addierten sich DREI Werte: der row-gap des Rasters (30px), der Aussenabstand der Gruppe nach unten (26px) und der Abstand zur folgenden Gruppe (26px) - zusammen ueber 80px. Der Abstand kommt jetzt aus einer einzigen Quelle. */ #result-wrapper #product-list.tn-pl-grouped { row-gap: 0; } #result-wrapper .tn-pl-group { /* Der Abstand liegt auf der Karte selbst - oben wie unten. Damit hat sie auch nach einem Ankersprung sichtbaren Raum ueber sich, unabhaengig davon, wo der Browser die Sprungmarke ausrichtet. */ margin-top: 40px; margin-bottom: 30px; } /* Die erste Gruppe folgt auf die Werkzeugleiste und braucht den Zuschlag nicht - sonst entstuende dort ein Loch. */ #result-wrapper .tn-pl-group:first-of-type { margin-top: 0; } #result-wrapper .tn-pl-group + .tn-pl-group { margin-top: 0; } /* Die letzte Gruppe braucht Abstand zur Trefferzahl und zum Seitenblaettern darunter - vorher stand dort 0 und beides klebte an der Karte. */ #result-wrapper .tn-pl-group:last-child { margin-bottom: 30px; } /* Innerhalb der Karte darf der Kopf etwas naeher an die Artikel ruecken. */ #result-wrapper .tn-pl-group-head { margin-bottom: 20px; } /* --------------------------------------------------------------------------- SPRUNGLEISTE zu den Gruppen Steht ueber der Liste und fuehrt zu den Ankern der einzelnen Gruppen (id="tn-gruppe-..."), die productlist/index.tpl setzt. --------------------------------------------------------------------------- */ #result-wrapper .tn-pl-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; } #result-wrapper .tn-pl-jump-link { padding: 7px 15px; border-radius: 999px; background: #e8eef4; color: var(--tnp-deep); font-size: 13px; font-weight: 600; text-decoration: none; transition: background .18s ease, color .18s ease; } #result-wrapper .tn-pl-jump-link:hover, #result-wrapper .tn-pl-jump-link:focus { background: var(--tnp-primary); color: #fff; text-decoration: none; } /* Kein html{scroll-behavior:smooth} mehr. Die Angabe laesst JEDE Scrollbewegung im Dokument weich ablaufen - auch die kleinen, die der Browser selbst ausloest, um ein fokussiertes Feld oder einen markierten Suchvorschlag im Blick zu halten. Beim Tippen im Suchfeld ergab das je Tastendruck eine kurze Bewegung; die Seite kroch sichtbar nach oben. Weich gescrollt wird jetzt nur noch dort, wo es gewollt ist: beim Sprung zu einer Gruppe (scrollIntoView in js/tn-listing.js) und im Gruppen-Schieber. */ /* --------------------------------------------------------------------------- SORTIERUNG UND ARTIKEL PRO SEITE Bootstrap gibt den Knoepfen eckige Ecken, sobald sie in einer .btn-group stehen (border-radius:0 an allen ausser dem ersten und letzten Knopf), und dem Aufklappmenue seinen Standardrahmen. Beides wird hier ersetzt. Die Auswahl heisst im Markup .filter-type-FilterItemSort bzw. .filter-type-FilterItemLimit - darueber ist sie zuverlaessig zu fassen. --------------------------------------------------------------------------- */ #result-wrapper .filter-type-FilterItemSort > .btn, #result-wrapper .filter-type-FilterItemLimit > .btn, #result-wrapper .productlist-page-nav .btn-group > .btn.dropdown-toggle, #result-wrapper .productlist-page-nav .btn-group > .btn.dropdown-toggle:first-child, #result-wrapper .productlist-page-nav .btn-group > .btn.dropdown-toggle:last-child { padding: 9px 18px; border: 0; border-radius: 999px; background: #e8eef4; box-shadow: none; color: var(--tnp-deep); font-size: 13.5px; font-weight: 600; } #result-wrapper .filter-type-FilterItemSort > .btn:hover, #result-wrapper .filter-type-FilterItemLimit > .btn:hover, #result-wrapper .filter-type-FilterItemSort > .btn[aria-expanded="true"], #result-wrapper .filter-type-FilterItemLimit > .btn[aria-expanded="true"] { background: var(--tnp-primary); color: #fff; } /* Das aufgeklappte Menue */ #result-wrapper .filter-type-FilterItemSort .dropdown-menu, #result-wrapper .filter-type-FilterItemLimit .dropdown-menu, #result-wrapper .productlist-page-nav .dropdown-menu { min-width: 220px; padding: 8px; margin-top: 6px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 18px 44px -12px rgba(15, 23, 42, .45); } #result-wrapper .productlist-page-nav .dropdown-item, #result-wrapper .page-nav-filter-item { padding: 9px 12px; border-radius: 9px; color: var(--tnp-deep); font-size: 13.5px; font-weight: 500; text-decoration: none; } #result-wrapper .productlist-page-nav .dropdown-item:hover, #result-wrapper .productlist-page-nav .dropdown-item:focus, #result-wrapper .page-nav-filter-item:hover, #result-wrapper .page-nav-filter-item:focus { background: #e8eef4; color: var(--tnp-deep); } #result-wrapper .productlist-page-nav .dropdown-item.active, #result-wrapper .page-nav-filter-item.active { background: var(--tnp-primary); color: #fff; font-weight: 600; } /* --------------------------------------------------------------------------- KOPFBEREICH: links das Inhaltsverzeichnis, rechts der OPC-Inhalt --------------------------------------------------------------------------- Beide Spalten stehen in einem eigenen Element (.tn-pl-head-grid), das die Vorlage erzeugt - der OPC-Einhaengepunkt liegt INNERHALB der rechten Spalte. Dadurch haengt die Aufteilung nicht mehr davon ab, an welcher Stelle der Shop den OPC-Bereich ausgibt oder ob er gefuellt ist. Zu verschieben bleibt nur noch EIN Element: Das Verzeichnis entsteht im Artikel-Block, also weit unten im Markup, soll aber ueber dem Titel stehen. Dafuer wird #result-wrapper zur Spalte und die Reihenfolge vergeben. Die Regel fuer alle Kinder setzt einen mittleren Rang, damit Elemente, die hier nicht aufgezaehlt sind, ihre urspruengliche Folge behalten. --------------------------------------------------------------------------- */ #result-wrapper { display: flex; flex-direction: column; } #result-wrapper > * { order: 2; } #result-wrapper > .tn-pl-head-grid { order: 0; margin-bottom: 8px; } #result-wrapper > .title { order: 1; /* Der Titel steht zwischen dem Kopfbereich und der Werkzeugleiste. Ohne eigenen Abstand klebte er am Verzeichnis darueber, waehrend darunter reichlich Luft war - er sass dadurch sichtbar zu hoch. Die Werte sind so gewaehlt, dass ober- und unterhalb etwa gleich viel Raum bleibt. */ margin-top: 36px; margin-bottom: 14px; } @media (min-width: 992px) { .tn-pl-head-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 26px; /* stretch statt start: beide Spalten werden so hoch wie die hoehere - das Verzeichnis bekommt damit die Hoehe des Banners. Welche Spalte die Hoehe vorgibt, entscheidet sich von selbst; ist das Verzeichnis laenger, waechst stattdessen die Bannerspalte mit. */ align-items: stretch; } /* Das Verzeichnis als Karte, in derselben Sprache wie die Gruppen. */ #result-wrapper .tn-pl-jump { height: 100%; flex-direction: column; align-items: stretch; /* Die Eintraege stehen mittig in der Karte. Bei einem hohen Banner entstuende sonst unten ein grosser leerer Block. */ justify-content: center; gap: 4px; padding: 14px; margin-bottom: 0; border: 1px solid #d7e1ec; border-radius: 14px; background-image: linear-gradient(180deg, #f8fbfd 0%, #eaf1f8 100%); } #result-wrapper .tn-pl-jump-link { background: transparent; border-radius: 9px; text-align: left; } #result-wrapper .tn-pl-jump-link:hover, #result-wrapper .tn-pl-jump-link:focus { background: var(--tnp-primary); color: #fff; } /* Bilder aus dem OPC fuellen ihre Spalte, ohne sie zu sprengen. */ .tn-pl-head-banner img { max-width: 100%; height: auto; } .tn-pl-head-banner .container { max-width: none; padding: 0; } } /* Unter 992px stehen beide untereinander, das Verzeichnis wieder als Reihe. */ @media (max-width: 991.98px) { .tn-pl-head-banner { margin-bottom: 18px; } } /* --- Ueberschrift des Inhaltsverzeichnisses --- */ #result-wrapper .tn-pl-jump-title { padding: 0 0 10px; margin-bottom: 8px; border-bottom: 1px solid #d7e1ec; color: var(--tnp-primary); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* In der waagerechten Reihe (schmale Fenster) wuerde die Ueberschrift die Pillen auseinanderreissen - dort bleibt sie weg. */ @media (max-width: 991.98px) { #result-wrapper .tn-pl-jump-title { display: none; } } /* --- Gruppenname senkrecht mittig zum Symbol --- Die Ueberschrift hatte eine Zeilenhoehe von 1,22. Ihr Kasten ist dadurch hoeher als die Schrift selbst, und zwar unten mehr als oben - beim Ausrichten an der Mitte sass der Text deshalb sichtbar zu hoch. In der Kopfzeile wird die Zeilenhoehe auf 1 gesetzt, damit der Kasten die Schrift eng umschliesst und die Mitte auch die optische Mitte ist. */ #result-wrapper .tn-pl-group-line .tn-pl-group-title { padding: 0; line-height: 1; } #result-wrapper .tn-pl-group-line { align-items: center; } /* Kein scroll-padding-top und kein scroll-margin-top mehr: Beide haben sich zur Sprungmarke (.tn-pl-anker) addiert, der Sprung landete dadurch weit oberhalb der Gruppe. Der Abstand kommt jetzt aus genau EINER Quelle. */ /* --- Sprungmarke der Gruppen --- Ein leeres Element, das 150px oberhalb der Gruppenkarte sitzt. Der Browser richtet den Sprung daran aus, die Karte erscheint also mit diesem Abstand unterhalb des oberen Randes - weit genug unter der mitlaufenden Kopfleiste. Warum nicht scroll-margin/scroll-padding: Beide rechnen mit dem Layout. Die Kopfleiste traegt sticky-top und legt sich erst NACH dem Sprung ueber den Inhalt; die angesprungene Gruppe verschwand dadurch halb darunter. Ein Element mit eigener Position ist davon unabhaengig. */ #result-wrapper .tn-pl-group { position: relative; } #result-wrapper .tn-pl-anker { position: absolute; /* Kopfleiste rund 72px plus etwas Luft. Einzige Quelle des Abstands. */ top: -95px; left: 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; } /* --- Hinweis auf die Testphase --- Steht unter dem Preis in jeder Karte, die einen Vollversionspreis zeigt. Der Preis nennt die Kaufsumme, der Hinweis nimmt ihr die Endgueltigkeit. */ #result-wrapper .tn-pl-testhinweis { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(22, 163, 74, .12); color: #15803d; font-size: 11.5px; font-weight: 700; line-height: 1.5; } #result-wrapper .tn-pl-testhinweis:before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; } /* Abstand der unteren Werkzeugleiste zur letzten Gruppe. */ #result-wrapper > .row.productlist-page-nav:last-of-type, #result-wrapper > hr.productlist-page-nav-top { margin-top: 10px; } /* --- Preis und Testhinweis immer untereinander --- NOVA setzt .price_wrapper .price auf display:inline-block. Bei kurzen Betraegen (59,00 EUR) blieb daneben Platz, und der Hinweis rutschte in dieselbe Zeile. Als Block belegt der Preis die ganze Breite, der Hinweis steht damit immer darunter - unabhaengig von der Laenge des Betrags. */ #result-wrapper .tn-pl-vollpreis .price.productbox-price { display: block; width: 100%; } #result-wrapper .tn-pl-testhinweis { display: flex; width: fit-content; margin-left: auto; margin-right: auto; } /* --- Auszeichnung "TOP" in der Ecke verankert --- Sie schwebte bisher mit hellem Ring auf dem Bild und wirkte dadurch wie ein Aufkleber. In der Ecke der Karte sitzt sie fest: aussen folgt sie dem Radius der Karte, innen ist sie abgerundet - dieselbe Form, die auch Rabattecken in modernen Shops verwenden. */ #result-wrapper .productbox-ribbon.ribbon, #result-wrapper .productbox.productbox-hover:hover .productbox-ribbon.ribbon, #result-wrapper .tn-pl-item .productbox-ribbon.ribbon, #result-wrapper .tn-pl-item .productbox.productbox-hover:hover .productbox-ribbon.ribbon { top: 0; left: 0; right: auto; padding: 5px 13px 5px 11px; border-radius: 10px 0 12px 0; box-shadow: none; font-size: 10px; letter-spacing: .1em; } /* --------------------------------------------------------------------------- ARTIKELLISTE auf schmalen Fenstern – Nachbesserungen --------------------------------------------------------------------------- */ @media (max-width: 767.98px) { /* Symbol und Gruppenname duerfen umbrechen. Lange Namen wie "Internationalisierung & B2B" passen sonst nicht neben das Symbol und schieben es aus der Mitte. */ #result-wrapper .tn-pl-group-line { flex-wrap: wrap; gap: 10px; } #result-wrapper .tn-pl-group-icon { width: 38px; height: 38px; border-radius: 10px; } #result-wrapper .tn-pl-group-icon svg { width: 17px; height: 17px; } #result-wrapper .tn-pl-group-title { font-size: 19px; text-align: center; } #result-wrapper .tn-pl-group-head { margin-bottom: 16px; } /* Der Abstand zwischen den Gruppen darf kleiner sein - auf dem Telefon zaehlt jede Bildschirmhoehe. */ #result-wrapper .tn-pl-group { margin-top: 22px; margin-bottom: 18px; } } /* Das Verzeichnis als waagerechte Pillenreihe: bei sechs Gruppen wird das auf dem Telefon sonst eine sehr hohe Liste. Waagerecht scrollbar statt umgebrochen - so bleibt der Kopfbereich flach. */ @media (max-width: 991.98px) { #result-wrapper .tn-pl-jump { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; } #result-wrapper .tn-pl-jump::-webkit-scrollbar { display: none; } #result-wrapper .tn-pl-jump-link { flex: 0 0 auto; white-space: nowrap; } } /* --- Weiches Scrollen ausdruecklich abschalten --- Die Regel html{scroll-behavior:smooth} stammt aus einer frueheren Fassung dieser Datei. Sie ist hier zwar entfernt, steckt aber weiterhin im kompilierten Buendel (my-nova.css) - das ist eine Momentaufnahme und wird erst beim naechsten Speichern des Templates neu erzeugt. Ihre Wirkung ist unerwuenscht: Sie laesst JEDE Scrollbewegung im Dokument weich ablaufen, auch die kleinen, die der Browser selbst ausloest, um ein fokussiertes Feld oder einen markierten Suchvorschlag im Blick zu halten. Beim Tippen im Suchfeld ergab das je Tastendruck eine kurze Bewegung - die Seite kroch sichtbar nach oben. Da diese Datei nach dem Buendel geladen wird, genuegt das Ueberschreiben. Weich gescrollt wird weiterhin dort, wo es gewollt ist: beim Sprung zu einer Gruppe (scrollIntoView in js/tn-listing.js) und im Gruppen-Schieber - beides gibt das Verhalten beim Aufruf selbst an und ist davon unabhaengig. */ html { scroll-behavior: auto; } /* --- Zeilenabstand der Artikelliste ohne Aussenabstand --- NOVA erzeugt den Abstand zwischen den Kachelreihen so: #product-list .product-wrapper:not(:last-child){margin-bottom:4rem} Jede Kachel ausser der letzten bekommt also 64px nach unten. Das hat einen sichtbaren Nebeneffekt: Die Hoehe einer Rasterzeile richtet sich nach dem groessten Element EINSCHLIESSLICH seiner Aussenabstaende, und weil Bootstrap die Spalten dehnt, fuellt ausgerechnet die letzte Kachel diese 64px mit eigener Flaeche - sie wirkt dadurch deutlich hoeher als ihre Nachbarn. Der Abstand kommt deshalb aus row-gap der Reihe statt aus Aussenabstaenden der Kacheln. Das Ergebnis sieht gleich aus, betrifft aber alle Kacheln gleichermassen und faellt nicht in die Hoehenrechnung. Gilt fuer JEDE Artikelliste, nicht nur die Gruppenseite. */ #result-wrapper #product-list .product-wrapper, #result-wrapper #product-list .product-wrapper:not(:last-child) { margin-bottom: 0; } #result-wrapper #product-list.product-list { row-gap: 2.6rem; } /* Auf der Gruppenseite sitzt der Abstand in den Gruppenkarten, dort waere ein Zeilenabstand doppelt. */ #result-wrapper #product-list.tn-pl-grouped { row-gap: 0; } /* --- Mehr Kontrast auf gewoehnlichen Kategorieseiten --- Auf der Gruppenseite stehen die Karten auf der getoenten Gruppenflaeche und heben sich dadurch ab. Auf allen anderen Kategorieseiten liegen sie auf reinem Weiss - dort trug die Karte bisher nur einen weichen Schatten und keinen Rahmen. Weiss auf Weiss mit zartem Schatten ist auf hellen Bildschirmen und bei Tageslicht kaum auszumachen. Die Karten IN einer Gruppe behalten ihre eigene Fassung; deren Regel steht weiter oben und ist genauer, gewinnt also. */ #result-wrapper .productbox.productbox-column { border: 1px solid #dbe3ec; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 24px -14px rgba(15, 23, 42, .4); } #result-wrapper .productbox.productbox-hover:hover, #result-wrapper .productbox.productbox-hover:focus-within { border-color: #a9d2ee; box-shadow: 0 4px 10px rgba(15, 23, 42, .07), 0 26px 46px -22px rgba(15, 23, 42, .45); } /* Die Bildflaeche bekommt einen Hauch Ton. Die Produktbilder bringen selbst weisse Raender mit; ohne Unterlage fransen sie in die Karte aus und die Kante wirkt noch unschaerfer. */ #result-wrapper .productbox-image .productbox-images { background: #f7f9fc; }