@charset "UTF-8";
@import "flag-icons.min.css";
@import "katalog-style.css";
@import 'navigation.css';
@import 'search.css';
@import 'event.css';
@import 'career.css';
@import 'swiper.css';
@import 'detailsuche.css';
@import 'kontakt.css';
@import 'seotext.css';
@import 'mapbox.css';
@import 'bestellvorgang.css';
@import 'warenkorb.css';
/**********************************************************/
/* Root                                                   */
/**********************************************************/

/*******************************************************************/
/* Breakpoints to watch     =>     breakpoints to write media query*/
/* (min-width: 1440px)                                     => br-4 */
/* (min-width: 1164px) and (max-width: 1399px)             => br-3 */
/* (min-width: 1024px) and (max-width: 1163px)             => br-2 */
/* (min-width: 640px) and (max-width: 1023px)              => br-1 */
/* (max-width: 639px)                                      => br-0 */
/*******************************************************************/


:root {
    /* Colors */
    --clr-neutral-900: 0, 0, 0;
    --clr-neutral-800: 49, 49, 49;
    --clr-neutral-700: 112, 112, 112;
    --clr-neutral-300: 153, 153, 153;
    --clr-neutral-200: 233, 233, 233;
    --clr-neutral-100: 255, 255, 255;

    --clr-primary-400: 0, 93, 69;
    --clr-accent-400: 242, 196, 109;
    --clr-accent-600: 248, 196, 66;
    --clr-accent-800: 198, 12, 17;

    /* Font Family */
    --ff-primary: 'Acumin Pro', sans-serif;
    --ff-secondary: 'Exo 2', sans-serif;

    --ff-body: var(--ff-primary);
    --ff-heading: var(--ff-primary);

    /* Font Sizes */
    --fs-900: 8rem;
    --fs-800: 5rem;
    --fs-700: 3rem;
    --fs-600: 2rem;
    --fs-500: 1.7rem;
    --fs-400: 1.6rem;
    --fs-300: 1.5rem;
    --fs-200: 1.4rem;
    --fs-100: 1.2rem;

    --fs-body: var(--fs-400);

    /* Font Weight */
    --fw-bold: bold;
    --fw-regular: normal;
    --fw-light: light;

    /* Sizes */
    --size-900: 12rem;
    --size-800: 9rem;
    --size-700: 8rem;
    --size-600: 6rem;
    --size-500: 5rem;
    --size-400: 3rem;
    --size-300: 2rem;
    --size-200: 1rem;
    --size-100: 0.5rem;

}


/**********************************************************/
/* Reset                                                  */
/**********************************************************/


/***************************************************************************/
/* added Reset by Moer                                                     */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css  */
/***************************************************************************/

html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

/* Sections
     ========================================================================== */

/**
   * Remove the margin in all browsers.
   */

body {
    margin: 0;
}

/**
   * Render the `main` element consistently in IE.
   */

main {
    display: block;
}

/**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
     ========================================================================== */

/**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */

hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/* Text-level semantics
     ========================================================================== */

/**
   * Remove the gray background on active links in IE 10.
   */

a {
    background-color: transparent;
}

/**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */

abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    text-decoration: underline dotted;
    /* 2 */
}

/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */

b,
strong {
    font-weight: bolder;
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/**
   * Add the correct font size in all browsers.
   */

small {
    font-size: 80%;
}

/**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
     ========================================================================== */

/**
   * Remove the border on images inside links in IE 10.
   */

img {
    border-style: none;
}

/* Forms
     ========================================================================== */

/**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
}

/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */

button,
input {
    /* 1 */
    overflow: visible;
}

/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */

button,
select {
    /* 1 */
    text-transform: none;
}

/**
   * Correct the inability to style clickable types in iOS and Safari.
   */

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
   * Remove the inner border and padding in Firefox.
   */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
   * Restore the focus styles unset by the previous rule.
   */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
   * Correct the padding in Firefox.
   */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */

legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}

/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */

progress {
    vertical-align: baseline;
}

/**
   * Remove the default vertical scrollbar in IE 10+.
   */

textarea {
    overflow: auto;
}

/**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */

[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

/**
   * Remove the inner padding in Chrome and Safari on macOS.
   */

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */

::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

/* Interactive
     ========================================================================== */

/*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */

details {
    display: block;
}

/*
   * Add the correct display in all browsers.
   */

summary {
    display: list-item;
}

/* Misc
     ========================================================================== */

/**
   * Add the correct display in IE 10+.
   */

template {
    display: none;
}

/**
   * Add the correct display in IE 10.
   */

[hidden] {
    display: none;
}

/**********************************************************/
/* End Added Reset by Moer                                */
/**********************************************************/


*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;

    /* SSE 
    font: inherit;
    */
}

a {
    text-decoration: none;
    color: rgb(var(--clr-neutral-900));
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
}

html:focus-within {
    scroll-behavior: smooth;
}


body {
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}

a:not([class]) {
    text-decoration-skip-ink: auto;
}

img,
picture,
svg {
    max-width: 100%;
    display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/**********************************************************/
/* General Styling                                        */
/**********************************************************/
html {
    font-size: 10px !important;
}

html::-webkit-scrollbar-thumb {
    background: rgb(var(--clr-primary-400));
    width: 8px;
}


body {
    font-size: var(--fs-body);
    font-family: var(--ff-body);
    color: rgb(var(--clr-neutral-800));
}

[data-width="narrow"] {
    max-width: 1280px;
}

/**********************************************************/
/* Utility Classes                                        */
/**********************************************************/
.sr-only {
    position: absolute;
    width: 1px solid rgb(var(--clr-neutral-300));
    height: 1px solid rgb(var(--clr-neutral-300));
    padding: 0;
    margin: -1px solid rgb(var(--clr-neutral-300));
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.container {
    --max-width: 1650px;
    --container-padding: var(--size-200);

    width: min(var(--max-width), 100% - (var(--container-padding) * 2));
    margin-inline: auto;
    max-width: 1650px !important;

    @media screen and (max-width: 639px) {
        padding-left: 0;
        padding-right: 0;
    }
}

.even-columns {
    display: grid;
    gap: var(--size-400);
}


.control_element {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
}

@media (min-width: 1024px) {
    .even-columns {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-400);
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-center p {
    margin-inline: auto;
}

.text-neutral-100 * {
    color: rgb(var(--clr-neutral-100));
}

.vertical-center {
    align-items: center;
}

.vertical-end {
    /* margin-block-start: auto;*/
}

.space-between {
    justify-content: space-between;
}

.red {
    color: rgb(var(--clr-accent-800)) !important;
}

.yellow {
    color: rgb(var(--clr-accent-600)) !important;
}


.-max-width-limited {
    max-width: 86%;
    margin-left: auto;
    margin-right: auto
}

@media (min-width: 40em) {
    .-max-width-limited {
        max-width: 90%
    }
}

@media (min-width: 64em) {
    .-max-width-limited {
        max-width: 86%
    }
}

@media (min-width: 90em) {
    .-max-width-limited {
        max-width: 82%
    }
}

@media (min-width: 105em) {
    .-max-width-limited {
        max-width: 1360px
    }
}


/* Checklist
**********************************************************/
.checklist {
    list-style: none;
    --checklist-size: 1.3em;
}

.checklist li {
    padding-inline-start: var(--checklist-size);
}

.checklist li::before {
    content: '\f00c';
    font-family: 'FontAwesome';
    color: rgb(var(--clr-accent-400));
    display: inline-block;
    margin-inline-start: calc(-1* var(--checklist-size));
    width: var(--checklist-size);
}

/* Arrowlist
**********************************************************/
.arrowlist {
    list-style: none;
    --arrowlist-size: 1.3em;
    padding: 25px;

}

.arrowlist li {
    padding-inline-start: var(--arrowlist-size);
    font-size: 24px;
}

.arrowlist li::before {
    content: '\f061';
    font-family: 'FontAwesome';
    color: rgb(var(--clr-accent-400));
    display: inline-block;
    margin-inline-start: calc(-1* var(--arrowlist-size));
    width: var(--arrowlist-size);
}

/* Datelist
**********************************************************/
.datelist {
    list-style: none;
    --datelist-size: 1.3em;
}

.datelist li {
    padding-inline-start: var(--datelist-size);
    position: relative;
}

.datelist li::before {
    content: '\f3c5';
    font-family: 'FontAwesome';
    display: inline-block;
    margin-inline-start: calc(-1* var(--datelist-size));
    width: var(--datelist-size);
}

.datelist li:last-child::before {
    content: '\f141';
}

/* Buttons
**********************************************************/
.btn {
    display: inline-block;
    border: 0;
    margin: 0;
    text-decoration: none;
    padding: var(--size-100) var(--size-300);
    background-color: rgb(var(--clr-accent-400));
    cursor: pointer;
}

/**********************************************************/
/* Typographie                                            */
/**********************************************************/
h1,
.h1 {
    font-size: var(--fs-700);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    color: rgb(var(--clr-primary-400));
}

h2,
.h2 {
    color: rgb(var(--clr-primary-400));
    font-size: var(--fs-600);
    font-weight: var(--fw-bold);
    line-height: 1.2;
}

h3,
.h3 {
    font-size: var(--fs-500);
    font-weight: var(--fw-bold);
    line-height: 1.2;
}

h4,
.h4 {
    font-size: var(--fs-400);
    font-weight: var(--fw-bold);
    line-height: 1.2;
}

/* Top Header
***********************************************************/
.top-header {
    padding: 2px;
    background-color: rgb(var(--clr-primary-400));
}

@media screen and (max-width: 1024px) {
    .top-header {
        position: fixed;
        top: 0;
    }

}

.top-header select {
    color: rgb(var(--clr-neutral-100));
    border: none;
    background: none;
}

.top-header select option {
    color: rgb(var(--clr-neutral-100));
}

.top-header .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.top-header span {
    font-size: var(--fs-300);
    color: rgb(var(--clr-neutral-100));
}


/* Header
***********************************************************/

/* Home */
#home .main-header .container {
    grid-template-areas:
        'logo login'
        'logo nav';
}

#home .main-header .search {
    display: none;
    position: relative;
    transition: width 0.5s ease-in-out;
}

.main-header {
    padding-top: 5px;
    padding-bottom: 10px;
    transition: translate 0.3s ease-in-out;
}

.main-header .container {
    display: flex;
    flex-direction: column;
}

.main-header .container :is(.hdr-top, .hdr-bottom) {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
}

.main-header .container .hdr-bottom {
    margin-top: 5px;
    margin-bottom: 0px;

    &>nav {
        margin-left: auto;
    }
}

.main-header .container .hdr-bottom>nav {
    @media screen and (max-width: 1024px) {
        .dropdown {
            margin-left: 15px;
            border-left: 2px solid rgb(var(--clr-primary-400));

            a {
                display: flex;
                max-width: 250px;
            }
        }
    }

    @media screen and (min-width: 1025px) {
        .dropdown {
            display: none;
            position: absolute;
            top: 100%;
            padding: 20px 10px 10px 10px;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            min-width: 150px;
            right: 0;

            li {
                margin: 10px 0px;

            }
        }

        li:has(.dropdown) {
            &::after {
                display: inline-block;
                content: '\f107';
                font-family: 'FontAwesome';
                color: rgb(var(--clr-primary-400));
                margin-left: 1px;
                transition: transform 0.2s ease;
            }

            &:hover::after {
                transform: rotate(180deg);
            }
        }

    }

    opacity: 1;
    transition: opacity 0.5s ease;
    pointer-events: all;

    position: relative;



    li:hover>.dropdown {
        display: block;
    }

    .dropdown li {
        display: block;
        width: 100%;
    }
}


@media screen and (min-width: 1024px) and (max-width: 1163px) {
    .search.full-width+nav {
        opacity: 0;
        /* Hide nav when input is focused */
        pointer-events: none;
    }
}


.main-header .container .hdr-top a.logo {
    img {
        @media screen and (max-width: 1399px) {
            width: 230px;
            height: 35px;
        }

        @media screen and (min-width: 1400px) {
            width: 350px;
            height: 60px;
        }
    }
}

@media screen and (min-width: 1025px) and (max-width: 1250px) {
    .main-header .container .hdr-bottom {
        margin-top: 15px;
        flex-direction: column-reverse;

        nav {
            margin-left: 0;

        }
    }
}



.main-header .container .hdr-bottom>.search {
    flex-grow: 1;

    @media screen and (max-width: 1224px) {
        margin-right: 10px;
    }
}

.main-header .container .h body header.main-header {
    transition: all 0.5s ease-in-out;
}

/* Logo */
.logo {
    max-width: 350px;
    transition: all 0.5s ease-in-out;
    display: inline-block;
}

/* Login */
.login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 65px;
}

/* //KZI  old gap:var(--size-400)*/
.login__container {
    grid-area: login;
    display: flex;
    align-items: start;
    justify-content: end;

    &>* {
        margin-left: 16px;

        span {
            font-size: 13px;
        }
    }

    .btn-myaccount,
    .btn-logout {
        display: none;

        @media screen and (max-width: 1024px) {
            display: block;
        }
    }
}

.main-header .login :is(button.login, a.button) {
    max-width: 100%;
    border-radius: 5px;
    background-color: white;
    color: rgb(var(--clr-primary-400));
    transition: all 0.2s linear 0s;
    cursor: pointer;
    border: 1px solid rgb(var(--clr-primary-400));
    min-width: 80px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;


    &:hover {
        background-color: rgb(var(--clr-primary-400));
        color: white;
    }

    &>span {
        margin: 0 15px;
    }
}

.main-header .login a.button {
    color: white;
    background-color: rgb(var(--clr-primary-400));

    &:hover {
        background-color: white;
        color: rgb(var(--clr-primary-400));
        ;
    }
}


.main-header .login button:not(.cart-preview__footer button, .login__btn, .register, .login) {
    display: grid;
    gap: var(--size-200);
    background-color: transparent;
    border: none;
    color: rgb(var(--clr-neutral-800));
    cursor: pointer;
}

.main-header .login button i:not(.cart-preview__footer i) {
    width: fit-content;
    justify-self: center;
    position: relative;
    margin-left: 10px;
    color: rgb(var(--clr-primary-400));
    font-size: var(--fs-700);
}

/*//SSE */
.main-header .divider {
    display: flex;
    height: 100%;
    align-items: center;
}

.main-header .divider i {
    color: rgb(var(--clr-primary-400));
    transform: scale(1, 5);
}


.reminder,
.cart__btn,
.konto {
    position: relative;
}

.countCircle {
    position: absolute;
    right: -10px;
    top: -10px;
    background-color: rgb(var(--clr-accent-600));
    padding: var(--size-100);
    border-radius: 100px;
    width: 20px;
    height: 20px;
    font-size: 12px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2px;

    @media screen and (max-width: 1024px) {
        left: 0;
        width: 20px;
        height: 20px;
    }
}

.countCircleWarenkorb {
    position: absolute;
    right: -10px;
    top: -10px;
    background-color: rgb(var(--clr-accent-600));
    padding: var(--size-100);
    border-radius: 100px;
    width: 20px;
    height: 20px;
    font-size: 12px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2px;

    @media screen and (max-width: 1024px) {
        left: 0;
        width: 20px;
        height: 20px;
    }
}

.alertCircle {
    position: absolute;
    right: -10px;
    top: -10px;
    background-color: rgb(var(--clr-accent-800));
    padding: var(--size-100);
    border-radius: 100px;
    width: 20px;
    height: 20px;
    font-size: 12px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2px;

    @media screen and (max-width: 1024px) {
        left: 0;
        width: 20px;
        height: 20px;
    }
}



/* logged-in */
.main-header.logged-in .login button.login,
.main-header.logged-in .login button.register,
.main-header .login button.reminder,
.main-header .login button.cart,
.main-header .login button.konto,
.main-header .login button.logout {
    display: none;
}

.main-header.logged-in .login button.reminder,
.main-header.logged-in .login button.cart,
.main-header.logged-in .login button.konto,
.main-header.logged-in .login button.logout {
    display: grid;
}

.main-header.logged-in .login button.cart {
    position: relative;
}

/* Warenkorb Indicator */
.main-header.logged-in .login button.cart::before {
    content: attr(data-before);
    position: absolute;
    top: calc(-1 * var(--size-200));
    right: var(--size-200);
    display: grid;
    place-content: center;
    width: var(--size-300);
    height: var(--size-300);
    font-size: var(--fs-100);
    color: rgb(var(--clr-neutral-100));
    background-color: rgb(var(--clr-primary-400));
    border-radius: 100%;
    border: 1px solid rgb(var(--clr-neutral-100));
}

/* Welcome Message */
.main-header.logged-in .login {
    gap: var(--size-300);
}

.welcome {
    display: none;
}

.main-header.logged-in .login .welcome {
    display: block;
}

/* Search
***********************************************************/
.search * {
    margin: 0;
}

.search-btn {
    display: none;
}

.search__container {
    position: relative;
    display: flex;
    gap: 20px;

    input {
        font-size: 15px;
    }

    span {
        font-size: 15px;
    }
}

#search_res #tisergebnis .warenkbutton_table>form {
    display: flex;
    gap: 5px;
    justify-content: flex-start;
    align-items: center;


    button {
        max-width: 40px;
        height: 34px;
        margin-top: 0px;
        padding: 0;
        align-self: center;

        i.fa {
            display: inline-block;
            margin: auto auto;
        }
    }
}

/* Product Search */
.search__product {
    position: relative;
    transition: width .5s ease-in-out;

    @media screen and (min-width: 1164px) and (max-width: 1399px) {
        width: 300px;
    }

    @media screen and (min-width: 1400px) {
        width: 500px;
    }
}


.search__product label {
    display: block;
}

.imprint#content_text :is(h2, h1, h3) {
    margin-top: 50px;
}

.imp-link {
    color: rgb(var(--clr-primary-400));

    &:hover {
        text-decoration: underline;
    }
}

/* Tooltip */
.tooltip {
    display: inline-block;
}

.tooltip__content {
    position: absolute;
    top: 0;
    left: 0%;
    transform: translateY(0);
    pointer-events: none;
    color: rgb(var(--clr-primary-400));
    background-color: rgb(var(--clr-neutral-200));
    box-shadow: 0 0.1rem 0.3rem rgb(var(--clr-neutral-900), 0.6);
    padding: var(--size-100);
    transition: all 150ms;
    opacity: 0;
}

.tooltip:hover .tooltip__content {
    transform: translateY(-125%);
    opacity: 1;
}

.search__product input {
    position: relative;
    width: 100%;
    border: 1px solid rgb(var(--clr-neutral-800));
    border-radius: 100vw;
    padding: var(--size-200);
    background-color: white;
}

.search__product button[type="submit"] {
    position: absolute;
    right: 0;
    top: 0;
    color: rgb(var(--clr-neutral-100));
    border: 1px solid rgb(var(--clr-primary-400));
    border-radius: 100vw;
    padding: 9px 16px;
    background-color: rgb(var(--clr-primary-400));
    cursor: pointer;
}

.search__product,
.search__detail,
.search__machine {
    position: relative;
}

.search__product label {
    display: none;
}


.search__detail label,
.search__machine label {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out, visibility 0.1s ease-in-out, margin 0.3s ease-in-out;
    padding: 8px 0px;

    span {
        font-size: 26px;
        color: rgb(var(--clr-primary-400));
    }

    span.tooltip-title {
        transition: margin 0.4s ease-in-out
    }

    span.tooltip {
        display: flex;
        margin-left: 25px;
    }
}

.search__product:hover label,
.search__detail:hover label,
.search__machine:hover label {
    transform: translateY(0);
    visibility: visible;
}


.hdr-bottom .search.full-width .search__product label {
    transform: translateY(0);
    visibility: visible;

    @media screen and (min-width:1024px) and (max-width: 1399px) {
        justify-content: flex-end;

        .tooltip {
            margin-right: 40px;
            flex-direction: column;
        }
    }

    @media screen and (min-width:1164px) and (max-width: 1399px) {
        .tooltip {
            margin-right: 75px;

        }
    }

    @media screen and (min-width:1400px) {
        justify-content: center;

        .tooltip-title {
            margin-left: 300px;
        }
    }
}



/* Search Detail */
.language__list {
    display: none;
    min-width: 130px;
    position: absolute;
    margin-top: 10px;
    padding: var(--size-200);
    background-color: white;
    border: 1px solid;
    z-index: 1;
    -webkit-box-shadow: 2px 6px 21px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 2px 6px 21px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 2px 6px 21px -2px rgba(0, 0, 0, 0.75);
}

