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-articles {
    overflow: hidden;
}

/*
    Beim Überfahren rutscht die Kachel nach oben und gibt den Anrisstext frei.
    Das setzt eine Maus voraus. Auf dem Telefon gibt es kein Überfahren - dort
    löst schon die Berührung ":hover" aus, die Kachel sprang um 35 % ihrer
    Breite nach oben in die darüberliegende hinein und blieb dort stehen, bis
    man woanders hintippte. Der Effekt gilt deshalb nur für Zeigegeräte, die
    wirklich überfahren können.
*/
@media (hover: hover) and (pointer: fine) {
    #news .pb-addon-article:hover {
        margin-top: -35%;
        padding-bottom: 35%;
    }

    #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;
    }
}

/*
    Störer des Handelspartners

    Steht direkt unter dem Vorschau-Banner ganz oben im <body> und sagt
    Besuchern außerhalb Deutschlands, über wen bei ihnen verkauft wird
    (templates/partials/partner-banner.html.twig).

    Gebaut wie die schmalen Servicezeilen über dem Kopfbereich, die man von
    Herstellerseiten kennt: eine ruhige Fläche, ein kleines Etikett in
    Versalien, der Name daneben und feine Trennstriche dazwischen. Er begleitet
    jede Seite und soll sie nicht übertönen - anders als der rote
    Vorschau-Banner, den man nicht übersehen soll.
*/
.partner-banner {
    background: #f7f9fc;
    border-bottom: 1px solid #e2e8f1;
    color: #3b4553;
    font-size: 14px;
    line-height: 1.5;
    padding: 11px 15px;
}

.partner-banner-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 14px;
}

.partner-banner-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: 700;
    color: #67717f;
}

.partner-banner-icon {
    color: #3071ff;
    font-size: 14px;
    margin-right: 5px;
}

.partner-banner-name {
    font-size: 15px;
    font-weight: 700;
    color: #1e222b;
}

.partner-banner-sep {
    width: 1px;
    height: 15px;
    background: #d7dee8;
}

.partner-banner-web {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0345bf;
    text-decoration: none;
    white-space: nowrap;
}

.partner-banner-web .fa {
    font-size: 11px;
    opacity: 0.7;
}

.partner-banner-all {
    color: #5b6674;
    text-decoration: none;
    white-space: nowrap;
}

.partner-banner-web:hover,
.partner-banner-web:focus,
.partner-banner-all:hover,
.partner-banner-all:focus {
    color: #1e222b;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .partner-banner {
        font-size: 13px;
        padding: 9px 12px;
    }

    .partner-banner-inner {
        gap: 2px 10px;
    }

    .partner-banner-label {
        font-size: 11px;
    }

    .partner-banner-name {
        font-size: 14px;
    }

    /* Umgebrochen stünden die Striche am Zeilenanfang. */
    .partner-banner-sep {
        display: none;
    }
}

/*
    Hinweis auf den Handelspartner oben auf der Kontaktseite

    Der schmale Störer über der Seite nennt den Partner schon; hier steht er
    noch einmal deutlich, direkt über dem Formular
    (templates/partials/partner-contact-notice.html.twig). Deshalb hier die
    kräftigere Form: Karte mit blauer Kante, Name des Partners groß, seine
    Webseite als Schaltfläche.
*/
.contact-notice {
    /* 50px wie der erste Abschnitt jeder anderen Seite - der Kopfbereich klebt
       sonst am Kasten, weil er anders als Fliesstext einen eigenen Rahmen hat. */
    margin: 50px 0 0;
    padding: 22px 26px;
    background: #f4f8fd;
    border: 1px solid #d5e2f2;
    border-left: 5px solid #3071ff;
    border-radius: 3px;
}

.contact-notice-heading {
    margin: 0 0 10px;
    font-size: 21px;
    font-weight: 700;
    color: #1e222b;
}

.contact-notice-heading .fa {
    color: #3071ff;
    margin-right: 8px;
}

.contact-notice-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: #2b3340;
}

.contact-notice-partner {
    margin: 14px 0 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: #1e222b;
}

