/* ========================================================= Pfotennetzwerk – Floating WhatsApp Button Datei: whatsapp-widget.css Diese Datei einmal pro Seite im einbinden: ========================================================= */ :root { --pfoten-wa-green: #25D366; --pfoten-wa-green-dark: #1EBE5A; --pfoten-wa-shadow: rgba(0, 0, 0, 0.25); } #pfoten-wa-widget { position: fixed; bottom: 24px; right: 24px; z-index: 999999; font-family: Arial, Helvetica, sans-serif; } /* --- Button --- */ #pfoten-wa-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--pfoten-wa-green); box-shadow: 0 4px 16px var(--pfoten-wa-shadow); text-decoration: none; cursor: pointer; border: none; outline-offset: 4px; transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; animation: pfoten-wa-pulse 2.4s infinite; } #pfoten-wa-btn:hover, #pfoten-wa-btn:focus-visible { background: var(--pfoten-wa-green-dark); transform: scale(1.08); box-shadow: 0 6px 20px var(--pfoten-wa-shadow); } #pfoten-wa-btn:active { transform: scale(0.96); } #pfoten-wa-btn svg { width: 30px; height: 30px; fill: #ffffff; pointer-events: none; } /* Small unread-style badge, shown until the visitor interacts once */ #pfoten-wa-badge { position: absolute; top: -4px; right: -4px; background: #ff3b30; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 0 0 2px #ffffff; } #pfoten-wa-badge[hidden] { display: none; } /* --- Pulse ring animation --- */ @keyframes pfoten-wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55), 0 4px 16px var(--pfoten-wa-shadow); } 70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0), 0 4px 16px var(--pfoten-wa-shadow); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 4px 16px var(--pfoten-wa-shadow); } } /* --- Tooltip / chat bubble --- */ #pfoten-wa-tooltip { position: absolute; bottom: 6px; right: 74px; max-width: 240px; background: #ffffff; color: #202020; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.35; box-shadow: 0 6px 20px var(--pfoten-wa-shadow); opacity: 0; transform: translateX(10px) scale(0.98); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } #pfoten-wa-tooltip::after { content: ""; position: absolute; right: -6px; bottom: 20px; width: 12px; height: 12px; background: #ffffff; transform: rotate(45deg); box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.05); } #pfoten-wa-tooltip.pfoten-wa-visible { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; } #pfoten-wa-tooltip button { position: absolute; top: 2px; right: 6px; border: none; background: transparent; font-size: 14px; line-height: 1; color: #999; cursor: pointer; padding: 4px; } #pfoten-wa-tooltip button:hover { color: #333; } #pfoten-wa-tooltip strong { display: block; margin-bottom: 2px; color: #128C4A; } /* --- Respect reduced motion preference --- */ @media (prefers-reduced-motion: reduce) { #pfoten-wa-btn { animation: none; } #pfoten-wa-tooltip { transition: none; } } /* --- Mobile adjustments --- */ @media (max-width: 480px) { #pfoten-wa-widget { bottom: 16px; right: 16px; } #pfoten-wa-btn { width: 54px; height: 54px; } #pfoten-wa-btn svg { width: 27px; height: 27px; } #pfoten-wa-tooltip { max-width: calc(100vw - 110px); right: 66px; } }