/* Standard Definitionen */
* {
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    border: 0;
    font-weight: 300;
    line-height: 1.55;
    font-size: var(--font_size_medium);
    color: var(--color_primary);
}

html, body {
    font-family: var(--font_sans), sans-serif;
}

button, input, select, textarea {
    font: inherit;
}



/* Fonts einbinden */
/* montserrat-regular - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/css/fonts/montserrat/montserrat-v31-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-500 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('/assets/css/fonts/montserrat/montserrat-v31-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('/assets/css/fonts/montserrat/montserrat-v31-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/css/fonts/montserrat/montserrat-v31-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-regular - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/css/fonts/roboto/roboto-v50-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('/assets/css/fonts/roboto/roboto-v50-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
    src: url('/assets/css/fonts/roboto/roboto-v50-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/css/fonts/roboto/roboto-v50-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Standard Definitionen */
:root {
    /* ==========================================================
       CI RAW PALETTE (laut Corporate Identity)
       ========================================================== */
    --ci_bright_blue:   #573EEF;
    --ci_dark_violet:   #3E0D81;
    --ci_bright_violet: #8727D8;
    --ci_soft_violet:   #A954F3;
    --ci_wisteria:      #CDB8FA;

    --ci_soft_cyan:     #99E5E8;
    --ci_salmon:        #FF997F;
    --ci_soft_yellow:   #F9D957;

    --ci_white:         #FFFFFF;
    --ci_black:         #000000;
    --ci_dark_grey:     #4A4A4A;
    --ci_mid_grey:      #AAAEBD;
    --ci_light_grey:    #F7F8FC;

    /* ==========================================================
       sonstige Farben
       ========================================================== */
    --color_error_background:   #F9BBBB;
    --color_error_border:       #FF3535;
    --color_error:              #FF3535;

    --color_success_background: #CFF9CC;
    --color_success_border:     #77FF51;
    --color_success:            #28A745;

    /* ==========================================================
       TYPOGRAPHY
       ========================================================== */
    --font_sans: 'Montserrat', 'Roboto', Arial, sans-serif;
    --font_size_base: 16px;

    /* 1.5rem -> 24px */
    --font_size_xxlarge: 1.5rem;
    /* 1.5rem -> 20px */
    --font_size_xlarge: 1.25rem;
    /* 1.125rem -> 18px */
    --font_size_large: 1.125rem;
    /* 0.875rem -> 14px */
    --font_size_medium: 0.875rem;
    /* 0.75rem -> 12px */
    --font_size_small: 0.75rem;
    /* 0.625rem -> 10px */
    --font_size_xs: 0.625rem;
    /* 0.5rem -> 8px */
    --font_size_xxs: 0.5rem;

    --line_height_base: 1.5;

    /* ==========================================================
       SEMANTIC COLOR TOKENS (Default = Normalmodus = Violet)
       ========================================================== */
    /* Primary (Buttons, aktive Navigation, Links, Call-to-Action) */
    --color_primary: var(--ci_dark_violet);
    --color_primary_hover: var(--ci_soft_violet);

    --color_secondary: var(--ci_bright_violet);
    --color_secondary_hover: var(--ci_wisteria);

    --color_darkmode_primary: var(--ci_black);

    /* Subtile Hervorhebungen (Tabellen-Header, Card-Header etc.) */
    --color_accent_surface: var(--ci_wisteria);

    /* Text */
    --color_text: var(--color_primary); /* #111111 */
    --color_text_muted: #666666;
    --color_text_inverse: #E6E6E6;
    --color_text_white: var(--ci_white);

    --font_weight-lighter: 400;
    --font_weight-normal: 500;
    --font_weight-semi-bold: 600;
    --font_weight-bold: 700;

    /* Hintergründe */
    --color_bg: var(--ci_white);
    --color_darkmode_bg: #121212;
    --color_boltgun_metal: #393939;
    --color_bg_light: var(--ci_light_grey);
    --color_surface: #F8F9FA;
    --color_surface_alt: #EFEFEF;
    --color_search_field: #F2F2F2;
    --color_darkmode_search_field: #181818;

    /* Rahmen */
    --color_border: #111111;
    --color_border_inverse: #DDDDDD;

    /* Statusfarben */
    --color_active: #ACF298;
    --color_warning: var(--ci_soft_yellow);
    --color_danger: var(--ci_salmon);
    --color_info: var(--ci_soft_cyan);

    /* Form von Buttons */
    --button-border-radius: 1.0rem;

    --btn-hover-bg:    #6FD4D8;
    --btn-active-bg:   #4FBEC4;
    --btn-focus-ring:  #2FB6BC;
    --btn-disabled-bg: #D6F2F3;

    --button-primary-text-color: var(--ci_dark_violet);
    --button-primary-background-color: var(--ci_soft_cyan);
    --button-primary-border-color: var(--ci_dark_violet);

    --button-primary-hover-text-color: var(--ci_dark_violet);
    --button-primary-hover-background-color: var(--btn-hover-bg);
    --button-primary-hover-border-color: var(--ci_dark_violet);

    --button-primary-focus-shadow-color: var(--btn-hover-bg);

    --button-primary-disabled-text-color: var(--ci_dark_violet);
    --button-primary-disabled-background-color: #7aa6cf;
    --button-primary-disabled-border-color: #7aa6cf;
}

