/* =========================================
   CONTACT FORM RESPONSIVE PATCH V1
   Kontaktformular auf Mobile-Basis, Desktop linksbündig
   Lädt nach mobil_styles_v5.css und responsive_global_patch_v26.css
   ========================================= */

/* Kontaktformular ist Service-Seite:
   Desktop-Sidebar bleibt Offcanvas, nicht dauerhaft sichtbar. */
@media (min-width: 1024px) {
    body.page-contact-form #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-form #page-content-wrapper {
        width: 100% !important;
        max-width: 1040px !important;
        margin: 0 auto !important;
        padding: 34px 24px 48px 24px !important;
        box-sizing: border-box !important;
    }

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

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

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

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

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

/* ---------- Header ---------- */

.contact-form-page {
    color: #222;
}

.contact-form-header {
    text-align: left;
    margin: 0 0 30px 0;
    max-width: 760px;
}

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

@media (min-width: 1024px) and (max-width: 1360px) {
    .contact-form-header {
        margin-left: -30px;
    }
}

.contact-form-kicker {
    margin: 0 0 10px 0 !important;
    color: #777;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.contact-form-kicker a {
    color: #222;
    text-decoration: none;
}

.contact-form-kicker a:hover {
    color: #e30613;
}

.contact-form-kicker span {
    display: inline-block;
    margin: 0 7px;
    color: #e30613;
}

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

.contact-form-header > p:not(.contact-form-kicker) {
    margin: 0;
    color: #666;
    font-size: 16px;
}

/* ---------- Alerts ---------- */

.contact-form-alert {
    max-width: 760px;
    margin: 0 0 24px 0;
    padding: 16px 18px;
    box-sizing: border-box;
    border: 1px solid #e6e6e6;
    background: #fff;
}

.contact-form-alert p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

.contact-form-alert-success {
    border-left: 4px solid #2f9e44;
}

.contact-form-alert-danger {
    border-left: 4px solid #e30613;
}

/* ---------- Formular ---------- */

.contact-form-modern {
    width: 100%;
    max-width: 860px;
    margin: 0;
    padding: 0;
}

.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px 18px;
}

.contact-form-field {
    min-width: 0;
}

.contact-form-field-full {
    grid-column: 1 / -1;
}

.contact-form-field label {
    display: block;
    margin: 0 0 7px 0;
    color: #222;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
}

.contact-form-modern input[type="text"],
.contact-form-modern input[type="email"],
.contact-form-modern select,
.contact-form-modern textarea {
    display: block;
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #d9d9d9;
    border-radius: 0;
    background: #fff;
    color: #222;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    padding: 12px 13px;
    outline: none;
    box-shadow: none;
}

.contact-form-modern select {
    min-height: 46px;
    appearance: auto;
}

.contact-form-modern textarea {
    resize: vertical;
    min-height: 150px;
}

.contact-form-modern input:focus,
.contact-form-modern select:focus,
.contact-form-modern textarea:focus {
    border-color: #111;
}

.contact-form-upload-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.contact-form-upload input[type="file"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px dashed #cfcfcf;
    background: #fafafa;
    padding: 11px 12px;
    font-size: 14px;
    color: #444;
}

.contact-form-captcha-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.contact-form-captcha-row .captcha-img {
    flex: 0 0 auto;
    width: 100px;
    height: 40px;
    cursor: pointer;
}

.contact-form-captcha-row input {
    max-width: 190px;
}

.contact-form-submit-field {
    margin-top: 8px;
}

#formsubmitbutton button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 210px;
    height: 44px;
    border: 1px solid #111;
    border-radius: 0;
    background: #111;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

#formsubmitbutton button:hover {
    background: #e30613;
    border-color: #e30613;
}

#formsubmitbutton.is-hidden {
    display: none !important;
}

#buttonreplacement {
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

#buttonreplacement.is-active {
    opacity: 1;
}

#buttonreplacement img {
    display: block;
    max-width: 42px;
    height: auto;
    margin-bottom: 8px;
}

