/* =========================================
   CONTACT RESPONSIVE PATCH V3
   Linkslastiger Service-Content, leichtere Boxen
   Lädt nach mobil_styles_v5.css und responsive_global_patch_v26.css
   ========================================= */

/* Kontakt ist Service-Seite, keine Shop-Listing-Seite:
   Sidebar bleibt auch auf Desktop Offcanvas wie auf der Startseite. */
@media (min-width: 1024px) {
    body.page-contact #wrapper {
        display: block;
        width: 100%;
        max-width: 1320px;
        margin: 0 auto;
        padding: 0;
        overflow: visible;
    }

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

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

    body.page-contact #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(-102%) !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-contact #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-contact #sidebar-wrapper {
        left: 16px !important;
    }
}

@media (max-width: 1023px) {
    body.page-contact #page-content-wrapper {
        padding: 18px 12px 32px 12px;
    }

    body.page-contact #sidebar-wrapper {
        left: 0 !important;
    }
}

/* ---------- Grundlayout ---------- */

.contact-page {
    color: #222;
}

/* Kontakt/Service: linkslastig und näher an der linken Content-Kante.
   Auf Desktop beginnt die Headline ca. 10px nach der linken Content-Kante. */
.contact-page-header {
    text-align: left;
    margin: 0 0 30px 0;
    max-width: 760px;
}

@media (min-width: 1024px) {
    .contact-page-header {
        margin-left: 10px;
    }
}

.contact-page-header h1 {
    margin: 0 0 8px 0;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.3px;
}

.contact-page-header p {
    margin: 0;
    color: #666;
    font-size: 16px;
}

/* ---------- Kontakt-Karten: leichter, weniger Box-Charakter ---------- */

.contact-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 0 0 22px 0;
}

/* Rahmen stark entschärft:
   keine roten Card-Rahmen, keine schweren Boxen.
   Nur feine Linien und sehr leichte Fläche für Struktur. */
.contact-card,
.contact-payment-card,
.contact-legal-item {
    background: #fff;
    border: 0;
    border-top: 1px solid #e8e8e8;
    box-sizing: border-box;
}

.contact-card {
    padding: 18px 18px 16px 18px;
    min-height: 0;
}

/* Optional für spätere echte Hervorhebungen */
.contact-highlight {
    border-left: 4px solid #e30613 !important;
    background: #fafafa !important;
}

.contact-card h2,
.contact-payment-card h2 {
    margin: 0 0 12px 0;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
}

.contact-card h3 {
    margin: 16px 0 8px 0;
    font-size: 15px;
    line-height: 1.25;
}

.contact-card p,
.contact-card address,
.contact-payment-card p {
    margin: 0;
    font-style: normal;
    color: #444;
    font-size: 15px;
    line-height: 1.6;
}

.contact-card a,
.contact-payment-card a {
    color: #222;
    text-decoration: none;
}

.contact-card a:hover,
.contact-payment-card a:hover {
    color: #e30613;
}

.contact-obfuscated-mail {
    word-break: break-word;
}

/* ---------- Bank / Payment ---------- */

.contact-payment-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 18px;
    margin: 0 0 28px 0;
    border-bottom: 1px solid #e8e8e8;
}

.contact-payment-methods {
    display: grid;
    gap: 14px;
}

.contact-payment-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.contact-payment-row img {
    flex: 0 0 auto;
    max-width: 115px;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.contact-payment-row span {
    min-width: 0;
    word-break: break-word;
    color: #444;
    font-size: 14px;
    line-height: 1.4;
}

/* ---------- Rechtliche Bereiche ---------- */

.contact-legal-sections {
    display: grid;
    gap: 0;
    margin-top: 24px;
    border-top: 1px solid #e8e8e8;
}

.contact-legal-item {
    padding: 0;
    border-top: 0;
    border-bottom: 1px solid #e8e8e8;
}

.contact-legal-item summary {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding: 17px 48px 17px 18px;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: #222;
    background: #fff;
}

.contact-legal-item summary::-webkit-details-marker {
    display: none;
}

.contact-legal-item summary::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 400;
    color: #e30613;
}

.contact-legal-item[open] summary::after {
    content: "–";
}

.contact-legal-content {
    padding: 0 18px 22px 18px;
    color: #444;
    font-size: 15px;
    line-height: 1.65;
}