/* CI Definitionen */
.company-logo {
    display: block;
    background-color: var(--color_bg);
    color: var(--color_primary);
}

/* Schriftgroessen */
.font-size-medium {
    font-size: var(--font_size_medium);
}

.font-size-small {
    font-size: var(--font_size_small);
}

.font-size-xxs {
    font-size: var(--font_size_xxs);
}

.font_weight_bold {
    font-weight: var(--font_weight-bold);
}

.alert-primary {
    border-radius: 0.9rem;
    font-weight: var(--font_weight-semi-bold);
}

.count-result-box {
    text-align: center;
    padding-top: 0.31rem;
    padding-bottom: 0.31rem;
    border-radius: 0.9rem;
    border: 0.13rem solid var(--color_primary);
    height: 2.50rem;
    background-color: var(--ci_soft_yellow);
    font-weight: var(--font_weight-bold);
}

.seitenbuttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 0.63rem;
}

.seitenbuttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.50rem;
    height: 2.50rem;
    text-decoration: none;
    margin: 0 0.31rem;
    transition: all 0.2s ease;
    border-radius: 0.9rem;
}

.seitenbuttons a i {
    margin: 0; /* wichtig */
    padding: 0;
}

.detail-search-button {
    width: 100%;
    text-decoration: none;
}

.text-desktop-right{
    text-align: right;
}

.qa-header {
    height: 4.8rem;
    margin-top: 0.63rem;
}

.qa-answer {
    text-align: justify;
}

/* ==========================================================
   Font Stärken
   ========================================================== */
.font-lighter {
    font-weight: var(--font_weight-lighter);
}

.font-normal {
    font-weight: var(--font_weight-normal);
}

.font-semi-bold {
    font-weight: var(--font_weight-semi-bold);
}

.font-bold {
    font-weight: var(--font_weight-bold);
}

/* ==========================================================
   Buttons
   ========================================================== */
.btn {
    border-radius: var(--button-border-radius);
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-weight: var(--font_weight-semi-bold);
}

.btn-primary {
    color: var(--button-primary-text-color);
    background-color: var(--button-primary-background-color);
    border: 0.13rem solid var(--button-primary-background-color);
}

.btn-primary:hover {
    color: var(--button-primary-hover-text-color);
    background-color: var(--button-primary-hover-background-color);
    border: 0.13rem solid var(--button-primary-hover-border-color);
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: var(--button-primary-hover-text-color);
    background-color: var(--button-primary-hover-background-color);
    border: 0.13rem solid var(--button-primary-hover-border-color);
    box-shadow: 0 0 0 0.2rem var(--button-primary-focus-shadow-color);
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: var(--button-primary-disabled-text-color);
    background-color: var(--button-primary-disabled-background-color);
    border-color: var(--button-primary-disabled-border-color);
}

.btn-primary-outline {
    border: 0.13rem solid var(--color_primary) !important;
    color: var(--color_primary) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    font-size: 1.00rem !important;
}

.btn-primary-outline:hover {
    color: white !important;
    background-color: var(--color_primary) !important;
}

/* ==========================================================
   Shop Header
   ========================================================== */
.shop-header-navbar {
    background-color: var(--color_bg);
    align-items: stretch;
    padding: 0;
    height: auto;
}

