/* ==========================================================
   CASTELLO KINO
   Modern Cinema Theme v3
   Teil 1/4
   Grundsystem / Navigation / Hero
========================================================== */


/* ==========================================================
   DESIGN VARIABLEN
========================================================== */

:root{

    --primary:#c71f2d;
    --primary-hover:#e62b3b;

    --gold:#d4af37;
    --gold-light:#f3c955;

    --dark:#090909;
    --dark2:#141414;
    --dark3:#1d1d1d;

    --white:#ffffff;
    --gray:#cccccc;

    --shadow:
    0 20px 60px rgba(0,0,0,.55);

    --shadow-gold:
    0 0 40px rgba(212,175,55,.25);

    --radius:20px;

    --transition:.35s ease;

}



/* ==========================================================
   RESET
========================================================== */


*{

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

}



html{

    scroll-behavior:smooth;

}



body{

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

    background:var(--dark);

    color:var(--white);

    line-height:1.7;

    overflow-x:hidden;

}



img{

    max-width:100%;

    display:block;

}



a{

    color:inherit;

    text-decoration:none;

}



.container{

    position:relative;

    width:min(92%,1400px);

    margin:auto;

    z-index:2;


}



/* ==========================================================
   TYPOGRAFIE
========================================================== */


h1,
h2,
h3,
h4{

    font-weight:700;

    letter-spacing:.5px;

}



h1{

    font-size:clamp(2.5rem,5vw,4rem);

}



h2{

    color:var(--gold);

    font-size:clamp(1.8rem,3vw,2.6rem);

    margin-bottom:25px;

}

.hero-content h1{
    font-size:clamp(2.3rem,5vw,3.8rem);
}
h3{

    font-size:1.4rem;

}



p{

    color:#d5d5d5;

}



/* ==========================================================
   GLOBAL LICHTATMOSPHÄRE
========================================================== */


body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(
        circle at top right,
        rgba(212,175,55,.10),
        transparent 35%
    ),

    radial-gradient(
        circle at bottom left,
        rgba(199,31,45,.08),
        transparent 40%
    );

    z-index:-2;

}




body::after{

    content:"";

    position:fixed;

    width:700px;

    height:700px;

    border-radius:50%;

    background:

    radial-gradient(
        rgba(212,175,55,.12),
        transparent 70%
    );

    top:-250px;

    right:-200px;

    pointer-events:none;

    animation:lightMove 16s ease-in-out infinite;

    z-index:-1;

}




@keyframes lightMove{


0%{

    transform:translate(0,0);

}


50%{

    transform:translate(-120px,80px);

}


100%{

    transform:translate(0,0);

}


}





/* ==========================================================
   NAVIGATION
========================================================== */


.navbar{

    padding:18px 0;

    background:

    rgba(0,0,0,.35);

    backdrop-filter:blur(15px);

    border-bottom:

    1px solid rgba(255,255,255,.08);

    transition:.4s;

    z-index:1000;

}




.navbar.scrolled{

    background:#050505;

    box-shadow:var(--shadow);

}




.nav-logo{

    height:62px;

    width:auto;

    object-fit:contain;

    filter:

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

    transition:.4s ease;

}

@media(max-width:768px){

    .nav-logo{

        height:64px;

    }

    .navbar.scrolled .nav-logo{

        height:56px;

    }

}



.nav-logo:hover{

    transform:scale(1.08);

}





.nav-link{

    color:white!important;

    margin-left:20px;

    font-weight:500;

    position:relative;

}




.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:.3s;

}




.nav-link:hover::after{

    width:100%;

}




.nav-link:hover{

    color:var(--gold)!important;

}



/* ==========================================================
   HERO SYSTEM
========================================================== */


.hero{

    min-height: clamp(600px,82vh,850px);

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    animation:

    zoomHero 18s ease-in-out infinite alternate;

}




@keyframes zoomHero{


from{

    background-size:100%;

}


to{

    background-size:112%;

}


}




.hero-slides{

    position:absolute;

    inset:0;

    z-index:1;

}




.hero-slide{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    opacity:0;

    transform:scale(1.08);

    transition:

    opacity 1.5s ease,

    transform 8s ease;

}




