/* IMG sauber innerhalb der Bootstrap-Ratio-Box halten */
.product-image-wrapper img,
.ratio > img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* Bild füllt den Container ohne Verzerrung */
  object-position: center; /* zentriert das Motiv */
  display: block;          /* entfernt Whitespace-Lücke bei inline-block */
}


/* =========================================
   MOBILE OPTIMIERUNG FÜR DEN RATGEBER-ACCORDION
   ========================================= */
@media (max-width: 576px) {

  /* Accordion Buttons kompakter */
  .accordion-button {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
  }

  /* Überschriften im Accordion Body kleiner */
  #ratgeber .accordion-body h4,
  #ratgeber .accordion-body h5,
  #ratgeber .accordion-body .h5,
  #ratgeber .accordion-body .h6 {
    font-size: 1rem;
    margin-top: 1rem;
  }

  /* Fließtext angenehmer für mobile */
  #ratgeber .accordion-body p {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  /* Weniger Rand innen */
  #ratgeber .accordion-body {
    padding: 1rem 0.75rem;
  }

  /* Alert-Box schlanker */
  #ratgeber .alert {
    padding: 0.75rem;
    font-size: 0.9rem;
  }

  /* Überschrift "Ratgeber rund um ..." kleiner */
  #ratgeber h2.fw-bold {
    font-size: 1.5rem;
  }

  /* Untertitel */
  #ratgeber p.text-muted {
    font-size: 0.95rem;
  }
}