*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}html.lb-open{overflow:hidden}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#fff;background:#0b0b0b;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.site-header{display:flex;justify-content:space-between;align-items:center;padding:28px 24px;position:sticky;top:0;z-index:5;background:#0b0b0b}
.name{font-size:1.1rem;font-weight:600;letter-spacing:.12em;margin:0}
.site-header nav a{margin-left:22px;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#bbb;transition:color .2s}.site-header nav a:hover{color:#fff}
section[id]{scroll-margin-top:80px}
/* filters */
.filters{display:flex;flex-wrap:wrap;gap:6px 22px;padding:0 24px 18px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.filters a{color:#777;padding-bottom:3px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.filters a:hover{color:#ddd}.filters a.active{color:#fff;border-bottom-color:#fff}
/* grid: always 3 columns */
.grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tile{position:relative;display:block;cursor:pointer}
.thumb{overflow:hidden;aspect-ratio:2.39/1;background:#000}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.caption{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px;padding:16px;background:rgba(0,0,0,.62);opacity:0;transition:opacity .3s}
.tile:hover .caption,.tile:focus-visible .caption{opacity:1}
.caption .title{font-size:1rem;font-weight:500;margin:0;overflow-wrap:anywhere}
.meta{font-size:.8rem;color:#aaa;letter-spacing:.04em}
.caption .cat{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#888}
@media(hover:none){.caption{position:static;opacity:1;background:none;align-items:flex-start;text-align:left;padding:6px 2px 10px;gap:2px}
 .caption .title{font-size:.78rem;line-height:1.25}.caption .meta{font-size:.66rem}.caption .cat{font-size:.58rem}}
/* about / contact */
.section{max-width:760px;padding:96px 24px 0}
.section h2{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-bottom:14px}
.section p{margin-top:14px;line-height:1.65;color:#ccc}.section p.meta{color:#888;font-size:.82rem}
.lang-switch{margin-top:18px;font-size:.72rem;letter-spacing:.12em;color:#666}
.lang-switch button{background:none;border:0;color:#888;font:inherit;letter-spacing:inherit;cursor:pointer;padding:0 2px}
.lang-switch button.active{color:#fff;border-bottom:1px solid #fff}
.contact-mail a{font-size:1.1rem;color:#fff;border-bottom:1px solid #444}.contact-mail a:hover{border-color:#fff}
.social a{color:#999;margin-right:18px;transition:color .2s}.social a:hover{color:#fff}
.site-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:96px 24px 40px;font-size:.75rem;color:#777;letter-spacing:.08em}
.site-footer .social a{margin:0 0 0 16px}
/* lightbox */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.94)}
.lb-scroll{position:absolute;inset:0;overflow-y:auto;padding:64px 4vw 48px;display:flex;justify-content:center;align-items:flex-start}
.lb-body{width:min(1200px,100%);margin:auto 0}
.lb-close{position:fixed;top:14px;right:18px;z-index:2;background:none;border:0;color:#fff;font-size:2.2rem;line-height:1;cursor:pointer;opacity:.75}.lb-close:hover{opacity:1}
.video{position:relative;aspect-ratio:16/9;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.coming-soon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#888;letter-spacing:.12em;text-transform:uppercase;font-size:.85rem;background:#161616}
.lb-info{padding:18px 0 0}.lb-info h2{font-size:1.3rem;font-weight:500}.lb-info .meta{margin-top:6px}.lb-info .desc{margin-top:12px;color:#bbb;line-height:1.6;max-width:720px}
/* Projektseite: credits under the title, collaborator links under the stills */
.lb-info .credits{margin-top:10px;font-size:.74rem;line-height:1.7;color:#8a8a8a;max-width:820px}
.lb-info .credits .cr:not(:last-child)::after{content:" \00b7  ";color:#555}
.lb-info .credits .cr-role{color:#666}
.plinks{margin-top:18px;font-size:.74rem;line-height:1.8;color:#8a8a8a;display:flex;flex-wrap:wrap;gap:2px 22px}
.plinks .pl-name{color:#aaa}.plinks .pl-name::after{content:" \2014"}
.plinks a{color:#8a8a8a;text-decoration:underline;text-decoration-color:#444;text-underline-offset:3px}
.plinks a:hover,.plinks a:focus-visible{color:#eee;text-decoration-color:#eee}
.lb-extra{margin-top:36px}.lb-extra h3{font-size:1rem;font-weight:500;margin-bottom:12px}.lb-extra .meta{font-size:.78rem;color:#888;font-weight:400}
.thumb video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}


/* hover: greyscale + darken, centred title/client, no zoom */
.thumb img,.thumb video{transform:none!important;transition:filter .3s ease}
.caption .client{display:none}
@media(hover:hover){
 .caption{background:none;transition:opacity .3s ease;pointer-events:none}
 .caption .meta,.caption .cat{display:none}
 .caption .client{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.85}
 .caption .title{color:#fff}
 .thumb img,.thumb video{filter:grayscale(1);transition:filter .5s ease}
 .tile:hover .thumb img,.tile:hover .thumb video,.tile:focus-visible .thumb img,.tile:focus-visible .thumb video{filter:grayscale(0)}
 .caption{opacity:1;background:rgba(0,0,0,.3);text-shadow:0 1px 6px rgba(0,0,0,.6);transition:opacity .5s ease}
 .tile:hover .caption,.tile:focus-visible .caption{opacity:0}
}
@media(prefers-reduced-motion:reduce){.thumb img,.thumb video,.caption{transition:none}}
/* project stills */
.lb-stills{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:28px}
.lb-stills .still{display:block;overflow:hidden;background:#111;cursor:zoom-in}
.lb-stills img{width:100%;height:auto;display:block;transition:opacity .25s}.lb-stills .still:hover img{opacity:.8}
.zoom{position:fixed;inset:0;z-index:3;background:rgba(0,0,0,.97);display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.zoom img{max-width:94vw;max-height:92vh;object-fit:contain}
.zoom button{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:3rem;opacity:.6;cursor:pointer;padding:0 18px}.zoom button:hover{opacity:1}
.zp{left:0}.zn{right:0}
/* about page */
.site-header nav a[aria-current="page"]{color:#fff}
.about-page main{min-height:calc(100vh - 160px)}
.about-page .section:first-child{padding-top:120px}
.about-page .section{padding-left:max(24px,4vw)}
/* everything cropped to 2.39:1 scope */
.lb-stills .still{aspect-ratio:2.39/1}
.lb-stills img{height:100%;object-fit:cover}
.zoom img{aspect-ratio:2.39/1;width:min(94vw,calc(92vh*2.39));height:auto;max-height:none;object-fit:cover}
/* track list (projects with several videos) */
.tracks{list-style:none;display:flex;flex-wrap:wrap;gap:4px 22px;margin:14px 0 0;padding:0;counter-reset:none}
.tracks button{background:none;border:0;padding:4px 0;color:#888;font:inherit;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:color .2s}
.tracks button:hover,.tracks button:focus-visible{color:#ddd}
.tracks button.active{color:#fff}
.tracks .tn{margin-right:8px;color:#555;font-variant-numeric:tabular-nums}
.tracks button.active .tn{color:#aaa}
/* mobile header button + menu (hidden on desktop) */
.menu-btn,.m-menu{display:none}
/* ===== phone (<=700px), modeled on dannygevirtz.com on iPhone ===== */
@media(max-width:700px){
 body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
 html.menu-open{overflow:hidden}
 /* header: centred name, hamburger right, generous top space, scrolls away */
 .site-header{position:relative;justify-content:center;padding:calc(env(safe-area-inset-top) + 46px) 64px 38px;background:#0b0b0b}
 .name{font-size:1.32rem;font-weight:500;letter-spacing:.08em;text-align:center;white-space:nowrap}
 .main-nav{display:none}
 .menu-btn{display:flex;flex-direction:column;justify-content:center;gap:6px;position:absolute;right:max(12px,env(safe-area-inset-right));bottom:30px;width:44px;height:44px;padding:0 9px;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
 .menu-btn span{display:block;height:1.5px;background:#fff;border-radius:1px}
 /* full-screen menu */
 .m-menu{display:flex;position:fixed;inset:0;z-index:60;background:#0b0b0b;align-items:center;justify-content:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
 .m-menu[hidden]{display:none!important}
 .m-close{position:absolute;top:calc(env(safe-area-inset-top) + 34px);right:max(12px,env(safe-area-inset-right));width:44px;height:44px;background:none;border:0;color:#fff;font-size:2.4rem;font-weight:200;line-height:1;cursor:pointer}
 .m-links{display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center}
 .m-links a{font-size:1.45rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#bbb}
 .m-links a[aria-current="page"]{color:#fff}
 .m-links a[target="_blank"]{font-size:.9rem;letter-spacing:.18em;color:#888}
 /* filters: one small, horizontally scrollable row */
 .filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:0 18px;padding:0 16px 14px;font-size:.62rem;letter-spacing:.14em;justify-content:flex-start}
 .filters::-webkit-scrollbar{display:none}
 .filters a{flex:none;white-space:nowrap}
 /* grid: one column, edge to edge, hairline gap, still 2.39:1 */
 .grid{grid-template-columns:1fr;gap:3px}
 .tile{-webkit-tap-highlight-color:transparent}
 .tile .thumb img,.tile .thumb video{filter:none!important}
 /* small caption bottom-left over a very subtle gradient */
 .caption{display:flex!important;position:absolute;inset:auto 0 0 0;top:auto;opacity:1;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left;gap:1px;padding:26px 12px 8px;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.38),rgba(0,0,0,0));text-shadow:0 1px 3px rgba(0,0,0,.45)}
 .caption .title{font-size:.7rem;font-weight:500;letter-spacing:.02em;line-height:1.25;color:#fff}
 .caption .client{display:block;font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.72}
 .caption .meta,.caption .cat{display:none}
 /* project overlay: full screen, sticky close, full-width video */
 .lightbox{background:#0b0b0b}
 .lb-scroll{display:block;padding:calc(env(safe-area-inset-top) + 60px) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 48px) env(safe-area-inset-left);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
 .lb-body{width:100%;margin:0}
 .lb-close{top:calc(env(safe-area-inset-top) + 8px);right:max(8px,env(safe-area-inset-right));width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:200;opacity:1;border-radius:50%;background:rgba(11,11,11,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
 .lb-info{padding:16px 16px 0}.lb-info h2{font-size:1.1rem}.lb-info .desc{font-size:.92rem}
 .tracks{padding:0 16px;gap:2px 18px}.tracks button{font-size:.72rem;padding:8px 0}
 .lb-stills{grid-template-columns:1fr;gap:3px;margin-top:22px}
 .lb-extra{margin-top:30px}.lb-extra h3{padding:0 16px}
 .lb-info .credits{font-size:.7rem}.plinks{padding:0 16px;margin-top:14px;font-size:.72rem;flex-direction:column}
 .zoom button{font-size:2.4rem;padding:0 10px}
 /* about page: readable text */
 .about-page .section,.section{padding:40px 22px 0;max-width:none}
 .about-page .section:first-child{padding-top:12px}
 .section h2{font-size:.78rem}
 .section p{font-size:1rem;line-height:1.7}.section p.meta{font-size:.85rem;line-height:1.55}
 .contact-mail a{font-size:1.05rem;overflow-wrap:anywhere}
 .section .social a{display:inline-block;padding:6px 0;margin-right:22px}
 .site-footer{padding:72px 16px calc(env(safe-area-inset-bottom) + 28px);font-size:.68rem}
}
/* player box follows each film's real aspect ratio (--ar set per video by build.py); stays within the viewport height */
.video{aspect-ratio:var(--ar,16/9);width:min(100%,calc(90vh * var(--ar,1.7778)));margin-left:auto;margin-right:auto}
@media(max-width:700px){.video{width:100%}}
/* footer legal links */
.site-footer .legal-links a{color:#777;transition:color .2s}.site-footer .legal-links a:hover{color:#fff}
/* mobile menu: small legal links at the bottom */
.m-legal{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 28px);text-align:center;font-size:.68rem;letter-spacing:.12em;color:#666}
.m-legal a{color:#888;padding:8px 4px}
/* Impressum: compact section at the bottom of about.html */
.legal-mini{margin-top:96px;padding-top:28px!important;border-top:1px solid #222;max-width:760px;font-size:.78rem;color:#888}
.legal-mini h2{font-size:.68rem;color:#999;margin-bottom:10px}
.legal-mini p{margin-top:10px;line-height:1.6;color:#888;font-size:.78rem}
.legal-mini a{color:#aaa;border-bottom:1px solid #333}.legal-mini a:hover{color:#fff}
.ph{background:#5a1010;color:#ffb3b3;padding:0 4px;font-weight:600;letter-spacing:.04em}
/* Datenschutz page */
.legal-text{max-width:760px}
.legal-h1{font-size:1rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;margin-bottom:28px}
.legal-text h2{margin-top:36px;margin-bottom:6px}
.legal-text p{font-size:.88rem}
.legal-text a{color:#ddd;border-bottom:1px solid #444}.legal-text a:hover{color:#fff}
/* YouTube click-to-load */
.yt-load{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;display:block}
.yt-load img{width:100%;height:100%;object-fit:cover;display:block;opacity:.8;transition:opacity .25s}
.yt-load:hover img,.yt-load:focus-visible img{opacity:1}
.yt-play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border:1px solid rgba(255,255,255,.85);border-radius:50%;background:rgba(0,0,0,.25);transition:transform .25s,background .25s}
.yt-play::after{content:"";position:absolute;left:27px;top:22px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent #fff}
.yt-load:hover .yt-play,.yt-load:focus-visible .yt-play{transform:scale(1.06);background:rgba(0,0,0,.4)}
.yt-note{margin:8px auto 0;width:min(100%,calc(90vh * var(--ar,1.7778)));font-size:.68rem;color:#777;letter-spacing:.02em}
.yt-note a{color:#999;border-bottom:1px solid #444}.yt-note a:hover{color:#fff}
@media(max-width:700px){
 .yt-note{width:auto;padding:0 16px}
 .yt-play{width:58px;height:58px;margin:-29px 0 0 -29px}.yt-play::after{left:23px;top:18px;border-width:11px 0 11px 17px}
 .legal-mini{margin-top:64px;padding:24px 22px 0!important}
 .legal-mini p{font-size:.76rem}
 .legal-text p{font-size:.92rem}
 .site-footer .legal-links{display:block;margin-top:6px}
 .site-footer .legal-links .sep{display:none}
}
.rev{unicode-bidi:bidi-override;direction:rtl;display:inline-block}
/* 404 */
.notfound h2{font-size:2.4rem;font-weight:300;letter-spacing:.1em}
.notfound .home-link{color:#fff;border-bottom:1px solid #444;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}.notfound .home-link:hover{border-color:#fff}
/* about: portrait below bio + contact, near full width, native ratio, in colour (like dannygevirtz.com/about) */
.about-portrait{margin:72px 24px 0}
.about-portrait img{display:block;width:100%;height:auto;background:#000}
.about-portrait+.legal-mini{margin-top:72px}
@media(max-width:700px){.about-portrait{margin:40px 0 0}.about-portrait+.legal-mini{margin-top:56px}}
/* about page: everything centred, small portrait centred under the text, then Impressum (ids only exist on about.html) */
#about,#contact,#impressum{margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px;text-align:center}
#about .lang-switch{justify-content:center}
#contact .social a{margin:0 9px}
.about-portrait{margin:64px auto 0;width:clamp(300px,32vw,560px)}
#impressum{max-width:620px}
@media(max-width:700px){
 #about,#contact,#impressum{padding-left:22px;padding-right:22px}
 .about-portrait{margin:44px auto 0;width:66vw}
 #contact .social a{margin:0 11px}
}

/* about v3: portrait = half the original full-width display, contact block removed, compact 2-col Impressum */
.about-portrait{margin:72px auto 0;width:calc(50vw - 24px);max-width:900px}
#impressum.legal-mini{margin-top:220px;max-width:960px;font-size:.68rem}
#impressum .legal-cols{columns:2;column-gap:64px;text-align:left}
#impressum .legal-cols p{break-inside:avoid;margin:0 0 10px;font-size:.68rem;line-height:1.55}
#impressum h2{margin-bottom:18px}
.about-portrait+#impressum.legal-mini{margin-top:220px}
@media(max-width:700px){
 .about-portrait{margin:44px auto 0;width:72vw}
 #impressum.legal-mini,.about-portrait+#impressum.legal-mini{margin-top:140px}
 #impressum .legal-cols{columns:1;text-align:center}
 #impressum .legal-cols p{font-size:.68rem}
}

/* about v4: Impressum in three equal centred columns */
#impressum.legal-mini{max-width:1000px}
#impressum .legal-cols{columns:auto;display:grid;grid-template-columns:repeat(3,1fr);column-gap:56px;text-align:center;align-items:start}
#impressum .legal-col p{margin:0 0 10px}
@media(max-width:700px){#impressum .legal-cols{display:block}#impressum .legal-col+.legal-col{margin-top:10px}}

/* touch: B/W, the tile in the centre of the viewport gets colour and its caption fades out */
@media(hover:none){.tile .thumb img,.tile .thumb video{filter:grayscale(1)!important;transition:filter .5s ease}.tile.in-view .thumb img,.tile.in-view .thumb video{filter:none!important}.caption{transition:opacity .5s ease}.caption{opacity:1!important}.tile.in-view .caption{opacity:.5!important}}

/* titles: name – partner (agency / venue / artist) slightly muted; film type small underneath */
.caption .title .partner{font-weight:400;opacity:.72}
.lb-info h2 .partner{font-weight:400;color:#8a8a8a}
.lb-info .lb-type{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#888}
/* about: Instagram · YouTube · e-mail, small and muted in one line directly above the portrait */
.about-social{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 0;margin:0 0 14px;font-size:.74rem;line-height:1.6;letter-spacing:.06em;color:#8a8a8a}
.about-social>a{color:#8a8a8a;transition:color .2s}
.about-social>a:not(:last-of-type)::after{content:"\00b7";color:#555;margin:0 12px;display:inline-block}
.about-social>a:hover,.about-social>a:focus-visible{color:#fff}
@media(max-width:700px){.about-social{font-size:.7rem;letter-spacing:.04em;margin:0 calc(-14vw + 22px) 12px}.about-social>a:not(:last-of-type)::after{margin:0 9px}}
@media(max-width:359px){.about-social>a.js-mail{flex-basis:100%;text-align:center}.about-social>a:nth-of-type(2)::after{display:none}}

.filters a{cursor:pointer}
/* mobile fixes (2026-10-23): bigger tap targets via invisible hit areas (look unchanged), slightly larger small text */
@media(max-width:700px){
 .filters{font-size:.7rem;padding-top:10px;margin-top:-10px;position:relative;z-index:6}
 .filters a{position:relative}.filters a::after{content:"";position:absolute;inset:-10px 0}
 .caption .client{font-size:.62rem}
 .site-footer a{position:relative}.site-footer a::after{content:"";position:absolute;inset:-8px -4px}
 .lang-switch button{position:relative}.lang-switch button::after{content:"";position:absolute;inset:-10px -8px}
 #impressum.legal-mini,#impressum .legal-cols p{font-size:.8rem}
}
/* landscape phones: video + controls fit the visible viewport */
@media(orientation:landscape) and (max-height:500px){
 .lb-scroll{padding:52px max(4vw,env(safe-area-inset-right)) 32px max(4vw,env(safe-area-inset-left))}
 .video{width:min(100%,calc((100svh - 64px) * var(--ar,1.7778)))}
 .lb-close{top:8px;right:max(12px,env(safe-area-inset-right))}
}

/* sticky header + filter bar (2026-10-23): name, menu and filters stay at the top on all devices; solid background so nothing shows through */
.site-header{position:sticky;top:0;z-index:7;background:#0b0b0b}
.filters{position:sticky;top:var(--hh,0px);z-index:6;background:#0b0b0b}
html{scroll-padding-top:calc(var(--hh,0px) + 8px)}
section[id]{scroll-margin-top:calc(var(--hh,80px) + 8px)}
#work{scroll-margin-top:var(--hh,0px)}
.tile-item{scroll-margin-top:calc(var(--hh,0px) + var(--fh,0px) + 6px)}
@media(max-width:700px){
 .site-header{position:sticky;padding:calc(env(safe-area-inset-top) + 14px) 60px 12px}
 .name{font-size:1.2rem}
 .menu-btn{bottom:2px}
 .filters{position:sticky;margin-top:0;padding-top:4px;padding-bottom:11px}
}
@media(orientation:landscape) and (max-height:500px){
 .site-header{padding:10px max(24px,env(safe-area-inset-right)) 10px max(24px,env(safe-area-inset-left))}
 .filters{padding-bottom:10px;padding-left:max(24px,env(safe-area-inset-left))}
}

/* ===== SEO / performance update (2026-10-23) ===== */
/* tiles: poster image underneath, lazy-loaded clip on top as soon as it plays (hard cut, no black) */
.thumb{position:relative}
.thumb picture{display:block;width:100%;height:100%}
.thumb video.preview{position:absolute;inset:0;opacity:0}
.thumb video.preview.on{opacity:1}
/* home: small intro heading above the filter bar */
.intro{padding:0 24px 20px;max-width:920px}
.intro h1{font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#bbb;margin:0;line-height:1.5}
.intro p{margin-top:5px;font-size:.78rem;line-height:1.55;color:#6f6f6f;letter-spacing:.02em}
/* EN / DE switch: header (desktop), menu (phone), about page */
.lang-nav{margin-left:22px;font-size:.75rem;letter-spacing:.1em;color:#555}
.site-header nav .lang-nav a{margin-left:0}
.lang-nav .sl{margin:0 6px}
.site-header nav .lang-nav a.active{color:#fff}
.m-links .m-lang{font-size:.9rem;letter-spacing:.18em;color:#555}
.m-links .m-lang a{font-size:.9rem;letter-spacing:.18em;color:#888}
.m-links .m-lang a.active{color:#fff}
.m-lang .sl{margin:0 12px}
.lang-switch a{color:#888;padding:0 2px}
.lang-switch a.active{color:#fff;border-bottom:1px solid #fff}
.lang-switch .sl{margin:0 4px}
/* headings that became real h1s keep their old look */
.section h1.about-h{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-bottom:14px}
.notfound h1{font-size:2.4rem;font-weight:300;letter-spacing:.1em}
/* overlay + project page: small text link to the project page */
.pagelink{margin-top:16px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.pagelink a{color:#8a8a8a;border-bottom:1px solid #444;padding-bottom:1px;transition:color .2s,border-color .2s}
.pagelink a:hover,.pagelink a:focus-visible{color:#fff;border-color:#fff}
/* project pages (work/<slug>.html) */
.pp{width:min(1200px,100%);margin:0 auto;padding:12px 4vw 0}
.pp-back{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 18px}
.pp-back a{color:#777;transition:color .2s}.pp-back a:hover{color:#fff}
.lb-info h1{font-size:1.3rem;font-weight:500}
.lb-info h1 .partner{font-weight:400;color:#8a8a8a}
.lb-extra .pp-h3{font-size:1rem;font-weight:500;margin-bottom:12px}
.pp-nav{display:flex;justify-content:space-between;gap:24px;margin-top:72px;padding-top:22px;border-top:1px solid #1c1c1c;font-size:.8rem;line-height:1.45}
.pp-nav a{color:#aaa;max-width:46%;transition:color .2s}.pp-nav a:hover{color:#fff}
.pp-nav a[rel="next"]{text-align:right;margin-left:auto}
.pp-k{display:block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#666;margin-bottom:4px}
@media(max-width:700px){
 .intro{padding:2px 16px 14px;text-align:center;margin:0 auto}
 .intro h1,.intro p{text-wrap:balance}
 .pp .plinks{align-items:center;text-align:center}
 .intro h1{font-size:.62rem;letter-spacing:.12em}
 .intro p{font-size:.7rem;margin-top:4px}
 .section h1.about-h{font-size:.78rem}
 .lang-switch a{position:relative}.lang-switch a::after{content:"";position:absolute;inset:-10px -8px}
 .m-lang a{position:relative;padding:6px 0}
 .pp{padding:4px 0 0}
 .pp-back{padding:0 16px;margin-bottom:12px}
 .lb-info h1{font-size:1.1rem}
 .pp .lb-extra .pp-h3{padding:0 16px}
 .pp-nav{padding:20px 16px 0;margin-top:56px;font-size:.74rem}
}

/* rev 2026-10-23b */