/*  
    Layout Klassen 
    die folgenden Regeln definieren den allgemeinen Aufbau der Seite. 
    Komponentenspezifische Regeln werden in den Portlets definiert.
*/
body.startseite h2 {
    font-size: 45px !important;
}

/* Trennlinie immer mit strich */
.herztrenner-container hr {
    width: 100% !important;
    border-top: 1px solid var(--divider);
}

section.rezensionen-container div.custom-rezensionen-wrapper {
    padding: 50px 0px 0px 0px;
}

section.rezensionen-container div.custom-rezensionen-wrapper .custom-rezensionen-slider {
    margin: 0px !important;
}

.container,
.container-fluid,
.breadcrumb-container {
    max-width: var(--container-width)!important;
    width: 100%!important;
}

#content {
    padding-bottom: 0;
}

section {
    width: 100%;
}

figure,
section {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

main {
    padding: 0 0 4rem 0;
}

main section {
    padding: 0 0 4rem 0;
}

.flex {
    display: flex !important;
}

.pull-right {
    float: right !important
}

.pull-left {
    float: left !important
}

.hide {
    display: none !important
}

.show {
    display: block !important
}

.invisible {
    visibility: hidden
}

.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0
}

.hidden {
    display: none !important;
    visibility: hidden !important
}

.affix {
    position: fixed
}

@-ms-viewport {
    width: device-width
}

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
    display: none !important
}

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
    display: none !important
}

.visible-print-inline {
    display: none !important
}

.visible-print-inline-block {
    display: none !important
}

.visible-print {
    display: none !important
}

.visible-print-block {
    display: none !important
}

