img.mfp-img {
    background-color: #fff;
    padding: 0;
}
.mfp-with-zoom.mfp-ready .mfp-container {
    position: fixed;
}

.site-megamenu-wrapper {
    text-align: center;
}

.site-megamenu-parent {
    float: none;
    text-transform: uppercase;
}

.product-cart-table th,
.site-page-title .site-page-title-heading,
#page-builder .pb-section-title .pb-title-heading {
    border-bottom: 2px solid rgb(60, 92, 141) !important;
    color: rgb(60, 92, 141);
    font-weight: 900;
    padding-bottom: 10px;
    text-transform: uppercase;
    font-size: 26px;
    line-height: 26px;
    word-wrap: break-word;
    position: relative;
}

.site-page-title .site-page-title-heading:after,
#page-builder .pb-section-title .pb-title-heading:after {
    border: 4px solid rgb(60, 92, 141);
    border-radius: 4px;
    content: '';
    font-size: 0;
    line-height: 0;
    position: absolute;
    right: 0;
    bottom: -5px;
}

.site-page-title .site-page-title-heading:after {
    right: 15px;
}

.site-page-title .container {
    position: relative;
}

#site-main-body {
    padding: 0;
}

.site-page-title {
    background: none;
    padding-top: 50px;
}

.page-item.active .page-link,
.page-item.active .page-link:hover,
.pb-btn-primary,
.btn-primary {
    background-color: rgb(78, 160, 223);
    border-color: rgb(78, 160, 223);
}

.page-item.active .page-link:hover {
    color: rgb(255, 255, 255);
}

.pb-btn-primary:hover,
.btn-primary:hover {
    background-color: rgb(130, 183, 223);
    border-color: rgb(130, 183, 223);
}

#product-product-detail-tab-content .pb-tab-pane,
.pb-addon-image-content.aligment-left .pb-content-holder {
    background-color: rgb(235, 235, 235);
}

#site-logo .logo {
    padding: 30px 10px 30px 10px;
    text-align: center;
    object-fit: contain;
    background-size: auto;
}
.logo .logo-image-phone{
    object-fit: contain;
    max-width: 350px;
    padding: 0;
    margin-bottom: -60px;
    width: 100%;
}
.site-megamenu-parent > li.active > a,
.site-megamenu-parent > li.active:hover > a {
    font-weight: bold;
    text-decoration: underline;
}

#site-menu {
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.32);
    -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.32);
}

#site-bottom .site-module ul > li {
    font-size: 16px;
    margin-bottom: 0;
}

#site-footer, #site-bottom {
    background: none;
    color: inherit;
}

#site-bottom .menu-parent > .menu-child {
    margin-left: 20px;
}

.pb-carousel-pro-text h2,
.pb-carousel-pro-content {
    width: fit-content !important;

    color: rgb(255, 255, 255);

    background-color: rgba(0,0,0,.05);
    padding: 5px 10px;
    backdrop-filter: blur(2px);
    box-shadow: inset 0 0 20px 1px rgba(0,0,0,.08);
    text-shadow: 0 0 8px rgba(0,0,0,.5);
}
.pb-carousel-pro-text .pb-btn {
    margin-top: 10px;
}

#site-bottom {
    padding: 0;
}

#site-footer {
    background-color: rgb(255, 255, 255);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    text-align: right;
    text-transform: uppercase;
}

#site-footer .container-inner {
    border: none;
    padding: 20px 0;
}

#site-footer a {
    color: rgb(0, 0, 0);
}

#site-bottom .site-module {
    margin-bottom: 0;
}

#site-footer a:hover,
#site-footer a:active,
#site-footer a:focus {
    color: rgb(60, 92, 141);
}

.icon-bar:hover .pb-addon-title {
    display: table;
    margin: 0 auto;
    table-layout: fixed;
    width: 90px;
    height: 90px;
}

.icon-bar .pb-addon-content .pb-addon-title a,
.icon-bar .pb-addon-content .pb-addon-title a:active,
.icon-bar .pb-addon-content .pb-addon-title a:hover,
.icon-bar .pb-addon-content .pb-addon-title a:visited {
    color: rgb(255, 255, 255) !important;
    display: table-cell;
    vertical-align: middle;
    font-style: normal;
    text-transform: uppercase;
    word-wrap: break-word;
}

.icon-bar:hover .pb-img-container img {
    display: none;
}

.icon-bar .pb-addon-title {
    display: none;
}

.icon-bar .pb-img-container img {
    padding: 20px;
}

.icon-bar {
    border: 2px solid rgb(255, 255, 255);
    margin: 0 auto;
    width: 90px;
    height: 90px;
}