.search__detail__list {
    display: none;
    position: absolute;
    min-width: 800px;
    margin-block-start: var(--size-300);
    padding: 5px 18px;
    background-color: white;
    z-index: 3;
    box-shadow: 0 0 10px rgb(var(--clr-neutral-900), 0.6);
    margin-top: 18px;
}

.search__machine__list {
    display: none;
    position: absolute;
    margin-block-start: var(--size-300);
    padding: var(--size-400);
    background-color: rgb(var(--clr-neutral-200));
    z-index: 3;
    box-shadow: 0 0 10px rgb(var(--clr-neutral-900), 0.6);

}

.language__list ul {
    list-style: none;
    gap: var(--size-400);
}

.language__list ul li {
    margin-bottom: 6px;
}

.search__detail__list ul {
    list-style: none;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
    overflow-y: auto;
    padding: 10px 0;

}

.search__detail__list li {
    box-sizing: border-box;
    background-color: white;
    padding: 10px;
    text-align: center;
    min-height: 225px;
    transition: all 0.2s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    border: 1px solid white;

}

.search__detail__list li:hover {
    -webkit-box-shadow: rgba(0, 93, 69, 0.15) 1.95px 1.95px 2.6px;
    box-shadow: rgba(0, 93, 69, 0.15) 1.95px 1.95px 2.6px;
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    border: 1px solid rgb(var(--clr-primary-400));
}

.language__list ul li a {
    display: flex;
    gap: 20px;
    align-items: center;
    text-decoration: none;
    position: relative;

    span {
        color: rgb(var(--clr-neutral-900));
        transition: all 0.3s ease;
        padding-top: 4px;
    }
}

.language__list ul li a:hover {
    span {
        color: rgb(var(--clr-primary-400));
        transform: translateX(3px);
    }
}

.search__detail__list ul li {
    min-height: 225px;
    border-radius: 6px;
}

.search__detail__list ul li img {
    max-height: var(--size-500);
    object-fit: contain;
    margin: 0 auto;
    transition: all 0.5s ease;
}

.search__detail__list a {
    height: 100%;
    display: grid;
    justify-content: center;
    align-items: center;

}

/* Search Machine */
.search__machine__list {
    min-width: 70vw;
    position: fixed;
    left: 15%;
    background-color: white;
    margin-top: 18px;

    @media screen and (max-width: 1224px) {
        width: 95%;

        left: 2.5%;
    }
}

.search__machine__list ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 10px 0;
    justify-content: space-around;

    li {
        flex: 1;
        padding: 5px;
        border: 1px solid white;
        transition: all 0.5s ease;

        &:hover {
            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
        }

        a {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;


            &::before {
                content: '';
                transform-origin: 100% 50%;
                transform: scale3d(0, 1, 1);
                transition: transform 0.3s;
                position: absolute;
                width: 100%;
                height: 1px;
                background: currentColor;
                top: 100%;
                left: 0;
                pointer-events: none;
            }

            &:hover::before {
                transform-origin: 0% 50%;
                transform: scale3d(1, 1, 1);
            }

            span {

                font-size: 25px;
                display: flex;
                justify-content: center;
                text-align: center;
                align-items: center;
            }

        }

    }
}

/* Search Button */
.language__btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    border: none;
    background-color: transparent;
    color: rgb(var(--clr-neutral-100));
    line-height: 1;
}

.search__detail__btn,
.search__machine__btn {
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    border: 1px solid rgb(var(--clr-neutral-800));
    border-radius: 100vw;
    padding: var(--size-200) var(--size-300);
    background-color: rgb(var(--clr-neutral-100));

    span {
        @media screen and (max-width: 1399px) {
            font-size: 12px;
        }
    }
}

.language__btn span,
.search__detail__btn span,
.search__machine__btn span {
    margin-inline: var(--size-200);
    width: max-content;
}

.language__btn :where([class*="fa-chevron-"]),
.search__detail__btn :where([class*="fa-chevron-"]),
.search__machine__btn :where([class*="fa-chevron-"]) {
    margin-inline-start: auto;
}

.language__btn :where([class*="fa-chevron-"]),
.search__detail__btn :where([class*="fa-chevron-"]),
.search__machine__btn :where([class*="fa-chevron-"]) {
    transition: all 0.2s ease;
}

.language__btn[aria-expanded="true"] :where([class*="fa-chevron-"]),
.search__detail__btn[aria-expanded="true"] :where([class*="fa-chevron-"]),
.search__machine__btn[aria-expanded="true"] :where([class*="fa-chevron-"]) {
    transform: rotate(0.5turn);
}

/* Triangle */
.language__list::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--size-200));
    left: var(--size-300);
    border: var(--size-200) solid transparent;
    border-bottom: 0;
    border-top-color: white;
    transform: rotate(0.5turn);
}


/* Show List */

.language__list.open {
    display: block;
}

.search__detail__list.open {
    display: flex;
    width: 95vw;
    max-height: 70vh;
    border-radius: 5px;
    transform: translateX(-36%);
    flex-direction: column;
    position: fixed;
    left: 0;
    transform: translate(2%, 0px);

    .search__detail_heading {
        margin-top: 12px;
        color: rgb(var(--clr-primary-400));
        align-self: center;
        margin-bottom: 10px;
        font-size: 26px;
    }
}

.search__machine__list.open {
    display: block;
}

/* Navigation
***********************************************************/

.navigation {
    display: flex;
    list-style: none;
    justify-content: center;
    align-items: center;
    gap: 8px;

    li {
        min-width: max-content;
    }

    li:is(:last-of-type) {
        ul {
            right: 0;
            transform: translate(0%, 0%);
        }
    }
}

.navigation li a {
    color: rgb(var(--clr-neutral-800), 0.8);
    font-size: 15px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 3px;

    @media screen and (max-width: 1350px) and (min-width: 1251px) {
        font-size: 12px;
    }
}

.navigation li a.active {
    color: rgb(var(--clr-neutral-800));
    border-bottom: 3px solid rgb(var(--clr-neutral-800));
}

.navigation li a:hover {
    color: rgb(var(--clr-primary-400));
    border-bottom: 3px solid rgb(var(--clr-primary-400));
}

/* Showcase
***********************************************************/
.showcase {
    position: relative;
    background-image: url('../img/Headerbild.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    isolation: isolate;
}

.showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 66%;
    z-index: -1;
    background-color: rgb(var(--clr-primary-400), 0.6);
}

.showcase .slogan {
    position: absolute;
    z-index: -1;
}

.showcase .container__inner {
    position: relative;
    padding: var(--size-600);
    background-color: rgba(var(--clr-neutral-100), 0.8);
    margin-inline: auto;
}

.showcase h1 {
    font-size: var(--fs-900);
}

.showcase .subline {
    font-size: var(--fs-700);
    font-weight: var(--fw-light);
}

.showcase .search {
    background-color: rgb(var(--clr-neutral-100));
    border-radius: 100vw;
    padding: var(--size-400);
}

.showcase .advantage .checklist {
    display: flex;
    justify-content: center;
    gap: var(--size-600);
}

.showcase .advantage .checklist li::before {
    color: rgb(var(--clr-neutral-800));
    font-size: var(--fs-700);
}

.showcase .advantage .checklist li {
    display: flex;
    margin-block-start: var(--size-400);
    align-items: center;
}

/* Breadcrumb
**********************************************************/
.breadcrumb {
    color: rgb(var(--clr-neutral-800));
    margin-block: var(--size-400);
}

.breadcrumb .breadcrumb__item a {
    color: rgb(var(--clr-primary-400));
    text-decoration: none;
}

/* Intro
**********************************************************/
.intro {
    padding-block: var(--size-300);

    @media screen and (max-width: 1023px) {
        padding-top: 75px;
    }

}

.intro__content {
    grid-column: 1 / 3;
}

.dates {
    padding: var(--size-400);
    background-color: rgb(var(--clr-accent-400));
    position: relative;
    isolation: isolate;
}

.dates::before {
    content: '';
    position: absolute;
    background-color: rgb(var(--clr-accent-400));
    -webkit-mask-image: url('../img/clipboard.svg');
    mask-image: url('../img/clipboard.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    inset: 0;
    top: -50%;
    z-index: -1;
    /*//SSE */
    height: 100%;
    top: -100%;
}

.dates .datelist span {
    font-size: var(--fs-700);
    font-weight: var(--fw-bold);
}

/* Quality
**********************************************************/
.quality {
    display: flex;
    background-image: url('../img/Bild_Startseite.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.quality .wrapper {
    flex: 0 0 46.8%;
    display: flex;
    padding: var(--size-900) var(--size-400);
    background-color: rgb(var(--clr-primary-400), 0.6);
}

.qualityb {
    display: flex;
    background-image: url('../img/Bild_Startseite_News.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    @media screen and (max-width: 639px) {
        flex-direction: column;
    }

    h2 {
        font-size: 30px;
    }
}

.qualityb .wrapper {
    flex: 0 0 50%;
    display: flex;
    padding: 40px 30px;
    background-color: rgb(var(--clr-primary-400), 0.6);
}

/* Advantage
**********************************************************/
.advantages {
    padding-block: var(--size-600);

    p {
        margin-top: 15px;
    }
}

.advantages i {
    font-size: var(--fs-800);
    color: rgb(var(--clr-accent-400));
}

/* News
**********************************************************/
.news {
    display: flex;
    justify-content: end;
    background-image: url('../img/Headerbild.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.news .wrapper {
    flex: 0 0 64.8%;
    display: flex;
    padding: var(--size-900) var(--size-400);
    background-color: rgb(var(--clr-primary-400), 0.6);
}

.even-columns-list {
    columns: 2;
}


/**********************************************************/
/* Cards                                                  */
/**********************************************************/
.ytb-card__container,
.katalog-card__container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 20px;
}

.ytb-card__container {
    &>a {
        margin-top: 0px;
    }

    .card__arrow {
        padding: 5px;

    }

    .item-background {
        padding: 5px;
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: space-between;
    }
}

.product-card__container {
    display: grid;
    grid-template-columns: repeat(4, minmax(30rem, 1fr));
    gap: 10px;

    .card {
        padding: 10px;
    }

    @media screen and (max-width: 1399px) {
        grid-template-columns: repeat(3, minmax(30rem, 1fr));
    }

    @media screen and (max-width: 1163px) {
        grid-template-columns: repeat(2, minmax(30rem, 1fr));
    }

    @media screen and (max-width: 639px) {
        grid-template-columns: repeat(1, minmax(30rem, 1fr));
    }
}

.shopping-card__container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--size-400);
}

.card {
    text-decoration: none;
    min-height: 270px;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: 3px 3px 6px rgb(var(--clr-neutral-900), 0.16);
    transition: box-shadow 0.3s ease;

    .hersteller-name-tile {
        box-shadow: inset 0 0 0 0 rgb(var(--clr-primary-400));
        color: rgba(var(--clr-primary-400), 0.60);
        margin: 0 -.25rem;
        padding: .25rem .25rem;
    }

    &:not(.product, .single-product):hover {
        box-shadow: 3px 3px 6px rgb(var(--clr-neutral-900), 0.5);
    }
}

.card.product:hover {
    box-shadow: 3px 3px 6px rgb(var(--clr-primary-400), 0.16);
    border: 1px solid rgb(var(--clr-primary-400));
}


.card__image {
    width: 220px;
    height: 120px;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 8px 8px 0px 0px;
}

.card__image.small {
    height: var(--size-500);
}

.card__even-column {
    display: flex;
    container-type: inline-size;
}

section.katalog .container .card .card__intro .card__even-column {

    @container (min-width: 600px) {
        padding-top: 7px;
        border-top: 1px solid rgb(var(--clr-primary-400));
    }
}

.card__number {
    font-size: var(--fs-800);
    font-weight: bold;
    color: rgb(var(--clr-primary-400));
    width: 60px;
    padding-top: 25px;
    padding-left: 5px;
}

.card.product .card__headline,
.card.single-product .card__headline {
    font-weight: var(--fw-bold);
}

.card__headline {

    color: rgb(var(--clr-neutral-800), 0.7);
    font-size: var(--fs-400);
}

.card__headline,
.card__subline {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 2px 5px;
}

.card__headline.big {
    font-size: var(--fs-700);
}

.card:not(.first) .card__subline {
    background-color: rgb(var(--clr-primary-400));
    color: white;
    border-radius: 10px;

    font-size: 24px;
    padding: 5px;
    margin-bottom: 5px;
    font-weight: 800;

    a span {
        color: white;
        font-weight: 800;
    }
}

.mainImage-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 220px;

    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }


}

:is(.mainImage-container, .card__image-container) i {
    z-index: 10;
    font-size: 30px;
    position: absolute;
    top: 10px;
    right: 10px;
    color: rgba(var(--clr-primary-400), 0.8);
    opacity: 0.3;
    transition: all 0.3s ease-in-out;

    &:hover {
        transform: scale(1.2);
    }
}

:is(.mainImage-container, .card__image-container):hover {
    i {
        opacity: 1;
    }
}

.vergleichliste .bild-container  { 
    height: 100%;
    display: block;
    position: relative;
    i { 
        position: absolute;
    top: 10px;
    right: 10px;
        color: rgba(var(--clr-primary-400), 0.8);
        opacity: 0.5;
        transition: all 0.3s ease-in-out;
    }

    &:hover i{
        transform: scale(1.2);
        opacity: 1;
    }

}

.subLogo-container {
    min-height: 53px;
}

.card__indicator {
    font-size: var(--fs-400);
}

.card.shopping .card__form {
    align-self: end;
}

.card__form {
    display: flex;
    justify-content: end;
    align-items: stretch;
}

.card__form .input-number * {
    margin-block-start: 0 !important;
}

.card__form .card__button {
    align-self: stretch;
    margin-block-start: revert;

    i {
        align-self: center;
    }
}

.card__button[data-btn="primary"] {
    text-decoration: none;
    border: 0;
    color: rgb(var(--clr-neutral-100));
    background-color: rgb(var(--clr-primary-400));
    /* KZI   background-color: #081c5d69;*/
    cursor: pointer;
    padding: var(--size-100) var(--size-200);
    transition: all 0.3s ease;
    border: 1px solid white;
    border-radius: 5px;
}

.card.katalog-tiles .card__headline {
    justify-content: flex-start;
    align-items: center;
}


.more-details {
    /*//SSE "weitere informationen" full widht*/
    width: 100%;
    font-size: var(--fs-400);
    text-decoration: underline;
}

.more-details::after {
    content: "";
    font-size: 18px;
    font-family: 'FontAwesome';
    content: '  \f178';
}

[data-btn="secondary"] {
    text-decoration: none;
    border: 0;
    color: rgb(var(--clr-neutral-800));
    background-color: rgb(var(--clr-neutral-200));
    cursor: pointer;
    padding: var(--size-200) var(--size-300);
}

.card__button,
.card__arrow {
    align-self: end;
    /*kzi deaktiviert*/
    /* margin-block-start: auto;*/
}

.card__arrow {
    font-size: 28px;
    color: rgb(var(--clr-accent-400), 0.70);
}

/* First */
.card.first .card__headline {
    font-size: var(--fs-700);
    /*OLD 800*/
    font-weight: bold;
    color: rgb(var(--clr-primary-400));
    line-height: 0.9;
}

/* Product Card */
.card.product {
    background-color: transparent;
    border: 1px solid rgb(var(--clr-neutral-300));
    box-shadow: none;
    gap: var(--size-200);
}

.card.single-product .fit {
    margin-block: var(--size-800);
}

.card.single-product .fit .card__even-column {
    justify-content: space-between;
}

.card.single-product .fit .card__headline,
.card.single-product .cross-sell>.card__headline {
    margin-block-end: var(--size-400);
}

.card.product table {
    margin-block: var(--size-400);
    line-height: 18px;
}

.card__text.small {
    font-size: var(--fs-100);
}

.card__price-box {
    text-align: end;
}

.card__price-box .card__text i {
    font-size: var(--fs-700);
    color: rgb(var(--clr-primary-400));
}

.card__price-box s {
    font-size: var(--fs-300);
}

.card__price {
    font-size: var(--fs-700);
    font-weight: bold;
    color: rgb(var(--clr-primary-400));
    line-height: 1;
}

/* Single Product Card */
.card.single-product {
    background-color: transparent;
    border: none;
    box-shadow: none;

    .card__image-container {
        flex: 1;
    }

    .pic-modal {
        display: none;
    }

    .card__price-box {
        border-top: 1px solid rgb(var(--clr-primary-400));
        padding-top: 18px;

        .left-column {
            border-left: 1px solid rgb(var(--clr-primary-400));
            padding-left: 8px;
        }
    }

    @media only screen and (max-width: 1023px) {
        .card__even-column {
            flex-direction: column;

            .card__intro {
                width: 100%;
            }
        }

        .card__image-container {
            width: 100%;
        }
    }

    @media only screen and (min-width: 1024px) and (max-width: 1399px) {
        .card__even-column .card__image-container {
            width: 40%;
        }
    }
}

.card__image-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--size-400);

    @media screen and (max-width: 1023px) {
        width: 100%;
        max-width: 100%;
    }
}

.katalog .intro {
    margin-top: 50px;
}

.card__intro {
    display: flex;
    /* flex: 1; */
    flex-direction: column;
}

.card.single-product .card__intro .card__intro__header {
    display: flex;
    flex-direction: column;
    gap: 20px;

    @media screen and (max-width: 1023px) {
        flex-direction: column;
    }

    .card__function {
        flex: 2;
        margin-right: auto;
    }

    .card__intro__name {
        flex: 1;

        .card__headline {
            font-size: 22px;
            padding: 0;
            margin: 0;
            margin: 10px 0;
        }
    }

}

.card__image-container .card__even-column,
.card__intro .card__even-column {
    flex-wrap: wrap;
}

.card__info {
    flex: 2 1 80%;
}

.sidebar {
    display: flex;
    flex: 1 1 20%;
    flex-direction: column;
    gap: var(--size-400);

    padding: var(--size-400);
    background-color: rgb(var(--clr-neutral-200));
    border-radius: 8px;
    box-shadow: 8px 16px 32px rgb(var(--clr-neutral-900), 0.08);
}

/* Katalog */
#bildoverlay {
    position: absolute;
    background-color: #fff;
    padding: 16px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    z-index: 2000;
}

.katalog .container {
    position: relative;
}

.katalog .container .card .card__button {
    width: 100%;
    display: flex;
    justify-content: center;
    cursor: pointer;
    align-items: center;
    max-width: 40px;
}

.katalog .container .card .card__button.more-details {
    gap: 5px;
    width: 100%;
    max-width: 100%;
    border-radius: 5px;
    background-color: white;
    color: rgb(var(--clr-primary-400));
    transition: all 0.2s linear 0s;
    border: 1px solid rgb(var(--clr-primary-400));

    span {
        overflow: hidden;
        transition: all .5s ease;
        width: 0;
    }

    &:hover {
        span {
            width: 17%;
        }
    }

    &::after {
        color: rgb(var(--clr-primary-400));
    }
}

.katalog .container .card .produkt_zubehoer .product-title {
    border-bottom: 1px solid rgb(var(--clr-primary-400));
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0px 7px 0px;
    padding: 5px 0px;
    width: 50%;
    align-self: center;

    &>span {
        display: inline-flex;
        font-size: 20px;
        padding-top: 3px;
        color: rgb(var(--clr-primary-400));
        min-width: fit-content;
    }
}

.katalog .container .card .saetze-detail {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgb(var(--clr-primary-400));
    padding: 5px 0px;
    margin: 15px 0px 7px 0px;
    color: rgb(var(--clr-primary-400));

    span {
        font-size: 24px;
    }
}

.katalog .container :is(ul.produkt_zubehoer, .produkt_passend_table) {
    list-style: none;
    border-left: 1px solid rgb(var(--clr-primary-400));
    padding: 0px 5px 0px 5px;
    margin-top: 12px;
    width: 100%;
}

.katalog .container ul.satzinhalt {
    padding: 0px 20px 0px 20px;
}

.katalog .container a.artnoimage {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 2px 0;
    gap: 5px;

    span {
        font-size: 13px;
        line-height: 15px;
        text-align: left;

        &:last-of-type {
            text-align: right;
        }
    }
}

.katalog .container a.artnoimage span:has(+ .menge_inhalt-num) {
    font-size: 24px;
    font-weight: 400;
    padding-right: 2px;
    color: rgba(var(--clr-primary-400), 0.8);
    font-size: 16px;
}

