:root {
    --bg-dark: #0a0e27;
    --bg-secondary: #151932;
    --bg-card: #1e2442;
    --accent-primary: #00d4ff;
    --accent-secondary: #ff9500;
    --accent-success: #00ff88;
    --text-primary: #e4e4e7;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
}

* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg-dark); color: var(--text-primary); line-height: 1.6;}
.container {max-width: 1200px; margin: 0 auto; padding: 0 2rem;}

/* Navigation */
.navbar {background: rgba(30, 36, 66, 0.95); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid rgba(0, 212, 255, 0.2);}
.navbar .container {display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem;}
.nav-brand {font-weight: 700; font-size: 1.25rem; color: var(--accent-primary);}
.nav-links {display: flex; gap: 2rem;}
.nav-links a {color: var(--text-secondary); text-decoration: none; transition: color 0.3s;}
.nav-links a:hover {color: var(--accent-primary);}
.nav-admin {background: var(--bg-secondary); padding: 0.5rem 1rem; border-radius: 6px; border: 1px solid var(--accent-primary);}

/* Hero */
.hero {padding: 6rem 0; text-align: center; background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-secondary) 100%);}
.hero-title {font-size: 3.5rem; font-weight: 700; margin-bottom: 1rem; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.hero-subtitle {font-size: 1.25rem; color: var(--text-secondary); margin-bottom: 2rem;}
.availability {display: inline-flex; align-items: center; gap: 0.75rem; background: rgba(0, 212, 255, 0.1); padding: 0.75rem 1.5rem; border-radius: 50px; border: 1px solid rgba(0, 212, 255, 0.3);}
.status-dot {width: 10px; height: 10px; background: var(--accent-success); border-radius: 50%; animation: pulse 2s infinite;}
@keyframes pulse {0%, 100% {opacity: 1;} 50% {opacity: 0.5;}}

/* Sections */
.section {padding: 5rem 0;}
.section-dark {background: var(--bg-secondary);}
.section h2 {font-size: 2.5rem; margin-bottom: 3rem; text-align: center;}

/* Projects */
.projects-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 2rem;}
.project-card {background: var(--bg-card); border-radius: 12px; overflow: hidden; border: 1px solid rgba(0, 212, 255, 0.2); transition: transform 0.3s;}
.project-card:hover {transform: translateY(-5px);}
.project-card img {width: 100%; height: 200px; object-fit: cover;}
.project-card > * {padding: 1.5rem;}
.project-card img {padding: 0;}
.category-badge {display: inline-block; background: rgba(0, 212, 255, 0.2); padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.875rem; color: var(--accent-primary);}
.project-card h3 {margin: 1rem 0 0.5rem;}
.tech-tags {display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem;}
.tech-tag {background: var(--bg-secondary); padding: 0.25rem 0.75rem; border-radius: 6px; font-size: 0.75rem; color: var(--text-secondary);}

/* Skills */
.skill-category {margin-bottom: 3rem;}
.skill-category h3 {font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--accent-primary);}
.skill-item {margin-bottom: 1.5rem;}
.skill-header {display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-weight: 500;}
.skill-bar {width: 100%; height: 8px; background: var(--bg-secondary); border-radius: 4px; overflow: hidden;}
.skill-progress {height: 100%; background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary)); border-radius: 4px; transition: width 0.6s;}

/* Education & Certificates */
.education-card, .cert-card {background: var(--bg-card); padding: 2rem; border-radius: 12px; border: 1px solid rgba(0, 212, 255, 0.2); margin-bottom: 1.5rem;}
.edu-institution {color: var(--accent-primary); font-weight: 600;}
.edu-dates {color: var(--text-muted); font-size: 0.875rem; margin: 0.5rem 0;}
.certs-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2rem;}
.cert-card {text-align: center;}
.cert-icon {font-size: 3rem; margin-bottom: 1rem;}
.cert-date {color: var(--text-muted); font-size: 0.875rem; margin: 0.5rem 0;}
.cert-card a {color: var(--accent-primary); text-decoration: none;}

/* Contact Form */
.contact-form {max-width: 600px; margin: 0 auto;}
.contact-form input, .contact-form textarea {width: 100%; padding: 1rem; margin-bottom: 1rem; background: var(--bg-secondary); border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 8px; color: var(--text-primary); font-family: inherit;}
.contact-form input:focus, .contact-form textarea:focus {outline: none; border-color: var(--accent-primary);}
.btn {padding: 1rem 2rem; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s;}
.btn-primary {background: var(--accent-primary); color: var(--bg-dark);}
.btn-primary:hover {background: var(--accent-secondary); transform: translateY(-2px);}
.btn-project-details {width: 100%; margin-top: 1rem; background: var(--bg-secondary); color: var(--accent-primary); border: 1px solid var(--accent-primary); padding: 0.75rem; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s;}
.btn-project-details:hover {background: var(--accent-primary); color: var(--bg-dark);}
.btn-small {padding: 0.5rem 1rem; font-size: 0.875rem; display: inline-block; text-decoration: none;}

