:root {
  --menicon-blue: #8097ae;
  --menicon-light-blue: #d1dcde;
  --header-height: 14.18svh;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #fff;
  color: #fff;
  /* Avenir follows the PPTX; Segoe UI is the license-safe local fallback. */
  font-family: Avenir, "Avenir Next", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.maintenance-page {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background-color: var(--menicon-blue);
  background-image:
    url("Hintergundbild.png"),
    linear-gradient(
      to bottom,
      #fff 0 var(--header-height),
      transparent var(--header-height) 100%
    ),
    linear-gradient(
      to right,
      var(--menicon-blue) 0 64.6%,
      var(--menicon-light-blue) 64.6% 100%
    );
  background-position: center top, center, center;
  background-repeat: no-repeat;
  background-size: auto 100svh, 100% 100%, 100% 100%;
}

.site-header {
  position: relative;
  z-index: 5;
  height: var(--header-height);
}

.brand-logo {
  position: absolute;
  top: 4.2svh;
  left: 2.38vw;
  width: 15.47vw;
  height: auto;
}

.hero {
  position: relative;
  height: calc(100svh - var(--header-height));
}

.hero-copy {
  position: absolute;
  z-index: 4;
  inset: 0;
}

.hero-copy h1,
.hero-copy p {
  margin: 0;
  font-weight: 400;
}

.hero-copy h1 {
  position: absolute;
  top: calc(30.0991svh - var(--header-height));
  left: 9.125vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 45.775vw;
  height: 34.8148svh;
  padding-left: 1.33svh;
  padding-bottom: 1.51svh;
  font-size: 9.63svh;
  font-weight: 700;
  line-height: 11.94svh;
  letter-spacing: -0.025em;
}

.hero-copy p {
  position: absolute;
  top: calc(66.2565svh - var(--header-height));
  left: 9.125vw;
  width: 37.575vw;
  height: 10.5435svh;
  padding-left: 1.33svh;
  padding-top: 2.23svh;
  font-size: 3.34svh;
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.hero-copy span {
  display: block;
  width: max-content;
  white-space: nowrap;
  transform: scaleX(1.045);
  transform-origin: left center;
}

.hero-copy h1 span {
  transform: scaleX(1.06);
}

.hero-copy p span:nth-child(2) {
  transform: scaleX(1.055);
}

.mobile-motif,
.mobile-worker {
  display: none;
}

@media (min-width: 901px) and (max-aspect-ratio: 8 / 5) {
  .brand-logo {
    width: 27.5svh;
  }

  .hero-copy {
    left: 9.9vw;
  }
}

@media (max-width: 1100px), (max-aspect-ratio: 6 / 7) {
  :root {
    --header-height: clamp(82px, 11.5svh, 104px);
  }

  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .maintenance-page {
    min-height: 100svh;
    background: #fff;
  }

  .site-header {
    background: #fff;
  }

  .brand-logo {
    top: 50%;
    left: clamp(22px, 6vw, 44px);
    width: clamp(188px, 52vw, 276px);
    transform: translateY(-50%);
  }

  .hero {
    min-height: calc(100svh - var(--header-height));
    height: auto;
    overflow: hidden;
    background: var(--menicon-blue);
  }

  .hero::after {
    position: absolute;
    z-index: 0;
    top: 38%;
    right: 0;
    bottom: 0;
    width: 43%;
    background: var(--menicon-light-blue);
    content: "";
  }

  .hero-copy {
    position: relative;
    top: auto;
    left: auto;
    z-index: 4;
    width: 100%;
    padding: clamp(46px, 8svh, 72px) clamp(24px, 7vw, 56px) 0;
  }

  .hero-copy h1 {
    position: static;
    display: block;
    max-width: 690px;
    width: auto;
    height: auto;
    padding: 0;
    font-size: clamp(44px, 12.5vw, 76px);
    line-height: 1.04;
    letter-spacing: -0.04em;
  }

  .hero-copy p {
    position: static;
    max-width: 610px;
    width: auto;
    height: auto;
    margin-top: clamp(22px, 3.5svh, 34px);
    padding: 0;
    font-size: clamp(19px, 5.15vw, 30px);
    line-height: 1.26;
    letter-spacing: -0.015em;
  }

  .hero-copy span,
  .hero-copy h1 span,
  .hero-copy p span:nth-child(2) {
    transform: none;
  }

  .mobile-motif,
  .mobile-worker {
    display: block;
    position: absolute;
    pointer-events: none;
    user-select: none;
  }

  .mobile-motif {
    z-index: 1;
    right: -28%;
    bottom: -2%;
    width: min(134vw, 760px);
    max-width: none;
    opacity: 0.42;
  }

  .mobile-worker {
    z-index: 2;
    bottom: -1px;
    left: 50%;
    width: min(210vw, 1180px);
    max-width: none;
    transform: translateX(-50%);
  }
}

@media (min-width: 701px) and (max-width: 1100px) and (min-aspect-ratio: 4 / 3) {
  .hero-copy {
    padding: clamp(44px, 7svh, 64px) 48% 0 clamp(42px, 5.5vw, 64px);
  }

  .hero-copy h1 {
    font-size: clamp(52px, 6.25vw, 68px);
  }

  .hero-copy p {
    font-size: clamp(21px, 2.35vw, 26px);
  }

  .mobile-motif {
    right: -14%;
    bottom: -18%;
    width: min(70vw, 760px);
  }

  .mobile-worker {
    right: -24vw;
    left: auto;
    width: min(98vw, 1080px);
    transform: none;
  }
}

@media (max-width: 470px) and (max-height: 760px) {
  .hero-copy {
    padding-top: 34px;
  }

  .hero-copy h1 {
    font-size: clamp(36px, 10.8vw, 42px);
  }

  .hero-copy p {
    margin-top: 16px;
    font-size: clamp(15.5px, 4.3vw, 18px);
  }

  .mobile-worker {
    width: 184vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}