* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    color: #343434;
    
            }
*, ::after, ::before{
    box-sizing: border-box;
}

/* roboto-300 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('./fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
         url('./fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
  }
  /* roboto-regular - latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('./fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
  }



  .testblabla {
        animation-name:fadeInNews;
        animation-duration:3s;
  }

  .testblabla0{
    animation-name:fadeInNews;
    animation-duration:0.5s;
  }

  .testblabla1{
    animation-name:fadeInNews;
    animation-duration:2s;
  }

  .testblabla2{
    animation-name:fadeInNews;
    animation-duration:3s;
  }

  .testblabla3{
    animation-name:fadeInNews;
    animation-duration:4s;
  }

  .testblabla4{
    animation-name:fadeInNews;
    animation-duration:5s;
  }

  .testblabla5{
    animation-name:fadeInNews;
    animation-duration:6s;
  }

  .testblabla6{
    animation-name:fadeInNews;
    animation-duration:7s;
  }

  .testblabla7{
    animation-name:fadeInNews;
    animation-duration:8s;
  }

  @keyframes fadeInNews{
      0%{
          opacity:0;
      }
      30%{
          opacity:0;
      }
      100%{
          opacity:1.0;
      }
  }

.newsbox{
    border:#c2c2c2 1px solid;
    border-radius:20px;

}

#modal-header{
    border:0px solid white;
}

#close-button{
    margin-right:10vw;
}

.modal-content {
    background-color: #9ac4ecb8; /* Hintergrundfarbe blau */
    color: white; /* Textfarbe weiß */
}
.centered{
    margin-left:10vw;
    margin-right:10vw;
    margin-top:20vh;
    max-height:39vh;
    max-width:80vw;
    background-color:white;
    border-radius:30px;
    box-sizing:content-box;
    padding: 0;
    position:relative;
    border:lightgrey solid 2px;

}

.centered1{
    margin-top:5vh;
}




.max-widht{
    width: 95vw;
}

.border-horizontal{
    border-left:#c2c2c2 1px solid;
    border-right:#c2c2c2 1px solid;
    border-top:#c2c2c2 1px solid;
    border-bottom:#c2c2c2 1px solid;
    border-radius:20px;
    padding-top:20px;
    padding-bottom:20px;
    width:90%;
    margin:0 auto;
}

.news-pic{
    padding-bottom:5px;
}

.news-popup-text{
    width:80%;
    font-style: italic;
}
.distance-bottom{
    margin-bottom:20px;
}
.img-responsive{
    border-radius:2%;
}
.div-container {
    position: relative;
    margin-top: 100px; /* Platz für das überlappende mittlere div */
}

/* Div Style */
.div-box {
    padding: 20px;
    background-color: lightgray;
    border: 1px solid gray;
    margin: 10px;
    height: 100px;  /* Standardhöhe für die seitlichen Divs */
}

.div-box.middle {
    height: 200px;  /* Höhere Höhe für das mittlere Div */
    position: absolute;
    top: -100px;  /* Positionieren Sie das mittlere div über den anderen */
    left: 33.333%;
    width: 33.333%;
    z-index: 1;  /* Überlagern Sie das mittlere div über den anderen */
}

.newsbox:hover{
    border:#9ac4ec 1px solid;
    cursor:pointer;
    
}

.popup-caption{
    margin-bottom:30px;
    margin-top:7vh;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #333;
    font-size:14pt;
    margin-right:5vw;
    margin-left:2vw;
    
}

.test{
    color:#525252
}

.date-left{
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: rgb(136, 136, 136);
    font-size:12pt;
    float:right;
    padding-top:5vh;
}

.lightbox-description{
    font-size:9pt;
    font-weight: 300;
}

.modal-body{
    padding:0;
}

.popup-news{
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    border-radius:30px;
    width: 79vw;
    margin:0;
    padding:0;
}

.news-popup-text{
    margin-left:2vw;
}

.stelle{
    margin-top:5vh;
    margin-bottom:3vh;
}


.newspic-large{
    border-radius:20px 8px 8px 20px;
    height:100%;
    width:100%;
}

.karriere-header{
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: rgb(0, 0, 0);
    font-size:12pt;
    margin-bottom:2vh;
}

.popup-pic{
    margin-top:5%;
    width:95%;
    margin-left:5%;
    object-fit: cover;
}

.popup-pic-frame{
    display:grid;
    place-items:center;

}

.news-popup-text{
    border-left:lightgrey 2px solid;
    padding-left:2vh;
}

.news-caption{
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #333;
    font-size:12pt;
}


@media only screen and (max-width:992px){
    .popup-news{
        bottom:auto;
    }

    .news-popup-text{
        margin-bottom:5vh;
        border-left:lightgrey 2px solid;
        padding-left:2vh;
    }

    .popup-caption{
        margin-top:3vh;
    }

    .popup-pic{
        margin-top:3vh;
        width:80%;
        margin-left: 7vw;
    }

    .centered{
        max-height:67vh;
        margin-top:10vh;
    }


}

.newspic{
    max-height: 200px;
    border-radius:20px 8px 8px 20px;
}





.full-width{
    width:100%;
}

.radius{
    border-radius:20px;
}

#newsBreadcrumb li{
    float:left;
    padding:5px;
    padding-right:30px;
}

ul{
    padding: 0;
}
p{
    color:#343434;
    

}

.stellen p{
    font-family: 'Roboto', sans-serif;
    
}

#glightbox-slider{
    background: rgba(2, 72, 138, 0.45);
}

header {
	background-color: white;
	width:1183px;
    margin:0 auto;
    position:fixed;
    padding-right:13px;
    z-index:6;
}

.btn-close{
    color:white;
}

#slideareaoutside{
    height:146px;  
}


#slidearea{
    margin-top:1.5em;
    transition: all 0.4s;
}


#logo{
    width:102px;
    height:auto;
    margin-top:2px;
    
}

#bereichlogo {
	color: white;
	background-color: white;		
	display: block;
	text-decoration: none;
	float: left;
    width:auto;
    
    
    
}

#steuerung li {
	list-style: none;
	float: left;
    padding: 0px 0px 0px 0px;
}



#steuerung a {
    text-align:center;
	display: block;
	height: 100%;
	width: 100%;
    padding: 5px 8px 5px 8px;
	font-size:11pt;
	text-decoration: none;
    
	
} 