.katalog .container a.artnoimage .menge_inhalt-num {
    margin-right: auto;
    font-weight: 800;
    color: rgba(var(--clr-primary-400), 0.8);
    font-size: 16px;
}



.card.single-product a.artnoimage.satztiefe0 {
    justify-content: flex-start;

    /*span {
        flex: 0 0 33.3%;
    }*/
}

li.satztiefe0:has(ul.satzinhalt) {
    display: flex;
    flex-direction: column;

    ul.satzinhalt {
        width: 100%;
        margin: 20px 0 0 20px;
    }
}


.katalog .container .card__price-box .warenkorbliste_short {
    padding: 7px;
    border: 1px solid rgb(var(--clr-primary-400), 0.7);
    border-radius: 5px;
    cursor: pointer;
    font-size: 15px;

    &:focus,
    :focus-visible,
    :focus-within {
        outline: none;
    }
}

.katalog .container .produkt_zubehoer {
    display: flex;
    flex-flow: row wrap;
    flex-direction: column;
    gap: 5px;
    margin: 2px;

    button[id^="weitere_zubehoere_"].-shown {
        display: none;
    }

    button#weitere_zubehoere_2>span {
        margin-right: 5px;
    }
}


.katalog .container :is(.produkt_zubehoer li.produkt_zubehoer_one, .satzinhalt > li) {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 3px;
    position: relative;
    margin-bottom: 10px;

    &::after {
        content: '';
        transform-origin: 100% 50%;
        transform: scale3d(0, 1, 1);
        transition: transform 0.3s;
        position: absolute;
        width: 100%;
        height: 1px;
        background: rgb(var(--clr-primary-400));
        top: 100%;
        left: 0;
        pointer-events: none;
    }

    &:hover {
        &::after {
            transform-origin: 0% 50%;
            transform: scale3d(1, 1, 1);
        }
    }

    a.artnoimage_zubehoer {
        display: flex;
        column-gap: 10px;
        flex-wrap: wrap;
        margin-left: 5px;

        span {
            font-size: 13px;
        }
    }
}

a.artnoimage span:is(.menge_inhalt-num, .menge_inhalt-value) {
    font-weight: 400;
    font-size: 13px;
    color: rgba(var(--clr-primary-400), 0.8);
}

a.artnoimage_zubehoer {
    width: 100%;

    .menge-inhalt-value,
    .menge_inhalt-value,
    .menge_inhalt-title,
    .menge_inhalt-preis {
        margin-left: auto;
        text-align: end;
    }

    .menge_inhalt-num {
        margin-right: 5px;
        font-weight: 400;
        font-size: 16px;
    }
}

a.artnoimage_zubehoer.mit-preis {
    column-gap: 0px;

    .menge_inhalt-num,
    .menge_inhalt-value {
        font-size: 16px;
        font-weight: 800;
        color: rgba(var(--clr-primary-400), 0.8);
    }

    .menge_inhalt-title,
    .menge_inhalt-value {
        font-size: 13px;
        line-height: 18px;
        margin-bottom: 5px;
    }

    .menge_inhalt-preis {
        font-size: 13px;
    }
}

.katalog .container .explosiv-container {
    display: none;
    position: fixed;
    width: 100%;
    top: 50%;
    left: 50%;
    z-index: 1000;
    transform: translate(-50%, -50%);

    @media screen and (min-width:1024px) {
        width: 800px;
    }

    .close-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 40px;
        height: 40px;
        position: fixed;
        top: 10px;
        left: 10px;
        background-color: rgb(var(--clr-primary-400));
        color: white;
        transition: all 0.3s;

        i {
            font-size: 24px;
            transition: all 0.3s;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        &:hover {
            border-radius: 50%;
            background-color: white;
            border: 1px solid rgb(var(--clr-primary-400));
            color: rgb(var(--clr-primary-400));

            i {
                rotate: -90deg;
            }
        }
    }
}

.katalog .container .explosiv-container.-show {
    display: block;
}

.katalog .container .explosiv-container.-pflugteil.-show {
    width: 1000px;
    height: 650px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    top: 60%;

    img {
        height: 600px;
    }
}

.katalog .container :is(.explosiv-button, .explosiv-secondary-button) {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgb(var(--clr-primary-400));
    border-radius: 5px;
    background-color: white;
    padding: 5px 13px 2px 13px;
    cursor: pointer;
    transition: all 0.3s;
    margin-left: 10px;

    span {
        color: rgb(var(--clr-primary-400));
        font-size: 15px;
    }

    &:hover {
        background-color: rgb(var(--clr-primary-400));
        color: white;

        span {
            color: white;
        }
    }
}

.katalog .container .explosiv-secondary-button {
    display: inline-flex;
}



.katalog .container .explosiv-container img.explosiv-img {
    width: 100%;
    object-fit: contain;
}

.katalog .container .card .toggle .toggle__content .hersteller-filter__container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    margin: 2px 0px 15px 0px;
    gap: 5px;
    flex-wrap: wrap;
}

.katalog .container .card .toggle .toggle__content .toggle-headline-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2px;

    h4 {
        color: rgb(var(--clr-primary-400));
    }
}

.card.shopping {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    min-height: auto;
    gap: var(--size-200);
}

.shopping .card__headline {
    font-size: var(--fs-200);
}

.shopping .card__headline.small {
    color: rgb(var(--clr-primary-400));
}

.shopping .card__headline.small,
.shopping .card__text.small {
    font-size: var(--fs-100);
}

.card.shopping .input-number {
    font-size: var(--fs-100);
    background-color: rgb(var(--clr-neutral-100));
    width: var(--size-600);
}

/* Vergleich */
.product-card__container.vergleich {
    display: grid;
    gap: var(--size-400);
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        'card-1 single single'
        'card-2 single single'
        'card-3 single single'
        'card-4 single single'
    ;
}

.product-card__container.vergleich .single-product {
    grid-area: single;
    /* max-height: 670px;
    overflow-y: auto; */
}

.product-card__container.vergleich .card.single-product :where(.fit, .toggle) {
    margin-block: 0;
}

.product-card__container.vergleich .card.single-product .fit {
    margin-block: var(--size-600);
}

.product-card__container.vergleich .card.single-product .toggle {
    margin-block-end: var(--size-600);
    gap: var(--size-400);
}

.product-card__container.vergleich .card.single-product .toggle__content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.product-card__container.vergleich .card.single-product {
    padding: var(--size-600);
    position: relative;
}

.product-card__container.vergleich .card.single-product .close {
    /* position: absolute; */
    position: left;
    top: var(--size-200);
    right: var(--size-200);
    font-size: var(--fs-700);
    cursor: pointer;
    line-height: 1;
    color: rgb(var(--clr-neutral-300));
    background-color: transparent;
    border: 0;
}

.product-card__container.vergleich .product {
    padding: var(--size-400);
}

.product-card__container.vergleich .product:nth-child(2) {
    grid-area: card-1;
}

.product-card__container.vergleich .product:nth-child(3) {
    grid-area: card-2;
}

.product-card__container.vergleich .product:nth-child(4) {
    grid-area: card-3;
}

.product-card__container.vergleich .product:nth-child(5) {
    grid-area: card-4;
}

/* Product Card */
.shopping-card__container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    /*//SSE old 10rem*/
    gap: var(--size-400);
}

.search-card {
    min-height: auto;
}

.search-card__form {
    display: flex;
    flex-direction: column;
    gap: var(--size-400);
}

.card__function {
    display: flex;
    width: 100%;
    max-width: 500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    margin: 0 auto;
    margin-bottom: 12px;

    @media screen and (max-width:639px) {
        padding: 0 2px;
    }

    @media screen and (min-width:1399px) and (max-width:1399px) {
        padding: 0 10px;
    }

    @media screen and (min-width:1400px) {
        padding: 0 25px;
    }
}

.card__function button,
.card__function a {
    color: var(--clr-neutral-800);
    text-decoration: none;
    font-size: var(--fs-100);
    border: 0;
    background-color: transparent;
    cursor: pointer;
}

/* Input */
input[type="number"] {
    width: var(--size-500);
}


/* Input */
.input-number * {
    border: 0;
    background-color: transparent;
    width: 100%;
}

.input-number {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgb(var(--clr-neutral-800));
    /* background-color: #fff; */
    width: var(--size-700);
    padding: var(--size-100);
}

.input-number input[type="number"] {
    appearance: textfield;
    width: var(--size-400);
    text-align: center;
}

.input-number .decrement,
.input-number .increment {
    cursor: pointer;
    text-align: center;
}

.input-number .decrement::before,
.input-number .increment::before {
    font-family: 'FontAwesome';
    width: var(--size-300);
}

.input-number .decrement::before {
    content: '\f068';
}

.input-number .increment::before {
    content: '\2b';
}

/* Table */
.table {
    overflow-x: auto;
}

table {
    width: 100%;
}

table,
th,
td {
    border-collapse: collapse;
    font-size: 15px;
    /*kzi12.0624 geändert*/
    /*text-align: left;*/
    /*kzi310524 geändert*/
    /*display: table-cell;*/


}

thead {
    background-color: rgb(var(--clr-neutral-100));
    border-bottom: 1px solid rgb(var(--clr-neutral-300)) solid rgb(var(--clr-neutral-900));
}

td:first-child {
    font-weight: bold;
}

tbody tr:nth-child(odd) {
    background-color: rgb(var(--clr-neutral-200));
}

th,
td {
    padding: var(--size-100) var(--size-100);
}

/* Toggle
**********************************************************/

.toggle__headline {
    color: rgb(var(--clr-primary-400));
    font-size: var(--fs-600);
    font-weight: var(--fw-bold);
    margin-block-end: var(--size-400);
    cursor: pointer;
}

.toggle__headline :where([class*="fa-chevron-"]) {
    transition: 0.4s ease-in-out;
}

.toggle__headline[aria-expanded="true"] :where([class*="fa-chevron-"]) {
    transform: rotate(0.5turn);
}

.toggle__content {
    display: none;
}

.toggle__content.open {
    display: block;
}

.toggle.open .toggle__content {
    display: block;
}

.vergleich .toggle__content {
    display: none;
}

.vergleich .toggle__content.open {
    display: flex;
    flex-wrap: wrap;
}

.toggle__content .shopping-card__container {
    padding: var(--size-300);
    margin-block-end: var(--size-400);
    border-radius: 8px;
    border: 1px solid rgb(var(--clr-neutral-200));
}

/* Filter
**********************************************************/
.filter .container {
    margin-block: var(--size-400);
    background-color: rgb(var(--clr-neutral-200));
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /* align-items: center; */
    padding: var(--size-400);
    gap: var(--size-400);
}

.filter__container {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 66.6%;
    gap: var(--size-400);
}

/* Filter List */
.filter__list {
    display: none;
    position: absolute;
    padding: var(--size-400);
    background-color: rgb(var(--clr-neutral-100), 0.6);
    box-shadow: 0px 3px 6px rgb(var(--clr-neutral-500));
    z-index: 1;
}

.filter__list ul {
    list-style: none;
}

/* Filter Button */
.filter__btn {
    cursor: pointer;
    width: 100%;
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-500);
    font-weight: var(--fw-bold);
    color: rgb(var(--clr-primary-400));
    border: none;
    padding: var(--size-200) var(--size-300);
    background-color: rgb(var(--clr-neutral-100));
}

.filter__btn span {
    margin-inline: var(--size-200);
}

.filter__btn :where([class*="fa-chevron-"]) {
    margin-inline-start: auto;
}

.filter__btn :where([class*="fa-chevron-"]) {
    transition: all 0.2s ease;
}

.filter__btn[aria-expanded="true"] :where([class*="fa-chevron-"]) {
    transform: rotate(0.5turn);
}

/* Show List */
.filter__list.open {
    display: block;
}

/* Filter Selected */
.filter__selected {
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
    gap: var(--size-400);
}

.filter__selected__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--size-200);
    color: rgb(var(--clr-primary-400));
    border-radius: 0;
    background-color: rgb(var(--clr-neutral-200));
    font-size: var(--fs-500);
    font-weight: var(--fw-bold);
    border: 1px solid rgb(var(--clr-neutral-300));
    padding: var(--size-200);
    cursor: pointer;
}

.filter__selected__btn i {
    color: rgb(var(--clr-neutral-300));
}

/* Pagination
**********************************************************/
.pagination .container {
    display: flex;
    align-items: center;
}

.pagination__btn {
    margin-inline-start: auto;
    display: flex;
    gap: var(--size-400);
}

.pagination__btn button {
    outline: none;
    border: 0;
    font-size: var(--fs-400);
    font-weight: var(--fw-bold);
    border-radius: 4px;
    padding: var(--size-200) var(--size-400);
    color: rgb(var(--clr-neutral-100));
    background-color: rgb(var(--clr-neutral-800));
    box-shadow: 4px 8px 20px rgb(var(--clr-neutral-900), 0.1);
    cursor: pointer;
}

.pagination__counter {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--size-200);
}

.pagination__counter label {
    font-size: var(--fs-600);
    color: rgb(var(--clr-primary-400));
}

.pagination__counter select {
    font-size: var(--fs-600);
    font-weight: var(--fw-bold);
    color: rgb(var(--clr-primary-400));
    padding: var(--size-200);
    border: 1px solid rgb(var(--clr-neutral-300));
    background-color: rgb(var(--clr-neutral-100));
}


/* Artikelsuche nach Fabrikat
**********************************************************/

.artikelsuche-fabrikat {
    padding-block: var(--size-600);
}

.artikelsuche {
    padding: var(--size-400);
    background-color: rgb(var(--clr-neutral-200));
    /*KZI Passt nicht box-shadow: 3px 3px 6px rgb(var(--clr-neutral-900), 0.16);*/
}

/* Form */
.artikelsuche form {
    display: flex;
    flex-direction: column;
}

.artikelsuche form :where(input, select) {
    padding: var(--size-200);
    color: rgb(var(--clr-neutral-900));
    border: 1px solid rgb(var(--clr-neutral-300));
    background-color: rgb(var(--clr-neutral-100));
}

::placeholder {
    color: rgb(var(--clr-neutral-900));
    opacity: 1;
}

.artikelsuche form button[type="submit"] {
    padding: var(--size-100) var(--size-300);
    border: 0;
    color: rgb(var(--clr-neutral-100));
    background-color: rgb(var(--clr-primary-400));
    cursor: pointer;
    align-self: end;
}

/* Letters */
.letters .letterlist {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-400);
    margin-block-start: var(--size-200);
}

.letterlist li {
    margin-block-start: 0;
}

.letters button {
    width: var(--size-400);
    height: var(--size-400);
    font-size: var(--fs-600);
    border: 0;
    color: rgb(var(--clr-neutral-100));
    background-color: rgb(var(--clr-primary-400));
    cursor: pointer;
}

.letters button:hover {
    background-color: rgb(var(--clr-neutral-300));
}

/* Kontakt
**********************************************************/
.contact {
    position: relative;
    background-image: url('../img/Headerbild.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    isolation: isolate;
    color: rgb(var(--clr-neutral-100));
    padding-block: var(--size-600);
}

.contact::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgb(var(--clr-primary-400), 0.6);
}

/* Contact form */
.contact__form form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-200);
}

.contact__form form :where(input, select, textarea) {
    padding: var(--size-100);
    border: 2px solid rgb(var(--clr-accent-400));
    border-radius: 3px;
    background-color: rgb(var(--clr-accent-400), 0.4);
}

.contact__form form label {
    font-size: var(--fs-300);
    font-weight: var(--fw-light);
}

.form-group {
    display: grid;
}

.form-group__full-width {
    grid-column: 1 / -1;
}

.contact__form form .dsgvo {
    display: flex;
    align-items: start;
    gap: var(--size-200);
}

.contact__form form .dsgvo input[type="checkbox"] {
    display: none;
}

.contact__form form .dsgvo input[type="checkbox"]+label {
    padding-inline-start: var(--size-500);
}

.contact__form form .dsgvo input[type="checkbox"]+label::before {
    position: absolute;
    font-size: var(--fs-700);
    color: rgb(var(--clr-accent-400));
    background-color: rgb(var(--clr-accent-400), 0.4);
    border-radius: 5px;
    line-height: 0.8;
    font-family: FontAwesome;
    content: "\f096";
    margin-inline-start: calc(-1 * var(--size-500));
}

.contact__form form .dsgvo input[type="checkbox"]:checked+label::before {
    content: "\f14a";
}

.contact__form form .submit {
    margin-inline-start: auto;
}

/* Contact Info */
.contact .contact__info {
    display: flex;
    flex-direction: column;
    gap: var(--size-900)
}

/* Warenkorbvorschau
***********************************************************/
.cart-preview-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding-block: var(--size-600);
    border-radius: 25px;
}

.cart-preview-wrapper button.delete-button {
    background-color: #ea0000 !important;
    height: 100%;
    align-items: center;

    span {
        color: white;
        font-size: var(--fs-600);
        font-weight: var(--fw-bold);
    }
}

.cart-preview {
    position: absolute;
    right: 0;
    border-radius: 1rem;
    padding: var(--size-400);
    background-color: white;
    box-shadow: 0px 0px 20px rgb(var(--clr-neutral-900), 0.16);

    @media screen and (max-width: 1024px) {
        padding: 1rem;

    }

    /* SSE */
}

.cart-preview .close-btn,
.directorder__form .close-btn,
.cartselect__form .close-btn {
    position: absolute;
    top: var(--size-200);
    right: var(--size-200);
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

/* Warenkorbvorschau Header */
.cart-preview__header i {
    margin-inline-end: var(--size-200);

}

.cart-preview__header {
    padding: 10px;
    text-align: center;
    font-size: x-large;
    margin-bottom: 5px;
}

/* Warenkorbvorschau Content */
.cart-preview__content {
    height: 100%;
    overflow-y: auto;
    margin-block: var(--size-400);
    background-color: #fff;



    @media screen and (max-width: 1023px) {
        padding: 10px 5px;

    }
}

/* Warenkorbvorschau Product */
.cart-preview__content .product__preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 5px;
}

