/* === FARBEN ===*/

/*
Blau:          #1F4E8C
Dunkel Grau:   #3D3F45
Hell Grau:     #E5E5E5
Rot:           #A62C21
 */


/* === GLOBAL ===*/

body{
  margin: 0;
  font-family: 'Raleway','Lato','Helvetica Neue','Arial' ,sans-serif;
  font-size: 16px;
}

* {
    box-sizing: border-box;
}

/* === GENERELLES ===*/

.clearfix::after{
  content:"";
  display: block;;
  clear:both;
}
.active{
  background-color: #A62C21 !important;
}
.wichtiger-text{
  font-weight: bold;
}
#screenreader{
  display: none;
}
.cmd-typ-1{
  background-color: #A62C21 ;
  border:2px solid #A62C21;
  color: #FFF;
  padding:  .4rem .8rem;
}
/*  === Navigationsleiste === */

#header-nav{
  width: 100%;
  height: 50px;
  background-color: #3D3F45;
  position: relative;
  font-weight: bold;
  font-size: 1.1rem;
}

#header-nav ul{
  margin: 0;
  padding: 0;
  float: right;
  height: 100%;
}

#header-nav a > img{
  height: 30px;
  width: auto;
  float:left;
  margin: .5rem;
}

#header-nav ul > li{
  display: inline-block;
  height: 100%;
  padding: 0 .4rem 0.955rem .4rem
}

#header-nav ul > li > a{
  margin-top: .85rem;
  display: inline-block;
}

#header-nav ul > li > a:link{
color: #FFF;
text-decoration: none;
}

#header-nav ul > li > a:hover{
  color: #E5E5E5;
  text-decoration: none;
}

#header-nav ul > li > a:active{
  color: #FFF;
  text-decoration: none;
}

#header-nav ul > li > a:visited{
  color: #FFF;
  text-decoration: none;
}
#header-nav .col-6{
  padding-top: 0;
  padding-bottom:0;
}
#header-nav .contain ,
#header-nav .row,
#header-nav .col-6{
  height: 100%;
}
/*  === Navigationsleiste (MOBIL) */
#mobil-nav-button{
  color: white;
  float: right;
  font-size: 2rem;
  border: 2px solid white;
  border-radius: 50%;
  margin:7px 7px 7px 30px;

  width: 35px;
  height: 35px;
  font-weight: lighter;
  position: relative;
}
#mobil-nav-button > span{
  position:absolute;
  bottom:-4px;
  left:6px;

}
#mobile-nav-content > ul >li{
  display: block;
  background-color:  #3D3F45;
  height: 50px;
  padding:0 2rem;
  text-align: center;
}

#mobile-nav-dropdown{
  position: relative;
  display: inline-block;
  float:right;

}
#mobile-nav-content{
  position: absolute;
  right: 0;
  top: 50px;
  display: none;

}
#mobile-nav-dropdown:hover > #mobile-nav-content{
  display: block;
}

#mobile-nav{
  display: none;
}

@media (max-width: 768px) {

#desktop-nav{
    display: none;
  }

  #mobile-nav{
    display: block;
  }
}

/* === HEADER-BANNER === */


#header-banner{
  background: url("../../img/hintergrund.jpg") no-repeat center center;
  width: 100%;
  height: 0;
  padding-top: 20.83%;
  background-size: contain;
}

#header-banner-klein{
  background: url("../../img/hintergrund-klein.jpg") no-repeat center center;
  width: 100%;
  height: 0;
  padding-top: 15.625%;
  background-size: contain;
}

/* === NEWSLETTER-BEREICH === */

#newsletter-bereich{
  width: 100%;
  background-color: #3D3F45;
}
#nb-werbetext{
  color: #FFF;
  font-size: 1rem;
}
#nb-form{
  margin-top: .65rem;
  width: 100%;
  float:right;
  text-align: right;

}
#nb-email-input{
  width: 70%;
  height: 32px;
  border: 2px solid #fff;
  padding: .4rem;
}
#nb-button{
  height: 33px;
}

@media (max-width: 1425px){
  #nb-email-input{
    width: 62%;
  }
}
@media (max-width: 1142px){

  #nb-email-input{
    width: 100%;
  }
  #nb-button{
    width: 100%;
    margin-top: .4rem;
  }
}
@media (max-width: 768px){
  #nb-werbetext{
    display: none;
  }
  #nb-form{
    margin-top: 0;

  }
  #newsletter-bereich .col-4{
    display: none;
  }
}
@media (max-width: 480px){
  #nb-email-input{
    height: 25px;
  }
  #nb-button{
    height: 25px;
    padding: .1rem;
  }
}
/* === sichtbarkeit === */

/* .border,.border *{
  border: 1px solid #91c4ff;
}
[class*="col-"]{
  background-color: #BFDDFF
}
p{
  background-color: #91c4ff;
  padding: 0;
  margin: 0;
  color: #FFF;
  text-align: center;
} */

  /* === GRID-SYSTEM === */

.container{
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}
.row::after{
  content: "";
  clear: both;
  display:block;
}

[class*="col-"]{
  float: left;
  min-height: 1px;
  height: auto;
  padding: .8rem;
}
.col-1{width: 16.666%}
.col-2{width: 33.333%}
.col-3{width: 50%}
.col-4{width: 66.666%}
.col-6{width: 100%}



/*
=== Wichtige Breakpoints

320    Pixel (iPhone Hochformat)
480    Pixel (iPhone Querformat)
768    Pixel (iPad Hochformat)
1024   Pixel (iPad Querformat)

 */

@media (max-width: 1024px) {
.col-1{width: 33.333%}

}
@media (max-width: 768px) {
.col-1{width: 50%}
.col-2{width: 100%}
.col-3{width: 100%}
.col-4{width: 100%}



}
@media (max-width: 480px) {
.col-1{width: 100%}
.col-2{width: 100%}
.col-3{width: 100%}
.col-4{width: 100%}
}