@font-face {
    font-family: "Frutiger-VR-Black-Italic";
    src: url("../../fonts/FrutigerVR-BlackItalic.woff");
}
@font-face {
    font-family: "Frutiger-VR-Bold";
    src: url("../../fonts/FrutigerVR-Bold.woff");
}
@font-face {
    font-family: "Frutiger-VR-Italic";
    src: url("../../fonts/FrutigerVR-Italic.woff");
}
@font-face {
    font-family: "Frutiger-VR-Roman";
    src: url("../../fonts/FrutigerVR-Roman.woff");
}

*  {
    padding: 0;
    margin: 0;
}
body {
    display: flex;
    min-height: 100vh;
    margin: 0 auto;
    flex-direction: column;
    background-color:#fff;
    margin-left:0px;
    margin-top:0px;
    font-family: "Frutiger-VR-Roman";
}

#header {
    position: relative;
    height: 80px;
    background-color:#fff;
    border-top: 20px solid #007EA3;
}
#titel {
    position: absolute;
    top: 0;
    left: 40px;
    height: 80px;
    font-size: 64px;
    font-family: "Frutiger-VR-Bold";
    background-image: url(../../images/videotelefonie.png);
    background-repeat: no-repeat;
    background-position: -6px center;
    background-size: 50px;
}
#filialenname {
    position: absolute;
    top: 0;
    right: 40px;
    height: 80px;
    font-size: 40px;
    color: #999;
    line-height: 110px;
}
#content {
    position: relative;
    flex: 1;
    background-color:#dcdcdc;
    padding: 40px;
}
#content h2 {
    margin-bottom: 40px;
    font-size: 40px;
    font-family: "Frutiger-VR-Bold";
    color: #5a5a5a;
}
#content h3 {
    margin-bottom: 24px;
    font-size: 24px;
    font-family: "Frutiger-VR-Bold";
    color: #5a5a5a;
}
#content p {
    width: 500px;
    margin-bottom: 40px;
    font-size: 18px;
    line-height: 24px;
    color: #5a5a5a;
}
#ergebnis {
    display:none;
    z-index:9999;
    font-size:14px;
    color:#c00;
}
.eingabe {
    display: block;
    width: 500px;
    height: 40px;
    margin-bottom: 10px;
    font-size: 16px;
    text-indent: 5px;
    box-sizing: border-box;
}
.videotelefonie {
    background-color: #007EA3;
    width: 500px;
    height: 50px;
    margin-bottom: 10px;
    background-image: url("../../svg/forward.svg");
    background-repeat: no-repeat;
    background-size: 32px;
    background-position: center right;
    color: #fff;
    font-size: 20px;
    line-height: 50px;
    text-indent: 16px;
    text-align: left;
    border: none;
    outline: none;
}
.videotelefonie:active {
    background-color: #808080;
    transition: background-color 0.2s;
}
.gray {
    display: inline-block;
    height: 80px;
    color: #ccc;
    line-height: 96px;
    text-indent: 56px;
}
.blue {
    display: inline-block;
    height: 80px;
    color: #007EA3;
    line-height: 96px;
}
.margin_bottom {
    margin-bottom: 16px;
}

@media (max-width: 1023px) {
  #header {
      height: 64px; /*80px;*/
      border-top: 16px solid #007EA3; /*20px solid #007EA3;*/
  }
  #titel {
      left: 32px; /*40px;*/
      height: 64px; /*80px;*/
      font-size: 52px; /*64px;*/
      background-size: 40px; /*50px;*/
  }

  #filialenname {
      right: 32px; /*40px;*/
      height: 64px; /*80px;*/
      font-size: 32px; /*40px;*/
      line-height: 88px; /*110px;*/
  }
  #content {
      padding: 32px; /*40px;*/
  }
  #content h2 {
      margin-bottom: 32px; /*40px;*/
      font-size: 32px; /*40px;*/
  }
  #content h3 {
      margin-bottom: 20px; /*24px;*/
      font-size: 20px; /*24px;*/
  }
  #content p {
      width: 500px;
      margin-bottom: 32px; /*40px;*/
      font-size: 16px; /*18px;*/
      line-height: 20px; /*24px;*/
  }
  .eingabe {
      width: 500px;
      height: 32px; /*40px;*/
      margin-bottom: 8px; /*10px;*/
      font-size: 14px; /*16px;*/
      text-indent: 4px; /*5px;*/
  }
  .videotelefonie {
      width: 500px;
      height: 40px; /*50px;*/
      margin-bottom: 8px; /*10px;*/
      background-size: 26px; /*32px;*/
      font-size: 16px; /*20px;*/
      line-height: 40px; /*50px;*/
      text-indent: 14px; /*16px;*/
  }
  .gray {
      height: 64px; /*80px;*/
      line-height: 76px; /*96px;*/
      text-indent: 46px; /*56px;*/
  }
  .blue {
      height: 64px; /*80px;*/
      line-height: 76px; /*96px;*/
  }
  .margin_bottom {
      margin-bottom: 14px; /*16px;*/
  }
}

@media (max-width: 767px) {
  #header {
      height: 52px; /*64px; 80px;*/
      border-top: 12px solid #007EA3; /*16px solid #007EA3; 20px solid #007EA3;*/
  }
  #titel {
      left: 26px; /*32px; 40px;*/
      height: 52px; /*64px; 80px;*/
      font-size: 42px; /*52px; 64px;*/
      background-size: 32px; /*40px; 50px;*/
  }
  #filialenname {
      top: 52px;
      right: unset; /*32px; 40px;*/
      left: 26px;
      height: 52px; /*64px; 80px;*/
      font-size: 26px; /*32px; 40px;*/
      line-height: 72px; /*88px; 110px;*/
      z-index: 2;
  }
  #content {
      padding: 26px; /*32px; 40px;*/
      padding-top: 64px;
  }
  #content h2 {
      margin-bottom: 26px; /*32px; 40px;*/
      font-size: 26px; /*32px; 40px;*/
  }
  #content h3 {
      margin-bottom: 16px; /*20px; 24px;*/
      font-size: 16px; /*20px; 24px;*/
  }
  #content p {
      width: 100%; /*500px;*/
      max-width: 500px;
      margin-bottom: 26px; /*32px; 40px;*/
      font-size: 14px; /*16px; 18px;*/
      line-height: 18px; /*20px; 24px;*/
  }
  .eingabe {
      width: 100%; /*500px;*/
      max-width: 500px;
  }
  .videotelefonie {
      width: 100%; /*500px;*/
      max-width: 500px;
      font-size: 14px; /*16px; 20px;*/
  }
  .gray {
      height: 52px; /*64px; 80px;*/
      line-height: 62px; /*76px; 96px;*/
      text-indent: 38px; /*46px; 56px;*/
  }
  .blue {
      height: 52px; /*64px; 80px;*/
      line-height: 62px; /*76px; 96px;*/
  }
  .margin_bottom {
      margin-bottom: 12px; /*14px; 16px;*/
  }
}

@media (max-width: 374px) {
  #titel {
      left: 20px; /*32px; 40px;*/
      font-size: 36px; /*52px; 64px;*/
  }
  #filialenname {
      top: 52px;
      left: 20px;
  }
  #content {
      padding: 20px; /*32px; 40px;*/
      padding-top: 64px;
  }
  .gray {
      line-height: 58px; /*76px; 96px;*/
      text-indent: 34px; /*46px; 56px;*/
  }
  .blue {
      line-height: 58px; /*76px; 96px;*/
  }
}