/* ============================================ */
/* SCHRITT 3: INTERAKTIVE ELEMENTE             */
/* ============================================ */

/* ================================ */
/* HOVER-EFFEKTE & ANIMATIONEN     */
/* ================================ */

/* Sanfte Hover-Effekte für Buttons */
button, .btn, [role="button"], a[class*="bg-"] {
    transition: all 0.3s ease;
}

button:hover, .btn:hover, [role="button"]:hover, a[class*="bg-"]:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

button:active, .btn:active, [role="button"]:active, a[class*="bg-"]:active {
    transform: translateY(0) scale(0.98);
    transition: all 0.1s ease;
}

/* Links mit sanfter Animation */
a {
    position: relative;
    transition: color 0.3s ease;
}

/* Unterstreichung bei Hover für Text-Links */
a:not([class*="bg-"]):not([class*="btn"]):not([role="button"]):not(.whatsapp-float-button) {
    text-decoration: none;
    position: relative;
}

a:not([class*="bg-"]):not([class*="btn"]):not([role="button"]):not(.whatsapp-float-button)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    opacity: 0.7;
    transition: width 0.3s ease;
}

a:not([class*="bg-"]):not([class*="btn"]):not([role="button"]):not(.whatsapp-float-button):hover::after {
    width: 100%;
}

/* Karten-Hover-Effekt */
.card, div[class*="shadow"], article, .service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover, div[class*="shadow"]:hover, article:hover, .service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15) !important;
}

/* Navigation Links sanfte Animation */
nav a, header a {
    transition: color 0.3s ease, transform 0.3s ease;
}

nav a:hover, header a:hover {
    transform: translateX(2px);
}

/* ================================ */
/* SMOOTH ANIMATIONS               */
/* ================================ */

/* Alle Elemente mit sanften Übergängen */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                opacity 0.3s ease;
}

/* Fade-in Animation für Sections beim Scrollen */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

section {
    animation: fadeInUp 0.8s ease-out;
}

/* Icons beim Hover */
i, svg {
    transition: transform 0.3s ease, color 0.3s ease;
}

button:hover i, .btn:hover i, [role="button"]:hover i,
button:hover svg, .btn:hover svg, [role="button"]:hover svg {
    transform: scale(1.1);
}

/* Input-Felder Focus-Animation */
input, textarea, select {
    transition: all 0.3s ease;
}

input:focus, textarea:focus, select:focus {
    transform: scale(1.01);
    box-shadow: 0 0 0 3px rgba(92, 158, 173, 0.1) !important;
}

/* Bilder sanfter Zoom beim Hover */
.card img, article img, .service-card img {
    transition: transform 0.3s ease;
}

.card:hover img, article:hover img, .service-card:hover img {
    transform: scale(1.05);
}

/* Image Container für Overflow Hidden */
.card .image-container, article .image-container {
    overflow: hidden;
}

/* ================================ */
/* LOADING & TRANSITION STATES     */
/* ================================ */

/* Smooth Page Transitions */
.page-transition {
    animation: fadeInUp 0.5s ease-out;
}

/* Skeleton Loading Animation */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.skeleton {
    animation: shimmer 2s infinite;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 1000px 100%;
}

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

@media (max-width: 768px) {
    /* Reduzierte Animationen auf Mobile für bessere Performance */
    button:hover, .btn:hover, [role="button"]:hover {
        transform: translateY(-1px) scale(1.01);
    }
    
    .card:hover, div[class*="shadow"]:hover {
        transform: translateY(-2px);
    }
    
    /* Touch-Feedback */
    button:active, .btn:active, [role="button"]:active, a:active {
        transform: scale(0.95);
    }
}