.cart-preview__content .product__preview .delete-btn {

    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.cart-preview__content .product__preview .even-columns {
    gap: var(--size-200);
}

/* Warenkorbvorschau Product Content */
.cart-preview__content .product__preview .product__content {
    color: rgb(var(--clr-neutral-700));
    display: grid;
    gap: var(--size-300);

    p {
        font-size: 13px;
    }
}

.cart-preview__content .product__preview .product__content .weight {
    font-weight: var(--fw-bold);
}

/* Warenkorbvorschau Product Footer */
.cart-preview__content .product__preview .product__footer {
    display: flex;
    justify-content: space-between;
    gap: var(--size-100);
}

.cart-preview__content .product__preview .product__footer .delivery {
    display: flex;
    gap: var(--size-100);
}

.cart-preview__content .product__preview .product__footer .delivery p {
    font-size: var(--fs-100);
}

.cart-preview__content .product__preview .product__footer .delivery i {
    font-size: var(--fs-700);
    color: rgb(var(--clr-primary-400));
}

.cart-preview__content .product__preview .product__footer .input-number {
    background-color: rgb(var(--clr-neutral-100));
    margin-inline: auto;

    @media screen and (max-width: 1024px) {
        margin-inline: 0;

    }
}

.cart-preview__content .product__preview .product__footer .price p {
    color: rgb(var(--clr-primary-400));
    font-size: var(--fs-600);
    font-weight: var(--fw-bold);
    line-height: 1;
}

.cart-preview__content .product__preview .product__footer .price span {
    font-size: var(--fs-100);
}

.cart-preview__footer {
    padding: 10px;
    margin-top: auto;

    .card__button {
        padding: 4px 11px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;

        height: 80px;
    }

    .even-columns {
        align-items: center;
    }
}

/* Warenkorbvorschau Footer Table */
.cart-preview__footer table.total * {
    background-color: transparent;
    padding: 0;
    font-weight: var(--fw-regular);
}

.cart-preview__footer table.total {
    display: table;
    width: fit-content;
    margin-left: auto;
}

.cart-preview__footer table.total th,
.cart-preview__footer table.total td {
    padding-block: var(--size-100);
}

.cart-preview__footer table.total th:nth-child(2),
.cart-preview__footer table.total td:nth-child(2) {
    text-align: end;
}

.cart-preview__footer table.total thead th {
    font-weight: var(--fw-bold);
}

.cart-preview__footer table.total tfoot {
    border-top: 1px solid rgb(var(--clr-neutral-900));
    margin-block-start: var(--size-200);
    padding-block-start: var(--size-200);
}

.cart-preview__footer table.total tfoot .netto th {
    font-weight: var(--fw-bold);
}

.cart-preview__footer .even-columns {
    display: flex;
    justify-content: space-between;

    @media screen and (min-width: 1025px) {
        margin-block-start: var(--size-400);
    }

    .card__button:hover {
        border: 1px solid rgb(var(--clr-primary-400));
        background-color: white;
        color: rgb(var(--clr-primary-400));
    }
}

.cart-preview__footer .checkout {
    background-color: rgb(var(--clr-neutral-700));
}

/* Lieferanschrift
***********************************************************/
.order-details {
    margin-block-end: var(--size-600);
    margin: auto;
}

@media only screen and (min-width:768px) {
    .order-details {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
}

.order-details--customer {
    margin-block-end: var(--size-600);
    max-width: 1008px;
    margin: auto;
    border-right: 5px solid rgb(var(--clr-primary-400));
    border-left: 5px solid rgb(var(--clr-primary-400));
}

/* shipping-method */
.shipping-method {
    padding: var(--size-400);

    .shipping-info {
        margin: 15px 0px;

        p {
            font-size: 18px;
            color: rgb(var(--clr-primary-400));
        }
    }
}

.shipping-method--customer {
    padding: 0 var(--size-400);

    .shipping-info {
        margin: 15px 0px;

        p {
            font-size: 18px;
            color: rgb(var(--clr-primary-400));
        }
    }
}

.shipping-method p,
.shipping-method--customer p {
    text-align: center;
}

.shipping-method .h4 {
    padding-block-end: var(--size-400);
    margin-block-end: var(--size-400);
    color: rgb(var(--clr-primary-400));
    font-size: var(--fs-700);
}

.shipping-method--customer .h4 {
    color: rgb(var(--clr-primary-400));
    font-size: var(--fs-700);
}

.shipping-method form#shipping-method,
.shipping-method--customer form#shipping-method {
    position: relative;
    margin-block: var(--size-400);
    display: grid;
    gap: var(--size-400);
    /*SSE old 200*/
    /* padding-block: var(--size-400); */
    border-bottom: 1px solid rgb(var(--clr-neutral-700));
}

/* .shipping-method form#shipping-method .form__checkbox, */
.shipping-method--customer form#shipping-method .form__checkbox {
    border-top: 1px solid rgb(var(--clr-neutral-700));
    padding-top: 3rem;
}

.shipping-method form#shipping-method .form__checkbox:last-child,
.shipping-method--customer form#shipping-method .form__checkbox:last-child {
    padding-bottom: 3rem;
}

.shipping-method form#shipping-method div,
.shipping-method--customer form#shipping-method div {
    display: flex;
    gap: var(--size-400);
    font-size: var(--fs-600);
}

/*SSE tooltip korrektur*/
.shipping-method form#shipping-method .form__checkbox div,
.shipping-method form#shipping-method .form__checkbox div label,
.shipping-method--customer form#shipping-method .form__checkbox div,
.shipping-method--customer form#shipping-method .form__checkbox div label {
    width: 100%;
}

form .form__checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

form .form__checkbox label {
    --checkbox-size: 1.6em;
    position: relative;
    cursor: pointer;
    margin-inline-start: calc(1.5* var(--checkbox-size));
}

form .form__checkbox label::before,
form .form__checkbox label::after {
    content: '';
    position: absolute;
    inset: 0;
    margin-inline-start: calc(-1.5* var(--checkbox-size));
    width: var(--checkbox-size);
    height: var(--checkbox-size);
}

form .form__checkbox label::before {
    border: 1px solid rgb(var(--clr-neutral-800));
    box-shadow: inset 0 0 5px rgb(var(--clr-neutral-900), 0.3);
}

form .form__checkbox label::after {
    font-family: 'FontAwesome';
    color: rgb(var(--clr-primary-400));
    transform: scale(2);
    top: -7px;
    left: 5px;
    display: grid;
    place-items: center;
}

form .form__checkbox input:checked+label::after {
    content: '\f00c';
}

.shipping-method form#night-shipping-method {
    position: relative;
    display: grid;
    gap: var(--size-200);
    padding-block: var(--size-400);
}

.shipping-method form#night-shipping-method div {
    display: flex;
    gap: var(--size-400);
    font-size: var(--fs-600);
}

.shipping-method .spedition {
    border-left: 2px solid rgb(var(--clr-neutral-800));
    padding-inline-start: var(--size-400);
    padding-block: var(--size-400);
    margin-inline-start: var(--size-400);
    margin-block-end: var(--size-400);
}

.shipping-method .spedition p {
    text-align: start;
}

.shipping-method .spedition button {
    margin-inline-start: auto;
    background-color: transparent;
    border: 0;
    color: rgb(var(--clr-primary-400));
    cursor: pointer;
}

.shipping-method form#order-form {
    position: relative;
    display: grid;
    gap: var(--size-200);
}

.shipping-method form#order-form input[type="text"],
.shipping-method form#order-form textarea {
    width: 100%;
    padding: var(--size-200);
}

.shipping-method form#order-form .tooltip {
    position: absolute;
    right: var(--size-200);
    top: var(--size-200);
}

.shipping-method form#order-form .tooltip__content {
    width: 300px;
    left: -300px;
}

/* delivery-address */
.delivery-address {
    border-right: 5px solid rgb(var(--clr-primary-400));
    border-left: 5px solid rgb(var(--clr-primary-400));
    padding: var(--size-400);
}

.delivery-address--customer {
    padding: 0 var(--size-400) var(--size-400) var(--size-400);
}

.delivery-address p,
.delivery-address--customer p {
    text-align: center;
}

.delivery-address .h4 {
    padding-block-end: var(--size-400);
    margin-block-end: var(--size-400);
    color: rgb(var(--clr-primary-400));
    font-size: var(--fs-700);
}

.delivery-address--customer .h4 {
    padding-block-end: var(--size-400);
    color: rgb(var(--clr-primary-400));
    font-size: var(--fs-700);
}

/*SSE doppelt
.delivery-address form#delivery-address {
    position: relative;
    margin-block: var(--size-400);
    display: grid;
    gap: var(--size-200);
    padding-block: var(--size-400);
}
*/
.delivery-address form#delivery-address {
    position: relative;
    margin-block: var(--size-400);
    /*SSE old 200*/
    /* padding-block: var(--size-400); */

    @media screen and (min-width: 768px) {
        display: grid;
        gap: var(--size-400);
    }
}

.delivery-address form#delivery-address div,
.delivery-address--customer form#delivery-address div {
    display: flex;
    gap: var(--size-400);
    font-size: var(--fs-600);
}

.delivery-address button,
.delivery-address--customer button {
    margin-inline: auto;
    background-color: transparent;
    border: 0;
    display: block;
    color: rgb(var(--clr-primary-400));
    cursor: pointer;
}

/* billing-address */
.billing-address {

    padding: var(--size-400);
}

.shipping-method p.h4,
.delivery-address p.h4,
.billing-address p.h4 {
    text-align: center;
    padding-block-end: var(--size-400);
    border-bottom: 1px solid rgb(var(--clr-neutral-700));
    color: rgb(var(--clr-primary-400));
    font-size: var(--fs-700);
}

.billing-address .billing-adress__box {
    position: relative;
    background-color: rgb(var(--clr-neutral-200));
    padding: var(--size-400);
    padding-inline-start: var(--size-600);
    margin-block: var(--size-400);
}

.shipping-address__box {
    position: relative;
    background-color: rgb(var(--clr-neutral-200));
    padding: var(--size-400);
    margin-block: var(--size-400);
}

.billing-address .billing-adress__box::before {
    content: '';
    position: absolute;
    top: 10%;
    left: var(--size-400);
    width: 2px;
    height: 80%;
    background-color: rgb(var(--clr-neutral-800));
}

.billing-address .billing-adress__infobox {
    color: rgb(var(--clr-neutral-100));
    background-color: rgb(var(--clr-primary-400));
    padding: var(--size-200);
    font-size: var(--fs-200);
}

/* Lieferangaben */
.delivery__details {
    position: relative;
    margin-block-start: var(--size-400);
    margin-block-end: var(--size-400);
    background-color: rgb(var(--clr-neutral-200));
    isolation: isolate;
    margin-top: 100px;
    padding: 10px;

    @media screen and (min-width: 1024px) {
        padding: var(--size-400);
    }
}

.delivery__details::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateY(-100%) translateX(-50%) scale(1.5);
    width: 0px;
    height: 0px;
    border-left: var(--size-800) solid transparent;
    border-right: var(--size-800) solid transparent;
    border-bottom: var(--size-400) solid rgb(var(--clr-neutral-200));
    z-index: -1;
}

.delivery__details form {
    display: grid;
    gap: var(--size-400);
    grid-template-columns: repeat(auto-fit, minmax(min(32rem, 100%), 1fr));
    align-items: end;
}

.delivery__details form div {
    display: grid;
}

.delivery__details form :where(input, select) {
    background-color: rgb(var(--clr-neutral-100));
    border: 1px solid rgb(var(--clr-neutral-800));
    padding: var(--size-100) var(--size-200);
    height: var(--size-500);
}

/* Bestellung
***********************************************************/

/* Process Timeline */
.process {
    position: relative;
    display: flex;
    justify-content: space-between;
    isolation: isolate;
    max-width: 1200px;
    padding-inline: var(--size-600);
    margin-inline: auto;
}

.process::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 2px;
    background-color: rgb(var(--clr-neutral-300));
    z-index: -1;

}

.process button {
    margin-block: var(--size-300);
    display: grid;
    place-items: center;
    font-size: var(--fs-100);
    border: 0;
    background-color: rgb(var(--clr-neutral-100));
    cursor: pointer;
    position: relative;
    isolation: isolate;
}

.process button::before {
    content: '';
    position: absolute;
    inset: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 100%;
    background-color: rgb(var(--clr-neutral-100));
    z-index: -1;
}

.process button:nth-child(2)::before {
    width: 300%;
}


.process button span {
    margin-block-start: var(--size-200);
    position: absolute;
    left: 50%;
    top: 100%;
    width: 150px;
    transform: translateX(-50%);
}

.process button .number {
    display: grid;
    place-items: center;
    font-size: var(--fs-400);
    line-height: 1;
    border: 1px solid rgb(var(--clr-neutral-300));
    border-radius: 50%;
    width: var(--size-400);
    height: var(--size-400);
}

.process button[aria-current="page"] .number {
    color: rgb(var(--clr-neutral-100));
    border-color: rgb(var(--clr-primary-400));
    background-color: rgb(var(--clr-primary-400));
}

.process--step-name {
    display: none;
}

@media screen and (min-width:640px) {
    .process--step-name {
        display: block;
    }

    .process {
        margin-block-end: var(--size-400);
        margin-block-start: var(--size-600);
        margin-bottom: 50px;
    }
}

/*
    Service Page Darstellung
*/
.pg-service .container {
    margin-bottom: 100px;
}

.pg-service .srv-container {
    display: flex;
    flex-direction: column;
    gap: 100px;
    margin-top: 35px;
}

#leftsideshrink .side-info .add-cart p.h4 {
    font-size: 20px;
}



.srv-container .side-info {
    display: flex;
    min-height: 450px;

    &::before {
        content: '';
        transform-origin: 100% 50%;
        transform: scale3d(0, 1, 1);
        transition: transform 0.6s;
        position: absolute;
        width: 100%;
        height: 1px;
        background: rgb(var(--clr-primary-400));
        top: 100%;
        left: 0%;
        pointer-events: none;
    }

    @media screen and (min-width: 1024px) {
        &:hover {

            &::before {
                transform-origin: 0% 50%;
                transform: scale3d(1, 1, 1);
            }

        }
    }
}

.srv-container .side-info #service_image {
    display: flex;
    gap: 50px;
    align-items: center;
    justify-content: center;
    flex-direction: column;


    @media screen and (min-width: 1024px) {
        flex-direction: row;
    }

    .img-container {
        flex: 2;
    }

    #content_text {
        display: flex;
        height: 100%;
        flex-direction: column;
        gap: 5px;
        flex: 3;
        text-align: justify;
        padding-left: 12px;
        position: relative;
        justify-content: center;

        h2 {
            font-size: 24px;
            margin-bottom: 15px;
        }

        &>p:last-of-type {
            margin-top: 45px;
            font-size: 20px;
        }
    }
}

.srv-container .side-info #service_image .img-container img {
    object-fit: fill;
    height: 100%;
    display: block;
    aspect-ratio: 1/1;
    width: 100%;
    height: 100%;
}

.pg-service .srv-container .delivery__detai {
    text-align: justify;
    display: flex;
    flex-direction: column;
    gap: 50px;

    @media screen and (min-width:1024px) {
        flex-direction: row;

        .col:not(:first-child) {
            padding-left: 30px;
        }
    }

}

.pg-service .srv-container .delivery__detai .col {
    min-height: 300px;

    &>div {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding-top: 30px;

    }

    button {
        margin-top: 40px;
        width: 100%;
        max-width: 100%;
        border-radius: 5px;
        background-color: white;
        color: rgb(var(--clr-primary-400));
        transition: all 0.2s linear 0s;
        cursor: pointer;
        border: 1px solid rgb(var(--clr-primary-400));

        @media screen and (min-width:1024px) {
            margin-top: auto;
        }

        a {
            padding: 10px;
            color: var(--clr-neutral-800);
            width: 100%;
            display: block;
            height: 100%;

        }

        span {
            font-size: 2rem;
            padding: 8px 18px;
        }

        &:hover {
            background-color: rgb(var(--clr-primary-400));
            color: white;
        }

    }
}

.pg-service .srv-container .delivery__detai .col .columntitle {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 300;
    position: relative;

    &::before {
        content: '';
        transform-origin: 100% 50%;
        transform: scale3d(0, 1, 1);
        transition: transform 0.6s;
        position: absolute;
        width: 33%;
        height: 2px;
        background: rgb(var(--clr-primary-400));
        top: 100%;
        left: 0;
        pointer-events: none;
    }
}

.pg-service .srv-container .delivery__detai .col:hover .columntitle {
    @media screen and (min-width: 1024px) {
        &::before {
            transform-origin: 0% 50%;
            transform: scale3d(1, 1, 1);
        }

    }
}

/*
    Service Page Darstellung Enden
*/



/* Side Info */
.side-info {
    /* display: grid;
    grid-column: 1 / 2;
    gap: var(--size-200);
    align-self: start; */
    position: relative;
}

/* Direct Order */
.side-info .direct-order {
    padding: var(--size-200);
    background-color: rgb(var(--clr-neutral-200));
    /* align-self: start;
    display: grid;
    gap: var(--size-200); */
    margin-block-end: var(--size-200);
}

.direct-order form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-200);
    border-top: 1px solid #ccc;
    padding-top: var(--size-200);
    margin-block: var(--size-200);
}

.direct-order form #order-number,
.direct-order form #quicksuch_term2 {
    flex: 1;
}

.direct-order form .input-number {
    background-color: rgb(var(--clr-neutral-100));
}

.direct-order .card__button {

    align-self: unset;
    margin-block-start: inherit;
}

.direct-order a {
    display: flex;
    align-items: center;
}

/* Cart Option */
.cart-option {
    padding: var(--size-200);
    background-color: rgb(var(--clr-neutral-200));
    margin-block-end: var(--size-200);
}

/* Select Cart */
.filter__btn.filter__select-cart__btn {
    padding: var(--size-200);
}

.filter__list.filter__select-cart__list {
    position: relative;
    max-height: 157px;
    overflow-y: auto;
    background-color: rgb(var(--clr-neutral-100));
    padding: var(--size-200);
    margin-block-start: var(--size-200);
}

.filter__select-cart__list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--size-100);
    color: rgb(var(--clr-primary-400));
    font-size: var(--fs-200);
    font-weight: var(--fw-bold);
}

.filter__select-cart__list .form__checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.filter__select-cart__list .form__checkbox label {
    --checkbox-size: 1em;
    position: relative;
    cursor: pointer;
    margin-inline-start: calc(1.8 * var(--checkbox-size));
}

.filter__select-cart__list .form__checkbox label::before,
.filter__select-cart__list .form__checkbox label::after {
    content: '';
    position: absolute;
    inset: 0;
    margin-inline-start: calc(-1.8* var(--checkbox-size));
    width: var(--checkbox-size);
    height: var(--checkbox-size);
}

.filter__select-cart__list .form__checkbox label::before {
    border: 1px solid rgb(var(--clr-neutral-800));
    box-shadow: inset 0 0 5px rgb(var(--clr-neutral-900), 0.3);
}

.filter__select-cart__list .form__checkbox label::after {
    font-family: 'FontAwesome';
    color: rgb(var(--clr-primary-400));
    transform: scale(1.2);
    top: -7px;
    left: 2px;
    display: grid;
    place-items: center;
}

.filter__select-cart__list .form__checkbox input:checked+label::after {
    content: '\f00c';
}




.filter__select-cart__list li .indicator {
    margin-inline-start: auto;
    color: rgb(var(--clr-neutral-300));
}

