/* Systeme Optimiert Performance Light CSS */
/* Sehr leichte Optimierungen - KEINE Design-Änderungen */

/* 1. LAZY LOADING (unsichtbar) */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

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

/* 2. ACCESSIBILITY (unsichtbar) */
@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;
    }
}

/* 3. DARK MODE SUPPORT (optional) */
@media (prefers-color-scheme: dark) {
    /* Sehr sanfte Anpassungen */
    body {
        background-color: #0f172a;
        color: #f1f5f9;
    }
}

/* 4. PRINT STYLES */
@media print {
    .no-print {
        display: none !important;
    }
    
    a {
        text-decoration: underline !important;
        color: #000 !important;
    }
}

/* 5. PERFORMANCE OPTIMIZATIONS (unsichtbar) */
/* Font loading optimization */
body {
    font-display: swap;
    text-rendering: optimizeLegibility;
}

/* 6. NETWORK STATUS INDICATOR (dezent) */
.network-status-light {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 9999;
    opacity: 0.6;
    pointer-events: none;
}

.network-status-light.online {
    background-color: #22c55e;
}

.network-status-light.offline {
    background-color: #ef4444;
    animation: pulse-light 2s infinite;
}

@keyframes pulse-light {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.3; }
}

/* 7. LOADING STATES (sehr dezent) */
.skeleton-light {
    background: linear-gradient(90deg, #f8fafc 25%, #f1f5f9 50%, #f8fafc 75%);
    background-size: 200% 100%;
    animation: skeleton-light-load 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes skeleton-light-load {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 8. SMOOTH SCROLLING */
html {
    scroll-behavior: smooth;
}

/* 9. TOUCH TARGETS (Barrierefreiheit) */
button, 
a.button, 
input[type="submit"],
input[type="button"] {
    min-height: 44px;
    min-width: 44px;
}

/* 10. VISUALLY HIDDEN (für Screen Reader) */
.visually-hidden-light {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 11. HIGH CONTRAST MODE */
@media (prefers-contrast: high) {
    :root {
        --text-color: #000000;
        --background-color: #ffffff;
        --border-color: #000000;
    }
}

/* 12. PERFORMANCE NOTIFICATION (dezent) */
.perf-notification-light {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 16px;
    border-radius: 6px;
    z-index: 10000;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    max-width: 280px;
    font-size: 14px;
    pointer-events: none;
}

.perf-notification-light.visible {
    opacity: 1;
    transform: translateY(0);
}