* {
			margin: 0;
			padding: 0;
		}
		
		html, body {
			height: 90%;
			margin: 0;
			background-color: #fcefd9; /* Optional: Hintergrundfarbe */
			display: flex;
			flex-direction:column;
			justify-content: center;
			align-items: center;
		}
		
		p{
			font-family: Helvetica, Sans-serif, Arial;
		}
		
		.header {
			width: 100%;
			height: 150px;
			padding-top: 30px;
			display: flex;
			justify-content: center !important;
			align-items: center;
		}
		.main {
			width: 80%;
			max-width: 80%;
			max-height: 80%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.footer {
			width: 100%;
			height: 150px;
			padding-top: 50px;
			display: flex;
			justify-content : space-between;
			align-items: center;
			position: fixed;
			right: 0;
			bottom: 0;
		}
		
		.footer_left{
			padding-left: 50px;
		}
		
		.footer_right{
			position: fixed; /* bleibt beim Scrollen an der Ecke */
			right: 0; /* rechte Seite */
			bottom: -120px; /* untere Seite */
			width: 350px; /* sichtbarer Bereich der Box */
			height: 200px; /* sichtbarer Bereich der Box */
			overflow: hidden; /* versteckt den Rest des Bilder-Inhalts */			
		}
				
		.footer_right img {
			width: 576px; /* Bild größer als der sichtbare Bereich */
			height: auto;
			display: block;
			transform: translate(0, 0); /* optional, für Feineinstellungen */
		}

		.mainlogo {
			max-width: 80%;
			max-height: 80%;
		}
		
		.footer_logo{
			height: 100px;
		}

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

	body{
		padding: 0 20px;
		justify-content: space-around;
	}
	
	.header{
		height: 50px;
	}
	
	.header p{
		text-align: center;
	}
	
	.main {
		width: 100%;
		max-width: 100%;
		max-height: 100%;
	}

	.footer{
		height: 50px;
		padding-bottom: 20px;
	}
	.footer_left { 
		width: 50%;
		padding-left: 5px;
	} 

	.footer_middle { 
		width: 100%;
		display: none;
	} 

	.footer_right { 
		width: 50%; /* kleinere Box */ 
		right: -65px;
		bottom: -160px;
	} 
	
	.footer_right img { 
		width: 150px; /* Bild bleibt größer als Box, bleibt sichtbar, aber angepasst */ 
	} 
	
	.footer_logo{
		height: 50px;
	}

	.mainlogo {
    max-width: 97%;
    max-height: 97%;
	}
	
}

@media only screen and (max-width: 760px) and (orientation : landscape) { 

	body{
		padding: 0 20px;
		justify-content: space-around;
	}
	
	.header{
		height: 50px;
		padding-top: 10px;
	}
	
	.header p{
		text-align: center;
	}
	
	.main {
		width: 80%;
		max-width: 80%;
		max-height: 80%;
	}

	.footer{
		height: 50px;
		padding-bottom: 20px;
	}
	.footer_left { 
		width: 50%;
		padding-left: 25px;
	} 

	.footer_middle { 
		width: 100%;
		display: none;
	} 

	.footer_right { 
		width: 50%; /* kleinere Box */ 
		right: -105px;
		bottom: -140px;
	} 
	
	.footer_right img { 
		width: 300px; /* Bild bleibt größer als Box, bleibt sichtbar, aber angepasst */ 
	} 
	
	.footer_logo{
		height: 50px;
	}

	.mainlogo {
    max-width: 97%;
    max-height: 97%;
	}
	
}