<div class="utility-nav--with-container">
<div class="utility-nav__row">
<nav class="utility-nav__column">
<h2 class="visually-hidden"></h2>
<ul class="utility-nav__link-list">
</ul>
</nav>
<nav class="utility-nav__column">
<h2 class="visually-hidden"></h2>
<ul class="utility-nav__link-list">
</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="text" name="search-term" 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-">
</a>
<button type="button" class="header-button__link--button -icon-">
</button>
</div>
<div class="header-button-dropdown-root">
</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>
<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">Bekleidung & Ausrüstung</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Bekleidung</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Brillen</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Freizeitschuhe</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Helme</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">Rucksäcke</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Textilpflege</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Veloschuhe</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Bekleidung</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Brillen</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Freizeitschuhe</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Helme</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Bekleidung & Ausrüstung</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Helme</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">Rucksäcke</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Textilpflege</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Bekleidung & Ausrüstung</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Bekleidung</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Brillen</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Freizeitschuhe</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Helme</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">Rucksäcke</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__title -is-link">Bekleidung & Ausrüstung</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Bekleidung</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Brillen</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Freizeitschuhe</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Helme</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">Rucksäcke</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Textilpflege</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Veloschuhe</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Bekleidung</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Brillen</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Freizeitschuhe</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Helme</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">Rucksäcke</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Textilpflege</a>
</li>
<li class="big-menu-flat-list__item">
<a href="#" target="_self" class="big-menu-flat-list__link">Veloschuhe</a>
</li>
</ul>
</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>
<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>
</ul>
</div>
</div>
</li>
</ul>
<ul class="big-menu-toolbar__navigation--right">
</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ü">
<nav class="mm off-canvas-menu__nav " 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="#">
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>
</ul>
</nav>
</div>
</div>
</ccx-navigation>
<div class="page-container--landing-page">
<ccx-global-messages variant="landing-page"></ccx-global-messages>
<ccx-breadcrumb>
</ccx-breadcrumb>
<main id="main-content" class="page-container__content">
<h2 class="page-container__title visually-hidden" tabindex="-1">Main content</h2>
<div class="bricks" data-below-breadcrumb="false">
<div class="heading--left-aligned">
<div class="heading__container">
<h3 class="heading__title" id="impressum">Impressum</h3>
</div>
</div>
<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>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</main>
<cxx-footer>
<footer class="footer">
<h2 class="visually-hidden">Footer</h2>
<div class="footer-meta">
<div class="footer-meta__container">
<div class="footer-meta__copyright">
© 2023 XXX Brand, All rights reserved XXX Brand
</div>
</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/landing-page/landing-page.twig' %}
{
"title": "Main content",
"utilityNav": {
"include": "...utility-nav--with-container-and-dealer-mode",
"variant": "with-container",
"languages": null,
"navigation": null
},
"header": {
"include": "...header--logged-in",
"variant": "with-container",
"labels": {
"open": "Menü öffnen/schliessen"
},
"logo": {
"alt": "Brand",
"href": "#",
"src": "/images/common/logo.svg"
},
"search": {
"variant": "light",
"labels": {
"reset": "Zurücksetzen",
"submit": "Suchen"
},
"id": "search-term",
"name": "search-term",
"label": "Suche nach Name oder Artikelnummer",
"required": false,
"value": "",
"disabled": false,
"error": "",
"helper": "",
"type": "text",
"autocomplete": ""
},
"registerButton": null,
"loginButton": null,
"cart": {
"labels": {
"title": "Zum Warenkorb",
"items": "Artikel im Warenkorb"
},
"href": "#",
"currency": "CHF",
"value": "2584.60",
"badge": "4"
}
},
"navigation": {
"include": "...navigation--desktop-and-mobile",
"bigMenu": {
"headingLevel": "2",
"labels": {
"title": "Menü",
"showAll": "Alle %s"
},
"closeButton": {
"variant": "icon-regular",
"title": "Schliessen",
"icon": "close",
"type": "button",
"role": "button",
"name": "close-big-menu",
"value": "yes"
},
"leftItems": [
{
"title": "Produkte",
"href": "",
"items": [
{
"title": "Bekleidung & Ausrüstung",
"href": "#",
"selected": true,
"items": [
{
"title": "Bekleidung",
"href": "#"
},
{
"title": "Brillen",
"href": "#"
},
{
"title": "Freizeitschuhe",
"href": "#"
},
{
"title": "Helme",
"href": "#"
},
{
"title": "Körperpflege",
"href": "#"
},
{
"title": "Rucksäcke",
"href": "#"
},
{
"title": "Textilpflege",
"href": "#"
},
{
"title": "Veloschuhe",
"href": "#"
},
{
"title": "Bekleidung",
"href": "#"
},
{
"title": "Brillen",
"href": "#"
},
{
"title": "Freizeitschuhe",
"href": "#"
},
{
"title": "Helme",
"href": "#",
"selected": true
}
]
},
{
"title": "Bekleidung & Ausrüstung",
"href": "#",
"items": [
{
"title": "Helme",
"href": "#"
},
{
"title": "Körperpflege",
"href": "#"
},
{
"title": "Rucksäcke",
"href": "#"
},
{
"title": "Textilpflege",
"href": "#"
}
]
},
{
"title": "Bekleidung & Ausrüstung",
"href": "#",
"items": [
{
"title": "Bekleidung",
"href": "#"
},
{
"title": "Brillen",
"href": "#"
},
{
"title": "Freizeitschuhe",
"href": "#"
},
{
"title": "Helme",
"href": "#"
},
{
"title": "Körperpflege",
"href": "#"
},
{
"title": "Rucksäcke",
"href": "#"
}
]
},
{
"title": "Bekleidung & Ausrüstung",
"href": "#",
"items": [
{
"title": "Bekleidung",
"href": "#"
},
{
"title": "Brillen",
"href": "#"
},
{
"title": "Freizeitschuhe",
"href": "#"
},
{
"title": "Helme",
"href": "#"
},
{
"title": "Körperpflege",
"href": "#"
},
{
"title": "Rucksäcke",
"href": "#"
},
{
"title": "Textilpflege",
"href": "#"
},
{
"title": "Veloschuhe",
"href": "#"
},
{
"title": "Bekleidung",
"href": "#"
},
{
"title": "Brillen",
"href": "#"
},
{
"title": "Freizeitschuhe",
"href": "#"
},
{
"title": "Helme",
"href": "#"
},
{
"title": "Körperpflege",
"href": "#"
},
{
"title": "Rucksäcke",
"href": "#"
},
{
"title": "Textilpflege",
"href": "#"
},
{
"title": "Veloschuhe",
"href": "#"
}
]
}
]
},
{
"title": "Marken",
"href": "#",
"items": [
{
"title": "Marke A",
"href": "#"
},
{
"title": "Marke B",
"href": "#"
},
{
"title": "Marke C",
"href": "#"
},
{
"title": "Marke D",
"href": "#"
},
{
"title": "Marke E",
"href": "#"
},
{
"title": "Marke F",
"href": "#"
},
{
"title": "Marke G",
"href": "#"
},
{
"title": "Marke H",
"href": "#"
},
{
"title": "Marke I",
"href": "#"
},
{
"title": "Marke J",
"href": "#"
},
{
"title": "Marke A",
"href": "#"
},
{
"title": "Marke B",
"href": "#"
},
{
"title": "Marke C",
"href": "#"
},
{
"title": "Marke D",
"href": "#"
},
{
"title": "Marke E",
"href": "#"
},
{
"title": "Marke F",
"href": "#"
},
{
"title": "Marke G",
"href": "#"
},
{
"title": "Marke H",
"href": "#"
},
{
"title": "Marke I",
"href": "#"
},
{
"title": "Marke J",
"href": "#"
},
{
"title": "Marke A",
"href": "#"
},
{
"title": "Marke B",
"href": "#"
},
{
"title": "Marke C",
"href": "#"
},
{
"title": "Marke D",
"href": "#"
},
{
"title": "Marke E",
"href": "#"
},
{
"title": "Marke F",
"href": "#"
},
{
"title": "Marke G",
"href": "#"
},
{
"title": "Marke H",
"href": "#"
},
{
"title": "Marke I",
"href": "#"
},
{
"title": "Marke J",
"href": "#"
},
{
"title": "Marke I",
"href": "#"
},
{
"title": "Marke J",
"href": "#"
},
{
"title": "Marke H",
"href": "#"
},
{
"title": "Marke I",
"href": "#"
},
{
"title": "Marke J",
"href": "#"
},
{
"title": "Marke I",
"href": "#"
},
{
"title": "Marke J",
"href": "#"
}
]
}
],
"rightItems": null
},
"offCanvas": {
"headingLevel": "2",
"labels": {
"title": "Menü"
},
"items": [
{
"title": "Produkte",
"href": "",
"items": [
{
"title": "Bekleidung & Ausrüstung",
"href": "#",
"items": [
{
"title": "Bekleidung",
"href": "#"
},
{
"title": "Brillen",
"href": "#"
},
{
"title": "Freizeitschuhe",
"href": "#"
},
{
"title": "Helme",
"href": "#"
},
{
"title": "Körperpflege",
"href": "#"
},
{
"title": "Rucksäcke",
"href": "#"
},
{
"title": "Textilpflege",
"href": "#"
},
{
"title": "Veloschuhe",
"href": "#"
},
{
"title": "Bekleidung",
"href": "#"
},
{
"title": "Brillen",
"href": "#"
},
{
"title": "Freizeitschuhe",
"href": "#"
},
{
"title": "Helme",
"href": "#"
}
]
},
{
"title": "Bekleidung & Ausrüstung",
"href": "#",
"items": [
{
"title": "Helme",
"href": "#"
},
{
"title": "Körperpflege",
"href": "#"
},
{
"title": "Rucksäcke",
"href": "#"
},
{
"title": "Textilpflege",
"href": "#"
}
]
},
{
"title": "Bekleidung & Ausrüstung",
"href": "#",
"items": [
{
"title": "Bekleidung",
"href": "#"
},
{
"title": "Brillen",
"href": "#"
},
{
"title": "Freizeitschuhe",
"href": "#"
},
{
"title": "Helme",
"href": "#"
},
{
"title": "Körperpflege",
"href": "#"
},
{
"title": "Rucksäcke",
"href": "#"
}
]
},
{
"title": "Bekleidung & Ausrüstung",
"href": "#",
"items": [
{
"title": "Bekleidung",
"href": "#"
},
{
"title": "Brillen",
"href": "#"
},
{
"title": "Freizeitschuhe",
"href": "#"
},
{
"title": "Helme",
"href": "#"
},
{
"title": "Körperpflege",
"href": "#"
},
{
"title": "Rucksäcke",
"href": "#"
},
{
"title": "Textilpflege",
"href": "#"
},
{
"title": "Veloschuhe",
"href": "#"
},
{
"title": "Bekleidung",
"href": "#"
},
{
"title": "Brillen",
"href": "#"
},
{
"title": "Freizeitschuhe",
"href": "#"
},
{
"title": "Helme",
"href": "#"
},
{
"title": "Körperpflege",
"href": "#"
},
{
"title": "Rucksäcke",
"href": "#"
},
{
"title": "Textilpflege",
"href": "#"
},
{
"title": "Veloschuhe",
"href": "#"
}
]
}
]
},
{
"title": "Marken",
"href": "#",
"items": [
{
"title": "Marke A",
"href": "#"
},
{
"title": "Marke B",
"href": "#"
},
{
"title": "Marke C",
"href": "#"
},
{
"title": "Marke D",
"href": "#"
},
{
"title": "Marke E",
"href": "#"
},
{
"title": "Marke F",
"href": "#"
},
{
"title": "Marke G",
"href": "#"
},
{
"title": "Marke H",
"href": "#"
},
{
"title": "Marke I",
"href": "#"
},
{
"title": "Marke J",
"href": "#"
}
]
}
]
}
},
"footer": {
"include": "...footer--with-navigation",
"navigation": null,
"meta": {
"copyright": "XXX Brand, All rights reserved XXX Brand",
"items": null
},
"contact": null
},
"cookiePopupBrick": {
"include": "...cookie-popup--without-editmode"
},
"bricks": [
{
"name": "heading",
"data": {
"variant": "left-aligned",
"title": "Impressum",
"level": "3"
}
},
{
"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>"
}
]
}
}
]
}
No notes defined.