<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>
<div class="bricks" data-below-breadcrumb="true">
<div class="hero--without-autoplay">
<div class="hero__container--inner-width">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="hero__item-container " style="background: #080d23">
<div class="hero__overlay-container ">
<div class="hero__overlay
">
<h3 class="hero__title">Durable</h3>
<div class="hero__content">Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!</div>
<div class="hero__button">
<a href="#" class="button--primary">Call to Action</a>
</div>
</div>
</div>
<div class="hero__background ">
<div class="image ">
<picture>
<img src="/example-assets/images/hero/image.jpg" class="image__img hero__image is-loading" alt="Test" srcset="/example-assets/images/hero/image.jpg 1x, /example-assets/images/hero/image.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hero__item-container " style="background: #080d23">
<div class="hero__overlay-container ">
<div class="hero__overlay
">
<h3 class="hero__title">Durable</h3>
<div class="hero__content">Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!</div>
<div class="hero__button">
<a href="#" class="button--primary">Call to Action</a>
</div>
</div>
</div>
<div class="hero__background ">
<div class="image ">
<picture>
<img src="/example-assets/images/hero/image.jpg" class="image__img hero__image is-loading" alt="Test" srcset="/example-assets/images/hero/image.jpg 1x, /example-assets/images/hero/image.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
</div>
<div class="hero__navigation-next"></div>
<div class="hero__navigation-prev"></div>
<div class="hero__pagination"></div>
</div>
</div>
</div>
<div class="text-image-left-right--half-width">
<div class="text-image-left-right__container">
<div class="text-image-left-right__row -media-right">
<div class="text-image-left-right__column">
<div class="image ">
<picture>
<img src="/example-assets/images/text-image-left-right/image.png" class="image__img text-image-left-right__image is-loading" alt="Test" srcset="/example-assets/images/text-image-left-right/image.png 1x, /example-assets/images/text-image-left-right/image.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="text-image-left-right__column">
<div class="text-image-left-right__content-container ">
<h3 class="text-image-left-right__title">Lebe deinen style</h3>
<div class="text-image-left-right__content">
<div class="wysiwyg-content">
<p>Fünfzig Jahre nach ihrem Debüt ist die Vespa Primavera bis heute ein Wahrzeichen für Jugend. Die Primavera steht als Symbol für Freiheit, Weltoffenheit und Dynamik. Stets bewundert und immer auf der Erfolgsspur, präsentiert sich die Primavera, in puncto Sicherheit und Technik optimiert, von ihrer besten Seite. Sie ist sportlich, charmant und nimmt Rücksicht auf unsere Umwelt. Agil, handlich, sicher und komfortabel rollt die jüngste Primavera auf 12“-großen Fünf-Speichen-Aluminiumrädern. Sparsam, laufruhig und leise sorgen ihre Einzylinder-Viertakt-iGet-Motoren für kraftvollen Antrieb und flotte Beschleunigung. LED-Technologie an Front und Heck stehen für beste Sicht und Sicherheit. Serienmäßig mit 1-Kanal-ABS, bietet die Primavera 125, mit Bike-Finder und Sitzbankschloss mit Remote Control, ein weiteres Plus an Sicherheit und Komfort.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-image-left-right--half-width">
<div class="text-image-left-right__container">
<div class="text-image-left-right__row -media-left">
<div class="text-image-left-right__column">
<div class="image ">
<picture>
<img src="/example-assets/images/text-image-left-right/image.png" class="image__img text-image-left-right__image is-loading" alt="Test" srcset="/example-assets/images/text-image-left-right/image.png 1x, /example-assets/images/text-image-left-right/image.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="text-image-left-right__column">
<div class="text-image-left-right__content-container ">
<h3 class="text-image-left-right__title">Lebe deinen style</h3>
<div class="text-image-left-right__content">
<div class="wysiwyg-content">
<p>Fünfzig Jahre nach ihrem Debüt ist die Vespa Primavera bis heute ein Wahrzeichen für Jugend. Die Primavera steht als Symbol für Freiheit, Weltoffenheit und Dynamik. Stets bewundert und immer auf der Erfolgsspur, präsentiert sich die Primavera, in puncto Sicherheit und Technik optimiert, von ihrer besten Seite. Sie ist sportlich, charmant und nimmt Rücksicht auf unsere Umwelt. Agil, handlich, sicher und komfortabel rollt die jüngste Primavera auf 12“-großen Fünf-Speichen-Aluminiumrädern. Sparsam, laufruhig und leise sorgen ihre Einzylinder-Viertakt-iGet-Motoren für kraftvollen Antrieb und flotte Beschleunigung. LED-Technologie an Front und Heck stehen für beste Sicht und Sicherheit. Serienmäßig mit 1-Kanal-ABS, bietet die Primavera 125, mit Bike-Finder und Sitzbankschloss mit Remote Control, ein weiteres Plus an Sicherheit und Komfort.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-family-slider">
<div class="product-family-slider__container">
<div class="swiper">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<div class="data-sheet-image--large-container">
<div class="image ">
<picture>
<img src="/example-assets/images/product-family-slider/product-image.jpg" class="image__img data-sheet-image__image is-loading" alt="Product Test" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="product-family-slider__item-container">
<h3 class="product-family-slider__title">VESPA GTS/GTS Super</h3>
<div class="product-family-slider__button-container">
<div class="product-family-slider__price-container">
<div class="product-family-slider__price-title">UVP inkl. 7.7% MwSt.</div>
<div class="price--extra-large">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current">
<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">0.00</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>0.00</del>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="button--primary">Jetzt konfigurieren</a>
</div>
<div class="product-family-slider__price-subline">Limitierte Einführungsaktion bis zum 31.05.2020</div>
</div>
<div class="data-sheet">
<div class="data-sheet__container">
<div class="data-sheet__description--large-container">
<div class="wysiwyg-content">
<p>GTS bleibt GTS, der wahre Sportsgeist der Vespa. Vom Design her ist die sogenannte Vespone ihren grosszügigen Formen treu geblieben, im technischen Bereich hingegen hat sie kräftig aufgerüstet: Mit der neuen Vorderradaufhängung (ESS) wurden die Fahreigenschaften deutlich verbessert. Ein USB-Anschluss im Handschuhfach – ein Must in der heutigen Zeit - ermöglicht das Laden eines Smartphones oder den Anschluss eines GPS.</p>
</div>
</div>
<dl class="data-sheet__data--large-container">
<dt class="data-sheet__data-name">Führerschein</dt>
<dd class="data-sheet__data-value">
GTS 125: Klasse A1 (Nur Grundkurs, keine Prüfungspflicht)GTS 300: Klasse A
</dd>
<dt class="data-sheet__data-name">Leistung</dt>
<dd class="data-sheet__data-value">
7.9 kW - 10.7 HP at 7,700 rpm
</dd>
<dt class="data-sheet__data-name">Farben (je nach Modell)</dt>
<dd class="data-sheet__data-value">
<div class="data-sheet__colors">
<div class="data-sheet__color" style="background-color:#d0021b"></div>
<div class="data-sheet__color" style="background-color:#f5a623"></div>
<div class="data-sheet__color" style="background-color:#333333"></div>
<div class="data-sheet__color" style="background-color:#adafb1"></div>
<div class="data-sheet__color" style="background-color:#320371"></div>
</div>
</dd>
</dl>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="data-sheet-image--large-container">
<div class="image ">
<picture>
<img src="/example-assets/images/product-family-slider/product-image.jpg" class="image__img data-sheet-image__image is-loading" alt="Product Test" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="product-family-slider__item-container">
<h3 class="product-family-slider__title">VESPA GTS/GTS Super</h3>
<div class="product-family-slider__button-container">
<div class="product-family-slider__price-container">
<div class="product-family-slider__price-title">UVP inkl. 7.7% MwSt.</div>
<div class="price--extra-large">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current">
<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">0.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="button--primary">Jetzt konfigurieren</a>
</div>
</div>
<div class="data-sheet">
<div class="data-sheet__container">
<div class="data-sheet__description--large-container">
<div class="wysiwyg-content">
<p>GTS bleibt GTS, der wahre Sportsgeist der Vespa. Vom Design her ist die sogenannte Vespone ihren grosszügigen Formen treu geblieben, im technischen Bereich hingegen hat sie kräftig aufgerüstet: Mit der neuen Vorderradaufhängung (ESS) wurden die Fahreigenschaften deutlich verbessert. Ein USB-Anschluss im Handschuhfach – ein Must in der heutigen Zeit - ermöglicht das Laden eines Smartphones oder den Anschluss eines GPS.</p>
</div>
</div>
<dl class="data-sheet__data--large-container">
<dt class="data-sheet__data-name">Führerschein</dt>
<dd class="data-sheet__data-value">
GTS 125: Klasse A1 (Nur Grundkurs, keine Prüfungspflicht)GTS 300: Klasse A
</dd>
<dt class="data-sheet__data-name">Leistung</dt>
<dd class="data-sheet__data-value">
7.9 kW - 10.7 HP at 7,700 rpm
</dd>
<dt class="data-sheet__data-name">Farben (je nach Modell)</dt>
<dd class="data-sheet__data-value">
<div class="data-sheet__colors">
<div class="data-sheet__color" style="background-color:#d0021b"></div>
<div class="data-sheet__color" style="background-color:#f5a623"></div>
<div class="data-sheet__color" style="background-color:#333333"></div>
<div class="data-sheet__color" style="background-color:#adafb1"></div>
<div class="data-sheet__color" style="background-color:#320371"></div>
</div>
</dd>
</dl>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="data-sheet-image--large-container">
<div class="image ">
<picture>
<img src="/example-assets/images/product-family-slider/product-image.jpg" class="image__img data-sheet-image__image is-loading" alt="Product Test" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="product-family-slider__item-container">
<h3 class="product-family-slider__title">VESPA GTS/GTS Super</h3>
<div class="product-family-slider__button-container">
<div class="product-family-slider__price-container">
<div class="product-family-slider__price-title">UVP inkl. 7.7% MwSt.</div>
<div class="price--extra-large">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current">
<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">0.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="button--primary">Jetzt konfigurieren</a>
</div>
</div>
<div class="data-sheet">
<div class="data-sheet__container">
<div class="data-sheet__description--large-container">
<div class="wysiwyg-content">
<p>GTS bleibt GTS, der wahre Sportsgeist der Vespa. Vom Design her ist die sogenannte Vespone ihren grosszügigen Formen treu geblieben, im technischen Bereich hingegen hat sie kräftig aufgerüstet: Mit der neuen Vorderradaufhängung (ESS) wurden die Fahreigenschaften deutlich verbessert. Ein USB-Anschluss im Handschuhfach – ein Must in der heutigen Zeit - ermöglicht das Laden eines Smartphones oder den Anschluss eines GPS.</p>
</div>
</div>
<dl class="data-sheet__data--large-container">
<dt class="data-sheet__data-name">Führerschein</dt>
<dd class="data-sheet__data-value">
GTS 125: Klasse A1 (Nur Grundkurs, keine Prüfungspflicht)GTS 300: Klasse A
</dd>
<dt class="data-sheet__data-name">Leistung</dt>
<dd class="data-sheet__data-value">
7.9 kW - 10.7 HP at 7,700 rpm
</dd>
<dt class="data-sheet__data-name">Farben (je nach Modell)</dt>
<dd class="data-sheet__data-value">
<div class="data-sheet__colors">
<div class="data-sheet__color" style="background-color:#d0021b"></div>
<div class="data-sheet__color" style="background-color:#f5a623"></div>
<div class="data-sheet__color" style="background-color:#333333"></div>
<div class="data-sheet__color" style="background-color:#adafb1"></div>
<div class="data-sheet__color" style="background-color:#320371"></div>
</div>
</dd>
</dl>
</div>
</div>
</li>
</ul>
</div>
<div class="product-family-slider__button-prev"></div>
<div class="product-family-slider__button-next"></div>
</div>
</div>
<div class="heading--centered">
<div class="heading__container">
<h3 class="heading__title" id="three-column-text-image">Three column text image</h3>
</div>
</div>
<div class="iframe">
<div class="iframe__container">
<iframe class="iframe__iframe" src="https://www.cando-image.com" allowfullscreen=""></iframe>
</div>
</div>
<div class="multi-column-text-image ">
<div class="multi-column-text-image__container">
<ul class="multi-column-text-image__list--3">
<li class="multi-column-text-image__list-item">
<div class="text-image--left-aligned ">
<div class="text-image__container">
<div class="image ">
<picture>
<img src="/example-assets/images/text-image/image.jpg" class="image__img text-image__image is-loading" alt="Test" srcset="/example-assets/images/text-image/image.jpg 1x, /example-assets/images/text-image/image.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<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>Das Original – zum besten Preis. Profitiere vom besten Angebot der Schweiz mit exklusivem Zubehör.</p>
</div>
</div>
<div class="text-image__button">
<a href="#" class="button--primary-small">Mehr erfahren</a>
</div>
</div>
</div>
</div>
</li>
<li class="multi-column-text-image__list-item">
<div class="text-image--left-aligned ">
<div class="text-image__container">
<div class="image ">
<picture>
<img src="/example-assets/images/text-image/image.jpg" class="image__img text-image__image is-loading" alt="Test" srcset="/example-assets/images/text-image/image.jpg 1x, /example-assets/images/text-image/image.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<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>Das Original – zum besten Preis. Profitiere vom besten Angebot der Schweiz mit exklusivem Zubehör.</p>
</div>
</div>
<div class="text-image__button">
<a href="#" class="button--primary-small">Mehr erfahren</a>
</div>
</div>
</div>
</div>
</li>
<li class="multi-column-text-image__list-item">
<div class="text-image--left-aligned ">
<div class="text-image__container">
<div class="image ">
<picture>
<img src="/example-assets/images/text-image/image.jpg" class="image__img text-image__image is-loading" alt="Test" srcset="/example-assets/images/text-image/image.jpg 1x, /example-assets/images/text-image/image.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<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>Das Original – zum besten Preis. Profitiere vom besten Angebot der Schweiz mit exklusivem Zubehör.</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 class="multi-column-image-overlay">
<div class="multi-column-image-overlay__container">
<ul class="multi-column-image-overlay__list--4">
<li class="multi-column-image-overlay__list-item">
<a href="#">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Shimano Unisex Waterproof</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/text-image/guy.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Shimano Unisex Waterproof" srcset="/example-assets/images/text-image/guy.jpg 1x, /example-assets/images/text-image/guy.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
<li class="multi-column-image-overlay__list-item">
<a href="#">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Shimano Unisex Waterproof</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/text-image/guy.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Shimano Unisex Waterproof" srcset="/example-assets/images/text-image/guy.jpg 1x, /example-assets/images/text-image/guy.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
<li class="multi-column-image-overlay__list-item">
<a href="#">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Shimano Unisex Waterproof</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/text-image/guy.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Shimano Unisex Waterproof" srcset="/example-assets/images/text-image/guy.jpg 1x, /example-assets/images/text-image/guy.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
<li class="multi-column-image-overlay__list-item">
<a href="#">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Shimano Unisex Waterproof</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/text-image/guy.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Shimano Unisex Waterproof" srcset="/example-assets/images/text-image/guy.jpg 1x, /example-assets/images/text-image/guy.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="heading--left-aligned">
<div class="heading__container">
<h3 class="heading__title" id="one-column-text">One Column Text</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 <strong>ipsum</strong> dolor sit amet, <a href="#">consetetur</a> 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.</p>
<ul>
<li>Stet clita</li>
<li>kasd gubergren</li>
</ul>
<p>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<br />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 class="multi-column-banner--1">
<div class="multi-column-banner__container">
<div class="multi-column-banner__column">
<div class="multi-column-banner__item-container">
<div class="multi-column-banner__overlay-container">
<div class="multi-column-banner__overlay">
<h3 class="multi-column-banner__title">Durable</h3>
<div class="multi-column-banner__content">Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!</div>
<div class="multi-column-banner__button">
<a href="#" class="button--primary-small">Call to Action</a>
</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/multi-column-banner/image.png" class="image__img multi-column-banner__background is-loading" alt="Durable" srcset="/example-assets/images/multi-column-banner/image.png 1x, /example-assets/images/multi-column-banner/image.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
</div>
<div class="multi-column-banner--2">
<div class="multi-column-banner__container">
<div class="multi-column-banner__column">
<div class="multi-column-banner__item-container">
<div class="multi-column-banner__overlay-container">
<div class="multi-column-banner__overlay">
<h3 class="multi-column-banner__title">Durable</h3>
<div class="multi-column-banner__content">Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!</div>
<div class="multi-column-banner__button">
<a href="#" class="button--primary-small">Call to Action</a>
</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/multi-column-banner/image.png" class="image__img multi-column-banner__background is-loading" alt="Durable" srcset="/example-assets/images/multi-column-banner/image.png 1x, /example-assets/images/multi-column-banner/image.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
<div class="multi-column-banner__column">
<div class="multi-column-banner__item-container">
<div class="multi-column-banner__overlay-container">
<div class="multi-column-banner__overlay">
<h3 class="multi-column-banner__title">Durable</h3>
<div class="multi-column-banner__content">Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!</div>
<div class="multi-column-banner__button">
<a href="#" class="button--primary-small">Call to Action</a>
</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/multi-column-banner/image.png" class="image__img multi-column-banner__background is-loading" alt="Durable" srcset="/example-assets/images/multi-column-banner/image.png 1x, /example-assets/images/multi-column-banner/image.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</div>
</div>
<div class="form-builder">
<div class="form-builder__container">
<form class="dynamic-form" action="/some-target/" method="POST" data-validation="false" data-jump-to-error-message="true">
<div class="dynamic-form__message--full-width">
<div class="message--error is-hidden">
<div class="message__container--disabled">
<span class="visually-hidden">Error message</span>
<div class="message__content">
<p class="message__text"><b>Error</b>. The form is not valid! Please check the fields in this dialog</p>
</div>
<div class="message__close-button">
<button class="button-icon--icon-regular -icon-close" type="button" name="close-big-menu" value="yes">
<span class="visually-hidden">Schliessen</span>
</button>
</div>
</div>
</div>
</div>
<fieldset class="dynamic-form__fieldset--full-width">
<div class="dynamic-form__element">
<div class="select--light is-initialized with-label">
<div class="select__wrapper">
<select class="select__select" id="salutation" name="salutation" required>
<option value="" disabled selected>Bitte wählen</option>
<option value="mr">Herr</option>
<option value="ms">Frau</option>
</select>
<label class="select__label" for="salutation">Anrede
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="firstName" type="text" name="firstName" required />
<label class="text-field__label" for="firstName">Vorname
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="lastName" type="text" name="lastName" required />
<label class="text-field__label" for="lastName">Nachname
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="mail" type="email" name="mail" required />
<label class="text-field__label" for="mail">E-Mail Adresse
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element--zip-city">
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="zip" type="text" name="zip" required />
<label class="text-field__label" for="zip">PLZ
*
</label>
</div>
</div>
<div class="text-field--light is-initialized">
<div class="text-field__wrapper">
<input class="text-field__input" id="city" type="text" name="city" required />
<label class="text-field__label" for="city">Ort
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="select--light is-initialized is-filled-in with-label">
<div class="select__wrapper">
<select class="select__select" id="country" name="country" required>
<option value="" disabled>Bitte wählen</option>
<option value="ch" selected="selected">Schweiz</option>
<option value="de">Deutschland</option>
<option value="fr">Frankreich</option>
<option value="it">Italien</option>
<option value="li">Lichtenstein</option>
</select>
<label class="select__label" for="country">Land
*
</label>
</div>
</div>
</div>
<div class="dynamic-form__element">
<div class="text-area--light is-initialized">
<div class="text-area__wrapper">
<textarea class="text-area__input" id="message" name="message" required maxlength="999">
</textarea>
<label class="text-area__label" for="message">Nachricht
*
</label>
</div>
</div>
</div>
</fieldset>
<button class="button--primary-small" type="submit">Absenden</button>
</form>
</div>
</div>
<div class="heading--centered">
<div class="heading__container">
<h3 class="heading__title" id="social-feed">Social Feed</h3>
</div>
</div>
<div class="social-feed">
<script src="https://assets.juicer.io/embed.js" async defer></script>
<link href="https://assets.juicer.io/embed.css" media="all" rel="stylesheet" type="text/css" />
<div class="social-feed__container">
<ul class="juicer-feed" data-feed-id="de_sede_switzerland" data-per="25" data-pages="1" data-truncate="80" data-gutter="16"></ul>
</div>
</div>
</div>
</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/landing-page/landing-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"
},
"footer": {
"include": "...footer--with-navigation"
},
"cookiePopupBrick": {
"include": "...cookie-popup--without-editmode"
},
"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
}
]
},
"bricks": [
{
"name": "hero",
"data": {
"headingLevel": 3,
"innerWidth": true,
"items": [
{
"title": "Durable",
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"button": {
"variant": "primary",
"type": "a",
"href": "#",
"title": "Call to Action"
},
"image": {
"alt": "Test",
"src": "/example-assets/images/hero/image.jpg",
"src2x": "/example-assets/images/hero/image.jpg"
},
"background": "#080d23"
},
{
"title": "Durable",
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"button": {
"variant": "primary",
"type": "a",
"href": "#",
"title": "Call to Action"
},
"image": {
"alt": "Test",
"src": "/example-assets/images/hero/image.jpg",
"src2x": "/example-assets/images/hero/image.jpg"
},
"background": "#080d23"
}
]
}
},
{
"name": "text-image-left-right",
"data": {
"headingLevel": "3",
"title": "Lebe deinen style",
"content": "<p>Fünfzig Jahre nach ihrem Debüt ist die Vespa Primavera bis heute ein Wahrzeichen für Jugend. Die Primavera steht als Symbol für Freiheit, Weltoffenheit und Dynamik. Stets bewundert und immer auf der Erfolgsspur, präsentiert sich die Primavera, in puncto Sicherheit und Technik optimiert, von ihrer besten Seite. Sie ist sportlich, charmant und nimmt Rücksicht auf unsere Umwelt. Agil, handlich, sicher und komfortabel rollt die jüngste Primavera auf 12“-großen Fünf-Speichen-Aluminiumrädern. Sparsam, laufruhig und leise sorgen ihre Einzylinder-Viertakt-iGet-Motoren für kraftvollen Antrieb und flotte Beschleunigung. LED-Technologie an Front und Heck stehen für beste Sicht und Sicherheit. Serienmäßig mit 1-Kanal-ABS, bietet die Primavera 125, mit Bike-Finder und Sitzbankschloss mit Remote Control, ein weiteres Plus an Sicherheit und Komfort.</p>",
"image": {
"alt": "Test",
"src": "/example-assets/images/text-image-left-right/image.png",
"src2x": "/example-assets/images/text-image-left-right/image.png"
},
"mediaAlign": "right",
"centered": false,
"imageSize": "half-width"
}
},
{
"name": "text-image-left-right",
"data": {
"headingLevel": "3",
"title": "Lebe deinen style",
"content": "<p>Fünfzig Jahre nach ihrem Debüt ist die Vespa Primavera bis heute ein Wahrzeichen für Jugend. Die Primavera steht als Symbol für Freiheit, Weltoffenheit und Dynamik. Stets bewundert und immer auf der Erfolgsspur, präsentiert sich die Primavera, in puncto Sicherheit und Technik optimiert, von ihrer besten Seite. Sie ist sportlich, charmant und nimmt Rücksicht auf unsere Umwelt. Agil, handlich, sicher und komfortabel rollt die jüngste Primavera auf 12“-großen Fünf-Speichen-Aluminiumrädern. Sparsam, laufruhig und leise sorgen ihre Einzylinder-Viertakt-iGet-Motoren für kraftvollen Antrieb und flotte Beschleunigung. LED-Technologie an Front und Heck stehen für beste Sicht und Sicherheit. Serienmäßig mit 1-Kanal-ABS, bietet die Primavera 125, mit Bike-Finder und Sitzbankschloss mit Remote Control, ein weiteres Plus an Sicherheit und Komfort.</p>",
"image": {
"alt": "Test",
"src": "/example-assets/images/text-image-left-right/image.png",
"src2x": "/example-assets/images/text-image-left-right/image.png"
},
"mediaAlign": "left",
"centered": false,
"imageSize": "half-width"
}
},
{
"name": "product-family-slider",
"data": {
"headingLevel": "3",
"items": [
{
"title": "VESPA GTS/GTS Super",
"button": {
"variant": "primary",
"type": "a",
"href": "#",
"title": "Jetzt konfigurieren"
},
"priceTitle": "UVP inkl. 7.7% MwSt.",
"price": {
"variant": "extra-large",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "5045.-",
"listPrice": "6095.-",
"from": true
}
},
"priceSubline": "Limitierte Einführungsaktion bis zum 31.05.2020",
"dataSheetImage": {
"variant": "large-container",
"image": {
"alt": "Product Test",
"src": "/example-assets/images/product-family-slider/product-image.jpg"
}
},
"dataSheet": {
"variant": "large-container",
"description": "<p>GTS bleibt GTS, der wahre Sportsgeist der Vespa. Vom Design her ist die sogenannte Vespone ihren grosszügigen Formen treu geblieben, im technischen Bereich hingegen hat sie kräftig aufgerüstet: Mit der neuen Vorderradaufhängung (ESS) wurden die Fahreigenschaften deutlich verbessert. Ein USB-Anschluss im Handschuhfach – ein Must in der heutigen Zeit - ermöglicht das Laden eines Smartphones oder den Anschluss eines GPS.</p>",
"data": [
{
"title": "Führerschein",
"value": "GTS 125: Klasse A1 (Nur Grundkurs, keine Prüfungspflicht)GTS 300: Klasse A",
"type": "text"
},
{
"title": "Leistung",
"value": "7.9 kW - 10.7 HP at 7,700 rpm",
"type": "text"
},
{
"title": "Farben (je nach Modell)",
"value": [
"#d0021b",
"#f5a623",
"#333333",
"#adafb1",
"#320371"
],
"type": "colors"
}
]
}
},
{
"title": "VESPA GTS/GTS Super",
"button": {
"variant": "primary",
"type": "a",
"href": "#",
"title": "Jetzt konfigurieren"
},
"priceTitle": "UVP inkl. 7.7% MwSt.",
"price": {
"variant": "extra-large",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "5045.-",
"from": true
}
},
"dataSheetImage": {
"variant": "large-container",
"image": {
"alt": "Product Test",
"src": "/example-assets/images/product-family-slider/product-image.jpg"
}
},
"dataSheet": {
"variant": "large-container",
"description": "<p>GTS bleibt GTS, der wahre Sportsgeist der Vespa. Vom Design her ist die sogenannte Vespone ihren grosszügigen Formen treu geblieben, im technischen Bereich hingegen hat sie kräftig aufgerüstet: Mit der neuen Vorderradaufhängung (ESS) wurden die Fahreigenschaften deutlich verbessert. Ein USB-Anschluss im Handschuhfach – ein Must in der heutigen Zeit - ermöglicht das Laden eines Smartphones oder den Anschluss eines GPS.</p>",
"data": [
{
"title": "Führerschein",
"value": "GTS 125: Klasse A1 (Nur Grundkurs, keine Prüfungspflicht)GTS 300: Klasse A",
"type": "text"
},
{
"title": "Leistung",
"value": "7.9 kW - 10.7 HP at 7,700 rpm",
"type": "text"
},
{
"title": "Farben (je nach Modell)",
"value": [
"#d0021b",
"#f5a623",
"#333333",
"#adafb1",
"#320371"
],
"type": "colors"
}
]
}
},
{
"title": "VESPA GTS/GTS Super",
"button": {
"variant": "primary",
"type": "a",
"href": "#",
"title": "Jetzt konfigurieren"
},
"priceTitle": "UVP inkl. 7.7% MwSt.",
"price": {
"variant": "extra-large",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "5045.-",
"from": true
}
},
"dataSheetImage": {
"variant": "large-container",
"image": {
"alt": "Product Test",
"src": "/example-assets/images/product-family-slider/product-image.jpg"
}
},
"dataSheet": {
"variant": "large-container",
"description": "<p>GTS bleibt GTS, der wahre Sportsgeist der Vespa. Vom Design her ist die sogenannte Vespone ihren grosszügigen Formen treu geblieben, im technischen Bereich hingegen hat sie kräftig aufgerüstet: Mit der neuen Vorderradaufhängung (ESS) wurden die Fahreigenschaften deutlich verbessert. Ein USB-Anschluss im Handschuhfach – ein Must in der heutigen Zeit - ermöglicht das Laden eines Smartphones oder den Anschluss eines GPS.</p>",
"data": [
{
"title": "Führerschein",
"value": "GTS 125: Klasse A1 (Nur Grundkurs, keine Prüfungspflicht)GTS 300: Klasse A",
"type": "text"
},
{
"title": "Leistung",
"value": "7.9 kW - 10.7 HP at 7,700 rpm",
"type": "text"
},
{
"title": "Farben (je nach Modell)",
"value": [
"#d0021b",
"#f5a623",
"#333333",
"#adafb1",
"#320371"
],
"type": "colors"
}
]
}
}
]
}
},
{
"name": "heading",
"data": {
"variant": "centered",
"title": "Three column text image",
"level": "3"
}
},
{
"name": "iframe",
"data": {
"url": "https://www.cando-image.com"
}
},
{
"name": "multi-column-text-image",
"folder": "multi-column-text-image",
"data": {
"headingLevel": "4",
"items": [
{
"title": "Lorem, IPSUM dolor",
"content": "<p>Das Original – zum besten Preis. Profitiere vom besten Angebot der Schweiz mit exklusivem Zubehör.</p>",
"image": {
"alt": "Test",
"src": "/example-assets/images/text-image/image.jpg",
"src2x": "/example-assets/images/text-image/image.jpg"
},
"button": {
"title": "Mehr erfahren",
"href": "#"
}
},
{
"title": "Lorem, IPSUM dolor",
"content": "<p>Das Original – zum besten Preis. Profitiere vom besten Angebot der Schweiz mit exklusivem Zubehör.</p>",
"image": {
"alt": "Test",
"src": "/example-assets/images/text-image/image.jpg",
"src2x": "/example-assets/images/text-image/image.jpg"
},
"button": {
"title": "Mehr erfahren",
"href": "#"
}
},
{
"title": "Lorem, IPSUM dolor",
"content": "<p>Das Original – zum besten Preis. Profitiere vom besten Angebot der Schweiz mit exklusivem Zubehör.</p>",
"image": {
"alt": "Test",
"src": "/example-assets/images/text-image/image.jpg",
"src2x": "/example-assets/images/text-image/image.jpg"
},
"button": {
"title": "Mehr erfahren",
"href": "#"
}
}
]
}
},
{
"name": "multi-column-image-overlay",
"data": {
"headingLevel": 3,
"items": [
{
"title": "Shimano Unisex Waterproof",
"href": "#",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/text-image/guy.jpg",
"src2x": "/example-assets/images/text-image/guy.jpg",
"alt": "Shimano Unisex Waterproof"
}
},
{
"title": "Shimano Unisex Waterproof",
"href": "#",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/text-image/guy.jpg",
"src2x": "/example-assets/images/text-image/guy.jpg",
"alt": "Shimano Unisex Waterproof"
}
},
{
"title": "Shimano Unisex Waterproof",
"href": "#",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/text-image/guy.jpg",
"src2x": "/example-assets/images/text-image/guy.jpg",
"alt": "Shimano Unisex Waterproof"
}
},
{
"title": "Shimano Unisex Waterproof",
"href": "#",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/text-image/guy.jpg",
"src2x": "/example-assets/images/text-image/guy.jpg",
"alt": "Shimano Unisex Waterproof"
}
}
]
}
},
{
"name": "heading",
"data": {
"variant": "left-aligned",
"title": "One Column Text",
"level": "3"
}
},
{
"name": "multi-column-text-image",
"folder": "multi-column-text-image",
"data": {
"headingLevel": "4",
"items": [
{
"title": "Lorem, IPSUM dolor",
"content": "<p>Lorem <strong>ipsum</strong> dolor sit amet, <a href=\"#\">consetetur</a> 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.</p><ul><li>Stet clita</li><li>kasd gubergren</li></ul><p>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<br/>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>"
}
]
}
},
{
"name": "multi-column-banner",
"data": {
"headingLevel": 3,
"items": [
{
"title": "Durable",
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"image": {
"src": "/example-assets/images/multi-column-banner/image.png",
"src2x": "/example-assets/images/multi-column-banner/image.png",
"alt": "Durable"
},
"button": {
"variant": "primary-small",
"type": "a",
"href": "#",
"title": "Call to Action"
}
}
]
}
},
{
"name": "multi-column-banner",
"data": {
"headingLevel": 3,
"items": [
{
"title": "Durable",
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"image": {
"src": "/example-assets/images/multi-column-banner/image.png",
"src2x": "/example-assets/images/multi-column-banner/image.png",
"alt": "Durable"
},
"button": {
"variant": "primary-small",
"type": "a",
"href": "#",
"title": "Call to Action"
}
},
{
"title": "Durable",
"content": "Informieren und Präsentieren leicht gemacht. Entdecken Sie jetzt die neuen Produkte!",
"image": {
"src": "/example-assets/images/multi-column-banner/image.png",
"src2x": "/example-assets/images/multi-column-banner/image.png",
"alt": "Durable"
},
"button": {
"variant": "primary-small",
"type": "a",
"href": "#",
"title": "Call to Action"
}
}
]
}
},
{
"name": "form-builder",
"data": {
"form": {
"variant": "full-width",
"form": {
"method": "POST",
"action": "/some-target/",
"jumpToErrorMessage": true,
"message": {
"closeButton": {
"variant": "icon-regular",
"title": "Schliessen",
"icon": "close",
"type": "button",
"role": "button",
"name": "close-big-menu",
"value": "yes"
},
"isHidden": true,
"container": false,
"labels": {
"info": "Information message",
"error": "Error message",
"warning": "Warning message",
"success": "Success message"
},
"variant": "error",
"message": "<b>Error</b>. The form is not valid! Please check the fields in this dialog"
}
},
"fields": [
{
"component": "select",
"variant": "light",
"id": "salutation",
"name": "salutation",
"label": "Anrede",
"required": true,
"disabled": false,
"selected": false,
"options": {
"mr": "Herr",
"ms": "Frau"
},
"choose": "Bitte wählen",
"error": ""
},
{
"component": "text-field",
"variant": "light",
"id": "firstName",
"name": "firstName",
"label": "Vorname",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field",
"variant": "light",
"id": "lastName",
"name": "lastName",
"label": "Nachname",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field",
"variant": "light",
"id": "mail",
"name": "mail",
"label": "E-Mail Adresse",
"required": true,
"value": "",
"disabled": false,
"type": "email",
"autocomplete": false
},
{
"component": "text-field-zip-city",
"variant": "light",
"id": "zip",
"name": "zip",
"label": "PLZ",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "text-field-zip-city",
"variant": "light",
"id": "city",
"name": "city",
"label": "Ort",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": false,
"error": ""
},
{
"component": "select",
"variant": "light",
"id": "country",
"name": "country",
"label": "Land",
"required": true,
"disabled": false,
"selected": "ch",
"options": {
"ch": "Schweiz",
"de": "Deutschland",
"fr": "Frankreich",
"it": "Italien",
"li": "Lichtenstein"
},
"choose": "Bitte wählen",
"error": ""
},
{
"component": "text-area",
"variant": "light",
"id": "message",
"name": "message",
"label": "Nachricht",
"required": true,
"value": "",
"disabled": false,
"maxlength": 999,
"error": "",
"helper": ""
}
],
"submitButton": {
"variant": "primary-small",
"type": "button",
"title": "Absenden"
}
}
}
},
{
"name": "heading",
"data": {
"variant": "centered",
"title": "Social Feed",
"level": "3"
}
},
{
"name": "social-feed",
"data": {
"feedId": "de_sede_switzerland",
"maxItems": "25",
"pages": "1",
"truncate": "80",
"gutter": "16"
}
}
]
}
No notes defined.