/* ===================================================================
   WhatsApp-Kontakt

   Eigene Datei, weil der Baustein auf Seiten gebraucht wird, die
   unterschiedliche Stylesheets laden (index.html haengt an style.css,
   die Branchenseiten an branchen.css). So steht der Code einmal statt
   doppelt. Wird jeweils NACH dem Seiten-Stylesheet eingebunden.

   Enthaelt zwei Dinge:
   1. .btn-whatsapp  – normaler Button im Textfluss
   2. .wa-float      – schwebender Button unten rechts, nur auf Mobile
   =================================================================== */


/* ===== 0. Verborgen, bis JavaScript den Link gesetzt hat =====

   Die Nummer steht bewusst nicht im HTML, sondern wird von js/whatsapp.js
   zusammengesetzt (Schutz vor Bots, die Nummern aus dem Quelltext lesen).
   Bis das passiert ist, bleibt der Knopf unsichtbar – ohne JavaScript also
   dauerhaft. Daneben steht jeweils ein <noscript>-Hinweis auf die E-Mail.

   Spezifitaet 0,2,0: schlaegt sowohl .btn-whatsapp als auch die
   .wa-float-Regel im Mobile-Media-Query. */
[data-wa]:not(.wa-bereit) {
    display: none;
}

/* Hinweis, der ohne JavaScript an die Stelle des Knopfs tritt */
.wa-noscript {
    display: inline-block;
    padding: 12px 20px;
    border: 1px dashed rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
}

.wa-noscript a {
    color: inherit;
    font-weight: 600;
}


/* ===== 1. Button im Textfluss ===== */

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 12px 24px;
    border: 1px solid #1da851;
    border-radius: 8px;

    background-color: #25d366;
    color: #0b3d1f;

    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none;

    transition: background-color 0.3s ease, transform 0.3s ease,
        box-shadow 0.3s ease;
}

.btn-whatsapp:hover {
    background-color: #1ebe5b;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp .vp-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex: 0 0 auto;
}


/* ===== 2. Schwebender Button (nur Mobile) ===== */

/* Auf dem Desktop bewusst aus: dort stoert er nur, und der Kontaktbereich
   ist ohnehin in Reichweite. */
.wa-float {
    display: none;
}

@media (max-width: 900px) {
    .wa-float {
        position: fixed;
        right: 16px;
        bottom: 16px;
        /* Auf iPhones sitzt unten die Home-Leiste – so bleibt Abstand. */
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        z-index: 998;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 54px;
        height: 54px;
        border-radius: 999px;

        background-color: #25d366;
        color: #0b3d1f;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);

        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .wa-float:hover,
    .wa-float:focus-visible {
        transform: scale(1.06);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    }

    /* Deutlich sichtbarer Fokusrahmen: der Knopf ist per Tab erreichbar. */
    .wa-float:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 3px;
    }

    .wa-float .vp-icon {
        width: 28px;
        height: 28px;
        fill: currentColor;
    }

    /* "Nach oben" sitzt auf der Startseite ebenfalls unten rechts und
       wuerde sich sonst mit dem WhatsApp-Knopf ueberlagern. */
    .btn-top {
        bottom: 84px;
    }

    /* Damit der schwebende Knopf am Seitenende nichts verdeckt. */
    .footer {
        padding-bottom: 72px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .btn-whatsapp,
    .wa-float {
        transition: none;
    }

    .btn-whatsapp:hover,
    .wa-float:hover,
    .wa-float:focus-visible {
        transform: none;
    }
}