/* Vereinfachte Glassmorphism-Effekte für MYP Application - Raspberry Pi Optimiert */ /* ===== BASIS GLASS EFFEKTE - STARK VEREINFACHT ===== */ .glass-base { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 255, 255, 0.3); /* Entfernt: backdrop-filter, box-shadow, transition */ } .glass-strong { background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(255, 255, 255, 0.4); /* Entfernt: backdrop-filter, box-shadow */ } .glass-subtle { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.2); /* Entfernt: backdrop-filter, box-shadow */ } /* ===== DARK MODE GLASS - VEREINFACHT ===== */ .dark .glass-base { background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(255, 255, 255, 0.1); /* Entfernt: box-shadow */ } .dark .glass-strong { background: rgba(30, 41, 59, 0.98); border: 1px solid rgba(255, 255, 255, 0.15); /* Entfernt: box-shadow */ } .dark .glass-subtle { background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(255, 255, 255, 0.08); /* Entfernt: box-shadow */ } /* ===== GLASS KARTEN - STARK VEREINFACHT ===== */ .glass-card { background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(229, 231, 235, 0.5); border-radius: 12px; padding: 1.5rem; /* Entfernt: backdrop-filter, box-shadow, transition, hover-transform */ } .dark .glass-card { background: rgba(30, 41, 59, 0.95); border: 1px solid rgba(100, 116, 139, 0.3); /* Entfernt: box-shadow */ } /* ===== GLASS NAVIGATION - VEREINFACHT ===== */ .glass-nav { background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(226, 232, 240, 0.4); border-bottom: 1px solid rgba(203, 213, 225, 0.5); /* Entfernt: backdrop-filter, box-shadow */ } .dark .glass-nav { background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(51, 65, 85, 0.5); /* Entfernt: box-shadow */ } /* ===== GLASS BUTTONS - STARK VEREINFACHT ===== */ .glass-btn { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(226, 232, 240, 0.5); border-radius: 8px; padding: 0.75rem 1.5rem; color: #0f172a; font-weight: 600; /* Entfernt: backdrop-filter, box-shadow, transition, hover-transform */ } .glass-btn:hover { background: rgba(255, 255, 255, 0.99); /* Nur Background-Color Change - keine Transform */ } .glass-btn-primary { background: rgba(0, 115, 206, 0.95); color: white; /* Entfernt: box-shadow */ } .glass-btn-primary:hover { background: rgba(0, 115, 206, 0.99); /* Nur Background-Color Change */ } .dark .glass-btn { background: rgba(30, 41, 59, 0.95); color: #e2e8f0; border: 1px solid rgba(100, 116, 139, 0.5); /* Entfernt: box-shadow */ } .dark .glass-btn:hover { background: rgba(30, 41, 59, 0.99); /* Nur Background-Color Change */ } /* ===== GLASS MODALS - VEREINFACHT ===== */ .glass-modal { background: rgba(255, 255, 255, 0.99); border: 1px solid rgba(226, 232, 240, 0.6); border-radius: 16px; /* Entfernt: backdrop-filter, box-shadow */ } .dark .glass-modal { background: rgba(15, 23, 42, 0.99); border: 1px solid rgba(51, 65, 85, 0.6); /* Entfernt: box-shadow */ } /* ===== GLASS FORM ELEMENTE - VEREINFACHT ===== */ .glass-input { background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(226, 232, 240, 0.5); border-radius: 6px; padding: 0.75rem 1rem; color: #0f172a; /* Entfernt: backdrop-filter, box-shadow, transition */ } .glass-input:focus { outline: none; border-color: rgba(0, 115, 206, 0.5); /* Nur Border-Color Change */ } .dark .glass-input { background: rgba(30, 41, 59, 0.95); border: 1px solid rgba(100, 116, 139, 0.5); color: #e2e8f0; /* Entfernt: box-shadow */ } .dark .glass-input:focus { border-color: rgba(59, 130, 246, 0.5); /* Nur Border-Color Change */ } /* ===== GLASS DROPDOWN - VEREINFACHT ===== */ .glass-dropdown { background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; /* Entfernt: backdrop-filter, box-shadow */ } .dark .glass-dropdown { background: rgba(15, 23, 42, 0.98); border: 1px solid rgba(255, 255, 255, 0.1); /* Entfernt: box-shadow */ } /* ===== UTILITY CLASSES - STARK VEREINFACHT ===== */ .glass-overlay { background: rgba(255, 255, 255, 0.3); /* Entfernt: backdrop-filter */ } .dark .glass-overlay { background: rgba(0, 0, 0, 0.4); /* Entfernt: backdrop-filter */ } /* ===== RESPONSIVE ANPASSUNGEN - VEREINFACHT ===== */ @media (max-width: 768px) { .glass-card { padding: 1rem; border-radius: 8px; } .glass-modal { border-radius: 12px; } /* Entfernt: backdrop-filter Reduzierung */ } /* ===== REDUZIERTE BEWEGUNG - ERWEITERT ===== */ @media (prefers-reduced-motion: reduce) { .glass-card, .glass-btn, .glass-input { transition: none !important; transform: none !important; } } /* ===== HOHER KONTRAST MODUS - VEREINFACHT ===== */ @media (prefers-contrast: high) { .glass-base, .glass-strong, .glass-card { border-width: 2px; /* Entfernt: backdrop-filter */ } } /* ===== PERFORMANCE OPTIMIERUNGEN ENTFERNT ===== */ /* Entfernt: will-change Properties für bessere Performance auf schwacher Hardware */