/* =========================================
   SERVICE RESPONSIVE PATCH V1
   Service-Seite auf Mobile-Basis + zentrale Standards
   Lädt nach mobil_styles_v5.css und responsive_global_patch_v28.css
   ========================================= */

/* Service ist Service-Seite:
   Desktop-Sidebar bleibt Offcanvas wie bei Kontakt/Kontaktformular. */
@media (min-width: 1024px) {
    body.page-service #wrapper {
        display: block !important;
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: 1320px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body.page-service #page-content-wrapper {
        width: 100% !important;
        max-width: 1120px !important;
        margin: 0 auto !important;
        padding: 34px 24px 104px 24px !important;
        box-sizing: border-box !important;
    }

    body.page-service #menu-toggle {
        display: inline-flex !important;
    }

    body.page-service #sidebar-wrapper {
        position: fixed !important;
        top: var(--topbar-height) !important;
        left: calc(50% - (var(--desktop-header-max-width) / 2)) !important;
        width: var(--sidebar-width) !important;
        height: calc(100vh - var(--topbar-height)) !important;
        margin-left: 0 !important;
        transform: translateX(-105%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 2147482500 !important;
        background: #fff !important;
        overflow-y: auto !important;
        box-shadow: 0 8px 28px rgba(0,0,0,0.24) !important;
        transition: transform 0.26s ease, opacity 0.18s ease, visibility 0.18s ease !important;
    }

    body.page-service #wrapper.toggled #sidebar-wrapper {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

@media (min-width: 1024px) and (max-width: 1360px) {
    body.page-service #sidebar-wrapper {
        left: 16px !important;
    }
}