.contact-notice-actions {
    margin: 18px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
}

.contact-notice-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    background: #1e58d6;
    border: 1px solid #1e58d6;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

.contact-notice-cta:hover,
.contact-notice-cta:focus {
    background: #0345bf;
    border-color: #0345bf;
    color: #ffffff;
    text-decoration: none;
}

.contact-notice-cta .fa {
    font-size: 13px;
    opacity: 0.85;
}

.contact-notice-all {
    color: #0345bf;
    text-decoration: underline;
}

.contact-notice-all:hover,
.contact-notice-all:focus {
    color: #1e222b;
}

@media (max-width: 767px) {
    .contact-notice {
        margin-top: 35px;
        padding: 18px;
    }

    .contact-notice-heading {
        font-size: 18px;
    }

    .contact-notice-partner {
        font-size: 19px;
    }
}

/*
    Hinweis statt Rechtstext

    AGB, Datenschutz und Teilnahmebedingungen gibt es nur auf Deutsch; in den
    übrigen Sprachen steht an ihrer Stelle ein kurzer Hinweis mit dem Weg zum
    Handelspartner und zur deutschen Fassung.
*/
/* Die uebrigen Seiten bringen ihren Abstand im eigenen CSS mit, das der
   Pagebuilder je Abschnitt erzeugt hat. Diese Seiten haben keines. */
.legal-hint-section {
    padding: 50px 0;
}

.legal-hint-lead {
    font-size: 18px;
}

.legal-hint-actions {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
}

/*
    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);
    }
}

/*
    Mitlaufende Kopfleiste

    theme.js hängt #site-header beim Scrollen die Klasse .header-sticky an,
    theme.css setzt darauf nur "position:fixed; z-index:9999" - ohne top, left
    und Breite. Ein fixiertes Element ohne diese Angaben bleibt an der Stelle
    stehen, an der es gerade lag, und das ist beim Scrollen oberhalb des
    Fensters. Die Leiste war damit nicht mitlaufend, sondern schlicht weg, und
    man musste zum Menü jedes Mal ganz nach oben.

    Der Ausgleich für den entstehenden Sprung steht schon in theme.css
    (padding-top am #site-main-body).
*/
#site-header.header-sticky {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-shadow: 0 1px 6px rgba(16, 24, 40, 0.12);
}

/*
    Der Ausgleich für die Höhe der Leiste saß eine Ebene zu tief.

    Sobald die Leiste fixiert ist, fällt sie aus dem Fluss und alles darunter
    rutscht um ihre Höhe nach oben. theme.css gleicht das mit 80 px Innenabstand
    am #site-main-body aus - der Seitentitel mit seiner Linie steht aber davor,
    in #site-section-3. Der rutschte hoch, der Inhalt blieb: zwischen Linie und
    Überschrift klaffte beim Scrollen eine Lücke von genau 80 px.

    Der Ausgleich gehört an das erste Element nach der Leiste. Dann bleibt
    alles stehen, wo es war.
*/
#site-header.header-sticky ~ section#site-section-3 {
    padding-top: 80px;
}

#site-header.header-sticky ~ section#site-main-body {
    padding-top: 0;
}

/*
    Kacheln über der Bildergalerie

    Zwei Dinge stimmten nicht. Der Seitenbauer hat den Symbolen rechts 20 px und
    dem Text rechts 30 px Innenabstand mitgegeben, links aber nur 5 px - beides
    steht in einer zentrierten Spalte und saß deshalb sichtbar links von der
    Mitte. Und beim Überfahren färbt die Seiten-CSS den Symbolträger ein
    (#3c5c8d): Bei 5 px Abstand rundum war das ein hartes Rechteck, das dem
    Zeichen darin zu eng saß.

    Der Träger ist jetzt ein Kreis fester Größe. Im Ruhezustand hellblau, beim
    Überfahren füllt ihn die vorhandene Regel dunkelblau - dieselbe Farbe,
    aber eine Form, die dazu passt.
*/
.pb-addon-feature .pb-icon .pb-icon-container {
    width: 64px;
    height: 64px;
    padding: 0 !important;
    border-radius: 50%;
    /* Die Seiten-CSS setzt display, Größe und Zeilenhöhe je Kachel über eine
       ID-Auswahl (#pb-addon-1570624604078 .pb-icon .pb-icon-container). Dagegen
       kommt keine Klassenauswahl an, deshalb hier "!important": Ohne das blieb
       der Träger inline-block, das Zeichen saß auf der Schriftlinie und damit
       14 px über der Kreismitte. */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #eef3fa;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pb-addon-feature .pb-icon .pb-icon-container > i {
    font-size: 26px !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
}

