/* =====================================================
   HOT ROD TRIP Bamberg
   Coming Soon Landingpage
===================================================== */


/* Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;500;600;700&display=swap');



/* Reset */

* {

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

}



html {

    scroll-behavior: smooth;

}



body {

    background: #050505;

    color: #ffffff;

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

    overflow-x: hidden;

}



/* Farben */

:root {

    --gold: #c79b55;

    --gold-light: #e0bc79;

    --dark: #050505;

    --glass: rgba(0,0,0,.45);

}



/* =====================================================
   Hauptbereich
===================================================== */


.coming-soon {

    min-height: 100vh;

    width: 100%;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

}



/* Hintergrund */

.background {

    position: absolute;

    inset: 0;

    background-image:

    linear-gradient(

        rgba(0,0,0,.80),

        rgba(0,0,0,.25)

    ),

    url("images/hero-container.jpg");

    background-size: cover;

    background-position: center;

    animation: slowZoom 35s ease-in-out infinite alternate;

}



/* dezenter Filmlook */

.background::after {

    content: "";

    position: absolute;

    inset:0;

    background:

    radial-gradient(

        circle at center,

        transparent 30%,

        rgba(0,0,0,.7)

    );

}



/* =====================================================
   Inhalt
===================================================== */


.content {

    position: relative;

    z-index: 2;

    width: min(900px,90%);

    text-align: center;

    padding-top: 0px;

}



/* Social Icons */

.social {

    position: absolute;

    top: -80px;

    right: 0;

    display: flex;

    gap: 20px;

}



.social a {

    color:white;

    text-decoration:none;

    font-size:28px;

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,255,255,.35);

    border-radius:50%;

    transition:.3s;

}



.social a:hover {

    color:var(--gold);

    border-color:var(--gold);

}



/* =====================================================
   Hauptbotschaft
===================================================== */


.message {

    background:

    linear-gradient(

        rgba(0,0,0,.0),

        rgba(0,0,0,.0)

    );

    padding:45px 40px;

    border-radius:12px;

}



.message h1 {

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

    font-size:clamp(60px,9vw,110px);

    line-height:.9;

    letter-spacing:5px;

    text-transform:uppercase;

}



.divider {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin:35px 0;

    color:var(--gold);

}



.divider span {

    width:120px;

    height:1px;

    background:var(--gold);

}



.message p {

    font-size:18px;

    line-height:1.8;

    font-weight:300;

    letter-spacing:1px;

}



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


.countdown {

    display:flex;

    justify-content:center;

    gap:0;

    margin:50px 0;

}



.countdown div {

    width:150px;

    border-right:1px solid rgba(255,255,255,.25);

}



.countdown div:last-child {

    border:none;

}



.countdown strong {

    display:block;

    font-size:55px;

    font-weight:400;

}



.countdown span {

    display:block;

    margin-top:10px;

    text-transform:uppercase;

    letter-spacing:3px;

    color:#ddd;

    font-size:13px;

}



/* =====================================================
   Button
===================================================== */


.instagram-button {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    padding:18px 25px;

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

    color:white;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:14px;

    transition:.35s;

}



.instagram-button:hover {

    background:var(--gold);

    color:#111;

}



/* =====================================================
   Newsletter
===================================================== */


.newsletter {

    margin-top:70px;

    padding-top:45px;

    border-top:1px solid rgba(255,255,255,.15);

}



.newsletter h2 {

    font-family:'Bebas Neue';

    letter-spacing:4px;

    color:var(--gold);

    font-size:35px;

}



.newsletter p {

    margin:15px 0 30px;

    color:#ddd;

}



form {

    display:flex;

    justify-content:center;

}



input {

    width:350px;

    padding:18px;

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

    border:1px solid rgba(255,255,255,.2);

    color:white;

    outline:none;

}



button {

    padding:18px 35px;

    border:none;

    background:var(--gold);

    color:#111;

    font-weight:600;

    letter-spacing:2px;

    cursor:pointer;

}



button:hover {

    background:var(--gold-light);

}



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


footer {

    margin-top:60px;

    color:rgba(255,255,255,.5);

    font-size:13px;

    letter-spacing:1px;

}



/* =====================================================
   Animationen
===================================================== */


@keyframes slowZoom {

    from {

        transform:scale(1);

    }

    to {

        transform:scale(1.12);

    }

}



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


@media(max-width:700px){


    .message {

        padding:30px 20px;

    }


    .social {

        position:relative;

        top:auto;

        right:auto;

        justify-content:center;

        margin-bottom:25px;

    }


    .countdown {

        flex-wrap:wrap;

    }


    .countdown div {

        width:50%;

        margin-bottom:30px;

        border:none;

    }


    .countdown strong {

        font-size:42px;

    }


    form {

        flex-direction:column;

    }


    input {

        width:100%;

    }


    button {

        width:100%;

    }


}