/* ==========================================================
   CATEGORY TEMPLATE
   Schuhhaus Minnich
========================================================== */

/* ---------- Allgemein ---------- */

.category-hero{
    padding:110px 0 90px;
}
.category-content{
    padding:90px 0;
    background:#fafafa;
}

.category-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

/* ---------- Text ---------- */

.category-kicker{
    display:inline-block;
    margin-bottom:18px;

    font-size:14px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;

    color:#f5a400;
}

.category-text h1{

    font-size:64px;
    line-height:1.05;
    font-weight:800;

    margin-bottom:30px;

    color:#222;
}

.category-text h2{

    font-size:48px;
    font-weight:800;

    line-height:1.2;

    margin-bottom:25px;

    color:#222;
}

.category-text p{

    font-size:21px;
    line-height:1.8;

    color:#555;

    max-width:640px;

    margin-bottom:40px;
}

/* ---------- Bilder ---------- */

.category-image img{

    width:100%;
    display:block;

    border-radius:24px;

    overflow:hidden;

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

    transition:.35s ease;
}

.category-image img:hover{

    transform:scale(1.02);
}

/* ---------- Zweiter Block ---------- */

.reverse{

    direction:rtl;

}

.reverse > *{

    direction:ltr;

}

/* ---------- Buttons ---------- */

.btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:18px 38px;

    border-radius:999px;

    font-size:18px;
    font-weight:700;

    text-decoration:none;

    transition:.3s;
}

.btn-primary{

    background:#f4b321;

    color:#222;

}

.btn-primary:hover{

    transform:translateY(-3px);

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

}

.btn-secondary{

    border:2px solid #f4b321;

    color:#222;

}

.btn-secondary:hover{

    background:#f4b321;

}

/* ---------- Abschluss ---------- */

.category-cta{

    background:#f7f7f7;

    padding:110px 20px;

    text-align:center;
}

.category-cta h2{

    color:#222;

    font-size:54px;

    margin-bottom:25px;
}

.category-cta p{

    color:#666;

    max-width:720px;

    margin:0 auto 40px;

    font-size:22px;

    line-height:1.8;
}

/* ---------- Animation ---------- */

.category-text{

    animation:fadeLeft .7s ease;

}

.category-image{

    animation:fadeRight .8s ease;

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1100px){

.category-grid{

    grid-template-columns:1fr;

    gap:60px;

}

.reverse{

    direction:ltr;

}

.category-text{

    text-align:center;

}

.category-text h1{

    font-size:48px;

}

.category-text h2{

    font-size:36px;

}

}

/* ==========================================================
   SMARTPHONE
========================================================== */

@media(max-width:768px){

.category-hero,
.category-content{

    padding:60px 0;

}

.category-text h1{

    font-size:38px;

}

.category-text h2{

    font-size:30px;

}

.category-text p{

    font-size:18px;

}

.category-cta{

    padding:60px 20px;

}

.category-cta h2{

    font-size:34px;

}

.category-cta p{

    font-size:18px;

}

.btn{

    width:100%;

    text-align:center;

}

}