.kss-hpm-galerie{padding:84px 0}
.kss-hpm-galerie h2{font-size:clamp(29px,3.6vw,40px);margin-bottom:12px}
.kss-hpm-galerie .intro{color:var(--tinte-weich);max-width:52ch;margin-bottom:46px}

/* ---------- Darstellung: gleichmäßiges Raster ---------- */
.kss-hpm-galerie .raster{display:grid;grid-template-columns:repeat(6,1fr);gap:26px;max-width:1060px;margin:0 auto}
.kss-hpm-galerie .stueck{position:relative;grid-column:span 2}
.kss-hpm-galerie .stueck.versatz{grid-column:2 / span 2}
.kss-hpm-galerie .stueck img{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;
  border:1px solid var(--linie);background:var(--sand);
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s;
}
.kss-hpm-galerie .stueck:hover img{transform:translateY(-5px);box-shadow:0 20px 38px -20px rgba(35,34,32,.36)}
.kss-hpm-galerie .stueck figcaption{
  font-family:var(--hand);font-size:20px;color:var(--rose-tief);
  margin-top:9px;text-align:center;
}
@media(max-width:900px){
  .kss-hpm-galerie{padding:60px 0}
  .kss-hpm-galerie .raster{grid-template-columns:repeat(4,1fr);gap:18px}
  .kss-hpm-galerie .stueck,.kss-hpm-galerie .stueck.versatz{grid-column:span 2}
}
@media(max-width:560px){
  .kss-hpm-galerie .raster{grid-template-columns:repeat(2,1fr);gap:14px}
  .kss-hpm-galerie .stueck,.kss-hpm-galerie .stueck.versatz{grid-column:span 1}
}

/* ---------- Darstellung: gemischtes Format-Band ---------- */
.kss-hpm-galerie .band{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.kss-hpm-galerie .band figure{margin:0}
.kss-hpm-galerie .band img{
  width:100%;height:100%;object-fit:cover;border-radius:12px;
  border:1px solid var(--linie);background:var(--sand);
}
.kss-hpm-galerie .band .hoch{grid-column:span 3;aspect-ratio:4/5}
.kss-hpm-galerie .band .quer{grid-column:span 6;aspect-ratio:8/5}
.kss-hpm-galerie .band .mittel{grid-column:span 4;aspect-ratio:1/1}
@media(max-width:900px){
  .kss-hpm-galerie .band{grid-template-columns:repeat(6,1fr);gap:14px}
  .kss-hpm-galerie .band .hoch,.kss-hpm-galerie .band .mittel{grid-column:span 3}
  .kss-hpm-galerie .band .quer{grid-column:span 6}
}
@media(max-width:520px){
  .kss-hpm-galerie .band .hoch,.kss-hpm-galerie .band .mittel,.kss-hpm-galerie .band .quer{grid-column:span 6}
}