/* Gemeinsame Seitenelemente: Header + responsive Grundlagen */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }

.myrta-header {
  width: 885px;
  max-width: 100%;
  margin: 0 auto;
}
.header-blue {
  min-height: 80px;
  background: #0794cd;
  display: flex;
  align-items: center;
}
.header-logo {
  flex: 0 0 185px;
  padding-left: 15px;
  display: flex;
  align-items: center;
}
.header-logo img { display: block; width: 120px; border: 0; }
.header-title {
  color: #fff;
  font: 300 29px/1.18 Arial, Helvetica, sans-serif;
  padding-left: 12px;
  white-space: nowrap;
}
.header-tagline {
  min-height: 17px;
  padding: 3px 24px 0 0;
  color: #0084c5;
  background: #fff;
  text-align: right;
  font: 11px Arial, Helvetica, sans-serif;
}

@media (max-width: 760px) {
  .header-blue { min-height: 72px; padding: 8px 10px; }
  .header-logo { flex-basis: 135px; padding-left: 0; }
  .header-logo img { width: 105px; }
  .header-title { font-size: clamp(18px, 5vw, 24px); padding-left: 0; white-space: normal; }
  .header-tagline { padding-right: 12px; }
}

@media (max-width: 480px) {
  .header-blue { align-items: center; }
  .header-logo { flex-basis: 112px; }
  .header-logo img { width: 92px; }
  .header-title { font-size: 17px; }
}