.firsthead{
  display:flex;  
  align-items: center;
  width:100%;
  box-shadow: -4px 8px 10px 0px rgba(0,0,0,0.7), 0px 0px 0px 0px rgba(0,0,0,0.5);
  /*border-radius: 0.5em 0 0 2em;*/
  padding:0 0 0 0;
 /* background-image: linear-gradient(45deg, rgb(172, 1, 9) 70%, rgb(130,5,10));*/
 background-color: var(--ddsbackred);
 border-top: 1px solid var(--ddsrot);
  margin: 0 0 0 0;  
 
}
.firsthead a{
  align-self:flex-start;
  margin: 0;
  padding:0;
  margin-top:-1px;
  min-width: 0;
}

.firsthead-img{
  display:inline-flex;
  flex-basis: 23%;
  margin-left:0;
  padding:0;
}

.firsthead-img img{
  margin: 0;
  padding:0;
}

.firsthead-h{
  flex-basis: 77%;  
  /*text-align: center;
  align-items: center; */ 
 /* padding:3em 0 3em 2em;*/
  color:rgb(250,245,230);
  font-size: larger;
  padding-left:5em;
  
}


.head-in-pic-light{ 
  max-width: max-content;
 /* text-shadow: 2px 2px 10px rgba(221, 220, 220,0.5);*/ 
  text-shadow: 1px 1px 7px rgba(221, 220, 220,0.3);   
  margin-top:-3.8em;
  font-size:350%;
  color: var(--ddsrot);
  
}

.head-in-pic-dark{ 
   max-width: max-content;   
   text-shadow: 2px 2px 5px rgba(21, 20, 20,0.7);
   margin-top:-3.8em;
   font-size:350%;
   color: var(--ddsrot);
 }
 

.bildin{
    position: relative;
    left:0;
    top:0;
    width:100%;
}

.bild {
  max-width: 100%;
  height: auto; 
}

.noshow{
  display:none;
}

.top-slogan{
  
  position: fixed;
  font-size:x-small;
  z-index:10000;
 /* margin-top:-2vh;*/
 padding:0;
}

.submenu-in{
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  width:100%;
  padding:0 0 10em 0;
  margin:0;
  text-align: center; 
}

/*.left-40{
  margin-left:40%;
}
*/

.submenurow{
  display:flex;
  flex-wrap: wrap;
  width:100%;
  margin:0;
  padding:10em 2em 1em 2em;
  justify-content: center;  
}

.main-pic{
  padding-top:3em;
  padding-bottom:2em;
}
.submenurow-short{
  display:flex;
  flex-wrap: wrap;
  width:80%;
  margin:0;
  padding:10em 2em 1em 2em;
  justify-content: center;  
}

.submenurow-one{
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
  width:100%;
  margin: 0;
  padding:10em 2em 1em 2em;
  justify-content: center;  
}

.wrapperlog {
  position:relative;
  flex-basis: 14%;
  margin:1em;
 /*   height: calc(100vw / 12); 
 padding:0em 0.5em 0em 0.5em;*/
}

.wrapper {
  position:relative;
  width: calc(100vw / 6);
  margin:1em;
  border-radius:5px;
 /* border:1px solid rgb(179,6,1); */
}
.wrapper-one {
  position:relative;
  width: calc(100vw / 2);
  /*height: calc(100vw / 6);*/
  margin:1em; 
}

.flex-c{
  align-self: center;
}

.red-border-shadow{
  border-radius:5px;
  border:1px solid rgb(179,6,1); 
  box-shadow: 0px 13px 14px 0px rgba(50, 50, 50, 0.81);
  padding:1em 1em 1em 2em;
  background-color:rgba(255,252,247,0.5);
}

.left-top{
  position:absolute;
  left:0;
  top:0;
  width:10px;
  height:10px;
  border-top: 2px solid rgba(60, 90, 110,0.9); 
  border-left: 2px solid rgba(60, 90, 110,0.9);
}

.right-top{
  position:absolute;
  right:0;
  top:0;
  width:10px;
  height:10px;
  border-top: 2px solid rgba(60, 90, 110,0.9); 
  border-right: 2px solid rgba(60, 90, 110,0.9);
}
.left-bottom{
  position:absolute;
  left:0;
  bottom:0;
  width:10px;
  height:10px;
  border-bottom: 2px solid rgba(60, 90, 110,0.9); 
  border-left: 2px solid rgba(60, 90, 110,0.9);
}
.right-bottom{
  position:absolute;
  right:0;
  bottom:0;
  width:10px;
  height:10px;
  border-bottom: 2px solid rgba(60, 90, 110,0.9); 
  border-right: 2px solid rgba(60, 90, 110,0.9);
}