.pb-carousel-pro-inner-content,
.pb-bottom-row-center .pb-container-inner {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

#site-bottom .pb-bottom-menu a {
    color: rgb(255, 255, 255);
}

#site-bottom .pb-bottom-menu h2,
#site-bottom .pb-bottom-menu h3 {
    color: rgb(255, 255, 255);
}

#site-bottom .pb-bottom-menu a:hover,
#site-bottom .pb-bottom-menu a:active,
#site-bottom .pb-bottom-menu a:focus {
    color: rgb(78, 160, 223);
}

#page-builder .pb-section-title {
    margin-bottom: 20px;
}

#site-sidebar {
    position: fixed;
    top: 50%;
    z-index: 9999;
    right: -10px;
}

#site-sidebar .sidebar-item .pb-img-container {
    width: 30px;
    height: 30px;
    background-color: rgb(151, 204, 246);
}

#site-sidebar .sidebar-item .pb-img-container>img {
    padding: 5px;
}

#site-sidebar .sidebar-item .pb-addon-text,
#site-sidebar .sidebar-item .pb-media-heading {
    background-color: rgb(78, 160, 223);
    padding: 4px 15px;
}

#site-sidebar .sidebar-item .pb-media-heading {
    text-transform: uppercase;
    margin-bottom: 2px;
}

#site-sidebar .sidebar-item .pb-media-content {
    color: rgb(255, 255, 255);
    width: max-content;
}

#site-sidebar .sidebar-item .pb-media>.pull-right {
    margin-left: 2px;
    margin-bottom: 2px;
    float: none !important;
}

#site-sidebar .sidebar-item .pb-media-body {
    display: none;
}

#site-sidebar .sidebar-item.active .pb-img-container {
    background-color: rgb(78, 160, 223);
}

#site-sidebar .sidebar-item.active .pb-media-body {
    position: absolute;
    right: 32px;
    margin-top: -32px;
    display: block;
}

/*
    Bildmarke in der klebenden Kopfleiste

    Beim Scrollen bleibt nur #site-header stehen; die Zeile mit dem Logo darüber
    ist dann aus dem Bild. Die Bildmarke springt deshalb genau dann ein und
    führt wie das Logo zurück auf die Startseite. Ungescrollt bleibt sie weg,
    sonst stünde sie doppelt unter dem Logo.
*/
.sticky-bildmarke {
    display: none;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 0;

    /*
        Die Menüliste (.site-megamenu-parent) liegt mit z-index 99 über der ganzen
        Leiste, auch über ihrem leeren linken Teil. Ohne einen höheren Wert wäre
        die Bildmarke zwar zu sehen, aber nicht anklickbar – die Klicks landeten
        in der Liste. Die Klappmenüs sind 240 px breit und öffnen unter ihrem
        Eintrag, kommen der Marke also nicht in die Quere.
    */
    z-index: 100;
}

#site-header.header-sticky .sticky-bildmarke {
    display: block;
}

.sticky-bildmarke img {
    width: auto;
    height: 48px;
}

@media (max-width: 767px) {
    .sticky-bildmarke img {
        height: 36px;
    }
}

#site-social-media {
    position: absolute;
    z-index: 9999;
    right: 0;
    top: 150px;
}

#site-social-media .brand-icon-wrapper {
    float: left;
    margin: 10px;
}

#news .pb-addon-article h3 {
    border-top: rgb(255, 255, 255) solid 4px;
    font-size: 20px;
    line-height: 20px;
    margin: 0;
}

#news .pb-addon-article h3,
#news .pb-addon-article .pb-article-introtext {
    background-color: rgb(33, 37, 46);
    padding: 15px;
}

#news .pb-addon-article h3>a,
#news .pb-addon-article .pb-article-introtext {
    color: rgb(255, 255, 255);
}

#news .pb-addon-article .pb-article-introtext {
    display: none;
}

#news .pb-addon-article:hover {
    margin-top: -35%;
    padding-bottom: 35%;
}

#news .pb-addon-articles {
    overflow: hidden;
}

#news .pb-addon-article:hover h3 {
    border-bottom: rgb(255, 255, 255) solid 4px;
    border-top: none;
}

#news .pb-addon-article {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate(0);
}

/*
    Die Kacheln endeten unterschiedlich tief. Zwei Ursachen: die Vorschaubilder
    haben verschiedene Seitenverhaeltnisse (4:3 bis 3:2), und die Ueberschriften
    laufen mal ueber eine, mal ueber zwei Zeilen. Die Bilder bekommen deshalb
    einen festen 4:3-Rahmen und werden darin beschnitten statt verzerrt, und der
    schwarze Titelbalken waechst bis zur Unterkante der hoechsten Kachel.
*/