.contact-legal-content table,
.contact-legal-content iframe {
    max-width: 100%;
}

/* ---------- Breakpoints ---------- */

@media (min-width: 700px) {
    .contact-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 18px;
    }

    .contact-payment-card {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        align-items: start;
        gap: 28px;
    }
}

@media (min-width: 1024px) {
    .contact-page-header {
        margin-bottom: 34px;
    }

    .contact-page-header h1 {
        font-size: 32px;
    }

    .contact-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px 18px;
    }

    .contact-card {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .contact-legal-sections {
        margin-top: 32px;
    }
}

@media (max-width: 480px) {
    .contact-page-header h1 {
        font-size: 24px;
    }

    .contact-payment-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .contact-payment-row img {
        max-width: 120px;
    }
}


/* =========================================
   CONTACT RESPONSIVE PATCH V5
   Stabiler V3-Stand + finale kleine Änderungen.
   Wichtig: globale Desktop-Sidebar-Regeln werden hier hart neutralisiert.
   ========================================= */

/* Kontakt bleibt Service-Seite:
   KEINE dauerhaft sichtbare Desktop-Sidebar. */
@media (min-width: 1024px) {
    body.page-contact #wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 1320px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

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

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

    body.page-contact #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(-102%) !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-contact #wrapper.toggled #sidebar-wrapper {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* H1/Intro etwas weiter nach links, ohne Layout zu zerreißen */
    body.page-contact .contact-page-header {
        margin-left: -50px !important;
    }
}

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

    body.page-contact .contact-page-header {
        margin-left: -30px !important;
    }
}

@media (max-width: 1023px) {
    body.page-contact .contact-page-header {
        margin-left: 0 !important;
    }
}

/* info@ als Link */
.contact-obfuscated-mail a {
    color: #222 !important;
    text-decoration: none !important;
}

.contact-obfuscated-mail a:hover {
    color: #e30613 !important;
}

/* Nach Bankverbindung keine abschließende Linie */
.contact-payment-card {
    border-bottom: 0 !important;
}

/* Stripe statt Amazon Pay:
   erstmal bewusst als CSS-Textlogo, kein externes Asset nötig. */
.contact-payment-row-stripe {
    align-items: center !important;
}

.contact-stripe-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 92px;
    height: 34px;
    padding: 0;
    box-sizing: border-box;
    color: #635bff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
    text-transform: lowercase;
}

@media (max-width: 480px) {
    .contact-stripe-logo {
        min-width: 78px;
        height: 30px;
        font-size: 24px;
    }
}


/* =========================================
   CONTACT RESPONSIVE PATCH V7
   Fix nach V6: Sidebar wieder offcanvas, Stripe-Logo kontrolliert.
   Baut auf stabilem V5/V3-Layout auf.
   ========================================= */

/* Kontaktseite darf NICHT in die globale Desktop-Sidebar-Regel fallen. */
@media (min-width: 1024px) {
    body.page-contact #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-contact #page-content-wrapper {
        width: 100% !important;
        max-width: 1120px !important;
        margin: 0 auto !important;
        padding: 34px 24px 44px 24px !important;
        box-sizing: border-box !important;
    }

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

    body.page-contact #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-contact #wrapper.toggled #sidebar-wrapper {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.page-contact .contact-page-header {
        margin-left: -50px !important;
    }
}

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

    body.page-contact .contact-page-header {
        margin-left: -30px !important;
    }
}

