/* ==========================================================================
   Produktgalerie (Vorschauleiste + Hauptbild)

   Lag als <style>-Block im Partial kfz_gallery.html.
   ========================================================================== */

/* --- EBAY STYLE GALERIE --- */
  .kfz-gallery {
      display: flex;
      gap: 20px;
      height: 450px; /* Feste Höhe */
      user-select: none;
      width: 100%;
      margin-bottom: 40px !important; /* ERZWUNGENER ABSTAND nach unten */
      overflow: hidden; /* Verhindert jedes Ausbrechen! */
  }

  /* Linke Spalte (Thumbnails) */
  .kfz-gallery__thumbs {
      display: flex; flex-direction: column; width: 80px; align-items: center; height: 100%;
  }
  
  .kfz-gallery__thumbbtn {
      background: #fff; border: 1px solid #ccc; border-radius: 50%;
      width: 34px; height: 34px; cursor: pointer; display: flex;
      align-items: center; justify-content: center; margin: 5px 0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1); z-index: 2;
      color: #303a46; font-size: 14px; transition: all 0.2s; flex-shrink: 0;
  }
  .kfz-gallery__thumbbtn:hover { background: #f4f4f4; border-color: #999; }
  .kfz-gallery__thumbbtn:active { transform: scale(0.95); }

  .kfz-gallery__thumbrail {
      flex: 1; overflow-y: auto; display: flex; flex-direction: column;
      gap: 12px; width: 100%; align-items: center; padding: 5px 0;
      -ms-overflow-style: none; scrollbar-width: none; min-height: 0;
  }
  .kfz-gallery__thumbrail::-webkit-scrollbar { display: none; }

  .kfz-gallery__thumb {
      width: 68px; height: 68px; object-fit: cover; border: 2px solid transparent;
      border-radius: 6px; cursor: pointer; background: #fff;
      transition: border-color 0.2s; flex-shrink: 0; padding: 0; overflow: hidden;
  }
  .kfz-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
  .kfz-gallery__thumb.is-active { border-color: #3665f3; box-shadow: 0 0 5px rgba(54,101,243,0.3); }
  .kfz-gallery__thumb:hover:not(.is-active) { border-color: #999; }

  /* Rechte Spalte (Hauptbild) */
  .kfz-gallery__main {
      flex: 1; position: relative; background: #fff;
      border-radius: 12px; border: 1px solid #eaeaea;
      display: flex; align-items: center; justify-content: center;
      margin: 0; padding: 0;
      height: 100%; 
      min-height: 0; /* DER MAGIC-FIX: Verhindert, dass das Bild die Box nach unten aufdrückt */
      min-width: 0;  /* Verhindert seitliches Ausbrechen */
      overflow: hidden; /* Schneidet alles ab, was drüber steht */
  }
  
  .kfz-gallery__img {
      width: 100%; 
      height: 100%; 
      object-fit: contain; /* Bild füllt den Bereich aus, ohne verzerrt zu werden */
      transition: opacity 0.15s ease-in-out;
      padding: 5px; /* Ganz leichter Puffer zum Rahmen */
  }

  /* Pfeile Hauptbild */
  .kfz-gallery__nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: #fff; border: 1px solid #ccc; border-radius: 50%;
      width: 44px; height: 44px; cursor: pointer; display: flex;
      align-items: center; justify-content: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15); font-size: 26px;
      color: #303a46; z-index: 5; transition: all 0.2s; line-height: 1;
      padding-bottom: 4px;
  }
  .kfz-gallery__nav:hover { background: #f4f4f4; border-color: #999; }
  .kfz-gallery__nav:active { transform: translateY(-50%) scale(0.95); }
  .kfz-gallery__nav--prev { left: 15px; }
  .kfz-gallery__nav--next { right: 15px; }

  /* Auf dem Handy stand die Galerie neben der Kaufbox und war daumengross.
     Jetzt Hauptbild ueber volle Breite, Vorschaubilder als wischbare Zeile
     darunter -- die Hoch/Runter-Pfeile braucht es dafuer nicht. */
  @media (max-width: 991px) {
      .kfz-gallery {
          flex-direction: column-reverse;
          height: auto;
          gap: 12px;
          margin-bottom: 0 !important;
          overflow-x: hidden;
          max-width: 100%;
      }
      .kfz-gallery__thumbs {
          flex-direction: row;
          width: 100%;
          max-width: 100%;
          min-width: 0;
          height: auto;
      }
      .kfz-gallery__thumbbtn { display: none; }
      .kfz-gallery__thumbrail {
          flex-direction: row;
          overflow-x: auto;
          overflow-y: hidden;
          width: 100%;
          /* ohne min-width:0 waechst die Leiste auf die Breite aller
             Vorschaubilder und schiebt die ganze Seite nach rechts */
          min-width: 0;
          padding: 2px 0;
          align-items: flex-start;
      }
      .kfz-gallery__main {
          width: 100%;
          height: auto;
          aspect-ratio: 4 / 3;
      }
      .kfz-gallery__nav { width: 38px; height: 38px; font-size: 22px; }
      .kfz-gallery__nav--prev { left: 8px; }
      .kfz-gallery__nav--next { right: 8px; }
  }