/* ==========================================================
   HERO PREMIUM
========================================================== */

:root{

    --hp-height:820px;

    --hp-blue-1:#15283A;
    --hp-blue-2:#1D3448;
    --hp-blue-3:#29465C;

    --hp-green:#8ECF16;

}

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

.hp-hero{

    position:relative;

    min-height:820px;

    padding-bottom:40px;

    padding-top:50px;

    overflow:hidden;

    display:flex;

    align-items:center;

    background: transparent;
    
}

/* ==========================================================
   CONTAINER
========================================================== */

.hp-container{

    position:relative;

    z-index:2;

    width:min(1400px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:

    .95fr
    1.05fr;

    gap:5rem;

    align-items:center;

}

/* ==========================================================
   SPALTEN
========================================================== */

.hp-left{

    position:relative;

    z-index:2;

    max-width:640px;

}

.hp-right{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

/* ==========================================================
   HERO IMAGE
========================================================== */

.hp-image{

    width:100%;

    max-width:760px;

    overflow:hidden;

    border-radius:24px;

    box-shadow:

    0 45px 90px rgba(0,0,0,.45);

}

.hp-image img{

    width:100%;

    display:block;

}

/* ==========================================================
   LICHT
========================================================== */

.hp-light{

    position:absolute;

    top:6%;

    right:18%;

    width:240px;

    height:240px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(255,255,255,.18),

    transparent 72%);

    filter:blur(10px);

}

/* ---------------------------------------------------------- */

.hp-green-glow{

    position:absolute;

    right:6%;

    bottom:8%;

    width:280px;

    height:280px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(142,207,22,.18),

    transparent 70%);

    filter:blur(30px);

}
/* ==========================================================
   TYPOGRAFIE
========================================================== */

.hp-eyebrow{

    display:flex;
    align-items:center;
    gap:18px;

    font-size:1rem;

    font-weight:700;

    letter-spacing:.38em;

    text-transform:uppercase;

    color:#D9DEE5;

    opacity:.92;

    margin-bottom:38px;

}

.hp-eyebrow::before{

    content:"";

    width:54px;

    height:2px;

    border-radius:2px;

    background:#8ECF16;

    box-shadow:0 0 10px rgba(142,207,22,.45);

}

/* ---------------------------------------------------------- */

.hp-title{

    margin:0 0 30px 0;

    font-size:4.2rem;

    line-height:1.02;

    letter-spacing:-0.025em;

    font-weight:800;

    text-transform:uppercase;

    color:#F5F6F7;

    text-shadow:
        0 2px 8px rgba(0,0,0,.35);

}

.hp-title span{

    display:block;

    margin-top:14px;

    color:#8ECF16;

    text-shadow:
        0 0 14px rgba(142,207,22,.18);

}

/* ---------------------------------------------------------- */

.hp-text{

    max-width:640px;

    margin-top:0;

    margin-bottom:48px;

    font-size:1.22rem;

    line-height:1.8;

    color:#D8E0E6;

}

/* ==========================================================
   BUTTONS
========================================================== */

.hp-buttons{

    display:flex;

    flex-wrap:nowrap;

    gap:22px;

    align-items:stretch;

}

/* ---------------------------------------------------------- */

.hp-btn{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:18px;

    min-width:0px;

    min-height:82px;

    padding:18px 24px;

    border-radius:18px;

    position:relative;

    overflow:hidden;

    text-decoration:none;

    width:320px;

    flex:0 0 320px;

}
.hp-btn-icon{

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.hp-btn-icon i{

    font-size:2.5rem;

}
.hp-btn-content{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:center;

    flex:1;

    min-width:0;

}
.hp-btn-head{

    display:block;

    font-size:1.02rem;

    font-weight:700;

    line-height:1.15;

    letter-spacing:.05em;

    text-transform:uppercase;

    color:#ffffff;

}
.hp-btn-sub{

    display:block;

    margin-top:6px;

    font-size:.78rem;

    line-height:1.3;

    color:rgba(255,255,255,.82);

}
.hp-btn-arrow{

    margin-left:auto;

    font-size:1.4rem;

    color:#A6E51A;

    flex-shrink:0;

    transition:
        transform .25s ease,
        color .25s ease;
}
.hp-btn:hover .hp-btn-arrow{

    transform:translateX(6px);
}
.hp-btn::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.22),

        rgba(255,255,255,0)

    );

    opacity:.65;

    pointer-events:none;

}
/* ---------------------------------------------------------- */

.hp-btn-primary{

    background:rgba(255,255,255,.10);

    border:1px solid rgba(170,255,35,.40);

    color:#ffffff;

    backdrop-filter:blur(26px) saturate(170%);
    -webkit-backdrop-filter:blur(26px) saturate(170%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 0 -1px 0 rgba(255,255,255,.04),
        0 0 18px rgba(142,207,22,.10);

    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;

}

.hp-btn-primary:hover{ .hp-btn-icon{

    color:#9DE316;
}
}
/* ---------------------------------------------------------- */

.hp-btn-secondary{

    background:

        rgba(255,255,255,.06);

    color:#ffffff;

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(12px);

}

.hp-btn-secondary:hover{

    background:

        rgba(255,255,255,.12);

    transform:translateY(-3px) scale(1.015);

}
.hp-btn-secondary .hp-btn-icon{

    color:#ffffff;

    opacity:.95;

}

.hp-btn-secondary:hover .hp-btn-icon{

    color:#9DE316;

}
/* ==========================================================
   HERO DATEN
========================================================== */

.hp-info{

    display:flex;

    flex-wrap:wrap;

    gap:45px;

    margin-top:70px;

}

.hp-stat{

    display:flex;

    flex-direction:column;

}

.hp-number{

    font-size:2.15rem;

    font-weight:700;

    color:#ffffff;

}

.hp-label{

    margin-top:8px;

    font-size:12px;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:#91A8B8;

}
/* ==========================================================
   HERO PREMIUM
   FEINSCHLIFF
========================================================== */

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

.hp-image{

    position:relative;

}

.hp-image img{

    display:block;

    width:100%;

    height:auto;

    object-fit:cover;

    transition:transform .45s ease;

}

.hp-image:hover img{

    transform:scale(1.02);

}

/* ---------- dezente Reflexion ---------- */

.hp-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.12) 0%,

        rgba(255,255,255,0) 18%,

        rgba(255,255,255,0) 82%,

        rgba(255,255,255,.05) 100%

    );

    pointer-events:none;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1200px){

.hp-container{

    grid-template-columns:1fr;

    gap:80px;

}

.hp-left{

    align-items:center;

    text-align:center;

}

.hp-text{

    max-width:720px;

}

.hp-buttons{

    justify-content:center;

}

.hp-right{

    min-height:auto;

}

}

/* ---------------------------------------------------------- */

@media (max-width:768px){

.hp-hero{

    min-height:auto;

    padding:110px 0 80px;

}

.hp-title{

    font-size:3rem;

}

.hp-text{

    font-size:1rem;

    line-height:1.7;

}

.hp-buttons{

    flex-direction:column;

    width:100%;

}

.hp-btn{

    width:100%;

    min-width:0;

}

}

/* ==========================================================
   KLEINE DETAILS
========================================================== */

.hp-btn:active{

    transform:translateY(1px);

}

.hp-btn{

    user-select:none;

}

.hp-title,
.hp-text,
.hp-eyebrow{

    text-wrap:balance;

}

.hp-image{

    border:1px solid rgba(255,255,255,.08);

}