/*
 Theme Name: Bau-Blech Theme
 Theme URI: http://www.bau-ble.ch/
 Author: Nicolas Bühler
 Author URI: https://www.some-thing.ch/
 Description: Wordpress Theme für das Unternehmen "Bau-Blech Bühler GmbH"
 Requires at least: 6.0
 Tested up to: 6.4
 Requires PHP: 7.4
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: Bau-Blech
 */


/* Grundeinstellungen */
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    width: 100vw;
    height: 100vh;
    scrollbar-width: 0px; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

html::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}


/* Mobile First */
.content-cover {
    width: 100%;
}

.service-container {
    width: 100%;
}

.service-tile {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.content-img {
    width: 100%;
}

.partner-img {
    width: 80%;
}

.footer-nav {
    /* display: flex !important; */
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Effekte */
.hover-button {
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1);
    transform: scale(1);
    will-change: transform;
}

.hover-button:hover {
    transform: scale(1.08); /* 8% grösser */
}

.shadow-box {
    box-shadow: 0px 0px 70px 1px rgba(135,134,134,0.5);
    -webkit-box-shadow: 0px 0px 70px 1px rgba(135,134,134,0.5);
    -moz-box-shadow: 0px 0px 70px 1px rgba(135,134,134,0.5);
}

/* Kontaktformular Anpassungen */
body .wpforms-container .wpforms-field-label,
body .wpforms-container .wpforms-field-sublabel,
body .wpforms-container .wpforms-field-description,
body .wpforms-container .wpforms-field-checkbox li label,
body .wpforms-container .wpforms-field-radio li label {
    color: #ffffff !important;
}

body .wpforms-container .wpforms-submit {
    background-color: #0097b2 !important;  /* Deine Wunschfarbe */
    border: 3px solid #0097b2 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
}

body .wpforms-container .wpforms-submit:hover {
    background-color: transparent !important;
    color: #0097b2 !important;
    transform: scale(1.05) !important;
}

/* Landscape Modus */
@media (max-width: 950px) and (orientation: landscape) {
    .content-img {
        width: 17vw;
    }

    .footer-nav {
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
        text-align: right !important;
    }
}

/* Kleine Tablets in Portrait Modus */
@media (min-width: 768px) and (orientation: portrait) {
    .service-container {
        width: 65vw;
    }

    .content-img {
        width: 100%;
    }

    .content-cover {
        width: 65vw;
    }
}

/* grössere Tablets in Portrait Modus */
@media (min-width: 815px) and (orientation: portrait) {
    .service-container {
        width: 95vw;
    }

    .content-img {
        width: 100%;
    }

    .content-cover {
        width: 100vw;
    }

    .partner-img {
        width: 30%;
    }

    .footer-nav {
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
        text-align: right !important;
    }
}


/* Grössere Tablets und Laptops */
@media (min-width: 1200px) {
    .content-cover {
        width: 80vw;
    }

    .service-container {
        width: 80%;
    }

    .content-img {
        width: 100%;
    }

    .partner-img {
        width: 70%;
    }

    .footer-nav {
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
        text-align: right !important;
    }

}

/* Desktop Geräte */
@media (min-width: 1900px) {
    .content-img {
        width: 100%;
    }

    .service-container {
        width: 80%;
    }
}