.pagelink:hover{
    color:black;
    border-radius:10px;
    background-color: #9ac4ec;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: ease 0.4s;
}


.menue-button {
	display: none;
}   

#steuerung {
	float: right;
    margin-top:40px;
    
}

#steuerung li{
        text-align:center;
        padding-right:5px;
        
    }

#steuerung a:hover {
	color: white;
	background-color: #1c4f7e;
    border-radius:10px;
    
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    transition: all 0.7s ease;
}	



a.inaktiv{
    color:#343434;
            }

#active{
    color:white;
    background-color:#1c4f7e;
    border-radius:10px;
}


h1{text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #333;
    font-size:24pt;}





#inhalt{
    width:100%;
    height:100%;
    
    
    /* height:1700px */ 
            }

#inhalt0 {
    margin-top:215px;
            }

#VerIn {
    margin-top:215px;
    }


#Verlink{
    /*
    width:100%;
    */
    margin: 0 1em 2.1em 1em;
    }
#VerIn{
        /*
        width:100%;
        */
        margin: 0 1em 2.1em 1em;
    }

#Verlink a{
    font-weight:300;
    text-decoration:none;
    color:black;
    margin-left:1em;
    padding:0.2em;
    font-size:20pt;
}

#VerIn a{
    font-weight:300;
    text-decoration:none;
    color:black;
    margin-left:1em;
    padding:0.2em;
    font-size:20pt;
}

#Verlink a:hover {
    background-color:#9ac4ec;
    color:black;
    
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    transition: all 0.6s ease;
}
#VerIn a:hover {
    background-color:#9ac4ec;
    color:black;
    
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

.verlink_on{
    color:black;
    /* border-bottom:#9ac4ec 4px solid;*/
    border-radius:10px;
    background-color: #9ac4ec;
    
}

.lightbox-description p{
    color: #343434;
    font-size: 15px;
    font-family: 'Roboto', sans-serif;
      
}

#gallerie {
    
   display:flex;
    flex-flow: row wrap;
    
    
            }
.bildtext1{
    width:98.5%;
    margin:0 auto;
}

p.ref{
    font-size:2px;
    font-family:'Roboto', sans-serif;
    color:blue;
}


.bildtext2{
    width:98.5%;
    margin:0 auto;
}

.bildtext2 p{
    color:#343434;
    font-size:30px;
    font-family:'Roboto', sans-serif;
}

.bild{
    box-sizing:border-box;
    
    flex-basis: calc(100% / 3 - 1.1rem);
    /* mit flex-basis müssen noch die mediascreens gemacht werden für tablet und handy */
    width:100%;
    border-top:#c2c2c2 1px solid;
    line-height:1.5em;
    margin-bottom:72px;
    padding-right:6px;
}

h2{
    font-weight:400;
    line-height:1.6em;
    margin-top:10px;
    color:#343434;
    margin-bottom:20px;
    font-size:18px;
}

#trennlinie-news{
        width:100%;
        border-bottom:#c2c2c2 1px solid;
        color:white;
        margin-top:0;
        margin-bottom:35px;
        padding:0;
        animation-name: buildUpTrennlinie;
        animation-duration:2s;
        margin-bottom:5px;
        
}

.news-text{
    width:80%;
    margin:5% 0 0 5%;
    text-decoration: none;
    color:rgb(255, 255, 255);
}

.news-text2{
    padding-right:30px;
    padding-left:10px;
    
}

.news-caption-frame{
    display:grid;
    place-items: center;


}

.news-font{
    text-decoration:none;
    color:rgb(225, 225, 225);
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #333;
    font-size:12pt;
}

.newspic-large{
    max-height:295px;
}

#news-link{
    text-decoration: none;
}

h6{
    color:rgb(81, 81, 81);
}

.news-container{
    width:1180px;
}

.full-height{
    max-height:100%;
}

@media only screen and (max-width: 577px){
    .news-container{
        width:100%;
    }

    .popup-caption{
        margin-top:5vh;
        font-size:12pt;
    }

    .popup-news{
        width:92vw;
    }

    .popup-pic{
        margin-left:2vw;
        width:92%;
    }

    
}

.karrierebox{
    padding-left:40px;
    margin-left:30px;
    padding-right:40px;
    border-left:1px solid lightgrey;
}

@media only screen and (max-width:768px){
    .invisible-when-small{
        display:none;
    }

    .fullwidth-when-small{
        width:100%;
    }

    .newspic-high{
        max-height:270px;
    }

    .img-responsive{
        width:100%;
    }

    .karrierebox{
        margin-bottom:70px;
        border-left: none;
        padding-bottom:25px;
        padding-left:40px;
        padding-right:22px;
        margin: 0 auto;
    }

}

@media only screen and (max-width:1220px){
    .btn-custom{
        width:90%;
        margin-bottom: 0.8em;
    }
}

.news-font-frame{
    overflow:hidden;
    max-height:78px;
}

.news-font-frame1{
    overflow:hidden;
    max-height:120px;
}

.container1{
    height:100%;
}

.bild h3{
    font-weight:300;
    font-size:1em;
    color:#343434;
    font-family:'Roboto', sans-serif;
    color:#5f5f5f;
    margin-bottom:8px;
    
}

h3{
    font-family:'Roboto', sans-serif;
}

h4{
    font-family:'Roboto', sans-serif;
}

.bild p{
    color:#343434;
    font-size:13px;
    font-family:'Roboto', sans-serif;
}

.ref-lightbox {
    color: grey;
    font-size:11px;
    display: inline-block;
    position:absolute;
    top:0;
}


p.ref{
    color:grey;
    font-size:10px;
    margin:0 0 0 0;
}

.projectDescriptionRef{
    margin:0;
}

.lightbox-title{
    color:#1c4f7e;
    color:grey;
}

.image{
    width:100%;
    display:block;
    margin:12px 0 0 0;
    border-radius:5px 5px 0px 0px;
}

.image1{
    width:100%;
    display:block;
    margin:0 0 25px 0;
    border-radius:5px 5px 0px 0px;
}

#stellenliste a h4{
    color:#1c4f7e;
}

#stellenliste a{
    text-decoration: none;
}

.bildtext2 a{
    text-decoration: none;
    color:#1c4f7e;
    transition: color 0.3s ease;
}

.bildtext2 a:hover {
    color: #9ac4ec;
  }