#buttonreplacement p {
    margin: 0;
    color: #555;
    font-size: 14px;
}

/* ---------- Desktop ---------- */

@media (min-width: 760px) {
    .contact-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-form-upload-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .contact-form-modern {
        margin-left: 0;
    }

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

/* ---------- Mobile ---------- */

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

    .contact-form-captcha-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .contact-form-captcha-row input {
        max-width: 100%;
    }

    #formsubmitbutton button {
        width: 100%;
    }
}


/* =========================================
   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 FORM V2: Header-spezifische Altregeln neutralisieren */
.contact-form-header {
    text-align: left !important;
}

.contact-form-kicker {
    margin: 0 0 10px 0 !important;
}

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

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


/* =========================================
   CONTACT FORM RESPONSIVE PATCH V3
   Einheitliche H1-/Content-Ausrichtung mit contact.php.
   Ursache: contact_form hatte 1040px Content-Breite,
   contact.php 1120px. Dadurch lag der Seitenkopf ca. 40px zu weit rechts.
   ========================================= */

@media (min-width: 1024px) {
    body.page-contact-form #page-content-wrapper {
        max-width: 1120px !important;
        margin: 0 auto !important;
        padding: 34px 24px 48px 24px !important;
    }

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

    body.page-contact-form .contact-form-modern {
        max-width: 860px !important;
        margin-left: 0 !important;
    }
}

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

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


/* =========================================
   CONTACT FORM RESPONSIVE PATCH V4
   Formular breiter/ruhiger, Labels lesbarer,
   Captcha + Absenden auf eine Abschlusslinie.
   ========================================= */

@media (min-width: 1024px) {
    /* Formular optisch größer und sauberer im Content-Rahmen */
    body.page-contact-form .contact-form-modern {
        max-width: 960px !important;
        width: 960px !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    body.page-contact-form .contact-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px 22px !important;
    }

    body.page-contact-form .contact-form-field-full {
        grid-column: 1 / -1 !important;
    }

    /* Abschlussbereich: Captcha links, Button rechts auf einer Linie */
    body.page-contact-form .contact-form-captcha-field {
        grid-column: 1 / 2 !important;
        align-self: end !important;
    }

    body.page-contact-form .contact-form-submit-field {
        grid-column: 2 / 3 !important;
        align-self: end !important;
        margin-top: 0 !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: stretch !important;
    }

    body.page-contact-form #formsubmitbutton {
        width: 100% !important;
    }

    body.page-contact-form #formsubmitbutton button {
        width: 100% !important;
        min-width: 0 !important;
        height: 48px !important;
    }
}

/* Labels deutlich lesbarer */
body.page-contact-form .contact-form-field label {
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    color: #111 !important;
}

/* Felder etwas kräftiger und besser klickbar */
body.page-contact-form .contact-form-modern input[type="text"],
body.page-contact-form .contact-form-modern input[type="email"],
body.page-contact-form .contact-form-modern select,
body.page-contact-form .contact-form-modern textarea {
    min-height: 48px !important;
    font-size: 16px !important;
    padding: 13px 14px !important;
}

body.page-contact-form .contact-form-modern textarea {
    min-height: 170px !important;
}

/* Upload-Felder lesbarer */
body.page-contact-form .contact-form-upload input[type="file"] {
    min-height: 44px !important;
    font-size: 15px !important;
    padding: 10px 12px !important;
}

/* Captcha größer und in sauberer Zeile */
body.page-contact-form .contact-form-captcha-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 14px !important;
}

body.page-contact-form .contact-form-captcha-row .captcha-img {
    width: 120px !important;
    height: 48px !important;
    object-fit: cover !important;
    border: 1px solid #d9d9d9 !important;
    box-sizing: border-box !important;
}

body.page-contact-form .contact-form-captcha-row input {
    flex: 1 1 auto !important;
    max-width: none !important;
    height: 48px !important;
}

/* Button text optisch mittig */
body.page-contact-form #formsubmitbutton button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 18px 2px 18px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1px !important;
}

