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

body{

    font-family:'Special Elite', cursive;
    background:#0b1a10;
    color:#f5f5f5;
    line-height:1.6;
}

.hero{
    min-height:130vh;

    background-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.28) 0%,
            rgba(0,0,0,0.12) 15%,
            rgba(0,0,0,0.00) 35%
        ),
        url('../images/og-image.jpg');

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

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

    padding-top:120px;
    text-align:center;
}
.hero h2{
    font-size:1.3rem;
    letter-spacing:10px;
    color:#355e3b;
    margin-bottom:-45px; 
margin-top:40px;

}

.hero h1{
    font-size:10rem;
    color:#d62828;
    font-family:'Teko', sans-serif;
    margin-bottom:-25px; 

}

.hero h3{
    font-size:5rem;
    color:#111;
    font-family:'Permanent Marker', cursive;
    margin-top:-60px;
}

    .hero-grid{
        grid-template-columns:1fr;
        gap:40px;
        text-align:center;
    }

    .hero-photo{
        max-width:350px;
        margin:0 auto;
    }

    .hero-photo img{
        width:100%;
        height:auto;
        display:block;
    }
.location{
    margin-top:-15px;

    font-family:'Bebas Neue', sans-serif;

    font-size:1.2rem;

    letter-spacing:2px;
    text-transform:uppercase;

    color:#f5e6a4;
}

.subtitle{
    margin-top:15px;
    font-size:1.2rem;
    color:#5b7557;
}

section{
    padding:80px 20px;
    text-align:center;
}

section:nth-child(even){
    background:none;
}

h2{
    margin-bottom:25px;
    color:#f0d76f;
}

.countdown{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.countdown div{
    background:#20452a;
    padding:20px;
    border-radius:15px;
    min-width:100px;
}

.countdown span{
    display:block;
    font-size:3rem;
    font-weight:bold;
}

.goodtoknow li{
    padding:12px 0;
    border-bottom:1px solid rgba(240,215,111,.15);
}


.route-button{
    display:inline-block;
    background:#c62828;
    color:white;
    text-decoration:none;
    padding:16px 32px;
    border:none;
    border-radius:14px;
}

form{
    max-width:700px;
    margin:auto;
    display:flex;
    flex-direction:column;
    gap:15px;
}

input,
select,
textarea{
    padding:15px;
    border:none;
    border-radius:10px;
    font-size:1rem;
}

textarea{
    min-height:120px;
}

button{
    padding:16px;
    border:none;
    border-radius:10px;
    background:#c62828;
    color:white;
    font-size:1.1rem;
    cursor:pointer;
    font-family:'Special Elite', cursive !important;
}
button:hover{
    opacity:.9;
}
.subtitle{
    margin-top:15px;
    font-size:1.1rem;
    color:#3f5f3f;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
}
.festival-grid,
.bottom-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    max-width:1400px;
    margin:40px auto;

    align-items:start;

}
.festival-box{
    background:rgba(255,255,255,.06);

    border:2px solid rgba(60,60,60,.25);

    border-radius:6px;

    padding:35px;

    box-shadow:none;

    display:flex;
    flex-direction:column;

    min-height:260px;

    position:relative;
}
.festival-box h2{
    color:#f0d76f;
    font-size:2rem;
    letter-spacing:1px;
    margin-top:10px;
    margin-bottom:25px;
}

.festival-box h2 img{
    width:36px;
    height:36px;
    object-fit:contain;
}

.festival-box p{
    margin:10px 0;
}

.festival-box ul{
    list-style:none !important;
    padding:0;
    margin-top:15px;
}

.festival-box ul li{
    list-style:none !important;
    padding:12px 0;
    border-bottom:1px solid rgba(240,215,111,.15);
}

.festival-box ul li:last-child{
    border-bottom:none !important;
}
.countdown-section{
    background:transparent;
}

.countdown-section h2{
    font-family:'Aktiv Grotesk', sans-serif;
    text-transform:uppercase;
    letter-spacing:6px;
    font-size:1.2rem;
    font-weight:600;
    color:#d8c27a;
    margin-bottom:40px;
}
.countdown div{
    background:rgba(18,58,38,.75);

    backdrop-filter:blur(6px);

    border:1px solid rgba(255,255,255,.08);
}
.countdown span{
    display:block;

    font-family:'Teko', sans-serif;

    font-size:6rem;

    line-height:.9;

    color:#d62828;

    text-transform:uppercase;

    letter-spacing:2px;
}


.countdown small{
    display:block;

    margin-top:8px;

    color:#f0d76f;

    font-family:'Bebas Neue', sans-serif;

    letter-spacing:2px;

    text-transform:uppercase;
}
.footer{
    background-image:url('../images/footer-forest.png');
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    min-height:750px;

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

    padding-bottom:80px;

    text-align:center;
}

.footer p{
    color:#f0d76f;
}
.footer-overlay{
    display:flex;
    flex-direction:column;

    align-items:flex-end;

    gap:18px;

    width:100%;
    max-width:1200px;

    padding-right:60px;
}

.footer-overlay a{
    color:#f0d76f;
    text-decoration:none;

    font-family:'Bebas Neue', sans-serif;

    font-size:.9rem;
    letter-spacing:3px;

    text-transform:uppercase;
}
.footer{
    position:relative;

}

.route-button{
    display:inline-block;
    margin-top:15px;
    background:#c62828;
    color:white;
    text-decoration:none;
    padding:15px 30px;
    border-radius:10px;
    transition:.3s;
}

.route-button:hover{
    transform:translateY(-2px);
}

