/* Base */
: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}

/* Typografie */
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 */
.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)}

/* Buttons */
.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 */
.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%)}

/* Sections */
.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}

/* Cards */
.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 */
.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}


/* Scroll Reveal */
.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}

/* Technologien Stage */
.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%)}

/* MacBook‑Pro‑artige Farbeffekte */
.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)}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  .sr .sr-item,.tech .tech-badge{transition:none;transform:none !important;opacity:1 !important}
}

/* Desktop: Icons immer sichtbar (verhindert seltene IO-Bugs) */
@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 */
.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}

/* Kontakt */
.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 */
.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)}

/* Responsive */
@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}
  /* Vereinheitlichte Höhe/Rahmen im Header: Kontakt, LinkedIn, DE, EN */
  .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}
}

/* Language visibility (no hiding; translation replaces text) */
.lang-en{display:initial}
.lang-en-active .lang-de{display:initial}
.lang-en-active .lang-en{display:initial}