/* ===================================
   MOBILE ANIMATIONS FIX
   Content lädt sofort ohne Scroll
   =================================== */

@media (max-width: 768px) {
    /* Alle animierten Elemente sofort sichtbar machen */
    .fade-in,
    .slide-in-left,
    .slide-in-right,
    .scale-in,
    .page-content {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    
    /* Sicherstellen dass Content sichtbar ist */
    .content-card,
    .info-box,
    .glass-card {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* FIX: Links in Service Cards auf Mobile klickbar machen */
@media (max-width: 768px) {
    .service-card-modern {
        position: relative;
        cursor: default !important; /* Card selbst nicht klickbar */
        pointer-events: auto !important; /* Card muss klickbar sein für Kind-Elemente */
    }
    
    /* ::before Element darf Links nicht blockieren */
    .service-card-modern::before,
    .service-card-modern::after {
        pointer-events: none !important;
    }
    
    /* Links absolut klickbar machen */
    .service-card-modern a,
    .service-card-modern .read-more,
    a.read-more {
        position: relative !important;
        z-index: 100 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        display: block !important;
        -webkit-tap-highlight-color: rgba(201, 168, 130, 0.3) !important;
        touch-action: manipulation !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }
    
    /* Sicherstellen dass Link-Bereich groß genug ist */
    .service-card-modern a,
    .service-card-modern .read-more {
        padding: 0.75rem 1rem !important;
        margin: -0.75rem -1rem 0 !important;
        min-height: 44px !important; /* Apple's empfohlene Touch-Target-Größe */
    }
    
    /* Hover-Effekte auf Mobile deaktivieren */
    .service-card-modern:hover {
        transform: none !important;
    }
    
    /* Touch-Feedback für Links */
    .service-card-modern a:active,
    .service-card-modern .read-more:active {
        opacity: 0.6 !important;
        background: rgba(201, 168, 130, 0.1) !important;
        border-radius: 8px;
    }
}

/* FIX: Page-Header Abstand zur Navigation auf Mobile */
@media (max-width: 768px) {
    .page-header {
        padding-top: 110px !important;
        min-height: auto !important;
    }
    
    /* Sicherstellen dass nach fixer Navigation genug Platz ist */
    body {
        padding-top: 0 !important;
    }
}

/* Anchor-Links mit Navigation offset auf Mobile */
@media (max-width: 768px) {
    html {
        scroll-padding-top: 160px;
    }
}

/* Auf Desktop etwas weniger padding nötig */
@media (min-width: 769px) {
    html {
        scroll-padding-top: 120px;
    }
}

/* Desktop: Alle Animationen sofort sichtbar machen */
@media (min-width: 769px) {
    .fade-in,
    .slide-in-left,
    .slide-in-right,
    .scale-in,
    .page-content,
    .content-card,
    .info-box,
    .glass-card {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        visibility: visible !important;
    }
}

/* Desktop: Service-Card Links klickbar machen */
@media (min-width: 769px) {
    .service-card-modern .read-more,
    a.read-more {
        position: relative;
        z-index: 10;
        pointer-events: auto;
        cursor: pointer;
    }
    
    /* Service-Card Content über ::before Layer */

/* ===================================
   DESKTOP: SERVICE-CARD EQUAL HEIGHT
   Links immer auf der selben Höhe
   =================================== */
@media (min-width: 769px) {
    .service-card-modern {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    
    .service-card-modern > p {
        flex-grow: 1;
    }
    
    .service-card-modern .read-more {
        margin-top: auto;
    }
}