@media (max-width: 1023px) {
    body.page-service #page-content-wrapper {
        padding: 18px 12px 82px 12px !important;
    }

    body.page-service #sidebar-wrapper {
        left: 0 !important;
        transform: translateX(-105%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.page-service #wrapper.toggled #sidebar-wrapper {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* Einheitlicher Service Header */
body.page-service .service-page-header {
    text-align: left !important;
    max-width: 760px !important;
    margin: 0 0 34px 0 !important;
}

@media (min-width: 1024px) {
    body.page-service .service-page-header {
        margin-left: -50px !important;
    }
}

@media (min-width: 1024px) and (max-width: 1360px) {
    body.page-service .service-page-header {
        margin-left: -30px !important;
    }
}

body.page-service .service-page-header h1 {
    margin: 0 0 8px 0 !important;
    color: #111 !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.3px !important;
}

body.page-service .service-page-subtitle {
    margin: 0 !important;
    color: #666 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* Service Content */
.service-content-flow {
    max-width: 960px;
    margin: 0;
    color: #222;
    font-size: 15px;
    line-height: 1.6;
}

.service-content-flow > div[style*="padding-left"] {
    padding-left: 0 !important;
}

.service-content-flow h2,
.service-content-flow h3 {
    color: #111;
    line-height: 1.25;
}

.service-content-flow h3 {
    margin: 28px 0 18px 0 !important;
    font-size: 21px !important;
    font-weight: 800 !important;
}

.service-content-flow p {
    margin: 0 0 14px 0;
}

.service-content-flow hr {
    border: 0;
    border-top: 1px solid #e8e8e8;
    margin: 34px 0;
}

.service-content-flow img {
    max-width: 100%;
    height: auto;
}

/* Video / Media */
.service-content-flow .video-container,
.service-content-flow .pswp-gallery {
    max-width: 760px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Versandtabellen aus Inline-HTML moderner stabilisieren */
.service-content-flow div[style*="display: flex"][style*="justify-content: space-between"] {
    min-height: 48px !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}

.service-content-flow div[style*="font-family: sans-serif"] {
    max-width: 960px !important;
    font-family: inherit !important;
    font-size: 15px !important;
}

/* Versandlogos */
.shipping-logos {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    margin: 18px 0 26px 0;
}

.shipping-logos img {
    width: 68px;
    height: auto;
    object-fit: contain;
}

/* Alte inline row-Strukturen entschärfen */
.service-content-flow .row {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Mobile */
@media (max-width: 560px) {
    body.page-service .service-page-header h1 {
        font-size: 24px !important;
    }

    .service-content-flow {
        max-width: 100%;
        font-size: 14px;
    }

    .service-content-flow h3 {
        font-size: 18px !important;
    }

    .service-content-flow hr {
        margin: 26px 0;
    }

    .shipping-logos {
        gap: 12px;
    }

    .shipping-logos img {
        width: 54px;
    }
}


/* =========================================
   SERVICE RESPONSIVE PATCH V2
   Service-Media-Fixes:
   - ser_headline_2 darf HTML enthalten
   - PDF-Logo linksbündig
   - Video volle Content-/Trennlinienbreite
   - Materialbild ohne thumb.php, direktes PNG, gleiche Breite wie Video
   ========================================= */

/* Service-Content bekommt eine klare Medienbreite */
body.page-service .service-content-flow {
    max-width: 960px !important;
}

/* Alte Inline-Zentrierungen im ersten PDF-Block neutralisieren */
body.page-service .service-content-flow a[href*="folien_info_"],
body.page-service .service-content-flow a[href*="service_manual_"] {
    display: inline-flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0 !important;
}

body.page-service .service-content-flow a[href*="folien_info_"] img,
body.page-service .service-content-flow a[href*="service_manual_"] img {
    display: block !important;
    margin-left: 0 !important;
}

/* Der direkte Parent mit alter Zentrierung wird linksbündig */
body.page-service .service-content-flow div[style*="max-width: 560px"] {
    max-width: 960px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}

/* Video so breit wie die Trennlinie / Content-Breite */
body.page-service .service-content-flow .video-container {
    width: 100% !important;
    max-width: 960px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.page-service .service-content-flow .video-container > div {
    width: 100% !important;
    max-width: 960px !important;
    box-sizing: border-box !important;
}

/* Materialbild: gleiche Breite wie Video, kein thumb.php */
body.page-service .service-material-block,
body.page-service .service-content-flow .pswp-gallery,
body.page-service .service-material-link {
    display: block !important;
    width: 100% !important;
    max-width: 960px !important;
    margin: 0 !important;
}

body.page-service .service-material-image {
    display: block !important;
    width: 100% !important;
    max-width: 960px !important;
    height: auto !important;
    margin: 0 !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    box-sizing: border-box !important;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.08) !important;
}

/* h3 darf HTML enthalten, aber optisch sauber bleiben */
body.page-service .service-page-subtitle * {
    font-size: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
}

/* Mobile bleibt fluid */
@media (max-width: 760px) {
    body.page-service .service-content-flow,
    body.page-service .service-content-flow .video-container,
    body.page-service .service-content-flow .video-container > div,
    body.page-service .service-material-block,
    body.page-service .service-content-flow .pswp-gallery,
    body.page-service .service-material-link,
    body.page-service .service-material-image {
        max-width: 100% !important;
    }
}


/* =========================================
   SERVICE RESPONSIVE PATCH V3
   PDF-Link, Trennlinien, Versandlogos, Zahlungsarten aus Checkout-Design.
   ========================================= */

/* Trennlinien auf Service dezenter: eher Abschnittsabstand als harte Linien */
body.page-service .service-content-flow hr {
    border: 0 !important;
    border-top: 1px solid #f0f0f0 !important;
    margin: 42px 0 34px 0 !important;
}

/* PDF-Logo links, keine alten negativen Margins */
body.page-service .service-content-flow a[href*="/catalogs/service_manual_"] {
    display: inline-flex !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
}

body.page-service .service-content-flow a[href*="/catalogs/service_manual_"] img {
    margin-left: 0 !important;
}

/* Versandunternehmen: Logos deutlich größer */
body.page-service .shipping-logos {
    gap: 26px !important;
    margin: 22px 0 36px 0 !important;
}

body.page-service .shipping-logos img {
    width: 96px !important;
    max-width: 96px !important;
    height: auto !important;
    object-fit: contain !important;
}

@media (max-width: 560px) {
    body.page-service .shipping-logos {
        gap: 16px !important;
    }

    body.page-service .shipping-logos img {
        width: 72px !important;
        max-width: 72px !important;
    }
}

/* Zahlungsarten aus s_cart_1, aber als reine Service-Info ohne Radio-Buttons */
body.page-service .service-payment-section {
    max-width: 960px !important;
    margin: 0 0 34px 0 !important;
}

body.page-service .service-payment-list {
    margin-top: 18px !important;
}

body.page-service .service-payment-list .payment-box {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
}

body.page-service .service-payment-option {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: 64px !important;
    padding: 14px 16px !important;
    border: 1px solid #e8e8e8 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    cursor: default !important;
}

body.page-service .service-payment-option .payment-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

body.page-service .service-payment-dot {
    flex: 0 0 8px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #e30613 !important;
}

body.page-service .service-payment-option .payment-logos {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
}

body.page-service .service-payment-option .payment-logos img {
    display: block !important;
    width: auto !important;
    max-width: 88px !important;
    max-height: 30px !important;
    height: auto !important;
    object-fit: contain !important;
}

body.page-service .service-payment-option .payment-logos img.visa {
    max-width: 64px !important;
}

body.page-service .service-payment-option .payment-logos img.gpay-logo {
    max-width: 56px !important;
    max-height: 34px !important;
}

body.page-service .service-payment-option .payment-name {
    color: #222 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: right !important;
    white-space: normal !important;
}

body.page-service .service-payment-note {
    margin: 16px 0 0 0 !important;
    color: #666 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

@media (max-width: 760px) {
    body.page-service .service-payment-list .payment-box {
        grid-template-columns: 1fr !important;
    }

    body.page-service .service-payment-option {
        min-height: 58px !important;
        padding: 12px 13px !important;
    }

    body.page-service .service-payment-option .payment-name {
        font-size: 14px !important;
    }
}


/* =========================================
   SERVICE RESPONSIVE PATCH V4
   Finales Payment-/Linien-Feintuning.
   ========================================= */

/* Trennlinien auf der Service-Seite fast komplett rausnehmen:
   Struktur kommt über Überschriften und Weißraum. */
body.page-service .service-content-flow hr {
    border: 0 !important;
    border-top: 1px solid transparent !important;
    margin: 28px 0 24px 0 !important;
}

/* Abschnittsabstände insgesamt etwas kompakter */
body.page-service .service-content-flow h3 {
    margin-top: 24px !important;
    margin-bottom: 14px !important;
}

/* Versandunternehmen kompakter, Logos groß lassen */
body.page-service .shipping-logos {
    gap: 22px !important;
    margin: 18px 0 30px 0 !important;
}

/* Paymentbox: kompaktere Abstände, keine roten Punkte */
body.page-service .service-payment-list {
    margin-top: 12px !important;
}

body.page-service .service-payment-list .payment-box {
    gap: 8px !important;
}

body.page-service .service-payment-option {
    min-height: 56px !important;
    padding: 10px 14px !important;
    gap: 12px !important;
}

body.page-service .service-payment-option .payment-left {
    gap: 0 !important;
}

/* Rote Punkte komplett entfernen */
body.page-service .service-payment-dot {
    display: none !important;
}

/* Logos etwas präsenter und besser ausgerichtet */
body.page-service .service-payment-option .payment-logos {
    min-width: 150px !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

body.page-service .service-payment-option .payment-logos img {
    max-width: 98px !important;
    max-height: 34px !important;
}

body.page-service .service-payment-option .payment-logos img.visa {
    max-width: 72px !important;
}

body.page-service .service-payment-option .payment-logos img.gpay-logo {
    max-width: 74px !important;
    max-height: 38px !important;
}

body.page-service .service-payment-option .payment-logos img.applepay-logo {
    max-width: 84px !important;
    max-height: 34px !important;
}

/* Fallback-Textlogos: sichtbar, wenn Logo nicht lädt oder zusätzlich bei kleinen Logos */
body.page-service .service-payment-logo-fallback {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
    color: #111 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

body.page-service .payment-logos:not(.logo-failed) .service-payment-logo-fallback {
    display: none !important;
}

/* Paymentnamen rechts etwas weniger weit weg / kompakter */
body.page-service .service-payment-option .payment-name {
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Rabatt-/Hinweisreste sicher ausblenden */
body.page-service .service-payment-note {
    display: none !important;
}

/* Mobile */
@media (max-width: 760px) {
    body.page-service .service-payment-list .payment-box {
        gap: 7px !important;
    }

    body.page-service .service-payment-option {
        min-height: 54px !important;
        padding: 10px 12px !important;
    }

    body.page-service .service-payment-option .payment-logos {
        min-width: 120px !important;
    }
}


/* =========================================
   SERVICE RESPONSIVE PATCH V5
   Abstände kompakter, Payment ohne Rahmen,
   PayPal-Text = Servicezuschlag, Logos stabiler.
   ========================================= */

/* Große Lücken zwischen Abschnitten reduzieren */
body.page-service .service-content-flow hr {
    display: none !important;
}

body.page-service .service-content-flow h3 {
    margin-top: 28px !important;
    margin-bottom: 12px !important;
}

body.page-service .service-content-flow p {
    margin-bottom: 10px !important;
}

/* Versandunternehmen näher an Zahlungsarten heran */
body.page-service .shipping-logos {
    margin: 16px 0 46px 0 !important;
}

/* Heading Zahlungsarten kompakter */
body.page-service .service-payment-section h3,
body.page-service #zahlungsarten + .service-payment-section h3,
body.page-service .service-payment-section .xr_s41 {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

/* Payment ohne Rahmen / ohne Kachel-Gefühl */
body.page-service .service-payment-list {
    margin-top: 8px !important;
}

body.page-service .service-payment-list .payment-box {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 10px !important;
    width: 100% !important;
}

body.page-service .service-payment-option {
    min-height: 42px !important;
    padding: 4px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #f1f1f1 !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 12px !important;
}

body.page-service .service-payment-option:nth-last-child(-n+2) {
    border-bottom: 0 !important;
}

/* Keine roten Punkte */
body.page-service .service-payment-dot {
    display: none !important;
}

/* Logos links sauber, Namen/Zuschläge rechts */
body.page-service .service-payment-option .payment-left {
    gap: 0 !important;
    min-width: 0 !important;
}

body.page-service .service-payment-option .payment-logos {
    min-width: 162px !important;
    width: 162px !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

body.page-service .service-payment-option .payment-logos img {
    display: block !important;
    width: auto !important;
    max-width: 104px !important;
    max-height: 34px !important;
    height: auto !important;
    object-fit: contain !important;
}

body.page-service .service-payment-option .payment-logos img.paypal-logo {
    max-width: 100px !important;
    max-height: 32px !important;
}

body.page-service .service-payment-option .payment-logos img.visa {
    max-width: 72px !important;
}

body.page-service .service-payment-option .payment-logos img.gpay-logo {
    max-width: 42px !important;
    max-height: 30px !important;
}

body.page-service .service-payment-option .payment-logos img.applepay-logo {
    max-width: 92px !important;
    max-height: 34px !important;
}

/* Fallback für GPay/Apple nur zeigen, wenn Bild ausfällt */
body.page-service .service-payment-logo-fallback {
    display: none !important;
}

body.page-service .payment-logos.logo-failed .service-payment-logo-fallback {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    color: #111 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Text rechts: PayPal zeigt jetzt z.B. + 1,0% Servicezuschlag */
body.page-service .service-payment-option .payment-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #222 !important;
    text-align: right !important;
    line-height: 1.3 !important;
}

/* Mobile: einspaltig und trotzdem kompakt */
@media (max-width: 760px) {
    body.page-service .service-payment-list .payment-box {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    body.page-service .service-payment-option {
        min-height: 44px !important;
    }

    body.page-service .service-payment-option:nth-last-child(-n+2) {
        border-bottom: 1px solid #f1f1f1 !important;
    }

    body.page-service .service-payment-option:last-child {
        border-bottom: 0 !important;
    }

    body.page-service .service-payment-option .payment-logos {
        width: 142px !important;
        min-width: 142px !important;
    }
}


/* =========================================
   SERVICE RESPONSIVE PATCH V6
   Payment harmonisiert:
   - weniger Luft zwischen Versandunternehmen/Zahlungsarten
   - Payment ohne Rahmenbox
   - GPay optisch größer über Textlogo-Fallback
   - Logos / Zuschläge auf ruhiger Achse
   ========================================= */

/* Abschnittsabstände rund um Versandunternehmen / Zahlungsarten */
body.page-service .service-content-flow h3 {
    margin-top: 22px !important;
    margin-bottom: 10px !important;
}

body.page-service .shipping-logos {
    gap: 22px !important;
    margin: 14px 0 24px 0 !important;
}

/* Paymentbereich näher an die Überschrift */
body.page-service .service-payment-section {
    max-width: 960px !important;
    margin: 0 0 28px 0 !important;
}

body.page-service .service-payment-section h3,
body.page-service .service-payment-section .xr_s41 {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

/* Keine harte Box mehr, nur klare zweispaltige Liste */
body.page-service .service-payment-list {
    margin-top: 4px !important;
}

body.page-service .service-payment-list .payment-box {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 42px !important;
    row-gap: 4px !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
}

/* Payment-Zeilen ohne Rahmen/Kachel */
body.page-service .service-payment-option {
    display: grid !important;
    grid-template-columns: 190px minmax(110px, 1fr) !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 2px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #f3f3f3 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: default !important;
}

body.page-service .service-payment-option:nth-last-child(-n+2) {
    border-bottom: 0 !important;
}

body.page-service .service-payment-option .payment-left {
    display: block !important;
    min-width: 0 !important;
}

body.page-service .service-payment-option .payment-logos {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 180px !important;
    min-width: 180px !important;
    min-height: 34px !important;
}

/* Gemeinsame Logo-Basis */
body.page-service .service-payment-option .payment-logos img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 104px !important;
    max-height: 34px !important;
    object-fit: contain !important;
}

/* Einzelne Logos harmonisieren */
body.page-service .service-payment-paypal .payment-logos img {
    max-width: 104px !important;
    max-height: 32px !important;
}

body.page-service .service-payment-card .payment-logos img.visa {
    max-width: 78px !important;
    max-height: 32px !important;
}

body.page-service .service-payment-card .payment-logos img:not(.visa) {
    max-width: 36px !important;
    max-height: 28px !important;
}

body.page-service .service-payment-sepa .payment-logos img {
    max-width: 96px !important;
    max-height: 34px !important;
}

body.page-service .service-payment-bank .payment-logos img {
    max-width: 42px !important;
    max-height: 34px !important;
}

body.page-service .service-payment-klarna .payment-logos img {
    max-width: 76px !important;
    max-height: 34px !important;
}

body.page-service .service-payment-amazon .payment-logos img {
    max-width: 112px !important;
    max-height: 34px !important;
}

body.page-service .service-payment-apple .payment-logos img {
    max-width: 96px !important;
    max-height: 34px !important;
}

/* GPay: das vorhandene Mark-Icon ist zu klein.
   Deshalb nutzen wir hier bewusst den vorhandenen Fallback als sichtbares Logo. */
body.page-service .service-payment-gpay .payment-logos img.gpay-logo {
    display: none !important;
}

body.page-service .service-payment-gpay .service-payment-logo-fallback {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 72px !important;
    height: 28px !important;
    padding: 0 10px !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 999px !important;
    color: #222 !important;
    background: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Andere Fallbacks nur bei Ladefehler zeigen */
body.page-service .service-payment-logo-fallback {
    display: none !important;
}

body.page-service .service-payment-gpay .service-payment-logo-fallback,
body.page-service .payment-logos.logo-failed .service-payment-logo-fallback {
    display: inline-flex !important;
}

/* Zuschläge rechts ruhiger */
body.page-service .service-payment-option .payment-name {
    display: block !important;
    color: #111 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* Alte rote Punkte sicher weg */
body.page-service .service-payment-dot {
    display: none !important;
}

/* Mobile */
@media (max-width: 760px) {
    body.page-service .service-payment-list .payment-box {
        grid-template-columns: 1fr !important;
        column-gap: 0 !important;
        row-gap: 2px !important;
    }

    body.page-service .service-payment-option {
        grid-template-columns: 170px minmax(100px, 1fr) !important;
        min-height: 40px !important;
        border-bottom: 1px solid #f3f3f3 !important;
    }

    body.page-service .service-payment-option:last-child {
        border-bottom: 0 !important;
    }

    body.page-service .service-payment-option .payment-logos {
        width: 160px !important;
        min-width: 160px !important;
    }

    body.page-service .service-payment-option .payment-name {
        font-size: 13px !important;
    }
}


/* =========================================
   SERVICE RESPONSIVE PATCH V7
   Final Payment:
   - Paymentbereich vertikal etwas ruhiger/gestreckter
   - GPay sichtbar und größer als Text-Badge
   ========================================= */

/* Payment-Zeilen wieder etwas höher und ruhiger */
body.page-service .service-payment-option {
    min-height: 48px !important;
    padding: 6px 0 !important;
    align-items: center !important;
}

/* Payment-Grid bleibt kompakt, aber nicht gequetscht */
body.page-service .service-payment-list .payment-box {
    row-gap: 6px !important;
}

/* Logo-Spalte vertikal mittig */
body.page-service .service-payment-option .payment-left,
body.page-service .service-payment-option .payment-logos {
    min-height: 38px !important;
    align-items: center !important;
}

/* Zahlungszuschläge vertikal sauber zentriert */
body.page-service .service-payment-option .payment-name {
    align-self: center !important;
    line-height: 1.35 !important;
}

/* GPay: SVG/Mark ausblenden und Badge IMMER anzeigen */
body.page-service .service-payment-gpay .payment-logos img.gpay-logo {
    display: none !important;
}

body.page-service .service-payment-gpay .payment-logos {
    min-height: 38px !important;
}

/* Maximal spezifisch, damit ältere Fallback-Regeln nicht gewinnen */
body.page-service .service-payment-option.service-payment-gpay .payment-logos .service-payment-logo-fallback {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 88px !important;
    height: 34px !important;
    padding: 0 13px !important;
    border: 1px solid #d2d2d2 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #222 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Falls eine alte allgemeine Fallback-Regel danach greift: nochmal sichern */
body.page-service .service-payment-gpay .service-payment-logo-fallback {
    display: inline-flex !important;
}

/* Apple optisch etwas ruhiger zur neuen GPay-Höhe */
body.page-service .service-payment-apple .payment-logos img.applepay-logo {
    max-width: 104px !important;
    max-height: 36px !important;
}

/* Mobile ebenfalls etwas luftiger */
@media (max-width: 760px) {
    body.page-service .service-payment-option {
        min-height: 48px !important;
        padding: 6px 0 !important;
    }

    body.page-service .service-payment-option.service-payment-gpay .payment-logos .service-payment-logo-fallback {
        min-width: 82px !important;
        height: 32px !important;
        font-size: 17px !important;
    }
}


/* =========================================
   SERVICE RESPONSIVE PATCH V8
   Final Payment Spacing:
   - Payment-Liste vertikal stärker gestreckt
   - Google Pay optisch als größeres Textlogo
   - Mehr Abstand vor Ressourcen
   ========================================= */

/* Payment-Zeilen deutlich ruhiger / höher */
body.page-service .service-payment-option {
    min-height: 58px !important;
    padding: 10px 0 !important;
    align-items: center !important;
}

body.page-service .service-payment-list .payment-box {
    row-gap: 8px !important;
}

/* Logo-Spalte ebenfalls höher, damit alles sauber mittig sitzt */
body.page-service .service-payment-option .payment-left,
body.page-service .service-payment-option .payment-logos {
    min-height: 44px !important;
    align-items: center !important;
}

/* Zuschläge mittig zur höheren Zeile */
body.page-service .service-payment-option .payment-name {
    align-self: center !important;
    line-height: 1.4 !important;
}

/* GPay: vorhandenes Mini-Mark ausblenden */
body.page-service .service-payment-gpay .payment-logos img.gpay-logo {
    display: none !important;
}

/* GPay als größeres, sauberes Textlogo darstellen */
body.page-service .service-payment-option.service-payment-gpay .payment-logos .service-payment-logo-fallback {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 96px !important;
    height: 38px !important;
    padding: 0 14px !important;
    border: 1px solid #cfcfcf !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #202124 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    letter-spacing: -0.3px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Kleine Google-Farb-Anmutung über den ersten Buchstaben ist mit purem Text schwer,
   aber die Größe und Form passen jetzt deutlich besser zur restlichen Payment-Reihe. */
body.page-service .service-payment-gpay .service-payment-logo-fallback {
    display: inline-flex !important;
}

/* Apple Pay passend zur höheren Zeile */
body.page-service .service-payment-apple .payment-logos img.applepay-logo {
    max-width: 112px !important;
    max-height: 40px !important;
}

/* PayPal/Klarna/Amazon minimal größer, damit die gestreckte Zeile nicht leer wirkt */
body.page-service .service-payment-paypal .payment-logos img {
    max-width: 112px !important;
    max-height: 36px !important;
}

body.page-service .service-payment-klarna .payment-logos img {
    max-width: 84px !important;
    max-height: 36px !important;
}

body.page-service .service-payment-amazon .payment-logos img {
    max-width: 120px !important;
    max-height: 38px !important;
}

/* Mehr Luft nach dem Zahlungsartenblock vor Ressourcen */
body.page-service .service-payment-section {
    margin-bottom: 58px !important;
}

/* Falls Ressourcen direkt nach Payment kommt, extra absichern */
body.page-service .service-payment-section + hr,
body.page-service .service-payment-section + br,
body.page-service .service-payment-section + a[name="downloads"] {
    margin-top: 0 !important;
}

body.page-service a#downloads,
body.page-service a[name="downloads"] {
    display: block !important;
    scroll-margin-top: 80px !important;
}

/* Die Ressourcen-Überschrift bekommt Abstand nach oben, auch wenn alte HR/BR noch im Markup stehen */
body.page-service a#downloads + p,
body.page-service a[name="downloads"] + p {
    margin-top: 18px !important;
}

/* Mobile */
@media (max-width: 760px) {
    body.page-service .service-payment-option {
        min-height: 54px !important;
        padding: 8px 0 !important;
    }

    body.page-service .service-payment-option.service-payment-gpay .payment-logos .service-payment-logo-fallback {
        min-width: 88px !important;
        height: 34px !important;
        font-size: 17px !important;
    }

    body.page-service .service-payment-section {
        margin-bottom: 46px !important;
    }
}


/* =========================================
   SERVICE RESPONSIVE PATCH V9
   Final Harmonie:
   - echtes GPay Logo wie im Checkout
   - Zuschlag-Schrift nicht bold, passend zur Service-Seite
   - linke Einrückung für Payment-Logos wie Versandlogos
   - Ressourcen-Banner links auf dieselbe Achse
   ========================================= */

/* Payment-Bereich insgesamt etwas wie Versandlogos einrücken */
body.page-service .service-payment-section {
    padding-left: 14px !important;
    box-sizing: border-box !important;
}

/* Payment-Zeilen bleiben gestreckt, aber sauber */
body.page-service .service-payment-option {
    min-height: 58px !important;
    padding: 9px 0 !important;
}

/* Linke Logo-Spalte etwas nach innen, ähnlich Versandlogos */
body.page-service .service-payment-option .payment-logos {
    padding-left: 0 !important;
    width: 190px !important;
    min-width: 190px !important;
}

/* Zuschläge: nicht bold, optisch wie Service-Hinweistext */
body.page-service .service-payment-option .payment-name {
    color: #444 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* ECHTES GPay-Logo verwenden, kein Fallback-Badge */
body.page-service .service-payment-gpay .payment-logos img.gpay-logo {
    display: block !important;
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    height: auto !important;
    max-height: none !important;
    margin-left: -10px !important;
    object-fit: contain !important;
}

/* Fallback bei GPay nur zeigen, wenn das Logo wirklich ausfällt */
body.page-service .service-payment-gpay .payment-logos:not(.logo-failed) .service-payment-logo-fallback {
    display: none !important;
}

body.page-service .service-payment-gpay .payment-logos.logo-failed .service-payment-logo-fallback {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 90px !important;
    height: 32px !important;
    padding: 0 12px !important;
    border: 1px solid #d2d2d2 !important;
    border-radius: 999px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}

/* Andere Logos leicht harmonisieren zur neuen GPay-Größe */
body.page-service .service-payment-paypal .payment-logos img {
    max-width: 112px !important;
    max-height: 36px !important;
}

body.page-service .service-payment-sepa .payment-logos img {
    max-width: 112px !important;
    max-height: 38px !important;
}

body.page-service .service-payment-klarna .payment-logos img {
    max-width: 86px !important;
    max-height: 36px !important;
}

body.page-service .service-payment-apple .payment-logos img.applepay-logo {
    max-width: 112px !important;
    max-height: 40px !important;
}

/* Ressourcen-Bereich auf dieselbe linke Achse wie Versandlogos/Payment */
body.page-service a#downloads,
body.page-service a[name="downloads"] {
    display: block !important;
}

body.page-service a#downloads + p,
body.page-service a[name="downloads"] + p {
    margin-top: 22px !important;
    margin-left: 14px !important;
}

/* Der Banner-/Downloadblock darunter wird ebenfalls eingerückt */
body.page-service a#downloads + p + .text-center,
body.page-service a[name="downloads"] + p + .text-center {
    text-align: left !important;
    margin-left: 14px !important;
}

/* Banner nicht künstlich zentrieren */
body.page-service .service-content-flow .text-center {
    text-align: left !important;
}

/* Versandlogos bleiben Referenzachse */
body.page-service .shipping-logos {
    padding-left: 14px !important;
    box-sizing: border-box !important;
}

/* Mobile: Einrückung zurücknehmen */
@media (max-width: 760px) {
    body.page-service .service-payment-section,
    body.page-service .shipping-logos,
    body.page-service a#downloads + p,
    body.page-service a[name="downloads"] + p,
    body.page-service a#downloads + p + .text-center,
    body.page-service a[name="downloads"] + p + .text-center {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    body.page-service .service-payment-option .payment-logos {
        width: 170px !important;
        min-width: 170px !important;
    }

    body.page-service .service-payment-gpay .payment-logos img.gpay-logo {
        width: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
        margin-left: -8px !important;
    }

    body.page-service .service-payment-option .payment-name {
        font-size: 13px !important;
        white-space: normal !important;
    }
}


/* =========================================
   SERVICE RESPONSIVE PATCH V10
   Finale Achsenkorrektur:
   Payment-Logos und Ressourcen-Banner beginnen auf derselben
   linken Achse wie das Deutsche-Post-Logo.
   ========================================= */

/* Gemeinsame optische Einrückung */
:root {
    --rs-service-logo-axis: 14px;
}

/* Versandlogos bleiben Referenz */
body.page-service .shipping-logos {
    padding-left: var(--rs-service-logo-axis) !important;
    box-sizing: border-box !important;
}

/* Zahlungsarten: Section nicht doppelt einrücken, sondern Logo-Spalte exakt auf Versandlogo-Achse setzen */
body.page-service .service-payment-section {
    padding-left: 0 !important;
}

body.page-service .service-payment-option {
    grid-template-columns: 204px minmax(110px, 1fr) !important;
}

/* Payment-Logo links exakt wie Deutsche Post */
body.page-service .service-payment-option .payment-left,
body.page-service .service-payment-option .payment-logos {
    padding-left: var(--rs-service-logo-axis) !important;
    box-sizing: border-box !important;
}

/* Die Logo-Spalte bleibt trotz Padding breit genug */
body.page-service .service-payment-option .payment-logos {
    width: 204px !important;
    min-width: 204px !important;
}

/* GPay Checkout-Logo behält seine interne -10px-Korrektur, aber gesamte Achse bleibt korrekt */
body.page-service .service-payment-gpay .payment-logos img.gpay-logo {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    margin-left: -10px !important;
}

/* Ressourcen-Überschrift und Banner ebenfalls auf dieselbe Achse */
body.page-service a#downloads + p,
body.page-service a[name="downloads"] + p {
    margin-left: var(--rs-service-logo-axis) !important;
}

body.page-service a#downloads + p + .text-center,
body.page-service a[name="downloads"] + p + .text-center,
body.page-service .service-content-flow .text-center {
    margin-left: var(--rs-service-logo-axis) !important;
    text-align: left !important;
}

/* Banner selbst nicht durch alte center-/inline-Regeln verschieben */
body.page-service .service-content-flow .text-center img,
body.page-service .service-content-flow .text-center a {
    margin-left: 0 !important;
}

/* Mobile: keine Desktop-Einrückung erzwingen */
@media (max-width: 760px) {
    :root {
        --rs-service-logo-axis: 0px;
    }

    body.page-service .shipping-logos,
    body.page-service .service-payment-option .payment-left,
    body.page-service .service-payment-option .payment-logos,
    body.page-service a#downloads + p,
    body.page-service a[name="downloads"] + p,
    body.page-service a#downloads + p + .text-center,
    body.page-service a[name="downloads"] + p + .text-center,
    body.page-service .service-content-flow .text-center {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    body.page-service .service-payment-option {
        grid-template-columns: 170px minmax(100px, 1fr) !important;
    }

    body.page-service .service-payment-option .payment-logos {
        width: 170px !important;
        min-width: 170px !important;
    }
}


/* =========================================
   SERVICE RESPONSIVE PATCH V12
   Sicherheits-Fix:
   - PHP V11 entfernt doppelten Footer/Wrapper
   - PDF-Link ohne Inline-Negativmargin
   - kleine Markup-Säuberung
   ========================================= */

body.page-service .service-pdf-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
}

body.page-service .service-pdf-link img {
    display: block !important;
    margin-left: 0 !important;
}


/* =========================================
   SERVICE MOBILE FINAL CLEANUP
   Grundlage: voller V11-Stand wiederhergestellt.
   Nur gezielte mobile Korrekturen.
   ========================================= */

@media (max-width: 760px) {

    /*
       Überschriften wie bei Kontakt/Bankverbindung:
       schwarz, 18px, ruhige Abstände.
    */
    body.page-service .service-content-flow h3,
    body.page-service .service-payment-section h3,
    body.page-service .service-payment-section .xr_s41 {
        margin: 26px 0 12px 0 !important;
        padding: 0 !important;
        font-size: 18px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        color: #222 !important;
        text-transform: none !important;
    }

    body.page-service .service-content-flow p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #444 !important;
    }

    /*
       Trennlinien optisch rausnehmen, aber Abschnittsabstand behalten.
    */
    body.page-service .service-content-flow hr {
        border: 0 !important;
        border-top: 0 !important;
        height: 0 !important;
        margin: 28px 0 24px 0 !important;
        background: none !important;
    }

    /*
       PDF-Thumb/Icon darf nicht auf 100% aufblasen.
    */
    body.page-service .service-content-flow a[href*="/catalogs/service_manual_"] img,
    body.page-service .service-pdf-link img {
        display: inline-block !important;
        width: 127px !important;
        max-width: 127px !important;
        height: auto !important;
        max-height: 63px !important;
        object-fit: contain !important;
        border: 0 !important;
    }

    /*
       Status-Ampeln behalten ihre echte Größe.
    */
    body.page-service .service-content-flow img[src*="status_"] {
        display: inline-block !important;
        width: 43px !important;
        max-width: 43px !important;
        height: 10px !important;
        max-height: 10px !important;
        object-fit: contain !important;
        vertical-align: middle !important;
    }

    /*
       Werbebanner/Thumbs nicht global auf 100%.
    */
    body.page-service .text-center img[width="468"] {
        width: 100% !important;
        max-width: 468px !important;
        height: auto !important;
    }

    body.page-service .text-center img[width="113"] {
        width: 113px !important;
        max-width: 113px !important;
        height: 113px !important;
        max-height: 113px !important;
        object-fit: contain !important;
    }

    /*
       Versandlogos kontrolliert.
    */
    body.page-service .shipping-logos img {
        width: 72px !important;
        max-width: 72px !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /*
       Payment-Logos: niemals 100%.
       Die eigentlichen v11-Regeln sind wieder da; diese Zeilen sichern mobil ab.
    */
    body.page-service .service-payment-option .payment-logos img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 104px !important;
        max-height: 34px !important;
        object-fit: contain !important;
    }

    body.page-service .service-payment-paypal .payment-logos img {
        max-width: 104px !important;
        max-height: 32px !important;
    }

    body.page-service .service-payment-card .payment-logos img.visa {
        max-width: 78px !important;
        max-height: 32px !important;
    }

    body.page-service .service-payment-card .payment-logos img:not(.visa) {
        max-width: 36px !important;
        max-height: 28px !important;
    }

    body.page-service .service-payment-klarna .payment-logos img {
        max-width: 76px !important;
        max-height: 34px !important;
    }

    body.page-service .service-payment-amazon .payment-logos img {
        max-width: 112px !important;
        max-height: 34px !important;
    }

    body.page-service .service-payment-apple .payment-logos img.applepay-logo {
        max-width: 104px !important;
        max-height: 36px !important;
    }
}


/* =========================================
   SERVICE MOBILE FINETUNE 2
   präzise Nachkorrektur nach Quelltextprüfung.
   ========================================= */

@media (max-width: 760px) {

    /*
       Quelltext-Struktur:
       .video-container liegt innerhalb der ersten .row.
       Danach kommt erst </div>, dann <br>, dann <hr>.
       Deshalb greift .video-container + br NICHT.
    */
    body.page-service .service-inner-content > .row:first-of-type,
    body.page-service .service-content-flow > .row:first-of-type {
        margin-bottom: 0 !important;
    }

    body.page-service .service-inner-content > .row:first-of-type + br,
    body.page-service .service-content-flow > .row:first-of-type + br {
        display: none !important;
    }

    body.page-service .service-inner-content > .row:first-of-type + br + hr,
    body.page-service .service-inner-content > .row:first-of-type + hr,
    body.page-service .service-content-flow > .row:first-of-type + br + hr,
    body.page-service .service-content-flow > .row:first-of-type + hr {
        margin-top: 8px !important;
        margin-bottom: 12px !important;
    }

    body.page-service .video-container {
        margin-bottom: 0 !important;
    }

    /*
       Ressourcen / Quellen-Hinweis:
       jetzt deutlich kleiner.
    */
    body.page-service .text-center .xr_s4,
    body.page-service .service-inner-content .xr_s4,
    body.page-service .service-content-flow .xr_s4 {
        font-size: 12.5px !important;
        line-height: 1.34 !important;
        font-weight: 300 !important;
        color: #777 !important;
        letter-spacing: 0 !important;
        margin: 6px 0 14px 0 !important;
        padding: 0 !important;
    }

    body.page-service .text-center .xr_s4 a,
    body.page-service .service-inner-content .xr_s4 a,
    body.page-service .service-content-flow .xr_s4 a {
        font-size: inherit !important;
        line-height: inherit !important;
        color: #666 !important;
        word-break: break-word !important;
    }

    /*
       Payment Logos: alle Logo-Gruppen 5px nach rechts.
    */
    body.page-service .service-payment-option .payment-logos {
        transform: translateX(1px) !important;
    }

    /*
       American Express war zu quadratisch/dominant.
       Nur dieses Logo gezielt flacher/kleiner.
    */
    body.page-service .service-payment-option .payment-logos img[alt*="American"],
    body.page-service .service-payment-card .payment-logos img[alt*="American"] {
        width: auto !important;
        max-width: 28px !important;
        height: auto !important;
        max-height: 22px !important;
        object-fit: contain !important;
    }

    /*
       Kreditkarten-Gruppe insgesamt ruhiger,
       Visa darf länglicher bleiben, Master/AmEx kleiner.
    */
    body.page-service .service-payment-card .payment-logos img.visa {
        max-width: 72px !important;
        max-height: 28px !important;
    }

    body.page-service .service-payment-card .payment-logos img:not(.visa):not([alt*="American"]) {
        max-width: 32px !important;
        max-height: 24px !important;
    }
}


/* =========================================
   SERVICE MOBILE FINAL GAP NOTES
   finaler Abstand/Notiz-Fix.
   ========================================= */

@media (max-width: 760px) {

    /*
       Video-Abstand final:
       Quelltext ist:
       .row:first-of-type → br → hr → h3
       Deshalb wird genau diese Kette halbiert.
    */
    body.page-service .service-inner-content > .row:first-of-type,
    body.page-service .service-content-flow > .row:first-of-type {
        margin-bottom: 0 !important;
    }

    body.page-service .service-inner-content > .row:first-of-type + br,
    body.page-service .service-content-flow > .row:first-of-type + br {
        display: none !important;
    }

    body.page-service .service-inner-content > .row:first-of-type + br + hr,
    body.page-service .service-inner-content > .row:first-of-type + hr,
    body.page-service .service-content-flow > .row:first-of-type + br + hr,
    body.page-service .service-content-flow > .row:first-of-type + hr {
        margin-top: 4px !important;
        margin-bottom: 6px !important;
    }

    body.page-service .service-inner-content > .row:first-of-type + br + hr + h3,
    body.page-service .service-inner-content > .row:first-of-type + hr + h3,
    body.page-service .service-content-flow > .row:first-of-type + br + hr + h3,
    body.page-service .service-content-flow > .row:first-of-type + hr + h3 {
        margin-top: 13px !important;
    }

    /*
       Versandkosten-Hinweise unter Deutschland/Ausland:
       gleiche kleine Schrift wie Ressourcen.
    */
    body.page-service .service-shipping-note {
        font-size: 12.5px !important;
        line-height: 1.34 !important;
        font-weight: 300 !important;
        color: #777 !important;
        letter-spacing: 0 !important;
        margin: 6px 0 14px 0 !important;
        padding: 10px 10px 4px 10px !important;
    }

    body.page-service .service-shipping-note a,
    body.page-service .service-shipping-note * {
        font-size: inherit !important;
        line-height: inherit !important;
        font-weight: inherit !important;
        color: inherit !important;
    }
}


/* =========================================
   SERVICE MOBILE FINAL LAST TUNE
   letzter Feinschliff.
   ========================================= */

@media (max-width: 760px) {

    /*
       Video-Abstand nochmals kleiner:
       echte Struktur bleibt .row → br → hr → h3.
    */
    body.page-service .service-inner-content > .row:first-of-type + br + hr,
    body.page-service .service-inner-content > .row:first-of-type + hr,
    body.page-service .service-content-flow > .row:first-of-type + br + hr,
    body.page-service .service-content-flow > .row:first-of-type + hr {
        margin-top: 2px !important;
        margin-bottom: 3px !important;
    }

    body.page-service .service-inner-content > .row:first-of-type + br + hr + h3,
    body.page-service .service-inner-content > .row:first-of-type + hr + h3,
    body.page-service .service-content-flow > .row:first-of-type + br + hr + h3,
    body.page-service .service-content-flow > .row:first-of-type + hr + h3 {
        margin-top: 8px !important;
    }

    /*
       Liefer-/Leistungszeiten-Schlussabsatz:
       gleiche kleine Schrift wie Ressourcen und Versandkosten-Hinweise.
    */
    body.page-service .service-small-note {
        font-size: 12.5px !important;
        line-height: 1.34 !important;
        font-weight: 300 !important;
        color: #777 !important;
        letter-spacing: 0 !important;
        margin: 6px 0 14px 0 !important;
        padding: 0 !important;
    }

    body.page-service .service-small-note * {
        font-size: inherit !important;
        line-height: inherit !important;
        font-weight: inherit !important;
        color: inherit !important;
    }
}


/* =========================================
   SERVICE MOBILE FINAL MICRO TUNE
   H1 + Video-BR + kleine Hinweise.
   ========================================= */

@media (max-width: 760px) {

    /*
       Video-Abstand final:
       das störende <br> wurde in service.php entfernt.
       Dieser Separator hat praktisch keinen Außenabstand.
    */
    body.page-service .service-video-separator {
        display: block !important;
        border: 0 !important;
        border-top: 0 !important;
        height: 0 !important;
        margin: 1px 0 2px 0 !important;
        padding: 0 !important;
        background: none !important;
    }

    body.page-service .service-after-video-heading {
        margin-top: 6px !important;
        margin-bottom: 12px !important;
    }

    /*
       Ressourcen + kleine Hinweise gemeinsam steuern.
       Schlussabsatz und Versandkosten-Hinweise sind damit wirklich klein.
    */
    body.page-service .text-center .xr_s4,
    body.page-service .service-inner-content .xr_s4,
    body.page-service .service-content-flow .xr_s4,
    body.page-service .service-shipping-note,
    body.page-service .service-small-note {
        font-size: 11.5px !important;
        line-height: 1.32 !important;
        font-weight: 300 !important;
        color: #777 !important;
        letter-spacing: 0 !important;
    }

    body.page-service .service-small-note {
        margin: 5px 0 12px 0 !important;
        padding: 0 !important;
    }

    body.page-service .service-shipping-note {
        margin: 5px 0 12px 0 !important;
        padding: 8px 10px 3px 10px !important;
    }

    body.page-service .text-center .xr_s4 {
        margin: 6px 0 14px 0 !important;
        padding: 0 !important;
    }

    body.page-service .text-center .xr_s4 *,
    body.page-service .service-inner-content .xr_s4 *,
    body.page-service .service-content-flow .xr_s4 *,
    body.page-service .service-shipping-note *,
    body.page-service .service-small-note * {
        font-size: inherit !important;
        line-height: inherit !important;
        font-weight: inherit !important;
        color: inherit !important;
    }
}


/* =========================================
   SERVICE SMALL NOTE HARD SIZE FIX
   Schlussabsatz Liefer-/Leistungszeiten wirklich klein.
   ========================================= */

@media (max-width: 760px) {
    body.page-service main#page-content-wrapper .service-content-flow p.service-small-note,
    body.page-service main#page-content-wrapper .service-inner-content p.service-small-note,
    body.page-service p.service-small-note {
        display: block !important;
        font-size: 11px !important;
        line-height: 1.32 !important;
        font-weight: 300 !important;
        color: #777 !important;
        letter-spacing: 0 !important;
        margin: 5px 0 12px 0 !important;
        padding: 0 !important;
    }

    body.page-service main#page-content-wrapper .service-content-flow p.service-small-note *,
    body.page-service main#page-content-wrapper .service-inner-content p.service-small-note *,
    body.page-service p.service-small-note * {
        font-size: 11px !important;
        line-height: 1.32 !important;
        font-weight: 300 !important;
        color: #777 !important;
        letter-spacing: 0 !important;
    }
}


/* =========================================
   SERVICE STATUS ROW INDENT FINAL
   Ampel links, Text sauber rechts eingerückt.
   ========================================= */

@media (max-width: 760px) {
    body.page-service .service-status-row {
        display: grid !important;
        grid-template-columns: 78px minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 0 !important;
        margin: 0 0 13px 0 !important;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
        font-weight: 300 !important;
        color: #444 !important;
        letter-spacing: 0 !important;
    }

    body.page-service .service-status-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 78px !important;
        min-width: 78px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.page-service .service-status-icon img {
        display: block !important;
        width: 43px !important;
        max-width: 43px !important;
        height: 10px !important;
        max-height: 10px !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.page-service .service-status-text {
        display: block !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: inherit !important;
        line-height: inherit !important;
        font-weight: inherit !important;
        color: inherit !important;
    }
}


/* =========================================
   SERVICE SMALL NOTE INDENT FINAL
   Schlussabsatz unter Liefer-/Leistungszeiten
   beginnt optisch auf Höhe der Ampeln.
   ========================================= */

@media (max-width: 760px) {
    body.page-service main#page-content-wrapper .service-content-flow p.service-small-note,
    body.page-service main#page-content-wrapper .service-inner-content p.service-small-note,
    body.page-service p.service-small-note {
        margin-left: 25px !important;
        margin-right: 0 !important;
        max-width: calc(100% - 25px) !important;
    }
}


/* =========================================
   SERVICE DESKTOP SUBTITLE V17
   Subtitle 1px höher gegenüber V16.
   ========================================= */
@media (min-width: 1024px) {
    body.page-service .service-page-header > .service-page-subtitle,
    body.page-service .service-page-header > p.service-page-subtitle {
        position: relative !important;
        top: 4px !important;
        transform: translateY(4px) !important;
    }
}


/* =========================================
   SERVICE DESKTOP INNER CONTENT HARD TEST V21
   Wie bei show_category:
   Nicht den äußeren Wrapper ändern, sondern den tatsächlich
   sichtbaren inneren Inhaltsblock direkt begrenzen.
   Ziel:
   - H1/Header unverändert
   - Inhalt links 3px weiter nach links gegenüber V19
   - rechte sichtbare Kante ca. 30px nach links
   - Video/Materialbild mit eigener Max-Breite nicht verkleinern
   ========================================= */
@media (min-width: 1024px) {
    body.page-service .service-content-flow {
        width: 100% !important;
        max-width: none !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    body.page-service .service-content-flow > div[style*="padding-left"] {
        width: calc(100% - 31px) !important;
        max-width: calc(100% - 31px) !important;
        margin-left: -4px !important;
        margin-right: 30px !important;
        padding-left: 5px !important;
        box-sizing: border-box !important;
    }

    body.page-service .service-content-flow > div[style*="padding-left"] > div[style*="width: 100%"],
    body.page-service .service-content-flow .service-payment-section,
    body.page-service .service-content-flow .custom-payment,
    body.page-service .service-content-flow .payment-box {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.page-service .service-content-flow .video-container,
    body.page-service .service-content-flow .service-material-block,
    body.page-service .service-content-flow .service-material-link {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.page-service .service-content-flow .video-container > div {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.page-service .service-content-flow .service-material-image {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
}


/* =========================================
   SERVICE DESKTOP MEDIA HARD WIDE V21
   Video/Material-Thumb bis an die sichtbare Inhaltskante.
   Überschreibt alte stärkere 960px-/pswp-Regeln gezielt.
   ========================================= */
@media (min-width: 1024px) {
    body.page-service .service-content-flow div.video-container[style*="max-width"],
    body.page-service .service-content-flow .video-container,
    body.page-service .service-content-flow .video-container > div {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.page-service .service-content-flow #my-gallery.pswp-gallery,
    body.page-service .service-content-flow .pswp-gallery,
    body.page-service .service-content-flow .service-material-block,
    body.page-service .service-content-flow .service-material-link,
    body.page-service .service-content-flow .service-material-image {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.page-service .service-content-flow .service-material-image {
        height: auto !important;
    }
}