body {
    background-color: #fff;
}

h1 {
    margin-top: 25px;
}

table {
    border-collapse: separate !important;
    border-spacing: 2px;
}

@media (max-width: 575.98px) {
    .hidden-xs-down {
        display: none !important
    }
}

@media (max-width: 767.98px) {
    .hidden-sm-down {
        display: none !important
    }
}

@media (max-width: 991.98px) {
    .hidden-md-down {
        display: none !important
    }
}

@media (max-width: 1199.98px) {
    .hidden-lg-down {
        display: none !important
    }
}

.hidden-xl-down {
    display: none !important
}

.pull-xs-left {
    float: left !important
}

.pull-xs-right {
    float: right !important
}

.hidden-xs-up {
    display: none !important
}

@media (min-width: 576px) {
    .pull-sm-left {
        float: left !important
    }

    .pull-sm-right {
        float: right !important
    }

    .hidden-sm-up {
        display: none !important
    }
}

@media (min-width: 768px) {
    .pull-md-left {
        float: left !important
    }

    .pull-md-right {
        float: right !important
    }

    .hidden-md-up {
        display: none !important
    }
}

@media (min-width: 992px) {
    .pull-lg-left {
        float: left !important
    }

    .pull-lg-right {
        float: right !important
    }

    .hidden-lg-up {
        display: none !important
    }
}

@media (min-width: 1200px) {
    .pull-xl-left {
        float: left !important
    }

    .pull-xl-right {
        float: right !important
    }

    .hidden-xl-up {
        display: none !important
    }
}


.single .title, .page-singleitem .title {
    font-size: 24.5px;
    font-weight: bold;
    line-height: 30px;
}

.margin-top-1 {
    margin-top: 12px;
}

.itemDefList {
    margin-bottom: 5px;
}

.itemDefList dd {
    margin-bottom: 0;
}

.input-unit label {
    position: relative;
    font-weight: bold;
    color: #290000;
    text-shadow: none;
    font-size: 14px;
    /*padding-top: 0;*/
}

.variation-select .input-unit {
    border: 0;
    border-radius: 0;
    margin-bottom: 5px;
}

.variation-select .input-unit .custom-select {
    padding: 6px 8px;
    border: 1px solid #ccc;
    color: #290000;
    font-size: 14px;
    background-position: calc(100% - 1rem);
}


.btn.btn-block > .fa {
    float: none;
}

.qty-box .qty-btn-container, .qty-box .qty-btn-container .qty-btn:not(.disabled):hover {
    background: transparent;
}

.single .vat, .page-singleitem .vat {
    color: #290000 !important;
}

.qty-box {
    border: 1px solid #dcdbd8;
    border-radius: 4px;
    overflow: hidden;
}

.qty-box .qty-input, .qty-box .qty-btn-container {
    border: 0;
}

.qty-box .qty-btn-container {
    width: 30px;
}

/* +/- Buttons fuellen die Spalte und bleiben in der Box. Ceres-Markup nutzt
   inzwischen <i class="fa fa-plus|fa-minus"> statt .qty-sign - die alte
   .qty-sign-Regel war damit wirkungslos und die .btn-Buttons (28px) liefen
   ueber die 15px-Spalte hinaus. Trennlinie zum Eingabefeld und zwischen den
   beiden Buttons. */
.qty-box .qty-btn-container .qty-btn {
    width: 100%;
    min-width: 0;
    border: 0;
    border-left: 1px solid #dcdbd8;
    border-radius: 0;
}

.qty-box .qty-btn-container .qty-btn:first-child {
    border-bottom: 1px solid #dcdbd8;
}

.single .producer, .page-singleitem .producer {
    display: block;
    text-align: center;
}

.form-control.price {
    height: 38px;
}

@media (max-width: 991px) {
    #vue-app.open-hover .asidePanel, .asidePanel2.open {
        left: 0;
        width: 100%;
        background-color: #ffffff;
    }

    .asidePanel2.open > div > div {
        padding: 1rem 30px;
    }
}

/*@media (max-width: 991px) and (min-width: 768px) {*/
/*    #logo-footer {*/
/*        width: 100%;*/
/*    }*/
/*}*/