.filter__select-cart__list li .delete-btn {
    color: rgb(var(--clr-neutral-300));
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

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

/* Add Cart */
.add-cart {
    margin-block-start: var(--size-300);
    padding-block-start: var(--size-300);
    border-top: 1px solid rgb(var(--clr-neutral-100));
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.add-cart form {
    display: grid;
    gap: var(--size-200);
}

/* Recently Order */
.recently-order {
    padding: var(--size-200);
    background-color: rgb(var(--clr-neutral-200));
    align-self: start;
}

.recently-order .toggle {
    margin-block-start: 0;
}

.recently-order .toggle .toggle__headline {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-500);
    margin-block-end: 0;
}

.recently-order .toggle .toggle__content {
    margin-block-start: var(--size-200);
    overflow: scroll;
    max-height: 300px;
}

/* Arrow */
.arrow-btn {
    grid-column: 1 / 2;
    display: grid;
    place-items: center;
    font-size: var(--fs-700);
    color: rgb(var(--clr-neutral-100));
    background-color: rgb(var(--clr-primary-400));
    border: none;
    cursor: pointer;
}

/* Order Table */
.order-table {
    width: 100%;
    overflow-x: auto;
    grid-column: 2 / 5;
}

/*SSE Safari fehler mit trennlinien*/
.order-table tbody {
    position: -webkit-sticky;
}

.order-table.variation {
    grid-column: 2 / 16;
}



.order-table table thead tr th.weight>div,
.order-table table tbody tr td.weight>div

/*,.accessories__container td:last-child*/
    {
    border-left-width: 1px;
    border-left-style: solid;
}

.order-table table thead tr th>div,
.order-table table tbody tr td>div {
    padding: var(--size-100) var(--size-200);
}




.order-table table {
    display: table;
    width: 100%;
}

.order-table table tbody tr td {
    @media screen and (min-width: 1025px) {
        padding-block: 3rem;
    }
}


.order-table table tbody tr td:first-child {
    @media screen and (min-width: 1025px) {
        width: 58%;
    }
}

.order-table table thead tr th.weight,
.order-table table thead tr th.unit-price,
.order-table table thead tr th.number-unit,
.order-table table thead tr th.total,
.order-table table tbody tr td.weight,
.order-table table tbody tr td.unit-price,
.order-table table tbody tr td.number-unit,
.order-table table tbody tr td.total {
    min-width: 100px;
}

.order-table table tbody tr td.delete {
    width: 5%;
}

.order-table table tbody .accessories__container td:not(:last-child) {
    background-color: rgb(var(--clr-neutral-200));
}

.order-table table tbody tr td.order-number>div {
    padding: var(--size-100) var(--size-200);
    padding-inline-start: 0;
}

.order-table table thead {
    color: rgb(var(--clr-neutral-100));
    background-color: rgb(var(--clr-primary-400));
}

.order-table table thead th {
    text-align: left;
}

.order-table table tbody tr {
    background-color: transparent;
    vertical-align: bottom;
    position: relative;
}

.order-table table tbody tr:not(:first-child, .accessories__container)::after {
    --border-width: 1px;
    content: '';
    position: absolute;
    right: 0;
    height: var(--border-width);
    width: 100%;
    border-radius: 100vw;
    background-color: rgb(var(--clr-neutral-700));
}

.order-table table tbody :where(.weight, .unit-price, .number-unit, .total) {
    text-align: end;
}

.order-table table tbody .input-number {
    margin-inline-start: auto;
    padding: 0 var(--size-100);
}


.order-table table tbody .delete {
    text-align: center;
}

.order-table table tbody .delete div {
    display: grid;
    place-items: center;
    min-height: 5rem;
}

.order-table table tbody .delete-btn {
    border: 0;
    background-color: transparent;
    cursor: pointer;
}

.order-table table tbody td span {
    font-size: var(--fs-100);
    display: block;
}

.order-table table tbody td>div>span {
    color: rgb(var(--clr-primary-400));
}

.order-table table tfoot {
    background-color: rgb(var(--clr-neutral-200));
}

.order-table table tfoot th {
    padding: var(--size-200) var(--size-200);
}

.order-table table tfoot .delivery-condition {
    text-align: center;
    align-self: center;
    font-weight: var(--fw-bold);
}

.order-table table tfoot .delivery-condition i {
    font-size: var(--fs-800);
    color: rgb(var(--clr-primary-400));
    margin-block-end: var(--size-200);
}

.order-table table tfoot .show-calculation {
    text-align: center;
    align-self: center;
}

.order-table table tfoot .show-calculation button {
    border: 2px solid rgb(var(--clr-neutral-300));
    margin-block-end: var(--size-300);
    padding: 0;
    background: none;
    border: 0;

    span {
        padding: 2px 10px;
    }
}

.order-table table tfoot :where(.show-calculation, .print-order) .card__button {
    margin-block-end: var(--size-400);
    color: rgb(var(--clr-neutral-800));
    background-color: rgb(var(--clr-neutral-100));
    min-width: 20rem;
}

.order-table table tfoot .total-weight {
    text-align: center;
}

.order-table table tfoot .price-table {
    display: grid;
    gap: var(--size-100);
    font-size: var(--fs-200);
    font-weight: var(--fw-bold);
}

.order-table table tfoot .price-table:where(.total-weight, .quantity-discount, .mwst, .total-netto, .total-brutto) {
    display: flex;
    justify-content: space-between;
}

.order-table table tfoot .price-table .total-netto {
    border-top: 2px solid rgb(var(--clr-neutral-800));
    margin-block-start: var(--size-200);
    padding-block-start: var(--size-200);
}

.order-table table tfoot .price-table .total-brutto div:first-child {
    font-weight: var(--fw-regular);
}

.order-table table tfoot tr:last-child th {
    font-size: var(--fs-100);
}

.order-table button.order-button {
    margin-block-start: var(--size-400);
    background-color: rgb(var(--clr-primary-400));
    color: white;
    padding: 8px 10px;
    border-radius: 5px;
    border: 0;
    cursor: pointer;

}

/* Order Product
**********************************************************/
.order-product {
    display: flex;
    /*align-items: start; SSE */
    flex-wrap: wrap;
    gap: var(--size-400);
}

.order-product__image {
    flex: 1;
    border: 1px solid rgb(var(--clr-neutral-800));
    padding: var(--size-100);
    object-fit: contain;
    max-width: 200px;
}

.order-product__content {
    flex: 2;
    /*display: grid; SSE */
    gap: var(--size-200);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .order-product__headline {
        span {
            font-size: 16px;
        }

        display: flex;
        justify-content: space-between;
    }
}

.order-product__headline {
    color: rgb(var(--clr-neutral-300));
    background-color: #eee;
    line-height: 40px;
}

.order-product__headline i {
    color: rgb(var(--clr-primary-400));
}

.order-product__subline {
    font-size: var(--fs-200);
    font-weight: var(--fw-regular);
}

.order-product textarea {
    font-size: var(--fs-200);
    font-weight: var(--fw-regular);
    width: 100%;
    resize: none;
    font-family: var(--ff-secondary);
    padding: var(--size-100);
}

.order-product textarea::placeholder {
    color: rgb(var(--clr-neutral-300));
}

/* Accessories
**********************************************************/
.accessories__headline {
    color: rgb(var(--clr-primary-400));
    font-size: var(--fs-400);
    font-weight: var(--fw-bold);
    background-color: rgb(var(--clr-neutral-200));
    padding: var(--size-100) var(--size-200);
    text-align: center;
    cursor: pointer;
}

.accessories__headline :where([class*="fa-chevron-"]) {
    transition: 0.4s ease-in-out;
}

.accessories__headline[aria-expanded="true"] :where([class*="fa-chevron-"]) {
    transform: rotate(0.5turn);
}

.accessories__container td {
    display: none;
    padding: 0;
}

.accessories__container td:first-child {
    /* //SSE */
    padding: var(--size-200);
}

td .accessories__content {
    border-right-width: 1px;
    border-right-style: solid;
}

.accessories__container td:last-child {
    background-color: rgb(var(--clr-neutral-200)) !important;
}

.accessories__container.open td {
    display: table-cell;
}

.accessories__content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
    gap: var(--size-400);
    padding-inline: var(--size-400);
}


/* Load more */
.load-more-accessories div:nth-child(n+4) {
    display: none;
}

.load-more-accessories.more div:nth-child(n+4) {
    display: grid;
}

.load-more-btn {
    text-align: center;
    margin-inline: auto;
    display: flex;
    line-height: 1.3;
    gap: var(--size-100);
    background-color: transparent;
    border: 0;
    cursor: pointer;
}


/* Order Sub Products */
.order-sub-product {
    align-items: start;
    gap: var(--size-200);
}

.order-sub-product__content {
    display: grid;
    gap: var(--size-100);
}

.order-sub-product__headline {
    color: rgb(var(--clr-primary-400));
    font-size: var(--fs-200);
}

.order-sub-product__subline {
    font-size: var(--fs-100);
    font-weight: var(--fw-regular);
}

.order-sub-product__price {
    margin-block-start: var(--size-400);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--size-100);
}

.order-sub-product__price p {
    font-size: var(--fs-500);
    color: rgb(var(--clr-primary-400));
    display: flex;
    align-items: end;
    line-height: 1;
    gap: var(--size-200);
}

.order-sub-product__price p span {
    font-size: var(--fs-200);
    color: rgb(var(--clr-neutral-800));
    font-weight: var(--fw-regular);
}

.order-sub-product__price .card__button {
    background-color: transparent;
    color: rgb(var(--clr-primary-400));
    padding: 0;
}

/* Add Address */
.search__address {
    position: relative;
}

.search__address input {
    width: 100%;
    border: 1px solid rgb(var(--clr-neutral-300));
    padding: var(--size-200);
}

.search__address button[type="submit"] {
    position: absolute;
    right: 0;
    border: none;
    padding: var(--size-200) var(--size-300);
    background-color: transparent;
    cursor: pointer;
}

.add-address {
    margin-inline-start: auto;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.add-address i {
    color: rgb(var(--clr-primary-400));
}

/* Address Table */
.address-table__container {
    background-color: rgb(var(--clr-neutral-100));
    border: 1px solid rgb(var(--clr-neutral-700));
    padding: var(--size-200);
    margin-block: var(--size-400);
    overflow-x: auto;
}

.address-table__container.-hidden {
    display: none;
}

section.intro.mt120 {
    margin-top: 120px;
}

/* Address Table */
.address-table__container_w_margin {
    background-color: rgb(var(--clr-neutral-100));

    /*border: 1px solid rgb(var(--clr-neutral-700));
      padding: var(--size-200);
  margin-block: var(--size-400);
    overflow-x: auto;*/
    .back-button {
        margin-left: 50px;
        background: #005d45;
        border: none;
        padding: 15px 20px;
        border-radius: 6px;
        color: white;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.2s ease;
        text-decoration: none;
        font-weight: 500;
    }
}

.address-table tbody tr {
    background-color: rgb(var(--clr-neutral-100));
}

.address-table {
    display: table;
    width: 100%;
}

.address-table thead tr {
    background-color: rgb(var(--clr-neutral-200));
}

.address-table th,
.address-table td {
    padding: var(--size-200);
}

.address-table tbody td:not(:first-child, :last-child) {
    border-bottom: 1px solid rgb(var(--clr-neutral-700));
}

.address-table button,
.address-table a {
    border: none;
    cursor: pointer;
    color: rgb(var(--clr-neutral-300));
    background-color: transparent;
}

.address-table thead th:last-child,
.address-table tbody td:last-child {
    text-align: center;
}

/*SSE .address-table tbody td:last-child button:first-child{*/
.address-table tbody td:last-child a:first-child {
    margin-inline-end: var(--size-400);
    color: rgb(var(--clr-primary-400));
}

.delivery__details .pagination {
    margin-inline-start: auto;
    display: flex;
    gap: var(--size-200);
}

.delivery__details .pagination span button {
    border: none;
    width: var(--size-400);
    height: var(--size-400);
    cursor: pointer;
}

.delivery__details .pagination span button:hover {
    color: rgb(var(--clr-neutral-100));
    background-color: rgb(var(--clr-primary-400));
}

.delivery__details .current {
    color: rgb(var(--clr-neutral-100));
    border: none;
    width: var(--size-400);
    height: var(--size-400);
    background-color: rgb(var(--clr-primary-400));
}

.delivery__details .pagination>button:first-child,
.delivery__details .pagination>button:last-child {
    background-color: transparent;
    color: revert;
    border: none;
    width: auto;
    height: auto;
}

/* Checkout Footer
***********************************************************/
#check-desgvo {
    margin-block-start: var(--size-800);
    display: grid;
}

.checkout-ftr {
    margin-block: var(--size-800);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--size-400);
}

body main {
    min-height: 80vh;
    margin-bottom: 50px;
}

/* Footer
***********************************************************/
footer {
    background-color: rgb(82, 80, 82);
}

footer * {
    color: rgb(var(--clr-neutral-100));
}

footer a {
    display: inline-block;
}

footer .main-footer {
    display: flex;
    flex-direction: column;
    position: relative;

    &::before {
        content: "";
        position: absolute;
        background-image: url('../img/wave.svg');
        background-position: center;
        background-size: 100% 25px;
        left: 0;
        width: 100%;
        height: 25px;
        top: -25px;
    }
}

/* KZI: ursprunglich --size-700 */
footer .main-footer .main-container {
    display: flex;
    max-width: 1650px;
    align-self: center;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
    min-height: 250px;

    &>* {
        display: flex;
        gap: 15px;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    @media screen and (max-width: 1024px) {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        margin-top: 27px;
    }
}

footer .main-footer .logo {
    grid-area: logo;
}

footer .main-footer .footer__contact {
    grid-area: contact;
    grid-column: 1 / span 3;
}

footer .main-footer .info {
    flex: 1;
    align-items: flex-start;

    li a {
        line-height: 1;
        font-size: 15px;
        display: block;
        width: 100%;
        height: 100%;
        position: relative;


        &::before {
            content: '';
            transform-origin: 100% 50%;
            transform: scale3d(0, 1, 1);
            transition: transform 0.3s;
            position: absolute;
            width: 100%;
            height: 1px;
            background: currentColor;
            top: 100%;
            left: 0;
            pointer-events: none;
        }

        @media screen and (min-width: 768px) {
            &:hover::before {
                transform-origin: 0% 50%;
                transform: scale3d(1, 1, 1);
            }
        }
    }

    @media screen and (max-width: 1024px) {
        gap: 20px;
        align-items: center;
        text-align: center;

        &>li {
            border-bottom: 1px solid white;
            width: 100%;
            padding-bottom: 20px;

            &>a {
                font-size: 24px;
            }
        }
    }
}

footer .main-footer .slogan {
    line-height: 1;
    text-transform: uppercase;
    font-size: var(--fs-700);
    font-weight: var(--fw-bold);
    flex: 2;
    text-align: center;
}

footer .main-footer .social {
    flex: 1;
    align-items: flex-end;

    @media screen and (max-width: 1024px) {
        width: 100%;
        align-items: center;
        font-size: 24px;

        h4 {
            font-size: 24px;
            margin-right: 0px;
        }
    }
}

footer .main-footer .social ul {
    display: flex;
    gap: var(--size-200);
    font-size: var(--fs-700);
    line-height: 1;

    li {
        transition: all 0.3s ease;
    }

    li:hover {
        transform: translateY(2px);
    }

    @media screen and (max-width: 1024px) {
        &>li a i {
            font-size: 40px;
        }
    }
}

footer .footer-info {
    width: 100%;
    max-width: 1650px;
    border-top: 1px solid white;
    text-align: center;
    margin: 16px auto 0;
    padding: 15px;
}

/* Copyright */
footer .copyright {
    padding: 6px 0px;
    background-color: rgb(var(--clr-primary-400));

    .container p {
        display: flex;
        flex-direction: column;
        font-size: 14px;
        text-align: center;
        justify-content: center;
        align-items: center;

        span {
            font-size: 18px;
        }

    }
}



/**********************************************************/
/* Media Queries                                          */
/**********************************************************/
@media only screen and (max-width: 1600px) {

    /**********************************************************/
    /* Cards                                                  */
    /**********************************************************/

    /* Vergleich */
    .product-card__container.vergleich .card.single-product {
        padding: var(--size-600) var(--size-200);
    }

    .product-card__container.vergleich .card {
        padding: var(--size-200);
    }

    .product-card__container.vergleich .card.single-product .card__even-column {
        flex-wrap: wrap;
    }

    .vergleich .toggle__content {
        flex-wrap: wrap;
    }

    .card.single-product .fit .card__even-column,
    .card.single-product .cross-sell .card__even-column {
        flex-wrap: wrap;
    }

    .card.single-product .card__even-column,
    .card.single-product .fit .card__even-column,
    .card.single-product .cross-sell .card__even-column {
        align-items: start;
    }

    .card__info {
        flex: 1;
        width: 50%;
    }

    .sidebar {
        flex: 1;
        width: 50%;
    }
}

@media only screen and (max-width: 1024px) {

    /**********************************************************/
    /* Root                                                   */
    /**********************************************************/
    :root {

        /* Font Sizes */
        --fs-900: 4rem;
        --fs-800: 4rem;
        --fs-700: 2rem;
        --fs-600: 2rem;
        --fs-500: 1.7rem;
        --fs-400: 1.6rem;
        --fs-300: 1.5rem;
        --fs-200: 1.4rem;
        --fs-100: 1.2rem;

        --fs-body: var(--fs-400);

        /* Sizes */
        --size-900: 12rem;
        --size-800: 9rem;
        --size-700: 8rem;
        --size-600: 6rem;
        --size-500: 5rem;
        --size-400: 3rem;
        --size-300: 2rem;
        --size-200: 1rem;
        --size-100: 0.5rem;
    }

    [data-width="narrow"] {
        max-width: 100%;
    }

    /* Header
    ***********************************************************/
    .main-header {
        background-color: rgb(var(--clr-neutral-200));

        @media screen and (max-width: 1023px) {
            overflow: auto;
        }

        &:has(.cart-preview-wrapper.open) {
            overflow: visible;
        }
    }

    .main-header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--size-400);
    }

    /* Logo */
    .logo {
        max-width: var(--size-700);
        width: 100%;
    }

    /* Search
    ***********************************************************/
    .search {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
    }

    .search-btn {
        position: absolute;
        top: 0;
        right: 50px;
        display: block;
        font-size: var(--fs-700);
        line-height: 1;
        width: 44px;
        height: 44px;
        border: 0;
        color: rgb(var(--clr-neutral-100));
        background-color: transparent;
    }

    .search__detail,
    .search__machine,
    .search__product {
        display: none;
    }

    .search__product.show {
        display: block;
        position: fixed;
        left: calc(-100vw + 7%);
        width: 93vw;
        top: 190px;
        margin-top: -10px;
    }

    .search-btn .fa-magnifying-glass-minus,
    .search-btn[aria-expanded="true"] .fa-magnifying-glass-plus {
        display: none;
    }

    .search-btn[aria-expanded="true"] .fa-magnifying-glass-minus {
        display: block;
    }

    .search__container[data-state="opened"] {
        position: absolute;
        top: var(--hdr-height);
        right: 0;
        width: 100vw;
        /* height: 100vh; */
        display: grid;
        grid-template-columns: 1fr 1fr;
        background-color: rgb(var(--clr-neutral-100));
        padding: var(--size-400) var(--size-200);
    }

    /* Navigation
    ***********************************************************/
    nav {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
    }

    .navigation {
        display: none;
    }

    /* Showcase
    ***********************************************************/
    .showcase .container {
        width: 100%;
    }

    .showcase .container__inner {
        padding-inline: var(--container-padding);
    }

    /* Home Search */
    #home .main-header .search {
        display: none;
    }

    #home .showcase .search {
        position: relative;
        border-radius: 3vw;
        background-color: rgb(var(--clr-neutral-100), 0.6);
    }

    #home .showcase .search-btn {
        display: none;
    }

    #home .showcase .search__container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--size-400);
        padding: var(--size-400);
    }

    /* Intro
    **********************************************************/
    .intro .even-columns {
        grid-auto-columns: 1fr 1fr;
    }

    .intro__content {
        grid-column: 1/3;
    }

    .dates {
        grid-column: 3/5;
    }

    /* Quality + News
    **********************************************************/
    .quality .wrapper,
    .news .wrapper {
        flex: 0 0 100%;
        justify-content: start;
        padding: var(--size-400) var(--size-200);
        background-color: rgb(var(--clr-primary-400), 0.6);
    }

    /* Vergleich */
    .product-card__container.vergleich {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            'single single'
            'card-1 card-2'
            'card-3 card-4'
        ;
    }


    .sidebar {
        padding: var(--size-200);
    }

    .card.product .card__headline,
    .card.single-product .card__headline {
        font-size: var(--fs-400);
    }

    /* Bestellung
    ***********************************************************/
    /* Side Info */
    .side-info {
        grid-column: 1 / -1;
    }

    /* Order Table */
    .order-table {
        grid-column: 1 / -1;
    }

    .accessories__content {
        gap: var(--size-600);
    }

    .order-sub-product__price {
        margin-block-start: auto;
        justify-content: start;
        gap: var(--size-300);
    }

    /* Footer
    ***********************************************************/
    footer .main-footer .container {
        grid-template-areas:
            'contact info'
            'logo social'
            'slogan social';
        gap: var(--size-400);
    }

    footer .main-footer .logo {
        max-width: var(--size-800);
    }

    footer .main-footer .social {
        margin-inline-start: auto;
    }
}

