.bild {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--platzhalter, var(--bg-2));
  box-shadow: var(--schatten);
}

.bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--kurve);
}

.bild--klein { border-radius: var(--radius-klein); }

.bild--16-9 { aspect-ratio: 16 / 9; }
.bild--3-2 { aspect-ratio: 3 / 2; }
.bild--4-5 { aspect-ratio: 4 / 5; }
.bild--1-1 { aspect-ratio: 1; }

.bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg,
              rgba(255, 77, 141, 0.1), rgba(124, 77, 255, 0.08) 60%,
              rgba(255, 184, 107, 0.08));
  pointer-events: none;
  transition: opacity 0.6s var(--kurve);
}

.bild--rein::after {
  display: none;
}

a:hover > .bild img,
a:focus-visible > .bild img,
.glas--greifbar:hover .bild img {
  transform: scale(1.04);
}

a:hover > .bild::after,
a:focus-visible > .bild::after {
  opacity: 0;
}

.kopfbild {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: var(--schatten);
  background: var(--platzhalter, var(--bg-2));
  aspect-ratio: 16 / 9;
}

.kopfbild img {
  position: absolute;
  inset: -12% 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  transform: translate3d(0, var(--versatz, 0px), 0);
  will-change: transform;
}

@media (max-width: 700px) {
  .kopfbild { border-radius: var(--radius); aspect-ratio: 4 / 3; }
}

.galerie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: start;
}

.galerie > :nth-child(1) { margin-top: var(--sp-8); }
.galerie > :nth-child(3) { margin-top: var(--sp-6); }

@media (max-width: 760px) {
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galerie > :nth-child(1),
  .galerie > :nth-child(3) { margin-top: 0; }
  .galerie > :nth-child(3) { grid-column: span 2; }
}

.bildzeile {
  display: flex;
  gap: var(--sp-4);
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--sp-3);
  font-size: var(--fs-meta);
  color: var(--muted);
}

.bildzeile b {
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 480px) {
  .bildzeile { display: block; }
  .bildzeile span { display: block; margin-top: var(--sp-1); }
}

@media (prefers-reduced-motion: reduce) {
  .bild img { transition: none; }
  .kopfbild img { transform: none !important; }
}