/* ==========================================
   JIMA MODELS AGENCY - CROSS-PLATFORM OPTIMIZATION
   Optimiert für: Windows, macOS, iOS, Android
   ========================================== */

/* ==========================================
   UNIVERSAL RESETS & BASE
   ========================================== */

/* WICHTIG: Diese Datei überschreibt NICHT die existierenden Styles,
   sondern fügt nur Cross-Platform Optimierungen hinzu */

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    /* Prevent iOS text size adjust */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    /* Smooth scrolling for all platforms */
    scroll-behavior: smooth;
    /* Better touch scrolling on iOS */
    -webkit-overflow-scrolling: touch;
}

body {
    /* Mobile optimizations - don't override existing styles */
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    overscroll-behavior-y: contain;
}

/* ==========================================
   TOUCH & INTERACTION OPTIMIZATION
   ========================================== */

/* Better touch targets (min 44x44px for iOS/Android) */
button, 
a.btn, 
.clickable,
input[type="submit"],
input[type="button"] {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Remove 300ms delay on mobile */
a, button, input, select, textarea {
    touch-action: manipulation;
}

/* Smooth transitions for interactions */
a, button, .btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   FORM OPTIMIZATION FOR ALL PLATFORMS
   ========================================== */

input, textarea, select {
    /* Better mobile keyboard handling */
    font-size: 16px; /* Prevents zoom on iOS */
    /* Remove iOS input shadows */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    /* Better border rendering */
    border-radius: 8px;
    /* Prevent text selection on double-tap */
    -webkit-user-select: text;
    user-select: text;
}

/* Remove spinner from number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* Better select styling across platforms */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
}

/* ==========================================
   RESPONSIVE IMAGES & MEDIA
   ========================================== */

img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Better image rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Prevent layout shift */
img[width], img[height] {
    height: auto;
}

/* ==========================================
   NAVIGATION OPTIMIZATION
   ========================================== */

.main-nav {
    /* Sticky nav optimization */
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Better backdrop on iOS */
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    /* Hardware acceleration */
    transform: translateZ(0);
    will-change: transform;
}

/* Mobile menu optimization */
.mobile-nav {
    /* Smooth slide animation */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Hardware acceleration */
    transform: translateZ(0);
    will-change: transform;
    /* Better scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

/* ==========================================
   SCROLL OPTIMIZATION
   ========================================== */

/* Smooth scrolling sections */
section {
    /* Prevent scroll anchoring issues */
    overflow-anchor: none;
}

/* Better scroll performance */
.scroll-container {
    /* Hardware acceleration */
    transform: translateZ(0);
    will-change: scroll-position;
    /* Better mobile scrolling */
    -webkit-overflow-scrolling: touch;
}

/* ==========================================
   FONT OPTIMIZATION
   ========================================== */

/* Fonts sind bereits in styles.css definiert - nicht überschreiben */
/* Better font loading performance - fonts already loaded via Google Fonts */

/* ==========================================
   ANIMATION OPTIMIZATION
   ========================================== */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Hardware-accelerated animations */
.fade-in,
.slide-in,
.scale-up {
    transform: translateZ(0);
    will-change: opacity, transform;
}

/* ==========================================
   GRID & FLEXBOX OPTIMIZATION
   ========================================== */

/* Grid und Flexbox sind bereits in styles.css definiert */
/* Hier nur Cross-Browser Compatibility hinzufügen */

/* ==========================================
   PLATFORM-SPECIFIC FIXES
   ========================================== */

/* iOS Safari fixes */
@supports (-webkit-touch-callout: none) {
    /* Fix iOS viewport height */
    .page-hero,
    .hero {
        min-height: -webkit-fill-available;
    }
    
    /* Fix iOS input zoom */
    input, textarea, select {
        font-size: 16px !important;
    }
}

/* Android Chrome fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select {
        /* Better select on Android */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    }
}

/* Windows high contrast mode */
@media (prefers-contrast: high) {
    * {
        outline: 2px solid transparent;
        outline-offset: 2px;
    }
    
    button:focus,
    a:focus,
    input:focus {
        outline: 2px solid currentColor;
    }
}

/* ==========================================
   RESPONSIVE BREAKPOINTS
   ========================================== */

/* Mobile First Approach */
@media (max-width: 480px) {
    /* Container padding für bessere mobile UX */
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Tablet */
@media (min-width: 481px) and (max-width: 768px) {
    .container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Container-Größen sind bereits in styles.css definiert */
/* Keine max-width Überschreibungen hier */

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

/* Better focus indicators */
*:focus-visible {
    outline: 3px solid var(--gold, #D4AF37);
    outline-offset: 2px;
}

/* Skip to main content */
.skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--gold, #D4AF37);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10000;
}

.skip-to-main:focus {
    top: 0;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================
   PRINT OPTIMIZATION
   ========================================== */

@media print {
    .main-nav,
    .mobile-nav,
    .theme-toggle,
    .btn,
    footer {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    a[href^="http"]:after {
        content: " (" attr(href) ")";
    }
}

/* ==========================================
   PERFORMANCE OPTIMIZATION
   ========================================== */

/* GPU acceleration for animations */
.animate {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Lazy loading images */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Content visibility for better performance */
.lazy-section {
    content-visibility: auto;
    contain-intrinsic-size: 500px;
}