/* 
Homepage
*/


/* HERO */
#hero {
    padding-top: 5%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 70%, rgb(219 235 252) 100%);
    position: relative;
    /* overflow: hidden; */
}
#hero img {
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
}
#hero header {
    display: block;
    text-align: center;
    width: 60%;
    margin: 0 auto;
}
#hero h1 {
    color: var(--darker-blue);
    text-align: center;
    font-size: clamp(1.5rem, 4vw ,4rem);
    line-height: 1em;
    margin-bottom: 4%;
}
p {
    color: var(--mid-gray);
    text-align: center;
    font-weight: 400;
    width: 50%;
    margin: 0 auto 5% auto;
}
#hero .h3 {
    background: var(--dark-blue);
    color: var(--white);
    text-align: center;
    border-radius: 8px;
    padding: 15px 20px;
    display: inline-block;
    transition: all .5s ease-in-out;
    font-size: clamp(1rem, 2vw ,1.2rem);
}
#hero h5:hover { background-color: var(--darker-blue); transition: all .5s ease-in-out; }
#hero .animation img {  
    width: 35px;
    margin-right: 0.5em;
 }
#hero .btn-primary {
    display: block;
    margin: 0 auto 3em auto;
    padding: 0.8em 2em;
}
#hero .animation .frame-type-custom_textmedia {   
    background: var(--white);
    box-shadow: 0px 3px 7px 2px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: .6em;
    display: flex;
    align-content: center;
    align-items: center;
}
#hero .animation .frame-type-custom_textmedia > div {float: left;}
#hero .animation .frame-type-custom_textmedia p  {
    width: initial;
    float: left;
    margin: 0;
    font-size: clamp(.9rem, 2vw, 1.1rem);;
}
#animation-65  {
    position: absolute;
    top: 60%;
    width: initial;
}
#animation-74 {
    position: absolute;
    top: 50%;
    right: 10%;
}
#animation-76 {
    position: absolute;
    top: 80%;
    left: 15%;
}
#animation-78 {
    position: absolute;
    top: 90%;
    right: 20%;
}
/* 2: SERVICE */
#services p { 
    margin: 0; 
    text-align: left;
    width: 80%;
}
#services h3 {
    color: var(--darker-blue);
    font-size: clamp(1.6rem, 2vw, 1.8rem);
    margin-bottom: 1em;
}
#services .frame-type-header p { color: var(--dark-blue); }

/* BRANCHEN GALLERY */
#branchen-gallery .frame-type-header {
    width: 50%;
    display: block;
    margin: 0 auto;
}
#branchen-gallery .frame-type-header p { margin: 0; margin: 2em auto 0 auto;}
#masonry_grid_item_1 { margin-top: 8em;}
#masonry_grid_item_2 { margin-top: 2em;}
#masonry_grid_item_3 { margin-top: 7em;}
#masonry_grid_item_4 { margin-top: 4em;}

#branchen-gallery .masonry-grid-column { margin: 0 4em 4em 0; }
#branchen-gallery .masonry { margin-top: 5em;}
#branchen-gallery .masonry img { position: relative; }
#branchen-gallery .masonry-grid-column-1 {  margin-left: 0; }
#branchen-gallery .masonry-grid-column-4 {  margin-right: 0; }
#branchen-gallery .masonry-grid-column-1 img { border-radius: 0 20px 20px 0; }
#branchen-gallery .masonry-grid-column-4 img { border-radius: 20px 0px 0px 20px; }
#branchen-gallery .masonry-grid-column-2 img,
#branchen-gallery .masonry-grid-column-3 img { border-radius: 20px; }
#branchen-gallery .masonry .frame-layout-1 {
    background: var(--dark-blue);
    color: var(--white);
    border-radius: 20px;
    padding: 3em;
}
#branchen-gallery .masonry .frame-layout-1 header p{
    margin: 0 5%;
    text-transform: uppercase;
    line-height: 1.2em;
}
#branchen-gallery .masonry .frame-layout-1 div > p {
    font-size: 2em;
    line-height: 1.3em;
    margin-top: 1em;
}
#branchen-gallery .masonry .frame-layout-1 a {
    font-size: .7em;
    color: var(--white);
    text-decoration: none;
}
#branchen-gallery .masonry .frame-layout-1 h3 {
    background: transparent;
}

