/* ==========================================================
   TRIMMBOX
   Custom CSS
   ========================================================== */


/* ==========================================================
   Seitenlayout
   ========================================================== */

.trimmbox-page {
    width: 100%;
}

.trimmbox-page p {
    line-height: 1.7;
}

.trimmbox-intro {
    margin-bottom: 40px;
}

.trimmbox-intro p {
    margin-bottom: 18px;
}


/* ==========================================================
   Inhaltsabschnitte
   ========================================================== */

.trimmbox-section {
    margin: 45px 0;
}

.trimmbox-section h2 {
    margin-top: 0;
    margin-bottom: 20px;
}

.trimmbox-centered {
    text-align: center;
}


/* ==========================================================
   Profil / Herzlich willkommen
   ========================================================== */

.trimmbox-profile {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 45px;
}

.trimmbox-profile-text {
    flex: 1 1 auto;
    min-width: 0;
}

.trimmbox-profile-text p {
    margin-top: 0;
    margin-bottom: 18px;
}

.trimmbox-profile-image {
    flex: 0 0 450px;
}

.trimmbox-profile-image img {
    display: block;
    width: 100%;
    max-width: 450px;
    height: auto;
    border-radius: 6px;
}


/* ==========================================================
   Kontakt
   ========================================================== */

.trimmbox-contact {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin: 30px 0;
}

.trimmbox-contact-text {
    flex: 1 1 auto;
    min-width: 0;
}

.trimmbox-contact-text p {
    margin-top: 0;
    margin-bottom: 18px;
    line-height: 1.7;
}

.trimmbox-contact-text h2 {
    margin-top: 30px;
    margin-bottom: 20px;
}

.trimmbox-contact-text a:not(.trimmbox-button):not(.trimmbox-button-outline) {
    color: #a42522;
    font-weight: 600;
    text-decoration: none;
}

.trimmbox-contact-text a:not(.trimmbox-button):not(.trimmbox-button-outline):hover,
.trimmbox-contact-text a:not(.trimmbox-button):not(.trimmbox-button-outline):focus {
    text-decoration: underline;
}

.trimmbox-contact-image {
    flex: 0 0 420px;
}

.trimmbox-contact-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}


/* ==========================================================
   Leistungen und Preise
   ========================================================== */

.trimmbox-leistungen {
    width: 100%;
}

.trimmbox-leistungen > .trimmbox-section:first-child {
    margin-top: 0;
}

.trimmbox-notice {
    margin: 22px 0 10px;
    padding: 14px 18px;
    background: #f4f4f4;
    border-left: 4px solid #555555;
    line-height: 1.6;
}

.trimmbox-service {
    margin: 0;
    padding: 24px 0 30px;
    border-top: 1px solid #d0d0d0;
}

.trimmbox-service h2 {
    margin-top: 0;
    margin-bottom: 12px;
}

.trimmbox-service h3 {
    margin-top: 28px;
    margin-bottom: 14px;
}

.trimmbox-service p {
    margin-top: 0;
    margin-bottom: 18px;
}

.trimmbox-service-image {
    margin: 0 0 24px;
}

.trimmbox-service-image img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.trimmbox-price {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
    text-align: right;
    color: #a42522;
    font-size: 1.08rem;
}


/* ==========================================================
   Buttons
   ========================================================== */

.trimmbox-button {
    display: inline-block;
    padding: 10px 24px;
    background: #a42522;
    border: 2px solid #a42522;
    border-radius: 5px;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none !important;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.15s ease;
    cursor: pointer;
}

.trimmbox-button:hover,
.trimmbox-button:focus {
    background: #7f1d1b;
    border-color: #7f1d1b;
    color: #ffffff !important;
    text-decoration: none;
}

.trimmbox-button:focus-visible {
    outline: 3px solid rgba(164, 37, 34, 0.3);
    outline-offset: 3px;
}

.trimmbox-button:active {
    transform: translateY(1px);
}


/* Weißer Button */

.trimmbox-button-outline {
    display: inline-block;
    padding: 10px 24px;
    background: #ffffff;
    border: 2px solid #a42522;
    border-radius: 5px;
    color: #a42522 !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none !important;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.15s ease;
    cursor: pointer;
}

.trimmbox-button-outline:hover,
.trimmbox-button-outline:focus {
    background: #a42522;
    border-color: #a42522;
    color: #ffffff !important;
    text-decoration: none;
}

.trimmbox-button-outline:focus-visible {
    outline: 3px solid rgba(164, 37, 34, 0.3);
    outline-offset: 3px;
}

.trimmbox-button-outline:active {
    transform: translateY(1px);
}


/* ==========================================================
   Hauptbilder
   ========================================================== */

.trimmbox-main-image {
    margin: 0 0 30px;
}

.trimmbox-main-image img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.trimmbox-wide-image {
    margin: 40px 0;
}

.trimmbox-wide-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}


/* ==========================================================
   SWR-Video
   ========================================================== */

.trimmbox-video-link {
    margin: 20px 0 0;
}

.trimmbox-video-link a {
    display: inline-block;
}

.trimmbox-video-link img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.trimmbox-video-link a:hover img,
.trimmbox-video-link a:focus img {
    transform: scale(1.02);
    opacity: 0.9;
}


