/* --- TargetGroupTeaser -----------------------------------------------------*/

.zielgruppenteaser {
	overflow-y:hidden;
}
.zielgruppenteaser-ueberschrift {
	cursor:pointer;
}
.zielgruppenteaser.collapsed .zielgruppenteaser-text > p {
	max-height:3em;
}

.zielgruppenteaser.collapsed .zielgruppenteaser-text > p:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background:    -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background:     -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background:      -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background:         linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	-webkit-transition:height 0.5s;
}

/* --- Beitragsrechner -------------------------------------------------------*/

#Modul_Beitragsrechner {
  background-color:white;
  width:100%;
}

#Modul_Beitragsrechner ::-webkit-input-placeholder { /* WebKit browsers */
    color:    transparent;
}
#Modul_Beitragsrechner :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    transparent;
   opacity:  1;
}
#Modul_Beitragsrechner ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    transparent;
   opacity:  1;
}
#Modul_Beitragsrechner :-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    transparent;
}

#Modul_Beitragsrechner{
  background-color:#fff;
  padding:0px;
  border:1px solid #ccc;
  border-radius:6px;
  float:none;
  clear:both;
  height:auto;
  overflow:hidden;
} 
@media(max-width:991px) {
    #Modul_Beitragsrechner {
        margin-left: -30px;
        margin-right: -30px;
        border-left: 0px;
        border-right: 0px;
        border-radius: 0px;
        width:auto;
    }
}

#Modul_Beitragsrechner .button-add{
  margin-bottom:15px;
}

#Modul_Beitragsrechner .beitragsrechner-header h2{
  padding:20px 15px;
  margin:0px;
}



#Modul_Beitragsrechner fieldset legend{
  display:none;
}

#Modul_Beitragsrechner ul.meta-info{
  background-color:#f1f1f1;
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;
  margin:0px;
}
#Modul_Beitragsrechner .form-content-container{
  padding-top:20px;
}

#Modul_Beitragsrechner .radio-inline{
  margin-left:5px;
}

#Modul_Beitragsrechner .content{
  padding-top:0px;
}
#Modul_Beitragsrechner .form-wrapper{
  margin-top:40px;
}

#Modul_Beitragsrechner .form-entry-container{
  margin-bottom:15px;
}

#Modul_Beitragsrechner .form-control{
  margin-bottom:3px;
}

#Modul_Beitragsrechner .button-dark{
  color:#FFF;
  width:auto;
  float:right;
  height:auto;
  padding: 8px 15px 8px 0px;
}

#Modul_Beitragsrechner .button-dark span{
  padding-left:15px;
}
#Modul_Beitragsrechner .icon-bs-formulare span{
  display: block; float: none; margin-left: 25px;
}

#Modul_Beitragsrechner .icon-bs-formulare span.glyphicon{
  display: block; float: left; margin-left: 0px; padding-top:3px;
}

#Modul_Beitragsrechner .form-footer{
  border-top:1px dashed #ccc;
  float:none;
  clear:both;
  height:auto;
  overflow:hidden;
  padding:15px 0px;  
}

#Modul_Beitragsrechner .delete .glyphicon{
  font-size:21px;
  padding-top:4px;
}
#Modul_Beitragsrechner .form-control:focus{
  box-shadow: 0 1px 1px rgba(1,1, 1, 0.075) inset, 0 0 4px rgba(1, 125, 135, 0.6);
  border-color:#bbb; 
}

#Modul_Beitragsrechner .message{
color:#a94442;
padding:3px;
}
#Modul_Beitragsrechner .control-label{
  padding-left:3px;
}
#Modul_Beitragsrechner .control-label-col{
  padding-left:18px;
}

@media(max-width:768px){

#Modul_Beitragsrechner .delete .glyphicon{
  float:right;
  padding-right:5px;
}

#Modul_Beitragsrechner .control-label-xs{
  font-weight:normal;
  font-size:0.9em;
}

#Modul_Beitragsrechner .form-entry-xs{
  padding: 15px 0px;
  border:1px solid #ccc;
  border-radius:5px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  margin-left:0px;
  margin-right:0px;
}

}



