/****************************
 * general; for all Devices 
 ***************************/
* {
  margin: 0;
  box-sizing: border-box;	
}

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
  xx-font-size: 62.5%; 
}
  
body {
  max-width: 600px;
  margin: 15px auto;
  font-size: 1.4em/; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 120%;
  font-weight: 400;
  font-family: "Verdana", "Raleway:700,800", "Raleway", "Open Sans|", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;    /* font-family: 'Open Sans', sans-serif; */
  background-color:LightRed; 
  color: #222;  /* dunkles grau */
}
/* max-width: 492px; margin:auto; text-align:center; font-family:verdana; font-size:1.0em; font-weight:400; */
#container {
  position: relative;		
  width: auto;
  margin: 0 auto;
  xx-position: relative;
  text-align:center;
}

#titel {
  font-size: 1.0em/1.2; 
}
  
#merkmale {
  clear: both;	
  font-size: 85%; 
  font-weight: 400; 
  color: #c22; 
  margin-top: 1.0em;
}

#mmbild {
  max-width: 80px;
}

#zehn {
  width: 5.0em; 
  xxfloat: left; 
  position: absolute; 
  top: 2.0em; 
  left: 80px;
}

#fuenfzehn {
  xxwidth: 4.5em; 
  xxfloat: left; 
  position: absolute; 
  top: 2.0em; 
  left: 80px;
}
 
.vcard 1 {
  float: right;	
  font-size: 2.4em; 
  line-height: 1.2;
  font-weight: 900;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #ff4444;  
}

.vcard 2 {
  float: right;	
  font-size: 1.8em; 
  line-height: 1.2;
  font-weight: 700;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #ff4444;  
}

input { xfont-size: 14px; font-family: tahoma, verdana; }
textarea { xfont-size: 14px; font-family: tahoma, verdana; }
caption { font-weight: bold; }

p a:link {
    color: #0066CC;  /* blau */
    text-decoration: none;
}

p a:hover {
    color: #ffffff;  /* weiss */
    background-color: #FD352B;  /* schrift-rot */
}

p a:active {
    color: #FD352B;  /* schrift-rot */
}

.telbutton {
    background-color: lightgrey; /* light grey */
    border: 1px solid red;
	border-radius: 8px;
    color: black;
    padding: 6px 8px;
    text-align: center;
    text-decoration: none;
	text-align: center;
    display: inline-block;
    font-size: 0.9em;
	font-weight: 500;
    margin: 4px 2px;
    cursor: pointer;
	max-width: 240px;
}

a.button:link, a.button:visited {
    color: #000000;
    background-color: #F9FDA8;  /* #FBFD44 #FFFFCC */
    padding: 2px;
    border-width: 2px 3px 4px 3px;
    border-style: solid;
    border-color: #cccccc #000000 #000000 #cccccc;
}

/* 2px macht einen 3D-Effekt */
a.button:hover {
    color: #ffffff;
    background-color: #FD352B;  /* schrift-rot */
    padding: 2px;
    border-width: 2px 4px 3px 3px;
    border-style: solid;
    border-color: #000000 #cccccc #cccccc #000000;
}

/********************************
 * For devices larger than 360px (S4 Mini = 360 x 357)
 ********************************/
 /***
@media (max-width: 360px) {
body {
  font-size: 1.15em; // currently ems cause chrome bug misinterpreting rems on body element 
}

#container  {
  max-width: auto;
}

#merkmale {
  font-size: 1.0em; 
  font-weight: 300; 
}
}
**/

/********************************
 * For devices larger than 736px  (S6+ = 414 x 628 / 736 x 414)
 ********************************/
/* 
@media (max-width: 6736px) {
body {
  font-size: 1.4em; // currently ems cause chrome bug misinterpreting rems on body element 
}

#container  {
  max-width: 480px;  
}
#mmbild {
  max-width: 100px;
}

}
*/

/**************
 * For desktop
 **************/
@media only screen and (min-width: 640px) {
body {
  max-width: 100%;
  font-size: 1.0em/1.4;
  xx-line-height: 1.6;
  background-color: LightGoldenrodYellow; 
}
#container {
  max-width: 480px;  
}

#titel {
  font-size: 140%; 
  line-height: 120%;
}

#mmbild {
  max-width: 100px;
}

#zehn {
  position: absolute; 
  top: 2.0em; 
  left: 90px;
}

#fuenfzehn {
  position: absolute; 
  top: 2.0em; 
  left: 90px;
}
 
#merkmale {
  font-size: 110%; 
  font-weight: 500; 
  color: #111;
}

}