/* Header Styles    header.css */

/* ----------------------------------------------------------------------- Header Image */

#header_image{
  position:relative;
  overflow:hidden;
  height: 3.65rem;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position-x: 50%;
}

#header_image ul {
  opacity:0; transition: opacity .5s ease-out;
  position:absolute; right:3rem; bottom: 0; width: auto; padding: 0 .4rem; margin-bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  list-style: none;
}
#header_image ul li {padding: .2rem 0;}
#header_image ul li a {font-weight: var(--nb-font-weight-bold); color: #003464}/* color fix */

/* toggle Linkliste */
#header_image.show-list ul {display: inline-block; opacity:1}
#header_image:after{
  float: right;
  width: 1.7rem;
  height: 1.25em;
  position: relative;
  top: calc(100% - 1.8rem);
  right: .45rem;
  content: '\f0c1';
  text-align: center;
  background-color: rgba(255, 255, 255, 1);
  color: #003464;
  line-height: 1.5rem;
  font-family: 'FontAwesomeS';
  font-size: 1.2rem;
}

/* ------------------------------------------------------------------------- Header Row */

#header {width:100%; max-width: 100%; position: fixed; top: 0; left:0; z-index: 2;}
#header-row {
  width: 100%; max-width: calc(var(--media-sm) - 0rem);
  margin: 0 auto; padding: .3rem 1rem .1rem .7rem;
  display: flex; gap:.4rem 0; flex-flow: row wrap; justify-content: flex-end;
  background: var(--nb-light-color);
  border-bottom: 5px solid rgba(255, 255, 255, .5);
}
#header-row input, #header-row li, #header-row a, #header-row button, #header-row p, #header-row span {font: var(--nb-font-small);font-weight: var(--nb-font-weight-bold);}

#header-row #logo {flex: 0 0 3rem;}
#header-row #logo h1 {margin:0}
#header-row #logo a {
  display:inline-block; width: 3rem; height: 3rem;
  color: var(--nb-color);
}
#header-row #logo img{
  width:3rem; height:3rem; float:left;
  background-color: var(--nb-color);
  mask-image: url(images/nullbarriere.svg);
  mask-repeat: no-repeat;
  mask-position: .25rem;
}


/* mobile nur Logo, kein Motto Text*/
#header-row #logo a > span{display:none}

/* horizontales Menü ausblenden
#header-row #menu {display:none}*/

#header-row #search { /*background:yellow;*/
  display: inline-block; flex: 1 1 calc(100% - 13.8rem);
  text-align:right; font-size: 0; padding-top: 10px}

#header-row #search form{display: flex; justify-content: flex-end}
#header-row #search input {display:none;}
#header-row #search button {margin-right: 10px;}

#header-row #buttons {flex: 0 0 120px; padding-top: 10px}/* calc(3 * 24px + 3 * 16px) */

.icon.button.settings{display: none}


/* --------------------------------------------------------- Burger Button */
#burger{padding-top: 10px;}
#burger-check {display: none;}
#burger button.button {margin-left: 10px; position: relative; top: -.2rem;}


/* ----------------------------------------------- Burger Menü in menu.css  */

@media only screen and (min-width : 360px){ /* Border Silver */
  #header_image{
    height: 5.7rem;
    background-size: auto 5.75rem;
  }
  #header-row #search input {
    display:inline; flex:1 0 1rem; font-weight: normal;
    width: calc(100% - 2.8rem); max-width: 14rem; height: 1.4rem;
    margin: 4px 0 0 8px; border: 1px solid var(--nb-bright-color);
  }
  #header-row #search input:focus {border: var(--nb-color) 1px solid;}
}

/* ------------------------------------------------------------------ Breakpoint medium */

@media only screen and (min-width : 38rem){ /* Border Silver */

  #header{position: sticky; top: 0;}
  #header-row { width:100%; max-width: 100%;}/* padding-bottom: 0*/
#header_image{
    height: 5.4rem;
    background-size: 100% auto;
  }

}

