/* HOMEPAGE */
#info {
    position:fixed;
    bottom:0;
    right:0;
    width:200px;
    height:100px;
    border:1px solid magenta; 
    color:#fff; 
    display:none;  
}


/* Stage */
#section-1 {
  width:100%;
 /*  height:calc(100vh - 40px);  */
  height:100vh; 
  position:relative;
  overflow:hidden; 
  margin-top:0px; 
 /*   border:1px solid magenta;  */
}

#section-1 #c18732,
#section-1 #c18732 > .frame-inner,
#section-1 #c18732 > .frame-inner > .no-container,
#section-1 #c18732 > .frame-inner > .no-container > .row {
    height:100%;
}

#stage-video {
  max-width:1800px; 
  margin:0 auto;
  visibility:hidden
}

#stage-video .video {
  
}

/*
#logoanim-intro {
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  width:100%;
  height:80vh
}
*/

.megura-logo {
    position: absolute;
    z-index: 2;
    top: 35%;
    left: 50%;
    margin: 0 auto;
    width: 60vw;
    height: auto;
    transform: translateX(-50%);
    opacity:0;
}

.home-elevator {
    max-width:820px;
    margin-inline: auto;
}

.home-elevator h2 {
    font-size: 28px;
    text-transform:none !important;
    line-height:140%; 
    /* color:#0f3abc */
}





/* Megura Methode - Wie wir arbeiten */
.how-we-work {
    max-width:520px;
    margin-inline: auto;
}



/* Kultut Agentur Video */
.agentur-video {
    /* Default viewport > 2000px */
    max-width:100%;
    height:20vh;
    overflow: hidden;
    min-height: 640px; 
    display:block; 
    position: relative;
}

.agentur-video video {
    /* Default viewport > 2000px */
    position: absolute;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -15%);
    -moz-transform: translate(-50%, -15%);
    -ms-transform: translate(-50%, -15%);
    transform: translate(-50%, -15%);
    z-index: 0;
   /*  border:1px solid green; */
}



/* Hot Topics */
.hot-topics {
    display:flex; 
    /*gap:50px;  */
    position:relative;
    left:calc((100vw - var(--container)) - ((100vw - var(--container)) / 2) ); 
}

.hot-topics-teaser {
    position:relative;
    flex:0 1 auto;
    flex-basis:400px; 
    width:400px; 
    padding:0px 150px 0px 15px;
}

.hot-topics-slider {
     flex:1 1 auto; 
    width:calc(100% - 400px);
    max-width:1430px; 
    overflow:hidden;
}


/* Hot Topics Slider - Blog Cards */
.blog-card {
    aspect-ratio:16/9;
    width:800px;
    background-color:#fff;
    border-radius:18px;
    overflow:hidden; 
}

.blog-link {
    position:relative; 
    display:block !important; 
    width: 100%;
    height: 100%;
}

.blog-descr {
    position:absolute;
    z-index:5;
    top:30px;
    left:30px;
    width:55%;
    height:calc(100% - 30px);
    display:flex;
    flex-direction: column;
}

.blog-img {
    position:absolute;
    bottom:0px;
    right:0px;
    width:60%;
}

.blog-img img {
    height:auto; 
}

.blog-descr h3 {
    font-size:21px;
    text-transform:none !important;
    margin-bottom:10px; 
}

.blog-descr h4 {
    font-family:var(--ff-ter);
    color:var(--clr-prim-dark);
    font-size:32px; 
    line-height:120%; 
}

.blog-more {
    align-content: flex-end;
    flex: 1 1 auto;
    margin-bottom:30px; 
}


/* Sprintput */
.sprintput-text {
    float:right;
    margin-right:20%; 
}





/* Media Queries */
@media screen and (max-width: 1380px) { 
   
    .agentur-video {
        max-width:100%;
        aspect-ratio: 16/9;
        height:initial;
        min-height:initial; 
    }

    .agentur-video video {
        /* Default viewport > 2000px */
        position: absolute;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        -webkit-transform: translate(-50%);
        -moz-transform: translate(-50%);
        -ms-transform: translate(-50%);
        transform: translate(-50%);
        z-index: 0;
    }

    .blog-descr {
        width: 65%;
    }
    
    .blog-descr h4 {
        font-size:28px; 
    }

    .megura-logo {
        width: 50vw;
    }
}


@media screen and (max-width: 1240px) { 

    .blog-descr h3 {
        font-size:20px;
    }

    .blog-descr h4 {
        font-size:26px; 
    }
}


@media screen and (max-width: 1080px) { 

    .hot-topics {
        display: block;
        gap: initial;
        position: relative;
        left: 0;
    }

    .hot-topics-slider {
        flex:1 1 auto; 
        width:100%;
        max-width:100%; 
        overflow:hidden;
    }

    .blog-descr {
        top:20px;
        left:20px;
        width:70%;
        height:calc(100% - 20px);
    }

    .blog-img {
        opacity:0.7
    }

    .blog-more {
        margin-bottom: 5px;
    }
}


@media screen and (max-width: 960px) { 
    .wrap-text-boxes {
        gap: 30px;
    }
}



@media screen and (max-width: 767.5px) { 

      
    .blog-descr h3 {
        font-size:18px;
    }

    .blog-descr h4 {
        font-size:23px; 
    }
}



@media screen and (max-width: 575.5px) { 
  
      .blog-card {
        aspect-ratio: 4/3;
        width: auto;
        background-color: #fff;
        border-radius: 18px;
        overflow: hidden;
    }

    .blog-descr {
        top:12px;
        left:12px;
        width:80%;
        height:calc(100% - 12px);
    }

    .blog-descr h4 {
        font-size:21px; 
        line-height:110%;
    }
}


@media screen and (max-width: 480px) { 
  
    .blog-descr {
        width:90%;
    }
   
    .blog-descr h3 {
        font-size:17px; 
        margin-bottom:8px; 
    }

    .blog-descr h4 {
        font-size:20px; 
    }
}


@media (max-aspect-ratio: 4/3) {
  
    #section-1 {
        height:auto; 
        aspect-ratio:16/9;
        margin-bottom:50px;
        margin-top:40px; 
    }
}


@media (max-aspect-ratio: 4/3) and (max-width: 575.5px) {
  
    #section-1 {
        height:auto; 
        aspect-ratio:16/9;
        margin-bottom:40px;
        margin-top:50px; 
    }
}


@media (min-aspect-ratio: 4/3) {
 
     #section-1 {
        aspect-ratio:initial;
        margin-bottom:0px;
    }
}