@media (max-width: 1023px) {
    body.page-contact #sidebar-wrapper {
        left: 0 !important;
        transform: translateX(-105%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

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

    body.page-contact .contact-page-header {
        margin-left: 0 !important;
    }
}

/* Stripe-Logo: feste Box, damit das externe SVG niemals riesig wird. */
.contact-payment-row-stripe {
    align-items: center !important;
}

.contact-stripe-logo-box {
    flex: 0 0 100px !important;
    width: 100px !important;
    max-width: 100px !important;
    height: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
}

.contact-payment-row .contact-stripe-logo-box img.contact-stripe-logo-img,
.contact-payment-row-stripe img.contact-stripe-logo-img,
img.contact-stripe-logo-img {
    display: block !important;
    width: 100px !important;
    max-width: 100px !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 34px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Altes Textlogo sicher ausblenden, falls noch im Cache/Markup */
.contact-stripe-logo {
    display: none !important;
}


/* =========================================
   CONTACT RESPONSIVE PATCH V8
   Payment-Block final:
   PayPal auf Höhe "Deutsche Bank AG",
   Stripe links bündig, mehr Abstand zwischen PayPal/Stripe.
   ========================================= */

/* Bank + Payment: beide Spalten oben exakt ausrichten */
.contact-payment-card {
    align-items: start !important;
}

.contact-bank,
.contact-payment-methods {
    align-self: start !important;
}

/* Payment-Spalte oben mit Banktext beginnen lassen */
.contact-payment-methods {
    padding-top: 0 !important;
    margin-top: 0 !important;
    gap: 24px !important;
}

/* PayPal und Stripe links sauber bündig */
.contact-payment-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* PayPal auf Höhe "Deutsche Bank AG" setzen */
.contact-payment-row:first-child {
    margin-top: 0 !important;
}

/* Mehr vertikaler Abstand zwischen PayPal und Stripe */
.contact-payment-row + .contact-payment-row {
    margin-top: 18px !important;
}

/* Logo-Spalte einheitlich breit, damit Texte rechts sauber stehen */
.contact-payment-row > img,
.contact-payment-row > .contact-stripe-logo-box {
    flex: 0 0 100px !important;
    width: 100px !important;
    max-width: 100px !important;
    margin: 0 !important;
}

/* PayPal-Größe kontrollieren */
.contact-payment-row > img[src*="paypalobjects.com"] {
    display: block !important;
    width: 100px !important;
    max-width: 100px !important;
    height: auto !important;
    max-height: 34px !important;
    object-fit: contain !important;
}

/* Stripe exakt links in derselben Logo-Spalte */
.contact-stripe-logo-box {
    height: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
}

.contact-payment-row .contact-stripe-logo-box img.contact-stripe-logo-img,
.contact-payment-row-stripe img.contact-stripe-logo-img,
img.contact-stripe-logo-img {
    display: block !important;
    width: 100px !important;
    max-width: 100px !important;
    height: auto !important;
    max-height: 34px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Texte rechts neben den Logos */
.contact-payment-row span:not(.contact-stripe-logo-box) {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* Mobile: Payment untereinander lassen, aber Abstände sauber */
@media (max-width: 480px) {
    .contact-payment-methods {
        gap: 18px !important;
    }

    .contact-payment-row + .contact-payment-row {
        margin-top: 10px !important;
    }

    .contact-payment-row > img,
    .contact-payment-row > .contact-stripe-logo-box {
        flex-basis: auto !important;
    }
}


/* =========================================
   SHARED SERVICE PAGE HEADER
   Kontakt, Kontaktformular und spätere Service-Seiten
   bekommen denselben Seitenkopf.
   ========================================= */

.service-page {
    color: #222;
}

/* Gemeinsame Position: linkslastig, aber innerhalb des Content-Rahmens */
.service-page-header {
    text-align: left !important;
    max-width: 760px !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 30px !important;
    margin-left: 0 !important;
}

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

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

@media (max-width: 1023px) {
    .service-page-header {
        margin-left: 0 !important;
        margin-bottom: 26px !important;
    }
}

/* Optionaler Breadcrumb/Kicker bei Unterseiten */
.service-page-kicker {
    min-height: 20px !important;
    margin: 0 0 10px 0 !important;
    color: #777 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.service-page-kicker a {
    color: #222 !important;
    text-decoration: none !important;
}

.service-page-kicker a:hover {
    color: #e30613 !important;
}

.service-page-kicker span {
    display: inline-block !important;
    margin: 0 7px !important;
    color: #e30613 !important;
}

/* H1 überall gleich */
.service-page-header h1 {
    margin: 0 0 8px 0 !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.3px !important;
}

/* Unterzeile überall gleich */
.service-page-subtitle,
.service-page-header > p:not(.service-page-kicker) {
    margin: 0 !important;
    color: #666 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

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


/* CONTACT V9: nutzt denselben Service-Header wie contact_form */
.contact-page-header {
    text-align: left !important;
}

.contact-page-header h1 {
    margin: 0 0 8px 0 !important;
}

.contact-page-header > .service-page-subtitle {
    margin: 0 !important;
}


/* =========================================
   CONTACT RESPONSIVE PATCH V10
   Hash-Links auf rechtliche Details:
   /kontakt#widerrufsbelehrung öffnet den passenden Details-Block.
   ========================================= */

.contact-legal-item.contact-legal-item-active {
    scroll-margin-top: 92px !important;
}

.contact-legal-item.contact-legal-item-active > summary {
    color: #111 !important;
    font-weight: 800 !important;
}

.contact-legal-item.contact-legal-item-active > summary::after {
    color: #e30613 !important;
}


/* =========================================
   CONTACT RESPONSIVE PATCH V11
   Keine Layoutänderung.
   PHP V11 korrigiert Redirect von domain_m auf domain_www,
   macht Canonical/Hreflang fallback-sicher und setzt den
   Kontaktformular-Link auf den SEO-Pfad.
   ========================================= */

/* =========================================
   GLOBALER SIDEBAR DEFAULT-CLOSED FIX V1
   Basis: finaler show_subcategory-Fix.
   Sidebar ist initial geschlossen.
   Nur #wrapper.toggled öffnet sie.
   ========================================= */

body.page-category #wrapper,
body.page-service #wrapper,
body.page-search #wrapper,
body.page-contact #wrapper,
body.page-contact-form #wrapper,
body.page-home #wrapper {
    overflow: visible !important;
}

@media (min-width: 1024px) {
    body.page-category #sidebar-wrapper,
body.page-service #sidebar-wrapper,
body.page-search #sidebar-wrapper,
body.page-contact #sidebar-wrapper,
body.page-contact-form #sidebar-wrapper,
body.page-home #sidebar-wrapper,
    body.page-category #wrapper:not(.toggled) #sidebar-wrapper,
body.page-service #wrapper:not(.toggled) #sidebar-wrapper,
body.page-search #wrapper:not(.toggled) #sidebar-wrapper,
body.page-contact #wrapper:not(.toggled) #sidebar-wrapper,
body.page-contact-form #wrapper:not(.toggled) #sidebar-wrapper,
body.page-home #wrapper:not(.toggled) #sidebar-wrapper {
        position: fixed !important;
        top: var(--topbar-height, 60px) !important;
        left: calc(50% - (var(--desktop-header-max-width, 1120px) / 2)) !important;
        right: auto !important;
        width: var(--sidebar-width, 260px) !important;
        max-width: var(--sidebar-width, 260px) !important;
        height: calc(100vh - var(--topbar-height, 60px)) !important;
        margin-left: 0 !important;
        transform: translate3d(calc(-1 * var(--sidebar-width, 260px) - 12px), 0, 0) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 2147482500 !important;
        overflow-y: auto !important;
        background: #fff !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;
        will-change: transform !important;
    }

    body.page-category #wrapper.toggled #sidebar-wrapper,
body.page-service #wrapper.toggled #sidebar-wrapper,
body.page-search #wrapper.toggled #sidebar-wrapper,
body.page-contact #wrapper.toggled #sidebar-wrapper,
body.page-contact-form #wrapper.toggled #sidebar-wrapper,
body.page-home #wrapper.toggled #sidebar-wrapper {
        left: calc(50% - (var(--desktop-header-max-width, 1120px) / 2)) !important;
        right: auto !important;
        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.page-category #wrapper.toggled #page-content-wrapper,
body.page-service #wrapper.toggled #page-content-wrapper,
body.page-search #wrapper.toggled #page-content-wrapper,
body.page-contact #wrapper.toggled #page-content-wrapper,
body.page-contact-form #wrapper.toggled #page-content-wrapper,
body.page-home #wrapper.toggled #page-content-wrapper {
        margin-left: auto !important;
        transform: none !important;
    }
}

@media (min-width: 1024px) and (max-width: 1360px) {
    body.page-category #sidebar-wrapper,
body.page-service #sidebar-wrapper,
body.page-search #sidebar-wrapper,
body.page-contact #sidebar-wrapper,
body.page-contact-form #sidebar-wrapper,
body.page-home #sidebar-wrapper,
    body.page-category #wrapper:not(.toggled) #sidebar-wrapper,
body.page-service #wrapper:not(.toggled) #sidebar-wrapper,
body.page-search #wrapper:not(.toggled) #sidebar-wrapper,
body.page-contact #wrapper:not(.toggled) #sidebar-wrapper,
body.page-contact-form #wrapper:not(.toggled) #sidebar-wrapper,
body.page-home #wrapper:not(.toggled) #sidebar-wrapper {
        left: 16px !important;
        transform: translate3d(calc(-1 * var(--sidebar-width, 260px) - 12px), 0, 0) !important;
    }

    body.page-category #wrapper.toggled #sidebar-wrapper,
body.page-service #wrapper.toggled #sidebar-wrapper,
body.page-search #wrapper.toggled #sidebar-wrapper,
body.page-contact #wrapper.toggled #sidebar-wrapper,
body.page-contact-form #wrapper.toggled #sidebar-wrapper,
body.page-home #wrapper.toggled #sidebar-wrapper {
        left: 16px !important;
        transform: translate3d(0, 0, 0) !important;
    }
}