.hero-slide.active{

    opacity:1;

    transform:scale(1);

}




.hero-slide::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

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

        rgba(0,0,0,.82)

    );

}




.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at top,

        rgba(212,175,55,.18),

        transparent 55%

    );

    z-index:3;

    pointer-events:none;

}




.hero-overlay{

    width:100%;

    position:relative;

    z-index:5;

}




.hero-content{

    position:relative;

    z-index:20;

    animation:

    heroEnter 1.2s ease;

}




.hero-content h1{

    color:white;

    font-size:clamp(2.5rem,5vw,3.8rem);

    line-height:1.15;

    text-shadow:

    0 10px 30px rgba(0,0,0,.8);

}




.hero-content h1 span{

    color:var(--gold);

}




.hero-content p{

    font-size:1.25rem;

    max-width:600px;

    margin-top:25px;

}




@keyframes heroEnter{


from{

    opacity:0;

    transform:translateY(50px);

}


to{

    opacity:1;

    transform:translateY(0);

}


}



/* ==========================================================
   HERO DOTS
========================================================== */


.hero-dots{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:30;

}




.hero-dots .dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:white;

    opacity:.4;

    cursor:pointer;

    transition:.3s;

}




.hero-dots .dot.active{

    background:var(--gold);

    opacity:1;

    transform:scale(1.3);

}/* ==========================================================
   CASTELLO KINO
   Modern Cinema Theme v3
   Teil 2/4
   Movie Showcase / Buttons / Logo Effekte
========================================================== */


/* ==========================================================
   HERO MOVIE SHOWCASE
========================================================== */


.movie-area{

    position:relative;

    height:520px;

}




.movie-showcase{

    position:relative;

    height:420px;

    width:100%;

}





.movie-card{

    position:absolute;

    width:190px;

    border-radius:22px;

    overflow:hidden;

    background:#111;

    box-shadow:

    0 25px 60px rgba(0,0,0,.75);

    transition:.5s ease;

    animation:

    movieFloat 6s ease-in-out infinite;

}




.movie-card img{

    width:100%;

    height:300px;

    object-fit:cover;

}





.card-one{

    left:20px;

    top:70px;

    transform:rotate(-8deg);

}





.card-two{

    left:175px;

    top:20px;

    z-index:3;

    animation-delay:.4s;

}





.card-three{

    left:330px;

    top:70px;

    transform:rotate(8deg);

    animation-delay:.8s;

}





.movie-card:hover{

    transform:

    translateY(-25px)

    scale(1.08)

    rotate(0deg);

    z-index:20;

}





@keyframes movieFloat{


0%{

    margin-top:0;

}


50%{

    margin-top:-15px;

}


100%{

    margin-top:0;

}


}





/* ==========================================================
   HERO ACTION BUTTON
========================================================== */


.hero-action{

    position:absolute;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    z-index:30;

}





.btn-danger{

    background:var(--primary);

    color:white;

    border:none;

    border-radius:50px;

    padding:

    16px 42px;

    font-size:1.05rem;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    position:relative;

    overflow:hidden;

    box-shadow:

    0 15px 40px rgba(199,31,45,.45);

    transition:

    var(--transition);

}





.btn-danger:hover{

    background:var(--primary-hover);

    transform:translateY(-5px);

    box-shadow:

    0 20px 50px rgba(199,31,45,.65);

}





.btn-danger::before{

    content:"";

    position:absolute;

    inset:0;

    left:-100%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.7s;

}





.btn-danger:hover::before{

    left:100%;

}





/* ==========================================================
   HERO ZUSATZ BUTTON
========================================================== */


.trailer-btn{

    border:

    1px solid rgba(255,255,255,.4);

    color:white;

    border-radius:50px;

    padding:

    16px 42px;

    background:

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

    backdrop-filter:blur(10px);

    transition:.35s;

}





.trailer-btn:hover{

    background:white;

    color:black;

}





.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:35px;

}





/* ==========================================================
   HERO LOGO SYSTEM
========================================================== */


.hero-logo-wrapper{

    position:relative;

    display:inline-block;

    margin-bottom:30px;

}