.lightbox-description a{
    text-decoration: none;
    color:#1c4f7e;
    
}


#inhalt2 a{
    text-decoration: none;
    color:#1c4f7e;
}


    
#inhalt1 {
    line-height:1.4em;
   float: left;
   width: 600px;
    margin-top:20px;
    margin-left:15px;
    text-align:justify;
            }

#inhalt3 {
    line-height:1.4em;
    float: left;
    margin-top:20px;
    margin-left:15px;
    text-align:justify;
}

#datenuhaft{
    line-height:1.4em;
   float: left;
   width: 100%;
    margin-top:20px;
    margin-bottom:100px;
    text-align:left;
    
}

#bildquellen{
    font-size:12px;
    line-height:1.2em;
}


#inhalt4{
    margin-bottom:100px;
    line-height:1.6em;
   float: left;
   width: 600px;
    margin-top:40px;
    text-align:justify;
}
h3{
    margin-top:30px;
    margin-bottom:20px;
            }

#referenzliste {
    padding-left:60px;
    margin-top:15px;
            }
#referenzliste li{
    color:#1c4f7e;
}

#referenzliste li span{
    color:#333;
}

li.ergebnisse{
    margin-bottom:20px;
    line-height:1.6em;
}

#stellenliste li{
    list-style:none;
    margin-bottom:25px;
}

#stellenliste {
    padding-left:60px;
    margin-top:15px;
            }

#starttext{
    max-width:600px;
}

.stellen h4{
    font-family: 'Roboto', sans-serif;
    color: #343434;
    font-weight:bold;
    
}


#gruppenfoto{
    margin-top:40px;
    width:550px;
    height:auto;}


#inhalt2 {
    line-height:1.5em;
    margin-top:20px;
    margin-left:365px;
    width:auto;
    font-size:13px;
    
            }

.telmob{
    cursor:default;
    text-decoration:none;
    color:#333;
    pointer-events:none;
}
.mailto{
    color:#1a61c0;
    text-decoration:none;
}

.mailto:hover{
    text-decoration:underline;
}

#trennung{
    width:100%;
    float:left;
    margin-top:10px;
}

#trennlinieproj{
    width:100%;
    border-bottom:#c2c2c2 1px solid;
    color:white;
    margin-top:0;
    margin-bottom:35px;
    padding:0;
    animation-name: buildUpTrennlinie;
    animation-duration:2s;
    
}





#trennlinie{
    width:100%;
    border-bottom:#c2c2c2 1px solid;
    color:white;
    margin-top:0;
    margin-bottom:80px;
    padding:0;
    animation-name: buildUpTrennlinie;
    animation-duration: 2s;
            }

@keyframes buildUpTrennlinie{
    0% {
        width:0%;
    }
    100%{
        width:100%;
    }
}

h3{
    margin-top:30px;
    color:#343434;
    font-family:'Roboto', sans-serif;
            }

#startbild{
    width:100%;
    height:auto;
    margin:0 auto;
    margin-top:25px;
    border-bottom:#c2c2c2 1px solid;
    padding-bottom:30px;
    border-radius:0px 40px 0px 0px;
            }


#inhalt2 a{
    text-align:right;
            }
#inhalt2 p{text-align:right;}


#side,#test2{
    width:1180px;
    margin:0 auto;
    box-sizing:border-box;
}
html,body{
    height:90%;
    line-height: 1.5;
            }

body{min-height:90%;
animation:fadein 0.8s;-moz-animation:fadein 1.3s;-webkit-animation:fadein 0.8s;}


#abschlussleiste{
    
    
    
    width:100%;
    height:2px;
    display:inline-block;
    position:relative;
    
   
    
     }

.test_blue{
    position:absolute;
    height:180px;
    background-color:#1c4f7e;
    width:100%;
}



#fussbereich_inhalt{
    width:1180px;
    margin:0 auto;
    
    
}

#test2 a{
    text-decoration:none;
    color:white;
}

#test2 p{
    color:white;
}


#test2 li{
    list-style:none;
    width:100%;
}

#test2{
    margin: auto;
    width:1180px;
}
#button{
    margin-left:1120px;
    float:left;
    margin-top:40px;
}


#instabutton{
    width:60px;
    height:auto;
}

#instabutton:hover{
    fill:blue;
    
    
    
}
#Layer_1:hover{fill:#9ac4ec;}



#copyright1{
    float:left;
    margin-top:20px;
    
}



#copyright2{
    float: left;
    margin-left: 512px;
    margin-top: 20px;
}

.fab{
    font-size: 60px;
    width: 50px;
    text-align: center;
    text-decoration: none;
    margin-left: 35px;
    color: white;
}

.social-button{
    width: 40%; 
}



.socials{
    position: relative;
    width: auto;
    text-align: right;
    margin-left: 990px;
    float: left;
    margin-top: 30px;
    margin-bottom: 10px;
    /*background: wheat;*/
    white-space: nowrap;
}

a:hover .fab{
    color: #9ac4ec
}

.haftung {
    display: block;

}

#linkimpressum{
    float:left;
    margin-left:40px;
    margin-top:20px;
}










#test2 a:hover{
    text-decoration:underline;
}



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

    .socials{
        /*background-color: orange;*/
        margin-left: 980px;
    }

    header{
        max-width: 1180px;
        width:94%
    }
    #test2{
    }

   
    
    .bildtext{height:100px;margin-top:20px;}
    
    
    
    
    #steuerung a {
        padding: 5px 5px 5px 5px;
    }
    
    #steuerung li{
        padding: 5px 7px 5px 7px;
    }
    
    #button{
        margin-left:920px;
    }
    
    
    #copyright2{
        margin-left:500px;
    }
    
    #inhalt2{margin-left:180px;}
    
}
    #side {
    
    }

    #steuerung {
        
    }


    
    
    @media only screen and (max-width:1220px){
        #side,#test2{
            width: 1000px;
        }

        #steuerung{
            
        }
        header{
            max-width: 1000px;
        }

        .socials{
            /*background-color: orange;*/
            margin-left: 790px;
        }
    
        #copyright2{
            margin-left: 315px;
        }


    }

    
    
    
    
    
    
    

