.bt-portfolio__grid{
  display:grid;
  grid-template-columns: repeat(var(--bt-cols), minmax(0, 1fr));
  gap: var(--bt-gap);
  align-items:start;
}

.bt-tile{
  border-radius: var(--bt-radius);
  overflow: hidden;
  min-height: var(--bt-item-height, var(--bt-minh));
  height: var(--bt-item-height, auto);
  width: var(--bt-item-width, 100%);
  max-width: 100%;
  grid-column: span var(--bt-item-span, 1);
  outline: none;
  position: relative;
  justify-self: start;
}

.bt-tile:focus{
  box-shadow: 0 0 0 3px rgba(0,0,0,0.12);
}

.bt-tile__link{
  display:block;
  height:100%;
  color:inherit;
  text-decoration:none;
}

.bt-tile__media{
  height:100%;
  min-height: var(--bt-item-height, var(--bt-minh));
  position:relative;
  border-radius: var(--bt-radius);
  overflow:hidden;
  background-repeat:no-repeat;
  background-position: 50% 50%;
  background-color: #f4f4f4;
  transform: translateZ(0);
}

.bt-tile.is-image .bt-tile__media{
  background-image: none !important;
}

.bt-tile.is-image .bt-tile__media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image: var(--bt-image-url, none);
  background-size: var(--bt-fit, cover);
  background-repeat:no-repeat;
  background-position: inherit;
  transform: scale(1);
  transition: transform 260ms ease, filter 260ms ease;
}


