* {

    border: 0;

    box-sizing: border-box;

    margin: 0;

}



body {

    color: #333333;

    font-family: "futura-100", sans-serif;

}



/* HERO SECTION UND NAV OVERLAY */



div.heroSection {

    position: relative;

    width: 100%;

    height: 100vh;

    overflow: hidden;

}



div.backgroundImage img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    position: absolute;

    top: 0;

    left: 0;

    z-index: 1;

    filter: brightness(55%);

}



header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 3;

    display: flex;

    box-sizing: border-box;

    background: transparent;

}



div.headerBackground {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(20, 20, 20, 0.85); 

    mix-blend-mode: multiply; 

    z-index: -1; 

}



div.logo, div.headerRight {

    position: relative;

    z-index: 1; 

}



div.headerRight {

    display: flex;

    align-items: center;

    gap: 70px;

    justify-content: flex-end;

}



div.language {

    display: flex;

    gap: 30px;

}



div.language a {

    color: white;

    text-decoration: none;

    cursor: pointer;

}



div.language a.active {

    text-decoration: underline;

}



div.hamburgerMenu img {

    width: 35px;

    display: block;

}



header div.center {

    height: 78px;

    z-index: 2;    

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 0;

}



div.heroContent {

    position: absolute;

    top: 55%;

    left: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

    width: 100%;

    max-width: 900px;

    z-index: 2;

}



div.heroContent h1 {

    color: #2776BB;

    font-size: 62px;

    font-weight: 600;

    margin-bottom: 4px;

}



div.heroContent p {

    color: #FFFFFF;

    font-size: 24px;

    margin-bottom: 35px;

}



/* BLAUES OVERLAY MENÜ */



div.bodyOverlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background-color: rgba(0, 0, 0, 0.6);

    z-index: 98; 

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.4s ease-in-out;

}



div.bodyOverlay.show {

    opacity: 1;

    pointer-events: auto;

}



div.menuOverlay {

    position: fixed;

    top: 0;

    width: 500px;

    height: 100vh;

    z-index: 9999; 

    padding: 30px 0 70px 65px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    right: calc(50% - 595.5px); 

    transform: translateX(100vw); 

    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);

}



div.menuOverlay::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100%;

    background-color: #2776BB;

    z-index: -1; /* Legt die Farbe HINTER deinen Text und die Buttons */

}



div.menuOverlay.open {

    transform: translateX(0);

}



/* Für kleinere Bilschirme */

@media (max-width: 1024) {

    div.menuOverlay {

        right: 0;

        width: 100vw;

        max-width: 650px;

    }

}



div.menuHeaderRow {

    display: flex;

    justify-content: space-between;

    align-items: center; 

    margin-bottom: 60px; 

}



div.menuLang {

    display: flex;

    gap: 20px;

}



div.menuLang a {

    color: #FFFFFF;

    text-decoration: none;

    font-size: 18px;

    cursor: pointer;

    opacity: 0.6;

    transition: opacity 0.2s ease;

}



div.menuLang a.active {

    opacity: 1;

    text-decoration: underline;

}



button.closeMenu {

    background: none;

    border: 0;

    padding: 0;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: transform 0.2s ease;

}



.closeMenu img {

    width: 30px; 

    height: auto;

    display: block;

}



.closeMenu:hover {

    transform: scale(1.1);

}



/* NAVIGATION UND LISTEN */

nav.overlayNav ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



nav.overlayNav  ul  li {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: flex-start;

    margin-bottom: 25px;

    padding-bottom: 10px;

}



nav.overlayNav  ul  li  a {

    color: #FFFFFF;

    text-decoration: none;

    font-size: 24px;

    font-weight: 400;

    flex: 0 0 auto;

}



img.dropdownToggle {

    cursor: pointer;

    padding: 5px;

    width: 30px;

    height: auto;

    margin-left: 10px;

    transition: transform 0.3s ease;

}



nav.overlayNav ul li.open img.dropdownToggle {

    transform: rotate(180deg);

}



/* SUBMENU */

nav.overlayNav ul .submenu {

    width: 100%;

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.3s ease-out, margin-top 0.3s ease;

    padding-left: 15px;

}



nav.overlayNav ul li.open .submenu {

    max-height: 300px; 

    margin-top: 15px;

    margin-bottom: 10px;

}



nav.overlayNav ul.submenu li {

    margin-bottom: 12px;

}



nav.overlayNav ul.submenu li a {

    color: rgba(255, 255, 255, 0.85);

    text-decoration: none;

    font-size: 18px;

}



/* FOOTER IM MENÜ */

div.menuFooter {

    margin-top: auto; 

    display: flex;

    align-items: center; 

    gap: 50px; 

    width: 100%; 

}



a.buttonRequest {

    background-color: #FFFFFF;

    color: #2776BB;

    text-decoration: none;

    padding: 8px 35px;

    border-radius: 5px;

    font-size: 18px;

    font-weight: 400;

    display: inline-block;

    transition: background-color 0.2s ease, color 0.2s ease;

    border: 5px solid #FFFFFF;

    box-sizing: border-box;

    white-space: nowrap; 

}



a.buttonRequest:hover {

    background-color: rgba(255, 255, 255, 0.25);

    color: #FFFFFF;

}



div.menuSocials {

    display: flex;

    gap: 15px; 

    align-items: center;

}



div.menuSocials a img {

    width: 45px;

    height: auto;

    display: block;

}



div.menuSocials a img:hover {

    transform: scale(1.1);

}



h2 {

    font-size: 86px;

    font-weight: 600;

    color: #2776BB;

    margin-bottom: 100px;

}



h2:lang(it) {

    font-size: 80px;

}



p {

    font-size: 23px;

    line-height: 37px,

}



/* SERVICE */



section.service {

    padding-top: 125px;

}



