/* Bildgruppe im Abschnitt Entdecken (Kopiervorlage). Ersetzt das alte Bilderrad. */
/* ══ BILDGRUPPE statt Bilderrad (David 29.09.2026) ═══════════════════════
   „Kein Kreis, einfach normal wie bei Vorlage 3" — und dann „viel cleaner".
   Eine ruhige Bildreihe: ein breites und zwei schmalere Fotos, alle gleich
   hoch und bündig, ohne Versatz und ohne Schatten. Am Handy oben ein
   breites Bild, darunter zwei gleich grosse. Das Rad-Markup ist aus
   index.html entfernt; bilderrad.js findet dann nichts und tut nichts. */
.bildgruppe{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:clamp(10px,1.2vw,18px);
  width:min(100%,1180px);height:clamp(300px,32vw,470px);margin:clamp(2.6rem,5vw,4.2rem) auto 0}
.bildgruppe figure{margin:0;overflow:hidden;border-radius:clamp(14px,1.4vw,20px);background:var(--band-tief,#e6e8e1)}
.bildgruppe img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){
  .bildgruppe{grid-template-columns:1fr 1fr;height:auto;gap:10px}
  .bildgruppe figure:nth-child(1){grid-column:1/-1;aspect-ratio:16/10}
  .bildgruppe figure:nth-child(2),.bildgruppe figure:nth-child(3){aspect-ratio:1/1}
}

/* Feinschliff: die drei Bilder öffnen nacheinander (Blende aus stil.css),
   am Computer wird das Bild unter der Maus breit. */
.js .bildgruppe figure:nth-child(2)>img{transition-delay:.12s}
.js .bildgruppe figure:nth-child(3)>img{transition-delay:.24s}
/* Am Computer (David 29.09.): das Bild unter der Maus wird breit, die anderen
   werden schmal — weich federnd. Ohne Maus bleibt das erste Bild das breite. */
@media (hover:hover) and (min-width:761px){
  .bildgruppe{display:flex}
  .bildgruppe figure{flex:1 1 0;min-width:0;transition:flex-grow .85s cubic-bezier(.34,1.16,.64,1)}
  .bildgruppe figure:nth-child(1){flex-grow:1.7}
  .bildgruppe:hover figure{flex-grow:.8}
  .bildgruppe:hover figure:hover{flex-grow:2.6}
}