/* ==========================================================

   ÜBER UNS

   Schuhhaus Minnich

========================================================== */

/* ==========================================================

   GRUNDLAGEN

========================================================== */

.about-page{

    background:#fff;

    color:#333;

}

.about-page *{

    box-sizing:border-box;

}

.about-page section{

    padding:110px 0;

}

.about-page .container{

    width:min(1400px,92%);

    margin:0 auto;

}

.section-kicker{

    display:inline-block;

    margin-bottom:18px;

    color:#c99a2a;

    font-size:14px;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

}

.about-page h1,

.about-page h2,

.about-page h3{

    margin:0;

    font-weight:800;

    color:#222;

    letter-spacing:-1px;

}

.about-page p{

    margin:0 0 24px;

    font-size:19px;

    line-height:1.9;

    color:#666;

}

/* ==========================================================

   HERO

========================================================== */

.about-hero{

    padding-top:80px;

    padding-bottom:100px;

}

.about-grid{

    display:grid;

    grid-template-columns:1.1fr 1fr;

    gap:90px;

    align-items:center;   /* bleibt */

    min-height:520px;     /* neu */

}

.about-text{

    max-width:650px;

}

.about-hero h1{

    margin-bottom:30px;

    font-size:68px;

    line-height:1.05;

}

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    display:block;

    border-radius:24px;

    box-shadow:0 30px 70px rgba(0,0,0,.12);

    transition:.35s ease;

}

.about-image img:hover{

    transform:translateY(-6px);

}

/* ==========================================================

   GESCHICHTE

========================================================== */

.about-history{

    background:#fafafa;

    margin-top:40px;

}

.history-grid{

    display:grid;

    grid-template-columns:480px 1fr;

    gap:90px;

    align-items:center;

}

.history-image img{

    width:100%;

    display:block;

    border-radius:24px;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

    transition:.35s ease;

}

.history-image img:hover{

    transform:translateY(-6px);

}

.history-text{

    max-width:760px;

}

.history-text h2{

    margin:0 0 35px;

    font-size:50px;

}

.history-text p:last-child{

    margin-bottom:0;

}

/* ==========================================================

   SANFTE EINBLENDUNG

========================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.about-hero,

.about-history{

    animation:fadeUp .7s ease both;

}

/* ==========================================================

   GALERIE

========================================================== */

.about-gallery{

    background:#fff;

}

.gallery-grid{

    display:grid;

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

    gap:40px;

}

.gallery-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    transition:all .35s ease;

}

.gallery-card:hover{

    transform:translateY(-8px);

    box-shadow:0 28px 70px rgba(0,0,0,.14);

}

.gallery-card img{

    width:100%;

    height:420px;

    object-fit:cover;

    object-position:center;

    display:block;

    transition:transform .4s ease;

}

.gallery-card:hover img{

    transform:scale(1.05);

}

.gallery-card figcaption{

    padding:28px;

    text-align:center;

    font-size:18px;

    color:#666;

    line-height:1.7;

}

/* ==========================================================

   ZEITLEISTE

========================================================== */

.about-timeline{

    background:#f7f7f7;

}

.timeline-title{

    text-align:center;

    margin-bottom:70px;

}

.timeline{

    display:grid;

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

    gap:30px;

}

.timeline-item{

    background:#fff;

    border-radius:20px;

    padding:36px 24px;

    text-align:center;

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

    transition:.35s ease;

}

.timeline-item:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 60px rgba(0,0,0,.14);

}

.timeline-year{

    display:block;

    margin-bottom:18px;

    font-size:34px;

    font-weight:800;

    color:#c99a2a;

}

.timeline-item p{

    margin:0;

    font-size:17px;

    line-height:1.7;

}

/* ==========================================================

   ZITAT

========================================================== */

.about-quote{

    max-width:900px;

    margin:90px auto 0;

    padding:40px;

    background:#fff;

    border-left:5px solid #c99a2a;

    border-radius:18px;

    text-align:center;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

}

.about-quote p{

    margin:0;

    font-size:24px;

    font-style:italic;

    line-height:1.7;

    color:#444;

}
/* ==========================================================
   TEAM
========================================================== */

.about-team{
    background:#fff;
}

.about-team .section-kicker{
    display:block;
    text-align:center;
}

.about-team h2{
    text-align:center;
    font-size:52px;
    margin-bottom:20px;
}

.team-intro{
    max-width:760px;
    margin:0 auto 70px;
    text-align:center;
}


/* ---------- Grid ---------- */

.team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
}


/* ---------- Karte ---------- */

.team-card{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    background:#fff;
    box-shadow:0 20px 45px rgba(0,0,0,.10);
    transition:.35s;
}

.team-card:hover{
    transform:translateY(-8px);
    box-shadow:0 35px 70px rgba(0,0,0,.18);
}


/* ---------- Bild ---------- */

.team-card img{
    width:100%;
    height:430px;
    object-fit:cover;
    object-position:center top;
    display:block;
    transition:transform .45s ease;
}

.team-card:hover img{
    transform:scale(1.05);
}


/* ---------- Overlay ---------- */

.team-content{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:28px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.90),
        rgba(0,0,0,.65),
        rgba(0,0,0,0)
    );

    color:#fff;

}


/* ---------- Name ---------- */

.team-content h3{

    color:#fff;

    font-size:30px;

    margin:0 0 6px;

}


/* ---------- Funktion ---------- */

.team-position{

    display:block;

    color:#d7b35a;

    font-size:15px;

    font-weight:700;

    margin-bottom:0;

    letter-spacing:1px;

    text-transform:uppercase;

}


/* ---------- Beschreibung ---------- */

.team-text{

    margin-top:18px;

    color:#fff;

    font-size:15px;

    line-height:1.7;

    opacity:0;

    max-height:0;

    overflow:hidden;

    transition:
        opacity .35s,
        max-height .45s;

}


.team-card:hover .team-text{

    opacity:1;

    max-height:220px;

}
/* ==========================================================
   ABSCHLUSS
========================================================== */

.about-closing{

    padding:120px 0;

    background:#f8f6f2;

}

.about-closing .container{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.about-closing .section-kicker{

    display:block;

    margin-bottom:20px;

}

.about-closing h2{

    font-size:54px;

    margin-bottom:35px;

}

.about-closing p{

    font-size:22px;

    line-height:1.9;

    color:#555;

    margin-bottom:28px;

}

.about-signature{

    margin-top:55px;

    font-size:24px;

    color:#222;

    line-height:1.6;

}

.about-signature strong{

    font-size:28px;

    color:#222;

}

.about-closing::before{

    content:"";

    display:block;

    width:90px;

    height:4px;

    background:#c99a2a;

    margin:0 auto 45px;

    border-radius:3px;

}