ul.teasertileframe {
  margin: 0;
  padding: 0;
  display: block;
}

ul.teasertileframe > li {
  list-style: none;
  margin: 0;
  position: relative;
  padding: var(--teasertileframe-padding);
  background: var(--teasertileframe-background);
  border-radius: var(--teasertileframe-roundedcorners);
  box-shadow: var(--teasertileframe-shadow);
  box-sizing: border-box;
}

ul.teasertileframe > li > .teasertileframe-picture > picture {
  width: 100%;
}

ul.teasertileframe > li > .teasertileframe-picture > picture > img {
  display: block;
  width: 100%;
  border-radius: var(--teasertileframe-roundedcorners);
  box-shadow: var(--teasertileframe-shadow);
  transition: filter 0.2s;
}

/* Direkte <img> ohne <picture> (dynamische Kacheln aus DB) */
ul.teasertileframe > li > .teasertileframe-picture > img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--teasertileframe-roundedcorners);
  transition: filter 0.2s;
}

ul.teasertileframe-hover > li > .teasertileframe-picture:hover > picture > img {
  filter: brightness(115%);
}

ul.teasertileframe > li > .teasertileframe-picture:focus-visible {
  outline: none;
}

ul.teasertileframe
  > li
  > .teasertileframe-picture:focus-visible
  > picture
  > img {
  filter: brightness(50%) contrast(75%);
}

ul.teasertileframe
  > li
  > .teasertileframe-text
  > .teasertileframe-text-main
  > p {
  font-weight: var(--teasertileframe-summary-weight);
  font-size: var(--teasertileframe-summary-size);
  text-transform: var(--teasertileframe-summary-texttransform);
  text-align: var(--teasertileframe-summary-align);
  color: var(--teasertileframe-summary-color);
}

ul.teasertileframe > li > .teasertileframe-text > .teasertileframe-text-main {
  margin-bottom: var(--teasertileframe-margin);
  margin-top: var(--teasertileframe-margin);
}

ul.teasertileframe
  > li
  > .teasertileframe-text
  > .teasertileframe-text-main
  > h3 {
  margin-top: 0;
  font-weight: var(--teasertileframe-caption-weight);
  font-size: var(--teasertileframe-caption-size);
  text-transform: var(--teasertileframe-caption-texttransform);
  text-align: var(--teasertileframe-caption-align);
  color: var(--teasertileframe-caption-color);
}

ul.teasertileframe
  > li
  > .teasertileframe-text
  > .teasertileframe-text-main
  > svg {
  width: var(--teasertileframe-icon-size);
  height: var(--teasertileframe-icon-size);
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--teasertileframe-margin);
  color: var(--teasertileframe-icon-color);
}

ul.teasertileframe > li > .teasertileframe-text > .teasertileframe-text-link {
  text-align: var(--teasertileframe-link-align);
}

ul.teasertileframe
  > li
  > .teasertileframe-text
  > .teasertileframe-text-link
  > a {
  border-radius: var(--teasertileframe-link-roundedcorners);
  color: var(--teasertileframe-link-color);
  background-color: var(--teasertileframe-link-background);
  border: var(--teasertileframe-link-border);
  font-size: var(--teasertileframe-link-size);
  font-weight: var(--teasertileframe-link-weight);
  text-transform: var(--teasertileframe-link-texttransform);
  display: inline-block;
  padding: 10px 14px;
  text-decoration: none;
  transition: opacity 0.2s;
}

ul.teasertileframe-hover
  > li
  > .teasertileframe-text
  > .teasertileframe-text-link
  > a:hover {
  opacity: 0.8;
}

ul.teasertileframe
  > li
  > .teasertileframe-text
  > .teasertileframe-text-link
  > a:focus-visible {
  opacity: 0.5;
}

@media (min-width: 1024px) {
  ul.teasertileframe {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--teasertileframe-margin);
  }

  ul.teasertileframe > li {
    display: flex;
    flex-flow: column;
    list-style: none;
    width: var(--teasertileframe-columnwidth);
  }

  ul.teasertileframe > li > .teasertileframe-text {
    flex-grow: 1;
  }

  ul.teasertileframe > li > .teasertileframe-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

@media (max-width: 1023px) {
  ul.teasertileframe > li {
    margin-bottom: var(--teasertileframe-margin);
  }
  ul.teasertileframe > li:last-child {
    margin-bottom: 0;
  }
}