/*----------------------*/
/* Referenzen */
/*----------------------*/

/* Grid: column count is set per-site in the admin (Referenzen > Layout) via
   the --cb-referenzen-cols custom property on .cb-referenzen-grid. Narrower
   viewports step the column count down with fixed overrides (repeat()'s
   count argument does not accept min()/a custom property expression), so
   the cards never get too cramped to read regardless of the admin setting. */
.cb-referenzen-grid{
    --cb-referenzen-cols: 3;
    display: grid;
    grid-template-columns: repeat(var(--cb-referenzen-cols), 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
@media only screen and (max-width: 990px){
    .cb-referenzen-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media only screen and (max-width: 600px){
    .cb-referenzen-grid{
        grid-template-columns: 1fr;
    }
}

.our-team{
    text-align: center;
    transition: all 0.5s ease 0s;
		margin-bottom:1em;
}
.our-team:hover{
    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.our-team .pic{
    overflow: hidden;
    position: relative;
}
.our-team .pic:before,
.our-team .pic:after{
    content: "";
    width: 200%;
    height: 80%;
    background: rgba(93,39,0,0.4);
    position: absolute;
    top: -100%;
    left: -0.6%;
    transform: rotate(45deg);
    transition: all 0.5s ease 0s;
}
.our-team .pic:after{
    background: rgba(93,39,0,0.4);
    top: auto;
    left: auto;
    bottom: -100%;
    right: -3%;
}
.our-team:hover .pic:before{ top: 0; }
.our-team:hover .pic:after{ bottom: 0; }
.our-team .pic img{
    width: 100%;
    height: auto;
}
.our-team .social{
    width: 100%;
    padding: 0.4em;
    margin: 0;
    color: white;
    position: absolute;
    bottom: 5%;
    left: 0;
    opacity: 0;
    z-index: 2;
    transition: all 0.5s ease 0.3s;
}
.our-team:hover .social{ opacity: 1; }
.our-team .social li{ display: inline-block; }
.our-team .social li a{
    /* flex instead of block + line-height: the icon is an inline <svg> now,
       not a webfont glyph, so it has to be centred as a box. font-size stays
       because the SVG is sized in em and follows it. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 20px;
    color: #fff;
    margin-right: 10px;
    position: relative;
    transition: all 0.3s ease 0s;
}
/* Icons inherit their colour through fill:currentColor, so the hover states
   above keep working untouched. height in em, width from the viewBox ratio. */
.cb-referenzen-icon{
    display: block;
    height: 1em;
    width: auto;
    fill: currentColor;
}
.our-team .social li a:after{
    content: "";
    width: 100%;
    height: 100%;
    background: #e45c00ff;
    border-radius: 0 20px 20px 20px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all 0.3s ease 0s;
}
.our-team .social li a:hover:after{ transform: rotate(180deg); }
.our-team .team-content{ padding: 20px; }
.our-team .title{
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #e45c00ff;
    text-transform: uppercase;
    margin-bottom: 7px;

}



.our-team .post{
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: #707070;
    text-transform: capitalize;
}
@media only screen and (max-width: 990px){
    .our-team{ margin-bottom: 30px; }
}


/*----------------------*/
/* CBTT-Turbo lazy-image wrapper */
/*----------------------*/
/* On CBTT-Turbo the photo is rendered inside a .cbtt-lazy-img box that holds
   the space and shows a blurred placeholder until the file has decoded. Two
   things need adjusting for it:

   1. The wrapper defaults to width:max-content, which would stop the photo at
      its natural width instead of filling the card. An explicit width wins.
   2. The wrapper is position:relative, which moves the photo from the in-flow
      paint step into the positioned one — where .pic::before, being earlier in
      DOM order, would suddenly paint BEHIND it and the top half of the hover
      overlay would disappear. Giving the wrapper its own stacking context at
      z-index 0 and lifting the two overlays above it restores the old order
      (.social already sits at 2, above both). */
.our-team .pic .cbtt-lazy-img{
    width: 100%;
    z-index: 0;
}
.our-team .pic .cbtt-lazy-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.our-team .pic:before,
.our-team .pic:after{
    z-index: 1;
}

/*----------------------*/
/* Touchscreen Adjustments */
/*----------------------*/
@media (hover: none) and (pointer: coarse) {
    .our-team .social {
      opacity: 1 !important; /* Force social icons to be always visible */
      transform: translateY(0); /* Remove any vertical offset if present */
      transition: none; /* Disable animation for instant appearance */
      bottom: 10px; /* Adjust position for better visibility */
    }
  
    .our-team .pic:before,
    .our-team .pic:after {
      display: none; /* Remove hover-dependent overlays */
    }
  
    .our-team:hover {
      box-shadow: none; /* Remove hover shadow effect */
    }
  
    /* Make touch targets larger for better usability */
    .our-team .social li a {
      width: 48px;
      height: 48px;
      line-height: 48px;
      margin-right: 12px;
    }
  
    /* Adjust social icon container positioning */
    .our-team .pic {
      padding-bottom: 15px; /* Create space for visible social icons */
    }
  }