/* =========================================================
   Portfolio neu: „Arbeiten nach Bereich“
   Jede Art von Arbeit bekommt ihre passende Form. Titel immer unter dem Bild.
   Radius-System wie neu.css: Karten 28px, Bilder 18px, klein 12px, rund.
   ========================================================= */

.pf-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.pf-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 100px;
  border: 1.5px solid var(--line); background: #fff; font: 600 .95rem 'Inter', sans-serif; color: var(--ink); cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, scale .16s ease-out; }
.pf-filter span { font-size: .8rem; color: var(--grey); font-weight: 600; }
.pf-filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pf-filter[aria-pressed="true"] span { color: rgba(255,255,255,.7); }
.pf-filter:active { scale: .97; }
@media (hover: hover) and (pointer: fine) { .pf-filter:hover { border-color: var(--ink); } }

.pf-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.pf-item { margin: 0; grid-column: span 4; display: flex; flex-direction: column; }
.pf-item.pf-wide { grid-column: span 6; }
.pf-item.pf-full { grid-column: 1 / -1; }
.pf-card { position: relative; display: block; width: 100%; padding: 0; border: 0; text-align: left; cursor: pointer;
  border-radius: var(--r-card); overflow: hidden; background: #fff; box-shadow: 0 24px 48px -34px rgba(10,10,11,.35);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pf-card:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -30px rgba(10,10,11,.4); }
}
.pf-card:active { scale: .99; }
.pf-card img, .pf-card video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-cap { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.pf-cap b { font-size: 1rem; color: var(--ink); line-height: 1.3; }
.pf-cap span { font-size: .86rem; color: var(--grey); }
.pf-cap .pf-hint { color: var(--blue-deep); font-weight: 600; }

/* Fahrzeug & Grafik mit Entwurf/Foto: zwei Bilder nebeneinander */
.pf-pair { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 9; }
.pf-item:not(.pf-wide) .pf-pair { aspect-ratio: 4 / 3; }
.pf-pair > div { position: relative; overflow: hidden; }
.pf-pair .pf-entwurf { background: #fff; border-right: 1px solid var(--line); }
.pf-pair .pf-entwurf img { object-fit: contain; padding: 8%; }

/* Logo-Wand: alle Logos auf einer ruhigen Karte */
.pf-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.pf-logo { background: #fff; aspect-ratio: 16 / 9; padding: 6%; border: 0; cursor: pointer; transition: background-color .2s ease; }
.pf-logo img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pf-logo:hover img { transform: scale(1.04); } }
.pf-logos-card { cursor: default; }
.pf-logos-card:hover { transform: none; }

/* Websites: Browser-Rahmen, scrollt beim Hover durch */
.pf-browser-bar { display: flex; gap: 6px; padding: 11px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.pf-browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D3D6DB; }
.pf-browser-view { aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.pf-browser-view img { height: auto; object-fit: initial; transform: translateY(0); transition: transform 6s cubic-bezier(.45,0,.55,1); }
@media (hover: hover) and (pointer: fine) {
  .pf-card:hover .pf-browser-view img { transform: translateY(calc(-100% + var(--pf-view-h, 300px))); }
}

/* Videos: Vorschau beim Hover, Play-Knopf in der Mitte */
.pf-video { aspect-ratio: 4 / 3; background: var(--ink); }
.pf-play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: 0 10px 24px -10px rgba(10,10,11,.5);
  transition: opacity .25s ease, scale .25s var(--ease-out); pointer-events: none; }
.pf-play svg { width: 20px; height: 20px; margin-left: 3px; }
.pf-card.is-playing .pf-play { opacity: 0; scale: .9; }

/* Einfaches Bild (z. B. Werbeanzeige) */
.pf-single { aspect-ratio: 4 / 3; background: var(--bg-soft); }

.pf-more { display: flex; justify-content: center; margin-top: 36px; }
.pf-more button { border: 0; cursor: pointer; font: inherit; }

@media (max-width: 1024px) {
  .pf-item, .pf-item.pf-wide { grid-column: span 6; }
}
@media (max-width: 640px) {
  .pf-grid { gap: 28px 14px; }
  .pf-item, .pf-item.pf-wide { grid-column: 1 / -1; }
  .pf-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .pf-card, .pf-browser-view img { transition: none; }
  .pf-card:hover .pf-browser-view img { transform: none; }
}
/* Grafik-Arbeiten zu viert in einer Reihe; Einzelbild bei Fahrzeug so hoch wie ein Paar */
.pf-item.pf-quarter { grid-column: span 3; }
.pf-single-wide { aspect-ratio: 16 / 9; }
@media (max-width: 1024px) { .pf-item.pf-quarter { grid-column: span 6; } }
@media (max-width: 640px) { .pf-item.pf-quarter { grid-column: 1 / -1; } }
/* Videos bleiben auf dem Tablet zu dritt in einer Reihe (keine einzelne Kachel am Ende) */
@media (max-width: 1024px) and (min-width: 641px) { .pf-item[data-cat="video"] { grid-column: span 4; } }
/* Website-Kachel genauso hoch wie die Fahrzeug-Kacheln daneben (Leiste zählt mit) */
.pf-item.pf-wide[data-cat="web"] .pf-card { aspect-ratio: 16 / 9; display: flex; flex-direction: column; }
.pf-item.pf-wide[data-cat="web"] .pf-browser-view { aspect-ratio: auto; flex: 1; min-height: 0; }