body{
margin:0;
font-family:Poppins;
background:#f2f4f6;
color:#333;
}


/* HEADER */

.menu{
background:white;
padding:18px 60px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.menu_inner{
display:flex;
justify-content:space-between;
align-items:center;
max-width:1600px;
margin:auto;
}

.logo img{
height:70px;
width:auto;
}

nav a{
margin-left:50px;
text-decoration:none;
color:#2e8b57;
font-weight:500;
letter-spacing:1px;
font-size:18px;
}

nav a:hover{
color:#1e6f45;
}


/* SCRIPT HEADLINE */

.headline_script{
text-align:center;
font-family:Pacifico;
color:#3aa05c;
font-size:46px;
margin:50px 0;
}


/* ============================= */
/* STARTSEITE / HERO */
/* ============================= */

.main_area{
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch; /* linke Box passt sich Höhe an */
}

/* Linke Box */
.services{
    flex:0 0 33.3333%;
    max-width:33.3333%;
    min-width:0;
    box-sizing:border-box;
    background:#6f6f6f;
    padding:70px 40px;
    color:white;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    font-size: x-large;
}

/* Textfarbe fix */
.services h2{
    color:white;
    margin-bottom:50px;
}

/* Service Items */
.service{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:40px;
    text-decoration:none;
    color:white;
    transition:0.2s;
    font-size:x-large;
}
.service img{
    width:70px;
    height:auto;
    flex-shrink:0;
}
.service div{
    line-height:1.3;
}
.service:hover{
    transform:translateX(5px);
    color:#7cff9c;
}

/* Rechte Seite */
.content_right{
    flex:0 0 66.6667%;
    max-width:66.6667%;
    min-width:0;
    box-sizing:border-box;
    position:relative;
    /* height:600px; adjust as needed */
    /* overflow:hidden; important for cropping */
}

/* Bild */
.hero_img{
    width:100%;
    height:auto; /* Bild behält nicht mehr volle Höhe */
    /* object-fit:cover; THIS is the key */
    display:block;
}

/* Text über dem Bild */
.hero_text{
    position:absolute;
    top:7%;       /* Abstand von oben (jetzt weiter oben) */
    left:10%;      /* Abstand von links */
    transform:translate(0, 0); /* Kein zentrieren mehr */
    color:white;
    padding:20px;
    max-width:600px; /* Optional: kleinerer Textblock */
    text-align:left;
}

/* Textstile */
.text_big{
    font-size:xx-large;
    font-weight:600;
    margin-bottom:15px;
    color:#046793;
}

.text_green{
    font-size:xx-large;
    font-weight:600;
    color:#2da357;
    margin-bottom:20px;
}

/* CTA */
.cta{
    background:#2c7a94;
    border:none;
    padding:18px 45px;
    border-radius:35px;
    color:white;
    font-weight:600;
    cursor:pointer;
    font-size:16px;
}
.cta:hover{
    background:#2f6f84;
}
.cta_text{
    color:white;
    font-weight:600;
    font-size:16px;
    text-decoration:none;
}

/* FOOTER */

.footer{
background:#3d3d3d;
color:white;
text-align:center;
padding:30px;
font-size:large;
}

.footer-link{
color:#aaaaaa;
}



/* ============================= */
/* RENOVIERUNGEN SEITE */
/* ============================= */

.renovierung_section{
display:flex;
width:100%;
min-height:750px;
}


/* linke Bildspalte */

.left_images{
width:40%;
background:#6c6c6c;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:50px;
padding:80px 40px;
}

.side_img{
width:340px;
box-shadow:0 6px 20px rgba(0,0,0,0.25);
}


/* rechte Contentseite */

.right_content{
width:60%;
background:#176a88;
color:white;
padding:100px 120px;
}


.title_row{
display:flex;
align-items:center;
gap:25px;
margin-bottom:40px;
}

.title_icon{
height:80px;
}

.title_row h1{
font-size:40px;
letter-spacing:2px;
margin:0;
}


/* Liste */

.services_list{
font-size:26px;
line-height:2;
padding-left:35px;
}

.services_list li::marker{
color:#53c05e;
font-size:28px;
}


/* Call Bereich */

.call_box{
margin-top:70px;
display:flex;
align-items:center;
gap:30px;
}

.call_button{
background:#4caf50;
padding:18px 40px;
border-radius:35px;
font-family:Pacifico;
font-size:24px;
}

.call_button a{
color:white;
}

.call_button a:hover{
color:#176a88;
}

.phone{
font-size:26px;
font-weight:500;
}



.topbar{
background:#4aa657;
padding:16px 80px;
}

.topnav{
display:flex;
justify-content:flex-end;
gap:50px;
max-width:1600px;
margin:auto;
}

.topnav a{
color:white;
text-decoration:none;
font-size:x-large;
letter-spacing:1px;
font-weight:500;
}

.topnav a:hover{
opacity:0.8;
}



.header_main{
display:flex;
align-items:center;
justify-content:space-between;
padding:0px 60px;
background:#f2f4f6;
}

.logo{
height:75px;
}

.headline_script{
font-family:Pacifico;
font-size: clamp(x-large, 3vw, 26px);
color:#3aa05c;
text-align:center;
flex:1;
}


/* ============================= */
/* IMPRESSUM / CONTACT PAGE */
/* ============================= */

.contact-page-main-box{
    background:#6c6c6c;
}

.contact-page-main{
    max-width:900px;
    margin:80px auto;
    padding:0 20px;
}

.contact-page-subtitle{
    text-align:center;
    font-size:20px;
    margin-bottom:50px;
    color:white;
}

.contact-details-box{
    background:white;
    padding:50px;
    border-radius:15px;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
    text-align:center;
}

.contact-details-box h3{
    font-size:28px;
    margin-bottom:30px;
    color:#2e8b57;
}

.contact-details-box p{
    font-size:x-large;
    margin:10px 0;
}

.contact-details-box a{
    color:#2e8b57;
    text-decoration:none;
    font-weight:500;
}

.contact-details-box a:hover{
    text-decoration:underline;
}


/* MOBILE VIEW */
@media (max-width: 1500px) {
    .topbar,
    .header_main,
    .footer {
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
        padding-left: 16px;
        padding-right: 16px;
    }

    .topbar {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .header_main {
        padding-top: 12px;
        padding-bottom: 12px;
        gap: 10px;
        align-items: center;
    }

    .footer {
        padding-top: 28px;
        padding-bottom: 28px;
    }

    .topnav {
        width: 100%;
        max-width: none;
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px;
    }

    .headline_script {
        flex: 1;
        text-align: right;
        font-size: clamp(14px, 3.8vw, 20px);
    }
    .main_area{
        flex-direction:column;
    }

    .services{
        flex:100%;
        max-width:100%;
        padding:40px 20px;
    }

    .content_right{
        flex:100%;
        max-width:100%;
        height:350px; /* smaller hero on mobile */
    }

    .hero_text{
        top:10%;
        left:5%;
        max-width:90%;
    }
}


/* ============================= */
/* UEBER UNS */
/* ============================= */

.about-main{
    background:#6c6c6c;
    padding:80px 20px;
}

.about-container{
    max-width:900px;
    margin:auto;
    background:white;
    padding:60px;
    border-radius:15px;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

.about-container h1{
    text-align:center;
    font-size:40px;
    margin-bottom:40px;
    color:#2e8b57;
}

.about-container h2{
    margin-top:40px;
    font-size:24px;
    color:#2f6e87;
}

.about-container p{
    margin-top:15px;
    font-size:18px;
    line-height:1.7;
}

.about-list{
    margin-top:20px;
    padding-left:25px;
}

.about-list li{
    margin-bottom:15px;
    font-size:18px;
    line-height:1.6;
}

.about-highlight{
    margin-top:40px;
    font-size:30px;
    font-weight:600;
    color:#2da357;
    text-align:center;
}

/* ============================= */
/* SERVICE DETAILS */
/* ============================= */

.services_block{
    margin-top:20px;
}

.service_item{
    margin-bottom:35px;
}

.service_item h3{
    font-size:24px;
    color:#53c05e;
    margin-bottom:10px;
    letter-spacing:1px;
}

.service_item p{
    font-size:18px;
    line-height:1.6;
    color:#e8f6f9;
    max-width:700px;
}