/* ==========================================================================
   Produktkarte

   Diese Regeln standen als <style>-Block in
   catalogue/partials/product.html und wurden damit fuer JEDE Karte erneut
   ins HTML geschrieben -- auf einer Kategorieseite mit 24 Artikeln 24-mal
   derselbe Block. Jetzt einmal als Datei, die der Browser cachen kann.
   Wird nach custom.css geladen, damit die Kaskade bleibt wie sie war.
   ========================================================================== */

/* --- Globale Karte --- */
  .product_pod.h-100 { height: auto !important; margin-bottom: 15px !important; }

  .kfz-card {
      padding: 0 !important;
      border: 1px solid #f2f2f2 !important;
      border-radius: 12px !important;
      background: #fff !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      position: relative !important; /* WICHTIG: Hält das Badge in der Karte */
  }

  /* --- DAS NEUE BADGE --- */
  .kfz-badge-new {
      position: absolute;
      top: 15px;
      left: -35px;
      background: #28a745;
      color: white;
      padding: 5px 40px;
      transform: rotate(-45deg);
      font-size: 11px;
      font-weight: 800;
      z-index: 10;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      text-transform: uppercase;
      letter-spacing: 1.5px;
  }

  /* --- BILD-BEREICH: Minimaler, mathematisch gleicher Abstand ringsum --- */
  .kfz-card__media {
      height: 300px !important; /* Höhe leicht reduziert für weniger Leerraum oben/unten */
      min-height: 300px !important;
      margin: 0 !important;
      /* Dieser Wert steuert den "Mini-Abstand" ringsum (jetzt nur noch 8px) */
      padding: 8px !important;
      display: flex !important;
      align-items: center !important;    /* Zentriert vertikal */
      justify-content: center !important; /* Zentriert horizontal */
      background-color: #ffffff !important;
      border-bottom: 1px solid #fafafa !important;
  }

  .kfz-card__media img {
      max-width: 100% !important;
      max-height: 100% !important;
      width: auto !important;
      height: auto !important;
      object-fit: contain !important;
      border-radius: 6px !important; /* Mini-Radius passend zum Rand */
      display: block !important;
  }

  /* --- Text & Preis: Kompakter Abschluss --- */
  .kfz-card__body { padding: 10px 15px !important; }
  .kfz-card__title { margin-bottom: 6px !important; min-height: 0 !important; }
  .kfz-card__title a {
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      font-size: 16px !important;
      line-height: 1.35em !important;
      font-weight: 600 !important;
      color: #111 !important;
      text-decoration: none !important;
  }

  .kfz-card__price-value {
      font-size: 22px !important;
      font-weight: 800 !important;
      color: #000 !important;
  }

  /* --- MOBILE OPTIMIERUNG FÜR APP-LOOK --- */
  @media (max-width: 767px) {
      .product_pod.h-100 { margin-bottom: 12px !important; }

      /* Bildhöhe auf dem Handy reduzieren, damit man mehr Produkte sieht */
      .kfz-card__media {
          height: 180px !important;
          min-height: 180px !important;
          padding: 8px !important;
      }

      .kfz-card__body { padding: 8px 10px !important; }

      /* Schriftgrößen für das Handy optimieren */
      .kfz-card__title a {
          font-size: 14px !important;
          line-height: 1.2em !important;
      }

      .kfz-card__price-value {
          font-size: 18px !important;
      }
      
      .kfz-badge-new {
          top: 10px;
          left: -40px;
          padding: 3px 40px;
          font-size: 9px;
      }
  }