/* Theme Name: Lukas Kolleker Portfolio Author: Lukas Kolleker Description: Dynamisches Portfolio mit öffentlicher Startseite und personalisierten Bewerbungsseiten. Version: 4.9.2 Text Domain: lk-portfolio */ :root{--bg:#f0efe9;--fg:#111;--acid:#c8ff2e;--muted:#6d6b65;--line:#1113;--pad:clamp(18px,3.2vw,56px)} .work-scroll-anchor{display:block;width:0;height:0;pointer-events:none} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:Arial,sans-serif}a{color:inherit;text-decoration:none}.mono{text-transform:uppercase;letter-spacing:.1em;font-size:11px}.hero{height:100svh;padding:0 var(--pad);display:grid;align-items:center;position:relative;overflow:hidden}.hero-bg{position:absolute;inset:0}.hero-bg:after{content:"";position:absolute;inset:0;background:var(--bg);opacity:.8}.hero-bg img,.hero-bg video{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}.collab{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center}.name,.company{font-size:clamp(52px,8vw,130px);font-weight:700;line-height:.82;letter-spacing:-.07em;text-transform:uppercase}.company{text-align:center;padding-left:10vw}.company img{width:100%;max-height:170px;object-fit:contain}.cross{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(30px,5vw,76px)}.public .collab{grid-template-columns:1fr}.public .name{text-align:center;font-size:clamp(70px,12vw,190px)}.public .company,.public .cross{display:none}.scroll{position:absolute;left:50%;bottom:25px;transform:translateX(-50%)}.intro{padding:140px var(--pad);font-size:clamp(30px,4.5vw,70px);line-height:1.04;letter-spacing:-.05em}.intro mark{background:var(--acid)}.formats{padding:90px var(--pad);background:#151515;color:#eee;display:grid;grid-template-columns:.7fr 1.3fr;gap:6vw;align-items:center}.formats h2{font-size:clamp(38px,4vw,62px);letter-spacing:-.05em}.formats p{color:#bbb;font-size:20px;line-height:1.35}.slider{overflow:hidden}.slides{display:flex;transition:.6s}.slide{flex:0 0 100%;aspect-ratio:16/9}.slide img{width:100%;height:100%;object-fit:cover}.work{padding:75px var(--pad) 120px}.work-head{position:sticky;top:0;background:#f0efe9ee;backdrop-filter:blur(12px);z-index:5;padding:18px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:end}.work h2{font-size:clamp(38px,5vw,72px);margin:0;letter-spacing:-.06em}.filters button{border:1px solid;border-radius:99px;background:none;padding:8px 12px}.filters .active{background:#111;color:#fff}.project{display:grid;grid-template-columns:.82fr 1.18fr;gap:4vw;align-items:center;padding:55px 0;border-bottom:1px solid var(--line)}.project.left{grid-template-columns:1.18fr .82fr}.project.left .media{grid-column:1;grid-row:1}.project.left .copy{grid-column:2}.media{grid-column:2;aspect-ratio:16/9;overflow:hidden;position:relative}.media img{width:100%;height:100%;object-fit:cover;transition:.6s}.media:hover img{transform:scale(1.05)}.tag{position:absolute;top:12px;left:12px;background:var(--acid);padding:7px 9px;font-size:10px}.more{position:absolute;right:12px;bottom:12px;background:var(--acid);padding:8px 10px}.network{display:inline-block;background:#111;color:#fff;padding:6px 8px;font-size:10px}.copy h3{font-size:clamp(30px,3vw,48px);line-height:1;margin:12px 0}.copy p{font-size:17px;line-height:1.5;color:var(--muted)}.roles{border-top:1px solid var(--line);padding-top:15px;color:#111!important}.footer{background:#111;color:#eee;padding:70px var(--pad) 30px}.contact{display:flex;justify-content:space-between;gap:30px}.contact-links{display:flex;flex-direction:column;gap:10px;font-size:clamp(24px,3vw,46px)}.contact-links a:last-child{font-size:.6em;color:#aaa}.legal{margin-top:70px;padding-top:18px;border-top:1px solid #555;display:flex;justify-content:space-between}.hidden{display:none!important} .media{border:0;padding:0;text-align:left;cursor:pointer}.preview{position:absolute;inset:-7%;width:114%;height:114%;object-fit:cover;border:0;animation:fade .4s .6s both}@keyframes fade{from{opacity:0}to{opacity:1}}dialog{width:min(1000px,94vw);max-height:92vh;padding:0;border:0;background:#111;color:#eee}dialog::backdrop{background:#000c}.dialog-copy{padding:24px}.dialog-copy h2{font-size:42px;margin:0 0 12px}.dialog-copy p{line-height:1.55;color:#bbb}.dialog-roles{padding-top:15px;border-top:1px solid #444}.dialog-audio{margin-top:18px;padding:15px;background:#222}.dialog-audio strong{display:block;margin-bottom:10px}.dialog-audio audio{width:100%}#dialog-media{aspect-ratio:16/9;background:#000}#dialog-media iframe,#dialog-media img,#dialog-media video{width:100%;height:100%;border:0;object-fit:cover}.dialog-link,.dialog-close{display:inline-block;margin-top:20px;padding:10px 13px;border:0;background:var(--acid);color:#111}.dialog-close{float:right;cursor:pointer} @media(max-width:760px){.collab{display:block}.name,.company{font-size:15vw}.company{padding:50px 0 0}.cross{top:50%}.formats{grid-template-columns:1fr}.project,.project.left{grid-template-columns:1fr}.project .media,.project.left .media{grid-column:1;grid-row:1}.project .copy,.project.left .copy{grid-column:1;grid-row:2}.work-head{display:block}.contact{display:block}.legal{gap:20px;flex-wrap:wrap}} /* V2: finaler Look und Bewegung */ body{overflow-x:hidden}.hero{isolation:isolate}.hero-bg{z-index:-1}.hero-bg:after{background:linear-gradient(180deg,rgba(240,239,233,.82),rgba(240,239,233,.9))}.collab{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;width:100%}.name{justify-self:start;padding-right:9vw}.company{display:flex;justify-content:center;align-items:center;padding-left:9vw;width:100%;height:clamp(90px,12vw,190px)}.company img{width:min(100%,620px);height:100%;max-height:none;object-fit:contain;object-position:center;transform-origin:center}.cross{left:50%;z-index:2}.public .name{justify-self:center;padding:0}.scroll{display:flex;align-items:center;gap:10px;font-weight:700}.scroll:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 0 rgba(200,255,46,.6);animation:pulse 1.8s infinite}@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(200,255,46,0)}} .formats{margin:0 0 clamp(55px,6vw,90px);padding-block:clamp(70px,8vw,120px);grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr)}.formats h2{margin:0 0 26px;font-size:clamp(45px,5.8vw,92px);line-height:.88}.slider{position:relative}.slides{will-change:transform;transition:transform .8s cubic-bezier(.16,.9,.25,1)}.slide{overflow:hidden}.slide img{transform:scale(1.035);transition:transform 5.2s linear}.slide.is-current img{transform:scale(1.1)}.slider-ui{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.slider-ui button{border:1px solid #777;background:transparent;color:#eee;padding:8px 12px;cursor:pointer}.slider-count{font-size:11px;letter-spacing:.12em} .work{padding-top:clamp(55px,6vw,85px)}.work-head{top:0;padding:20px 0;transition:box-shadow .3s}.work-head.is-stuck{box-shadow:0 12px 25px rgba(0,0,0,.06)}.filters{display:flex;gap:8px}.filters button{position:relative;overflow:hidden;cursor:pointer;font:inherit;font-size:13px;transition:color .35s,border-color .35s,transform .25s}.filters button:before{content:"";position:absolute;inset:0;background:#111;transform:translateY(105%);transition:transform .4s cubic-bezier(.16,.9,.25,1);z-index:-1}.filters button:hover{transform:translateY(-2px)}.filters button.active{color:#fff;border-color:#111}.filters button.active:before{transform:translateY(0)} .project{min-height:clamp(430px,48vw,680px);opacity:0;transform:translateY(55px);transition:opacity .75s,transform .9s cubic-bezier(.16,.9,.25,1)}.project.in{opacity:1;transform:none}.project.is-leaving{opacity:0;transform:scale(.965);pointer-events:none}.project.is-entering{animation:projectIn .7s cubic-bezier(.16,.9,.25,1) both}@keyframes projectIn{from{opacity:0;transform:translateY(35px) scale(.98)}to{opacity:1;transform:none}}.copy{max-width:590px}.copy h3{font-size:clamp(34px,3.6vw,58px);letter-spacing:-.055em}.copy>p:not(.roles){min-height:5.8em}.roles{font-size:clamp(17px,1.5vw,21px)!important;line-height:1.38}.roles .mono{display:block;margin-bottom:9px;font-size:10px}.media{width:100%;border-radius:1px;isolation:isolate;background:#d9d8d2}.media img{position:absolute;inset:-3%;width:106%;height:106%;transform:translateY(var(--parallax,0)) scale(1.02);transition:transform .8s cubic-bezier(.16,.9,.25,1),filter .5s}.media:hover img{transform:translateY(var(--parallax,0)) scale(1.075);filter:saturate(1.08)}.tag,.more{z-index:3}.more{transform:translateY(8px);opacity:0;transition:.35s}.media:hover .more{transform:none;opacity:1}.preview{z-index:2}.project.in .media{animation:clipLeft .95s cubic-bezier(.16,.9,.25,1) both}.project.left.in .media{animation-name:clipRight}@keyframes clipLeft{from{clip-path:inset(0 100% 0 0);transform:rotate(-1.5deg) scale(.97)}to{clip-path:inset(0);transform:none}}@keyframes clipRight{from{clip-path:inset(0 0 0 100%);transform:rotate(1.5deg) scale(.97)}to{clip-path:inset(0);transform:none}} .contact{display:grid;grid-template-columns:minmax(0,1fr) 220px;align-items:start}.contact-links{font-size:clamp(30px,4.5vw,72px);line-height:.96}.contact-links a{width:max-content;max-width:100%}.contact address{font-style:normal;line-height:1.55;color:#aaa}.dialog-copy{padding:clamp(22px,4vw,50px)}.dialog-copy h2{font-size:clamp(38px,5vw,72px);letter-spacing:-.055em}.dialog-roles{font-size:18px;line-height:1.5} @media(max-width:760px){.hero{min-height:100svh}.collab{display:grid}.name{padding:0}.company{padding:12vw 0 0;height:28vw}.cross{top:48%}.formats{margin-bottom:45px}.project,.project.left{min-height:0;padding:38px 0}.copy>p:not(.roles){min-height:0}.work-head{display:grid;gap:16px}.filters{overflow:auto;padding-bottom:3px}.contact{grid-template-columns:1fr;gap:35px}.more{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.project{opacity:1;transform:none}} /* V2.2: saubere Proportionen und unverzerrte Medien */ .formats{grid-template-columns:minmax(330px,.82fr) minmax(0,1.18fr);gap:clamp(38px,5vw,78px)}.formats-copy{min-width:0}.formats h2{font-size:clamp(38px,3.55vw,58px);line-height:.94;overflow-wrap:normal;word-break:normal}.formats p{max-width:560px;font-size:clamp(16px,1.45vw,20px)} .network{margin-bottom:9px}.copy>.mono{display:block;margin-bottom:14px}.copy h3{margin:0 0 20px}.copy>p:not(.roles){margin:0;color:#65635e}.roles{margin-top:32px;padding-top:18px}.project{gap:clamp(42px,6vw,95px)} .media img{inset:0;width:100%;height:100%;transform:translateY(var(--parallax,0));}.media:hover img{transform:translateY(var(--parallax,0));filter:none}.preview{inset:0;width:100%;height:100%;animation:fade .35s .3s both;background:#000}.preview:is(video){object-fit:contain}.more{opacity:1;transform:none} .contact-links a{position:relative;padding-bottom:8px}.contact-links a:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:clamp(3px,.45vw,7px);background:var(--acid);transform-origin:left;transition:transform .45s cubic-bezier(.16,.9,.25,1)}.contact-links a:hover:after{transform:scaleX(.72)} @media(max-width:900px){.formats{grid-template-columns:1fr}.formats h2{font-size:clamp(42px,8vw,72px)}.formats p{max-width:720px}.project{gap:35px}} /* V2.3: Typografie und Rhythmus des finalen HTML-Templates */ body{font-family:Manrope,Arial,sans-serif}.mono,.network,.tag,.more,.filters button,.slider-count{font-family:"DM Mono",monospace}.intro{font-weight:400}.intro mark{background:var(--acid);color:inherit;padding:0 .045em}.formats{padding-block:clamp(48px,5.2vw,76px);margin-bottom:0}.formats h2{font-weight:500;letter-spacing:-.055em}.slide img{transform:none!important;transition:none}.work{padding-top:clamp(38px,4.2vw,62px)} .project{position:relative;min-height:clamp(390px,42vw,610px);padding:clamp(42px,4.8vw,72px) clamp(12px,1.5vw,24px);margin-inline:clamp(-24px,-1.5vw,-12px);border:1px solid transparent;border-bottom-color:var(--line);transition:opacity .75s,transform .9s cubic-bezier(.16,.9,.25,1),background-color .35s,border-color .35s,box-shadow .35s}.project.is-hovered{background:rgba(200,255,46,.075);border-color:rgba(151,204,8,.72);box-shadow:0 16px 45px rgba(17,17,17,.07)}.project.is-hovered .network{background:var(--acid);color:#111}.project.is-hovered .more{background:#111;color:#fff}.network{font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.08em;margin-bottom:13px;padding:7px 9px}.copy>.mono{font-size:11px;line-height:1;margin-bottom:19px}.copy h3{font-weight:500;font-size:clamp(31px,3.2vw,50px);line-height:.98;margin-bottom:20px}.copy>p:not(.roles){font-size:clamp(15px,1.25vw,18px);line-height:1.5;min-height:6em}.roles{margin-top:26px;padding-top:18px;font-size:clamp(16px,1.42vw,20px)!important;line-height:1.38}.roles .mono{font-size:10px;letter-spacing:.1em;margin-bottom:12px}.preview:is(video){object-fit:contain}.preview:is(iframe){object-fit:contain}.media img{object-fit:cover}.tag{font-size:9px;text-transform:uppercase;letter-spacing:.06em}.more{text-transform:uppercase;font-size:10px;transition:background .3s,color .3s} @media(max-width:760px){.formats{padding-block:55px}.work{padding-top:35px}.project{margin-inline:-8px;padding-inline:8px}.project.is-hovered{background:transparent;border-color:transparent;border-bottom-color:var(--line);box-shadow:none}} /* V2.4: finaler Feinschliff und gestaffelte Scroll-Animationen */ .copy{justify-self:start;width:100%;padding:0}.network,.copy>.mono,.copy h3,.copy>p{margin-left:0}.roles{display:flex;flex-direction:column;gap:6px;margin-top:24px;padding-top:16px}.roles .mono{margin:0}.project.is-hovered .network{background:#111;color:#fff}.project.is-hovered .more{background:var(--acid);color:#111} .collab{--hero-progress:0;transform:translateY(calc(var(--hero-progress) * -38px)) scale(calc(1 - var(--hero-progress) * .045));opacity:calc(1 - var(--hero-progress) * .72);transition:transform .08s linear,opacity .08s linear}.scroll{--hero-progress:0;opacity:calc(1 - var(--hero-progress) * 1.6)} .reveal-section{opacity:0;transform:translateY(48px);transition:opacity .8s ease,transform .95s cubic-bezier(.16,.9,.25,1)}.reveal-section.section-in{opacity:1;transform:none}.intro .word{display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(5px)}.intro.section-in .word{animation:wordIn .48s cubic-bezier(.16,.9,.25,1) forwards}.intro.section-in .word:nth-of-type(3n+1){animation-delay:.08s}.intro.section-in .word:nth-of-type(3n+2){animation-delay:.16s}.intro.section-in .word:nth-of-type(3n){animation-delay:.24s}@keyframes wordIn{to{opacity:1;transform:none;filter:none}}.formats-copy h2,.formats-copy p,.formats .slider{opacity:0;transform:translateY(32px)}.formats.section-in .formats-copy h2{animation:sectionItem .7s .05s cubic-bezier(.16,.9,.25,1) forwards}.formats.section-in .formats-copy p{animation:sectionItem .7s .18s cubic-bezier(.16,.9,.25,1) forwards}.formats.section-in .slider{animation:sectionItem .85s .3s cubic-bezier(.16,.9,.25,1) forwards}@keyframes sectionItem{to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.collab,.scroll{opacity:1!important;transform:none!important}.reveal-section,.intro .word,.formats-copy h2,.formats-copy p,.formats .slider{opacity:1;transform:none;filter:none}} /* V2.5: Berufsbezeichnung und individuelle Bewerbungsseiten */ .hero-content{position:relative;width:100%}.hero-subtitle{margin:clamp(24px,3vw,42px) 0 0;text-align:center;font-size:clamp(11px,1.05vw,15px);letter-spacing:.14em}.public .hero-subtitle{margin-top:clamp(28px,4vw,54px)} /* V2.6: randlose Sticky-Leiste und sauberer mobiler Hero */ .work-head{margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);width:auto}.scroll{display:flex;flex-direction:row;align-items:center;justify-content:center;text-align:center;gap:9px;min-width:max-content;left:50%;transform:none;translate:calc(-50% + var(--hero-cta-offset-x,0px)) var(--hero-cta-offset-y,0px)}.scroll span{display:block}.scroll i{display:block;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transform-origin:center;animation:arrowCue 1.5s ease-in-out infinite}.scroll:before{display:none!important}@keyframes arrowCue{50%{transform:translateY(3px) rotate(45deg)}} .hero-cta-arrow-chevron .scroll:before{display:block!important;flex:0 0 auto}.hero-cta-arrow-off .scroll i{display:none}.hero-cta-arrow-accent .scroll i{order:-1;width:9px;height:9px;border:0;border-radius:50%;background:var(--acid);transform:none;animation:ctaDot 1.6s ease-in-out infinite}@keyframes ctaDot{50%{transform:scale(.72);opacity:.58}} @media(max-width:760px){.hero{height:100dvh;min-height:100dvh;width:100%;padding-inline:var(--pad)}.hero-bg{inset:0}.hero-bg img,.hero-bg video{height:100%;width:100%}.scroll{bottom:max(22px,env(safe-area-inset-bottom));white-space:nowrap}.work-head{margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}} /* V2.7: dynamischer Textrhythmus und lückenloses Bild-Parallax */ .network{margin-bottom:10px}.copy>.mono{margin-bottom:16px}.copy h3{margin-bottom:18px}.copy>p:not(.roles){min-height:0}.roles{margin-top:24px;padding-top:16px;gap:6px}.media img{inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);max-width:none}.scroll:before{display:block;flex:0 0 auto}.scroll i{margin-left:2px} /* V3: optionales Portrait in der Einleitung */ .intro.has-image{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(220px,.45fr);align-items:center;gap:var(--intro-image-gap,90px)}.intro figure{margin:0;overflow:hidden;aspect-ratio:4/5;background:#ddd;width:calc(100% * var(--intro-image-scale,1));justify-self:start;transform:translateX(var(--intro-image-offset,0))}.intro figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(var(--intro-image-grayscale,1));transition:transform .8s cubic-bezier(.16,.9,.25,1),filter .5s}.intro figure:hover img{transform:scale(1.035);filter:grayscale(0)} .intro mark{display:inline-block}.intro.section-in mark{animation:wordIn .55s .14s cubic-bezier(.16,.9,.25,1) both}.dialog-copy>p,.dialog-roles{white-space:pre-line} @media(max-width:760px){.intro.has-image{grid-template-columns:1fr}.intro figure{width:min(calc(70vw * var(--intro-image-scale,1)),calc(360px * var(--intro-image-scale,1)))}} /* V3.1: zentral einstellbare Farbwelt */ .hero-bg:after{background:var(--hero-overlay,var(--bg));opacity:var(--hero-overlay-opacity,.8)}.hero-bg img,.hero-bg video{opacity:var(--hero-media-opacity,1)}.formats,.footer{background:var(--dark,#151515)}.slider-count{color:inherit}.project.is-hovered{background:color-mix(in srgb,var(--project-highlight,var(--acid)) var(--project-highlight-mix,8%),transparent);border-color:color-mix(in srgb,var(--project-highlight,var(--acid)) 72%,#777)} .work-head{background:color-mix(in srgb,var(--bg) 92%,transparent)}.filters button:before{background:var(--fg)}.filters button.active{border-color:var(--fg)}.network,.project.is-hovered .network{background:var(--fg);color:var(--bg)}dialog{background:var(--dark)} /* V3.2: Bewerbungs-Hero, mobile Steuerung und Medienoptionen */ button{color:inherit;-webkit-appearance:none;appearance:none}.filters button{color:var(--fg);background:transparent}.filters button.active{color:var(--bg)}.tag,.more{color:#111!important;background:var(--acid)!important}.application .hero-subtitle{margin-top:clamp(42px,5vw,72px);font-size:clamp(14px,1.35vw,20px);font-weight:400;letter-spacing:.12em}.more{padding:11px 15px;font-size:11px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.16)}.more:after{content:" ↗"}.media img{inset:calc(var(--image-overscan,24px) * -1);width:calc(100% + var(--image-overscan,24px) * 2);height:calc(100% + var(--image-overscan,24px) * 2)}.signature{display:block;width:min(var(--signature-width,240px),100%);max-height:160px;object-fit:contain;object-position:left center;margin-top:28px}.intro-copy{min-width:0} @media(max-width:760px){.application .hero-content{display:flex;flex-direction:column;align-items:center}.application .collab{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,6vw,34px)}.application .name{justify-self:auto;text-align:center;padding:0;font-size:clamp(58px,17vw,92px)}.application .cross{position:static;transform:none;font-size:clamp(28px,9vw,44px);line-height:1}.application .company{padding:0;width:min(82vw,420px);height:auto;min-height:70px}.application .company img{width:100%;height:clamp(65px,22vw,115px);max-height:none;object-position:center}.application .hero-subtitle{margin-top:clamp(30px,7vw,48px);font-size:clamp(12px,3.5vw,16px);max-width:86vw;line-height:1.5}.tag,.more{color:#111!important}.filters button{-webkit-tap-highlight-color:transparent}.hero{height:100dvh!important;min-height:100dvh!important}} /* V3.3: Typografie, Fokus und Lebenslauf */ .hero{color:var(--hero-text,var(--fg))}.name,.company{font-size:clamp(calc(52px * var(--type-hero-name,1)),calc(8vw * var(--type-hero-name,1)),calc(150px * var(--type-hero-name,1)))}.public .name{font-size:clamp(calc(70px * var(--type-hero-name,1)),calc(12vw * var(--type-hero-name,1)),calc(200px * var(--type-hero-name,1)))}.hero-subtitle{font-size:clamp(calc(11px * var(--type-hero-subtitle,1)),calc(1.05vw * var(--type-hero-subtitle,1)),calc(20px * var(--type-hero-subtitle,1)))}.application .hero-subtitle{font-size:var(--application-subtitle-size,clamp(calc(14px * var(--type-hero-subtitle,1)),calc(1.35vw * var(--type-hero-subtitle,1)),calc(24px * var(--type-hero-subtitle,1))))}.intro{font-size:clamp(calc(30px * var(--type-intro,1)),calc(4.5vw * var(--type-intro,1)),calc(76px * var(--type-intro,1)))}.work h2{font-size:clamp(calc(38px * var(--type-section-heading,1)),calc(5vw * var(--type-section-heading,1)),calc(78px * var(--type-section-heading,1)))}.formats h2{font-size:clamp(calc(38px * var(--type-section-heading,1)),calc(3.55vw * var(--type-section-heading,1)),calc(64px * var(--type-section-heading,1)))}.copy h3{font-size:clamp(calc(31px * var(--type-project-title,1)),calc(3.2vw * var(--type-project-title,1)),calc(56px * var(--type-project-title,1)))}.copy>p:not(.roles){font-size:clamp(calc(15px * var(--type-project-body,1)),calc(1.25vw * var(--type-project-body,1)),calc(20px * var(--type-project-body,1)))}.roles{font-size:clamp(calc(16px * var(--type-project-body,1)),calc(1.42vw * var(--type-project-body,1)),calc(22px * var(--type-project-body,1)))!important}.contact-links{font-size:clamp(calc(30px * var(--type-contact,1)),calc(4.5vw * var(--type-contact,1)),calc(78px * var(--type-contact,1)))}.media:focus:not(:focus-visible),.scroll:focus:not(:focus-visible),.filters button:focus:not(:focus-visible){outline:none}.media:focus-visible,.scroll:focus-visible,.filters button:focus-visible{outline:2px solid var(--acid);outline-offset:4px}.hero-bg video::-webkit-media-controls{display:none!important}.resume-cta{padding:clamp(65px,8vw,120px) var(--pad);background:var(--bg);display:grid;grid-template-columns:110px 1fr;gap:30px;align-items:start}.resume-cta a{justify-self:start;font-size:clamp(34px,6vw,92px);line-height:.95;letter-spacing:-.06em;border-bottom:clamp(4px,.5vw,8px) solid var(--acid);padding-bottom:10px}.resume-cta a i{font-family:"DM Mono",monospace;font-style:normal;font-size:.45em;margin-left:.35em} @media(max-width:760px){.application .name{font-size:clamp(58px,17vw,92px)!important}.application .hero-subtitle{font-size:clamp(12px,3.5vw,16px)!important}.resume-cta{grid-template-columns:1fr;gap:18px}.resume-cta a{font-size:10vw}} /* V3.4: Projektgalerien */ .gallery-preview{background:#111;overflow:hidden}.gallery-preview img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover;transform:none!important;opacity:1;transition:opacity .18s}.gallery-preview img.changing{opacity:0}.dialog-gallery{position:relative;width:100%;height:100%;background:#000}.dialog-gallery img{width:100%;height:100%;object-fit:contain}.dialog-gallery button{position:absolute;bottom:14px;width:44px;height:44px;border:0;background:var(--acid);color:#111;font-size:20px;cursor:pointer}.dialog-gallery button[data-dir="-1"]{right:66px}.dialog-gallery button[data-dir="1"]{right:14px}.dialog-gallery span{position:absolute;left:14px;bottom:14px;background:#111;color:#fff;padding:9px 11px} /* V3.5: extrem reduzierte private Startseite */ .private-gallery-page{margin:0;background:#fff;color:#111;overflow:hidden}.private-gallery{position:fixed;inset:0;display:grid;place-items:center;padding:clamp(55px,7vw,110px)}.private-slide{position:absolute;inset:clamp(55px,7vw,110px);margin:0;display:grid;place-items:center;opacity:0;transform:scale(.985);transition:opacity .8s ease,transform 1.1s cubic-bezier(.16,.9,.25,1);pointer-events:none}.private-slide.active{opacity:1;transform:none}.private-slide img{display:block;width:100%;height:100%;object-fit:var(--private-fit,contain)}.private-imprint{position:fixed;left:clamp(18px,3vw,44px);bottom:clamp(16px,2.5vw,34px);z-index:4;font-size:10px;border-bottom:1px solid currentColor}.private-nav{position:fixed;right:clamp(18px,3vw,44px);bottom:clamp(16px,2.5vw,34px);display:flex;gap:7px;z-index:4}.private-nav button{width:40px;height:40px;border:1px solid #111;background:#fff;color:#111;cursor:pointer}.private-count{position:fixed;left:50%;bottom:clamp(18px,2.8vw,38px);transform:translateX(-50%);z-index:4;font-size:10px}.public-hidden{margin:0;min-height:100vh;background:#fff}@media(max-width:760px){.private-gallery,.private-slide{inset:0;padding:0}.private-slide{inset:45px 18px 58px}.private-imprint{left:18px;bottom:18px}} /* V3.6: Berufsbezeichnung verlässt den Hero gemeinsam mit dem Namen */ .hero-subtitle{--hero-progress:0;transform:translateY(calc(var(--hero-progress) * -28px));opacity:calc(1 - var(--hero-progress) * 1.2);transition:transform .08s linear,opacity .08s linear} @media(max-width:760px){.intro figure{transform:none}} [hidden]{display:none!important}.legal-page{min-height:100vh;padding:clamp(90px,12vw,170px) var(--pad);background:var(--bg);color:var(--fg)}.legal-page article{max-width:820px}.legal-page h1{font-size:clamp(54px,9vw,130px);letter-spacing:-.07em;margin:0 0 70px}.legal-page h2{margin:45px 0 12px;font-size:clamp(22px,3vw,38px)}.legal-page p{font-size:18px;line-height:1.65}.legal-back{display:inline-block;margin-top:70px;border-bottom:4px solid var(--acid);padding-bottom:5px}.lk-meta-sections{display:grid;gap:18px}.lk-meta-section{padding:18px;border:1px solid #dcdcde;border-radius:10px;background:#fff}.lk-meta-section h3{margin:0 0 15px;font-size:16px}.lk-meta-field{margin:0 0 16px}.lk-meta-field:last-child{margin-bottom:0}.lk-meta-field label{display:block;font-weight:600;margin-bottom:6px}.lk-meta-field input,.lk-meta-field textarea,.lk-meta-field select{width:100%}.lk-meta-media-row{display:flex;gap:8px}.lk-meta-media-row input,.lk-meta-media-row textarea{flex:1}.lk-editor-hint{margin:12px 0;padding:12px 14px;border-left:4px solid #c8ff2e;background:#f6f7f7} /* V3.13: reduzierter, fester digitaler Bilderrahmen */ html:has(.private-gallery-page),body.private-gallery-page{width:100%;height:100%;height:100dvh;overflow:hidden}.private-gallery-page{position:fixed;inset:0}.private-gallery{position:fixed;inset:0;padding:0;display:block}.private-slide{position:absolute;inset:auto;top:calc(50% - 18px);left:50%;width:min(68vw,620px,calc((100dvh - 150px) * .8));height:auto;aspect-ratio:4/5;margin:0;overflow:hidden;background:#eee;outline:1px solid rgba(17,17,17,.12);opacity:0;transform:translate(-50%,-50%);transition:opacity .8s ease,transform 1.05s cubic-bezier(.16,.9,.25,1),filter .8s ease}.private-slide.active{opacity:1;transform:translate(-50%,-50%)}.private-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.private-imprint{position:fixed;left:50%;right:auto;bottom:clamp(17px,3vh,30px);transform:translateX(-50%);text-align:center;white-space:nowrap}.private-nav{right:clamp(16px,3vw,40px);bottom:clamp(14px,2.5vh,28px)}.private-count{bottom:clamp(18px,3vh,32px)} @media(max-width:760px){.private-gallery,.private-slide{padding:0}.private-slide{inset:auto;top:calc(50% - 18px);left:50%;width:min(84vw,calc((100dvh - 130px) * .8));aspect-ratio:4/5;transform:translate(-50%,-50%)}.private-slide.active{transform:translate(-50%,-50%)}.private-imprint{left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%)}.private-nav{right:14px;bottom:max(12px,env(safe-area-inset-bottom))}} .card-audio{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.card-audio strong{display:block;margin-bottom:8px;font-family:"DM Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em}.card-audio audio{width:100%;max-width:430px}#dialog-media[hidden]{display:none!important}#project-dialog:has(#dialog-media[hidden]) .dialog-copy{padding-top:40px} .dialog-toolbar{position:sticky;top:0;z-index:20;display:flex;justify-content:flex-end;align-items:center;min-height:48px;padding:7px 12px;background:#111;border-bottom:1px solid #ffffff1f}.dialog-toolbar .dialog-close{float:none;margin:0;padding:9px 13px}.dialog-link{display:inline-flex;align-items:center;gap:9px}.dialog-link:after{content:"";width:.62em;height:.62em;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;background:linear-gradient(45deg,transparent 45%,currentColor 47%,currentColor 53%,transparent 55%);margin-left:1px}.tag{font-size:calc(9px * var(--type-project-tag,1));padding:calc(7px * var(--type-project-tag,1)) calc(9px * var(--type-project-tag,1))}.more{font-size:calc(11px * var(--type-project-more,1));padding:calc(11px * var(--type-project-more,1)) calc(15px * var(--type-project-more,1))} .external-arrow-off .dialog-link:after{display:none}.external-arrow-right .dialog-link:after{content:"→";width:auto;height:auto;border:0;background:none;margin-left:1px;font-size:1em;line-height:1}.work-head:has(.project-view-controls){display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:12px}.work-head:has(.project-view-controls) h2{grid-column:1}.work-head:has(.project-view-controls) .project-view-controls{grid-column:2}.work-head:has(.project-view-controls) .filters{grid-column:3;justify-self:end}.project-view-controls{display:flex;gap:5px;align-self:var(--work-filters-align,flex-end)}.project-view-controls button{position:relative;width:34px;height:32px;border:1px solid currentColor;border-radius:99px;background:transparent;color:inherit;padding:0;cursor:pointer}.project-view-controls button.active{background:var(--fg);color:var(--bg)}.project-view-controls button span{position:absolute;inset:50% auto auto 50%;width:14px;height:10px;transform:translate(-50%,-50%)}.project-view-controls .view-full span{border:1.5px solid currentColor}.project-view-controls .view-full span:after{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1.5px solid currentColor}.project-view-controls .view-compact span,.project-view-controls .view-compact span:before,.project-view-controls .view-compact span:after{height:1.5px;background:currentColor}.project-view-controls .view-compact span:before,.project-view-controls .view-compact span:after{content:"";position:absolute;left:0;width:100%}.project-view-controls .view-compact span:before{top:0}.project-view-controls .view-compact span:after{bottom:0}.project-expand span:before,.project-expand span:after{content:"";position:absolute;background:currentColor;left:50%;top:50%;transform:translate(-50%,-50%)}.project-expand span:before{width:12px;height:1.5px}.project-expand span:after{width:1.5px;height:12px}.project.is-expanded .project-expand span:after{display:none}.projects.compact-view{width:100%}.projects.compact-view .project{cursor:pointer}.projects.compact-view .project.is-collapsed{display:block;width:100%;padding:22px 0;min-height:0}.projects.compact-view .project.is-collapsed .copy{width:100%;display:grid;grid-template-columns:84px minmax(240px,1.15fr) minmax(120px,.55fr) minmax(220px,1fr);gap:10px 22px;align-items:center}.projects.compact-view .project.is-collapsed .network{grid-column:3;grid-row:1;justify-self:start}.projects.compact-view .project.is-collapsed .mono{grid-column:1;grid-row:1;position:relative;padding-left:15px}.projects.compact-view .project.is-collapsed .mono:before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;border-radius:50%;background:var(--acid);transform:translateY(-50%)}.projects.compact-view .project.is-collapsed h3{grid-column:2;grid-row:1;margin:0;font-size:clamp(23px,2vw,34px);line-height:1}.projects.compact-view .project.is-collapsed .copy>p:not(.roles){display:block;grid-column:4;grid-row:1;margin:0;min-height:0;font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.projects.compact-view .project.is-collapsed .roles,.projects.compact-view .project.is-collapsed .media,.projects.compact-view .project.is-collapsed .card-audio{display:none!important}.projects.compact-view .project.is-expanded{grid-template-columns:.82fr 1.18fr;padding-block:55px}.projects.compact-view .project.is-expanded .copy{grid-column:1;grid-row:1}.projects.compact-view .project.is-expanded .media{grid-column:2;grid-row:1} @media(max-width:900px){.projects.compact-view .project.is-collapsed .copy{grid-template-columns:76px minmax(190px,1.2fr) minmax(105px,.55fr)}.projects.compact-view .project.is-collapsed h3{grid-column:2}.projects.compact-view .project.is-collapsed .copy>p:not(.roles){display:none}} @media(max-width:760px){.work-head:has(.project-view-controls){grid-template-columns:auto 1fr;row-gap:13px}.work-head:has(.project-view-controls) h2{grid-column:1/-1;grid-row:1}.work-head:has(.project-view-controls) .project-view-controls{grid-column:1;grid-row:2;align-self:center}.work-head:has(.project-view-controls) .filters{grid-column:2;grid-row:2;justify-self:end;max-width:100%}.projects.compact-view .project.is-collapsed .copy{grid-template-columns:1fr;gap:8px 12px}.projects.compact-view .project.is-collapsed .network{grid-column:1;grid-row:3}.projects.compact-view .project.is-collapsed .mono{grid-column:1;grid-row:1}.projects.compact-view .project.is-collapsed h3{grid-column:1;grid-row:2;font-size:26px}.projects.compact-view .project.is-expanded,.projects.compact-view .project.left.is-expanded{grid-template-columns:1fr}.projects.compact-view .project.is-expanded .media,.projects.compact-view .project.left.is-expanded .media{grid-column:1;grid-row:1}.projects.compact-view .project.is-expanded .copy,.projects.compact-view .project.left.is-expanded .copy{grid-column:1;grid-row:2}} .work-head:has(.project-view-controls){grid-template-columns:minmax(0,1fr) auto auto}.work-head:has(.project-view-controls) .filters{grid-column:2}.work-head:has(.project-view-controls) .project-view-controls{grid-column:3;margin-left:3px;padding-left:13px;border-left:1px solid var(--line)}.projects.compact-view .project.is-collapsed{width:calc(100% + var(--pad) + var(--pad));margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}.projects.compact-view .project.is-collapsed .copy{max-width:none;grid-template-columns:112px minmax(280px,1.45fr) minmax(135px,.58fr) minmax(300px,1.45fr);gap:12px clamp(20px,2.5vw,42px)}.projects.compact-view .project.is-collapsed .mono{white-space:nowrap}.projects.compact-view .project.is-collapsed h3{font-size:clamp(22px,1.8vw,31px);line-height:1.05}.projects.compact-view .project.is-collapsed .copy>p:not(.roles){display:block;-webkit-line-clamp:unset;overflow:visible;font-size:clamp(13px,1vw,16px);line-height:1.42} @media(max-width:1050px){.projects.compact-view .project.is-collapsed .copy{grid-template-columns:104px minmax(210px,1.2fr) minmax(110px,.55fr) minmax(230px,1.2fr);gap:12px 20px}} @media(max-width:760px){.work-head:has(.project-view-controls){grid-template-columns:minmax(0,1fr) auto}.work-head:has(.project-view-controls) .filters{grid-column:1;grid-row:2;justify-self:start}.work-head:has(.project-view-controls) .project-view-controls{grid-column:2;grid-row:2;margin-left:0;padding-left:11px}.projects.compact-view .project.is-collapsed{margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}.projects.compact-view .project.is-collapsed .copy{grid-template-columns:1fr;gap:7px}.projects.compact-view .project.is-collapsed .copy>p:not(.roles){display:block;grid-column:1;grid-row:4;margin-top:6px;font-size:14px}.projects.compact-view .project.is-collapsed .network{grid-column:1;grid-row:3}.projects.compact-view .project.is-collapsed .mono{grid-column:1;grid-row:1}.projects.compact-view .project.is-collapsed h3{grid-column:1;grid-row:2}} #project-dialog:focus,.dialog-close:focus:not(:focus-visible){outline:none}.work-head{align-items:stretch}.work-head h2{line-height:.95;align-self:var(--work-heading-align,center)}.work-head .filters{align-self:var(--work-filters-align,flex-end)}.highlight-glow .project.is-hovered{background:transparent;border-color:transparent;border-bottom-color:var(--line);box-shadow:0 12px 34px color-mix(in srgb,var(--project-highlight,var(--acid)) var(--project-highlight-mix,8%),transparent),0 24px 65px color-mix(in srgb,var(--project-highlight,var(--acid)) var(--project-highlight-mix,8%),transparent)}.highlight-center .project.is-hovered{background:radial-gradient(ellipse at center,color-mix(in srgb,var(--project-highlight,var(--acid)) 20%,transparent) 0,color-mix(in srgb,var(--project-highlight,var(--acid)) var(--project-highlight-mix,8%),transparent) 42%,transparent 74%);border-color:transparent;border-bottom-color:var(--line);box-shadow:none}.highlight-outline .project.is-hovered{background:transparent;border-color:color-mix(in srgb,var(--project-highlight,var(--acid)) 78%,#777);box-shadow:0 0 0 1px color-mix(in srgb,var(--project-highlight,var(--acid)) 22%,transparent) inset}.highlight-fade .project.is-hovered{background:linear-gradient(112deg,transparent 2%,color-mix(in srgb,var(--project-highlight,var(--acid)) 8%,transparent) 24%,color-mix(in srgb,var(--project-highlight,var(--acid)) 24%,transparent) 58%,color-mix(in srgb,var(--project-highlight,var(--acid)) 7%,transparent) 82%,transparent 100%);border-color:transparent;border-bottom-color:var(--line);box-shadow:none}.highlight-minimal .project.is-hovered{background:transparent;border-color:transparent;border-bottom-color:var(--line);box-shadow:0 16px 38px rgba(17,17,17,.09)}.highlight-raised .project.is-hovered{background:color-mix(in srgb,var(--bg) 96%,var(--project-highlight,var(--acid)));border-color:color-mix(in srgb,var(--project-highlight,var(--acid)) 34%,#aaa);transform:translateY(-5px) scale(1.006);box-shadow:-8px -8px 22px rgba(255,255,255,.64),10px 14px 28px rgba(17,17,17,.13),0 28px 58px rgba(17,17,17,.09),inset 0 1px 0 rgba(255,255,255,.72)} .footer-address-off .contact{grid-template-columns:minmax(0,1fr)}.contact-align-left .contact-links{justify-self:start;align-items:flex-start;text-align:left}.contact-align-center .contact-links{justify-self:center;align-items:center;text-align:center}.contact-align-right .contact-links{justify-self:end;align-items:flex-end;text-align:right}.address-align-left .contact address{justify-self:start;text-align:left}.address-align-center .contact address{justify-self:center;text-align:center}.address-align-right .contact address{justify-self:end;text-align:right}.card-gallery-controls{position:absolute;z-index:5;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:7px;pointer-events:none}.card-gallery-controls>[role="button"]{pointer-events:auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--acid);color:#111;font-family:"DM Mono",monospace;font-size:15px;box-shadow:0 5px 18px rgba(0,0,0,.18);cursor:pointer}.card-gallery-controls>[role="button"]:focus-visible{outline:2px solid #fff;outline-offset:2px}.card-gallery-count{margin-left:auto;padding:8px 10px;background:#111;color:#fff;border-radius:999px;font-size:9px}.media:has(.card-gallery-controls) .more{bottom:56px}@media(max-width:760px){.card-gallery-controls>[role="button"]{width:38px;height:38px}} @media(prefers-reduced-motion:reduce){.private-slide{transition:none!important;filter:none!important}.private-slide.active{transform:translate(-50%,-50%) scale(1)!important}} .gallery-card-enhanced .gallery-preview{display:none!important}.card-gallery-layer{position:absolute!important;z-index:3;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;pointer-events:none;transform:none!important}.card-gallery-layer.is-fade{opacity:0;transition:opacity .58s ease}.card-gallery-layer.is-fade.is-active{opacity:1}.card-gallery-layer.is-slide{opacity:1;transform:translateX(100%)!important;transition:transform .52s cubic-bezier(.22,.75,.25,1)}.card-gallery-layer.is-slide.is-active{transform:translateX(0)!important}.gallery-card-enhanced .tag,.gallery-card-enhanced .more,.gallery-card-enhanced .card-gallery-controls{z-index:6} .dialog-gallery{overflow:hidden}.detail-gallery-layer{position:absolute!important;z-index:2;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;pointer-events:none}.detail-gallery-layer.is-fade{opacity:0;transition:opacity .58s ease}.detail-gallery-layer.is-fade.is-active{opacity:1}.detail-gallery-layer.is-slide{opacity:1;transform:translateX(100%);transition:transform .52s cubic-bezier(.22,.75,.25,1)}.detail-gallery-layer.is-slide.is-active{transform:translateX(0)}.dialog-gallery button,.dialog-gallery span{z-index:4} .work-head h2{display:flex;flex-direction:column;align-items:flex-start}.work-context{display:block;margin-top:clamp(8px,1vw,14px);font-size:clamp(9px,.72vw,11px);line-height:1.35;letter-spacing:.11em;color:var(--muted)}.closing-message{padding:clamp(70px,10vw,150px) var(--pad);background:var(--bg);color:var(--fg);font-size:clamp(34px,5.8vw,92px);line-height:.98;letter-spacing:-.055em;max-width:none}.contact-links{gap:var(--contact-gap,16px)}.contact-links a:last-child{font-size:calc(1em * var(--phone-scale,.6));color:var(--phone-color,#aaa)}.private-imprint.no-underline{border-bottom:0!important}.hero-intro-soft .hero-content{animation:heroSoftIn 1s .08s cubic-bezier(.16,.9,.25,1) both}.hero-intro-soft .scroll{animation:heroSoftIn .8s .65s cubic-bezier(.16,.9,.25,1) both}.hero-intro-cinematic .hero-bg img,.hero-intro-cinematic .hero-bg video{animation:heroCinematicBg 1.7s cubic-bezier(.16,.9,.25,1) both}.hero-intro-cinematic .name,.hero-intro-cinematic .company{animation:heroCinematicText 1.05s .18s cubic-bezier(.16,.9,.25,1) both}.hero-intro-cinematic .cross,.hero-intro-cinematic .hero-subtitle,.hero-intro-cinematic .scroll{animation:heroSoftIn .75s .85s cubic-bezier(.16,.9,.25,1) both}.hero-intro-typewriter .name,.hero-intro-typewriter .company,.hero-intro-typewriter .cross{animation:heroSoftIn .75s .05s cubic-bezier(.16,.9,.25,1) both}.hero-intro-typewriter .hero-subtitle{width:0;max-width:max-content;overflow:hidden;white-space:nowrap;margin-left:auto;margin-right:auto;animation:heroType 1.35s .65s steps(28,end) forwards}.hero-intro-typewriter .scroll{animation:heroSoftIn .7s 1.8s both}@keyframes heroSoftIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes heroCinematicBg{from{opacity:0;transform:scale(1.08);filter:grayscale(1) blur(8px)}to{opacity:var(--hero-media-opacity,1);transform:scale(1);filter:grayscale(1) blur(0)}}@keyframes heroCinematicText{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(18px)}to{opacity:1;clip-path:inset(0);transform:none}}@keyframes heroType{from{width:0}to{width:100%}}@media(max-width:760px){.work-context{font-size:9px;max-width:72vw}.closing-message{font-size:clamp(32px,10vw,52px)}.hero-intro-typewriter .hero-subtitle{width:auto;white-space:normal;animation:heroSoftIn .8s .5s both}}@media(prefers-reduced-motion:reduce){.hero-content,.hero-bg img,.hero-bg video,.name,.company,.cross,.hero-subtitle,.scroll{animation:none!important}.hero-intro-typewriter .hero-subtitle{width:auto!important;white-space:normal!important}} .hero.hero-edge-active:after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:-1px;height:clamp(20px,2.4vw,36px);opacity:var(--hero-edge-opacity,0);background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--hero-next-color) 68%,transparent) 48%,var(--hero-next-color) 100%);transition:opacity .12s linear;pointer-events:none}.hero.hero-edge-active .hero-content,.hero.hero-edge-active .scroll{z-index:4} .hero.hero-edge-active:after{height:clamp(8px,.8vw,12px);opacity:1;background:linear-gradient(to bottom,transparent 0%,var(--hero-next-color) 100%);transition:none}.work-context{margin-top:var(--work-context-gap,18px);padding-bottom:4px;line-height:1.55}.hero-intro-soft .hero-content{animation-duration:var(--hero-intro-duration,1.35s)}.hero-intro-cinematic .name,.hero-intro-cinematic .company{animation-duration:var(--hero-intro-duration,1.35s)}.hero-intro-typewriter .hero-subtitle{width:auto;max-width:none;overflow:visible;white-space:normal;animation:none}.hero-intro-typewriter .name{white-space:pre-line}.is-typing:after{content:"";display:inline-block;width:.06em;height:.82em;margin-left:.08em;background:currentColor;vertical-align:-.04em;animation:typingCursor .72s steps(1,end) infinite}@keyframes typingCursor{50%{opacity:0}}.hero-bg-none .hero-bg img,.hero-bg-none .hero-bg video{animation:none!important}.hero-bg-fade .hero-bg img,.hero-bg-fade .hero-bg video{animation:heroBackgroundFade var(--hero-bg-duration,1.6s) ease both!important}.hero-bg-zoom .hero-bg img,.hero-bg-zoom .hero-bg video{animation:heroBackgroundZoom var(--hero-bg-duration,1.9s) cubic-bezier(.16,.9,.25,1) both!important}@keyframes heroBackgroundFade{from{opacity:0}to{opacity:var(--hero-media-opacity,1)}}@keyframes heroBackgroundZoom{from{opacity:0;transform:scale(1.045);filter:grayscale(1) blur(3px)}to{opacity:var(--hero-media-opacity,1);transform:scale(1);filter:grayscale(1) blur(0)}}@media(prefers-reduced-motion:reduce){.hero-bg img,.hero-bg video{animation:none!important}.is-typing:after{display:none}} .dialog-roles strong{font-weight:700;color:#fff} .intro-text strong,.formats-copy strong,.copy strong,.closing-message strong,.dialog-copy strong{font-weight:700}.intro-text u,.formats-copy u,.copy u,.closing-message u,.dialog-copy u{text-decoration-thickness:.08em;text-underline-offset:.12em}.intro-text del,.formats-copy del,.copy del,.closing-message del,.dialog-copy del{opacity:.65}.formats-copy mark,.copy mark,.closing-message mark,.dialog-copy mark{background:var(--acid);color:#111;padding:0 .08em} .hero-intro-soft .hero-content{animation:none}.hero-intro-soft .collab{animation:heroSoftIn var(--hero-intro-duration,1.35s) var(--hero-name-delay,.18s) cubic-bezier(.16,.9,.25,1) both}.hero-intro-soft .hero-subtitle{animation:heroSoftIn .9s var(--hero-subtitle-delay,.85s) cubic-bezier(.16,.9,.25,1) both}.hero-intro-soft .scroll{animation:heroSoftIn .8s calc(var(--hero-subtitle-delay,.85s) + .35s) cubic-bezier(.16,.9,.25,1) both}.hero-intro-cinematic .name,.hero-intro-cinematic .company{animation-delay:var(--hero-name-delay,.18s)}.hero-intro-cinematic .cross,.hero-intro-cinematic .hero-subtitle{animation-delay:var(--hero-subtitle-delay,.85s)}.hero-intro-cinematic .scroll{animation-delay:calc(var(--hero-subtitle-delay,.85s) + .35s)}.hero-intro-typewriter .name,.hero-intro-typewriter .company,.hero-intro-typewriter .cross{animation-delay:var(--hero-name-delay,.18s)}.hero-intro-typewriter .hero-subtitle{width:auto;max-width:none;white-space:normal;animation:none}.hero-intro-typewriter .scroll{animation-delay:calc(var(--hero-subtitle-delay,.85s) + .55s)}.projects.compact-view .project.is-expanded .copy{animation:compactCopyReveal .48s .06s cubic-bezier(.16,.9,.25,1) both}.projects.compact-view .project.is-expanded .media,.projects.compact-view .project.left.is-expanded .media{animation:compactMediaReveal .58s .1s cubic-bezier(.16,.9,.25,1) both}@keyframes compactCopyReveal{from{opacity:.25;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes compactMediaReveal{from{opacity:0;clip-path:inset(0 0 0 12%);transform:translateX(24px) scale(.985)}to{opacity:1;clip-path:inset(0);transform:none}} .preview:is(iframe){pointer-events:none} .projects.compact-view .project.is-expanded .copy{animation:compactQuietFade .38s .08s ease both}.projects.compact-view .project.is-expanded .media,.projects.compact-view .project.left.is-expanded .media{animation:compactQuietFade .4s ease both;clip-path:none;transform:none}.projects.compact-view .project.is-preview-loading .media>img{opacity:0;transition:none}.projects.compact-view .project.is-preview-loading .media .preview{opacity:0!important;animation:none!important}.projects.compact-view .project.is-expanded:not(.is-preview-loading) .media .preview{opacity:1;animation:none;transition:opacity .28s ease}@keyframes compactQuietFade{from{opacity:0}to{opacity:1}} .projects.compact-view .project .media>img{opacity:1}.projects.compact-view .project .media .preview{opacity:0!important;animation:none!important;transition:opacity .28s ease}.projects.compact-view .project .media .preview.is-ready{opacity:1!important} .projects.compact-view .project{transition:background-color .28s ease,border-color .28s ease}.compact-highlight-subtle .projects.compact-view .project.is-collapsed.is-hovered{background:color-mix(in srgb,var(--project-highlight,var(--acid)) 4%,var(--bg))!important;border-color:transparent!important;border-bottom-color:var(--line)!important;box-shadow:inset 3px 0 0 color-mix(in srgb,var(--project-highlight,var(--acid)) 76%,transparent)!important;transform:none!important}.compact-highlight-off .projects.compact-view .project.is-collapsed.is-hovered{background:transparent!important;border-color:transparent!important;border-bottom-color:var(--line)!important;box-shadow:none!important;transform:none!important} .highlight-media-glow .projects:not(.compact-view) .project{isolation:isolate}.highlight-media-glow .projects:not(.compact-view) .project .copy,.highlight-media-glow .projects:not(.compact-view) .project .media{position:relative;z-index:1}.highlight-media-glow .projects:not(.compact-view) .project .media{transition:box-shadow .5s ease,filter .5s ease}.highlight-media-glow .projects:not(.compact-view) .project:after{content:"";position:absolute;z-index:0;left:73%;top:50%;width:58%;height:72%;border-radius:50%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--project-highlight,var(--acid)) 72%,transparent) 0%,color-mix(in srgb,var(--project-highlight,var(--acid)) 38%,transparent) 34%,color-mix(in srgb,var(--project-highlight,var(--acid)) 12%,transparent) 62%,transparent 82%);filter:blur(24px);opacity:0;transform:translate(-50%,-50%) scale(.78);transition:opacity .42s ease,transform .62s cubic-bezier(.16,.9,.25,1);pointer-events:none}.highlight-media-glow .projects:not(.compact-view) .project.left:after{left:27%}.highlight-media-glow .projects:not(.compact-view) .project.is-hovered{background:transparent;border-color:transparent;border-bottom-color:var(--line);box-shadow:none}.highlight-media-glow .projects:not(.compact-view) .project:hover .media,.highlight-media-glow .projects:not(.compact-view) .project.is-hovered .media{box-shadow:0 0 30px 13px color-mix(in srgb,var(--project-highlight,var(--acid)) 72%,transparent),0 0 58px 25px color-mix(in srgb,var(--project-highlight,var(--acid)) 38%,transparent),0 0 82px 34px color-mix(in srgb,var(--project-highlight,var(--acid)) 16%,transparent)}.highlight-media-glow .projects:not(.compact-view) .project:hover:after,.highlight-media-glow .projects:not(.compact-view) .project.is-hovered:after{opacity:.96;transform:translate(-50%,-50%) scale(1)} @media(max-width:760px){.highlight-media-glow .projects:not(.compact-view) .project:after,.highlight-media-glow .projects:not(.compact-view) .project.left:after{left:50%;top:27%;width:104vw;height:48%}} .highlight-media-frame-glow .projects:not(.compact-view) .project.is-hovered{background:transparent;border-color:transparent;border-bottom-color:var(--line);box-shadow:none}.highlight-media-frame-glow .projects:not(.compact-view) .project .media{outline:0 solid transparent;outline-offset:0;transition:outline-color .38s ease,outline-width .38s ease,outline-offset .38s ease,box-shadow .48s ease,transform .48s cubic-bezier(.16,.9,.25,1)}.highlight-media-frame-glow .projects:not(.compact-view) .project.is-hovered .media{outline:2px solid var(--project-highlight,var(--acid));outline-offset:8px;box-shadow:0 0 28px 9px color-mix(in srgb,var(--project-highlight,var(--acid)) 64%,transparent),0 0 76px 30px color-mix(in srgb,var(--project-highlight,var(--acid)) 34%,transparent),0 0 150px 58px color-mix(in srgb,var(--project-highlight,var(--acid)) 16%,transparent)} .highlight-media-frame-glow .projects:not(.compact-view) .project:hover .media,.highlight-media-frame-glow .projects:not(.compact-view) .project.is-hovered .media{outline:0!important;box-shadow:0 0 0 5px var(--project-highlight,var(--acid)),0 0 30px 14px color-mix(in srgb,var(--project-highlight,var(--acid)) 78%,transparent),0 0 82px 34px color-mix(in srgb,var(--project-highlight,var(--acid)) 48%,transparent),0 0 175px 72px color-mix(in srgb,var(--project-highlight,var(--acid)) 25%,transparent)!important} /* V3.62: klar sichtbarer, gleichmaessiger Cinema-Glow direkt am Medienrahmen */ .highlight-media-glow .projects:not(.compact-view) .project:after{display:none!important} .highlight-media-glow .projects:not(.compact-view) .project:hover .media, .highlight-media-glow .projects:not(.compact-view) .project.is-hovered .media{ clip-path:none!important; box-shadow: 0 0 18px 8px color-mix(in srgb,var(--project-highlight,var(--acid)) 92%,transparent), 0 0 42px 20px color-mix(in srgb,var(--project-highlight,var(--acid)) 66%,transparent), 0 0 72px 34px color-mix(in srgb,var(--project-highlight,var(--acid)) 38%,transparent), 0 0 105px 48px color-mix(in srgb,var(--project-highlight,var(--acid)) 18%,transparent)!important; filter:saturate(1.03) } /* Auch beim gerahmten Glow darf die Reveal-Schnittmaske den Effekt nicht abschneiden. */ .highlight-media-frame-glow .projects:not(.compact-view) .project:hover .media, .highlight-media-frame-glow .projects:not(.compact-view) .project.is-hovered .media{ clip-path:none!important } /* V3.64: regelbare und klar voneinander getrennte Medien-Glows */ .highlight-media-glow .projects:not(.compact-view) .project:hover .media, .highlight-media-glow .projects:not(.compact-view) .project.is-hovered .media{ box-shadow: 0 0 34px 8px color-mix(in srgb,var(--project-highlight,var(--acid)) var(--glow-strong,51%),transparent), 0 0 68px 24px color-mix(in srgb,var(--project-highlight,var(--acid)) var(--glow-medium,34%),transparent), 0 0 108px 42px color-mix(in srgb,var(--project-highlight,var(--acid)) var(--glow-soft,19%),transparent), 0 0 145px 58px color-mix(in srgb,var(--project-highlight,var(--acid)) var(--glow-faint,9%),transparent)!important } .highlight-media-frame-glow .projects:not(.compact-view) .project:hover .media, .highlight-media-frame-glow .projects:not(.compact-view) .project.is-hovered .media{ box-shadow: 0 0 0 3px var(--project-highlight,var(--acid)), 0 0 20px 5px color-mix(in srgb,var(--project-highlight,var(--acid)) var(--glow-medium,34%),transparent), 0 0 48px 14px color-mix(in srgb,var(--project-highlight,var(--acid)) var(--glow-soft,19%),transparent)!important } /* Filmischer Verlauf kommt immer von der Seite des Bildes beziehungsweise Videos. */ .highlight-fade .projects:not(.compact-view) .project.is-hovered{ background:linear-gradient(to left, color-mix(in srgb,var(--project-highlight,var(--acid)) 27%,transparent) 0%, color-mix(in srgb,var(--project-highlight,var(--acid)) 14%,transparent) 30%, color-mix(in srgb,var(--project-highlight,var(--acid)) 5%,transparent) 55%, transparent 78%) } .highlight-fade .projects:not(.compact-view) .project.left.is-hovered{ background:linear-gradient(to right, color-mix(in srgb,var(--project-highlight,var(--acid)) 27%,transparent) 0%, color-mix(in srgb,var(--project-highlight,var(--acid)) 14%,transparent) 30%, color-mix(in srgb,var(--project-highlight,var(--acid)) 5%,transparent) 55%, transparent 78%) } /* Aufgeklappte Kompaktkarten übernehmen dauerhaft den globalen Karten-Effekt. */ .highlight-fill .projects.compact-view .project.is-expanded{ background:color-mix(in srgb,var(--project-highlight,var(--acid)) var(--project-highlight-mix,8%),transparent); border-color:color-mix(in srgb,var(--project-highlight,var(--acid)) 72%,#777); box-shadow:0 16px 45px rgba(17,17,17,.07) } .highlight-glow .projects.compact-view .project.is-expanded{background:transparent;border-color:transparent;border-bottom-color:var(--line);box-shadow:0 12px 34px color-mix(in srgb,var(--project-highlight,var(--acid)) var(--project-highlight-mix,8%),transparent),0 24px 65px color-mix(in srgb,var(--project-highlight,var(--acid)) var(--project-highlight-mix,8%),transparent)} .highlight-center .projects.compact-view .project.is-expanded{background:radial-gradient(ellipse at center,color-mix(in srgb,var(--project-highlight,var(--acid)) 20%,transparent) 0,color-mix(in srgb,var(--project-highlight,var(--acid)) var(--project-highlight-mix,8%),transparent) 42%,transparent 74%);border-color:transparent;border-bottom-color:var(--line);box-shadow:none} .highlight-outline .projects.compact-view .project.is-expanded{background:transparent;border-color:color-mix(in srgb,var(--project-highlight,var(--acid)) 78%,#777);box-shadow:0 0 0 1px color-mix(in srgb,var(--project-highlight,var(--acid)) 22%,transparent) inset} .highlight-minimal .projects.compact-view .project.is-expanded{background:transparent;border-color:transparent;border-bottom-color:var(--line);box-shadow:0 16px 38px rgba(17,17,17,.09)} .highlight-raised .projects.compact-view .project.is-expanded{background:color-mix(in srgb,var(--bg) 96%,var(--project-highlight,var(--acid)));border-color:color-mix(in srgb,var(--project-highlight,var(--acid)) 34%,#aaa);transform:translateY(-5px) scale(1.006);box-shadow:-8px -8px 22px rgba(255,255,255,.64),10px 14px 28px rgba(17,17,17,.13),0 28px 58px rgba(17,17,17,.09),inset 0 1px 0 rgba(255,255,255,.72)} .highlight-fade .projects.compact-view .project.is-expanded{background:linear-gradient(to left,color-mix(in srgb,var(--project-highlight,var(--acid)) 27%,transparent) 0%,color-mix(in srgb,var(--project-highlight,var(--acid)) 14%,transparent) 30%,color-mix(in srgb,var(--project-highlight,var(--acid)) 5%,transparent) 55%,transparent 78%);border-color:transparent;border-bottom-color:var(--line);box-shadow:none} .highlight-fade .projects.compact-view .project.left.is-expanded{background:linear-gradient(to right,color-mix(in srgb,var(--project-highlight,var(--acid)) 27%,transparent) 0%,color-mix(in srgb,var(--project-highlight,var(--acid)) 14%,transparent) 30%,color-mix(in srgb,var(--project-highlight,var(--acid)) 5%,transparent) 55%,transparent 78%)} .highlight-media-glow .projects.compact-view .project.is-expanded,.highlight-media-frame-glow .projects.compact-view .project.is-expanded{background:transparent;border-color:transparent;border-bottom-color:var(--line);box-shadow:none} .highlight-media-glow .projects.compact-view .project.is-expanded .media,.highlight-media-frame-glow .projects.compact-view .project.is-expanded .media{clip-path:none!important} .highlight-media-glow .projects.compact-view .project.is-expanded .media{box-shadow:0 0 34px 8px color-mix(in srgb,var(--project-highlight,var(--acid)) var(--glow-strong,51%),transparent),0 0 68px 24px color-mix(in srgb,var(--project-highlight,var(--acid)) var(--glow-medium,34%),transparent),0 0 108px 42px color-mix(in srgb,var(--project-highlight,var(--acid)) var(--glow-soft,19%),transparent),0 0 145px 58px color-mix(in srgb,var(--project-highlight,var(--acid)) var(--glow-faint,9%),transparent)!important} .highlight-media-frame-glow .projects.compact-view .project.is-expanded .media{box-shadow:0 0 0 3px var(--project-highlight,var(--acid)),0 0 20px 5px color-mix(in srgb,var(--project-highlight,var(--acid)) var(--glow-medium,34%),transparent),0 0 48px 14px color-mix(in srgb,var(--project-highlight,var(--acid)) var(--glow-soft,19%),transparent)!important} /* V3.68: kein Aufblitzen vor dem Schreibmaschineneffekt */ .hero-intro-typewriter.typewriter-target-name:not(.typewriter-started) .name, .hero-intro-typewriter.typewriter-target-subtitle:not(.typewriter-started) .hero-subtitle, .hero-intro-typewriter.typewriter-target-both:not(.typewriter-started) .name, .hero-intro-typewriter.typewriter-target-both:not(.typewriter-started) .hero-subtitle{visibility:hidden} /* Optionales, bewusst sanftes Einrasten der großen Projektkarten. */ @media(min-width:901px){html.project-scroll-snap:not(.project-view-compact){scroll-snap-type:y proximity}html.project-scroll-stage:not(.project-view-compact){scroll-snap-type:y mandatory}html.project-scroll-snap:not(.project-view-compact) .projects:not(.compact-view) .project,html.project-scroll-stage:not(.project-view-compact) .projects:not(.compact-view) .project{scroll-snap-align:start;scroll-margin-top:clamp(105px,12vh,150px)}html.project-scroll-stage:not(.project-view-compact) .projects:not(.compact-view) .project{min-height:calc(100svh - clamp(105px,12vh,150px));scroll-snap-stop:always}} .work-head{transition:box-shadow .3s,transform .38s cubic-bezier(.16,.9,.25,1)}.work-header-static .work-head{position:relative;top:auto}.work-header-static .work-head.is-stuck{box-shadow:none} @media(prefers-reduced-motion:reduce){.hero-intro-typewriter .name,.hero-intro-typewriter .hero-subtitle{visibility:visible!important}html.project-scroll-snap,html.project-scroll-stage{scroll-snap-type:none}.work-head{transition:none}} /* Projekt-Aufbau: stabile Filterwechsel und auswählbare Presets */ .project.in .media.reveal-complete{animation:none!important;clip-path:none!important;transform:none} .project-reveal-soft .project{transform:translateY(24px)} .project-reveal-soft .project.in{opacity:1;transform:none} .project-reveal-side .project{transform:translateX(-42px)} .project-reveal-side .project.left{transform:translateX(42px)} .project-reveal-side .project.in{opacity:1;transform:none} .project-reveal-zoom .project{transform:translateY(12px) scale(.965)} .project-reveal-zoom .project.in{opacity:1;transform:none} .project-reveal-soft .project.in .media,.project-reveal-side .project.in .media,.project-reveal-zoom .project.in .media,.project-reveal-none .project.in .media{animation:none!important;clip-path:none!important;transform:none} .project-reveal-soft .project.is-entering{animation:projectFilterSoft .68s cubic-bezier(.16,.9,.25,1) both} .project-reveal-side .project.is-entering{animation:projectFilterSideLeft .72s cubic-bezier(.16,.9,.25,1) both} .project-reveal-side .project.left.is-entering{animation-name:projectFilterSideRight} .project-reveal-zoom .project.is-entering{animation:projectFilterZoom .7s cubic-bezier(.16,.9,.25,1) both} .project-reveal-none .project{opacity:1!important;transform:none!important} .project-reveal-none .project.is-entering{animation:none!important} @keyframes projectFilterSoft{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} @keyframes projectFilterSideLeft{from{opacity:0;transform:translateX(-38px)}to{opacity:1;transform:none}} @keyframes projectFilterSideRight{from{opacity:0;transform:translateX(38px)}to{opacity:1;transform:none}} @keyframes projectFilterZoom{from{opacity:0;transform:translateY(10px) scale(.965)}to{opacity:1;transform:none}} /* Dezente Projektnavigation am Bildschirmrand */ .project-quick-nav{position:fixed;top:50%;z-index:8;display:flex;flex-direction:column;gap:2px;width:100px;padding-block:16px;transform:translateY(-50%);opacity:0;visibility:hidden;transition:none;pointer-events:none;will-change:top} .project-quick-nav.is-visible{opacity:1;visibility:visible;pointer-events:none;transition:none} .project-quick-nav.is-right{right:auto;align-items:flex-end}.project-quick-nav.is-left{right:auto;align-items:flex-start} .project-quick-nav button{position:relative;display:flex;align-items:center;gap:9px;width:30px;min-width:30px;height:24px;min-height:24px;padding:0;border:0;background:none;color:var(--fg);cursor:pointer;pointer-events:auto}.project-quick-nav.is-right button{justify-content:flex-start;padding-right:12px}.project-quick-nav.is-left button{justify-content:flex-start;padding-left:12px} .project-quick-nav.is-right button{flex-direction:row-reverse}.project-quick-nav button i{display:block;width:6px;height:6px;border:1px solid currentColor;border-radius:50%;background:var(--bg);transition:transform .25s,background .25s,border-color .25s} .project-quick-nav button.active i,.project-quick-nav button:hover i,.project-quick-nav button:focus-visible i{background:var(--acid);border-color:var(--acid);transform:scale(1.5)} .project-quick-nav:hover button i{transform:scale(1.18)}.project-quick-nav button:hover i,.project-quick-nav button:focus-visible i{transform:scale(2.35)}.project-quick-nav button:has(+ button:hover) i,.project-quick-nav button:hover+button i{transform:scale(1.72)}.project-quick-nav button:has(+ button + button:hover) i,.project-quick-nav button:hover+button+button i{transform:scale(1.34)} .project-quick-nav button span{position:absolute;top:50%;width:max-content;max-width:260px;padding:6px 8px;background:var(--fg);color:var(--bg);font:10px/1.25 'DM Mono',monospace;letter-spacing:.05em;text-transform:uppercase;opacity:0;visibility:hidden;transform:translateY(-50%) translateX(5px);transition:.22s;pointer-events:none} .project-quick-nav.is-right button span{right:30px}.project-quick-nav.is-left button span{left:30px;transform:translateY(-50%) translateX(-5px)} .project-quick-nav button:hover span,.project-quick-nav button:focus-visible span{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)} .work-header-scroll-up .work-head{position:relative;top:auto;opacity:1;pointer-events:auto}.work-header-scroll-up .work-head.is-stuck{box-shadow:none}.work-head-spacer[hidden]{display:none}.work-header-scroll-up .work-head.is-scroll-pinned{position:fixed;top:var(--work-head-fixed-top,0);left:0;right:0;width:100%;margin:0;padding-inline:var(--pad);z-index:20;background:var(--bg);box-shadow:none;animation:workHeadSlideIn .52s cubic-bezier(.16,.9,.25,1) both}.work-header-scroll-up .work-head.is-scroll-pinned.is-scroll-leaving{animation:workHeadSlideOut .44s cubic-bezier(.55,.02,.82,.38) both}@keyframes workHeadSlideIn{from{transform:translateY(-105%)}to{transform:translateY(0)}}@keyframes workHeadSlideOut{from{transform:translateY(0)}to{transform:translateY(-105%)}} html.project-view-compact .project-quick-nav{display:none} .work.direct-footer-gap{padding-bottom:var(--projects-footer-gap,70px)} html.filter-positioning{scroll-snap-type:none!important}.work.is-filtering,.work.is-filtering .projects{overflow-anchor:none} @media(max-width:900px){.project-quick-nav{display:none}} /* Individuelle Hero-Animationen für Bewerbungsseiten. */ .hero-name-anim-none .name,.application-name-animation-none .name{animation:none!important;opacity:1;clip-path:none;transform:none} .hero-name-anim-soft .name,.application-name-animation-soft .name{animation:heroSoftIn var(--hero-intro-duration,1.35s) var(--hero-name-delay,.18s) cubic-bezier(.16,.9,.25,1) both!important} .hero-name-anim-cinematic .name,.application-name-animation-cinematic .name{animation:heroCinematicText var(--hero-intro-duration,1.35s) var(--hero-name-delay,.18s) cubic-bezier(.16,.9,.25,1) both!important} .hero-name-anim-typewriter .name,.application-name-animation-typewriter .name{animation:none!important;white-space:pre-line} .hero-subtitle-anim-none .hero-subtitle,.application-subtitle-animation-none .hero-subtitle{animation:none!important;opacity:1;clip-path:none;transform:none} .hero-subtitle-anim-soft .hero-subtitle,.application-subtitle-animation-soft .hero-subtitle{animation:heroSoftIn .9s var(--hero-subtitle-delay,.85s) cubic-bezier(.16,.9,.25,1) both!important} .hero-subtitle-anim-cinematic .hero-subtitle,.application-subtitle-animation-cinematic .hero-subtitle{animation:heroCinematicText var(--hero-intro-duration,1.35s) var(--hero-subtitle-delay,.85s) cubic-bezier(.16,.9,.25,1) both!important} .hero-subtitle-anim-typewriter .hero-subtitle,.application-subtitle-animation-typewriter .hero-subtitle{animation:none!important;width:auto;max-width:none;overflow:visible;white-space:normal} .hero-logo-anim-none .company,.application-logo-animation-none .company{animation:none!important;opacity:1;clip-path:none;transform:none} .hero-logo-anim-soft .company,.application-logo-animation-soft .company{animation:heroSoftIn var(--hero-intro-duration,1.35s) var(--hero-name-delay,.18s) cubic-bezier(.16,.9,.25,1) both!important} .hero-logo-anim-cinematic .company,.application-logo-animation-cinematic .company{animation:heroLogoCinematic var(--hero-intro-duration,1.35s) var(--hero-name-delay,.18s) cubic-bezier(.16,.9,.25,1) both!important} .hero-logo-anim-zoom .company,.application-logo-animation-zoom .company{animation:heroLogoZoom var(--hero-intro-duration,1.35s) var(--hero-name-delay,.18s) cubic-bezier(.16,.9,.25,1) both!important} .hero-logo-anim-slide .company,.application-logo-animation-slide .company{animation:heroLogoSlide var(--hero-intro-duration,1.35s) var(--hero-name-delay,.18s) cubic-bezier(.16,.9,.25,1) both!important} @keyframes heroLogoCinematic{from{opacity:0;clip-path:inset(0 0 0 100%);filter:blur(5px)}to{opacity:1;clip-path:inset(0);filter:blur(0)}} @keyframes heroLogoZoom{from{opacity:0;transform:scale(.88);filter:blur(4px)}to{opacity:1;transform:scale(1);filter:blur(0)}} @keyframes heroLogoSlide{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}} .application-name-animation-typewriter:not(.typewriter-started) .name,.application-subtitle-animation-typewriter:not(.typewriter-started) .hero-subtitle{visibility:hidden} .is-typing.typing-finished:after{opacity:0!important;animation:none!important} @media(prefers-reduced-motion:reduce){.hero-name-anim-soft .name,.hero-name-anim-cinematic .name,.hero-subtitle-anim-soft .hero-subtitle,.hero-subtitle-anim-cinematic .hero-subtitle,.hero-logo-anim-soft .company,.hero-logo-anim-cinematic .company,.hero-logo-anim-zoom .company,.hero-logo-anim-slide .company{animation:none!important;opacity:1!important;clip-path:none!important;transform:none!important;filter:none!important}} /* Mobile Filterpillen: formstabil, ohne herausragende Beschriftungen. */ @media(max-width:760px){ .work-head:has(.project-view-controls){grid-template-columns:minmax(0,1fr) auto} .work-head:has(.project-view-controls) .filters{min-width:0;width:100%;max-width:100%;justify-self:stretch} .work-head .filters{display:flex;align-items:center;gap:7px;overflow-x:auto;overflow-y:hidden;padding:3px 2px 7px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain} .work-head .filters::-webkit-scrollbar{display:none} .work-head .filters button{flex:0 0 auto;width:auto;min-width:max-content;height:34px;min-height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0 11px;border-radius:999px;white-space:nowrap;line-height:1;overflow:hidden} .work-head .project-view-controls{flex:0 0 auto;align-self:center} } /* Projekttrenner schließen symmetrisch mit den äußeren Medienkanten ab. */ @media(min-width:901px){ .projects .project,.projects .project.is-hovered{border-bottom-color:transparent!important} .projects .project:before{content:"";position:absolute;z-index:2;left:clamp(12px,1.5vw,24px);right:clamp(12px,1.5vw,24px);bottom:-1px;height:1px;background:var(--line);pointer-events:none} } /* Erklärender Hinweis unter dem Formatentwicklungs-Karussell. */ .formats-gallery{min-width:0;width:100%}.formats-note{width:100%;max-width:none!important;margin:clamp(14px,1.7vw,24px) 0 0;padding-top:clamp(12px,1.3vw,18px);border-top:1px solid #ffffff2b;color:#999!important;font-size:clamp(9px,.72vw,11px)!important;line-height:1.55!important;letter-spacing:.09em} /* Staffel- und Folgenauswahl in der Projekt-Detailansicht. */ #dialog-media:has(.episode-browser){aspect-ratio:auto}.episode-browser{background:#090909}.episode-player{width:100%;aspect-ratio:16/9;background:#000}.episode-player iframe,.episode-player video{display:block;width:100%;height:100%;border:0;object-fit:contain}.episode-navigation{padding:18px clamp(16px,3vw,30px) 24px;background:#111;border-top:1px solid #ffffff1f}.episode-seasons{display:flex;gap:8px;overflow-x:auto;padding-bottom:13px;scrollbar-width:none}.episode-seasons::-webkit-scrollbar{display:none}.episode-seasons button{flex:0 0 auto;border:1px solid #ffffff55;border-radius:999px;padding:8px 12px;background:transparent;color:#eee;font:10px/1 "DM Mono",monospace;text-transform:uppercase;cursor:pointer}.episode-seasons button.active{background:var(--acid);border-color:var(--acid);color:#111}.episode-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}.episode-list button{min-width:0;padding:12px 13px;border:1px solid #ffffff26;background:#191919;color:#ddd;text-align:left;cursor:pointer;transition:.25s}.episode-list button:hover,.episode-list button.active{border-color:var(--acid);background:color-mix(in srgb,var(--acid) 9%,#191919)}.episode-list button span{display:block;margin-bottom:6px;color:var(--acid);font:9px/1 "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em}.episode-list button strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500} /* Einfaches Videokarussell ohne Staffel- und Folgenbezeichnungen. */ #dialog-media:has(.video-carousel){aspect-ratio:auto}.video-carousel{position:relative;background:#000}.video-carousel-player{width:100%;aspect-ratio:16/9;background:#000}.video-carousel-player iframe,.video-carousel-player video{display:block;width:100%;height:100%;border:0;object-fit:contain}.video-carousel-controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;padding:clamp(12px,2vw,20px);background:linear-gradient(transparent,#000c);pointer-events:none}.video-carousel-controls button{pointer-events:auto;width:42px;height:42px;border:1px solid #ffffff80;border-radius:50%;background:#111b;color:#fff;font-size:19px;line-height:1;cursor:pointer;backdrop-filter:blur(8px);transition:.2s}.video-carousel-controls button:hover{border-color:var(--acid);background:var(--acid);color:#111}.video-carousel-counter{color:#fff;font:10px/1 "DM Mono",monospace;letter-spacing:.12em;text-shadow:0 1px 8px #000} /* Sortierung sitzt im selben Werkzeugblock wie Karten-/Listenansicht. */ .project-sort-control{position:relative;display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;margin-left:3px;border:1px solid currentColor;border-radius:50%;overflow:hidden;cursor:pointer;transition:background .2s,color .2s,transform .2s,border-color .2s}.project-sort-control.is-active{background:#111;color:#fff}.project-sort-control:hover:not(.is-active){border-color:var(--acid)}.project-sort-control:focus-within{outline:2px solid color-mix(in srgb,var(--acid) 70%,transparent);outline-offset:2px}.project-sort-control:active{transform:scale(.94)}.project-sort-control select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.project-sort-icon{display:grid;gap:2px;width:13px;pointer-events:none}.project-sort-icon i{display:block;height:1px;background:currentColor}.project-sort-icon i:nth-child(1){width:13px}.project-sort-icon i:nth-child(2){width:9px}.project-sort-icon i:nth-child(3){width:5px}.project-view-controls:has(.project-sort-control){gap:5px} /* Unabhängig einstellbare Ein- und Ausblenddauer des mitlaufenden Headers. */ .work-header-scroll-up .work-head.is-scroll-pinned{animation-duration:var(--work-header-enter-duration,.52s)}.work-header-scroll-up .work-head.is-scroll-pinned.is-scroll-leaving{animation-duration:var(--work-header-exit-duration,.44s)} @media(max-width:760px){.formats-note{margin-top:20px}.episode-navigation{padding:14px 14px 18px}.episode-list{grid-template-columns:1fr}.work-head:has(.project-sort-control){grid-template-columns:1fr}.work-head:has(.project-sort-control) h2{grid-column:1;grid-row:1}.work-head:has(.project-sort-control) .filters{grid-column:1;grid-row:2;width:100%;justify-self:stretch}.work-head:has(.project-sort-control) .project-view-controls{grid-column:1;grid-row:3;justify-self:end;border-left:0;margin-left:0;padding-left:0}.project-sort-control{width:32px;margin:0 0 0 2px}} /* V4.9: ruhige Ansichtssteuerung, kombinierte Detailmedien und Credits */ .project-view-controls button,.project-sort-control{transition:background-color .22s ease,color .22s ease,border-color .22s ease,transform .22s cubic-bezier(.2,.75,.3,1),box-shadow .22s ease;-webkit-tap-highlight-color:transparent} .project-view-controls button:hover,.project-sort-control:hover{transform:translateY(-2px);border-color:currentColor;box-shadow:0 5px 12px rgba(17,17,17,.1)} .project-view-controls button:active,.project-sort-control:active{transform:translateY(0) scale(.96)} .project-view-controls button:focus,.project-view-controls button:focus-visible,.project-sort-control:focus-within,.project-sort-control select:focus,.project-sort-control select:focus-visible{outline:0!important} .project-sort-control:hover:not(.is-active){border-color:currentColor} .dialog-credits{margin-top:20px;padding-top:15px;border-top:1px solid #444;line-height:1.55;white-space:pre-line;color:#ddd} #dialog-media:has(.dialog-media-switcher){aspect-ratio:auto;background:#090909} .dialog-media-switcher{background:#090909} .dialog-media-tabs{display:flex;gap:7px;padding:12px clamp(14px,2vw,22px);border-bottom:1px solid #ffffff24;background:#111} .dialog-media-tabs button{border:1px solid #ffffff55;border-radius:999px;padding:9px 14px;background:transparent;color:#eee;font:10px/1 "DM Mono",monospace;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:.22s ease} .dialog-media-tabs button:hover{border-color:var(--acid);transform:translateY(-1px)} .dialog-media-tabs button.active{border-color:var(--acid);background:var(--acid);color:#111} .dialog-media-tabs button:focus{outline:0} .dialog-media-panel{width:100%;background:#000} .dialog-media-panel>.dialog-gallery,.dialog-media-panel>video,.dialog-media-panel>iframe{display:block;width:100%;aspect-ratio:16/9;height:auto} .dialog-media-panel>.episode-browser,.dialog-media-panel>.video-carousel{width:100%} @media(max-width:760px){.dialog-media-tabs{padding:10px 12px}.dialog-media-tabs button{padding:8px 11px;font-size:9px}.dialog-credits{margin-top:17px;padding-top:13px}} /* V4.9.1: individueller Zoom des festen Kachelbildes */ .media>img{transform:translateY(var(--parallax,0)) scale(var(--card-image-zoom,1));transform-origin:center center} .media:hover>img{transform:translateY(var(--parallax,0)) scale(var(--card-image-zoom,1));filter:none} /* Verborgener Spieleinstieg im Footer. */ .legal.has-game-link{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.legal.has-game-link .footer-copyright{grid-column:1;grid-row:1;justify-self:start}.legal.has-game-link .footer-imprint-link{grid-column:3;grid-row:1;justify-self:end}.footer-game-link{grid-column:2;grid-row:1;justify-self:center;margin:0;color:#777;font-size:9px;white-space:nowrap;transition:color .2s,text-shadow .2s}.footer-game-link:before{content:"✦";display:inline-block;margin-right:7px;color:var(--acid);font-size:8px}.footer-game-link:hover,.footer-game-link:focus-visible{color:var(--acid);text-shadow:0 0 18px color-mix(in srgb,var(--acid) 55%,transparent)}@media(max-width:760px){.legal.has-game-link{grid-template-columns:1fr 1fr;row-gap:20px}.legal.has-game-link .footer-copyright{grid-column:1}.legal.has-game-link .footer-imprint-link{grid-column:2}.legal.has-game-link .footer-game-link{grid-column:1/-1;grid-row:2}}