/*
    Kacheln mit Bild oben und Text darunter ("Universelles Stricker-Klemmsystem",
    "Sicher unterwegs mit stabilem, justierbarem Rahmen" ...).

    Der Seitenbauer gab dem Textkasten oben 10 px und unten 0 px Innenabstand.
    Die letzte Zeile klebte damit am unteren Rand der grauen Fläche, während
    oben Luft war - der Text saß sichtbar schief im Kasten. Jetzt oben wie
    unten Abstand. Der seitliche Abstand bleibt bei 5 px, sonst brechen die
    Zeilen anders um und die vier Kacheln sind nicht mehr gleich hoch.
*/
.pb-addon-feature .pb-text-center > .pb-media-content {
    padding: 16px 5px 18px !important;
}

/*
    Kacheln mit Symbol neben dem Text: die sozialen Netze unter "Jetzt folgen"
    und darunter E-Mail und Telefon.

    Das Symbol stand oben, der Text daneben begann tiefer - beim runden Träger
    (64 px) lag die Zeile 11 px zu tief, bei den kleinen Bildchen von E-Mail und
    Telefon (22 px) umgekehrt zu hoch. Grund war der Umbruch mit "float": die
    beiden Spalten wussten nichts voneinander. Als Flex-Zeile richten sie sich
    aneinander aus, unabhängig davon, wie groß das Symbol ist.
*/
.pb-addon-feature .pb-media {
    display: flex;
    align-items: center;
}

.pb-addon-feature .pb-media > .pull-left,
.pb-addon-feature .pb-media > .pull-right {
    float: none;
    flex: 0 0 auto;
}

.pb-addon-feature .pb-media > .pb-media-body {
    flex: 1 1 auto;
    min-width: 0;
}

/*
    Bildergalerie unter "Videos und Bilder"

    Vier Kacheln pro Reihe waren zu groß für eine reine Bildersammlung, und die
    Bildunterschriften waren die Dateinamen aus dem alten System ("Image32") -
    keine Auskunft, die jemand braucht. Jetzt sechs kleinere Kacheln pro Reihe,
    ohne Beschriftung; die Lupe beim Überfahren bleibt.

    Die Auswahl ist so lang wie die des Themes (.portfolio davor), sonst gewinnt
    dessen Breitenangabe von 25 %.
*/
@media (min-width: 992px) {
    .portfolio .portfolio-columns-4 .portfolio-item {
        width: 16.6666%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .portfolio .portfolio-columns-4 .portfolio-item {
        width: 25%;
    }
}

.portfolio .portfolio-item {
    padding: 6px;
}

/* So lang wie die Auswahl des Themes, sonst blenden dessen Regeln sie beim
   Überfahren wieder ein. */
.portfolio .portfolio-item .site-vertical-middle > div .portfolio-title,
.portfolio .portfolio-item .site-vertical-middle .portfolio-tags {
    display: none;
}

/* Ohne Titel darf die Lupe die Fläche für sich haben. */
.portfolio .portfolio-overlay .portfolio-btns {
    margin: 0;
}

/*
    Einladung zum Newsletter oben auf der Nachrichtenseite

    Bewusst anders als der Hinweis auf den Handelspartner: Der schickt jemanden
    weg, das hier lädt ein. Deshalb ein heller Kasten mit der Schaltfläche
    rechts neben dem Text statt darunter - er soll die Nachrichten begleiten,
    nicht vor ihnen stehen.
*/
.newsletter-invite {
    /* Unten braucht der Kasten Luft: Direkt darunter beginnt die erste
       Nachricht mit ihrem Bild, und ohne Abstand stiess der blaue Rand
       unmittelbar an das Foto. */
    margin: 50px 0 40px;
    padding: 20px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 26px;
    background: #f4f8fd;
    border: 1px solid #d5e2f2;
    border-radius: 3px;
}

.newsletter-invite-text {
    flex: 1 1 380px;
}

.newsletter-invite-heading {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 700;
    color: #1e222b;
}

.newsletter-invite-heading .fa {
    color: #3071ff;
    margin-right: 8px;
}

.newsletter-invite-text p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #2b3340;
}

