:root{--type-mono:11px;--corner:4px;--paper:#ECE8E1;--ink:#1E1C19;--accent:#DE6536;--line:rgb(30 28 25 / 18%);--muted:rgb(30 28 25 / 58%);--photo-ink:#1E1C19;--photo-paper:#ECE8E1;--font:'Manrope','Inter',sans-serif;--mono:'JetBrains Mono',monospace;--edge:40px;--space:24px;--card-height:min(64svh,640px);--card-width:calc(var(--card-height)*.64);--radius:500px}
:root[data-theme=dark]{--paper:#191918;--ink:#ECE8E1;--muted:rgb(236 232 225 / 56%);--line:rgb(236 232 225 / 20%)}
*{box-sizing:border-box}html{background:var(--photo-ink)}body{margin:0;color:var(--ink);font:400 16px/1.5 var(--font);height:100svh;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}a{color:inherit;text-decoration:none}p,h1,h2,figure{margin:0}button:focus-visible,a:focus-visible,summary:focus-visible,.stage:focus-visible{outline:2px solid var(--accent);outline-offset:5px}[hidden]{display:none!important}.muted{color:var(--muted)}.mono{font:400 10px/1.7 var(--mono);letter-spacing:.055em;text-transform:uppercase}.rec{width:6px;height:6px;background:var(--accent);border-radius:50%;display:inline-block}.site-shell{position:relative;height:100svh;background:var(--paper);overflow:hidden;transform-origin:35% 50%;transition:transform .75s cubic-bezier(.2,.7,.1,1),background-color .35s,color .35s}.header{position:absolute;inset:0 0 auto;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:24px var(--edge)}.brand{font-size:46px;font-weight:600;letter-spacing:-.055em;line-height:1;display:flex;align-items:baseline}.brand sup{font-size:12px;align-self:start;letter-spacing:0;margin:5px 0 0 5px}.brand-n{display:inline-block;transform-origin:50% 75%;animation:letter-turn 9s cubic-bezier(.65,0,.35,1) infinite}.brand-n.second{animation-delay:.15s}.brand:hover .brand-n{animation:letter-hover .7s both}.brand:hover .second{animation-delay:.1s}@keyframes letter-turn{0%,82%,100%{transform:rotateX(0)}90%{transform:rotateX(180deg)}98%{transform:rotateX(360deg)}}@keyframes letter-hover{to{transform:rotateX(360deg)}}.menu-toggle{display:flex;align-items:center;gap:18px;min-height:44px}.menu-mark{font-size:24px}.menu-toggle:hover{color:var(--accent)}.chapter-label{position:absolute;top:36px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;white-space:nowrap}.view-switch{position:absolute;z-index:4;top:43%;left:var(--edge);display:grid;gap:7px}.view-switch button{text-align:left;font:inherit;display:flex;gap:14px;align-items:center;color:var(--muted);min-height:32px}.view-switch button[aria-pressed=true]{color:var(--ink)}.view-switch button[aria-pressed=true] span{color:var(--accent)}.stage{position:absolute;inset:88px 0 110px;perspective:1800px;overflow:hidden;touch-action:none;cursor:grab;outline-offset:-8px!important}.stage.dragging{cursor:grabbing}.ring{position:absolute;left:50%;top:49%;width:0;height:0;transform-style:preserve-3d;will-change:transform}.project{position:absolute;width:var(--card-width);height:var(--card-height);left:calc(var(--card-width)/-2);top:calc(var(--card-height)/-2);backface-visibility:hidden;transform-style:preserve-3d}.project-open{display:block;width:100%;height:100%;position:relative;overflow:hidden;border-radius:var(--corner);text-align:left;cursor:inherit;background:var(--photo-ink);color:var(--photo-paper)}.project img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}.card-top{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;gap:10px;font-size:var(--type-mono)}.card-top span,.card-title,.card-note{background:var(--photo-ink);padding:3px 6px}.card-title{position:absolute;left:12px;bottom:35px;font-size:clamp(26px,3.4vw,52px);font-weight:600;letter-spacing:-.045em;line-height:1.05;padding:4px 8px;max-width:calc(100% - 24px)}.card-note{position:absolute;left:20px;bottom:13px;font-size:var(--type-mono)}.right-rail{position:absolute;right:var(--edge);top:41%;z-index:4;text-align:right}.theme-switch{display:grid;justify-items:end;gap:2px}.theme-switch button{min-height:26px;color:var(--muted);font:inherit}.theme-switch button[aria-pressed=true]{color:var(--ink)}.theme-switch button[aria-pressed=true]:after{content:' •';color:var(--accent)}.browse{margin-top:26px}.arrows{display:flex;gap:10px;margin-top:8px}.arrows button{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;font-size:20px}.arrows button:hover{background:var(--ink);color:var(--paper)}.active-caption{position:absolute;bottom:98px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none}.active-caption .mono{font-size:var(--type-mono);color:var(--muted)}.active-caption>p:last-child{font-size:17px;letter-spacing:-.03em;margin-top:3px}.footer{position:absolute;z-index:4;bottom:22px;left:var(--edge);right:var(--edge);display:flex;align-items:end;justify-content:space-between;gap:20px;pointer-events:none}.identity{font-size:14px;letter-spacing:-.035em;line-height:1.3}.identity>span{display:block;font-size:var(--type-mono);margin-top:9px;letter-spacing:0}.instructions{text-align:center;font-size:var(--type-mono)}.instructions span{display:block;color:var(--muted)}.draft-note{text-align:right;font-size:var(--type-mono)}
/* Native Dialoge halten Fokus und Tastaturbedienung innerhalb des geöffneten Inhalts. */
dialog{border:0;background:var(--paper);color:var(--ink);padding:0}dialog::backdrop{background:rgb(30 28 25 / 45%)}.close{display:block;position:relative;margin-left:auto;min-height:44px;z-index:2}.close:hover{color:var(--accent)}#menu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;background:transparent;color:var(--photo-paper);padding:24px var(--edge);overflow:hidden}#menu::backdrop{background:transparent}.menu-open .site-shell{transform:translate(-31%,5%) rotate(-10deg) scale(.82);pointer-events:none}.menu-links{position:absolute;right:var(--edge);top:25%;display:grid;text-align:right;justify-items:end}.menu-links button{font-size:clamp(40px,6.8vw,110px);font-weight:600;letter-spacing:-.055em;line-height:1.1;display:flex;align-items:center;gap:25px}.menu-links button .mono{font-size:var(--type-mono);color:var(--accent);letter-spacing:0}.menu-links button:hover{color:var(--accent)}.menu-foot{position:absolute;right:var(--edge);bottom:35px;text-align:right}.menu-foot .muted{color:rgb(236 232 225 / 55%)}#menu[open] .menu-links{animation:menu-in .65s cubic-bezier(.2,.7,.1,1) both}@keyframes menu-in{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none}}
.page-panel{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:24px var(--edge) 0}.page-panel[open]{animation:panel-in .6s cubic-bezier(.2,.7,.1,1) both}@keyframes panel-in{from{clip-path:inset(22% 32% 22% 32% round 4px);transform:translateY(20px)}to{clip-path:inset(0);transform:none}}.page-content{max-width:1320px;margin:32px auto 0}.eyebrow{margin-bottom:28px;display:flex;gap:10px;align-items:center}h1{font-size:clamp(55px,8.5vw,140px);font-weight:600;letter-spacing:-.055em;line-height:.96;margin-bottom:64px}h2{font-size:clamp(32px,4.6vw,70px);font-weight:600;letter-spacing:-.045em;line-height:1.06}.about-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:8vw;align-items:center}.portrait img{width:100%;height:72svh;max-height:800px;object-fit:cover;border-radius:var(--corner)}.portrait figcaption{margin-top:12px;color:var(--muted);font-size:var(--type-mono)}.about-text>p{max-width:43ch;margin-bottom:24px}.about-text .statement{font-size:clamp(32px,4vw,60px);line-height:1.05;font-weight:600;letter-spacing:-.06em;margin-bottom:36px}.career{display:grid;grid-template-columns:1fr 2fr;gap:40px;margin:140px 0;border-top:1px solid var(--line);padding-top:35px}.career h2{margin-bottom:30px}dl{margin:32px 0 0}dt{font:400 10px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}dd{margin:10px 0 26px;border-bottom:1px solid var(--line);padding-bottom:22px}.practice>.mono{margin-bottom:25px}.practice h2{margin-bottom:55px}.services details{border-top:1px solid var(--line)}.services summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:26px 0;font-size:clamp(24px,3.5vw,48px);font-weight:600;letter-spacing:-.055em;gap:20px}.services summary::-webkit-details-marker{display:none}.services summary span{font-size:32px;font-weight:400;transition:transform .3s}.services details[open] summary span{transform:rotate(45deg);color:var(--accent)}.service-body{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;padding-bottom:40px;align-items:center}.service-body img{width:100%;height:310px;object-fit:cover;border-radius:var(--corner)}.service-body p{max-width:35ch}.page-footer{margin-top:140px}.footer-wordmark{font-size:clamp(100px,25vw,360px);font-weight:600;letter-spacing:-.065em;line-height:1.05;white-space:nowrap}.footer-wordmark sup{font-size:.15em;vertical-align:top;position:relative;top:.6em;margin-left:.2em}.footer-columns{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;border-top:1px solid var(--line);padding:35px 0 50px;font-size:13px}.footer-columns nav,.social-placeholders{display:grid;gap:10px;align-content:start}.footer-columns button{text-align:left}.footer-columns button:hover,.text-link:hover{color:var(--accent)}.social-placeholders{color:var(--muted)}.page-footer>.mono{padding-bottom:30px}.contact-content{max-width:1000px;padding-bottom:60px}.contact-content>p:not(.mono){margin-bottom:40px}.contact-links{max-width:750px;margin-bottom:50px}.contact-links p{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;border-top:1px solid var(--line);font-size:clamp(24px,3vw,40px);letter-spacing:-.05em}.text-link{padding:14px 0;border-bottom:1px solid var(--ink);font-size:16px}.viewer-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:6vw;align-items:center}.viewer-media{height:65svh;max-height:700px;background:var(--photo-ink);position:relative;border-radius:var(--corner);overflow:hidden}.viewer-media img,.viewer-media video{width:100%;height:100%;object-fit:contain}.video-placeholder{position:absolute;bottom:15px;left:15px;right:15px;width:fit-content;padding:5px 8px;background:var(--photo-ink);color:var(--photo-paper);font-size:var(--type-mono)}.viewer-copy>p{max-width:43ch}.viewer-copy dd{font-size:14px}.stills-header{display:flex;justify-content:space-between;gap:20px;align-items:end;margin:75px 0 25px}.stills-header h2{font-size:36px}.project-stills{display:grid;grid-template-columns:1fr 1fr;gap:24px}.project-stills img{width:100%;height:40svh;object-fit:cover;border-radius:var(--corner)}.next-project{display:block;margin:40px 0 60px auto}
@media(min-width:1700px){:root{--card-height:min(70svh,800px)}}
@media(max-width:900px){:root{--edge:24px;--card-height:min(58svh,570px)}.chapter-label{top:90px}.stage{inset:110px 0 155px}.view-switch{top:auto;bottom:135px;display:flex;gap:20px}.right-rail{top:auto;bottom:126px;display:flex;gap:24px;align-items:center}.theme-switch{display:flex;gap:13px}.browse{margin:0}.counter{display:none}.arrows{margin:0}.active-caption{bottom:92px}.instructions{display:none}.about-intro{gap:35px}.portrait img{height:60svh}.service-body{gap:25px}.menu-links button{font-size:9vw}.menu-open .site-shell{transform:translate(-39%,4%) rotate(-10deg) scale(.8)}}
@media(max-width:540px){:root{--edge:20px;--card-height:min(51svh,460px)}.brand{font-size:39px}.header{padding-block:20px}.chapter-label{top:86px;font-size:var(--type-mono)}.stage{inset:112px 0 160px;perspective:1200px}.card-title{font-size:30px;left:8px;bottom:29px;max-width:calc(100% - 16px);padding:3px 5px}.card-top{font-size:var(--type-mono);left:8px;right:8px;top:10px;gap:3px}.card-top span{padding:2px 3px}.card-note{left:13px;bottom:10px;font-size:var(--type-mono)}.view-switch{bottom:133px;gap:14px;font-size:var(--type-mono)}.right-rail{bottom:120px;gap:12px}.theme-switch{gap:6px;display:grid}.theme-switch button{min-height:20px;font-size:var(--type-mono)}.arrows{gap:6px}.arrows button{width:30px;height:36px;border-radius:var(--corner)}.active-caption{bottom:83px}.active-caption>p:last-child{font-size:14px}.active-caption .mono{font-size:var(--type-mono)}.footer{bottom:18px;gap:12px}.identity{font-size:12px}.identity>span{font-size:var(--type-mono);margin-top:6px}.draft-note{font-size:var(--type-mono);max-width:110px}.menu-links{top:32%}.menu-links button{font-size:14vw;gap:14px}.menu-foot{font-size:var(--type-mono);max-width:230px}.menu-open .site-shell{transform:translate(-64%,4%) rotate(-10deg) scale(.8)}.page-content{margin-top:28px}h1{font-size:15vw;margin-bottom:36px}.about-intro,.career,.service-body,.viewer-layout{grid-template-columns:1fr}.portrait img{height:55svh}.about-text .statement{font-size:40px}.career{margin:75px 0;gap:25px}.service-body{gap:20px}.service-body img{height:220px}.services summary{font-size:26px}.page-footer{margin-top:80px}.footer-columns{grid-template-columns:1fr 1fr;font-size:12px}.footer-columns>p{grid-column:1/-1}.contact-links p{font-size:24px}.contact-links .mono{font-size:var(--type-mono)}.viewer-media{height:52svh}.viewer-layout{gap:28px}.project-stills{gap:12px}.project-stills img{height:28svh}.stills-header{align-items:start;flex-direction:column;gap:8px;margin-top:50px}.eyebrow{font-size:var(--type-mono)}.close{font-size:var(--type-mono)}.page-panel{padding-top:16px}}
@media(max-height:600px) and (min-width:541px){:root{--card-height:55svh}.stage{inset:75px 0 100px}.chapter-label{top:30px}.header{padding-block:18px}.active-caption{bottom:70px}.footer{bottom:10px}.view-switch{top:40%;bottom:auto;display:grid}.right-rail{top:35%;bottom:auto;display:block}.theme-switch{display:grid}.browse{margin-top:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.ring{will-change:auto}}

/* Persönlicher Einstieg: nur der bewusste Klick auf die Wortmarke führt zurück. */
.header{z-index:12}.brand{font-family:'Inter',sans-serif;font-weight:700}.intro{position:absolute;inset:0;z-index:6;background:var(--paper);overflow:hidden;touch-action:none}.intro-kicker{position:absolute;top:125px;left:var(--edge);max-width:20ch}.intro-portrait{position:absolute;width:min(37vw,520px);height:68svh;top:14svh;left:50%;transform:translateX(-50%)}.intro-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;border-radius:var(--corner)}.intro-portrait figcaption{position:absolute;bottom:12px;left:12px;background:var(--photo-paper);color:var(--photo-ink);padding:4px 8px;font-size:var(--type-mono)}.intro h1{position:absolute;z-index:1;left:8vw;top:35svh;font-size:clamp(40px,6vw,100px);font-weight:500;line-height:1.05;letter-spacing:-.06em;margin:0}.intro h1>span{font-size:clamp(100px,15vw,240px);letter-spacing:-.075em;display:block;line-height:1.1;margin-left:-.03em}.intro-aside{position:absolute;right:var(--edge);top:52%;font-size:14px;width:21ch;line-height:1.65}.intro-aside .mono{display:block;margin-top:22px;color:var(--muted);font-size:var(--type-mono)}.enter-work{position:absolute;left:50%;bottom:6svh;transform:translateX(-50%);display:flex;align-items:center;gap:35px;white-space:nowrap;min-height:44px}.enter-work span{font-size:24px;color:var(--accent)}.intro-active .stage,.intro-active .view-switch,.intro-active .right-rail,.intro-active .active-caption,.intro-active .chapter-label,.intro-active .footer{opacity:0;pointer-events:none}.intro-active .stage{visibility:hidden}.intro .intro-portrait,.intro h1{will-change:transform}.intro-active .brand{cursor:default}.card-title{font-size:clamp(26px,3vw,46px);font-weight:500;letter-spacing:-.045em}.menu-links button{font-weight:500}.page-content h1{font-weight:500;letter-spacing:-.06em}.footer-wordmark{font-weight:600}.editorial-about{max-width:1480px}.editorial-about>h1{font-size:clamp(48px,7vw,108px);margin:65px 0 100px 17%}.reading-text{font-size:clamp(30px,3.8vw,62px);font-weight:500;line-height:1.22;letter-spacing:-.04em;text-indent:17%;max-width:none}.reveal-words .word{opacity:.22;transition:opacity .15s linear}.editorial-intro{display:grid;grid-template-columns:1fr 1.8fr 2.2fr;gap:45px;margin:75px 0 100px;align-items:start}.editorial-copy{max-width:40ch;font-size:15px;line-height:1.75}.editorial-copy p+p{margin-top:24px}.small-portrait{width:70%;justify-self:end;margin-top:70px}.small-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--corner)}.small-portrait figcaption{font-size:var(--type-mono);color:var(--muted);margin-top:12px;line-height:1.8}.reel-story{position:relative;height:110svh;min-height:600px;display:grid;align-items:center;overflow:hidden;margin:50px calc(var(--edge)*-1) 80px}.reel-track{position:absolute;top:38%;white-space:nowrap;font-size:clamp(70px,13vw,210px);letter-spacing:-.065em;font-weight:500;line-height:1.1;will-change:transform}.reel-frame{position:relative;width:68%;height:65svh;max-height:700px;justify-self:center;z-index:1;transform-origin:center;will-change:transform}.reel-frame img{width:100%;height:100%;object-fit:cover;border-radius:var(--corner)}.reel-frame figcaption{position:absolute;left:20px;bottom:20px;display:flex;align-items:center;gap:10px;background:var(--paper);padding:8px 12px;color:var(--ink);font-size:var(--type-mono)}.editorial-section{display:grid;grid-template-columns:1fr 2fr;gap:8vw;margin:120px 0}.editorial-section h2{font-weight:500;letter-spacing:-.05em;font-size:clamp(30px,3.6vw,56px)}.career dd{font-size:22px;line-height:1.5;max-width:40ch;padding-bottom:32px;margin-bottom:35px}.career dd>.mono{display:block;font-size:var(--type-mono);margin-top:12px}.section-sidebar{align-self:start;position:sticky;top:65px}.section-sidebar h2{font-size:24px;margin-top:22px}.service-stories article{margin-bottom:95px}.service-stories article>p{font-size:clamp(26px,3vw,48px);line-height:1.24;letter-spacing:-.045em;margin:22px 0 28px;font-weight:500}.tags{display:flex;flex-wrap:wrap;gap:8px}.tags span{font-size:var(--type-mono);letter-spacing:0;border:1px solid var(--line);border-radius:var(--corner);padding:6px 12px}.collaborations{border-top:1px solid var(--line);padding-top:35px}.collaborations>div{display:flex;flex-wrap:wrap;gap:25px 60px;align-items:center}.collaborations>div p{font-size:clamp(24px,3vw,44px);font-weight:500;letter-spacing:-.045em}
@media(min-width:1700px){.intro h1{left:14vw}.intro-aside{right:8vw}.intro-portrait{width:32vw;max-width:700px}}
@media(max-width:900px){.intro-portrait{width:48vw;height:60svh;top:18svh}.intro-kicker{top:110px;font-size:var(--type-mono)}.intro h1{left:5vw;top:39svh;font-size:5vw}.intro h1>span{font-size:18vw}.intro-aside{top:22%;width:15ch;font-size:11px}.editorial-intro{grid-template-columns:1fr 1.6fr;gap:30px}.editorial-intro>.side-label{grid-column:1/-1}.small-portrait{width:90%;margin-top:0}.editorial-about>h1{margin-left:0}.editorial-section{gap:40px}.reel-frame{width:80%}}
@media(max-width:540px){.intro-kicker{top:95px;left:20px;max-width:none;font-size:var(--type-mono)}.intro-portrait{top:19svh;width:70vw;height:51svh;left:58%}.intro h1{left:20px;top:49svh;font-size:25px;color:var(--photo-paper)}.intro h1>span{font-size:25vw;line-height:1.12}.intro-portrait figcaption{bottom:auto;top:8px;left:8px;font-size:var(--type-mono)}.intro-aside{top:73svh;left:20px;right:auto;font-size:12px;width:auto;line-height:1.4}.intro-aside .mono{display:none}.enter-work{bottom:2svh;left:auto;right:20px;transform:none;font-size:var(--type-mono);gap:15px}.editorial-about>h1{font-size:13vw;margin:35px 0 60px}.reading-text{font-size:29px;text-indent:15%;line-height:1.3}.editorial-intro{grid-template-columns:1fr;margin-top:40px;gap:30px}.editorial-copy{font-size:14px}.small-portrait{width:65%;margin-top:15px}.reel-story{height:75svh;min-height:480px;margin-bottom:40px}.reel-frame{width:90%;height:48svh}.reel-frame figcaption{left:10px;bottom:10px;font-size:var(--type-mono);gap:6px;padding:6px 8px}.reel-track{top:33%;font-size:90px}.editorial-section{grid-template-columns:1fr;gap:30px;margin:70px 0}.career dd{font-size:19px}.section-sidebar{position:static}.section-sidebar h2{font-size:30px}.service-stories article{margin-bottom:65px}.service-stories article>p{font-size:28px}.collaborations>div{display:grid;gap:18px}.collaborations>div p{font-size:32px}.card-title{font-size:29px}}
@media(max-height:600px) and (min-width:541px){.intro-kicker{top:90px}.intro h1{top:30svh;font-size:35px}.intro h1>span{font-size:13vw}.intro-portrait{height:65svh;top:16svh;width:30vw}.intro-aside{font-size:11px;top:40%}.enter-work{bottom:1svh}.intro-portrait figcaption{font-size:var(--type-mono)}}
@media(prefers-reduced-motion:reduce){.reveal-words .word{opacity:1!important}.intro .intro-portrait,.intro h1,.reel-track,.reel-frame{will-change:auto}}

