/* Critical CSS - Above-the-fold Styles - für maximale Performance */
/* Minimiert für schnellstes First Paint */

*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid}
html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none}
body{margin:0;line-height:inherit;background-color:#fff;color:#030712}
#app{min-height:100vh;display:flex;flex-direction:column}

/* Navigation Skeleton für CLS-Prävention - exakte Höhe */
nav{background-color:#1f2937;color:#fff;min-height:56px;height:56px}

/* LCP Target Element Styling - Hero Section */
.lcp-target{contain:layout style paint}

/* Loading State für besseren First Paint */
.app-loading{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(to bottom right,#eff6ff,#e0e7ff)}
.app-loading-spinner{width:48px;height:48px;border:3px solid #e5e7eb;border-top-color:#2563eb;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Dark Mode Support */
.dark body{background-color:#030712;color:#f9fafb}
.dark nav{background-color:#111827}
.dark .app-loading{background:linear-gradient(to bottom right,#111827,#1f2937)}

/* Optimierte GPU-beschleunigte Animationen */
.animate-fade-in{animation:fadeIn 0.3s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Skeleton Animation - GPU-beschleunigt */
.skeleton{background:linear-gradient(90deg,#e5e7eb 25%,#f3f4f6 50%,#e5e7eb 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}