/* footer.css — minimaler Footer (Logo, Adresse, Tel, Sprache, Policy-Links)
   + fixierte Floating-Kontakt-Buttons (WhatsApp / Messenger) unten rechts. */

.site-footer {
  background: var(--color-cream);
  border-top: 1px solid var(--color-line);
  padding: 3rem clamp(1rem, 4vw, 2rem) 2.5rem;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.9rem;
}
.site-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.site-footer__logo {
  margin-bottom: 1rem;
}
.site-footer__logo img {
  height: 66px;
  width: auto;
}
.site-footer__line {
  max-width: 680px;
}
.site-footer__label {
  font-weight: 700;
  color: var(--color-text);
}

.site-footer__langs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.site-footer__langs ul {
  display: flex;
  gap: 0.35rem;
}
.site-footer__langs a {
  display: inline-block;
  padding: 0.12em 0.55em;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  border-radius: 4px;
}
.site-footer__langs a.is-active {
  background: var(--color-accent);
  color: #fff;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.4rem;
  margin-top: 0.6rem;
  font-size: 0.82rem;
}
.site-footer__legal a {
  color: var(--color-muted);
}
.site-footer__legal a:hover {
  color: var(--color-accent-strong);
}

/* =====================================================================
   Floating-Kontakt-Buttons
   ===================================================================== */
.floating-contact {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.floating-contact__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  list-style: none;
  transition: transform 0.2s var(--ease);
}
.floating-contact__btn::-webkit-details-marker {
  display: none;
}
.floating-contact__btn:hover {
  transform: scale(1.06);
  color: #fff;
}
.floating-contact__btn .icon {
  width: 28px;
  height: 28px;
}
.floating-contact__btn--wa {
  background: #25d366;
}
.floating-contact__btn--fb {
  background: linear-gradient(45deg, #00b2ff, #006aff);
}

.floating-contact__wa {
  position: relative;
}

/* WhatsApp-Dialog (No-JS via <details>, Strings aus ui.whatsapp) */
.wa-dialog {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 280px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.wa-dialog__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #075e54;
  color: #fff;
  padding: 1rem;
}
.wa-dialog__avatar {
  display: flex;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #25d366;
  align-items: center;
  justify-content: center;
}
.wa-dialog__avatar .icon {
  width: 24px;
  height: 24px;
}
.wa-dialog__title {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}
.wa-dialog__sub {
  display: block;
  font-size: 0.75rem;
  opacity: 0.85;
}
.wa-dialog__cta {
  display: block;
  margin: 1rem;
  padding: 0.7em 1em;
  text-align: center;
  background: #25d366;
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.wa-dialog__cta:hover {
  background: #1da851;
  color: #fff;
}

@media (max-width: 480px) {
  .floating-contact__btn {
    width: 48px;
    height: 48px;
  }
  .wa-dialog {
    width: min(280px, calc(100vw - 40px));
  }
}

/* =====================================================================
   Scroll-to-top-Button (Item 6)
   Runder, fixierter Pfeil-Button rechts unten — sitzt ÜBER dem
   WhatsApp/Messenger-Stack (2×52px + 12px Lücke ab bottom:20px). Startet
   verborgen; nav.mjs schaltet `.is-visible` ab Scroll-Schwelle frei und
   scrollt bei Klick smooth nach oben (reduced-motion -> ohne Animation).
   ===================================================================== */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 148px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s, background-color 0.2s var(--ease);
}
.to-top .icon { width: 20px; height: 20px; transform: rotate(180deg); }
.to-top:hover { background: var(--color-accent-strong); color: #fff; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 480px) { .to-top { width: 44px; height: 44px; right: 20px; bottom: 140px; } }