.basket-header button {
    margin-top: 15px;
}

#filter-button {
    display: none;
}

.mobile_filter {
    display: block;
}

@media (max-width: 991px) {
    .page-category-item #filter-button, .page-search #filter-button {
        display: block;
        color: #ccc;
        width: 70px;
    }

    .mobile_filter {
        display: none;
    }

    .list-controls .selected-filters {
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;
    }
}

@media (min-width: 767.98px) {
    #close-filter {
        display: none;
    }
}

.owl-item img, .owl-thumbs .owl-thumb {
    border: 1px solid #ddd;
}

@media (min-width: 991px) {
    .search-mobile {
        display: none;
    }
}

#filter-trigger-click, #filter-trigger-price {
    display: none;
}

/**
FIX FOR BOOTSTRAP - SAFARI
*/
.row:before, .row:after {
    display: inline-block !important;
}

@media (max-width: 410px) {
    .navbar-brand {
        margin-right: 45px;
    }
}

.category-description-mobile {
    display: none;
}

@media (max-width: 991px) {
    .category-description-mobile {
        display: block;
    }
}

/*#vue-app {*/
/*    margin-top: 0!important;*/
/*}*/
@media (max-width: 767px) {
    .h-xs-5 {
        height: 120px;
    }
}


@media (max-width: 992px) {
    .mainNavigation {
        background: #1d1d1d !important;
    }

    .mainNavigation ul {
        color: #cccccc;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 14px;
    }

    .mainNavigation ul li:hover {
        background: #2c2c2c;
        color: #cccccc !important
    }

    .mainNavigation ul li ul {
        background: #1d1d1d !important;
        color: #cccccc
    }

    .mainNavigation li:hover .dropdown-menu a {
        color: #cccccc !important;
    }

    .mainNavigation li:hover .active a, .mainNavigation li:hover .open a {
        color: #cccccc !important;
    }
}

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

.heym_service li:before {
    content: "  ✔  ";
}

.ts-name {
    max-height: 60px;
    min-height: 60px;
    overflow: hidden;
    line-height: 1.3em;
    text-align: left;
    font-size: 80%;
}

/*@media (min-width: 320px){*/
/*	.h-xs-5 {*/
/*		height: 108px;*/
/*	}*/
/*}*/
@media (min-width: 320px) {
    .h-xs-5 {
        height: 250px;
    }
}

@media (min-width: 375px) {
    .h-xs-5 {
        /*height: 136px;*/
        height: 250px;
    }
}

@media (min-width: 425px) {
    .h-xs-5 {
        /*height: 161px;*/
        height: 250px;
    }

    .ts-name {
        font-size: 12.4px;
    }
}

@media (min-width: 768px) {
    .h-xs-5 {
        height: 204px;
    }

    .ts-name {
        font-size: 13.3px;
    }
}

@media (min-width: 1024px) {
    .h-xs-5 {
        height: 193px;
    }

    .ts-name {
        font-size: 12.6px;
    }
}

