/* Globaler Spreadfilms-Header: Wortmarke am Einstieg/bei Aufwaertsscroll,
   kompaktes Signet beim Herunterscrollen. Die beiden SVGs teilen dieselbe
   Zeichenflaeche; dadurch bleibt der Wechsel ohne sichtbaren Sprung. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

#site-header .site-branding {
  width: min(16.1rem, calc(100vw - 6.25rem)) !important;
  height: 6.6rem !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 0 1.3rem 0 !important;
  transition:
    width 480ms cubic-bezier(.22, 1, .36, 1),
    height 480ms cubic-bezier(.22, 1, .36, 1),
    border-radius 480ms cubic-bezier(.22, 1, .36, 1) !important;
}

#site-header .site-description {
  display: none !important;
}

#site-header .site-logo,
#site-header .custom-logo-link {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
}

#site-header .sfx-brand-wordmark,
#site-header .sfx-brand-signet {
  position: absolute;
  top: 50%;
  left: .3rem;
  width: 17.5rem;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 755.65 / 206.73 !important;
  object-fit: contain !important;
  opacity: 1;
  transform: translateY(-50%) scale(1);
  transform-origin: left center;
  transition:
    opacity 200ms ease,
    transform 400ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

#site-header .sfx-brand-wordmark {
  left: 2.5rem;
  width: 11.75rem;
}

#site-header .sfx-brand-signet {
  opacity: 0;
  transform: translateY(-50%) scale(.9);
}

#site-header .custom-logo {
  display: none !important;
}

body.sfx-header-compact #site-header .site-branding {
  width: 5.4rem !important;
  height: 5.4rem !important;
  border-radius: 0 0 1rem 0 !important;
}

body.sfx-header-compact #site-header .sfx-brand-wordmark {
  opacity: 0;
  transform: translateY(-50%) scale(.8);
}

body.sfx-header-compact #site-header .sfx-brand-signet {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

@media (max-width: 767px) {
  #site-header .site-branding {
    width: min(15.5rem, calc(100vw - 5rem)) !important;
    height: 5.4rem !important;
    border-radius: 0 0 1rem 0 !important;
  }

  #site-header .sfx-brand-wordmark {
    left: .7rem;
    width: calc(100% - 1.4rem);
  }
}

/* Auf kleinen Viewports bleiben von der seitlichen Kontaktleiste nur die
   Icons sichtbar. Die Desktop-Variante blendet den Text ueber eine
   Transformation aus; diese transformierte Restbreite wird von Browsern
   sonst trotzdem zur Dokumentbreite gerechnet. */
@media (max-width: 880px) {
  #main_wrapper {
    max-width: 100%;
    overflow-x: clip;
  }

  #main_wrapper h1,
  #main_wrapper h2,
  #main_wrapper h3,
  #main_wrapper p,
  #main_wrapper li {
    overflow-wrap: anywhere;
  }

  .e-contact-buttons-var-10 {
    width: 3rem;
    overflow: hidden;
  }

  .e-contact-buttons-var-10 .e-contact-buttons__links-container,
  .e-contact-buttons-var-10 .e-contact-buttons__contact-links {
    width: 3rem;
  }

  .e-contact-buttons-var-10 .e-contact-buttons__contact-icon-link {
    box-sizing: border-box;
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    justify-content: center;
    padding: 0;
    transform: none !important;
  }

  .e-contact-buttons-var-10 .e-contact-buttons__contact-title {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #site-header .site-branding,
  #site-header .sfx-brand-wordmark,
  #site-header .sfx-brand-signet {
    transition-duration: .01ms !important;
  }
}