/* Seite Portfolio: Filter, Kacheln, Projektansicht */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;margin:0 0 42px;padding:0;list-style:none}
.filters button{position:relative;font-size:13px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--text);padding:3px 0}
.filters button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--out)}
.filters button:hover::after,.filters .cur::after{transform:none}.filters .cur{color:var(--blue)}
.grid{position:relative;transition:height .6s var(--out)}
.tile{position:absolute;top:0;left:0;transition:transform .7s var(--out),opacity .45s;text-align:center;cursor:pointer;display:block;width:100%}
.tile.off{opacity:0;pointer-events:none}
.box{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--soft);transition:transform .8s var(--out)}
.box img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:grayscale(1);transition:transform .8s var(--out),filter .5s}
.tile:hover .box img,.tile:focus-visible .box img{filter:none}
.tile:hover .box,.tile:focus-visible .box{transform:scale(.95)}.tile:hover .box img,.tile:focus-visible .box img{transform:scale(1.15)}
.mask{position:absolute;inset:0;background:rgba(3,36,74,.14);opacity:0;transition:opacity .45s;display:grid;place-items:center;color:#fff;font-size:44px}
.mask .i{filter:drop-shadow(0 1px 8px rgba(3,36,74,.6));transform:scale(.4) rotate(-30deg);transition:transform .55s var(--pop)}
.tile:hover .mask,.tile:focus-visible .mask{opacity:1}.tile:hover .mask .i,.tile:focus-visible .mask .i{transform:none}
.tile h3{margin:14px 0 0;font-size:19.3px;font-weight:500;color:var(--ink);line-height:1.3}
.tile p{margin:0;font-size:14px;line-height:1.5;color:var(--mute)}

/* Projektseite */
#bar{position:fixed;left:0;top:0;height:3px;z-index:700;width:0;background:var(--blue);opacity:0}
#bar.go{opacity:1;width:82%;transition:width 1s var(--out)}
#spin{position:fixed;z-index:700;top:12px;right:14px;width:18px;height:18px;border-radius:50%;border:2px solid transparent;border-top-color:var(--blue);border-left-color:var(--blue);opacity:0;animation:drehen .5s linear infinite;pointer-events:none}
#bar.go~#spin{opacity:1}
@keyframes drehen{to{transform:rotate(360deg)}}
#detail{position:fixed;inset:0;z-index:470;background:#fff;overflow:hidden auto;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden}
#detail.on{opacity:1;visibility:visible}
#detail.rein{animation:zoomRein .4s cubic-bezier(.165,.84,.44,1) both}
#detail.raus{visibility:visible;animation:zoomRaus .3s cubic-bezier(.165,.84,.44,1) both}
@keyframes zoomRein{from{opacity:0;transform:scale(1.1)}to{opacity:1;transform:none}}
@keyframes zoomRaus{from{opacity:1;transform:none}to{opacity:0;transform:scale(1.2)}}
.pnav{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#fff;border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.pnav button{display:flex;align-items:center;justify-content:center;gap:9px;padding:calc(18px + .6vw) 6px;font-size:13px;line-height:1;letter-spacing:1px;text-transform:uppercase;color:#1c262b;transition:background .25s,color .25s}
.pnav button+button{border-left:1px solid var(--line)}
.pnav button:hover{background:var(--blue);color:#fff}
.pnav .i{font-size:12px;transition:transform .3s var(--out)}
.pnav button:hover .i{transform:scale(1.25)}
.pwrap{width:88%;max-width:1260px;margin:0 auto;padding:calc(3.4em + 4vw) 0 5em;text-align:center}
.pwrap .ph{margin:0 0 .5em}
.pdesc{max-width:640px;margin:0 auto 4em}
.pfall{display:flex;flex-wrap:wrap;justify-content:center;gap:28px clamp(24px,4vw,56px);max-width:1120px;margin:0 auto 5em;text-align:left}
.pfall>div{flex:1 1 260px;max-width:360px;padding-top:14px;border-top:2px solid var(--ink)}
.pfall h2{margin:0 0 8px;color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pfall p{margin:0;font-size:16.5px;line-height:1.55;overflow-wrap:break-word;hyphens:manual}
.pdesc p{margin:0 0 1em}
.pmeta{display:flex;flex-wrap:wrap;gap:16px 0;margin:32px 0;font-size:15px;line-height:1.45}
.pmeta span{flex:1 1 0;min-width:130px;padding:0 8px}
.pmeta strong{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:194px;padding:18px 26px;border:1px solid var(--blue);color:var(--blue);font-size:11px;font-weight:700;letter-spacing:1px;line-height:1;text-transform:uppercase;position:relative;overflow:hidden;z-index:0;transition:color .35s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blue);transform:translateY(101%);transition:transform .4s var(--out)}
.btn:hover{color:#fff}.btn:hover::before{transform:none}.btn .i{font-size:13px}
.pbilder figure{margin:0 auto 2em}
.pbilder img{width:100%;height:auto;margin:0 auto}
.pbilder .hoch{width:min(460px,100%)}
.pbilder figcaption{margin-top:10px;font-size:13px;letter-spacing:.03em;color:var(--text)}
.unter{margin:-42px 0 34px;text-align:center;font-size:15px;color:var(--text)}
.tile .leer{height:100%;display:grid;place-items:center;background:var(--soft)}
.tile .leer{padding:8%;background:#0d111c;color:#fff;text-align:center}
.tile .leer span{font:400 clamp(26px,2.7vw,40px)/1.15 var(--anton);letter-spacing:.02em;text-transform:uppercase}
/* Touch-Geräte haben kein Hover: dort bleiben die Bilder farbig */
@media (hover:none){.box img{filter:none}.tile:hover .mask{opacity:0}.tile:hover .box,.tile:hover .box img{transform:none}}
@media (hover:none){.pnav button:hover{background:#fff;color:#1c262b}.pnav button:hover .i{transform:none}}