/* PIXELLA Portfolio — Tech-Industrial. Baut auf den Tokens in site.css auf. */

.pf-hero{border-bottom:1px solid var(--line);padding-block:clamp(56px,7vw,110px) clamp(36px,5vw,64px)}
.pf-hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(28px,4vw,48px);padding-top:24px;border-top:1px solid var(--line)}
.pf-hero-foot p{color:var(--muted);max-width:520px;font-size:17px}
.pf-hero-foot .mono{color:var(--ice);letter-spacing:.1em;white-space:nowrap}

/* Kundenprojekte */
.pf-refs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.5vw,32px)}
.pf-ref{padding:clamp(16px,1.8vw,24px);display:flex;flex-direction:column;gap:14px}
.pf-ref-cover{display:block;border:1px solid var(--line);overflow:hidden}
.pf-bar{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--panel-2);border-bottom:1px solid var(--line);color:var(--muted);font-size:10.5px;letter-spacing:.05em}
.pf-bar span:first-child{font-size:6px;letter-spacing:3px;align-self:center}
.pf-ref-cover img{aspect-ratio:16/10;object-fit:cover;width:100%;transition:transform .7s var(--ease)}
.pf-ref-cover:hover img{transform:scale(1.03)}
.pf-ref-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.pf-ref-meta h3{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;font-weight:800;margin-top:8px}
.pf-ref-meta .mono{color:var(--ice-dim)}
.pf-ref-desc{color:var(--muted);font-size:15px}
.pf-ref .svc-tags{margin-top:auto;padding-top:6px}

/* Filter */
.pf-studies{border-top:1px solid var(--line)}
.portfolio-filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,40px)}
.portfolio-filters>button{font-family:var(--mono);font-size:12px;letter-spacing:.05em;border:1px solid var(--line-2);color:var(--muted);padding:9px 15px;border-radius:2px;min-height:40px;transition:border-color .2s,color .2s,background .2s}
.portfolio-filters>button:hover{border-color:var(--ice);color:var(--ice)}
.portfolio-filters>button[aria-pressed=true]{background:var(--ice);color:var(--ice-ink);border-color:var(--ice);font-weight:500}
.filter-count{color:var(--muted-2);margin-left:auto}

/* Studienraster */
.demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.demo-card{padding:14px 14px 20px;display:flex;flex-direction:column}
.demo-cover{display:block;position:relative;overflow:hidden;border:1px solid var(--line);background:var(--panel-2)}
.demo-cover img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .7s var(--ease)}
.demo-cover:hover img{transform:scale(1.04)}
.demo-badge{position:absolute;top:10px;left:10px;background:#0e1319cc;color:var(--steel-2);padding:5px 9px;letter-spacing:.1em;font-size:10px}
.demo-cover-art{aspect-ratio:3/2;display:grid;place-items:center}
.demo-type-art{font-weight:800;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.05em;line-height:1.02;color:var(--ice);text-align:center}
.demo-meta{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.demo-meta .eyebrow{font-size:10.5px}
.demo-meta .mono{color:var(--muted-2)}
.demo-card h3{font-size:18.5px;letter-spacing:-.02em;font-weight:800;margin-top:8px}
.demo-description{color:var(--muted);font-size:14px;margin-top:7px}
.preview-trigger{margin-top:14px;align-self:start;color:var(--ice);font-size:14px}

/* Vorschau-Dialog */
.preview-dialog{padding:0;border:1px solid var(--line-2);background:var(--bg);color:var(--text);width:calc(100vw - 48px);max-width:1500px;height:calc(100dvh - 48px);max-height:100dvh;overflow:hidden}
.preview-dialog::backdrop{background:#05080bd9;backdrop-filter:blur(6px)}
.preview-dialog[open]{display:flex;flex-direction:column}
.preview-toolbar{display:flex;align-items:center;gap:24px;padding:14px 20px;flex-shrink:0;border-bottom:1px solid var(--line)}
.preview-toolbar>div{margin-right:auto}
.preview-toolbar h2{font-size:19px;letter-spacing:-.02em;font-weight:800;margin-top:4px}
.preview-external{color:var(--ice)}
.preview-close{font-size:28px;line-height:1;border:1px solid var(--line-2);width:42px;height:42px;flex-shrink:0;border-radius:2px}
.preview-close:hover{background:var(--ice);border-color:var(--ice);color:var(--ice-ink)}
.preview-frame-host{flex:1;min-height:0;background:#fff}
.preview-frame-host iframe{width:100%;height:100%;border:0;display:block}
.preview-help{color:var(--muted-2);padding:11px 20px;flex-shrink:0}
.preview-open{overflow:hidden}

@media(max-width:1000px){
  .demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-refs{grid-template-columns:1fr}
  .filter-count{width:100%;margin-left:0}
}
@media(max-width:620px){
  .demo-grid{grid-template-columns:1fr}
  .pf-hero-foot{flex-direction:column;align-items:flex-start}
  .preview-dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px)}
  .preview-toolbar{flex-wrap:wrap;gap:12px}
  .preview-toolbar>div{flex:1 1 auto}
  .preview-close{order:2}
  .preview-external{order:3;width:100%}
}