/*Variablen deklarieren */
:root{
    --ddsrot: rgb(172,1,9);
    --ddsgelb: rgb(255, 252, 247);
    --ddstext: rgb(170, 170, 170);
    --ddshead: rgb(230, 230, 230);
    --ddsbackred: rgb(41, 37, 37);
    --ddsbackblue: rgb(37, 39, 41);
    --ddstextrot: rgb(255, 228, 228);
   /* --ddsbackred: rgb(71, 69, 69);
    --ddsbackblue: rgb(68, 71, 75);*/
}


@font-face {        
    font-family: DODG5;
    font-display: swap;
    src: url(../css/font/DODG5.woff);
} 

/**** BREAKPOINTS  ****/
@media only screen and (max-width: 640px) {
  h1{
    font-size:150%;
  }
}
  /* 768
@media (min-width: 576px) {
    .container, .container-sm, .container-md {
      max-width: 720px;
    }
    .main-page{
        max-width: 550px;
    }
    .mainhead.scrolled{
        left:5%;
    }
    .contentleftfahneactive h3{
      font-size: calc(10px + (15 - 10) * ((100vw - 320px) / (1900 - 320)));
    }
}
  
@media (min-width: 992px) {
    .container, .container-sm, .container-md, .container-lg {
      max-width: 960px;
    }
    .main-page{
        max-width: 600px;
    }
    .mainhead.scrolled{
        left:10%;
    }
}
  
@media (min-width: 1200px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
      max-width: 1140px;
    }
    .main-page{
        max-width: 700px;
    }
    .mainhead.scrolled{
        left:20%;
    }
} */

/**** BREAKPOINTS  ENDE ****/




html{
    /*font-family:      
     -apple-system, BlinkMacSystemFont, Arial, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ;
    
    margin:0;*/
    color:rgb(50, 50, 50);
    color: var(--ddstext);
   /* background-color:rgb(100, 100, 100);
   background-color:var(--ddsbackblue);
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1900 - 320)));
    font-size: calc(12px + (18 - 13) * ((100vw - 320px) / (1900 - 320)));
    
    font-size:0.9em;*/
    font-size:1em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: calc(13px + (17 - 13) * ((100vw - 320px) / (1900 - 320)));
   
   
}

body{
  background-color:var(--ddsbackblue);
  overflow-x: hidden;
}
a, a:link, a:hover, a:visited, a:active{
    text-decoration: none;
    color:inherit;
    min-width: 48px;
   /* min-height: 48px;
    padding: 8px;*/
}

a:hover .red {
  background-color:var(--ddsrot);
}

a:focus .red{
  background-color:var(--ddsrot);
}

a:hover .submenubox img {
  background-color:var(--ddsrot);
}
a:active .submenubox img {
  background-color:var(--ddsrot);
}

div.submenulink:hover {
  background-color:var(--ddsrot);
}
div.submenulink:active {
  background-color:var(--ddsrot);
}

h1{
  color: var(--ddstextrot);
}

p { 
  -webkit-hyphens: auto; 
  hyphens: auto; 
  line-height: 1.5em;
}

h1, h2, h3, h4, h5, h6 { 
  -webkit-hyphens: auto; 
  hyphens: auto; 
}

button{
    cursor: pointer;
}
/*
.content{
  max-width:max-content;
}

@media only screen and (max-width: 300px) {
  html{
      font-size: 12px;
  }

}*/

@media only screen and (max-width: 640px) {
  button{
    cursor: pointer;
    min-width: 48px;
    min-height: 48px;
   
  }
  a, a:link, a:hover, a:visited, a:active{
    
    min-width: 48px;
   /* min-height: 48px;*/
    
}

}

/* Für schwachsinn Chrome black-line  */
*:focus{
    outline:0px transparent !important;
    outline: none!important;
}

/**************** INPUT FELDER *********************/
#contactform input, textarea, button, select{
  font-size:smaller;
  margin-top:0.5em;
}

