/**
 * Button Visibility Fix
 * Date: 2025-11-08
 * Stellt sicher, dass alle Buttons sichtbar und korrekt dargestellt werden
 */

/* ================================================================
   ALLGEMEINE BUTTON-SICHTBARKEIT
   ================================================================ */

/* Alle Buttons immer sichtbar machen */
button,
.btn-gradient,
.btn-glass,
.portfolio-cta-button,
.about-cta-buttons a,
.lead-magnet-form button {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    pointer-events: auto !important;
}

/* ================================================================
   PORTFOLIO CTA BUTTONS
   ================================================================ */

.portfolio-cta-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-top: 1.5rem !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.portfolio-cta-button {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem 2rem !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    min-height: 48px !important;
}

.portfolio-cta-button.btn-gradient {
    background: linear-gradient(135deg, #8000ff 0%, #6366f1 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(128, 0, 255, 0.3) !important;
}

.portfolio-cta-button.btn-gradient:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(128, 0, 255, 0.4) !important;
}

.portfolio-cta-button.btn-glass {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(128, 0, 255, 0.3) !important;
    color: #8000ff !important;
}

.portfolio-cta-button.btn-glass:hover {
    background: rgba(128, 0, 255, 0.1) !important;
    border-color: rgba(128, 0, 255, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* ================================================================
   ABOUT CTA BUTTONS
   ================================================================ */

.about-cta-buttons {
    display: flex !important;
    gap: 1rem !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-top: 2rem !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.about-cta-buttons .btn-gradient,
.about-cta-buttons .btn-glass {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem 2rem !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    min-height: 48px !important;
}

.about-cta-buttons .btn-gradient {
    background: linear-gradient(135deg, #8000ff 0%, #6366f1 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(128, 0, 255, 0.3) !important;
}

.about-cta-buttons .btn-gradient:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(128, 0, 255, 0.4) !important;
}

.about-cta-buttons .btn-glass {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(128, 0, 255, 0.3) !important;
    color: #8000ff !important;
}

.about-cta-buttons .btn-glass:hover {
    background: rgba(128, 0, 255, 0.1) !important;
    border-color: rgba(128, 0, 255, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* ================================================================
   LEAD MAGNET FORM BUTTON
   ================================================================ */

.lead-magnet-form {
    opacity: 1 !important;
    visibility: visible !important;
}

.lead-magnet-form button[type="submit"] {
    width: 100% !important;
    padding: 1rem !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #8000ff 0%, #6366f1 100%) !important;
    color: white !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 16px rgba(128, 0, 255, 0.3) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    pointer-events: auto !important;
    min-height: 48px !important;
}

.lead-magnet-form button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(128, 0, 255, 0.4) !important;
}

/* ================================================================
   MOBILE RESPONSIVE
   ================================================================ */

@media (max-width: 768px) {
    .portfolio-cta-buttons,
    .about-cta-buttons {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .portfolio-cta-button,
    .about-cta-buttons .btn-gradient,
    .about-cta-buttons .btn-glass {
        width: 100% !important;
        justify-content: center !important;
    }
}