.shop-header-container {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.shop-header-top-row {
    min-height: 5.5rem;
}

.shop-header-logo-column,
.shop-header-search-column,
.shop-header-actions-column {
    display: flex;
    align-items: center;
}

.shop-header-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.shop-header-logo-image {
    display: block;
    width: 100%;
    max-width: 12rem;
    height: auto;
}

.shop-search-form {
    width: 100%;
    margin: 0;
}

.shop-search-wrapper {
    position: relative;
    width: 100%;
}

.shop-search-clear-button,
.shop-search-submit-button,
.shop-icon-button,
.shop-category-button {
    border: 0;
    background: transparent;
    padding: 0;
}

.shop-search-clear-button,
.shop-search-submit-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color_text);
}

.shop-search-clear-button {
    right: 3rem;
}

.shop-search-submit-button {
    right: 0.75rem;
}

.shop-search-clear-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.shop-search-result-list {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 1050;
}

.shop-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    width: 100%;
}

.shop-theme-switch,
.shop-user-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
}

.shop-theme-switch-control {
    margin-bottom: 0;
}

.shop-cart-button {
    position: relative;
}

.shop-cart-count {
    position: absolute;
    top: -0.15rem;
    right: -0.15rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.2rem;
    border-radius: 62.44rem;
    background-color: var(--color_primary);
    color: var(--color_text_inverse);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
}

.shop-header-category-row {
    margin: 0;
    width: 100%;
}

.shop-category-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

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

@media (min-width: 768px) and (max-width: 992px) {
    .shop-header-logo-column {
        justify-content: flex-start;
    }

    .shop-header-search-column {
        justify-content: center;
    }

    .shop-header-actions-column {
        justify-content: flex-end;
    }

    .shop-header-actions {
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 0.5rem;
    }
}