@media (max-width: 767px) {
    .visible-xs {
        display: block !important
    }
    table.visible-xs {
        display: table
    }
    tr.visible-xs {
        display: table-row !important
    }
    th.visible-xs,
    td.visible-xs {
        display: table-cell !important
    }
    figure,
    section {
        margin: 0;
        padding-top: 0!important;
        padding-bottom: 0!important;
    }
    .visible-xs-inline-block {
        display: inline-block !important
    }
    .visible-xs-inline {
        display: inline !important
    }
    .visible-xs-block {
        display: block !important
    }
    .hidden-xs {
        display: none !important
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm {
        display: block !important
    }
    table.visible-sm {
        display: table
    }
    tr.visible-sm {
        display: table-row !important
    }
    th.visible-sm,
    td.visible-sm {
        display: table-cell !important
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-block {
        display: block !important
    }
    .visible-sm-inline {
        display: inline !important
    }
    .visible-sm-inline-block {
        display: inline-block !important
    }
    .hidden-sm {
        display: none !important
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md {
        display: block !important
    }
    table.visible-md {
        display: table
    }
    tr.visible-md {
        display: table-row !important
    }
    th.visible-md,
    td.visible-md {
        display: table-cell !important
    }
    .visible-md-inline-block {
        display: inline-block !important
    }
    .visible-md-block {
        display: block !important
    }
    .visible-md-inline {
        display: inline !important
    }
    .hidden-md {
        display: none !important
    }
}

@media (min-width: 1200px) {
    .visible-lg {
        display: block !important
    }
    table.visible-lg {
        display: table
    }
    tr.visible-lg {
        display: table-row !important
    }
    th.visible-lg,
    td.visible-lg {
        display: table-cell !important
    }
    .visible-lg-inline {
        display: inline !important
    }
    .visible-lg-inline-block {
        display: inline-block !important
    }
    .visible-lg-block {
        display: block !important
    }
    .hidden-lg {
        display: none !important
    }
}

@media print {
    .visible-print-block {
        display: block !important
    }
    .visible-print {
        display: block !important
    }
    table.visible-print {
        display: table
    }
    tr.visible-print {
        display: table-row !important
    }
    th.visible-print,
    td.visible-print {
        display: table-cell !important
    }
    .visible-print-inline {
        display: inline !important
    }
    .hidden-print {
        display: none !important
    }
    .visible-print-inline-block {
        display: inline-block !important
    }
}


/* Modal START*/

.modal-shop .close_modal_shop_btn {
    position: absolute;
    right: -15px;
    top: -15px;
    cursor: pointer;
}

.modal-shop .close_modal_shop_btn .fa-circle {
    font-size: 22px;
    z-index: -1;
    top: 5px;
    color: var(--light);
}

.modal-shop .close_modal_shop_btn .fa-times-circle {
    font-size: 34px;
    color: var(--primary-color);
}

.modal-shop .modal-footer {
    border-top: 0;
}


/* Modal END*/


/* Buttons */


/* Buttons */

.opc-Button .btn {
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 500 !important;
}

.button,
.btn,
.button-invert,
.btn-primary {
    border-radius: 20px!important;
    display: inline-block;
    cursor: pointer;
    transition: color .4s ease-in-out, background-color .4s ease-in-out;
    font-weight: 900;
    transition: all ease .4s;
}

.button,
.button-invert:hover,
.btn-primary {
    padding: 10px 30px;
    text-decoration: none;
    border: 0;
    margin: 0px 0px;
}

.btn-primary,
.button {
    border: 2px solid var(--primary-color)!important;
}

.btn-outline-primary {
    border-color: var(--primary-color)!important;
    color: var(--primary-font-color)!important;
}

.btn-outline-primary:active,
.btn-outline-primary:focus {
    border-color: var(--primary-color)!important;
    background-color: var(--primary-alt-color)!important;
    color: var(--light)!important;
}

a.btn-primary:hover,
.btn-primary:hover * {
    color: var(--primary-font-color)!important;
}

.btn-secondary,
.btn-secondary .fas,
.btn-secondary .fa,
.btn-secondary .fa5,
.btn-secondary span,
.btn-secondary .fas::before,
.btn-secondary .fa::before,
.btn-secondary .fa5::before,
.btn-secondary span::before,
.btn-secondary .fas::after,
.btn-secondary .fa::after,
.btn-secondary .fa5::after,
.btn-secondary span::after {
    transition: all ease .4s;
    color: var(--primary-font-color)!important;
}

.btn-secondary {
    background-color: var(--secondary-color)!important;
    border-color: var(--secondary-color)!important;
}

.btn-secondary:hover {
    background-color: var(--primary-color)!important;
    border-color: var(--primary-color)!important;
}

.btn-secondary:hover,
.btn-secondary:hover .fas,
.btn-secondary:hover .fa,
.btn-secondary:hover .fa5,
.btn-secondary:hover span,
.btn-secondary:hover .fas::before,
.btn-secondary:hover .fa::before,
.btn-secondary:hover .fa5::before,
.btn-secondary:hover span::before,
.btn-secondary:hover .fas::after,
.btn-secondary:hover .fa::after,
.btn-secondary:hover .fa5::after,
.btn-secondary:hover span::after {
    color: var(--light)!important;
}

.button-invert,
.button:hover,
.btn-primary:hover,
.btn-primary:hover .fas,
.btn-primary:hover .fa5,
.btn-primary:hover .fa,
.btn-primary:hover .fa::before,
.btn-primary:hover .fas::before,
.btn-primary:hover .fa5::before,
.btn-primary:hover .fas::after,
.btn-primary:hover .fa5::after,
.btn-primary:hover .fa::after,
.btn-primary:hover span,
button.btn-primary:hover {
    text-decoration: none;
    color: var(--primary-font-color)!important;
}

.btn-primary {
    border: 2px solid var(--primary-color) !important;
}

.button:focus,
.btn-primary:focus {
    color: var(--light) !important;
    text-decoration: none;
}

.button-invert:focus {
    color: var(--secondary-color) !important;
    text-decoration: none;
}

.button-invert:hover {
    border: none !important;
}

.button {
    color: var(--light)!important;
    background-color: var(--primary-color)!important;
    font-weight: 900;
}

.button span {
    color: var(--light)!important;
    font-weight: 900;
}

.button span.fa,
.button span.fa5 {
    font-weight: 900
}

.button-invert:hover,
.btn-primary {
    color: var(--light)!important;
    background-color: var(--primary-color)!important;
    border-color: var(--primary-color)!important;
}

.btn-primary .fas,
.btn-primary .fa5,
.btn-primary .fa,
.btn-primary .fas::after,
.btn-primary .fa5::after,
.btn-primary .fa::after,
.btn-primary .fas::before,
.btn-primary .fa5::before,
.btn-primary .fa::before,
.btn-primary span {
    transition: color ease .4s;
    color: var(--light)!important;
}

.button-invert:hover span,
.btn-primary:hover span {
    color: var(--primary-font-color)!important;
}

.button:hover {
    color: var(--primary-font-color);
    background-color: var(--primary-btn-hover);
    border: 2px solid var(--primary-btn-hover) !important;
}

.ctm-toggle {
    color: #fff;
    margin-left: 15px;
    cursor: pointer;
}

.status.status-1,
.delivery-status.status-1 {
    color:#1C871E !important;
}

/*
.btn-outline-primary:hover {
    background-color: var(--primary-alt-color)!important;
    color: var(--light)!important;
}
*/

.btn-outline-primary-invert {
    background-color: var(--primary-alt-color)!important;
}

.btn-outline-primary-invert,
.btn-outline-primary-invert span {
    color: var(--light)!important;
}

.btn-outline-primary-invert:active,
.btn-outline-primary-invert:focus {
    border-color: var(--primary-color)!important;
}

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

.button-invert,
.btn-primary:hover {
    background-color: var(--primary-btn-hover)!important;
    color: var(--primary-font-color);
    border: 2px solid var(--primary-font-color) !important;
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:focus {
    background-color: var(--primary-btn-hover)!important;
    color: var(--primary-font-color) !important;
    border: 2px solid var(--primary-font-color) !important;
}

.alt-button {
    background-color: var(--grey-alt);
}

.alt-button:hover {
    background-color: var(--light);
    color: var(--grey-alt) !important;
    border: 2px solid var(--grey-alt);
}

#pushed-success .btn-primary .fa {
    color: var(--light);
}

#panel-submit-order .btn-link {
    border: 2px solid var(--secondary-color);
}

#panel-submit-order .btn-link span {
    color: var(--light)!important;
}

#panel-submit-order .btn-link:hover {
    color: var(--light) !important;
    background-color: var(--primary-color);
}