/* ------------------------------------------------------------------- Breakpoint large */


@media only screen and (min-width : 52.5rem){ /* Border White */

  #header{position: relative;}

  #header_image{height: 7.8rem;
    background-size: 100% auto;}
  #header_image ul {opacity:1; transition: opacity .5s ease-out; margin:0; left:0; right: unset; bottom: 1rem;}
  #header_image:after{content:''; background: none}

  #header-row {height: 7rem;}
  #header-row > div {}
  #header-row #logo {flex: 1 0 6rem; position: relative; top: .45rem; left: -.6rem;}
  #header-row #logo h1 {width: auto; height:3rem; }
  #header-row #logo a {
    display:inline-block; position:absolute; left:0; width:auto; height:3rem; margin-left: .6rem;
    }
  #header-row #logo img{
    width: 2.4rem; height: 3rem;
    mask-position: 0;
  }
  #header-row #logo a span {display:block; padding-left:3rem; white-space: nowrap; outline: none;}
  #header-row #logo a span + span {font-weight:var(--nb-font-weight);}

  #header-row #logo a span:first-of-type {font:var(--nb-font-weight-bold) 1.1rem/1.1 var(--nb-font-family)}

  #header-row #buttons {flex: 0 0 26rem; text-align: right; padding-top: 4px;}

  #header-row .icon.button,
  #header-row a.button, #header-row button.button{
    width:auto; height:32px;
    line-height:32px; text-align: right; padding-left: .5rem;
    margin: 0 9px 0 6px;;
  }
  .icon.button > span,
  #header-row a.button > p, #header-row button.button > p{display:inline-block} /* Buttons mit Text */

  .icon.button.settings{display: inline-block;}
  #burger {display: none;}

  #header-row #menu {
    display: block; /*flex: 0 0 100%; order: 4;*/
    position: absolute; left: 0; top: 4.5rem; margin: 0;
    width: 100%; min-width: unset; max-width: 100%; height: auto; min-height: unset;
    white-space: nowrap;
    transform: none;
    border: none;
    overflow: visible;
  }

  #header-row #search {
    flex: 0 0 100%; order: 3; width:auto;
    position: relative; top: -2rem;
  }
  #header-row #search input {margin-top: 4px;}

  #header-row #search button {margin-right: 0}

  /*------------------------------------- Ausnahmen für große Schrift*/
  html[data-schrift="large"] #burger {display: inline-block;}
  html[data-schrift="large"] #burger button.button {margin-left: 20px}/*margin: .8rem 0 0 .6rem;*/
  html[data-schrift="large"] #header-row #menu {display:none;}

  html[data-schrift="large"] #header-row #search {flex: 0 0 100%; top: -.5rem;}

  html[data-schrift="large"] #header-row #logo a span {margin-top:.9rem;}
  html[data-schrift="large"] #header-row #logo a span {display:none;}




}
@media only screen and (min-width : 57rem){ /* Border Green */

  html[data-schrift="large"] #header-row #logo a > span{display:block;}


}
/* ---------------------------------------------------------- Breakpoint Large w Border */

@media only screen and (min-width : 69rem){ /* statt 62rem Border Blue */




/*------------------------------------- Ausnahmen für große Schrift aufheben*/
  html[data-schrift="large"] #burger {display: none;}
  html[data-schrift="large"] #header-row #menu {display:inline-block; flex: 0 0 34rem;}

  html[data-schrift="large"] #header-row #search {flex: 1 1 calc(100% - 34rem);}

  html[data-schrift="large"] #header-row #logo a span{margin-top:0rem;}
  html[data-schrift="large"] #header-row #logo a span{display:block;}

}



@media only screen and (min-width : 89rem){ /* Border Green */
  html[data-schrift="large"] #header-row #logo {flex: 1 0 16rem}
}