/* Portfolio – media-agent.at/portfolio */
.pf-hero{
  padding:140px 0 48px;
  position:relative;
}
.pf-hero .eyebrow{margin-bottom:12px}
.pf-hero h1{
  font-size:clamp(2.2rem,5vw,3.4rem);
  font-weight:800;letter-spacing:-.04em;line-height:1.05;
  max-width:14ch;margin:0 0 14px;
}
.pf-hero .lead{
  color:var(--muted);font-size:1.05rem;line-height:1.55;
  max-width:42ch;margin:0;
}
.pf-filters{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:28px 0 8px;
}
.pf-filter{
  appearance:none;border:1px solid var(--line);
  background:var(--elev);color:var(--muted);
  padding:8px 14px;border-radius:999px;
  font:inherit;font-size:.8rem;font-weight:600;
  cursor:pointer;transition:border-color .2s,color .2s,background .2s;
}
.pf-filter:hover{color:var(--text);border-color:var(--line2)}
.pf-filter.is-on{
  color:var(--ink);background:var(--blue);border-color:transparent;
}
.pf-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:16px;
  padding:24px 0 80px;
}
.pf-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--elev);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s;
}
.pf-card:hover{border-color:var(--line2);transform:translateY(-2px)}
.pf-media{
  position:relative;
  aspect-ratio:16/9;
  background:#111;
  overflow:hidden;
}
.pf-media iframe,
.pf-media video{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
  object-fit:cover;
}
.pf-media .pf-thumb{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.pf-play{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.28);
  border:0;cursor:pointer;color:#fff;
  transition:background .2s;
}
.pf-play:hover{background:rgba(0,0,0,.4)}
.pf-play span{
  width:56px;height:56px;border-radius:50%;
  background:var(--blue);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.pf-play svg{width:22px;height:22px;margin-left:2px}
.pf-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.pf-meta{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--dim);
}
.pf-meta .tag{
  color:var(--blue);background:rgba(137,207,240,.12);
  padding:3px 8px;border-radius:999px;letter-spacing:.03em;
}
.pf-body h2{
  font-size:1.02rem;font-weight:700;letter-spacing:-.02em;
  margin:0;line-height:1.3;
}
.pf-body p{
  margin:0;font-size:.88rem;color:var(--muted);line-height:1.45;
}
.pf-empty{
  grid-column:1/-1;
  border:1px dashed var(--line);
  border-radius:18px;
  padding:48px 24px;
  text-align:center;color:var(--muted);
}
.pf-empty strong{display:block;color:var(--text);margin-bottom:8px;font-size:1.1rem}
.pf-cta{
  margin:0 0 100px;
  border-radius:28px;overflow:hidden;
  border:1px solid var(--blue-line,rgba(137,207,240,.25));
  background:
    radial-gradient(ellipse 70% 120% at 20% 0%,rgba(137,207,240,.18),transparent 55%),
    var(--elev);
  padding:56px clamp(24px,5vw,56px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
}
.pf-cta h2{
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:800;letter-spacing:-.035em;line-height:1.1;
  max-width:14ch;margin:0;
}
.pf-cta p{color:var(--muted);margin:10px 0 0;max-width:32ch}
.pf-cta-actions{display:flex;flex-wrap:wrap;gap:12px}

@media(min-width:1440px){
  .pf-grid{gap:20px}
  .pf-hero h1{font-size:clamp(2.4rem,3.5vw,3.8rem)}
}
@media(min-width:1680px){
  .pf-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
}

@media(max-width:640px){
  .pf-hero{padding:120px 0 32px}
  .pf-grid{gap:12px;padding-bottom:56px}
}
.visually-hidden{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}