@media only screen and (min-width: 1024px) {
    .even-columns {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
}

@media only screen and (max-width: 1024px) {

    /**********************************************************/
    /* Root                                                   */
    /**********************************************************/
    :root {

        /* Font Sizes */
        --fs-900: 3rem;
        --fs-800: 3rem;
        --fs-700: 2rem;
        --fs-600: 2rem;
        --fs-500: 1.7rem;
        --fs-400: 1.6rem;
        --fs-300: 1.5rem;
        --fs-200: 1.4rem;
        --fs-100: 1.2rem;

        --fs-body: var(--fs-400);

        /* Sizes */
        --size-900: 12rem;
        --size-800: 9rem;
        --size-700: 8rem;
        --size-600: 6rem;
        --size-500: 5rem;
        --size-400: 3rem;
        --size-300: 2rem;
        --size-200: 1rem;
        --size-100: 0.5rem;
    }

    /* Header
    ***********************************************************/
    /* Login */
    .main-header.logged-in .login .welcome {
        font-size: var(--fs-100);
    }

    /* Search */
    .search__container[data-state="opened"] {
        grid-template-columns: 1fr;
        gap: var(--size-400);
    }

    .search__container :where(.search__product, > span, .search__detail, .search__machine) {
        grid-column: 1/3;
    }

    .search__container>span {
        margin-inline: auto;
    }

    /* Showcase
    ***********************************************************/
    .showcase {
        background-color: rgb(var(--clr-neutral-100));
        background-image: none;
    }

    .showcase::before {
        display: none;
    }

    .showcase .slogan {
        display: none;
    }

    #home .showcase .search {
        margin-block-start: var(--size-200);
        padding: 0;
    }

    .showcase .advantage {
        display: none;
    }

    /* Intro
    **********************************************************/
    .intro .even-columns {
        grid-auto-columns: 1fr;
    }

    .intro__content {
        grid-column: 1/1;
    }

    .dates {
        grid-column: 1/1;
    }

    /* News
    **********************************************************/
    .even-columns-list {
        columns: 1;
    }

    /* Artikelsuche nach Fabrikat
    **********************************************************/
    .artikelsuche,
    .letters {
        grid-column: 1 / -1;
    }

    /* Kontakt
    **********************************************************/
    /* Contact form */
    .contact__form form {
        grid-template-columns: 1fr;
    }

    /* Contact Info */
    .contact .contact__info {
        gap: var(--size-400)
    }

    /* Pagination
    **********************************************************/
    .pagination__btn {
        gap: var(--size-100);
        margin-inline-start: 0;
    }

    .pagination__btn button {
        font-size: var(--fs-200);
        padding: var(--size-100) var(--size-200);
    }

    .pagination__counter label {
        font-size: var(--fs-200);
    }

    .pagination__counter select {
        font-size: var(--fs-400);
    }

    /* Filter
    **********************************************************/
    .filter__container {
        flex: 1;
    }

    .filter__container>* {
        width: 100%;
    }

    .filter .container {
        padding: var(--size-200);
    }

    .filter__btn,
    .filter__selected__btn {
        width: 100%;
        justify-content: space-between;
    }

    /* Filter Selected */
    .filter__selected {
        justify-content: start;
        width: 100%;
    }

    /**********************************************************/
    /* Cards                                                  */
    /**********************************************************/

    /* Vergleich */
    .product-card__container.vergleich {
        grid-template-columns: repeat(1, 1fr);
        grid-template-areas:
            'single'
            'card-1'
            'card-2'
            'card-3'
            'card-4'
        ;
    }


    .card__info,
    .sidebar {
        flex: auto;
        width: 100%;
    }

    .process {
        gap: var(--size-400);
        align-items: center;

        button span {
            color: rgb(var(--clr-neutral-900));

        }
    }

    .process::before {
        display: none;
    }

    .shipping-method,
    .delivery-address {
        border-bottom: 5px solid rgb(var(--clr-primary-400));
    }

    .billing-address {
        border: 0;
    }

    .delivery__details .pagination button:nth-of-type(n + 4):nth-of-type(-n + 6) {
        display: none;
    }

    /* Footer
    ***********************************************************/
    footer .main-footer .container {
        grid-template-areas:
            'contact'
            'logo'
            'slogan'
            'social'
            'info';
        gap: var(--size-600);
    }

    footer .main-footer .container>*,
    .copyright {
        margin-inline: auto;
        text-align: center;
    }

    .copyright {
        font-size: var(--fs-100);
    }
}

.test-de::after {
    content: 'New';
    background-image: url(../flags/4x3/de.svg);
}

/*//SSE NEW */
.video {
    height: 40vh;
    box-shadow: 0 3px 16px rgb(var(--clr-neutral-900), 0.3);
    position: relative;
}

.video video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.video::after {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.05) 8%, rgba(0, 0, 0, 0.05) 100%);
    display: block;
    position: relative;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    overflow: auto;


    &.blur {
        overflow: hidden;

        #full-header .main-header {
            padding-right: 35px;
        }

        #full-header .top-header .container {
            padding-left: 0;
        }

        main {
            margin-right: 17px;
        }

        .bg-cover {
            position: fixed;
            background-color: rgba(231, 232, 242, 0.3);
            filter: blur(5px);
            top: 0;
            left: 0;
            width: 110vw;
            height: 110vh;
            backdrop-filter: blur(2px);
            z-index: 100;
        }
    }
}

.button {
    text-decoration: none;

}

.split_buttons {
    display: flex;
    gap: 15px;
}

.split_buttons button {
    width: fit-content;
    display: flex;
    padding: 0;
    justify-content: center;
    align-items: center;

    a {
        color: rgb(var(--clr-primary-400));
        padding: 10px 20px;
    }

    &:hover a {
        color: white;
    }
}

.katalog .spl-highlight-pill {
    display: flex;
    font-size: 24px;
    margin-top: 40px;
    font-weight: bold;
}

/* login form like search detail */
.login__btn {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: var(--size-200);
}

.login__btn i {
    color: rgb(var(--clr-neutral-100)) !important;
    font-size: inherit !important;
}



.login__form {
    display: none;
    position: absolute;
    padding: var(--size-300);
    background-color: white;
    z-index: 1;
    top: 0;
    right: 0;
    height: 100vh;
    width: 350px;
    opacity: 0;
    visibility: hidden;
    display: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s, transform 0.3s ease-in-out;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);

    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px white inset;
    }

    input {
        all: unset;
        border: 1px solid rgb(var(--clr-primary-400), 0.3) !important;
        border-radius: 5px;
        transition: all 0.3s ease;
    }

    input:focus-visible {
        outline: none;
    }

    input:focus {
        border: 1px solid rgb(var(--clr-primary-400), 1) !important;
    }

    form {
        margin-top: 50px;

        h4 {
            font-size: 24px;
            margin-bottom: 51px;
        }
    }

    a#passforgot {
        position: relative;

        &::before {
            content: '';
            transform-origin: 100% 50%;
            transform: scale3d(0, 1, 1);
            transition: transform 0.3s;
            position: absolute;
            width: 70%;
            height: 1px;
            background: rgb(var(--clr-primary-400));
            top: calc(100% + 4px);
            left: 0;
            pointer-events: none;
        }

        &:hover::before {
            transform-origin: 0% 10%;
            transform: scale3d(1, 1, 1);
        }
    }
}

.login__form .close-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 30px;
    height: 30px;
    color: rgb(var(--clr-primary-400));
    ;
    border: 1px solid rgb(var(--clr-primary-400));
    transition: all 0.3s;
    border-radius: 50%;
    position: absolute;
    top: 15px;
    right: 15px;


    i {
        font-size: 18px;
        transition: all 0.3s;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    &:hover {
        scale: 1.1;

        i {
            rotate: 90deg;
        }
    }

}

/* Slide-in animation for opening the form */
@keyframes slideIn {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translateX(100%);
    }

    100% {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
}

.login__form.open {
    opacity: 1;
    animation: slideIn 0.3s ease-in-out;
    visibility: visible;
    display: block;
}

.directorder__form,
.cartselect__form {
    position: relative;
    z-index: 3;
    top: auto;
    padding-block: inherit;
    margin-block: var(--size-700);
    transform: inherit;
    display: none;
    position: absolute;
    border-radius: 1rem;
    padding: var(--size-400);
    background-color: rgb(var(--clr-neutral-200));
    box-shadow: 0px 0px 20px rgb(var(--clr-neutral-900), 0.16);

    input#quicksuch_term2 {
        padding: 8px;
        border-radius: 5px;
        border: 1px solid grey;
        transition: border-color 0.2s linear 0s;

        &:focus-visible {
            outline: none;
            border: 1px solid rgb(var(--clr-primary-400));
            border-radius: 5px;
        }

        &::placeholder {
            opacity: 0.60;
        }
    }

    .input-number {
        padding: 5px 10px;
        border-radius: 5px;
        border: 1px solid grey;
        width: unset;

        &:focus-visible {
            outline: none;
            border: 1px solid rgb(var(--clr-primary-400));
            border-radius: 5px;
        }

        input[type=number] {
            width: unset;
        }

        input {
            &:focus-visible {
                outline: none;

            }
        }
    }

    i.fa-shopping-cart {
        font-size: 22px;
    }

    #warenkorbliste_header {
        padding: 9px 10px;
        border: none;

        &:focus-visible,
        &:focus,
        &:focus-within {
            outline: none;
            border: none;
        }

        &::placeholder {
            opacity: 0.60;
        }
    }

    #name_warenkorbliste_header {
        padding: 6px 16px;
        outline: none;
        border: none;

        &:focus-visible,
        &:focus,
        &:focus-within {
            border: none;
            outline: none;
        }

        &::placeholder {
            opacity: 0.60;
        }
    }

    button#direkt_zum_warenkorb,
    button#btn_warenkorbliste_header {
        min-width: 150px;
        background-color: white;
        color: rgb(var(--clr-primary-400));
        border: 1px solid transparent;
        border-radius: 2px;
        padding: 8px 20px;
        align-self: center;
        transition: all 0.5s ease;
        border: 1px solid rgb(var(--clr-primary-400));
    }

    button#direkt_zum_warenkorb:hover,
    button#btn_warenkorbliste_header:hover {
        background-color: rgb(var(--clr-primary-400));
        color: white;
        border: 1px solid rgb(var(--clr-primary-400));
        box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
    }
}


#quick_such_ergebnis2 {
    z-index: 99999 !important;
    position: absolute;
    background-color: #E9FFF8;
    border: 1px solid;
    border-radius: 5px;
    border-color: #11644D;
    cursor: pointer;
    left: 5%;
    top: 28%;
    overflow-y: auto;

    li {
        list-style: none;
    }
}


.login__form form {
    display: flex;
    flex-direction: column;
    gap: var(--size-200);
    margin-bottom: 2rem;
}

.login__form form :where(input, select, textarea) {
    padding: var(--size-100);
    border: 2px solid rgb(var(--clr-accent-400));
    border-radius: 3px;
    background-color: rgb(var(--clr-accent-400), 0.4);
}

.login__form form label {
    font-size: var(--fs-300);
    font-weight: var(--fw-light);
}

.login__form a {
    text-decoration: none;
    color: rgb(var(--clr-neutral-700));
}

.login__btn :where([class*="fa-chevron-"]) {
    margin-inline-start: auto;
}

.login__btn :where([class*="fa-chevron-"]) {
    transition: all 0.2s ease;
}

.login__btn[aria-expanded="true"] :where([class*="fa-chevron-"]) {
    transform: rotate(0.5turn);
}

/* Triangle */
.login__form::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--size-200));
    left: var(--size-500);
    border: var(--size-200) solid transparent;
    border-bottom: 0;
    border-top-color: rgb(var(--clr-neutral-200));
    transform: rotate(0.5turn);
}

/* Show List */
:is(.directorder__form,
    .cartselect__form).open {
    display: block;
}


.search__product input::placeholder {
    color: rgb(var(--clr-neutral-300)) !important;
    font-size: var(--fs-300);
}

.search__product input:-ms-input-placeholder {
    color: rgb(var(--clr-neutral-300)) !important;
    font-size: var(--fs-300);
}

/* Events
**********************************************************/
.events {
    position: relative;
    display: flex;
    justify-content: end;

    .termin:hover {
        i {
            transform: scale(1.2);
            color: rgb(var(--clr-primary-400));
        }

        &::before {
            transform-origin: 0% 50%;
            transform: scale3d(1, 1, 1);
        }
    }

    margin-bottom: 100px;
}


.events .wrapper {
    height: 550px;
    width: 100%;
    display: flex;
    flex-direction: row;
    z-index: 10;
}


.events .wrapper .wrapper__inner {
    width: 40%;
    display: flex;
    padding-top: 50px;
    padding-left: 50px;

    .flow .subline {
        font-weight: bold;
        color: rgb(var(--clr-neutral-800));
    }

    .flow .h3 {
        margin-top: 75px;
        font-size: 38px;
    }
}


.events .bg-messen {
    width: 60%;
    height: 100%;
    overflow: hidden;
    background-image: url('../../images/seiten/messen/messen-homepage.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

@media only screen and (max-width: 1024px) {
    .events .wrapper {
        flex: 0 0 100%;
        justify-content: start;
        padding: var(--size-400) var(--size-200);
    }
}

@media only screen and (max-width: 768px) {
    .events .wrapper {
        flex-direction: column;

        .bg-messen {
            width: 100%;
        }

        .wrapper__inner {
            margin-top: 30px;
            width: 100%;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

.termin {

    display: flex;
    align-items: center;
    gap: var(--size-300);
    position: relative;

    &::before {
        content: '';
        transform-origin: 100% 50%;
        transform: scale3d(0, 1, 1);
        transition: transform 0.6s;
        position: absolute;
        width: 60%;
        height: 2px;
        background: rgb(var(--clr-primary-400));
        top: 100%;
        left: 0;
        pointer-events: none;
    }


}

.termin i {
    transition: all 0.2s ease;
    font-size: var(--fs-700);
}

.termin a {
    text-decoration: none;

}



@media only screen and (max-width: 768px) {
    .video {
        display: none;
    }
}

/* Triangle */
#quick_such_ergebnis::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--size-200));
    left: var(--size-300);
    border: var(--size-200) solid transparent;
    border-bottom: 0;
    border-top-color: rgb(var(--clr-neutral-200));
    transform: rotate(0.5turn);
}

#quick_such_ergebnis {
    position: absolute;
    margin-top: 10px;
    padding: var(--size-300);
    background-color: white;
    border: 1px solid rgb(var(--clr-primary-400));
    -webkit-box-shadow: 2px 6px 21px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 2px 6px 21px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 2px 6px 21px -2px rgba(0, 0, 0, 0.75);
    overflow: auto;
    max-height: 70vh;
    min-width: 400px;

    .more_articles {
        display: inline-block;
        margin-top: 2px;
        padding: 2px 10px;

        a {
            font-size: 20px;
            color: rgb(var(--clr-neutral-900));
        }
    }
}

#quick_such_ergebnis h3 {
    display: flex;
    justify-content: space-between;
    padding: 1px 16px;
    font-weight: bold;
    border-bottom: 2px solid rgb(var(--clr-primary-400));
    font-size: 20px;


    small {
        color: rgb(var(--clr-primary-400));
        font-size: 14px;
    }
}

#quick_such_ergebnis h4 {
    margin-top: 10px;
    margin-bottom: 5px;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding: 1px 16px;
    border-bottom: 2px solid rgb(var(--clr-neutral-800), 0.6);
}

#quick_such_ergebnis a {
    text-decoration: none;
    color: rgb(var(--clr-primary-400));
    display: inline-block;
    font-size: 16px;
    padding: 1px 0px;
    transition: 0.2s all ease;
}

#quick_such_ergebnis a:hover {
    color: rgb(var(--clr-accent-400));
    transform: translateX(3px);
}

#quick_such_ergebnis ul {
    margin-top: 10px;
    padding: 0px 16px;
    list-style: none;
}


.katalog {
    padding-top: var(--size-200);
}

.katalog a {
    text-decoration: none;
}

.katalog .card {
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 5px;

    #fussbereich {
        display: flex;
        margin-top: auto;

        i.card__arrow {
            transition: 0.5s all ease-in-out;
            margin-left: 0;
        }
    }

    .no-original {
        margin-top: auto;
        padding: 15px 5px;
        font-size: 12px;
        text-align: center;
    }
}

.katalog .card.subcatalogue-tile {
    text-align: center;

    .card__image {
        width: 100%;
        padding: 5px;
        margin-top: 25px;
    }

    span {
        font-weight: 400;
    }

    #fussbereich {
        i.card__arrow {
            margin-right: 10px;
        }
    }
}

.katalog .card #fussbereich {
    padding: 0px 5px 2px 10px;
    display: flex;

    i.card__arrow {
        transition: 0.5s all ease-in-out;
        margin-left: 10px;
    }
}

.card.katalog-tiles .card__headline {
    font-size: 14px;
}

.katalog .katalog-card__container a .card:hover.katalog-tiles #fussbereich i.card__arrow,
.card.first:hover #fussbereich i.card__arrow {
    margin-left: calc(100% - 35px);
}

.card2 {
    position: absolute;
    top: 0;
    /* list-style: none; */
    height: 80%;
    width: 100%;
    padding: var(--size-200);
    background-color: rgb(var(--clr-neutral-200));
    top: 100%;
    transition: top .5s ease;
    height: 100%;
    display: flex;
}

.card2 ul {
    list-style: none;
    margin-top: 20px;
    padding: 5px
}

.card2 li {
    color: rgb(var(--clr-neutral-700));
    font-size: var(--fs-200);
}

.card2 .card__number {
    font-size: var(--size-900);
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    opacity: .3;
    z-index: 0;
}

.card__arrow {
    z-index: 2;
}

.contain {
    object-fit: contain !important;
}

.card__image {
    background-color: rgb(var(--clr-neutral-100));
}

.katalog-card__container {
    grid-auto-rows: 1fr;

    &>a {
        display: block;
    }
}

.card__indicator {
    font-size: var(--fs-400);
    color: rgb(var(--clr-neutral-300));
}

.card__even-column table {
    width: auto;
}

.card__price-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;

    /* Left column: Prices */
    .left-column {
        flex: 1;
        text-align: left;
        max-width: 50%;
    }

    .price-container {
        font-weight: bold;
    }

    .price-discount {
        font-size: 1.2em;
        margin-top: 5px;
    }

    /* Right column: List, button, and printBestand */
    .right-column {
        flex: 1;
        max-width: 50%;
    }

    .list-container {
        font-size: 1.2em;
    }

    .button-container {
        display: inline-flex;
        gap: 15px;
        align-items: center;
        width: 170px;
        justify-content: flex-end;
    }

    .button-container button {
        max-height: 30px;
        height: 100%;
        padding: 10px 20px;
        background-color: rgb(var(--clr-primary-400));
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: 0.3s all ease;
        border: 1px solid white;
        margin-left: 2px;
    }

    .button-container button:hover {
        background-color: white;
        border: 1px solid rgb(var(--clr-primary-400));

        .fa-solid.fa-cart-shopping {
            color: rgb(var(--clr-primary-400));
        }
    }

    .button-container input {
        height: 30px;
    }

}

.single-product.produkt_part .card__price-box .left-column {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .price-container p {
        font-size: 22px;

        s {
            font-size: 18px;
        }
    }

    @media screen and (max-width: 1023px) {
        flex-direction: column;

        .price-container p {
            font-size: 18px;

            s {
                font-size: 14px;
            }
        }

    }
}

.card__text.small {
    display: flex;
    gap: 0.5em;
    flex-direction: row;
    align-items: center;
}

.card__price-box .card__text i {
    margin: 0;
}

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

/******* Netto CheckBox *********/

.netto input[type=checkbox] {
    display: none;
}

.netto input[type=checkbox]+label:before {
    font-family: FontAwesome;
    color: rgb(var(--clr-primary-400));
    font-size: var(--fs-700);
    cursor: pointer;
}

.netto input[type=checkbox]+label:before {
    /*content: "\f0c8"; */
    content: "\f00d";
    font-size: 26px;
}

.netto input[type=checkbox]:checked+label:before {
    /*content: "\f14a"; */
    content: "\f00c";
}

.netto {
    cursor: default !important;
}

/******** Single Product **********/
.single-product table {
    width: 100%;
}

.card.shopping .card__form {
    margin-top: auto;
}

.toggle__content .shopping-card__container {
    grid-auto-rows: 1fr;
    width: 100%;
}

.card__intro {
    flex: 3;
    padding-left: 25px;
    gap: 5px;

    @media screen and (max-width: 639px) {
        padding-left: 0;
    }
}

.sliderbanner-container {
    .slide-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .slide-background {
        cursor: grab;
        position: absolute;
        inset: 0;
        object-fit: cover;
        z-index: 0;
    }

    .slide-gradient {
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%),
            linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%);


        z-index: 1;
        pointer-events: none;
    }

    .slide-content {
        position: relative;
        z-index: 2;
        padding: 2rem;
        color: white;
    }
}

/*//SSE ArtikelBilder carusel*/
.swiper-slide img {
    width: 100%;
    height: 100%;
    cursor: zoom-in;
    object-fit: contain;
}

.bildwrap button {
    width: 50px;
    height: 50px;
    color: rgba(var(--clr-primary-400), 0.5);
    background: transparent;
    border: none;
    outline: none;
    transition: color 0.5s;
    transition: opacity 0.5s;
}

.bildwrap button:hover {
    color: #005e45;
    color: rgba(var(--clr-primary-400), 0.8);
}

.bildwrap button::before,
.bildwrap button::after {
    font-size: 3em;
}

.bildwrap {
    position: relative;
    padding: .5em;
    max-height: 300px;
    aspect-ratio: 16/9;
    overflow: hidden;
    width: 100%;
}


.bigger-pic {
    display: flex;
    justify-content: center;
    height: 100%;
}

.bigger-pic img {
    max-width: 100%;
    max-height: 100%;
}

.modal {
    /*
    max-width: 700px;
    height: 90%;
    */
    max-width: 90% !important;
    max-height: 90% !important;
    width: auto !important;
}

.print_product {
    color: white;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 1.5em;
}

.pic-pages {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
    bottom: 0;
    z-index: 1;
    height: 20%;
    gap: 0.5em;
    left: 0;
}

.pages-element {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: flex;
    align-items: center;
    cursor: pointer;
    border: 0.5px #444 solid;
    background-color: white;
    opacity: 50%;
    transition: .5s opacity;
}

.pages-element:hover {
    opacity: 100%;
}

.bildwrap-thumbs {
    overflow: hidden;
}

