/*
 * JHB Global Deferred CSS
 * Mobile Utility Links / Offcanvas-Zusatz. Nicht render-blocking laden.
 */

/* =========================================================
   Mobile Utility Links
   ========================================================= */

@media (max-width: 1024px) {
  :root {
    --arrow-size: 14px;
    --icon-contact-size: 24px;
    --text-indent: 36px;
    --row-pad-y: 10px;
    --line-inset: 16px;
    --tap-min: 44px;
  }

  .utility-links {
    position: relative;
    margin-top: 24px;
    padding: 14px 0 8px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 6px;
  }

  .utility-links a {
    display: flex;
    align-items: center;
    position: relative;
    min-height: var(--tap-min);
    padding: var(--row-pad-y) 16px var(--row-pad-y) var(--text-indent);
    color: var(--white);
    font-size: 15px;
    line-height: 1.5;
    text-decoration: none;
    opacity: 0;
    transform: translateY(2px);
    animation: jhb-link-in 320ms ease forwards;
  }

  .utility-links a:nth-of-type(1) { animation-delay: 80ms; }
  .utility-links a:nth-of-type(2) { animation-delay: 120ms; }
  .utility-links a:nth-of-type(3) { animation-delay: 160ms; }
  .utility-links a:nth-of-type(4) { animation-delay: 200ms; }
  .utility-links a:nth-of-type(5) { animation-delay: 240ms; }

  @keyframes jhb-link-in {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .utility-links > a::before {
    content: "❯";
    position: absolute;
    left: 8px;
    top: 50%;
    color: var(--brand);
    font-size: var(--arrow-size);
    line-height: 1;
    transform: translateY(-50%);
    transition: transform 0.18s ease;
  }

  .utility-links > a:hover::before,
  .utility-links > a:focus-visible::before {
    transform: translateY(-50%) translateX(2px);
  }

  .utility-links > a[href*="/leitbild"] {
    font-weight: 600;
  }

  .utility-links .contact-links {
    position: relative;
    margin-top: 12px;
    padding-top: 16px;
  }

  .utility-links .contact-links::before {
    content: "";
    position: absolute;
    left: var(--line-inset);
    right: var(--line-inset);
    top: 0;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    animation: jhb-line 800ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards 220ms;
  }

  @keyframes jhb-line {
    to {
      transform: scaleX(1);
    }
  }

  .utility-links .contact-links a::before {
    position: absolute;
    left: 8px;
    top: 50%;
    color: var(--brand);
    font-size: var(--icon-contact-size);
    line-height: 1;
    transform: translateY(-50%);
    transition: transform 0.14s ease;
  }

  .utility-links .contact-links a[href^="tel:"]::before { content: "\260E"; }
  .utility-links .contact-links a[href^="mailto:"]::before { content: "\2709"; }

  .utility-links a:hover,
  .utility-links a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .utility-links a:focus-visible {
    outline: 2px dashed rgba(255, 255, 255, 0.55);
    outline-offset: 2px;
    border-radius: 4px;
  }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .utility-links a {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .utility-links .contact-links::before {
    animation: none;
    transform: scaleX(1);
  }

  .utility-links > a::before,
  .utility-links .contact-links a::before {
    transition: none;
  }
}