.hero-logo-wrapper::before{

    content:"";

    position:absolute;

    inset:-30px;

    background:

    radial-gradient(

        circle,

        rgba(212,175,55,.28),

        transparent 70%

    );

    filter:blur(20px);

    z-index:-1;

    animation:

    logoGlow 4s infinite alternate;

}





.hero-logo{

    width:260px;
    max-width:80%;

    filter:

    drop-shadow(

        0 20px 35px rgba(0,0,0,.8)

    );

    animation:

    logoFloat 5s ease-in-out infinite;

}





@keyframes logoFloat{


0%{

    transform:translateY(0);

}


50%{

    transform:translateY(-10px);

}


100%{

    transform:translateY(0);

}


}





@keyframes logoGlow{


from{

    opacity:.4;

}


to{

    opacity:1;

}


}





/* ==========================================================
   PREMIUM CARD LICHTEFFEKT
========================================================== */


.feature-card,
.price-card{

    position:relative;

    overflow:hidden;

}





.feature-card::before,
.price-card::before{

    content:"";

    position:absolute;

    top:-150%;

    left:-50%;

    width:220%;

    height:220%;


    background:

    linear-gradient(

        130deg,

        transparent,

        rgba(255,255,255,.12),

        transparent

    );


    transform:rotate(25deg);

    transition:1s;

}





.feature-card:hover::before,
.price-card:hover::before{

    top:150%;

}





.feature-card::after,
.price-card::after{

    content:"";

    position:absolute;

    right:-50px;

    top:-50px;

    width:120px;

    height:120px;

    border-radius:50%;

    background:

    rgba(212,175,55,.08);

}





/* ==========================================================
   ICON ANIMATION
========================================================== */


.feature-card i{

    transition:.4s;

}





.feature-card:hover i{

    transform:

    scale(1.15)

    rotate(-6deg);

}





/* ==========================================================
   SECTION HEADLINE EFFECT
========================================================== */


h2{

    position:relative;

    display:inline-block;

    padding-bottom:18px;

}





h2::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:90px;

    height:4px;

    border-radius:20px;

    background:

    linear-gradient(

        90deg,

        transparent,

        var(--gold),

        transparent

    );

}/* ==========================================================
   CASTELLO KINO
   Modern Cinema Theme v3
   Teil 3/4
   Sektionen / Karten / Footer / Effekte
========================================================== */


/* ==========================================================
   ALLGEMEINE SEKTIONEN
========================================================== */


.section{

    padding:110px 0;

    position:relative;

}




.bg-dark{

    background:

    linear-gradient(

        180deg,

        #111,

        #191919

    );

}




.section-title{

    text-align:center;

    margin-bottom:60px;

}




.section-title p{

    max-width:650px;

    margin:auto;

}





/* ==========================================================
   FILMSTREIFEN SEKTION EFFEKT
========================================================== */


.section::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:10px;


    background:

    repeating-linear-gradient(

        90deg,

        #000 0,

        #000 22px,

        transparent 22px,

        transparent 42px

    );


    opacity:.18;

}





.section::after{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:10px;


    background:

    repeating-linear-gradient(

        90deg,

        #000 0,

        #000 22px,

        transparent 22px,

        transparent 42px

    );


    opacity:.18;

}





/* ==========================================================
   HEUTE IM KINO
========================================================== */


.today-cinema{

    padding:100px 0;

    background:

    linear-gradient(

        180deg,

        #0b0b0b,

        #151515

    );

}





.showtimes{

    display:grid;

    gap:25px;

}





.show-card{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:

    25px 30px;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid rgba(255,255,255,.08);


    border-radius:var(--radius);

    transition:.35s;

}





.show-card:hover{

    transform:translateY(-8px);

    border-color:var(--gold);

    box-shadow:var(--shadow);

}





.movie-icon{

    font-size:2.5rem;

}





.show-info{

    flex:1;

}





.time{

    font-size:1.5rem;

    font-weight:700;

    color:var(--gold);

}





/* ==========================================================
   PROGRAMM / IFRAME
========================================================== */


.iframe-wrapper{

    position:relative;

    padding:18px;

    border-radius:28px;


    background:

    linear-gradient(

        145deg,

        #222,

        #070707

    );


    border:

    1px solid rgba(212,175,55,.3);


    box-shadow:

    0 0 50px rgba(212,175,55,.08),

    var(--shadow);

}





