html { 
	height: 101%; 
}

body, html{
	
	/*markieren von text verhindern*/
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	
	margin: 0px;
	padding:0px;	

	font-family:Arial, Verdana;
	font-size:1.0em;
}

#logo {
	background-color: rgba(255, 255, 255, 1);
	border-radius:5px;
	padding:10px;
	margin-bottom:20px;
	
}

#logo img{
	min-width:280px;
	max-width:20%;
	
}

/* Language Switcher Flags*/
#language_switcher{
	
	position:absolute;
	right:100px;
	top:3em;
	
	border: 1px solid #BFBFBF;
	background-color: white;
	box-shadow: 2px 2px 2px #aaaaaa;
	
	padding:2px;
	
}

/* Hintergrund der gesamten APP*/
#header{
	
	padding:2%; /* Einrücken aller Elemente der Seiten responsiv*/
	
	background-image: url("../bilder/bg.jpg");  
	background-position: left top; 
	background-size: 100% 100%; /*Background wird gestreckt in Höhe und Breite zu 100% */ /* cover */
	/*background-repeat:repeat; */
	background-repeat: no-repeat;
	/*background-attachment: fixed;	*/ 
	
}

#main{
	
	padding:2%; /* Einrücken aller Elemente der Seiten responsiv*/
	
	/* Perspektivischen Angaben für Rotations-3D-Effekte */
	-moz-perspective: 3000px;
    -ms-perspective: 3000px;
    -webkit-perspective: 3000px;
    perspective: 3000px; 
  
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -webkit-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%; 
	
}

#footer{
			
  margin-top:30px;			
			
  display: flex;
  justify-content: center;
  align-items:center;
  
  min-height:100px; 
  background-color: #214973;

}

#footer a, #footer a:visited, #footer a:active, #footer a:link, #footer a:hover{
	
	color:#aaa;
	font-size: 0.8em;
}

/*Divs und Objekte zentrieren (keine Schrift! Für Text passiert das direkt via STYLE-Attribut im HTML-Code)*/
.zentrieren{
	
  display: flex;
  justify-content: center;
  margin: 0 auto;
  
}

.zentrieren_vertical{
	
	display: table-cell; 
	vertical-align: middle;
}

body{
	
	font-size:1.2em;
	color: #006388;
}

img{
	max-width:500px;
	border:0px;
	
}

#language_switcher img:first-child{
	margin:4px;
	
}

hr{
	width:100%;
	margin:30px 0;
	color:#aaa;
}

h3{
	

}

a{
	text-decoration:none;
	color:red;
}

.artikel{
	
	width: fit-content;
	margin-left:25px;
	float:left;
}

.artikel_pic{

    z-index:-2;
    position:relative;
	margin-top:20px;
	
	padding: 20px;
	
	border: 1px solid #BFBFBF;
	background-color: white;
	box-shadow: 2px 2px 2px #aaaaaa;
}

.button_webseite{
	
	margin-bottom:10px;
	
	width: fit-content;
	border: 1px solid #BFBFBF;
	background-color: white;
	box-shadow: 5px 5px 5px #aaaaaa;
  
	padding:10px;
	transition: 0.3s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
}

.button_webseite:hover{
	
	background-color: #006388;
	color: #fff;
}






@media only screen and (max-width: 768px) {
	
		#language_switcher{
			
			position:absolute;
			right:30px;
			top:40px;
		}

		h2{
			font-size:1.2em;
		}
		
		h3{
			font-size:1em;
		}	

		img{
			max-width:320px;
			border:0px;
			
		}		
}

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

		.artikel {
		  margin-left: 5px;
		}
				
		#language_switcher{
			
			right:20px;
			top:90px;
		}	

		h2{
			font-size:1.2em;
		}
		
		h3{
			font-size:1em;
		}	

		img{
			max-width:235px;
			border:0px;
			
		}		
}



.puff-in-center {
	-webkit-animation: puff-in-center 1.4s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
	        animation: puff-in-center 1.4s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-10-20 15:50:37
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation puff-in-center
 * ----------------------------------------
 */
@-webkit-keyframes puff-in-center {
  0% {
	 z-index:-2;
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
	 z-index:0;	  
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes puff-in-center {
  0% {
	 z-index:-2;	  
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
	 z-index:0;	  
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}