/* Stylesheet
  responsives Layout mit Grid Layout */




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

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

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

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

h1 {
  margin-top: 1em;
}

h2 {
  margin-top: 2em;
}

a:link {
  color: black;
  background-color: transparent;
  text-decoration: none;
}

body > * {
	border-radius: 1em 1em 1em;
	border: 2px solid;
	padding: 1em;
	font-family: sans-serif;
} 

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

header * {
	text-align: center;
}

article {
	background: #ffede0;
	border-color: #df6c20;
}

article img {
  width: 30%;
	display: block;
}

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

#kontakt{
	background: #ffede0;
	border-color: #df6c20;	
}

#kontakt img {
	width: 30%;
	display: block;
  /**margin-left: auto;**/
}

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

footer {
	grid-column: 1 / -1;	
	display: grid;
	/**grid-template-columns: repeat(2, 1fr); **/
	background: white;
	border-color: white;
	text-align: center;
}

#currentstyle {
	font-weight: bold;
}

.button {
  background-color: white; /* Green */
  border: 2px solid black;
  margin-top: 1em;
  margin-bottom: 1em;
  border-radius: 9px;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  transition-duration: 0.4s;
}


.button:hover {
  background-color: #ebf5d7; /* Green */
  color: white;
}