@media (min-width: 1440px) {
    .h-xs-5 {
        height: 243px;
    }

    .ts-name {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .price.bold {
        font-size: 85%;
        white-space: nowrap;
        /*margin-top: 10px;*/
    }
}

.dropdown.isLogin {
    z-index: 1079;
}

.item-filter-price .input-group > .form-control:not(:first-child) {
    padding: 0 10px;
}

.item-filter-price .input-group > .input-group-prepend > .input-group-text {
    padding: 0 5px;
    font-size: 10px;
}

.list-group-item {
    padding: 5px 10px;
}

body.page-singleitem .variation-select > .input-unit {
    flex-direction: row-reverse;
}

.cmp-product-thumb .thumb-image {
    margin-top: 10px;
}

@media (max-width: 575.98px) {
    .cmp-product-thumb .thumb-image {
        width: 100%;
    }

    .cmp-product-thumb .thumb-content {
        width: 100%;
    }
}

.navbar .nav .caret {
    display: none;
    margin-top: 8px;
    margin-left: 6px;
    margin-right: -6px;
}

ul.pagination.widget-alignment {
    background: #FFFFFF;
}

.cmp-product-thumb .special-tags {
    z-index: 99;
}


.itemBoxInner a, .price, h1, h2, h3, h4, h5, h6, p.bold, p.h4 {
    font-size: 18px;
}

.cmp-product-thumb .crossprice {
    font-weight: 200;
    color: #000000;
    font-size: 90%;
}


/* badget */
.cmp-product-thumb .special-tags .badge {
    font-weight: bold;
    font-size: 16px;
    color: #000;
    background-color: transparent;
    box-shadow: none;
    /* Bootstrap-Default-Padding (~28px seitlich) staucht das Badge nicht in
       die Ecke -> auf knappes Padding zwingen, damit "Neu"/"-50%" buendig
       in der oberen rechten Ecke sitzt. */
    padding: 2px 6px;
}

.add-to-basket-lg-container.d-none.d-lg-block {
    display: none !important;
}

article.cmp.cmp-product-thumb {
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
}

.owl-item img, .owl-thumbs .owl-thumb {
    border: 0px solid #ddd;
}

.widget-items-per-page, .widget-item-sorting {
    border: 1px solid rgba(0, 0, 0, 0.25);
}

.Item-Name > div > h1 > span {
    font-size: 24.5px;
    font-weight: bold;
}

.payment-methods {
    margin-top: 16px;
}

.widget-inner {
    padding: 0 0px 0 0px !important;
}

.Item-Name > .widget-inner {
    padding: 0 0px 0 0px !important;
}

.groessentabelle a {
    font-weight: bold;
    color: #690100 !important;
    background-color: transparent !important;
    border-color: transparent !important;
    text-decoration: none;
    background: transparent;
}

.price.h1 {
    font-weight: normal;
    font-size: 300% !important;
    text-align: left;
}

.crossprice {
    margin: 5px 0;
    font-size: 150%;
}

.CrossSellingTitle {
    color: #000;
    font-size: 19px;
    font-weight: bold;
    line-height: 26px;
}

.bg-white .price {
    color: #690100;
    font-size: 19px;
    font-weight: normal;
}
.bg-white-important,
.bg-white-important > nav {
    background: #FFFFFF !important;
}
.widget-primary .bg-appearance {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-size: 1.5rem;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.1;

}

.widget-item-list .widget-caption {
    padding: .25rem 0rem;
}

.small {
    /*font-size: 11px !important;*/
    font-weight: 400 !important;
}

.vat.small.text-muted {
    font-size: 11px !important;
    font-weight: 400 !important;
}

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

.heym_service li:before {
    content: "  ✔  ";
}

.price {
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    color: #290000 !important;
    font-size: 17.5px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}

.xx-large {
    font-size: 300% !important;
    margin-bottom: 10px;
}

.large {
    font-size: 125%;
}


@media (max-width: 991px) {
    .dropdown.enable-xs-sm.isLogin .dropdown-menu {
        left: 0px;
        right: 0px;
    }

    .dropdown.enable-xs-sm .dropdown-menu {
        min-width: 320px
    }
}

.mobile_filter.open {
    display: block !important;
}

.filter-m {
    display: none;
}

.visible {
    display: block;
}


.single .vat, .page-singleitem .vat {
    color: #6c757d !important;
}

.single .vat, .page-singleitem .vat a {
    color: #6c757d !important;
}

.page-singleitem .vat, .single .vat {
    line-height: 1.2;
}

.widget.widget-sticky.sticky-element {
    padding: 15px;
}

.meta-container > .w-100 > .text-muted {
    color: #000 !important;
}

.navbar .nav .caret {
    display: none;
}

.owl-item.active {
    transform: scale(0.96);
    border: 1px solid #ddd;

}

.single-carousel .owl-item img {
    height: 99%;
}

.navbar > .container-max > .row {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

footer {
    margin-top: 5px;
    padding: 12px 0 36px;
    border-top: 1px solid #ddd;
    color: #999
}

footer a, footer a:focus, footer a:hover {
    color: inherit
}

footer strong {
    font-weight: 400;
    text-transform: uppercase;
    color: #444;
    text-rendering: optimizelegibility
}

footer hr {
    margin: 10px 0
}

nav, footer, .headerbox {
    background: url(https://cdn02.plentymarkets.com/exzqv94qs88q/frontend/layout/tweed.jpg) repeat-x;
    color: #fff !important;
}

footer {
    background-repeat: repeat;
}

.payment-ico {
    list-style: none;
    padding: 0
}

.payment-ico li a img {
    height: 60px;
    padding: 5px
}

ul.footerList {
    padding-left: 0;
    list-style: none;
}

.margin-top-2 {
    margin-top: 24px;
}

.margin-bottom-2 {
    margin-bottom: 24px;
}

.btn.btn-primary.btn-appearance.mobile-width-button {
    display: none;
}

.navbar-brand img {
    max-height: 7rem;
    margin-top: 10px;
}

.main-navbar-collapsable.d-none.d-lg-block {
    background: #690100;
    color: #fff !important;
    width: 100%;
}

.main-navbar-collapsable .ddown > a::after {
    content: "";
}

.CrossSellingTitle {
    color: black !important;
}

.mainmenu {
    float: left;
}

.cat-header {
    font-size: 24px;
    margin: 25px -15px 15px;
}

button.navbar-toggler.d-lg-none.p-3 {
    margin: 3% 15px;
    border: 1px solid white;
    border-radius: 3px;
    color: white;
    height: 58px;
    font-size: 29px;
    line-height: 0px;
}

.mainmenu:first-child::before {
    background-image: url(https://cdn02.plentymarkets.com/exzqv94qs88q/frontend/layout/m_1_.png);
    background-size: 26px;
    background-repeat: no-repeat;
    content: "";
    width: 43px;
    height: 43px;
    background-position: 8px;
}

.line-through {
    text-decoration: line-through
}

.cmp-product-thumb .thumb-title {
    min-height: 42px;
    font-size: 1rem !important;
    padding: 6px 0;
    text-align: left;
    color: #000000;
}

.cmp-product-thumb .special-tags {
    position: absolute;
    top: 0;
    right: 0;
    left: 72%;
    z-index: 10;
    text-align: right;
}

@media (min-width: 992px) {
    .main-navbar-collapsable .mainmenu > li > a {
        z-index: 1005;
        float: none;
        padding: 10px 14px 9px;
        border-width: 1px;
        border-style: none solid;
        border-color: white;
        color: #fff;
        text-decoration: none;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        font-size: 16px;
    }

    article.cmp.cmp-product-thumb {
        padding: 4px;
    }

}

@media (max-width: 991px) {
    .page-category-item #close-filter, .page-search #close-filter {
        color: #690100;
        width: 100%;
        font-size: 16px;
        font-weight: 400;
    }

    .page-category-item #filter-button, .page-search #filter-button {
        color: #999;
        width: 100%;
        font-size: 16px;
        font-weight: 540;
    }

    .navbar-brand img {
        max-height: 7rem;
        margin-left: 15px;
    }

    .vat.small.text-muted {
        margin-top: -20px;
    }
}

@media (max-width: 570px) {

    .navbar-brand img {
        max-height: 7rem;
        margin-top: 10px;
        width: 100%;
    }
}

.info-page {
    color: #290000;
    text-align: justify;
}

.info-page a {
    text-decoration: underline;
}

.info-page h1 {
    font-size: 26.5px;
    font-weight: bold;
    text-transform: uppercase;
}

.info-page h2 {
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
}

.info-page h3 {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

.info-page h4 {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

.info-page-header {
    text-transform: uppercase;
    text-align: center;
    border-bottom: 1px solid #292929;
    padding-bottom: 10px;
    margin-top: 20px;
}

.info-page-link {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    margin: 5px;
}

.info-page-button {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    color: #000000;
    text-align: center;
    width: 100%;
    border: 2px solid #000000;
    padding: 12px;
    text-decoration: none;
    display: inline-block;
}

.info-page-button a {
    text-decoration: none;
}

.info-page-button:hover {
    color: #ffffff;
    background-color: #690100;
    border: 2px solid #690100;
    text-decoration: none;
}

.info-page-link-box {
    color: #000000;
    text-align: center;
    width: 100%;
    border: 2px solid #000000;
    padding: 7px;
    text-decoration: none;
}

.info-page-link-box a {
    text-decoration: none;
}

.info-page-link-box:hover {
    color: #ffffff;
    background-color: #690100;
    border: 2px solid #690100;
}

.osano-cm-window > div {
    border: 1px solid;
}

.footer a {
    color: #ffffff !important;
}

.opacity-0 {
    opacity: 0;
}

.list-controls .selected-filters .selected-filter.reset-all {
    color: #fff !important;
    background-color: #690100 !important;
}

.widget-selected-filter {
    padding-top: 15px;
}

.list-controls .selected-filters {
    float: none !important;
    margin-bottom: 10px;
}

.form-check-label {
    width: 100%;
}

.column-wrap > div > .card .filter-badge {
    float: right;
}

.badge {
    padding: .25em 1.6em;
}

.cmp-product-thumb .prices {
    justify-content: center;
}

.cmp-product-thumb .price {
    -webkit-box-flex: 1;
    text-align: center;
    align-self: flex-end;
}

.cmp-product-thumb .price-view-port {
    flex: unset;
    align-self: end;
}
.cmp-product-thumb .thumb-content {
    padding: 0.2rem 0.4rem 0.1rem 0.4rem;
}
@media (max-width: 1150px) {
    .column-wrap .card {
        width: 50% !important;
    }

    .badge {
        padding: .25em 1em;
    }
}

@media (max-width: 767px) {
    .column-wrap .card {
        width: 100% !important;
    }
}

.cmp-product-thumb .price-view-port {
    margin: 0 0 0 5px;
}

@media (max-width: 575px) {

    .widget-item-grid .col-6 .prices {
        flex-flow: row;
    }

    .cmp-product-thumb .thumb-title {
        min-height: 42px;
    }
}


@media (max-width: 480px) {
    .badge {
        padding: 0.0em 0.9em;
    }

    .cmp-product-thumb .special-tags . {
        font-size: 18px;
    }

    .cmp-product-thumb .special-tags {
        left: 55%;
    }
}

@media (max-width: 380px) {
    .badge {
        padding: 0.0em 0.5em;
    }
}

.img-fluid {
    /*max-width: 100%;*/
    height: auto;
    width: 100%;
}

.widget {
    margin-bottom: 0rem;
}

.megamenu .collapse li {
    padding: .1px .5em;
}

.cmp-product-thumb:hover .img-fluid {
    -webkit-transform: scale(1.00);
    transform: scale(1.00);
}

.widget-item-grid .product-list > .col-6:nth-child(odd), .widget-item-grid .product-list > .col-6:nth-child(even) {
    padding: 0px !important;
}
article.cmp.cmp-product-thumb {
    border: 0.1px solid #ddd;
    background-color: #fff;
    padding: 5px;
    margin-bottom: 10px;
    border-image: linear-gradient(0.17turn, #9999991c, #fff) 1 1%;
}

.cmp-product-thumb .thumb-title {
    text-align: center;
}

ul.pagination.widget-alignment {
    margin-top: 10px;
}

.brand-wrapper{
    justify-content: space-between;
}
/*@media (min-width: 1024px) {*/
/*    #vue-app{*/
/*        margin-top: 200px !important;*/
/*    }*/
/*}*/
#page-body{
	min-height : 57.4vh;
}


.float-middle{
    align-items     : center;
    display         : flex;
    font-size       : 1.4rem;
    justify-content : center;
    margin          : 0 auto;
    width           : 0;
}
.float-middle nav{
    background: 0;
}


/* =====================================================================
   Widerrufsseite (category-502) — Sauberes Formular-Design
   ===================================================================== */

/* widget-code-Container einblenden — er enthält die Seiten-Überschrift
   (<h1 class="print-header">Widerrufsformular</h1>). Ceres setzt
   .widget-none default-mäßig auf display:none; hier überschreiben wir
   das gezielt für die Widerrufsseite. */
body.category-502 .widget.widget-code.widget-none {
    display: block;
}

/* H1 — schlicht */
body.category-502 h1 {
    font-size: 20px;
    font-weight: 600;
    color: #290000;
    margin: 0;
    padding: 20px 0 0 0;
}

/* Rechtstexte */
body.category-502 .widget.widget-legal-texts {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

body.category-502 .widget.widget-legal-texts .widget-inner {
    background: transparent !important;
    padding: 0;
}

body.category-502 .widget.widget-legal-texts h2 {
    font-size: 15px;
    font-weight: 600;
    color: #290000;
    margin: 18px 0 8px 0;
}

body.category-502 .widget.widget-legal-texts h3 {
    font-size: 14px;
    font-weight: 600;
    color: #290000;
    margin: 14px 0 6px 0;
}

body.category-502 .widget.widget-legal-texts p,
body.category-502 .widget.widget-legal-texts li {
    font-size: 13px;
    line-height: 1.6;
    color: #444;
}

body.category-502 .widget.widget-legal-texts ul,
body.category-502 .widget.widget-legal-texts ol {
    padding-left: 1rem;
    margin: 6px 0 12px 0;
}

body.category-502 .widget.widget-legal-texts li {
    margin-bottom: 2px;
}

body.category-502 .widget.widget-legal-texts a {
    color: #690100;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Formular-Bereich */
body.category-502 .widget.widget-contact-form {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 20px 0 32px 0;
}

body.category-502 .widget.widget-contact-form .widget-inner {
    background: transparent !important;
    padding: 0;
}

/* Formular-Layout — wie Login, mit offset-spanning */
body.category-502 form[data-form-type="contract-withdrawal"] {
    display: block;
    padding: 0 15px;
    max-width: 100%;
}

body.category-502 form[data-form-type="contract-withdrawal"] .col-12,
body.category-502 form[data-form-type="contract-withdrawal"] .cmp-contact {
    padding: 0;
    width: 100%;
    max-width: 100%;
    flex: none;
}

/* Inputs/Labels: kein Override mehr — das Widerrufsformular erbt das
   Ceres-Standard-Floating-Label-Pattern (3px-Border, padding-top für
   schwebendes Label, .input-unit label fett/UPPERCASE in #290000),
   identisch zum Login-Modal. Nur textarea braucht eine Mindesthöhe,
   damit der Widerrufsgrund nicht einzeilig wirkt. */
body.category-502 .widget.widget-contact-form .widget.widget-text-input,
body.category-502 .widget.widget-contact-form .widget.widget-mail-input,
body.category-502 .widget.widget-contact-form .widget.widget-textarea-input {
    margin-bottom: 12px;
}

body.category-502 .widget.widget-contact-form textarea {
    min-height: 110px;
    resize: vertical;
}

/* Honeypot verstecken */
body.category-502 .widget.widget-contact-form input[name="username"] {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Submit-Button — wie Login, nicht vollbreit */
body.category-502 .widget.widget-contact-form .btn,
body.category-502 .widget.widget-contact-form button[type="submit"] {
    display: inline-block;
    background: #690100;
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: 0;
    font-weight: 500;
    font-size: 14px;
    margin-top: 12px;
    transition: background-color 0.2s ease;
}

body.category-502 .widget.widget-contact-form .btn:hover,
body.category-502 .widget.widget-contact-form button[type="submit"]:hover {
    background: #4f0100;
    color: #fff;
}

/* Responsive */
@media (max-width: 640px) {
    body.category-502 h1 {
        font-size: 18px;
    }
    body.category-502 form[data-form-type="contract-withdrawal"] {
        max-width: 100%;
    }
}
/* === Ende Widerrufsseite ============================================= */

/* =====================================================================
   Breadcrumbs — weiße Leiste im Content, gleich breit wie roter Nav
   ---------------------------------------------------------------------
   Die rote Hauptnavigation (.main-navbar-collapsable, #690100) sitzt
   innerhalb von .container-max (1200px) bei x=191, Breite 1170px.
   Die Breadcrumb wird als eigenständige weiße Leiste unterhalb des
   Headers gerendert: identische Box-Geometrie wie der rote Nav-Block.
   - Wrapper transparent (Ceres-Default-Background bg-white-important
     wird neutralisiert), kein Wrapper-Margin.
   - Innere <ul class="breadcrumb"> wird weiß, max-width 1170px,
     mx-auto → pixelgenau unter der roten Nav-Leiste.
   ===================================================================== */
.breadcrumbs {
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0;
    border: 0;
    /* Ceres macht die Breadcrumb per Full-Bleed-Breakout viewport-breit:
       width:100vw + left:calc(-50vw + 50%). BEIDE Teile muessen neutralisiert
       werden, sonst sitzt die Leiste zwar 1170px breit, wird aber durch das
       left-Offset an den linken Viewport-Rand gezogen (nicht buendig unter
       Nav/Ueberschrift). width allein reichte nicht - left fehlte. */
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
}

.breadcrumbs > nav {
    padding: 0;
}

.breadcrumbs .breadcrumb {
    background-color: #fff;
    max-width: 1170px;
    margin: 10px auto 0;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 0;
}

/* Breadcrumb-Text buendig zur Ueberschrift/Nav: am Desktop das linke
   Innen-Padding der <ul> auf 0 zwingen. Eine spaeter geladene Ceres-/
   ShopBuilder-Regel setzt padding-left auf 1rem (=14px) und schlaegt das
   obige "padding:6px 0" - daher !important. Desktop-scoped (min-width:1200),
   damit die Tablet/Mobile-Media-Queries unten ihr bewusstes Rand-Padding
   behalten. */
@media (min-width: 1200px) {
    .breadcrumbs .breadcrumb {
        padding-left: 0 !important;
    }
}

.breadcrumbs .breadcrumb-item,
.breadcrumbs .breadcrumb-item a {
    color: #6c757d;
    text-decoration: none;
}

.breadcrumbs .breadcrumb-item a:hover {
    color: #690100;
    text-decoration: underline;
}

.breadcrumbs .breadcrumb-item.active {
    color: #212529;
    font-weight: 500;
}

.breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    color: #adb5bd;
    padding: 0 8px 0 0;
    content: "/";
}

.breadcrumbs .breadcrumb-home {
    margin-left: 4px;
}

/* Erstes Element nur "Startseite" statt "Zur Startseite gehen" zeigen.
   Original-Text per font-size:0 ausblenden, Kurztext via ::after einsetzen
   (aria-label am <a> bleibt fuer Screenreader erhalten). */
.breadcrumbs .breadcrumb-home {
    font-size: 0;
}

.breadcrumbs .breadcrumb-home::after {
    content: "Startseite";
    font-size: 12px;
}

/* Unter 1200px Viewport: max-width nicht mehr greifbar — innen padding
   übernehmen, damit der Text nicht am Rand klebt. */
@media (max-width: 1199px) {
    .breadcrumbs .breadcrumb {
        max-width: 100%;
        padding: 8px 15px;
    }
}

@media (max-width: 767px) {
    .breadcrumbs .breadcrumb {
        font-size: 11px;
        padding: 6px 12px;
    }
}
/* Kein Haus-Icon vorne — nur Text ("Startseite"). */
.breadcrumbs .breadcrumb .fa-home,
.breadcrumbs .breadcrumb-home .fa-home {
    display: none;
}

/* Sticky-Header neutralisieren -> Breadcrumb "rutscht" beim Scrollen nicht
   mehr rein, sondern scrollt ruhig als Teil des Headers mit.
   Mechanik (live gemessen): Ceres' HeaderScroller macht #page-header nach dem
   ersten Scroll position:fixed und positioniert ALLE Header-Widgets per JS neu
   (inline position:absolute; top = Ruheoffset - scrollY, pro Frame via
   requestAnimationFrame). Top-Bar, Nav UND Breadcrumb stehen hier alle auf
   "nicht fixiert" -> es bleibt nichts kleben, der Mechanismus bewegt sie nur.
   Dadurch erscheint die kontrastreiche weisse Breadcrumb-Leiste (top:176px,
   unterstes Element) beim Scrollen kurz als isoliertes Band -> das "Reinrutschen".
   Da kein Widget fixiert ist, hat der fixed-Header keinen Nutzen, nur diesen
   Nebeneffekt. Fix: #page-header aus fixed in den Fluss zwingen (position:static),
   die Widgets aus dem JS-absolute zurueck auf ihren Default position:relative,
   das JS-top per top:auto wirkungslos machen, und den vom JS auf #vue-app
   gesetzten Header-Versatz herausnehmen. Ergebnis: kompletter Header scrollt als
   Block mit der Seite, Optik in Ruhe identisch.
   WICHTIG - nur position + top anfassen, NIEMALS left/right/z-index:
   .header-fw macht die Vollbreite ueber
   `position:relative; left:calc(-1*(100vw - 100%)/2) !important; width:100vw`.
   Deshalb MUSS position relative bleiben (static macht das left wirkungslos) und
   left/right duerfen NICHT ueberschrieben werden - sonst kippt das Full-Bleed:
   Top-Bar/Nav verlieren die Vollbreite und der Header rutscht nach rechts (auf
   breiten Viewports drastisch). Die Breadcrumb bekommt ihr left separat
   (zentriert) aus der .breadcrumbs-Regel oben - auch deshalb hier kein left/right.
   Desktop/Tablet-scoped (>=768px); mobil ist die Breadcrumb ohnehin aus. */
@media (min-width: 768px) {
    #page-header.fixed-top {
        position: static !important;
    }
    #page-header-parent > .header-fw {
        position: relative !important;
        top: auto !important;
    }
    #vue-app {
        margin-top: 0 !important;
    }
}

/* Nur auf Kategorie- und Artikelseiten anzeigen. Default aus; auf
   page-category (inkl. Suche) und page-singleitem an; die Home-Kategorie
   (page-home-category) bleibt aus. */
.breadcrumbs {
    display: none;
}
body.page-category .breadcrumbs,
body.page-singleitem .breadcrumbs {
    display: block;
}
body.page-home-category .breadcrumbs,
body.category-home .breadcrumbs {
    display: none;
}

/* Auf Smartphone komplett ausblenden. */
@media (max-width: 767px) {
    .breadcrumbs {
        display: none !important;
    }
}
/* === Ende Breadcrumbs ================================================ */

/* =====================================================================
   Artikelseite — Mengenwähler + "In den Warenkorb" nicht überschneiden
   ---------------------------------------------------------------------
   .add-to-basket-container ist flex/nowrap; der Button (.btn-block,
   width:100%) lief je nach Breite über die Menge. Button auf width:auto
   + shrinkbar, Abstand über gap statt margin-right an der Menge.
   ===================================================================== */
.add-to-basket-container {
    gap: 15px;
}

.add-to-basket-container > .quantity-input-container {
    margin-right: 0;
    flex: 0 0 auto;
}

.add-to-basket-container > .btn {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}
/* === Ende Warenkorb-Zeile =========================================== */

/* =====================================================================
   Such-Ergebnis-Überschrift an die Kategorie-Überschrift angleichen
   ---------------------------------------------------------------------
   Kategorie nutzt .cat-header (28px / bold 700); die Suchergebnisseite
   rendert nur das Ceres-Default h1.h2 (25px / 500) -> wirkt kleiner und
   inkonsistent. Auf der Suchseite an die Kategorie-Optik angleichen.
   ===================================================================== */
body.page-search h1.h2 {
    font-size: 28px;
    font-weight: 700;
}
/* === Ende Such-Überschrift ========================================== */


/* =====================================================================
   Mobile-Navigation: leere Breadcrumb-Listen im Desktop ausblenden
   ---------------------------------------------------------------------
   Ceres rendert fuer das mobile Slide-Menue eigene <ul class="breadcrumb">
   in .mobile-navigation. Im Desktop liegen sie leer (bis 57px hoch) als
   weisser Block im Sichtbereich ("Breadcrumb leer", 2026-06-11).
   ===================================================================== */
@media (min-width: 992px) {
    /* ul-Selektor + !important: Ceres' .mobile-navigation ul.breadcrumb
       (display:flex) gewinnt sonst die Spezifitaet. */
    .mobile-navigation ul.breadcrumb {
        display: none !important;
    }
}