:root{--bg:#0b0b0c;--surface:#111113;--muted:#c7c7cc;--text:#f5f5f7;--brand:#6ea8fe;--brand-2:#b388ff;--card:#151518;--outline:#303035;--font-size-base:18px} *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"} body{overflow-x:hidden} html{height:-webkit-fill-available} body{min-height:100vh;min-height:100dvh;min-height:-webkit-fill-available;font-size:var(--font-size-base);line-height:1.7} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .btn:focus-visible,.footer__social:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid rgba(179,136,255,.85);outline-offset:2px;border-radius:8px} .btn:focus-visible{box-shadow:0 0 0 3px rgba(179,136,255,.35)} .container{max-width:1200px;margin:0 auto;padding:0 24px} .skip-link{position:absolute;left:-9999px;top:auto} .skip-link:focus{left:16px;top:16px;background:#fff;color:#000;padding:8px 12px;border-radius:8px} h1,h2,h3{margin:0 0 10px;line-height:1.2} h1{font-size:2.4rem} h2{font-size:2rem;margin-bottom:18px} h3{font-size:1.3rem} p{margin:0 0 14px} .nav{position:sticky;top:0;backdrop-filter:saturate(180%) blur(12px);background:rgba(17,17,19,0.6);border-bottom:1px solid rgba(255,255,255,0.06);z-index:100;padding-top:env(safe-area-inset-top);padding-top:constant(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)} .nav__inner{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;padding:8px 0} .nav__links{display:flex;align-items:center;justify-content:center;gap:18px} .nav__links a{color:var(--muted);font-size:1.02rem} .nav__bottom{display:flex;align-items:center;justify-content:space-between;width:100%} .nav__actions{display:flex;align-items:center;gap:12px} .brand{font-weight:800;letter-spacing:.04em;flex:0 0 auto} .brand img{display:block;height:32px;width:auto} .primary{display:none} .nav__actions .btn{color:var(--text)} .lang-switch{display:inline-flex;align-items:center;gap:8px;margin-left:14px;color:var(--muted);font-size:.95rem} .lang-switch button{background:transparent;border:1px solid rgba(255,255,255,0.18);color:var(--text);height:32px;padding:0 10px;border-radius:10px;cursor:pointer} .lang-switch button[aria-pressed="true"]{background:rgba(255,255,255,0.08)} .btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px;border-radius:12px;border:1px solid transparent;transition:all .25s ease;font-size:1rem} .btn--primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#000;font-weight:700} .btn--primary:hover{filter:brightness(1.05)} .btn--outline{border-color:var(--outline)} .btn--outline:hover{border-color:#5a5a60} .btn--ghost{background:transparent} .btn--ghost:hover{background:#1a1a1f} .hero{position:relative;padding:64px 0 40px;border-bottom:1px solid rgba(255,255,255,0.06);min-height:auto;display:flex;align-items:center} .hero__kicker{margin:0 0 10px;font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .hero__headline{margin:0 0 14px;font-size:clamp(40px,5.2vw,64px);line-height:1.08;font-weight:800} .hero__sub{margin:0 0 28px;color:var(--muted);max-width:820px;font-size:1.1rem} .hero__cta{display:flex;gap:12px;flex-wrap:wrap} .hero__glow{position:absolute;inset:auto 50% -30% auto;transform:translateX(-50%);width:70vw;height:70vw;filter:blur(90px);opacity:.35;background:radial-gradient(closest-side,rgba(110,168,254,.35),transparent 60%),radial-gradient(closest-side,rgba(179,136,255,.25),transparent 60%)} .section{padding:48px 0;border-bottom:1px solid rgba(255,255,255,0.06)} .section--alt{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent)} .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .two-col{display:grid;grid-template-columns:1.4fr .8fr;gap:24px;align-items:start} .panel{background:var(--card);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:18px} .list{padding-left:18px} .list li{margin:10px 0;color:var(--muted);font-size:1.05rem} .card{background:var(--card);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:18px} .card--feature h3{margin-top:0} .card p{font-size:1.05rem} .highlights{padding:48px 0} .section-heroimg{position:relative;overflow:hidden} .section-heroimg .heroimg{position:relative;display:block;width:100%;max-width:1200px;height:min(56vh,480px);object-fit:cover;object-position:center;margin:24px auto;border-radius:20px;border:1px solid rgba(255,255,255,0.06);opacity:1;transform:translateX(var(--slide-x, 0)) translateY(12px) scale(.98);filter:blur(6px);transition:transform 1.2s cubic-bezier(.2,.7,0,1),opacity .9s ease,filter .9s ease} .js .section-heroimg .heroimg{opacity:0} .section-heroimg .heroimg.heroimg--wide{height:min(42vh,380px)} .section-heroimg .heroimg.heroimg--tall{height:min(62vh,520px)} .section-heroimg .heroimg.is-visible{opacity:1;transform:translateX(0) translateY(0) scale(1);filter:none} .sr .sr-item{opacity:1;transform:translateY(28px) scale(.98);filter:blur(6px);transition:transform 1s cubic-bezier(.2,.7,0,1),opacity .9s ease,filter .9s ease;transition-delay:var(--sr-delay,0s)} .js .sr .sr-item{opacity:0} .sr .sr-item.is-visible{opacity:1;transform:none;filter:none} .tech .tech-stage{display:grid;grid-template-columns:repeat(auto-fit,180px);justify-content:center;align-content:center;gap:12px 14px;min-height:240px;position:relative;margin-top:12px} .tech .tech-badge{display:inline-flex;align-items:center;justify-content:center;width:180px;height:88px;padding:0 18px;border-radius:16px;border:1px solid rgba(255,255,255,0.22);color:var(--text);font-weight:700;letter-spacing:.02em;font-size:1.15rem;opacity:1;transform:translateX(0);white-space:nowrap;box-shadow:0 12px 36px rgba(0,0,0,0.28);backdrop-filter:saturate(140%) blur(8px);position:relative;overflow:hidden;transition:transform 1.2s cubic-bezier(.2,.7,0,1),opacity .9s ease} .js .tech .tech-badge{opacity:0} .tech .badge--wrap{white-space:normal;line-height:1.15;text-align:center} .tech .tech-badge::after{content:"";position:absolute;inset:-2px;pointer-events:none;border-radius:inherit;background:radial-gradient(100% 100% at 0% 0%, rgba(255,255,255,.18), transparent 60%),radial-gradient(100% 100% at 100% 100%, rgba(0,0,0,.18), transparent 60%)} .badge--blue{background:linear-gradient(180deg,rgba(80,140,255,.28),rgba(40,80,180,.16))} .badge--indigo{background:linear-gradient(180deg,rgba(120,120,255,.28),rgba(70,70,200,.16))} .badge--purple{background:linear-gradient(180deg,rgba(180,120,255,.28),rgba(120,70,200,.16))} .badge--cyan{background:linear-gradient(180deg,rgba(90,220,255,.28),rgba(40,140,180,.16))} .badge--teal{background:linear-gradient(180deg,rgba(70,220,200,.28),rgba(40,120,110,.16))} .badge--green{background:linear-gradient(180deg,rgba(120,230,160,.28),rgba(60,140,90,.16))} .badge--amber{background:linear-gradient(180deg,rgba(255,190,90,.32),rgba(180,90,20,.16))} .badge--pink{background:linear-gradient(180deg,rgba(255,140,200,.28),rgba(180,60,120,.16))} .badge--gray{background:linear-gradient(180deg,rgba(160,160,180,.24),rgba(80,80,100,.16))} .tech .tech-badge.from-left{transform:translateX(-40vw)} .tech .tech-badge.from-right{transform:translateX(40vw)} .tech .tech-badge.animate{opacity:1;transform:translateX(0)} .tech .tech-item{display:flex;flex-direction:column;align-items:center;gap:6px} .tech .tech-label{font-size:.9rem;color:var(--muted)} @media (prefers-reduced-motion: reduce){.sr .sr-item,.tech .tech-badge{transition:none;transform:none !important;opacity:1 !important}} @media (min-width: 1200px){.tech .tech-stage{grid-template-columns:repeat(6,180px);justify-content:center;gap:14px;margin:16px auto 0} .tech .tech-badge{opacity:1}} .timeline{display:grid;gap:16px;margin-top:16px} .timeline__item{position:relative;background:var(--card);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:18px} .timeline__item h3{margin:0 0 6px} .timeline__item p{margin:0;color:var(--muted);font-size:1.05rem} .contact{padding:48px 0 24px} .contact__actions{display:grid;gap:12px;margin-top:14px;grid-template-columns:repeat(2,1fr)} .contact__actions .btn{height:50px;min-height:50px;padding:0 22px;border-color:var(--outline);width:100%;justify-content:center} .contact__actions .btn img{width:20px;height:20px} .contact__actions .btn--primary, .contact__actions a[aria-label="LinkedIn Profil"]{grid-column:1 / -1;justify-content:center;width:100%} .contact p{overflow-wrap:break-word;word-break:normal;hyphens:auto} .footer{padding:24px 0;color:var(--muted)} .footer .container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px} .footer__links{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap} .footer__links a{margin-left:0} .footer__copy{text-align:center} .footer__social{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid rgba(255,255,255,0.12);border-radius:10px;background:transparent} .footer__social img{display:block;width:20px;height:20px} .footer__social:hover{border-color:rgba(255,255,255,0.25);background:rgba(255,255,255,0.04)} @media (max-width: 960px){:root{--header-h:calc(96px + 20px + env(safe-area-inset-top))} .nav{position:fixed;top:0;left:0;right:0} .nav__inner{height:auto;min-height:96px;padding:10px max(12px, env(safe-area-inset-left)) 10px max(12px, env(safe-area-inset-right));gap:8px;align-items:center} .brand img{height:28px} .nav__links{flex-wrap:wrap;gap:12px;order:-1;flex-basis:100%;justify-content:center} .nav__bottom{gap:8px;flex-wrap:wrap;justify-content:space-between;align-items:center} .nav__actions{gap:6px;flex-wrap:nowrap;align-items:center} .nav__actions .btn{height:40px;padding:0 12px;font-size:.95rem} .footer__social{width:40px;height:40px} .footer__social img{width:18px;height:18px} .lang-switch{gap:6px} .lang-switch button{height:40px;padding:0 10px;font-size:.9rem;display:inline-flex;align-items:center} .grid-3{grid-template-columns:1fr} .two-col{grid-template-columns:1fr} .hero{padding:calc(36px + var(--header-h)) 0 36px;min-height:auto} .container{padding-left:clamp(12px, env(safe-area-inset-left), 24px);padding-right:clamp(12px, env(safe-area-inset-right), 24px)} .section-heroimg .heroimg{max-width:100%;border-radius:20px} .hero__headline{font-size:40px} .hero .container{text-align:center} .hero__cta{justify-content:center} .section-heroimg .heroimg{height:42vh;margin:20px auto} .section-heroimg .heroimg.heroimg--wide{height:36vh}} @media (min-width: 961px){.nav__inner{flex-direction:row;gap:0;padding:60px 0;min-height:108px} .nav__bottom{gap:18px} .nav__links{justify-content:flex-start} .nav__links a{font-size:1.15rem} .nav__bottom{justify-content:space-between} .contact__actions{grid-template-columns:repeat(2,1fr)} .contact__actions .btn--primary, .contact__actions a[aria-label="LinkedIn Profil"]{grid-column:auto} .nav .container{padding:0 36px} .footer .container{flex-direction:column;justify-content:center;align-items:center;gap:10px} .footer__copy{order:initial;text-align:center} .footer__links{justify-content:center;flex-wrap:wrap;gap:16px} .nav__actions .btn{height:32px;min-height:32px;padding:0 12px;border-color:rgba(255,255,255,0.18);font-size:1.15rem} .nav .footer__social{width:32px;height:32px;border-color:rgba(255,255,255,0.18)} .nav .footer__social img{width:18px;height:18px} .brand img{height:64px} .nav .lang-switch button{font-size:1.15rem}} .lang-en{display:initial} .lang-en-active .lang-de{display:initial} .lang-en-active .lang-en{display:initial}