#branchen-gallery .masonry-grid-item {
    margin-bottom: 3em;
    position: relative;
    transition: all .5s ease-in-out;
    flex: 1;
}
#branchen-gallery .masonry .frame-layout-0 header {
    position: absolute;
    bottom: 1%;
    left: 5%;
    z-index: 10;
}
#branchen-gallery .masonry-grid-item p {
    width: initial;
    color: var(--white);
    text-align: left;
}
#branchen-gallery .masonry-grid-item header {
    display: flex;
    align-items: center;
}
#branchen-gallery .masonry-grid-item header h2 {
    font-size: clamp(1.9rem, 3vw, 3.6rem);
    color: var(--white);
}
#branchen-gallery .masonry h3 {
    color: white;
    font-size: 1.2em;
    background: var(--darker-blue);
    padding: 0.7em;
    border-radius: 10px;
    opacity: .9;
}

/* VORTEILE */
#vorteile .frame-type-header p { margin: 0; margin: 2em auto 0 auto;}
#vorteile .frame-type-header h2 { width: 50%; margin: 0 auto;}
#vorteile p { width: initial; text-align: left; }
#vorteile .frame-type-textmedia img { width: 90%; height: auto; }
#vorteile .frame-type-custom_textmedia { margin: 2em 0 3em 0; }
#vorteile .frame-type-custom_textmedia img {
    width: 30px;
    height: auto;
    margin-bottom: 1em;
}
#weltkarte { position: relative; }
#weltkarte .frame-type-header p { margin: 0; margin: 2em auto 0 auto;}
#weltkarte .frame-type-header h2 { width: 50%; margin: 0 auto;}
#weltkarte .animation img {  width: 35px; margin-right: 1em; }
#weltkarte .animation .frame-type-custom_textmedia {
    background: var(--white);
    box-shadow: 0px 3px 7px 2px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: .6em 1em;
    display: flex;
    align-content: center;
    align-items: center;
    width: max-content;
}
#weltkarte .animation .frame-type-custom_textmedia > div {float: left;}
#weltkarte .animation .frame-type-custom_textmedia p  {
    width: initial;
    float: left;
    margin: 0;
    font-size: clamp(.9rem, 2vw, 1.1rem);;
}
#weltkarte .frame-type-custom_textmedia img {
    border-radius: 50%;
}
#animation-241 { position: absolute; top: 60%; }
#animation-237 { position: absolute; top: 50%; left: 40%; }
#animation-239 { position: absolute; top: 58%; right: 13%; }



/*------------------------------------------------- */
/* QUERY
/*------------------------------------------------- */
@media(max-width: 592px) {
   #kontakt-button { display: none;}
}
@media(max-width: 767px) {
    #animation-74, #animation-78, #animation-65, #animation-76 { display: none;}

    #weltkarte .animation .frame-type-custom_textmedia { padding: .3em; }
    #weltkarte .animation .frame-type-custom_textmedia p { display: none; }
    #weltkarte .animation img { width: 30px; margin-right: 0em; }
    #animation-241 { top: 66%; left: 10%; }
    #animation-237 { top: 62%; left: 44%; }
    #services .btn { margin-bottom: 1em;}
    #c90, #c102, #c173 { display: flex; flex-direction: column-reverse; }
    #branchen-gallery .masonry .frame-layout-1 div > p { margin-top: .3em; }
    .textmedia-images { flex-wrap: wrap; }
    #animation-228 .frame-type-custom_textmedia, 
    #animation-228 .frame-type-textmedia, 
    #animation-233 .frame-type-custom_textmedia, 
    #animation-233 .frame-type-textmedia { width: 90%; }
}

