/* ============================================================================= BMS custom template - Ergaenzungs-CSS ============================================================================= KLASSEN-REGEL (gilt fuer alle bms_*.tpl in diesem Ordner): 1. Primaer werden Bootstrap-Komponenten benutzt, die es in BS4 UND BS5 gibt: card, card-body, card-title, card-text, card-footer, badge, bg-*, btn, btn-*, form-control, form-control-sm, dropdown, dropdown-menu, dropdown-item, table, table-sm, table-hover, table-responsive, spinner-border, h5, small, text-muted, text-center, text-nowrap, d-flex, d-none, h-100, w-100, mt-auto, m*/p* in t/b/x/y-Richtung. -> Farbe, Rand, Radius, Schatten, Typografie kommen damit automatisch aus dem Bootstrap-Build des jeweils aktiven Shop-Templates. JTL-Basis ist NOVA (Bootstrap 4); Childtemplates wie semaf laufen auf Bootstrap 5. Beide liefern diese Klassen. 2. Utilities, die BS4 -> BS5 UMBENANNT wurden, stehen im Markup DOPPELT: font-weight-bold + fw-bold text-left + text-start mr-* + me-* sr-only + visually-hidden Es greift jeweils nur der Name, den das aktive Bootstrap kennt - der Wert kommt trotzdem aus dem Template. Richtungslose Utilities (mt/mb/px/py/m/p) heissen in beiden Versionen gleich und stehen einfach. NICHT benutzt werden Klassen ohne Gegenstueck in der anderen Version, wo es eine neutrale Alternative gibt (z.B. form-select -> nur BS5). 3. Klassen, die es NUR in einem bestimmten Shop-Template gibt (productbox-*, sku-copy, pdp-avail-*, ribbon, availability-row ...), werden bewusst NICHT verwendet: in NOVA existieren sie nicht und liefen dort ins Leere. 4. Dieses File enthaelt ausschliesslich das, was Bootstrap gar nicht anbietet: Grid-Layout, Bild-Seitenverhaeltnis, Zeilenbegrenzung, Badge-Overlay, Flex-Innenaufbau. KEINE Farben, Rahmen, Radien oder Schatten - die kaemen sonst von uns statt vom Shop. ============================================================================= */ /* Diese beiden Werte werden von bms_custom.js aus dem aktiven Template gemessen und auf :root gesetzt - nicht auf #bms_search, weil auch der Schubladen- Hintergrund sie braucht und der am haengt, also kein Nachfahre von #bms_search ist. Die Angaben hier sind nur der Startwert bis zur ersten Messung. --bms-header-offset: Hoehe der Shop-Kopfzeile. Gemessen wird #jtl-nav-wrapper, JTLs Standard-Header (role="banner"), den NOVA und damit jedes abgeleitete Kundentemplate mitbringt, semaf eingeschlossen. Nur wenn ein Template diesen Aufbau nicht hat, sucht das JS ersatzweise nach dem, was oben klebt. Laufend nachgemessen, weil sticky Header beim Scrollen schrumpfen. --bms-content-pad: seitlicher Innenabstand von #content-wrapper, ebenfalls aus dem Template ausgelesen - damit der Suchbereich buendig zum Inhalt steht. */ :root { --bms-header-offset: 0px; --bms-content-pad: 1rem; } #bms_search { --bms-gap: 1rem; /* Filterspalte: Anteil, nicht fixe px - passt sich jeder Containerbreite an. */ --bms-filter-width: 25%; /* Mindestbreite einer Galerie-Kachel - steuert, wie viele Karten pro Zeile passen (Formel siehe .bms-grid). */ --bms-card-min: 200px; box-sizing: border-box; /* Abstand nach oben, wenn BMS den Suchbereich in den Sichtbereich scrollt - sonst verschwindet er unter der Kopfzeile/dem Menue. */ scroll-margin-top: calc(var(--bms-header-offset) + var(--bms-gap)); } #bms_search *, #bms_search *::before, #bms_search *::after { box-sizing: inherit; } /* ============================================================================= BMS-Vorgaben neutralisieren ============================================================================= bms_1440.css (BMS' eigenes CSS, ueber info.xml im Minify-Bundle des Shops) enthaelt rund 60 Regeln mit fest eingetragener Optik - Hintergruende (#fff), Rahmenfarben (#b9d0de, #ccc, #ddd), Schriftgroessen (16px, 90%, .6rem) und sogar die Trefferhervorhebung in hotpink. Solange die stehen, kommt das Design von BMS und nicht vom Shop-Template, egal welche Bootstrap-Klassen im Markup stehen. Hier werden genau diese Festlegungen zurueckgenommen - NICHT durch andere feste Werte ersetzt, sondern auf transparent/inherit/0 gesetzt, damit die darunter liegende Bootstrap-Komponente (.card, .dropdown-menu, .dropdown-item, .btn, .badge, .form-control) des aktiven Templates wieder greift. Unsere Datei wird nach dem Bundle geladen; wo BMS !important benutzt, steht es deshalb auch hier. Die Selektoren sind bewusst so spezifisch wie BMS' eigene. ========================================================================== */ /* Keine Schatten im gesamten Suchbereich. BMS setzt sie an mehreren Stellen fest (#bms_filter, #bms_slot, #bms_suggestContainer); statt sie einzeln zu jagen, gilt die Vorgabe hier flaechendeckend. Betrifft bewusst auch .card und .modal-content des Templates - die Suche soll flach bleiben. */ #bms, #bms *, .bms-filter-modal, .bms-filter-modal * { box-shadow: none !important; } /* Container und Kopfbereich: BMS zwingt Weiss bzw. Halbtransparent-Weiss auf. Ausserdem hat .bms_container keinerlei Innenabstand, und BMS nimmt mobil noch den des Shops weg (@media(max-width:767px){html.bms_started #content-wrapper {padding:0}}) - der Suchbereich klebte dadurch am Rand. Der Abstand wird hier aus derselben Variable gespeist wie alle uebrigen Abstaende. */ #bms .bms_container { background: transparent; /* --bms-content-pad ist der tatsaechliche seitliche Innenabstand von #content-wrapper, ausgelesen von bms_custom.js (captureContentPadding). Damit steht der Suchbereich buendig mit dem uebrigen Seiteninhalt, statt dass wir einen eigenen Wert erfinden. */ padding: var(--bms-content-pad, var(--bms-gap)); } #bms_header { background-color: transparent; } /* Inhaltsspalte: BMS verkleinert sie, sobald der Filter offen ist - .bms_contentContainer{max-width:100%;transition:max-width .3s} #bms_search.bms_filter .bms_contentContainer{max-width:80%} Das gehoert zu BMS' eigenem Layout, wo die Filterschublade ueber den Inhalt faehrt und dieser 20% abgeben muss. Bei uns hat der Filter eine eigene Rasterspalte - die 20% sind also schon reserviert, und die Verkleinerung liesse rechts einen leeren Streifen in genau dieser Breite stehen. Selektor bewusst spezifischer als BMS' eigener (1 ID + 3 Klassen). */ #bms_search.bms_filter .bms-content-col.bms_contentContainer { max-width: 100%; transition: none; } /* Kachel: .bms_article_item{background:#fff} ueberschreibt sonst die .card. */ #bms .bms_article_item { background: transparent; } /* Trefferhervorhebung: BMS faerbt hotpink. Statt einer eigenen Farbe nur relative Hervorhebung - die Farbe bleibt die des umgebenden Textes. */ #bms .bms_article_item em { color: inherit; background: transparent; font-style: normal; font-weight: bolder; } /* Eingabefelder: font-size:16px ueberschreibt .form-control des Templates. (16px verhindert auf iOS das Zoomen beim Fokus - deshalb nicht global zurueckgenommen, sondern nur oberhalb der Mobilbreite, wo es nicht noetig ist.) */ @media (min-width: 768px) { #bms input[type=text], #bms input[type=number], #bms input[type=size] { font-size: inherit; } } /* Vorschlagsliste: traegt jetzt dropdown-menu/dropdown-item (siehe bms_bs4.tpl). BMS' feste Raender, Radien und Hover-Farben muessen dafuer weichen. */ #bms_suggestContainer { background: transparent; border: 0; box-shadow: none; } #bms_suggestContainer.dropdown-menu { /* .dropdown-menu ist ohne .show display:none - BMS steuert die Sichtbarkeit aber ueber bms_hide (display:none !important), das weiterhin gewinnt. */ display: block; } #bms_suggestContainer .bms_suggestItem, #bms_suggestContainer .bms_suggestCategoryItem { border: 0; border-radius: 0; background: transparent; } /* Hover und Tastatur-Auswahl: BMS setzt dafuer #ccc bzw. #efefef, teils mit !important. Beides muss weg - aber ohne Hervorhebung waere die Liste nicht mehr bedienbar. Statt einer eigenen Farbe deshalb eine relative Abdunklung: der Ton kommt dadurch immer aus dem, was das Template gemalt hat. */ #bms_suggestContainer .bms_suggestItem:hover, #bms_suggestContainer .bms_suggestCategoryItem:hover, #bms_suggestContainer .bms_suggestItem.active, #bms_suggestContainer .bms_suggestCategoryItem.active { background-color: color-mix(in srgb, currentColor 10%, transparent) !important; } #bms_suggestCategory { border-bottom: 0; } /* Badge: font-weight:normal !important ueberschreibt .badge des Templates. */ #bms .badge { font-weight: inherit !important; } /* Kleinkram mit festen Groessen/Farben. */ #bms .bms_desc_container { font-size: inherit; } #bms .bms_hitLine { font-size: inherit; } #bms .bms_ppu { font-weight: inherit; font-size: inherit; } #bms .bms_close { font-size: inherit; } #bms #bms_close:hover { color: inherit; } #bms #bms_slot div { border: 0; border-radius: 0; box-shadow: none; } /* ---------- Ergebnis-Grid (Bootstrap hat kein auto-fill-Grid) ---------- Galerie- und Listenansicht teilen sich denselben Container #bms_resultList. bms_1440.js setzt darauf selbst layout-gallery bzw. layout-list (changeView) - diese BMS-eigenen Klassen sind der Umschalter, kein eigener Zustand von uns. */ .bms-grid { display: grid; /* Galerie ist der Standardfall - gilt auch, bevor changeView() das erste Mal lief. Die Spaltenzahl ergibt sich aus auto-fill: Spalten = floor( (Spaltenbreite + Luecke) / (--bms-card-min + Luecke) ) Bei 1066px Inhaltsbreite und 1rem Luecke also: 220px -> 4 Karten, 200px -> 5, 170px -> 6. Ueber die Variable laesst sich die Dichte ohne Eingriff ins Raster aendern. */ grid-template-columns: repeat(auto-fill, minmax(var(--bms-card-min, 200px), 1fr)); gap: var(--bms-gap); width: 100%; } .bms-grid.layout-list { grid-template-columns: 1fr; } .bms-grid-item { display: flex; flex-direction: column; text-decoration: none; color: inherit; height: 100%; } /* ---------- Kachel-Innenaufbau ---------- */ .bms-card-media { position: relative; overflow: hidden; } .bms-card-img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; } .bms-card-body { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 auto; } /* Preis und Knopf sind getrennt: der Preis schliesst den card-body ab, der Knopf sitzt im card-footer. Trennlinie und Innenabstand des Footers kommen damit aus der card-Komponente des Templates. Der Knopf laeuft ueber die volle Breite, wie {button block=true} in productlist/item_box.tpl. */ .bms-card-price { margin-top: auto; padding-top: 0.5rem; } /* Kein Trennstrich zwischen Preis und Knopf - der Footer liefert nur noch Innenabstand, die Linie der card-Komponente wird hier zurueckgenommen. */ .bms-card-footer { border-top: 0; } .bms-card-footer { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; margin-top: auto; } .bms-card-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; width: 100%; } .bms-card-actions > .btn { width: 100%; } /* Warenkorb ODER "zum Angebot" - nicht beides. bms_1440.js markiert die Verfuegbarkeit ueber setAvailabilityStatus() mit status-0/1/2 auf .bms_availability. Die Bedeutung steht in BmsIndex.php (buildAvailability): 0 = rot (Bestand <= Ampel-Rot), 1 = gelb, 2 = gruen. Also: rot -> zum Angebot, sonst -> Warenkorb. :has() ist hier vertretbar - bms_1440.css benutzt es selbst (#bms_toolbar:not(:has(#bms_active_filter:not(.bms_hide)))). Ist die Verfuegbarkeit serverseitig ausgeblendet, greift keine der Regeln und es bleibt beim bisherigen Verhalten (beide Knoepfe). */ .bms_article_item:has(.bms_availability.status-0) .bms_article_toCart { display: none; } .bms_article_item:has(.bms_availability.status-1) .f_bme_article_link, .bms_article_item:has(.bms_availability.status-1) .bms_gotooffer, .bms_article_item:has(.bms_availability.status-2) .f_bme_article_link, .bms_article_item:has(.bms_availability.status-2) .bms_gotooffer { display: none; } .bms-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem; } .bms-variants { display: flex; flex-wrap: wrap; gap: 0.25rem; } /* Badges ueber dem Bild - Bootstrap positioniert .badge nicht von sich aus. */ .bms-badges { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; } .bms-badges-inline { display: flex; flex-wrap: wrap; gap: 0.25rem; } /* Zeilenbegrenzung - in Bootstrap gibt es nur text-truncate (eine Zeile). */ .bms-clamp-2, .bms-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .bms-clamp-2 { -webkit-line-clamp: 2; } .bms-clamp-3 { -webkit-line-clamp: 3; } /* ---------- Listenansicht ---------- Aufbau wie productlist/item_list.tpl: Bild links, rechts Titel, Beschreibung und darunter zwei Spalten (productbox-details mit den Eckdaten, productbox-options mit Preis, Verfuegbarkeit und Knopf). Die Spalten macht das Template mit Bootstrap-Raster (col xl=4); hier ein CSS-Grid, weil das Plugin ohne row/col auskommen soll. */ .bms-list-cols { display: grid; grid-template-columns: 1fr; gap: var(--bms-gap); align-items: start; } @media (min-width: 992px) { .bms-list-cols { grid-template-columns: 1fr minmax(180px, 0.5fr); } } .bms-list-options { display: flex; flex-direction: column; gap: 0.5rem; } .bms-list-details { min-width: 0; } .bms-list-description { margin-bottom: 0.25rem; } /* .productbox setzt im Template flex-direction:column - fuer die Listenzeile brauchen wir Bild neben Text. */ .bms-list-item.productbox { display: block; } /* Eckdaten als Definitionsliste, wie item_details.tpl. Dort erzeugt {col tag='dt' cols=6}/{col tag='dd' cols=6} die zwei Spalten - hier ein Grid. Der Umweg ueber ein div je Paar ist noetig, damit bms_hideEmpty Bezeichnung UND Wert zusammen ausblendet und kein verwaistes dt stehen bleibt. */ .bms-detail-list { margin: 0; } .bms-detail-row { display: grid; grid-template-columns: minmax(0, 6rem) minmax(0, 1fr); gap: 0.25rem 0.5rem; } .bms-detail-row > dt, .bms-detail-row > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } /* ---------- Listenansicht: Grundgeruest ---------- */ .bms-list-item { display: block; text-decoration: none; color: inherit; } .bms-list-inner { display: flex; gap: var(--bms-gap); padding: 0.75rem; } .bms-list-media { flex: 0 0 auto; } .bms-list-img { display: block; width: 96px; height: 96px; object-fit: contain; } .bms-list-body { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 auto; min-width: 0; } .bms-list-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; } /* ---------- Tabellenansicht ---------- */ .bms-table-wrap { width: 100%; } /* ---------- Kopfbereich / Suchleiste ---------- */ .bms-header { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--bms-gap); position: relative; padding: 0.5rem; } .bms-promo-slot { display: block; } .bms-promo-slot-right { order: 2; } .bms-close { position: absolute; top: 0.5rem; right: 0.5rem; cursor: pointer; } .bms-close-mobile { display: none; } .bms-searchbar-area { display: flex; flex-direction: column; gap: 0.5rem; } .bms-searchbar { display: flex; align-items: center; gap: 0.5rem; } .bms-input-area { flex: 1 1 auto; position: relative; min-width: 0; } .bms-btn-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .bms-hit-line-mobile { display: none; } .bms-suggest-row { display: block; } .bms-suggest-item { padding: 0.5rem; } /* ---------- Toolbar ---------- Flaeche kommt ueber die Bootstrap-Utility bg-white im Markup (in BS4 und BS5 vorhanden, Wert = $white des Templates), Abstaende von hier. */ .bms-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 1rem; margin-bottom: 1rem; } .bms-toolbar-buttons { display: flex; align-items: center; gap: 0.5rem; } .bms-active-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; flex: 1 1 auto; } /* Aktive Filter als Badges statt Buttons - Buttons brauchen zu viel Platz. Rechts ein x, damit erkennbar ist, dass ein Klick den Filter entfernt. Farbe/Radius kommen von .badge des Templates. */ .bms-chip { display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer; text-align: left; white-space: normal; } .bms-chip-x { font-size: 1.25em; line-height: 1; opacity: 0.7; } /* BMS zwingt aktiven Filtern auf Touch-Geraeten Button-Hoehe auf: @media(pointer:coarse){.bms_af{min-height:2.5rem;display:inline-flex; align-items:center;justify-content:center}} Deshalb waren die Badges so gross wie Knoepfe. Ein Badge ist kein Bedienelement in Buttongroesse - hier bleibt die Hoehe beim Badge des Templates. */ @media (pointer: coarse) { #bms_active_filter .bms_af { min-height: 0; justify-content: flex-start; } } .bms-chip:hover .bms-chip-x { opacity: 1; } .bms-toolbar-views { margin-left: auto; } .bms-view-group { display: flex; gap: 0.25rem; } .bms-view-group-block { width: 100%; } .bms-view-group-block > * { flex: 1 1 0; } /* ---------- Hauptlayout: Filterspalte + Inhalt ---------- */ /* Spaltenaufteilung steht weiter unten im Abschnitt "Filterspalte" - sie haengt an BMS' eigenem Umschaltpunkt (1232px) und darf hier nicht vorweggenommen werden. Hier nur, was in beiden Zustaenden gilt. */ .bms-layout { display: grid; gap: var(--bms-gap); align-items: start; } .bms-filter-col { grid-column: 1; } .bms-content-col { grid-column: 1; min-width: 0; } .bms-loadmore-row { grid-column: 1 / -1; text-align: right; padding: 0.75rem 0; } /* ---------- Filterpanel ---------- Das Panel selbst ist eine echte .card (siehe bms_bs4.tpl), Optik kommt vom Template. Hier nur Abstand zwischen mehreren Panels und Innen-Layout. */ .bms-filter-col .card + .card { margin-top: var(--bms-gap); } .bms-panel-heading-row { display: flex; align-items: center; justify-content: space-between; } .bms-panel-heading-close { cursor: pointer; display: none; } .bms-panel-body { display: flex; flex-direction: column; gap: 0.5rem; } .bms-filter-hits { text-align: center; padding: 0.5rem 0; } .bms-filter-item { display: block; } .bms-filter-checklabel { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; width: 100%; text-align: left; } .bms-pricerange-row { display: flex; gap: 0.5rem; } .bms-pricerange-col { flex: 1 1 0; } .bms-filter-views-mobile { display: none; } /* ---------- Tom Select ---------- bms_1440.js baut die Mehrfachauswahl-Filter (Hersteller, Warengruppe, Merkmale) mit Tom Select. Dessen Markup (.ts-control/.ts-dropdown/.option) ist kein