@font-face{font-family:Inter;src:url('/assets/inter-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --ink:#16182b;--muted:#5f6270;--paper:#fbfaf7;--blue:#304ffe;--orange:#ff6240;--line:#d9d9de;
  --ease:cubic-bezier(.22,.7,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-menu:cubic-bezier(.86,0,.07,1);
  --w-display:620;--w-heading:560;--w-body:420;
  --hero-first:clamp(5.8rem,min(16.2vw,25svh),15rem);--hero-last:clamp(4rem,min(21vw,34svh),19.5rem);--hero-lh:.86;--hero-bottom:3%;--hero-side:3.5%;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6rem}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif;font-weight:var(--w-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"ss01","cv11"}
h1,h2,h3,p,figure{margin:0}
h2,h3,p{overflow-wrap:break-word}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a:focus-visible{outline:2px solid var(--orange);outline-offset:6px}
img{display:block;width:100%;height:auto;object-fit:cover}
svg{display:block}
::selection{background:var(--orange);color:#fff}
.content{width:min(1080px,calc(100% - 96px));margin-inline:auto}

/* Vor dem Intro bleibt alles versteckt, GSAP setzt die Startpositionen und gibt dann frei */
.js.is-loading .hero-visual,.js.is-loading .hero h1>span>span,.js.is-loading .hero-scroll,.js.is-loading .navigation{visibility:hidden}
/* Safari malt backdrop-filter-Elemente trotz visibility:hidden am Elternelement, darum zusätzlich opacity direkt auf Pille und Toggle */
.js.is-loading .navigation nav,.js.is-loading .nav-toggle{opacity:0;visibility:hidden}
/* WebKit berechnet Styles vor dem Stylesheet und animiert dann die Transition zum Ruhezustand, etwa das Menü nach oben weg. Beim Laden darum keine Transitions. */
.js.is-loading .menu,.js.is-loading .menu *,.js.is-loading .navigation *{transition:none!important}

/* Navigation */
.navigation{position:fixed;z-index:30;top:18px;left:50%;transform:translateX(-50%)}
.navigation nav{display:flex;align-items:center;padding:6px;border-radius:14px;background:#fffdf5c7;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 7px 30px #1013391a}
.navigation a{display:block;padding:14px 17px;white-space:nowrap;font-size:.9375rem;line-height:1.2;font-weight:500;letter-spacing:-.01em}
.navigation a:not(.nav-contact){transition:color .25s}
.navigation a:not(.nav-contact):hover,.navigation a[aria-current]{color:var(--blue)}
.navigation .nav-contact{background:var(--blue);color:#fff;border-radius:9px;overflow:hidden;position:relative}
.nav-contact span{display:block;transition:transform .5s var(--ease)}
.nav-contact span+span{position:absolute;inset:auto 17px;top:calc(100% + 14px)}
.nav-contact:hover span:first-child{transform:translateY(-250%)}
.nav-contact:hover span+span{transform:translateY(calc(-100% - 28px))}
.nav-toggle,.menu{display:none}

/* Hero */
.hero{height:100svh;min-height:650px;max-height:1250px;position:relative;isolation:isolate;overflow:hidden;background:var(--blue)}
.hero-visual{position:absolute;inset:0;overflow:hidden;z-index:-1;background:var(--blue);will-change:transform}
.hero-image{height:100%;width:100%;object-fit:cover;object-position:50% 6%;transform-origin:50% 30%;will-change:transform}
.hero-tint{position:absolute;inset:0;background:linear-gradient(115deg,#304ffeb3 0%,#304ffe1c 42%,#ff624020 100%);mix-blend-mode:multiply}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,#15162b08 15%,#15162b00 43%,#121528b8 100%)}
.hero-title{position:absolute;bottom:var(--hero-bottom);left:var(--hero-side);right:var(--hero-side);color:#fff;will-change:transform}
.hero h1{font-weight:var(--w-display);letter-spacing:-.06em;line-height:var(--hero-lh)}
.hero h1>span{display:block;overflow:hidden;padding:.06em .04em .12em;margin:-.06em -.04em -.12em}
.hero h1>span>span{display:block;width:max-content;max-width:100%;will-change:transform}
.name-first{font-size:var(--hero-first);margin-left:42%!important}
.name-last{font-size:var(--hero-last)}

/* Pfeil sitzt auf der Höhe von „Simon“: Desktop links davon, Mobile rechts daneben */
.hero-scroll{position:absolute;left:0;bottom:calc(var(--hero-last) * var(--hero-lh) + var(--hero-first) * var(--hero-lh) / 2);transform:translateY(50%);width:56px;height:56px;border-radius:50%;border:1px solid #ffffff80;color:#fff;background:#ffffff14;overflow:hidden;transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)}
.hero-scroll-icon{position:absolute;inset:0;display:grid;place-items:center}
.hero-scroll-icon svg{position:absolute;width:20px;height:20px;transition:transform .55s var(--ease-out)}
.hero-scroll-icon svg+svg{transform:translateY(-220%)}
.hero-scroll:hover{background:#fff;color:var(--blue);border-color:#fff}
.hero-scroll:hover .hero-scroll-icon svg:first-child{transform:translateY(220%)}
.hero-scroll:hover .hero-scroll-icon svg+svg{transform:translateY(0)}
.hero-scroll.is-nudging .hero-scroll-icon svg:first-child{transform:translateY(220%)}
.hero-scroll.is-nudging .hero-scroll-icon svg+svg{transform:translateY(0)}

/* Über mich */
.about{padding:130px 0 120px;scroll-margin-top:0}
.about-lead{font-size:clamp(1.65rem,2.6vw,2.4rem);font-weight:440;line-height:1.42;letter-spacing:-.035em;max-width:1010px}
.about-lead a{color:var(--blue);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;transition:color .25s}
.about-lead a:hover{color:var(--orange)}
.about-lead .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.about-lead .w>span{display:inline-block;will-change:transform}
.about-bottom{display:flex;align-items:center;gap:24px;max-width:570px;margin:37px 0 0 auto}
.about-bottom img{width:72px;height:72px;border-radius:50%;flex-shrink:0}
.about-bottom p{font-size:.9375rem;line-height:1.7;letter-spacing:-.005em;color:var(--muted)}

/* Momente */
.stories{padding-bottom:145px;background:#fff}
.stories-heading{overflow:hidden;padding:48px 0 78px;line-height:.88;letter-spacing:-.06em;background:var(--paper)}
.stories-heading h2,.stories-heading>span{display:block;white-space:nowrap;font-size:clamp(7rem,17.5vw,17rem);font-weight:var(--w-display);line-height:.88;width:max-content;will-change:transform}
.stories-heading h2{margin-left:13%;color:var(--blue)}
.stories-heading>span{margin-left:30%;color:#dfe4ff}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:42px;align-items:start;padding-top:24px}
.story-column{display:grid;gap:115px;will-change:transform}
.story-column-offset{padding-top:150px}
.story{min-width:0}
.story-image{display:block;position:relative;overflow:hidden;border-radius:18px;background:#e9e9e9;aspect-ratio:1/1.14;box-shadow:0 22px 55px #15163112;transform:translateZ(0);isolation:isolate}
.story-media{display:block;position:absolute;inset:0;transition:transform 1.1s var(--ease-out);will-change:transform}
.story-image:hover .story-media{transform:scale(1.035)}
.story-image img{width:100%;height:118%;max-width:none;object-fit:cover;transform:translateY(-8%);will-change:transform}
.story-powerplant .story-image img{object-position:45% 50%}
.story-sef .story-image{aspect-ratio:800/534}
.story-sef .story-image img{object-position:50% 50%}
.story-hackathon .story-image{aspect-ratio:1/1.05}
.story-hackathon .story-image img{object-position:37% 50%}
.story-skills .story-image{aspect-ratio:1/1.2}
.story-skills .story-image img{object-position:50% 30%}
.story-image-still img{height:100%;transform:none}
.image-action{position:absolute;right:20px;bottom:20px;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--orange);color:#fff;transition:transform .5s var(--ease-out),background .3s}
.image-action svg{width:22px;height:22px;transition:transform .5s var(--ease-out)}
.story-image:hover .image-action{background:var(--blue);transform:scale(1.08)}
.story-image:hover .image-action svg{transform:translate(1px,-1px)}
.story-copy{padding-top:25px}
.story-copy h3{font-size:clamp(1.7rem,2.6vw,2.3rem);font-weight:var(--w-heading);line-height:1.13;letter-spacing:-.04em;margin-bottom:17px}
.story-copy p{font-size:1rem;line-height:1.72;color:var(--muted);letter-spacing:-.01em;max-width:475px}
.story-link{display:inline-flex;align-items:center;gap:14px;font-size:.875rem;font-weight:500;line-height:1.5;padding:5px 0;margin-top:19px;color:var(--blue);position:relative;transition:color .3s}
.story-link:before,.story-link:after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;opacity:.45;transform-origin:left}
.story-link:after{opacity:1;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.story-link:hover{color:var(--orange)}
.story-link:hover:after{transform:scaleX(1);transform-origin:left}
.story-link-arrow{transition:transform .35s var(--ease-out)}
.story-link:hover .story-link-arrow{transform:translate(3px,-3px)}
.story-press{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 0;padding:0;list-style:none}
.story-press a{display:inline-block;font-size:.75rem;font-weight:500;line-height:1;letter-spacing:-.005em;padding:8px 12px;border-radius:999px;background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--muted);transition:color .3s,background-color .3s}
.story-press a:hover{color:var(--blue);background:color-mix(in srgb,var(--blue) 9%,transparent)}

/* Mehr als Arbeit */
.personal{background:var(--blue);color:#fff;padding:110px 0 105px}
.personal-layout{display:grid;grid-template-columns:1fr 1.08fr;align-items:center;gap:9%}
.personal h2{font-size:clamp(3rem,5.9vw,5.3rem);font-weight:var(--w-heading);line-height:.99;letter-spacing:-.05em;margin-bottom:31px}
.personal p{font-size:1.0625rem;line-height:1.7;letter-spacing:-.01em;margin-top:19px;max-width:400px;color:#e1e5ff}
.personal-photo{min-width:0}
.personal-media{display:block;overflow:hidden;border-radius:18px;transform:translateZ(0)}
.personal-photo img{width:100%;aspect-ratio:4/4.7;object-position:35% center;will-change:transform}
.personal-photo figcaption{font-size:.75rem;line-height:1.5;color:#d6dbff;margin-top:14px}

/* Kontakt */
.contact{padding:92px 0 30px;background:var(--orange);color:#fff;overflow:hidden}
.contact h2{display:flex;gap:.2em;align-items:baseline;font-size:clamp(4.5rem,13vw,12rem);font-weight:var(--w-display);line-height:.9;letter-spacing:-.06em;white-space:nowrap}
.contact h2>span{display:block;overflow:hidden;padding:.08em .04em .14em;margin:-.08em -.04em -.14em}
.contact h2>span>span{display:block;will-change:transform}
.contact h2>span:last-child{color:#172046}
.contact-link{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 0 31px;border-bottom:1px solid #ffffff70;font-size:clamp(1.15rem,2.2vw,1.8rem);font-weight:460;line-height:1.3;letter-spacing:-.025em;margin-top:35px}
.contact-arrow{width:34px;height:34px;transition:transform .45s var(--ease-out)}
.contact-link:hover .contact-arrow{transform:translate(5px,-5px)}
.footer-bottom{display:flex;justify-content:space-between;gap:24px;font-size:.8125rem;line-height:1.6;color:#ffe2da;padding-top:26px}
.footer-bottom a:hover{text-decoration:underline;text-underline-offset:4px}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;left:12px;top:-100px;background:#fff;padding:13px;z-index:100}
.skip-link:focus{top:12px}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

@media(min-width:1600px){
  :root{--hero-side:6%;--hero-first:min(15vw,25svh,17rem);--hero-last:min(20.5vw,34svh,23rem)}
  .content{width:1180px}
  .story-grid{gap:55px}
}
@media(max-width:1000px){
  :root{--hero-last:min(21vw,34svh)}
  .content{width:calc(100% - 64px)}
  .hero{max-height:1050px;min-height:620px}
  .hero-image{object-position:50% 5%}
  .name-first{margin-left:35%!important}
  .about{padding:92px 0}
  .about-bottom{max-width:510px;margin-top:28px}
  .stories-heading{padding-bottom:58px}
  .stories{padding-bottom:95px}
  .story-grid{gap:28px}
  .story-column{gap:85px}
  .story-column-offset{padding-top:100px}
  .story-copy h3{font-size:1.8rem}
  .personal{padding:80px 0}
  .personal-layout{gap:6%}
  .personal h2{font-size:3.8rem}
  .personal p{font-size:1rem}
  .contact{padding-top:75px}
}
@media(max-width:640px){
  :root{--hero-first:19vw;--hero-last:20.5vw;--hero-lh:.9;--hero-bottom:5%;--hero-side:5%}
  html{scroll-padding-top:5.5rem}
  .content{width:calc(100% - 40px)}
  .navigation{top:0;left:0;right:0;transform:none;display:flex;justify-content:flex-end;padding:12px 14px;pointer-events:none}
  .navigation nav{display:none}
  .nav-toggle{pointer-events:auto;display:grid;place-items:center;width:58px;height:46px;border-radius:13px;border:0;padding:0;margin:0;background:#fffdf5d9;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 7px 30px #1013391a;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .nav-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
  .nav-toggle-icon{position:relative;display:block;width:20px;height:10px}
  .nav-toggle-icon i{position:absolute;left:0;width:20px;height:1.5px;border-radius:1px;background:currentColor;transition:transform .4s var(--ease-menu)}
  .nav-toggle-icon i:first-child{top:0}
  .nav-toggle-icon i:last-child{top:8.5px}
  .is-menu-open .nav-toggle-icon i:first-child{transform:translateY(4.25px) rotate(-45deg)}
  .is-menu-open .nav-toggle-icon i:last-child{transform:translateY(-4.25px) rotate(45deg)}
  .menu{position:fixed;top:66px;right:14px;z-index:25;display:block;width:max-content;padding:6px;border-radius:14px;background:#fffdf5d9;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 7px 30px #1013391a;transform:translateY(calc(-100% - 90px));visibility:hidden;transition:transform .45s var(--ease-menu),visibility 0s .45s}
  .is-menu-open .menu{transform:none;visibility:visible;transition:transform .45s var(--ease-menu),visibility 0s}
  .menu nav{display:flex;flex-direction:column;gap:2px}
  .menu nav a{display:block;padding:12px 16px;text-align:right;font-size:.9375rem;font-weight:500;letter-spacing:-.01em;line-height:1.2;border-radius:9px;color:var(--ink)}
  .menu nav a:not(.menu-contact):active{background:#ffffff80}
  .menu-contact{background:var(--blue);color:#fff!important;margin-top:4px}
  .menu-contact:active{background:#2438c4}
  .hero{height:94svh;min-height:570px;max-height:950px}
  .hero-image{object-position:43% 12%}
  .hero h1{letter-spacing:-.05em}
  .name-first{margin-left:12%!important}
  .hero-scroll{left:auto;right:0;width:46px;height:46px}
  .hero-scroll-icon svg{width:17px;height:17px}
  .about{padding:61px 0 54px}
  .about-lead{font-size:1.55rem;line-height:1.4;letter-spacing:-.03em}
  .about-bottom{align-items:flex-start;gap:16px;margin-top:25px}
  .about-bottom img{width:49px;height:49px}
  .about-bottom p{font-size:.875rem;line-height:1.65}
  .stories-heading{padding:31px 0 44px}
  .stories-heading h2,.stories-heading>span{font-size:27vw;line-height:.87;letter-spacing:-.06em}
  .stories-heading h2{margin-left:5%}
  .stories-heading>span{margin-left:20%}
  .story-grid{display:flex;flex-direction:column;gap:55px;padding-top:0}
  .story-column{display:contents}
  .story-column-offset{padding-top:0}
  .story{width:100%}
  .story-powerplant{order:0}.story-sef{order:1}.story-hackathon{order:2}.story-skills{order:3}
  .story-image{border-radius:13px;aspect-ratio:1/.95;box-shadow:none}
  .story-sef .story-image{aspect-ratio:800/534}
  .story-hackathon .story-image{aspect-ratio:1/.95}
  .story-skills .story-image{aspect-ratio:1/1.1}
  .story-copy{padding-top:19px}
  .story-copy h3{font-size:1.8rem;line-height:1.15;margin-bottom:12px}
  .story-copy p{font-size:1rem;line-height:1.65}
  .story-link{font-size:.8125rem;margin-top:14px}
  .story-press{margin-top:16px}
  .image-action{width:45px;height:45px;right:15px;bottom:15px}
  .image-action svg{width:19px;height:19px}
  .stories{padding-bottom:61px}
  .personal{padding:52px 0}
  .personal-layout{grid-template-columns:1fr;gap:31px}
  .personal h2{font-size:3.5rem;line-height:1;margin-bottom:23px}
  .personal h2 br{display:none}
  .personal p{font-size:1rem;max-width:100%;margin-top:16px}
  .personal-media{border-radius:13px}
  .personal-photo img{aspect-ratio:1/.9;object-position:38% 50%}
  .personal-photo figcaption{font-size:.75rem;margin-top:10px}
  .contact{padding:52px 0 22px}
  .contact h2{font-size:clamp(4rem,22vw,6.2rem);line-height:.9;gap:.17em}
  .contact-link{font-size:1.1rem;padding:20px 0;margin-top:29px}
  .contact-arrow{width:26px;height:26px}
  .footer-bottom{font-size:.75rem;gap:15px;padding-top:21px}
}
@media(max-height:560px){
  .hero{min-height:100svh;max-height:none}
}
@media(max-width:370px){
  :root{--hero-first:22vw;--hero-last:18vw}
  .contact h2{font-size:20vw}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js.is-loading .hero-visual,.js.is-loading .hero h1>span>span,.js.is-loading .hero-scroll,.js.is-loading .navigation,.js.is-loading .navigation nav,.js.is-loading .nav-toggle{visibility:visible;opacity:1}
  *,*:before,*:after{animation:none!important;transition:none!important}
}