/* Modal */
.modal {display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(10, 14, 39, 0.95); align-items: center; justify-content: center; overflow-y: auto; padding: 2rem;}
.modal-content {background: var(--bg-card); border-radius: 16px; max-width: 900px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; border: 1px solid rgba(0, 212, 255, 0.3); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);}
.modal-close {position: absolute; top: 1rem; right: 1.5rem; font-size: 2.5rem; color: var(--text-secondary); cursor: pointer; z-index: 10; transition: color 0.3s;}
.modal-close:hover {color: var(--accent-primary);}
.modal-header {padding: 2rem 2rem 1rem; border-bottom: 1px solid rgba(0, 212, 255, 0.2);}
.modal-image {width: 100%; height: 300px; object-fit: cover; border-radius: 12px; margin-bottom: 1.5rem;}
.modal-category {display: inline-block; padding: 0.25rem 0.75rem; background: rgba(0, 212, 255, 0.2); border-radius: 20px; font-size: 0.875rem; color: var(--accent-primary); margin-bottom: 1rem;}
.modal-header h2 {font-size: 2rem; color: var(--accent-primary); margin: 0.5rem 0 0;}
.modal-body {padding: 2rem;}
.modal-section {margin-bottom: 2rem;}
.modal-section h3 {font-size: 1.25rem; color: var(--text-primary); margin-bottom: 1rem;}
.modal-section p {line-height: 1.8; color: var(--text-secondary);}
.project-status {display: inline-block; padding: 0.5rem 1rem; border-radius: 8px; font-weight: 600; text-transform: uppercase; font-size: 0.875rem;}
.status-konzept {background: rgba(255, 149, 0, 0.2); color: var(--accent-warning);}
.status-entwicklung {background: rgba(0, 212, 255, 0.2); color: var(--accent-primary);}
.status-fertig {background: rgba(0, 255, 136, 0.2); color: var(--accent-success);}
.status-produziert {background: rgba(168, 85, 247, 0.2); color: #a855f7;}

/* G-Code Viewer */
.gcode-viewer-container {background: var(--bg-secondary); padding: 1rem; border-radius: 12px; border: 1px solid rgba(0, 212, 255, 0.3);}
.gcode-viewer {width: 100%; height: 500px; border-radius: 8px; background: #000;}
.viewer-info {text-align: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(0, 212, 255, 0.2);}

/* STL 3D-Viewer */
.stl-viewer-container {background: var(--bg-secondary); padding: 1rem; border-radius: 12px; border: 1px solid rgba(255, 149, 0, 0.3);}
.stl-viewer {width: 100%; height: 600px; border-radius: 8px; background: #1a1a1a;}
.viewer-controls {display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 149, 0, 0.2); flex-wrap: wrap; gap: 1rem;}
.viewer-info-text {color: var(--text-secondary); font-size: 0.875rem; margin: 0;}

.alert {padding: 1rem; border-radius: 8px; margin-top: 1rem;}
.alert.success {background: rgba(0, 255, 136, 0.1); color: var(--accent-success); border: 1px solid var(--accent-success);}
.alert.error {background: rgba(255, 95, 86, 0.1); color: #ff5f56; border: 1px solid #ff5f56;}

/* Footer */
.footer {background: var(--bg-secondary); padding: 2rem 0; text-align: center; border-top: 1px solid rgba(0, 212, 255, 0.2);}
.footer-links {display: flex; justify-content: center; gap: 2rem; margin-top: 1rem;}
.footer-links a {color: var(--text-secondary); text-decoration: none;}

/* About Section */
.about-content {text-align: left;}
.about-grid {display: grid; gap: 3rem; align-items: start;}
.about-grid.with-image {grid-template-columns: 250px 1fr;}
.about-grid.without-image {grid-template-columns: 1fr;}
.about-image {text-align: center;}
.about-image img {width: 250px; height: 250px; border-radius: 50%; object-fit: cover; border: 4px solid var(--accent-primary);}
.about-name {font-size: 2rem; font-weight: 700; color: var(--accent-primary); margin-bottom: 0.5rem;}
.about-title {font-size: 1.25rem; color: var(--text-primary); font-weight: 600; margin-bottom: 0.5rem;}
.about-subtitle {color: var(--text-secondary); font-style: italic; margin-bottom: 1.5rem;}
.about-description {line-height: 1.8; margin-bottom: 2rem; color: var(--text-secondary);}
.about-contact-info {display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;}
.contact-info-item {display: flex; align-items: center; gap: 1rem;}
.info-icon {font-size: 1.25rem;}
.contact-info-item a {color: var(--accent-primary); text-decoration: none;}
.contact-info-item a:hover {text-decoration: underline;}
.about-social {display: flex; gap: 1rem;}
.social-link {display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--bg-secondary); border: 1px solid var(--accent-primary); border-radius: 8px; color: var(--accent-primary); text-decoration: none; transition: all 0.3s;}
.social-link:hover {background: var(--accent-primary); color: var(--bg-dark); transform: translateY(-2px);}

@media (min-width: 768px) {
    .about-grid.with-image {grid-template-columns: 250px 1fr;}
    .about-grid.without-image {grid-template-columns: 1fr; max-width: 800px; margin: 0 auto;}
}

@media (max-width: 768px) {
    .hero-title {font-size: 2.5rem;}
    .projects-grid, .certs-grid {grid-template-columns: 1fr;}
    .nav-links {gap: 1rem;}
}