/* ============================================================
   Karriere-Sektion „Einblick ins Team“ (Sommerfest-Aftermovie + Foto-Mosaik)
   Mix aus Variante B (Split) + C (Mosaik) von /demo-karriere-video-varianten.
   Markup: partials/team-einblick.html (serverseitig per Platzhalter „ip:partial team-einblick“).
   Auf /finanzberater (Webflow) und /setter (eigenes CSS); beide kennen die IP-Tokens nicht
   → Werte aus DESIGN.md hier im Scope. Seiten-Anpassung über Variablen am section.ip-te:
   --ip-te-py (Abstand oben/unten, Standard 8rem) · --ip-te-h2 (Größe der Überschrift).
   ============================================================ */
.ip-te{
  --ip-green:#77BC26;--ip-green-dark:#6AAD1F;--ip-green-darker:#5A9418;
  --ip-success-bg:#F0F9E8;--ip-text-medium:#333333;
  --radius-lg:12px;--radius-xl:20px;--radius-pill:9999px;
  --shadow-sm:0 2px 8px rgba(0,0,0,0.06);--shadow-md:0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.10);--shadow-green:0 8px 24px rgba(119,188,38,0.22);
  --ease:cubic-bezier(0.4,0,0.2,1);
  --ip-charcoal:#1A1A1A;
  background:var(--ip-success-bg);
}
section.ip-te{padding:0}
.ip-te-box{display:flex;flex-direction:column;gap:56px;padding:var(--ip-te-py,8rem) 0}
.ip-te-split{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}

/* Text-Spalte */
.ip-te-pill{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 14px;border-radius:var(--radius-pill);background:#fff;color:var(--ip-green-darker);font-size:13px;font-weight:600;box-shadow:var(--shadow-sm);margin-bottom:24px}
.ip-te-pill svg{display:block;width:15px;height:15px}
.ip-te-h2{margin:0;max-width:26rem;font-family:'CooperLtBT-Regular','Cooper BT','CooperBT',Georgia,serif;font-weight:400;font-size:var(--ip-te-h2,clamp(36px,4.6vw,52px));line-height:1.05;letter-spacing:-0.03em;color:var(--ip-charcoal);text-wrap:balance}
.ip-te-lead{font-size:17px;line-height:1.65;color:var(--ip-text-medium);margin:24px 0 0;max-width:480px;text-wrap:balance}
.ip-te-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin:24px 0 32px;padding:0}
.ip-te-list li{display:flex;align-items:center;gap:12px;font-size:16px;line-height:1.4;font-weight:500;color:var(--ip-text-medium)}
.ip-te-ic{flex:0 0 32px;width:32px;height:32px;border-radius:var(--radius-pill);background:#fff;color:var(--ip-green-darker);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.ip-te-ic svg{display:block;width:16px;height:16px}
.ip-te-ghost{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:16px;font-weight:600;color:var(--ip-green-darker);text-decoration:none;transition:gap .2s var(--ease)}
.ip-te-ghost[hidden]{display:none}
.ip-te-ghost svg{display:block;width:18px;height:18px}
.ip-te-ghost:hover{gap:12px}

/* Video: Poster + grüner Play-Button, das <video> lädt erst beim Klick */
.ip-te-video{position:relative;aspect-ratio:16/9;border-radius:var(--radius-xl);overflow:hidden;background:var(--ip-success-bg);box-shadow:var(--shadow-lg)}
.ip-te-video img,.ip-te-video video{position:absolute;inset:0;width:100%;height:100%;display:block}
.ip-te-video img{object-fit:cover}
.ip-te-video video{object-fit:contain;background:#000}
.ip-te-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.28));pointer-events:none}
.ip-te-video.is-playing::after{display:none}
.ip-te-play{position:absolute;left:50%;top:50%;z-index:2;width:84px;height:84px;padding:0;margin:0;border:0;border-radius:var(--radius-pill);background:var(--ip-green);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-green);transform:translate(-50%,-50%);transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}
.ip-te-play svg{display:block;width:32px;height:32px;margin-left:4px}
.ip-te-play:hover{background:var(--ip-green-dark);transform:translate(-50%,calc(-50% - 2px)) scale(1.04);box-shadow:0 12px 30px rgba(119,188,38,.38)}
.ip-te-play:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ip-te-meta{position:absolute;left:24px;bottom:20px;z-index:2;display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:14px;font-weight:500;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.ip-te-meta svg{display:block;width:16px;height:16px}

/* Foto-Mosaik: großes Gruppenfoto + 2×2 */
.ip-te-mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,auto);gap:16px;margin:0}
.ip-te-mosaic figure{margin:0;position:relative;border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:3/2;box-shadow:var(--shadow-md)}
.ip-te-mosaic figure.is-big{grid-row:span 2;aspect-ratio:auto}
.ip-te-mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.ip-te-mosaic figure:hover img{transform:scale(1.03)}

@media(max-width:991px){
  .ip-te-box{padding:min(var(--ip-te-py,8rem),96px) 0;gap:40px}
  .ip-te-split{grid-template-columns:1fr;gap:40px}
  .ip-te-mosaic{grid-template-columns:1fr 1fr}
  .ip-te-mosaic figure.is-big{grid-column:1/-1;grid-row:auto;aspect-ratio:3/2}
}
@media(max-width:640px){
  .ip-te-box{padding:56px 0;gap:32px}
  .ip-te-video,.ip-te-mosaic figure{border-radius:var(--radius-lg)}
  .ip-te-play{width:64px;height:64px}
  .ip-te-play svg{width:26px;height:26px}
  .ip-te-meta{left:16px;bottom:12px;font-size:13px}
  .ip-te-mosaic{gap:10px}
}
@media (prefers-reduced-motion:reduce){.ip-te *{transition:none!important}}