#verbreitung { margin-top: 10px; padding-bottom: 20px; min-height: 400px; border-bottom: 1px solid #ccc; }
#verbreitung .form { position: relative; }
#verbreitung .form .info { display: inline-block; position: relative; }
#verbreitung .wahlsel, #verbreitung .wahl { position: absolute; left: 0; top: 0; }
#verbreitung .wahl { padding-bottom: 5px; background-color: #ffffff; }
#verbreitung .form button { padding: 0; margin: 0; border: none; }

#verbreitung .substance { position: absolute; top: 0; left: 80px;	z-index: 20; opacity: 0; }
#verbreitung .substance span { display: inline-block; }
#verbreitung .substance span:hover { cursor: pointer; }

#verbreitung .zeitraum { position: absolute; top: 0; left: 165px;	z-index: 20; opacity: 0; }
#verbreitung .zeitraum span { display: inline-block; }
#verbreitung .zeitraum span:hover { cursor: pointer; }

#verbreitung .altersgruppe { position: absolute; top: 0; left: 250px;	z-index: 20; opacity: 0; }
#verbreitung .altersgruppe span { display: inline-block; }
#verbreitung .altersgruppe span:hover { cursor: pointer; }

#verbreitung .geschlecht { position: absolute; top: 0; left: 335px;	z-index: 20; opacity: 0; }
#verbreitung .geschlecht span { display: inline-block; }
#verbreitung .geschlecht span:hover { cursor: pointer; }

#verbreitung .schaetzung .schaetz {
	display: inline-block;
	position: absolute;
	z-index: 10;
	width: 419px;
	height: 83px;
    margin-left: 10px;
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
#verbreitung .schaetzung .schaetz span {
	margin-top: 30px;
	margin-left: 10px;
	display: inline-block;
	font-size: 1.2em;
}
#verbreitung .schaetzung .schaetz span.disabled { color: #ccc; }
#verbreitung .schaetzung .schaetz span span {
	font-size: 1.4em;
	margin: 0;
	display: inline;
}
#verbreitung .schaetzung .schaetz #choose {
	border: 1px solid #000;
	width: 70px;
	padding: 2px;
	font-size: 1.4em;
}
#verbreitung .schaetzung .schaetz #choose:disabled { background-color: #eee; color: #000; }
#verbreitung .schaetzung .info { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; height: 81px; width: 81px; }
#verbreitung .schaetzung .info.off { border-bottom: none; }
#verbreitung .schaetzung .info .inaktiv { display: inline-block; position: absolute; }
#verbreitung .schaetzung .info .aktiv { display: inline-block; position: absolute; }

#verbreitung .schaetzung .retinfo {
  margin-top: 5px;
	left: 450px;
	position: absolute;
}
#verbreitung .schaetzung .retinfo img {
	display: none;
	right: 0;
	position: absolute;
}
#verbreitung .wertung { display: none; }
#verbreitung .wertung .ergebnisbutton {
	border-bottom: 1px solid #ccc;
	display: inline-block;
	min-height: 78px;
	width: 80px;
}
#verbreitung .wertung .ergebnisbutton:hover { cursor: pointer; }

#verbreitung .wertung .ergebnisbutton span img { height: 80px; width: 80px; }
#verbreitung .wertung .ergebnisbutton .inaktiv { display: inline-block; position: absolute; }
#verbreitung .wertung .ergebnisbutton .aktiv { display: inline-block; position: absolute; }
#verbreitung .wertung .ergebnisbutton .butaktiv { display: inline-block; position: absolute; }
#verbreitung .wertung #infotext {
	display: inline-block;
	position: absolute;
	width: 419px;
	margin-top: -2px;
	min-height: 80px;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	left: 80px;
	hyphens: auto;
	padding-bottom: 3px;
}
#verbreitung .wertung #infotext span {
	margin: 10px;
	display: inline-block;
	font-size: 1.1em;
}

#verbreitung #persons {
	display: inline-block;
	width: 499px;
	height: 499px;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin-top: -2px;
}
#verbreitung #persons:hover { cursor: pointer; }
#verbreitung .hidemy { display: none; }

#verbreitung .sr-onlyarea select:focus {
  position: relative;
  width: auto;
  height: 28px;
  clip: unset;
  z-index: 10;
  padding: 0 10px;
  margin: 5px 0;
}
#verbreitung .sr-onlyarea select:focus + label {
  position: relative;
  width: auto;
  height: 28px;
  clip: unset;
  z-index: 10;
  float: left;
  padding: 0 10px 0 5px;
  margin: 5px 2px 5px 0;
  border: 2px solid #eee;
}