div.subpagePlanning {

    padding-top: 125px;

}



div.items {

    display: flex;

    column-gap: 33px;

    margin-bottom: 135px;

}



div.items.last {

    margin-bottom: 113px;

}



div.itemImage {

    width: 375px;

}



div.itemImage p {

    margin-top: 17px;

}



div.center {

    width: 1191px;

    margin-right: auto;

    margin-left: auto;

}



a.buttonService {

    color: #2776BB;

    font-size: 22px;

    line-height: 22px;

    font-weight: 400;

    border: #2776BB 5px solid;

    padding: 16px 35px;

    border-radius: 8px;

    text-decoration: none;

    display: inline-block;

    margin-bottom: 137px;

}



a.buttonService:hover {

    background-color: rgba(39, 118, 187, 0.25);

}



p.button {

      text-align: center;

}



div.serviceText {

    margin-left: auto;

    margin-bottom: 85px;

    width: 671px;

}



a.readMore {

    display: inline-block;

    font-weight: 500;

    color: #2776BB;

    margin-top: 20px;

}





/* PROJECTS */



/* Für kleinere Bildschirme */

@media (min-width: 1024px) {

    /* Versteckt die neuen mobilen Elemente NUR auf dem PC */

    .projectDropdownToggle,

    .projectDetailsDropdown {

        display: none !important;

    }

}



section.projects {

    background-color: #333333;

    padding-bottom: 150px;

    padding: 80px 0;

}



section.projects h2 {

    margin-bottom: 0;

}



div.projectsColumns {

    display: flex;

    column-gap: 167px;

    color: #FFFFFF;

}



div.projectsColumnOne {

    margin-top: 100px;

    flex: 1;

}



div.projectsColumnTwo {

    margin-top: 535px;

    flex: 1;

}



div.projectsColumnOne div.projectOne {

    margin-bottom: 266px;

}



div.projectsColumnTwo div.projectThree {

    margin-bottom: 266px;

}



div.projectsColumns .imageContainer {

    position: relative;

    overflow: hidden;

    cursor: pointer;

    width: 100%;

}



div.projectsColumns .imageContainer img {

    width: 100%;

    display: block;

    height: auto;

}



div.projectsColumns .imageContainer .imageOverlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    padding: 30px;

    box-sizing: border-box;

    background-color: rgba(0, 0, 0, 0.85); /* Schwärzt ausschließlich das Bild */

    

    /* Zentriert den Fließtext im Overlay */

    display: flex;

    align-items: center;

    

    opacity: 0;

    transition: opacity 0.3s ease-in-out;

}



/* Der weiße Beschreibungstext im Overlay */

div.projectsColumns .imageContainer .imageOverlay p {

    color: #FFFFFF !important;

    font-size: 20px;

    line-height: 1.6;

    margin: 0;

    text-align: left;

}



/* Hover-Auslöser: Nur das Overlay über dem Bild blendet auf */

div.projectsColumns .imageContainer:hover .imageOverlay {

    opacity: 1;

}



div.projectsColumns .projectTitle {

    margin-top: 15px;

    font-size: 23px;

    line-height: 37px;

    color: #FFFFFF;

}



div.itemImage a {

    text-decoration: none !important;

    display: block;

}



div.itemImage a p {

    text-decoration: none !important;

    color: #333333;

    margin-top: 15px;

}



div.itemImage:hover a p {

    color: #2776BB;

}



/* ABOUT US */



section.aboutUs {

    background-color: #FFFFFF;

    padding-bottom: 120px;

}



section.aboutUs h2 {

    width: 1191px;

    margin: 80px auto 100px auto;

}



div.centerAboutUs {

    width: 1191px;

    margin: 0 auto;

}



div.imageTeam img {

    width: 100%;

    display: block;

    margin-bottom: 100px;

}



div.imageGerhardWalter {

    flex: 1;

}



div.imageGerhardWalter img {

    width: 447px;

    display: block;

}



div.descriptionAboutUs {

    display: flex;

    column-gap: 50px;

    align-items: flex-end; 

}



div.imageGerhardWalter {

    flex: 1;

}



div.textAboutUs {

    flex: 1;

    /* ÄNDERUNG: Sorgt dafür, dass der letzte Absatz keinen extra Abstand nach unten erzeugt */

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

}



div.textAboutUs p {

    margin-bottom: 25px;

}



/* Verhindert, dass der allerletzte Absatz Abstand nach unten hat, damit es perfekt bündig ist */

div.textAboutUs p:last-child {

    margin-bottom: 0;

}





/* CONTACT */



section.contact {

    background-color: #2776BB;

    color: #FFFFFF;

    padding: 80px 0;

}



section.contact h2 {

    color: #333333;

    width: 1191px;

    margin: 0 auto 100px auto;

}



div.centerContact {

    width: 1191px;

    margin: 0 auto;

}



form.formular {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

}



/* Beschriftungen (Labels) über den Feldern */

form.formular label {

    display: block;

    font-size: 23px;

    margin-bottom: 10px;

}

form.formular label a {

    color: #FFFFFF; /* ergänzt für den Link in der Checkbox */

}



div.name, div.surname, div.e-mail {

    width: 48%;

    margin-bottom: 25px;

}



div.content {

    width: 100%;

    margin-bottom: 10px;

}



/* Gemeinsames Styling für die neuen Eingabefelder */

input.formInput, textarea.formTextarea {

    width: 100%;

    background-color: #FFFFFF;

    border: none;

    outline: none;

    font-family: inherit;

    font-size: 20px;

    padding: 10px 15px;

    color: #333333;

}



imput.formImput {

    height: 45px;

}



textarea.formTextarea {

    height: 250px;

    resize: vertical; /* Erlaubt dem User, die Box bei Bedarf größer zu ziehen */

}



div.textButton {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 10px;

}



div.textButton p {

    font-size:  17px;

}



