/*
#########################################################
SEITENELEMENTE
#########################################################
*/

.line-red{
 
  padding:0;
  margin:0;
  border:none;
  width:100%;
  height:1px;
  background-image: linear-gradient(90deg, rgba(172,1,9,0), rgba(172, 1, 9,1)), linear-gradient(270deg, rgba(172,1,9,0), rgba(172, 1, 9,1));  
  background-position: top left, top right;
  background-size: 50%, 50%;
  background-repeat: no-repeat; 
} 

.line-blue{
  padding:0;
  margin: 0;
  border:none;
  width:100%;
  height:2px;
  background-image: linear-gradient(90deg, rgba(172,1,9,0), rgba(60, 90, 110,1)), linear-gradient(270deg, rgba(172,1,9,0), rgba(60, 90, 110,1));  
  background-position: top left, top right;
  background-size: 50%, 50%;
  background-repeat: no-repeat; 
} 

/*
#########################################################
  ENDE SEITENELEMENTE
#########################################################
*/

/*
#########################################################
  Videos responsive
#########################################################
*/

.responsive-video {
	position: relative;
	padding-bottom: 56%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.responsive-video video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*
#########################################################
  ENDE Videos responsive
#########################################################
*/

/*
#########################################################
             KLAPPBOX
#########################################################
*/    
.clapp {
    position:relative;
    top:0;
    left:0;
  /*  padding-top:0.5em;*/
   
}

.clapp-header-open, .clapp-header-close{
    font-size: 1em;
    font-weight: bold;
    cursor:pointer;
    max-width:max-content;
   /* padding-left:0.5em;*/

}

.clapp-box{
    display:none;
    padding-top:1em;
    padding-left:0.2em;
    font-size: 1em;
    font-weight: normal;
    text-align: justify;
    line-height: 1.2em;;
    width:100%;
} 

.clapp-header-open:after{   
    content: "▼";     
    color: rgb(172,1,9);
    /*right:0;*/
    font-size: 1em;
    padding-left:0.8em;    
}

.clapp-header-close:after{
    content: "▲";  
    /*right:0;*/
    color: rgb(172,1,9);
    font-size: 1em;
    padding-left:0.8em;    
}

/*
#########################################################
        ENDE  KLAPPBOX
#########################################################
*/    

/*
#########################################################
             KLAPPBOX Datenschutz Bußgelder
#########################################################
*/    
.bussgeldklapp{
  flex-basis: 55%;
}
.clappd {
  position:relative;
  top:0;
  left:0;
/*  padding-top:0.5em;*/
 
}

.clappd-header-open, .clappd-header-close{
  font-size: 1em;
  font-weight: bold;
  cursor:pointer;
  max-width:max-content;
 /* padding-left:0.5em;*/

}

.clappd-box{
  display:none;
  background-color: rgb(68, 67, 67);
  padding-top:1em;
  padding-bottom:1em;
  padding-left:0.2em;
  font-size: 1em;
  font-weight: normal;
  text-align: justify;
  line-height: 1.2em;
  width:100%;
} 

.clappd-header-open:after{   
  content: "▼";     
  color: rgb(172,1,9);
  /*right:0;*/
  font-size: 1em;
  padding-left:0.8em;    
}

.clappd-header-close:after{
  content: "▲";  
  /*right:0;*/
  color: rgb(172,1,9);
  font-size: 1em;
  padding-left:0.8em;    
}

.clappd {
    position:relative;
    top:0;
    left:0;
  /*  padding-top:0.5em;*/
   
}

.clappdata-header-open, .clappdata-header-close{
    font-size: 0.8em;
    font-weight: bold;
    cursor:pointer;
    max-width:max-content;
   /* padding-left:0.5em;*/

}

.clappdata-box{
    display:none;
    padding-top:1em;
    padding-left:0.2em;
    font-size: 0.8em;
    font-weight: normal;
    text-align: justify;
    line-height: 1em;;
    width:100%;
} 

.clappdata-header-open:after{   
    content: "▼";     
    color: rgb(172,1,9);
    /*right:0;*/
    font-size: 1em;
    padding-left:0.8em;    
}

.clappdata-header-close:after{
    content: "▲";  
    /*right:0;*/
    color: rgb(172,1,9);
    font-size: 1em;
    padding-left:0.8em;    
}

/*
#########################################################
        ENDE  KLAPPBOX
#########################################################
*/    

/*
#########################################################
        SLIDEOUTTABS eigenes css !
#########################################################
*/    
#right1, #right2, #right3 {
  border-color: rgb(172, 1, 9);
  border-width: 2px;
  width: 41em;
 
  z-index:1030;
  font-size:1em;
  padding-left:0.5em;
  background-color:rgb(255, 247, 247);
  box-shadow: -4px 8px 10px 0px rgba(0,0,0,0.7), 0px 0px 0px 0px rgba(0,0,0,0.5);  
  color: var(--ddsbackred);
}

#right1 .handle, #right2 .handle, #right3 .handle {  
  background-color: rgb(172, 1, 9);
  background-color: rgb(41, 104, 126);  
  background-color: rgb(60, 90, 110);
  background-color: rgb(130, 5, 10); 
  color:rgb(250,245,230);  
  box-shadow: -4px -4px 10px 0px rgba(0,0,0,0.7), 0px 0px 0px 0px rgba(0,0,0,0.5);
  z-index:1045;
  width:6.2em;
  text-align: center;
  padding-bottom:1.2em;
  padding-top:1em;
  font-weight:620;
}

#right1{
  z-index:1040;
 
}
#right2{
  z-index:1039;
  width:43em
}
#right3{  
  width:45em
}