/* CSS erweitern umS MENÜ-Button und entsprechende Steuerung */
/*	Menü-Button oben rechts einblenden bei kleiner als 600px */
@media only screen and (max-width:1070px){
    
    * {
        margin-left:0;
        margin-right:0;
        box-sizing:border-box;
    }
    
    
    #header{
        max-width: 980px;
    }
    #test2{
        width: 100%;
    }
    
    #side{
        width:94%;
        margin:0 3% 0 3%;
    }
    
    #steuerung{
        width:100%;
        
    }
    
    #steuerung li{
        padding-right:0;
    }
    
    
    #inhalt{
        width:100%;
    }
    
    .bild{
        flex-basis: 47%;
    }
    
    .bildtext{height:90px;}
    
    #trennlinie{
        width:100%;
    }
    
   
    
    #inhalt0 {
    margin-top:13.5em;
    margin-left:0;
            }
    #VerIn {
        margin-top:13.5em;
        margin-left:0;
    }
    
    #inhalt1{
        width:100%;
        margin-left:0;
        padding:0 2.2em 2em 1em;
    }
    
    #inhalt4{
        width:100%;
        margin-left:0;
    }
    
    #gruppenfoto{
        max-width:500px;
        
    }
    
    #inhalt2 {
    line-height:1.2em;
    margin-top:30px;
    margin-left:0;
    float:right;
            }
    
    
    .telmob{
        text-decoration:none;
        color:#1a61c0;
        cursor:pointer;
        pointer-events:auto;
    }
    
    .telmob:hover{
        text-decoration:underline;
    }
    
    #steuerung{
        margin-top:0;
        margin-right:0;
    }
    
    
    .socials {
        /*background: red;*/
        margin-right: 30px;
        float: right;
        margin-bottom:10px;
    }
    .fab {
        margin-top: 10px;
        font-size: 60px;
        width: 50px;
        text-align: center;
        text-decoration: none;
        box-sizing: initial;
        /*margin-bottom: 50px;*/
    }
    
    
    
    #instabutton{
        width:70px;
        height:auto;
}
    
    #button{
        position:absolute;
        right:2em;
        bottom:5.5em;
        margin:0;
        padding:0;
    }
    #copyright1{
        position:absolute;
        left:2em;;
        bottom:2.7em;
        margin:0;
        padding:0;
        
    }
    
    #copyright2{
        position:absolute;
        right:8em;
        bottom:2.7em;
        margin:0;
        padding:0;
        
    }
    
    #linkimpressum{
        position:absolute;
        right:2em;
        bottom:2.7em;
        margin:0;
        padding:0;
    }
    
    
    
    
    /*	<!-- Anfang Bereich neuer Button --> */
    
    
    .menu-container {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
    
   /* <!-- Ende Bereich neuer Button --> */
    
    
    #header{
    position:fixed;
    top:0;
    width:100%;
    z-index:8;
            }
    
    
    .menue-button {
		display: block;
        /*margin-right:2em;*/
	}

	.menue-button {
		background-color: white;
		display: block;
		position: absolute;
		right: 1em;
		top: 3.6em;
		padding: 0.5em;
		color: white;
		cursor: pointer;
		text-decoration: none;
	}	

	#bereichlogo {
		width: auto;
        padding-bottom:0.2em;
	}
    
    #logo{
        width:98px;
        height:auto;
    }

	#steuerung {
		float: right;
		width: 100%;
		display: none;

	}	
    
    #steuerung a{
        padding:1em;
    }
    
	#steuerung li {
		width: 100%;
		border-bottom: 1px solid silver;
        padding:0;
	}	
    
    
    

	.menue-button:hover {
		color: black;
		background: white;
	}
    
    #gruppenfoto{
        overflow:scroll;
    }
    
    
}

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

    .socials{
        padding:0;
        margin-bottom:0;
        bottom:0;
        margin-top:95px;
        height:0px;
    }

    #copyright1{
            left:2em;
            bottom:8.5em;
            width:60%-3em;
            margin:0;
            padding:0; 
    }
    
    
    
    #copyright2{
        left:2em;
        bottom:5em;
        width:20px;
        
    
    }
    
    #button{  
    bottom:2.5em; 
        
    }
    
    #linkimpressum{
        left:2em;
        bottom:3em;
        width:20px;
        
       
        
        
    }
}

    @media only screen and (min-width:800px) and (max-width:1069px){
        
        #inhalt2{
            float:right;
            margin-top:20px;
        }
        
        #inhalt1{width:auto;max-width:530px;}
        
        #inhalt4{width:auto;max-width:530px;}
        
    }



     
    
    
    
    
    


/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */

#nav-menue:target #steuerung {
	display: block;
     -webkit-transition: all 6s ease;
    -moz-transition: all 6s ease;
    -o-transition: all 6s ease;
    -ms-transition: all 6s ease;
    transition: all 6s ease;
}
	
/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */

/* Allgemein Anweisungen */
section {
    float: left;
    width: 100%;
            }

h1, p {
    margin: 0.5em 0 0 0;
            }


@media only screen and (max-width:710px){
    .bild{
        flex-basis:97%;
        
    }
    #trennlinieproj{
        margin-bottom:35px;
    }
    
    #stellenliste{
        padding-left:0;
    }
    .menue-button{
        margin-right: 0;
    }
}

@media only screen and (max-width:550px){
    .test_blue{
        height:260px;
    }

    .socials{
        /*background: green; */
        float: left;
        margin-left: 0;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    
}

@media only screen and (max-width:400px){
    
    .test_blue{
        height:210px;
        box-sizing:border-box;
    }
  
    
    #copyright1{
            left:2em;
            bottom:9.6em;
            margin:0;
            padding:0;
        
      
        
        
    }
    
    h1{
        font-size:26px;
       
    }
    
    #copyright2{
        left:2em;
        bottom:6.1em;
        margin:0;
        padding:0;
        
    
    }
    
    #button{  
    bottom:1em;
    right:1em;
        
    }
    
    #linkimpressum{
        left:2em;
        bottom:4.1em;
        padding:0;
        margin:0;
        
        
        
       
        
        
    }
     
}

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

    .test_blue{
        height: 260px;
    }

}

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/

.background-lightbox-caption h2{
    margin-left:7px;
}


