@charset "UTF-8";
/* CSS Document */

.heroimg{
	width:100%;
	height:auto;
}

.logo {}

.navline {
	width:100%;
	height:85px;
	position:fixed;
	top:0px;
	background-color:#FFF;
	opacity:0.85;
	visibility: visible;
	z-index:10;
}

.navblock {
	max-width:1600px;
	height:auto;
	margin:0 auto;
	padding-top:50px;
	flex:1;
}

.navs {
 	font-family: 'Open Sans';
	font-style: normal;
 	font-weight: 400;
 	font-size:1.1em;
	letter-spacing: 1px;
	padding-right: 1.5em;
 	align-items: center;
	text-decoration:none;
	
    /* Transition */
    transition: color 0.5s ease, color 0.3s ease;
}

a.navs:hover{
	transition-duration: 100ms;
  color:#1a5f75;

}

.container {
    max-width: 1600px;
    margin: 0 auto;

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

.burger {
	width:1px;
	height:auto;
	position:fixed;
	top:-9px;
	right:20px;
	visibility:hidden;
}

.logoblock {
    width: 160px;
	height:auto; 
	padding-right:10%;
	padding-top:28px;
}
	

.logored {
	color:#a9696e;	
}

.logogreen {
	color:#1a5f75;	
}

.logoblue {
	color:#5aabcf;
}

.tipppro {
	width:100%;
	height:auto;
	visibility: visible;
}

.tippfr{
	width:120px;
	height:120px;
	border-radius: 50%;
	background-image:url("../imgs/basics/gradient2.jpg");
    background-size: cover; /* Hintergrundbild auf Containergröße skalieren */
    background-position: center; /* Hintergrundbild zentrieren */
	position:absolute;
	top:100px;
	right:40px;
	box-shadow: 4px 8px 2px rgba(0, 0, 0, 0.2); /* Schlagschatten */
	visibility:visible;
}

@media (max-width: 1600px){
}





@media (max-width: 850px){
	.navblock {
	visibility: hidden;
}	
	
	.logoblock {
    width: 120px;
	height:auto; 
	position:absolute;
	top:-15px;
	left:30px;	
}
	
.navline {
	height:55px;
	position:fixed;
	top:0px;
	background-color:#FFF;
	opacity:0.85;
	visibility: visible;
}

		.burger {
	width:25px;
	height:auto;
	position:fixed;
	top:15px;
	right:20px;
	visibility:visible;
}


}





@media (max-width: 500px){
.navline {
	height:40px;
	position:fixed;
	top:0px;
	background-color:#FFF;
	opacity:0.85;
	visibility: visible;
}
	
	.logoblock {
    width: 100px;
	height:auto; 
	position:absolute;
	top:-20px;
	left:20px;	
}	
	
  .heroimg {
    width: 100%;
    height: 300px;
    object-position: center top;
    object-fit: cover;
  }

	.burger {
	width:22px;
	height:auto;
	position:fixed;
	top:9px;
	right:20px;
	visibility:visible;
}

	.tipppro {
	width:100%;
	height:auto;
	visibility: hidden;
}
	
.tippfr{
	visibility:hidden;
}	
}






.pulsate-fwd {
	-webkit-animation: pulsate-fwd 2s ease-in-out infinite both;
	        animation: pulsate-fwd 2s ease-in-out infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-3-19 15:18:52
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation pulsate-fwd
 * ----------------------------------------
 */
@-webkit-keyframes pulsate-fwd {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes pulsate-fwd {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}



    .fade-in {
      opacity: 0;
      transform: translateY(50px);
	 transition-delay: 0.5s;	
      transition: opacity 1s ease-out, transform 1s ease-out;
    }

    /* Sobald sichtbar */
    .fade-in.visible {
     	transition-delay: 0.5s;	
		opacity: 1;
        transform: translateY(0);
    }