.iframe-wrapper iframe{

    width:100%;

    border-radius:18px;

    background:white;

}





/* ==========================================================
   FEATURE CARDS
========================================================== */


.feature-card{

    height:100%;

    padding:

    40px 30px;


    text-align:center;


    background:

    rgba(255,255,255,.05);


    border-radius:var(--radius);


    border:

    1px solid rgba(255,255,255,.1);


    transition:.4s;

}





.feature-card:hover{

    transform:translateY(-12px);

    border-color:var(--gold);

    box-shadow:var(--shadow);

}





.feature-card i{

    display:block;

    color:var(--gold);

    font-size:3.2rem;

    margin-bottom:25px;

}





.feature-card h3{

    margin-bottom:20px;

}





/* ==========================================================
   TECHNIK / ÜBER UNS
========================================================== */


#technik img,
#ueberuns img{

    border-radius:25px;

    box-shadow:var(--shadow);

    transition:.5s;

    filter:brightness(.9);

}





#technik img:hover,
#ueberuns img:hover{

    transform:scale(1.03);

    filter:brightness(1);

}





#technik strong{

    color:var(--gold);

    font-size:1.05rem;

}





/* ==========================================================
   PREISE
========================================================== */


.price-card{

    height:100%;

    padding:

    45px 30px;


    text-align:center;


    border-radius:25px;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid rgba(255,255,255,.1);


    transition:.4s;

}





.price-card:hover{

    transform:translateY(-12px);

    border-color:var(--gold);

    box-shadow:var(--shadow);

}





.price{

    font-size:3rem;

    font-weight:700;

    color:var(--gold);

    margin:20px 0;

}





.price-card.featured{

    border:

    2px solid var(--gold);


    background:

    linear-gradient(

        180deg,

        rgba(199,31,45,.3),

        rgba(0,0,0,.2)

    );

}





/* ==========================================================
   KONTAKT
========================================================== */


#kontakt{

    position:relative;

}





#kontakt iframe{

    border-radius:20px;

    box-shadow:var(--shadow);

}





#kontakt h4{

    color:var(--gold);

    margin-bottom:25px;

}





#kontakt i{

    color:var(--gold);

    margin-right:10px;

}





/* ==========================================================
   FOOTER
========================================================== */


footer{

    position:relative;

    overflow:hidden;

    padding:35px 0;

    background:#050505;


    border-top:

    1px solid rgba(255,255,255,.1);

}





footer::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.18;


    background:

    repeating-linear-gradient(

        90deg,

        #6a0000 0,

        #7d0000 30px,

        #4e0000 60px

    );

}





footer a{

    color:#ccc;

    transition:.3s;

}





footer a:hover{

    color:var(--gold);

}





/* ==========================================================
   SCROLLBAR
========================================================== */


::-webkit-scrollbar{

    width:10px;

}





::-webkit-scrollbar-track{

    background:#111;

}





::-webkit-scrollbar-thumb{

    background:var(--gold);

    border-radius:20px;

}





::-webkit-scrollbar-thumb:hover{

    background:var(--gold-light);

}





/* ==========================================================
   TEXT AUSWAHL
========================================================== */


::selection{

    background:var(--gold);

    color:#000;

}





/* ==========================================================
   SCROLL REVEAL
========================================================== */


.hidden{

    opacity:0;

    transform:translateY(70px);

    transition:1s;

}





.show{

    opacity:1;

    transform:translateY(0);

} /* ==========================================================
   CASTELLO KINO
   Modern Cinema Theme v3
   Teil 4/4
   Final Effects / Responsive
========================================================== */


/* ==========================================================
   TOP BUTTON
========================================================== */


.topButton{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--gold);

    color:#111;

    font-size:26px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transform:translateY(40px);

    transition:.4s;

    z-index:999;

    box-shadow:

    0 10px 30px rgba(0,0,0,.5);

}





.topButton.visible{

    opacity:1;

    transform:translateY(0);

}





.topButton:hover{

    transform:scale(1.1);

    background:var(--gold-light);

}





