/* One language control shared by the landing pages and interactive showcase. */
.language-switch {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 3px;
  gap: 2px;
  border: 1px solid #eae7ee;
  border-radius: 8px;
  background: #faf8fd;
}
.language-switch a {
  display: grid;
  place-items: center;
  min-width: 30px;
  min-height: 36px;
  border-radius: 5px;
  color: #6f6978;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}
.language-switch a[aria-current="page"] {
  color: #fff;
  background: #6247c5;
}
.language-switch a:hover:not([aria-current]) {
  color: #6247c5;
  background: #f0ebfc;
}
.language-switch a:focus-visible {
  outline: 2px solid #6247c5;
  outline-offset: 3px;
}
.site-header {
  gap: 12px;
}
html[lang="de"] h1,
html[lang="de"] h2,
html[lang="de"] h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}
@media (max-width: 479px) {
  .site-header {
    gap: 8px;
    padding-inline: 12px;
  }
  .site-header .brand-name {
    font-size: 15px;
  }
}
@media (max-width: 699px) {
  .page-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 52px 28px;
    column-gap: 12px;
    row-gap: 0;
    align-content: center;
  }
  .page-header .language-switch {
    justify-self: end;
  }
  .page-header .experience-badge {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: start;
    font-size: 10px;
  }
  .page-header .menu-toggle {
    grid-row: 1;
    grid-column: 3;
  }
}
@media (min-width: 700px) {
  .page-header {
    gap: 14px;
  }
}