/* ============================================ */
/* SCHRITT 4: WHATSAPP CHAT PROMINENTER        */
/* ============================================ */

/* Füge einen floating WhatsApp Button hinzu via JavaScript */
/* Dies vermeidet Konflikte mit existierenden WhatsApp-Links */

/* Style für den floating WhatsApp Button */
.whatsapp-float-button {
    position: fixed !important;
    top: 120px !important;  /* Unter dem Header positioniert */
    right: 20px !important;
    z-index: 9998 !important;
    background: linear-gradient(135deg, #25d366, #20ba5a) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    gap: 8px !important;
    overflow: hidden !important;
    /* Smooth transitions für alle Eigenschaften */
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s ease !important;
}

/* Icon-only Zustand */
.whatsapp-float-button.icon-only {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    padding: 12px !important;
}

/* Mit Text Zustand */
.whatsapp-float-button.with-text {
    width: 200px !important;  /* Mehr Breite für mehr Rand */
    height: 56px !important;   /* Etwas höher für mehr Raum */
    border-radius: 28px !important;
    padding: 12px 20px !important;  /* Mehr horizontaler Padding */
}

/* Text Animation */
.whatsapp-float-button .whatsapp-text {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
}

.whatsapp-float-button.with-text .whatsapp-text {
    opacity: 1;
    transform: translateX(0);
}

/* Icon bleibt immer sichtbar */
.whatsapp-float-button i {
    transition: transform 0.3s ease;
}

.whatsapp-float-button.with-text i {
    transform: scale(1);
}

/* Sanfter Puls-Effekt ohne Flackern */
@keyframes pulse-whatsapp-soft {
    0% {
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    }
    50% {
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    }
    100% {
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    }
}

.whatsapp-float-button {
    animation: pulse-whatsapp-soft 3s ease-in-out infinite;
}

/* Hover-Effekt nur für den Float Button */
.whatsapp-float-button:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5) !important;
    background: linear-gradient(135deg, #20ba5a, #25d366) !important;
    animation: none;
}

/* WhatsApp Icon im Float Button */
.whatsapp-float-button i {
    font-size: 1.3rem !important;
    flex-shrink: 0;
}

/* Text-Container im Button - mit Animation integriert */
.whatsapp-float-button .whatsapp-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;  /* Rechtsbündig */
    line-height: 1.2 !important;
    white-space: nowrap !important;  /* Verhindert Zeilenumbruch während Animation */
    flex-grow: 1;  /* Nimmt verfügbaren Platz ein */
    text-align: right !important;  /* Text rechtsbündig */
}

.whatsapp-float-button .whatsapp-text .main-text {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}

.whatsapp-float-button .whatsapp-text .sub-text {
    font-size: 0.7rem !important;
    font-weight: 400 !important;
    opacity: 0.9;
}

/* ================================ */
/* MOBILE OPTIMIERUNGEN            */
/* ================================ */

@media (max-width: 768px) {
    /* WhatsApp Button mobile angepasst */
    .whatsapp-float-button {
        top: 100px !important;  /* Oben auf Mobile */
        right: 10px !important;
    }
    
    .whatsapp-float-button.icon-only {
        width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
    }
    
    .whatsapp-float-button.with-text {
        width: 175px !important;  /* Angepasst für Mobile */
        height: 52px !important;
        padding: 10px 16px !important;
        border-radius: 26px !important;
    }
    
    /* Kleinere Schrift auf Mobile */
    .whatsapp-float-button .whatsapp-text .main-text {
        font-size: 0.85rem !important;
    }
    
    .whatsapp-float-button .whatsapp-text .sub-text {
        font-size: 0.65rem !important;
    }
}

/* Landscape Mode Anpassung */
@media (max-height: 500px) {
    .whatsapp-float-button {
        top: 80px !important;  /* Oben im Landscape */
        right: 10px !important;
        padding: 8px 12px !important;
    }
    
    .whatsapp-float-button .whatsapp-text .main-text {
        font-size: 0.8rem !important;
    }
    
    .whatsapp-float-button .whatsapp-text .sub-text {
        font-size: 0.6rem !important;
    }
}

/* Dark Mode Anpassungen */
.dark .whatsapp-float-button {
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.45) !important;
}

.dark .whatsapp-float-button:hover {
    box-shadow: 0 12px 35px rgba(37, 211, 102, 0.6) !important;
}