/* =========================================================
   Vorfreude 2027
   Design: Natürliches Papier + Kupferprägung
========================================================= */

:root{

    --paper:#f6f1e8;
    --paper-light:#fbf8f3;

    --copper:#b36b3a;
    --copper-light:#d79659;
    --copper-dark:#8d4e22;

    --text:#3f352d;

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

    --radius:18px;

}

/* ========================================================= */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color:var(--text);

    background:var(--paper);

    overflow-x:hidden;

    min-height:100vh;

}

/* =========================================================
   Papier
========================================================= */

#background{

    position:fixed;

    inset:0;

    background:

        linear-gradient(
            rgba(255,255,255,.16),
            rgba(255,255,255,.16)
        ),

        url("../assets/backgrounds/bg.jpg"),

        url("../assets/backgrounds/background.svg");

    background-size:

        cover,
        cover,
        cover;

    background-position:center;

    opacity:.98;

    z-index:-10;

}

/* ========================================================= */

.card{

    width:min(900px,92%);

    margin:70px auto;

    padding:60px;

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

    backdrop-filter:blur(4px);

    border-radius:30px;

    box-shadow:var(--shadow);

    text-align:center;

    position:relative;

}

/* ========================================================= */

.logo{

    width:min(520px,90%);

    display:block;

    margin:auto;

    filter:

        drop-shadow(0 1px 0 #f6d0b0)

        drop-shadow(0 3px 2px rgba(0,0,0,.18));

    animation:

        fadeLogo 2s ease;

}

/* ========================================================= */

.balloon{

    position:absolute;

    width:110px;

    right:35px;

    top:-25px;

    animation:

        floatBalloon 7s ease-in-out infinite;

    filter:

        drop-shadow(0 8px 12px rgba(0,0,0,.18));

}

/* ========================================================= */

.countdown-section{

    margin-top:40px;

}

.countdown-title{

    font-size:1.2rem;

    letter-spacing:1px;

    color:#6d5c50;

}

.countdown-number{

    font-size:5rem;

    font-weight:bold;

    color:var(--copper);

    line-height:1;

    margin:15px 0;

    text-shadow:

        0 1px 0 #f7d2b4,

        0 2px 0 #e7b88d,

        0 3px 4px rgba(0,0,0,.18);

}

.countdown-subtitle{

    font-size:1.5rem;

    margin-top:12px;

}

/* ========================================================= */

.menu{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(230px,1fr));

    gap:22px;

    margin-top:65px;

}

/* ========================================================= */

.menu-button{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    text-decoration:none;

    color:var(--copper-dark);

    font-size:1.08rem;

    padding:18px;

    border-radius:999px;

    border:2px solid rgba(179,107,58,.55);

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

    transition:

        .35s;

}

/* kupferfarbener Lichtreflex */

.menu-button::before{

    content:"";

    position:absolute;

    left:-140%;

    top:0;

    width:70%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.8),

            transparent

        );

    transform:skewX(-25deg);

}

/* Hover */

.menu-button:hover{

    transform:

        translateY(-5px)

        scale(1.03);

    background:white;

    border-color:var(--copper);

    box-shadow:

        0 10px 22px rgba(179,107,58,.22);

}

.menu-button:hover::before{

    left:170%;

    transition:1s;

}

.icon{

    font-size:1.25rem;

}

/* ========================================================= */

footer{

    margin-top:70px;

}

.divider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    color:var(--copper);

    margin-bottom:15px;

}

.divider::before,
.divider::after{

    content:"";

    height:1px;

    width:120px;

    background:

        linear-gradient(

            to right,

            transparent,

            var(--copper),

            transparent

        );

}

/* ========================================================= */

@keyframes floatBalloon{

    0%{

        transform:
            translateY(0px)
            rotate(-2deg);

    }

    25%{

        transform:
            translateY(-8px)
            rotate(2deg);

    }

    50%{

        transform:
            translateY(-14px)
            rotate(-1deg);

    }

    75%{

        transform:
            translateY(-7px)
            rotate(2deg);

    }

    100%{

        transform:
            translateY(0px)
            rotate(-2deg);

    }

}

@keyframes fadeLogo{

    from{

        opacity:0;

        transform:

            translateY(18px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

/* ========================================================= */

@media(max-width:700px){

    .card{

        padding:35px 22px;

        margin:30px auto;

    }

    .countdown-number{

        font-size:3.7rem;

    }

    .countdown-subtitle{

        font-size:1.2rem;

    }

    .balloon{

        width:82px;

        right:18px;

        top:-12px;

    }

    .menu{

        grid-template-columns:1fr;

    }

}