@media (max-width: 1023px) {
    body.page-category #sidebar-wrapper,
body.page-service #sidebar-wrapper,
body.page-search #sidebar-wrapper,
body.page-contact #sidebar-wrapper,
body.page-contact-form #sidebar-wrapper,
body.page-home #sidebar-wrapper,
    body.page-category #wrapper:not(.toggled) #sidebar-wrapper,
body.page-service #wrapper:not(.toggled) #sidebar-wrapper,
body.page-search #wrapper:not(.toggled) #sidebar-wrapper,
body.page-contact #wrapper:not(.toggled) #sidebar-wrapper,
body.page-contact-form #wrapper:not(.toggled) #sidebar-wrapper,
body.page-home #wrapper:not(.toggled) #sidebar-wrapper {
        position: fixed !important;
        top: var(--topbar-height, 58px) !important;
        left: 0 !important;
        right: auto !important;
        width: min(var(--sidebar-width, 280px), 86vw) !important;
        max-width: 86vw !important;
        height: calc(100vh - var(--topbar-height, 58px)) !important;
        transform: translate3d(-105%, 0, 0) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 2147482500 !important;
        overflow-y: auto !important;
        background: #fff !important;
        box-shadow: 0 8px 28px rgba(0,0,0,0.24) !important;
    }

    body.page-category #wrapper.toggled #sidebar-wrapper,
