/* =========================
   Fonts
========================= */

@font-face {

    font-family: "Montserrat";

    src: url("../fonts/Montserrat-Regular.woff2") format("woff2");

    font-weight: 400;

    font-display: swap;

}


@font-face {

    font-family: "Montserrat";

    src: url("../fonts/Montserrat-Light.woff2") format("woff2");

    font-weight: 300;

    font-display: swap;

}


@font-face {

    font-family: "Great Vibes";

    src: url("../fonts/GreatVibes-Regular.woff2") format("woff2");

    font-display: swap;

}



/* =========================
   Farben
========================= */

:root {

    --ivory: #fffaf0;

    --salbei: #b9d2a8;

    --salbei-hell: #e2edd9;

    --salbei-dunkel: #8faa79;

    --gold: #c9a227;

    --gold-dunkel: #a98213;

    --text: #4b443c;

    --white: #ffffff;

    --shadow: 
    0 15px 35px rgba(0,0,0,0.08);

}



/* =========================
   Reset
========================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: "Montserrat", sans-serif;

    background: var(--ivory);

    color: var(--text);

    line-height: 1.6;

}



/* =========================
   Navigation
========================= */

header {

    position: fixed;

    top: 0;

    width: 100%;

    background: rgba(226,237,217,0.98);

    z-index: 1000;

    border-bottom:
    1px solid rgba(201,162,39,.25);

}


nav {

    max-width: 1200px;

    margin: auto;

    padding: 18px 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.logo {

    font-family: "Great Vibes", cursive;

    font-size: 2.4rem;

    color: var(--gold);

}



nav ul {

    list-style: none;

    display:flex;

    gap:25px;

}



nav a {

    text-decoration:none;

    color:var(--text);

    font-weight:500;

    transition:.3s;

}


nav a:hover {

    color:var(--gold);

}



.menu-toggle {

    display:none;

    background:none;

    border:none;

    color:var(--gold);

    font-size:2rem;

    cursor:pointer;

}



/* =========================
   Hero
========================= */


.hero {

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:130px 20px 80px;

    position:relative;

    overflow:hidden;

}



.hero::before {

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    background:var(--salbei);

    opacity:.35;

    filter:blur(130px);

    border-radius:50%;

    z-index:-1;

}



.hero-content {

    max-width:800px;

    animation:fadeIn 1s ease;

}



.photo-placeholder {

    width:180px;

    height:180px;

    margin:auto auto 30px;

    border-radius:50%;

    overflow:hidden;

    border:5px solid var(--gold);

    box-shadow:var(--shadow);

}



.photo-placeholder img {

    width:100%;

    height:100%;

    object-fit:cover;

}



h1 {

    font-family:"Great Vibes", cursive;

    font-size:5rem;

    font-weight:normal;

    color:var(--gold);

}



h2 {

    font-family:"Great Vibes", cursive;

    font-size:3.2rem;

    font-weight:normal;

    color:var(--gold);

}



.hero h2 {

    color:var(--salbei-dunkel);

}



.ornament {

    color:var(--gold);

    font-size:1.5rem;

    margin:20px 0;

    letter-spacing:8px;

}



/* =========================
   Buttons
========================= */


.button {

    display:inline-block;

    padding:15px 40px;

    border-radius:50px;

    background:
    linear-gradient(
        135deg,
        var(--gold),
        var(--gold-dunkel)
    );

    color:white;

    text-decoration:none;

    font-weight:500;

    transition:.3s;

    box-shadow:
    0 10px 25px rgba(201,162,39,.25);

}



.button:hover {

    background:var(--salbei-dunkel);

    transform:translateY(-3px);

}



/* =========================
   Countdown
========================= */


.countdown {

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin:40px 0;

}



.countdown div {

    background:rgba(255,250,240,.9);

    padding:15px;

    min-width:90px;

    border-radius:20px;

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

    box-shadow:var(--shadow);

}



.countdown span {

    display:block;

    font-size:2rem;

    font-weight:bold;

    color:var(--gold);

}



/* =========================
   Sections
========================= */


.section {

    padding:100px 20px;

    text-align:center;

    position:relative;

}



.colored {

    background:
    linear-gradient(
        135deg,
        var(--salbei-hell),
        var(--ivory)
    );

}



.timeline {

    max-width:1100px;

    margin:auto;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}



/* =========================
   Cards
========================= */


.card {

    background:rgba(255,250,240,.95);

    padding:35px;

    border-radius:30px;

    border:
    1px solid rgba(143,170,121,.35);

    box-shadow:var(--shadow);

    transition:.3s;

}



.card:hover {

    transform:translateY(-5px);

}



.card h3 {

    color:var(--salbei-dunkel);

    margin:15px 0;

}



.icon {

    font-size:2.8rem;

}



/* =========================
   Map
========================= */


.map-container {

    max-width:1000px;

    margin:40px auto;

    border-radius:30px;

    overflow:hidden;

    box-shadow:var(--shadow);

}


.map-container iframe {

    width:100%;

    height:400px;

    border:0;

}



/* =========================
   Footer
========================= */


footer {

    background:var(--salbei);

    text-align:center;

    padding:30px;

}



/* =========================
   Animation
========================= */


@keyframes fadeIn {

    from {

        opacity:0;

        transform:translateY(30px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }

}



/* =========================
   Mobile
========================= */


@media(max-width:700px){


    .hero::before {

        filter:none;

        width:300px;

        height:300px;

    }



    .hero-content {

        animation:none;

    }



    nav {

        padding:15px 20px;

    }



    .logo {

        font-size:2rem;

    }



    .menu-toggle {

        display:block;

    }



    nav ul {

        position:absolute;

        top:70px;

        left:0;

        width:100%;

        background:var(--salbei-hell);

        display:none;

        flex-direction:column;

        text-align:center;

        padding:30px 0;

        gap:20px;

        box-shadow:var(--shadow);

    }



    nav ul.active {

        display:flex;

    }



    h1 {

        font-size:3.5rem;

    }



    h2 {

        font-size:2.5rem;

    }



    .photo-placeholder {

        width:140px;

        height:140px;

    }



    .countdown {

        gap:10px;

    }



    .countdown div {

        min-width:75px;

        padding:12px;

    }



    .countdown span {

        font-size:1.5rem;

    }



    .section {

        padding:70px 15px;

    }



    .card {

        padding:25px;

    }


}