@media (max-width: 960px) {
    .shop-header-top-row {
        row-gap: 1rem;
    }

    .shop-header-logo-column,
    .shop-header-actions-column {
        justify-content: center;
    }

    .shop-header-logo-link {
        justify-content: center;
        width: 100%;
    }

    .shop-header-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .shop-category-navigation {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================
   Header Hotfixes für aktuellen Template-Stand
   ========================================================== */
nav.navbar.fixed-top .input-group.form-control.searchbar,
nav.navbar.fixed-top .searchbar.form-control {
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

nav.navbar.fixed-top .inputfeld_suche {
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none;
    -webkit-appearance: none;
    background-image: none !important;
}

nav.navbar.fixed-top .inputfeld_suche:focus {
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.page-main {
    padding-top: 4rem;
}

/* ==========================================================
   Footer
   ==========================================================*/
.footer {
    background-color: var(--color_primary);
    padding-bottom: 2rem;
}

.footer-container {
    padding-top: 1.25rem;
    color: var(--color_text_inverse);
}

.footer-text {
    font-weight: var(--font_weight-semi-bold);
    line-height: 1.5;
    color: var(--color_text_inverse);
}

.footer-paragraph {
    line-height: 1.25rem;
    color: var(--color_text_inverse);
    font-size: var(--font_size_medium);
}

.footer-paragraph a {
    text-decoration: none;
    color: var(--color_text_inverse);
}

.footer-text-align {
    text-align: right;
}

@media only screen and (max-width: 768px) {
    .footer-text-align {
        text-align: left;
    }
}

/* ==========================================================
   Icons / Pictogramme im Kundenmenü
   ==========================================================*/
.customer-icon-color {
    color: var(--color_secondary);
}

.partner-icon-color {
    color: var(--ci_soft_cyan);
}

.condition_modal_title {
    font-weight: var(--font_weight-semi-bold);
}

.manufacturer_modal_title {
    font-weight: var(--font_weight-semi-bold);
}

/*
    detail.tpl - Definition der Tabelle mit Kurzinformationen
 */
.produktpreis {
    margin: 0.75rem 0.75rem 0.31rem 0;
    font-size: var(--font_size_xlarge);
    display: block;
    float: left;
}

.attributes {
    width: 100%;
    font-size: 0.75rem;
    margin-top: 0.94rem;
}

.attributes .evenrow {
    background-color: var(--color_bg);
    color: var(--color_text);
    text-align: left;
    padding: 0 0.31rem;
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: var(--font_size_medium);
    font-weight: normal;
}

.attributes .evenrow_label {
    background-color: var(--color_bg);
    color: var(--color_text);
    padding: 0 0.75rem;
    font-weight: var(--font_weight-normal);
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: var(--font_size_medium);
    width: 10.94rem;
}

.attributes .oddrow {
    background-color: var(--color_bg);
    color: var(--color_text);
    text-align: left;
    padding: 0 0.31rem;
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 0.88rem;
    font-weight: normal;
}

.attributes .oddrow_label {
    background-color: var(--color_bg);
    color: var(--color_text);
    padding: 0 0.75rem;
    font-weight: var(--font_weight-semi-bold);
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 0.88rem;
    width: 12.19rem;
}

.attributes .pricerow {
    background-color: var(--color_bg);
    color: var(--color_text);
    text-align: left;
    padding: 0 0.31rem;
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 0.88rem;
}

.attributes .pricerow_label {
    background-color: var(--color_bg);
    color: var(--color_text);
    padding: 0 0.75rem;
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 0.88rem;
    width: 10.94rem;
}

#lightbox {
    display: none;
    position: fixed;
    top: 7.56rem;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color_bg);
    border: 0.06rem solid var(--color_border);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.closelightbox {
    position: absolute;
    top: 0.63rem;
    right: 1.88rem;
    font-size: 2.50rem;
    color: var(--color_text);
    cursor: pointer;
    background-color: var(--color_bg);
}

.prev {
    left: 3.13rem;
}

.next {
    right: 3.13rem;
}

.prev,
.next {
    color: var(--color_text);
    background-color: var(--color_bg);
}

.nav {
    position: absolute;
    top: 50%;
    font-size: 2.50rem;
    color: white;
    cursor: pointer;
    user-select: none;
    transform: translateY(-50%);
}

.img-card-view {
    height: 10.94rem;
    overflow: hidden;
}

.img-list-view {
    text-align: center;
    height: 11.25rem;
    border: 0;
}

/*
 * eigene Abstände
 */
.p-t10 {
    padding-top: 0.63rem;
}

.p-r10 {
    padding-right: 0.63rem;
}

.p-b10 {
    padding-bottom: 0.63rem;
}

.p-l10 {
    padding-left: 0.63rem;
}

.p-10 {
    padding: 0.63rem;
}

.p-15 {
    padding: 0.94rem;
}

.p-t20 {
    padding-top: 1.25rem;
}

.p-r20 {
    padding-right: 1.25rem;
}

.p-b20 {
    padding-bottom: 1.25rem;
}

.p-l20 {
    padding-left: 1.25rem;
}

.p-20 {
    padding: 1.25rem;
}

.p-t30 {
    padding-top: 1.88rem;
}

.p-r30 {
    padding-right: 1.88rem;
}

.p-b30 {
    padding-bottom: 1.88rem;
}

.p-l30 {
    padding-left: 1.88rem;
}

.p-30 {
    padding: 1.88rem;
}

.p-t40 {
    padding-top: 2.50rem;
}

.p-r40 {
    padding-right: 2.50rem;
}

.p-b40 {
    padding-bottom: 2.50rem;
}

.p-l40 {
    padding-left: 2.50rem;
}

.p-40 {
    padding: 2.50rem;
}

.p-t50 {
    padding-top: 3.13rem;
}

.p-r50 {
    padding-right: 3.13rem;
}

.p-b50 {
    padding-bottom: 3.13rem;
}

.p-l50 {
    padding-left: 3.13rem;
}

.p-50 {
    padding: 3.13rem;
}

.p-l70 {
    padding-left: 4.375rem;
}

.p-t80 {
    padding-top: 5rem;
}

.p-t100 {
    padding-top: 6.25rem;
}

.m-b5 {
    margin-bottom: 0.31rem;
}

/*Margin 10*/
.m-t10 {
    margin-top: 0.63rem;
}

.m-r10 {
    margin-right: 0.63rem;
}

.m-b10 {
    margin-bottom: 0.63rem;
}

.m-l10 {
    margin-left: 0.63rem;
}

.m-10 {
    margin: 0.63rem
}
.m-5 {
    margin: 0.31rem
}

/*Margin 20*/
.m-t20 {
    margin-top: 1.25rem;
}

.m-r20 {
    margin-right: 1.25rem;
}

.m-b20 {
    margin-bottom: 1.25rem;
}

.m-l20 {
    margin-left: 1.25rem;
}

.m-20 {
    margin: 1.25rem;
}

/*Margin 30*/
.m-t30 {
    margin-top: 1.88rem;
}

.m-r30 {
    margin-right: 1.88rem;
}

.m-b30 {
    margin-bottom: 1.88rem;
}

.m-l30 {
    margin-left: 1.88rem;
}

.m-30 {
    margin: 1.88rem;
}


/*Margin 40*/
.m-t40 {
    margin-top: 2.50rem;
}

.m-r40 {
    margin-right: 2.50rem;
}

.m-b40 {
    margin-bottom: 2.50rem;
}

.m-l40 {
    margin-left: 2.50rem;
}

.m-40 {
    margin: 2.50rem;
}


/*Margin 50*/
.m-t50 {
    margin-top: 3.13rem;
}

.m-r50 {
    margin-right: 3.13rem;
}

.m-b50 {
    margin-bottom: 3.13rem;
}

.m-l50 {
    margin-left: 3.13rem;
}

.m-50 {
    margin: 3.13rem;
}

/*Margin 100*/
.m-b100 {
    margin-bottom: 6.25rem;
}

/*==========================================================
   Bilder abrunden
   ==========================================================*/
.img-clip {
    display: inline-block;          /* passt sich dem Bild an */
    line-height: 0;                 /* entfernt evtl. Lücken unter dem img */
}

.img-clip > a {
    display: block;                 /* keine Lücke durch inline-img */
    border-radius: 10%;
    overflow: hidden;
}

.img-clip img {
    display: block;
    width: 100%;
    height: auto;
}

.breadcrumb_btn {
    float: right;
    margin-left: 0.06rem;
}

.partner-tile-icon {
    position: absolute;
    bottom: 0.00rem;
    margin: 0.63rem;
}

.card {
    margin: 0.63rem;
    border-radius: 0.9rem;
    border: none;
    font-weight: var(--font_weight-semi-bold);
    font-size: var(--font_size_base);
}

.card-header:first-child {
    border-radius: 0.9rem;
}

.card-height {
    height: 34.38rem;
}

.card-detail-body {
    border: 1px solid var(--color_primary);
    border-radius: 0.9rem;
    padding: 0.5rem;
    box-shadow: 0 0.7rem 1rem 0 rgba(62, 13, 129, 0.30);
    font-size: var(--font_size_medium);
}

.accordion>.card>.card-header {
    border-radius: 0.9rem;
}

.beschreibungAccordion .card-header {
    margin-bottom: 0.00rem !important;
}

.beschreibungAccordion .card-body {
    margin-top: -1px !important;
}

.customer-menu-heading {
    padding: 0 0.63rem;
    height: 2.50rem;
    line-height: 2.50rem;
    margin: 0 0 0.63rem 0;
    font-size: var(--font_size_base);
    border-radius: 0.9rem;
    font-weight: var(--font_weight-semi-bold);
}

.main-page-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
}

.order-details-view {
    font-size: var(--font_size_small);
    padding-left: 0.3rem;
}

.order-icons {
    height: 1.56rem;
}

.order-detail-box {
    background-color: var(--color_bg_light);
    color: var(--color_text);
    padding: 0 !important;
}

td > button.btn {
    float: left !important;
}

.partnerprogramm-text-color {
    color: var(--color_secondary);
}

/* ===============================================================
    Partnerpreisanzeige in der Detail-Ansicht
   ===============================================================*/
.versandinfo_detail {
    margin: 0.94rem 0 0 0;
    font-size: var(--font_size_xxs);
    float: left;
    height: 1.88rem;
}

.vinfo-partner {
    font-size: var(--font_size_medium);
    font-weight: bold;
}

.versandinfo_detail.endk {
    padding-top: 0.94rem;
}

.versandinfo_detail.Gold {
    padding-left: 2.13rem;
    background: url(/assets/img/Goldpreis.png) left center no-repeat transparent;
}

.versandinfo_detail.Silber {
    padding-left: 2.13rem;
    background: url(/assets/img/Silberpreis.png) left center no-repeat transparent;
}

.versandinfo_detail.Bronze {
    padding-left: 2.13rem;
    background: url(/assets/img/Bronzepreis.png) left center no-repeat transparent;
}

.versandinfo_detail.Platin {
    padding-left: 2.13rem;
    background: url(/assets/img/Platinpreis.png) left center no-repeat transparent;
}

/* ===============================================================
    Formular Newsletter abbestellen (form_unsubscribe.tpl)
   ===============================================================*/
h1.listentitel {
    padding: 0 0.63rem;
    margin: 0 0 0.63rem 0;
    border-radius: 0.9rem;
    font-weight: var(--font_weight-bold);
}

/* ===============================================================
    aus error_form.css übernommen
   ===============================================================*/
.error {
    background-color: var(--color_error_background) !important;
    border: 0.06rem solid var(--color_error_border);
}

.valid {
    background-color: var(--color_success_background) !important;
    border: 0.06rem solid var(--color_success_border);
}

/* ===============================================================
    sonstiges aus konsolidierten CSS übernommen.
   ===============================================================*/
.seriennummer_link,
.trackingcod_link,
.modal-body a,
.modal-body a span {
    cursor: pointer;
    color: var(--color_primary);
    font-weight: var(--font_weight-bold);
}

.seriennummer_link:hover,
.trackingcod_link:hover,
.modal-body a:hover {
    color: var(--color_primary);
    text-decoration: underline;
}
.posrevenue {
    color: var(--color_success);
}

.negevenue {
    color: var(--color_error);
}

.hiding {
    display: none;
}

.card-img-top {
    cursor: pointer;
    padding: 0.3125rem;
    max-height: 10rem;
    object-fit: contain;
}

.card-title-kurz {
    min-height: 3.75rem;
}

.card-title-kurz-docking {
    height: 6.25rem;
}

.card-title-description {
    min-height: 3.75rem;
    height: 8.125rem;
    overflow: hidden
}

.card-zustand-text {
    min-height: 0.625rem;
    height: 1.5625rem;
    font-size: var(--font_size_medium);
}

.table-cell-description {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5;
}

.kundenmenu-nav-right-icon {
    margin: 0 !important;
    padding: 0.6875rem 0.3125rem;
}

.kundenmenu-nav-no-right-icon {
    margin: 0 !important;
    padding: 0 0.3125rem;
}

.detailsuche_result_item_size {
    height: 35rem;
    margin-bottom: 0.3125rem;
    margin-top: 0.3125rem;
}

.page-main-container {
    padding-top: 1.5rem;
    margin-bottom: 1.25rem;
    margin-top: 1.88rem;
}

.technical-description-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin-top: 10px;
    font-size: var(--font_size_medium);
}

.technical-description-table td {
    padding: 0.45rem 0.3rem;
    vertical-align: top;
}

.technical-description-table .schrift_td_key {
    width: 50%;
    color: var(--color_primary);
    font-weight: var(--font_weight-bold);
}

.technical-description-table .schrift_td_value {
    width: 50%;
    color: var(--color_primary);
    font-weight: var(--font_weight-normal);
}

.technical-description-table .underline_tr {
    border-bottom: 1px solid var(--color_primary);
}

.technical-description-table .underline_tr .schrift_td_key {
    padding: 0.1rem 0.3rem;
}

.technical-description-table .underline_tr .schrift_td_value {
    padding: 0.1rem 0.3rem;
}

.technical-description-table .tr_odd {
    background-color: var(--color_bg_light);
}

.technical-description-table .tr_even {
    background-color: var(--color_bg);
}

.description-blocks {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0.45rem 0.3rem;
}

.description-block {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.description-block__image-wrapper {
    flex: 0 0 120px;
}

.description-block__image {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.description-block__content {
    flex: 1;
}

.description-block__title {
    color: var(--color_primary);
    font-weight: var(--font_weight-bold);
    margin-bottom: 0.4rem;
}

.description-block__text {
    color: var(--color_primary);
    font-weight: var(--font_weight-normal);
    line-height: 1.5;
}

.description-block__text a{
    font-weight: var(--font_weight-bold);
}

/* ===============================================================
    Sonderdefinitionen für Mobilgeräte
   ===============================================================*/
.mobile-menu-button {
    float: left;
    margin-top: 0.50rem;
    margin-right: 0.63rem;
}

.kundenmenu-nav-company {
    margin-top: 2.9rem;
}

.kundenmenu-nav-partnerprogramm {
    margin-top: 2.9rem;
}

.kundenmenu-nav-partnerprogramm_qr {
    margin-top: 5.5rem;
}

.main-content-container {
    padding-top: 3.9rem;
}

/* =========================================================
   2. Größere Smartphones
   ========================================================= */
@media (min-width: 481px) {
    .kundenmenu-nav-company {
        margin-top: 2.9rem;
    }

    .kundenmenu-nav-partnerprogramm {
        margin-top: 2.9rem;
    }

    .kundenmenu-nav-partnerprogramm_qr {
        margin-top: 5.5rem;
    }

    .main-content-container {
        padding-top: 3.9rem;
    }

}

/* =========================================================
   3. Tablets (Portrait)
   ========================================================= */
@media (min-width: 769px) {
    .kundenmenu-nav-company {
        margin-top: 7rem;
    }

    .kundenmenu-nav-partnerprogramm {
        margin-top: 7rem;
    }

    .kundenmenu-nav-partnerprogramm_qr {
        margin-top: 7rem;
    }

    .main-content-container {
        padding-top: 3.9rem;
    }

    .page-main {
        padding-top: 7.5rem;
    }

    .technical-description-table .schrift_td_key {
        width: 35%;
    }

    .technical-description-table .schrift_td_value {
        width: 65%;
    }
}

/* =========================================================
   4. Tablets (Landscape) / kleine Desktops
   ========================================================= */
@media (min-width: 1025px) {
    body {
        font-size: var(--font_size_base);
    }

    .kundenmenu-nav-company {
        margin-top: 7.1rem;
    }

    .kundenmenu-nav-partnerprogramm {
        margin-top: 7.1rem;
    }

    .kundenmenu-nav-partnerprogramm_qr {
        margin-top: 5.5rem;
    }

    .main-content-container {
        padding-top: 5.5rem;
    }

    .page-main {
        padding-top: 8.5rem;
    }

    .page-main-container {
        padding-top: 2.5rem;
        margin-bottom: 1.25rem;
        margin-top: 1.88rem;
    }

    .technical-description-table .schrift_td_key {
        font-size: var(--font_size_base);
    }

    .technical-description-table .schrift_td_key {
        width: 25%;
    }

    .technical-description-table .schrift_td_value {
        width: 75%;
    }
}

/* =========================================================
   5. Große Displays
   ========================================================= */
@media (min-width: 1281px) {
    body {
        font-size: var(--font_size_base);
    }

    .kundenmenu-nav-company {
        margin-top: 7.9rem;
    }

    .kundenmenu-nav-partnerprogramm {
        margin-top: 7.9rem;
    }

    .kundenmenu-nav-partnerprogramm_qr {
        margin-top: 5.5rem;
    }

    .main-content-container {
        padding-top: 5.5rem;
    }

    .page-main {
        padding-top: 7.5rem;
    }

    .technical-description-table .schrift_td_key {
        font-size: var(--font_size_base);
    }

    .technical-description-table .schrift_td_key {
        width: 25%;
    }

    .technical-description-table .schrift_td_value {
        width: 75%;
    }
}

/* =========================================================
   Mobile Anzeige
   ========================================================= */
.sidenav {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: var(--color_bg_light);
    overflow-x: hidden;
    padding-top: 3.75rem;
    transition: all 0.5s;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: fixed;
    top: 0;
    right: 2rem;
    font-size: 2.25rem;
}

.mobile-navigation-menu {
    display: block;
    margin-left: 1.56rem;
    margin-bottom: 1.56rem;
}

/* Display */
.display_hide {
    display: none;
}

.display_show {
    display: block;
}


.btn-square {
    height: 2.81rem;
    width: 2.81rem;
}

.btn-categories {
    padding-left: 0.63rem;
    padding-right: 0.63rem;
}


.mobile_category_item {
    height: 2.5rem;
    width: 18.75rem;
    background-color: var(--color_bg);
    border: 1px solid var(--color_border_inverse);
    border-radius: 0.9rem;
}


.mobile_searchanzeige {
    width:100%;
    border: 1px solid var(--color_border_inverse);
}

.mobile_searchanzeige a {
    font-size: var(--font_size_base) !important;
}

/* =========================
   PANEL BASIS
   ========================= */
.mobile-panel-inner {
    padding: 1rem;
}

.mobile-panel-section + .mobile-panel-section {
    margin-top: 1rem;
}

/* =========================
   HEADER / CLOSE
   ========================= */
.mobile-panel-header {
    display: flex;
    justify-content: flex-end;
}

.mobile-close-button {
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
}

/* =========================
   SUCHFELD
   ========================= */
.mobile-search-wrapper {
    position: relative;
}

.mobile-search-input {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 2.5rem;
    border-radius: 0.9rem;
    border: 0.06rem solid var(--color_border_inverse);
    background-color: var(--color_search_field);
}

.mobile-search-icon-left,
.mobile-search-icon-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-search-icon-left {
    left: 0.5rem;
}

.mobile-search-icon-right {
    right: 0.5rem;
}

.mobile-search-results {
    background-color: var(--color_bg);
}

/* =========================
   KATEGORIEN
   ========================= */
.mobile-categories-toggle {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border-radius: 0.9rem;
    border: 0.06rem solid var(--color_border_inverse);
    background-color: var(--color_bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-categories-list {
    display: none;
}

.mobile-category-item {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 0.06rem solid var(--color_border_inverse);
    text-decoration: none;
}

/* =========================
   LOGIN BUTTONS
   ========================= */

.mobile-action-button {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    text-decoration: none;
    margin-bottom: 0.75rem;
}

.mobile-categories-toggle i {
    transition: transform 0.2s ease;
}

.mobile-categories-toggle.is-open i {
    transform: rotate(180deg);
}

/* =========================
   highlights.tpl
   ========================= */
.highlights-card-size {
    height: 34.375rem;
    margin-bottom: 0.3125rem;
    margin-top: 0.3125rem;
    border: 0;
}

.highlights-img {
    height: 10.9375rem;
    overflow: hidden;
}

.detail-link-icon {
    font-size: var(--font_size_xlarge)
}

/* Slide Padding */
#neu-im-shop .neu-slide{
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
}

/* Card als Link */
#neu-im-shop .neu-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 0;
    color: inherit;
    margin: 0 0.625rem;
}

#neu-im-shop .neu-slide > .neu-card{
    width: 100%;
}

#neu-im-shop .neu-slide-cta{
    margin-top: 0.625rem;
    width: 100% !important;
    display: block !important;
    float: right;
}

/* Hover/Focus für Accessibility */
#neu-im-shop .neu-card:focus-visible {
    outline: 2px solid rgba(13,110,253,.6);
    outline-offset: 2px;
}

