/* Stylesheet für Selfhtml Design 11  (Webvisitenkarte)
  responsives Layout mit Grid Layout */




/* ====================================================   GLOBAL DEFINITION   ==================================================== */

/* alternatives Boxmodell */
html { 
  box-sizing: border-box; 
} 

*, ::before, ::after { 
  box-sizing: inherit; 
}


body {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(15em,1fr));
		font-family:"Tahoma";
		background-color: black;
		color: #BBBBBB;
		/*background-image: url("../img/backgroundImage2.jpg");
		background-blend-mode: screen;*/
}


@media (min-width: 45em) {
body {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(20em,1fr));
}
}

@media (min-width: 60em) {
body {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
}
}

/*
@media (min-width: 60em) {
body {
	display: grid;
	grid-template-columns: 1fr minmax(12em, 2fr);
	grid-template-rows: min-content 1fr min-content;
	grid-gap: 1em;
	min-height: 98vh;
}
}
*/

body > * {
	/*border-radius: 0 0.5em 0.5em;
	border: 1px solid;*/
	padding: 1em;
} 

header {
	grid-column: 1 / -1;   /* geht über gesamte Breite */	
	/*background: #F1F3F4;
	border-color: #d5d5d5;*/
}

header h1 {
	text-align: center;
}

header#news {
	text-align: left;
}

article, aside{
	text-align: center;
	/*border-color: #df6c20;*/
	/*display: flex;*/
}

article > *:hover, aside > *:hover {
	border: none;
	opacity: .5;
}

article img, aside img {
	width: 100%;
}


/*
@media (min-width: 31em) {
article img {
	width: 50%;
	float: right;
	margin-left: 1em;	
}
}

@media (min-width: 50em) {
article img {
	width: 40%;
	margin-top: -3em;	
}
}

@media (min-width: 60em) {
article img {
	width: 50%;
}
}

@media (min-width: 110em) {
article img {
	width: 40%;
}
}

@media (min-width: 125em) {
article img {
	width: 25%;
}
}
*/


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

footer {
	grid-column: 1 / -1;	
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/*background: #e4ebf2;
	border-color: #8a9da8;*/
}