#news .pb-addon-articles .pb-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

#news .pb-addon-articles .pb-row > [class*="pb-col-"] {
    display: flex;
}

#news .pb-addon-articles .pb-addon-article {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#news .pb-addon-article .pb-article-img-wrap {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

#news .pb-addon-article .pb-article-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#news .pb-addon-article .pb-article-info-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/*
    Der Balken fuellt den Rest der Kachel. Bewusst ohne Zeilenbegrenzung: Die
    Zeilenzahl des laengsten Titels bestimmt die Hoehe aller Balken, kuerzere
    Titel bekommen darunter Luft. Eine Begrenzung wuerde die langen Titel
    abschneiden - "Stricker-Newsletter Dezember 2025" braucht drei Zeilen.
*/
#news .pb-addon-article h3 {
    flex: 1 1 auto;
}

.article-list .article .readmore a {
    color: rgb(255, 255, 255);
    font-weight: 400;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid rgb(78, 160, 223);
    padding: 8px 12px;
    font-size: 16px;
    line-height: 1.25;
    transition: all .15s ease-in-out;
    background-color: rgb(78, 160, 223);
    white-space: unset;
}

.article-list .article {
    padding: 0;
    border: none;
    border-radius: 0;
}

.article-list .article .article-intro-image,
.article-list .article .article-featured-video,
.article-list .article .article-featured-audio,
.article-list .article .article-feature-gallery {
    margin: 0 0 20px 0;
    border-radius: 0;
    border-bottom: 0;
}

.article-list .article .article-intro-image img,
.article-list .article .article-featured-video img,
.article-list .article .article-featured-audio img,
.article-list .article .article-feature-gallery img {
    border-radius: 0;
}

/*
    Die Meldungsliste stand unruhig: Die Vorschaubilder sind mal quer, mal hoch,
    und die Anrisstexte verschieden lang. Dadurch endete jede Karte woanders.
    Wie im Neuigkeiten-Slider bekommen die Bilder einen festen 4:3-Rahmen und
    werden darin beschnitten statt verzerrt; die Karten einer Zeile sind gleich
    hoch, und "mehr lesen" sitzt bei allen auf derselben Linie.
*/

.article-list > .row {
    display: flex;
    flex-wrap: wrap;
}

.article-list > .row > [class*="col-"] {
    display: flex;
}

.article-list > .row > [class*="col-"] > .article {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.article-list .article .article-intro-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.article-list .article .article-intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-list .article .article-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.article-list .article .readmore {
    margin-top: auto;
}

.article-details,
.article-list {
    padding-bottom: 50px;
}

.btn-download {
    text-align: left !important;
}

.btn-download .fa-download {
    background-image: url(../../images/Stricker/download.svg);
    height: 16px;
    width: 16px;
}

.btn-download .fa-download:before {
    content: none;
}

.portfolio .portfolio-filter > ul > li > a {
    background-color: rgb(78, 160, 223);
    border-radius: 0;
    color: rgb(255, 255, 255);
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: pre-line;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid rgb(78, 160, 223);
    padding: 8px 12px;
    font-size: 16px;
    line-height: 1.25;
    transition: all .15s ease-in-out;
}

.portfolio .portfolio-filter > ul > li > a:hover,
.portfolio .portfolio-filter > ul > li.active > a {
    background-color: rgb(130, 183, 223);
    border-color: rgb(130, 183, 223);
}

.featherlight .featherlight-inner {
    margin: auto;
}

.featherlight .featherlight-content {
    background: transparent;
}

.product-img-responsive {
    margin: auto;
}

.product-products-row,
.product-single-product>.configurable-product>.row,
.product-single-product>.simple-product>.row {
    margin-bottom: 50px;
}

#product-product-detail-tab.pb-nav-tabs,
.nav.product-category-list {
    display: block;
    text-align: center;
}

.product-title a,
.product-title a:active,
.product-title a:hover,
.product-title a:visited,
.product-categories a,
.product-categories a:active,
.product-categories a:hover,
.product-categories a:visited,
.article-list .article .article-header h3 a,
#product-product-detail-tab.pb-nav-tabs>li>a,
.faq-accordion .pb-panel-default>.pb-panel-heading .pb-toggle-direction {
    color: rgb(30, 34, 43);
}

.product-products-row>div[class^="col-"] {
    border-right: 1px solid rgba(0, 0, 0, 0.32);
    word-break: break-word;
}

.product-products-row>div[class^="col-"]:last-child {
    border: none;
}

.spare-part-product {
    margin-bottom: 10px !important;
}

.spare-part-product>div[class^="col-"] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.32) !important;
}