/* ==========================================================
   Galerie
   ========================================================== */

.trimmbox-gallery {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 30px 0;
}

.trimmbox-gallery img {
    flex: 1 1 300px;
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}


/* ==========================================================
   Listen
   ========================================================== */

.trimmbox-list {
    margin: 0 0 24px;
    padding-left: 1.35rem;
}

.trimmbox-list li {
    margin-bottom: 7px;
    line-height: 1.6;
}

.trimmbox-list li:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   Hervorhebungen
   ========================================================== */

.trimmbox-highlight {
    margin: 30px 0;
    padding: 20px 24px;
    background: rgba(164, 37, 34, 0.08);
    border-left: 4px solid #a42522;
    border-radius: 5px;
    line-height: 1.65;
}

.trimmbox-highlight a {
    color: #a42522;
    text-decoration: none;
}

.trimmbox-highlight a:hover,
.trimmbox-highlight a:focus {
    text-decoration: underline;
}


/* ==========================================================
   Leistungsübersicht auf der Startseite
   ========================================================== */

.trimmbox-services-overview {
    margin: 45px 0 20px;
    padding-top: 35px;
    border-top: 1px solid #d8d8d8;
}

.trimmbox-services-overview h2 {
    margin-top: 0;
    margin-bottom: 30px;
    text-align: center;
}

.trimmbox-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    max-width: 900px;
    margin: 0 auto 30px;
}

.trimmbox-columns .trimmbox-list {
    margin-bottom: 0;
}


/* ==========================================================
   Footer
   ========================================================== */

#sp-footer {
    background: #151515;
    color: #ffffff;
    border-top: 0 !important;
}

#sp-footer .container,
#sp-footer .container-inner,
#sp-footer .row,
#sp-footer .sp-module {
    border: 0 !important;
}

#sp-footer .container-inner {
    padding-top: 0 !important;
}

#sp-footer .container {
    padding-top: 24px;
    padding-bottom: 24px;
}

#sp-footer .row {
    align-items: flex-start;
}

#sp-footer .sp-module {
    margin-bottom: 0;
}

#sp-footer p {
    margin-top: 0;
    margin-bottom: 16px;
    color: #ffffff;
    line-height: 1.55;
}

#sp-footer strong {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

#sp-footer a {
    color: #b9bec5;
    text-decoration: none;
    transition: color 0.2s ease;
}

#sp-footer a:hover,
#sp-footer a:focus {
    color: #ffffff;
    text-decoration: underline;
}

.trimmbox-footer-contact,
.trimmbox-footer-links {
    font-size: 14px;
}

.trimmbox-footer-contact p:first-child,
.trimmbox-footer-links p:first-child {
    margin-bottom: 18px;
}

.trimmbox-footer-links {
    text-align: right;
}

.trimmbox-footer-links > p:nth-child(2) {
    line-height: 1.7;
}

.trimmbox-footer-copy {
    margin-top: 30px !important;
    margin-bottom: 0 !important;
    color: #aeb3b9 !important;
    font-size: 13px;
    line-height: 1.55 !important;
}

/* ==========================================================
   Responsive: Tablet
   ========================================================== */

@media (max-width: 991px) {

    .trimmbox-profile {
        gap: 30px;
    }

    .trimmbox-profile-image {
        flex-basis: 360px;
    }

    .trimmbox-contact {
        gap: 30px;
    }

    .trimmbox-contact-image {
        flex-basis: 360px;
    }

}


/* ==========================================================
   Responsive: Smartphone
   ========================================================== */

@media (max-width: 767px) {

    .trimmbox-profile {
        flex-direction: column;
        gap: 25px;
        margin-bottom: 35px;
    }

    .trimmbox-profile-image {
        flex: 0 0 auto;
        width: 100%;
    }

    .trimmbox-profile-image img {
        width: 100%;
        max-width: 450px;
    }

    .trimmbox-contact {
        flex-direction: column;
        gap: 25px;
    }

    .trimmbox-contact-image {
        flex: 0 0 auto;
        width: 100%;
    }

    .trimmbox-contact-image img {
        width: 100%;
    }

    .trimmbox-columns {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .trimmbox-button,
    .trimmbox-button-outline {
        padding: 9px 20px;
        font-size: 15px;
    }

    .trimmbox-gallery {
        gap: 15px;
    }

    .trimmbox-highlight {
        padding: 18px 20px;
    }

    .trimmbox-section {
        margin: 35px 0;
    }

    .trimmbox-wide-image {
        margin: 30px 0;
    }

    .trimmbox-service {
        padding: 22px 0 26px;
    }

    .trimmbox-service-image img {
        width: 100%;
    }

    .trimmbox-price {
        text-align: left;
    }

    #sp-footer .container {
        padding-top: 28px;
        padding-bottom: 26px;
    }

    #sp-footer .row > div {
        width: 100%;
    }

    .trimmbox-footer-contact,
    .trimmbox-footer-links {
        text-align: left;
    }

    .trimmbox-footer-links {
        margin-top: 28px;
        padding-top: 26px;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    .trimmbox-footer-copy {
        margin-top: 24px !important;
    }

}