.bildwrap-thumbs .swiper-wrapper {
    display: flex;
    align-items: center;
    height: 50px;
    justify-content: center;

    .swiper-slide {
        width: fit-content;
        max-width: 90px;
    }
}

.hersteller-filter__container {
    margin-bottom: var(--size-200);
}

.hersteller__btn {
    max-width: 100%;
    border-radius: 5px;
    background-color: white;
    color: rgb(var(--clr-primary-400));
    transition: all 0.2s linear 0s;
    cursor: pointer;
    border: 1px solid rgb(var(--clr-primary-400));
    padding: 5px 10px;

    &:hover {
        background-color: rgb(var(--clr-primary-400));
        color: white;
    }
}

.selected {
    background-color: rgb(var(--clr-primary-400));
    color: rgb(var(--clr-neutral-100));
    transition: .5s all;
}

.acc__data {
    padding: var(--size-200);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.accBlocker {
    position: absolute;
    display: none;
	span { 
	    font-size: 14px;
		margin: 0 auto;
	}
}

.disabled {
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    color: rgb(var(--clr-neutral-100));
    align-items: center;
    height: 100%;
    width: 100%;
    z-index: 1;
    background: rgb(var(--clr-neutral-900), .4);
    transition: .5s all;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    display: flex !important;
}

.center {
    align-items: center;
}

thead {
    text-decoration: underline;
}

.active-view {
    border: 6px solid rgb(var(--clr-primary-400)) !important;
    transition: .5s all;
}

.product {
    transition: .5s all;
}

.vergleich .single-product {
    height: calc(100vh - var(--size-400) - var(--size-400));
    overflow-y: auto;
    position: sticky !important;
    top: var(--size-400);
}

.products__wrap {
    display: flex;
    flex-direction: column;
    gap: var(--size-400);
}

.card__info {
    max-width: 100%;
}

.small {
    font-size: var(--fs-100);
}

.close {
    display: flex;
    align-items: center;
    gap: var(--size-200);
}

.cart-preview-wrapper {
    display: none !important;
    transition: .5s all;
    box-shadow: 2px 5px 30px 14px rgba(0, 0, 0, 0.55);
}

/* Show Warenkorb */
.cart-preview-wrapper.open {
    display: block !important;
    z-index: 3;
    top: auto;
    padding-block: inherit;
    left: inherit;
    transform: inherit;
    position: absolute;
    left: 50%;
    transform: translate(-50%);


}

.cart-preview {
    position: relative;
}

.cart-preview__content {
    margin-block: var(--size-200);

    @media screen and (max-width: 1023px) {
        padding: 0px;
    }
}

.cart-preview__content .product__preview {
    padding-block-end: var(--size-200);
    padding-top: var(--size-200);
    display: flex;
    border: 1px solid rgb(var(--clr-neutral-900), .7);
    margin-top: 5px;
    border-radius: 15px;

    @media screen and (max-width: 639px) {
        flex-direction: column;
    }

    .even-columns {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;

        @media screen and (max-width: 639px) {
            justify-content: space-between;
        }

    }

    .product__footer {
        height: 100%;

        @media screen and (max-width: 639px) {
            margin-left: auto;
        }

        .even-columns {
            @media screen and (max-width: 1024px) {
                flex-wrap: wrap;
                gap: 8px;
                justify-content: flex-end;
            }
        }
    }
}

.cart-preview__content .product__preview .delete-btn {
    top: var(--size-200);
}

.product__preview .product__image img {
    max-height: var(--size-800);
}

.product__preview .product__content {
    gap: 0 !important;
}

.cart-preview .product__image {
    width: 100px;
    height: 85px;
    display: flex;
    justify-content: center;
    background-color: rgb(var(--clr-neutral-100));

    img {
        object-fit: contain;
    }
}

#logsubmit_btn {
    width: 100%;
    max-width: 100%;
    border-radius: 5px;
    background-color: rgb(var(--clr-primary-400));
    color: white;
    transition: all 0.2s linear 0s;
    cursor: pointer;
    border: 1px solid rgb(var(--clr-primary-400));
    display: flex;
    align-items: center;
    max-height: 35px;
    height: 35px;
    margin-top: 20px;

    &:hover {
        background-color: white;
        color: rgb(var(--clr-primary-400));
    }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.order-product img {
    max-width: 200px;
    /*kzi MAx- hight habe ich hinzu gefügt um die bilder im Warenkorb gleich zu haben.*/
    max-height: 142px;
}

/*################Contactbox######################*/

#contactBox {
    position: fixed;
    top: 50%;
    margin-top: -50px;
    right: 0;
    z-index: 99999;
    opacity: 0.8;
}

#contactBox>div:first-child {
    background-color: rgb(var(--clr-primary-400));
    float: left;
    width: 44px;
    /*011119-Stepanov-----height wieder rasunehmen150*/
    /* height: 150px; */
    color: white;
    text-align: center;
    border-radius: 5px 0 0 5px;
}

#contactBox>div:first-child i {
    padding: 2px 6px;
    font-size: 28px;
}

#contactBox>div:last-child {
    display: none;
    background-color: #EEEEEE;
    float: right;
    margin-right: 0;
    animation: animationContactOpenRight 0.5s 1;
    padding: 1px 0;
    /*011119-Stepanov-----war 94px148*/
    height: auto;
}

#contactBox>div:last-child a {
    font-size: 18px;
    padding: 5px 8px;
    width: 250px;
    display: block;
    line-height: 22px;
    color: #666666 !important;
}

#contactBox>div:last-child a:hover,
#contactBox>div:last-child a:focus {
    font-size: 18px;
    padding: 5px 8px;
    width: 250px;
    display: block;
    line-height: 22px;
    color: #222222 !important;
}

@keyframes animationContactOpenRight {
    from {
        margin-right: -200px;
    }

    to {
        margin-left: 0;
    }
}

#contactBox:hover>div:last-child,
#contactBox:active>div:last-child {
    display: block;
}

/* Eingefuegt am 02_02_24-----------Jumper*/
#jumptop {
    position: absolute;
    right: .1em;
    display: none;
    height: 51px;
    width: 45px;
    cursor: pointer;
    background: #fff url('../../img/jumptop.jpg') no-repeat center;
    z-index: 99999999;
    overflow: hidden;
    padding: .5em;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
}

/*//SSE Header überall auf der Seite darstellen*/
#top-of-site-pixel-anchor {
    position: absolute;
    width: 1px;
    height: 1px;
    top: 600px;
    left: 0;
}

#full-header {
    width: 100%;
    position: sticky;
    top: 0px;
    z-index: 100;
    background-color: white;
    transition: transform 0.3s ease-in-out;

    &.box-shadow {
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
}

#full-header+main {

    margin-top: 50px;

}

/*//SSE Jump to top */
.jumper {
    display: none;
    opacity: 70%;
    z-index: 100;
    border-radius: 100px;
    background-color: rgb(var(--clr-neutral-100));
    color: rgb(var(--clr-primary-400));
    position: fixed;
    bottom: 170px;
    right: 15px;
    font-size: var(--fs-700);
    width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
    border: solid rgb(var(--clr-primary-400)) 4px;
    cursor: pointer;
    box-shadow: 0 0 10px rgb(var(--clr-neutral-900), 0.6);

    @media screen and (max-width: 1024px) {
        bottom: 44px;
    }
}

.jumper.visible {
    display: flex;
}

.contact_button.open+button#contactInfo {
    display: none;
}

button#contactInfo {
    z-index: 100;
    cursor: pointer;
}

#jumptop {
    display: none !important;
}

/*//kzi alle Trasches eine Farbe*/
.fa-trash {
    color: rgb(var(--clr-primary-400)) !important;
}

.neueihofbutton {
    display: flex;
    gap: 5px;
    width: 150px;
    height: 45px;
    display: grid;
    background-color: white;
    transition: all 0.2s linear 0s;
}

/*//SSE Tabellen Darstellung*/
.produkt_liste table {
    display: revert;

    input {
        padding: 2px 20px;
        border-radius: 5px;
        border: 1px solid rgb(82, 80, 82);
    }
}

.produkt_liste table th:first-child {
    width: 250px;
}

.bildwrap_table {
    display: flex;
    justify-content: center;
}

/*//SSE Kontakt button*/
.contact_button {

    border-radius: 10px;
    background-color: rgb(var(--clr-accent-600));
    color: rgb(var(--clr-neutral-100));
    position: fixed;
    min-height: 50px;
    height: auto;
    bottom: 246px;
    right: 14px;
    padding: .5em;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    box-shadow: 0 0 10px rgb(var(--clr-neutral-900), 0.6);

    @media screen and (max-width: 1024px) {
        bottom: 120px;
    }

    &>div {
        display: none;
    }

    /* font-size: var(--fs-600);*/
    font-weight: var(--fw-regular);
    cursor: default;

    &.open>div {
        display: block;
    }

    &.open {
        z-index: 1000;
    }

}

.contact_button a {
    color: rgb(var(--clr-neutral-100));
}

.contact_trigger {
    display: flex;
    justify-content: center;
}

.contact_data {
    display: flex;
    flex-direction: column;
    padding: 1em;
    opacity: 0;
}

.contact_button i {
    font-size: 3rem;
}

/*//SSE Detailsuche nach Maß*/
#tisergebnis {
    display: table;
    width: 100%;
}

.compare_small {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-image: url(../../img/compare_off_small.gif);
}

.linkanfrage {
    color: rgb(var(--clr-primary-400));
    font-size: var(--size-400);
    display: flex;
    justify-content: center;
    margin: 0.1em;
}

.compare_td {
    text-align: center;
    padding-bottom: 5px;
    width: 40px;
    ;

}

.mergin_top_5px {
    margin-top: 5px;
}

.mergin_botom_5px {
    margin-bottom: 5px;
}

.row {
    margin-bottom: 5px;
}

.themed-grid-col {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86, 61, 124, .15);
    border: 1px solid rgba(86, 61, 124, .2);
}

.themed-container {
    padding: .75rem;
    margin-bottom: 1.5rem;
    background-color: rgba(0, 123, 255, .15);
    border: 1px solid rgba(0, 123, 255, .2);
}

.right-label {
    text-align: right !important;
}

.form-check-input:checked {
    background-color: rgb(var(--clr-primary-400));
    border-color: rgb(var(--clr-primary-400));
}

.btn_style {
    color: rgb(var(--clr-neutral-100)) !important;
    background-color: rgb(var(--clr-primary-400));
    border-color: rgb(var(--clr-primary-400));
    padding: 0.3em 1.5em;
    border-radius: 4px;

}

.btn_style_danger {
    color: rgb(var(--clr-neutral-100)) !important;
    background-color: red;
    border-color: red;
    padding: 0.3em 1.5em;
    border-radius: 4px;

}

.headdatenlabel {
    color: rgb(var(--clr-neutral-100));
    background-color: rgb(var(--clr-primary-400));
    font-weight: bold;
    line-height: 2.1 !important;
    padding-left: 10px !important;
    font-size: var(--fs-600);
    margin-bottom: 10px;
    box-shadow: 4px 8px 20px rgb(var(--clr-neutral-900), 0.1);
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}


.headSeitInfo {
    color: rgb(var(--clr-neutral-100));
    background-color: rgb(var(--clr-primary-400));
    font-weight: bold;
    line-height: 2.8 !important;
    padding-left: 10px !important;
    font-size: var(--fs-600);
    margin-bottom: 10px;
    box-shadow: 4px 8px 20px rgb(var(--clr-neutral-900), 0.1);
}

.arttd {
    width: 40% !important;
    /* line-height: 100px;*/
}


.artikel_merken {
    width: 25px;
    height: 25px;

    background-color: rgb(var(--clr-primary-400));
}

.artikel_vergleichen {
    width: 25px;
    height: 25px;

    background-color: rgb(var(--clr-primary-400));
}

.artikel_vergleichen,
.artikel_merken {
    margin-right: auto;
}

.scrolltable {
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
}

.title_width {
    width: 15%;
}

.produkt_zubehoer>* {
    flex: 0 1 auto;
}

img.lagerinfo { 
    width: 40px;
    height: 40px;
}
.lagerinfobut {
    width: 20%;
    background-color: rgb(var(--clr-primary-400));
    color: white;
}

.warenbutton {
    display: flex;
}

.warenkbutton_sub {

    margin-right: 5px;
    color: white;
    background-color: rgb(var(--clr-primary-400));
}

.header_prop {
    height: var(--fs-300);
}

td.warenkbutton_table {
    white-space: nowrap !important;
}

.warenkbutton_sub {
    padding: 6px;
    /* width: auto !important;
    height: auto !important; */
    margin-right: 5px;
    color: white;
    background-color: rgb(var(--clr-primary-400));
}

#warenkorbliste_vorschau {
    height: 35px;
    max-width: 300px;
}

/* kann in ein Separaten Css für Bestellvorgang- Pruefen gespeichert werden*/
.headdaten {
    color: rgb(var(--clr-neutral-100));
    background-color: rgb(var(--clr-primary-400));
    /*font-size: var(--fs-600);
    padding-left:10px;*/
    font-weight: bold;
    line-height: 2.8 !important;
    padding-left: 10px !important;
    font-size: var(--fs-600);
    margin-bottom: 10px;
    box-shadow: 4px 8px 20px rgb(var(--clr-neutral-900), 0.1);
}

#pruef_versand {
    background-color: #11644D;
    background: #eaeaea;
    margin: 32px 0px 0px;
    float: left;
    width: 100%;

}

#pruef_versand span {
    padding: 1em;
    float: left;
    line-height: 26px;
}

#pruef_versand .pure-button.pure-button-secondary {
    float: right;
    line-height: 43px;

}

.pure-button-secondary,
.pure-button-secondary--customer {
    display: flex;
    width: 100%;
    justify-content: center;
    border: 1px solid rgb(var(--clr-primary-400));
    border-radius: 5px;
    color: rgb(var(--clr-primary-400));
    font-family: inherit;
    background-color: white;
    padding: 5px 0px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 12px;
    align-items: baseline;

    &:hover {
        background-color: rgb(var(--clr-primary-400));
        color: white;
    }

    &.inverted {
        background-color: rgb(var(--clr-primary-400));

        span {
            color: white;
        }

        a {
            color: white;
        }

        i {
            color: white;
        }

        &:hover {
            background-color: white;

            i {
                color: rgb(var(--clr-primary-400));
            }

            a {
                color: rgb(var(--clr-primary-400));
            }

            span {
                color: rgb(var(--clr-primary-400));
            }
        }
    }
}

@media screen and (min-width: 811px) {
    .pure-button-secondary--customer {
        width: 40%;
    }
}

.pure-button-secondary {
    margin-top: 20px;
}

.address-block {
    display: flex;
    justify-content: center;
}


.pure-button-secondary_O_flex {
    width: 100%;
    justify-content: center;
    border: 1px solid rgb(var(--clr-primary-400));
    border-radius: 5px;
    color: rgb(var(--clr-primary-400));
    font-family: inherit;
    background-color: white;
    padding: 5px 0px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 12px;
    align-items: baseline;

    &:hover {
        background-color: rgb(var(--clr-primary-400));
        color: white;
    }
}

/* Algemein Input für Text*/
.default-Input {
    height: calc(3.25rem + 2px);
    padding: calc(2.25rem + 2px);
    font-size: var(--fs-200);
    font-weight: var(--fw-regular);
    font-family: var(--ff-secondary);
    line-height: 1.5;
    background-clip: padding-box;
    border: 1px solid #c4d4d4;
    border-radius: .25rem;
    padding: var(--size-100);
    box-shadow: inset 0 0 0px transparent;
    transition: border-color .12s ease-in-out, box-shadow .12s ease-in-out
}


.default-Input input::placeholder {
    color: rgb(var(--clr-neutral-300));
}



/* Notification container */
.notification-container {
    position: fixed;
    top: 100px;
    right: 20px;
    width: 350px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
}

/* Toast styles */
.toast {
    background-color: #005d45;
    color: #fff;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
    flex-direction: column;
    position: relative;
    /* Required for positioning close button */
    display: flex;
}

/* Toast title and description */
.toast-title {
    display: block;
    font-weight: bold;
    margin-bottom: 15px;
}

.toast-description {
    margin: 0;
    flex-grow: 1;
}

/* Undo button styles */
.toast-undo {
    background: none;
    border: none;
    color: #ffd700;
    font-weight: bold;
    cursor: pointer;
    margin-top: 15px;
    margin-left: 10px;
    transition: color 0.3s;
}

.toast-undo:hover {
    color: #fff;
}

/* Close button styles */
.toast-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 10px;
    position: absolute;
    /* Positioning */
    top: 10px;
    /* Adjust to fit your design */
    right: 10px;
    /* Adjust to fit your design */
    transition: color 0.3s;
}

.toast-close:hover {
    color: #f00;
}

/* Hide animation */
.toast.hide {
    opacity: 0;
    transform: translateY(-20px);
}

/* Ende Fuer Bestellvorgang- Pruefen */


main section {
    margin-bottom: 100px;
}

section .qualityb {
    margin-bottom: 200px;
}




#warenkorb.danke-page {
    margin-top: 50px;

    .content {
        max-width: 700px;
        margin: 0 auto;

        a.pure-button {
            margin-top: 50px;
        }
    }
}

.flip-katalog-container {
    margin-top: 50px;

    h2 {
        margin-bottom: 30px;
    }
}

.blocker {
    z-index: 100 !important;
}

section.katalog:has(.exp-button) .flow.mdl-explosion {
    display: flex;
    justify-content: space-between;
}

.exp-button {
    display: inline-flex;
    background-color: rgb(var(--clr-primary-400));
    color: white;
    align-items: center;
    padding: 10px;

    &:hover {
        background-color: white;
        color: rgb(var(--clr-primary-400));
    }
}

@keyframes slideInFromTop {
    from {
        transform: translateY(-20px);
        /* Start above the table */
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.katalog .container .katalog-mdl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    @media screen and (max-width: 639px) {
        flex-direction: column-reverse;
    }

    &>h1 {
        @media screen and (min-width: 641px) {
            max-width: 50vw;
        }
    }
}

.back-button-container button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 7px 10px 5px 10px;

    &::before {
        content: "\f060";
        font-family: FontAwesome;
        font-size: 15px;
        margin-bottom: 3px;
    }

    max-width: 100%;
    border-radius: 5px;
    background-color: rgb(var(--clr-primary-400));
    color: white;
    transition: all 0.2s linear 0s;
    cursor: pointer;
    border: 1px solid rgb(var(--clr-primary-400));
    min-width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;


    &:hover {
        background-color: white;
        color: rgb(var(--clr-primary-400));
        gap: 15px;
    }

    span {
        font-size: 20px
    }
}

.katalog .container .explosionList {
    border: 1px solid rgb(var(--clr-primary-400), 1);
    background-color: #fff;
    height: auto;
    padding: 20px;
    margin: 20px;
    transition: all 0.3s ease;

    &.-hide {
        margin: 0 20px;
        padding: 0 20px;
        border: 0;

        * {
            display: none;
        }
    }

    table {
        tr {
            display: flex;
            align-items: center;
        }

        tr :is(th, td) {
            text-align: left;
            flex: 1;
        }

        td {
            opacity: 0;
            animation: slideInFromTop 0.3s ease forwards;
        }
    }

    .warenkbutton_table .card__form {
        justify-content: flex-start;
    }
}

.hidden {
    display: none;
}

.mdl-paragraph {
    margin: 50px 20px 0 20px;
    padding: 20px 120px 0 120px;

    @media screen and (max-width: 1024px) {
        padding: 20px 5px 0 5px;
        margin: 50px 5px 0 5px;
    }

    p {
        margin-top: 25px;
    }
}

.cart-preview-wrapper #vorschau_sub {
    display: flex;
    flex-direction: column;

    width: 70vw;
    height: 70vh;

    @media screen and (max-width: 1024px) {
        width: 90vw;
    }
}

.cart-preview-wrapper #vorschau_sub>.even-columns {

    display: flex;
    align-items: center;

    #warenkorbliste_vorschau {
        flex: 4;
        margin-right: auto;
        background-color: white;
        border: 1px solid green;
        padding-left: 10px;
        color: rgb(var(--clr-neutral-900));

        @media screen and (max-width: 1023px) {
            flex: 2;
        }
    }

    label {
        max-width: fit-content;
        flex: 1;
        line-height: 13px;
    }

    button {
        flex: 1;

        span {
            font-size: 14px;

            @media screen and (max-width: 1024px) {
                font-size: 10px;
            }
        }

        margin-top: 0px;
    }
}