.product-product-images {
    margin-bottom: 20px;
    margin-top: 20px;
}

.spare-part-image .product-product-images {
    margin-bottom: 0;
    margin-top: 0;
}

.spare-part-title .product-title {
    font-size: 24px;
}

#product-product-detail-tab,
.product-categories {
    overflow-wrap: break-word;
    text-transform: uppercase;
}

#product-product-detail-tab.pb-nav-tabs li,
.product-categories.level1 {
    border: 1px solid rgba(0, 0, 0, 0.32);
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.32);
    -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.32);
    margin-bottom: 20px;
}

#product-product-detail-tab.pb-nav-tabs>li>a,
.product-categories>a {
    width: 100%;
    display: inline-block;
}

#product-product-detail-tab.pb-nav-tabs>li>a,
.product-categories.level1>a {
    font-weight: bold;
    padding: 10px 0 10px 0;
}

.product-categories.level1.active>.product-sub-categories {
    display: block;
}

#product-product-detail-tab.pb-nav-tabs>li.active>a,
.product-categories.level1.active>a {
    color: rgb(60, 92, 141);
}

/*
    Unterpunkte einer Kategorie ("City 7", "City Max", ...)

    Die Liste darüber steht mittig (.nav.product-category-list), was für die
    Kategoriekästen passt. Jeder Unterpunkt trägt aber ein Pfeilsymbol vorweg;
    mittig gesetzt beginnt jede Zeile woanders und die Pfeile stehen als
    Zackenlinie untereinander. Linksbündig stehen sie in einer Spalte, und der
    Einzug zeigt, dass sie zur Kategorie darüber gehören.
*/
.product-sub-categories {
    display: none;
    list-style: none;
    padding: 0 15px 0 20px;
    text-align: left;
}

.product-sub-categories>li:last-child {
    padding-bottom: 10px;
}

.product-categories.active>a {
    text-decoration: underline;
}

.page-item:last-child .page-link,
.page-item:first-child .page-link,
.pagination {
    border-radius: 0;
}

#product-product-loading {
    display: inline-block;
    background: rgba(0, 0, 0, 0.5) none;
}

#product-product-loading div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70px;
    height: 70px;
    margin: 6px;
    border: 6px solid;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: rgb(255, 255, 255) transparent transparent transparent;
}

#product-product-loading div:nth-child(1) {
    animation-delay: -0.45s;
}

#product-product-loading div:nth-child(2) {
    animation-delay: -0.3s;
}

#product-product-loading div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#product-product-detail-tab.pb-nav-tabs>li {
    float: none;
}

#product-product-detail-tab.pb-nav-tabs>li>a {
    background: none;
    border: none;
    font-size: 16px;
    line-height: 24px;
}

#product-product-detail-tab.pb-nav-tabs {
    border: none;
}

#product-product-detail-tab-content .pb-tab-content {
    margin-top: 0;
}

#product-product-detail-tab-content .product-title {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
    font-size: 1.75rem;
    margin-bottom: 20px;
}

#product-product-main-title {
    position: absolute;
    top: 0;
    padding-left: 15px;
    padding-top: 15px;
    text-shadow: 1px 0px 1px #ffffff, 0px 1px 1px #ffffff, 2px 1px 1px #ffffff, 1px 2px 1px #ffffff
}

#product-product-main-title .product-title {
    text-transform: uppercase;
}

#product-product-main-title .product-product-sub-title {
    padding-left: 20px;
}

#product-product-detail-tab-content .pb-tab-pane {
    padding: 15px;
}

.product-pdf .fa-download:before {
    content: none;
}

.product-pdf .fa-download {
    background: url(../../images/Stricker/pdf.svg) no-repeat;
    height: 16px;
    width: 16px;
}

.event-item .pb-addon-content .pb-addon-title a,
.event-item .pb-addon-content .pb-addon-title a:active,
.event-item .pb-addon-content .pb-addon-title a:hover,
.event-item .pb-addon-content .pb-addon-title a:visited {
    color: rgb(30, 34, 43);
    font-weight: bold;
}

.event-item .pb-addon-content .pb-addon-title {
    margin-top: 15px;
    margin-bottom: 10px;
}

.event-item {
    padding: 13px;
    margin-left: -15px;
    margin-right: -15px;
}

.event-item:hover {
    border: 1px solid rgba(0, 0, 0, 0.32);
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.32);
    -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.32);
}

.faq-accordion .pb-panel-default>.pb-panel-heading {
    background-color: rgb(151, 204, 246);
}

