:root {
    --scrollbar-width: 0;
    --margin-side: 10%;
    --color: rgb(0, 0, 0);
    --color4: rgb(255, 255, 255);
    --color3: rgb(198, 25, 50);
    --color1: rgb(184, 184, 184);
    --color2: rgb(248, 248, 248);
    --color5: rgb(239, 239, 239);
    --color6: rgb(100, 100, 100);
    --color7: rgb(150, 150, 150);
    --color8: rgb(220, 220, 220);
    --color9: rgb(200, 200, 200);
    --text-line-height: 1.5em;
    --h-line-height: 1.2em;
    --h2-line-height: 1.2em;
    --h3-line-height: 1.2em;
    --filter-line-height: 1.2em;
    --font-size-large: 2em;
    --font-size-medium: 1.25em;
    --font-size-base: 1em;
    --font-size-small: 0.9em;
    --font-size-xsmall: 0.75em;
    --h-font-size: var(--font-size-large);
    --h2-font-size: var(--font-size-medium);
    --text-font-size: var(--font-size-medium);
    --dealerlist-font-size: var(--font-size-medium);
    --productsButton-font-size: var(--font-size-medium);
    --connectionTitle-font-size: var(--font-size-base);
    --h3-font-size: var(--font-size-base);
    --tile-area-title-font-size: var(--font-size-base);
    --navigation-font-size: var(--font-size-base);
    --footer-rights-font-size: var(--font-size-small);
    --search-font-size: var(--font-size-base);
    --glossar-font-size: var(--font-size-small);
    --company-title-font-size: var(--font-size-xsmall);
    --catalogueNumber-font-size: var(--font-size-xsmall);
    --catalogueFormat-font-size: var(--font-size-xsmall);
    --catalogueLinks-font-size: var(--font-size-xsmall);
    --pressbox-font-size: var(--font-size-xsmall);
    --home-arrow-font-size: var(--font-size-large);
}

body[data-brand="delock"] {
    --brand-color: rgb(255, 204, 0);
    --brand-sub-color: rgb(198, 25, 50);
    --categorie-button: var(--brand-color);
    --categorie-button-text: var(--color);
    --help-center: var(--brand-color);
    --logo-img: url(../png/logo_6.png);
    --logo-img-width: 185px;
    --logo-img-height: 61px;
}

body[data-brand="navilock"] {
    --brand-color: rgb(171, 205, 5);
    --brand-sub-color: rgb(0, 72, 139);
    --categorie-button: var(--brand-sub-color);
    --categorie-button-text: var(--color4);
    --help-center: var(--brand-color);
    --logo-img: url(../png/logo_3.png);
    --logo-img-width: 187px;
    --logo-img-height: 61px;
}

body[data-brand="tragant"] {
    --brand-color: rgb(220, 220, 220);
    --brand-sub-color: rgb(196, 6, 51);
    --categorie-button: var(--brand-sub-color);
    --categorie-button-text: var(--color4);
    --help-center: var(--color4);
    --logo-img: url(../png/logo_4_alt.png);
    --logo-img-width: 250px;
    --logo-img-height: 50px;
}

@media (max-width: 1023px) {
    :root {
        --margin-side: 5%;
        --text-line-height: 1.4em;
        --h2-line-height: 1.1em;
        --font-size-large: 1.9em;
        --font-size-medium: 1em;
        --font-size-small: 0.9em;
        --font-size-xsmall: 0.9em;
    }
}

@media print {
    :root {
        --text-line-height: 18px;
        --h-line-height: 18px;
        --h2-line-height: 18px;
        --h3-line-height: 18px;
        --filter-line-height: 18px;
        --font-size-large: 20px;
        --font-size-medium: 15px;
        --font-size-base: 14px;
        --font-size-small: 13px;
        --font-size-xsmall: 12px;
    }
}

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
}

body {
    color: var(--color);
    letter-spacing: 0px;
    min-width: 360px;
    display: flex;
    flex-direction: column;
}

body.home {
    background-color: var(--color5);
}

body.scrollbarHide {
    overflow: hidden;
    height: 100vh;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body.categorie::before {
    content: " ";
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, .5);
    z-index: 1;
    width: 100vw;
    height: 100vh;
}

body, input, textarea, select, button {
    font-size: var(--text-font-size);
    line-height: var(--text-line-height);
    font-weight: 400;
    font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
}

button {
    font-size: var(--font-size-base);
}

input[type=text], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=password], textarea, select {
    padding: 14px 14px 12px;
    border: 0;
    width: 100%;
    font-size: var(--font-size-base);
    color: var(--color);
    background-color: var(--color2);
}

select {
    padding: 17px 14px 15px;
}

input[type=search] {
    background-color: var(--color4);
}

input[type=submit] {
    padding: 15px 30px;
    background-color: var(--brand-sub-color);
    font-size: var(--search-font-size);
    color: var(--color4);
    border: 0;
    box-shadow: 3px 3px 5px var(--color6);
    cursor: pointer;
}

input:disabled, textarea:disabled, select:disabled {
    cursor: not-allowed;
    color: var(--color7);
}

input[type=checkbox], input[type=radio] {
    width: 20px;
    height: 20px;
}

textarea {
    min-height: 150px;
    resize: none;
}

h1 {
    font-size: var(--h-font-size);
    line-height: var(--h-line-height);
    margin-bottom: 40px;
}

h2 {
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    margin-bottom: 8px;
}

h3 {
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    margin-bottom: 5px;
}

a, a:hover, .active {
    color: var(--brand-sub-color);
}

img {
    border: 0;
    max-width: 100%;
}

ul, ol {
    margin-left: 20px;
}

ul li::marker {
    color: var(--brand-sub-color);
}

table {
    border: 0px;
    border-spacing: 0;
    border-collapse: collapse;
}

header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
}

.headerTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0px 120px;
    flex-wrap: wrap;
    background-color: var(--brand-color);
    flex: 0 0 100%;
    padding: 20px var(--margin-side);
}

.logo {
    background-size: contain;
    background-repeat: no-repeat;
    width: var(--logo-img-width);
    height: var(--logo-img-height);
    background-image: var(--logo-img);
    flex: 0 0 auto;
}

.menu-toggle {
    display: none;
}

.menu-icon {
    display: none;
    flex-direction: column;
    cursor: pointer;
    width: 30px;
    height: 30px;
    justify-content: space-around;
}

.menu-icon span {
    display: block;
    width: 100%;
    height: 4px;
    background-color: var(--color);
    transition: 0.3s;
}

.menu-toggle:checked + .menu-icon span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 10px);
    width: 37px;
}

.menu-toggle:checked + .menu-icon span:nth-child(2) {
    opacity: 0;
}

.menu-toggle:checked + .menu-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -10px);
    width: 37px;
}

.search {
    flex: 1;
    position: relative;
}

.search input[type=search] {
    padding: 14px 55px 12px 30px;
    border-radius: 25px;
    font-size: var(--search-font-size);
}

.search button {
    cursor: pointer;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 20px;
    position: absolute;
    right: 10px;
    top: 4px;
    padding-top: 5px;
    background-color: transparent;
}

.searchInfo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.headerNav {
    padding: 15px var(--margin-side) 15px var(--margin-side);
    display: flex;
    flex: 0 0 100%;
    background-color: var(--color5);
    justify-content: space-between;
    align-items: center;
}

body[data-brand="delock"] .headerNav, body[data-brand="navilock"] .headerNav {
    padding: 0px var(--margin-side) 0px var(--margin-side);
}

.headerNav ul {
    display: flex;
    background-color: var(--color5);
    justify-content: flex-start;
    align-items: center;
    margin-left: 0px;
    list-style-type: none;
    font-weight: bold;
    font-size: var(--navigation-font-size);
    gap: 0 50px;
}

.categorieMargin {
    margin-left: -40px;
}

.headerNav a {
    text-decoration: none;
    color: var(--color);
}

body[data-brand="delock"] .headerNav ul li .categorieButton, body[data-brand="navilock"] .headerNav ul li .categorieButton {
    display: flex;
    padding-top: 25px;
    padding-bottom: 25px;
    border:1px solid var(--color);
}

.headerNav a.active, .headerNav a:hover {
    color: var(--brand-sub-color);
}

.categorieButton {
    background-color: var(--color1);
    font-size: var(--navigation-font-size);
    justify-content: space-between;
    align-items: center;
}

body[data-brand="delock"] .headerNav ul li .categorieButton, body[data-brand="navilock"] .headerNav ul li .categorieButton {
    background-color: inherit;
    border: 0;
}

body[data-brand="delock"] .headerNav ul li .categorieButton > a, body[data-brand="navilock"] .headerNav ul li .categorieButton > a {
    padding: 0;
    color: var(--color);
}

body[data-brand="delock"] .headerNav ul li .categorieButton:hover > a, body[data-brand="navilock"] .headerNav ul li .categorieButton:hover > a {
    color: var(--brand-sub-color);
}

.categorieButton2 {
    background-color: var(--color1);
}

.categorieButton2:hover {
    background-color: var(--categorie-button);
}

.categorieButton > a {
    display: block;
    color: var(--categorie-button-text);
    padding: 13px 23px 13px 23px;
}

.categorieButton > a:hover {
    color: var(--categorie-button-text);
}

.categorieButton2 > a {
    color: var(--color);
}

.categorieButton2:hover > a {
    color: var(--color);
    color: var(--categorie-button-text)
}

.categories {
    display: none;
    position: absolute;
    top: 100%;
    left: var(--margin-side);
    right: var(--margin-side);
    height: calc(100vh - 187px);
    min-height: calc(100vh - 187px);
    max-height: calc(100vh - 187px);
    background-color: var(--color4);
    font-weight: normal;
}

.categories::before {
    position: absolute;
    content: " ";
    top: -15px;
    left: 0px;
    right: 0px;
    height: 15px;
}

.categoriesShow {
    display: flex;
}

.categories a {
    padding: 3px 5px;
}

.specifications {
    overflow: auto;
    display: flex;
    flex: 1;
}

.categories a.active, .categories a:hover {
    color: var(--brand-sub-color);
    background-color: var(--color5);
}

.categoriesFirst {
    flex: 0 0 300px;
    padding: 10px;
    border-right: 1px solid var(--color5);
    overflow: auto;
}

.categoriesFirst a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.categoriesFirst a::after {
    content: " ";
    width: 6px;
    height: 6px;
    display: inline-block;
    border-right: 2px solid var(--color);
    border-bottom: 2px solid var(--color);
    transform: rotate(-45deg);
    transform-origin: 0px 10px;
}

.categoriesFirst a:hover::after {
    border-right: 2px solid var(--brand-sub-color);
    border-bottom: 2px solid var(--brand-sub-color);
}

.subCategories {
    flex: 1;
    height: 100%;
    overflow: auto;
}

.subCategorie {
    display: none;
    flex: 1;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 100%;
    column-gap: 15px;
    row-gap: 15px;
    padding: 10px;
    overflow: auto;
    width: 100%;
}

.subCategorieShow {
    display: flex;
}

