/* Gemeinsam verwendete runde Bildzugänge mit Button. */

.offers {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:24px;
  margin-top:32px
}
.offer {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-decoration:none
}
.offer img {
  width:128px;
  height:128px;
  border-radius:50%;
  object-fit:cover
}
.offer span {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:5px 16px;
  border:1px solid var(--farbe-link-unterstrich);
  border-radius:var(--radius-button);
  font-size:18px;
  font-weight:300
}
.offer:hover,.offer:focus-visible {
  color:var(--farbe-text)
}
.offer:hover span,.offer:focus-visible span {
  border-color:var(--farbe-akzent)
}
@media(max-width:1023px) {
  .offers {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px 20px;
    max-width:580px;
    margin-inline:auto
  }
  .offer img {
    width:100px;
    height:100px
  }
  .offer span {
    font-size:16px;
    padding-inline:12px
  }}
@media(max-width:767px) {
    .offers {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px 10px;
    margin-top:28px
  }
  .offer {
    min-width:0
  }
  .offer img {
    width:min(100%,100px);
    height:auto;
    aspect-ratio:1
  }
  .offer span {
    font-size:15px;
    padding:5px 9px
  }}
/* Gemeinsame Einflieg-Animation für bis zu neun Angebotsgruppen. */
@media(prefers-reduced-motion:no-preference) {
  .angebote-animation > * { --offer-order:0 }
  .angebote-animation > :nth-child(2) { --offer-order:1 }
  .angebote-animation > :nth-child(3) { --offer-order:2 }
  .angebote-animation > :nth-child(4) { --offer-order:3 }
  .angebote-animation > :nth-child(5) { --offer-order:4 }
  .angebote-animation > :nth-child(6) { --offer-order:5 }
  .angebote-animation > :nth-child(7) { --offer-order:6 }
  .angebote-animation > :nth-child(8) { --offer-order:7 }
  .angebote-animation > :nth-child(9) { --offer-order:8 }
  .angebote-animation > * {
    animation-name:offer-slide-in;
    animation-duration:calc(480ms + var(--offer-order) * 70ms);
    animation-delay:calc(var(--offer-order) * 110ms);
    animation-timing-function:cubic-bezier(.2,.75,.25,1);
    animation-fill-mode:backwards
  }
  .angebote-animation > :focus-visible,
  .angebote-animation > :focus-within {
    animation:none
  }
}
@keyframes offer-slide-in {
  from {
    opacity:0;
    transform:translateY(38px)
  }
  to {
    opacity:1;
    transform:none
  }
}