/* ===================================
   ÜBER UNS SEITE
=================================== */

.about-story{
    max-width:1400px;
    margin:auto;
    padding:120px 5%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.about-story-image img{
    width:100%;
    border-radius:20px;
    object-fit:cover;
}

.about-story-content h2{
    font-size:3rem;
    color:#d4af37;
    margin-bottom:25px;
}

.about-story-content p{
    color:#d0d0d0;
    margin-bottom:20px;
    font-size:1.1rem;
    line-height:1.8;
}

/* ===================================
   SECTION TITLE
=================================== */

.section-title{
    text-align:center;
    max-width:800px;
    margin:auto;
    margin-bottom:70px;
}

.section-title h2{
    font-size:3rem;
    margin-bottom:20px;
}

.section-title p{
    color:#bdbdbd;
    font-size:1.1rem;
}

/* ===================================
   WERTE
=================================== */

.values{
    padding:120px 5%;
    background:#111;
}

.values-grid{
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.value-box{
    background:#181818;
    border-radius:20px;
    overflow:hidden;
    transition:.4s;
    border:1px solid rgba(255,255,255,0.05);
}

.value-box:hover{
    transform:translateY(-10px);
}

.value-box img{
    width:100%;
    height:250px;
    object-fit:cover;
}

.value-box h3{
    padding:25px 25px 10px;
    color:#d4af37;
    font-size:1.6rem;
}

.value-box p{
    padding:0 25px 25px;
    color:#cfcfcf;
}

/* ===================================
   HIGHLIGHT
=================================== */

.about-highlight{
    max-width:1400px;
    margin:auto;
    padding:120px 5%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.highlight-content h2{
    font-size:3rem;
    line-height:1.2;
    margin-bottom:25px;
}

.highlight-content p{
    color:#d0d0d0;
    margin-bottom:20px;
    font-size:1.1rem;
}

.highlight-image img{
    width:100%;
    border-radius:20px;
    object-fit:cover;
}

/* ===================================
   HERO SPEZIAL
=================================== */

.about-hero{
    height:80vh;
}

.about-hero img{
    filter:brightness(35%);
}

.about-hero .hero-content{
    max-width:900px;
}

/* ===================================
   MOBILE
=================================== */

@media(max-width:991px){

    .about-story,
    .about-highlight{
        grid-template-columns:1fr;
    }

    .about-story-content h2,
    .highlight-content h2,
    .section-title h2{
        font-size:2.5rem;
    }

}

@media(max-width:768px){

    .about-story,
    .about-highlight,
    .values{
        padding:80px 5%;
    }

    .about-story-content h2,
    .highlight-content h2,
    .section-title h2{
        font-size:2rem;
    }

    .about-story-content p,
    .highlight-content p{
        font-size:1rem;
    }

    .value-box img{
        height:220px;
    }

}