/* ------------------- 4 Fortschrittsbalken-------------------  */
    
    
    #Modul_Beitragsrechner ul.meta-info {      
      font-family: "TitilliumMedium","Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size:19px;
      list-style: none;
      padding: 0px;
      margin: 30px 0 0 0;
    }
    
    #Modul_Beitragsrechner ul.meta-info li {
      float: left;
      width: 25%;           /* bei 4 Schritten: 25%, bei 3 Schritten: 33% */
      color: #000;
      box-sizing: border-box;
      position: relative;
      clear:none;
    }
        
    #Modul_Beitragsrechner ul.meta-info > li:after {
      font-family: "Glyphicons Halflings";
      content: "\e080";
      font-size: 20px;
      line-height: 40px;
      color: #000;
      right: 15px;
      position: absolute;  
    }
    
     #Modul_Beitragsrechner ul.meta-info > li:last-child:after {
      content: '';
    }
    
    #Modul_Beitragsrechner ul.meta-info > li {      
      line-height: 40px;
      display: block;
      color: #000;
      background-color: #f6f6f6;
      border: 0px solid #bfbfbf;
      border-radius: 6px;
      padding: 0 0 0 15px;
      z-index: 0;
    }
    
      #Modul_Beitragsrechner ul.meta-info > li:first-child { 
      border-left: 0px solid #bfbfbf;
      border-right: 1px solid #bfbfbf;
      border-radius: 0 6px 6px 0;
      z-index: 4; 
    }
    
    #Modul_Beitragsrechner ul.meta-info > li:nth-child(2) { 
      border-left: 0px solid #bfbfbf;
      border-right: 1px solid #bfbfbf;
      border-radius: 0 6px 6px 0;
      z-index: 3; 
    }
    
     #Modul_Beitragsrechner ul.meta-info > li:nth-child(3) { 
      border-left: 0px solid #bfbfbf;
      border-right: 1px solid #bfbfbf;
      border-radius: 0 6px 6px 0;
      z-index: 2;  
    }
    
    #Modul_Beitragsrechner ul.meta-info > li:last-child {
      border-right: 0px solid #bfbfbf;
      border-radius: 6px 0 0 6px;
    }
    
    #Modul_Beitragsrechner ul.meta-info > li.active {
      color: #fff;
      background-color: #595959;
      border: 0px solid #595959;
      margin-left: -8px;
      padding-left: 20px;  
    }
    
    #Modul_Beitragsrechner ul.meta-info > li.active:after {      
      color: #fff;
    }    
    
     #Modul_Beitragsrechner ul.meta-info > li.active:first-child {
      color: #fff;
      background-color: #595959;
      border: 0px solid #595959;
      margin-left: 0px;
      padding-left: 10px; 
      z-index: 0; 
    }
    
 #Modul_Beitragsrechner ul.meta-info > li.active:last-child {      
      margin-left: -8px;
      margin-right: -12px;
      padding-left: 20px;
      box-sizing: content-box;
      z-index: 0;
    }          
                
        
@media (max-width: 900px) {
 
   
#Modul_Beitragsrechner ul.meta-info > li:after {     
      font-size: 17px;
      right: 10px;    
    }     
}    