.subCategorieGroup {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    width: calc(20% - 15px);
    min-width: calc(20% - 15px);
    max-width: calc(20% - 15px);
}

a.subCategorieTitle {
    color: var(--brand-sub-color);
    font-weight: bold;
}

.subCategorie a {
    break-inside: avoid;
    font-size: var(--font-size-small);
    hyphens: auto;
}

.manufacturer a {
    display: flex;
    align-items: center;
    gap: 20px;
}

.specification a {
    width: calc(25% - 15px);
    min-width: calc(25% - 15px);
    max-width: calc(25% - 15px);
    display: flex;
    align-items: flex-end;
    gap: 5px;
}

.specification a span {
    font-size: var(--font-size-xsmall);
}

.specifications .subCategorie {
    row-gap: 0;
}

.languagesContainer2 {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 5px;
}

.languagesContainer {
    margin-top: 7px;
    margin-left: auto;
    padding: 5px;
    position: relative;
    text-align: right;
}

.languagesContainer::before {
    content: " ";
    width: 10px;
    height: 10px;
    margin-right: 25px;
    display: inline-block;
    border-left: 2px solid var(--color);
    border-bottom: 2px solid var(--color);
    transform: rotate(-45deg);
    transform-origin: 0px -10px;
    z-index: 2;
}

.languagesContainer:hover::before {
    border-left: 2px solid var(--brand-sub-color);
    border-bottom: 2px solid var(--brand-sub-color);
}

.languagesContainer img {
    width: 32px;
    height: 20px;
}

.languages {
    position: absolute;
    top: 100%;
    right: 0px;
    flex-direction: column;
    display: none;
    z-index: 1;
    background-color: var(--color5);
}

.languages::after {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    z-index: -1;
    content: " ";
}

.languages img {
    margin: 5px;
}

.languagesContainer:hover .languages {
    display: flex;
}

.shoppingCart {
    flex: 0 0 auto;
    position: relative;
    margin-left: 5px;
}

.shoppingCart img {
    height: 22px;
}

.shoppingCartAmount {
    position: absolute;
    top: -10px;
    right: 0px;
    color: var(--brand-sub-color);
    text-align: center;
    width: 100%;
    font-weight: bold;
}

.myTragantContainer {
    position: relative;
}

.headerNav ul.myTragant {
    position: absolute;
    top: 100%;
    left: -10px;
    background-color: var(--color5);
    display: none;
    flex-direction: column;
    width: 200px;
    gap: 0;
    align-items: inherit;
    padding-top: 10px;
}

.headerNav ul.myTragant li {
    display: block;
}

.myTragantContainer:hover .myTragant {
    display: flex;
}

.headerNav ul.myTragant a {
    padding: 10px;
    width: 100%;
    min-widht: 100%;
    max-width: inherit;
    display: block;
}

.dataProtectionNote {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px var(--margin-side);
    z-index: 10;
    box-shadow: 0px -1px 2px var(--color7);
    background-color: var(--color4);
    display:flex;
    flex-wrap:wrap;
    font-size: var(--font-size-small);
    gap: 0px 20px;
}

.dataProtectionOptions {
    flex: 1;
}

.dataProtectionButtons {
    flex: 0 0 100%;
}

.dataProtectionText {
    flex: 0 0 calc(50% - 10px);
}

.dataProtectionNote button {
    padding: 10px;
    background-color: var(--brand-sub-color);
    font-size: var(--font-size-small);
    color: var(--color4);
    border: 0;
    box-shadow: 3px 3px 5px var(--color6);
    cursor: pointer;
    margin-top: 10px;
}

.dataProtectionNote button:hover {
    color: var(--brand-sub-color);
    background-color: var(--color4);
}

.bread {
    margin-top: 20px;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-size: var(--font-size-xsmall);
    padding: 5px 5px 5px var(--margin-side);
    max-width: max-content;
}

.bread ol {
    margin-left: 0;
}

.bread li {
    display: inline-block;
    padding-right: 5px;
}

.bread li::after {
    margin-left: 5px;
    content: ">";
}

.bread li:last-child::after {
    display: none;
}

.bread li:last-child {
    margin-right: 0;
}

.bread a {
    color: var(--color);
    text-decoration: none;
}

main {
    padding: 40px var(--margin-side) 0;
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    gap: 0px 100px;
}

.contentTop {
    display: flex;
    flex: 0 0 100%;
    overflow-x: auto;
    margin-bottom: 35px;
}

.contentLeft {
    flex: 0 0 350px;
}

.contentRight {
    flex: 1;
    max-width: 100%;
}

.subNav {
    display: flex;
    padding-bottom: 5px;
}

.subNav ol {
    margin-left: 0;
    display: flex;
    list-style-type: none;
}

.subNav ol li {
    min-width: fit-content;
    border-bottom: 2px solid var(--color5);
}

.subNav a {
    flex: 0 0 auto;
    color: var(--color);
    text-decoration: none;
    padding-right: 40px;
    display: block;
    padding-bottom: 10px;
}

.subNav li.active, .subNav li:hover {
    color: var(--brand-sub-color);
    border-bottom: 2px solid var(--brand-sub-color);
}

.dealerList {
    position: sticky;
    top: 200px;
    padding-right: 20px;
    height: calc(100vh - 200px);
    min-height: 200px;
    overflow: auto;
}

.dealerListSelectText {
    display: none;
    cursor: pointer;
    padding: 20px 10px;
    border: 1px solid var(--color1);
    justify-content: space-between;
    align-items: baseline;
}

.dealerList ol {
    list-style-type: none;
    margin-left: 0;
}

.dealerList ol li {
    border-bottom: 1px solid var(--color1);
}

.dealerList ol li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 17px 0px 17px;
    color: var(--color);
    text-decoration: none;
    font-weight: bold;
    font-size: var(--dealerlist-font-size);
}

.dealerList ol li.active, .dealerList ol li:hover {
    border-bottom: 1px solid var(--brand-sub-color);
}

.dealerList ol li.active a, .dealerList ol li:hover a {
    color: var(--brand-sub-color);
}

.dealerList ol li a::after {
    content: " ";
    width: 6px;
    height: 6px;
    display: inline-block;
    border-right: 2px solid var(--color);
    border-bottom: 2px solid var(--color);
    transform: rotate(-45deg);
    transform-origin: 0px 10px;
}

.dealerList ol li:hover a::after {
    border-right: 2px solid var(--brand-sub-color);
    border-bottom: 2px solid var(--brand-sub-color);
}

.dealerList ol li:last-child {
    border-bottom: 0;
}

.anchorContainer {
    position: relative;
}

.anchor {
    position: absolute;
    top: -180px;
}

#topOfPage {
    position: fixed;
    padding: 15px;
    bottom: 10px;
    right: 0px;
    z-index: 1;
    font-size: var(--font-size-small);
    background-color: var(--color5);
    cursor: pointer;
    border: 1px solid var(--color1);
    border-right: 0;
    display: none;
}

#topOfPage:hover {
    color: var(--brand-sub-color);
}

#topOfPage.show {
    display: block;
}

footer {
    margin-top: 100px;
    background-color: var(--color5);
    padding-top: 50px;
    font-size: var(--font-size-base);
}

footer ul {
    margin-left: 0px;
}

.footerLinks {
    display: flex;
    justify-content: flex-start;
    padding: 0 var(--margin-side);
    white-space: nowrap;
}

.footerPicture {
    flex-grow: 1;
}

.footerAdditional {
    margin: 20px 0px;
    font-weight: bold;
}

