html { 
  box-sizing: border-box; 
} 
*, ::before, ::after { 
  box-sizing: inherit; 
}
/* --- Mobile First Grid --- */
body { 
	/*display: -ms-grid;*/
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 10em 3em 1fr 6em;
    grid-gap: 0.3em;
	min-height: 100vh;
	max-width: 65em;
	margin: 0 auto;
	margin: 0 auto;
	padding: 0.3em;
	color: grey;
	font-family: normal Tahoma, Arial, sans-serif;  
	background-color: #f9f9f9;
	}

/* Smartphone hover optimieren */
a {
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 -webkit-tap-highlight-color: transparent;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
  user-select: none;
}
address a {color: #779911;}

a[href^="tel"] { white-space: nowrap; }

header {
	grid-column-start:1; 
	grid-column-end:2; 
	grid-row-start:1; 
	grid-row-end:2; 
	background: #7a2535;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	min-height: 100px;
	height: 130px;
}

header .logo-img { 
	width: 6em;
   padding: 15px;
}

header .logo-text { 
	float: right;
	text-align: right;
	font-size: 1.2em;
	color: white;
	margin-top: -70px;
	margin-right: 10px;
}

nav { 
	grid-column-start:1; 
	grid-column-end:2; 
	grid-row-start:2; 
	grid-row-end:3; 
	text-align: right;
	font-size: 130%;
	}
article { 
	grid-column-start:1; 
	grid-column-end:2; 
	grid-row-start:2; 
	grid-row-end:4;
	padding: 0 0.7em 0 0.7em;
	margin-top: 20px;
}

footer {
	grid-column-start:1; 
	grid-column-end:2; 
	grid-row-start:4; 
	grid-row-end:5;
	text-align: center;
	padding-top: 3em;
	padding-bottom: 2em; 
}

/* *** Mobile First *** */
/* Menu f. kleine Vieports */
label {
	font-weight:bold; 
	padding: 0.5em;
	border: 1px solid grey;
	position: absolute;
	top: 9em;
	cursor: pointer;
	color: grey; 
	}
label:hover {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}			
input { display: none; }

.menu { 
	margin: 0 auto;
	display: block;
	margin-left: -0.4em;
	margin-right: -0.4em;
	}
.menu .flex-container-menu { 
	display: flex;
	flex-direction: column; 
	flex-wrap: wrap;
	}
.menu .flex-container-menu {
    display: none; /* Smartphone Menu items ausblenden, wenn Seite neu geladen wird */
	}
.flex-container-menu {
	display:none; /* Vertikales Menu ausblenden */
	}
.flex-item-menu a {
	display: block;
	text-decoration: none;
	border-bottom: 1px solid grey;
	color: grey;
	padding: 1em;
	}
.flex-item-menu a[aria-current=page] {
	background-color: darkred;
	color: white;
	}
.flex-item-menu a:hover {
	background: darkred;
	color: white;
	-webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
	}
.menu #activate-nav:checked ~ .flex-container-menu {
    display: block; /* Menu items bei Touch ein- u. ausblenden */
	}

/* Größere Viewports 2 Spalten Grid z.B. PC, Notebook, 10'1 Zoll Tablet landscape  */
@media screen and (min-width: 801px) { 

header .logo-text {
	float: right;
	text-align: right;
	font-size: 2em;
	color: white;
	margin-right: 20px;
	margin-top: -85px;
}
label {display: none;}
.menu .flex-container-menu {
	display: block; /* Vertikales Menu wieder einblenden */
	}
article {
	display: flex;	
	padding: 0;
	line-height: 1.3em;
	}
.menu {
	flex-basis: 23%;
	flex-grow: 1;
	flex-shrink: 1;
	margin: 2.3em 2.6em 0 0;
	}
.article-items {
	flex-basis: 75%;
	flex-grow: 1;
	flex-shrink: 1;
	}
.menu .flex-container-menu {
	background: #f9f9f9;
	}
}

/* Allgemeine Definitionen */
address {
	font-style: normal;
	line-height: 1.5em;
	color: #7a2535;
	}
h1 {
	font-size: x-large;
	letter-spacing: 0.1em;
	color: #7a2535;
	}
h2, h3, h4, h5, h6 {
	font-size: large;
	letter-spacing: 0.1em;
	color: #7a2535;
	}
h5 {font-size: small;}
h6 a {padding-bottom: 10px;} 
article ul {list-style-type: square; line-height: 1.5em;}
article a {color: #595959;}
footer a {color: #7a2535; }
strong {font-weight: normal;}


	
/*Foto styling */	
.foto-container {
	display: flex;	
	flex-direction: row; 
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	}
div.foto-item {
	flex: 1; /* einheitliche Breite Kurzform f. grow u. shrink */
	flex-grow: 1;
	flex-shrink: 1;
	text-align: center;
	font-size: small;
	}
div.foto-item img {
	-webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    -webkit-box-shadow: 3px 3px 5px rgb(205,201,201);
    -moz-box-shadow: 3px 3px 5px rgb(205,201,201);
    box-shadow: 5px 5px 7px rgb(205,201,201);
	}
div.foto-item img:hover {	
	-webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	
	}
div.foto-item a  { 
	display: block;
	color: grey;
	margin-top: 1em;
	margin-bottom: 1em;
	}
div.foto-item a:hover  { 
	color: #779911;
	}
div.schatten {
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	padding: 5px 12px 9px 12px; 
	margin-top: 9px;
	}