.text-wrapper{
  flex-basis:40%;
  position:relative;  
  padding:1em;  
}

.text-wrapper-one{
  flex-basis:40%;
  position:relative;

}

.text-wrapper-6{
  flex-basis:60%;
  position:relative; 
  padding:1em;
  margin:1em;
 
}

.text-wrapper-6-one{
  flex-basis:60%;
  position:relative; 
  padding:1em; 
}

.line-top{  
  border-top: 2px solid rgba(60, 90, 110,0.9);
}  
.line-bottom{  
   border-bottom: 2px solid rgba(60, 90, 110,0.9);
}  
.line-left{  
  border-left: 2px solid rgba(60, 90, 110,0.9);
}  
.line-right{  
  border-right: 2px solid rgba(60, 90, 110,0.9);
}  
  
.forschung{
  flex-direction:row;
  text-align:center;
  justify-content:center;
  align-items:center;
}

.red{
  background-color: var(--ddsbackred);  
  border-radius:5px;
  border: 2px rgb(172, 1, 9) solid;
  color:rgb(255, 228, 228);
 
}


.arrow-ul{
  list-style-type: "➜ ";
  list-style-position: inside;
  padding:1em;
}


.submenubox{  
  width: 100%; 
  display: flex;
  justify-content: center;
  align-content: center;
  text-align: left; 
}


.submenubox-one {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-end;
  align-content: center;
  background-color: rgb(179,6,1);
  color:rgb(254, 255, 251)

}

.submenubox-question{  
  width: 100%; 
  display: flex;  
  align-content: center;
  text-align: left; 
  flex-direction:row;
   justify-content:left;
}

.left-40{
  margin-right:0;
  margin-left:auto;
 }

.redline-left1{
  padding:0.5em;
  border-left:1px solid rgb(179,6,1);
}

/*für Untermenue Buttons auf den jeweiligen seite */
.red span{
  text-align:center;
  padding:0.5em;
  font-size:1em;
}


.submenu{
  position:sticky; 
  display:inline-block;
  top:10em;
  left:5em;
  text-align: left;
 /* border-right:1px solid rgb(50, 50, 50);*/
}

.submenulink-top{  
  border-top:1px solid rgb(50, 50, 50); 
}
.submenulink{
  padding:1em;
  border-bottom:1px solid rgb(50, 50, 50); 
}

.submenulink-aktiv{
  padding:1em;
  border:1px solid var(--ddsrot); 
  /*
  background-color:rgba(60, 90, 110, 0.5);
  background-color:rgba(200, 200, 200, 0.6);
  */
}

.submenulink-aktiv::after{
  position:absolute;
  right: -8px;
  padding:0;
  margin:0;
  content: '◂';
  color:rgb(172,1,9);
  font-size:2em;
  line-height:0.5em;
}

.gototop{
  position:fixed;
  display:none;
  right:0.5em;
  bottom:5em;
  z-index:10000;
}

.menuhead{
  position:fixed;
  display:none;
  left:0;
  top:5.8em;
  text-align:center;
  background:rgb(172, 1, 9);
 /* background-image: linear-gradient(225deg, rgba(172,1,9,0), rgba(172, 1, 9,1) 30%);*/
  color:rgb(254, 255, 251);
  z-index:10002;
  width:15%;
  min-width: max-content;
  padding:1em;
}


.maincont{
  display:flex;
  justify-content: space-around;
  background-color:var(--ddsbackblue);
  padding:0 0 0 0;; 
  text-align:center;
}

.menubox{
  flex-basis: 15%;
}

.incont{
  flex-basis: 85%;
padding:2em 20em 10em 12em;

}
.incont p{
  /*font-size:0.9em;*/
  text-align:left; 
  width:auto;
  margin:1em 4em 0.5em 4em;
  padding-top:1em;
  text-align: justify;
  line-height:1.5em;
}

.incont-h2{  
  text-align:left;
  text-decoration: underline;
}

.incont img{
 margin:1em 3em 2em 3em; 
}

