/* =========================
   HERO SYSTEM (CMS WEBFLOW STYLE)
========================= */

.hero-section
{
    position: relative;

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

    overflow: hidden;

    width: 100%;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: var(--hero-text-color, #fff);
}

/* =========================
   HEIGHT VARIANTS
========================= */

.hero-large { min-height: 750px; }
.hero-medium { min-height: 500px; }
.hero-small { min-height: 350px; }

/* =========================
   OVERLAY SYSTEM (FIXED)
========================= */

.hero-overlay
{
    position: absolute;
    inset: 0;

    background-color: var(--hero-overlay-color, rgba(0, 0, 0, 0.45));
    opacity: var(--hero-overlay-opacity, 1);

    z-index: 1;
}

/* =========================
   CONTENT WRAPPER
========================= */

.hero-content
{
    position: relative;
    z-index: 2;

    max-width: 1000px;
    padding: 60px 30px;
    width: 100%;

    color: inherit;
}

/* =========================
   ALIGNMENT
========================= */

.hero-align-left { text-align: left; justify-content: flex-start; }
.hero-align-center { text-align: center; justify-content: center; }
.hero-align-right { text-align: right; justify-content: flex-end; }

/* =========================
   TYPOGRAPHY
========================= */

.hero-headline
{
    font-size: clamp(42px, 7vw, 88px);
    line-height: 1.1;
    margin-bottom: 24px;
    font-weight: 700;
    color: inherit;
}

.hero-subheadline
{
    font-size: clamp(18px, 2vw, 28px);
    line-height: 1.5;
    margin-bottom: 40px;
    opacity: 0.95;
    color: inherit;
}

/* =========================
   BUTTON (FINAL STABLE FIX)
========================= */

.hero-button
{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 16px 32px;

    background-color: var(--hero-button-bg, #fff) !important;
    color: var(--hero-button-text, #000) !important;

    border-radius: 10px;

    text-decoration: none;
    font-weight: 600;

    transition: all 0.25s ease;
    border: none;
    cursor: pointer;

    /* wichtig: verhindert kaputte Defaults NICHT zerstören */
    box-sizing: border-box;
}

.hero-button:hover
{
    transform: translateY(-2px);
    opacity: 0.9;
}
/* =========================
   MOBILE
========================= */

@media (max-width: 768px)
{
    .hero-content
    {
        padding: 40px 20px;
    }

    .hero-headline
    {
        font-size: 38px;
    }

    .hero-subheadline
    {
        font-size: 18px;
    }
}