/*================================================
Für Seite Zubehör:
-Bild links, Text rechts -muss noch in der HTML eingebaut werden
-Mobile (<600px): Bild oben, Text darunter
-Hover-Zoom der Bilder
=================================================*/

/* ===== Layout: Bild + Text nebeneinander ===== */
.image-text {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

/* Bild (Desktop) */
.image-text img {
  width: 170px;
  height: 200px;   /*170px*/
  flex-shrink: 0;
}

/* ===== Hover-Effekt (nur Desktop sinnvoll) ===== */
.imgcenterHover {
  max-width: 100%;
  height: auto;
  padding: 1px;
  box-sizing: border-box;
  transition: transform 0.3s ease;
  cursor: zoom-in;
}

.imgcenterHover:hover {
  transform: scale(2.8);
  z-index: 10;
}

/* ===== Bild mp4 Reedkontakt ===== */
 .imgleft{
      /* background-color: #aaa;*/
      width: 33%;
      padding:  1px;
      float: left;
      box-sizing: border-box;
    }






    
.clear{
      clear: both;
      /*background-color: rgb(10, 10, 10);*/
      height: 40px;
      margin: 15px;
    }
/* =========================
   RESPONSIVE BREAKPOINTS
========================= */

/* Tablet & kleiner → Sidebar weg */
@media (max-width: 768px) {

  .image-text {
    flex-direction: column;
    align-items: center;
  }

  .image-text img {
    height: 170px;     /* FIX: ohne Leerzeichen! */
    width: auto;
    max-width: none;   /* verhindert Überschreiben */
  }

  /* Hover komplett deaktivieren */
  .imgcenterHover {
    cursor: default;
    transition: none;
  }

  .imgcenterHover:hover {
    transform: none;
  }
  .imgleft {
    float: none;
    width: 100%;
  }
}
  /* Smartphone */
  @media screen and (max-width: 480px) {
  }