/***************** Farben ***************

**/

/***************** GLOBAL *****************/
*{
    box-sizing:border-box;
    overflow-x:hidden;
}

html{
    font-size:16px;
    scroll-behavior: smooth;
    overflow-x:hidden;
}

body{
    margin:0;
    font-style:normal;
    overflow-x:hidden;
    position:relative;
    font-size:16.2px;
    font-family:'Urbanist', Arial, sans-serif;
    width:100vw;
    color:var(--solid);
}

/***************** GENERELLES *****************/
:root{
    --heading:#57978F;
    --solid:#021D25;
    --footer:#082F2F;
}

.rand{
    padding-left:0.5rem;
    padding-right:0.5rem;
}

a{
    text-decoration: none;
}

h1{
    color:var(--heading);
    font-size:2.2rem;
}

h2{
    color:var(--heading);
    font-size:2rem;
}

h3{
    color:var(--heading);
    font-weight:500;
    font-size:1.5rem;

}

p{
    font-size:1.3rem;
}

.rand{
    margin-left:21rem;
    margin-right:21rem;
}

.line{
    background-image: linear-gradient(180deg, rgba(17,88,88,1) 0%, rgba(17,88,88,1) 100%, rgba(17,88,88,1) 115858%);
    background-repeat: no-repeat;
    background-size: contain;
    height: 8px;
}

strong{
    font-weight:600;
}

.polygon img{
    width:10px;
    vertical-align:middle;
}

.more{
    padding-top:3rem;
    padding-bottom:3rem;
}

.more a{
    color:var(--solid);
    font-size:1.3rem;
}

/***************** HEADER *****************/
video{
    position:absolute;
    top:0;
    left:0;
    min-width:100%;
    max-height:114vh;
    z-index:-100;
}


/***************** NAVIGATIONSBAR *****************/
nav{
    background-color:#d9d9d90f;
    backdrop-filter: blur(100px);
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content: center;
    align-items:center;
    height:70px;
}
.nav-container{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-content:flex-start;
    gap:36px;
}

.nav-item img{
    width:230px;
}

.nav-item:nth-child(2){
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-content:center;
}

.nav-items > a{
    color:white;
    margin-left:1.5rem;
}



.nav-items a:nth-child(1){
    color:white;
    padding-left:0rem;
}

/***************** NAVIGATIONSBAR - VOLLES MENÜ *****************/

/***************** COVER-CONTAINER *****************/
#cover-container{
    height:100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.cover-item{
    backdrop-filter: blur(20px);
    border-radius:305px;
}
.cover-item img{
    width:555px;
    backdrop-filter: blur(100px);
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 13px;
    margin-bottom: 13px;
}

/***************** COVER-CONTAINER-ANMATION *****************/
.myDiv {
    opacity: 0; 
    transition: opacity 4s; 
    backdrop-filter: blur(20px);
    margin: 51px;
    border-radius:305px;
}
.visible {
    opacity: 1; /* DIV-Container ist sichtbar */
}
/***************** UNDERLINE ANIMATION *****************/
.underline-animation{
    position:relative;
    color:aqua;
}

.underline-animation:after{
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #6EC6D9;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.underline-animation:hover:after{
    transform: scaleX(1);
    transform-origin: bottom left;
}

/***************** Shortinfo *****************/
#shortinfo{
    height:auto;
    background-color:white;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.shortinfo-container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap:56px;
    padding-top:1rem;
    padding-bottom:1rem;
}

.inner-pic{
    height:55px;
}

.inner-pic > img{
    vertical-align: bottom;
}

.inner-text > a{
    color:black;
}
    
.inner-container{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

/***************** Leitbild *****************/
#leitbild{
    height:555px;
    overflow-y: hidden;
}
#leitbild > img{
    position:relative;
    top:-271px;
}



.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
   }

   .grid-item {
    position: relative;
   }
   .grid-item:nth-child(7) {
    grid-column: span 2;

   }
   .grid-item img {
    width: 100%;
    height: auto;
    object-fit: cover;;
   }
   
   .text {
    text-align:center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    opacity: 0;
    transition: opacity 0.3s;
    padding-left:28px;
    padding-right:28px;
    display:grid;
   }
   
   .grid-item:hover .text {
    opacity: 1;
    backdrop-filter: blur(4px);
   }

   .grid-item > .text > a{
    color:#76C7BB;
    font-weight:600;
   }

/***************** Review-Section *****************/
.review-container{
    background-color:#00364221;
    border-radius:3px;
}

.review-items{
    display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: center;
     align-items: flex-start;
     gap:5rem;
     margin-top:3rem;
     margin-bottom:2rem;
}

.star-container{
    background-color:white;
    border-radius:3px;
    width:109px;
    margin-top:0.5rem;
}

.fa{
    color:gray;
    padding-top:3px;
}

.fa:nth-child(1){
    padding-left:8px;
}

.checked{
    color:#FEBF02;
}

.review-wrapper{
    width:400px;
}

.review-beschriftung{
    padding-top:0.5rem;
    padding-bottom:0.5rem;
}

.review-item img{
    width:120px;
}


/***************** Contact-Short*****************/
#contanct-short{
    font-size:1.3rem;
}

/***************** Responsive *****************/
.responsive-bg {
    background-color:#d9d9d935;
}
#responsive h2{
    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
}

#responsive h3{
    margin-block-start: 0.2rem;
    margin-block-end: 0.2rem;
}

.responsive-container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: flex-start;
    align-content: flex-start;
}

.responsive-item img{
    width:500px;
    margin-top:2.5rem;
 
}

.responsive-item:nth-child(1){
    width:500px;
}

/***************** Das sind wir *****************/
#wir img{
    width:100%;
    height:80%;
    object-fit: cover;
}

/***************** Partner *****************/
#partner{
    padding-bottom:4rem;
}

#partner h2{
    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
}

#partner h3{
    margin-block-start: 0.2rem;
    margin-block-end: 0.2rem;
}

.partner-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;

}

.partner-item img{
    width:200px;
    padding-top:3rem;
}

.partner-item{
    flex-basis: 33.33333%;
}

/***************** Footer *****************/
footer{
    background-color:var(--footer);
    height:50vh;
}