/* ==========================================================
   NAVBAR LOGO ZUSATZ
========================================================== */


.navbar-brand img{

    transition:.4s ease;

}





.navbar-brand:hover img{

    transform:scale(1.05);

}





/* ==========================================================
   IMAGE PREMIUM EFFECT
========================================================== */


#technik img,
#ueberuns img{

    overflow:hidden;

}





/* ==========================================================
   ANCHOR OFFSET
========================================================== */


section[id],
header[id]{

    scroll-margin-top:120px;

}





/* ==========================================================
   HERO FINAL FIX
========================================================== */


.hero-overlay{

    width:100%;

    position:relative;

    z-index:10;

}





.hero-content{

    position:relative;

    z-index:20;

}





.movie-area{

    position:relative;

    z-index:5;

}





.movie-showcase{

    z-index:5;

}





.hero-action{

    z-index:30;

}





/* ==========================================================
   RESPONSIVE TABLET
========================================================== */


@media(max-width:1200px){


    .movie-card{

        width:170px;

    }


    .card-one{

        left:10px;

    }


    .card-two{

        left:150px;

    }


    .card-three{

        left:290px;

    }


}






@media(max-width:992px){


    .hero{

        min-height:auto;

        padding:

        150px 0 120px;

    }



    .hero-content{

        text-align:center;

    }



    .hero-content p{

        margin-left:auto;

        margin-right:auto;

    }



    .movie-area{

        margin-top:50px;

        height:430px;

    }



    .movie-showcase{

        transform:scale(.8);

        transform-origin:center;

    }



    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }



    .hero-action{

        bottom:0;

    }



    h2{

        font-size:2rem;

    }



    .show-card{

        flex-direction:column;

        text-align:center;

    }



}






/* ==========================================================
   MOBILE
========================================================== */


@media(max-width:768px){


    .navbar{

        padding:12px 0;

    }



    .nav-logo{

        height:55px;

    }



    .section{

        padding:80px 0;

    }



    .hero-content h1{

        font-size:2.3rem;

    }



    .hero-content p{

        font-size:1rem;

    }



    .hero-logo{

        width:180px;

    }



    .movie-showcase{

        transform:

        scale(.65);

        margin-left:-40px;

    }



    .movie-card{

        width:140px;

    }



    .movie-card img{

        height:220px;

    }



    .feature-card,
    .price-card{

        margin-bottom:20px;

    }



    .price{

        font-size:2.3rem;

    }



    .topButton{

        width:48px;

        height:48px;

        right:20px;

        bottom:20px;

    }


}






@media(max-width:576px){


    .hero{

        padding-top:130px;

    }



    .hero-logo{

        width:150px;

    }



    .hero-buttons{

        gap:15px;

    }



    .btn-danger,
    .trailer-btn{

        width:100%;

        justify-content:center;

    }



    .movie-showcase{

        transform:

        scale(.55);

        margin-left:-65px;

    }



    iframe{

        min-height:500px;

    }


}






/* ==========================================================
   REDUCED MOTION
========================================================== */


@media(prefers-reduced-motion:reduce){


    *,
    *::before,
    *::after{

        animation-duration:.01ms!important;

        animation-iteration-count:1!important;

        transition-duration:.01ms!important;

        scroll-behavior:auto!important;

    }


}
@media(min-width:1400px){

    .hero-content{

        transform:none;

    }


    .movie-showcase{

        transform:none;

    }

}


@media(max-width:1100px){

    .movie-showcase{

        transform:scale(.85);

    }

}


@media(max-width:700px){

    .movie-showcase{

        transform:scale(.65);

    }

}


/* ==========================================================
   ENDE CASTELLO KINO STYLE V3
========================================================== */

/* ==========================================================
   HERO BUTTON KOMPAKT - 100% ZOOM
========================================================== */

.hero-action .btn-danger{

    padding:12px 32px;

    font-size:.95rem;

    border-radius:40px;

}
/* ==========================================================
   HERO POSITION UNTER NAVBAR
========================================================== */

@media(min-width:1200px){

    .hero-content{

        padding-top:90px;

    }


    .movie-area{

        padding-top:70px;

    }

}