.newsletter-invite-cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 22px;
    background: #1e58d6;
    border: 1px solid #1e58d6;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.newsletter-invite-cta:hover,
.newsletter-invite-cta:focus {
    background: #0345bf;
    border-color: #0345bf;
    color: #ffffff;
    text-decoration: none;
}

@media (max-width: 767px) {
    .newsletter-invite {
        margin-top: 35px;
        margin-bottom: 28px;
        padding: 18px;
    }

    .newsletter-invite-heading {
        font-size: 17px;
    }

    .newsletter-invite-cta {
        width: 100%;
        justify-content: center;
    }
}

/*
    Schaltflächen in den eingebundenen Newslettern

    Brevo gibt jeder Schaltfläche eine feste Höhe von 21 px mit, dazu 12 px
    Innenabstand oben und unten - in der E-Mail geht die Rechnung auf, weil
    dort box-sizing: content-box gilt und sich die Höhe auf den Inhalt bezieht.
    Auf der Webseite gilt border-box: die 21 px sind dann die Gesamthöhe, der
    Innenabstand allein braucht schon 24 px, und für die Textzeile bleibt
    nichts übrig. Die Beschriftung stand deshalb halb unter der blauen Fläche.

    Die Höhe richtet sich jetzt nach dem Text. Damit passt auch eine längere
    Beschriftung, wie sie in den übersetzten Fassungen vorkommt.
*/
.article-details a.default-button {
    height: auto !important;
    max-width: 100%;
}

/*
    Reiter auf der Produktseite mitlaufen lassen

    Beschreibung, Grundausstattung, Tetraausstattung ... stehen links neben dem
    Inhalt. Wer weit unten im Text ist, musste bisher erst wieder ganz nach oben
    scrollen, um den nächsten Reiter zu erreichen. Die Liste bleibt jetzt unter
    der klebenden Kopfleiste stehen (80 px hoch, dazu 8 px Luft).

    Voraussetzung dafür ist die Zeile darüber: .body-innerwrapper hatte
    overflow-x: hidden, und der Browser macht daraus overflow-y: auto - damit
    wird der Kasten selbst zum Scrollbereich, und "sticky" klebt an ihm statt am
    Fenster, also an etwas, das sich nie bewegt. "clip" schneidet genauso ab,
    macht aber keinen Scrollbereich auf. Browser, die clip nicht kennen,
    behalten hidden; dort läuft die Liste einfach wie bisher mit weg.

    Unter 992 px steht die Liste über dem Inhalt statt daneben - dort ergibt
    Mitlaufen keinen Sinn. Ist das Fenster zu niedrig für alle Reiter, bekommt
    die Liste eine eigene Bildlaufleiste, statt unten herauszuragen.
*/
.body-innerwrapper {
    overflow-x: clip;
}

@media (min-width: 992px) {
    #product-product-detail-tab {
        position: sticky;
        top: 88px;
        max-height: calc(100vh - 108px);
        overflow-y: auto;
    }
}

