#galerie { background: var(--cream); }
.galerie-intro { text-align: center; max-width: 600px; margin: 0 auto 3rem; }
.galerie-intro h2 { margin-bottom: 1rem; }
.galerie-intro p { color: var(--ink-soft); }
.galerie-grid { columns: 3 250px; column-gap: 1rem; }
.galerie-grid figure {
  break-inside: avoid; margin: 0 0 1rem;
  position: relative; cursor: pointer;
  perspective: 1200px; background: transparent;
}
.flip-inner {
  position: relative; width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(.3,.7,.3,1);
  border-radius: var(--radius);
}
figure.flipped .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back {
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 4px 18px var(--shadow);
  border: 1px solid rgba(238,154,28,0.18);
}
.flip-front { position: relative; }
.flip-front img { width: 100%; display: block; }
.flip-hint {
  position: absolute; right: 0.8rem; bottom: 0.8rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(247, 239, 219, 0.88); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-family: 'Fraunces', serif;
  opacity: 0; transition: opacity 0.3s, transform 0.3s;
  transform: rotate(-20deg);
}
.galerie-grid figure:hover .flip-hint,
.galerie-grid figure:focus-visible .flip-hint { opacity: 1; transform: rotate(0deg); }
.flip-back {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  display: flex; flex-direction: column; justify-content: center;
  padding: 1.6rem; text-align: center;
  background-color: var(--green); color: var(--cream-soft);
  background-image: var(--noise), radial-gradient(circle at 28% 20%, rgba(255,248,230,0.25), transparent 58%);
  background-blend-mode: soft-light, soft-light;
}
.galerie-grid figure:nth-child(3n+2) .flip-back { background-color: var(--wine); }
.galerie-grid figure:nth-child(3n)   .flip-back { background-color: var(--orange-deep); }
.flip-back h3 { color: var(--cream); font-style: italic; margin-bottom: 0.7rem; font-size: 1.25rem; }
.flip-back p { color: rgba(251, 246, 233, 0.9); font-size: 0.9rem; line-height: 1.55; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; }
}