.submit-btn-newsletter.alt-button.btn.button {
    width: 30%;
    margin: 0 15px;
    height: 55px;
    border-radius: 30px;
    font-size: 18px;
}

.button-text {
    font-weight: bold;
    color: var(--light) !important;
    transition: color 0.3s ease-in-out;
}

.button:hover .button-text {
    color: var(--primary-font-color) !important;
}
.custom-btn-wrapper {
    width: 100%;
}
.custom-btn, .custom-btn-left{
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    color: white;
    background-color: var(--primary-color);
    box-shadow: 0px 3px 6px #00000029;
    margin: 0 auto;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    padding: 5px 25px;
}
.custom-btn-left{
    margin: 0;
}
.custom-btn:hover, .custom-btn-left:hover {
    background-color: transparent;
}

.form-error-msg {
    color: #b90000!important;
}

.cart-dropdown-buttons a.btn-primary:hover,
.cart-dropdown-buttons a.btn-primary:active {
    background: var(--secondary-color)!important;
    color: var(--primary-color)!important;
}


/* Page Layout  */

#productdetails-attributes .st0 {
    stroke: var(--primary-color);
    fill: var(--primary-color);
}

#productdetails-attributes .st1 {
    stroke: var(--primary-color);
}

.product-pagination.next,
.product-pagination.previous {
    display: none !important;
}

#search .form-control {
    border-radius: 17px;
}

.icon-fa,
.icon-fa-invert {
    --height-width: 30px;
    border: none;
    border-radius: 50% !important;
    margin-right: 2px;
    width: var(--height-width);
    height: var(--height-width);
    max-width: var(--height-width);
    max-height: var(--height-width);
}

.icon-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}

#search #search-submit-button .fa {
    color: var(--light);
}

.icon-fa {
    background-color: var(--primary-color);
    color: var(--light);
}

.icon-fa-invert {
    background-color: var(--light);
    color: var(--primary-color);
}

.icon-fa-border {
    border: 5px solid var(--light);
}

.icon-fa-border-invert {
    border: 5px solid var(--primary-color);
}

.row {
    margin-left: 0;
    margin-right: 0;
}

#single-blogpost-content p a:hover,
span>a:hover,
p>a:hover,
#open-privacy-modal:hover,
.news-more-link:hover {
    text-decoration: underline;
}

#homepage #content-wrapper .container-block>.row {
    padding-top: 0;
}

#homepage #content {
    margin-bottom: 0;
}

.blog-preview-container,
#home-categorie-teaser {
    width: 1250px;
    margin: 0 auto 100px auto;
}

#homepage #content-wrapper .container-block>.row {
    width: 100%;
}

#homepage #content,
#homepage #content-wrapper>.container {
    position: static;
}

#content-wrapper {
    position: relative;
}

#main-wrapper.fluid>#content-wrapper>.container {
    margin: 0;
    padding: 0;
}

#content-wrapper .container {
    width: auto;
}

#content-wrapper .container>.container-block>.row,
#content-wrapper .container>.container-block>.breadcrumb-wrapper>.row {
    margin: 0 auto;
}

