@font-face{
    font-family:"Poppins";
    src:url("../fonts/Poppins-Regular.ttf") format("truetype");
    font-weight:400;
}

@font-face{
    font-family:"Poppins";
    src:url("../fonts/Poppins-Medium.ttf") format("truetype");
    font-weight:500;
}

@font-face{
    font-family:"Poppins";
    src:url("../fonts/Poppins-SemiBold.ttf") format("truetype");
    font-weight:600;
}

@font-face{
    font-family:"Poppins";
    src:url("../fonts/Poppins-Bold.ttf") format("truetype");
    font-weight:700;
}*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --green:#2e9f47;
    --green-dark:#26853b;
    --dark:#1d2b36;
    --dark-footer:#111922;
    --light:#f8f9fa;
    --text:#222;
    --muted:#666;
    --icon:#a9afb6;
}

html{
    font-size:100%;
}

body{
    font-family:'Poppins',sans-serif;
    background:#ffffff;
    color:var(--text);
}

/* ===========================
   Header
=========================== */

.header{
    min-height:6rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2%;
    padding:0 6%;
    background:white;
    border-bottom:0.06rem solid #ececec;
}

.header-logo{
    font-size:clamp(1.4rem, 2vw, 2rem);
    font-weight:700;
    color:var(--dark);
    white-space:nowrap;
}

.header-logo span{
    color:var(--green);
}

.header-nav{
    display:flex;
    gap:2rem;
    flex-wrap:wrap;
    justify-content:center;
}

.header-nav a{
    text-decoration:none;
    color:var(--dark);
    font-size:clamp(0.95rem, 1.1vw, 1.15rem);
    font-weight:500;
    transition:.25s;
}

.header-nav a:hover,
.header-nav a.active{
    color:var(--green);
}

.header-contact{
    display:flex;
    flex-direction:column;
    gap:0.4rem;
}

.header-contact p{
    font-size:clamp(0.8rem, 1vw, 0.95rem);
    color:#444;
    white-space:nowrap;
}

.header-contact i{
    color:var(--green);
    margin-right:0.5rem;
}

.header-button{
    padding:0.9rem 1.6rem;
    background:var(--green);
    color:white;
    border-radius:0.5rem;
    text-decoration:none;
    font-weight:600;
    transition:.25s;
    white-space:nowrap;
}

.header-button:hover{
    background:var(--green-dark);
}

/* ===========================
   Hero-Bereich
=========================== */

.hero{
    min-height:75vh;
    background-image:
        linear-gradient(rgba(20, 35, 45, 0.55), rgba(20, 35, 45, 0.55)),
        url("../images/hero.png");
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
}

.hero-overlay{
    width:100%;
    padding:0 7%;
}

.hero-text{
    max-width:52rem;
    color:white;
}

.hero-subtitle{
    font-size:clamp(0.95rem, 1.3vw, 1.15rem);
    font-weight:700;
    letter-spacing:0.12rem;
    color:var(--green);
    margin-bottom:1.1rem;
}

.hero h1{
    font-size:clamp(2.8rem, 6vw, 4.8rem);
    line-height:1.08;
    margin-bottom:1.8rem;
}

.hero-description{
    font-size:clamp(1.1rem, 2vw, 1.45rem);
    line-height:1.7;
    max-width:48rem;
    margin-bottom:1.8rem;
}

.hero-points{
    margin-bottom:2rem;
}

.hero-points p{
    font-size:clamp(1rem, 1.8vw, 1.3rem);
    font-weight:500;
    margin-bottom:0.75rem;
}

.hero-points i{
    color:var(--green);
    margin-right:0.6rem;
}

.button-green,
.button-white{
    display:inline-block;
    padding:1rem 1.9rem;
    border-radius:0.5rem;
    text-decoration:none;
    font-size:clamp(0.95rem, 1.2vw, 1.1rem);
    font-weight:600;
    margin-right:0.9rem;
    margin-top:0.6rem;
}

.button-green{
    background:var(--green);
    color:white;
}

.button-white{
    background:white;
    color:var(--dark);
}

/* ===========================
   Vertrauensbereich
=========================== */

.trust-section{
    display:flex;
    justify-content:space-between;
    gap:3%;
    padding:6% 7%;
    background:#ffffff;
}

.trust-item{
    flex:1;
    text-align:center;
}

.trust-item i{
    font-size:clamp(2rem, 3vw, 2.9rem);
    color:#9aa3ab;
    margin-bottom:1.8rem;
}

.trust-item h3{
    font-size:clamp(1.2rem, 1.8vw, 1.5rem);
    font-weight:600;
    color:var(--dark);
    margin-bottom:0.9rem;
}

.trust-item p{
    font-size:clamp(0.95rem, 1.2vw, 1.05rem);
    line-height:1.7;
    color:var(--muted);
}

