@charset "UTF-8";

/*****************************************************
H E A D E R 
******************************************************/

.header {
  position:             fixed;
  z-index:              10;
  height:               80px;
  width:                100%;
  background-color:     var(--col-bgr);
  white-space:          nowrap;
}

.header div.logo {
  padding:              5px 10px 10px 5px;
  margin:               0px;
  width:                70px;
}

.header img.logo {
  width:                60px;
}

.header div.h1 {
  width:                300px;
  font-family:          'Oswald', sans-serif;
  font-weight:          400;
}
.header div.h2 {
  width:                auto;
  font-family:          'Oswald', sans-serif;
  font-size:            2em;
}
.header div.h3 {
  width:                calc(100% - 20px);
  font-family:          'Unbutu', sans-serif;
  font-style:           italic;
  font-size:            0.9em;
  font-weight:          200;
  margin-left:          20px;
}

div.header div.LOGO {
  position:          relative;
  float:             left;
  margin-left:       20px;
  padding:           0px;
  height:            100%;
  max-height:        50px;
  max-width:         200px;
  vertical-align:    middle;;
}
div.header div.LOGO img {
  max-height:        50px;
  max-width:         200px;
}

img.btn {
  max-height:        50px;
  max-width:         200px;
}
img.sub-btn {
  height:            20px;
  width:             auto;
  padding-right:     10px;
}

.dropbtn {
  background-color:   transparent;
  background-repeat:  no-repeat;
  overflow:           hidden;
  outline:            none;
  color:              var(--col-text);
  padding:            5px;
  margin:             10px 10px 10px 50px;
  font-size:          16px;
  white-space:        nowrap;
  font-variant:       small-caps;
  border:             none;
  cursor:             pointer;
}

.dropdown {
  position:           relative;
  display:            inline-block;
}

.dropdown-content, .dropdown-search {
  display:            none;
  position:           absolute;
  background-color:   var(--col-li);
  color:              var(--col-text);
  margin-left:        40px;
  min-width:          200px;
}
.dropdown-search {
  width:              425px;
  min-width:          425px;
//  display:            block;
}

.dropdown-content a, .dropdown-search a {
  color:              var(--col-text);
  
  padding:            12px 16px;
  text-decoration:    none;
  display:            block;
}

.dropdown-content a:hover, .dropdown-search a:hover {
  background-color:   var(--col-blue);
  color:              var(--col-li);
}

.dropdown:hover .dropdown-content, .dropdown:hover .dropdown-search {
  display:            block;
}


/*
.header div.logo {background-color: antiquewhite;}
.header div.h1   {background-color: palevioletred;}
.header div.h2   {background-color: lightcyan;}
.header div.h3   {background-color: lightgreen;}
*/



/**********************************************************
 HANDY GRÖßE
***********************************************************/

@media(max-width:400px) {
  .header div.logo{padding: 5px 5px 5px 5px;}
  .header div.h1 {width: 250px;}
  .header div.h2 {width: auto;font-size:2em;}
  .header div.h3 {width:calc(100% - 20px);font-size:0.9em;}
  .dropdown {display: none;}