.test{
  background-color: rgb(60, 90, 110); color:rgb(250,245,245); padding:2em; margin-top: 5em; width:70%; height: 4em;
}
#right2 .handle{
  margin-top:6.2em; 
 
}
#right3 .handle{
 margin-top:12.4em;
}

#top {
  border-color: var(--ddsrot);
  background-color:rgba(255, 252, 247,0.95);;
  border-width: 1px;
  width: auto;
  max-width: min-content;
  text-align:center;
  z-index:30;
  margin-left:0px;
  color: var(--ddsbackred);
}
#top .handle {
  padding-left:0px;
  z-index:29;
 /* padding-top: 5px;*/
}

@media only screen and (max-width: 640px) {
  #top .handle {
    margin-left:-8px;
   
  }
}
/**** NEWS ****/
.newstick {
  border: 1px solid rgb(172, 1, 9);
  margin-top: 10px;
  border-radius: 5px;
  width: 38em;
  /*height: 12em;*/
  -webkit-box-shadow: inset 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
  }
  .newstick ul {
  padding: 0;
  }

  .newstick  li {
  padding: 10px 10px 10px 10px;
  /*height: 10em;*/
  font-size:0.9em;
  text-align:justify;
  /*border-bottom: 1px solid #FF3333;*/
  border-radius: 10px;
  list-style-type: none;
  margin: 0;
  }
  .et-run {
  background-color: rgb(214, 207, 209);
  color: white;
  /*border: 1px solid black;*/
  }
.playpause{
 /* transform-origin: 100% 0%;*/
    transform: rotate(-90deg); 
}  
.secondnews{
  background-color:var(--ddsgelb);
  z-index:50;
  
}

.soft>li{
  line-height:0.5em;
}

.noshow{
  display:none;
}

.letterselect-left{
  margin-left:7em;
}
.letterselect-right{
  margin-left:3em;
}

@media only screen and (max-width: 640px) {
  .newstick {
    width:auto;
  } 
  .newstick  li {
    padding: 5px 5px 5px 5px;
  }

  .letterselect-left{
    margin-left:2em;
  }
  .letterselect-right{
    margin-left:2em;
  }
  .secondnews{
    
    padding-bottom:6em;
  }
  .bussgeldklapp{
    flex-basis: 99%;
  }
  
}

/*****ENDE NEWS******/

/************ iframe google map ***********/
.maps-google {
  background-image: url("../images/pic_roadtodds_s.webp");
  background-position: bottom ;  
  background-size:contain; 
  background-repeat: no-repeat; 
  width: 90%;
  height:100%;
  margin-left:auto;
  margin-right:auto;
  /*box-shadow: 0px 13px 14px 0px rgba(50, 50, 50, 0.81);*/
  }
  .maps-google {
  position: relative;
  padding-bottom: 64.25%;
  padding-top: 5em;
  height: 0;
  overflow: hidden;
 
  } 
  .maps-google iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:none;
  }

  .maptext{
    position:static;
    padding: 0em 0em;
    font-size: smaller;
    margin-top:-40px;
   /* color: rgba(54, 45, 45, 1);
    background-color: rgba(250, 245, 245, 0.2);*/
  }
  .maptext p{
    width: 100%;
   
    text-align: justify;
  }

  .mapbutton{
    position:absolute;
    padding:0.3em;
    bottom:0;
    background-color: rgba(223, 203, 203, 1);
  }


@media only screen and (max-width: 640px) {
  .maptext{
    position:static;
    max-width: max-content;
    margin-top:-1px;
    padding:0.2em;    
    color: var(--ddsbackred);
  }
 

  .maptext p{
    width:95%;
    color: var(--ddsbackred);
    text-align: justify;
  }
  .mapbutton{
    position:absolute;
    padding:1em 0.3em 0.3em 0.3em;   
    bottom:0;
    color: rgba(254, 245, 245, 1);
    background-color: rgba(54, 45, 45, 0.5);
   
  }
 
  .maps-google{
    background-color: rgba(221, 231, 233, 1);
    width: 100%;
  }
}  

/************ ENDE iframe google map ***********/

/************ Vergrößern von Bilder bei mousover ***********/

.gallery { 
  position: relative; 
}
.gallery img {
  position: absolute;
  top:0; left:0;
  width: auto;
  height: auto;
  max-height: 12em;
}

.gallery img:nth-child(2) {
  transition: all 0.25s ease-in;
}

.gallery img:nth-child(2):hover,
.gallery img:nth-child(2):focus {
  position: absolute;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
  width: auto;
  z-index: 10002;
	transform: scale(2.3);  
}


.img-row{
  display:grid;
  width:max-content;
  z-index: 590;
  text-align: center;
}

.img-lay1, .img-lay2{
  grid-column: 1;
  grid-row: 1;
  justify-items: center;
}

.img-lay2{
  z-index: 1; 
}

.gretar {
  position:relative;  
	width: auto;
	height: auto;
	max-height: 12em;
  z-index:2;
  transition: all 0.25s ease-in;
 /*transition: transform 0.3s;*/ 
/* transition-property: position;
 transition-duration: 0s; */ 
}

.gretar-hid {
  position:relative;  
	width: auto;
	height: auto;
	max-height: 12em;
  z-index:1; 
  visibility: hidden;
}

.leftfloat {
  float: left;
}
.rightfloat {
  float: right;
}
.clearfloat{
  clear: both;
}

.gretar:hover{
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
  z-index: 902;  
	transform: scale(3);   
}

@media only screen and (max-width: 1299px) and (min-width:641px) { 
  .gretar:hover{
    transform: scale(1.5);  
  }

}  
.orileft{
  transform-origin: left;
}
.oriright{
  transform-origin: right;
}




/************ ENDE Vergrößern von Bilder bei mousover ***********/