/* ==========================================================
   BeKa Autoaufbereitung V2
   Datei: hero.css
   Aufgabe: Hero Bereich
========================================================== */

.beka-hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    background:
        linear-gradient(rgba(10,10,10,.72),rgba(10,10,10,.82)),
        url("../images/hero.webp") center/cover no-repeat;
    overflow:hidden;
}

.beka-hero-overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right,
        rgba(200,16,46,.28),
        transparent 45%);
}

.beka-hero-content{
    position:relative;
    z-index:2;
    max-width:760px;
}

.beka-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:999px;
    background:rgba(200,16,46,.15);
    color:var(--beka-primary);
    font-weight:700;
    margin-bottom:24px;
}

.beka-hero h1{
    font-size:clamp(3rem,6vw,5.4rem);
    line-height:1.05;
    margin-bottom:24px;
    color:#fff;
}

.beka-hero p{
    font-size:1.15rem;
    max-width:650px;
    margin-bottom:40px;
    color:#d8d8d8;
}

.beka-hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-bottom:50px;
}

.beka-button-secondary{
    padding:14px 28px;
    border-radius:999px;
    border:2px solid var(--beka-primary);
    color:#fff;
    transition:var(--beka-transition);
}

.beka-button-secondary:hover{
    background:var(--beka-primary);
}

.beka-hero-features{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.beka-feature{
    padding:12px 18px;
    background:rgba(255,255,255,.08);
    border:1px solid var(--beka-border);
    border-radius:999px;
    backdrop-filter:blur(10px);
}