/*
    Die Seite soll sich nur senkrecht bewegen lassen

    Jede Bootstrap-Zeile bringt margin: 0 -15px mit; die Gegenrechnung ist der
    Innenabstand des umgebenden Containers. Die Abschnitte dieser Vorlage
    (#site-header, #site-main-body, #site-bottom ...) haben keinen, die Zeilen
    ragen deshalb links und rechts 15 px heraus. Auf großen Bildschirmen fällt
    das nicht auf, weil die Seite in der Mitte steht und daneben Platz ist. Auf
    dem Telefon ist der Rahmen so breit wie das Fenster: dort ließ sich die
    Seite 15 px zur Seite schieben, und rechts erschien ein weißer Streifen.

    Sichtbar ist nichts von den 15 px - die Spalten in der Zeile haben ihren
    eigenen Innenabstand von 15 px und holen den Inhalt wieder herein. Es wird
    also nur der leere Überhang abgeschnitten.

    "clip" statt "hidden": Aus hidden macht der Browser auf der anderen Achse
    auto, der Kasten würde damit selbst zum Scrollbereich, und die mitlaufende
    Reiterliste der Produktseite klebte an ihm statt am Fenster. Am Wurzel-
    element (html) darf die Regel ebenfalls nicht stehen - dort verliert die
    Reiterliste ihren Halt genauso.
*/
.body-innerwrapper,
body > section,
body > header,
body > footer {
    overflow-x: clip;
}

/*
    Eingebundene Newsletter auf schmalen Bildschirmen

    Die Mails sind verschachtelte Tabellen mit fester Breite von 600 px, und die
    Spalten stehen als <th> nebeneinander. Passt das nicht ins Fenster, wurde
    der rechte Rand abgeschnitten - seit die Seite sich nicht mehr seitlich
    schieben lässt, kam man auch nicht mehr daran.

    Brevo liefert dafür eine eigene @media-Regel mit, die beim Import mit dem
    restlichen <style> weggefallen ist. Sie zu retten hilft nur dem einen
    Newsletter, dessen Quelltext noch vorliegt - die vierzehn älteren sind
    importiert, bevor jemand daran gedacht hat. Deshalb hier eine eigene Regel,
    die für alle gilt.

    Unter 700 px: Tabellen füllen die Spalte, die <th> stehen untereinander
    statt nebeneinander. Nur max-width genügt nicht - eine Tabelle wird nicht
    schmaler als der breiteste Inhalt darin, und der ist hier wieder eine
    Tabelle mit 600 px.

    Die beiden Regeln ohne Bedingung sind eine Sicherung für jede Fenstergröße:
    Was ohnehin passt, merkt von max-width nichts.
*/
.article-details .nl2go-body-table table {
    max-width: 100% !important;
}

.article-details .nl2go-body-table img {
    max-width: 100% !important;
    height: auto !important;
}

@media (max-width: 700px) {
    .article-details .nl2go-body-table table {
        width: 100% !important;
    }

    .article-details .nl2go-body-table th {
        display: block !important;
        width: 100% !important;
    }
}