.incont-kontakt{
  width:100%;
  font-size:x-small;
  padding: 0.5em;
  background-color: rgba(60, 90, 110,0.9);   
  color:rgb(255,252,247);

}

.incont-ul {
  list-style-image:url(../images/dds-haken.png);
  list-style-position: inside;
  margin:3em 2em 3em 10em;
  text-align:left ;
  
  padding:1em 1em 1em 0;
  border-left:1px solid rgb(172, 1, 9);
  border-radius:0px;
  padding:1em 1em;
}

.incont-ul-arrow {
  list-style-image:url(../images/ddspfeil.png);
  list-style-position: inside;
  margin:3em 2em 3em 10em;
  text-align:left ;
 
  padding:1em 1em 1em 0;
  border-left:1px solid rgb(172, 1, 9);
  border-radius:0px;
  padding:1em 1em;
}

.incont-ul-zahn {
  list-style-image:url(../images/zahnrad.png);
  list-style-position: inside;
  margin:3em 2em 3em 10em;
  text-align:left ;
  width:max-content;
  padding:1em 1em 1em 0;
  border-left:1px solid rgb(172, 1, 9);
  border-radius:0px;
  padding:1em 1em;
}
.arrow-ul-incont{
  list-style-image:url(../images/ddspfeil.png);
 /* list-style-type: "➜ ";
  list-style-image:url(../images/zahnrad.png);
  list-style-position: inside; */
  list-style-position: inside;
  padding:0em 2em;
}

.arrow-ul-index{
  list-style-image:url(../images/ddspfeil.png);
  list-style-position: inside;
  padding:0em 0em;
  border-left:1px solid rgb(179,6,1);
}


.incont-li {
  font-weight: 600;
  padding: 0.5em 1.5em 0.5em 1em;
  list-style-position: outside;
  margin-left: 2em;
  line-height: 1.3em;
}
 

.contenthead{
  font-size: 1.0em;
  font-weight: bold;
  color:rgb(56, 55, 55);
  color:var(--ddsrot);
  line-height: 2em;
  text-decoration: underline;
  text-align: left;
}

.contlinie{
height:1px;
width:95%;

margin:2em;
border:none;
background-color:rgba(33, 33, 33, 0.6);
}

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

.index-p-ico-right{
  margin: 0 0 0 auto;
  padding:1em 6em 1em 2em; 
  border-right:1px solid rgb(179,6,1);
  text-align:justify;
}

.index-div-ico-left{
  margin-left:1em;
  padding:1em 2em 1em 2em;
  border-left:1px solid rgb(179,6,1);
}

.index-div-ico-left p{
  text-align: justify;
  border-left:none;
}

.index-ul-right{
  list-style-image:url(../images/ddspfeil.png);
  list-style-position: inside;
  margin: 0 0 0 auto;
  padding:0 4em;
  border-right:1px solid rgb(179,6,1);
}

/**************** AUFLÖSUNG bis 1280 div layer CONTENT der einzelnen Seiten***********************/
/**********************************************************************    ***********************/

@media only screen and (max-width: 1280px) {
  
   .menuhead{
     padding:0.5em;
     top:7.9em;
   }

   .incont {
    flex-basis: 90%;
    margin: 0;
    padding:1em 2em 1em 3em;
   }
   .incont p {
    margin: 0;
   }
   .incont-ul {
   
    margin:1em 2em 1em 3em;
    text-align:left ;    
    
    padding:2em;
  }
 
  
}

/**************** AUFLÖSUNG bis 640 div layer CONTENT der einzelnen Seiten***********************/
/**********************************************************************    ***********************/