body.page-service #wrapper.toggled #sidebar-wrapper,
body.page-search #wrapper.toggled #sidebar-wrapper,
body.page-contact #wrapper.toggled #sidebar-wrapper,
body.page-contact-form #wrapper.toggled #sidebar-wrapper,
body.page-home #wrapper.toggled #sidebar-wrapper {
        left: 0 !important;
        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}


/* =========================================
   CONTACT MOBILE FINAL LAYOUT TUNE
   gezieltes Mobile-Finetuning ohne neue Version.
   ========================================= */

@media (max-width: 760px) {

    /*
       Kontaktkarten: 2-spaltig wie ursprüngliches Mobile-Grundprinzip,
       aber ohne globale .box-Regeln.
    */
    body.page-contact .contact-card-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 28px !important;
        row-gap: 30px !important;
        margin: 0 0 28px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    body.page-contact .contact-card {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /*
       Reihenfolge:
       1 Niederlassung | Gesellschafter
       2 Tel/WhatsApp  | Geschäftszeiten
       3 E-Mail        | Öffnungszeiten
       4 USt-IdNr.
    */
    body.page-contact .contact-card-office { order: 1; }
    body.page-contact .contact-card-managers { order: 2; }
    body.page-contact .contact-card-phone { order: 3; }
    body.page-contact .contact-card-business-hours { order: 4; }
    body.page-contact .contact-card-email { order: 5; }
    body.page-contact .contact-card-opening-hours { order: 6; }
    body.page-contact .contact-card-vat { order: 7; }

    /*
       Überschriften wie "Bankverbindung":
       schwarz, ruhiger, Abstand zum Inhalt enger.
    */
    body.page-contact .contact-card h2 {
        margin: 0 0 11px 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;
    }

    body.page-contact .contact-card h3 {
        margin: 12px 0 6px 0 !important;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        color: #222 !important;
    }

    body.page-contact .contact-card p,
    body.page-contact .contact-card address {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        font-weight: 300 !important;
        letter-spacing: 0 !important;
        color: #444 !important;
    }

    body.page-contact .contact-card a {
        color: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
        font-weight: inherit !important;
    }

    /*
       Bank/Payment bleibt unter den Kontaktkarten.
       PayPal + Stripe: eine ruhige 2-Spalten-Reihe.
    */
    body.page-contact .contact-payment-card {
        display: block !important;
        padding: 20px 0 24px 0 !important;
        margin: 8px 0 30px 0 !important;
        border-top: 1px solid #e8e8e8 !important;
        border-bottom: 0 !important;
        background: transparent !important;
    }

    body.page-contact .contact-bank {
        margin: 0 0 26px 0 !important;
        padding: 0 !important;
    }

    body.page-contact .contact-bank h2 {
        margin: 0 0 16px 0 !important;
        padding: 0 !important;
        font-size: 18px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        color: #222 !important;
    }

    body.page-contact .contact-bank p {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        font-weight: 300 !important;
        color: #444 !important;
    }

    body.page-contact .contact-payment-methods {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 18px !important;
        row-gap: 0 !important;
        align-items: start !important;
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    body.page-contact .contact-payment-row,
    body.page-contact .contact-payment-row.contact-payment-row-stripe,
    body.page-contact .contact-payment-row + .contact-payment-row {
        display: grid !important;
        grid-template-rows: 46px auto !important;
        justify-items: center !important;
        align-items: center !important;
        gap: 9px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        min-width: 0 !important;
    }

    body.page-contact .contact-payment-row > img,
    body.page-contact .contact-payment-row > .contact-stripe-logo-box {
        width: 118px !important;
        max-width: 118px !important;
        height: 46px !important;
        max-height: 46px !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    body.page-contact .contact-payment-row > img[src*="paypalobjects.com"] {
        width: 118px !important;
        max-width: 118px !important;
        height: auto !important;
        max-height: 40px !important;
        object-fit: contain !important;
    }

    body.page-contact .contact-payment-row .contact-stripe-logo-box img.contact-stripe-logo-img,
    body.page-contact .contact-payment-row-stripe img.contact-stripe-logo-img,
    body.page-contact img.contact-stripe-logo-img {
        width: 104px !important;
        max-width: 104px !important;
        height: auto !important;
        max-height: 40px !important;
        object-fit: contain !important;
        object-position: center center !important;
        margin: 0 auto !important;
    }

    body.page-contact .contact-payment-row span:not(.contact-stripe-logo-box) {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
        font-weight: 300 !important;
        color: #555 !important;
        text-align: center !important;
        word-break: break-word !important;
    }

    body.page-contact .contact-legal-sections {
        margin-top: 28px !important;
    }
}

@media (max-width: 360px) {
    body.page-contact .contact-card-grid {
        column-gap: 20px !important;
        row-gap: 26px !important;
    }

    body.page-contact .contact-payment-methods {
        column-gap: 12px !important;
    }

    body.page-contact .contact-payment-row span:not(.contact-stripe-logo-box) {
        font-size: 13px !important;
    }
}


/* =========================================
   CONTACT H1 SUBTITLE DOWN V15
   Referenz: show_category V61
   Nur Desktop:
   - Subtitle jetzt 3px tiefer
   ========================================= */
@media (min-width: 1024px) {
    body.page-contact .contact-page-header.service-page-header > p.service-page-subtitle,
    body.page-contact header.contact-page-header.service-page-header > p.service-page-subtitle,
    body.page-contact .service-page-header > p.service-page-subtitle {
        position: relative !important;
        top: 3px !important;
        transform: translateY(3px) !important;
    }
}


/* =========================================
   CONTACT DESKTOP CONTENT RIGHT TRIM V17
   Problem:
   - Inhalt lief rechts ca. 16px aus dem sichtbaren Rahmen.
   Lösung:
   - nur Contact-Inhaltsbereiche auf Desktop rechts um 16px einkürzen
   - Sidebar/Offcanvas bleibt unberührt
   ========================================= */
@media (min-width: 1024px) {
    body.page-contact #page-content-wrapper.contact-page.service-page {
        padding-right: 44px !important;
        box-sizing: border-box !important;
    }

    body.page-contact .contact-card-grid,
    body.page-contact .contact-payment-card,
    body.page-contact .contact-legal-sections {
        max-width: calc(100% - 16px) !important;
        box-sizing: border-box !important;
    }
}