@media(max-width:540px){.intro h1{top:16svh;color:var(--ink);font-size:22px}.intro h1>span{font-size:22vw}.intro-portrait{top:27svh;height:46svh}.intro-aside{top:77svh}.intro-portrait figcaption{top:auto;bottom:8px}}

/* Vollflächiger Portrait-Prolog mit getrennten Ebenen für Raum und Licht. */
.intro{background:#171918;color:#ECE8E1;perspective:1200px;isolation:isolate;transform-style:preserve-3d}.intro-grid{position:absolute;inset:0;z-index:3;pointer-events:none;background-image:linear-gradient(to right,transparent calc(100% - 1px),rgb(236 232 225 / 10%) 1px);background-size:25% 100%;border:1px solid rgb(236 232 225 / 10%)}.intro-portrait{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;transform:none;transform-origin:50% 70%;z-index:0}.intro-portrait img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 50%;filter:grayscale(1) brightness(.58) contrast(1.2);border-radius:0;mask-image:linear-gradient(to right,transparent 5%,#000 32%,#000 68%,transparent 95%)}.intro-portrait figcaption{left:var(--edge);top:auto;bottom:115px;z-index:4;color:rgb(236 232 225 / 65%);background:none;padding:0;font-size:var(--type-mono)}.intro-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgb(23 25 24 / 60%),transparent 40%,rgb(23 25 24 / 65%));z-index:1;pointer-events:none}.intro-light{position:absolute;inset:-20% -10%;background:radial-gradient(ellipse at 50% 85%,rgb(236 232 225 / 70%),rgb(236 232 225 / 12%) 35%,transparent 63%);mix-blend-mode:screen;transform:translateY(30%);opacity:.35;z-index:2;pointer-events:none}.intro-kicker{top:110px;left:var(--edge);z-index:4;max-width:none;font-size:11px;line-height:1.9}.intro-aside{top:110px;right:var(--edge);left:auto;width:auto;z-index:4;font-size:var(--type-mono);line-height:1.9}.intro-aside>span{display:block;margin-top:15px}.enter-work{bottom:45px;left:var(--edge);right:auto;transform:none;z-index:4;font-size:11px}.intro-rec{position:absolute;bottom:56px;right:var(--edge);z-index:4;display:flex;align-items:center;gap:10px}.travelling-brand{position:absolute;z-index:13;top:0;left:0;margin:0;width:max-content;font-family:'Inter',sans-serif;font-size:clamp(100px,16vw,320px);font-weight:700;line-height:1;letter-spacing:-.075em;transform-origin:0 0;pointer-events:none;white-space:nowrap;color:#ECE8E1;will-change:transform}.travelling-brand sup{font-size:.2em;vertical-align:top;display:inline-block;margin:.15em 0 0 .12em;letter-spacing:0}.intro-active .header{color:#ECE8E1}.intro-active .header .brand{opacity:0;pointer-events:none}.intro-active .header .brand:focus-visible{opacity:1}.menu-open .travelling-brand{visibility:hidden}
/* Auf grossen Screens über die volle Breite statt einer schmalen Textinsel. */
#about .page-content{max-width:none;width:100%;margin-top:55px}.page-panel{padding-inline:clamp(24px,4vw,100px)}#about .editorial-about>h1{font-size:clamp(54px,7.5vw,180px);margin:5vw 0 7vw 8%;max-width:none}#about .reading-text{font-size:clamp(32px,3.8vw,94px);line-height:1.28;text-indent:18%;letter-spacing:-.04em;max-width:none}#about .editorial-intro{grid-template-columns:1fr 3fr 2.2fr;gap:6vw;margin:7vw 0 10vw}#about .editorial-copy{max-width:58ch;font-size:clamp(18px,1.15vw,28px);line-height:1.7}#about .editorial-copy p+p{margin-top:32px}#about .small-portrait{width:100%;max-width:650px;margin-top:10vw}#about .mono{font-size:clamp(11px,.6vw,15px)}#about .reel-story{margin:0 calc(clamp(24px,4vw,100px)*-1) 10vw;height:125svh;min-height:650px}#about .reel-frame{width:78%;height:78svh;max-height:none}#about .reel-track{font-size:clamp(70px,11vw,280px);top:8%;z-index:2;line-height:1.15;pointer-events:none}#about .reel-frame figcaption{font-size:clamp(11px,.65vw,16px)}#about .editorial-section{margin:10vw 0;gap:8vw;grid-template-columns:1fr 2fr}#about .career h2{font-size:clamp(36px,4vw,90px)}#about .career dd{font-size:clamp(21px,1.65vw,38px);max-width:48ch;padding-bottom:45px;margin-bottom:45px}#about .service-stories article{margin-bottom:10vw}#about .service-stories article>p{font-size:clamp(28px,3vw,72px);line-height:1.3}#about .service-stories article:nth-child(even){margin-left:-24%;margin-right:16%}#about .tags span{font-size:clamp(12px,.8vw,18px);padding:8px 15px}#about .section-sidebar h2{font-size:clamp(28px,2vw,46px)}#about .reveal-words .word{opacity:.58}.collaborations.editorial-section{padding-top:5vw}#about .collaborations{display:block;margin-top:7vw;margin-bottom:0}.logo-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:5vw!important;margin-top:5vw}.logo-row figure{margin:0}.logo-mat{height:clamp(150px,15vw,290px);background:#ECE8E1;display:flex;align-items:center;justify-content:center;padding:35px}.logo-mat img{max-width:85%;width:300px;height:110px;object-fit:contain}.logo-row figcaption{margin-top:18px;color:var(--muted)}#about .page-footer{margin-top:clamp(150px,16vw,380px);padding-top:55px;border-top:1px solid var(--line)}#about .footer-wordmark{font-size:clamp(100px,28vw,700px);line-height:1.15;padding-bottom:70px}#about .footer-columns{padding:60px 0 80px;font-size:clamp(15px,1vw,24px)}
@media(max-width:900px){.intro-aside{top:110px;font-size:var(--type-mono)}.intro-kicker{font-size:var(--type-mono)}.intro-portrait img{object-fit:cover;mask-image:none}.intro-portrait figcaption{bottom:100px}.travelling-brand{font-size:25vw}#about .editorial-intro{grid-template-columns:1.4fr 1fr;gap:35px}#about .editorial-intro>.side-label{grid-column:1/-1}#about .small-portrait{margin-top:50px}#about .editorial-section{gap:45px}#about .service-stories article:nth-child(even){margin-inline:0}#about .reel-story{height:100svh;min-height:550px}#about .reel-frame{height:62svh;width:86%}.logo-row{gap:20px!important}.logo-mat{padding:18px}.logo-mat img{max-width:100%}}
@media(max-width:540px){.intro-kicker{top:100px;left:20px;font-size:var(--type-mono)}.intro-aside{top:auto;bottom:142px;left:20px;right:auto;font-size:var(--type-mono)}.intro-aside>span{margin-top:8px}.intro-portrait{inset:0;width:100%;height:100%}.intro-portrait img{object-position:52% 50%;filter:grayscale(1) brightness(.48) contrast(1.15)}.intro-portrait figcaption{left:20px;bottom:110px;font-size:var(--type-mono)}.enter-work{left:20px;bottom:35px;font-size:var(--type-mono)}.intro-rec{bottom:91px;right:20px;font-size:var(--type-mono)}.travelling-brand{font-size:29vw}.page-panel{padding-inline:20px}#about .page-content{margin-top:35px}#about .editorial-about>h1{margin:40px 0 60px;font-size:13vw}#about .reading-text{font-size:29px;text-indent:12%}#about .editorial-intro{grid-template-columns:1fr;margin:50px 0 85px;gap:28px}#about .editorial-copy{font-size:17px}#about .small-portrait{width:78%;margin-top:20px}#about .mono{font-size:var(--type-mono)}#about .editorial-section{grid-template-columns:1fr;gap:30px;margin:80px 0}#about .career dd{font-size:20px}#about .service-stories article{margin-bottom:80px}#about .service-stories article>p{font-size:28px}#about .reel-story{margin-inline:-20px;height:90svh;min-height:600px}#about .reel-track{top:6%;font-size:60px}#about .reel-frame{width:92%;height:52svh}#about .reel-frame figcaption{font-size:var(--type-mono)}.logo-row{grid-template-columns:1fr;margin-top:30px}.logo-mat{height:150px;padding:25px}.logo-row figcaption{margin-top:12px}#about .page-footer{margin-top:120px;padding-top:35px}#about .footer-wordmark{padding-bottom:35px;font-size:27vw}#about .footer-columns{font-size:15px;padding:35px 0 50px}}
@media(prefers-reduced-motion:reduce){.travelling-brand{will-change:auto}}

/* Die weichen Bildränder folgen dem Foto, auch auf breiten Bildschirmen. */
.intro-portrait img{width:min(100%,100svh);margin-inline:auto;object-fit:cover;mask-image:linear-gradient(to right,transparent,#000 20%,#000 80%,transparent)}
.travelling-brand{transition:color .25s ease}
@media(max-width:900px){.intro-portrait img{width:100%;mask-image:none}}

/* Gewählte Wortmarke: sechsstrahliger orangefarbener Stern, eng am i. */
.brand-star{display:inline-block;width:.19em;height:.21em;margin-left:.06em;vertical-align:top;position:relative;top:.09em;overflow:visible;fill:none;stroke:var(--accent);stroke-width:4.5;stroke-linecap:butt;flex-shrink:0;letter-spacing:0}
.brand>.brand-star{align-self:flex-start}

/* Feedback 19.09: einheitliche Wortmarke, Navigation und Aufnahmezeit. */
:root{--record-red:#d84332}
.brand-star{stroke-width:6;top:.06em;margin-left:.045em}
.brand-n{animation:none}
.brand:hover .brand-n,.brand:hover .second{animation:none;transform:none}
.footer-wordmark{font-family:'Inter',sans-serif!important;font-weight:700!important;letter-spacing:-.075em!important}
.rec{animation:record-pulse 2.8s ease-in-out infinite}
@keyframes record-pulse{0%,100%{background:var(--accent);opacity:1}50%{background:var(--record-red);opacity:.6}}
.session-rec{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:var(--type-mono)}
.site-shell>.session-rec{position:absolute;right:var(--edge);bottom:24px;z-index:14}
.intro-active .site-shell>.session-rec{color:#ECE8E1}
.footer .draft-note{visibility:hidden}
#menu>.session-rec{position:absolute;bottom:28px;left:var(--edge)}
.panel-header{position:sticky;top:-35px;z-index:20;background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.panel-header .close{margin:0;position:static;font-size:11px}
.panel-header .brand{font-size:40px;opacity:1;pointer-events:auto;cursor:pointer}
.panel-header .session-rec{margin-left:auto;margin-right:40px}
.logo-mat{background:transparent}
.logo-mat img{mix-blend-mode:multiply}
:root[data-theme=dark] .logo-mat img{filter:grayscale(1) invert(1);mix-blend-mode:screen}
#about .reel-story{height:115svh;min-height:700px;perspective:1200px;overflow:visible;isolation:isolate}
#about .reel-track,#about .reel-front{position:absolute;left:0;right:0;text-align:center;white-space:normal;font-size:clamp(48px,8vw,180px);letter-spacing:-.065em;line-height:1.12;font-weight:500;margin:0;pointer-events:none}
#about .reel-track{top:2%;z-index:0}
#about .reel-front{bottom:5%;z-index:2}
#about .reel-frame{height:66svh;width:78%;align-self:center}
#contact .page-content{width:100%;max-width:none;margin-top:55px}
#contact h1{font-size:clamp(54px,7.5vw,180px);line-height:1.15;margin:5vw 0 7vw 8%;font-weight:500}
#contact .contact-content>p:not(.mono){font-size:clamp(18px,1.15vw,28px);margin:0 0 5vw 8%}
#contact .contact-links{max-width:none;margin-left:8%;margin-bottom:8vw}
#contact .contact-links p{font-size:clamp(28px,3.8vw,94px);padding:30px 0}
#contact .contact-links .mono{font-size:clamp(11px,.7vw,16px);letter-spacing:.05em}
#contact .page-footer{margin-top:clamp(100px,12vw,300px);padding-top:55px;border-top:1px solid var(--line)}
#contact .footer-wordmark{font-size:clamp(100px,28vw,700px);line-height:1.15;padding-bottom:70px}
#contact .footer-columns{padding:60px 0 80px;font-size:clamp(15px,1vw,24px)}
@media(max-width:600px){
.panel-header{top:-35px;flex-wrap:wrap;gap:10px;padding:15px 0}.panel-header .brand{font-size:30px}.panel-header .close{font-size:var(--type-mono)}.panel-header .session-rec{order:3;width:100%;margin:0;font-size:var(--type-mono)}
#about .reel-story{height:85svh;min-height:580px}#about .reel-track,#about .reel-front{font-size:10vw;padding-inline:15px}#about .reel-track{top:7%}#about .reel-front{bottom:7%}#about .reel-frame{height:46svh;width:90%}
#contact h1{font-size:13vw;margin:40px 0 60px}#contact .contact-content>p:not(.mono),#contact .contact-links{margin-left:0}#contact .contact-links p{font-size:29px;gap:12px}#contact .contact-links .mono{font-size:var(--type-mono)}#contact .footer-wordmark{font-size:27vw;padding-bottom:35px}#contact .footer-columns{font-size:15px;padding:35px 0 50px}
.site-shell>.session-rec{font-size:var(--type-mono);bottom:16px}
}
@media(prefers-reduced-motion:reduce){.rec{animation:none}.reel-track,.reel-front{transform:none!important}}

.panel-header{top:0}
.brand-n{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.brand:hover .brand-n{transform:translateY(-.035em)}
.brand:hover .brand-n.second{transform:translateY(.025em)}
@media(prefers-reduced-motion:reduce){.brand-n{transition:none}.brand:hover .brand-n,.brand:hover .brand-n.second{transform:none}}

/* Alle Wortmarken verwenden dieselbe Schrift, Stärke und Laufweite. */
:root{--brand-font:'Inter',sans-serif;--brand-weight:700;--brand-tracking:-.075em}
.brand,.travelling-brand,.footer-wordmark{font-family:var(--brand-font)!important;font-weight:var(--brand-weight)!important;letter-spacing:var(--brand-tracking)!important}
#about .footer-wordmark,#contact .footer-wordmark{font-size:clamp(100px,24vw,560px)}
@media(max-width:540px){#about .footer-wordmark,#contact .footer-wordmark{font-size:27vw}}

/* Feedback 01:23: bündige Navigation und horizontale Tiefenstaffelung. */
.page-panel{padding-top:0}
.panel-header{top:0;margin-inline:calc(clamp(24px,4vw,100px)*-1);padding:22px clamp(24px,4vw,100px);border-bottom:1px solid var(--line)}
.panel-header .close{display:flex;align-items:center;gap:14px;min-height:44px;font-size:var(--type-mono)}
.page-panel>.session-rec,#menu>.session-rec{position:fixed;z-index:30;left:auto;right:var(--edge);bottom:24px;width:auto;margin:0;padding:5px 8px;background:var(--paper);color:var(--ink)}
#menu>.session-rec{background:var(--photo-ink);color:var(--photo-paper)}
#menu .menu-foot{bottom:65px}
.menu-open .site-shell>.session-rec{visibility:hidden}
#about .reel-story{height:130svh;min-height:730px;overflow:hidden}
#about .reel-track{top:18%;z-index:0;font-size:clamp(48px,7vw,156px);white-space:nowrap}
#about .reel-front{bottom:19%;z-index:2;font-size:clamp(42px,6.5vw,140px);white-space:nowrap}
#about .reel-frame{width:66%;height:58svh;z-index:1}
#about .reel-frame figcaption{bottom:14px;left:14px}
#about .footer-wordmark,#contact .footer-wordmark{font-size:clamp(90px,16vw,380px);padding-bottom:45px}
#about .page-footer,#contact .page-footer{margin-top:clamp(90px,9vw,180px);padding-top:45px}
#about .footer-columns,#contact .footer-columns{padding:40px 0 75px}
#contact h1{font-size:clamp(48px,5.5vw,112px);line-height:1.08;margin:4vw 0 4vw 8%}
#contact .contact-links p{font-size:clamp(26px,2.8vw,58px);padding:24px 0}
@media(max-width:600px){
.panel-header{margin-inline:-20px;padding:14px 20px;flex-wrap:nowrap;gap:16px}.panel-header .close{font-size:var(--type-mono)}
.page-panel>.session-rec,#menu>.session-rec{right:14px;bottom:12px;font-size:var(--type-mono)}
#about .reel-story{height:95svh;min-height:630px}#about .reel-track{top:18%;font-size:10vw;padding:0}#about .reel-front{bottom:22%;font-size:7.5vw;padding:0}#about .reel-frame{width:82%;height:44svh}
#about .footer-wordmark,#contact .footer-wordmark{font-size:22vw;padding-bottom:30px}
#contact h1{font-size:12vw;margin:35px 0 45px}#contact .contact-links p{font-size:26px}
}
@media(prefers-reduced-motion:reduce){#about .reel-track{top:5%}#about .reel-front{bottom:5%}}

.page-panel[open]{animation-fill-mode:backwards}

#about .reel-track{top:23%}
#about .reel-front{bottom:23%;color:#ECE8E1;mix-blend-mode:difference}
@media(max-width:600px){#about .reel-front{bottom:27%}}
@media(prefers-reduced-motion:reduce){#about .reel-track{top:5%}#about .reel-front{bottom:5%;color:var(--ink);mix-blend-mode:normal}}

#about .reel-story{background:var(--paper)}

/* Darstellungsprüfung: einheitliche Navigation und getrennte mobile Bedienbereiche. */
.header{padding:22px clamp(24px,4vw,100px)}
.header .brand,.panel-header .brand{font-size:40px}
.section-sidebar{top:110px}
@media(max-width:540px){
.header{padding:14px 20px}.header .brand,.panel-header .brand{font-size:30px}
:root{--card-height:min(48svh,calc(100svh - 342px))}
.stage{inset:112px 0 216px}
.view-switch{bottom:158px;gap:18px}
.view-switch button{min-height:44px}
.right-rail{left:20px;right:20px;bottom:112px;height:90px;display:block}
.theme-switch{position:absolute;right:0;bottom:0;display:flex;gap:14px}
.theme-switch button{min-height:36px;font-size:var(--type-mono)}
.browse{position:absolute;right:0;top:0}
.arrows button{width:40px;height:40px}
.active-caption{bottom:77px}
.footer{bottom:33px}.identity{font-size:11px;max-width:64%}
.site-shell>.session-rec{bottom:12px;font-size:var(--type-mono)}
#about .editorial-about>h1{font-size:12vw;line-height:1.06}
}
@media(max-height:600px) and (min-width:541px){
.travelling-brand{font-size:clamp(76px,22svh,125px)}
.stage{inset:86px 0 106px}
:root{--card-height:min(49svh,calc(100svh - 198px))}
.active-caption .mono{display:none}
.header{padding-block:14px}
}
@media(max-width:350px){.theme-switch{gap:10px}.view-switch{gap:10px}.view-switch button{gap:8px}}
@media(max-width:540px){.right-rail{pointer-events:none}.right-rail button{pointer-events:auto}}
@media(max-height:600px) and (min-width:541px){.card-title{font-size:clamp(14px,2vw,20px);overflow-wrap:anywhere;left:6px;max-width:calc(100% - 12px);padding:3px 4px}.card-top{font-size:var(--type-mono);left:6px;right:6px;top:8px}.card-top span{padding:2px}.card-note{font-size:var(--type-mono);left:10px}}
/* Die Bildbeschriftung bleibt ausserhalb der bewegten Vordergrundzeile. */
#about .reel-frame figcaption{top:16px;bottom:auto;left:16px}
@media(max-width:540px){#about .reel-frame figcaption{top:12px;left:12px;font-size:var(--type-mono);max-width:calc(100% - 24px)}}

/* Feedback 01:42: offener Bildraum und ein gemeinsamer Wortmarken-Massstab. */
.header{padding-inline:var(--edge)}
.page-panel{padding-inline:var(--edge)}
.panel-header{margin-inline:calc(-1 * var(--edge));padding-inline:var(--edge)}
.stage{overflow:visible}
/* Die Bühne schneidet die Spirale erst am tatsächlichen Fensterrand ab. */
.header{pointer-events:none}.header>a,.header>button{pointer-events:auto}
.brand,.travelling-brand,.footer-wordmark{display:inline-flex;align-items:flex-start;line-height:1!important;white-space:nowrap}
.brand-star{align-self:flex-start;vertical-align:initial;top:.06em;margin-left:.045em}
#about .panel-header .close,#contact .panel-header .close,#viewer .panel-header .close,.menu-toggle{font-size:var(--type-mono);gap:18px;line-height:1.7;letter-spacing:.055em}
#about .panel-header .menu-mark,.panel-header .menu-mark{font-size:24px}
.footer-wordmark{text-align:left}
/* Zwei lesbare Zeilen rahmen das Bild. Die Bewegung bleibt subtil gegenläufig. */
#about .reel-story{height:100svh;min-height:650px;margin-inline:calc(-1 * var(--edge));overflow:hidden}
#about .reel-track{top:12%;font-size:clamp(42px,6vw,112px);z-index:0}
#about .reel-front{bottom:8%;font-size:clamp(32px,5.6vw,112px);color:var(--ink);mix-blend-mode:normal}
#about .reel-frame{width:72%;height:48svh;max-height:560px}
#about .reel-frame figcaption{font-size:var(--type-mono)}
@media(max-width:600px){
 #about .panel-header .close,#contact .panel-header .close,#viewer .panel-header .close,.menu-toggle{font-size:var(--type-mono);gap:14px}
 #about .reel-story{height:90svh;min-height:550px}
 #about .reel-track{font-size:10vw;top:11%}
 #about .reel-front{font-size:7.2vw;bottom:11%}
 #about .reel-frame{width:86%;height:44svh;max-height:420px}
 #about .reel-frame figcaption{font-size:var(--type-mono)}
}

/* Kleine Leseflächen erhalten den Kontrast, ohne den Bildraum abzuschneiden. */
.header .brand{position:relative;isolation:isolate}
.header .brand::before{content:'';position:absolute;inset:-3px -5px;background:var(--paper);border-radius:var(--corner);z-index:-1}
.active-caption{z-index:4;background:var(--paper);padding:3px 8px;border-radius:var(--corner)}
.chapter-label{z-index:4;background:var(--paper);padding:3px 6px;border-radius:var(--corner);pointer-events:none}

/* Feedback 01:53: ruhigere Textränder, transparente REC-Anzeige, Kapitel im Header. */
:root{--copy-inset:clamp(16px,3vw,80px)}
#about .page-content,#contact .page-content{padding-inline:var(--copy-inset)}
#about .reel-story{margin-inline:calc(-1 * (var(--edge) + var(--copy-inset)))}
#about .page-footer,#contact .page-footer{margin-inline:calc(-1 * var(--copy-inset))}
.page-panel>.session-rec,#menu>.session-rec{background:transparent;padding:0;pointer-events:none}
#about .panel-chapter,#contact .panel-chapter{position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% + 5px));font-size:var(--type-mono);line-height:1.7;letter-spacing:.055em;opacity:0;transition:opacity .2s ease,transform .2s ease;max-width:calc(100% - 360px)}
.panel-chapter .chapter-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#about .panel-chapter.is-visible,#contact .panel-chapter.is-visible{opacity:1;transform:translate(-50%,-50%)}
@media(max-width:540px){
 :root{--copy-inset:8px}
 #about .panel-chapter,#contact .panel-chapter{font-size:var(--type-mono);max-width:calc(100% - 210px);gap:6px;padding-inline:0}
}

/* Die Abschnittsmarke misst nur ihre Textzeile, nicht die ganze Rasterzeile. */
#about .career>.side-label{align-self:start}

/* REC behält dieselbe Grösse wie auf Hauptseite und Kontakt. */
#about>.session-rec{font-size:var(--type-mono)}
@media(max-width:600px){#about>.session-rec{font-size:var(--type-mono)}}

/* Saisonprojekt: ein Player, fünf auswählbare Filme und unbeschnittene Fotos. */
#viewer.real-project .project-content{max-width:1480px}
#viewer.real-project h1{font-size:clamp(42px,7vw,112px)}
#viewer.real-project .viewer-layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center}
#viewer.real-project .viewer-media{height:68svh;max-height:760px;background:transparent}
#viewer.real-project .viewer-media video{object-fit:contain}
.film-title{margin:20px 0;color:var(--muted)}
.film-playlist{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:24px}
.film-playlist button{text-align:left;border:1px solid var(--line);padding:6px;border-radius:var(--corner)}
.film-playlist button[aria-pressed=true]{border-color:var(--accent)}
.film-playlist img{display:block;width:100%;height:160px;object-fit:cover;border-radius:var(--corner)}
.film-playlist span{display:block;padding:10px 4px}
.film-playlist button:hover{color:var(--accent)}
#viewer.real-project .project-stills{align-items:start;gap:28px}
#viewer.real-project .project-stills img{height:auto;display:block}
@media(max-width:600px){
 #viewer.real-project .viewer-layout{grid-template-columns:1fr}
 #viewer.real-project .viewer-media{height:56svh}
 .film-playlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .film-playlist img{height:150px}
 #viewer.real-project .project-stills{grid-template-columns:1fr;gap:20px}
}

/* Fotostrecke: wechselnde Bildpaare und ein breites Motiv als Ruhepunkt. */
#viewer.real-project .project-stills{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(44px,6vw,90px) clamp(14px,2.5vw,38px);padding:30px 0 70px;align-items:start}
.season-photo{min-width:0}
#viewer.real-project .season-photo img{width:100%;height:auto;display:block;border-radius:var(--corner)}
.season-photo figcaption{margin-top:12px;color:var(--muted);font-size:var(--type-mono);letter-spacing:.08em}
.season-photo:nth-child(1){grid-column:1/6;grid-row:1}
.season-photo:nth-child(2){grid-column:7/13;grid-row:1;align-self:center}
.season-photo:nth-child(3){grid-column:2/7;grid-row:2}
.season-photo:nth-child(4){grid-column:8/13;grid-row:2;margin-top:20%}
.season-photo:nth-child(5){grid-column:1/8;grid-row:3}
.season-photo:nth-child(6){grid-column:9/13;grid-row:3;align-self:end}
.season-photo:nth-child(7){grid-column:1/13;grid-row:4}
.season-photo:nth-child(8){grid-column:4/12;grid-row:5}
@media(max-width:600px){
 #viewer.real-project .project-stills{grid-template-columns:repeat(6,minmax(0,1fr));gap:36px 10px;padding:10px 0 35px}
 .season-photo:nth-child(1){grid-column:1/6;grid-row:1}
 .season-photo:nth-child(2){grid-column:2/7;grid-row:2}
 .season-photo:nth-child(3){grid-column:1/7;grid-row:3}
 .season-photo:nth-child(4){grid-column:2/7;grid-row:4;margin-top:0}
 .season-photo:nth-child(5){grid-column:1/6;grid-row:5}
 .season-photo:nth-child(6){grid-column:2/7;grid-row:6}
 .season-photo:nth-child(7){grid-column:1/7;grid-row:7}
 .season-photo:nth-child(8){grid-column:2/7;grid-row:8}
 .season-photo figcaption{margin-top:8px;font-size:var(--type-mono)}
}

/* Externe Filme laden erst auf Wunsch; Schliessen entfernt den Player vollständig. */
#viewer.embedded-project .viewer-media{height:auto;max-height:none;aspect-ratio:16/9;background:var(--photo-ink)}
#viewer-embed,.embed-play,#viewer-embed iframe{display:block;width:100%;height:100%}
#viewer-embed{position:absolute;inset:0}
#viewer-embed iframe{border:0}
.embed-play{position:relative;text-align:center}
.embed-play img{display:block;width:100%;height:100%;object-fit:contain}
.embed-play span{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:12px 18px;background:var(--paper);color:var(--ink);border-radius:var(--corner)}
.embed-play:hover span{color:var(--accent)}
.external-video{display:inline-block;margin-top:20px}
@media(max-width:600px){.embed-play span{font-size:var(--type-mono);padding:10px 12px;bottom:12px}}

/* Die Karten tragen ihre Titel bereits selbst. */
.active-caption{display:none}

/* Echte Inhaltsseiten mit natürlichem Dokument-Scroll. */
body.subpage{height:auto;min-height:100svh;overflow:auto;background:var(--paper)}
.subpage .site-shell{height:auto;min-height:100svh;overflow:visible}
.subpage main.page-panel{position:relative;inset:auto;height:auto;min-height:100svh;overflow:visible;margin:0;border:0;background:var(--paper);color:var(--ink)}
.subpage.menu-open{overflow:hidden}

.subpage #menu{background:transparent}
.menu-links a{font-size:clamp(40px,6.8vw,110px);font-weight:500;letter-spacing:-.055em;line-height:1.1;display:flex;align-items:center;gap:25px}
.menu-links a .mono{font-size:var(--type-mono);color:var(--accent);letter-spacing:0}
.menu-links a:hover,.footer-columns a:hover{color:var(--accent)}
@media(max-width:900px){.menu-links a{font-size:9vw}}
@media(max-width:540px){.menu-links a{font-size:14vw;gap:14px}}

/* Gleicher Menürahmen wie auf der Startseite, auch mitten in langen Unterseiten. */
.subpage.menu-scene{overflow:hidden;background:var(--photo-ink)}
.subpage.menu-scene .site-shell{position:fixed;inset:0 auto auto 0;height:100svh;min-height:0;overflow:hidden}
.subpage.menu-scene main.page-panel{height:100svh;min-height:0;overflow:hidden}

/* Persönlicher Einstieg: ruhige Vorstellung, grosser Rufname. */
#about .editorial-about > .personal-title{margin:clamp(40px,5vw,96px) 0 clamp(64px,7vw,120px);font-weight:500;letter-spacing:-.045em;line-height:1.14}
.personal-title-intro{display:block;font-size:clamp(24px,2.6vw,48px);margin-bottom:clamp(24px,3vw,48px)}
.personal-title-bridge{display:block;font-size:clamp(30px,4.2vw,72px);line-height:1.12;letter-spacing:-.045em}
.personal-title-name{display:block;width:fit-content;font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(96px,15vw,240px);line-height:1.05;letter-spacing:-.075em;margin-top:12px}
.personal-title-dot{color:var(--accent)}
@media(max-width:540px){.personal-title-intro{font-size:23px;letter-spacing:-.04em}.personal-title-bridge{font-size:clamp(25px,6.7vw,36px)}.personal-title-name{font-size:25vw;margin-top:16px}}

/* Kontakt: echte Links mit Platz für die vollständige E-Mail-Adresse. */
#contact .contact-links p{flex-wrap:wrap}
#contact .contact-links p>a{min-width:0;overflow-wrap:anywhere;font-size:clamp(20px,2.4vw,40px);letter-spacing:-.035em}
#contact .contact-links a:hover{color:var(--accent)}
@media(max-width:540px){#contact .contact-links p{align-items:flex-start;flex-direction:column;gap:10px}#contact .contact-links p>a{font-size:clamp(18px,5vw,26px)}}

/* Kontakt als kompakte, zweispaltige Visitenkarte. */
#contact .contact-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,7vw,140px);align-items:center;margin:clamp(40px,5vw,90px) 0 0}
#contact .contact-intro{min-width:0}
#contact #contact-title{margin:0;line-height:.95;letter-spacing:-.065em;font-weight:500}
.contact-prelude{display:block;font-size:clamp(30px,3.4vw,64px);letter-spacing:-.04em;margin-bottom:16px}
.contact-hello{display:block;font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(88px,12vw,230px);letter-spacing:-.075em}
.contact-hello>span{color:var(--accent)}
.contact-ending{display:block;font-size:clamp(48px,6vw,110px);margin-top:14px}
#contact .contact-person{font-size:clamp(15px,1.2vw,22px);margin-top:clamp(32px,4vw,64px);line-height:1.6}
.contact-person>span{display:block;color:var(--muted);font-size:.85em}
.contact-options{display:grid;gap:16px;min-width:0}
.contact-card{display:flex;flex-direction:column;align-items:flex-start;border:1px solid var(--line);border-radius:var(--corner);padding:clamp(24px,2.5vw,46px);transition:background-color .25s,color .25s,border-color .25s}
.contact-email{background:var(--ink);color:var(--paper)}
.contact-card-top{display:flex;width:100%;justify-content:space-between;align-items:center;margin-bottom:22px}
.contact-arrow{font-family:var(--font);font-size:27px;line-height:1;color:var(--accent);transition:transform .25s}
.contact-card-title{font-size:clamp(30px,3.1vw,58px);letter-spacing:-.05em;line-height:1.1;font-weight:500}
.contact-card-detail{font-size:clamp(13px,1.1vw,20px);margin-top:24px;overflow-wrap:anywhere}
.contact-card:hover{background:var(--accent);color:var(--photo-ink);border-color:var(--accent)}
.contact-card:hover .contact-arrow{color:inherit;transform:translate(3px,-3px)}
#contact .page-footer{margin-top:clamp(56px,7vw,110px);padding-top:0;border-top:0}
#contact .footer-columns{padding:24px 0 30px;font-size:13px;gap:24px}
#contact .contact-content{padding-bottom:20px}
@media(max-width:800px){#contact .contact-layout{grid-template-columns:1fr;gap:40px;margin-top:36px}.contact-options{grid-template-columns:1fr 1fr}.contact-hello{font-size:clamp(96px,20vw,160px)}.contact-ending{font-size:60px}.contact-card{padding:24px}.contact-card-title{font-size:32px}.contact-card-detail{font-size:14px}}
@media(max-width:540px){.contact-options{grid-template-columns:1fr}.contact-card{border-radius:var(--corner)}.contact-prelude{font-size:28px}.contact-hello{font-size:26vw}.contact-ending{font-size:48px}#contact .contact-person{margin-top:28px}.contact-card-top{margin-bottom:16px}.contact-card-title br{display:none}.contact-card-detail{margin-top:18px}}

/* Eigenes Hero-Portrait: Farbgebung und Studiolicht des Bildes erhalten. */
.intro .intro-portrait img{display:block;width:100%;height:100%;margin:0;object-fit:cover;object-position:50% 50%;filter:none;mask-image:none}
.intro .intro-light{display:none}
.intro .intro-shade{background:linear-gradient(180deg,rgb(30 28 25 / 12%),transparent 35%,transparent 60%,rgb(30 28 25 / 55%))}
@media(max-width:540px){.intro .intro-portrait img{object-position:51% 50%}}

/* Feedback September: lesbarere Typografie, mehr Headroom, kompakter Abschluss. */
/* Die Haarlinie liegt unabhängig vom Seitenverhältnis rund 9% unter dem oberen Rand. */
.intro .intro-portrait img{position:absolute;left:0;top:calc(9svh - max(32.75svh,14.745vw));height:max(125svh,56.28vw);object-position:50% 0%}
#about .editorial-about > .personal-title{font-size:clamp(30px,3.4vw,60px);letter-spacing:0;line-height:1.18;margin:clamp(40px,4vw,72px) 0 clamp(56px,6vw,96px)}
#about .personal-title-intro{font-size:clamp(23px,2.4vw,42px);letter-spacing:-.025em;line-height:1.25;margin-bottom:24px}
#about .personal-title-bridge{font-size:clamp(28px,3.4vw,60px);letter-spacing:-.035em;line-height:1.18}
#about .personal-title-last{display:block;white-space:nowrap}
#about .personal-title-name{display:inline-flex;align-items:baseline;font-family:Inter,sans-serif;font-size:1em;font-weight:700;letter-spacing:-.055em;line-height:1;width:auto;margin:0;vertical-align:baseline}
#contact .contact-hello{font-family:var(--font);font-weight:500;font-size:clamp(76px,9vw,164px);letter-spacing:-.05em;line-height:1.06}
#contact .contact-prelude{font-size:clamp(28px,3vw,48px);letter-spacing:-.025em}
#contact .contact-ending{font-size:clamp(44px,5vw,86px);letter-spacing:-.04em;line-height:1.12}
#contact .contact-card{background:var(--photo-paper);color:var(--photo-ink);border-color:rgb(30 28 25 / 14%)}
#contact .contact-card:hover{background:var(--accent);border-color:var(--accent);color:var(--photo-ink)}
#about .page-footer,#contact .page-footer{margin-top:clamp(56px,7vw,110px);padding-top:0;border-top:0}
#about .footer-columns,#contact .footer-columns{padding:24px 0 30px;font-size:13px;gap:24px}
@media(max-width:540px){#contact .contact-hello{font-size:24vw}}

/* Mobiler Portrait-Ausschnitt: mehr ruhiger Raum links neben dem Gesicht. */
@media(max-width:540px){.intro .intro-portrait img{object-position:calc(50% + 6vw) 0%}}

/* Gianni Videoplayer: eigene Medien, systemeigene Vollbild-Ausweichlösung auf iOS. */
.film-player{position:absolute;inset:0;background:var(--photo-ink);color:var(--photo-paper);overflow:hidden;border-radius:var(--corner)}
.film-player video{display:block;width:100%;height:100%;object-fit:contain;cursor:pointer}
.player-ui{position:absolute;inset:0;pointer-events:none}
.player-ui button,.player-ui input{pointer-events:auto}
.player-ui button{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:inherit;border-radius:var(--corner)}
.player-ui svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.player-ui button:hover{color:var(--accent)}
.player-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);gap:13px;background:var(--photo-ink);padding:13px 20px;border:1px solid rgb(236 232 225 / 25%);white-space:nowrap}
.player-start svg{color:var(--accent);fill:var(--accent);stroke:none}
.player-controls{position:absolute;bottom:0;left:0;right:0;background:rgb(30 28 25 / 94%);padding:0 16px 8px;transition:opacity .22s,transform .22s;pointer-events:auto}
.player-toolbar{display:flex;gap:10px;align-items:center}
.player-time{font-size:var(--type-mono);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.player-separator,.player-duration{color:rgb(236 232 225 / 60%)}
.player-audio{display:flex;align-items:center;gap:4px;margin-left:auto}
.player-ui input[type=range]{appearance:none;-webkit-appearance:none;border:0;border-radius:0;cursor:pointer;padding:0;margin:0;background:transparent;height:30px;accent-color:var(--accent)}
.player-ui .player-seek{display:block;width:100%;--progress:0%}
.player-ui input[type=range]::-webkit-slider-runnable-track{height:2px;background:rgb(236 232 225 / 30%)}
.player-ui .player-seek::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--accent) var(--progress),rgb(236 232 225 / 30%) var(--progress))}
.player-ui input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);margin-top:-5px}
.player-ui input[type=range]::-moz-range-track{height:2px;background:rgb(236 232 225 / 30%)}
.player-ui input[type=range]::-moz-range-progress{height:2px;background:var(--accent)}
.player-ui input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--accent)}
.player-volume{width:64px}
.player-ui input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.player-status{position:absolute;top:16px;left:16px;right:16px;text-align:center;font-size:var(--type-mono);background:var(--photo-ink);width:fit-content;margin:auto;padding:5px 9px}
.player-status:empty{display:none}
.controls-hidden .player-controls{opacity:0;transform:translateY(8px);pointer-events:none}
.controls-hidden .player-controls button,.controls-hidden .player-controls input{pointer-events:none}
.film-player:fullscreen{border-radius:0;width:100%;height:100%;background:var(--photo-ink)}
@media(max-width:540px){.player-controls{padding:0 10px 6px}.player-toolbar{gap:4px}.player-time{font-size:var(--type-mono)}.player-volume{width:46px}.player-start{padding:10px 16px}.player-ui input[type=range]{height:36px}}
@media(prefers-reduced-motion:reduce){.player-controls{transition:none}}

/* Vor dem ersten Abspielen nur den Start-Button zeigen, keine zweite Steuerleiste. */
.not-started .player-controls{opacity:0;transform:translateY(8px);pointer-events:none}
.not-started .player-controls button,.not-started .player-controls input{pointer-events:none;visibility:hidden}

/* Farbschema im Menü: auf allen Seiten am selben Ort. */
#menu .menu-theme{position:static;display:flex;justify-content:flex-end;gap:14px;margin-bottom:22px}
#menu .menu-theme button{min-height:32px;color:rgb(236 232 225 / 55%);font:inherit;font-size:var(--type-mono)}
#menu .menu-theme button:hover{color:var(--accent)}
#menu .menu-theme button[aria-pressed=true]{color:#ECE8E1}