/* 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; 
}

@media (min-width: 120em) {
body {
	display: grid;
	grid-template-columns: 1fr minmax(15em, 1fr);
	grid-template-rows: min-content 1fr min-content;
	grid-gap: 1em;
	min-height: 98vh;
}
.hidden-big {
	display: none;
}
}

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 * {
	text-align: center;
}

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



article img {
	width: 100%;
}



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

article img {
	width: 50%;
/*	float: right; */
	margin-left: 1em;	
}
}

@media (min-width: 50em) {
article img {
	width: 40%;
/*	margin-top: -3em; */	
}	
	
	.zweispaltig>div {
		display: grid;
		grid-template-columns: 2fr minmax(100px, 300px);
		grid-template-rows: min-content 1fr min-content;
		grid-gap: 1em;
		
	}
}

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

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

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

#kontakt{
	/* background: #ebf5d7;
	border-color: #8db243;	*/
}

#kontakt img {
	width: 8em;
}

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

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

.kleiner {
  font-size: 80%;
}
body {
	background: #ffe994;
	color:#2a6099;
	font-family: Chilanka, sans-serif;
	text-align: center;
	font-size: 150%;
}
#foto {
	max-height: 11vw;
	max-width: 11vw;
	min-height: 200px;
	min-width: 200px;
	}
	
h1.kleiner {
	font-size: 90%
}
ul {
    display: inline-block;
  	text-align: left;
}

.flyer {
	color: #004aad;
	}
	
.flyer > h3::before {

    content: ' ';
	  background-color: #0097b2;
    display: inline-block;
    height: 3em;
    position: relative;
    left: 2.075em;
    bottom: 0.94em; 
    width: 3em;
    border-radius: 3em;
    z-index: -1;
}
.flyer > h3:nth-of-type(2)::before {
	  background-color: #0cc0df; 
}
.flyer > h3:nth-of-type(3)::before {
	  background-color: #5ce1e6; 
}

.flyer > h3:nth-child(1) {
   margin-bottom: unset; margin-top: 1em; margin-bottom: unset;
}

.flyer h3 {
	margin-bottom: unset;
	margin-top: 2em;
	margin-bottom: -1em;
}

abbr, del[title] {
  cursor: help;
}

span[title] {
  cursor: help;
  text-decoration: underline dotted;
}

span.email {
white-space: nowrap;
}