/**
 * SANFTE BUTTON-EFFEKTE FÜR ALLE OYROPA SEITEN
 * Datum: 26.10.2025
 *
 * Problem behoben: "Zitternde" Buttons bei Hover
 * Lösung: Nur opacity und box-shadow animieren, kein transform mehr
 */

/* ===================================================================
   STANDARD BUTTONS (.service-btn, .cta-button, etc.)
   =================================================================== */

.service-btn,
.cta-button,
.action-btn,
.submit-btn {
    transition: opacity 0.2s ease, box-shadow 0.2s ease !important;
    opacity: 0.95 !important;
}

.service-btn:hover,
.cta-button:hover,
.action-btn:hover,
.submit-btn:hover {
    opacity: 1 !important;
    transform: none !important; /* Entfernt jegliche Bewegung */
    box-shadow: 0 2px 8px rgba(214, 158, 46, 0.25) !important;
}

.service-btn:active,
.cta-button:active,
.action-btn:active,
.submit-btn:active {
    opacity: 0.9 !important;
    box-shadow: 0 1px 4px rgba(214, 158, 46, 0.2) !important;
}

/* ===================================================================
   BESTELLBUTTONS (Gold Gradient)
   =================================================================== */

.paket-bestellung-btn,
.bestellen-btn,
.kaufen-btn {
    background: linear-gradient(135deg, #D69E2E 0%, #F6AD55 100%);
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(214, 158, 46, 0.2);
    opacity: 0.95;
}

.paket-bestellung-btn:hover,
.bestellen-btn:hover,
.kaufen-btn:hover {
    opacity: 1;
    transform: none !important; /* Keine Bewegung */
    box-shadow: 0 3px 12px rgba(214, 158, 46, 0.3);
}

.paket-bestellung-btn:active,
.bestellen-btn:active,
.kaufen-btn:active {
    opacity: 0.9;
    box-shadow: 0 1px 4px rgba(214, 158, 46, 0.3);
}

/* ===================================================================
   ACCORDION BUTTONS (Bootstrap Override)
   =================================================================== */

.accordion-button,
.accordion-paket-header {
    transition: background-color 0.2s ease, opacity 0.2s ease !important;
    transform: none !important; /* Kein translateY */
}

.accordion-button:hover,
.accordion-paket-header:hover {
    background: rgba(214, 158, 46, 0.05) !important;
    opacity: 1 !important;
    transform: none !important;
}

.accordion-button:not(.collapsed),
.accordion-paket-header:not(.collapsed) {
    background: rgba(214, 158, 46, 0.1) !important;
    color: #D69E2E !important;
}

.accordion-button:focus,
.accordion-paket-header:focus {
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Entfernt Bootstrap's default box-shadow auf focus */
.accordion-button:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(214, 158, 46, 0.15) !important;
}

/* ===================================================================
   PRIMARY/SECONDARY BUTTONS
   =================================================================== */

.btn-primary,
.btn-secondary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-info {
    transition: opacity 0.2s ease, box-shadow 0.2s ease !important;
    opacity: 0.95 !important;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-info:hover {
    opacity: 1 !important;
    transform: none !important;
}

.btn-primary:active,
.btn-secondary:active,
.btn-success:active,
.btn-warning:active,
.btn-danger:active,
.btn-info:active {
    opacity: 0.9 !important;
}

/* ===================================================================
   CARD HOVER EFFECTS
   =================================================================== */

.service-card,
.package-card,
.product-card {
    transition: box-shadow 0.2s ease, opacity 0.2s ease !important;
}

.service-card:hover,
.package-card:hover,
.product-card:hover {
    transform: none !important; /* Keine Bewegung */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* ===================================================================
   LINK BUTTONS (button-styled links)
   =================================================================== */

a.btn,
a.service-btn,
a.cta-button {
    display: inline-block;
    text-decoration: none;
    transition: opacity 0.2s ease, box-shadow 0.2s ease !important;
    opacity: 0.95 !important;
}

a.btn:hover,
a.service-btn:hover,
a.cta-button:hover {
    opacity: 1 !important;
    transform: none !important;
    text-decoration: none;
}

/* ===================================================================
   FORM SUBMIT BUTTONS
   =================================================================== */

input[type="submit"],
button[type="submit"],
.form-submit-btn {
    transition: opacity 0.2s ease, box-shadow 0.2s ease !important;
    opacity: 0.95 !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.form-submit-btn:hover {
    opacity: 1 !important;
    transform: none !important;
}

input[type="submit"]:active,
button[type="submit"]:active,
.form-submit-btn:active {
    opacity: 0.9 !important;
}

/* ===================================================================
   MOBILE OPTIMIZATION
   =================================================================== */

@media (max-width: 768px) {
    /* Auf Mobile: Noch subtilere Effekte */
    .service-btn,
    .cta-button,
    .paket-bestellung-btn,
    .accordion-button {
        transition: opacity 0.15s ease !important;
    }

    .service-btn:hover,
    .cta-button:hover,
    .paket-bestellung-btn:hover,
    .accordion-button:hover {
        box-shadow: none !important; /* Auf Mobile: Keine Schatten-Änderung */
    }

    /* Auf Mobile: Tap-Feedback statt Hover */
    .service-btn:active,
    .cta-button:active,
    .paket-bestellung-btn:active {
        opacity: 0.8 !important;
    }
}

/* ===================================================================
   ACCESSIBILITY
   =================================================================== */

/* Für Nutzer die reduzierte Bewegung bevorzugen */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus-Styles für Keyboard-Navigation */
button:focus-visible,
a.btn:focus-visible,
.service-btn:focus-visible {
    outline: 2px solid #D69E2E;
    outline-offset: 2px;
}