#header {
  background: url(../../../typo3conf/ext/hdabasic/Resources/Public/Design/header.png);
  background-position: top center;
  background-size: 2000px auto;
  height: 100px;
  width: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  filter: drop-shadow(0px 3px 3px #000);
  position: fixed;
  z-index: 1000; }
  #header .brand {
    margin: 15px 0 0 0;
    width: 100%;
    padding: 0 15px; }
  #header .brand .logo img {
    width: 83px;
    height: auto; }
  #header .brand .claim img {
    width: 70px;
    height: auto;
    margin-left: 20px; }
  #header .sag {
    display: none; }

@media screen and (min-width: 768px) {
  #header {
    height: 150px;
    background-size: 3000px auto; }
    #header .brand {
      margin: 30px 0 0 15px;
      padding: 0;
      width: auto; }
    #header .brand .logo img {
      width: 105px;
      height: auto; }
    #header .brand .claim img {
      width: 83px;
      height: auto; }
    #header .sag {
      display: block;
      margin-top: 30px;
      width: 110px;
      padding-left: 10px; }
    #header .sag img {
      width: 110px;
      height: auto; } }

@media screen and (min-width: 992px) {
  #header .brand {
    margin-left: 0; }
    #header .brand .logo img {
      width: 144px;
      height: auto; }
    #header .brand .claim img {
      width: 91px;
      height: auto; }
    #header .sag {
      float: right;
      padding-right: 15px; }
    #header .sag img {
      width: 140px; } }

@media screen and (min-width: 1200px) {
  #header {
    height: 200px;
    background-size: 3600px auto; }
    #header .sag img {
      width: 160px; } }