/*
    Seitenfuß auf dem Telefon

    Der Fuß ist auf dem Rechner ein Raster aus mehreren Spalten. Untereinander
    gestellt kamen vier Dinge zusammen, die vorher niemandem auffielen:

    1. Zwei verschiedene Kanten. Die Vorteilskacheln, die Adresse und der
       Newsletter-Kasten hängen an einem Abschnitt, der sich selbst zentriert
       (525 px breit, also 50 px Rand); alles andere hängt an einem Container
       nach Bootstrap-Art (540 px mit 15 px Innenabstand, also 57,5 px Rand).
       Auf dem Rechner steht beides mittig und der Unterschied fällt nicht auf,
       auf dem Telefon standen die Blöcke 8 px versetzt übereinander. Jetzt
       benutzen beide denselben Container.

    2. Drei Spalten der Linkliste ("Elektrische Zughilfen", "Hybrid Handbikes",
       "Komplettsysteme") bringen aus dem Rasterentwurf 50 px Abstand nach oben
       mit. Nebeneinander ist das unsichtbar, untereinander sprang die Liste:
       81 px, 81 px, 81 px, dann 31 px, 31 px, 31 px.

    3. Die vier Vorteilskacheln standen einzeln untereinander, jede 452 px hoch.
       Zu zweit nebeneinander, mit kleinerem Bild und kleinerer Schrift, ist der
       Fuß 1250 px kürzer und die Kacheln einer Reihe sind gleich hoch.

    4. "Telefon und Email" und "Über uns" begannen 10 px unter dem vorigen
       Block - genauso viel wie zwischen zwei Zeilen derselben Gruppe. Eine
       Zwischenüberschrift, die auf einen anderen Block folgt, bekommt jetzt
       Luft nach oben. Wo ohnehin ein Abschnittswechsel liegt ("Jetzt folgen",
       "Produkte"), ändert sich nichts.

    ":has()" kennen alle aktuellen Browser; wo nicht, bleibt es beim bisherigen
    Bild - eine Kachel je Zeile.
*/
@media (max-width: 767px) {
    #site-bottom .pb-section {
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #site-bottom .pb-section > .pb-container-inner {
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
    }

    #site-bottom [class*="pb-col-"] {
        margin-top: 0 !important;
    }

    #site-bottom [class*="pb-col-"] + [class*="pb-col-"]:has(h2) {
        margin-top: 26px !important;
    }

    #site-bottom [class*="pb-col-"]:has(.pb-addon-feature > .pb-text-center) {
        width: 50%;
        max-width: 50%;
    }

    #site-bottom .pb-addon-feature > .pb-text-center > .pb-img-container > img {
        width: 100%;
        height: 150px;
        object-fit: contain;
    }

    #site-bottom .pb-addon-feature > .pb-text-center .pb-addon-title {
        font-size: 16px !important;
        line-height: 22px !important;
    }

    /* Zwei- und dreizeilige Beschriftungen sollen gleich tief enden, sonst
       hören die grauen Flächen einer Reihe auf verschiedenen Höhen auf. */
    #site-bottom .pb-addon-feature > .pb-text-center > .pb-media-content {
        padding: 12px 8px 14px !important;
        min-height: 100px;
    }
}

/*
    Messehinweis auf der Startseite

    Steht zwischen dem Karussell und den Neuigkeiten und soll auffallen, ohne
    zu schreien: dunkelblauer Grund wie die Bänder der Seite, Halle und Stand
    als größte Zeile. Die Anschrift ist das, was jemand mitnimmt.

    Auf schmalen Bildschirmen steht der Knopf unter dem Text statt daneben.
*/
.messe-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 40px 0 48px;
    padding: 28px 32px;
    border-radius: 6px;
    background: #3c5c8d;
    color: #fff;
}

.messe-banner-logo {
    flex: 0 0 auto;
    padding: 10px;
    border-radius: 6px;
    background: #fff;
    line-height: 0;
}

.messe-banner-logo img {
    width: 88px;
    height: 88px;
}

.messe-banner-text {
    flex: 1 1 300px;
    min-width: 0;
}

.messe-banner-kicker {
    margin: 0 0 4px;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.messe-banner-heading {
    margin: 0 0 10px;
    font-size: 26px;
    line-height: 32px;
    color: #fff;
}

.messe-banner-stand {
    margin: 0 0 10px;
    font-size: 32px;
    line-height: 38px;
    font-weight: 700;
}

.messe-banner-stand .fa {
    margin-right: 10px;
    font-size: 26px;
    opacity: 0.8;
}

.messe-banner-extra {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.85);
}

.messe-banner-actions {
    flex: 0 0 auto;
}

.messe-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 4px;
    background: #fff;
    color: #3c5c8d;
    font-weight: 700;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.messe-banner-cta:hover,
.messe-banner-cta:focus {
    background: #eef3fa;
    color: #2d476e;
}


@media (max-width: 767px) {
    .messe-banner {
        margin: 24px 0 32px;
        padding: 22px 20px;
        gap: 18px;
    }

    .messe-banner-heading {
        font-size: 22px;
        line-height: 28px;
    }

    .messe-banner-stand {
        font-size: 26px;
        line-height: 32px;
    }

    .messe-banner-logo {
        padding: 8px;
    }

    .messe-banner-logo img {
        width: 64px;
        height: 64px;
    }

    .messe-banner-actions {
        flex: 1 1 100%;
    }

    .messe-banner-cta {
        width: 100%;
        justify-content: center;
    }
}