.faq-accordion .pb-panel-default>.pb-panel-heading .pb-toggle-direction .fa-chevron-right:before {
    content: none;
}

.faq-accordion .pb-panel-default>.pb-panel-heading .pb-toggle-direction .fa-chevron-right {
    background-image: url(../../images/Stricker/plus.svg);
    background-repeat: no-repeat;
    height: 24px;
    width: 24px;
    margin-top: -4px;
}

.faq-accordion .pb-panel-heading.active .pb-toggle-direction .fa-chevron-right {
    background-image: url(../../images/Stricker/minus.svg);
}

.faq-accordion .pb-panel-heading.active .pb-toggle-direction {
    -webkit-transform: none;
    transform: none;
}

.faq-accordion .pb-panel-heading .pb-panel-title {
    margin-left: 30px;
}

.faq-accordion .pb-panel-heading .pb-toggle-direction {
    position: absolute;
    top: calc(50% - 8px);
    left: 15px;
    -webkit-transform: none;
    transform: none;
    -webkit-transition: none;
    transition: none;
}

.faq-accordion {
    display: none;
}

.faq-accordion.active {
    display: block;
}

.pb-btn-info {
    color: rgb(30, 34, 43);
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.32);
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.32);
    -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.32);
    margin-bottom: 20px;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
    text-transform: uppercase;
}

#product-product-detail-tab.pb-nav-tabs>li.active>a:hover,
.product-categories.level1.active>a:hover,
.pb-btn-info:hover,
.pb-btn-info.active,
.pb-btn-info:focus {
    color: rgb(60, 92, 141);
}

.pb-btn-info:hover,
.pb-btn-info.active,
.pb-btn-info:active {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.32);
}

.pb-btn-info:focus {
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.32);
    -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.32);
}

.additional-image-list li {
    display: table-cell;
    width: 33%;
    vertical-align: middle;
    padding-right: 15px;
}

.additional-image-list li:last-child {
    padding-right: 0;
}

ul.additional-image-list {
    display: table-row;
}

body.ltr #offcanvas-toggler.offcanvas-toggler-right {
    margin-right: 20px;
}

.product-additional-images .pb-img-responsive {
    height: 185px;
    object-fit: cover;
}

.product-additional-images>div {
    padding-top: 15px;
    padding-bottom: 15px;
}

.h3, h3 {
    font-size: 24px;
}

.price-sku-brand-container {
    border: none;
    margin: 0;
    padding: 0 0 15px 0;
}

.price-sku-brand-container .product-price-container {
    /*border-top: 1px solid #000;*/
    /*padding: 15px 15px 0 15px;*/
    padding-left: 20px;
    display: inline-block;
}

.product-add-to-cart {
    margin-left: 20px;
}

.tax-text {
    text-align: center;
    font-size: 12px;
    font-style: italic;
}

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

.hide {
    display: none;
}

#site-top2 {
    text-align: right;
}

#site-top2 .mod-languages>ul {
    padding: 15px;
}

.product-cart {
    margin: 50px 0;
}

.product-cart-table th {
    border-top: none;
    border-left: none;
    border-right: none;
}

.product-cart-table .cart-item td {
    border-top: none;
    border-left: none;
    border-right: 1px solid rgba(0, 0, 0, 0.32);
    border-bottom: 1px solid rgba(0, 0, 0, 0.32);
}

.product-cart-table .cart-totals-row td {
    border-top: none;
    border-left: none;
    border-bottom: none;
    border-right: none;
}

.product-cart-table tr td:first-child {
    padding-left: 80px;
}

.product-cart-table tr td:last-child {
    border-right: none;
}

.product-cart-table .cart-thumb-image {
    position: absolute;
    left: 0;
}

.product-cart-table .cart-totals-spacer td {
    border: none !important;
}

.product-cart-table .remove-icon {
    margin-bottom: auto;
}

.product-cart-table .cart-totals-row td:first-child {
    text-align: right;
    font-weight: bold;
    border-right: 1px solid rgba(0, 0, 0, 0.32);
}

.product-cart-table {
    border: none !important;
}

.cart-product-name {
    font-weight: bold;
}

.product-cart-buttons {
    margin-top: 30px;
}

.form-error {
    margin-bottom: 20px;
    display: inline-block;
}

.product-option-tooltip {
    height: 19px;
    margin-bottom: 0px;
    background-color: #3c5c8d;
    border-radius: 9px;
    margin-left: 10px;
    position: absolute;
    right: 30px;
    display: inline;
}

.tooltip > .tooltip-inner {
    background-color: #3c5c8d;
    border-radius: 0;
}

.tooltip > .arrow:before {
    border-right-color: #3c5c8d !important;
}