/* xs, sm */
@media screen and (max-width: 991px) {
#verbreitung .substance { position: relative !important; top: -80px !important; max-width: calc(100% - 80px);	 }
#verbreitung .zeitraum { position: relative !important; top: -80px !important; max-width: calc(100% - 165px); }
#verbreitung .altersgruppe { position: relative !important; top: -80px !important; max-width: calc(100% - 250px); }
#verbreitung .geschlecht { position: relative !important; top: -80px !important; max-width: calc(100% - 335px); }
#verbreitung #persons { width: 459px !important; height: 459px !important; }
#verbreitung .wertung #infotext,
#verbreitung .schaetzung .schaetz { width: 378px !important; }

#verbreitung img { width: 80px; max-width: 80px; }

}

/* xs - <479px */
@media screen and (max-width: 479px) {
#verbreitung { margin-top: 10px; padding-bottom: 20px; min-height: 300px; border-bottom: 1px solid #ccc; }

#verbreitung .substance { left: 60px; }

#verbreitung .zeitraum { left: 125px;}

#verbreitung .altersgruppe { left: 190px;}

#verbreitung .geschlecht { left: 255px;}

#verbreitung .schaetzung .schaetz {
	width: 308px;
	height: 64px;
}
#verbreitung .schaetzung .schaetz span {
	margin-top: 15px;
	margin-left: 10px;
	font-size: 1.0em;
}
#verbreitung .schaetzung .schaetz span span {
	font-size: 1.2em;
}
#verbreitung .schaetzung .schaetz #choose {
	width: 50px;
	font-size: 1.2em;
}
#verbreitung .schaetzung .info { height: 61px; width: 61px; }

#verbreitung .wertung {  }

#verbreitung .wertung .ergebnisbutton {
	min-height: 58px;
	width: 60px;
}

#verbreitung .wertung .ergebnisbutton span img { height: 60px; width: 60px; }
#verbreitung .wertung #infotext {
	width: 319px;
	margin-top: -2px;
	min-height: 60px;
	left: 61px;
}
#verbreitung .wertung #infotext span {
	margin: 10px;
	font-size: 1.0em;
}


#verbreitung img { width: 60px; max-width: 60px; }

#verbreitung .substance { position: relative !important; top: -60px !important; max-width: calc(100% - 60px);	 }
#verbreitung .zeitraum { position: relative !important; top: -60px !important;  max-width: calc(100% - 125px); }
#verbreitung .altersgruppe { position: relative !important; top: -60px !important;  max-width: calc(100% - 190px); }
#verbreitung .geschlecht { position: relative !important; top: -60px !important;  max-width: calc(100% - 255px); }
#verbreitung #persons { width: 369px !important; height: 369px !important; }
#verbreitung .wertung #infotext,
#verbreitung .schaetzung .schaetz { width: 308px !important; }

#verbreitung .schaetzung .retinfo { margin-top: 5px; left: 360px; }

}


/* xs - <399px */
@media screen and (max-width: 399px) {
#verbreitung { margin-top: 10px; padding-bottom: 20px; min-height: 275px; border-bottom: 1px solid #ccc; }

#verbreitung .substance { left: 55px; }

#verbreitung .zeitraum { left: 115px;}

#verbreitung .altersgruppe { left: 175px;}

#verbreitung .geschlecht { left: 235px;}

#verbreitung .schaetzung .schaetz {
	width: 243px;
	height: 59px;
}
#verbreitung .schaetzung .schaetz span {
	margin-top: 15px;
	margin-left: 10px;
	font-size: 0.9em;
}
#verbreitung .schaetzung .schaetz span span {
	font-size: 1.0em;
}
#verbreitung .schaetzung .schaetz #choose {
	width: 40px;
	font-size: 1.0em;
}
#verbreitung .schaetzung .info { height: 56px; width: 56px; }

#verbreitung .wertung {  }

#verbreitung .wertung .ergebnisbutton {
	min-height: 55px;
	width: 55px;
}

#verbreitung .wertung .ergebnisbutton span img { height: 55px; width: 55px; }
#verbreitung .wertung #infotext {
	width: 243px;
	margin-top: -2px;
	min-height: 55px;
	left: 56px;
}
#verbreitung .wertung #infotext span {
	margin: 10px;
	font-size: 0.9em;
}


#verbreitung img { width: 55px; max-width: 55px; }

#verbreitung .substance { position: relative !important; top: -55px !important; max-width: calc(100% - 55px);	 }
#verbreitung .zeitraum { position: relative !important; top: -55px !important;  max-width: calc(100% - 115px); }
#verbreitung .altersgruppe { position: relative !important; top: -55px !important;  max-width: calc(100% - 175px); }
#verbreitung .geschlecht { position: relative !important; top: -55px !important;  max-width: calc(100% - 235px); }
#verbreitung #persons { width: 299px !important; height: 299px !important; }
#verbreitung .wertung #infotext,
#verbreitung .schaetzung .schaetz { width: 243px !important; }

#verbreitung .schaetzung .retinfo { margin-top: 5px; left: 300px; }

}