`. Those are listed * here, so the underline stays on running text and does not spread to the link lists that only * look like text — the brand index at /marken/, the footer columns, the category tiles. * * Audited on 2026-08-23 across home, category, search, PDP, basket, order history, account, * brand index, blog and every legal/service CMS page; the selectors below are every remaining * place a visible link sat in running text without a decoration. * =================================================================== */ #wrapper { /* Product page: the delivery note under the buy button, the manufacturer-information link under the brand copy, and the same link as the last row of the specification table. */ /* A control that happens to sit inside one of the containers above keeps its own look. */ } #wrapper .kussin-product-delivery-meta a, #wrapper a.kussin-product-manufacturer-info-link, #wrapper .kussin-product-attributes td a, #wrapper a[id^="accOrderLink"], #wrapper a.tabslw-account-link, #wrapper .cmsContent li a, #wrapper .cmsContent span a, #wrapper .dd-shortcode-text li a, #wrapper .dd-shortcode-text span a, #wrapper blockquote a, #wrapper dd a { text-decoration: underline; } #wrapper .kussin-product-delivery-meta a:hover, #wrapper a.kussin-product-manufacturer-info-link:hover, #wrapper .kussin-product-attributes td a:hover, #wrapper a[id^="accOrderLink"]:hover, #wrapper a.tabslw-account-link:hover, #wrapper .cmsContent li a:hover, #wrapper .cmsContent span a:hover, #wrapper .dd-shortcode-text li a:hover, #wrapper .dd-shortcode-text span a:hover, #wrapper blockquote a:hover, #wrapper dd a:hover, #wrapper .kussin-product-delivery-meta a:focus, #wrapper a.kussin-product-manufacturer-info-link:focus, #wrapper .kussin-product-attributes td a:focus, #wrapper a[id^="accOrderLink"]:focus, #wrapper a.tabslw-account-link:focus, #wrapper .cmsContent li a:focus, #wrapper .cmsContent span a:focus, #wrapper .dd-shortcode-text li a:focus, #wrapper .dd-shortcode-text span a:focus, #wrapper blockquote a:focus, #wrapper dd a:focus, #wrapper .kussin-product-delivery-meta a:focus-visible, #wrapper a.kussin-product-manufacturer-info-link:focus-visible, #wrapper .kussin-product-attributes td a:focus-visible, #wrapper a[id^="accOrderLink"]:focus-visible, #wrapper a.tabslw-account-link:focus-visible, #wrapper .cmsContent li a:focus-visible, #wrapper .cmsContent span a:focus-visible, #wrapper .dd-shortcode-text li a:focus-visible, #wrapper .dd-shortcode-text span a:focus-visible, #wrapper blockquote a:focus-visible, #wrapper dd a:focus-visible, #wrapper .kussin-product-delivery-meta a.active, #wrapper a.kussin-product-manufacturer-info-link.active, #wrapper .kussin-product-attributes td a.active, #wrapper a[id^="accOrderLink"].active, #wrapper a.tabslw-account-link.active, #wrapper .cmsContent li a.active, #wrapper .cmsContent span a.active, #wrapper .dd-shortcode-text li a.active, #wrapper .dd-shortcode-text span a.active, #wrapper blockquote a.active, #wrapper dd a.active { text-decoration: underline; } #wrapper .kussin-product-delivery-meta a.btn, #wrapper .cmsContent li a.btn, #wrapper .cmsContent span a.btn, #wrapper .dd-shortcode-text li a.btn, #wrapper .dd-shortcode-text span a.btn, #wrapper blockquote a.btn, #wrapper dd a.btn, #wrapper .kussin-product-delivery-meta a.btn:hover, #wrapper .cmsContent li a.btn:hover, #wrapper .cmsContent span a.btn:hover, #wrapper .dd-shortcode-text li a.btn:hover, #wrapper .dd-shortcode-text span a.btn:hover, #wrapper blockquote a.btn:hover, #wrapper dd a.btn:hover, #wrapper .kussin-product-delivery-meta a.btn:focus, #wrapper .cmsContent li a.btn:focus, #wrapper .cmsContent span a.btn:focus, #wrapper .dd-shortcode-text li a.btn:focus, #wrapper .dd-shortcode-text span a.btn:focus, #wrapper blockquote a.btn:focus, #wrapper dd a.btn:focus, #wrapper .kussin-product-delivery-meta a.btn:focus-visible, #wrapper .cmsContent li a.btn:focus-visible, #wrapper .cmsContent span a.btn:focus-visible, #wrapper .dd-shortcode-text li a.btn:focus-visible, #wrapper .dd-shortcode-text span a.btn:focus-visible, #wrapper blockquote a.btn:focus-visible, #wrapper dd a.btn:focus-visible { text-decoration: none; } /* =================================================================== * #70177 — "Not readable when selected in profile menu". * * The account page's "Wo willst du hin?" menu marks the page you are on with Bootstrap's * `.dropdown-item.active`. The base stylesheet pairs that with a near-black background * (`--bs-dropdown-link-active-bg: var(--wh1-color-black)`) and white text — but the text never * turns white, because `#wrapper a.active { color: var(--wh1-color-primary-dark) }` above is an * id selector and outranks Bootstrap's class rule. The entry therefore renders #09393E on * #0A0A0A: measured contrast 1.2:1, i.e. invisible. (The same tie hides the ticked language in * the language switcher.) * * Production paints the selected entry white on the brand teal * (`.dropdown-menu > .active > a { color: #fff; background-color: #0F555C }` in the live * bundle) — matched here, at a weight that beats the `#wrapper` rule. * =================================================================== */ #wrapper .dropdown-menu .dropdown-item.active, #wrapper .dropdown-menu .dropdown-item.active:hover, #wrapper .dropdown-menu .dropdown-item.active:focus { color: var(--wh1-color-white); background-color: var(--wh1-color-primary); text-decoration: none; } .ff-record-list-item { min-width: 0; } .ff-record-list-item .kussin-factfinder-record-card { height: auto; min-width: 0; max-width: 100%; overflow: hidden; border: var(--wh1-border-width) solid var(--wh1-color-surface-soft); border-radius: var(--wh1-radius-md); } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-image { position: relative; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-image .badges { position: absolute; top: var(--wh1-space-sm); left: var(--wh1-space-sm); z-index: 1; display: flex; flex-direction: column; gap: var(--wh1-space-xs); } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-image .badges .badge { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; color: var(--wh1-color-white); font-size: var(--wh1-font-size-xs); font-weight: 700; line-height: 1; text-align: center; border-radius: 50%; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-image .badges .badge.badge-new { background-color: var(--wh1-color-primary) !important; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-image .badges .badge.badge-sale { background-color: var(--wh1-color-highlight-red) !important; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-brand { color: var(--wh1-color-primary); font-size: 0.875rem; font-weight: 700; letter-spacing: normal; line-height: 20px; text-transform: none; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-brand.text-muted { color: var(--wh1-color-primary) !important; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-title { display: -webkit-box; overflow: hidden; color: var(--wh1-color-primary); font-size: var(--wh1-font-size-xs); font-style: normal; font-weight: 400; line-height: 1.42857143; min-height: 2.85714286em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; margin-bottom: 0; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-reviews { display: flex; align-items: center; min-height: 20px; margin-bottom: 0; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-review-count { line-height: 1.42857143; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-title + .kussin-factfinder-record-price { margin-top: 20px; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-price { font-style: normal; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-price:not(:has(.basePrice))::before { display: block; flex: 0 0 100%; min-height: 20px; content: ''; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-price .basePrice { position: static; flex: 0 0 100%; min-width: 0; min-height: 20px; margin: 0; overflow: hidden; color: var(--wh1-color-muted) !important; font-size: var(--wh1-font-size-xs); line-height: 1.2; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-price .kussin-factfinder-record-current-price, .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-price .oldPrice { color: var(--wh1-color-primary) !important; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-price .oldPrice { line-height: 24px; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-price .oldPrice del { font-size: 0.6875rem; font-weight: 400; line-height: 24px; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-price .kussin-factfinder-record-current-price { font-size: 1.375rem; font-weight: 700; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-price:has(.oldPrice) .kussin-factfinder-record-current-price { color: var(--wh1-color-highlight-red) !important; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-variants { width: 100%; min-width: 0; margin-top: 10px; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-variants ul.sizeselection { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wh1-space-xs); width: 100%; max-width: 100%; box-sizing: border-box; text-align: center; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-variants ul.sizeselection li { margin: 0; color: var(--wh1-color-primary); background: var(--wh1-color-white); border-color: var(--wh1-color-primary); border-radius: var(--wh1-radius-sm); } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-variants ul.sizeselection li.sold-out { color: var(--wh1-color-muted); background: var(--wh1-color-surface-soft); border-color: var(--wh1-color-border-strong); } @media (max-width: 991.98px) { .ff-record-list-item { display: flex; align-self: stretch; } .ff-record-list-item .kussin-factfinder-record-card { display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; height: 100%; /* * APEX absolutely positions product-card prices below lg. FACT * Finder variants follow the price in markup, so keep the price in * normal flow on touch-sized layouts and anchor the purchase * information at the bottom of the stretched card body. The * variant list itself stays hidden at this breakpoint. */ /* * #70241 — no size list on a touch-sized card. * * The chips are a hover affordance. WH1-2023 keeps `.actions` at * `display: none` and reveals it on `:hover`/`:focus-within`, and * below 1200px it hides them outright with `display: none !important` * (build/less/kussin/components/factfinder/ff_record.less), so * production has never shown a size on a phone. * * Our own reveal lives in the `(min-width: 992px) and (hover: hover)` * block of components/factfinder/list.less. Everything this media * query covers fell outside it and kept the element's default, so the * chips sat open permanently — the extra row on every phone card. */ } .ff-record-list-item .kussin-factfinder-record-card .card-body, .ff-record-list-item .kussin-factfinder-record-card .card-body.sale { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; padding-bottom: 0.625rem; } .ff-record-list-item .kussin-factfinder-record-card .card-body > .kussin-factfinder-record-price { position: static; inset: auto; align-items: flex-start; justify-content: flex-start; flex-direction: column; margin-top: auto; margin-bottom: 0.25rem; } .ff-record-list-item .kussin-factfinder-record-card .card-body > .kussin-factfinder-record-price:not(:has(.basePrice))::before { order: 1; flex: 0 0 20px; width: 100%; min-height: 20px; } .ff-record-list-item .kussin-factfinder-record-card .card-body > .kussin-factfinder-record-price:not(:has(.oldPrice))::after { display: block; order: 2; flex: 0 0 30px; content: ''; } .ff-record-list-item .kussin-factfinder-record-card .card-body > .kussin-factfinder-record-price .basePrice { order: 1; flex: 0 0 auto; width: 100%; } .ff-record-list-item .kussin-factfinder-record-card .card-body > .kussin-factfinder-record-price .oldPrice { order: 2; flex: 0 0 30px; min-height: 30px; margin-bottom: 0; text-align: left; } .ff-record-list-item .kussin-factfinder-record-card .card-body > .kussin-factfinder-record-price .kussin-factfinder-record-current-price { order: 3; margin-left: 0; line-height: 1.4; text-align: left; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-reviews { margin-bottom: 10px; } .ff-record-list-item .kussin-factfinder-record-card .kussin-factfinder-record-variants { display: none; } } /* =================================================================== * #70064 — in-category campaign teasers inside the product listing. * * FACT Finder injects product teasers as ordinary records. `is-teaser` identifies that content * type but does not prescribe its grid span: most teasers retain the normal APEX product column, * while explicitly full-width campaigns span the row. * * The rules below are production's own, read out of the inline \3c style> block its OXID 6 theme * emits on the category page (they are NOT in any prod stylesheet file, which is why grepping * the CSS bundle found nothing). New full-width campaign HTML should provide the Kussin-owned * `kussin-factfinder-teaser--full-width` marker. `.slom-slider-neo` remains a compatibility hook * for the existing backend-authored Burton campaign only. * =================================================================== */ .ff-record-list .ff-record-list-item[is-teaser]:has(.kussin-factfinder-teaser--full-width), .ff-record-list .ff-record-list-item[is-teaser]:has(.slom-slider-neo), .ff-record-list .ff-record-list-item[is-teaser]:has(> a > .ff-record-item > .visible-xs > img):has(> a > .ff-record-item > .visible-sm > img):has(> a > .ff-record-item > .visible-md > img):has(> a > .ff-record-item > .visible-lg > img) { /* span the whole grid row instead of one product column */ flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; /* * #70171 (follow-up) — the banner was painted over the size list of the card above it. * * Production stacks the banner's own two halves with `z-index: 100` on the text panel so the * copy sits above the mood photo. Both live in this element, but this element opens no stacking * context of its own, so that 100 does not stay inside the banner — it competes with every * product card in the listing. A hovered card lifts itself to `z-index: 20` * (factfinder/list.less), while the campaign's authored panel could otherwise * escape its banner and compete with adjacent product-card content. * * Opening a stacking context here keeps the 100 where it was meant to apply — between the panel * and the photo — while the banner itself sits at 1 among the cards, below the hovered card's * 20. Nothing about the banner's own appearance changes. */ position: relative; z-index: 1; } /* * #70391 — a full-row campaign must not strand the products behind it. * * FACT Finder places these teasers by record position, not by grid geometry. On a long listing * that lands on a row boundary (Burton puts them after the 12th and the 25th record, both exact * multiples of the four-column row), so the grid stays intact. On a short one it does not: the * FLOW brand page has three products and the campaign at position three, so the row broke after * two cards, the banner took the next row, and the third product sat alone below it with a hole * where its neighbours should have been. * * Sorting the teaser after the products fixes exactly that, and `:nth-last-child(-n+4)` is what * confines it to the case: the teaser only sorts down when fewer records follow it than fill a * row, which is the only time the products behind it cannot close that row themselves. A campaign * placed mid-listing keeps its position, so FACT Finder's placement still decides where a banner * appears in a full catalogue. * * `order` is the right lever because the record list is a wrapping flex row and the markup comes * from FACT Finder's own web component, which the shop does not author. */ .ff-record-list > .ff-record-list-item[is-teaser]:has(.kussin-factfinder-teaser--full-width):nth-last-child(-n+4), .ff-record-list > .ff-record-list-item[is-teaser]:has(.slom-slider-neo):nth-last-child(-n+4), .ff-record-list > .ff-record-list-item[is-teaser]:has(> a > .ff-record-item > .visible-xs > img):has(> a > .ff-record-item > .visible-sm > img):has(> a > .ff-record-item > .visible-md > img):has(> a > .ff-record-item > .visible-lg > img):nth-last-child(-n+4) { order: 1; } .ff-record-list .ff-record-list-item[is-teaser]:has(.kussin-factfinder-teaser--full-width) > a, .ff-record-list .ff-record-list-item[is-teaser]:has(.slom-slider-neo) > a, .ff-record-list .ff-record-list-item[is-teaser]:has(> a > .ff-record-item > .visible-xs > img):has(> a > .ff-record-item > .visible-sm > img):has(> a > .ff-record-item > .visible-md > img):has(> a > .ff-record-item > .visible-lg > img) > a { display: block; height: 100%; text-decoration: none; } /* * The older voucher campaign is another full-row teaser, but it does not use the split-panel * markup above and its anchor has no stable campaign class. FACT Finder supplies four Bootstrap 3 * visibility wrappers instead. APEX/Bootstrap 5 no longer implements `visible-xs` through * `visible-lg`, so every image was displayed and the 250px banner became a 900px stack inside one * product column. The complete four-image structure is the compatibility marker here: it keeps * the rule independent of campaign copy, URLs, and the working `.slom-slider-neo` variant. */ .ff-record-list .ff-record-list-item[is-teaser] > a > .ff-record-item:has(> .visible-xs > img):has(> .visible-sm > img):has(> .visible-md > img):has(> .visible-lg > img) { width: 100%; overflow: hidden; } .ff-record-list .ff-record-list-item[is-teaser] > a > .ff-record-item:has(> .visible-xs > img):has(> .visible-sm > img):has(> .visible-md > img):has(> .visible-lg > img) > .visible-xs, .ff-record-list .ff-record-list-item[is-teaser] > a > .ff-record-item:has(> .visible-xs > img):has(> .visible-sm > img):has(> .visible-md > img):has(> .visible-lg > img) > .visible-sm, .ff-record-list .ff-record-list-item[is-teaser] > a > .ff-record-item:has(> .visible-xs > img):has(> .visible-sm > img):has(> .visible-md > img):has(> .visible-lg > img) > .visible-md, .ff-record-list .ff-record-list-item[is-teaser] > a > .ff-record-item:has(> .visible-xs > img):has(> .visible-sm > img):has(> .visible-md > img):has(> .visible-lg > img) > .visible-lg { display: none; width: 100%; } .ff-record-list .ff-record-list-item[is-teaser] > a > .ff-record-item:has(> .visible-xs > img):has(> .visible-sm > img):has(> .visible-md > img):has(> .visible-lg > img) > .visible-xs > img, .ff-record-list .ff-record-list-item[is-teaser] > a > .ff-record-item:has(> .visible-xs > img):has(> .visible-sm > img):has(> .visible-md > img):has(> .visible-lg > img) > .visible-sm > img, .ff-record-list .ff-record-list-item[is-teaser] > a > .ff-record-item:has(> .visible-xs > img):has(> .visible-sm > img):has(> .visible-md > img):has(> .visible-lg > img) > .visible-md > img, .ff-record-list .ff-record-list-item[is-teaser] > a > .ff-record-item:has(> .visible-xs > img):has(> .visible-sm > img):has(> .visible-md > img):has(> .visible-lg > img) > .visible-lg > img { display: block; width: 100%; height: auto; } @media (max-width: 767.98px) { .ff-record-list .ff-record-list-item[is-teaser] > a > .ff-record-item:has(> .visible-xs > img):has(> .visible-sm > img):has(> .visible-md > img):has(> .visible-lg > img) > .visible-xs { display: block; height: auto; } .ff-record-list .ff-record-list-item[is-teaser] > a > .ff-record-item:has(> .visible-xs > img):has(> .visible-sm > img):has(> .visible-md > img):has(> .visible-lg > img) > .visible-xs > img { width: auto; max-width: 100%; height: auto; margin-inline: auto; } } @media (min-width: 768px) and (max-width: 991.98px) { .ff-record-list .ff-record-list-item[is-teaser] > a > .ff-record-item:has(> .visible-xs > img):has(> .visible-sm > img):has(> .visible-md > img):has(> .visible-lg > img) > .visible-sm { display: block; } } @media (min-width: 992px) and (max-width: 1199.98px) { .ff-record-list .ff-record-list-item[is-teaser] > a > .ff-record-item:has(> .visible-xs > img):has(> .visible-sm > img):has(> .visible-md > img):has(> .visible-lg > img) > .visible-md { display: block; } } @media (min-width: 1200px) { .ff-record-list .ff-record-list-item[is-teaser] > a > .ff-record-item:has(> .visible-xs > img):has(> .visible-sm > img):has(> .visible-md > img):has(> .visible-lg > img) > .visible-lg { display: block; } } .ff-record-list .ff-record-list-item[is-teaser] .slom-slider-neo { position: relative; min-height: 250px; } .ff-record-list .ff-record-list-item[is-teaser] .slom-slider-neo .slider-content { position: absolute; z-index: 100; top: 0; left: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; width: 50%; height: 100%; border-radius: 15px 0 0 15px; } .ff-record-list .ff-record-list-item[is-teaser] .slom-slider-neo .mood-img-big, .ff-record-list .ff-record-list-item[is-teaser] .slom-slider-neo img { position: absolute; right: 5px; top: 0; width: 50%; height: 100%; margin-left: auto; background-position: bottom right; background-size: cover; border-radius: 0 15px 15px 0; -o-object-fit: cover; object-fit: cover; } .ff-record-list .ff-record-list-item[is-teaser] .slom-slider-neo .mood-img-small { display: none; } .ff-record-list .ff-record-list-item[is-teaser] .slom-slider-neo .slider-content-wrapper { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 87%; max-width: 452px; padding-right: 30px; } .ff-record-list .ff-record-list-item[is-teaser] .slom-slider-neo .slider-content-wrapper h2, .ff-record-list .ff-record-list-item[is-teaser] .slom-slider-neo .slider-content-wrapper h3 { margin: 0; /* * The general migrated-CMS safeguard in pages/cms-content.less restores heading inheritance * with `!important`. Production explicitly paints both campaign headings white, so this * narrower teaser rule must carry the same weight to keep the authored panel colour from * becoming the text colour. */ color: var(--wh1-color-white) !important; } .ff-record-list .ff-record-list-item[is-teaser] .slom-slider-neo .slider-content-wrapper h2 { font-size: 36px; font-weight: 700; } .ff-record-list .ff-record-list-item[is-teaser] .slom-slider-neo .slider-content-wrapper h3 { font-size: 18px; } .ff-record-list .ff-record-list-item[is-teaser] .slom-slider-neo .slider-content-wrapper a { margin: 4px 4px 4px 0; padding: 8px 12px; border: 1px solid var(--wh1-color-white); border-radius: 5px; color: var(--wh1-color-white); text-decoration: none; transition: 0.3s; } .ff-record-list .ff-record-list-item[is-teaser] .slom-slider-neo .slider-content-wrapper a:hover { background-color: var(--wh1-color-white); color: var(--wh1-color-primary); } /* Phones: production stacks the photo on top and the panel beneath, and swaps in the portrait-cropped `mood-img-small`. */ @media (max-width: 768px) { .ff-record-list .ff-record-list-item[is-teaser] .slom-slider-neo .slider-content { position: relative; bottom: 0; width: 100%; height: auto; padding: 30px 0; border-radius: 0 0 15px 15px; } .ff-record-list .ff-record-list-item[is-teaser] .slom-slider-neo .slider-content-wrapper { max-width: unset; } .ff-record-list .ff-record-list-item[is-teaser] .slom-slider-neo .mood-img-big { display: none; } .ff-record-list .ff-record-list-item[is-teaser] .slom-slider-neo .mood-img-small { position: relative; right: unset; left: unset; top: unset; display: block; width: 100%; height: 250px; background-position: right bottom; background-size: cover; border-radius: 15px 15px 0 0; } } /* #70400: CMS landing-page campaigns share listing cards, in a wrapping grid. */ .kussin-factfinder-landingpage { display: block; min-width: 0; max-width: 100%; } .kussin-factfinder-landingpage .kussin-factfinder-landingpage-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wh1-space-lg); width: 100%; margin: 0 0 48px; padding: 0; } .kussin-factfinder-landingpage .kussin-factfinder-landingpage-list > .ff-record-list-item { float: none; width: auto; min-width: 0; max-width: 100%; margin: 0; padding: 0; } @media (min-width: 768px) { .kussin-factfinder-landingpage .kussin-factfinder-landingpage-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 992px) { .kussin-factfinder-landingpage .kussin-factfinder-landingpage-list { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* * #70004 — Flash Of Unstyled Content guard for the FACT-Finder web components. * * Every ff-* element is delivered with an `unresolved` attribute and a Mustache body * ({{resultCount}}, {{group.name}}, {{record.Title}}, …). The attribute is only removed once * dist/bundle.js has upgraded the custom element, so until then the browser paints the raw * template source — the "developer text" the ticket is about. * * OXID 6 shipped this guard twice (an inline \3c style>[unresolved]{opacity:0}\3c /style> in the head * from wmdk_jozuercher #43657, plus views/tpl/factfinder/base/ff_js_polymer.tpl). Neither was * carried over when the FACT-Finder templates were migrated to Twig, so OXID 7 had no guard at * all. This rule restores it. It lives in the theme stylesheet, which is a render-blocking * in
, so the guard is in force before the first paint — the flash becomes * impossible rather than merely short. * * opacity (not display/visibility) is deliberate: the elements keep their box, so the page does * not reflow when FACT-Finder resolves them. * * Note this only works because