@media only screen and (min-width:770px){

.lightbox-description{
    margin-left:7px;
}

.lightbox-description p{
    margin-left:6px;
    margin-top:0;
}

.lightbox-description-with-ref{
    margin-top:21px;
}

.background-lightbox-caption h2{
       margin-left:25px;
       padding-left:16px;
       border-left:1px solid lightgrey;
       margin-top:2px;
       font-size:16px;

}

.one-liner-lightbox-title h2{
    margin-top:15px;
}

.ref-lightbox-bottom{
    color:grey;
}

.gdesc-inner{
    background-color:rgb(255, 255, 255);
    margin-top:35px;
    

    -webkit-box-shadow: 0 1px 2px rgba(154, 196, 236, 0.2), 0 0 5px rgba(154, 196, 236, 0.2) inset;
      -moz-box-shadow: 0 1px 2px rgba(154, 196, 236, 0.2), 0 0 5px rgba(154, 196, 236, 0.2) inset;
      box-shadow: 0 1px 2px rgba(154, 196, 236, 0.2), 0 0 5px rgba(154, 196, 236, 0.2) inset;

}


.background-lightbox-caption{
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(255, 255, 255, 0.2) inset;
      -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(255, 255, 255, 0.2) inset;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(255, 255, 255, 0.2) inset;
      border-radius:8px;
    padding:3px;
background-color:white;
position:absolute;

/*
original:
*/
top:0px;


/*
first try:

top:140px;
*/
width:100%;
height:65px;
left:0px;
}



.lightbox-description{
    background-color:white;
    padding:12px;
    height:120px;
    border-left:1px lightgrey solid;


}

}


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

    /*
    .gcontainer h2{
        color:rgb(0, 0, 0);
    }


    .background-lightbox-caption{
        background-color:rgba(219, 219, 219, 0.555);
        display:block;
        border-radius:10px;
        padding-left:10px;
        
    }
    .ref-lightbox{
        top:7em;
    }
    */
    
    .feuer{
        
        top:0;
    }
    .image-with-reference-lightbox{
        max-height:10%;
    }

    .white{
        color:white;
    }


    .background-lightbox-caption{
        background-color:rgba(154, 196, 236, 0.9);
        border-radius:10px;
        padding:1px 10px 2px 10px;
        top:0;
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.2) inset;
      -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.2) inset;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.2) inset;
    
        
    }
    
    .lightbox-description p{
        color:white;
    }
    
}

  .fade-out-portolio-item:hover{
      opacity:0.6;
      transition:0.5s ease;
  }

.portfolio #portfolio-flters {
    padding: 0;
    margin: 0 auto 30px auto;
    list-style: none;
    text-align: left;
    border-radius: 50px;
  }
  
  .portfolio #portfolio-flters li {
    cursor: pointer;
    display: inline-block;
    padding: 10px 20px 12px 20px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    color: grey;
    margin-bottom: 5px;
    transition: all 0.3s ease-in-out;
    border-radius: 10px;
  }
  
  .portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
    color: #1c4f7e;
    background: #9ac4ec;
  }
  
  .portfolio #portfolio-flters li:last-child {
    margin-right: 0;
  }
  
  .portfolio .portfolio-item {
    margin-bottom: 30px;
  }
  
  .portfolio .portfolio-item .portfolio-info {
    opacity: 0;
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 0;
    z-index: 3;
    transition: all ease-in-out 0.3s;
    background: rgba(255, 255, 255, 0.9);
    padding: 15px;
  }
  
  .portfolio .portfolio-item .portfolio-info h3 {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    color: #473d3a;
  }
  
  .portfolio .portfolio-item .portfolio-info p {
    color: #7f6d68;
    font-size: 14px;
    margin-bottom: 0;
  }
  
  .portfolio .portfolio-item .portfolio-info .preview-link, .portfolio .portfolio-item .portfolio-info .details-link {
    position: absolute;
    right: 40px;
    font-size: 24px;
    top: calc(50% - 18px);
    color: #635551;
  }
  
  .portfolio .portfolio-item .portfolio-info .preview-link:hover, .portfolio .portfolio-item .portfolio-info .details-link:hover {
    color: white;
  }
  
  .portfolio .portfolio-item .portfolio-info .details-link {
    right: 10px;
  }
  
  .portfolio .portfolio-item .portfolio-links {
    opacity: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 3;
    position: absolute;
    transition: all ease-in-out 0.3s;
  }
  
  .portfolio .portfolio-item .portfolio-links a {
    color: #fff;
    margin: 0 2px;
    font-size: 28px;
    display: inline-block;
    transition: 0.3s;
  }
  
  .portfolio .portfolio-item .portfolio-links a:hover {
    color: #ffa587;
  }
  
  .portfolio .portfolio-item:hover .portfolio-info {
    opacity: 1;
    bottom: 20px;
  }
  
  /*--------------------------------------------------------------
  # Portfolio Details
  --------------------------------------------------------------*/

  .portfolio-details {
    padding-top: 20px;
  }
  
  .portfolio-details .portfolio-details-slider img {
    width: 100%;
  }
  
  .portfolio-details .portfolio-details-slider .swiper-pagination {
    margin-top: 20px;
    position: relative;
  }
  
  .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #9ac4ec;
    opacity: 1;
    border: 1px solid #ff5821;
  }
  
  .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #9ac4ec;
  }
  
  .portfolio-details .portfolio-info {
    padding: 30px;
    box-shadow: 0px 0 30px rgba(71, 61, 58, 0.08);
  }
  
  .portfolio-details .portfolio-info h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
  }
  
  .portfolio-details .portfolio-info ul {
    list-style: none;
    padding: 0;
    font-size: 15px;
  }
  
  .portfolio-details .portfolio-info ul li + li {
    margin-top: 10px;
  }
  
  .portfolio-details .portfolio-description {
    padding-top: 30px;
  }
  
  .portfolio-details .portfolio-description h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  
  .portfolio-details .portfolio-description p {
    padding: 0;
  }

  #navbarMenu{

  }

  .imageholder{
      margin-left:50px;
  }
  .bg-white{
    background-color: white;
  }

  .seite{
      margin: 500px 50px 30px 30px;
  }
  .start-end{
      width:100%;
      justify-content: center;
      place-content: center;
  }
  
  #navigationsbar{
      width: 980px;
      margin-left: auto;
      margin-right: auto;
  }

  #inhalt h1{
      display: inline;

  }

  #inhalt .pagelink{
    font-weight:300;
    text-decoration:none;
    color:black;
    margin-left:1em;
    padding:0.3em 0.4em 0.3em 0.4em;
    font-size:20pt;
    
  }

  #inhalt #binde{
      margin-left:1em;
      display: inline;
      font-weight:300;
      text-decoration:none;
      color:black;
      margin-left:1em;
      padding:0.2em;
      font-size:20pt;
  }

  .distance-left{
    margin-left:30px;
}