.product-option-price {
    margin-right: 30px;
}

.product-option-select {
    width: calc(100% - 30px) !important;
    display: inline-block !important;
}

.product-option-tooltip-select {
    margin-top: 8px;
}

#productFilters {
    padding-bottom: 30px;
}

.list-view-container {
    width: 100%;
}

.product-qty input {
    display: inline !important;
}

#product-product-detail-tab-content .pb-tab-pane .table-striped tbody tr:nth-of-type(odd) {
    background-color: #ffffff;
}

.product-cart-table .cart-thumb-image {
    position: relative;
}

.product-cart-table tr td:first-child {
    padding-left: 15px;
}

.stricker-product-price-in_image {
    position: absolute; 
    right: 0px; 
    bottom: 68px; 
    background: rgba(245, 245, 245, .8); 
    font-size: 16px; 
    padding: 7px 15px;
    padding-right: 6px;
    color: #1e222b;

    user-select: none;
    cursor: default;
}

.product-addtocart-form {
    position: absolute;
    right:0;
    bottom: 30px;
}
.product-addtocart-form *:active,
.product-addtocart-form *:focus,
.product-addtocart-form *:hover {
    cursor: pointer !important;
}

/*
    Störer oben rechts im Produktbild

    Die Breite ist begrenzt, damit der Störer nicht über das Motiv wandert:
    Auf dem Titelbild des Smart Free steht der Fahrer mittig, sein Kopf reicht
    von 51 % bis 63 % der Bildbreite. Ein Kasten, der höchstens ein Drittel
    einnimmt, beginnt erst bei 66 % und bleibt sicher rechts daneben.

    Auf breiten Bildschirmen ändert die Grenze nichts – dort ist der Text
    ohnehin schmaler als ein Drittel des Bildes. Erst auf dem Telefon, wo das
    Bild nur noch gut 350 px breit ist, greift sie und lässt den Text in
    mehrere Zeilen umbrechen, statt ihn quer über das Gesicht zu ziehen.
*/
.stricker-product-badge-in_image {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 99;
    max-width: 34%;
    background: rgb(78, 160, 223);
    font-size: 16px;
    line-height: 1.3;
    padding: 7px 15px;
    color: #ffffff;
    font-weight: bold;
    text-align: right;

    user-select: none;
    cursor: default;
}

@media (max-width: 767px) {
    .pb-addon-image-content.aligment-left .pb-content-holder {
        margin-left: -15px;
        margin-right: -15px;
    }
    .stricker-product-price-in_image {
        bottom: 43px;
        font-size: 14px;
        padding: 3px 7px;
        padding-right: 2px;
    }
    .stricker-product-badge-in_image {
        font-size: 13px;
        padding: 4px 8px;
    }
    .product-addtocart-form {
        bottom: 20px;
    }
    .product-addtocart-form input,
    .product-addtocart-form a {
        font-size: 14px;
        padding: 3px 7px;
    }
    .product-add-to-cart {
    }
}

@media (min-width: 576px) {
    .pb-carousel-pro-inner-content,
    .pb-bottom-row-center .pb-container-inner {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .pb-carousel-pro-inner-content,
    .pb-bottom-row-center .pb-container-inner {
        max-width: 720px;
        width: 750px;
    }

    .pb-addon-image-content .pb-image-holder {
        position: absolute;
        top: 0;
        width: 50% !important;
        height: 100%;
        background-position: 50%;
        background-size: cover;
    }

    .icon-bar:hover .pb-addon-title {
        height: 154px;
        width: 154px;
    }

    .icon-bar .pb-img-container img {
        padding: 50px;
    }

    .icon-bar {
        height: 154px;
        width: 154px;
    }
}

@media (min-width: 992px) {
    .pb-carousel-pro-inner-content,
    .pb-bottom-row-center .pb-container-inner {
        max-width: 960px;
        width: 970px;
    }

    .site-page-title .site-page-title-heading,
    #page-builder .pb-section-title .pb-title-heading {
        font-size: 36px;
        line-height: 36px;
    }

    .h3, h3 {
        font-size: 34px;
    }

    .icon-bar:hover .pb-addon-title {
        height: 204px;
        width: 204px;
    }

    .icon-bar .pb-img-container img {
        width: 204px;
    }

    .icon-bar {
        height: 204px;
        width: 204px;
    }

    .list-view-wrapper {
        position: relative;
    }

    .list-view-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (min-width: 1200px) {
    .pb-carousel-pro-inner-content,
    .pb-bottom-row-center .pb-container-inner {
        max-width: 1140px;
        width: 1170px;
    }
}

/*
    Mobilmenü: Bedienflächen zum Antippen

    Helix gibt den Einträgen im ausgeklappten Menü nur 2 px Innenabstand
    (0.125rem). Damit sind die Verweise gut 20 px hoch und liegen dicht
    aufeinander – mit dem Finger trifft man kaum den gewünschten. Sie bekommen
    deshalb 48 px Höhe, eine größere Schrift und eine Trennlinie dazwischen.

    Die Selektoren sind so lang wie die des Templates: Kürzer kommen sie nicht
    dagegen an, denn das Template-CSS steht im Kopf der Seite vor dieser Datei.
*/
.offcanvas-menu .offcanvas-inner .site-module ul > li a,
.offcanvas-menu .offcanvas-inner .site-module ul > li span {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 0;
    font-size: 18px;
    line-height: 1.3;
}

.offcanvas-menu .offcanvas-inner .site-module ul > li ul li a {
    min-height: 44px;
    font-size: 16px;
}

/* Nur die Einträge mit Untermenü brauchen rechts Platz für den Aufklapper. */
.offcanvas-menu .offcanvas-inner .site-module ul > li.menu-parent > a {
    padding-right: 52px;
}

/*
    Der Aufklapper war ein 14 px kleines Zeichen. Er füllt jetzt die ganze
    rechte Kante des Eintrags, damit er auch dann sicher zu treffen ist, wenn
    die Beschriftung daneben auf zwei Zeilen umbricht.
*/
.offcanvas-menu .offcanvas-inner .site-module ul > li.menu-parent > a > .menu-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    bottom: 0;
    width: 52px;
    transform: none;
    font-size: 20px;
}

