body {
    margin-top: 60px;
}

.sectionTitle{

    text-align:center;

    margin-bottom:60px;

}

/* ==========================
   Hero
========================== */

.hero{

    position:relative;

    width:100%;

    height:30vh;

    overflow:hidden;

}

.hero img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.heroOverlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:rgba(0,0,0,.45);

    color:white;

}

.heroOverlay h1{

    font-size:4rem;

    margin-bottom:15px;

}

.heroOverlay p{

    font-size:1.2rem;

    max-width:700px;

}

/* ==========================
   Allgemein
========================== */

.about,
.facts,
.advantages,
.cta{

    padding:70px 0;

}

/* ==========================
   Unternehmensvorstellung
========================== */

.about .container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.aboutImage img{

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:3px;

}

.aboutText h2{

    margin-bottom:30px;

}

.aboutText p{

    margin-bottom:20px;

    line-height:1.8;

    color:#555;

}

/* ==========================
   Unsere Werte
========================== */

.values{

    padding:60px 0;

    background:#f8f8f8;

}

.valuesGrid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px 50px;

    max-width:900px;

    margin:60px auto 0;

}

.valueItem{

    font-size:1.1rem;

    font-weight:500;

    padding:20px 25px;

    border-left:4px solid var(--primary);

    background:white;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

/* ==========================
   Projektbegleitung
========================== */

.projectSupport{

    padding:70px 0;

}

.projectSupport .container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.supportImage img{

    width:100%;

    height:450px;

    object-fit:cover;

    border-radius:3px;

}

.supportText h2{

    margin-bottom:25px;

}

.supportText p{

    margin-bottom:20px;

    line-height:1.8;

    color:#555;

}

/* ==========================
   Kennzahlen
========================== */

.facts{

    background:#f5f5f5;

    padding:60px 0;

}

.factsGrid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px;

    max-width:700px;

    margin:auto;

}

.factCard{

    background:white;

    padding:55px;

    text-align:center;

    border-radius:3px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.factCard h2{

    font-size:4rem;

    color:var(--primary);

    margin-bottom:10px;

}

.factCard p{

    font-size:1.1rem;

}

/* ==========================
   Vorteile
========================== */

.advantagesGrid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}

.advantageCard{

    background:#f8f8f8;

    padding:40px;

    border-radius:3px;

}

.advantageCard h3{

    margin-bottom:15px;

}

/* ==========================
   CTA
========================== */

.cta{

    background:#222;

    color:white;

    text-align:center;

}

.cta h2{

    margin-bottom:20px;

}

.cta p{

    max-width:700px;

    margin:0 auto 35px;

    line-height:1.8;

}

.ctaButton{

    display:inline-block;

    padding:16px 35px;

    background:var(--primary);

    color:white;

    border-radius:3px;

    transition:.3s;

}

.ctaButton:hover{

    opacity:.9;

}

@media (max-width:1000px){

    .about .container,
    .projectSupport .container{
        gap:40px;
    }

    .aboutImage img,
    .supportImage img{
        height:380px;
    }

    .heroOverlay h1{
        font-size:3rem;
    }

}

@media (max-width:768px){

    .hero{
        height:28vh;
        min-height:220px;
    }

    .heroOverlay h1{
        font-size:2.3rem;
    }

    .heroOverlay p{
        font-size:1rem;
        width:90%;
    }

    .about,
    .projectSupport,
    .values,
    .facts,
    .cta{
        padding:50px 0;
    }

    .about .container,
    .projectSupport .container{
        grid-template-columns:1fr;
        gap:35px;
    }

    .projectSupport .supportImage{
        order:-1;
    }

    .aboutImage img,
    .supportImage img{
        height:280px;
    }

    .valuesGrid,
    .factsGrid,
    .advantagesGrid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .factCard{
        padding:35px;
    }

    .factCard h2{
        font-size:3rem;
    }

}