.btn-custom-effekt{
    visibility: hidden;
    opacity: 0;
    transition: background-color 0.3s ease

}

.btn-custom-effekt2{
    visibility: visible;
    opacity: 1;
}

.btn-custom {
    margin-left:1vw;
background-color: #9ac4ec; /* hellgrau */
border:#c2c2c2 1px solid;
border-radius: 20px; /* abgerundete Ecken */
color: white; /* schwarzer Text */
transition: background-color 0.3s ease
}

.centered-karriere{
    margin-left:20vw;
    max-height:80vh;
    max-width:60vw;
    border: white solid 1px;
    background-color:white;
}

.bewerben-btn-frame{
    width:100%;
}



.bewerben-btn{
    margin:0 auto;
}

a{
    text-decoration: none;
}

  @media only screen and (max-width:540px){
        .xs-invisible{
            display:none;
        }

        .xs-fullwidth{
            width:100%;
        }

        .small-news-radius{
            border-radius: 20px 20px 0px 0px;
        }

        .xs-padding{
            padding: 20px;
            text-decoration: none;
        }

        .centered{
            max-height:80%;
            max-width:100%;
            margin-top:3vh;
            margin-left:3vw;
            margin-right:3vw;
            margin-bottom:6vh;
        }

        .distance-left{
            margin-left:0px;
        }

        .btn-custom{
            margin-left:5%;
        }

        .fab{
            margin-top:0;
        }

        #copyright1{
            bottom:7.5em;
        }
  }

  @media only screen and (min-width:541px){
      .normal-invisible{
          display:none;
      }
  }


@keyframes fadein{from{opacity:0;}to{opacity:1;}}@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}@-webkit-keyframes fadein{from{opacity:0;}to{opacity:1;}}@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}


/* Neuer Stil für den Startbereich */
.kompetenz {
    padding: 20px;
    margin: 20px 0;
    border-radius: 10px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
    transition: 0.5s;
    /*
    background: linear-gradient(to right, #eeecea, #ffffff);
    border: solid 3px transparent; 
    border-radius: 10px; 
    padding: 20px;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(to right, #eaecee, #ffffff) border-box; 
    border-image: linear-gradient(to right, #eaecee, #ffffff) 1 stretch; 
    */
}

.willkommen{
    padding: 20px;
    margin: 20px 0;
    border-radius: 10px;
    /*box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1); */
    transition: 0.5s;
    /*
    background: linear-gradient(to left, #eeecea, #ffffff);
    border: solid 3px transparent; 
    border-radius: 10px; 
    padding: 20px; 
    background: linear-gradient(white, white) padding-box, 
                linear-gradient(to left, #eaecee, #ffffff) border-box; 
    border-image: linear-gradient(to left, #eaecee, #ffffff) 1 stretch;  */
}

.willkommen:hover{
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
}

