:root {
  --tono-home-fit-padding-top: clamp(0.75rem, 1.6vw, 1rem);
  --tono-home-fold-gap: var(--tono-home-fit-padding-top);
  --tono-home-fit-scale: 1;
  --tono-home-fit-offset: 0px;
  --agency-hero-fit-scale: 1;
  --tono-home-detach-progress: 0;
  --tono-home-header-fixed-top: 0px;
  --tono-home-header-reserve: 0px;
  --agency-hero-fit-offset: 0px;
  --tono-header-anchor-offset: 9rem;
  --tono-detached-header-scale: 0.90042;
  --tono-detached-header-bar-height-desktop: clamp(4.6rem, 5.6vw, 5.4rem);
  --tono-detached-header-fixed-top-desktop: calc(
    1rem * var(--tono-detached-header-scale)
  );
  --tono-detached-header-gap-desktop: 1rem;
  --tono-detached-header-bar-height-mobile: clamp(4.6rem, 5.6vw, 5.4rem);
  --tono-detached-header-fixed-top-mobile: 0.75rem;
  --tono-detached-header-gap-mobile: 0rem;
}

.tono-home-fit-shell {
  position: relative;
  padding-top: var(--tono-home-fit-padding-top);
  margin-bottom: var(--tono-home-fold-gap);
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    radial-gradient(
      circle at 50% 20%,
      rgba(255, 255, 255, 0.038),
      transparent 40%
    ),
    radial-gradient(
      circle at 50% 80%,
      rgba(108, 231, 255, 0.035),
      transparent 52%
    ),
    radial-gradient(
      circle at 18% 0%,
      rgba(122, 68, 192, 0.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 76% 34%,
      rgba(108, 231, 255, 0.05),
      transparent 24%
    ),
    radial-gradient(
      circle at 22% 56%,
      rgba(122, 68, 192, 0.09),
      transparent 28%
    ),
    radial-gradient(
      circle at 68% 82%,
      rgba(108, 231, 255, 0.04),
      transparent 26%
    ),
    radial-gradient(
      circle at 88% 16%,
      rgba(108, 231, 255, 0.055),
      transparent 24%
    ),
    linear-gradient(180deg, #0b1018 0%, #070b12 52%, #05070d 100%);
  background-size:
    72px 72px,
    72px 72px,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto;
}

[data-tono-home-fixed="true"] .home-navbar-container {
  min-height: var(--tono-home-header-reserve, 0px);
}

.kodivo-page .about-navbar-container,
.kodivo-page .packages-navbar-container,
.kodivo-page .works-navbar-container,
.kodivo-page .impressum-navbar-container,
.kodivo-page .datenschutz-navbar-container {
  min-height: calc(
    var(--tono-detached-header-bar-height-desktop) +
      var(--tono-detached-header-fixed-top-desktop) +
      var(--tono-detached-header-gap-desktop)
  );
}

@media (min-width: 1091px) {
  [data-tono-home-state="attached"]:not([data-tono-home-fixed="true"])
    [data-tono-home-fit-shell] {
    transform: none;
    margin-bottom: var(--tono-home-fold-gap);
  }

  [data-tono-home-fixed="true"] [data-tono-home-fit-shell] {
    padding-top: calc(
      var(--tono-home-fit-padding-top) * var(--agency-hero-fit-scale, 1)
    );
    margin-bottom: var(--tono-home-fold-gap);
  }

  [data-tono-home-state="attached"] .agency-hero-demo-container,
  [data-tono-home-fixed="true"] .agency-hero-demo-container {
    min-height: 0;
  }

  [data-tono-home-fixed="true"] .agency-hero-demo-container {
    transform: scale(var(--agency-hero-fit-scale, 1));
    transform-origin: top center;
    margin-bottom: calc(var(--agency-hero-fit-offset, 0px) * -1);
  }

  [data-tono-home-fit-shell][data-tono-home-fit-ready="false"] {
    visibility: hidden;
  }

  [data-tono-home-fit-shell][data-tono-home-fit-ready="false"]:has(
      .agency-hero-block[data-agency-fit-ready="false"]
        [data-agency-noscript-fit-fallback]
    ) {
    visibility: visible;
  }
}

@media (max-width: 1090px) {
  .tono-home-fit-shell {
    margin-top: calc(-1 * env(safe-area-inset-top));
    padding-top: calc(env(safe-area-inset-top) + 0.75rem);
  }

  .kodivo-page .about-navbar-container,
  .kodivo-page .packages-navbar-container,
  .kodivo-page .works-navbar-container,
  .kodivo-page .impressum-navbar-container,
  .kodivo-page .datenschutz-navbar-container {
    min-height: calc(
      var(--tono-detached-header-bar-height-mobile) +
        var(--tono-detached-header-fixed-top-mobile) +
        var(--tono-detached-header-gap-mobile)
    );
  }
}

:where(#contact, #faq, #hoverRevealCards, #homeContactArc) {
  scroll-margin-top: var(--tono-header-anchor-offset, 9rem);
}