@media (max-width: 767px) {

    #Modul_Beitragsrechner #step02 .delete-button-wrapper{
      float:left;
    }
    
    #Modul_Beitragsrechner .content{
      padding:0px;
    }
    
    #Modul_Beitragsrechner #step02 label.control-label{
      display:block;
    }
    
    #Modul_Beitragsrechner #step02 .input-wrapper{
      float:left;
      padding-right:0px;
      width:auto;
    }
    
    #Modul_Beitragsrechner .error-wrapper{
      float:none!important;
      clear:both;
      height:auto;
      overflow:hidden;
    }
    #Modul_Beitragsrechner .error-wrapper .message{
      margin-top:5px;
    }  

     #Modul_Beitragsrechner ul.meta-info li, ol li {
      margin-bottom: 0px;
    }
    
    #Modul_Beitragsrechner ul.meta-info {      
      font-family: "TitilliumMedium","Helvetica Neue",Helvetica,Arial,sans-serif;
      list-style: none;
      padding: 0px;
      margin: 0px;
    }
    
    #Modul_Beitragsrechner ul.meta-info li {
      float: left;
      width: 100%;
      color: #000;
      box-sizing: border-box;
      position: relative;
    }
    
    #Modul_Beitragsrechner ul.meta-info > li:after {     
      content: "";    
    }
    
     #Modul_Beitragsrechner ul.meta-info > li:last-child:after {
     content: '';
    }                 
    
    #Modul_Beitragsrechner ul.meta-info > li {      
      line-height: 40px;
      display: block;
      color: #000;
      background-color: #f6f6f6;
      border: 0px solid #bfbfbf;
      border-bottom: 1px solid #bfbfbf;
      border-radius: 0px;
      padding: 0 0 0 15px;
      z-index: 0;     
    }
    
      #Modul_Beitragsrechner ul.meta-info > li:first-child { 
      border-left: 0px solid #bfbfbf;
      border-right: 1px solid #bfbfbf;
      border-radius: 0 0px 0px 0; 
      z-index: 4;
    }
    
    #Modul_Beitragsrechner ul.meta-info > li:nth-child(2) { 
      border-left: 0px solid #bfbfbf;
      border-right: 1px solid #bfbfbf;
      border-radius: 0 0px 0px 0; 
      z-index: 3;
    }
    
     #Modul_Beitragsrechner ul.meta-info > li:nth-child(3) { 
      border-left: 0px solid #bfbfbf;
      border-right: 1px solid #bfbfbf;
      border-radius: 0 0px 0px 0;
      z-index: 2; 
    }
    
    #Modul_Beitragsrechner ul.meta-info > li:last-child {
      border-right: 0px solid #bfbfbf;
      border-radius: 0px 0 0 0px;      
    }
    
    #Modul_Beitragsrechner ul.meta-info > li.active {
      color: #fff;
      background-color: #595959;
      border: 0px solid #595959;
      margin-left: 0px;
      padding-left: 15px;       
    }
    
     #Modul_Beitragsrechner ul.meta-info > li.active:first-child {
      color: #fff;
      background-color: #595959;
      border: 0px solid #595959;
      margin-left: 0px;
      padding-left: 15px; 
      z-index: 4; 
    }
    
    #Modul_Beitragsrechner ul.meta-info > li.active:nth-child(2) {   
      z-index: 3; 
    }
    
    #Modul_Beitragsrechner ul.meta-info > li.active:nth-child(3) {   
      z-index: 2; 
    }
    
    #Modul_Beitragsrechner ul.meta-info > li.active:last-child {      
      margin-left: 0px;
      padding-left: 15px;
    }        
    
    #Modul_Beitragsrechner ul.meta-info > li.active:after {      
      color: #fff;
    } 

    #Modul_Beitragsrechner ul.meta-info > li:last-child {
      border-bottom: 0px solid #bfbfbf;
      overflow: hidden;
  }

/* Arrow-Down Stages */

#Modul_Beitragsrechner ul.meta-info > li .arrow-br:after,
#Modul_Beitragsrechner ul.meta-info > li .arrow-br:before {
  left: 90%;
  top: 100%;
  border: solid transparent;

  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;  
}

#Modul_Beitragsrechner ul.meta-info > li .arrow-br:after {
    border-top-color: #f6f6f6;
    border-left-color: transparent;
    border-width: 10px;
    margin-left: -23px;
    margin-top: 0;
  }

#Modul_Beitragsrechner ul.meta-info > li .arrow-br:before {
    border-top-color: #bfbfbf;
    border-left-color: transparent;
    border-width: 11px;
    margin-left: -24px;
    margin-top: 0;
  }

#Modul_Beitragsrechner ul.meta-info > li.active .arrow-br:after {
    border-top-color: #595959;
    border-left-color: transparent;
  }

}

#Modul_Beitragsrechner .button-dark{
  border:1px solid #017d87;
}

#Modul_Beitragsrechner .button-dark:hover,
#Modul_Beitragsrechner .button-dark:focus{
  border-color:#00555c;
}

#Modul_Beitragsrechner .form-footer .pull-left .button-icon-formulare,
#Modul_Beitragsrechner .button-delete{
  border:1px solid #505859;
  color: #505859;
  background-color:#FFF;
  
}  
#Modul_Beitragsrechner .button-delete{
padding-top:5px;
  padding-bottom:5px;
}
#Modul_Beitragsrechner .form-footer .pull-left .button-icon-formulare:hover,
#Modul_Beitragsrechner .form-footer .pull-left .button-icon-formulare:focus,
#Modul_Beitragsrechner .button-delete:hover,
#Modul_Beitragsrechner .button-delete:focus{
  background-color:#505859;
  color: #FFF;
}