form{
    max-width:100%;
}
.map-frame{
    width:100%;
    height:350px;
    border:none;
    border-radius:6px;
    overflow:hidden;
    filter:saturate(.8);
}
input,
select,
textarea{
    background:rgba(255,255,255,.9);
    border:1px solid rgba(0,0,0,.08);
}

.hero{
    overflow:hidden;
}

.hero-photo{
    width:280px;
    margin:20px auto 0;
    transform:rotate(-5deg);
}

.hero-photo img{
    width:100%;
    height:auto;
}
.feature-icon{
    width:90px;
    height:90px;
    display:block;
    margin:0 auto 25px auto;
}

.feature-icon img{
    width:90px;
    height:90px;
    object-fit:contain;
}

.festival-box h2{
    font-family:'Aktiv Grotesk', sans-serif;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:1.2rem;
    font-weight:600;
    color:#d8c27a;
    margin-top:0;
}
@media(max-width:900px){

    .festival-grid,
    .bottom-grid{
        grid-template-columns:1fr;
    }

    .festival-box{
        min-height:auto;
        height:auto;
    }

    .hero h1{
        font-size:4rem;
    }

    .hero h3{
        font-size:2rem;
    }
}
@media (max-width:768px){

    .hero{

        min-height:100svh;
        padding:40px 20px;

        background-image:
        url('../images/hero-mobile.jpg');

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

    .hero-content{
        max-width:100%;
    }

    .hero h2{
        font-size:1rem;
        letter-spacing:6px;
        margin-bottom:-20px;
    }

    .hero h1{
        font-size:3rem;
        margin-bottom:-10px;
    }

    .hero h3{
        font-size:2.4rem;
        margin-top:-20px;
    }

    .hero-photo{
        width:220px;
        margin:10px auto 0;
    }
    .footer{
        background-image:url('../images/footer-mobile.png');
        background-size:cover;
        background-position:center center;
        min-height:900px;
    }

}

    .subtitle{
        margin-top:25px;
        color:#6b8465;
        letter-spacing:4px;
        font-size:.95rem;
    }
}
    .countdown{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:15px;
        max-width:350px;
        margin:auto;
    }

    .countdown div{
        min-width:80px;
    }

    .hero{
    background-image:
    url('../images/hero-mobile.jpg');

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

.scroll-down{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:40px;
    color:#d8c88a;
    font-family:'Teko', sans-serif;
    letter-spacing:4px;
    z-index:50;
}

.success-box{

    position:fixed;

    top:30px;
    left:50%;
    transform:translateX(-50%);

    z-index:9999;

    max-width:600px;
    width:90%;

    padding:20px 25px;

    background:rgba(24,60,40,.95);

    border:1px solid rgba(216,194,122,.3);
    border-radius:12px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.35);

    backdrop-filter:blur(10px);
}

.success-box h2{
    margin:0 0 10px;
    color:#d8c27a;
}

.success-box p{
    margin:0;
    color:white;
}
}

/* Desktop: alle Boxen gleich hoch */
@media (min-width:901px){

    .festival-grid,
    .bottom-grid{
        align-items:stretch !important;
    }

    .festival-box{
        height:100% !important;
        min-height:0 !important;
    }
}

/* Mobile: natürliche Höhe */
@media (max-width:900px){

    .festival-grid,
    .bottom-grid{
        grid-template-columns:1fr;
    }

...
.festival-box{
    min-height:auto;
    height:100%;
}
}

/* Desktop: gleiche Höhe für alle 3 Boxen */
@media (min-width:901px){

    .festival-box{
        min-height:780px !important;
    }
}
@media (max-width:768px){

    .hero{
        background-image:
        url('../images/hero-mobile.jpg') !important;

        background-size:cover !important;
        background-position:center center !important;
        background-repeat:no-repeat !important;
        background-attachment:scroll !important;

        min-height:100svh;
        padding:40px 20px;
    }

    .hero-photo{
        width:240px;
        margin:15px auto 0;
    }

    .subtitle{
        color:#6b8465;
    }

    .footer-overlay{
        align-items:center !important;
        text-align:center;
        padding-right:0;
        width:100%;
    }

   .footer-overlay{
        align-items:center !important;
        text-align:center;
        padding-right:0;
        padding-bottom:120px;
    }

}

body{
    color:#d8c27a;
}

.festival-box p,
.festival-box li,
.countdown small,
.success-box p,
.footer-overlay a,
label{
    color:#d8c27a;
}

/* Desktop */
@media (min-width:769px){

    .hero{
        background-size:95% auto !important;
        background-position:center top !important;
    }

}

.hero{
    background-size: cover !important;
    background-position: center top !important;
}

@media (min-width:769px){

    .hero{
background-position:center center !important;

 }  

}


.rsvp-note{
    font-family:'Special Elite', cursive;
    color:#d8c27a;
    text-align:center;
    font-size:1rem;
    line-height:1.8;
    margin-bottom:25px;
}

.music-player{
    max-width:260px;
    margin:auto;
    padding:12px;
    background:#1B4332;
    border-radius:15px;
    border: 2px solid #1B4332; /* Dunkelgrüner Rand */
    box-shadow:0 3px 12px rgba(0,0,0,0.15);
    text-align:center;
}

.cover {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 10px;
}

.music-player h3 {
    font-size: 16px;
    margin-bottom: 10px;
}

audio {
    width: 100%;
    height: 35px;
}

@media (max-width: 768px) {

    .music-player {
        position: relative;
        top: 250px;
        max-width: 180px;
        padding: 8px;
        margin-top:150px;
    }
 }
    .music-player h3 {
        font-size: 14px;
    }

    audio {
        height: 30px;
    }

}