/* ==========================================================================
   RESPONSIVE.CSS – Cascade Responsive Fixes (Phase 2)
   Ziel: Desktop unverändert, Mobile/Tablet verbessern
   Einbindung: NACH premium.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GALERIE-OVERLAY – Auf Touch-Geräten dauerhaft sichtbar
   Desktop-Hover bleibt unverändert
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    .gallery-overlay {
        transform: translateY(0) !important;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
        padding: 20px;
    }

    .gallery-card:hover .gallery-overlay {
        transform: translateY(0) !important;
    }
}

/* --------------------------------------------------------------------------
   2. OBSERVER-ANIMATION – Fallback wenn JS blockiert/fehlerhaft
   Inhalte bleiben sichtbar, Animationen funktionieren trotzdem
   -------------------------------------------------------------------------- */
.observer-target {
    opacity: 1;
    transform: translateY(0);
}

/* Wenn JS läuft und IntersectionObserver funktioniert, wird .visible gesetzt.
   Wir nutzen eine kleine Animation statt harter opacity:0. */
.observer-target:not(.visible) {
    opacity: 0.85;
    transform: translateY(15px);
}

.observer-target.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   3. MAX-WIDTH – Nur Medien-Elemente begrenzen, nicht global *
   Überschreibt * { max-width: 100% } aus premium.css
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    * {
        max-width: none;
    }

    img,
    video,
    iframe,
    embed,
    object,
    svg,
    picture {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {
    * {
        max-width: none;
    }

    img,
    video,
    iframe,
    embed,
    object,
    svg,
    picture {
        max-width: 100%;
        height: auto;
    }
}

/* --------------------------------------------------------------------------
   4. HOVER-EFFEKTE – Auf Touch-Geräten deaktivieren
   Nur Geräte mit echtem Hover (Maus) bekommen Hover-Effekte
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    .concept-card:hover,
    .gallery-card:hover,
    .contact-item:hover,
    .info-card:hover,
    .kpi-card:hover,
    .image-card-small:hover {
        transform: none !important;
        box-shadow: var(--shadow-glow) !important;
        border-color: var(--border-color) !important;
        background: var(--bg-card) !important;
    }

    .concept-card:hover::before,
    .gallery-card:hover::before {
        opacity: 0 !important;
        transform: none !important;
    }

    .hero-image-main:hover .hero-main-image,
    .image-card-small:hover .small-image-1,
    .image-card-small:hover .small-image-2,
    .gallery-card:hover .gallery-image {
        transform: none !important;
        animation: none !important;
    }

    .logo-image:hover,
    .footer-logo-image:hover {
        transform: none !important;
    }

    .btn-primary:hover,
    .btn-secondary:hover {
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   5. QR-EINGABEFELD – Unnötiges Padding auf Mobile entfernen
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .qr-input-wrapper::before {
        display: none;
    }

    .qr-simple-input {
        padding-left: 16px;
    }
}

/* --------------------------------------------------------------------------
   6. LEGAL-PAGE PADDING auf Tablets reduzieren
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .legal-page {
        padding: 80px 0 40px;
    }
}

/* --------------------------------------------------------------------------
   7. COOKIE-BANNER auf sehr kleinen Screens stapeln
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .cookie-consent-content {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 16px;
    }

    .cookie-consent-buttons {
        flex-direction: column;
        width: 100%;
    }

    .cookie-consent-buttons .btn {
        width: 100%;
    }

    .cookie-consent {
        padding: 16px;
    }
}

/* --------------------------------------------------------------------------
   8. BUTTON white-space nowrap auf Mobile verhindern
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .btn {
        white-space: normal;
    }
}

/* --------------------------------------------------------------------------
   9. FOOTER-CONTRACT-BUTTON kleiner skalieren
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .footer-contract-btn {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* --------------------------------------------------------------------------
   10. SECTION-OVERLINE besser lesbar
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .section-overline {
        letter-spacing: 1px;
        font-size: 11px;
    }
}

/* --------------------------------------------------------------------------
   11. FOOTER-LINK zum Q-Core.io im Footer stylen
   -------------------------------------------------------------------------- */
.footer-left a {
    color: var(--accent-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-left a:hover {
    color: var(--accent-blue-light);
    text-decoration: underline;
}

@media (hover: none) and (pointer: coarse) {
    .footer-left a:hover {
        text-decoration: none;
    }
}