/* VIRTUAL AI ADS – Portfolio (Phase 1). Alle Regeln sind auf .portfolio-page begrenzt. */
.portfolio-page{background:#fff;overflow-x:hidden}
.portfolio-page .nav a.is-active:after{right:0}
.portfolio-page .pf-main{max-width:var(--max,1440px);margin:0 auto;padding:clamp(40px,5vw,72px) var(--pad,42px) clamp(64px,7vw,110px)}

/* Hero */
.pf-hero{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.pf-eyebrow{display:flex;align-items:center;gap:18px;margin:0 0 18px;font:500 14px/1 Oswald,sans-serif;letter-spacing:.17em;text-transform:uppercase}
.pf-rule{display:block;width:34px;height:3px;background:var(--red,#e93626)}
.pf-hero h1{font:700 clamp(58px,7.4vw,108px)/.9 Oswald,sans-serif;letter-spacing:-.03em;text-transform:uppercase;margin:0;max-width:none}
.pf-sub{font:700 clamp(30px,3.6vw,54px)/1 Oswald,sans-serif;letter-spacing:-.02em;text-transform:uppercase;color:var(--red,#e93626);margin:10px 0 18px}
.pf-lead{font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:#3b3a37;margin:0;max-width:640px}
.pf-claim{font:300 clamp(28px,2.7vw,40px)/1.02 Oswald,sans-serif;text-transform:uppercase;letter-spacing:-.01em;margin:0 0 6px;text-align:left}

/* Filter */
.pf-filters{margin:clamp(30px,3.5vw,48px) 0 clamp(36px,4vw,56px);max-width:100%}
.pf-filters-inner{display:flex;flex-wrap:wrap;gap:10px}
.pf-filter{appearance:none;background:#fff;color:var(--ink,#0b0b0c);border:1px solid var(--line,#cfcbc3);border-radius:0;padding:10px 16px;font:600 12px/1.2 "DM Sans",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:border-color .2s,background .2s,color .2s}
.pf-filter:hover{border-color:var(--ink,#0b0b0c)}
.pf-filter.is-active{background:var(--red,#e93626);border-color:var(--red,#e93626);color:#fff}
.portfolio-page :focus-visible{outline:2px solid var(--red,#e93626);outline-offset:3px}

/* Sektoren */
.pf-sector{padding-top:clamp(34px,4vw,56px);margin-top:clamp(34px,4vw,56px);border-top:1px solid var(--line,#cfcbc3)}
.pf-sector.is-first{border-top:0;padding-top:0;margin-top:0}
.pf-sector[hidden]{display:none}
.pf-sector-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:24px}
.pf-sector-head h2{display:flex;align-items:center;gap:18px;margin:0;font:600 clamp(26px,2.6vw,38px)/1.05 Oswald,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.pf-sector-head h2:before{content:"";flex:0 0 34px;height:3px;background:var(--red,#e93626)}
.pf-num{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pf-count{margin:0;font:600 13px/1 "DM Sans",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#77746f);white-space:nowrap}

/* Grid 2×2 */
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,2.6vw,40px) clamp(16px,1.6vw,24px)}
.pf-film{margin:0;min-width:0}
.pf-media{appearance:none;display:block;position:relative;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:0;background:#efede8;cursor:pointer;overflow:hidden}
.pf-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:16px 18px;font:500 13px/1.3 Oswald,sans-serif;letter-spacing:.14em;color:#9c988f;text-transform:uppercase}
.pf-placeholder small{font-size:12px;letter-spacing:.1em}
.pf-play{position:absolute;left:50%;top:50%;width:52px;height:52px;transform:translate(-50%,-50%);transition:transform .25s}
.pf-play circle{fill:rgba(11,11,12,.55);stroke:#fff;stroke-width:2}
.pf-play path{fill:#fff}
.pf-media:hover .pf-play,.pf-media:focus-visible .pf-play{transform:translate(-50%,-50%) scale(1.08)}
.pf-media.is-empty{cursor:default}
.pf-cat{margin:12px 0 3px;font:600 11px/1.2 "DM Sans",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--red,#e93626)}
.pf-title{margin:0;font:600 15px/1.3 "DM Sans",Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--ink,#0b0b0c)}

/* Modal */
.pf-modal{width:min(1200px,94vw);max-width:none;max-height:none;padding:0;border:0;background:#000;color:#fff;overflow:visible}
.pf-modal::backdrop{background:rgba(0,0,0,.92)}
.pf-modal-frame{aspect-ratio:16/9;background:#000}
.pf-modal video{display:block;width:100%;height:100%;background:#000}
.pf-modal-title{margin:0;padding:12px 2px 0;font:600 13px/1.3 "DM Sans",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;background:transparent}
.pf-modal-close{position:fixed;top:max(20px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));z-index:2147483647;width:44px;height:44px;padding:0 0 3px;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(0,0,0,.72);color:#fff;font:800 34px/1 Arial,sans-serif;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.pf-modal-close:hover{background:rgba(255,255,255,.22);border-color:#fff;transform:scale(1.06)}
.pf-modal-close:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media(max-width:1100px){.pf-claim{display:none}.pf-hero{grid-template-columns:1fr}}
@media(max-width:700px){
  .pf-grid{grid-template-columns:1fr;gap:28px}
  .pf-hero h1{font-size:clamp(46px,14vw,64px)}
  .pf-sub{font-size:clamp(28px,8.4vw,40px)}
  .pf-lead{font-size:16px}
  .pf-filters{margin:26px calc(var(--pad,22px) * -1) 34px}
  .pf-filters-inner{flex-wrap:nowrap;overflow-x:auto;padding:0 var(--pad,22px) 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pf-filters-inner::-webkit-scrollbar{display:none}
  .pf-sector-head{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:18px}
  .pf-sector-head h2{font-size:clamp(22px,6.6vw,30px);gap:14px}
  .pf-sector-head h2:before{flex-basis:26px}
  .pf-count{padding-left:40px}
  .pf-modal{width:100vw}
  .pf-modal-close{top:20px;right:20px;width:44px;height:44px;font-size:34px}
}

.pf-sectors{max-width:1180px}

/* Concept/Spec-Hinweis */
.pf-note{font-size:13px;line-height:1.5;color:#8a8780;margin:14px 0 0;max-width:640px}


/* Geometry polish 2026-10-03: gemeinsame Rasterbreite (.pf-main), kompaktere Abstaende */
.portfolio-page .pf-filters{margin:32px 0 36px;width:100%;max-width:100%}
.portfolio-page .pf-filters-inner{gap:8px}
.portfolio-page .pf-filter{padding:9px 13px}
.pf-sector{padding-top:36px;margin-top:36px}
.pf-sector-head{margin-bottom:20px}
.pf-grid{gap:28px 24px}
.pf-cat{margin:10px 0 2px}
@media(min-width:1300px){.portfolio-page .pf-filters-inner{flex-wrap:nowrap;justify-content:space-between}}
.portfolio-page .pf-sectors{max-width:none;width:100%}
@media(max-width:700px){.portfolio-page .pf-filters{margin:26px calc(var(--pad,22px)*-1) 30px;width:auto;max-width:none}.pf-sector-head{margin-bottom:18px}.pf-sector{padding-top:30px;margin-top:30px}}


/* ===== IMAGE PORTFOLIO (eigener Block unter dem Video-Portfolio, Präfix ip-) ===== */
.ip-block{margin-top:clamp(80px,10vw,150px);padding-top:clamp(52px,6vw,88px);border-top:1px solid var(--line,#cfcbc3)}
.ip-eyebrow{margin:0 0 14px;font:600 12px/1.2 "DM Sans",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--red,#e93626)}
.ip-h{margin:0 0 18px;font:700 clamp(44px,5.6vw,80px)/.95 Oswald,sans-serif;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink,#0b0b0c)}
.ip-sub{margin:0;max-width:680px;font-size:clamp(16px,1.3vw,19px);line-height:1.45;color:#3b3a37}
.ip-filters{margin:clamp(28px,3.5vw,48px) 0 clamp(32px,4vw,52px);max-width:100%}
.ip-filters-inner{display:flex;flex-wrap:wrap;gap:10px}
.ip-filter{appearance:none;background:#fff;color:var(--ink,#0b0b0c);border:1px solid var(--line,#cfcbc3);border-radius:0;padding:10px 16px;font:600 12px/1.2 "DM Sans",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:border-color .2s,background .2s,color .2s}
.ip-filter:hover{border-color:var(--ink,#0b0b0c)}
.ip-filter.is-active{background:var(--red,#e93626);border-color:var(--red,#e93626);color:#fff}
.ip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,2.6vw,40px) clamp(16px,1.6vw,24px)}
.ip-card{margin:0;min-width:0}
.ip-card[hidden]{display:none}
.ip-media{appearance:none;display:block;position:relative;width:100%;aspect-ratio:4/5;padding:0;border:1px solid var(--line,#cfcbc3);border-radius:0;background:#efede8;cursor:zoom-in;overflow:hidden}
.ip-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ip-media.is-empty{cursor:default}
.ip-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:16px 18px;font:500 13px/1.3 Oswald,sans-serif;letter-spacing:.14em;color:#9c988f;text-transform:uppercase}
.ip-placeholder small{font-size:12px;letter-spacing:.1em}
.ip-cat{margin:12px 0 3px;font:600 11px/1.2 "DM Sans",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--red,#e93626)}
.ip-title{margin:0;font:600 15px/1.3 "DM Sans",Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--ink,#0b0b0c)}
.ip-lightbox{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden}
.ip-lightbox[open]{display:flex;align-items:center;justify-content:center}
.ip-lightbox::backdrop{background:rgba(0,0,0,.92)}
.ip-fig{margin:0;display:flex;flex-direction:column;align-items:center;max-width:94vw}
.ip-big{display:block;max-width:94vw;max-height:84vh;max-height:84dvh;width:auto;height:auto;object-fit:contain}
.ip-cap{margin:0;padding:12px 2px 0;font:600 13px/1.3 "DM Sans",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.ip-close{position:fixed;top:max(20px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));z-index:2147483647;width:44px;height:44px;padding:0 0 3px;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(0,0,0,.72);color:#fff;font:800 34px/1 Arial,sans-serif;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.ip-close:hover{background:rgba(255,255,255,.22);border-color:#fff;transform:scale(1.06)}
.ip-close:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:1024px){.ip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .ip-grid{grid-template-columns:1fr;gap:28px}
  .ip-filters{margin:26px calc(var(--pad,22px) * -1) 34px}
  .ip-filters-inner{flex-wrap:nowrap;overflow-x:auto;padding:0 var(--pad,22px) 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ip-filters-inner::-webkit-scrollbar{display:none}
}