<div class="utility-nav--with-container">
<div class="utility-nav__row">
<nav class="utility-nav__column">
<h2 class="visually-hidden">Quick navigation</h2>
<ul class="utility-nav__link-list">
<li class="utility-nav__link-list-item">
<a class="utility-nav__link" target="_blank" href="#">
XXX brand
</a>
</li>
<li class="utility-nav__link-list-item">
<a class="utility-nav__link" target="_blank" href="#">
Global Website
</a>
</li>
<li class="utility-nav__link-list-item">
<a class="utility-nav__link" target="_blank" href="#">
Hilfe
</a>
</li>
<li class="utility-nav__link-list-item--toggle">
<span class="utility-nav__title">HP</span>
<div class="utility-nav__toggle">
<div class="toggle">
<label class="toggle__switch--small">
<input class="toggle__input visually-hidden" type="checkbox" id="toggle-utility-nav" name="dealer-mode" value="1">
<span class="toggle__slider--small"></span>
</label>
</div>
</div>
</li>
</ul>
</nav>
<nav class="utility-nav__column">
<h2 class="visually-hidden">Language navigation</h2>
<ul class="utility-nav__link-list">
<li class="utility-nav__link-list-item">
<a class="utility-nav__link" href="/de" hreflang="de" onclick="window.location = this.href + '?currentRoute=' + encodeURIComponent(window.location.pathname + window.location.search); return false;">
Deutsch
</a>
</li>
<li class="utility-nav__link-list-item">
<a class="utility-nav__link" href="/fr" hreflang="fr" onclick="window.location = this.href + '?currentRoute=' + encodeURIComponent(window.location.pathname + window.location.search); return false;">
Français
</a>
</li>
<li class="utility-nav__link-list-item">
<a class="utility-nav__link" href="/it" hreflang="it" onclick="window.location = this.href + '?currentRoute=' + encodeURIComponent(window.location.pathname + window.location.search); return false;">
Italiano
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="header--with-container">
<div class="header__container">
<div class="header__mobile-row--search">
<div class="header__content-container">
<div class="header__mobile-only">
<div class="header__hamburger">
<button class="hamburger hamburger--collapse" type="button" aria-label="Menü öffnen/schliessen" data-off-canvas-toggle>
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
<div class="header__desktop-only">
<a href="#" class="header__logo-link">
<img src="/images/common/logo.svg" alt="Brand" class="header__logo" />
</a>
</div>
<div class="header__search">
<div class="text-field-search-rounded--light">
<div class="text-field-search-rounded__wrapper">
<input class="text-field-search-rounded__input" id="search-term" type="search" name="search-term" autocomplete="on" data-test="Yes" placeholder="Suche nach Name oder Artikelnummer" />
<label class="visually-hidden" for="search-term">Suche nach Name oder Artikelnummer</label>
<button type="reset" class="text-field-search-rounded__reset">
<span class="visually-hidden">Zurücksetzen</span>
</button>
<button type="submit" class="text-field-search-rounded__search">
<span class="visually-hidden">Suchen</span>
</button>
<div class="text-field-search-rounded__loader ">
<div class="loading-spinner -vertical -horizontal">
<div class="loading-spinner__spinner--small"></div>
</div>
</div>
</div>
</div>
</div>
<div class="header__scanner-button">
<script type="text/html" class="modal__placeholder" id="test-modal-placeholder">
<aside class="modal modal--slide" id="test-modal" aria-hidden="true" data-modal>
<div class="modal__overlay" tabindex="-1" data-modal-close data-modal-overlay>
<div class="modal__container--small" role="dialog" aria-modal="true" aria-labelledby="test-modal-title">
<div class="modal__container-inner">
<header class="modal__header">
<h3 class="modal__title" id="test-modal-title">Barcode Scanner</h3>
<div class="modal__close">
<button class="button-icon--icon-regular -icon-close" type="button" name="close" value="close" data-modal-close="">
<span class="visually-hidden">Close modal</span>
</button>
</div>
</header>
<main class="modal__content" id="test-modal-content">
<div id="barcodePickerElement" style="background: lightgrey; width: 100%; height: 80vh; display: flex;">
<div style="border: 2px solid white; width: 100%; margin: 16px;">
<div style="text-align: center; top: 50%;">Scandit barcode placeholder</div>
</div>
</main>
</div>
</div>
</div>
</aside>
</script>
<div class="modal__demo-toggle" data-modal-id="test-modal">
<a href="#" class="button-scanner">
<span class="visually-hidden">Barcode Scanner</span>
</a>
</div>
</div>
</div>
</div>
<div class="header__mobile-row--account-and-cart">
<div class="header__content-container">
<div class="header__mobile-only">
<a href="#" class="header__logo-link">
<img src="/images/common/logo.svg" alt="Brand" class="header__logo" />
</a>
</div>
<div class="header__account-and-cart">
<div class="header__button--account">
<div class="header-account">
<div class="header-account__container">
<a href="#" class="header-account__link"> <span class="header-account__link-title">Mein Konto</span>
</a>
<button type="button" class="header-account__link--button"> <span class="header-account__link-title">Mein Konto</span>
</button>
</div>
<div class="header-account-dropdown-root">
<div class="dropdown">
<button type="button" class="dropdown__toggle" style="max-width: 200px;">999999</button>
<div class="dropdown__content" style="width: 220px; left: auto; right: 0;">
<div class="header-account-dropdown">
<div class="header-account-dropdown__greeting">Hallo,</div>
<div class="header-account-dropdown__active-customer">999999 (Sabine Schreiber)</div>
<a href="#" class="header-account-dropdown__change-customer">Kundennummer wechseln</a>
<div class="header-account-dropdown__link-list">
<a href="#" class="header-account-dropdown__link">Profil</a>
<a href="#" class="header-account-dropdown__link">Bestellungen</a>
<a href="#" class="header-account-dropdown__link">Merklisten</a>
</div>
<a href="#" class="header-account-dropdown__logout">Abmelden</a>
<div class="header-account-dropdown__button">
<a href="#" class="button--primary-small">Zu meinem Konto</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header__button--wishlist">
<div class="header-wishlist">
<div class="header-button">
<div class="header-button__container">
<a href="" class="header-button__link -icon-wishlist">
<span class="visually-hidden">(</span>
<span class="header-button__label">Merkliste</span>
<span class="visually-hidden">)</span>
<span class="header-button__badge">12</span>
</a>
<button type="button" class="header-button__link--button -icon-wishlist">
<span class="visually-hidden">(</span>
<span class="header-button__label">Merkliste</span>
<span class="visually-hidden">)</span>
<span class="header-button__badge">12</span>
</button>
</div>
<div class="header-button-dropdown-root">
<div class="dropdown">
<button type="button" class="dropdown__toggle" style="max-width: 200px;">Hauptliste</button>
<div class="dropdown__content" style="width: 280px; left: auto; right: 0;">
<div class="header-button-dropdown">
<ul class="header-button-dropdown__list">
<li class="header-button-dropdown__list-item--active">
<button type="button" class="header-button-dropdown__name">
Hauptliste
</button>
<div class="header-button-dropdown__active"></div>
</li>
<li class="header-button-dropdown__list-item">
<button type="button" class="header-button-dropdown__name">
Werkstatt
</button>
<div class="header-button-dropdown__active"></div>
</li>
<li class="header-button-dropdown__list-item">
<button type="button" class="header-button-dropdown__name">
Herr Müller
</button>
<div class="header-button-dropdown__active"></div>
</li>
<li class="header-button-dropdown__list-item">
<button type="button" class="header-button-dropdown__name">
Büro
</button>
<div class="header-button-dropdown__active"></div>
</li>
<li class="header-button-dropdown__list-item">
<button type="button" class="header-button-dropdown__name">
Ein sehr langer Merklistentitel für einen Kunden mit einem sehr langen Namen
</button>
<div class="header-button-dropdown__active"></div>
</li>
</ul>
<div class="header-button-dropdown__link-list">
<a href="#" class="header-button-dropdown__link">Merklisten verwalten</a>
</div>
<div class="header-button-dropdown__button">
<a href="#" class="button--primary-small">Zur Merkliste</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header__button--cart">
<div class="header-cart">
<div class="header-button">
<div class="header-button__container">
<a href="" class="header-button__link -icon-cart">
<span class="visually-hidden">(</span>
<span class="header-button__currency">CHF</span>
<span class="header-button__value">2584.60</span>
<span class="visually-hidden">)</span>
<span class="header-button__badge">4</span>
</a>
<button type="button" class="header-button__link--button -icon-cart">
<span class="visually-hidden">(</span>
<span class="header-button__currency">CHF</span>
<span class="header-button__value">2584.60</span>
<span class="visually-hidden">)</span>
<span class="header-button__badge">4</span>
</button>
</div>
<div class="header-button-dropdown-root">
<div class="dropdown">
<button type="button" class="dropdown__toggle" style="max-width: 200px;">Vororder</button>
<div class="dropdown__content" style="width: 280px; left: auto; right: 0;">
<div class="header-button-dropdown">
<ul class="header-button-dropdown__list">
<li class="header-button-dropdown__list-item--active">
<div class="header-button-dropdown__image-container">
<div class="image ">
<picture>
<img src="/example-assets/images/header-cart-dropdown/preorder.svg" class="image__img header-button-dropdown__image is-loading" alt="Vororder" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<button type="button" class="header-button-dropdown__name">
Vororder
</button>
<div class="header-button-dropdown__item-amount">
100
</div>
<div class="header-button-dropdown__active"></div>
</li>
<li class="header-button-dropdown__list-item">
<div class="header-button-dropdown__image-container">
<div class="image ">
<picture>
<img src="/example-assets/images/header-cart-dropdown/dealer.svg" class="image__img header-button-dropdown__image is-loading" alt="Händlerwarenkorb" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<button type="button" class="header-button-dropdown__name">
Händlerwarenkorb
</button>
<div class="header-button-dropdown__item-amount">
3
</div>
<div class="header-button-dropdown__active"></div>
</li>
<li class="header-button-dropdown__list-item">
<div class="header-button-dropdown__image-container">
<div class="image ">
<picture>
<img src="/example-assets/images/header-cart-dropdown/customer.svg" class="image__img header-button-dropdown__image is-loading" alt="Kunde 1" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<button type="button" class="header-button-dropdown__name">
Kunde 1
</button>
<div class="header-button-dropdown__item-amount">
12
</div>
<div class="header-button-dropdown__active"></div>
</li>
<li class="header-button-dropdown__list-item">
<div class="header-button-dropdown__image-container">
<div class="image ">
<picture>
<img src="/example-assets/images/header-cart-dropdown/customer.svg" class="image__img header-button-dropdown__image is-loading" alt="Kunde 2" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<button type="button" class="header-button-dropdown__name">
Kunde 2
</button>
<div class="header-button-dropdown__item-amount">
5
</div>
<div class="header-button-dropdown__active"></div>
</li>
<li class="header-button-dropdown__list-item">
<div class="header-button-dropdown__image-container">
<div class="image ">
<picture>
<img src="/example-assets/images/header-cart-dropdown/customer.svg" class="image__img header-button-dropdown__image is-loading" alt="Kunde 2" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<button type="button" class="header-button-dropdown__name">
KundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKundeKunde
</button>
<div class="header-button-dropdown__item-amount">
9999
</div>
<div class="header-button-dropdown__active"></div>
</li>
</ul>
<div class="header-button-dropdown__link-list">
<a href="#" class="header-button-dropdown__link">Warenkörbe verwalten</a>
</div>
<div class="header-button-dropdown__button">
<a href="#" class="button--primary-small">Zum Warenkorb</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header__background"></div>
</div>
<ccx-instant-search></ccx-instant-search>
<ccx-navigation>
<div class="big-menu-toolbar">
<nav class="big-menu-toolbar__container">
<h2 class="visually-hidden">Menü</h2>
<ul class="big-menu-toolbar__navigation--left">
<li class="big-menu-toolbar__item">
<button type="button" class="big-menu-toolbar__toggle--button">Produkte</button>
<div class="big-menu-dropdown">
<div class="big-menu-dropdown__container">
<div class="big-menu-dropdown__close">
<button class="button-icon--icon-regular -icon-close" type="button" name="close-big-menu" value="yes" data-big-menu-dropdown-close="true">
<span class="visually-hidden">Schliessen</span>
</button>
</div>
<div class="big-menu-dropdown-advanced">
<ul class="big-menu-dropdown-advanced__left-navigation">
<li class="big-menu-dropdown-advanced__left-item">
<button type="button" class="big-menu-dropdown-advanced__left-title" name="big-menu-dropdown-advanced__left-item-button--it&multimedia" id="big-menu-dropdown-advanced__left-item-button--it&multimedia" data-big-menu-dropdown-advanced-title>IT & Multimedia</button>
</li>
<li class="big-menu-dropdown-advanced__left-item">
<button type="button" class="big-menu-dropdown-advanced__left-title" name="big-menu-dropdown-advanced__left-item-button--noitems" id="big-menu-dropdown-advanced__left-item-button--noitems" data-big-menu-dropdown-advanced-title>No Items</button>
</li>
<li class="big-menu-dropdown-advanced__left-item">
<button type="button" class="big-menu-dropdown-advanced__left-title" name="big-menu-dropdown-advanced__left-item-button--nosubcategories" id="big-menu-dropdown-advanced__left-item-button--nosubcategories" data-big-menu-dropdown-advanced-title>No Subcategories</button>
</li>
<li class="big-menu-dropdown-advanced__left-item">
<button type="button" class="big-menu-dropdown-advanced__left-title" name="big-menu-dropdown-advanced__left-item-button--mixedcategories" id="big-menu-dropdown-advanced__left-item-button--mixedcategories" data-big-menu-dropdown-advanced-title>Mixed Categories</button>
</li>
<li class="big-menu-dropdown-advanced__left-item">
<button type="button" class="big-menu-dropdown-advanced__left-title" name="big-menu-dropdown-advanced__left-item-button--büro&papeterie" id="big-menu-dropdown-advanced__left-item-button--büro&papeterie" data-big-menu-dropdown-advanced-title>Büro & Papeterie</button>
</li>
<li class="big-menu-dropdown-advanced__left-item">
<button type="button" class="big-menu-dropdown-advanced__left-title" name="big-menu-dropdown-advanced__left-item-button--bekleidung&ausrüstung" id="big-menu-dropdown-advanced__left-item-button--bekleidung&ausrüstung" data-big-menu-dropdown-advanced-title>Bekleidung & Ausrüstung</button>
</li>
<li class="big-menu-dropdown-advanced__left-item">
<button type="button" class="big-menu-dropdown-advanced__left-title" name="big-menu-dropdown-advanced__left-item-button--schulbedarf&kreatives" id="big-menu-dropdown-advanced__left-item-button--schulbedarf&kreatives" data-big-menu-dropdown-advanced-title>Schulbedarf & Kreatives</button>
</li>
<li class="big-menu-dropdown-advanced__left-item">
<button type="button" class="big-menu-dropdown-advanced__left-title" name="big-menu-dropdown-advanced__left-item-button--arbeitsschutz&hygiene" id="big-menu-dropdown-advanced__left-item-button--arbeitsschutz&hygiene" data-big-menu-dropdown-advanced-title>Arbeitsschutz & Hygiene</button>
</li>
<li class="big-menu-dropdown-advanced__left-item">
<button type="button" class="big-menu-dropdown-advanced__left-title" name="big-menu-dropdown-advanced__left-item-button--verpflegung&gesundheit" id="big-menu-dropdown-advanced__left-item-button--verpflegung&gesundheit" data-big-menu-dropdown-advanced-title>Verpflegung & Gesundheit</button>
</li>
</ul>
<div class="big-menu-dropdown-advanced__right-navigation" data-big-menu-dropdown-advanced-content>
<a href="#" target="_self" class="big-menu-dropdown-advanced__right-link">Alle IT & Multimedia</a>
<ul class="big-menu-dropdown-advanced__right-list" data-big-menu-dropdown-advanced-list>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Geräte</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Diktiersystem</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Notebook</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Smartphone</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Tablet</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Geräte Zubehör</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Batterie & Akku</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link"> Bildschirmfolie</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Notebook Stromversorgung</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Schutzhüllen & Taschen</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Peripherie & Kabel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Audio</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Dockingstation</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Eingabegeräte</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Ergonomie am Bildschirmarbeitsplatz</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Externe Speichermedien</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Kabel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Monitor</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Router</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Tastaturen & Mäuse</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">USB Hubs & Cardreader</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Externe Speichermedien</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Kabel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Monitor</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Router</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Tastaturen & Mäuse</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">USB Hubs & Cardreader</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Büro Kommunikation</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Faxgeräte</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Headset</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">VoIP DECT-Handtelefon</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">VoIP Konferenztelefon</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Webcam</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Drucken & Scannen</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Geräte</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Kopierpapier</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Toner & Tinte</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Geräte</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Diktiersystem</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Notebook</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Smartphone</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Tablet</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Geräte Zubehör</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Batterie & Akku</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link"> Bildschirmfolie</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Notebook Stromversorgung</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Schutzhüllen & Taschen</a>
</li>
</ul>
</div>
<div class="big-menu-dropdown-advanced__right-navigation" data-big-menu-dropdown-advanced-content>
<a href="#" target="_self" class="big-menu-dropdown-advanced__right-link">Alle No Items</a>
</div>
<div class="big-menu-dropdown-advanced__right-navigation" data-big-menu-dropdown-advanced-content>
<a href="#" target="_self" class="big-menu-dropdown-advanced__right-link">Alle No Subcategories</a>
<ul class="big-menu-dropdown-advanced__right-list" data-big-menu-dropdown-advanced-list>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Papeterie</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Büro Arbeitsplatz & Ablage</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Bürogeräte & Zubehör</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Meeting & Konferenzräume</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Präsentations- & Informationshilfen</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Büromöbel & Ausstattung</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Taschen & Rucksäcke</a>
</li>
</ul>
</div>
<div class="big-menu-dropdown-advanced__right-navigation" data-big-menu-dropdown-advanced-content>
<a href="#" target="_self" class="big-menu-dropdown-advanced__right-link">Alle Mixed Categories</a>
<ul class="big-menu-dropdown-advanced__right-list" data-big-menu-dropdown-advanced-list>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Papeterie</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Büro Arbeitsplatz & Ablage</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Büroablagen</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link"> Kleingeräte</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Schreibtisch Accessoire</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Stempel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Bürogeräte & Zubehör</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Meeting & Konferenzräume</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Präsentations- & Informationshilfen</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Büromöbel & Ausstattung</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Taschen & Rucksäcke</a>
</li>
</ul>
</div>
<div class="big-menu-dropdown-advanced__right-navigation" data-big-menu-dropdown-advanced-content>
<a href="#" target="_self" class="big-menu-dropdown-advanced__right-link">Alle Büro & Papeterie</a>
<ul class="big-menu-dropdown-advanced__right-list" data-big-menu-dropdown-advanced-list>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Papeterie</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Agenda & Kalender</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Etiketten</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Formulare & Handelsbücher</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Papier & Papierprodukte</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Schreibwaren & Schreibutensilien</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Büro Arbeitsplatz & Ablage</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Büroablagen</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link"> Kleingeräte</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Schreibtisch Accessoire</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Stempel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Bürogeräte & Zubehör</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Aktenvernichter</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Beschriftungsgeräte & Zubehör</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Bindegeräte & Zubehör</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Laminiergeräte & Zubehör</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Schneidemaschine & Zubehör</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Meeting & Konferenzräume</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Beamer, Visualizer & Projektoren</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Digitales Flipchart</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Whiteboards, Charts & Tafeln</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Präsentations- & Informationshilfen</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Ausweishalter & Namensschilder</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Prospekt- & Werbeständer</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Präsentationszubehör</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Büromöbel & Ausstattung</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Arbeitsplatzmöbel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Beleuchtung</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Bürotisch-Organisation</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Empfangseinrichtung</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Raumklimageräte</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Taschen & Rucksäcke</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Schreibmappe</a>
</li>
</ul>
</div>
<div class="big-menu-dropdown-advanced__right-navigation" data-big-menu-dropdown-advanced-content>
<a href="#" target="_self" class="big-menu-dropdown-advanced__right-link">Alle Bekleidung & Ausrüstung</a>
<ul class="big-menu-dropdown-advanced__right-list" data-big-menu-dropdown-advanced-list>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel Letzte</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
</ul>
</div>
<div class="big-menu-dropdown-advanced__right-navigation" data-big-menu-dropdown-advanced-content>
<a href="#" target="_self" class="big-menu-dropdown-advanced__right-link">Alle Schulbedarf & Kreatives</a>
<ul class="big-menu-dropdown-advanced__right-list" data-big-menu-dropdown-advanced-list>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Schulhefte & Heftblätter</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Heftblätter</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Schulhefte</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Schreiben & Zeichnen</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Farbstifte</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Filzstifte</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Technisches Zeichnen</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Unterrichtsmaterial</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Spiel & Spass</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Werken & Gestalten</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Basteln</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Kreativpapier & Karton</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Malen</a>
</li>
</ul>
</div>
<div class="big-menu-dropdown-advanced__right-navigation" data-big-menu-dropdown-advanced-content>
<a href="#" target="_self" class="big-menu-dropdown-advanced__right-link">Alle Arbeitsschutz & Hygiene</a>
<ul class="big-menu-dropdown-advanced__right-list" data-big-menu-dropdown-advanced-list>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Hygienebedarf</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Besen & Bürsten</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Handdesinfektion & Zubehör</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Hygienetücher-bedarf</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Oberflächendesinfektion</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Reinigungsmittel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Reinigungstücher</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Waschraum Hygienelösung</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Entsorgung</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Körperpflege</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Lufterfrischer & Spender</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Toilettenpapier- & Handtuch-Spender</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Reinigungstücher</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">PSA & Arbeitsschutz</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Handschutz</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Gehörschutz</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Atemschutz</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Augenschutz</a>
</li>
</ul>
</div>
<div class="big-menu-dropdown-advanced__right-navigation" data-big-menu-dropdown-advanced-content>
<a href="#" target="_self" class="big-menu-dropdown-advanced__right-link">Alle Verpflegung & Gesundheit</a>
<ul class="big-menu-dropdown-advanced__right-list" data-big-menu-dropdown-advanced-list>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Getränke</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Alkoholfreie-Getränke</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Alkoholische-Getränke</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Kaffee & Tee</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Milchprodukte</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Lebensmittel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Frische Lebensmittel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Pasta & Mehr</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Salzige Lebensmittel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Süsse Lebensmittel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Kantinen & Küchenausstattung</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Geschirr & Besteck</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Küchengeräte</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Küchenpapier & Dispenser</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Erste Hilfe & medizinische Produkte</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Betriebsapotheke</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Sport & Fitness</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Fitness Kleingeräte</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="big-menu-toolbar__item">
<button type="button" class="big-menu-toolbar__toggle--button">Marken</button>
<div class="big-menu-dropdown">
<div class="big-menu-dropdown__container">
<div class="big-menu-dropdown__close">
<button class="button-icon--icon-regular -icon-close" type="button" name="close-big-menu" value="yes" data-big-menu-dropdown-close="true">
<span class="visually-hidden">Schliessen</span>
</button>
</div>
<a href="#" class="big-menu-dropdown-basic__navigation--link">Alle firstlevel title</a>
<ul class="big-menu-dropdown-basic__navigation">
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke A</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke B</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke C</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke D</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke E</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke F</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke G</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke H</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke I</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke J</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke A</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke B</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke C</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke D</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke E</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke F</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke G</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke H</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke I</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke J</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke A</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke B</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke C</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke D</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke E</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke F</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke G</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke H</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke I</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke J</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke I</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke J</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke H</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke I</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke J</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke I</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke J</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke A</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke B</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke C</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke D</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke E</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke F</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke G</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke H</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke I</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke J</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke I</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke J</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke H</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke I</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke J</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke I</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke J</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke A</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke B</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke C</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke D</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke E</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke F</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke G</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke H</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke I</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke J</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke I</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke J</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke H</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke I</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke J</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke I</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke J</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke A</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke B</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke C</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke D</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke E</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke F</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke G</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke H</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke I</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke J</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke I</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke J</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke H</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke I</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke J</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke I</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke J</a>
</li>
</ul>
</div>
</div>
</li>
<li class="big-menu-toolbar__item">
<a href="#" class="big-menu-toolbar__toggle--link">Service</a>
</li>
</ul>
<ul class="big-menu-toolbar__navigation--right">
<li class="big-menu-toolbar__item">
<a href="#" class="big-menu-toolbar__toggle--link">Shop</a>
</li>
<li class="big-menu-toolbar__item">
<a href="#" class="big-menu-toolbar__toggle--link">Extras</a>
</li>
<li class="big-menu-toolbar__item">
<a href="#" class="big-menu-toolbar__toggle--link">Blog</a>
</li>
<li class="big-menu-toolbar__item">
<button type="button" class="big-menu-toolbar__toggle--button">Über uns</button>
<div class="big-menu-dropdown">
<div class="big-menu-dropdown__container">
<div class="big-menu-dropdown__close">
<button class="button-icon--icon-regular -icon-close" type="button" name="close-big-menu" value="yes" data-big-menu-dropdown-close="true">
<span class="visually-hidden">Schliessen</span>
</button>
</div>
<a href="#" class="big-menu-dropdown-basic__navigation--link">Alle firstlevel title</a>
<ul class="big-menu-dropdown-basic__navigation">
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel Letzte</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>
</li>
</ul>
</div>
</div>
</li>
<li class="big-menu-toolbar__item">
<button type="button" class="big-menu-toolbar__toggle--button">Kundendienst</button>
<div class="big-menu-dropdown">
<div class="big-menu-dropdown__container">
<div class="big-menu-dropdown__close">
<button class="button-icon--icon-regular -icon-close" type="button" name="close-big-menu" value="yes" data-big-menu-dropdown-close="true">
<span class="visually-hidden">Schliessen</span>
</button>
</div>
<a href="#" class="big-menu-dropdown-basic__navigation--link">Alle firstlevel title</a>
<ul class="big-menu-dropdown-basic__navigation">
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Kontakt</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Kundenberater</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Service Center</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">FAQ</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Bestell Rückgabe</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Garantie</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Formulare</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Last Item</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</div>
<div class="off-canvas-menu">
<div class="off-canvas-menu__overlay" data-off-canvas-overlay></div>
<div class="off-canvas-menu__off-canvas" data-off-canvas data-off-canvas-title="Menü">
<div class="off-canvas-menu__utility-nav">
<div class="off-canvas-menu__utility-nav-toggle-title">HP</div>
<div class="toggle">
<label class="toggle__switch--large">
<input class="toggle__input visually-hidden" type="checkbox" id="toggle-off-canvas" name="dealer-mode" value="1">
<span class="toggle__slider--large"></span>
</label>
</div>
</div>
<nav class="mm off-canvas-menu__nav is-offset" data-off-canvas-menu>
<h2 class="visually-hidden">Menü</h2>
<ul class="off-canvas-menu__list">
<li class="off-canvas-menu__list-item">
<span class="off-canvas-menu__list-item-title">Produkte</span>
<ul class="off-canvas-menu__list">
<li class="off-canvas-menu__list-item">
<span class="off-canvas-menu__list-item-title">Bekleidung & Ausrüstung</span>
<ul class="off-canvas-menu__list">
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Bekleidung & Ausrüstung </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Bekleidung </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Brillen </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Freizeitschuhe </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Helme </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Körperpflege </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Rucksäcke </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Textilpflege </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Veloschuhe </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Bekleidung </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Brillen </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Freizeitschuhe </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Helme </a>
</li>
</ul>
</li>
<li class="off-canvas-menu__list-item">
<span class="off-canvas-menu__list-item-title">Bekleidung & Ausrüstung</span>
<ul class="off-canvas-menu__list">
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Bekleidung & Ausrüstung </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Helme </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Körperpflege </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Rucksäcke </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Textilpflege </a>
</li>
</ul>
</li>
<li class="off-canvas-menu__list-item">
<span class="off-canvas-menu__list-item-title">Bekleidung & Ausrüstung</span>
<ul class="off-canvas-menu__list">
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Bekleidung & Ausrüstung </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Bekleidung </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Brillen </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Freizeitschuhe </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Helme </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Körperpflege </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Rucksäcke </a>
</li>
</ul>
</li>
<li class="off-canvas-menu__list-item">
<span class="off-canvas-menu__list-item-title">Bekleidung & Ausrüstung</span>
<ul class="off-canvas-menu__list">
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Bekleidung & Ausrüstung </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Bekleidung </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Brillen </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Freizeitschuhe </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Helme </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Körperpflege </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Rucksäcke </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Textilpflege </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Veloschuhe </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Bekleidung </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Brillen </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Freizeitschuhe </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Helme </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Körperpflege </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Rucksäcke </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Textilpflege </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Veloschuhe </a>
</li>
</ul>
</li>
</ul>
</li>
<li class="off-canvas-menu__list-item">
<span class="off-canvas-menu__list-item-title">Marken</span>
<ul class="off-canvas-menu__list">
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Alle Marken </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Marke A </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Marke B </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Marke C </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Marke D </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Marke E </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Marke F </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Marke G </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Marke H </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Marke I </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Marke J </a>
</li>
</ul>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Service </a>
</li>
<li class="off-canvas-menu__list-item is-special">
<a class="off-canvas-menu__list-item-title" href="#">
Aktionen </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
shop </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Extras </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Blog </a>
</li>
<li class="off-canvas-menu__list-item">
<span class="off-canvas-menu__list-item-title">Über uns</span>
<ul class="off-canvas-menu__list">
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Über uns </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Geschäftsleitung </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Kundenberater </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Service Center </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Category Management </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Marketing & Communication </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
E-Business </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Einkauf </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Administration </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Distribution </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Lager </a>
</li>
</ul>
</li>
<li class="off-canvas-menu__list-item">
<span class="off-canvas-menu__list-item-title">Kundendienst</span>
<ul class="off-canvas-menu__list">
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Kundendienst </a>
</li>
<li class="off-canvas-menu__list-item">
<span class="off-canvas-menu__list-item-title">Kontakt</span>
<ul class="off-canvas-menu__list">
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Kontakt </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Kundenberater </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Service Center </a>
</li>
</ul>
</li>
<li class="off-canvas-menu__list-item">
<span class="off-canvas-menu__list-item-title">FAQ</span>
<ul class="off-canvas-menu__list">
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
FAQ </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Bestell Rückgabe </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Garantie </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Formulare </a>
</li>
<li class="off-canvas-menu__list-item">
<a class="off-canvas-menu__list-item-title" href="#">
Hotline </a>
</li>
</ul>
</li>
</ul>
</li>
<li class="off-canvas-menu__list-item small no-divider">
<a class="off-canvas-menu__list-item-title" href="/fr" hreflang="fr" onclick="window.location = this.href + '?currentRoute=' + encodeURIComponent(window.location.pathname + window.location.search); return false;">
Francais </a>
</li>
<li class="off-canvas-menu__list-item small no-divider">
<a class="off-canvas-menu__list-item-title" href="/it" hreflang="it" onclick="window.location = this.href + '?currentRoute=' + encodeURIComponent(window.location.pathname + window.location.search); return false;">
Italiano </a>
</li>
</ul>
</nav>
</div>
</div>
</ccx-navigation>
<div class="page-container">
<ccx-global-messages></ccx-global-messages>
<ccx-breadcrumb>
<nav class="breadcrumb">
<div class="breadcrumb__container">
<ol class="breadcrumb__list">
<li class="breadcrumb__list-item">
<a class="breadcrumb__link" href="#">Home</a>
</li>
<li class="breadcrumb__list-item">
<a class="breadcrumb__link" href="#">Kategorie Anton</a>
</li>
<li class="breadcrumb__list-item">
<a class="breadcrumb__link" href="#">Kategorie Bertha</a>
</li>
<li class="breadcrumb__list-item">
<a class="breadcrumb__link" href="#">Kategorie Conrad</a>
</li>
<li class="breadcrumb__list-item">
<div class="breadcrumb__content">Kategorie Doris</div>
</li>
<li class="breadcrumb__list-item">
<a class="breadcrumb__link" href="#">Kategorie Erik</a>
</li>
<li class="breadcrumb__list-item">
<a class="breadcrumb__link--active" href="#">Kategorie Fjord</a>
</li>
</ol>
</div>
</nav>
</ccx-breadcrumb>
<main id="main-content" class="page-container__content">
<h2 class="page-container__title visually-hidden" tabindex="-1">Main content</h2>
<section class="listing" data-filter-list-off-canvas-id="listing-1001447116">
<header class="listing__intro">
<div class="bricks" data-below-breadcrumb="true">
<div class="multi-column-text-image ">
<div class="multi-column-text-image__container">
<ul class="multi-column-text-image__list--1">
<li class="multi-column-text-image__list-item">
<div class="text-image--left-aligned ">
<div class="text-image__container">
<div class="text-image__bottom-content">
<h4 class="text-image__title">Lorem, IPSUM dolor</h4>
<div class="text-image__content">
<div class="wysiwyg-content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum</p>
</div>
</div>
<div class="text-image__button">
<a href="#" class="button--primary-small">Mehr erfahren</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</header>
<div class="listing__container">
<div class="listing__row">
<div class="listing__column--content">
<div class="listing__header">
<div class="listing__title-container">
<h3 class="listing__title">Koleston</h3>
<p class="listing__subtitle">(130 Resultate)</p>
</div>
<div class="listing__settings">
<div class="filter-settings">
<form action="/" method="get" class="filter-settings__container">
<div class="filter-settings__sort-by">
<div class="select--light is-initialized is-filled-in with-label">
<div class="select__wrapper">
<select class="select__select" id="sort-by" name="sort-by" required>
<option value="" disabled>Please choose</option>
<option value="bestAsc">Beste Ergebnisse</option>
<option value="priceAsc">Preis aufsteigend</option>
<option value="priceDesc" selected="selected">Preis absteigend</option>
</select>
<label class="select__label" for="sort-by">Sort by
*
</label>
</div>
</div>
</div>
<div class="filter-settings__items-per-page">
<div class="select--light is-initialized is-filled-in with-label">
<div class="select__wrapper">
<select class="select__select" id="items-per-page" name="items-per-page" required>
<option value="" disabled>Please choose</option>
<option value="30">30</option>
<option value="60" selected="selected">60</option>
<option value="120">120</option>
</select>
<label class="select__label" for="items-per-page">Items per page
*
</label>
</div>
</div>
</div>
</form>
<div class="filter-settings__filters" data-filter-list-off-canvas-open>
<button class="button--primary-small" type="button">Filters</button>
</div>
</div>
</div>
</div>
<div class="listing__active-filters">
<div class="filter-pills">
<div class="filter-pills__title">Aktive Filter:</div>
<ul class="filter-pills__list">
<li class="filter-pills__list-item">
<button type="button" class="filter-pills__button">
<span class="filter-pills__button-reset"><span class="visually-hidden">Zurücksetzen</span></span>
<span class="filter-pills__button-value">Blau</span>
</button>
</li>
<li class="filter-pills__list-item">
<button type="button" class="filter-pills__button">
<span class="filter-pills__button-reset"><span class="visually-hidden">Zurücksetzen</span></span>
<span class="filter-pills__button-value">Bestseller</span>
</button>
</li>
</ul>
<button type="button" class="filter-pills__reset-button">Alle Filter zurücksetzen</button>
</div>
</div>
<div class="listing__content">
<div class="list-tiles">
<ul class="list-tiles__list">
<li class="list-tiles__list-item">
<article class="tile" data-location="/some-location/">
<div class="tile__row">
<div class="tile__column">
<h3 class="tile__title">
<a href="/some-location/" class="tile__link" title="Test Product">Test Product</a>
</h3>
<div class="tile__attributes">
<div class="attributes--small">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Artikelnr.</div>
<div class="attributes__value " title="8547625">
8547625
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Kategorie</div>
<div class="attributes__value has-single-line-ellipsis" title="Testkategorie">
<a class="attributes__attribute-link" href="#" title="Testkategorie">Testkategorie</a>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Grösse</div>
<div class="attributes__value " title="XXL">
XXL
</div>
</li>
</ul>
</div>
</div>
<div class="tile__price-actions-container">
<div class="tile__price">
<div class="price--regular">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current--wrap">
<div class="price-regular__current-price-inner">
<div class="price-regular__current-prefix">ab</div>
<div class="price-regular__current-currency">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value">9.90</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile__actions-container">
<form class="wishlist-cart-actions">
<div class="wishlist-cart-actions__button-add-to-cart-wrapper">
<button class="button--primary" name="add-to-cart-submit" type="submit"> <span class="wishlist-cart-actions__button">
<span class="visually-hidden"></span>
<span class="wishlist-cart-actions__button-icon"></span>
</span>
</button>
</div>
<div class="wishlist-cart-actions__button-add-to-wishlist-wrapper">
<button type="submit" name="add-to-wishlist-submit" class="wishlist-cart-actions__button-add-to-wishlist" data-add-to-wishlist>
<span class="visually-hidden"></span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="tile__column">
<a href="/some-location/" class="tile__link">
<div class="image ">
<picture>
<img src="/example-assets/images/tile/product.png" class="image__img tile__image is-loading" alt="Test Product" srcset="/example-assets/images/tile/product.png 1x, /example-assets/images/tile/product@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="tile__logo">
<div class="logos">
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img logos__brand--medium is-loading" alt="alt" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
<div class="tile__specials">
<div class="specials">
<div class="specials--medium-vertically ">
<button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
<span class="visually-hidden">New</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
<button type="button" class="specials__toggle" data-info-tooltip-content="Kauftipp" style="background-color: #44a0d9;">
<span class="visually-hidden">Kauftipp</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/tip.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</div>
</div>
</div>
<div class="tile__stock">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar ab Juli 2020">
<span class="visually-hidden">Verfügbar ab Juli 2020</span>
</button>
</div>
</div>
</div>
</div>
</article>
</li>
<li class="list-tiles__list-item">
<article class="tile" data-location="/some-location/">
<div class="tile__row">
<div class="tile__column">
<h3 class="tile__title">
<a href="/some-location/" class="tile__link" title="Test Product">Test Product</a>
</h3>
<div class="tile__attributes">
<div class="attributes--small">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Artikelnr.</div>
<div class="attributes__value " title="8547625">
8547625
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Kategorie</div>
<div class="attributes__value has-single-line-ellipsis" title="Testkategorie">
<a class="attributes__attribute-link" href="#" title="Testkategorie">Testkategorie</a>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Grösse</div>
<div class="attributes__value " title="XXL">
XXL
</div>
</li>
</ul>
</div>
</div>
<div class="tile__price-actions-container">
<div class="tile__price">
<div class="price--regular">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current--wrap">
<div class="price-regular__current-price-inner">
<div class="price-regular__current-prefix--offer">ab</div>
<div class="price-regular__current-currency--offer">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value--offer">9.90</div>
</div>
</div>
<div class="price-regular__list-price">
<div class="price-regular__list-price-prefix">
<del>statt</del>
</div>
<div class="price-regular__list-price-inner">
<div class="price-regular__list-price-currency">
<del>CHF</del>
</div>
<div class="price-regular__list-price-value">
<del>15.90</del>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile__actions-container">
<form class="wishlist-cart-actions">
<div class="wishlist-cart-actions__button-add-to-cart-wrapper">
<button class="button--primary" name="add-to-cart-submit" type="submit"> <span class="wishlist-cart-actions__button">
<span class="visually-hidden"></span>
<span class="wishlist-cart-actions__button-icon"></span>
</span>
</button>
</div>
<div class="wishlist-cart-actions__button-add-to-wishlist-wrapper">
<button type="submit" name="add-to-wishlist-submit" class="wishlist-cart-actions__button-add-to-wishlist" data-add-to-wishlist>
<span class="visually-hidden"></span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="tile__column">
<a href="/some-location/" class="tile__link">
<div class="image ">
<picture>
<img src="/example-assets/images/tile/product.png" class="image__img tile__image is-loading" alt="Test Product" srcset="/example-assets/images/tile/product.png 1x, /example-assets/images/tile/product@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="tile__logo">
<div class="logos">
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img logos__brand--medium is-loading" alt="alt" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
<div class="tile__specials">
<div class="specials">
<div class="specials--medium-vertically ">
<button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
<span class="visually-hidden">New</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
<button type="button" class="specials__toggle" data-info-tooltip-content="Kauftipp" style="background-color: #44a0d9;">
<span class="visually-hidden">Kauftipp</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/tip.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</div>
</div>
</div>
<div class="tile__stock">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar ab Juli 2020">
<span class="visually-hidden">Verfügbar ab Juli 2020</span>
</button>
</div>
</div>
</div>
</div>
</article>
</li>
<li class="list-tiles__list-item">
<article class="tile" data-location="/some-location/">
<div class="tile__row">
<div class="tile__column">
<h3 class="tile__title">
<a href="/some-location/" class="tile__link" title="Test Product">Test Product</a>
</h3>
<div class="tile__attributes">
<div class="attributes--small">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Artikelnr.</div>
<div class="attributes__value " title="8547625">
8547625
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Kategorie</div>
<div class="attributes__value has-single-line-ellipsis" title="Testkategorie">
<a class="attributes__attribute-link" href="#" title="Testkategorie">Testkategorie</a>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Grösse</div>
<div class="attributes__value " title="XXL">
XXL
</div>
</li>
</ul>
</div>
</div>
<div class="tile__price-actions-container">
<div class="tile__price">
<div class="price--regular">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current--wrap">
<div class="price-regular__current-price-inner">
<div class="price-regular__current-prefix">ab</div>
<div class="price-regular__current-currency">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value">9.90</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile__actions-container">
<form class="wishlist-cart-actions">
<div class="wishlist-cart-actions__button-add-to-cart-wrapper">
<button class="button--primary" name="add-to-cart-submit" type="submit"> <span class="wishlist-cart-actions__button">
<span class="visually-hidden"></span>
<span class="wishlist-cart-actions__button-icon"></span>
</span>
</button>
</div>
<div class="wishlist-cart-actions__button-add-to-wishlist-wrapper">
<button type="submit" name="add-to-wishlist-submit" class="wishlist-cart-actions__button-add-to-wishlist" data-add-to-wishlist>
<span class="visually-hidden"></span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="tile__column">
<a href="/some-location/" class="tile__link">
<div class="image ">
<picture>
<img src="/example-assets/images/tile/product.png" class="image__img tile__image is-loading" alt="Test Product" srcset="/example-assets/images/tile/product.png 1x, /example-assets/images/tile/product@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="tile__logo">
<div class="logos">
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img logos__brand--medium is-loading" alt="alt" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
<div class="tile__specials">
<div class="specials">
<div class="specials--medium-vertically ">
<button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
<span class="visually-hidden">New</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
<button type="button" class="specials__toggle" data-info-tooltip-content="Kauftipp" style="background-color: #44a0d9;">
<span class="visually-hidden">Kauftipp</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/tip.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</div>
</div>
</div>
<div class="tile__stock">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar ab Juli 2020">
<span class="visually-hidden">Verfügbar ab Juli 2020</span>
</button>
</div>
</div>
</div>
</div>
</article>
</li>
<li class="list-tiles__list-item">
<article class="tile" data-location="/some-location/">
<div class="tile__row">
<div class="tile__column">
<h3 class="tile__title">
<a href="/some-location/" class="tile__link" title="Test Product">Test Product</a>
</h3>
<div class="tile__attributes">
<div class="attributes--small">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Artikelnr.</div>
<div class="attributes__value " title="8547625">
8547625
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Kategorie</div>
<div class="attributes__value has-single-line-ellipsis" title="Testkategorie">
<a class="attributes__attribute-link" href="#" title="Testkategorie">Testkategorie</a>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Grösse</div>
<div class="attributes__value " title="XXL">
XXL
</div>
</li>
</ul>
</div>
</div>
<div class="tile__price-actions-container">
<div class="tile__price">
<div class="price--regular">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current--wrap">
<div class="price-regular__current-price-inner">
<div class="price-regular__current-prefix--offer">ab</div>
<div class="price-regular__current-currency--offer">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value--offer">9.90</div>
</div>
</div>
<div class="price-regular__list-price">
<div class="price-regular__list-price-prefix">
<del>statt</del>
</div>
<div class="price-regular__list-price-inner">
<div class="price-regular__list-price-currency">
<del>CHF</del>
</div>
<div class="price-regular__list-price-value">
<del>15.90</del>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile__actions-container">
<form class="wishlist-cart-actions">
<div class="wishlist-cart-actions__button-add-to-cart-wrapper">
<button class="button--primary" name="add-to-cart-submit" type="submit"> <span class="wishlist-cart-actions__button">
<span class="visually-hidden"></span>
<span class="wishlist-cart-actions__button-icon"></span>
</span>
</button>
</div>
<div class="wishlist-cart-actions__button-add-to-wishlist-wrapper">
<button type="submit" name="add-to-wishlist-submit" class="wishlist-cart-actions__button-add-to-wishlist" data-add-to-wishlist>
<span class="visually-hidden"></span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="tile__column">
<a href="/some-location/" class="tile__link">
<div class="image ">
<picture>
<img src="/example-assets/images/tile/product.png" class="image__img tile__image is-loading" alt="Test Product" srcset="/example-assets/images/tile/product.png 1x, /example-assets/images/tile/product@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="tile__logo">
<div class="logos">
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img logos__brand--medium is-loading" alt="alt" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
</div>
</article>
</li>
<li class="list-tiles__list-item">
<article class="tile" data-location="/some-location/">
<div class="tile__row">
<div class="tile__column">
<h3 class="tile__title">
<a href="/some-location/" class="tile__link" title="Test Product">Test Product</a>
</h3>
<div class="tile__attributes">
<div class="attributes--small">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Artikelnr.</div>
<div class="attributes__value " title="8547625">
8547625
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Kategorie</div>
<div class="attributes__value has-single-line-ellipsis" title="Testkategorie">
<a class="attributes__attribute-link" href="#" title="Testkategorie">Testkategorie</a>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Grösse</div>
<div class="attributes__value " title="XXL">
XXL
</div>
</li>
</ul>
</div>
</div>
<div class="tile__price-actions-container">
<div class="tile__price">
<div class="price--regular">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current--wrap">
<div class="price-regular__current-price-inner">
<div class="price-regular__current-prefix--offer">ab</div>
<div class="price-regular__current-currency--offer">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value--offer">9.90</div>
</div>
</div>
<div class="price-regular__list-price">
<div class="price-regular__list-price-prefix">
<del>statt</del>
</div>
<div class="price-regular__list-price-inner">
<div class="price-regular__list-price-currency">
<del>CHF</del>
</div>
<div class="price-regular__list-price-value">
<del>15.90</del>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile__actions-container">
<form class="wishlist-cart-actions">
<div class="wishlist-cart-actions__button-add-to-cart-wrapper">
<button class="button--primary" name="add-to-cart-submit" type="submit"> <span class="wishlist-cart-actions__button">
<span class="visually-hidden"></span>
<span class="wishlist-cart-actions__button-icon"></span>
</span>
</button>
</div>
<div class="wishlist-cart-actions__button-add-to-wishlist-wrapper">
<button type="submit" name="add-to-wishlist-submit" class="wishlist-cart-actions__button-add-to-wishlist" data-add-to-wishlist>
<span class="visually-hidden"></span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="tile__column">
<a href="/some-location/" class="tile__link">
<div class="image ">
<picture>
<img src="/example-assets/images/tile/product.png" class="image__img tile__image is-loading" alt="Test Product" srcset="/example-assets/images/tile/product.png 1x, /example-assets/images/tile/product@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="tile__logo">
<div class="logos">
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img logos__brand--medium is-loading" alt="alt" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
<div class="tile__specials">
<div class="specials">
<div class="specials--medium-vertically ">
<button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
<span class="visually-hidden">New</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
<button type="button" class="specials__toggle" data-info-tooltip-content="Kauftipp" style="background-color: #44a0d9;">
<span class="visually-hidden">Kauftipp</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/tip.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</div>
</div>
</div>
<div class="tile__stock">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar ab Juli 2020">
<span class="visually-hidden">Verfügbar ab Juli 2020</span>
</button>
</div>
</div>
</div>
</div>
</article>
</li>
<li class="list-tiles__list-item">
<article class="tile" data-location="/some-location/">
<div class="tile__row">
<div class="tile__column">
<h3 class="tile__title">
<a href="/some-location/" class="tile__link" title="Test Product">Test Product</a>
</h3>
<div class="tile__attributes">
<div class="attributes--small">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Artikelnr.</div>
<div class="attributes__value " title="8547625">
8547625
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Kategorie</div>
<div class="attributes__value has-single-line-ellipsis" title="Testkategorie">
<a class="attributes__attribute-link" href="#" title="Testkategorie">Testkategorie</a>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Grösse</div>
<div class="attributes__value " title="XXL">
XXL
</div>
</li>
</ul>
</div>
</div>
<div class="tile__price-actions-container">
<div class="tile__price">
<div class="price--regular">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current--wrap">
<div class="price-regular__current-price-inner">
<div class="price-regular__current-prefix">ab</div>
<div class="price-regular__current-currency">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value">9.90</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile__actions-container">
<form class="wishlist-cart-actions">
<div class="wishlist-cart-actions__button-add-to-cart-wrapper">
<button class="button--primary" name="add-to-cart-submit" type="submit"> <span class="wishlist-cart-actions__button">
<span class="visually-hidden"></span>
<span class="wishlist-cart-actions__button-icon"></span>
</span>
</button>
</div>
<div class="wishlist-cart-actions__button-add-to-wishlist-wrapper">
<button type="submit" name="add-to-wishlist-submit" class="wishlist-cart-actions__button-add-to-wishlist" data-add-to-wishlist>
<span class="visually-hidden"></span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="tile__column">
<a href="/some-location/" class="tile__link">
<div class="image ">
<picture>
<img src="/example-assets/images/tile/product.png" class="image__img tile__image is-loading" alt="Test Product" srcset="/example-assets/images/tile/product.png 1x, /example-assets/images/tile/product@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="tile__logo">
<div class="logos">
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img logos__brand--medium is-loading" alt="alt" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
<div class="tile__specials">
<div class="specials">
<div class="specials--medium-vertically ">
<button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
<span class="visually-hidden">New</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</div>
</div>
</div>
<div class="tile__stock">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar ab Juli 2020">
<span class="visually-hidden">Verfügbar ab Juli 2020</span>
</button>
</div>
</div>
</div>
</div>
</article>
</li>
<li class="list-tiles__list-item">
<article class="tile" data-location="/some-location/">
<div class="tile__row">
<div class="tile__column">
<h3 class="tile__title">
<a href="/some-location/" class="tile__link" title="Test Product">Test Product</a>
</h3>
<div class="tile__attributes">
<div class="attributes--small">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Artikelnr.</div>
<div class="attributes__value " title="8547625">
8547625
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Kategorie</div>
<div class="attributes__value has-single-line-ellipsis" title="Testkategorie">
<a class="attributes__attribute-link" href="#" title="Testkategorie">Testkategorie</a>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Grösse</div>
<div class="attributes__value " title="XXL">
XXL
</div>
</li>
</ul>
</div>
</div>
<div class="tile__price-actions-container">
<div class="tile__price">
<div class="price--regular">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current--wrap">
<div class="price-regular__current-price-inner">
<div class="price-regular__current-prefix--offer">ab</div>
<div class="price-regular__current-currency--offer">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value--offer">9.90</div>
</div>
</div>
<div class="price-regular__list-price">
<div class="price-regular__list-price-prefix">
<del>statt</del>
</div>
<div class="price-regular__list-price-inner">
<div class="price-regular__list-price-currency">
<del>CHF</del>
</div>
<div class="price-regular__list-price-value">
<del>15.90</del>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile__actions-container">
<form class="wishlist-cart-actions">
<div class="wishlist-cart-actions__button-add-to-cart-wrapper">
<button class="button--primary" name="add-to-cart-submit" type="submit"> <span class="wishlist-cart-actions__button">
<span class="visually-hidden"></span>
<span class="wishlist-cart-actions__button-icon"></span>
</span>
</button>
</div>
<div class="wishlist-cart-actions__button-add-to-wishlist-wrapper">
<button type="submit" name="add-to-wishlist-submit" class="wishlist-cart-actions__button-add-to-wishlist" data-add-to-wishlist>
<span class="visually-hidden"></span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="tile__column">
<a href="/some-location/" class="tile__link">
<div class="image ">
<picture>
<img src="/example-assets/images/tile/product.png" class="image__img tile__image is-loading" alt="Test Product" srcset="/example-assets/images/tile/product.png 1x, /example-assets/images/tile/product@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="tile__logo">
<div class="logos">
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img logos__brand--medium is-loading" alt="alt" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
<div class="tile__specials">
<div class="specials">
<div class="specials--medium-vertically ">
<button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
<span class="visually-hidden">New</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
<button type="button" class="specials__toggle" data-info-tooltip-content="Kauftipp" style="background-color: #44a0d9;">
<span class="visually-hidden">Kauftipp</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/tip.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</div>
</div>
</div>
<div class="tile__stock">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar ab Juli 2020">
<span class="visually-hidden">Verfügbar ab Juli 2020</span>
</button>
</div>
</div>
</div>
</div>
</article>
</li>
<li class="list-tiles__list-item">
<article class="tile" data-location="/some-location/">
<div class="tile__row">
<div class="tile__column">
<h3 class="tile__title">
<a href="/some-location/" class="tile__link" title="Test Product">Test Product</a>
</h3>
<div class="tile__attributes">
<div class="attributes--small">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Artikelnr.</div>
<div class="attributes__value " title="8547625">
8547625
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Kategorie</div>
<div class="attributes__value has-single-line-ellipsis" title="Testkategorie">
<a class="attributes__attribute-link" href="#" title="Testkategorie">Testkategorie</a>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Grösse</div>
<div class="attributes__value " title="XXL">
XXL
</div>
</li>
</ul>
</div>
</div>
<div class="tile__price-actions-container">
<div class="tile__price">
<div class="price--regular">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current--wrap">
<div class="price-regular__current-price-inner">
<div class="price-regular__current-prefix">ab</div>
<div class="price-regular__current-currency">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value">9.90</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile__actions-container">
<form class="wishlist-cart-actions">
<div class="wishlist-cart-actions__button-add-to-cart-wrapper">
<button class="button--primary" name="add-to-cart-submit" type="submit"> <span class="wishlist-cart-actions__button">
<span class="visually-hidden"></span>
<span class="wishlist-cart-actions__button-icon"></span>
</span>
</button>
</div>
<div class="wishlist-cart-actions__button-add-to-wishlist-wrapper">
<button type="submit" name="add-to-wishlist-submit" class="wishlist-cart-actions__button-add-to-wishlist" data-add-to-wishlist>
<span class="visually-hidden"></span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="tile__column">
<a href="/some-location/" class="tile__link">
<div class="image ">
<picture>
<img src="/example-assets/images/tile/product.png" class="image__img tile__image is-loading" alt="Test Product" srcset="/example-assets/images/tile/product.png 1x, /example-assets/images/tile/product@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="tile__logo">
<div class="logos">
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img logos__brand--medium is-loading" alt="alt" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
<div class="tile__specials">
<div class="specials">
<div class="specials--medium-vertically ">
<button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
<span class="visually-hidden">New</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
<button type="button" class="specials__toggle" data-info-tooltip-content="Kauftipp" style="background-color: #44a0d9;">
<span class="visually-hidden">Kauftipp</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/tip.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</div>
</div>
</div>
<div class="tile__stock">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar ab Juli 2020">
<span class="visually-hidden">Verfügbar ab Juli 2020</span>
</button>
</div>
</div>
</div>
</div>
</article>
</li>
<li class="list-tiles__list-item">
<article class="tile" data-location="/some-location/">
<div class="tile__row">
<div class="tile__column">
<h3 class="tile__title">
<a href="/some-location/" class="tile__link" title="Test Product">Test Product</a>
</h3>
<div class="tile__attributes">
<div class="attributes--small">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Artikelnr.</div>
<div class="attributes__value " title="8547625">
8547625
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Kategorie</div>
<div class="attributes__value has-single-line-ellipsis" title="Testkategorie">
<a class="attributes__attribute-link" href="#" title="Testkategorie">Testkategorie</a>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Grösse</div>
<div class="attributes__value " title="XXL">
XXL
</div>
</li>
</ul>
</div>
</div>
<div class="tile__price-actions-container">
<div class="tile__price">
<div class="price--regular">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current--wrap">
<div class="price-regular__current-price-inner">
<div class="price-regular__current-prefix--offer">ab</div>
<div class="price-regular__current-currency--offer">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value--offer">9.90</div>
</div>
</div>
<div class="price-regular__list-price">
<div class="price-regular__list-price-prefix">
<del>statt</del>
</div>
<div class="price-regular__list-price-inner">
<div class="price-regular__list-price-currency">
<del>CHF</del>
</div>
<div class="price-regular__list-price-value">
<del>15.90</del>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile__actions-container">
<form class="wishlist-cart-actions">
<div class="wishlist-cart-actions__button-add-to-cart-wrapper">
<button class="button--primary" name="add-to-cart-submit" type="submit"> <span class="wishlist-cart-actions__button">
<span class="visually-hidden"></span>
<span class="wishlist-cart-actions__button-icon"></span>
</span>
</button>
</div>
<div class="wishlist-cart-actions__button-add-to-wishlist-wrapper">
<button type="submit" name="add-to-wishlist-submit" class="wishlist-cart-actions__button-add-to-wishlist" data-add-to-wishlist>
<span class="visually-hidden"></span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="tile__column">
<a href="/some-location/" class="tile__link">
<div class="image ">
<picture>
<img src="/example-assets/images/tile/product.png" class="image__img tile__image is-loading" alt="Test Product" srcset="/example-assets/images/tile/product.png 1x, /example-assets/images/tile/product@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="tile__logo">
<div class="logos">
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img logos__brand--medium is-loading" alt="alt" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
<div class="tile__specials">
<div class="specials">
<div class="specials--medium-vertically ">
<button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
<span class="visually-hidden">New</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
<button type="button" class="specials__toggle" data-info-tooltip-content="Kauftipp" style="background-color: #44a0d9;">
<span class="visually-hidden">Kauftipp</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/tip.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</div>
</div>
</div>
<div class="tile__stock">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar ab Juli 2020">
<span class="visually-hidden">Verfügbar ab Juli 2020</span>
</button>
</div>
</div>
</div>
</div>
</article>
</li>
<li class="list-tiles__list-item">
<article class="tile" data-location="/some-location/">
<div class="tile__row">
<div class="tile__column">
<h3 class="tile__title">
<a href="/some-location/" class="tile__link" title="Test Product">Test Product</a>
</h3>
<div class="tile__attributes">
<div class="attributes--small">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Artikelnr.</div>
<div class="attributes__value " title="8547625">
8547625
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Kategorie</div>
<div class="attributes__value has-single-line-ellipsis" title="Testkategorie">
<a class="attributes__attribute-link" href="#" title="Testkategorie">Testkategorie</a>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Grösse</div>
<div class="attributes__value " title="XXL">
XXL
</div>
</li>
</ul>
</div>
</div>
<div class="tile__price-actions-container">
<div class="tile__price">
<div class="price--regular">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current--wrap">
<div class="price-regular__current-price-inner">
<div class="price-regular__current-prefix--offer">ab</div>
<div class="price-regular__current-currency--offer">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value--offer">9.90</div>
</div>
</div>
<div class="price-regular__list-price">
<div class="price-regular__list-price-prefix">
<del>statt</del>
</div>
<div class="price-regular__list-price-inner">
<div class="price-regular__list-price-currency">
<del>CHF</del>
</div>
<div class="price-regular__list-price-value">
<del>15.90</del>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile__actions-container">
<form class="wishlist-cart-actions">
<div class="wishlist-cart-actions__button-add-to-cart-wrapper">
<button class="button--primary" name="add-to-cart-submit" type="submit"> <span class="wishlist-cart-actions__button">
<span class="visually-hidden"></span>
<span class="wishlist-cart-actions__button-icon"></span>
</span>
</button>
</div>
<div class="wishlist-cart-actions__button-add-to-wishlist-wrapper">
<button type="submit" name="add-to-wishlist-submit" class="wishlist-cart-actions__button-add-to-wishlist" data-add-to-wishlist>
<span class="visually-hidden"></span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="tile__column">
<a href="/some-location/" class="tile__link">
<div class="image ">
<picture>
<img src="/example-assets/images/tile/product.png" class="image__img tile__image is-loading" alt="Test Product" srcset="/example-assets/images/tile/product.png 1x, /example-assets/images/tile/product@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="tile__logo">
<div class="logos">
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img logos__brand--medium is-loading" alt="alt" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
<div class="tile__specials">
<div class="specials">
<div class="specials--medium-vertically ">
<button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
<span class="visually-hidden">New</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
<button type="button" class="specials__toggle" data-info-tooltip-content="Kauftipp" style="background-color: #44a0d9;">
<span class="visually-hidden">Kauftipp</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/tip.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</div>
</div>
</div>
<div class="tile__stock">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar ab Juli 2020">
<span class="visually-hidden">Verfügbar ab Juli 2020</span>
</button>
</div>
</div>
</div>
</div>
</article>
</li>
<li class="list-tiles__list-item">
<article class="tile" data-location="/some-location/">
<div class="tile__row">
<div class="tile__column">
<h3 class="tile__title">
<a href="/some-location/" class="tile__link" title="Test Product">Test Product</a>
</h3>
<div class="tile__attributes">
<div class="attributes--small">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Artikelnr.</div>
<div class="attributes__value " title="8547625">
8547625
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Kategorie</div>
<div class="attributes__value has-single-line-ellipsis" title="Testkategorie">
<a class="attributes__attribute-link" href="#" title="Testkategorie">Testkategorie</a>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Grösse</div>
<div class="attributes__value " title="XXL">
XXL
</div>
</li>
</ul>
</div>
</div>
<div class="tile__price-actions-container">
<div class="tile__price">
<div class="price--regular">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current--wrap">
<div class="price-regular__current-price-inner">
<div class="price-regular__current-prefix--offer">ab</div>
<div class="price-regular__current-currency--offer">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value--offer">9.90</div>
</div>
</div>
<div class="price-regular__list-price">
<div class="price-regular__list-price-prefix">
<del>statt</del>
</div>
<div class="price-regular__list-price-inner">
<div class="price-regular__list-price-currency">
<del>CHF</del>
</div>
<div class="price-regular__list-price-value">
<del>15.90</del>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile__actions-container">
<form class="wishlist-cart-actions">
<div class="wishlist-cart-actions__button-add-to-cart-wrapper">
<button class="button--primary" name="add-to-cart-submit" type="submit"> <span class="wishlist-cart-actions__button">
<span class="visually-hidden"></span>
<span class="wishlist-cart-actions__button-icon"></span>
</span>
</button>
</div>
<div class="wishlist-cart-actions__button-add-to-wishlist-wrapper">
<button type="submit" name="add-to-wishlist-submit" class="wishlist-cart-actions__button-add-to-wishlist" data-add-to-wishlist>
<span class="visually-hidden"></span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="tile__column">
<a href="/some-location/" class="tile__link">
<div class="image ">
<picture>
<img src="/example-assets/images/tile/product.png" class="image__img tile__image is-loading" alt="Test Product" srcset="/example-assets/images/tile/product.png 1x, /example-assets/images/tile/product@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="tile__logo">
<div class="logos">
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img logos__brand--medium is-loading" alt="alt" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
<div class="tile__specials">
<div class="specials">
<div class="specials--medium-vertically ">
<button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
<span class="visually-hidden">New</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
<button type="button" class="specials__toggle" data-info-tooltip-content="Kauftipp" style="background-color: #44a0d9;">
<span class="visually-hidden">Kauftipp</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/tip.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</div>
</div>
</div>
<div class="tile__stock">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar ab Juli 2020">
<span class="visually-hidden">Verfügbar ab Juli 2020</span>
</button>
</div>
</div>
</div>
</div>
</article>
</li>
<li class="list-tiles__list-item">
<article class="tile" data-location="/some-location/">
<div class="tile__row">
<div class="tile__column">
<h3 class="tile__title">
<a href="/some-location/" class="tile__link" title="Test Product">Test Product</a>
</h3>
<div class="tile__attributes">
<div class="attributes--small">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Artikelnr.</div>
<div class="attributes__value " title="8547625">
8547625
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Kategorie</div>
<div class="attributes__value has-single-line-ellipsis" title="Testkategorie">
<a class="attributes__attribute-link" href="#" title="Testkategorie">Testkategorie</a>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Grösse</div>
<div class="attributes__value " title="XXL">
XXL
</div>
</li>
</ul>
</div>
</div>
<div class="tile__price-actions-container">
<div class="tile__price">
<div class="price--regular">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current--wrap">
<div class="price-regular__current-price-inner">
<div class="price-regular__current-prefix--offer">ab</div>
<div class="price-regular__current-currency--offer">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value--offer">9.90</div>
</div>
</div>
<div class="price-regular__list-price">
<div class="price-regular__list-price-prefix">
<del>statt</del>
</div>
<div class="price-regular__list-price-inner">
<div class="price-regular__list-price-currency">
<del>CHF</del>
</div>
<div class="price-regular__list-price-value">
<del>15.90</del>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile__actions-container">
<form class="wishlist-cart-actions">
<div class="wishlist-cart-actions__button-add-to-cart-wrapper">
<button class="button--primary" name="add-to-cart-submit" type="submit"> <span class="wishlist-cart-actions__button">
<span class="visually-hidden"></span>
<span class="wishlist-cart-actions__button-icon"></span>
</span>
</button>
</div>
<div class="wishlist-cart-actions__button-add-to-wishlist-wrapper">
<button type="submit" name="add-to-wishlist-submit" class="wishlist-cart-actions__button-add-to-wishlist" data-add-to-wishlist>
<span class="visually-hidden"></span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="tile__column">
<a href="/some-location/" class="tile__link">
<div class="image ">
<picture>
<img src="/example-assets/images/tile/product.png" class="image__img tile__image is-loading" alt="Test Product" srcset="/example-assets/images/tile/product.png 1x, /example-assets/images/tile/product@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
<div class="tile__logo">
<div class="logos">
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img logos__brand--medium is-loading" alt="alt" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
<div class="tile__specials">
<div class="specials">
<div class="specials--medium-vertically ">
<button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
<span class="visually-hidden">New</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
<button type="button" class="specials__toggle" data-info-tooltip-content="Kauftipp" style="background-color: #44a0d9;">
<span class="visually-hidden">Kauftipp</span>
<span class="image ">
<picture>
<img src="/example-assets/images/specials/tip.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</div>
</div>
</div>
<div class="tile__stock">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar ab Juli 2020">
<span class="visually-hidden">Verfügbar ab Juli 2020</span>
</button>
</div>
</div>
</div>
</div>
</article>
</li>
</ul>
</div>
</div>
<div class="pagination">
<div class="pagination__container">
<div class="pagination__prev">
<a href="#" class="button-navigation--prev">
<span class="visually-hidden">Vorherige Seite</span>
</a>
</div>
<ul class="pagination__pages">
<li class="pagination__page">
<a href="#" class="pagination__page-link">1</a>
</li>
<li class="pagination__page">
<a href="#" class="pagination__page-link--active">2</a>
</li>
<li class="pagination__page">
<a href="#" class="pagination__page-link">3</a>
</li>
<li class="pagination__page">
<span class="pagination__page-dots">…</span>
</li>
<li class="pagination__page">
<a href="#" class="pagination__page-link">32</a>
</li>
</ul>
<div class="pagination__next">
<a href="#" class="button-navigation--next">
<span class="visually-hidden">Nächste Seite</span>
</a>
</div>
</div>
</div>
</div>
<div class="listing__column--filter">
<form class="filter-list" method="get" action="/filter-page/" data-filter-list-off-canvas-id="filter-list-1009342354">
<div class="off-canvas">
<div class="off-canvas__overlay"></div>
<div id="filter-list-1009342354" class="off-canvas__panel--right" data-visible-width="767">
<div class="off-canvas__container">
<div class="off-canvas__header">
<button class="button-icon--icon-regular -icon-close" type="button" data-off-canvas-close="true">
<span class="visually-hidden">Schliessen</span>
</button>
<div class="filter-list__apply-button">
<button class="button--secondary-small" disabled type="button" data-filter-list-off-canvas-close="true">Anwenden</button>
</div>
</div>
<div class="off-canvas__content">
<aside class="filter-list__body">
<h3 class="filter-list__body-title">Kategorien</h3>
<div class="filter-category">
<h4 class="filter-category__title">
<a href="/de/shop/bekleidung--ausruestung-c1056" class="filter-category__title-link">Bekleidung & Ausrüstung</a>
</h4>
<ul class="filter-category__list">
<li class="filter-category__list-item">
<a href="/de/shop/bekleidung--ausruestung-c1056/helme-c1073" class="filter-category__list-item-link--bold">
<span class="filter-category__list-item-label">Helme</span>
<span class="filter-category__list-item-count">391</span>
</a>
<ul class="filter-category__list">
<li class="filter-category__list-item">
<a href="/de/shop/bekleidung--ausruestung-c1056/helme-c1073/modelle-c1074" class="filter-category__list-item-link">
<span class="filter-category__list-item-label">Modelle</span>
<span class="filter-category__list-item-count">303</span>
</a>
</li>
<li class="filter-category__list-item">
<a href="/de/shop/bekleidung--ausruestung-c1056/helme-c1073/zubehoer-c1272" class="filter-category__list-item-link">
<span class="filter-category__list-item-label">Zubehör</span>
<span class="filter-category__list-item-count">88</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<h3 class="filter-list__body-title">Resultate filtern</h3>
<ul class="filter-list__list">
<li class="filter-list__list-item">
<h4 class="filter-list__list-item-title">Specials</h4>
<div class="filter-list__list-item-content">
<div class="filter-multi-relation">
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-new" type="checkbox" name="filter-new" value="selected" />
<label class="checkbox__label" for="filter-new">
<span>Neu
</span>
</label>
</div>
</div>
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-bestseller" type="checkbox" name="filter-bestseller" value="selected" checked />
<label class="checkbox__label" for="filter-bestseller">
<span>Bestseller
</span>
</label>
</div>
</div>
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-discount" type="checkbox" name="filter-discount" value="selected" />
<label class="checkbox__label" for="filter-discount">
<span>Reduziert
</span>
</label>
</div>
</div>
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-available-soon" type="checkbox" name="filter-available-soon" value="selected" />
<label class="checkbox__label" for="filter-available-soon">
<span>Demnächst verfügbar
</span>
</label>
</div>
</div>
</div>
</div>
</li>
<li class="filter-list__list-item">
<h4 class="filter-list__list-item-title">Preis</h4>
<div class="filter-list__list-item-content">
<div class="filter-multi-number-range">
<div class="text-field-range--light">
<div class="text-field-range__container">
<div class="text-field--light text-field-placeholder--light is-initialized is-filled-in">
<div class="text-field__wrapper text-field-placeholder__wrapper ">
<input class="text-field__input text-field-placeholder__input" id="text-field-range-from" type="number" name="text-field-range-from" value="10" required autocomplete="on" placeholder="ab *" />
<label class="visually-hidden" for="text-field-range-from">ab
*
</label>
</div>
</div>
<div class="text-field--light text-field-placeholder--light is-initialized">
<div class="text-field__wrapper text-field-placeholder__wrapper ">
<input class="text-field__input text-field-placeholder__input" id="text-field-range-to" type="number" name="text-field-range-to" required autocomplete="on" placeholder="bis *" />
<label class="visually-hidden" for="text-field-range-to">bis
*
</label>
</div>
</div>
</div>
</div> <button class="button--primary-small" type="button">Ok</button>
</div>
</div>
</li>
<li class="filter-list__list-item">
<h4 class="filter-list__list-item-title">Marke</h4>
<div class="filter-list__list-item-content">
<div class="filter-multi-relation">
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-brand-a" type="checkbox" name="filter-brand-a" value="selected" />
<label class="checkbox__label" for="filter-brand-a">
<span>Marke A
</span>
</label>
</div>
</div>
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-brand-b" type="checkbox" name="filter-brand-b" value="selected" />
<label class="checkbox__label" for="filter-brand-b">
<span>Marke B
</span>
</label>
</div>
</div>
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-brand-c" type="checkbox" name="filter-brand-c" value="selected" />
<label class="checkbox__label" for="filter-brand-c">
<span>Marke C
</span>
</label>
</div>
</div>
<div class="checkbox--light is-initialized is-filled-in">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="filter-brand-d" type="checkbox" name="filter-brand-d" value="selected" checked />
<label class="checkbox__label" for="filter-brand-d">
<span>Marke D
</span>
</label>
</div>
</div>
</div>
</div>
</li>
</ul>
</aside>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<cxx-footer>
<footer class="footer">
<h2 class="visually-hidden">Footer</h2>
<div class="footer-navigation">
<div class="footer-navigation__button-wrapper">
<button class="button-scroll-to-top">
<span class="visually-hidden">Scroll to top</span>
</button>
</div>
<div class="footer-navigation__container">
<div class="footer-navigation__container--sizing">
<div class="footer-navigation__links-container--5">
<h3 class="footer-navigation__title">Sortiment</h3>
<ul class="footer-navigation__list">
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Bekleidung & Ausrüstung</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Velozubehör</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Reifen & Räder</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Komponenten</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">E-Bike</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Werkstatt</a>
</li>
</ul>
</div>
<div class="footer-navigation__links-container--5">
<h3 class="footer-navigation__title">Jetzt entdecken</h3>
<ul class="footer-navigation__list">
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Neuheit</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Demnächst</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Bestseller</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Sale</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Aktion</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Outlet</a>
</li>
</ul>
</div>
<div class="footer-navigation__links-container--5">
<h3 class="footer-navigation__title">Marken</h3>
<ul class="footer-navigation__list">
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Shimano</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">FOX</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">UYN</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Continental</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">weitere Marken</a>
</li>
</ul>
</div>
<div class="footer-navigation__links-container--5">
<h3 class="footer-navigation__title">Service</h3>
<ul class="footer-navigation__list">
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Shimano Service Center</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">FOX Service Center</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Bikefitting</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Bosch Experts</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">S-PHYRE</a>
</li>
</ul>
</div>
<div class="footer-navigation__links-container--5">
<h3 class="footer-navigation__title">Unternehmen</h3>
<ul class="footer-navigation__list">
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Über uns</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Geschichte</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Team</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Jobs</a>
</li>
<li class="footer-navigation__list-item">
<a href="#" class="footer-navigation__link">Kunde werden?</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-contact">
<div class="footer-contact__container">
<div class="footer-navigation__container--sizing">
<div class="footer-contact__contact-container--6">
<span class="footer-contact__title">Kontakt</span>
<ul class="footer-contact__list">
<li class="footer-contact__list-item">
<a class="footer-contact__list-item-link--tel" href="tel:0123456789">012 345 67 89</a>
</li>
<li class="footer-contact__list-item">
<a class="footer-contact__list-item-link--fax" href="tel:0123456789">012 345 67 89</a>
</li>
<li class="footer-contact__list-item">
<a class="footer-contact__list-item-link--mail" href="mailto:mail@brand.com">mail@brand.com</a>
</li>
<li class="footer-contact__list-item">
<a class="footer-contact__list-item-link--contact" href="#">Kontaktformular</a>
</li>
</ul>
</div>
<div class="footer-contact__contact-container--6">
<span class="footer-contact__title">Öffnungszeiten</span>
<ul class="footer-contact__list">
<li class="footer-contact__list-item">
<div class="wysiwyg-content">
<p>Montag 08:00 - 18:00</p>
<p>Dienstag 08:00 - 18:00</p>
<p>Mittwoch 08:00 - 18:00</p>
<p>Donnerstag 08:00 - 18:00</p>
<p>Freitag 08:00 - 18:00</p>
</div>
</li>
</ul>
</div>
<div class="footer-contact__contact-container--6">
<span class="footer-contact__title">Vorteile</span>
<ul class="footer-contact__list">
<li class="footer-contact__list-item">
<div class="wysiwyg-content">
<p>Beste Konditionen</p>
<p>Kompetente Fachberatung</p>
<p>Portofreie Lieferung (ab CHF 50.00)</p>
<p>Lieferung am Folgetag</p>
<p>Rücknahmegarantie</p>
</div>
</li>
</ul>
</div>
<div class="footer-contact__contact-container--6">
<span class="footer-contact__title">Social Media</span>
<ul class="footer-contact__list">
<li class="footer-contact__list-item">
<a class="footer-contact__list-item-link" href="#">
<div class="footer-contact__icon-wrapper">
<i class="footer-contact__list-item-link-social-icon--instagram"></i>
</div>
<span class="footer-contact__list-item-link-text">Instagram</span>
</a>
</li>
<li class="footer-contact__list-item">
<a class="footer-contact__list-item-link" href="#">
<div class="footer-contact__icon-wrapper">
<i class="footer-contact__list-item-link-social-icon--vimeo"></i>
</div>
<span class="footer-contact__list-item-link-text">Vimeo</span>
</a>
</li>
<li class="footer-contact__list-item">
<a class="footer-contact__list-item-link" href="#">
<div class="footer-contact__icon-wrapper">
<i class="footer-contact__list-item-link-social-icon--linkedin"></i>
</div>
<span class="footer-contact__list-item-link-text">LinkedIn</span>
</a>
</li>
<li class="footer-contact__list-item">
<a class="footer-contact__list-item-link" href="#">
<div class="footer-contact__icon-wrapper">
<i class="footer-contact__list-item-link-social-icon--facebook"></i>
</div>
<span class="footer-contact__list-item-link-text">Facebook</span>
</a>
</li>
<li class="footer-contact__list-item">
<a class="footer-contact__list-item-link" href="#" target="_blank">
<div class="footer-contact__icon-wrapper">
<i class="footer-contact__list-item-link-social-icon--youtube"></i>
</div>
<span class="footer-contact__list-item-link-text">YouTube</span>
</a>
</li>
</ul>
</div>
<div class="footer-contact__contact-container--6">
<span class="footer-contact__title">Zahlungsmethoden</span>
<ul class="footer-contact__list--flex-wrap">
<li class="footer-contact__list-item--inline">
<a class="footer-contact__list-item-link--image" href="#">
<div class="image ">
<picture>
<img src="/example-assets/images/footer-contact/invoice-logo.png" class="image__img footer-contact__list-item-link--image-payment-method is-loading" alt="invoice" srcset="/example-assets/images/footer-contact/invoice-logo.png 1x, /example-assets/images/footer-contact/invoice-logo@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
</li>
<li class="footer-contact__list-item--inline">
<a class="footer-contact__list-item-link--image" href="#">
<div class="image ">
<picture>
<img src="/example-assets/images/footer-contact/master-card-logo.png" class="image__img footer-contact__list-item-link--image-payment-method is-loading" alt="master-card" srcset="/example-assets/images/footer-contact/master-card-logo.png 1x, /example-assets/images/footer-contact/master-card-logo@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
</li>
<li class="footer-contact__list-item--inline">
<a class="footer-contact__list-item-link--image" href="#">
<div class="image ">
<picture>
<img src="/example-assets/images/footer-contact/visa-logo.png" class="image__img footer-contact__list-item-link--image-payment-method is-loading" alt="visa" srcset="/example-assets/images/footer-contact/visa-logo.png 1x, /example-assets/images/footer-contact/visa-logo@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
</li>
<li class="footer-contact__list-item--inline">
<a class="footer-contact__list-item-link--image" href="#">
<div class="image ">
<picture>
<img src="/example-assets/images/footer-contact/visa-logo.png" class="image__img footer-contact__list-item-link--image-payment-method is-loading" alt="visa" srcset="/example-assets/images/footer-contact/visa-logo.png 1x, /example-assets/images/footer-contact/visa-logo@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</a>
</li>
</ul>
</div>
<div class="footer-contact__contact-container--6">
<span class="footer-contact__title">Sicher Einkaufen</span>
<ul class="footer-contact__list--flex-wrap">
<li class="footer-contact__list-item--inline">
<div class="image ">
<picture>
<img src="/example-assets/images/footer-contact/sog-logo.png" class="image__img footer-contact__list-item-link--image-security-label is-loading" alt="sog" srcset="/example-assets/images/footer-contact/sog-logo.png 1x, /example-assets/images/footer-contact/sog-logo@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</li>
<li class="footer-contact__list-item--inline">
<div class="image ">
<picture>
<img src="/example-assets/images/footer-contact/etme-logo.png" class="image__img footer-contact__list-item-link--image-security-label is-loading" alt="etme" srcset="/example-assets/images/footer-contact/etme-logo.png 1x, /example-assets/images/footer-contact/etme-logo@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</li>
<li class="footer-contact__list-item--inline">
<div class="image ">
<picture>
<img src="/example-assets/images/footer-contact/tsg-logo.png" class="image__img footer-contact__list-item-link--image-security-label is-loading" alt="tsg" srcset="/example-assets/images/footer-contact/tsg-logo.png 1x, /example-assets/images/footer-contact/tsg-logo@2x.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</li>
</ul>
</div>
</div>
</div>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"url": "https://www.brand.com/",
"contactPoint": [{
"@type": "ContactPoint",
"telephone": "012 345 67 89",
"contactType": "customer service"
}]
}
</script>
</div>
<div class="footer-meta">
<div class="footer-meta__container">
<div class="footer-meta__copyright">
© 2023 XXX Brand, All rights reserved XXX Brand
</div>
<ul class="footer-meta__list">
<li class="footer-meta__list-item">
<a href="#" class="footer-meta__list-item-title">AGB</a>
</li>
<li class="footer-meta__list-item">
<a href="#" class="footer-meta__list-item-title">FAQ</a>
</li>
<li class="footer-meta__list-item">
<a href="#" class="footer-meta__list-item-title">Datenschutz</a>
</li>
<li class="footer-meta__list-item">
<a href="#" class="footer-meta__list-item-title">Nutzungsbedingungen</a>
</li>
<li class="footer-meta__list-item">
<a href="#" class="footer-meta__list-item-title">Impressum</a>
</li>
</ul>
</div>
</div>
</footer>
</cxx-footer>
</div>
<div class="cookie-popup">
<div class="cookie-popup__container">
<div class="cookie-popup__message">
<div class="wysiwyg-content">
<p>XXX verwendet Cookies, um Ihr Online-Erlebnis zu verbessern. Mit der weiteren Nutzung von XXX akzeptieren Sie unsere Cookie Policy.</p>
</div>
</div>
<div class="cookie-popup__buttons"> <button class="button--primary-small cookie-popup__close-button" value="close" type="button" data-cookie-popup-close="true">Schliessen</button>
<a href="#" class="button--tertiary-dark-small cookie-popup__more-button">Mehr Informationen</a>
</div>
</div>
</div>
{% include '@SharedComponents/pages/b2b/brand-product-listing-page/brand-product-listing-page.twig' %}
{
"title": "Main content",
"utilityNav": {
"include": "...utility-nav--with-container-and-dealer-mode"
},
"header": {
"include": "...header--logged-in"
},
"navigation": {
"include": "...navigation--desktop-and-mobile"
},
"breadcrumb": {
"items": [
{
"title": "Home",
"href": "#"
},
{
"title": "Kategorie Anton",
"href": "#"
},
{
"title": "Kategorie Bertha",
"href": "#"
},
{
"title": "Kategorie Conrad",
"href": "#"
},
{
"title": "Kategorie Doris"
},
{
"title": "Kategorie Erik",
"href": "#"
},
{
"title": "Kategorie Fjord",
"href": "#",
"selected": true
}
]
},
"productListing": {
"headingLevel": "3",
"title": "Koleston",
"subtitle": "(130 Resultate)",
"filters": {
"headingLevel": "3",
"labels": {
"categories": "Kategorien",
"filters": "Resultate filtern"
},
"action": "/filter-page/",
"applyButton": {
"variant": "secondary-small",
"type": "button",
"role": "button",
"title": "Anwenden",
"disabled": true,
"attributes": {
"data-filter-list-off-canvas-close": "true"
}
},
"offCanvasCloseButton": {
"variant": "icon-regular",
"title": "Schliessen",
"icon": "close",
"type": "button",
"role": "button"
},
"categories": {
"headingLevel": "4",
"parentCategory": {
"label": "Bekleidung & Ausrüstung",
"value": "1056",
"count": "391",
"link": "/de/shop/bekleidung--ausruestung-c1056"
},
"currentCategory": {
"label": "Helme",
"value": "1073",
"count": "391",
"link": "/de/shop/bekleidung--ausruestung-c1056/helme-c1073"
},
"subCategories": [
{
"label": "Modelle",
"value": "1074",
"count": "303",
"link": "/de/shop/bekleidung--ausruestung-c1056/helme-c1073/modelle-c1074"
},
{
"label": "Zubehör",
"value": "1272",
"count": "88",
"link": "/de/shop/bekleidung--ausruestung-c1056/helme-c1073/zubehoer-c1272"
}
]
},
"filters": [
{
"name": "multi-relation",
"label": "Specials",
"data": {
"options": [
{
"variant": "light",
"id": "filter-new",
"name": "filter-new",
"label": "Neu",
"value": "selected",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
},
{
"variant": "light",
"id": "filter-bestseller",
"name": "filter-bestseller",
"label": "Bestseller",
"value": "selected",
"required": false,
"disabled": false,
"checked": true,
"error": "",
"helper": ""
},
{
"variant": "light",
"id": "filter-discount",
"name": "filter-discount",
"label": "Reduziert",
"value": "selected",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
},
{
"variant": "light",
"id": "filter-available-soon",
"name": "filter-available-soon",
"label": "Demnächst verfügbar",
"value": "selected",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
}
]
}
},
{
"name": "multi-number-range",
"label": "Preis",
"data": {
"range": {
"variant": "light",
"from": {
"variant": "light",
"id": "text-field-range-from",
"name": "text-field-range-from",
"label": "ab",
"required": true,
"value": "10",
"disabled": false,
"type": "number",
"autocomplete": "false",
"error": "",
"helper": ""
},
"to": {
"variant": "light",
"id": "text-field-range-to",
"name": "text-field-range-to",
"label": "bis",
"required": true,
"value": "",
"disabled": false,
"type": "number",
"autocomplete": "false"
}
},
"button": {
"variant": "primary-small",
"type": "button",
"role": "button",
"title": "Ok",
"disabled": false
}
}
},
{
"name": "multi-relation",
"label": "Marke",
"data": {
"options": [
{
"variant": "light",
"id": "filter-brand-a",
"name": "filter-brand-a",
"label": "Marke A",
"value": "selected",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
},
{
"variant": "light",
"id": "filter-brand-b",
"name": "filter-brand-b",
"label": "Marke B",
"value": "selected",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
},
{
"variant": "light",
"id": "filter-brand-c",
"name": "filter-brand-c",
"label": "Marke C",
"value": "selected",
"required": false,
"disabled": false,
"checked": false,
"error": "",
"helper": ""
},
{
"variant": "light",
"id": "filter-brand-d",
"name": "filter-brand-d",
"label": "Marke D",
"value": "selected",
"required": false,
"disabled": false,
"checked": true,
"error": "",
"helper": ""
}
]
}
}
]
},
"filterPills": {
"labels": {
"title": "Aktive Filter:",
"resetFilters": "Alle Filter zurücksetzen",
"close": "Zurücksetzen"
},
"filters": [
"Blau",
"Bestseller"
]
},
"settings": {
"action": "/",
"sortBy": {
"variant": "light",
"id": "sort-by",
"name": "sort-by",
"label": "Sort by",
"required": true,
"disabled": false,
"selected": "priceDesc",
"options": {
"bestAsc": "Beste Ergebnisse",
"priceAsc": "Preis aufsteigend",
"priceDesc": "Preis absteigend"
},
"choose": "Please choose"
},
"itemsPerPage": {
"variant": "light",
"id": "items-per-page",
"name": "items-per-page",
"label": "Items per page",
"required": true,
"disabled": false,
"selected": "60",
"options": {
"30": "30",
"60": "60",
"120": "120"
},
"choose": "Please choose"
},
"filters": {
"variant": "primary-small",
"type": "button",
"role": "button",
"disabled": false,
"title": "Filters"
}
},
"introBricks": [
{
"name": "multi-column-text-image",
"folder": "multi-column-text-image",
"data": {
"headingLevel": "4",
"items": [
{
"title": "Lorem, IPSUM dolor",
"content": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum</p>",
"button": {
"title": "Mehr erfahren",
"href": "#"
}
}
]
}
}
],
"listTiles": {
"include": "...list-tiles--default"
},
"pagination": {
"prev": {
"title": "Vorherige Seite",
"href": "#"
},
"pages": [
{
"title": "1",
"href": "#"
},
{
"title": "2",
"href": "#",
"active": true
},
{
"title": "3",
"href": "#"
},
{
"title": "…"
},
{
"title": "32",
"href": "#"
}
],
"next": {
"title": "Nächste Seite",
"href": "#"
}
}
},
"footer": {
"include": "...footer--with-navigation"
},
"cookiePopupBrick": {
"include": "...cookie-popup--without-editmode"
}
}
No notes defined.