#content-wrapper .container>.container-block>.breadcrumb-wrapper #breadcrumb {
    margin: 10px 0;
    border: 0;
}

#content-wrapper .container>.container-block>.row {
    padding-top: 30px;
}

form .form-group.required label::after {
    content: "*";
    color: red;
    font-size: 12pt;
}

#alert-list.container {
    padding: 0!important;
}

.form-group.required input,
.form-group.required select,
.form-group.required input,
.form-group.required textarea,
.form-group.required .bootstrap-select .btn {
    background-image: none;
}

.has-error .form-control:focus {
    box-shadow: none;
}

.breadcrumb>li+li::before {
    content: "/";
}

@media screen and (min-width: 992px) {
    section.mosaic {
        padding-top: 0rem!important;
    }
}

@media all and (max-width: 767px) {
    .container-block>.row {
        background-color: var(--light) !important;
    }
}

.btn-primary {
    border-color: none;
    color: none;
    background-color: none;
}

/*
select:active,
select:focus,
button:active,
button:focus {
    border: none!important;
}
*/

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary-color)!important;
}

select:focus {
    box-shadow: 0 0 0 2px var(--primary-accent-color)!important;
}

.btn {
    white-space: nowrap;
    padding: 0.625rem 2rem;
}

.progress-bar {
    background-color: var(--primary--accent-color)!important;
}

.fa-shopping-cart span {
    background-color: var(--further-accent-color)!important;
}

.smoothscroll-top {
    background-color: var(--primary-accent-color)!important;
    transition: background-color ease .2s;
}

.smoothscroll-top:hover {
    background-color: var(--primary-alt-color)!important;
}

.smoothscroll-top i {
    position: relative;
    top: 2px;
}

/* Portlet Layout Optionen */
.t-left-m {
    text-align: left;
}
.t-center-m {
    text-align: center;
}
.t-right-m {
    text-align: right;
}
.smallest-m {
    margin-bottom: 10px;
}
.smaller-m {
    margin-bottom: 30px;
}
.small-m {
    margin-bottom: 50px;
}
.big-m{
    margin-bottom: 70px;
}
.bigger-m {
    margin-bottom: 100px;
}
.biggest-m {
    margin-bottom: 120px;
}
@media(min-width: 768px)
{
   .t-left {
    text-align: left;
}
.t-center {
    text-align: center;
}
.t-right {
    text-align: right;
}
.smallest {
    margin-bottom: 10px;
}
.smaller {
    margin-bottom: 30px;
}
.small {
    margin-bottom: 50px;
}
.big {
    margin-bottom: 70px;
}
.bigger {
    margin-bottom: 100px;
}
.biggest {
    margin-bottom: 120px;
} 
}
/* Portlet Layout Optionen */

/* Navigation Icons */

:root .fa-shopping-cart:before {
    content: "";
    background-image: url(../svg/warenkorb_rosa.svg);
    display: flex;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: contain;
}

:root .fa-user:before {
    content: "";
    background-image: url(../svg/profil_rosa.svg);
    display: flex;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: contain;
}

:root .fa-search:before {
    content: "";
    background-image: url(../svg/lupe.svg);
    display: flex;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: 1px;
}

:root .fa-heart:before {
    content: "";
    background-image: url(../svg/merkliste_rosa.svg);
    display: flex;
    width: 25px;
    height: 23px;
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: 2px;
}

@media screen and (max-width: 767px) {
    :root #shop-nav-wish {
        display: none;
    }

    :root .fa-search:before {
        background-image: url(../svg/lupe_rosa.svg);
    }
}

:root .custom-topseller .bg {
    background-color: var(--primary-accent-color);
}

.icon-bar a .fa, 
.icon-bar a .fab {
    color: var(--primary-accent-color)!important;
}

.icon-bar .fa-lg {
    width: 25px;
    height: 25px;
    line-height: normal;
}

:root .icon-bar a:hover {
    background-color: var(--primary-font-color)!important;
}

:root .icon-bar .instagram {
    background: unset;
    background-color: #cc2366;
}

.gpsr-info {
    border-top: 1px solid rgb(219, 94, 144, 0.5);
    border-bottom: 1px solid rgb(219, 94, 144, 0.5);
    padding-top: 1rem;
    margin: 1rem 0;
}

.gpsr-info ul {
    margin: 0rem 0 1rem 0;
    list-style: none;
    padding: .5rem;
}

.gpsr-info p {
    margin-bottom: 0;
}