/* VARIANTE PORTFOLIO – mobile Aufklapp-Karten (wie in der PPT: Text auf Bild)
   Desktop: identisch zur Hauptversion (Bild/Text im Wechsel).
   Handy (≤ 720 px): Karte zeigt zuerst Logo + Text auf dem Bild; erreicht sie die
   Bildschirmmitte, klappt sie auf: Bild frei, weicher Übergang in die Textfläche, "+" sichtbar. */

.pf-list{display:flex;flex-direction:column;gap:var(--gap);margin-top:clamp(24px,3vw,36px)}

/* ---------- Desktop / Tablet ---------- */
.pf-item{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.pf-media{margin:0;border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:1.53/1}
.pf-media picture{display:block;width:100%;height:100%}
.pf-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.pf-item:hover .pf-media img{transform:scale(1.03)}
.pf-body{position:relative;background:var(--sage);color:var(--white);border-radius:var(--radius-sm);
  padding:clamp(22px,3vw,36px);padding-right:clamp(60px,6vw,80px);display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2.4vw,30px)}
.pf-body p{font-size:clamp(14px,1.15vw,16px);line-height:1.6;max-width:46ch}
.pf-item .tag{z-index:3}
/* Wechsel Bild links / rechts */
.pf-item:nth-child(even) .pf-media{order:2}
.pf-item:nth-child(even) .tag{right:calc(50% + var(--gap) / 2)}

/* ---------- Handy: Aufklapp-Karte wie in der PPT ----------
   eingeklappt: flache Karte, unterer Bildausschnitt, Logo + Text auf dem Bild
   aufgeklappt: hohe Karte, ganzes Bild am Stück, Verlauf ins CI-Grün unter dem Text, "+" sichtbar */
@media (max-width:720px){
  .pf-list{gap:12px}
  .pf-item{display:block;overflow:hidden;border-radius:var(--radius-sm);background:var(--green);
    height:var(--h-closed,260px);transition:height .8s cubic-bezier(.2,.7,.2,1);
    cursor:pointer;-webkit-tap-highlight-color:transparent}
  .pf-item.is-open{height:var(--h-open,460px)}
  .pf-item:nth-child(even) .tag{right:0}
  .pf-item:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

  .pf-media{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
  .pf-media picture,.pf-media img{display:block;width:100%;height:100%}
  .pf-media img{object-fit:cover;object-position:50% 85%;transition:object-position .8s cubic-bezier(.2,.7,.2,1),transform .8s}
  .pf-item:hover .pf-media img{transform:none}
  .pf-item.is-open .pf-media img{object-position:50% 50%}

  /* Verläufe: eingeklappt stärker abgedunkelt, aufgeklappt nur unten (Bild bleibt oben frei) */
  .pf-media::before,.pf-media::after{content:"";position:absolute;inset:0;pointer-events:none;transition:opacity .8s}
  .pf-media::before{background:linear-gradient(to top,rgba(54,75,62,.96) 0%,rgba(54,75,62,.78) 45%,rgba(54,75,62,.35) 100%);opacity:1}
  .pf-media::after{background:linear-gradient(to top,rgba(54,75,62,.96) 0%,rgba(54,75,62,.82) 28%,rgba(54,75,62,.35) 52%,rgba(54,75,62,0) 72%);opacity:0}
  .pf-item.is-open .pf-media::before{opacity:0}
  .pf-item.is-open .pf-media::after{opacity:1}

  .pf-body{position:absolute;left:0;right:0;bottom:0;z-index:2;background:transparent;border-radius:0;
    padding:20px 64px 22px 20px;gap:14px;justify-content:flex-end}
  .pf-body p{font-size:15px;line-height:1.55}
  .pf-body .tile-logo{height:calc(var(--logo-h,56px) * .8)}

  .pf-plus{z-index:3;right:16px;bottom:20px;background:var(--sage);opacity:0;visibility:hidden;transform:scale(.6);
    transition:opacity .4s .4s,transform .4s .4s,visibility 0s .8s}
  .pf-item.is-open .pf-plus{opacity:1;visibility:visible;transform:none;transition:opacity .4s .4s,transform .4s .4s,visibility 0s}
}

@media (max-width:720px) and (prefers-reduced-motion:reduce){
  .pf-item,.pf-media img,.pf-media::before,.pf-media::after,.pf-plus{transition:none}
}

/* Firmenlogo = Link zur Firmen-Website, NUR auf dem Handy. Am PC bleibt der Link wie gehabt auf dem "+". */
.pf-logo-link{display:inline-block;align-self:flex-start;border-radius:4px;pointer-events:none;cursor:default}
.pf-logo-link:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
@media (max-width:720px){
  .pf-logo-link{position:relative;z-index:3;padding:6px 0;margin:-6px 0;pointer-events:auto;cursor:pointer}   /* größere Tippfläche */
}


/* --- Anpassungen 2026-10-05: Text in den Portfolio-Kästen +1–2 px (Auswahl „+2 px“: 16→17 / 15→16), Logos passend (+6 %) --- */
.pf-body p{font-size:clamp(15px,1.25vw,17px)}
.pf-body .tile-logo{height:calc(var(--logo-h,56px) * 1.06)}
@media (max-width:720px){
  .pf-body p{font-size:16px}
  .pf-body .tile-logo{height:calc(var(--logo-h,56px) * .85)}
}