/* Trennlinien nur zwischen den Hauptpunkten, nicht in den Untermenüs. */
.offcanvas-menu .offcanvas-inner .site-module ul.menu > li + li {
    border-top: 1px solid rgba(30, 34, 43, .12);
}

/*
    Das Schließkreuz war ein 24-px-Kreis und damit ebenfalls zu klein. Der
    Innenabstand oben schafft ihm Platz, sonst läge es über dem ersten Eintrag.
*/
.close-offcanvas {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 18px;
}

.offcanvas-menu .offcanvas-inner {
    padding: 74px 20px 30px;
}

/*
    Mit den höheren Einträgen passt ein ausgeklapptes Untermenü nicht mehr
    zwingend aufs Telefon – das Menü darf deshalb scrollen.
*/
.offcanvas-menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}


/*
    Lupe über Bildern

    Bilder aus dem Page Builder tragen eine Fläche mit einem "+" darüber, die
    sie in der Großansicht öffnet. Auf schmalen Geräten laufen diese Bilder
    ohnehin über die volle Breite; das "+" liegt dann nur im Bild und die
    Großansicht bringt nichts mehr.

    Ausgenommen ist die Produktgalerie: Deren Vorschaubilder stehen auch auf
    dem Telefon zweispaltig und nur gut 160 px breit. Ohne die Großansicht
    wären die Produkte dort nicht mehr zu erkennen. Die Ausnahme wiederholt
    die Bedingung des Page Builders (:hover) unverändert – dort soll sich
    nichts ändern, auch nicht die Sichtbarkeit des "+".
*/
@media (max-width: 991px) {
    .pb-addon-image-overlay-icon {
        display: none !important;
    }

    .c-gallery-items .pb-addon-single-image-container:hover .pb-addon-image-overlay-icon {
        display: block !important;
    }
}

/*
    Gleich hohe Vorschaubilder in der Produktliste

    Die Kacheln einer Zeile stehen in einer Flex-Zeile und sind deshalb gleich
    hoch – das Bild darin richtet sich aber nach seinem eigenen Seitenverhältnis.
    Die meisten Produktfotos sind quadratisch, einzelne im Hochformat (Smart
    Free 899×1200, Smart Dynamic 669×800) und das Zubehör im Querformat. Damit
    beginnt die Beschreibung in jeder Kachel auf einer anderen Höhe und die
    Zeile wirkt unruhig.

    Eine quadratische Bildfläche gibt allen Kacheln denselben Aufbau. Das Foto
    wird vollständig hineingesetzt ("contain") statt beschnitten – Hochformate
    bekommen dafür Rand links und rechts, Querformate oben und unten.

    Das Maß der bisher quadratischen Fotos bleibt unverändert, weil die Fläche
    genauso breit ist wie die Spalte.
*/
.product-thumbnail-image a {
    display: block;
}

