/*
  FAQ-Seite, Rescue Trade™ Website
  Foto-Hero wie Firma/Zertifikate (Cover, 88vh) plus Akkordeon-Gruppen
  im Rhythmus der Startseiten-FAQ (.faq) und der Sektions-Überschriften
  auf Firma/Zertifikate. Accordion-Bausteine: css/components.css.
  Abschluss-CTA: gemeinsames .cta-panel (zentriert), nicht rechtsbündig.

  Gruppenausrichtung:
  - .faq-seite__gruppe--links  = Medizinprodukterecht / Medical device regulation
  - .faq-seite__gruppe--rechts = Beschaffung und Lieferung / Procurement and delivery
  Zwischen den Gruppen: .faq-seite__galerie (Desktop 5 / Tablet 4–3 / Mobil 2, Extra display:none).
*/

/* -----------------------------------------------------------------
   01 Hero – kürzer als Startseiten-Video-Hero, analog Firma.
----------------------------------------------------------------- */
.hero {
  min-height: 88vh;
}
.hero__content {
  padding-bottom: var(--space-72);
}
.hero__subline {
  max-width: var(--measure-620);
}

/* -----------------------------------------------------------------
   02 FAQ-Inhalt – zwei Gruppen mit unterschiedlicher Ausrichtung.
----------------------------------------------------------------- */
.faq-seite {
  padding: var(--space-170) 0;
}

.faq-seite__h2 {
  margin: 0 0 var(--space-32);
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h2-lg);
  line-height: var(--lh-1);
  letter-spacing: var(--ls-tight-025);
  color: var(--color-black);
  overflow-wrap: break-word;
}

.faq-seite__liste {
  border-top: 1px solid var(--color-line);
}

/* Abstand nur zwischen den Gruppen, nicht über der ersten.
   Mit Galerie dazwischen greift die Regel nicht; die Galerie trägt
   den vertikalen Abstand. Fallback falls Galerie fehlt. */
.faq-seite__gruppe + .faq-seite__gruppe {
  margin-top: var(--space-96);
}

/* -----------------------------------------------------------------
   03 Zwischen-Galerie – Desktop 5, Tablet 4→3, Mobil 2.
   Extra-Bilder per display:none; kein horizontaler Scroll.
----------------------------------------------------------------- */
.faq-seite__galerie {
  margin: var(--space-96) 0;
}

.faq-seite__galerie-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-16);
}

.faq-seite__galerie-item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg, 12px);
  height: 150px;
  background: #eef1f4;
}

.faq-seite__galerie-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tablet breit: 4 sichtbar */
@media (max-width: 900px) {
  .faq-seite__galerie-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-12);
  }
  .faq-seite__galerie-item {
    height: 120px;
  }
  .faq-seite__galerie-item:nth-child(n+5) {
    display: none;
  }
}

/* Tablet schmal: 3 sichtbar */
@media (max-width: 700px) {
  .faq-seite__galerie-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .faq-seite__galerie-item:nth-child(n+4) {
    display: none;
  }
}

/* Mobil: 2 sichtbar */
@media (max-width: 560px) {
  .faq-seite__galerie {
    margin: var(--space-64) 0;
  }
  .faq-seite__galerie-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .faq-seite__galerie-item {
    height: 112px;
  }
  .faq-seite__galerie-item:nth-child(n+3) {
    display: none;
  }
}

/* --- Links: Medizinprodukterecht --- */
.faq-seite__gruppe--links .faq-seite__h2 {
  text-align: left;
}
.faq-seite__gruppe--links .accordion__trigger {
  flex-direction: row;
  text-align: left;
}
.faq-seite__gruppe--links .accordion__answer {
  text-align: left;
  padding: 0 var(--space-48) var(--space-30) 0;
}

/* --- Rechts: Beschaffung und Lieferung --- */
.faq-seite__gruppe--rechts .faq-seite__h2 {
  text-align: right;
}
.faq-seite__gruppe--rechts .accordion__trigger {
  flex-direction: row-reverse;
  text-align: right;
}
.faq-seite__gruppe--rechts .accordion__answer {
  text-align: right;
  padding: 0 0 var(--space-30) var(--space-48);
}

@media (min-width: 900px) {
  /* Lesebreite begrenzen; Block je Gruppe links bzw. rechts halten. */
  .faq-seite__gruppe--links .faq-seite__h2,
  .faq-seite__gruppe--links .faq-seite__liste {
    max-width: 52rem;
    margin-right: auto;
  }
  .faq-seite__gruppe--rechts .faq-seite__h2,
  .faq-seite__gruppe--rechts .faq-seite__liste {
    max-width: 52rem;
    margin-left: auto;
  }
}

@media (max-width: 900px) {
  .faq-seite {
    padding: var(--space-96) 0;
  }
}

@media (max-width: 560px) {
  .faq-seite__gruppe--links .accordion__answer {
    padding-right: 0;
  }
  .faq-seite__gruppe--rechts .accordion__answer {
    padding-left: 0;
  }
}