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

body{
font-family:'Poppins',sans-serif;
background:#0e0e0e;
color:white;
overflow-x:hidden;
}

/* NAVBAR */

header{
position:fixed;
top:0;
left:0;
width:100%;
padding:20px 8%;
background:#111;
z-index:1000;
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
color:white;
text-decoration:none;
font-size:24px;
font-weight:700;
letter-spacing:2px;
}

.navbar ul{
display:flex;
gap:22px;
list-style:none;
}

.navbar a{
color:white;
text-decoration:none;
font-weight:500;
transition:.3s;
}

.navbar a:hover{
color:#00d4ff;
}

/* HERO */

.hero{

    min-height:100vh;
    display:flex;
    align-items:center;
    padding:120px 10% 80px;

    background:
        radial-gradient(
            circle at 90% 40%,
            rgba(0,102,255,.45) 0%,
            rgba(0,102,255,.20) 25%,
            rgba(0,102,255,.08) 40%,
            transparent 65%
        ),
        #0b0b0b;

}

.hero-container{

display:grid;

grid-template-columns:420px 1fr;

align-items:center;

gap:90px;

width:100%;

max-width:1400px;

margin:auto;

}

.hero-video-poster {
    width: 100%;
    display: block;
    object-fit: cover;
}

.hero-video video{

width:360px;

border-radius:28px;

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

box-shadow:
0 35px 80px rgba(0,0,0,.55),
0 0 40px rgba(0,212,255,.08);

transition:.35s;

}

.hero-video video:hover{

transform:translateY(-6px);

}

.hero-video video{

width:360px;

border-radius:25px;

box-shadow:0 25px 70px rgba(0,0,0,.55);

}

.hero-subtitle{

color:#00d4ff;

font-size:15px;

font-weight:700;

letter-spacing:3px;

}

.hero-text h1{

font-size:68px;

line-height:1.05;

margin:18px 0;

}

.hero-text p{

font-size:20px;

line-height:1.8;

color:#cfcfcf;

max-width:650px;

margin-bottom:40px;

}

.btn{

display:inline-block;

padding:16px 40px;

background:#00d4ff;

color:#000;

text-decoration:none;

font-weight:600;

border-radius:50px;

transition:.3s;

}

.btn:hover{

transform:translateY(-4px);

}

.portfolio-section{

    padding:80px 10%;

}

.section-header{

    text-align:center;

    margin-bottom:60px;

}

.section-header span{

    color:#00d4ff;

    letter-spacing:3px;

    font-weight:700;

    font-size:14px;

}

.section-header h2{

    font-size:54px;

    margin:15px 0;

}

.section-header p{

    color:#bdbdbd;

    font-size:18px;

}

.video-slider{

    display:flex;

    gap:30px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    padding-top:12px;
    padding-bottom:15px;

    scrollbar-width:none;

}

.video-slider::-webkit-scrollbar{

    display:none;

}

.video-card{

    flex:0 0 320px;

    position:relative;

    border-radius:22px;

    overflow:hidden;

    scroll-snap-align:start;

    transition:.35s;

    cursor:pointer;

}

.video-card:hover{

    transform:translateY(-10px);

}

.video-card video{

    width:100%;

    aspect-ratio:9/16;

    object-fit:cover;

    display:block;

}

.video-card video:fullscreen{
    object-fit: contain;
    width: 100vw;
    height: 100vh;
    background: #000;
}

.video-card video:-webkit-full-screen{
    object-fit: contain;
    width: 100vw;
    height: 100vh;
    background: #000;
}

.play-button{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:72px;

    height:72px;

    border-radius:50%;

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

    backdrop-filter:blur(8px);

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:26px;

    opacity:0;

    transition:.3s;

}

.video-card:hover .play-button{

    opacity:1;

}

.video-slider-wrapper{
    width:100%;
    overflow:hidden;
}

.slider-progress{
    position:relative;
    width:260px;
    height:5px;
    margin:40px auto 0;
    background:#3a3a3a;
    border-radius:999px;
}

.slider-progress-bar{
    position:absolute;
    left:0;
    top:0;
    width:70px;
    height:100%;
    border-radius:999px;
    background:#00d4ff;
    box-shadow:0 0 12px rgba(0,212,255,.4);
    transition:left .12s linear;
}

.video-info{

    text-align:center;

    margin-top:18px;

}

.video-info h3{

    font-size:22px;

    margin-bottom:6px;

}

.video-info p{

    color:#b8b8b8;

}

.creator-stats{

    color:#00d4ff;

    font-weight:700;

    line-height:1.6;

}

/* Long Form */

#longform .video-card{

    flex:0 0 700px;

}

#longform .video-card video{

    aspect-ratio:16/9;

    object-fit:cover;

}

.reviews-slider{

    overflow:hidden;
    padding-top: 12px;
    width:100%;
    mask-image:linear-gradient(
        to right,
        transparent,
        black 8%,
        black 92%,
        transparent
    );

}

.reviews-track{

    display:flex;
    gap:28px;
    width:max-content;

    animation:reviews 60s linear infinite;

}

.reviews-track:hover{

    animation-play-state:paused;

}

.reviews-track img{

    width:450px;

    border-radius:22px;

    transition:.35s;

    flex-shrink:0;

        filter:
        brightness(.92)
        saturate(.77)
        contrast(1.05);

}

.reviews-track img:hover{

    transform:translateY(-10px);

}

@keyframes reviews{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

@media(max-width:1000px){

.hero-container{

grid-template-columns:1fr;

text-align:center;

}

.hero-video video{

width:320px;

}

.hero-text p{

margin:auto;

margin-bottom:35px;

}

.hero-text h1{

font-size:50px;

}

#longform .video-card{
        flex:0 0 90%;
    }

    #longform .video-card video{
        width:100%;
        height:auto;
        aspect-ratio:16 / 9;
        object-fit:contain;
        display:block;
    }

.reviews-slider{
        width:100%;
        overflow:hidden;
    }

    .reviews-track{
        display:flex;
        gap:15px;
    }

    .reviews-track img{
        width:60vw;
        max-width:280px;
        height:auto;
        flex-shrink:0;
    }

}
/* =========================
   PORTFOLIO – MOBILE FEINSCHLIFF
   ========================= */

@media(max-width:1000px){

    /* Header: Logo auf Handy ausblenden */
    .navbar .logo{
        display:none;
    }

    .navbar{
        justify-content:center;
    }

    .navbar ul{
        justify-content:center;
        width:100%;
        margin:0;
    }


    /* Weniger Abstand zwischen den Portfolio-Sektionen */
    .portfolio-section{
        padding-top:45px;
        padding-bottom:45px;
    }


    /* Hero-Überschrift kleiner */
    .hero-text h1{
        font-size:38px;
        line-height:1.12;
        max-width:360px;
        margin-left:auto;
        margin-right:auto;
    }


    /* Hero-Beschreibung etwas kleiner */
    .hero-text p{
        font-size:16px;
        line-height:1.7;
        max-width:340px;
        margin-left:auto;
        margin-right:auto;
    }


    /* Überschriften der Sektionen kompakter */
    .section-header h2{
        font-size:32px;
        line-height:1.15;
    }


    .section-header p{
        font-size:15px;
        line-height:1.6;
    }


    /* "Das sagen meine Kunden" in einer Zeile */
    #reviews .section-header h2{
    font-size:30px;
    line-height:1.15;
    max-width:300px;
    margin-left:auto;
    margin-right:auto;
}

@media(max-width:1000px){

    /* Short Form Videos kleiner */
    #shortform .video-card{
        flex:0 0 65%;
    }

}

}