/* Galerie-Modul — ausschliesslich die Firmenfarben blau/weiss/grau
 * ueber die --ssg-*-Tokens, keine warmen Akzentfarben. */

.ssg-galerie {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
  color: var(--ssg-text-primary, #152a50);
}

/* ---------- Filter-Pills ---------- */
/* Die Aktiv-Klasse MUSS "is-active" heissen: tokens.css erzwingt fuer alle
 * Pills background-color: var(--ssg-bg-page) !important und nimmt davon
 * ausschliesslich .is-active aus. Mit einem anderen Namen koennte die aktive
 * Pill nie navy werden. */
.ssg-galerie__pills {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.4rem;
}
.ssg-galerie__pill {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: .85rem;
  line-height: 1.2;
  padding: .35rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--ssg-accent-blue, #3b82c4);
  background-color: var(--ssg-bg-page, #fff);
  color: var(--ssg-navy, #1e3560);
  box-shadow: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ssg-galerie__pill span {
  font-weight: 700;
  opacity: .75;
  margin-left: .25rem;
}
.ssg-galerie__pill:hover {
  background-color: var(--ssg-pill-bg-hover, #dde5f1);
  color: var(--ssg-navy, #1e3560);
}
/* Anti-Elementor-Rosa: explizite Hintergrundfarbe auch fuer focus/active. */
.ssg-galerie__pill:focus,
.ssg-galerie__pill:focus-visible,
.ssg-galerie__pill:active {
  background-color: var(--ssg-pill-bg-hover, #dde5f1);
  color: var(--ssg-navy, #1e3560);
  box-shadow: none;
  outline: 2px solid var(--ssg-accent-blue, #3b82c4);
  outline-offset: 2px;
}
.ssg-galerie__pill.is-active,
.ssg-galerie__pill.is-active:hover,
.ssg-galerie__pill.is-active:focus,
.ssg-galerie__pill.is-active:focus-visible,
.ssg-galerie__pill.is-active:active {
  background-color: var(--ssg-navy, #1e3560);
  color: #fff;
  border-color: var(--ssg-navy, #1e3560);
  box-shadow: none;
}
.ssg-galerie__pill.is-active span { opacity: .85; }

/* ---------- Gruppe ---------- */
.ssg-galerie__gruppe { margin: 0 0 2.4rem; }
.ssg-galerie__titel {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ssg-navy, #1e3560);
  margin: 0 0 .8rem;
}
/* Der Titel bekommt per JS den Fokus (tabindex="-1"), damit die Zielgruppe nach
 * einem Pill-Klick angesagt wird — dabei soll kein Fokusrahmen aufblitzen. */
.ssg-galerie__titel:focus { outline: none; }

/* ---------- Raster ---------- */
.ssg-galerie__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 1024px) {
  .ssg-galerie__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ssg-galerie__grid { grid-template-columns: repeat(2, 1fr); }
}

/* .ssg-photo-trigger traegt nur den Lightbox-Haken; das Layout macht
 * .ssg-galerie__item. In frontend.css ist .ssg-photo-trigger bereits mit
 * display:block, aspect-ratio:16/9, margin-top:16px und Navy-Hintergrund
 * belegt — zugeschnitten aufs Teamfoto der Erfolgs-Karte. Diese Werte muessen
 * hier zurueckgesetzt werden, sonst bricht das quadratische Raster, sobald
 * frontend.css auf der Galerie-Seite mitgeladen wird. Die Doppelklasse gibt
 * die noetige Spezifitaet (0,2,0 gegen 0,1,0). */
.ssg-galerie__item,
.ssg-galerie__item.ssg-photo-trigger {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  text-decoration: none;
}
/* PFLICHT: ohne !important schlaegt das display:block oben das hidden-Attribut
 * aus dem Browser-Stylesheet — „Mehr laden“ waere wirkungslos. */
.ssg-galerie__item[hidden],
.ssg-galerie__item.ssg-photo-trigger[hidden] { display: none !important; }

/* frontend.css:494 dimmt .ssg-photo-trigger beim Hover auf .92 — hier soll die
 * Kachel allein zoomen, nicht zusaetzlich abdunkeln. */
.ssg-galerie__item.ssg-photo-trigger:hover { opacity: 1; }

/* Gleiche Haertung fuer den Button: sein display:block wuerde sonst das
 * hidden-Attribut schlagen und er bliebe nach dem Klick stehen. */
.ssg-galerie__mehr[hidden] { display: none !important; }

.ssg-galerie__item:focus,
.ssg-galerie__item:focus-visible {
  outline: 2px solid var(--ssg-accent-blue, #3b82c4);
  outline-offset: 2px;
}

.ssg-galerie__img,
.ssg-galerie__item .ssg-galerie__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .3s ease;
}
.ssg-galerie__item:hover .ssg-galerie__img,
.ssg-galerie__item:focus-visible .ssg-galerie__img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .ssg-galerie__img { transition: none; }
  .ssg-galerie__item:hover .ssg-galerie__img,
  .ssg-galerie__item:focus-visible .ssg-galerie__img { transform: none; }
}

/* ---------- „Mehr laden" ---------- */
.ssg-galerie__mehr {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  margin: 1rem auto 0;
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  padding: .55rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--ssg-navy, #1e3560);
  background-color: var(--ssg-navy, #1e3560);
  color: #fff;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}
/* Anti-Elementor-Rosa: explizite Hintergrundfarbe fuer JEDEN Zustand. */
.ssg-galerie__mehr:hover,
.ssg-galerie__mehr:focus,
.ssg-galerie__mehr:focus-visible,
.ssg-galerie__mehr:active {
  background-color: var(--ssg-navy-deep, #152a50);
  border-color: var(--ssg-navy-deep, #152a50);
  color: #fff;
  box-shadow: none;
}
.ssg-galerie__mehr:focus,
.ssg-galerie__mehr:focus-visible {
  outline: 2px solid var(--ssg-accent-blue, #3b82c4);
  outline-offset: 2px;
}