@media(max-width: 768px) {
    .hidden-xs { display: none;}
    #hero header, #hero img { width: 100%;}
    #hero p { width: 80%;}
    #hero h1 { margin-bottom: 0%; }
    #animation-74, #animation-78 { display: none;}
    #animation-65 { top: 72%; left: 2%; }
    #animation-76 { top: 85%; left: 39%; }
    #testimonials .frame-type-sslider { margin-top: 2em; }
    
    #branchen-gallery .frame-type-header { width: 100%; }
    #branchen-gallery .frame-type-header p { margin: 2em auto 0 auto; width: 80%; }
    .masonry-grid-item img,
    #branchen-gallery .frame-layout-1 {
        width: 100%;
        display: block;
        margin: 0 auto;
        border-radius: 20px;
    }
    #branchen-gallery .masonry-grid-item { margin-bottom: 1em;}
    #branchen-gallery .masonry .frame-layout-0 header { bottom: 2%; left: 7%; }
    #masonry_grid_item_1,
    #masonry_grid_item_2,
    #masonry_grid_item_3,
    #masonry_grid_item_4 { margin-top: 1em; }

    #vorteile .frame-type-textmedia img  { width: 100% }
    #vorteile .frame-type-header h2 { width: 80%; }
    #vorteile .frame-space-before-large { padding: 0;}

    #weltkarte .frame-type-header h2 { width: 80%; }
    #weltkarte img { width: 100%;}

}
@media(min-width: 768px) and (max-width: 1023px) {
    .hidden-xs { display: none;}
 
    #hero header, #hero img { width: 100%;}
    #hero p { width: 80%;}
    #hero h1 { margin-bottom: 0%; }
  
    #services .e-elementColumns1 {margin-bottom: 2em;}
    #stark .bodytext { min-height: 200px; }
    
    #branchen-gallery .masonry { column-gap: 2em; }
    #branchen-gallery .masonry-grid-column { margin: 0 0em 0em 0; }
    #branchen-gallery .masonry .frame-layout-1 { padding: 1em; }
    #branchen-gallery .masonry .frame-layout-1 header p { font-size: 0.6em;}
    #branchen-gallery .masonry .frame-layout-1 div > p {font-size: 1.4em;}
    #branchen-gallery .masonry h3 { font-size: 0.6em;}
    #branchen-gallery .masonry .frame-layout-1 a { font-size: 0.5em; }

    #vorteile .frame-type-textmedia img { width: 100%; }
    #vorteile .frame-type-custom_textmedia { margin: 2em 0 0em 0; }
    
    #animation-237 { top: 50%; }
    #animation-239 { top: 67%; }
    #animation-241 { top: 76%; }
    #animation-76 { top: 69%; left: 63%; }

}

@media(min-width: 1024px) and (max-width: 1128px) {
    #branchen-gallery .masonry-grid-column { margin: 0 1em 1em 0; }
    #branchen-gallery .masonry-grid-column-4 { margin: 0 0 1em 0; }
    #branchen-gallery .masonry-grid-item { margin-bottom: 2em; }
    #masonry_grid_item_1 { margin-top: 4em; }
    #masonry_grid_item_3 { margin-top: 5em; }

    #branchen-gallery .masonry h3 { font-size: .9em; }
    #branchen-gallery .masonry .frame-layout-1 div > p { font-size: 1.8em; line-height: 1.1em; }

    #animation-228 .frame-type-custom_textmedia, 
    #animation-228 .frame-type-textmedia ,
    #animation-233 .frame-type-custom_textmedia,
    #animation-233 .frame-type-textmedia {  width: 100%;  }

    #vorteile .frame-type-textmedia img { width: 100%; }
    #vorteile .frame-type-custom_textmedia { margin: 0em; }

    #animation-237 { top: 40%; }
}

@media(min-width: 1128px) and (max-width: 1365px) {
    #branchen-gallery .masonry-grid-column { margin: 0 2em 2em 0; }
    #branchen-gallery .masonry h3 { font-size: 1em;}
    #animation-237 { top: 40%; }
}

@media(min-width: 1366px) {
   

    #branchen-gallery .frame-type-header p { width: 75%; font-size: clamp(1.1rem,2vw,1.4rem); }
    #animation-237 { top: 45%; }
}

@media(min-width: 2000px) {
    #branchen-gallery .masonry-grid-column { margin: 0 7em 2em 0; }
}
@media(min-width: 2300px) {
  
    #branchen-gallery .masonry-grid-column { margin: 0px 9em 0em 0; }
    #animation-239 { right: 24%; }
}