/* Mobile bleibt einspaltig und robust */
@media (max-width: 759px) {
    body.page-contact-form .contact-form-modern {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.page-contact-form .contact-form-captcha-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    body.page-contact-form .contact-form-captcha-row .captcha-img {
        width: 120px !important;
        height: 48px !important;
    }

    body.page-contact-form .contact-form-captcha-row input {
        width: 100% !important;
    }

    body.page-contact-form #formsubmitbutton button {
        width: 100% !important;
    }
}

@media (min-width: 760px) and (max-width: 1023px) {
    body.page-contact-form .contact-form-modern {
        width: 100% !important;
        max-width: 860px !important;
    }

    body.page-contact-form .contact-form-captcha-field,
    body.page-contact-form .contact-form-submit-field {
        grid-column: 1 / -1 !important;
    }

    body.page-contact-form #formsubmitbutton button {
        width: 100% !important;
    }
}


/* =========================================
   CONTACT FORM RESPONSIVE PATCH V5
   Labels größer, Button 5px höher,
   mehr Abstand zum Footer.
   ========================================= */

/* Mehr Luft nach unten vor dem Footer */
body.page-contact-form #page-content-wrapper {
    padding-bottom: 86px !important;
}

@media (min-width: 1024px) {
    body.page-contact-form #page-content-wrapper {
        padding-bottom: 96px !important;
    }
}

/* Formularlabels größer/lesbarer */
body.page-contact-form .contact-form-field label {
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    margin-bottom: 9px !important;
    color: #111 !important;
}

/* Etwas mehr Abstand zwischen Label und Captcha-Zeile */
body.page-contact-form .contact-form-captcha-field label {
    margin-bottom: 10px !important;
}

/* Button 5px höher ziehen, ohne die Spaltenlogik zu zerstören */
@media (min-width: 1024px) {
    body.page-contact-form .contact-form-submit-field {
        position: relative !important;
        top: -5px !important;
    }
}

/* Button bleibt optisch mittig */
body.page-contact-form #formsubmitbutton button {
    height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 2px !important;
    line-height: 1 !important;
}

/* Captcha minimal kräftiger, damit es zur Buttonhöhe passt */
body.page-contact-form .contact-form-captcha-row .captcha-img {
    width: 124px !important;
    height: 48px !important;
}

body.page-contact-form .contact-form-captcha-row input {
    height: 48px !important;
}

/* Mobile: keine negative Verschiebung, nur mehr Abstand zum Footer */
@media (max-width: 1023px) {
    body.page-contact-form .contact-form-submit-field {
        top: 0 !important;
    }

    body.page-contact-form #page-content-wrapper {
        padding-bottom: 72px !important;
    }
}


/* =========================================
   CONTACT FORM RESPONSIVE PATCH V6
   Button nochmals höher / Abschlusszeile sauberer,
   Labels größer.
   Abstand zum Footer bleibt nur kontaktformular-spezifisch.
   ========================================= */

/* Labels nochmals besser lesbar */
body.page-contact-form .contact-form-field label {
    font-size: 17px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    margin-bottom: 10px !important;
}

/* Desktop-Abschlusszeile: Captcha und Button wirklich auf eine Achse */
@media (min-width: 1024px) {
    body.page-contact-form .contact-form-captcha-field,
    body.page-contact-form .contact-form-submit-field {
        align-self: end !important;
    }

    /* Button ca. 12px höher statt nur 5px */
    body.page-contact-form .contact-form-submit-field {
        position: relative !important;
        top: -12px !important;
    }

    body.page-contact-form #formsubmitbutton,
    body.page-contact-form #formsubmitbutton button {
        height: 48px !important;
    }
}

/* Captcha bleibt die Referenzhöhe */
body.page-contact-form .contact-form-captcha-row .captcha-img {
    width: 124px !important;
    height: 48px !important;
}

body.page-contact-form .contact-form-captcha-row input {
    height: 48px !important;
}