#Modul_Beitragsrechner .button-add {
    background-color: #d6ebeb;
    border: 1px solid #017d87;
    color: #000;
}


#Modul_Beitragsrechner .button-add:hover,
#Modul_Beitragsrechner .button-add:focus {
    background-color: #017d87;
    border: 1px solid #017d87;
    color: #FFF;
}


#Modul_Beitragsrechner .has-error .message {
    background-color: rgb(239,229,229);
    border-radius: 7px;
    color: #a94442;
    font-family: "TitilliumRegular","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 200 !important;
    line-height: 1.2;
    padding: 10px 15px 15px 15px;
}

#Modul_Beitragsrechner .error-display{
  padding-left:0px;
}

#Modul_Beitragsrechner input.form-control{
  width:100px;
  float:left;
  margin-right:10px;
}


@media (max-width:767px){
#Modul_Beitragsrechner #step04 .form-footer .pull-right,
    #Modul_Beitragsrechner #step04 .form-footer .pull-right a{
      width:100%;
      margin-top:10px;
      float:none;
      clear:both;
    }
    
}


/** Additions LgBeitragsrechner.standard_html **/

/* Overwrite rundfunkbeitrag.css */
#Modul_Beitragsrechner .beitragsrechner-header.row {
  display:none;
}
#Modul_Beitragsrechner .button-dark {
  float:left;
}
/* Debug */
#Modul_Beitragsrechner .content .debug-hidden {
  opacity:0.5;
}
 /* The switch - the box around the slider */
#Modul_Beitragsrechner .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-left:23px;
  margin-top: 15px;
}
#Modul_Beitragsrechner .switch:before {
  position: absolute;
  content: "ja";
  left: 65px;
  bottom: 8px;
}
#Modul_Beitragsrechner .switch:after {
  position: absolute;
  content: "nein";
  left: -35px;
  bottom: 8px;
}

/* Hide default HTML checkbox */
#Modul_Beitragsrechner .switch input {display:none;}

/* The slider */
#Modul_Beitragsrechner .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

#Modul_Beitragsrechner .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

#Modul_Beitragsrechner input:checked + .slider {
  background-color: #017d87;
}

#Modul_Beitragsrechner input:focus + .slider {
  box-shadow: 0 0 1px #017d87;
}

#Modul_Beitragsrechner input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
#Modul_Beitragsrechner .slider.round {
  border-radius: 34px;
}

#Modul_Beitragsrechner .slider.round:before {
  border-radius: 50%;
}


#Modul_Beitragsrechner table,
#Modul_Beitragsrechner table th,
#Modul_Beitragsrechner table td{
  text-align:left;
}

@media(min-width:768px){
  #Modul_Beitragsrechner td.currency{
    text-align:right;
    padding-right:15px;
  }
  
  #Modul_Beitragsrechner td.currency-sum{
    padding-right:8px;                      
  }
}

#Modul_Beitragsrechner table th{
  background-color:#efefef!important;
}

#Modul_Beitragsrechner tbody tr:nth-child(odd){
  background-color:rgb(249,249,249);
}

/* 
Ergebnistabelle Mobile
*/
@media 
only screen and (max-width: 767px)  {

	/* Force table to not be like tables anymore */
	#Modul_Beitragsrechner table,
  #Modul_Beitragsrechner thead,
  #Modul_Beitragsrechner tbody,
  #Modul_Beitragsrechner th,
  #Modul_Beitragsrechner td,
  #Modul_Beitragsrechner tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	#Modul_Beitragsrechner thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
  #Modul_Beitragsrechner table { 
    border-top: 1px solid #ccc;
  }
  
	#Modul_Beitragsrechner tr { 
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc; 
  }
	
	#Modul_Beitragsrechner td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc; 
		position: relative;
    padding-left:10px;
	}
  #Modul_Beitragsrechner td:nth-of-type(2),
  #Modul_Beitragsrechner td:nth-of-type(3){
  padding-left: 50%; 
  }
  
	#Modul_Beitragsrechner td:nth-of-type(2):before,
  #Modul_Beitragsrechner td:nth-of-type(3):before{ 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 10px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
    text-align:left;
	}
  
  #Modul_Beitragsrechner td:empty{
    visibility:hidden;
    padding:0px;
    margin:0px;
  }
	
	/*
	Label the data
	*/
  #Modul_Beitragsrechner td:nth-of-type(1){font-weight:bold;}
	#Modul_Beitragsrechner td:nth-of-type(2):before { content: "Anzahl"; }
	#Modul_Beitragsrechner td:nth-of-type(3):before { content: "Euro"; }
}