.kompetenz:hover{
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.willkommen h2, .kompetenz h2 {
    color: #1c4f7e;
    margin-bottom: 15px;
}


/* Stil für Projekt-Highlights */


.projekt-galerie {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.projekt-item {
    flex: 1 1 calc(33.333% - 20px); /* drei Spalten */
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.projekt-item img {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 10px;
}

/* Responsivität */
@media (max-width: 768px) {
    .projekt-galerie {
        flex-direction: column;
    }

    .projekt-item {
        flex: 1 1 100%; /* eine Spalte */
    }
}

@media (max-width: 992px) {
    .willkommen, .kompetenz {
        padding: 20px 10px;
    }
}

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

.text-content {
    flex: 1;
    padding-right: 20px; /* oder ein anderer Wert, je nach Bedarf */
}

.image-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-fluid {
    max-width: 100%;
    height: auto;
    border-radius:7px;
}

.weitere-projekte-link {
    text-align: center; /* Zentriert den Link */
    padding: 20px; /* Innenabstand, damit der Link nicht direkt am Rand ist */
    background-color: #9ac4ec; /* Hintergrundfarbe des Links */
}

.btn-fullwidth {
    width: calc(100% - 40px); /* 100% der Elternelementbreite minus padding */
    padding: 15px 0; /* Vertikales Padding, horizontales wird durch width kontrolliert */; /* Dunkelblau, passt zum Footer */
    color: white; /* Farbe des Textes */
    font-size: 1.2em; /* Größere Schriftart */
    border-radius: 10px; /* Leicht abgerundete Ecken */
    text-transform: uppercase; /* Großbuchstaben */
    text-decoration: none; /* Keine Unterstreichung */ /* Fettgedruckter Text */
    display: block; /* Blockelement, damit es die volle Breite einnimmt */
    transition: background-color 0.3s ease; /* Animation für den Hover-Effekt */
    margin: auto; /* Zentriert den Button horizontal, wenn er nicht seitenfüllend ist */
    border: #c2c2c2 1px solid; /* Keine Grenze */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Schatten für Tiefe */
    border-radius:0px 0px 10px 10px;
}

.btn-fullwidth:hover {
    box-shadow: 0px 4px 8px rgba(255, 255, 255, 0.2);
    text-decoration:none;
     /* Dunklere Farbe beim Darüberfahren */
     /* Größerer Schatten beim Hover */
}

.left-grey-line{
    margin-left:0px;
    border-left:lightgrey 1px solid;
    padding-left:40px;
}

.wir1{
    margin-top:60px;
    box-shadow: rgb(225, 225, 225) 0px 2px 4px;
    border-radius:10px;
    transition: 0.4s ease;
}


.wir1:hover{
    box-shadow: rgb(225, 225, 225) 0px 8px 10px;
    border-radius:10px;
}

.margin-top-title{
    margin-bottom:20px;
}

.right-margin-text{
    margin-top:35px;
    margin-right:70px;
    margin-left:45px;
    margin-bottom:35px;
}

.ueberuns-main{
    border-radius:20px;
    box-shadow: rgb(225, 225, 225) 0px 2px 4px;
    
}

.align-center {
    display: flex;
    align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung, falls gewünscht */
    height: 100%; /* Stellen Sie sicher, dass die Höhe ausreichend ist */
}

.ueberuns-pic{
    margin-right:50px;

}

.hr-between{
        border: 0; /* Entfernt die Standardgrenze */
        height: 1px; /* Dicke der Linie */
        background-color: grey; /* Farbe der Linie */
        width: 66%; /* Ein Drittel der Breite */
        margin-left: 0px; /* Linie linksbündig */
        margin-right: auto;
        margin-top:5px;
        margin-bottom:5px;
        animation-name: buildUpTrennlinie1;
        animation-duration:2s;
        margin-top:35px;
    
}

.hr-between3{
    border: 0; /* Entfernt die Standardgrenze */
    height: 1px; /* Dicke der Linie */
    background-color: grey; /* Farbe der Linie */
    width: 66%; /* Ein Drittel der Breite */
    margin-left: 0px; /* Linie linksbündig */
    margin-right: auto;
    margin-top:5px;
    margin-bottom:5px;
    animation-name: buildUpTrennlinie1;
    animation-duration:2s;
    margin-top:70px;

}

.hr-between4{
    border: 0; /* Entfernt die Standardgrenze */
    height: 1px; /* Dicke der Linie */
    background-color: grey; /* Farbe der Linie */
    width: 100%; /* Ein Drittel der Breite */
    margin-left: 0px; /* Linie linksbündig */
    margin-right: auto;
    margin-top:5px;
    margin-bottom:5px;
    animation-name: buildUpTrennlinie12;
    animation-duration:2s;
    margin-top:70px;

}

.hr-between1{
    border: 0; /* Entfernt die Standardgrenze */
    height: 1px; /* Dicke der Linie */
    background-color: grey; /* Farbe der Linie */
    width: 80%; /* Ein Drittel der Breite */
    margin-left: 0px; /* Linie linksbündig */
    margin-right: auto;
    margin-top:5px;
    margin-bottom:5px;
    animation-duration:2s;
    margin-top:50px;

}

.hr-effekt{
    animation-name: buildUpTrennlinie11;
}

.hr-between-right{
    border: 0; /* Entfernt die Standardgrenze */
    height: 1px; /* Dicke der Linie */
    background-color: grey; /* Farbe der Linie */
    width: 66%; /* Ein Drittel der Breite */
    margin-left: auto; /* Linie linksbündig */
    margin-right: 0px;
    margin-top:0px;
    margin-bottom:5px;
    animation-name: buildUpTrennlinie1;
    animation-duration:2s;
    margin-top:35px;
    margin-bottom:35px;

}

.hr-between-right3{
    border: 0; /* Entfernt die Standardgrenze */
    height: 1px; /* Dicke der Linie */
    background-color: grey; /* Farbe der Linie */
    width: 66%; /* Ein Drittel der Breite */
    margin-left: auto; /* Linie linksbündig */
    margin-right: 0px;
    margin-top:0px;
    margin-bottom:5px;
    animation-name: buildUpTrennlinie1;
    animation-duration:2s;
    margin-top:60px;
    margin-bottom:40px;

}

.hr-between-right2{
    border: 0; /* Entfernt die Standardgrenze */
    height: 1px; /* Dicke der Linie */
    background-color: grey; /* Farbe der Linie */
    width: 80%; /* Ein Drittel der Breite */
    margin-left: auto; /* Linie linksbündig */
    margin-right: 0px;
    margin-top:0px;
    margin-bottom:5px;
    animation-duration:2s;
    margin-top:50px;
    margin-bottom:60px;

}

@keyframes buildUpTrennlinie1{
    0% {
        width:0%;
    }
    100%{
        width:66%;
    }
}

@keyframes buildUpTrennlinie12{
    0% {
        width:0%;
    }
    100%{
        width:100%;
    }
}

@keyframes buildUpTrennlinie11{
    0% {
        width:0%;
    }
    100%{
        width:80%;
    }
}

@keyframes buildUpTrennlinie2{
    0% {
        width:0%;
    }
    100%{
        width:33%;
    }
}

@keyframes buildUpTrennlinie3{
    0% {
        width:0%;
    }
    100%{
        width:100%;
    }
}

.custom-hr {
    border: 0; /* Entfernt die Standardgrenze */
    height: 1px; /* Dicke der Linie */
    background-color: grey; /* Farbe der Linie */
    width: 66%; /* Ein Drittel der Breite */
    margin-left: 45px; /* Linie linksbündig */
    margin-right: auto;
    margin-top:5px;
    margin-bottom:5px;
    animation-name: buildUpTrennlinie1;
    animation-duration:2s;
}

.custom-hr2 {
    border: 0; /* Entfernt die Standardgrenze */
    height: 1px; /* Dicke der Linie */
    background-color: grey; /* Farbe der Linie */
    width: 33%; /* Ein Drittel der Breite */
    margin-left: 45px; /* Linie linksbündig */
    margin-right: auto;
    margin-top:5px;
    margin-bottom:5px;
    animation-name: buildUpTrennlinie2;
    animation-duration:2s;
}

.custom-hr3 {
    border: 0; /* Entfernt die Standardgrenze */
    height: 1px; /* Dicke der Linie */
    background-color: grey; /* Farbe der Linie */
    width: 33%; /* Ein Drittel der Breite */ /* Linie linksbündig */
    margin-right: auto;
    margin-bottom:20px;
    animation-name: buildUpTrennlinie2;
    animation-duration:ss;
}

.mitarbeiter{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #333;
    font-size:20pt;
}

.karriere-shadow{
    border-radius:20px;
    box-shadow: rgb(225, 225, 225) 0px 4px 8px;
    padding-top:50px;
    padding-bottom:50px;
    padding-left:20px;
    padding-right:20px;
    margin-bottom:20px;
    margin-top:0px;
}

.willkommen-text{
    padding-left:20px;
    padding-right:30px;
    padding-top:5px;
    padding-bottom:5px;
}

.projekt-highlight{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #333;
    font-size:13pt;
    padding-left:4px;
    padding-right:6px;
}

.mitarbeiter1{
    margin-left:46px;
}

.gslide-image img{
    border-radius:15px 15px 0px 0px;
}

.mitarbeiter-text{
    margin-top:23px;
}

.right-margin2{
    margin-right:75px;
    margin-bottom:35px;

}

@keyframes revealFromBottom {
    from {
        clip-path: inset(100% 0 0 0); /* Beginnt unsichtbar, da das Bild vollständig von unten abgeschnitten ist */
    }
    to {
        clip-path: inset(0 0 0 0); /* Endet voll sichtbar, ohne Abschneiden */
    }
}

.reveal-from-bottom {
    animation: revealFromBottom 2s ease-out forwards; /* Animation: Name, Dauer, Art, Füllmodus */
    /* Stellen Sie sicher, dass das Bild anfangs unsichtbar ist, falls die Animation verzögert startet */
    clip-path: inset(100% 0 0 0);
}

@keyframes fadeIn10 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in-letter {
    display: inline-block; /* Ermöglicht die individuelle Animation */
    opacity: 0; /* Startet unsichtbar */
    animation: fadeIn10 0.3s ease forwards; /* Passt die Dauer nach Bedarf an */
}

.fade-in-letter1 {
    display: inline-block; /* Ermöglicht die individuelle Animation */
    opacity: 0; /* Startet unsichtbar */
    animation: fadeIn10 0.2s ease forwards; /* Passt die Dauer nach Bedarf an */
}

.karriere-content-box{
        margin-top:35px;
        box-shadow: rgb(225, 225, 225) 0px 4px 8px;
        border-radius:10px;
        padding-top:30px;
        padding-left:40px;
        padding-bottom:30px;
        padding-right:40px;
    
}

.karriere-bild{
    border-radius:15px;
}

/* Stellt sicher, dass der Flex-Container die volle Höhe seiner Eltern hat */
.karriere-text-wrapper {
    display: flex;
    align-items: center;
}

.projekte-schrift{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    padding-top:5px;
    font-size:17px;
    padding-left:7px;
}

.filter{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

.suchen-text{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color:grey;
    font-size:20pt;
    text-align:left;
    margin-bottom:0;
    width:15%;
    padding-left:0;
    margin-left:0;
}

.bildtext1 h3{
    border-left: 1px solid lightgrey;
    width:90%;
    padding-left:14px;
    font-size:0.9em;
}

.bildtext2{
    border-left: 1px solid lightgrey;
    padding-left:14px;
    width:100%;
}

.bildtext1{
    width:100%;
}

.mitarbeiterbild-container{
    position:relative;
}

.mitarbeiterbild{
    position:absolute;
    bottom:0;
    margin-left:35px;
}

@media only screen and (max-width:768px){
    .karrierebox{
        padding-right:22px;
        padding-left:30px;
        border-left: 0px white solid;
    }

    .mitarbeiterbild-container{
        position:static;
    }
    
    .mitarbeiterbild{
        position:relative;
        margin:0 auto;
        height:100px;
    }

    .kompetenz-content {
        flex-direction: column; /* Ändert die Ausrichtung der Flex-Items von nebeneinander zu untereinander */
    }
    
    .text-content, .image-content {
        width: 100%; /* Stellt sicher, dass sowohl der Text als auch das Bild die volle Containerbreite einnehmen */
    }

    .image-content {
        order: 2; /* Optional: Stellt sicher, dass das Bild unter dem Text angezeigt wird, falls es im HTML vor dem Text steht */
        margin-top: 20px;
        margin-bottom:20px; /* Fügt einen Abstand zwischen Text und Bild ein */
    }



}

@media only screen and (max-width:1220px){
    .mitarbeiterbild{
        margin-left:0;
    }
}

.live-button,
.live-button:visited {
      color: grey;           /* Textfarbe (auch für besuchte Links) */
      text-decoration: none;          /* Kein Unterstrich */
}

.live-button .icon {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid lightgrey; /* Farbe des Dreiecks, passt sich der Textfarbe an */
    margin-right: 8px;            /* Abstand zwischen Icon und Text */
  }

  .live-button {
    margin-top:10px;
    display: inline-flex;       /* Damit Text und Icon horizontal nebeneinander liegen */
    align-items: center;        /* Vertikale Zentrierung des Inhalts */
    padding: 6px 15px;         /* Innenabstand */  /* Hintergrundfarbe, kann beliebig angepasst werden */
    border: 1px solid #ccc;     /* Allgemeiner Rahmen */
    border-left: 2px solid lightgrey;/* Dünner linker Rand */
    border-radius: 8px;         /* Abgerundete Ecken */
    text-decoration: none;      /* Kein Unterstrich beim Link */
    color: lightgrey;                /* Textfarbe */
    font-family: Arial, sans-serif;
    transition: border-color 0.2s ease;
  }

  /* Optional: Hover-Effekt */
  .live-button:hover {
    border-color:#9ac4ec;
    color: #9ac4ec; 
  }

  .live-button:hover .icon {
    border-left-color: #9ac4ec; /* Icon (Dreieck) wird hellblau */
  }


  .slider-live{
    margin-top:5px;
    display: inline-flex;       /* Damit Text und Icon horizontal nebeneinander liegen */
    align-items: center;        /* Vertikale Zentrierung des Inhalts */
    padding: 1px 6px;         /* Innenabstand */  /* Hintergrundfarbe, kann beliebig angepasst werden */
    border: 1px solid #ccc;     /* Allgemeiner Rahmen */
    border-left: 2px solid lightgrey;/* Dünner linker Rand */
    border-radius: 8px;         /* Abgerundete Ecken */
    text-decoration: none;      /* Kein Unterstrich beim Link */
    color: lightgrey;                /* Textfarbe */
    font-family: Arial, sans-serif;
    transition: border-color 0.2s ease;
  }

  .slider-live .icon {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid lightgrey; /* Farbe des Dreiecks, passt sich der Textfarbe an */
    margin-right: 8px;            /* Abstand zwischen Icon und Text */
  }

  .slider-live,
.slider-live:visited {
      color: grey;           /* Textfarbe (auch für besuchte Links) */
      text-decoration: none;          /* Kein Unterstrich */
}

.slider-live:hover {
    border-color:#9ac4ec;
    color: #9ac4ec; 
  }

  .slider-live:hover .icon {
    border-left-color: #9ac4ec; /* Icon (Dreieck) wird hellblau */
  }

  .project-title-link{
    color: #1c4f7e;
    text-decoration: none;
    transition: color 0.3s ease;

  }

  .project-title-link:hover {
    color: #9ac4ec;
  }