/* 
   Maschenprobierwerkstatt, 2016
   Farben: #E61E61 (pink), #FF9DBF (rosa), #E7EAEC (hellgrau), #A4ACB1 (dunkelgrau)
   Fonts: 'Leckerli One', cursive + 'Open Sans' 400 + 600, sans serif
*/

html, body, div, span, a, img, ul, li { 
  font-size: 1em; 
  line-height: 1.6em;
  font-family: 'Open Sans', Verdana, Geneva, sans-serif; 
  color: #000000; 
  text-align: left; 
  margin: 0px; 
  padding: 0px; 
  border: 0px; 
} 


html {
  background-color: #FF9DBF;
}

body {
  margin: 0 auto;
  width: 620px;
}

.hidden {
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
  clip: rect(1px, 1px, 1px, 1px);
}


/* Allgemeinen Textauszeichnungen */
h1 {
  font-family: 'Leckerli One', cursive; 
  font-weight: normal;
  font-size: 3em;
  line-height: 1.4em;
  margin-bottom: 1.5em;
}

h2 {
  font-family: 'Open Sans', Verdana, Geneva, sans-serif; 
  font-weight: 600;
  font-size: 1.5em;
  line-height: 1.4em;
  margin: 0em 0em 1em 0em;
}

h3 {
  font-family: 'Open Sans', Verdana, Geneva, sans-serif; 
  font-weight: 600;
  font-size: 1em;
  line-height: 1.6em;
  margin: 1.4em 0em -1em 0em;
}

p {
  margin: 1em 0em 0em 0em;
}

strong {
  font-weight: 600;
}

a {
  padding: 0px 2px;
  outline: none;
  text-decoration: underline;
  background-color: transparent;
  color: #E61E61;
}

a:hover, a:active {
  background-color: #E61E61;
  color: #FFFFFF;
}

ul {
  margin: 0em 0em 0.5em 0em;
  padding-left: 1em;
  text-indent: -1em;
  list-style: none;
}

li::before {
  /*content: "♥ ";
  color: #E61E61;
  font-size: 1.2em;
  position: relative;*/
  content: url(../bilder/herz_small.svg) " ";
  position: relative;
}

li {
  margin: 0.5em 0em 0em 0em;
}


/* ----------- HEADER ----------- */

header {
  padding: 0px 10px 30px 30px;
  background-color: #E7EAEC;
  background-image: url(../bilder/strickwerk.jpg);
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}

.titel{
  height: 180px;
}


/* ----------- INHALT ----------- */

aside {
  width: 240px;
  height: 230px;
  float: right;
  margin: -100px 0px 0px 0px;
  background-image: url(../bilder/herz.svg);
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  color: #FFFFFF;
}

.highlight {
  padding: 60px 0px 0px 0px;
  margin: 0em 0em -0.5em 0em;
  font-family: 'Leckerli One', cursive; 
  font-weight: normal;
  font-size: 1.4em;
  line-height: 1.2em;
  color: #FFFFFF;
}

aside a {
  background-color: transparent;
  color: #FFFFFF;
}

aside a:hover, aside a:active {
  background-color: #FFFFFF;
  color: #E61E61;
}


#content {
  margin: 0px;
  padding: 20px 10px 20px 10px;
  background-color: #FFFFFF;
}


/* ----------- FOOTER ----------- */

footer {
  padding: 10px;
  background-color: #E61E61;
  font-size: 0.8em;
  line-height: 1.6em;
  color: #FFFFFF;
}


/* ----------- Anpassung div. Viewports ----------- */

@media (max-width: 650px) {
  body {
	margin: 0;
	width: auto;
  }
  
  header {
	padding: 0px 0px 30px 0px;
	text-align: center;
  }
  
  aside {
	margin: 0px;
  }
}


@media (max-width: 540px) {
  body {
	margin: 0;
	width: 100%;
  }
  
  header {
	text-align: center;
	background-image: none;
	padding: 0px 0px 30px 0px;
  }
  
  aside {
	width: 100%;
	float: none;
	margin: 0px;
	background-color: #E61E61;
	background-image: url(../bilder/herz_weiss.svg);
	background-size: auto 100%;
	color: #E61E61;
  }
  
  aside a {
	color: #E61E61;
  }
  
  aside a:hover, aside a:active {
	background-color: #E61E61;
	color: #FFFFFF;
  }
  
  .highlight {
	padding: 60px 0px 0px 0px;
	color: #E61E61;
  }
}