/* Fonts werden im via preconnect + geladen (schneller als CSS @import) */ :root { --accent-1: #7c6af7; --accent-2: #00d4aa; --accent-1-rgb: 124, 106, 247; --accent-2-rgb: 0, 212, 170; --kk-bg: #07070f; --kk-text: #bdbdda; --kk-text-bright: #eaeaf8; --kk-text-dim: rgba(189,189,218,0.5); --kk-text-muted: rgba(189,189,218,0.55); --kk-card: linear-gradient(135deg,rgba(255,255,255,0.055) 0%,rgba(255,255,255,0.018) 100%); --kk-border: rgba(255,255,255,0.09); --kk-border-hi: rgba(255,255,255,0.065); --kk-nav: rgba(7,7,15,0.92); --kk-input: rgba(255,255,255,0.038); --kk-shadow: rgba(0,0,0,0.28); --kk-inset: rgba(255,255,255,0.11); } [data-theme="light"] { --kk-bg: #eeeef8; --kk-text: #3a3a5c; --kk-text-bright: #0f0f28; --kk-text-dim: rgba(58,58,92,0.65); --kk-text-muted: rgba(58,58,92,0.62); --kk-card: linear-gradient(135deg,rgba(255,255,255,0.88) 0%,rgba(255,255,255,0.62) 100%); --kk-border: rgba(0,0,30,0.1); --kk-border-hi: rgba(0,0,30,0.08); --kk-nav: rgba(238,238,248,0.94); --kk-input: rgba(255,255,255,0.88); --kk-shadow: rgba(0,0,40,0.1); --kk-inset: rgba(255,255,255,0.6); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--kk-bg); color: var(--kk-text); font-family: 'Space Grotesk', system-ui, sans-serif; overflow-x: hidden; transition: background 0.5s, color 0.3s; -webkit-font-smoothing: antialiased; } ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { background: var(--kk-bg); } ::-webkit-scrollbar-thumb { background: rgba(var(--accent-1-rgb),0.5); border-radius: 2px; } ::selection { background: rgba(var(--accent-1-rgb),0.35); color: #fff; } a { color: inherit; text-decoration: none; } /* Animations */ @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} } @keyframes fadeInUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} } @keyframes pulseDot { 0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-2-rgb),0.4)} 50%{box-shadow:0 0 0 5px rgba(var(--accent-2-rgb),0)} } @keyframes floatArrow { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-12px)} } @keyframes glitchShift { 0%{transform:translateX(0)} 4%{transform:translateX(-4px)} 8%{transform:translateX(3px)} 12%{transform:translateX(0)} 100%{transform:translateX(0)} } @keyframes typeGlitch { 0%,100%{opacity:1;transform:skewX(0);filter:none} 10%{opacity:0.6;transform:skewX(-8deg);filter:hue-rotate(90deg)} 20%{opacity:0.9;transform:skewX(4deg);filter:hue-rotate(-60deg)} 30%{opacity:1;transform:skewX(0);filter:none} } @keyframes skillFill { from{transform:scaleX(0)} to{transform:scaleX(1)} } @keyframes scanlines { from{background-position:0 0} to{background-position:0 4px} } /* Canvas BG */ #kk-bg { position: fixed; top: 0; left: 0; z-index: 0; display: block; pointer-events: none; } /* Scanlines */ .scanlines { position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.11) 3px,rgba(0,0,0,0.11) 4px); animation: scanlines 0.18s linear infinite; opacity: 0.48; } /* NAV */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 64px; padding: 0 28px; background: transparent; border-bottom: 1px solid transparent; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); transition: background 0.4s, border-color 0.4s; } .nav.scrolled { background: var(--kk-nav); border-bottom-color: var(--kk-border); } .nav-inner { max-width: 1200px; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .nav-logo-img { height: 38px; width: 38px; border-radius: 4px; display: block; object-fit: cover; flex-shrink: 0; } .nav-links { display: flex; gap: 22px; align-items: center; flex: 1; justify-content: center; list-style: none; } .nav-links a { font-size: 13px; font-weight: 500; color: var(--kk-text-dim); transition: color 0.2s; white-space: nowrap; } .nav-links a:hover { color: var(--kk-text-bright); } .nav-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .available-badge { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: var(--accent-2); background: rgba(var(--accent-2-rgb),0.07); border: 1px solid rgba(var(--accent-2-rgb),0.22); border-radius: 20px; padding: 5px 12px; animation: pulseDot 2.8s ease infinite; white-space: nowrap; } .available-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); flex-shrink: 0; } .nav-btn { display: flex; align-items: center; justify-content: center; background: rgba(var(--accent-1-rgb),0.07); border: 1px solid rgba(var(--accent-1-rgb),0.22); border-radius: 8px; cursor: pointer; transition: all 0.2s; color: var(--accent-1); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; padding: 5px 11px; } .nav-btn:hover { background: rgba(var(--accent-1-rgb),0.18); } .nav-btn-icon { width: 32px; height: 32px; padding: 0; } .hamburger { display: none; background: none; border: none; color: var(--kk-text-bright); font-size: 1.4rem; cursor: pointer; padding: 4px; } /* HERO */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 120px 24px 100px; position: relative; z-index: 2; } .hero-content { max-width: 840px; width: 100%; text-align: center; } .hero-avatar { position: relative; width: 180px; height: 180px; border-radius: 50%; padding: 2.5px; background: linear-gradient(135deg,var(--accent-1),var(--accent-2)); box-shadow: 0 0 32px rgba(var(--accent-1-rgb),0.35), 0 0 64px rgba(var(--accent-2-rgb),0.15); margin: 0 auto 28px; animation: fadeInUp 0.7s ease both; } .hero-avatar img { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; object-position: center top; border: 2px solid var(--kk-bg); } .hero-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent-1); letter-spacing: 4.5px; text-transform: uppercase; margin-bottom: 24px; animation: fadeInUp 0.7s ease 0.1s both; } .hero-name { font-size: clamp(56px,10vw,108px); font-weight: 700; letter-spacing: -5px; line-height: 0.92; margin-bottom: 32px; background: linear-gradient(140deg,var(--kk-text-bright) 10%,#b2aaf8 45%,var(--accent-2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: fadeInUp 0.7s ease 0.2s both, glitchShift 9s steps(1) 2s infinite; } .hero-typed-wrap { font-size: clamp(17px,2.4vw,26px); font-weight: 500; color: var(--kk-text-bright); min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 3px; margin-bottom: 20px; animation: fadeInUp 0.7s ease 0.3s both; } .hero-typed-text { display: inline-block; } .hero-typed-text.glitch { animation: typeGlitch 0.4s ease both; } .hero-cursor { display: inline-block; width: 2px; height: 0.85em; background: var(--accent-1); border-radius: 1px; animation: blink 1s step-end infinite; vertical-align: middle; flex-shrink: 0; margin-left: 1px; } .hero-tagline { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--kk-text-muted); letter-spacing: 1.8px; margin-bottom: 48px; animation: fadeInUp 0.7s ease 0.4s both; } .hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; animation: fadeInUp 0.7s ease 0.5s both; } .btn-primary { display: inline-block; background: linear-gradient(135deg,var(--accent-1),#5646d0); color: #fff; padding: 15px 32px; border-radius: 10px; font-weight: 600; font-size: 14px; transition: all 0.25s; box-shadow: 0 4px 28px rgba(var(--accent-1-rgb),0.32); border: none; cursor: pointer; font-family: inherit; } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(var(--accent-1-rgb),0.48); } .btn-outline { display: inline-block; background: transparent; color: var(--kk-text-bright); padding: 15px 32px; border-radius: 10px; font-weight: 600; font-size: 14px; border: 1px solid var(--kk-border-hi); transition: all 0.25s; cursor: pointer; font-family: inherit; } .btn-outline:hover { border-color: rgba(var(--accent-1-rgb),0.42); color: #b2aaf8; background: rgba(var(--accent-1-rgb),0.07); } .btn-cv { display: inline-flex; align-items: center; gap: 9px; } .btn-cv svg { width: 16px; height: 16px; flex-shrink: 0; } .hero-arrow { position: absolute; bottom: 38px; left: 50%; animation: floatArrow 3s ease-in-out infinite; color: var(--kk-text-muted); font-size: 24px; transform: translateX(-50%); } /* SECTIONS */ section { padding: 120px 24px; position: relative; z-index: 2; } .container { max-width: 1200px; margin: 0 auto; } .section-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent-1); letter-spacing: 4px; text-transform: uppercase; margin-bottom: 14px; } .section-title { font-size: clamp(28px,4vw,50px); font-weight: 700; letter-spacing: -2px; color: var(--kk-text-bright); margin-bottom: 14px; line-height: 1.05; } .section-sub { font-size: 15px; color: var(--kk-text-dim); margin-bottom: 64px; max-width: 500px; line-height: 1.7; } /* CARDS (glassmorphism) */ .glass-card { background: var(--kk-card); border: 1px solid var(--kk-border); border-radius: 20px; position: relative; overflow: hidden; transition: all 0.35s ease; cursor: default; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 var(--kk-inset), 0 8px 32px var(--kk-shadow); } .glass-card:hover { border-color: rgba(var(--accent-1-rgb),0.3); transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 24px 64px rgba(0,0,0,0.4), 0 0 60px rgba(var(--accent-1-rgb),0.07); } .card-accent { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg,var(--accent-1),var(--accent-2)); } /* TRIO */ .trio-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(290px,1fr)); gap: 24px; } .trio-card { padding: 38px 30px; } .trio-icon { font-size: 40px; margin-bottom: 22px; line-height: 1; } .trio-label { font-size: 19px; font-weight: 700; color: var(--kk-text-bright); margin-bottom: 9px; letter-spacing: -0.4px; } .trio-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent-1); margin-bottom: 18px; line-height: 1.75; opacity: 0.88; } .trio-detail { font-size: 13.5px; color: var(--kk-text-dim); line-height: 1.85; } /* PROJECTS */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 24px; } .project-card { padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: all 0.35s ease; } .project-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; } .project-name { font-size: 24px; font-weight: 700; color: var(--kk-text-bright); letter-spacing: -0.6px; } .project-tag { font-size: 10px; font-weight: 600; padding: 4px 12px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; } .project-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--kk-text-muted); } .project-desc { font-size: 13.5px; color: var(--kk-text-dim); line-height: 1.88; flex: 1; } .project-stack { display: flex; flex-wrap: wrap; gap: 8px; } .project-stack span { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; padding: 5px 11px; border-radius: 6px; } .project-link { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; padding-top: 14px; border-top: 1px solid var(--kk-border); } .project-link:hover { gap: 12px; } /* SKILLS */ .skills-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)); gap: 22px; } .skill-card { padding: 28px 26px; } .skill-group-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; color: var(--accent-1); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 26px; } .skill-items { display: flex; flex-direction: column; gap: 17px; } .skill-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .skill-name { font-size: 13px; font-weight: 500; color: var(--kk-text-bright); } .skill-pct { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--kk-text-muted); } .skill-bar { height: 3px; background: rgba(var(--accent-1-rgb),0.12); border-radius: 2px; overflow: hidden; } .skill-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg,var(--accent-1),var(--accent-2)); transform-origin: left; transform: scaleX(0); transition: transform 1.5s ease; } /* TIMELINE */ .timeline { position: relative; } .timeline-line { position: absolute; left: 19px; top: 10px; width: 2px; bottom: 0; background: linear-gradient(180deg,rgba(var(--accent-1-rgb),0.55),rgba(var(--accent-2-rgb),0.3),transparent 92%); } .timeline-item { display: flex; gap: 28px; margin-bottom: 52px; position: relative; } .timeline-dot-wrap { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; margin-top: 4px; } .timeline-dot-inner { width: 8px; height: 8px; border-radius: 50%; } .timeline-content { flex: 1; min-width: 0; } .timeline-period { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--kk-text-muted); margin-bottom: 6px; } .timeline-role { font-size: 20px; font-weight: 700; color: var(--kk-text-bright); margin-bottom: 3px; letter-spacing: -0.4px; } .timeline-company { font-size: 14px; font-weight: 600; margin-bottom: 16px; } .timeline-desc { font-size: 13.5px; color: var(--kk-text-dim); line-height: 1.88; margin-bottom: 16px; } .timeline-tags { display: flex; flex-wrap: wrap; gap: 8px; } .timeline-tags span { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 4px 10px; border-radius: 5px; } /* CONTACT */ .contact-inner { max-width: 660px; margin: 0 auto; } .contact-desc { font-size: 15px; color: var(--kk-text-dim); margin-bottom: 48px; line-height: 1.7; } .contact-form { display: flex; flex-direction: column; gap: 13px; margin-bottom: 36px; } .contact-input { background: var(--kk-input); border: 1px solid var(--kk-border); border-radius: 12px; padding: 15px 18px; color: var(--kk-text-bright); font-size: 14px; font-family: 'Space Grotesk', system-ui; outline: none; transition: border-color 0.22s; width: 100%; } .contact-input:focus { border-color: rgba(var(--accent-1-rgb),0.48); } textarea.contact-input { resize: vertical; min-height: 130px; } .contact-submit { background: linear-gradient(135deg,var(--accent-1),#5646d0); color: #fff; border: none; border-radius: 12px; padding: 17px 28px; font-size: 15px; font-weight: 600; font-family: 'Space Grotesk', system-ui; cursor: pointer; transition: all 0.25s; box-shadow: 0 4px 26px rgba(var(--accent-1-rgb),0.3); } .contact-submit:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(var(--accent-1-rgb),0.46); } .contact-sent { text-align: center; color: var(--accent-2); font-size: 12.5px; font-family: 'JetBrains Mono', monospace; padding: 6px 0; letter-spacing: 0.5px; display: none; } .contact-sent.show { display: block; } .contact-links { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; border-top: 1px solid var(--kk-border); padding-top: 32px; } .contact-links a { display: flex; align-items: center; gap: 8px; color: var(--kk-text-dim); font-size: 13px; font-weight: 500; transition: color 0.2s; } .contact-links a:hover { color: var(--kk-text-bright); } .contact-links svg { width: 15px; height: 15px; } .btn-freelancermap-contact { display: inline-flex !important; align-items: center; gap: 8px; background: linear-gradient(135deg, #0284c7 0%, #0066a1 100%) !important; color: #ffffff !important; padding: 8px 16px !important; border-radius: 8px !important; font-size: 13.5px !important; font-weight: 600 !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; box-shadow: 0 3px 12px rgba(2, 132, 199, 0.35) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; text-decoration: none !important; } .btn-freelancermap-contact:hover { transform: translateY(-2px) !important; box-shadow: 0 5px 16px rgba(2, 132, 199, 0.55) !important; color: #ffffff !important; text-decoration: none !important; } .btn-freelancermap-contact .fm-logo-img { height: 18px; width: auto; filter: brightness(0) invert(1); display: inline-block; } .btn-freelancermap-contact .fm-text { font-weight: 700; color: #ffffff; } /* FOOTER */ .footer { position: relative; z-index: 2; border-top: 1px solid var(--kk-border); padding: 26px 24px; text-align: center; } .footer p { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--kk-text-muted); letter-spacing: 0.5px; } .footer-cross { margin-top: 8px; } .footer-cross a { color: rgba(var(--accent-1-rgb),0.85); transition: color 0.2s; } .footer-cross a:hover { color: #9d8ffa; } /* REVEAL */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s, transform 0.7s; } .reveal.visible { opacity: 1; transform: translateY(0); } /* RESPONSIVE */ @media (max-width: 768px) { .nav-links { display: none; } .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--kk-nav); backdrop-filter: blur(20px); padding: 16px 24px; gap: 12px; border-bottom: 1px solid var(--kk-border); } .hamburger { display: block; } .available-badge { display: none; } section { padding: 80px 16px; } .hero { padding: 100px 16px 80px; } .hero-name { letter-spacing: -3px; } .hero-ctas { flex-direction: column; } .hero-ctas a, .hero-ctas button { width: 100%; text-align: center; } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .skill-fill { transition: none; } html { scroll-behavior: auto; } .scanlines { animation: none; } } [data-color-theme="orange"] { --accent-1: #FF7A00; --accent-2: #00E5FF; --accent-1-rgb: 255, 122, 0; --accent-2-rgb: 0, 229, 255; } /* ========================================================================== PRINT STYLES ========================================================================== */ @media print { body { background: #ffffff !important; color: #000000 !important; font-size: 12pt; line-height: 1.5; } [data-theme="dark"] { --kk-bg: #ffffff; --kk-surface: #ffffff; --kk-heading: #000000; --kk-text: #333333; --kk-muted: #666666; --kk-border-lo: #cccccc; --kk-border-hi: #999999; --accent-1: #000000; --accent-2: #000000; } .nav, .hero-controls, .available-badge, .btn-primary, #darkToggle, #colorToggle, #langToggle, #hamburger, #bgCanvas { display: none !important; } .section-alt { background: transparent !important; border: none !important; } .container { max-width: 100% !important; margin: 0 !important; padding: 0 !important; } section { padding: 20px 0 !important; page-break-inside: avoid; } h1, h2, h3, .section-title { color: #000000 !important; page-break-after: avoid; } .hero-card, .timeline-item, .card, .glass-panel { box-shadow: none !important; border: 1px solid #cccccc !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; page-break-inside: avoid; } } /* Legal Footer Links */ .footer-legal { margin-top: 10px; } .footer-legal a { color: var(--accent-primary); text-decoration: none; margin: 0 10px; font-size: 0.9rem; } .footer-legal a:hover { text-decoration: underline; }