textarea{
 width:20em;
}

/**************** ENDE INPUT FELDER *********************/


/**************** COOKIE BANNER *********************/

#overlay {
    position: fixed;
    /*background-color: rgba(10,10,10,0.5);*/
    background: none;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  
  #overlay_back {
    position:relative; 
    left:0; 
    top:0; 
    width:100%; 
    height:100%;
    
  }
  
  #overlay-flex{
    display:flex; 
    justify-content:center; 
    align-items: center;
    left:0; 
    top:0; 
    width:100%; 
    height:100%;
    
  }
  
  #c-frame{
    width:100%; 
    height:100%; 
    background-color: rgba(100,100,100,0.5);    
    background: none;
    overflow:hidden;
    border:none;   
    z-index: 2643;
  }
  
  #overlay-cookie {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; 
    height: 100vh; 
    overflow:auto;
   
  }
  #cookietext1{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width:23%;
    font-size: 1em;
    padding: 0 0.5em;
    z-index: 43;    
    background-color: rgb(30, 60, 80);
    background-color: var(--ddsbackblue);     
    border: 1px solid var(--ddsrot);
    border-radius: .1em;
    border-radius: 5%;
    /*box-shadow: -4px 8px 10px 0px rgba(0,0,0,0.7), 0px 0px 0px 0px rgba(0,0,0,0.5);     */
    box-shadow: 0px 0px 15px 15px rgba(197, 45, 45, 0.7), 0px 0px 0px 0px rgba(0,0,0,0.5);
  }
  #cookietext1 h4{
   hyphens: none;
  }
  .wrappercookie{
    align-self:flex-start;
    flex-basis:70%;
    padding:0;
    margin:0;
  }

  @media only screen and (max-width: 640px) {
    #cookietext1{
      max-width:max-content;
    }
    #cookietext1 h4{
      font-size:11px;
     }
    .wrappercookie{
      align-self:flex-start;
      flex-basis:100%;
    }
    
  }
  #cookietext2{
    display:none;  
    flex-direction: column;
    align-items: center;
    max-width:350px;
    font-size: 1em;
    z-index: 43;    
    background-color: rgb(245, 250, 250);
    background-color: var(--ddsbackblue); 
    border: 1px solid var(--ddsrot);
    border-radius: .1em;
    border-radius: 10%;
    box-shadow: -4px 8px 10px 0px rgba(0,0,0,0.7), 0px 0px 0px 0px rgba(0,0,0,0.5);
  }
  
  .dds-head {
    font-family: DODG5;
    color: rgb(163, 15, 35);
    padding:1em 1em 2em 1em;
  }
  .ueber{
    margin: 0;
  }
  .e-text{
    font-size:0.9em;
    text-align: justify;
    padding:1.5em;
  }
  
  .text-klein{
    font-size:0.7em;
    font-weight:bold;
    line-height:0.9em;
    margin-left:2em;
  }
  
  .linie{
    width:95%;
    height:1px;
    opacity:1;
    margin: 1em 0 1em 0;
    border-color: var(--ddsrot);
  }
  
  .butt{
    padding: 0.3em 1.5em 0.3em 1.5em;
    color:rgb(245, 250, 250);
    border-radius: 1em;
    background-color: var(--ddsrot);
    border: 1px solid var(--ddsrot);
  }
  .butt:hover{
    padding: 0.3em 1.5em 0.3em 1.5em;
    color:rgb(245, 250, 250);
    border-radius: 1em;
    color: var(--ddsrot);
    background-color: var(--ddstextrot);
    border: 1px solid var(--ddsrot);
  }
  .butt:active{
    padding: 0.3em 1.5em 0.3em 1.5em;
    color:rgb(245, 250, 250);
    border-radius: 1em;
    color: var(--ddsrot);
    background-color: var(--ddstextrot);
    border: 1px solid var(--ddsrot);
  }
  
  .butt-f{
    padding: 0.3em 1.5em 0.3em 1.5em;
    border: 1px solid var(--ddsrot);
    color:rgb(245, 250, 250);
    border-radius: 1em; 
    background-color:  var(--ddsrot);
  }
  .foot{
    margin-top:1.6em;
    bottom:0.1em;
    color: rgb(204, 218, 223);
    width:100%;
    text-align:center;
  }
  
  ul { 
    list-style-position: outside; /* eingerückt */  
  }