/* WAT */
.optInContainer {
	transition:all 0.4s ease-in-out;
	font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	position: fixed;
	z-index:999999;
	bottom: 50px;
	left: 25px;
	right: 25px;
	opacity:0.96;
	margin:0 ;
	padding: 0 60px 0 60px;
	border:1px solid #e0e0e0;
	border-radius: 10px;
	background-color: #BBB;
}
.optInContainer a{
    color: #00555C;
    text-decoration: none;
}
.optInContainer a:hover, .optInContainer a:focus{
	text-decoration: underline;
}

@media (max-width: 767px) {
.optInContainer {
	top: 25px;
	bottom: initial;
}	

}
.optInHead{
	-padding: 0;
	margin: 40px 0 20px 0;
	color:#000;
	line-height: 26px;
}

.optInHead h3, #auswahlCookies h3{
	font-family: 'TitilliumRegular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 1.3em;
	font-weight: 500;
}

.optInHead button{
	float: right;
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1;
	margin: -30px -45px 0 0;
	border: 0;
	color:#000;
	background-color: #BBB;
	opacity: 1.0;
}

#optInTexte{
	padding: 0 0 10px 0;
	color:#000;
	line-height: 26px;
}
.optInButtons{
	border-left: 0;
	vertical-align: middle;
	text-align: right;
	margin: 0 40px 25px 0;
}

.optInButtons button{
	border-radius: 5px;
	font-size: 16px;
	margin: 0 20px 0 0;
	width: 200px;
	-height: 46px;
	padding: 6px;
	font-size: 1.5rem;
    line-height: 1.5;
    border-radius: .50rem;

}

.optInButtons button:hover {
	opacity: 0.7;
}

#Einstellungen{
	background-color: #ddd;
	border:1px solid #000;

}

#Zustimmen{
	background-color: #017d87;
	border-color: #fff;
	color: #FFFFFF;
	border:1px solid #fff;
}
#auswahlCookies h3{
	margin: 0 0 15px 0;
}
#auswahlCookies{
	-padding: 0;
	color:#000;
	line-height: 26px;
}
#auswahlCookies div span{
	font-size: 1.0em;
	font-weight: 300;
}

.optInWiderrufBtnAktiv{
	background-color: #017d87;
	border:1px solid #ccc;
	padding: 15px; 
	line-height: 20px; 
	vertical-align: middle;
	width: 210px;
	font-family: "TitilliumMedium","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 16px; 
	font-weight:400 !important;
	margin: 0px;
}
.optInWiderrufBtnAktiv:hover, .optInWiderrufBtnAktiv:focus {
    background-color: #00555C;
	color: #fff;
	text-decoration: none;
}
.optInWiderrufBtnDeaktiv{
	background-color: #888;
	border:1px solid #888;
	padding: 15px; 
	line-height: 20px; 
	vertical-align: middle;
	width: 210px !important;
	font-family: "TitilliumMedium","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 16px; 
	font-weight:400 !important;
	margin: 0px;
	cursor:not-allowed;
}
.optInWiderrufBtnDeaktiv:focus ,.optInWiderrufBtnDeaktiv:hover {
	text-decoration: none;
	background-color: #888;
	color: #fff;
	padding: 15px; 
	width: 210px !important;
	font-size: 16px; 
	font-weight:400 !important;
	margin: 0px;
	cursor:not-allowed;
    pointer-events: none;
}

#optInTexte, #auswahlCookies {

}
@media(max-width:767px)  and (orientation:portrait) {
    #optInTexte, #auswahlCookies {
		overflow-y: auto;
        max-height: 350px;
    }
}

@media(max-width:767px) and (orientation:landscape) {
    #optInTexte, #auswahlCookies {
		overflow-y: auto;
        max-height: 100px !important;
    }
}
