/* Schritt 15: dezente Verfeinerungen und der feste WhatsApp-Kontakt.
   Bilder, Logos, Inhalte und die vorhandenen Abschnittsdateien bleiben erhalten. */
.home-page #leistungen.services,
.home-page #ablauf.process {
  background-image: radial-gradient(ellipse at 100% 10%, rgba(20, 124, 255, .07), transparent 58%);
}

.home-page #ueber-uns.about,
.home-page #kontakt.contact {
  background-image: radial-gradient(ellipse at 0% 0%, rgba(20, 124, 255, .05), transparent 55%);
}

.home-page #leistungen .services-goal,
.home-page #kontakt .contact-book {
  background-image: linear-gradient(135deg, rgba(73, 162, 255, .045), transparent 55%);
}

.home-page #leistungen .services-goal,
.home-page #kontakt .contact-book,
.home-page #ueber-uns .about-portrait {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.home-page #ablauf .process-number {
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.home-page .button,
.home-page .header-cta,
.home-page #ueber-uns .about-contact,
.home-page #ablauf .process-contact,
.home-page #kontakt .contact-book-link {
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-page #leistungen .services-goal:hover,
  .home-page #kontakt .contact-book:hover {
    transform: translateY(-4px);
    border-color: #3b70a8;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .18);
  }

  .home-page #ueber-uns .about-person:hover .about-portrait {
    transform: translateY(-3px);
    border-color: #3b70a8;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
  }

  .home-page #ablauf .process-step:hover .process-number {
    border-color: #49a2ff;
    background: #0d2a4b;
    box-shadow: 0 0 0 5px rgba(73, 162, 255, .045);
  }

  .home-page .button-primary:hover,
  .home-page .header-cta:hover,
  .home-page #ueber-uns .about-contact:hover,
  .home-page #ablauf .process-contact:hover,
  .home-page #kontakt .contact-book-link:hover {
    box-shadow: 0 6px 22px rgba(8, 107, 255, .23);
  }
}

@media (min-width: 821px) {
  .home-page .main-nav a {
    position: relative;
  }

  .home-page .main-nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -9px;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: #49a2ff;
    opacity: 0;
    transform: scaleX(.55);
    transform-origin: left;
    transition: opacity .2s ease, transform .25s ease;
  }

  .home-page .main-nav a:hover::after,
  .home-page .main-nav a:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* Ohne JavaScript und bei reduzierter Bewegung sind Inhalte immer sichtbar. */
.home-page [data-reveal-state] {
  opacity: 1;
}

.has-whatsapp #site-footer .footer-inner {
  padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
}

.whatsapp-float {
  position: fixed;
  z-index: 30;
  right: max(24px, env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 148px;
  min-height: 56px;
  padding: 14px 20px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: #087d49;
  color: #fff;
  box-shadow: 0 7px 24px rgba(0, 0, 0, .28);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.whatsapp-float > svg {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
}

.whatsapp-float:focus-visible {
  outline: 3px solid #49a2ff;
  outline-offset: 5px;
}

.whatsapp-float-hint {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 8px 12px;
  border: 1px solid #254363;
  border-radius: 7px;
  background: #0b1e34;
  color: #f6f8fc;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

.whatsapp-float:focus-visible .whatsapp-float-hint {
  opacity: 1;
  visibility: visible;
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp-float:hover {
    transform: translateY(-2px);
    background: #096c42;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
  }

  .whatsapp-float:hover .whatsapp-float-hint {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 620px) {
  .whatsapp-float {
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 56px;
    min-width: 56px;
    height: 56px;
    padding: 14px;
    gap: 0;
  }

  .whatsapp-float-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .home-page .button,
  .home-page .header-cta,
  .home-page .main-nav a::after,
  .home-page #leistungen .services-goal,
  .home-page #kontakt .contact-book,
  .home-page #kontakt .contact-book-link,
  .home-page #ueber-uns .about-portrait,
  .home-page #ueber-uns .about-contact,
  .home-page #ablauf .process-number,
  .home-page #ablauf .process-contact,
  .whatsapp-float,
  .whatsapp-float-hint {
    transition: none;
  }

  .home-page .button:hover,
  .home-page .header-cta:hover,
  .home-page #leistungen .services-goal:hover,
  .home-page #kontakt .contact-book:hover,
  .home-page #ueber-uns .about-person:hover .about-portrait,
  .whatsapp-float:hover {
    transform: none;
  }
}

@media print {
  .whatsapp-float {
    display: none;
  }

  .has-whatsapp #site-footer .footer-inner {
    padding-bottom: 26px;
  }
}