/*
 Autor: Markus Seidel : Sunny-Media : https://www.sunny-media.de : 31-10-2024
*/

/*
grün = rgba(0,162,30,1.0)
grau = rgba(153,153,153,1.0)
*/



@font-face {
  font-family: 'ubuntuitalic';
  src: url('../schriften/ubuntu-italic-webfont.woff2') format('woff2'),
       url('../schriften/ubuntu-italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ubuntulight';
  src: url('../schriften/ubuntu-light-webfont.woff2') format('woff2'),
       url('../schriften/ubuntu-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ubuntumedium';
  src: url('../schriften/ubuntu-medium-webfont.woff2') format('woff2'),
       url('../schriften/ubuntu-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ubunturegular';
  src: url('../schriften/ubuntu-regular-webfont.woff2') format('woff2'),
       url('../schriften/ubuntu-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root{
  
  --gruen: rgba(0,162,30,1.0);
  --dunkelgruen: rgba(4,110,25,1);
  --aquahell: rgba(173,202,203,.8);
  --aqua: rgba(173,202,203,1);
  --beigehell: rgb(243, 230, 198);
  --beige: rgba(255, 246, 226,.5);
  --orange: rgba(243,195,1,1);
  --grau: rgba(117,123,138,1);
  --schatten: rgba(0,0,0,.2);
}


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

img{
  max-width: 100%;
  height: auto;
}

html{
  height: 100.1%;
  scroll-behavior: smooth;
  font-family: 'ubunturegular';
  font-size: 14pt;
  hyphens: auto;
}

body{
  font-family: 'ubunturegular';
  min-height: 100vh;
  color: var(--grau);
  background: var(--aqua);
  scroll-behavior: smooth;
  hyphens: auto;
  background-image: url(../buidl_layout/background_006.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

div{
  border: 0px solid orange;
}

header.kopfleiste{
  background: var(--hintergrund);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;

}

div.kopfleiste_kinder{
  
}

.kopfleiste_kinder:nth-child(1){
  flex-basis: 17vw;
  padding: 1.0rem;
  min-width: 350px;
}

.kopfleiste_kinder:nth-child(2){
  flex-basis: 50vw;
  align-self: end;

}

.kopfleiste_kinder:nth-child(3){
  flex-basis: 20vw;
  text-align: right;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: end;
}

.logo_oben{
  filter: drop-shadow(10px 10px 6px var(--schatten)); 
  
}

.subnavikastal{
  background-color: var(--aquahell);
  padding: 1.6rem .2rem .2rem .2rem;
  margin: 0 .7rem;
  box-shadow: 3px 3px 3px var(--schatten);
  border-radius: 0 0 15px 15px;
}

.subnavikastal:hover{
  background-color: var(--aqua);
  box-shadow: -3px -3px 3px var(--schatten);
}

.subnavikastal img{
  min-width: 30px;
}




.emotion{
  border-top: 6px solid var(--aqua);
  border-bottom: 0px solid var(--aqua);
  background-image: url(../buidl_layout/background_x001.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  height: 30vh;
  padding: 1.5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.emotion > h1{
  text-shadow: 5px 5px 5px var(--schatten);
  text-align: center;
  color: var(--grau);
  font-size: 3.5rem;
  width: 29ch;
  animation: typing 3s steps(29), blink .5s step-end infinite alternate;
  animation-delay: 1.5s;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;

}

.emotion > h1 br{
  display: none;
}



@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent
  }
}













.contentfirst{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
}

.contentfirst_kinder{

}

.contentfirst_kinder:nth-child(1){
  flex-basis: 25vw;
}

.contentfirst_kinder:nth-child(2){
  flex-basis: 25vw;
}
.contentfirst_kinder:nth-child(3){
  flex-basis: 25vw;
}






.contentsecond{
  background-image: url(../buidl_layout/background_x002.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top left;
  background-attachment: fixed;

  display: flex;
  flex-direction: row;
  justify-content: center;
  
  padding: 1rem 0;
  flex-wrap: wrap;
}

.contentsecond_kinder{
  
}

.contentsecond_kinder:nth-child(1){
  flex-basis: 50vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contentsecond_kinder:nth-child(2){
  flex-basis: 30vw;
  align-content: center;
}

.contentsecond_kinder img{
  border-radius: 100%;
  border: 6px solid var(--gruen);
  box-shadow: 5px 5px 5px var(--schatten);
  filter: grayscale(.4);
  transition: 1s ease-out;
}

.contentsecond_kinder img:hover{
  filter: grayscale(0);
}

.contentsecond_kinder em{
  margin: 0 auto;
  font-size: 1.8rem;
  max-width: 70%;
  border-left: 4px solid var(--gruen);
  padding-left: 1em;
}


/* CSS Datenschutz Start */
.contentdatenschutz{
  background-color: rgba(255,255,255,.4);
  color: var(--grau);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 1rem 0;
  flex-wrap: wrap;
}

.contentdatenschutz_kinder{
  gap: 2rem;
  padding: 1rem;
}

.contentdatenschutz_kinder:nth-child(1){
  flex-basis: 45vw;
}

.contentdatenschutz_kinder:nth-child(2){
  flex-basis: 45vw;
}

.contentdatenschutz_kinder img{
  border-radius: 100%;
  border: 6px solid var(--gruen);
  box-shadow: 5px 5px 5px var(--schatten);
  filter: grayscale(.4);
  transition: 1s ease-out;
}

.contentdatenschutz_kinder img:hover{
  filter: grayscale(0);
}

.contentdatenschutz_kinder em{
  margin: 0 auto;
  font-size: 1.8rem;
  max-width: 70%;
  border-left: 4px solid var(--gruen);
  padding-left: 1em;
}

/* CSS Datenschutz Ende */



/* Impressum Start */


.contentimpressum{
  background-color: rgba(255,255,255,.4);
  color: var(--grau);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 1rem 0;
  flex-wrap: wrap;
}

.contentimpressum_kinder{
  gap: 2rem;
  padding: 1rem;
  min-width: 450px;
}

.contentimpressum_kinder:nth-child(1){
  flex-basis: 55vw;
}

.contentimpressum_kinder:nth-child(2){
  flex-basis: 35vw;
}

.contentimpressum_kinder img{
  border-radius: 100%;
  border: 6px solid var(--gruen);
  box-shadow: 5px 5px 5px var(--schatten);
  filter: grayscale(.4);
  transition: 1s ease-out;
}

.contentimpressum_kinder img:hover{
  filter: grayscale(0);
}









/* Impressum Ende */




















/* Footer Strat */

footer.fussleiste{
  padding: 2rem 0;
background: var(--hellgruen);
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}



.fussleiste_kinder{
  flex-basis: 20vw;
  min-width: 320px;
  border-left: 3px solid var(--gruen);
  padding: 1rem;
  transition: transform 1s;
  background-color: rgba(255,255,255,.4);
}

.fussleiste_kinder:hover{
  background: var(--aqua);
  transform: scale(1.2); 
  z-index: 999;
}

div.fussleiste_kinder a, a:link{
  text-decoration: none;
  display: block;
  color: var(--grau);
}

div.fussleiste_kinder a:visited{
  color: var(--grau);
}

div.fussleiste_kinder a:hover{
  text-decoration: underline;
  color: var(--gruen);
}

div.fussleiste_kinder a:focus{
  text-decoration: underline;
  color: var(--gruen);
}

.fussleiste_kinder:nth-child(1){

}

.fussleiste_kinder:nth-child(2){
  
}

.fussleiste_kinder:nth-child(3){
  
}

.fussleiste_kinder:nth-child(4){
  
}

/* Footer Ende */


h1,h2,h3,h4,h5,h6{
  color: var(--grau);
}

h1{
  font-size: 1.6rem;
  font-family: 'ubuntumedium';
  color: var(--grau);
}












/* Start Haupt-Navigation */
nav{
  height: 60px;
  
  display: flex;
  justify-content: end;
  align-items: center;
}

.links-container{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

nav a{
  font-family: 'ubuntumedium';
  border-radius: 15px 15px 0 0;
  box-shadow: -5px -5px 5px var(--schatten);
  font-size: 1.2rem;
  height: 100%;
  padding: 10px 30px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--grau);
  background: var(--aquahell);
  margin: 0 .8rem;
}

nav a:hover{
  background: var(--aqua);
  box-shadow: 5px -5px 5px var(--schatten);
}



nav svg{
  fill: var(--grau);
}

#sidebar-active{
  display: none;
}

.open-sidebar-button, .close-sidebar-button{
  
  display: none;
}


@media(max-width: 1280px){

  .links-container{
    
    flex-direction: column;
    justify-content: start;
    align-items: start;
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 10;
    width: 300px;
    background-color: var(--aqua);
    box-shadow: -5px 0 5px var(--schatten);
    transition: 1s ease-out;
  }

  nav a{
    box-sizing: border-box;
    border-radius: 0;
    box-shadow: 0;
    height: auto;
    width: 100%;
    padding: 20px 30px;
    justify-content: start;
    box-shadow: 0 0 0 var(--grau);
    margin: 0;
  }

  nav a:hover{
    border-bottom: 2px solid var(--grau);
    box-shadow: 0 0 0 var(--grau);
  }

  .open-sidebar-button, .close-sidebar-button{
    padding: 0 20px;
    display: block;
  }

#sidebar-active:checked ~ .links-container{
  right: 0;
}

#sidebar-active:checked ~ #overlay{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
}











.subnavikastal{
 border-radius: 0 0 8px 8px;
}



.kopfleiste_kinder:nth-child(1){
  order: 3;
}

.kopfleiste_kinder:nth-child(2){
  order: 2;

}

.kopfleiste_kinder:nth-child(3){
  order: 1;  
}





.emotion{
  height: 40vh;
}











.contentsecond{
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contentsecond_kinder{
min-width: 320px;
gap: 1rem;
}


.contentsecond_kinder:nth-child(1){
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.contentsecond_kinder:nth-child(2){
  max-width: 100%;
  align-content: center;
  text-align: center;
}

.contentsecond_kinder img{
  max-width: 90%;
  margin: 0 auto;
}

.contentsecond_kinder em{
  font-size: 1.4rem;
  max-width: 90%;
  border-left: 2px solid var(--gruen);
}



footer.fussleiste{
flex-direction: column;

gap: 1rem;


}

.fussleiste_kinder{
  align-self: center;  
}



.emotion > h1{
  text-shadow: 5px 5px 5px var(--schatten);
  font-size: 2.0rem;
}





.emotion > h1 br{
  display: inline-block;
}




}




/* Ende Haupt-Navigation */