.footerAdditionalBrands {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.footerAdditionalBrands img {
    flex: 0 1 auto;
    background-color: var(--color4);
    padding: 20px;
}

.footerLink {
    margin-left: 100px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.footerHeadline {
    margin-bottom: 11px;
    font-weight: bold;
}

.footerLink a {
    color: var(--color);
    text-decoration: none;
    max-width: max-content;
}

.footerLink a:hover, .footerLink a.active {
    color: var(--brand-sub-color);
}

.footerLink ul {
    list-style-type: none;
}

.footerLink ul li {
    margin-bottom: 11px;
}

.footerRights {
    flex: 0 0 100%;
    margin-top: 44px;
    padding: 21px var(--margin-side) 22px var(--margin-side);
    background-color: var(--brand-color);
    text-align: center;
    font-weight: 400;
    font-size: var(--footer-rights-font-size);
}

.formText {
    width: 750px;
    max-width: 100%;
}

.form_text {
    margin-bottom: 20px;
    max-width: 100%;
}

h2.form_text {
    margin-top: 20px;
    margin-bottom: 20px;
}

.formPreferredLang {
    font-style: italic;
    margin-top: 20px;
}

.formRequired {
    margin: 20px 0;
}

.form {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    gap: 10px;
}

.formTop {
    align-items: flex-start;
}

.formLeft {
    flex: 0 0 calc(200px - 10px);
}

.formRight {
    flex: 0 1 550px;
}

.formSingle {
    flex: 1;
}

.antispam {
    display: none;
}

.error {
    color: var(--color3);
    padding: 10px;
    margin-bottom: 30px;
    border: 2px solid var(--color3);
    font-weight: bold;
}

.pflichtfeld::after {
    content: "*";
    margin-left: 1px;
    color: var(--color3);
}

.tilesArea {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 15px;
}

.tilesArea a {
    color: var(--color);
    flex: 0 0 calc(33.33% - 10px);
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 40px;
    word-break: break-word;
    text-decoration: none;
    border: 1px solid var(--color5);
    border-radius: 10px;
}

.tilesArea a:hover {
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.1);
    background-color: var(--color4);
    border: 1px solid var(--color4);
    z-index: 2;
}

.tilesArea h2 {
    font-size: var(--tile-area-title-font-size);
}

.tilesArea img {
    max-width: 120px;
    transition: all 0.2s ease-out;
}

.tilesArea a:hover img {
    transform: scale(1.14);
}

.products {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    justify-content: flex-start;
    gap: 12px;
    background-color: var(--color2);
    padding: 30px;
    margin-left: 0;
}

.productsTiles {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    justify-content: flex-start;
    gap: 12px;
    background-color: var(--color2);
    padding: 30px;
    margin-left: 0;
}

.products li {
    flex: 0 0 100%;
    word-break: break-word;
    background-color: var(--color4);
    border-left: 5px solid var(--color4);
}

.productsTiles li {
    display: flex;
    flex: 0 0 calc(33.33% - 8px);
    word-break: break-word;
    background-color: var(--color4);
    border-bottom: 5px solid var(--color4);
    flex-wrap: wrap;
}

.products li a, .productsTiles li a {
    color: var(--color);
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 50px;
    flex-wrap: wrap;
    padding: 20px;
    flex: 0 0 100%;
}

.products li:hover {
    border-left: 5px solid var(--brand-sub-color);
}

.productsTiles li:hover, .productsTiles .products li:hover {
    border-bottom: 5px solid var(--brand-sub-color);
}

.productsTiles li img {
    transition: all 0.2s ease-out;
}

.productsTiles li:hover img, .products li:hover img {
    transform: scale(1.14);
}

.products .productsPicture {
    flex: 0 0 250px;
}

.productsTiles .productsPicture {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
}

.products .productsPicture img, .productsTiles .productsPicture img {
    aspect-ratio: 250 / 190;
    height: auto;
    width: auto;
}

.productsCompare {
    margin: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

a.productsCompareLink {
    padding: 0 !important;
    flex: 1 0 auto !important;
    max-width: fit-content !important;
}

.productsTiles li a.productsCompareLink {
    flex: 1 0 100%;
    padding: 0;
}

a.productsCompareLink:hover {
    font-weight: bold;
    text-decoration: underline;
}

.productsText {
    flex: 1;
    word-wrap: break-word;
}

.productsNumber {
    color: var(--brand-sub-color);
}

.productsNumber span {
    font-weight: bold;
}

.productsDelivery {
    height: 15px;
    width: 15px;
    display: inline-block;
    vertical-align: middle;
    top: -2px;
    position: relative;
}

.productsDelivery1 {
    background-color: rgb(0, 145, 54);
}

.productsDelivery2 {
    background-color: rgb(255, 204, 1);
}

.productsDelivery3 {
    background-color: rgb(200, 19, 50);
}

.productsPrice {
    font-size: var(--font-size-medium);
    font-weight: bold;
    color: var(--color6);
}

.homeBanner {
    position: relative;
}

.homeBanner:hover:before {
    display: flex;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 990;
    content: "Auf der Vorschauseite deaktiviert";
    text-align: center;
    justify-content: center;
    align-items: center;
    color: var(--color);
    font-weight: bold;
    background-color: rgba(255, 255, 255, .8);
}

.homeHighlights {
    margin-top: 20px;
}

.homeTiles {
    background-color: var(--color5);
    padding: 0px;
}

.homeTiles .homeBig {
    flex: 0 0 100%;
    background-color: inherit;
    border-bottom: 0;
}

.homeTiles .homeBig:hover {
    border-bottom: inherit;
}

.homeBig h1 {
    font-size: var(--font-size-base);
    line-height: var(--text-line-height);
    margin-bottom: 0;
}

.homeBig .productsText {
    order: 1;
    font-size: 2em;
    font-weight: bold;
    line-height: 1.5em;
    padding: 100px;
}

.homeBig .productsPicture {
    order: 2;
    flex: 0 0 40%;
    min-width: 300px;
    text-align: right;
    display: flex;
    align-items: center;
    padding: 50px 50px 50px 0;
}

.homeThemeWrapper {
    overflow: auto;
    flex: 0 0 100%;
    flex-direction: column;
    display: flex;
    margin-top: 20px;
}

.wrapperOverflow {
    overflow: hidden !important;
}

.homeThemeArticles {
    flex-wrap: nowrap;
    transition: transform 0.5s ease;
}

.arrow {
    cursor: pointer;
    font-size: 3em;
    padding: 0 10px;
    border: none;
    background: none;
    color: var(--color);
    z-index: 10;
    position: absolute;
    left: 0px;
    top: calc(50% - 30px);
}

.arrow.right {
    right: 0;
    left: inherit;
}

.arrow:disabled {
    color: var(--color8);
    cursor: not-allowed;
    display: none;
}

.homeOpen {
    color: var(--color4);
    background-color: var(--color3);
    padding: 10px;
    margin-bottom: 15px;
    text-align: center;
}

.homeTitle {
    font-size: var(--h-font-size);
    margin: 100px 0px 40px;
}

.homeAssortment {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
    hyphens: auto;
    word-break: break-word;
    overflow-wrap: break-word;
}

.homeAssortment h2 {
    font-size: var(--font-size-large);
}

.homeAssortment h3 {
    font-size: var(--font-size-medium);
    margin-bottom: 20px;
}

.homeAssortment p {
    width: calc(100% - 220px);
    font-size: .9em;
    line-height: 1.2em;
}

.homeAssortment p.half {
    width: calc(100% - 240px);
}

.homeAssortmentLeft {
    display: flex;
    flex: 0 0 calc(40% - 10px);
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
    gap: 20px;
}

.homeAssortmentRight {
    display: flex;
    flex: 0 0 calc(60% - 10px);
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
    gap: 20px;
}

.homeAssortmentAdapter, .homeAssortmentDocking, .homeAssortmentNews, .homeAssortmentCable {
    flex: 0 1 100%;
    background-repeat: no-repeat;
    background-color: var(--color8);
    background-position: 100% 100%;
    padding: 50px;
}

.homeAssortmentAdapter {
    background-image: url(../png/home-adaptertool.png);
}

.homeAssortmentDocking {
    background-image: url(../png/home-dockingstation.png);
    background-color: var(--brand-color);
}

.homeAssortmentNews {
    background-image: url(../png/home-news.png), url(../png/home-neuheiten.png);
    background-color: var(--color);
    padding-top: 100px;
    padding-bottom: 100px;
    color: var(--color4);
    background-position: 100% 100%, 0% 0%;
    background-size: auto, cover;
}

.homeAssortmentNews a {
    color: var(--color4);
}

.homeAssortmentCable {
    background-image: url(../png/home-kabel.png);
    background-position: 100% 0%;
}

.homeGroups {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
}

.homeGroups li {
    padding-right: 20px;
    border-right: 1px solid var(--brand-sub-color);
}

.homeGroups li:last-child {
    border-right: 0;
}

.homeGroups a {
    color: var(--color);
    text-decoration: none;
    padding: 10px;
}

.homeGroups a:hover {
    color: var(--brand-sub-color);
}

.homeInfothek {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 100px;
}

.homeInfothek h2 {
    margin-top: 30px;
}

.homeInfothek div {
    flex: 0 0 calc(33.33% - 67px);
}

.homeHelpCenter {
    background-color: var(--help-center);
    padding: 70px;
    margin-top: 100px;
}

.homeHelpCenter h2 {
    margin-top: 0;
}

.homeHelpCenterEntities {
    display: flex;
    flex-wrap: wrap;
    gap: 70px 100px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.homeHelpCenterPicture {
    flex: 0 0 100px;
}

.homeHelpCenterText {
    flex: 0 0 calc(100% - 200px);
}

.homeWe {
    display: flex;
    margin-top: 20px;
    color: var(--color4);
    line-height: var(--text-line-height);
    font-size: var(--font-size-medium);
    background-image: url(../png/mission2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--color);
}

.homeWeLeft {
    flex: 0 0 40%;
    padding: 120px 50px;
    border-right: 20px solid var(--color5);
}

.homeWeRight {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

.homeWeRightFirst {
    padding: 50px;
    border-bottom: 20px solid var(--color5);
}

.homeWeRightSecond {
    padding: 50px;
}

.homeImportant {
    display: flex;
    margin-top: 50px;
    color: var(--brand-sub-color);
    font-weight: bold;
    gap: 50px;
}

.homeImportant div {
    display: flex;
    flex: 0 1 25%;
    justify-content: center;
    gap: 20px;
    align-items: center;
}

.homeImportant img {
    width: 42px;
}

.homeContact {
    display: flex;
    margin-top: 20px;
    gap: 20px;
}

.homeContactPicture {
    flex: 0 0 calc(50% - 10px);
}

.homeContactPicture img {
    display: block;
}

.homeContactInfo {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 calc(50% - 10px);
    background-color: var(--help-center);
    padding: 70px;
    gap: 70px 100px;
    align-items: flex-start;
    align-content: flex-start;
}

.homeContactInfoPicture {
    flex: 0 0 100px;
}

.homeContactInfoPicture img {
    max-width: 100%;
}

.homeContactText {
    flex: 0 0 calc(100% - 200px);
}

.homeLink {
    color: var(--color);
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    border-radius: 30px;
    padding: 10px 30px;
    border: 2px solid var(--brand-sub-color);
    margin-top: 30px;
    text-align: center;
    background: linear-gradient(to right, var(--brand-sub-color) 0%, var(--brand-sub-color) 100%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    transition: all 0.3s ease-in-out;
}

.homeLink:hover {
    color: var(--color4);
    background-size: 100% 100%;
}

.agb {
    margin-bottom: 50px;
}

.homeLink2 {
    display: inline-block;
    margin-top: 20px;
    color: var(--color);
    text-decoration: none;
    font-weight: bold;
}

.imprintName {
    font-weight: bold;
    margin: 18px 0px;
}

.imprint {
    display: flex;
    align-items: baseline;
}

.imprintFirst {
    margin-top: 100px;
}

.imprintLeft {
    flex: 0 0 400px;
}

.imprintRight {
    background-color: var(--color5);
    padding: 20px 50px;
    flex: 1;
}

.imprintFirst .imprintRight {
    padding-top: 40px;
}

.imprint:last-of-type .imprintRight {
    padding-bottom: 40px;
}

.company {
    display: flex;
    gap: 70px;
    align-items: flex-start;
    margin-bottom: 100px;
}

.company:last-of-type {
    margin-bottom: 0;
}

.companyTitle {
    font-size: var(--company-title-font-size);
}

.companyTitle2 {
    margin-bottom: 55px;
}

.companyLeft, .companyRight {
    flex: 0 0 50%;
    overflow: hidden;
}

.company2, .company6 {
    text-align: right;
}

.company img {
    transition: all 0.2s ease-out;
}

.company img:hover {
    transform: scale(1.14);
}

.connections {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 35px;
    margin-top: 35px;
    align-content: flex-start;
}

.connection {
    flex: 0 0 calc(33.33% - 10px);
    word-break: break-word;
    background-color: var(--color4);
    border: 1px solid var(--color5);
    padding: 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.connection img {
    transition: all 0.2s ease-out;
}

.connection a:hover img {
    transform: scale(1.14);
}

.connection a {
    color: var(--color);
    text-decoration: none;
    text-align: center;
}

.connectionTitle {
    padding: 20px;
    text-align: center;
    background-color: var(--color5);
    font-size: var(--connectionTitle-font-size);
    font-weight: normal;
    margin-bottom: 30px;
    flex: 0 0 100%;
}

.connectionParts {
    flex: 0 0 50%;
}

.connectionPart {
    flex: 0 0 100%;
}

.knowledges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 30px 15px;
    margin-top: 50px;
}

.knowledges a {
    color: var(--color);
    flex: 0 1 calc(25% - 12px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    word-break: break-word;
    background-color: var(--color4);
    text-decoration: none;
}

.knowledges a:hover {
    color: var(--brand-sub-color);
}

.knowledges a img {
    width: 100%;
}

.knowledgeTitle {
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: bold;
}

.knowledgeNew {
    color: var(--brand-sub-color);
    font-weight: bold;
    margin-top: 10px;
}

.catalogues {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.catalogue {
    flex: 0 0 calc(50% - 15px);
    border: 1px solid var(--color5);
    padding: 30px;
    word-break: break-word;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}

.catalogueInfo {
    flex: 1;
}

.cataloguePicture {
    flex: 0 0 159px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cataloguePicture a {
    text-decoration: none;
    font-size: var(--catalogueLinks-font-size);
    display: flex;
    justify-content: flex-start;
    max-width: max-content;
    gap: 0px 15px;
    text-transform: uppercase;
}

.cataloguePicture a img {
    flex: 0 0 auto;
    margin: 3px 0 0;
    width: 23px;
    height: 21px;
}

.catalogueNumber {
    color: var(--brand-sub-color);
    font-size: var(--catalogueNumber-font-size);
}

.catalogueTitle {
    font-weight: bold;
}

.catalogueFormat {
    color: var(--color6);
    font-size: var(--catalogueFormat-font-size);
    margin-bottom: 2px;
}

.dealers {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 15px;
}

.dealer {
    padding: 0px 0px 39px;
    word-break: break-word;
    max-width: 770px;
    font-style: normal;
}

.dealer h2 {
    margin-bottom: 50px;
}

.dealerInfo {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

.dealerPlace {
    flex: 1;
    background-image: url(../png/standort.png);
    background-repeat: no-repeat;
    padding-left: 50px;
    background-size: 29px 38px;
}

.dealerPicture {
    flex: 0 0 100px;
}

.dealerContact {
    display: flex;
    max-width: 770px;
    flex-wrap: wrap;
    padding-bottom: 50px;
    margin-top: 50px;
    border-bottom: 2px solid var(--color5);
    gap: 50px 0px;
}

.dealerContactTitle {
    color: var(--brand-sub-color);
}

.dealerContactPhone, .dealerContactMail, .dealerContactFax, .dealerContactWeb {
    flex: 0 0 50%;
}

.dealerContactPhone a {
    color: var(--color);
    text-decoration: none;
}

.dealerContactMail a, .dealerContactWeb a {
    color: var(--color);
    text-decoration: none;
}

.jobContainer {
    display: flex;
    gap: 100px;
}

.jobDescription {
    flex: 0 0 calc(50% - 50px);
}

.jobPicture {
    flex: 0 0 calc(50% - 50px);
}

.jobPicture img {
    transition: all 0.2s ease-out;
}

.jobPicture img:hover {
    transform: scale(1.14);
}

.jobs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.job {
    display: flex;
    padding: 20px;
    text-decoration: none;
    border: 1px solid var(--color5);
    color: var(--color);
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
}

.faqGroups {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.faqGroup {
    flex: 1 0 calc(50% - 20px);
}

.faqTitle {
    margin: 30px 0px 20px;
    color: var(--color);
}

.faqPost {
    color: var(--color);
    text-decoration: none;
    display: block;
    width: fit-content;
}

.faqText *:not(h1) {
    font-size: inherit !important;
    text-align: left !important;
    line-height: inherit !important;
    font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif !important;
}

.faqText a * {
    color: inherit !important;
}

.pressbox {
    width: 100%;
    height: 620px;
    border: 1px solid var(--color5);
    padding: 10px;
}

.pressboxPowered {
    font-size: var(--pressbox-font-size);
}

.profilPassword .form {
    flex-wrap: wrap;
}

.profilPassword .form .formRight {
    max-width: 550px;
    flex: auto;
}

.usersInfo {
    display: flex;
    flex-direction: column;
    font-weight: bold;
    padding-top: 20px;
    padding-bottom: 20px;
}

.userSmart {
    display: none;
}

.user {
    color: var(--color);
    text-decoration: none;
    display: flex;
    padding: 20px;
}

.userHeadlineSmart {
    display: none;
}

.userNameHeadline {
    flex: 0 0 180px;
}

.userLoginHeadline {
    flex: 0 0 200px;
}

.userStatus {
    flex: 0 0 49px;
    text-align: center;
}

.userRight {
    flex: 0 0 calc(33% - 143px);
    text-align: center;
}

.userName, .userLogin {
    font-weight: normal;
}

.userActive {
    height: 15px;
    width: 15px;
    display: inline-block;
    background-color: rgb(0, 145, 54);
}

.userInactive {
    height: 15px;
    width: 15px;
    display: inline-block;
    background-color: rgb(200, 19, 50);
}

.usersInfo .user:nth-of-type(odd) {
    background-color: var(--color2);
}

.usersInfo .user:first-child {
    background-color: var(--color4);
}

.priceLists {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}

.priceList {
    display: flex;
    flex: 0 0 100%;
    flex-wrap: wrap;
    gap: 20px 20px;
}

.priceList a {
    text-decoration: none;
}

.priceList a:hover {
    text-decoration: underline;
}

.priceListName {
    flex: 0 0 100%;
}

.priceListActive {
    height: 15px;
    width: 15px;
    display: inline-block;
    background-color: rgb(0, 145, 54);
}

.priceListDeactive {
    height: 15px;
    width: 15px;
    display: inline-block;
    background-color: red;
}

.priceListTitle {
    margin-top: 13px;
    margin-bottom: 38px;
    font-size: var(--font-size-base);
    color: var(--brand-sub-color);
}

.priceListOptions {
    display: flex;
    gap: 10px 50px;
    margin-bottom: 38px;
    flex-wrap: wrap;
}

.priceListSendOptions {
    display: flex;
    gap: 50px;
}

.priceListSendOption {
    flex: 0 0 calc(50% - 25px);
    border: 1px solid grey;
    border-radius: 10px;
    padding: 20px;
}

.priceListColumns {
    display: flex;
    gap: 50px;
}

.priceListCategorieManufacturer, .priceListCategorie, .priceListManufacturer {
    display: none;
}

.priceListCategorieManufacturerShow {
    display: flex;
    margin-bottom: 50px;
}

.priceListCategorieShow, .priceListManufacturerShow {
    display: block;
}

.priceListColumnsContainer {
    flex: 0 0 calc(50% - 25px);
}

.priceListColumn {
    border: 1px solid grey;
    border-radius: 10px;
    padding: 30px;
}

.priceListColumnsFields {
    overflow: auto;
    height: 500px;
    min-height: 500px;
    max-height: 500px;
}

.priceListTitleField {
    margin-top: 30px;
    margin-bottom: 10px;
    color: rgb(198, 40, 58);
    font-weight: bold;
}

.priceListButton {
    width: 100%;
    text-align: left;
    padding: 10px 0px;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.priceListButton:hover {
    color: var(--brand-sub-color);
}

.priceListFieldDelete {
    padding: 10px 0px;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.priceListFieldDelete:hover {
    color: var(--brand-sub-color);
}

.priceListFieldUp, .priceListFieldDown {
    padding: 0px 0px;
    line-height: 0;
    background-color: var(--color);
    border: 0;
    cursor: pointer;
}

.priceListFieldUp:hover, .priceListFieldDown:hover {
    background-color: var(--brand-sub-color);
}

.howto {
    width: 100%;
}

.howto_italic {
    font-style: italic;
}

.howto_ueberschrift {
    display: block;
    text-decoration: underline;
    font-weight: 700;
}

.howto_text {
    width: 100%;
    vertical-align: top;
    margin-top: 20px;
}

.howto_hinweis {
    display: block;
    margin-top: 5px;
}

.howto_einrueckung {
    margin-left: 8px;
}

.priceListHistory {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.priceListHistoryEntry {
    display: flex;
}

.priceListHistoryEntry:nth-child(1) {
    font-weight: bold;
}

.priceListHistoryEntryDate {
    flex: 0 0 130px;
}

.priceListHistoryEntryText {
    flex: 1;
}

.help {
    cursor: help;
}

.shoppingCartProgress {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.shoppingCartProgress div, .shoppingCartProgress a {
    flex-basis: 25%;
    text-align: center;
    padding: 10px;
    background-color: var(--color5);
    text-decoration: none;
    color: var(--color);
}

.shoppingCartLinks {
    color: var(--color);
    text-decoration: none;
    position: relative;
    font-weight: bold;
}

.shoppingCartLinks::before {
    content: " ";
    width: 6px;
    height: 6px;
    display: inline-block;
    border-right: 2px solid var(--color);
    border-bottom: 2px solid var(--color);
    margin-right: 10px;
    transform: rotate(-45deg);
    transform-origin: 2px 2px;
}

.shoppingCartLinks:hover::before {
    border-right: 2px solid var(--brand-sub-color);
    border-bottom: 2px solid var(--brand-sub-color);
}

.shoppingCartProgress div.shoppingCartProgressActive {
    background-color: var(--color1);
    color: var(--color4);
}

input[type=submit].shoppingCartChangeButton {
    background-color: transparent;
    color: var(--brand-sub-color);
    padding: 5px 0px 5px 5px;
    box-shadow: none;
}

input[type=submit].shoppingCartChangeButton:hover {
    text-decoration: underline;
}

input[type=submit].shoppingCartNextButton1 {
    margin-left: 20px;
}

input[type=submit].shoppingCartPrevButton {
    background-color: var(--color5);
    color: var(--color);
    margin-right: 10px;
    box-shadow: 3px 3px 5px var(--color9);
}

.shoppingCart1Buttons {
    text-align: right;
}

.shoppingCartButtons {
    display: flex;
    justify-content: space-between;
}

.shoppingCart1Express {
    margin-top: 30px;
    margin-bottom: 30px;
}

.shoppingCart1ExpressNumber {
    width: 100px;
    display: inline-block;
}

.shoppingCart1ExpressAmount {
    width: 70px;
    display: inline-block;
}

.shoppingCart1ExpressAdd {
    background-color: transparent !important;
    color: var(--color) !important;
    border: 0px !important;
    box-shadow :none !important;
}

.shoppingCart1Products {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-bottom: 2px solid var(--color5);
}

.shoppingCart1Product {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid var(--color5);
}

.shoppingCart1ProductTitle {
    font-weight: bold;
    border-bottom: 2px solid var(--color5);
    padding-top: 20px;
    padding-bottom: 20px;
}

.shoppingCart1Product:last-of-type {
    border-bottom: 0;
}

.shoppingCart1ProductPicture {
    flex: 0 0 20%;
    padding-top: 15px;
}

.shoppingCart1ProductName {
    padding-top: 15px;
    flex: 0 0 calc(80% - 500px);
}

a.shoppingCart1ProductNameLink {
    color: var(--color);
    text-decoration: none;
}

a.shoppingCart1ProductNameLink:hover {
    text-decoration: underline;
}

.shoppingCart1ProductPrice {
    padding-top: 15px;
    flex: 0 0 110px;
}

.shoppingCart1ProductAmount {
    flex: 0 0 80px;
}

.shoppingCart1ProductDelete {
    padding-top: 15px;
    flex: 0 0 100px;
    text-align: right;
}

.shoppingCart1ProductDelete a {
    text-decoration: none;
}

.shoppingCart1ProductDelete a:hover {
    text-decoration: underline;
}

.shoppingCartTitle {
    padding-top: 0;
}

.shoppingCart1SaveShoppingCart {
    display: flex;
}

.shoppingCart1ProductInfo {
    display: none;
}

.form input[type="submit"].shoppingCart1SaveShoppingCartButton {
    background-color: var(--color6);
    box-shadow: none;
    padding: 13px;
}

.shoppingCart1SavedShoppingCarts {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top: 20px;
}

.shoppingCart1SavedShoppingCart:nth-child(odd) {
    background-color: var(--color2);
}

.shoppingCart1SavedShoppingCart:nth-child(1) {
    font-weight: bold;
}

.shoppingCart1SavedShoppingCart {
    display: flex;
}

.shoppingCart1SavedShoppingCartOption {
    flex: 0 0 150px;
    padding: 10px;
}

.shoppingCart1SavedShoppingCartOption a {
    text-decoration: none;
}

.shoppingCart1SavedShoppingCartOption a:hover {
    text-decoration: underline;
}

.shoppingCart1SavedShoppingCartCreate {
    flex: 0 0 130px;
    padding: 10px;
}

.shoppingCart1SavedShoppingCartName {
    flex: 1;
    padding: 10px;
}

.shoppingCart2Container {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}

.shoppingCart2Address {
    flex: 0 0 calc(50% - 25px);
}

.shoppingCart2Address2 {
    flex: 0 0 calc(50% - 25px);
}

.shoppingCart2SavedAddressesContainer {
    flex: 0 0 100%;
    padding-top: 20px;
}

.shoppingCart2SavedAddresses {
    display: flex;
}

.shoppingCart2SavedAddress {
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 3px var(--color7);
    padding: 20px;
}

.shoppingCart2SavedAddressOption {
    margin-top: 20px;
}

.shoppingCart3Margin {
    margin-top: 50px;
}

.shoppingCart3Text {
    display: flex;
}

.shoppingCart3TextInfo {
    flex: 0 0 200px;
}

.shoppingCart3TextPrice {
    text-align: right;
    flex: 0 0 150px;
}

.shoppingCart3Sum {
    border-top: 2px solid var(--color5);
    font-weight: bold;
    margin-bottom: 30px;
}

.shoppingCart4Container {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

.shoppingCart4Info {
    flex: 0 0 calc(25% - 30px);
}

.orderList {
    display: none !important;
}

.orderListShow {
    display: flex !important;
}

.orderListButton {
    background-color: transparent;
    border: 0;
    padding: 10px;
    display: flex;
    cursor: pointer;
}

.orderListButton:hover {
    color: var(--brand-sub-color);
}

.productsButton {
    background-color: var(--brand-sub-color);
    color: var(--color4);
    text-decoration: none;
    padding: 12px 21px;
    display: inline-block;
    margin-bottom: 40px;
}

.productsButton:hover {
    color: var(--color);
    background-color: var(--brand-color);
}

.productGroups {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style-type: none;
    gap: 12px;
    margin-left: 0;
}

.productGroups li {
    border: 1px solid var(--color5);
    flex: 0 0 calc(100% / 6 - 10px);
    text-align: center;
    position: relative;
}

.productGroups li:hover {
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color4);
    background-color: var(--color4);
    z-index: 2;
}

.productGroups li a {
    gap: 30px;
    display: flex;
    flex-direction: column;
    padding: 30px;
    color: var(--color);
    text-decoration: none;
    hyphens: auto;
}

.productGroupImage {
    position: relative;
    max-width: 110px;
    width: 100%;
    height: 83px;
    margin: auto;
}

.productGroups li:hover img {
    transform: scale(1.14);
}

.productGroupImage img {
    z-index: 2;
    display: block;
    position: relative;
    transition: all 0.2s ease-out;
}

.productGroupImageBubble {
    position: absolute;
    top: -13px;
    left: 0;
    right: 0;
    height: 110px;
    background-color: var(--color5);
    border-radius: 50%;
    z-index: 1;
}

.productGroupProductsCount {
    color: var(--brand-sub-color);
}

.groupText {
    display: flex;
    gap: 50px 50px;
    margin-bottom: 20px;
}

.groupTextInfo {
    flex: 1;
}

.groupTextPicture {
    flex: 0 0 36.45%;
}

.productsSettings {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    align-items: baseline;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.productsSettingsFilter {
    flex: 0 0 100%;
}

.productsSettingsCount {
    flex: 0;
    min-width: fit-content;
}

.productsSettingsView {
    justify-content: flex-end;
    gap: 0px 5px;
    display: flex;
    flex: 0;
}

.productsSettingsAmount {
    display: flex;
    gap: 0px 20px;
    flex: 0;
}

.productsSettingsOrder {
    display: flex;
    flex: 0;
    justify-content: flex-end;
    gap: 0px 10px;
    display: flex;
    align-items: baseline;
    align-items: center;
}

.productsSettingsOrder select, .productsSettingsAmount select {
    width: inherit;
}

.productsSettingsView button {
    background-color: var(--color5);
    border: 0;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    cursor: pointer;
    width: 40px;
    height: 40px;
    padding: 0;
}

.productsSettingsViewGalerie {
    background-image: url(../png/galerie.png);
}

.productsSettingsViewList {
    background-image: url(../png/liste.png);
}

.productsSettingsViewGalerie:disabled, .productsSettingsViewList:disabled {
    cursor: not-allowed;
}

.productsSettingsView button.productsSettingsViewActive {
    background-color: var(--brand-color);
}

.productsSort {
    width: 20px;
    height: 25px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border: 0;
    cursor: pointer;
    box-shadow: none;
    background-color: var(--color4);
    background-size: contain;
    padding: 0;
}

.productsSortAsc {
    background-image: url(../jpg/absteigend.jpg);
}

.productsSortDesc {
    background-image: url(../jpg/aufsteigend.jpg);
}

.productsFilterButton {
    display: none;
    width: 45px;
    height: 45px;
    background-image: url(../png/filter.png);
    background-size: cover;
    background-color: transparent;
    border: 1px solid var(--color);
    cursor: pointer;
}

.pages {
    list-style-type: none;
    margin-top: 30px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.pages a {
    display: flex;
    color: var(--color);
    text-decoration: none;
    padding: 10px 10px;
}

.pages a.pageActive, .pages a:hover {
    background-color: var(--brand-sub-color);
    color: var(--color4);
}

.tools {
    margin-bottom: 30px;
}

.toolsConnection {
    margin-bottom: 23px;
}

.toolsSubMenu {
    padding: 0;
    background-color: var(--color5);
    margin: 20px 0;
    list-style-type: none;
}

.toolsSubMenu li {
    border-bottom: 1px solid var(--color1);
}

.toolsSubMenu li:last-child {
    border-bottom: 0;
}

.toolsSubMenu a {
    text-decoration: none;
    color: var(--color);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 15px;
}

.toolsSubMenu a:hover {
    color: var(--brand-sub-color);
}

.toolsSubMenu a::after {
    content: " ";
    width: 6px;
    height: 6px;
    display: inline-block;
    border-right: 2px solid var(--color);
    border-bottom: 2px solid var(--color);
    transform: rotate(-45deg);
    transform-origin: 2px 2px;
}

.toolsSubMenu a:hover::after {
    border-right: 2px solid var(--brand-sub-color);
    border-bottom: 2px solid var(--brand-sub-color);
}

.dockingstationtoolContainer {
    display: flex;
    gap: 100px;
}

.dockingstationtoolContainerFilter {
    flex: 0 0 350px;
}

.dockingstationtoolContainerFilter h1 {
    margin-bottom: 39px;
}

.dockingstationtoolContainerProducts {
    flex: 1;
}

.productsCompare li:hover {
    text-decoration: inherit;
}

.productCompare a.productCompareLink {
    padding: 0;
    display: inline-block;
    flex: inherit;
}

.productCompareLink:hover {
    text-decoration: underline;
    color: inherit;
}

.products .productCompare {
    padding: 0px 40px 40px;
    gap: 20px;
    display: flex;
}

.productsTiles .productCompare {
    gap: 20px;
    display: flex;
    flex-direction: column;
    padding: 0px 20px 20px;
}

.productsTiles .productCompare {
    max-width: fit-content;
}

.productCompareLink {
    color: var(--color);
}

.dockingstationtoolCompare {
    width: 100%;
    max-height: 900px;
    display: inline-grid;
    overflow: scroll;
}

.produkt_vergleich_header {
    display: flex;
    z-index: 2;
    position: sticky;
    top: 0;
    background-color: var(--color4);
    flex-direction: column;
}

.produkt_vergleich {
    display: flex;
}

.produkt_vergleich_header .produkt_vergleich:nth-child(4) {
    border-bottom: 3px solid rgba(223, 219, 219, 0.47);
}

.produkt_vergleich_header .produkt_vergleich:nth-child(4) .eigenschaft_wert {
    border-bottom: 0;
}

.produkt_vergleich div:nth-child(1) {
    position: sticky;
    left: 0;
    width: 230px;
    min-width: 230px;
    padding: 10px;
    border-bottom: 1px solid var(--color8);
    background-color: var(--color2);
}

.eigenschaft_title {
    font-weight: bold;
}

.produkt_vergleich div.artikel_row_first {
    border-bottom: 0;
}

.eigenschaft_wert {
    border-right: 1px solid var(--color8);
    border-bottom: 1px solid var(--color8);
    padding: 10px;
    flex: 0 0 435px;
    color: var(--color);
}

.eigenschaft_wert:last-child {
    border-right: none;
}

.eigenschaft_wert_button {
    border-bottom: none;
    text-align: center;
    padding: 0 0 10px;
}

.eigenschaft_wert_center {
    text-align: center;
}

.artikel_delete {
    border: none;
    text-align: center;
    background: #fff;
    padding: 10px;
    cursor: pointer;
}

.artikel_delete_smart {
    padding: 8px 12px;
    border: none;
    font-weight: bold;
    background-color: var(--brand-sub-color);
    color: var(--color4);
    cursor: pointer;
}

.eigenschaft_artikel {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color8);
}

.eigenschaft_artikels .eigenschaft_artikel:last-child {
    border-bottom: 0;
}

.eigenschaft_artikel_nr, .eigenschaft_artikel_picture, .eigenschaft_werte div {
    display: flex;
    align-items: center;
}

.eigenschaft_artikel_nr {
    width: 100px;
    border-right: 1px solid var(--color8);
    padding: 0px 6px;
}

.eigenschaft_artikel_picture {
    width: 100px;
    border-right: 1px solid var(--color8);
}

.eigenschaft_werte {
    width: calc(100% - 200px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
}

.eigenschaft_name_vergleich {
    background-color: var(--color2);
    padding: 14px 0px 14px 10px;
}

.dockingstationtoolCompareMobile {
    display: none;
    flex-direction: column;
}

.artikel_liste_mobile {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 10px;
}

.filter {
    display: flex;
    flex-direction: column;
}

.filterShow {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 50vh;
    z-index: 10;
    background-color: var(--color4);
    box-shadow: 0px 0px 2px var(--color);
}

.filterShow::before {
    display: block;
    content: " ";
    position: absolute;
    top: -50vh;
    height: 50vh;
    left: 0px;
    right: 0px;
    background-color: rgba(0, 0, 0, .5);
}

.filterName {
    padding: 14px 0px;
    margin-bottom: 0px;
    border: 0;
    border-bottom: 1px solid var(--color1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    background-color: transparent;
    font-size: var(--navigation-font-size);
    width: 100%;
}

.eigenschaftDisabled {
    cursor: not-allowed;
}

.filterNameDisabled {
    color: var(--color7);
    pointer-events: none;
}

.filterNameFirst {
    border-top: 0;
}

.filterName::after {
    content: " ";
    width: 6px;
    height: 6px;
    top: -2px;
    position: relative;
    display: inline-block;
    border-right: 2px solid var(--color);
    border-bottom: 2px solid var(--color);
    transform: rotate(45deg);
    transform-origin: 0px 0px;
}

.eigenschaft[open] .filterName::after {
    transform: rotate(-135deg);
    top: 10px;
}

.FilterInfoText {
    font-size: var(--font-size-xsmall);
    line-height: var(--filter-line-height);
    color: var(--color6);
    padding-right: 10px;
    text-align: justify;
    hyphens: auto;
}

.filterWerte {
    position: relative;
    overflow: auto;
    max-height: 171px;
    padding: 5px 0px;
    border-bottom: 1px solid var(--color1);
}

.filterWert {
    padding: 5px 0px;
    position: relative;
    display: flex;
    align-items: center;
}

.filterWertDisabled {
    color: var(--color7);
    cursor: not-allowed;
}

.filterWertText {
    margin-left: 10px;
    display: flex;
    align-items: flex-end;
    gap: 5px;
}

.filterWertCount {
    font-size: var(--font-size-xsmall);
}

.filterClose {
    display: none;
    position: absolute;
    top: -50px;
    right: 0px;
    width: 50px;
    height: 50px;
    font-weight: bold;
    cursor: pointer;
    padding: 15px;
    background-color: var(--color4);
    z-index: 2;
    border: 0;
}

.filterSelect {
    display: none;
    width: 100%;
    cursor: pointer;
    padding: 5px 10px;
    background-color: var(--brand-sub-color);
    color: var(--color4);
    text-align: center;
}

.filterSelectedContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 0px 10px;
    align-items: flex-start;
    margin-bottom: 30px;
    flex: 0 0 100%;
}

.filterSelectedContainerEmpty {
    display: none;
}

.filterSelected, .filterReset {
    padding: 10px;
    background-color: var(--color2);
    border: 0;
    cursor: pointer;
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.filterReset {
    background-color: var(--brand-color);
}

.filterSelectedDelete {
    width: 20px;
    height: 20px;
    background-color: var(--brand-sub-color);
    color: var(--color4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
}

.productContainer {
    display: flex;
    gap: 100px;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
}

.productContainerName {
    flex: 0 0 100%;
}

.productContainerPictures {
    flex: 1;
    max-width: 655px;
    z-index: 1;
}

.productContainerInformation {
    flex: 1 1 calc(100% - 1600px);
    position: relative;
}

.productContainerText {
    overflow: auto;
    flex: 0 0 calc(60% - 25px);
}

.productContainerSimilar {
    margin-top: 80px;
}

.productName {
    margin-bottom: 15px;
}

.productNumber {
    color: var(--brand-sub-color);
    margin-bottom: 20px;
}

.productNumber > span:first-child {
    font-weight: bold;
}

.productNew {
    font-style: italic;
}

.productBuyContainer {
    flex-wrap: wrap;
    display: flex;
    gap: 20px;
}

.productBuy {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    margin-top: 10px;
}

.productBuyPartner {
    color: var(--color);
    flex: 0 1 calc(33.33% - 10px);
    padding: 34px 30px;
    word-break: break-word;
    background-color: var(--color4);
    text-decoration: none;
    border: 1px solid var(--color5);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.productTextTitle {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    border: 0;
    background-color: transparent;
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    font-weight: 700;
    width: 100%;
}

details.productTextArea summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

details.productTextArea summary::after {
    cursor: pointer;
    align-items: center;
    width: 6px;
    height: 6px;
    position: relative;
    display: inline-block;
    border-right: 2px solid var(--color);
    border-bottom: 2px solid var(--color);
    transform-origin: 0px 0px;
    content: " ";
    transform: rotate(45deg);
}

details.productTextArea[open] summary::after {
    transform: rotate(-135deg);
    top: 8px;
}

.productTextTitle2 {
    font-weight: bold;
    margin-top: 10px;
}

.productInfo {
    margin-bottom: 20px;
}

.productInfoTitle {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--color8);
    background-color: var(--color2);
    color: var(--color);
    padding: 14px 20px 12px;
}

.productInfoTitleHide {
    display: none;
}

.productInfoHide {
    display: none;
}

.productNavigationContainer {
    overflow: auto;
}

.productNavigation {
    max-width: 100%;
    margin-left: 0;
    display: none;
    list-style-type: none;
    justify-content: flex-start;
    border-bottom: 1px solid var(--color8);
    flex-wrap: wrap;
}

.productNavigationShow {
    display: flex;
    margin-top: 30px;
    margin-bottom: 30px;
}

.productNavigation li {
    text-align: center;
    background-color: var(--color2);
    min-width: fit-content;
}

.productNavigation button {
    text-decoration: none;
    color: var(--color);
    display: block;
    padding: 14px 20px 12px;
    border: 0;
    background-color: transparent;
    cursor: pointer;
}

.productNavigation button.active, .productNavigation button.active:hover {
    cursor: default;
    background-color: var(--color);
    color: var(--color4);
}

.productCopyRightText {
    font-size: var(--font-size-xsmall);
    margin-top: 45px;
}

.productTechnical {
    display: flex;
    flex-direction: column;
}

.productTechnicalRow {
    border-bottom: 1px solid var(--color5);
    display: flex;
    flex-wrap: wrap;
}

.productTechnicalTitle {
    padding: 19px 0px 23px;
    border-bottom: 2px solid var(--color5);
    position: relative;
    z-index: 0;
}

.productTechnicals .productTechnicalTitle:first-of-type {
    padding-top: 0;
}

.productTechnicalTitle::before {
    content: " ";
    position: absolute;
    bottom: -2px;
    left: 0px;
    width: 40%;
    border-bottom: 2px solid var(--brand-sub-color);
    z-index: 1;
}

.productTechnicalProperty {
    width: 40%;
    padding: 7px 50px 17px 0px;
}

.productTechnicalValues {
    flex: 1 1 60%;
    padding: 7px 0px 17px;
}

.productTechnicalValues ul{
    list-style-type: none;
}

.productFaqTitle {
    padding: 19px 0px 23px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid var(--color5);
    position: relative;
}

.productFaqs .productFaqTitle:first-of-type {
    padding-top: 0;
}

.productFaqTitle::before {
    content: " ";
    position: absolute;
    bottom: -2px;
    left: 0px;
    width: 40%;
    border-bottom: 2px solid var(--brand-sub-color);
    z-index: 1;
}

.productDownloads {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 10px;
}

.productDownload {
    text-decoration: none;
    color: var(--color);
    border: 1px solid var(--color5);
    padding: 20px;
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
}

.productDownloadInfo {
    width: 50%;
}

.productDownloadDate {
    width: 25%;
}

.productDownloadSize {
    width: 25%;
    text-align: right;
}

.productPicture {
    border: 1px solid var(--color5);
    position: relative;
    margin-bottom: 5px;
}

.productPicture img {
    display: block;
}

.productPictureLens {
    display: none;
    pointer-events: none;
    position: absolute;
    width: 20%;
    height: 20%;
    background-color: rgba(239, 239, 239, .5);
}

.productPictureLensShow {
    display: block;
}

.productPictureZoom {
    display: none;
    position: absolute;
    top: 0px;
    left: calc(100% + 100px);
    width: 100%;
    right: 0px;
    bottom: 0px;
    max-height: 700px;
    border: 1px solid var(--color);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 0 0;
    background-color: var(--color4);
    z-index: 1;
}

.productPictureZoomShow {
    display: none;
}

.productPictureContainer {
    position: relative;
    overflow: hidden;
}

.productPictureWrapper {
    overflow: auto;
    flex: 0 0 100%;
    flex-direction: column;
    display: flex;
    margin-bottom: 50px;
}

.productPicturesSmall {
    margin-left: 0;
    list-style-type: none;
    display: flex;
    gap: 5px 5px;
    transition: transform 0.5s ease;
}

.productPicturesSmall li {
    border: 1px solid var(--color5);
    display: flex;
    flex: 0 0 calc(20% - 4px);
}

.productPicturesSmall li.active {
    border: 1px solid var(--brand-sub-color);
}

.productPicturesSmall.js li a {
    pointer-events: none;
}

.productPicturesSmall li.productVideo {
    cursor: pointer;
}

.productVideoContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.productVideoContainerWrapper {
    background-color: var(--color4);
    width: 60%;
    height: 60%;
    padding: 50px;
    border-radius: 8px;
    position: relative;
}

.productVideoContainerText {
    margin-bottom: 10px;
}

.productVideoContainerLink {
    color: var(--color);
    text-decoration: underline;
}

.productVideoFrame {
    width: 100%;
    height: 100%;
    border: none;
}

.productVideoContainerClose {
    position: absolute;
    bottom: -40px;
    right: 0px;
    font-size: 2em;
    line-height: 1;
    color: var(--color4);
    background-color: transparent;
    border: 0px;
    cursor: pointer;
}

.productOutListed {
    margin-bottom: 30px;
}

.productOutListedInfo {
    margin-bottom: 10px;
    display: block;
    padding: 10px;
    background-color: var(--color5);
    color: var(--brand-sub-color);
    text-align: center;
    font-weight: bold;
}

.productBuyButton {
    color: var(--color4);
    text-decoration: none;
    background-color: var(--brand-sub-color);
    font-weight: bold;
    padding: 14px 80px;
    display: inline-block;
    border-radius: 50px;
}

.productBuyButton:hover {
    background-color: var(--color);
    color: var(--color4);
}

.productManufacturer {
    border-top: 2px solid var(--color8);
    padding-top: 20px;
    margin-top: 20px;
}

.productPrices {
    margin-bottom: 20px;
}

.productPrices th, .productPrices td {
    border-left: 1px solid var(--color5);
    border-top: 1px solid var(--color5);
    padding: 5px 10px;
    text-align: left;
}

.productPrices tr th:last-child, .productPrices tr td:last-child {
    border-right: 1px solid var(--color5);
}

.productPrices tr:last-child td {
    border-bottom: 1px solid var(--color5);
}

.productSimilarContainer {
    margin-top: 30px;
    overflow: auto;
}

.productSimilar {
    background-color: inherit;
    padding: 0;
    margin-top: 26px;
}

.productSimilar li a {
    padding: 10px;
}

.productsSimilarTiles {
    flex-wrap: wrap;
    transition: transform 0.5s ease;
}

.wrapperOverflow .productsSimilarTiles {
    flex-wrap: nowrap;
}

.wrapperOverflow .productsSimilarTiles li {
    flex: 0 0 calc(33.33% - 8px);
}

.productsSimilarTilesHide {
    overflow: hidden;
}

.productSimilarTitle {
    padding-top: 30px;
    padding-bottom: 30px;
    position: relative;
}

.productSimilarTitle:first-of-type {
    padding-top: 0;
}

.productSimilarList {
    overflow: hidden;
    border: 30px solid var(--color2);
    background-color: var(--color2);
    position:relative;
}

.productSimilarList ul {
    padding: 0;
}

.productInfothekInfos {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 20px;
}

.productInfothekInfo {
    border: 2px solid var(--brand-sub-color);
    padding: 12px 20px;
    border-radius: 50px;
    color: var(--color);
    text-decoration: none;
    display: flex;
    max-width: fit-content;
    margin-bottom: 10px;
    font-weight: bold;
}

.productInfothekInfo::before {
    content: "i";
    width: 30px;
    height: 30px;
    background-color: var(--brand-sub-color);
    text-align: center;
    border-radius: 50%;
    color: var(--color4);
    margin-right: 10px;
}

.productInfothekInfo:hover {
    background-color: var(--color);
    border: 2px solid var(--color);
    color: var(--color4);
}

.productHideTextMenu {
    display: none;
}

.productShowTextMenu {
    display: block;
}

.highlight_glossar {
    text-decoration: underline;
    text-underline-offset: 5px;
    position: relative;
}

.highlight_glossar_load {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.highlight_glossar_tooltip {
    background-color: var(--color5);
    display: none;
    padding: 15px;
    position: absolute;
    z-index: 2;
    top: 100%;
    left: 0;
    font-size: var(--glossar-font-size);
    border: 1px solid var(--color1);
    width: 250px;
    text-align: justify;
    hyphens: auto;
}

.highlight_glossar:hover .highlight_glossar_tooltip, .highlight_glossar:active .highlight_glossar_tooltip {
    display: block;
    font-weight: normal;
}

@media (min-height: 758px) {
    .productContainerPictures {
        position: sticky;
        top: 200px;
    }

    .productPictureZoomShow {
        display: block;
    }
}

@media (max-width: 1500px) {
    .footerLinks {
        flex-direction: column;
        white-space: inherit;
    }

    .footerLink {
        margin-top: 24px;
        margin-left: 0;
        flex-direction: row;
        text-align: left;
    }

    .footerLink li {
        display: inline-block;
        margin-right: 4px;
    }

    .footerLink li::after {
        margin-left: 10px;
        content: "|";
    }

    .footerLink li:last-child::after {
        display: none;
    }

    .footerLink li:last-child {
        margin-right: 0;
    }

    .footerHeadline {
        width: 100%;
    }

    .subCategorieGroup {
        width: calc(25% - 15px);
        min-width: calc(25% - 15px);
        max-width: calc(25% - 15px);
    }

    .tilesArea a {
        flex: 0 1 calc(50% - 10px);
    }

    .productsTiles li {
        flex: 0 0 calc(50% - 6px);
    }

    .productSimilar li a {
        padding: 10px;
    }

    .homeAssortment p {
        width: 100%;
    }

    .homeAssortment p.half {
        width: 100%;
    }

    .homeAssortmentAdapter, .homeAssortmentDocking, .homeAssortmentNews, .homeAssortmentCable {
        background-position: 100% calc(0% - 50px);
        padding-top: 180px;
    }

    .homeAssortmentNews {
        background-position: 100% 0%, 0% 0%;
    }

    .homeAssortmentCable {
        background-position: 100% 0%;
    }

    .homeContactInfo {
        padding: 40px;
        gap: 70px 40px;
    }

    .homeContactText {
        flex: 0 0 calc(100% - 140px);
    }

    .homeHelpCenter {
        padding: 40px;
    }

    .homeHelpCenterEntities {
        gap: 70px 40px;
    }

    .homeHelpCenterText {
        flex: 0 0 calc(100% - 140px);
    }

    .connection {
        flex: 0 1 calc(50% - 8px);
    }

    .knowledges a {
        flex: 0 1 calc(33.33% - 10px);
    }

    .catalogue {
        flex: 0 1 calc(50% - 15px);
    }

    .shoppingCart2Container {
        flex-wrap: wrap;
    }

    .shoppingCart2SavedAddresses {
        overflow: inherit;
        max-height: inherit;
    }

    .productGroups li {
        flex: 0 1 calc(25% - 9px);
    }
}

@media (max-width: 1350px) {
    .products .productsPicture {
        margin-left:auto;
        margin-right:auto;
        display: flex;
        flex: 0 0 250px;
        justify-content:center;
    }

    .productsText {
        flex: 0 0 100%;
    }
}

@media (max-width: 1250px) {
    .headerNav ul {
        gap: 0 25px;
    }

    .categorieMargin {
        margin-left: -15px;
    }

    .subCategorieGroup {
        width: calc(33.33% - 15px);
        min-width: calc(33.33% - 15px);
        max-width: calc(33.33% - 15px);
    }

    .productsTiles li {
        flex: 0 0 100%;
    }

    .homeTiles li {
        flex: 0 0 calc(50% - 6px);
    }

    .homeAssortment a {
        flex: 0 0 calc(50% - 10px);
    }

    .connection {
        flex: 1 0 100%;
    }
}

@media (max-width: 1023px) {
    body.categorie::before {
        display: none;
    }

    .headerTop {
        align-items: center;
        gap: 0px;
    }

    .search {
        flex: 0 0 100%;
        margin-top: 20px;
    }

    .search button {
        right: 6px;
        top: 0px;
    }

    .menu-icon {
        display: flex;
    }

    .headerNav {
        padding: 0;
    }

    body[data-brand="delock"] .headerNav, body[data-brand="navilock"] .headerNav {
        padding: 0px;
    }

    .headerNav ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0px;
        right: 0px;
        flex-direction: column;
        margin-left: 0;
        padding: 0 var(--margin-side);
        background-color: var(--brand-color);
    }

    header:has(.menu-toggle:checked) .headerNav ul {
        display: flex;
    }

    .headerNav li {
        width: 100%;
        margin-right: 0px;
    }

    .headerNav ul li.homeSmart {
        display: none;
    }

    .headerNav a {
        font-size: 1.3em;
        display: block;
        padding: 15px 10px;
    }

    .headerNav ul.myTragant {
        display: none !important;
    }

    .dataProtectionOptions {
        order: 2;
    }

    .dataProtectionText {
        flex: 0 0 100%;
        order: 1;
    }

    .dataProtectionButtons {
        flex: 0 0 100%;
        order: 3;
    }

    .categorieButton {
        padding: 0;
        background-color: inherit;
    }

    .categorieButton > a {
        color: var(--color);
    }

    .categorieButton > a:hover {
        color: var(--color3);
    }

    .categoriesShow {
        display: none;
    }

    .categorieMargin {
        margin-left: 0;
    }

    .languagesContainer2 {
        background-color: var(--brand-color);
        margin-left: 0;
    }

    .headerNav a.shoppingCart {
        padding: 0;
        margin-left: var(--margin-side);
    }

    .shoppingCartAmount {
        top: -6px;
    }

    .languagesContainer > img {
        display: none;
    }

    .languagesContainer::before {
        display: none;
    }

    .languagesContainer {
        width: 100%;
        order: 0;
        margin-top: 0;
        padding: 0px var(--margin-side) 10px;
        background-color: var(--brand-color);
    }

    .languages {
        position: relative;
        top: inherit;
        right: inherit;
        display: flex;
        flex-direction: row;
        background-color: inherit;
        gap: 0 10px;
        justify-content: flex-end;
    }

    .languages a {
        padding: 0;
    }

    .languages img {
        margin: 0;
    }

    .bread {
        padding-right: 0px;
    }

    .bread li {
        padding-right: 9px;
    }

    .bread li::after {
        margin-left: 9px;
    }

    .contentTop {
        margin-bottom: 20px;
    }

    .contentLeft {
        flex: 0 0 100%;
        margin-right: 0px;
    }

    .subNav {
        margin-bottom: 0;
    }

    .subNav a {
        padding-right: 20px;
    }

    .subNav ol li:last-child a {
        padding-right: 0;
    }

    .dealerList {
        height: auto;
        min-height: auto;
        margin-bottom: 30px;
        position: relative;
        top: inherit;
        overflow: inherit;
        padding-right: 0;
    }

    .dealerListSelectText {
        display: flex;
    }

    .dealerListSelectText::after {
        content: " ";
        width: 6px;
        height: 6px;
        display: inline-block;
        border-right: 2px solid var(--color);
        border-bottom: 2px solid var(--color);
        transform: rotate(45deg);
        transform-origin: 5px -5px;
    }

    .dealerList ol {
        display: none;
        position: absolute;
        top: 100%;
        left: 0px;
        right: 0px;
        width: auto;
        overflow: auto;
        height: 500px;
        border: 1px solid var(--color1);
        border-top: 0;
        z-index: 1;
        background-color: var(--color4);
    }

    .dealerList ol li a {
        padding-left: 10px;
        padding-right: 10px;
    }

    .dealerList:has(.menu-toggle:checked) ol {
        display: block;
    }

    .dealerList:has(.menu-toggle:checked) .dealerListSelectText::after {
        border-right: 2px solid var(--brand-sub-color);
        border-bottom: 2px solid var(--brand-sub-color);
        transform: rotate(-135deg);
        transform-origin: 1px 5px;
    }

    .formText {
        width: 100%;
    }

    .form {
        display: flex;
        flex-direction: column;
        align-items: inherit;
        gap: 0;
    }

    .formLeft {
        flex: 0 0 100%;
    }

    .formRight {
        flex: 0 0 100%;
    }

    .tilesArea a {
        padding: 33px 29px;
        flex: 0 0 100%;
    }

    .tilesArea img {
        width: 80px;
    }

    .products {
        gap: 12px 0px;
        background-color: inherit;
        padding: 0;
    }

    .products li {
        border: 1px solid var(--color5);
    }

    .products li:hover {
        border: 1px solid var(--brand-sub-color);
    }

    .productsTiles {
        gap: 12px;
        background-color: inherit;
        padding: 0;
    }

    .productSimilarList {
        border: 0px;
        background-color: inherit;
    }

    .productsTiles li {
        flex: 0 0 calc(50% - 6px);
        border: 1px solid var(--color5);
    }

    .productsTiles li:hover {
        border: 1px solid var(--brand-sub-color);
    }

    .productsTiles .productsPicture {
        max-width: inherit;
    }

    .products .productsPicture {
        flex: 0 1 20%;
        min-width: 100px;
    }

    .products .productsText {
        flex: 1;
    }

    .homeTiles .homeBig {
        flex: 0 0 100%;
    }

    .homeBig .productsText {
        order: 2;
        flex: 0 0 100%;
        padding: 0px 20px 50px;
    }

    .homeBig .productsPicture {
        order: 1;
        flex: 0 0 100%;
        max-width: inherit;
        padding: 20px;
    }

    .homeGroups {
        gap: 10px;
    }

    .homeGroups li {
        padding-right: 10px;
    }

    .homeGroups a {
        padding: 5px;
    }

    .homeInfothek {
        gap: 70px 0px;
    }

    .homeInfothek h2 {
        margin-top: 10px;
    }

    .homeInfothek div {
        flex: 0 0 100%;
        text-align: center;
    }

    .homeImportant {
        flex-wrap: wrap;
        gap: 50px 20px;
    }

    .homeImportant div {
        flex: 0 0 calc(50% - 10px);
        text-align: center;
        flex-direction: column;
    }

    .homeContact {
        flex-direction: column;
        gap: 0;
    }

    .homeContactPicture {
        flex: 0 0 calc(20% - 10px);
    }

    .homeContactInfo {
        flex: 0 0 calc(80% - 10px);
    }

    .homeLink {
        width: 100%;
    }

    .imprint {
        flex-direction: column;
    }

    .imprintLeft {
        flex: 0 0 100%;
        font-weight: bold;
    }

    .imprintRight {
        flex: 0 0 100%;
        background-color: inherit;
        padding: 0px 0px 20px;
    }

    .imprintFirst {
        margin-top: 54px;
    }

    .imprintFirst .imprintRight {
        padding-top: 0px;
    }

    .imprint:last-of-type .imprintRight {
        padding-bottom: 0;
    }

    .company {
        flex-direction: column;
        align-items: baseline;
        margin-bottom: 78px;
        gap: 20px;
    }

    .companyLeft, .companyRight {
        width: 100%;
    }

    .company1 {
        order: 2;
    }

    .company2 {
        order: 1;
    }

    .company5 {
        order: 6;
    }

    .company6 {
        order: 5;
    }

    .company2, .company6 {
        text-align: left;
    }

    .companyTitle {
        margin-bottom: 5px;
    }

    .companyTitle2 {
        margin-bottom: 10px;
    }

    .connection {
        flex: 0 0 calc(50% - 8px);
    }

    .connectionTitle {
        padding: 15px;
    }

    .knowledges a {
        flex: 0 0 calc(50% - 8px);
    }

    .catalogue {
        flex: 0 0 100%;
    }

    .faqGroup {
        flex: 0 0 calc(50% - 10px);
    }

    .jobContainer {
        flex-wrap: wrap;
        gap: 20px;
    }

    .jobDescription {
        order: 2;
        flex: 0 0 100%;
    }

    .jobPicture {
        order: 1;
        flex: 0 0 100%;
    }

    .profil {
        flex-direction: column;
        gap: 30px;
    }

    .productsButton {
        padding: 10px 15px;
        margin-bottom: 15px;
        margin-right: 1px;
        font-size: var(--productsButton-font-size);
    }

    .productGroups li {
        flex: 0 0 calc(50% - 12px);
    }

    .groupText {
        gap: 20px;
        flex-direction: column;
    }

    .groupTextPicture {
        width: 100%;
    }

    .productsFilterButton {
        display: block;
    }

    .pages {
        gap: 5px;
    }

    .pages a {
        padding: 13px 10px;
    }

    .productCompareLink {
        padding: 10px;
        gap: 40px;
    }

    .dockingstationtoolContainer {
        flex-direction: column;
        gap: 20px;
    }

    .dockingstationtoolContainerFilter {
        flex: 0 0 100%;
        margin-right: 0;
    }

    .dockingstationtoolContainerProducts {
        flex: 1 1 100%;
    }

    .dockingstationtoolCompare {
        display: none;
    }

    .dockingstationtoolCompareMobile {
        display: flex;
    }

    .eigenschaft_wert {
        border-bottom: 0;
        min-width: auto;
    }

    .eigenschaft_artikel_nr {
        flex: 0 0 100px;
    }

    .eigenschaft_artikel_picture {
        flex: 0 0 100px;
    }

    .eigenschaft_werte {
        flex: 1;
    }

    .productsFilter {
        display: none;
    }

    .filter {
        background-color: rgba(0, 0, 0, .5);
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        height: auto;
        width: auto;
        z-index: 10;
        display: none;
    }

    .filterShow {
        display: block;
    }

    .filterClose {
        display: block;
    }

    .filterSelect {
        display: block;
    }

    .filterSelectButton {
        padding: 10px;
    }

    .filterEigenschaftenContainer {
        height: 60vh;
        margin-top: 40vh;
        background-color: var(--color4);
        position: relative;
    }

    .filterEigenschaften {
        margin-top: 20px;
        overflow: auto;
        position: absolute;
        top: 40px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        height: auto;
        width: auto;
        padding: 0px 20px 20px;
    }

    .productNavigation {
        margin-top: 30px;
    }

    .productNavigation button {
        padding-left: 10px;
        padding-right: 10px;
    }

    .priceLists {
        flex-wrap: wrap;
        gap: 20px;
    }

    .priceList {
        flex: 0 0 calc(50% - 10px);
        box-shadow: 0px 0px 3px var(--color7);
        padding: 20px;
    }

    .priceListOptions {
        flex-direction: column;
        gap: 10px;
    }

    .user {
        display: flex;
        flex-direction: column;
        box-shadow: 0px 0px 3px rgb(150, 150, 150);
        width: 48%;
    }

    .usersInfo {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px 20px;
        font-weight: normal;
    }

    .user:first-child {
        display: none
    }

    .user > div {
        display: flex;
        flex-direction: row;
    }

    .usersInfo .user:nth-of-type(2n+1) {
        background-color: var(--color4);
    }

    .user > * {
        text-align: left;
        align-items: center;
    }

    .userHeadlineSmart {
        display: inline-block;
    }

    .userNameHeadline, .userLoginHeadline, .userStatus {
        flex: 0 0 12px;
    }

    .userNameHeadline > p:first-child, .userLoginHeadline > p:first-child {
        margin-right: 5px;
    }

    .userActive {
        margin-right: 5px;
    }

    .userInactive {
        margin-right: 5px;
    }

    .shoppingCart1SavedShoppingCarts {
        flex-wrap: wrap;
        gap: 20px 20px;
        display: flex;
        flex-direction: row;
    }

    .shoppingCart1SavedShoppingCart {
        display: flex;
        flex: 0 0 calc(25% - 15px);
        box-shadow: 0px 0px 3px var(--color7);
        flex-direction: column;
    }

    .shoppingCart1SavedShoppingCart:nth-child(odd) {
        background-color: inherit;
    }

    .shoppingCart1SavedShoppingCart:nth-child(1) {
        display: none;
    }

    .shoppingCart1SavedShoppingCartOption {
        flex: 0;
    }

    .shoppingCart1SavedShoppingCartCreate {
        flex: 0;
    }

    .shoppingCart1SavedShoppingCartName {
        flex: 0;
    }

    .howto {
        width: 100%;
        left: 0px;
        margin-left: 0px;
    }
}

@media only screen and (max-width: 1023px) and (orientation: landscape) {
    .headerTop {
        gap: 20px;
        flex-wrap: nowrap;
    }

    .search {
        margin-top: 0;
        flex: 1 1 auto;
        order: 2;
    }

    .search input[type=search] {
        padding: 14px 50px 12px 10px;
    }

    .menu-icon {
        order: 3;
        flex: 0 0 30px;
    }
}


@media (max-width: 800px) {
    .homeAssortment {
        flex-direction: column;
    }

    .homeAssortment h3 {
        color: var(--brand-sub-color);
    }

    .homeAssortmentLeft {
        flex: 0 0 100%;
    }

    .homeAssortmentRight {
        flex: 0 0 100%;
    }

    .homeAssortmentAdapter, .homeAssortmentDocking, .homeAssortmentNews, .homeAssortmentCable {
        padding-bottom: 50px;
    }

    .homeAssortmentCable {
        background-position: 100% -70px;
    }

    .homeAssortmentNews h3 {
        color: inherit;
    }

    .homeWe {
        flex-direction: column;
        background-image: url(../png/we.png);
    }

    .homeWeLeft {
        flex: 0 0 100%;
        padding: 50px 20px 20px;
        background-image: none;
        border: 0;
    }

    .homeWeRight {
        gap: 0;
    }

    .homeWeRightFirst {
        padding: 20px;
        background-image: none;
        border: 0;
    }

    .homeWeRightSecond {
        padding: 20px 20px 50px;
        background-image: none;
    }

    .user {
        flex: 0 0 calc(50% - 10px);
    }

    .shoppingCart1SavedShoppingCart {
        flex: 0 0 calc(50% - 10px);
    }

    .shoppingCartChangeButton {
        padding-right: 5px;
        margin-right: 10px;
    }

    .shoppingCart1Products {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .shoppingCart1Product {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 0px;
        border-bottom: 1px solid var(--color5);
        padding-bottom: 20px;
    }

    .shoppingCart1ProductInfo {
        display: block;
    }

    .shoppingCart1ProductTitle {
        display: none;
    }

    .shoppingCart1Product:last-of-type {
        border-bottom: 0;
    }

    .shoppingCart1ProductPicture {
        flex: 0 0 100%;
    }

    .shoppingCart1ProductName {
        flex: 0 0 100%;
    }

    .shoppingCart1ProductPrice {
        flex: 0 0 33.33%;
    }

    .shoppingCart1ProductPrice2 {
        text-align: right;
    }

    .shoppingCart1ProductAmount {
        flex: 0 0 33.33%;
    }

    .shoppingCart1ProductDelete {
        flex: 0 0 100%;
    }

    .shoppingCart2SavedAddresses {
        flex-wrap: wrap;
    }

    .shoppingCart2SavedAddress {
        flex: 0 0 calc(50% - 10px);
    }

    .shoppingCart4Container {
        flex-wrap: wrap;
    }

    .shoppingCart4Info {
        flex: 0 0 calc(50% - 40px);
    }

    .productContainer {
        gap: 40px;
    }

    .productContainerPictures {
        flex: 0 0 100%;
        position: inherit;
        top: inherit;
    }

    .productContainerInformation {
        flex: 0 0 100%;
    }

    .productContainerText {
        flex: 0 0 100%;
    }

    .productContainerSimilar {
        flex: 0 0 100%;
    }

    .productPictureLensShow {
        display: none;
    }

    .productPictureZoomShow {
        display: none;
    }

    .wrapperOverflow .productsSimilarTiles li {
        flex: 0 0 50%;
    }

    .priceListSendOptions {
        gap: 20px;
        flex-wrap: wrap;
    }

    .priceListSendOption {
        flex: 0 0 100%;
    }

    .priceListColumns {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .priceListColumnsContainer {
        flex: 0 0 100%;
    }
}

@media (max-width: 600px) {
    main {
       padding: 20px var(--margin-side) 0;
    }

    .homeTiles .homeBig {
        flex: 0 0 100%;
    }

    .connection {
        flex: 0 0 100%;
    }

    .knowledges a {
        flex: 0 0 100%;
    }

    .faqGroup {
        flex: 0 0 100%;
    }

    .shoppingCart2Address {
        flex: 0 0 100%;
    }

    .shoppingCart2Address2 {
        flex: 0 0 100%;
    }

    .catalogueInfo {
        flex: 0 0 100%;
    }

    .cataloguePicture {
        flex: 0 0 100%;
    }

    .user {
        flex: 0 0 100%;
    }
}