/* Final visual polish loaded after the established stylesheets. */
.compact-hero-clock {
  display: none;
}

.profile-dialog #login-form .auth-links.auth-register-link {
  display: inline-flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
  white-space: nowrap !important;
}

.profile-dialog #login-form .auth-links.auth-register-link > span,
.profile-dialog #login-form .auth-links.auth-register-link > .text-button {
  display: inline !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

@media (max-width: 1100px) and (hover: hover) and (pointer: fine) {
  .home-page .homepage-hero-content {
    grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr) !important;
    gap: clamp(38px, 6vw, 86px) !important;
    align-items: center !important;
    min-height: calc(100vh - 76px) !important;
    padding-block: clamp(64px, 9vh, 104px) !important;
  }

  .home-page .hero-copy-block {
    align-self: center;
  }

  .home-page .hero-title-build {
    font-size: clamp(4rem, 7.2vw, 6.4rem) !important;
    line-height: .89 !important;
    letter-spacing: -.065em !important;
  }

  .home-page .hero-demo-card {
    display: none !important;
  }

  .compact-hero-clock {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    justify-self: stretch;
    color: #fff;
    isolation: isolate;
  }

  .compact-hero-clock__mark {
    position: relative;
    width: min(16vw, 190px);
    aspect-ratio: 345 / 577;
    margin-inline: auto;
    filter: hue-rotate(0deg) saturate(.92);
    animation: lokalruf-clock-color 18s ease-in-out infinite alternate;
  }

  .compact-hero-clock__mark::before {
    content: none;
  }

  .compact-hero-clock__mark svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .compact-hero-clock__body {
    fill: #bd7737;
  }

  .compact-hero-clock__face {
    fill: #fff;
  }

  .compact-hero-clock__hand {
    stroke: #101820;
    stroke-linecap: round;
    stroke-width: 4;
    transform-box: view-box;
    transform-origin: 82px 269px;
  }

  .compact-hero-clock__hand--hour {
    transform: rotate(var(--device-hour-angle, 0deg));
  }

  .compact-hero-clock__hand--minute {
    stroke-width: 3.5;
    transform: rotate(var(--device-minute-angle, 0deg));
  }

  .compact-hero-clock__pin {
    fill: #101820;
    stroke: #fff;
    stroke-width: 2;
  }

  body.nav-open::before {
    background: rgba(8, 14, 19, .68) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    backdrop-filter: blur(3px) !important;
  }

  body:not(.admin-page) .site-header .nav-links {
    width: min(620px, 58vw) !important;
    min-width: 420px !important;
    padding: 30px clamp(32px, 4vw, 54px) 40px !important;
    border-left: 1px solid rgba(21, 28, 34, .12) !important;
    background: #f5f3ee !important;
    color: #171717 !important;
    box-shadow: -30px 0 80px rgba(0, 0, 0, .28) !important;
  }

  body:not(.admin-page) .site-header .compact-nav-heading {
    margin-bottom: clamp(28px, 5vh, 58px) !important;
    border-bottom-color: rgba(23, 23, 23, .16) !important;
    color: #79756e !important;
  }

  body:not(.admin-page) .site-header .compact-nav-heading button {
    color: #41403d !important;
  }

  body:not(.admin-page) .site-header .nav-links a,
  body:not(.admin-page) .site-header .nav-links .nav-link-button,
  body:not(.admin-page) .site-header.is-on-dark-surface .nav-links a,
  body:not(.admin-page) .site-header.is-on-dark-surface .nav-link-button {
    min-height: 82px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(23, 23, 23, .14) !important;
    border-radius: 0 !important;
    padding: 0 12px 0 0 !important;
    background: transparent !important;
    color: #1d1d1b !important;
    font-size: clamp(1.6rem, 2.7vw, 2.15rem) !important;
    transition: color 180ms ease, padding-left 180ms ease, background-color 180ms ease !important;
  }

  body:not(.admin-page) .site-header .nav-links a::before,
  body:not(.admin-page) .site-header .nav-links .nav-link-button::before {
    color: #a76b3e !important;
  }

  body:not(.admin-page) .site-header .nav-links a::after,
  body:not(.admin-page) .site-header .nav-links .nav-link-button::after {
    color: #a76b3e !important;
  }

  body:not(.admin-page) .site-header .nav-links a.nav-cta,
  body:not(.admin-page) .site-header.is-on-dark-surface .nav-links a.nav-cta {
    border: 0 !important;
    border-bottom: 1px solid rgba(23, 23, 23, .14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #1d1d1b !important;
  }

  body:not(.admin-page) .site-header .nav-links a[aria-current="page"],
  body:not(.admin-page) .site-header .nav-links a:is(:hover, :focus-visible),
  body:not(.admin-page) .site-header .nav-links .nav-link-button:is(:hover, :focus-visible) {
    padding-left: 14px !important;
    background: #ebe5dc !important;
    color: #9b5d31 !important;
  }
}

@media (max-width: 780px) and (hover: hover) and (pointer: fine) {
  .home-page .homepage-hero-content {
    grid-template-columns: minmax(0, 1fr) minmax(190px, .48fr) !important;
    gap: 24px !important;
  }

  .compact-hero-clock__mark {
    width: min(15vw, 160px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .compact-hero-clock__mark {
    animation: none !important;
  }
}

@keyframes lokalruf-clock-color {
  0% { filter: hue-rotate(-5deg) saturate(.88); }
  45% { filter: hue-rotate(10deg) saturate(1.02); }
  100% { filter: hue-rotate(-18deg) saturate(.96); }
}