/* =================================================================
   DOTPIXEL WEBSITE - OPTIMIZED CSS v2.0
   ================================================================= */

/* CSS Reset & Base */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth;overflow-x:hidden}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333;background:#000;overflow-x:hidden;position:relative;--gap:5em;--line:1px;--color:rgba(255,255,255,0.2);background-image:linear-gradient(-90deg,transparent calc(var(--gap) - var(--line)),var(--color) calc(var(--gap) - var(--line) + 1px),var(--color) var(--gap)),linear-gradient(0deg,transparent calc(var(--gap) - var(--line)),var(--color) calc(var(--gap) - var(--line) + 1px),var(--color) var(--gap));background-size:var(--gap) var(--gap)}body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-2;background:radial-gradient(ellipse 800px 400px at 3% 50%,rgba(138,43,226,0.4) 0%,transparent 70%),radial-gradient(ellipse 600px 300px at 90% 50%,rgba(147,112,219,0.3) 0%,transparent 70%);animation:purpleGlow 4s ease-in-out infinite}@keyframes purpleGlow{0%,100%{opacity:0.4}25%{opacity:0.7}50%{opacity:0.9}75%{opacity:0.6}}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 20px;width:100%}

/* Navigation */
.navbar{position:fixed;top:0;width:100%;background:rgba(0,0,0,0.85);backdrop-filter:blur(15px);z-index:1000;padding:0.75rem 0;transition:all 0.3s ease;border-bottom:1px solid rgba(255,255,255,0.1)}.nav-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 2rem}.nav-logo a{color:#fff;text-decoration:none;font-family:"Helvetica Neue",sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:1px;transition:color 0.3s ease}.nav-logo a:hover{color:rgba(138,43,226,0.8)}.nav-menu{display:flex;list-style:none;margin:0 auto;padding:0;gap:0.5rem;align-items:center;justify-content:center;/* Zentriert die Links */}.nav-link{color:#fff;text-decoration:none;font-family:"Helvetica Neue",sans-serif;font-size:0.95rem;font-weight:500;letter-spacing:0.5px;transition:all 0.3s ease;position:relative;padding:0.5rem 1rem;border-radius:25px}.nav-link:hover{color:rgba(138,43,226,0.9);background:rgba(255,255,255,0.1);backdrop-filter:blur(10px)}.nav-link::after{content:'';position:absolute;width:0;height:2px;bottom:-5px;left:50%;background:rgba(138,43,226,0.8);transition:all 0.3s ease}.nav-link:hover::after{width:80%;left:10%}

/* Mobile Menu */
.mobile-menu-toggle{display:none;flex-direction:column;justify-content:space-between;width:30px;height:25px;background:none;border:none;cursor:pointer;padding:0;z-index:1002;position:relative}.mobile-menu-toggle span{width:100%;height:3px;background:#fff;border-radius:3px;transition:all 0.3s ease;transform-origin:center}.mobile-menu-toggle:hover span{background:rgba(138,43,226,0.8)}.mobile-menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(6px,6px);background:rgba(138,43,226,0.9)}.mobile-menu-toggle.active span:nth-child(2){opacity:0}.mobile-menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px);background:rgba(138,43,226,0.9)}

/* Language Selector */
.nav-language{position:fixed;top:15px;right:60px;z-index:1001}.language-selector{position:relative;display:inline-block}.language-btn{display:flex;align-items:center;gap:0.5rem;background:rgba(138,43,226,0.8);border:1px solid rgba(255,255,255,0.3);border-radius:25px;padding:0.75rem 1.25rem;color:#fff;font-family:"Helvetica Neue",sans-serif;font-size:0.9rem;font-weight:500;cursor:pointer;transition:all 0.3s ease;backdrop-filter:blur(10px);min-width:80px}.language-btn:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);transform:translateY(-2px);box-shadow:0 4px 15px rgba(138,43,226,0.3)}.language-dropdown{position:absolute;top:100%;right:0;background:rgba(0,0,0,0.95);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.15);border-radius:15px;padding:0.75rem;margin-top:0.5rem;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all 0.3s ease;z-index:1002;min-width:130px;box-shadow:0 10px 30px rgba(0,0,0,0.5)}.language-selector:hover .language-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.language-option{display:flex;align-items:center;gap:0.75rem;background:none;border:none;color:#fff;font-family:"Helvetica Neue",sans-serif;font-size:0.9rem;font-weight:500;padding:0.75rem 1rem;cursor:pointer;transition:all 0.3s ease;border-radius:10px;width:100%;text-align:left}.language-option:hover{background:rgba(138,43,226,0.3);transform:translateX(5px)}

/* Hero Section */
.hero-section{min-height:100vh;display:flex;align-items:center;position:relative;background:rgba(255,255,255,0.02);padding-top:0;margin-top:0}.hero-content{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;min-height:90vh;padding:0}.hero-text{display:flex;flex-direction:column;gap:2.5rem}.hero-badge{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(138,43,226,0.2);border:1px solid rgba(138,43,226,0.3);border-radius:25px;padding:0.8rem 1.5rem;width:fit-content;font-family:"Helvetica Neue",sans-serif;font-size:0.9rem;color:#fff;font-weight:500;backdrop-filter:blur(10px)}.hero-badge span:first-child{font-size:1.2rem}.main-title{font-family:"Helvetica Neue",sans-serif;font-size:4.5rem;font-weight:900;color:#fff;margin:0;letter-spacing:2px;line-height:1.1;text-transform:uppercase}.highlight{background:linear-gradient(45deg,#667eea 0%,#764ba2 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.animated-xx{background:linear-gradient(45deg,#00ffff,#ff00ff,#ffff00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:xxGlow 2s ease-in-out infinite alternate;display:inline-block;transform-origin:center}@keyframes xxGlow{0%{filter:brightness(1) hue-rotate(0deg);transform:scale(1);text-shadow:0 0 20px rgba(0,255,255,0.8)}50%{filter:brightness(1.3) hue-rotate(180deg);transform:scale(1.1);text-shadow:0 0 40px rgba(255,0,255,0.9)}100%{filter:brightness(1) hue-rotate(360deg);transform:scale(1);text-shadow:0 0 20px rgba(255,255,0,0.8)}}.main-description{font-family:"Helvetica Neue",sans-serif;font-size:1.2rem;color:rgba(255,255,255,0.8);line-height:1.6;margin:0;max-width:500px}

/* Hero Stats */
.hero-stats{display:flex;gap:2rem}.hero-stats .stat-item{display:flex;flex-direction:column;align-items:flex-start}.hero-stats .stat-number{font-family:"Helvetica Neue",sans-serif;font-size:2rem;font-weight:700;color:#00ff88;margin-bottom:0.3rem}.hero-stats .stat-label{font-family:"Helvetica Neue",sans-serif;font-size:0.8rem;color:rgba(255,255,255,0.6);text-transform:uppercase;letter-spacing:0.5px}

/* Hero Actions */
.hero-actions{display:flex;gap:1rem}.cta-button{padding:1rem 2rem;font-family:"Helvetica Neue",sans-serif;font-size:1rem;font-weight:600;border-radius:50px;cursor:pointer;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:1px;border:none;position:relative;overflow:hidden}.cta-button.primary{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;box-shadow:0 10px 30px rgba(102,126,234,0.3)}.cta-button.secondary{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.3);backdrop-filter:blur(10px)}.cta-button:hover{transform:translateY(-3px)}.cta-button.primary:hover{box-shadow:0 15px 40px rgba(102,126,234,0.4);background:linear-gradient(135deg,#764ba2 0%,#667eea 100%)}.cta-button.secondary:hover{border-color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.1)}

/* Hero Visual */
.hero-visual{display:flex;justify-content:center;align-items:center}.hero-showcase{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:1.5rem;width:100%;max-width:500px}.showcase-card{position:relative;background:rgba(255,255,255,0.05);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:1.5rem;transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);overflow:hidden;animation:cardFloat 6s ease-in-out infinite}.showcase-card:nth-child(1){animation-delay:0s}.showcase-card:nth-child(2){animation-delay:2s}.showcase-card:nth-child(3){animation-delay:4s}@keyframes cardFloat{0%,100%{transform:translateY(0px) rotate(0deg)}25%{transform:translateY(-8px) rotate(1deg)}50%{transform:translateY(-15px) rotate(0deg)}75%{transform:translateY(-8px) rotate(-1deg)}}.showcase-card:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.3);transform:translateY(-10px) scale(1.05) rotate(2deg);box-shadow:0 20px 40px rgba(0,0,0,0.3)}.showcase-card.main-card{grid-column:1/-1;grid-row:1/2;padding:2rem;animation:mainCardFloat 8s ease-in-out infinite}@keyframes mainCardFloat{0%,100%{transform:translateY(0px) scale(1)}50%{transform:translateY(-12px) scale(1.02)}}.showcase-card .card-content{position:relative;z-index:2;display:flex;flex-direction:column;gap:1rem}.card-icon{font-size:2rem;margin-bottom:0.5rem}.showcase-card h3{font-family:"Helvetica Neue",sans-serif;font-size:1.2rem;font-weight:600;color:#fff;margin:0;transition:color 0.3s ease}.showcase-card:hover h3{color:#00ff88}.showcase-card p{font-family:"Helvetica Neue",sans-serif;font-size:0.9rem;color:rgba(255,255,255,0.7);line-height:1.5;margin:0;transition:color 0.3s ease}.showcase-card:hover p{color:rgba(255,255,255,0.9)}.tech-tags{display:flex;gap:0.5rem;flex-wrap:wrap}.tech-tags span{background:rgba(138,43,226,0.2);border:1px solid rgba(138,43,226,0.3);color:#fff;padding:0.3rem 0.6rem;border-radius:12px;font-family:"Helvetica Neue",sans-serif;font-size:0.7rem;font-weight:500;transition:all 0.3s ease}.tech-tags span:hover{background:rgba(0,255,136,0.2);border-color:rgba(0,255,136,0.4);color:#00ff88;transform:translateY(-2px) scale(1.05);box-shadow:0 5px 15px rgba(0,255,136,0.3)}

/* Sections */
section{padding:100px 0;position:relative}.section-header{text-align:center;margin-bottom:60px}.section-header h2{font-family:"Helvetica Neue",sans-serif;font-size:3rem;font-weight:700;color:#fff;margin:0 0 1rem 0;letter-spacing:2px}.section-header p{font-family:"Helvetica Neue",sans-serif;font-size:1.2rem;color:rgba(255,255,255,0.7);margin:0}

/* About Section */
.about-section{background:rgba(255,255,255,0.02);position:relative;overflow:hidden}.about-hero{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-bottom:80px}.about-hero-content{position:relative;text-align:center}.about-badge{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(138,43,226,0.2);border:1px solid rgba(138,43,226,0.3);padding:0.5rem 1rem;border-radius:50px;margin-bottom:2rem;backdrop-filter:blur(10px)}.about-badge span:first-child{font-size:1.2rem}.about-badge span:last-child{font-family:"Helvetica Neue",sans-serif;font-size:0.9rem;color:rgba(255,255,255,0.9);font-weight:500}.about-hero-content h3{font-family:"Helvetica Neue",sans-serif;font-size:2.5rem;font-weight:700;color:#fff;margin:0 0 1.5rem 0;background:linear-gradient(45deg,#fff,#e0e0e0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.about-hero-content p{font-family:"Helvetica Neue",sans-serif;font-size:1.2rem;color:rgba(255,255,255,0.8);line-height:1.7;margin:0}.about-hero-visual{position:relative;height:400px;display:flex;justify-content:center;align-items:center}.floating-card{position:absolute;background:rgba(255,255,255,0.1);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.2);border-radius:20px;padding:1.5rem;display:flex;align-items:center;gap:1rem;transition:all 0.3s ease;animation:float 6s ease-in-out infinite}.floating-card:hover{transform:translateY(-10px) scale(1.05);background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3)}.card-1{top:10%;left:5%;animation-delay:0s}.card-2{top:30%;right:5%;animation-delay:2s}.card-3{bottom:10%;left:15%;animation-delay:4s}@keyframes float{0%,100%{transform:translateY(0px)}50%{transform:translateY(-20px)}}.card-icon{font-size:2rem;width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:rgba(138,43,226,0.3);border-radius:12px}.card-content h4{font-family:"Helvetica Neue",sans-serif;font-size:1.1rem;font-weight:600;color:#fff;margin:0 0 0.3rem 0}.card-content p{font-family:"Helvetica Neue",sans-serif;font-size:0.9rem;color:rgba(255,255,255,0.7);margin:0}

/* Stats Section */
.stats-section{margin-bottom:80px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.stat-card{background:rgba(255,255,255,0.05);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:2rem;text-align:center;transition:all 0.3s ease;position:relative;overflow:hidden}.stat-card:hover{transform:translateY(-5px);background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2)}.stat-number{display:flex;align-items:baseline;justify-content:center;gap:0.2rem;margin-bottom:1rem}.counter{font-family:"Helvetica Neue",sans-serif;font-size:3rem;font-weight:900;color:#fff;background:linear-gradient(45deg,#fff,#e0e0e0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.plus{font-family:"Helvetica Neue",sans-serif;font-size:2rem;font-weight:700;color:rgba(255,255,255,0.8)}.stat-card h4{font-family:"Helvetica Neue",sans-serif;font-size:1.2rem;font-weight:600;color:#fff;margin:0 0 0.5rem 0}.stat-card p{font-family:"Helvetica Neue",sans-serif;font-size:0.9rem;color:rgba(255,255,255,0.7);margin:0}

/* Features Section */
.features-section{padding:80px 0}.features-header{text-align:center;margin-bottom:60px}.features-header h3{font-family:"Helvetica Neue",sans-serif;font-size:2.5rem;font-weight:700;color:#fff;margin:0 0 1rem 0;background:linear-gradient(45deg,#fff,#e0e0e0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.features-header p{font-family:"Helvetica Neue",sans-serif;font-size:1.1rem;color:rgba(255,255,255,0.7);margin:0;max-width:600px;margin:0 auto}.tech-stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:3rem;margin-bottom:80px}.tech-category{background:rgba(255,255,255,0.05);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:2rem;transition:all 0.3s ease}.tech-category:hover{transform:translateY(-5px);background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2)}.tech-category h4{font-family:"Helvetica Neue",sans-serif;font-size:1.3rem;font-weight:600;color:#fff;margin:0 0 1.5rem 0;text-align:center}.tech-items{display:flex;flex-wrap:wrap;gap:0.8rem;justify-content:center}.tech-tag{background:rgba(138,43,226,0.2);border:1px solid rgba(138,43,226,0.3);color:#fff;padding:0.5rem 1rem;border-radius:25px;font-family:"Helvetica Neue",sans-serif;font-size:0.9rem;font-weight:500;transition:all 0.3s ease;cursor:pointer}.tech-tag:hover{background:rgba(138,43,226,0.4);border-color:rgba(138,43,226,0.6);transform:scale(1.05)}

/* Process Section */
.process-section{text-align:center}.process-section h4{font-family:"Helvetica Neue",sans-serif;font-size:2rem;font-weight:600;color:#fff;margin:0 0 3rem 0}.process-line{display:flex;align-items:center;justify-content:center;gap:1rem;max-width:900px;margin:0 auto;flex-wrap:nowrap}.process-item{display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding:1rem;background:rgba(255,255,255,0.05);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.1);border-radius:15px;transition:all 0.3s ease;min-width:100px;flex:1}.process-item:hover{transform:translateY(-5px);background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2)}.process-number{width:35px;height:35px;background:linear-gradient(45deg,rgba(138,43,226,0.8),rgba(147,112,219,0.8));border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"Helvetica Neue",sans-serif;font-size:1rem;font-weight:700;color:#fff;position:relative}.process-item h5{font-family:"Helvetica Neue",sans-serif;font-size:0.9rem;font-weight:600;color:#fff;margin:0;text-align:center}.process-arrow{font-size:1.2rem;color:rgba(138,43,226,0.8);font-weight:bold}

/* Services Section */
.services-section{padding:100px 0;background:rgba(255,255,255,0.02)}.services-header{text-align:center;margin-bottom:60px}.services-header h3{font-family:"Helvetica Neue",sans-serif;font-size:2.5rem;font-weight:700;color:#fff;margin:0 0 1rem 0}.services-header p{font-family:"Helvetica Neue",sans-serif;font-size:1.1rem;color:rgba(255,255,255,0.7);margin:0;max-width:600px;margin:0 auto}.services-showcase{margin-bottom:60px}.service-main{background:rgba(255,255,255,0.05);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:3rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin-bottom:3rem}.service-badge{font-size:3rem;margin-bottom:1.5rem}.service-main-content h4{font-family:"Helvetica Neue",sans-serif;font-size:2rem;font-weight:700;color:#fff;margin:0 0 1rem 0}.service-main-content p{font-family:"Helvetica Neue",sans-serif;font-size:1.1rem;color:rgba(255,255,255,0.8);line-height:1.6;margin:0 0 1.5rem 0}.service-features{display:flex;gap:0.8rem;flex-wrap:wrap}.feature-tag{background:rgba(138,43,226,0.2);border:1px solid rgba(138,43,226,0.3);color:#fff;padding:0.4rem 1rem;border-radius:15px;font-family:"Helvetica Neue",sans-serif;font-size:0.85rem;font-weight:500}.service-main-visual{display:flex;justify-content:center;align-items:center}.mac-window{background:rgba(40,44,52,0.95);border-radius:10px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,0.3);max-width:450px;width:100%;backdrop-filter:blur(10px)}.window-header{background:rgba(60,64,72,0.9);padding:12px 20px;display:flex;align-items:center;justify-content:space-between}.window-controls{display:flex;gap:8px}.control{width:12px;height:12px;border-radius:50%}.control.close{background:#ff5f56}.control.minimize{background:#ffbd2e}.control.maximize{background:#27ca3f}.window-title{font-family:"Helvetica Neue",sans-serif;font-size:0.9rem;color:rgba(255,255,255,0.8);font-weight:500}.code-editor{display:flex;min-height:200px}.line-numbers{background:rgba(50,54,62,0.8);color:rgba(255,255,255,0.4);padding:15px 12px;min-width:40px;display:flex;flex-direction:column;gap:4px;font-family:'Monaco','Courier New',monospace;font-size:0.8rem}.code-content{flex:1;padding:15px;color:#fff;font-family:'Monaco','Courier New',monospace;font-size:0.8rem;line-height:1.5}.code-line{margin-bottom:4px}.keyword{color:#c678dd}.variable{color:#e06c75}.string{color:#98c379}.function{color:#61afef}.comment{color:#5c6370}.services-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}.service-item{background:rgba(255,255,255,0.05);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.1);border-radius:15px;padding:2rem;text-align:center;transition:all 0.3s ease}.service-item:hover{transform:translateY(-5px);background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2)}.service-icon{font-size:2.5rem;margin-bottom:1rem;display:block}.service-item h4{font-family:"Helvetica Neue",sans-serif;font-size:1.2rem;font-weight:600;color:#fff;margin:0 0 1rem 0}.service-tech{display:flex;gap:0.5rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}.tech-badge{background:rgba(138,43,226,0.2);border:1px solid rgba(138,43,226,0.3);color:#fff;padding:0.3rem 0.8rem;border-radius:15px;font-family:"Helvetica Neue",sans-serif;font-size:0.8rem;font-weight:500}

/* Portfolio Section */
.portfolio-section{padding:100px 0;background:rgba(255,255,255,0.02)}.portfolio-header{text-align:center;margin-bottom:60px}.portfolio-header h3{font-family:"Helvetica Neue",sans-serif;font-size:2.5rem;font-weight:700;color:#fff;margin:0 0 1rem 0}.portfolio-header p{font-family:"Helvetica Neue",sans-serif;font-size:1.1rem;color:rgba(255,255,255,0.7);margin:0}.portfolio-layout{max-width:1000px;margin:0 auto}.portfolio-row{display:grid;gap:2rem;margin-bottom:2rem}.portfolio-row.top-row{grid-template-columns:3fr 1fr 1fr}.portfolio-row.bottom-row{grid-template-columns:2fr 3fr}.portfolio-card{background:rgba(255,255,255,0.05);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:2rem;transition:all 0.3s ease;position:relative;overflow:hidden;min-height:300px}.portfolio-card:hover{transform:translateY(-5px);background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2)}.card-bg{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(138,43,226,0.1),rgba(147,112,219,0.05));opacity:0;transition:opacity 0.3s ease}.portfolio-card:hover .card-bg{opacity:1}.card-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.project-badge{font-size:1.5rem}.project-status{background:rgba(0,255,136,0.2);border:1px solid rgba(0,255,136,0.4);color:#00ff88;padding:0.3rem 0.8rem;border-radius:15px;font-family:"Helvetica Neue",sans-serif;font-size:0.8rem;font-weight:500}.portfolio-card h4{font-family:"Helvetica Neue",sans-serif;font-size:1.3rem;font-weight:600;color:#fff;margin:0 0 1rem 0}.portfolio-card p{font-family:"Helvetica Neue",sans-serif;font-size:0.9rem;color:rgba(255,255,255,0.8);line-height:1.5;margin:0 0 1.5rem 0;flex:1}.project-metrics{display:flex;gap:1.5rem;margin-bottom:1.5rem}.metric{text-align:center}.metric-value{font-family:"Helvetica Neue",sans-serif;font-size:1.3rem;font-weight:700;color:#00ff88;display:block}.metric-label{font-family:"Helvetica Neue",sans-serif;font-size:0.8rem;color:rgba(255,255,255,0.6);text-transform:uppercase}.project-tech{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1rem}.tech-tag{background:rgba(138,43,226,0.2);border:1px solid rgba(138,43,226,0.3);color:#fff;padding:0.3rem 0.8rem;border-radius:15px;font-family:"Helvetica Neue",sans-serif;font-size:0.8rem;font-weight:500}.brand-watermark{font-family:"Helvetica Neue",sans-serif;font-size:0.8rem;color:rgba(255,255,255,0.4);text-align:center;margin-top:auto}

/* Contact Section */
.contact-section{padding:100px 0;background:rgba(255,255,255,0.02)}.contact-content{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}.contact-info h3{font-family:"Helvetica Neue",sans-serif;font-size:2.5rem;font-weight:700;color:#fff;margin:0 0 1rem 0}.contact-info p{font-family:"Helvetica Neue",sans-serif;font-size:1.1rem;color:rgba(255,255,255,0.8);margin:0 0 2rem 0}.contact-details{display:flex;flex-direction:column;gap:1rem}.contact-item{display:flex;align-items:center;gap:1rem;background:rgba(255,255,255,0.05);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);border-radius:15px;padding:1rem;transition:all 0.3s ease}.contact-item:hover{transform:translateY(-2px);background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2)}.contact-icon{font-size:1.3rem}.contact-item span:last-child{font-family:"Helvetica Neue",sans-serif;color:#fff;font-weight:500}.contact-form{background:rgba(255,255,255,0.05);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:2rem}.form-group{margin-bottom:1.5rem}.form-group input,.form-group textarea{width:100%;padding:1rem;border:1px solid rgba(255,255,255,0.2);border-radius:10px;background:rgba(255,255,255,0.05);color:#fff;font-family:"Helvetica Neue",sans-serif;font-size:1rem;transition:border-color 0.3s ease;backdrop-filter:blur(10px)}.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,0.5)}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:rgba(138,43,226,0.6);background:rgba(255,255,255,0.08)}.submit-button{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:1rem 2rem;border:none;border-radius:10px;cursor:pointer;font-family:"Helvetica Neue",sans-serif;font-size:1rem;font-weight:600;transition:all 0.3s ease;width:100%}.submit-button:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(102,126,234,0.3)}

/* Footer */
.footer{background:rgba(0,0,0,0.8);color:#fff;padding:3rem 0 1rem;backdrop-filter:blur(20px)}.footer-content{display:grid;grid-template-columns:1fr 2fr;gap:3rem;margin-bottom:2rem}.footer-logo h3{font-family:"Helvetica Neue",sans-serif;font-size:1.5rem;font-weight:700;color:#fff;margin:0 0 0.5rem 0}.footer-logo p{font-family:"Helvetica Neue",sans-serif;color:rgba(255,255,255,0.7);margin:0}.footer-links{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}.footer-section h4{font-family:"Helvetica Neue",sans-serif;font-size:1.1rem;font-weight:600;color:#fff;margin:0 0 1rem 0}.footer-section ul{list-style:none}.footer-section li{margin-bottom:0.5rem}.footer-section a{color:rgba(255,255,255,0.7);text-decoration:none;font-family:"Helvetica Neue",sans-serif;transition:color 0.3s ease}.footer-section a:hover{color:rgba(138,43,226,0.8)}.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.6)}

/* Cookie Banner */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:rgba(0,0,0,0.95);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,0.1);z-index:9999;padding:1.5rem;transform:translateY(100%);transition:transform 0.4s ease}.cookie-banner.show{transform:translateY(0)}.cookie-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:2rem}.cookie-text h4{font-family:"Helvetica Neue",sans-serif;color:#fff;margin:0 0 0.5rem 0}.cookie-text p{font-family:"Helvetica Neue",sans-serif;color:rgba(255,255,255,0.8);margin:0;font-size:0.9rem}.cookie-actions{display:flex;gap:1rem}.cookie-btn{padding:0.7rem 1.5rem;border-radius:8px;border:none;cursor:pointer;font-family:"Helvetica Neue",sans-serif;font-size:0.9rem;font-weight:500;transition:all 0.3s ease}.cookie-btn.accept-all{background:rgba(138,43,226,0.8);color:#fff}.cookie-btn.accept-necessary{background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.3)}.cookie-btn.reject-all{background:transparent;color:rgba(255,255,255,0.7);border:1px solid rgba(255,255,255,0.2)}.cookie-btn:hover{transform:translateY(-1px)}

/* Responsive Design */
@media (max-width: 991px) {
    .mobile-menu-toggle{display:flex}.nav-menu{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.95);backdrop-filter:blur(20px);flex-direction:column;justify-content:center;align-items:center;gap:2rem;z-index:1000;display:none}.nav-menu.active{display:flex}.nav-menu .nav-link{color:#fff;font-size:1.5rem;padding:1rem 2rem;border-radius:10px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);transition:all 0.3s ease;text-align:center;min-width:200px}.nav-menu .nav-link:hover{background:rgba(255,255,255,0.2);transform:translateY(-2px)}.nav-menu .nav-link::after{display:none}.nav-language{position:fixed;top:1rem;right:4rem;z-index:1001}.hero-content{display:flex !important;flex-direction:column !important;gap:2rem !important;text-align:center !important;align-items:center !important;justify-content:center !important}.hero-text{order:1;width:100% !important;margin:0 auto !important;text-align:center !important;align-items:center !important;justify-content:center !important}.hero-visual{order:2;width:100%;margin-top:2rem}.main-title{font-size:3rem}.hero-stats{justify-content:center;gap:1.5rem;flex-wrap:wrap}.hero-actions{flex-direction:column;gap:1rem;align-items:center}.cta-button{width:100%;max-width:300px}.hero-showcase{grid-template-columns:1fr;gap:1.5rem}.about-hero{grid-template-columns:1fr;gap:3rem;text-align:center}.about-hero-content{order:1}.about-hero-visual{order:2;height:300px}.floating-card{position:relative;margin-bottom:1rem}.card-1,.card-2,.card-3{position:relative;top:auto;left:auto;right:auto;bottom:auto}.stats-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}.tech-stack{grid-template-columns:1fr;gap:2rem}.process-line{flex-direction:column;gap:1rem}.process-arrow{transform:rotate(90deg)}.service-main{grid-template-columns:1fr;gap:2rem;text-align:center}.services-row{grid-template-columns:repeat(2,1fr);gap:1.5rem}.portfolio-row.top-row,.portfolio-row.bottom-row{grid-template-columns:1fr;gap:1.5rem}.contact-content{grid-template-columns:1fr;gap:3rem}.footer-content{grid-template-columns:1fr;gap:2rem}.footer-links{grid-template-columns:1fr;gap:2rem;text-align:center}.cookie-content{flex-direction:column;gap:1.5rem;text-align:center}.cookie-actions{justify-content:center}section{padding:60px 0}}

@media (max-width: 768px) {
    .container{padding:0 15px}.main-title{font-size:2.5rem}.hero-stats{flex-direction:column;gap:1rem;align-items:center}.hero-showcase{grid-template-columns:1fr}.showcase-card{max-width:300px;margin:0 auto}.about-hero-content h3{font-size:2rem}.stats-grid{grid-template-columns:1fr}.tech-stack{grid-template-columns:1fr}.services-row{grid-template-columns:1fr}.portfolio-layout{max-width:100%}.contact-info{text-align:center}.footer-content{grid-template-columns:1fr;text-align:center}}

@media (max-width: 576px) {
    .container{padding:0 10px}.nav-container{padding:0 1rem}.nav-logo a{font-size:1rem}.nav-language{top:1rem;right:4rem;position:fixed}.language-btn{padding:0.4rem 0.8rem;font-size:0.8rem;min-width:70px;background:rgba(138,43,226,0.9)!important;border:1px solid rgba(255,255,255,0.4)!important}.language-dropdown{min-width:110px;right:-10px;padding:0.5rem}.language-option{padding:0.6rem 0.8rem;font-size:0.8rem}.nav-menu .nav-link{font-size:1.2rem;min-width:180px}.main-title{font-size:2rem}.main-description{font-size:1rem}.hero-stats .stat-number{font-size:1.8rem}.cta-button{max-width:250px;padding:0.8rem 1.5rem;font-size:0.9rem}.showcase-card{max-width:280px;padding:1.2rem}.section-header h2{font-size:2rem}.about-hero-content h3{font-size:1.8rem}.service-main{padding:2rem}.portfolio-card{min-height:250px;padding:1.5rem}.contact-form{padding:1.5rem}.footer-content{grid-template-columns:1fr;text-align:center}}

@media (max-width: 480px) {
    .nav-language{top:1rem;right:3.5rem}.language-btn{padding:0.35rem 0.7rem;font-size:0.75rem;min-width:65px}.language-dropdown{min-width:100px;right:-5px}.language-option{padding:0.5rem 0.7rem;font-size:0.75rem}}

@media (max-width: 375px) {
    .nav-language{top:0.8rem;right:3rem}.language-btn{padding:0.3rem 0.6rem;font-size:0.7rem;min-width:60px}.language-dropdown{min-width:95px;right:0}.language-option{padding:0.4rem 0.6rem;font-size:0.7rem}}

@media (max-width: 770px) {
  .process-line {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    width: 100% !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
  }
  .process-item {
    width: 100% !important;
    max-width: 350px !important;
    margin: 0 auto !important;
  }
  .process-arrow {
    transform: rotate(90deg) !important;
    margin: 0.5rem 0 !important;
    font-size: 1.5rem !important;
  }
  .hero-badge {
    margin-top: 100px;
  }
}

@media (min-width: 320px) and (max-width: 768px) {
  .service-main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 1.2rem 0 2.2rem 0 !important;
    padding: 1.2rem 0.7rem 1.5rem 0.7rem !important;
    overflow-x: hidden !important;
    transform: none !important;
    border-radius: 1.2rem !important;
    background: rgba(30,30,40,0.98) !important;
    /* Optional: leichter Schatten für bessere Lesbarkeit */
    box-shadow: 0 2px 16px rgba(0,0,0,0.08) !important;
  }
}

@media (min-width: 769px) {
  .service-features {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin: 1.5rem 0 0 0;
    padding: 0;
  }
}

@media (max-width: 768px) {
  .service-features {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.8rem !important;
    width: 100% !important;
    margin: 1rem 0 0 0 !important;
    padding: 0 !important;
  }
  .feature-tag {
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
    font-size: 1rem !important;
    padding: 0.7rem 1rem !important;
    border-radius: 1.2rem !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {
  .service-main-visual {
    margin-top: 16px !important;
  }
}

@media (max-width: 768px) {
  .stat-number {
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 770px) {
  .about-hero {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    text-align: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  .about-hero-content {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 1.2rem 0.7rem 1.2rem 0.7rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .about-hero-visual {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 2rem 0 100px 0 !important;
    padding-top: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    box-sizing: border-box !important;
  }
}

/* Animation Optimizations */
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}

/* Performance Optimizations */
.showcase-card,.portfolio-card,.floating-card{will-change:transform}
.nav-menu.active{will-change:opacity,transform}
.mobile-menu-toggle.active span{will-change:transform}

/* Cursor */
.cursor-dot,.cursor-outline{position:fixed;border-radius:50%;opacity:0;pointer-events:none;z-index:9999;transition:opacity 0.3s ease}.cursor-dot{width:8px;height:8px;background:#fff;transform:translate(-50%,-50%)}.cursor-outline{width:40px;height:40px;border:2px solid rgba(255,255,255,0.5);transform:translate(-50%,-50%);transition:all 0.1s ease}

/* Print Styles */
@media print {
    .navbar,.mobile-menu-toggle,.language-selector,.cookie-banner,.scroll-indicator{display:none !important}
    .hero-section,.services-section,.portfolio-section,.contact-section{padding:2rem 0;page-break-inside:avoid}
    .container{padding:0}
}