@media only screen and (max-width: 640px) {
 /* html{
    overflow-x:hidden;
  }*/
  .firsthead{
    width:100%;
  }
  .index-p-ico-right{
    margin: 0 0 0 1em;
    padding:1em;
    border-right:none;
    border-left:1px solid rgb(179,6,1);
    text-align:justify;
  }

  .index-div-ico-left{
    margin-left:1em;
    padding:1em;
    border-left:1px solid rgb(179,6,1);
  }

  .index-div-ico-left p{
    padding:0em 0em ;
  }

  .index-ul-right{
    margin: 0 1em;
    padding:0 2em;
    border-right:none;
    border-left:1px solid rgb(179,6,1);
  }
  .menubox{
    display: none;
  }
  .menuhead{
    padding:0.2em;
    top:8.2em;
  }

  .nozeig{
    display: none;
  }

  .submenurow{
    padding:0.5em 0.5em 0.5em 0.5em;
  }

  .submenurow-short{
    width:100%;
  }
  .submenurow100{
    width:100%;
    flex-basis: 100%;
  }

  .submenubox{
    width:100%;
   
  }

  .submenubox-question{  
    width: 100%; 
    display: flex;     
    text-align: left; 
    flex-direction:column;
    text-align:center;
    margin:0;
    padding:0;
  }


  .left-40{
    margin:auto 0;  
  }

  .maincont{
  /* max-width: max-content;*/
  padding-bottom:7em;
  
  }
  .incont{
    flex-basis:95%;
    margin:0;
    padding:0;
   /* padding:0.2em 0.5em 0.2em 0.4em;
    width:99%;*/
  }

  .submenu-in{
    padding:0;
  }
  .submenurow-index{
    background-image: none;
  }
  .submenurow-logistik{
    background-image: none;
  }
 

  .submenu{
    display:none;
  }

  .wrapper h2{
    font-size:0.9em;
    font-weight: 400;
  }
  .wrapperlog h5{
    font-size:0.85em;
    font-weight: 400;
  }
  
  .wrapperlog{
    flex-basis: 51%;
    width:100%;
    padding:0em 0em 0.5em 0em;
    margin:0;
  }
  
  .wrapper {
    flex-basis: 60%;
    width:100%;   
  }
  .wrapper-one {
    flex-basis: 100%;
    width:100%;
  }
  .text-wrapper, .text-wrapper-6{
    flex-basis: 100%;
  }
  .text-wrapper-6 h3{
    font-size: 100%;
  }
  .gototop{   
    right:0.2em;
    bottom:5em;
    
  }
  
  .incont p{
    font-size:1em;
   /* max-width: max-content;*/
    padding:0.5em;
    padding-top:1em;
    text-align: justify;
    line-height:1.4em;
  }

  .incont-ul, .incont-ul-arrow, .arrow-ul-incont {
    margin:0.5em;
    border:none;
    padding: 0;
    padding-left:0.5em;
  }
  
  .arrow-ul-index{
    list-style-image:url(../images/ddspfeil.png);
    list-style-position: inside;
    padding:0em 0em;
    border-left:1px solid rgb(179,6,1);
  }
  
  
  .incont-li {
    font-weight: 600;
    padding: 0.5em;
    list-style-position: outside;
    margin-left: 1em;
    line-height: 1.3em;
  }
   
  .incont img{
    display: none;     
  }
  .contlinie{  
    margin:0.5em;   
  }
  .forschung{
    flex-direction:column;
  }
    .firsthead{
      flex-direction: column;
      margin:0 0 0 0;
      flex-basis: 100%;
    }
    .firsthead-img{
      flex-basis: 100%;     
    }
    .firsthead-h{
      padding-left: 0;
      text-align:center;
    }
  /*.submenubox p{
    display:none;
  }*/
  .head-in-pic-dark, .head-in-pic-light{ 
    width:100%;
    font-size:250%;
    margin-top:-3.2em;
  }
  
  .main-pic{
    padding-top:1em;  padding-bottom:2em;
  }
  
}
/**************** ENDE AUFLÖSUNG bis 640 div layer CONTENT der einzelnen Seiten***********************/



/**************** ENDE div layer CONTENT der einzelnen Seiten***********************/

/**************** div layer CONTENT der kontakt.php***********************/

.kontaktbox{ 
  width:100%; 
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center; 
  
}
.kontaktcont{
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;  
  width: 80%;  
  margin:0;
  padding:0.5em 2em 0.5em 2em;
  z-index:100;
}
.kontaktpadress{
  padding: 0em 5em 1em 1em;
 
}
.kontaktpform{
    /*border-left-color: rgb(80,80,80);
    border-left-width: 1px;
    border-left-style: solid;
    border-top:transparent;*/
    font-size:small;
    padding:0em 1em 1em 1em;
    
}

.map-placeholder p{
  color:rgb(10, 10, 10);
}
.maptext h3, .maptext h2{
  padding-bottom:1.5em;
}
.kontaktbox p{
  border:none;
}
.wrappercon1 {
  position:relative;
  flex-basis: 25%;  
   margin:0.5em;
   background-color: var(--ddsbackred);
 /* height:400px;
   height: calc(100vw / 12); 
 margin:1em 1em 15em 1em;*/
}