/* ===========================
   Leistungen
=========================== */

.service-section{
    padding:7% 7%;
    background:var(--light);
}

.section-label{
    color:var(--green);
    font-size:clamp(0.9rem, 1.2vw, 1.05rem);
    font-weight:600;
    letter-spacing:0.12rem;
    text-transform:uppercase;
    margin-bottom:1.1rem;
}

.service-section h2,
.process-section h2{
    font-size:clamp(2rem, 4vw, 3rem);
    color:var(--dark);
    margin-bottom:5%;
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:3%;
}

.service-card{
    background:white;
    border-radius:0.9rem;
    padding:8%;
    box-shadow:0 0.5rem 1.5rem rgba(0,0,0,.05);
    transition:.3s;
}

.service-card:hover{
    transform:translateY(-0.5rem);
}

.service-card i{
    font-size:clamp(2rem, 3vw, 2.9rem);
    color:var(--icon);
    margin-bottom:1.8rem;
}

.service-card h3{
    font-size:clamp(1.3rem, 2vw, 1.7rem);
    color:var(--dark);
    margin-bottom:1.1rem;
}

.service-card p{
    font-size:clamp(0.95rem, 1.2vw, 1.05rem);
    color:var(--muted);
    line-height:1.8;
    margin-bottom:2rem;
}

.service-card a{
    text-decoration:none;
    color:var(--green);
    font-weight:600;
}

/* ===========================
   Ablauf
=========================== */

.process-section{
    padding:7% 7%;
    background:white;
    text-align:center;
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:3%;
}

.process-card{
    position:relative;
    background:var(--light);
    padding:18% 10% 12%;
    border-radius:0.9rem;
}

.number-circle{
    position:absolute;
    top:-1.2rem;
    left:50%;
    transform:translateX(-50%);
    width:2.8rem;
    height:2.8rem;
    border-radius:50%;
    background:var(--green);
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:700;
}

.process-card i{
    font-size:clamp(2rem, 3vw, 2.6rem);
    color:var(--icon);
    margin-top:1rem;
    margin-bottom:1.6rem;
}

.process-card h3{
    font-size:clamp(1.15rem, 1.8vw, 1.5rem);
    margin-bottom:1rem;
    color:var(--dark);
}

.process-card p{
    color:var(--muted);
    line-height:1.8;
}

/* ===========================
   Kontaktbereich
=========================== */

.contact-banner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:4%;
    padding:6% 7%;
    background:var(--dark);
    color:white;
}

.contact-left{
    max-width:60%;
}

.contact-left h2{
    font-size:clamp(2rem, 4vw, 2.9rem);
    margin:1.2rem 0;
}

.contact-left p{
    font-size:clamp(1rem, 1.4vw, 1.15rem);
    line-height:1.8;
}

.contact-right{
    display:flex;
    align-items:center;
}

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

.footer{
    background:var(--dark-footer);
    color:white;
    padding:5% 7%;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:6%;
}

.footer h2,
.footer h3{
    margin-bottom:1.3rem;
}

.footer a{
    display:block;
    color:#d9d9d9;
    text-decoration:none;
    margin-bottom:0.8rem;
}

.footer p{
    color:#b7b7b7;
    line-height:1.8;
}

/* ===========================
   Kontaktseite
=========================== */

.page-header{
    padding:6% 7%;
    text-align:center;
    background:var(--light);
}

.page-header h1{
    font-size:clamp(2.4rem, 5vw, 3.5rem);
    color:var(--dark);
    margin-bottom:1.3rem;
}

.page-header p{
    max-width:52rem;
    margin:0 auto;
    font-size:clamp(1rem, 1.5vw, 1.25rem);
    line-height:1.7;
    color:var(--muted);
}

.contact-form-section{
    padding:6% 7%;
    background:white;
    display:flex;
    justify-content:center;
}

.contact-form{
    width:100%;
    max-width:45rem;
    background:var(--light);
    padding:5%;
    border-radius:1rem;
    box-shadow:0 0.5rem 1.5rem rgba(0,0,0,.06);
}

.contact-form label{
    display:block;
    font-size:clamp(0.95rem, 1.2vw, 1.05rem);
    font-weight:600;
    color:var(--dark);
    margin-bottom:0.5rem;
    margin-top:1.3rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
    width:100%;
    padding:1rem;
    border:0.06rem solid #d9dee3;
    border-radius:0.5rem;
    font-size:1rem;
    font-family:'Poppins',sans-serif;
    background:white;
}

.contact-form textarea{
    resize:vertical;
}

.contact-form button{
    margin-top:1.8rem;
    border:none;
    cursor:pointer;
    font-family:'Poppins',sans-serif;
    font-size:1.05rem;
}