li{
  -webkit-hyphens: auto; 
    hyphens: auto; 
  }


  .li{ 
    font-size:0.8em;
    -webkit-hyphens: auto; 
    hyphens: auto; 
  }
  .re{
    margin-left:5%;
    font-size:0.8em;
  }
  
  .li a:hover{ 
   text-decoration: rgb(38, 51, 88);
  }

  
  /**************** ENDE COOKIE BANNER *********************/
  
/****************Formular response*********************/

#overlay_mail {
  position: fixed;
  background-color: rgba(0,0,0,0.5);
  border: none;
  top: 0; right: 0;
  bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 42;
}


#mail_text{
 /* position: absolute;*/
  text-align: center;
  padding: 2%;
  max-width: max-content;
  max-height: max-content;
  margin: 30vh auto;
  z-index: 43;
  color: var(--ddstextrot);  
  background-color: var(--ddsbackblue);     
  border: 1px solid var(--ddsrot);
  border-radius: .1em;
  border-radius: 10%;
  box-shadow: -4px 8px 10px 0px rgba(0,0,0,0.7), 0px 0px 0px 0px rgba(0,0,0,0.5);
}



  .blinki{
  
    animation-name: animation_blink;
    animation-timing-function: ease-in;
    animation-duration: 2s; 
    animation-iteration-count: 2.5;   
    animation-fill-mode: both;
  }       
  
  
  @keyframes animation_blink {
  0% { background-color: #f1f1f1; }
  50% {background-color: red;}
  100% {background-color: #f1f1f1; }    
  }

  /**************** ENDE Formular response *********************/

/******************  Feste Klassen ****************************/
.red{
  color: var(--ddsrot);
}

/****************** ENDE Feste Klassen ****************************/

/* ALT!!!!!
body, div, main, p, h1, h2, h3, h4, h5, table, tr, td, thead, tbody, th, form, input, textarea, select, option, label, img, button, fieldset{
    font-family: inherit;
    font-size:inherit;
    margin: 0px;
    padding: 0px;
    border:none;
    color:inherit;
}
body{
    background-color:rgb(113, 151, 179, 0.2);

}

a{
    font-family: inherit;
    font-size:inherit;
    margin: 0px;
    padding: 0px;
    color:inherit;
    text-decoration: none;   
}




h1{
    font-family:inherit;
    font-size: calc((9px + (12 - 9) * ((100vw - 320px) / (1900 - 320)))*2);
}
h2{
    font-family:inherit;
    font-size: calc((9px + (12 - 9) * ((100vw - 320px) / (1900 - 320)))*1.75);
}
h3{
    font-family:inherit;
    font-size: calc((9px + (12 - 9) * ((100vw - 320px) / (1900 - 320)))*1.5);
}
h4{
    font-family:inherit;
    font-size: calc((9px + (12 - 9) * ((100vw - 320px) / (1900 - 320)))*1.25);
}
h5{
    font-family:inherit;
    font-size: calc((9px + (12 - 9) * ((100vw - 320px) / (1900 - 320)))*1);
}

table, tr, td, thead, tbody, th{
    font-size: calc(8px + (12 - 8) * ((100vw - 320px) / (1900 - 320)));
}

img{
    max-width: calc(40% + (100 - 40) * ((100vw - 320px) / (1900 - 320)));
    height: auto; 
}*/