.wrappercon2 {
  position:relative;
  flex-basis: 40%;
   margin:0.5em;
   background-color: var(--ddsbackred);
 /* height:400px;
   height: calc(100vw / 12); 
 margin:1em 1em 15em 1em;*/
}

.kontakthead{
  margin:auto;
  padding:0.5em;
  width:80%;
  height:2em;
  justify-content: center;
  background-color: var(--ddsbackred);
  color:var(--ddstextrot);
  border: 1px solid var(--ddsrot);
  border-radius: 5px;
  border-bottom: transparent;
}

@media only screen and (max-width: 640px) {
  .kontaktbox{
    flex-direction: column;
    justify-content: center;
    
    }
  .kontaktcont{
  flex-direction: column;
  justify-content: center;
  width:100%;
  padding:0.5em;
  }
  .kontaktpadress{
    padding: 0em 1em 1em 1em;
  }
  .kontaktpform{
    border-left:transparent;
 /* border-top-color: rgb(80,80,80);
  border-top-width: 1px;
  border-top-style: solid;*/
  }
  .map-placeholder p{
    line-height: 1em;   
  }
  .maptext h3, .maptext h2{
    padding-bottom:0;
  }
  #contactform{
    text-align:center;
    padding-top:2em;
    border-top-color: rgb(80,80,80);
    border-top-width: 1px;
    border-top-style: solid;
    font-size:1.2em;
  }
  .wrappercon1 {
    position:relative;
    flex-basis: 100%;    
  }
  .wrappercon2 {
    position:relative;
    flex-basis: 100%;
  }
 
  
}



/**************** ENDE div layer CONTENT der kontakt.php***********************/

/********************** div layer INDEX.PHP ***************************************/
#cssform {
  margin: auto;
  width: 529px;
  height: 150px;
  background-color: #ABCDEF;
  transform: rotate(5deg)
             skew(-28deg)
             scale(1.2,1.2);
 }


 /********************** div layer INDEX.PHP ***************************************/

 /********************** div layer NL Newsletter ***************************************/
 #nloverlay {
  position: fixed;
  background-color: rgba(0,0,0,0.7);
  border: none;
  top: 0; right: 0;
  bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 642;
}

#overlay_nl {
  position:relative; 
  left:0; 
  top:0; 
  width:100%; 
  height:100%;
}

#overlay-flex_nl{
  display:flex; 
  justify-content:center; 
  align-items: center;
  left:0; 
  top:0; 
  width:100%; 
  height:100%;
}

 .nl{
 
   background-color: rgba(208, 235, 253, 0.9);
   border: 1px solid rgb(80, 80, 80);
 }

 .button_nl:hover{
   cursor: pointer;
 }

 /********************** ENDE div layer NL Newsletter ***************************************/

 /********************** Impressum + Datenschutz.php Dateien ***************************************/
 .absatz{
  font-size:small;
  padding:0em 1em 1em 2.5em;
  text-align:justify;
  
  border-left: 1px solid var(--ddsrot);
 }

 .ret{
  color:var(--ddstextrot);
  justify-items:flex-start;
  flex-direction: column;
  
 }
 .submenurow100{
  width:60%;
 }


 /********************** ENDE Impressum + Datenschutz.php Dateien ***************************************/

 /**********************  Mail Adresse verschleiern ***************************************/

 span#displayMail::after {content: " info\40 dragondata.de";}
 span#mussWeg {display:none;}


 /********************** ENDE Mail Adresse verschleiern ***************************************/

/**********************  Cookies Layer ***************************************/
 .ausblenden {
  animation: einblenden 2.5s;
  -moz-animation: einblenden 2.5s; /* Für Firefox */
  -webkit-animation: einblenden 2.5s; /* Für Safari und Chrome */
  -o-animation: einblenden 2.5s; /* Für Opera */
}

@keyframes einblenden {
  from { opacity:1; }
  to { opacity:0; }
}

@-moz-keyframes einblenden { /* Für Firefox */
  from { opacity:1; }
  to { opacity:0; }
}

@-webkit-keyframes einblenden { /* Für Safari und Chrome */
  from { opacity:1; }
  to { opacity:0; }
}

@-o-keyframes einblenden { /* Für Opera */
  from { opacity:1; }
  to { opacity:0; }
}

/**********************  ENDE Cookies Layer ***************************************/