button.buttonSend {

    background-color: #FFFFFF;

    color: #2776BB;

    font-size: 18px;

    font-weight: 400;

    font-family: inherit; /* Übernimmt die Schriftart vom Body */

    padding: 8px 35px;

    border-radius: 5px;

    border: 5px solid #FFFFFF;

    cursor: pointer; /* Zeigt den Hand-Pointer beim Hovern */

    transition: background-color 0.3s ease, color 0.3s ease;

}



button.buttonSend:hover {

    color: #FFFFFF;

    background-color: rgba(255, 255, 255, 0.25);

}





/* FOOTER */



/* Verhindert, dass die mobilen Umbrüche auf dem Desktop aktiv sind */

br.mobile-br {

    display: none;

}



footer {

    background-color: #333333;

    color: #FFFFFF;

    padding: 80px 0 30px 0;

}



footer h3 {

    color: #2776BB;

    font-size: 70px;

    font-weight: 600;

    text-transform: uppercase;

    width: 1191px;

    margin: 0 auto 100px auto;

}



div.centerFooter {

    width: 1191px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

}



div.columnOne p, div.columnTwo p {

    margin-bottom: 25px;

    font-size: 18px;

    line-height: 28px;

}



div.columnOne {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



div.textFooter a {

    color: #2776BB;

    text-decoration: none;

}



div.textFooter p strong {

    font-weight: 500;

    color: #2776BB;

}



a.buttonPlanNow {

    background-color: #2776BB;

    color: #FFFFFF;

    font-size: 18px;

    text-decoration: none;

    padding: 8px 35px;

    border-radius: 5px;

    border: 5px solid #2776BB;

    transition: background-color 0.3s ease;

    margin-top: 15px;

    display: inline-block;

}



a.buttonPlanNow:hover {

    background-color: rgba(39, 118, 187, 0.25);

}



div.icons {

    display: flex;

    column-gap: 15px;

    align-items: flex-end;

}



div.icons img {

    width: 40px;

}



/* Die Hauptachse zwischen Spalte 1 und der neuen rechten Gruppe */

div.centerFooter {

    width: 1191px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

}



div.footerGroupRight {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



div.icons {

    display: flex;

    column-gap: 15px;

    align-items: center;

    margin-top: 35px;

}



div.icons img {

    width: 40px;

    display: block;

}



div.textFooter p a {

    color: #FFFFFF;

    text-decoration: none;

    transition: color 0.3s ease; /* Macht den Farbübergang schön geschmeidig */

}



div.textFooter p a:hover {

    color: #2776BB; 

}



div.textFooter p strong a, a[href^="mailto:"] {

    color: #2776BB;

    text-decoration: none;

    transition: color 0.3s ease;

}



div.textFooter p strong a:hover, a[href^="mailto:"]:hover {

    color: #FFFFFF;

}



footer hr {

    width: 1191px;

    margin: 73px auto 20px auto;

    border: 1px solid #2776BB;

}



div.legal {

    width: 1191px;

    margin: 0 auto;

    display: flex;

    column-gap: 40px;

}



div.legal p a:hover {

    color: #2776BB;

}



div.legal p a {

    font-size: 15px;

    color: #FFFFFF;

}





/* TEAM */



section.team {

    background-color: #333333;

    padding-bottom: 150px;

    padding: 80px 0;

}



section.team h2 {

    margin-bottom: 0;

}



div.teamColumns {

    display: flex;

    column-gap: 167px;

    color: #FFFFFF;

}



div.teamColumnOne {

    margin-top: 100px;

    flex: 1;

}



div.teamColumnTwo {

    margin-top: 535px;

    flex: 1;

}



div.teamColumnOne div.teamOne {

    margin-bottom: 266px;

}



div.teamColumnTwo div.teamThree {

    margin-bottom: 266px;

}



div.teamColumns p.teamTitle {

    margin-top: 15px;

    font-size: 23px;

    line-height: 37px;

    color: #FFFFFF;

}



p.teamTitle strong {

    color: #2776BB;

    font-weight: 500;

}





/* PLANUNG PROJEKTIERUNG */



img.mobileBanner {

    display: none !important;

}

img.desktopBanner {

    display: block;

}



section.subpagePlanning {

    margin-bottom: 40px;

    padding-top: 125px;

}



div.subpagePlanning h2 {

    font-size: 86px;

    font-weight: 600;

    color: #2776BB;

    margin-bottom: 0;

}



section.pageBanner {

    width: 100%;

    max-width: 100%;

    margin-bottom: 90px;

    overflow: hidden;

}



section.pageBanner img {

    width: 100%;

    height: auto;

    max-height: 600px; 

    object-fit: cover;

    display: block;

}



section.pageBanner img {

    width: 100%;

    height: auto;

    max-height: 600px;

    object-fit: cover;

    display: block;

}



section.pageMainText div.contentGrid {

    display: grid;

    grid-template-columns: 1fr 470px; /* Linker Text flexibel, rechte Box fix */

    gap: 80px;

    align-items: start;

    margin-bottom: 140px;

}



/* Das übergeordnete Element verteilt den Platz */

section.pageMainText div.contentGrid {

    display: flex;

    justify-content: space-between;

    align-items: start;

    gap: 40px;

    margin-bottom: 88px;

}



div.textContent {

    flex: 0 1 660px; /* Wächst nicht, schrumpft falls nötig, Basis sind exakt 660px */

    width: 100%; /* Füllt die 660px komplett aus */

}



div.textContent p {

    font-size: 23px;

    line-height: 38px;

    color: #333333;

    margin: 0;

}



div.blueInfoBox {

    flex: 0 0 auto;    /* Verhindert, dass die Box künstlich gedehnt oder gestaucht wird */

    width: max-content; /* Die Box zieht sich nur so breit, wie ihr längster Inhalt ist */

    background-color: rgba(39, 118, 187, 0.25);

    border: 4px solid #2776BB;

    border-radius: 27px;

    padding: 40px 35px;

    box-sizing: border-box;

    margin-top: 200px;

}



div.blueInfoBox p strong {

    font-size: 20px;

    font-weight: 500;

    color: #333333;

    display: block;

    margin-bottom: 25px;

    white-space: nowrap; 

}



div.blueInfoBox ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



div.blueInfoBox ul li {

    font-size: 20px;

    line-height: 25px;

    color: #333333;

    position: relative;

    padding-left: 20px;

    margin-bottom: 12px;

    white-space: nowrap;

}



div.blueInfoBox ul li::before {

    content: "-";

    position: absolute;

    left: 0;

    color: #333333;

}



div.blueInfoBox ul li:last-child {

    margin-bottom: 0;

}



/* GESCHICHTE */



div.textContentStory p {

    margin-bottom: 35px;

}



div.textContentStory p:last-child {

    margin-bottom: 0;

}



/* KONATKT */

div.textContentContact p {

    margin-bottom: 15px;

}



div.textContentContact p strong {

    color: #2776BB;

    font-weight: 500;

}



div.contactDetails {

    margin-top: 60px;

}



div.contactDetails p a {

    color: #333333;

    text-decoration: none;

    transition: color 0.3s ease;

}



div.contactDetails p a:hover {

    color: #2776BB; 

}



div.contactDetails p strong a, a[href^="mailto:"] {

    color: #2776BB;

    text-decoration: none;

    transition: color 0.3s ease;

}



/* padding-top */

section.subpageClimateHouse, section.subpagelandCharcgeRegister, section.subpageSurvey, section.subpageStatic, section.subpageTax, section.subpageSecurity, section.subpageMoreServices, section.subpageStory, section.subpageContact, section.subpageLegalNotice, section.subpagePrivacyPolicy, section.team {

    padding-top: 125px;

}



/* IMPRESSUM */



div.textContentLegalNotice p {

    margin-bottom: 35px;

}



div.textContentLegalNotice p:last-child {

    margin-bottom: 0;

}



div.textContentLegalNotice p strong {

    font-weight: 500;

}



/* PRIVACY-POLICY */



div.textContentPrivacyPolicy {

    width: 791px;

}



div.textContentPrivacyPolicy p {

    margin-bottom: 35px;

}



div.textContentPrivacyPolicy p a {

    color: #333333;

}



div.textContentPrivacyPolicy p a:hover {

    color: #2776BB;

}



div.textContentPrivacyPolicy p:last-child {

    margin-bottom: 0;

}







/* MOBILE VERSION */



@media (max-width: 430px) {



    div.center {

        width: 100% !important;

        padding-left: 28px !important;

        padding-right: 28px !important;

        box-sizing: border-box;

    }



    /* HEADER */

    header {

        height: 60px !important;

        position: fixed !important;

        top: 0 !important;

        left: 0 !important;

        width: 100vw !important;

        max-width: 100vw !important;

        background: transparent !important;

        overflow: hidden; /* Schneidet alles ab, was über die 60px hinausragt */

    }



    header div.center {

        height: 60px !important; 

        width: 100% !important;

        max-width: 100% !important;

        padding: 0 28px !important;

        display: flex !important;

        justify-content: space-between !important;

        align-items: center !important;

        box-sizing: border-box !important;

    }



    div.headerBackground {

        position: absolute !important;

        top: 0 !important;

        left: 0 !important;

        width: 100% !important;

        height: 60px !important;

        background-color: rgba(20, 20, 20, 0.85) !important; 

        mix-blend-mode: multiply !important; 

        z-index: 1 !important;

    }



    div.logo, div.headerRight {

        position: relative !important;

        z-index: 10 !important;

        display: flex !important;

        align-items: center !important;

    }



    div.logo img {

        height: 24px !important; 

        width: auto !important;

        display: block !important;

    }



    div.hamburgerMenu {

        display: block !important;

        position: relative !important;

        z-index: 10 !important;

    }



    div.hamburgerMenu img {

        width: 28px !important;  

        height: auto !important;

        display: block !important;

    }



    div.language {

        display: none !important; 

    }



    div.headerRight {

        gap: 0 !important; 

    }



    /* MOBILE MENÜ */

    div.menuOverlay {

        position: fixed !important;

        top: 0 !important;

        left: 0 !important;

        width: 100vw !important;  

        height: 100vh !important; 

        max-width: 100vw !important;

        right: auto !important;   

        background-color: #2776BB !important; 

        padding: 0 28px 60px 28px !important; 

        display: flex !important; 

        flex-direction: column !important;

        justify-content: space-between !important;

        

        /* Unsichtbar-Startzustand */

        opacity: 0 !important;

        pointer-events: none !important;

        transform: translateX(100vw) !important; 

        transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out !important;

        z-index: 99999 !important;

        box-sizing: border-box !important;

    }



    div.menuOverlay.open {

        opacity: 1 !important;

        pointer-events: auto !important;

        transform: translateX(0) !important;

    }



    div.menuHeaderRow {

        height: 60px !important;

        display: flex !important;

        flex-direction: row !important; /* Erzwingt die horizontale Richtung */

        justify-content: space-between !important;

        align-items: center !important;

        margin-bottom: 40px !important;

        width: 100% !important;

    }



    button.closeMenu {

        background: none !important;

        border: 0 !important;

        padding: 0 !important;

        margin: 0 !important;

        display: block !important;

        cursor: pointer !important;

    }



    button.closeMenu img {

        width: 28px !important;

        height: auto !important;

        display: block !important;

    }



    /* NAVIGATIONSLINKS */

    nav.overlayNav {

        flex-grow: 1 !important;

    }



    nav.overlayNav ul li {

        margin-bottom: 44px !important;

        padding-bottom: 0 !important;

        display: flex !important;

        flex-wrap: wrap !important;

        align-items: center !important;

        justify-content: flex-start !important;

    }



    nav.overlayNav ul li a {

        color: #FFFFFF !important;

        font-size: 20px !important;

        font-weight: 400 !important;

        text-decoration: none !important;

        flex: 0 0 auto !important;

    }



    img.dropdownToggle {

        width: 14px !important;

        height: auto !important;

        padding: 0 !important;

        margin-left: 10px !important;

    }



    nav.overlayNav ul .submenu {

        width: 100% !important;

        padding-left: 15px !important;

    }



    nav.overlayNav ul li.open .submenu {

        margin-top: 15px !important;

        margin-bottom: 5px !important;

    }



    nav.overlayNav ul.submenu li {

        margin-bottom: 12px !important;

    }



    nav.overlayNav ul.submenu li a {

        color: rgba(255, 255, 255, 0.85) !important;

        font-size: 18px !important;

        font-weight: 400 !important;

    }



    div.menuFooter {

        margin-top: auto !important;

        padding-bottom: 45px !important;

        display: flex !important;

        flex-direction: row !important;

        justify-content: space-between !important;

        align-items: center !important;

        width: 100% !important;

        gap: 20px !important;

    }



    a.buttonRequest {

        font-size: 16px !important;

        font-weight: 400 !important;

        padding: 10px 20px !important;

        width: auto !important;

        white-space: nowrap !important;

    }



    div.menuSocials {

        display: flex !important;

        flex-direction: row !important;

        gap: 15px !important;

        align-items: center !important;

    }



    div.menuSocials a img {

        width: 32px !important;

        height: auto !important;

    }

    

    /* HERO SECTION */

    div.heroSection {

        height: 100vh !important;

        width: 100vw !important;

        position: relative !important;

    }



    /* Der Bildausschnitt wird herangezoomt und nach rechts gezogen */

    div.backgroundImage img {

        width: 100% !important;

        height: 100% !important;

        object-fit: cover !important;

        object-position: right center !important; 

        /* 1.2 bedeutet 120% Größe (also 20% herangezoomt). 

           Falls du noch mehr Zoom willst, versuche 1.3 oder 1.4 */

        transform: scale(1.2) !important; 

    }



    div.heroContent {

        position: absolute !important;

        top: 60% !important; /* Unter der Mitte */

        left: 0 !important;

        transform: translateY(-50%) !important;

        width: 100% !important;

        max-width: 100% !important;

        padding-left: 28px !important;

        padding-right: 28px !important;

        box-sizing: border-box !important;

        text-align: left !important;

    }



    div.heroContent h1 {

        font-size: 45px !important;

        font-weight: 600 !important;

        line-height: 52px !important;

        margin-bottom: 15px !important;

        text-align: left !important;

        word-break: break-word !important;

    }



    div.heroContent p {

        font-size: 20px !important;

        line-height: 33px !important;

        margin-bottom: 35px !important;

        text-align: left !important;

    }



    div.heroContent a.buttonService,

    div.heroContent a.buttonPlanNow,

    div.heroContent .button,

    div.heroContent a {

        display: inline-block !important;

        width: auto !important;

        font-size: 18px !important;

        line-height: 18px !important;

        padding: 12px 25px !important;

        border-width: 4px !important;

        text-align: center !important;

        margin: 0 !important;

    }

    

    /*  SERVICE  */

    

    section.service, 

    div.subpagePlanning {

        padding-top: 40px !important;

    }



    section.projects {

        padding-top: 30px !important;

        padding-bottom: 40px !important;

    }



    h2 {

        font-size: 29px !important;      

        line-height: 45px !important;    

        margin-top: 0 !important;

        margin-bottom: 30px !important;

        text-align: left !important;

        font-weight: 600 !important;

    }

    

    section.service .items {

        margin-top: 0 !important;

        padding-top: 0 !important;

    }



    section.service .items:first-of-type,

    section.service .item:first-child {

        margin-top: 0 !important;

        padding-top: 0 !important;

    }



    section.service .itemImage {

        margin-top: 0 !important;

        padding-top: 0 !important;

        line-height: 0 !important;

        display: block !important;

    }



    section.service .itemImage img {

        margin-top: 0 !important;

        display: block !important;

    }



    div.items {

        display: flex !important;

        flex-direction: column !important; 

        gap: 0 !important;                 

        margin-bottom: 0 !important;

    }



    div.serviceText,

    div.items > div { 

        width: 100% !important;

        max-width: 100% !important;

        margin-bottom: 60px !important;    

        display: flex !important;

        flex-direction: column !important;

    }



    div.itemImage {

        width: 100% !important;            

        max-width: 100% !important;

        height: auto !important;

        margin: 0 0 15px 0 !important;

        box-sizing: border-box !important;

    }



    div.itemImage img {

        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;

        display: block !important;

        object-fit: cover !important;

    }



    div.serviceText h3,

    div.items h3,

    div.serviceText p,

    div.items p,

    div.items div,

    .itemText {

        font-size: 16px !important;       

        line-height: 24px !important;     

        margin-top: 15px !important;

        margin-bottom: 17px !important;

        font-weight: 400 !important;      

        text-align: left !important;

    }



    /* 1. Das gemeinsame Design für BEIDE Sprachen (bleibt gleich) */

    div.serviceText a.buttonService::after,

    div.items a.buttonService::after,

    div.serviceText a::after,

    div.items a::after {

        display: inline-block !important;

        font-size: 16px !important;       

        line-height: 24px !important;     

        color: #2776BB !important;        

        text-align: left !important;

        text-decoration: underline !important; 

        font-weight: 400 !important;      

    }



    /* 2. Text NUR für die deutsche Webseite */

    html[lang="de"] div.serviceText a.buttonService::after,

    html[lang="de"] div.items a.buttonService::after,

    html[lang="de"] div.serviceText a::after,

    html[lang="de"] div.items a::after {

        content: "Mehr Informationen" !important; 

    }



    /* 3. Text NUR für die italienische Webseite */

    html[lang="it"] div.serviceText a.buttonService::after,

    html[lang="it"] div.items a.buttonService::after,

    html[lang="it"] div.serviceText a::after,

    html[lang="it"] div.items a::after {

        content: "Ulteriori informazioni" !important; 

    }



    section.service a.buttonService,

    div.items a.buttonService {

        display: inline-block !important;

        width: auto !important;           

        height: auto !important;

        

        margin-top: 30px !important;       

        margin-bottom: 30px !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

        

        font-size: 16px !important;        

        line-height: 16px !important;

        padding: 12px 25px !important;

        text-align: center !important;

    }

    

    /* PROJECTS */



    /* 1. Die Spalten-Struktur komplett auflösen */

    section.projects .projectsColumns,

    section.projects .projectsColumnOne,

    section.projects .projectsColumnTwo {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        gap: 0 !important;

    }



    section.projects .projectCard {

        width: 100% !important;

        box-sizing: border-box !important;

        margin-top: 0 !important;

        margin-bottom: 40px !important;

    }



    section.projects .imageContainer {

        width: 100% !important;

        padding: 0 !important;

        box-sizing: border-box !important;

    }



    section.projects .imageContainer img {

        width: 100% !important;

        height: auto !important;

        display: block !important;

        object-fit: cover !important;

    }



    /* 4. Desktop-Hover auf Mobile deaktivieren */

    section.projects .imageOverlay {

        display: none !important;

    }



    section.projects .projectTitle {

        font-size: 16px !important;

        line-height: 24px !important;

        margin-top: 15px !important;

        margin-bottom: 10px !important;

        font-weight: 400 !important;

        text-align: left !important;

        padding: 0 !important;

    }





    /* NUR AUF MOBILE (Bildschirme bis 1024px) */

    @media (max-width: 1024px) {

    

        /* 1. Desktop-Hover komplett ausschalten & Klickblockade lösen */

        section.projects .imageOverlay {

            display: none !important;

            opacity: 0 !important;

            visibility: hidden !important;

            pointer-events: none !important; /* Macht das Element für Klicks unsichtbar */

        }

        

        

        section.projects .projectDropdownToggle,

        section.projects .projectDropdownToggle:visited,

        section.projects .projectDropdownToggle:active,

        section.projects .projectDropdownToggle:hover {

            display: inline-flex !important;

            align-items: center !important;

            color: #0056b3 !important;

            text-decoration: underline !important;

            font-size: 15px !important;

            font-weight: 500 !important;

            margin-top: 8px !important;

            cursor: pointer !important;

            gap: 8px !important;

        }



        section.projects .projectArrow {

            width: 12px !important;

            height: auto !important;

            transition: transform 0.3s ease !important;

        }



        /* Infotext-Dropdown */

        section.projects .projectDetailsDropdown {

            display: none;

            margin-top: 10px !important;

            background-color: transparent !important;

            padding: 0 !important;

            border-radius: 0 !important;

        }



        

        section.projects .projectDetailsDropdown p {

            font-size: 14px !important;

            line-height: 20px !important;

            font-weight: normal !important;

            color: #ffffff !important;

            margin: 0 !important;

            text-transform: none !important;

            letter-spacing: normal !important;

        }

    

        /* ÜBER UNS */

        section.aboutUs {

            padding-bottom: 60px !important;

        }



        section.aboutUs h2 {

            width: 100% !important;

            max-width: 100% !important;

            margin: 40px 0 20px 0 !important;

            padding-left: 20px !important;

            padding-right: 20px !important;

            box-sizing: border-box !important;

        }



        div.centerAboutUs {

            width: 100% !important;

            padding-left: 20px !important;

            padding-right: 20px !important;

            box-sizing: border-box !important;

        }

    

        div.imageTeam img {

            margin-bottom: 30px !important;

        }

    

        div.descriptionAboutUs {

            display: flex !important;

            flex-direction: column-reverse !important; /* Dreht die Boxen um: Text kommt nach oben, Bild nach unten */

            width: 100% !important;

        }



        div.textAboutUs {

            display: block !important;

            width: 100% !important;

        }



        div.imageGerhardWalter {

            width: 100% !important; 

            margin-top: 25px !important;

            margin-bottom: 0 !important;

        }



        div.imageGerhardWalter img {

            width: 100% !important;

            height: auto !important;

            display: block !important;

        }



        div.textAboutUs p {

            font-size: 15px !important;

            line-height: 24px !important;

            color: #333333 !important;

            margin-top: 0 !important;

            margin-bottom: 25px !important;

        }



        div.textAboutUs p:last-child {

            margin-bottom: 0 !important;

        }

    

        /* CONTACT */

        section.contact {

            padding: 50px 28px !important;

            box-sizing: border-box !important;

        }



        section.contact h2 {

            width: 100% !important;

            max-width: 100% !important;

            margin: 0 0 40px 0 !important;

            color: #333333 !important;

        }



        div.centerContact {

            width: 100% !important;

        }



        /* 4. Flexbox auf senkrecht umstellen, damit die Felder sauber stapeln */

        form.formular {

            flex-direction: column !important;

        }



        div.name, div.surname, div.e-mail {

            width: 100% !important;

            margin-bottom: 35px !important;

        }



        div.content {

            width: 100% !important;

            margin-bottom: 35px !important; 

        }



        form.formular label {

            font-size: 18px !important;

            margin-bottom: 8px !important;

        }



        input.formInput {

            height: 45px !important;

            box-sizing: border-box !important;

        }



        textarea.formTextarea {

            height: 180px !important;

            box-sizing: border-box !important;

        }



        div.textButton {

            display: flex !important;

            flex-direction: row !important; /* Behält das Nebeneinander auf Mobile bei */

            justify-content: space-between !important;

            align-items: center !important;

            margin-top: 5px !important;

            width: 100% !important;

        }

    

        /* Das Wort "* Pflichtangaben" deutlich kleiner machen */

        div.textButton p:first-child {

            font-size: 13px !important;

            opacity: 0.85 !important;

            margin: 0 !important;

        }



        div.textButton p:last-child {

            margin: 0 !important;

        }



        button.buttonSend {

            font-size: 16px !important;

            padding: 10px 30px !important;

            border-radius: 8px !important;

            border: none !important;        

            width: auto !important;         

        }

    

        /* FOOTER */

        footer {

            padding: 50px 28px 30px 28px !important;

            box-sizing: border-box !important;

        }



        footer h3 {

            width: 100% !important;

            max-width: 100% !important;

            font-size: 36px !important;

            font-weight: 500 !important;

            margin: 0 0 30px 0 !important;

        }



        div.centerFooter {

            width: 100% !important;

            display: grid !important;

            grid-template-columns: 100% !important;

            gap: 0 !important;

        }



        div.columnOne, div.columnTwo {

            width: 100% !important;

            display: contents !important; /* Löst die umschließenden Spalten-Divs auf Mobile visuell auf */

        }

    

        div.columnOne div.textFooter p:first-child strong:first-of-type {

            font-size: 17px !important;

            color: #2776BB !important; 

            font-weight: 500 !important;

            display: inline-block !important;

            margin-bottom: 5px !important; 

        }



        div.columnOne div.textFooter p:nth-child(1) {

            font-size: 15px !important; 

            line-height: 32px !important;

        }

    

        div.columnOne div.textFooter p:nth-child(1) a {

            text-decoration: underline !important;

            text-decoration-color: #FFFFFF !important; 

        }



        div.columnOne div.textFooter p:nth-child(2), div.columnOne div.textFooter p:nth-child(3) {

            font-size: 17px !important;  

            line-height: 32px !important; 

        }

    

        div.columnOne div.textFooter p:nth-child(2) a[href^="mailto:info@"] {

            color: #2776BB !important;

            text-decoration: underline !important;

            text-decoration-color: #2776BB !important; 

        }



        div.columnOne div.textFooter p:nth-child(2) a[href^="mailto:ingpichler@"] {

            color: #FFFFFF !important;

            text-decoration: underline !important;

            text-decoration-color: #FFFFFF !important; 

        }



        div.columnTwo div.textFooter p {

            font-size: 17px !important;  

            line-height: 32px !important; 

        }



        div.columnOne div.textFooter p:nth-child(2), div.columnOne div.textFooter p:nth-child(3) {

            font-size: 17px !important;  

            line-height: 32px !important; 

        }



        div.columnTwo div.textFooter p {

            font-size: 17px !important;

            line-height: 32px !important;

        }



        div.columnOne div.textFooter {

            grid-row: 1 !important;

            margin-bottom: 25px !important;

        }



        div.columnTwo div.textFooter {

            grid-row: 2 !important;

            margin-bottom: 25px !important;

        }



        div.columnOne > p:last-child {

            grid-row: 3 !important;

            grid-column: 1 !important;

            margin-top: 20px !important;

            margin-bottom: 0 !important;

            width: auto !important; /* Breite freigeben, damit Platz fürs Icon ist */

            justify-self: start !important;

            display: inline-block !important;

        }



        div.icons {

            grid-row: 3 !important; /* Drückt das Icon in exakt dieselbe Zeile wie den Button */

            grid-column: 1 !important;

            margin: 20px 0 0 20px !important;

            justify-self: start !important;

            display: flex !important;

            align-items: center !important;

            transform: translateX(170px) !important; /* Schiebt das Icon exakt neben die Button-Breite */

        }



        a.buttonPlanNow {

            font-size: 16px !important;

            padding: 10px 30px !important;

            border-radius: 8px !important;

            margin: 0 !important;

            display: inline-block !important;

            white-space: nowrap !important;

        }



        div.icons img {

            width: 40px !important;

            height: 40px !important;

            display: block !important;

        }



        footer hr {

            width: 100% !important;

            margin: 35px auto 25px auto !important;

            border: 1px solid #2776BB !important;

        }



        div.legal {

            width: 100% !important;

            max-width: 100% !important;

            display: flex !important;

            justify-content: space-between !important; 

            align-items: center !important;

            margin: 0 !important;

            padding: 0 !important;

            box-sizing: border-box !important;



            /* Erlaubt sauberen Umbruch bei extrem schmalen Bildschirmen */

            flex-wrap: wrap !important;

            row-gap: 15px !important;

        }



        div.legal p {

            margin: 0 !important;

            padding: 0 !important;

            text-align: center !important;

        }



        div.legal p a {

            font-size: 14px !important;

            display: inline-block !important;

        }

    

        /* Schaltet die gezielten Umbrüche auf dem Handy wieder aktiv */

        br.mobile-br {

            display: inline !important;

        }



        body header {

            position: fixed !important;

            top: 0 !important;

            left: 0 !important;

            width: 100% !important;

            z-index: 99999 !important;

        }



        html body main {

            margin-top: 0 !important;

            padding-top: 0 !important;

        }



        section.subpagePlanning, section.subpageStatic, section.subpageSurvey, section.subpageSafety, section.subpageClimateHouse, section.subpageServices {

            padding-top: calc(75px + 20px) !important; 

            padding-bottom: 0 !important;

            margin-top: 0 !important;

            margin-bottom: 0 !important;

            display: block !important;

        }



        section.subpagePlanning .center, section.subpageStatic .center, section.subpageSurvey .center, section.subpageSafety .center, section.subpageClimateHouse .center, section.subpageServices .center {

            width: 100% !important;

            max-width: 100% !important;

            padding: 0 24px !important;

            box-sizing: border-box !important;

            margin: 0 !important;

        }



        section.subpagePlanning h2, section.subpageStatic h2, section.subpageSurvey h2, section.subpageSafety h2, section.subpageClimateHouse h2, section.subpageServices h2 {

            font-size: 28px !important;

            line-height: 36px !important;

            margin-top: 0 !important;

            margin-bottom: 0 !important;

            margin-left: 0 !important;

            margin-right: 0 !important;

            padding-top: 0 !important;

            padding-bottom: 0 !important;

            text-align: left !important;

        }



        html body section.pageBanner {

            margin-top: 30px !important; 

            margin-bottom: 25px !important;

            width: 100% !important;

            max-width: 100% !important;

            padding: 0 !important;

            display: block !important;

            height: auto !important; /* Überlässt der Grafik komplett die Kontrolle */

        }



        html body section.pageBanner img.desktopBanner {

            display: none !important; /* Versteckt das Desktop-Bild auf dem Handy */

        }



        html body section.pageBanner img.mobileBanner {

            display: block !important; /* Zeigt das Mobile-Bild nur auf dem Handy an */

            width: 100% !important; 

            max-width: 100% !important;

            height: auto !important; 

            margin: 0 !important; 

            padding: 0 !important;

        }



        section.pageMainText div.contentGrid.center {

            display: flex !important;

            flex-direction: column !important;

            width: 100% !important;

            max-width: 100% !important;

            padding: 0 24px !important;

            margin-bottom: 40px !important;

            box-sizing: border-box !important;

            gap: 30px !important;

        }



        div.textContent, div.textContentStory, div.textContentPrivacyPolicy, div.textContentContact, div.textContentLegalNotice {

            width: 100% !important;

            flex: none !important;

        }



        div.textContent p, div.textContentStory p, div.textContentPrivacyPolicy p, div.textContentContact p, div.textContentLegalNotice p {

            font-size: 16px !important;

            line-height: 26px !important;

            text-align: left !important;

            color: #333333 !important;

            margin: 0 0 16px 0 !important;

        }



        /* Ignoriert alle harten Zeilenumbrüche (<br>) im normalen Textfluss auf dem Smartphone */

        div.textContent p br, div.textContentStory p br, div.textContentPrivacyPolicy p br, div.textContentContact p br {

            display: none !important;

        }

    

        div.textContentContact .contactDetails p br {

        display: inline !important; /* Hebt das 'none' für die Kontaktdaten wieder auf */

        }

    

        div.textContentContact .contactDetails p {

            font-size: 14px !important;

            line-height: 22px !important;

        }



        div.textContentContact .contactDetails p a {

            text-decoration: underline !important;

        }



        div.textContentContact .contactDetails p a[href^="mailto:"] {

            text-decoration-color: #0056b3 !important;

        }



        div.textContentLegalNotice p br {

        display: inline !important;

        }



        div.textContentLegalNotice p:last-of-type br {

        display: none !important; /* Schaltet das 'inline' für den letzten Satz wieder ab */

        }



        div.blueInfoBox {

            width: 100% !important;

            max-width: 100% !important;

            flex: none !important;

            margin-top: 0 !important; 

            background-color: #E2EEF8 !important; 

            border: 3px solid #2776BB !important;

            border-radius: 18px !important;

            padding: 22px 20px !important;

            box-sizing: border-box !important;

        }



        div.blueInfoBox p strong, div.blueInfoBox p {

            font-size: 15px !important;

            line-height: 22px !important;

            display: block !important;

            margin: 0 0 12px 0 !important;

            color: #333333 !important;

            font-weight: 500 !important;

        }



        div.blueInfoBox ul {

            margin: 0 !important;

            padding: 0 !important;

            list-style: none !important;

        }



        div.blueInfoBox ul li {

            font-size: 15px !important;

            line-height: 22px !important;

            position: relative !important;

            padding-left: 20px !important;

            margin-bottom: 10px !important;

            color: #333333 !important;

        }



        div.blueInfoBox ul li::before {

            content: "–" !important;

            position: absolute !important;

            left: 0 !important;

            top: 0 !important;

            color: #2776BB !important;

            font-weight: bold !important;

        }



        div.blueInfoBox ul li:last-child {

            margin-bottom: 0 !important;

        }

    

        .teamColumns {

            display: flex !important;

            flex-direction: column !important;

            align-items: center !important;

            gap: 50px !important;

            margin-top: 40px;

        }



        .teamColumnOne, .teamColumnTwo {

            display: contents !important;

            margin: 0 !important;

            padding: 0 !important;

        }



        .teamCard {

            width: 100%;

            max-width: 450px;

            text-align: left;

            margin: 0 !important;

        }



        .teamCard img {

            width: 100%;

            height: auto;

            display: block;

            margin-bottom: 15px;

        }



        .team section.team h2,

        .teamCard .teamTitle {

            color: #ffffff;

        }



        /* 4. Reihenfolge (bleibt unverändert) */

        .teamOne   { order: 1 !important; } /* Walter */

        .teamThree { order: 2 !important; } /* Gerhard */

        .teamTwo   { order: 3 !important; } /* Martin */

        .teamFour  { order: 4 !important; } /* Elias */



        .teamCard p.teamTitle {

            font-size: 1rem !important;

            line-height: 1.5 !important;

            font-weight: normal !important;

        }



        .teamCard p.teamTitle strong {

            font-size: 1rem !important; /* Identische Grundgröße wie der Fließtext */

            font-weight: 500 !important;

        }

    

        section.service, .service .center {

            padding-top: 40px !important;

        }

    }

}