.product-thumbnail-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/*
    Banner des Vorschausystems

    Steht in normalem Fluss ganz oben im <body>, vor allem anderen Markup
    (siehe templates/partials/staging-banner.html.twig). Bewusst nicht
    position: sticky/fixed - das würde mit der eigenen Sprungmarke des
    Headers (#site-header.header-sticky, z-index 9999, siehe theme.css)
    und dessen padding-top-Ausgleich für #site-main-body kollidieren.
*/
.staging-banner {
    background: rgb(200, 30, 30);
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    padding: 10px 15px;
    letter-spacing: 0.02em;
}

@media (max-width: 767px) {
    .staging-banner {
        font-size: 13px;
        padding: 8px 10px;
    }
}

/*
    Blätterpfeile der Karussells

    pagebuilder.css schiebt sie mit einem negativen Rand von 75 px aus der
    Bildfläche heraus. Der Inhalt ist auf rund 1100 px begrenzt und zentriert;
    je breiter der Bildschirm, desto weiter stehen die Pfeile draußen in der
    leeren weißen Fläche. Da sie selbst weiß sind und nur einen dünnen blauen
    Rand haben, sind sie dort kaum auszumachen.

    Ab 1200 px rücken sie deshalb bündig an den linken und rechten Rand der
    Bilder. Darunter bleibt der ursprüngliche Rand stehen: Dort füllt der
    Inhalt die Breite fast aus, die Pfeile stünden sonst auf dem Text der
    Einträge – sie sitzen senkrecht in der Mitte des Karussells, und die ist
    bei schmalen Bildschirmen wegen der längeren Textblöcke nicht mehr auf
    Höhe der Bilder.
*/
@media (min-width: 1200px) {
    .pb-carousel-extended-nav-control .nav-control.prev-control {
        margin-left: 0;
    }

    .pb-carousel-extended-nav-control .nav-control.next-control {
        margin-right: 0;
    }
}

/*
    Standort im Fußbereich

    Der Kartenbaustein des alten CMS zeichnete die Karte mit Leaflet und lud
    die Kacheln von CartoDB. Beides ist beim Umzug nicht mitgekommen: Übrig
    blieb ein leerer Kasten, dem das erzeugte <style> 500 px Höhe gibt – die
    große Lücke unter dem Fußbereich jeder Seite.

    Die Anschrift steckt im Attribut data-location des Kastens. js.js schreibt
    sie hinein und setzt dabei die Klasse c-map-static; erst dann fällt die
    feste Höhe weg. Bleibt das Skript aus, bleibt es beim alten Verhalten.
*/
.pb-addon-openstreetmap.c-map-static {
    height: auto !important;
    padding: 20px 25px;
    background: #eeeeec;
    border-left: 4px solid rgb(78, 160, 223);
    font-size: 16px;
    line-height: 1.6;
    color: #1e222b;
}

.c-map-static .c-map-address strong {
    font-size: 18px;
}

/* Die Farbe kommt aus theme.css (#site-bottom a) und bleibt wie bei jedem
   anderen Verweis im Fussbereich. */
.c-map-static .c-map-address a {
    display: inline-block;
    margin-top: 10px;
    font-weight: bold;
}

.c-map-static .c-map-address a:hover,
.c-map-static .c-map-address a:focus {
    text-decoration: underline;
}

/*
    Zweite Reiterleiste unter dem Inhalt der Produktdetailseite

    js.js hängt sie unter #product-product-detail-tab-content. Auf dem Telefon
    läuft der Inhalt eines Reiters über ein Dutzend Bildschirme; ohne diese
    Leiste führt der Weg zum nächsten Reiter ganz nach oben zurück.

    Auf breiten Bildschirmen bleibt sie weg: Dort steht die Leiste links neben
    dem Inhalt und ist nach kurzem Zurückscrollen wieder da.

    Das Aussehen kommt von der Leiste oben (#product-product-detail-tab, weiter
    oben in dieser Datei) – die Regeln dort hängen an deren id, deshalb stehen
    sie hier noch einmal.
*/
.c-tab-nav-bottom {
    display: none;
}

@media (max-width: 991px) {
    .c-tab-nav-bottom {
        display: block;
        margin: 30px 0 0 0;
        padding: 0;
        list-style: none;
        overflow-wrap: break-word;
        text-transform: uppercase;
        text-align: center;
    }

    .c-tab-nav-bottom > li {
        display: block;
        float: none;
        border: 1px solid rgba(0, 0, 0, 0.32);
        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.32);
        -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.32);
        margin-bottom: 20px;
    }

    .c-tab-nav-bottom > li > a {
        display: inline-block;
        width: 100%;
        padding: 10px 0;
        color: rgb(30, 34, 43);
        font-weight: bold;
    }

    .c-tab-nav-bottom > li.active > a {
        color: rgb(60, 92, 141);
    }
}