/* Portfolio — gemeinsame Seite für alle Bereiche */
.pf-page{ background:#f4f3ee; color:#05060b; padding:150px 0 120px; min-height:100vh; }
.pf-head h1{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(48px,10vw,150px); line-height:.9; letter-spacing:-.03em; margin-top:18px; }
.pf-head h1 .it{ color:var(--blue); }
.pf-head p{ max-width:46ch; margin-top:22px; color:#4b5068; font-size:18px; line-height:1.55; }
.pf-head .h-eyebrow{ color:var(--blue); }
.pf-reel{ margin-top:56px; border-radius:6px; overflow:hidden; background:#05060b; aspect-ratio:16/9; position:relative; }
.pf-reel video{ width:100%; height:100%; object-fit:cover; display:block; }
.pf-filter{ display:flex; flex-wrap:wrap; gap:10px; margin:56px 0 28px; }
.pf-filter button{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:12px 20px; border-radius:100px; border:1px solid #05060b; background:transparent; color:#05060b; cursor:pointer; transition:background .25s,color .25s,border-color .25s; }
.pf-filter button:hover{ border-color:var(--blue); color:var(--blue); }
.pf-filter button[aria-pressed="true"]{ background:#05060b; color:#fff; border-color:#05060b; }
.pf-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:16px; }
.pf-item{ aspect-ratio:16/10; border-radius:6px; padding:20px; display:flex; flex-direction:column; justify-content:space-between; color:var(--c2); position:relative; overflow:hidden; isolation:isolate; background:var(--c1); text-decoration:none; transition:transform .4s var(--ease); }
.pf-item[hidden]{ display:none; }
.pf-item::before{ content:""; position:absolute; inset:0; z-index:-2; background:var(--img,none) center/cover; }
.pf-item::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(5,6,11,.15),rgba(5,6,11,.75)); opacity:0; }
.pf-item[style*="--img"]{ color:#fff; }
.pf-item[style*="--img"]::after{ opacity:1; }
.pf-item:hover{ transform:translateY(-4px); }
.pf-top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.pf-area,.pf-dur{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.pf-area{ border:1px solid currentColor; border-radius:100px; padding:6px 12px; }
.pf-title{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(22px,2.4vw,30px); line-height:1; letter-spacing:-.02em; text-transform:uppercase; }
.pf-sub{ display:block; margin-top:8px; font-size:14px; opacity:.9; }
.pf-play{ position:absolute; left:50%; top:46%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; border:1.5px solid currentColor; opacity:.9; transition:transform .3s var(--ease); }
.pf-play::after{ content:""; position:absolute; left:23px; top:17px; border-left:16px solid currentColor; border-top:11px solid transparent; border-bottom:11px solid transparent; }
.pf-item:hover .pf-play{ transform:scale(1.1); }
.pf-modal{ position:fixed; inset:0; z-index:1000; background:rgba(5,6,11,.92); display:flex; align-items:center; justify-content:center; padding:56px 24px; }
.pf-modal[hidden]{ display:none; }
.pf-stage{ width:min(1100px,100%); aspect-ratio:16/9; background:#000; border-radius:6px; overflow:hidden; }
.pf-stage iframe,.pf-stage video{ width:100%; height:100%; border:0; display:block; }
.pf-close{ position:absolute; top:12px; right:20px; font-size:40px; line-height:1; color:#fff; background:none; border:0; cursor:pointer; }