/* Buttontext sauber mittig */
body.page-contact-form #formsubmitbutton button {
    height: 48px !important;
    line-height: 1 !important;
    padding: 0 18px 2px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Mehr Abstand zum Footer: bewusst nur Kontaktformular, nicht global */
body.page-contact-form #page-content-wrapper {
    padding-bottom: 110px !important;
}

@media (max-width: 1023px) {
    body.page-contact-form .contact-form-submit-field {
        top: 0 !important;
    }

    body.page-contact-form #page-content-wrapper {
        padding-bottom: 82px !important;
    }
}


/* =========================================
   CONTACT FORM RESPONSIVE PATCH V7
   Keine Layoutänderung.
   PHP V7 korrigiert Redirect von domain_m auf domain_www
   und macht Canonical/Hreflang-Helper fallback-sicher.
   ========================================= */

/* =========================================
   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 FORM MOBILE RESTORE FROM V5
   Ausgang zurück: altes mobiles Formularbild wiederherstellen.
   mobil_styles_v5 dient nur als Referenz.
   ========================================= */

@media (max-width: 760px) {

    /*
       Alte V5-Formular-Margins neutralisieren:
       form select / input-text hatten 5% Seitenmargin.
       Für contact_form.php muss alles wieder auf einer gemeinsamen linken Kante sitzen.
    */
    body.page-contact-form .contact-form-modern,
    body.page-contact-form .contact-form-grid,
    body.page-contact-form .contact-form-field,
    body.page-contact-form .contact-form-field-full {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.page-contact-form .contact-form-modern {
        display: block !important;
        margin: 0 !important;
        padding: 0 12px 44px 12px !important;
    }

    body.page-contact-form .contact-form-grid {
        display: block !important;
        gap: 0 !important;
    }

    body.page-contact-form .contact-form-field {
        display: block !important;
        margin: 0 0 17px 0 !important;
        padding: 0 !important;
    }

    /*
       Im alten Screenshot stehen die Bezeichnungen im Feld.
       Labels bleiben im HTML, sind mobil aber optisch unsichtbar.
    */
    body.page-contact-form .contact-form-field > label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    body.page-contact-form .contact-form-modern input[type="text"],
    body.page-contact-form .contact-form-modern input[type="email"],
    body.page-contact-form .contact-form-modern select,
    body.page-contact-form .contact-form-modern textarea {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        border: 1px solid #aaa !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        color: #666 !important;
        font-family: inherit !important;
        font-size: 22px !important;
        line-height: 1.25 !important;
        font-weight: 300 !important;
        letter-spacing: -0.02em !important;
        outline: none !important;
        appearance: auto !important;
        -webkit-appearance: auto !important;
    }

    body.page-contact-form .contact-form-modern input[type="text"],
    body.page-contact-form .contact-form-modern input[type="email"],
    body.page-contact-form .contact-form-modern select {
        height: 72px !important;
        padding: 0 20px !important;
    }

    body.page-contact-form .contact-form-modern textarea {
        min-height: 210px !important;
        height: 210px !important;
        padding: 24px 20px !important;
        resize: vertical !important;
    }

    body.page-contact-form .contact-form-modern input::placeholder,
    body.page-contact-form .contact-form-modern textarea::placeholder {
        color: #999 !important;
        opacity: 1 !important;
    }

    /*
       Uploadblock wie alter Zustand:
       ein gemeinsamer Rahmen, darin native Datei-Zeilen.
    */
    body.page-contact-form .contact-form-upload-grid {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 18px 16px !important;
        box-sizing: border-box !important;
        border: 1px solid #aaa !important;
        background: #fff !important;
    }

    body.page-contact-form .contact-form-upload {
        display: block !important;
        width: 100% !important;
        margin: 0 0 17px 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    body.page-contact-form .contact-form-upload:last-child {
        margin-bottom: 0 !important;
    }

    body.page-contact-form .contact-form-upload input[type="file"],
    body.page-contact-form .contact-form-modern input[type="file"].fileup {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
        color: #555 !important;
        font-family: inherit !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    /*
       Captcha wie alter Zustand: Bild links, Eingabe rechts.
    */
    body.page-contact-form .contact-form-captcha-row {
        display: grid !important;
        grid-template-columns: 148px minmax(0, 1fr) !important;
        column-gap: 16px !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.page-contact-form .contact-form-captcha-row .captcha-img {
        width: 148px !important;
        max-width: 148px !important;
        height: 50px !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 !important;
    }

    body.page-contact-form .contact-form-captcha-row input {
        width: 100% !important;
        max-width: none !important;
        height: 60px !important;
        padding: 0 18px !important;
    }

    /*
       Button wieder rot, volle Breite, wie alter mobiler Zustand.
    */
    body.page-contact-form .contact-form-submit-field {
        margin-top: 25px !important;
    }

    body.page-contact-form #formsubmitbutton,
    body.page-contact-form #formsubmitbutton button {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    body.page-contact-form #formsubmitbutton button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        height: 74px !important;
        padding: 0 18px 3px 18px !important;
        border: 0 !important;
        border-radius: 4px !important;
        background: #e30613 !important;
        color: #fff !important;
        font-size: 23px !important;
        line-height: 1 !important;
        font-weight: 300 !important;
        letter-spacing: -0.02em !important;
        text-align: center !important;
    }

    body.page-contact-form #buttonreplacement img {
        width: 42px !important;
        max-width: 42px !important;
        height: auto !important;
    }
}

@media (max-width: 360px) {
    body.page-contact-form .contact-form-modern {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.page-contact-form .contact-form-modern input[type="text"],
    body.page-contact-form .contact-form-modern input[type="email"],
    body.page-contact-form .contact-form-modern select,
    body.page-contact-form .contact-form-modern textarea {
        font-size: 20px !important;
    }

    body.page-contact-form .contact-form-captcha-row {
        grid-template-columns: 128px minmax(0, 1fr) !important;
        column-gap: 12px !important;
    }

    body.page-contact-form .contact-form-captcha-row .captcha-img {
        width: 128px !important;
        max-width: 128px !important;
    }
}


/* =========================================
   CONTACT FORM MOBILE SIZE TUNE
   Feldhöhe und Placeholder-Schrift nach Screenshot reduziert.
   Struktur bleibt wie Restore-from-V5.
   ========================================= */

@media (max-width: 760px) {

    /*
       Die Restore-Version war optisch richtig aufgebaut,
       aber Felder und Placeholder waren zu groß.
    */
    body.page-contact-form .contact-form-field {
        margin-bottom: 14px !important;
    }

    body.page-contact-form .contact-form-modern input[type="text"],
    body.page-contact-form .contact-form-modern input[type="email"],
    body.page-contact-form .contact-form-modern select,
    body.page-contact-form .contact-form-modern textarea {
        font-size: 18px !important;
        line-height: 1.25 !important;
        letter-spacing: -0.018em !important;
    }

    body.page-contact-form .contact-form-modern input[type="text"],
    body.page-contact-form .contact-form-modern input[type="email"],
    body.page-contact-form .contact-form-modern select {
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 16px !important;
    }

    body.page-contact-form .contact-form-modern textarea {
        min-height: 155px !important;
        height: 155px !important;
        padding: 17px 16px !important;
    }

    body.page-contact-form .contact-form-modern input::placeholder,
    body.page-contact-form .contact-form-modern textarea::placeholder {
        font-size: 18px !important;
        line-height: 1.25 !important;
        color: #999 !important;
        opacity: 1 !important;
    }

    /*
       Uploadblock passend niedriger, aber alte Struktur behalten.
    */
    body.page-contact-form .contact-form-upload-grid {
        padding: 14px 14px !important;
    }

    body.page-contact-form .contact-form-upload {
        margin-bottom: 13px !important;
    }

    body.page-contact-form .contact-form-upload input[type="file"],
    body.page-contact-form .contact-form-modern input[type="file"].fileup {
        font-size: 14px !important;
        line-height: 1.25 !important;
    }

    /*
       Captcha ebenfalls etwas kompakter.
    */
    body.page-contact-form .contact-form-captcha-row {
        grid-template-columns: 128px minmax(0, 1fr) !important;
        column-gap: 14px !important;
    }

    body.page-contact-form .contact-form-captcha-row .captcha-img {
        width: 128px !important;
        max-width: 128px !important;
        height: 43px !important;
    }

    body.page-contact-form .contact-form-captcha-row input {
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 15px !important;
        font-size: 18px !important;
    }

    /*
       Button proportional kleiner.
    */
    body.page-contact-form .contact-form-submit-field {
        margin-top: 20px !important;
    }

    body.page-contact-form #formsubmitbutton button {
        height: 60px !important;
        font-size: 20px !important;
        border-radius: 4px !important;
    }
}

@media (max-width: 360px) {
    body.page-contact-form .contact-form-modern input[type="text"],
    body.page-contact-form .contact-form-modern input[type="email"],
    body.page-contact-form .contact-form-modern select,
    body.page-contact-form .contact-form-modern textarea,
    body.page-contact-form .contact-form-modern input::placeholder,
    body.page-contact-form .contact-form-modern textarea::placeholder {
        font-size: 17px !important;
    }

    body.page-contact-form .contact-form-modern input[type="text"],
    body.page-contact-form .contact-form-modern input[type="email"],
    body.page-contact-form .contact-form-modern select {
        height: 54px !important;
        min-height: 54px !important;
    }
}


/* =========================================
   CONTACT FORM MOBILE FINAL SIZE CAPTCHA
   letzte Größenkorrektur nach Screenshot.
   ========================================= */

@media (max-width: 760px) {

    /*
       Felder nochmals etwas kleiner.
    */
    body.page-contact-form .contact-form-field {
        margin-bottom: 12px !important;
    }

    body.page-contact-form .contact-form-modern input[type="text"],
    body.page-contact-form .contact-form-modern input[type="email"],
    body.page-contact-form .contact-form-modern select,
    body.page-contact-form .contact-form-modern textarea {
        font-size: 17px !important;
        line-height: 1.22 !important;
        letter-spacing: -0.018em !important;
    }

    body.page-contact-form .contact-form-modern input[type="text"],
    body.page-contact-form .contact-form-modern input[type="email"],
    body.page-contact-form .contact-form-modern select {
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 15px !important;
    }

    body.page-contact-form .contact-form-modern textarea {
        min-height: 140px !important;
        height: 140px !important;
        padding: 15px 15px !important;
    }

    body.page-contact-form .contact-form-modern input::placeholder,
    body.page-contact-form .contact-form-modern textarea::placeholder {
        font-size: 17px !important;
        line-height: 1.22 !important;
        color: #999 !important;
        opacity: 1 !important;
    }

    /*
       Uploadblock proportional kleiner.
    */
    body.page-contact-form .contact-form-upload-grid {
        padding: 12px 13px !important;
    }

    body.page-contact-form .contact-form-upload {
        margin-bottom: 11px !important;
    }

    body.page-contact-form .contact-form-upload input[type="file"],
    body.page-contact-form .contact-form-modern input[type="file"].fileup {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    /*
       Sicherheitscode:
       Bild ohne Rahmen und gleiche Höhe wie das Eingabefeld.
    */
    body.page-contact-form .contact-form-captcha-row {
        grid-template-columns: 148px minmax(0, 1fr) !important;
        column-gap: 14px !important;
        align-items: center !important;
    }

    body.page-contact-form .contact-form-captcha-row .captcha-img {
        display: block !important;
        width: 148px !important;
        max-width: 148px !important;
        height: 52px !important;
        max-height: 52px !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.page-contact-form .contact-form-captcha-row input {
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 15px !important;
        font-size: 17px !important;
    }

    /*
       Button passend zu den kleineren Feldern.
    */
    body.page-contact-form .contact-form-submit-field {
        margin-top: 18px !important;
    }

    body.page-contact-form #formsubmitbutton button {
        height: 56px !important;
        font-size: 19px !important;
        border-radius: 4px !important;
    }
}

@media (max-width: 360px) {
    body.page-contact-form .contact-form-modern input[type="text"],
    body.page-contact-form .contact-form-modern input[type="email"],
    body.page-contact-form .contact-form-modern select,
    body.page-contact-form .contact-form-modern textarea,
    body.page-contact-form .contact-form-modern input::placeholder,
    body.page-contact-form .contact-form-modern textarea::placeholder {
        font-size: 16px !important;
    }

    body.page-contact-form .contact-form-modern input[type="text"],
    body.page-contact-form .contact-form-modern input[type="email"],
    body.page-contact-form .contact-form-modern select {
        height: 50px !important;
        min-height: 50px !important;
    }

    body.page-contact-form .contact-form-captcha-row {
        grid-template-columns: 132px minmax(0, 1fr) !important;
        column-gap: 12px !important;
    }

    body.page-contact-form .contact-form-captcha-row .captcha-img {
        width: 132px !important;
        max-width: 132px !important;
        height: 50px !important;
        max-height: 50px !important;
    }

    body.page-contact-form .contact-form-captcha-row input {
        height: 50px !important;
        min-height: 50px !important;
    }
}


/* =========================================
   CONTACT FORM DESKTOP H1 SECTION V11 H2 LIKE SEARCH_RESULT
   PHP-Struktur jetzt wie search_result:
   h1.visually-hidden + h2 mit Link, » und starkem span.
   Nur Desktop:
   - H2/Subtitel direkt
   - Formular/Grid/Sidebar unverändert
   ========================================= */
@media (min-width: 1024px) {
    body.page-contact-form #page-content-wrapper.contact-form-page > header.contact-form-header.service-page-header,
    body.page-contact-form header.contact-form-header.service-page-header,
    body.page-contact-form .contact-form-header.service-page-header {
        display: block !important;
        width: 100% !important;
        max-width: 760px !important;
        margin: 0 0 34px 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        text-align: left !important;
        position: relative !important;
        transform: translate(-60px, -7px) !important;
        box-sizing: border-box !important;
    }

    body.page-contact-form .contact-form-header.service-page-header > h1.visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    body.page-contact-form .contact-form-header.service-page-header > h2 {
        display: block !important;
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        color: #111 !important;
        font-size: 32px !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
        letter-spacing: -0.3px !important;
        text-transform: uppercase !important;
        border: 0 !important;
        background: transparent !important;
        position: relative !important;
        left: 9px !important;
        top: 6px !important;
        transform: none !important;
    }

    body.page-contact-form .contact-form-header.service-page-header > h2 > a,
    body.page-contact-form .contact-form-header.service-page-header > h2 > span {
        color: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
        font-weight: inherit !important;
        letter-spacing: inherit !important;
        text-transform: inherit !important;
        text-decoration: none !important;
    }

    body.page-contact-form .contact-form-header.service-page-header > h2 > a:hover {
        color: #e30613 !important;
        text-decoration: none !important;
    }

    body.page-contact-form .contact-form-header.service-page-header > p.service-page-subtitle {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #666 !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        background: transparent !important;
        border: 0 !important;
        position: relative !important;
        left: 9px !important;
        top: 13px !important;
        transform: none !important;
    }
}


/* =========================================
   CONTACT FORM DESKTOP ALERT RIGHT TRIM V13
   Eingefrorene Alert-Begrenzung: rechte Kante 29px nach links.
   ========================================= */
@media (min-width: 1024px) {
    body.page-contact-form .contact-form-alert {
        width: calc(100% - 29px) !important;
        max-width: calc(100% - 29px) !important;
        margin: 34px 29px 30px 0 !important;
        box-sizing: border-box !important;
    }

    body.page-contact-form .contact-form-alert p {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}