/* ===========================
   Unterseiten
=========================== */

.page-hero{
    padding:7% 7%;
    background:var(--light);
    text-align:center;
}

.page-hero h1{
    font-size:clamp(2.4rem, 5vw, 3.5rem);
    color:var(--dark);
    margin:1.2rem auto;
    max-width:65rem;
}

.page-hero p{
    font-size:clamp(1rem, 1.5vw, 1.25rem);
    color:var(--muted);
    line-height:1.8;
    max-width:55rem;
    margin:0 auto;
}

.detail-services{
    padding:6% 7%;
    background:white;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:3%;
}

.detail-card{
    background:var(--light);
    padding:8%;
    border-radius:0.9rem;
}

.detail-card i{
    font-size:clamp(2rem, 3vw, 2.75rem);
    color:var(--icon);
    margin-bottom:1.6rem;
}

.detail-card h2{
    font-size:clamp(1.4rem, 2vw, 1.75rem);
    color:var(--dark);
    margin-bottom:1.1rem;
}

.detail-card p{
    font-size:clamp(0.95rem, 1.2vw, 1.05rem);
    line-height:1.8;
    color:var(--muted);
}

/* ===========================
   FAQ
=========================== */

.faq-section{
    padding:6% 7%;
    background:white;
    max-width:72rem;
    margin:auto;
}

.faq-item{
    background:var(--light);
    padding:4%;
    border-radius:0.9rem;
    margin-bottom:2%;
}

.faq-item h3{
    font-size:clamp(1.2rem, 1.8vw, 1.5rem);
    color:var(--dark);
    margin-bottom:1rem;
}

.faq-item p{
    font-size:clamp(0.95rem, 1.2vw, 1.05rem);
    line-height:1.8;
    color:var(--muted);
}

/* ===========================
   Chatbot
=========================== */

.chat-button{
    position:fixed;
    right:3%;
    bottom:4%;
    width:4.4rem;
    height:4.4rem;
    border-radius:50%;
    background:var(--green);
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.75rem;
    cursor:pointer;
    box-shadow:0 0.5rem 1.6rem rgba(0,0,0,.25);
    z-index:50;
}

.chat-window{
    display:none;
    position:fixed;
    right:3%;
    bottom:13%;
    width:32%;
    max-width:26rem;
    min-width:20rem;
    height:72vh;
    max-height:38rem;
    background:white;
    border-radius:1rem;
    box-shadow:0 0.6rem 1.9rem rgba(0,0,0,.25);
    overflow:hidden;
    z-index:50;
    flex-direction:column;
}

