/* =========================================================
   Radio Mega-Sunshine Framework
   Base CSS
========================================================= */

:root{

    --primary:#69c23f;
    --primary-dark:#4d9a29;
    --secondary:#ffd54a;

    --background:#eef9df;
    --surface:#ffffff;

    --text:#2e2e2e;
    --text-light:#666;

    --border:#d7ebb4;

    --radius:18px;

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

}

/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

    background:linear-gradient(
        180deg,
        #f8fff3,
        #eef9df,
        #ffffff
    );

    color:var(--text);

    line-height:1.6;

}

/* LINKS */

a{

    text-decoration:none;

    color:inherit;

    transition:.25s;

}

/* BILDER */

img{

    display:block;

    max-width:100%;

    height:auto;

}

/* CONTAINER */

.site-container{

    width:min(1400px,95%);

    margin:auto;

}

/* KARTEN */

.card{

    background:var(--surface);

    border-radius:var(--radius);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    padding:25px;

    margin-bottom:25px;

}

/* ÜBERSCHRIFTEN */

h1{

    font-size:3rem;

    color:#ffffff;

}

h2{

    color:var(--primary-dark);

    margin-bottom:15px;

}

h3{

    color:var(--primary-dark);

    margin-bottom:10px;

}

/* BUTTONS */

.btn{

    display:inline-block;

    padding:14px 28px;

    border-radius:40px;

    font-weight:600;

    transition:.3s;

}

.btn-primary{

    background:linear-gradient(
        180deg,
        #7dd94d,
        #59b52c
    );

    color:#fff;

}

.btn-secondary{

    background:#ffffff;

    color:var(--primary-dark);

    border:2px solid var(--primary);

}

.btn:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 20px rgba(0,0,0,.18);

}

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

.hero{

    min-height:620px;

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

    text-align:center;

    position:relative;

    background:
    linear-gradient(
        rgba(90,180,60,.35),
        rgba(255,220,90,.20)
    ),
    url("../images/hero.jpg");

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

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,
    rgba(255,255,255,.35),
    transparent 45%);

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

    padding:40px;

}

.hero h1{

    font-size:4rem;

    color:#fff;

    text-shadow:0 4px 12px rgba(0,0,0,.35);

}

.hero p{

    color:#fff;

    font-size:1.4rem;

    margin:25px 0;

}

.live-badge{

    display:inline-block;

    background:#d90000;

    color:#fff;

    padding:8px 20px;

    border-radius:30px;

    margin-bottom:30px;

    font-weight:bold;

    letter-spacing:1px;

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}