/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

.konfigurator_desktop H2 {
color: #ffffff !important;  
}

.konfigurator_desktop {
  padding: 50px 0 90px 0;
}

  .konfigurator_mobil {
    display: none;
  }

.level_kontakt_mobil {
  display: none;
}

.level_bestaetigung_overlay {
  position: absolute;
  top: -15px;
  right: -5px;
  border-radius: 50px;
  background-color: blue;
    color: #ffffff;
  display: none;
  z-index: 5000;
}

.level_bestaetigung_overlay_insert {
padding: 5px;
}

  .level_1:hover .level_bestaetigung_overlay,
  .level_2:hover .level_bestaetigung_overlay,
  .level_3:hover .level_bestaetigung_overlay,
  .level_4:hover .level_bestaetigung_overlay,
  .level_5:hover .level_bestaetigung_overlay {
    display: block;
  }

.level_bemerkung {
  width: 92%;
  max-width: 800px;
  background-color: #fcea16;
  margin: 15px 0 0 0;
}

.level_bemerkung_insert {
  padding: 15px;
}

.levelauswahl {
  float: left;
  width: 100%;
  max-width: 104px;
  border: 1px solid #ffffff;
  border-radius: 10px;
  margin: 0 5px 5px 0;
  padding: 5px 0 5px 0;
  font-size: 11px;
  text-align: center;
  color: #FFFFFF;
}

.levelauswahl_insert {
padding: 5px;
}

.konfigurator_ergebnis_iframe {
  width: 100%;
  height: 1000px;
}

.konfigurator_ergebnis_site {
  border: 1px solid #ffffff;
  color: #ffffff;
  width: 99%;
}

.konfigurator_ergebnis_site_insert {
padding: 5px 20px 20px 20px;
  
}

.konfigurator_ergebnis_site_insert H2 {
padding: 0px;
}

.konfigurator_ergebnis_site {
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
}

.konfigurator_ergebnis_site SMALL {
padding: 0 0 0 70%; 
}

.level_kontakt INPUT,
.level_kontakt_last INPUT,
.level_kontakt TEXTAREA,
.level_kontakt_last TEXTAREA
{
background-color: #FFFFFF;
  border: 0;
  width: 92%;
}

.level_kontakt {
  float: left;
  margin: 0px 25px 25px 0;
  width: 100%;
  max-width: 300px;
  border: 1px solid #ffffff;
  border-radius: 10px;
  color: #FFFFFF;
}

.level_kontakt_last {
  float: left;
  margin: 0px 0px 25px 0;
  width: 100%;
  max-width: 300px;
  border: 1px solid #ffffff;
  border-radius: 10px;
  color: #FFFFFF;
}

.level_kontakt_insert {
    padding: 0px 15px 15px 15px;
}

a.level_a {

}

a.level_a:link,
a.level_a:visited {
	color:				#ffffff;
        text-decoration:          none;
}

a.level_a:hover,
a.level_a:focus,
a.level_a:active {
text-decoration:          none;
}

a.level_button_a {
font-weight: bold;
}

a.level_button_a:link,
a.level_button_a:visited {
	color:				#ffffff;
        text-decoration:          none;
}

a.level_button_a:hover,
a.level_button_a:focus,
a.level_button_a:active {
text-decoration:          none;
}

.level_row {
  width: 100%;
  max-width: 635px;
}

.level_prozent_overlay {
  position: absolute;
  top: -15px;
  left: -5px;
  border-radius: 50px;
  background-color: #f39200;
    color: #000000;
  font-size: 10px;
}

.level_prozent_overlay_insert {
padding: 5px;
}

.level_preis_overlay {
  position: absolute;
  top: -15px;
  right: -5px;
  border-radius: 50px;
  background-color: #fbea1d;
    color: #000000;
}

.level_preis_overlay_insert {
padding: 5px;
}

.level_uberflieger {
  float: left;
    width: 100%;
  max-width: 200px;
    margin: 0 25px 25px 0;
}

.level_1 {
  float: left;
  width: 100%;
  max-width: 143px;
  margin: 0 25px 25px 0;
  border: 1px solid #ffffff;
  border-radius: 10px;
  position: relative;
  height: 250px;
   color: #ffffff;
}

.level_2 {
  float: left;
  width: 100%;
  max-width: 300px;
  margin: 0 25px 25px 0;
  border: 1px solid #ffffff;
  border-radius: 10px;
  height: 220px;
    position: relative;
   color: #ffffff;

}

.level_3 {
  float: left;
  width: 100%;
  max-width: 199px;
  margin: 0 25px 25px 0;
  border: 1px solid #ffffff;
  border-radius: 10px;
  height: 200px;;
    position: relative;
   color: #ffffff;
}

.level_4 {
  float: left;
  width: 100%;
  max-width: 195px;
  margin: 0 25px 25px 0;
  border: 1px solid #ffffff;
  border-radius: 10px;
  height: 200px;
    position: relative;
  color: #ffffff;
}

.level_4 a { color: #ffffff; }
.level_4 a:link, .level_4 a:visited { color: #ffffff;	text-decoration: underline; }
.level_4 a:hover, .level_4 a:focus, .level_4 a:active { color: #ffffff;	 }


.level_5 {
  float: left;
  width: 100%;
  max-width: 195px;
  margin: 0 25px 25px 0;
  border: 1px solid #ffffff;
  border-radius: 10px;
  height: 170px;
    position: relative;
   color: #ffffff;
}

.level_1_insert {
  padding: 10px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.level_1_insert IMG {
  width: 100%;
}

.level_2_insert {
  padding: 15px;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}

.level_3_insert {
  padding: 15px;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}

.level_4_insert {
  padding: 15px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.level_5_insert {
  padding: 15px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.level_button {
  width: 49%;
  margin: 0;
  text-align: center;
  font-size: 25px;
  float: left;

  border: 1px solid #ffffff;
}

.level_button_full {
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 25px;
  float: left;
  border: 1px solid #ffffff;
  border-radius: 10px;
}

.level_button_full SMALL {
  font-size: 12px;
  line-height: 1.0;
}

.level_button SMALL {
  font-size: 12px;
  line-height: 0.7;
}

.level_button_insert {
  padding: 15px;
  line-height: 1.0;
}

.spalte_konfi_1 {
  float: left;
  width: 100%;
  max-width: 680px; 
}

.spalte_konfi_2 {
  float: left;
  width: 100%;
  max-width: 275px; 
}

.konfigurator_ergebnis_iframe {
  width: 100%;
  height: 1000px;
}

.konfigurator_ergebnis_site {
  border: 1px solid #ffffff;
  border-radius: 10px;
  color: #ffffff;
  width: 99%;
}

.konfigurator_ergebnis_site_insert {
padding: 5px 20px 20px 20px;
  
}

.konfigurator_ergebnis_site_insert H2 {
padding: 0px;
}

.level_preis {
  border-top: 3px solid #FFFFFF;
  width: 100%;

}

.level_preis_insert {
  padding: 10px 20px 20px 20px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}


[data-tooltip] {
  position: relative;
  z-index: 5001;
  cursor: pointer;
	white-space: pre-line;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 100%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 20px;
  width: 300px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 10%, 1.0);
  color: #fff;
  content: attr(data-tooltip);
  text-align: left;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}