/* Bildbereich mit stabiler Höhe */
#neu-im-shop .neu-media {
    aspect-ratio: 4 / 3;
    width: 90%;
    overflow: hidden;
}

#neu-im-shop .neu-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* oder cover */
    display: block;
}

/* Body */
#neu-im-shop .neu-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0.75rem 0.875rem 0.875rem;
    flex: 1 1 auto;
    min-height: 0;
}

/* Titel */
#neu-im-shop .neu-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
    font-weight: var(--font_weight-bold);
}

/* Beschreibung: clamp */
#neu-im-shop .neu-desc {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; /* default */
    overflow: hidden;
    font-weight: var(--font_weight-normal);
}

/* Icons */
#neu-im-shop .neu-icons {
    min-height: 1.375rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

#neu-im-shop .neu-icons--empty { visibility: hidden; }

#neu-im-shop .neu-icon,
#neu-im-shop .neu-flag {
    height: 1.125rem;
    width: auto;
    display: block;
}

/* Meta */
#neu-im-shop .neu-meta {
    font-size: 0.85rem;
    line-height: 1.3;
    font-weight: var(--font_weight-normal);
}

#neu-im-shop .splide {
    padding-left: 3rem;
    padding-right: 3rem;
}

#neu-im-shop .splide__arrow {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--color_bg);
    border: 0.06rem solid var(--color_border_inverse);
    opacity: 1;
}

#neu-im-shop .splide__arrow--prev {
    left: 0;
}

#neu-im-shop .splide__arrow--next {
    right: 0;
}

#neu-im-shop .splide__arrow svg {
    fill: var(--color_primary);
    width: 1rem;
    height: 1rem;
}

#neu-im-shop .splide__track {
    overflow: hidden;
}


@media (max-width: 768px) {
    #neu-im-shop .neu-desc { -webkit-line-clamp: 5; }
}

@media (max-width: 480px) {
    #neu-im-shop .neu-desc { -webkit-line-clamp: 4; }
}

.notice-box {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    background-color: var(--ci_soft_cyan);
    color: var(--color_text);
    font-weight: var(--font_weight-semi-bold);

    border: 1px solid var(--color_border);
    border-radius: 0.9rem;
}

.notice-box a {
    color: var(--color_secondary);
    font-size: var(--font_weight-bold);
}

.notice-box a:hover {
    color: var(--color_primary_hover);
    font-size: var(--font_weight-bold);
}

.icon_folder {
    color: var(--color_primary);
    font-size: var(--font_size_xxlarge);
    float: right;
}