.chat-header{
    background:var(--dark);
    color:white;
    padding:1.1rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.chat-header h3{
    font-size:clamp(1.1rem, 1.6vw, 1.4rem);
    font-weight:600;
}

.chat-header button{
    background:none;
    border:none;
    color:white;
    font-size:1.6rem;
    cursor:pointer;
}

.chat-messages{
    flex:1;
    padding:1.3rem;
    overflow-y:auto;
    background:var(--light);
}

.bot-message,
.user-message{
    padding:0.9rem 1rem;
    margin-bottom:0.9rem;
    font-size:clamp(0.95rem, 1.2vw, 1.05rem);
    line-height:1.6;
}

.bot-message{
    background:white;
    color:#333;
    border-radius:1.1rem 1.1rem 1.1rem 0.4rem;
    box-shadow:0 0.25rem 0.8rem rgba(0,0,0,.05);
}

.user-message{
    background:var(--green);
    color:white;
    border-radius:1.1rem 1.1rem 0.4rem 1.1rem;
    margin-left:15%;
}

.quick-replies{
    display:flex;
    flex-wrap:wrap;
    gap:0.6rem;
    margin-top:1rem;
}

.quick-replies button{
    border:none;
    background:#eef5f0;
    color:var(--dark);
    padding:0.6rem 0.9rem;
    border-radius:1.25rem;
    cursor:pointer;
    font-family:'Poppins',sans-serif;
    font-size:0.95rem;
    font-weight:500;
}

.quick-replies button:hover{
    background:var(--green);
    color:white;
}

.chat-input{
    display:flex;
    border-top:0.06rem solid #e5e5e5;
}

.chat-input input{
    flex:1;
    min-width:0;
    border:none;
    padding:1.1rem;
    font-family:'Poppins',sans-serif;
    font-size:1rem;
}

.chat-input button{
    border:none;
    background:var(--green);
    color:white;
    padding:0 1.5rem;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;
}

/* ===========================
   Antwortseite Formular
=========================== */

.answer-page{
    min-height:100vh;
    background:var(--light);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Poppins',sans-serif;
}

.answer-box{
    width:90%;
    max-width:45rem;
    background:white;
    padding:5%;
    border-radius:1.1rem;
    box-shadow:0 0.75rem 2.2rem rgba(0,0,0,.08);
    text-align:center;
}

.answer-icon{
    width:5rem;
    height:5rem;
    border-radius:50%;
    background:var(--green);
    color:white;
    font-size:2.6rem;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 1.6rem auto;
}

.answer-box h1{
    font-size:clamp(2rem, 4vw, 2.65rem);
    color:var(--dark);
    margin-bottom:1.1rem;
}

.answer-text{
    font-size:clamp(1rem, 1.4vw, 1.2rem);
    line-height:1.7;
    color:var(--muted);
    margin-bottom:2.2rem;
}

.answer-details{
    text-align:left;
    background:var(--light);
    padding:5%;
    border-radius:0.9rem;
    margin-bottom:2.2rem;
}

.answer-details h2{
    color:var(--dark);
    margin-bottom:1.3rem;
}

.answer-details p{
    font-size:1rem;
    color:#555;
    margin-bottom:0.75rem;
}

/* ===========================
   Responsive Design
=========================== */

@media (max-width: 1100px){
    .header{
        min-height:auto;
        flex-wrap:wrap;
        padding:2% 5%;
        row-gap:1rem;
    }

    .header-nav{
        order:3;
        width:100%;
        justify-content:center;
        gap:4%;
    }

    .service-grid,
    .detail-services{
        grid-template-columns:repeat(2, 1fr);
    }

    .process-grid{
        grid-template-columns:repeat(2, 1fr);
        row-gap:3rem;
    }

    .chat-window{
        width:45%;
    }
}

@media (max-width: 800px){
    .header{
        flex-direction:column;
        text-align:center;
        padding:4% 5%;
        gap:1rem;
    }

    .header-contact{
        align-items:center;
    }

    .hero{
        min-height:80vh;
        text-align:center;
    }

    .hero-overlay{
        padding:0 6%;
    }

    .hero-text{
        margin:auto;
    }

    .button-green,
    .button-white{
        width:100%;
        text-align:center;
        margin-right:0;
    }

    .trust-section,
    .contact-banner{
        flex-direction:column;
        text-align:center;
    }

    .trust-item{
        margin-bottom:2rem;
    }

    .contact-left{
        max-width:100%;
    }

    .service-grid,
    .detail-services,
    .process-grid,
    .footer-grid{
        display: grid;
        grid-template-columns:1fr;
        gap:2rem;
    }

    .process-card{
        padding:4rem 8% 10%;
    }

    .chat-window{
        right:5%;
        left:5%;
        bottom:12%;
        width:auto;
        min-width:0;
        height:70vh;
    }

    .chat-button{
        right:5%;
        bottom:4%;
        width:4rem;
        height:4rem;
        font-size:1.5rem;
    }
}

@media (max-width: 480px){
    .header-logo{
        font-size:1.5rem;
    }

    .header-nav{
        gap:1rem;
    }

    .header-nav a{
        font-size:0.95rem;
    }

    .hero h1{
        font-size:2.4rem;
    }

    .hero-description,
    .hero-points p{
        font-size:1rem;
    }

    .page-header,
    .page-hero,
    .service-section,
    .process-section,
    .contact-form-section,
    .detail-services,
    .faq-section{
        padding:14% 6%;
    }

    .chat-input button{
        padding:0 1rem;
    }
}

/* Datenschutz-Zustimmung im Kontaktformular */
.privacy-check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.privacy-check input {
    width: auto;
    margin-top: 0.35rem;
    flex: 0 0 auto;
}

.privacy-check label {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.6;
}

.privacy-check a {
    color: var(--green);
}

/* ===========================
   Rechtliche Seiten
=========================== */

.legal-section{
    padding:5% 7%;
    background:#fff;
}

.legal-content{
    width:min(100%, 62rem);
    margin:0 auto;
    display:grid;
    gap:1.5rem;
}

.legal-block{
    background:var(--light);
    border-radius:0.9rem;
    padding:clamp(1.5rem, 4vw, 2.5rem);
    border:1px solid rgba(0,0,0,0.06);
}

.legal-block h2{
    color:var(--dark);
    font-size:clamp(1.25rem, 2vw, 1.6rem);
    margin-bottom:1rem;
}

.legal-block p,
.legal-block li{
    color:var(--muted);
    line-height:1.8;
}

.legal-block p + p{
    margin-top:1rem;
}

.legal-block ul{
    padding-left:1.4rem;
    margin:1rem 0;
}

.legal-block a{
    color:var(--green);
    overflow-wrap:anywhere;
}

.legal-note{
    margin-top:1rem;
    padding:0.9rem 1rem;
    border-left:0.25rem solid var(--green);
    background:#fff;
    font-size:0.92rem;
}