section.channel .container {
    margin-bottom: 200px;

    &>.flow {
        &>h2 {
            margin-bottom: 15px;
            font-size: 30px;
            transition: transform 0.3s ease;

            &:hover {
                transform: translateX(10px);

            }
        }

        &>h3 {
            margin-bottom: 15px;
            font-size: 20px;
        }
    }

    .card__image {
        width: 100%;
    }
}


#Unsere_Lieferanten #ihof-lieferanten.partner-img img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

#Unsere_Lieferanten .partners-container {
    margin-top: 40px;

    hr {
        margin-top: 20px;
    }

    .row {
        padding: 15px 0px;
    }
}

#Unsere_Lieferanten .partners-img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;

    img {
        width: 70%;
        object-fit: contain;
    }
}

section.order .container #tabs .col-md-4 a button {
    cursor: pointer;
}


section.order .warenkorbtable {
    @media screen and (max-width: 1024px) {
        thead {
            display: none;
        }

        tbody tr {
            display: flex;
            flex-direction: column;
        }

        .order-product-container {
            display: flex;
            gap: 20px;
        }
    }
}

section.order .berechnung-table {
    @media screen and (max-width: 1024px) {
        display: flex;
        flex-direction: column;
    }
}

/* *, *::before, *::after {
    outline: 1px solid greenyellow;
} */

.niauxlogo img {
    width: 140px;
}

:is(.produkt_eigenschaften table) tr :is(td:first-child, th:first-child) {
    text-align: left;
}

:is(.produkt_eigenschaften table) tr :is(td:not(:first-child), th:not(:first-child)) {
    text-align: right;
}

.checklist-container {
    display: flex;
    align-items: center;
}

:is(.imageContainer-eintrag, .card__image-container) .fa-regular.fa-image {
    cursor: pointer;
}

.imageContainer-eintrag .mainImage-container .bildwrap-thumbs {
    display: none;
}

.menge_inhalt-amount.no-amount {
    display: none;
}

.article-container {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;

    .price-box {
        text-align: left;
    }

    .buying-function {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .card__text {
        margin: 0;
    }
}

.pswp__img {
    object-fit: contain;
    background-color: white;
    padding: 30px;
}

.customer-info-container {
    color: white;

    button {
        margin: 0 0 0 10px;
        cursor: pointer;
        border: none;
        background: transparent;
        padding: 2px 4px;
        border: 1px solid var(--clr-primary-400);
        border-radius: 5px;
        transition: all 0.5s ease;
        position: relative;

        i {
            color: white;
            font-size: 17px;
        }

        .tooltip {
            z-index: 100;
        }

        &:hover {
            background-color: white;

            span {
                color: rgb(var(--clr-primary-400));
            }

            i {
                color: rgb(var(--clr-primary-400));
            }

        }
    }

    span {
        font-size: 13px;
    }

    @media screen and (max-width: 1024px) {
        display: none;

    }
}

.breadcrumb__item {
    position: relative;

    &::before {
        content: '';
        transform-origin: 100% 50%;
        transform: scale3d(0, 1, 1);
        transition: transform 0.3s;
        position: absolute;
        width: 100%;
        height: 1px;
        background: rgb(var(--clr-primary-400));
        top: 100%;
        left: 0;
        pointer-events: none;
    }

    &:hover {
        &::before {
            transform-origin: 0% 50%;
            transform: scale3d(1, 1, 1);
        }
    }
}


.mashintype_table {
    width: 100%;

    .table-body,
    .table-header {
        width: 100%;

    }

    .table-body .table-row:nth-child(odd) {
        background-color: rgb(var(--clr-neutral-200));
    }

    .table-header .table-cell span {
        font-size: 16px;
        font-weight: 800;
    }

    .table-row {
        width: 100%;
        display: flex;
    }

    .table-cell {
        flex: 1;
    }
}

.mashintype_table_multipleitems {
    @media screen and (max-width: 639px) {
        font-size: 12px;
    }

    .table-body,
    .table-header {
        width: 100%;

    }

    .table-body .table-row:nth-child(odd) {
        background-color: rgb(var(--clr-neutral-200));
    }

    .table-header .table-cell span {
        font-size: 20px;
        font-weight: 800;

        @media screen and (max-width: 639px) {
            font-size: 14px;
        }
    }

    .table-row {
        width: 100%;
        display: flex;
        gap: 10px;

    }

    .table-body .table-row {
        transition: 0.1s all;

        &:hover {
            background-color: rgba(var(--clr-primary-400), 0.2);
        }
    }

    .table-cell {
        flex: 1;
        padding: 2px 12px;
    }

}

.table-seperator {
    width: 100%;
    margin-top: 32px;
    margin-bottom: 20px;
    border-top: 1px solid rgb(var(--clr-primary-400));
}

.marke-desc-container {
    width: 100%;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid rgb(var(--clr-primary-400));

    .marke-title {
        font-weight: 800;
        background-color: rgba(var(--clr-primary-400), 0.3);
        display: grid;
        align-items: center;
        padding: 0 5px;
    }

    .marke-desc {
        padding: 10px 20px;
        width: 100%;
        font-size: 18px;
    }
}

.kein_original {
    display: flex;
    gap: 10px;
    border: 1px solid rgb(var(--clr-primary-400));
    width: 100%;

    span {
        font-weight: 800;
        background-color: rgba(var(--clr-primary-400), 0.3);
        display: grid;
        align-items: center;
        padding: 0 10px;
    }

    .kein_original_text {
        font-size: 18px;
        padding: 10px 5px;
        width: 100%;
    }
}

.katalog .flow.katalog-mdl.mdl-explosion {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .buttons-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: flex-end;
    }
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

#SPL_Breadcrumbs {
    font-size: var(--fs-body);
    max-width: 1650px;
    display: flex;
    margin-inline: auto;
    list-style: none;
    color: rgb(var(--clr-neutral-800));
    margin-block: var(--size-400);

    li:not(:last-child)::after {
        content: '/';
        margin-inline: var(--size-100);
    }

    li a {
        color: rgb(var(--clr-primary-400));
        text-decoration: none;
    }
}


.seo-text {
    font-size: 16px;
    font-weight: 400;
    margin: 35px 0;
    margin-inline: auto;

    p {
        margin-top: 20px;
    }

    li {
        margin-bottom: 5px;
        list-style: none;
    }

    h1,
    h2 {
        margin: 20px 0px;
    }

    table {
        margin: 20px 0px;
    }

    tr {
        background-color: unset !important;
    }

    a {
        color: rgb(var(--clr-primary-400));
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

.bottom-text-cat {
    margin-top: 100px;
    display: block;
    text-align: center;
    display: flex;
    justify-content: center;

    p {
        max-width: 800px;
        font-size: 14px;
        color: rgb(var(--clr-primary-400));
    }
}



div#warenkorb {
    margin-bottom: 50px;
}

.side-info.bestellvorgang {
    background-color: #f1f1f1;
    text-align: center;
    position: sticky;
    top: 50;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
    flex: 1;
    max-height: 650px;
    height: 100%;
    color: rgb(var(--clr-neutral-800));
}

.side-info--orders {
    background-color: #f1f1f1;
    text-align: left;
    position: sticky;
    top: 50;
    transition: 0.2s;
    padding-bottom: 15px;
    padding: 8px 16px;
}

#leftsideshrink {
    background-color: #f1f1f1;
}

.order div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 250px;
}

#addbox_rech {
    height: 100%;
    display: flex;
    flex-direction: column;

}

#addbox_rech>div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;

    &>span,
    &>h3 {
        padding: 5px 0;
        margin: 2px 0;
    }
}

a.neueihofbutton {
    margin-top: auto;
    border-radius: 5px;
}

fieldset#cart_commend {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 5px;
    margin: 18px 0;
    padding: 20px 0px 0px 20px;

    textarea {
        width: 250px;
        height: 120px;
        margin-bottom: 20px;
    }
}

dl.check_list {
    margin-bottom: 20px;

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

    a {
        color: rgb(var(--clr-primary-400));
        position: relative;

        &::before {
            content: '';
            transform-origin: 100% 50%;
            transform: scale3d(0, 1, 1);
            transition: transform 0.3s;
            position: absolute;
            width: 100%;
            height: 1px;
            background: currentColor;
            top: 100%;
            left: 0;
            pointer-events: none;
        }

        &:hover::before {
            transform-origin: 0% 50%;
            transform: scale3d(1, 1, 1);
        }
    }
}

dl.check_list>div {
    padding: 20px 0px 0px 20px;
    display: flex;
    flex-direction: row;
    gap: 10px;

}

form#finishform div.pure-u-1.right {
    display: flex;
    justify-content: flex-end;
    margin-top: 3.375rem;
}

button.bestell_end {
    border-radius: 5px;
    background-color: rgb(var(--clr-primary-400));
    color: white;
    transition: all 0.2s linear 0s;
    cursor: pointer;
    border: 1px solid rgb(var(--clr-primary-400));

    span {
        font-size: 2rem;
        padding: 8px 18px;
    }

    &:hover {
        background-color: white;
        color: rgb(var(--clr-primary-400));
    }
}

div#pruef_versand {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    background-color: white;
    margin: 3rem 0px;

    &>span {
        display: inline-block;
        padding: 5px;
        font-size: 2rem;
    }

    a.neueihofbutton {
        width: 150px;
        height: 45px;
        display: grid;
        background-color: white;
        transition: all 0.2s linear 0s;

        span {
            place-self: center;
            color: rgb(var(--clr-primary-400));
            padding: 0;
        }

        &:hover {
            background-color: rgb(var(--clr-primary-400));

            span {
                color: white;
            }

        }
    }
}

#retouresearch table tr {
    display: flex;
    align-items: center;

    td {
        flex: 1;


    }

    @media screen and (max-width: 1023px) {
        td {
            width: 100%;
        }

        flex-direction: column;
    }


}


/*  ############################ BEGINN DEVELOPER PORTAL ############################ */

.info-container {
    display: flex;
    flex-direction: column;
    margin: 35px 0;
    justify-content: space-around;
}

@media screen and (min-width: 800px) {
    .info-container {
        flex-direction: row;
    }
}

.developer-info {
    padding: 24px;
    border-radius: 10px;

    h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    &>p {
        font-size: 16px;
        margin-top: 10px;
    }
}


.api-title {
    font-size: 24px;
}


.developer-portal {
    max-width: 1300px;
}

.links {
    column-gap: 10px;
}

.interface-link {
    background-color: #f8f9fa;
    border-radius: 5px;
    border: solid 1px #f8f9fa;
}


.api-info {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 50px;
    flex: 3;
    text-align: justify;
    position: relative;
    margin-bottom: 30px;

    h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    &>p {
        font-size: 16px;
    }
}

.inline-code-example {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0;
    border-radius: 4px;
}



.api-info--block code {
    margin: 2px 0;
    white-space: nowrap;
    display: inline-block;
}

.request {
    margin: 20px 0;
}

.request p {
    margin: 10px 0 16px 0;
}

.example {
    margin-top: 48px;
}

.example h3 {
    margin-top: 10px;
}

.example--info {
    display: flex;
    flex-direction: column;
}

.api-info--block .code-example {
    margin: 10px 0;
    background-color: #e8e8e8;
    padding: 8px;
}

.example--info p {
    flex-basis: 50%;
}

.example .example-image {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.example--info span {
    display: inline;
}

.api-title {
    font-size: 24px;
}


code.response {
    display: unset;
    margin: unset;
    white-space: unset;
    font-size: 14px;
    color: #d6336c;
    /* Vibrant color for the code text */
    padding: 2px 4px;
    /* Small padding around inline code */
    border-radius: 3px;
    /* Rounded corners */
}

pre {
    line-height: 1.1;
    background-color: #f4f4f4;
    /* Light gray background */
    border: 1px solid #ddd;
    /* Subtle border */
    padding: 10px;
    /* Padding for readability */
    border-radius: 5px;
    /* Rounded corners */
    overflow-x: auto;
    /* Enable horizontal scrolling if needed */

}

.general-request-structure {
    background-color: #e8e8e8;
    padding: 8px;
    border-radius: 3px;
}


#edi-doc-types {
    display: flex;
    flex-direction: column;
    margin-top: 64px;
    justify-content: space-between;
}

@media screen and (min-width: 800px) {
    #edi-doc-types {
        flex-direction: row;
    }
}

#edi-doc-types div {
    flex-basis: 45%;
}

#edi-doc-types div:first-of-type {
    padding: 32px;
    background-color: #f8f9fa;
    border-radius: 10px;
}

#edi-doc-types div:first-of-type h2 {
    margin-bottom: 20px;
}


.developer-info {
    display: flex;
    height: 100%;
    flex-direction: column;
    flex: 3;
    text-align: justify;
    position: relative;

    h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    &>p {
        font-size: 16px;
    }
}


.api-title {
    font-size: 24px;
}


.developer-portal {
    max-width: 1300px;
}

.links {
    column-gap: 10px;
}

.interface-link {
    background-color: #f8f9fa;
    border-radius: 5px;
    border: solid 1px #f8f9fa;
    position: relative;
    transition-property: box-shadow, bottom, left;
    transition-duration: 300ms;
    transition-timing-function: ease ease, ease
        /* cubic-bezier(.46,.99,.45,-0.48) */
    ;
    transition-delay: 0s;
    bottom: 0;
    left: 0;
}

.interface-link:hover {
    box-shadow: -4px 4px #005d45;
    bottom: 4px;
    left: 4px;
}

code.example-code {
    display: unset;
    margin: unset;
    white-space: unset;
    font-size: 14px;
    color: #d6336c;
    /* Vibrant color for the code text */
    padding: 2px 4px;
    /* Small padding around inline code */
    border-radius: 3px;
    /* Rounded corners */
}

pre {
    line-height: 1.1;
    background-color: #f4f4f4;
    /* Light gray background */
    border: 1px solid #ddd;
    /* Subtle border */
    padding: 10px;
    /* Padding for readability */
    border-radius: 5px;
    /* Rounded corners */
    overflow-x: auto;
    /* Enable horizontal scrolling if needed */

}

.segments h4 {
    color: #005d45;
}

.extra-infos {
    margin-top: 30px;
    padding: 16px;
    /*border: solid #d9d9d9 1px;
	border-radius: 8px;*/
    max-width: fit-content;
}

.extra-infos ul {
    list-style: square;
}

.extra-infos a:hover {
    text-decoration: underline;
    color: #005d45;
}

#edi-doc-types {
    display: flex;
    flex-direction: column;
    margin-top: 64px;
    justify-content: space-between;
}

@media screen and (min-width: 800px) {
    #edi-doc-types {
        flex-direction: row;
    }
}

#edi-doc-types div {
    flex-basis: 45%;
}

#edi-doc-types div:first-of-type {
    padding: 32px;
    background-color: #f8f9fa;
    border-radius: 10px;
}

#edi-doc-types div:first-of-type h2 {
    margin-bottom: 20px;
}


.edi-introinfo {
    display: flex;
    height: 100%;
    flex-direction: column;
    flex: 3;
    text-align: justify;
    position: relative;
    margin-bottom: 30px;

    h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    &>p {
        font-size: 16px;
    }
}


.api-title {
    font-size: 24px;
}


.developer-portal {
    max-width: 1300px;
}

.links {
    column-gap: 10px;
}

.interface-links {
    width: fit-content;
}

.interface-links a:hover {
    color: #005d45;
}

#edi--formats h4,
#edi--as2 h4 {
    color: #005d45;
}

/*  ############################ END DEVELOPER PORTAL ############################ */

.shipping-providers {
    color:#005d45;
}

.standard-shipping-info,
.standard-shipping-info--customer {
    flex-direction: column;
    align-items: flex-start;
    --checkbox-size: 1.6em;
    margin-top: 10px;
}

@media screen and (min-width: 1024px) {
    .standard-shipping-info--customer {
        margin-inline-start: calc(1.5* var(--checkbox-size));
        margin-top: unset;
    }
}

.standard-shipping-info ul,
.standard-shipping-info--customer ul {
    list-style-type: square;
    margin-bottom: 0;
    list-style-position: inside;
}

form#shipping-method div.standard-shipping-info,
form#shipping-method div.standard-shipping-info--customer {
    font-size: 15px;
    gap: unset;
    color: #555454;
}

.default-shipping-type-note {
    color: #005d45;
}

form#shipping-method div.form__checkbox--standard-shipping {
    flex-direction: column;
    gap: unset;
}

.standard-shipping-info p,
.standard-shipping-info--customer p {
    text-align: justify;
}

.shipping-info {
    display: none;
}

#retoure_bemerkungen,
#retoure_abholadresse {
    margin-top: 30px;
    width: 100%;
}

#retoure_bemerkungen,
#retoure_abholadresse {
    padding: 10px;
}

.cart-preview--table-rightcol {
    flex: 1 1 20%;
}

.cart-preview--table-rightcol .even-columns {
    justify-content: space-between;
}

.cart-preview--table-rightcol .quantity-and-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-preview--table-leftcol {
    flex: 1 1 80%;
}

.cart-preview__footer a.cart-preview--table-rightcol button {
    width: 100%;
    height: unset;
    padding: 10px 0;
}

.cart-choice-block {
    justify-content: space-between;
}

.cart-choice-block .cart-preview--table-leftcol {
    flex: 1 1 80%;
}

.cart-choice-block .cart-preview--table-leftcol label {
    margin-right: 1rem;
}

.cart-choice-block button.cart-preview--delete-button {
    flex: 1 1 20% !important;
}

.cart-preview__footer .even-columns {
    gap: var(--size-100);
}

.cart-preview__footer label.cart-preview--table-leftcol {
    font-size: 12px;
}

.cart-preview__footer button.card__button span {
    font-size: 16px;
}

@media screen and (max-width:1023px) {
    .cart-preview__footer .even-columns {
        flex-direction: column;
        align-items: unset;
    }
}

input.send-preorder-button {
    margin-top: 7px;
}

.total-price-container-pruefen {
    font-weight: bold;
    display: flex;
    margin-left: auto;
    flex-direction: row-reverse;
    gap: 10px;
    margin-top: 20px;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    align-items: end;
}

.orderstep-cart>div {
    display: flex;
    justify-content: space-between;
}

.cart-preview--table-rightcol.cartbutton-singlerow {
    flex: 0 1 20%;
}

.even-columns:has(.cartbutton-singlerow) {
    justify-content: end;
}

.order-product__product-id p {
    padding-left: var(--size-200);
}

.login_darf_nettopreisenN:checked {
    border: 1px solid rgb(var(--clr-primary-400));
}

fieldset.Berechtigungen-fieldset .row {
    padding: 10px 5px;
    margin: 0;
    border-radius: 3px;
}

fieldset.Berechtigungen-fieldset .row:nth-child(odd) {
    background-color: #fff;
}

fieldset.Berechtigungen-fieldset .row:nth-child(even) {
    background-color: #eee;
}

input.pure-button-secondary.inverted {
    padding: 15px 10px;
    color: white;

    &:hover {
        color: rgb(var(--clr-primary-400));
    }
}

label.akt-wa span {
    font-size: 20px !important;
    font-weight: bold;
    color: rgb(var(--clr-primary-400));
}

#shipping-explanation {
    padding: 10px;
    background-color: #f2f2f2;
    font-size: 15px !important;
    color: #005d45;
}

#tissergebnis .search_imag_box {
    img{ 
        object-fit: contain;
        transition: all;
    }
    &:hover img{
        border: 1px solid rgb(var(--clr-primary-400));
    }
}

.anzeigen-box {
     background-color: darkorange;
    padding: 5px;
    color: white;
    border-radius: 3px;
    transition: all 0.2s ease;
    &:hover { 
        border-radius: 6px;
        padding-left: 13px;
    }
}
tr:has(.anzeigen-box) td {
    color: darkorange;
}

.top-header--important-update {
    background-color: rgb(233, 205, 44);
    font-size: 14px;
    margin: 0;
    padding: 5px 30px;
    width: 100%;
    text-align: center;
}

@media screen and (min-width: 640px) {
    .top-header--important-update {
        background-color: rgb(233, 205, 44);
        font-size: 14px;
        margin: 0;
        padding: 6px 30px;
        width: 100%;
        text-align: center;
    }
}

.keyboard-shortcut {
    border: 1px solid black;
    padding: 3px;
    padding-bottom: 2px;
    border-radius: 5px;
    font-family: monospace;
}