.bt-tile:nth-child(6n + 1) .bt-tile__media::before{ background-color:#c9c9c9; }
.bt-tile:nth-child(6n + 2) .bt-tile__media::before{ background-color:#bfc2c3; }
.bt-tile:nth-child(6n + 3) .bt-tile__media::before{ background-color:#d1ccc6; }
.bt-tile:nth-child(6n + 4) .bt-tile__media::before{ background-color:#c6c6c6; }
.bt-tile:nth-child(6n + 5) .bt-tile__media::before{ background-color:#d6d6d6; }
.bt-tile:nth-child(6n) .bt-tile__media::before{ background-color:#b9b9b9; }

.bt-tile__video{
  width:100%;
  height:100%;
  object-fit: var(--bt-fit, cover);
  display:block;
  transform: scale(1);
  transition: transform 260ms ease, filter 260ms ease;
}

.bt-tile__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background: rgba(0,0,0,var(--bt-item-overlay, var(--bt-overlay)));
  background: color-mix(in srgb, var(--bt-item-overlay-color, var(--bt-overlay-color)) calc(var(--bt-item-overlay, var(--bt-overlay)) * 100%), transparent);
  opacity: 1;
  pointer-events:none;
}

.bt-tile__title{
  color: var(--bt-text);
  font-family: var(--bt-font);
  font-size: var(--bt-font-size);
  font-weight: var(--bt-font-weight);
  line-height: 1.28;
  transition: color 220ms ease;
  text-wrap: balance;
}

.bt-portfolio.caption-overlay .bt-tile__title{
  position:absolute;
  z-index:2;
  left: 18px;
  right: 18px;
  bottom: 50%;
  transform: translateY(50%);
  text-align: var(--bt-title-align, center);
  text-shadow: 0 1px 18px rgba(0,0,0,.45);
}

.bt-tile:hover .bt-tile__title,
.bt-tile:focus-within .bt-tile__title,
.bt-tile:focus .bt-tile__title{
  color: var(--bt-text-hover);
}

.bt-tile.has-item-hover-zoom.is-image:hover .bt-tile__media::before,
.bt-tile.has-item-hover-zoom.is-image:focus-within .bt-tile__media::before,
.bt-tile.has-item-hover-zoom.is-image:focus .bt-tile__media::before{
  transform: scale(var(--bt-item-zoom, var(--bt-zoom)));
}

.bt-tile.has-item-hover-zoom.is-video:hover .bt-tile__video,
.bt-tile.has-item-hover-zoom.is-video:focus-within .bt-tile__video,
.bt-tile.has-item-hover-zoom.is-video:focus .bt-tile__video{
  transform: scale(var(--bt-item-zoom, var(--bt-zoom)));
}

.bt-tile.has-item-hover-grayscale.is-image:hover .bt-tile__media::before,
.bt-tile.has-item-hover-grayscale.is-image:focus-within .bt-tile__media::before,
.bt-tile.has-item-hover-grayscale.is-image:focus .bt-tile__media::before,
.bt-tile.has-item-hover-grayscale.is-video:hover .bt-tile__video,
.bt-tile.has-item-hover-grayscale.is-video:focus-within .bt-tile__video,
.bt-tile.has-item-hover-grayscale.is-video:focus .bt-tile__video{
  filter: grayscale(100%);
}

/* Titel im Bild: Standardmodus mit sichtbarer Bildschrift. */
.bt-portfolio.caption-overlay .bt-tile{
  justify-self:stretch;
}

.bt-portfolio.caption-overlay .bt-tile__link{
  display:block;
  height:100%;
}

/* Optionaler Kompatibilitätsmodus: Titel unter dem Bild bleibt erhalten. */
.bt-portfolio.caption-below .bt-portfolio__grid{
  align-items:start;
}

.bt-portfolio.caption-below .bt-tile{
  border-radius:0;
  overflow:visible;
  min-height:0;
  height:auto;
  justify-self:stretch;
}

.bt-portfolio.caption-below .bt-tile__link{
  display:flex;
  flex-direction:column;
  height:auto;
}

.bt-portfolio.caption-below .bt-tile__media{
  border-radius:var(--bt-radius);
  height:var(--bt-item-height, auto);
  min-height:0;
  aspect-ratio:var(--bt-aspect, 3 / 2);
  background-color:#f3f3f3;
}

.bt-portfolio.caption-below .bt-tile__overlay{
  display:none;
}

.bt-portfolio.caption-below .bt-tile__title{
  position:static;
  z-index:auto;
  margin-top:14px;
  padding:0 4px;
  text-align:var(--bt-title-align, center);
}

.bt-portfolio.caption-below .bt-tile:focus{
  box-shadow:none;
}

.bt-portfolio.caption-below .bt-tile:focus .bt-tile__media,
.bt-portfolio.caption-below .bt-tile:focus-within .bt-tile__media{
  box-shadow:0 0 0 3px rgba(0,0,0,0.12);
}

@media (max-width: 900px){
  .bt-portfolio__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bt-tile{ grid-column: span 1; }
}
@media (max-width: 560px){
  .bt-portfolio__grid{ grid-template-columns: 1fr; }
  .bt-tile{ width: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .bt-tile__video,
  .bt-tile__media,
  .bt-tile__media::before,
  .bt-tile__title{
    transition: none !important;
  }
}

/* Mobiloptimierung: Kachelgrößen bleiben am Desktop exakt, werden auf kleinen Displays aber sauber eingepasst. */
@media (max-width: 900px){
  .bt-portfolio__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: min(var(--bt-gap), 26px);
  }

  .bt-tile{
    grid-column: span 1 !important;
    width:100%;
    max-width:100%;
    justify-self:stretch;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .bt-portfolio.caption-overlay .bt-tile__title{
    left:16px;
    right:16px;
    bottom:50%;
    transform: translateY(50%);
    font-size:clamp(15px, 2.3vw, var(--bt-font-size));
  }
}

@media (max-width: 640px){
  .bt-portfolio__grid{
    grid-template-columns: 1fr;
    gap: min(var(--bt-gap), 22px);
  }

  .bt-tile{
    grid-column: span 1 !important;
    width:100% !important;
    max-width:100%;
    min-height:clamp(190px, 62vw, var(--bt-item-height, var(--bt-minh)));
    height:auto;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .bt-tile__media{
    min-height:inherit;
  }

  .bt-portfolio.caption-overlay .bt-tile__title{
    left:14px;
    right:14px;
    bottom:50%;
    transform: translateY(50%);
    font-size:clamp(15px, 4.2vw, var(--bt-font-size));
    line-height:1.22;
  }

  .bt-portfolio.caption-below .bt-tile__title{
    font-size:clamp(15px, 4.2vw, var(--bt-font-size));
    margin-top:10px;
  }
}

@media (hover: none){
  .bt-tile.has-item-hover-zoom.is-image:hover .bt-tile__media::before,
  .bt-tile.has-item-hover-zoom.is-video:hover .bt-tile__video{
    transform:none;
  }
}