@charset "UTF-8";

*       	{ box-sizing: border-box; }
html    	{ height: 100%; margin: 0; }
footer hr 	{ border-color: black; margin-top: 1px; margin-bottom: 1px; }
h1   		{ text-align: center; background-color: #ffffff; display: block; margin: auto; max-width: 1080px; border-radius: 10px; }
body 		{ background-color: #c0c0c0; position: absolute; height: 100%; width:100%; font-family: Arial, sans-serif;
				font-size: 14px; line-height: 1.42857143; color: #333; margin: 0;}
footer 		{ margin-top: -15px;  height: 35px; font-size:smaller; text-align: center; font-weight: bold; }
main   		{  padding: 10px;  min-height: 100%; }

.spacer-20 	{ height: 20px; }
.textsection { min-width: min(400px, 100%); margin: auto; max-width: max(600px, 70%); padding: 10px;} 

.fotocontainer { 
		background-color: yellow; 
		display:flex; flex-flow: wrap; flex-direction: row; 
		justify-content: space-around; gap:10px; 
		margin: auto; padding : 10px;  border-radius: 10px; max-width: 1080px;
	}
.fotocontainer > div { background-color: green; max-width: 20%; min-width: 150px; border-radius: 10px; border: 5px solid white; color: white;text-align: center; padding: 10px; }
.fotocontainer img { width: 100%; margin: 5px;}
.fotocontainer a { text-decoration: none; font-weight: bold; }
.link { background-color: white;  border-radius: 10px; margin: 3px auto; width: 80%;}

@media screen and (max-width: 420px) { .fotocontainer > div { max-width: 40%;}} /* 2 Elemente pro Zeile */

.greetings { display:flex; flex-direction: row; flex-wrap: wrap; margin: 10px; padding : 10px; } 
.greetingstext { width: max(60%, 400px); margin: auto; padding: 15px; } 
.greetingsimg  { background-color: white; max-width: 20%; min-width: 250px; border-radius: 10px; padding:10px; margin: auto; border: 5px solid #ccc; } 
.greetingsimg img { width: 100%; height: auto; }