/* ==========================================================================
   Produktseite

   Lag als <style>-Block in catalogue/detail.html. Werte kommen aus
   tokens.css; neue Regeln fuer diese Seite gehoeren hierher, nicht ins
   Template.
   ========================================================================== */

/* HAUPT-LAYOUT & ABSTÄNDE */
    .kfz-pdp { margin-top: 30px; margin-bottom: 60px; }
    .kfz-pdp__top { display: flex; gap: 40px; }
    .kfz-summary { flex: 1; padding-top: 10px; } /* Etwas Luft nach oben, damit es bündig mit der Galerie abschließt */

    .kfz-summary__title { font-size: 28px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 16px; color: #151a21; line-height: 1.25; }

    /* PREIS IN SCHWARZ */
    .kfz-summary__price { font-size: 36px; font-weight: 700; letter-spacing: -.02em; color: #151a21; margin-bottom: 25px; font-variant-numeric: tabular-nums; }

    /* VERSAND & BESTAND BOX - KOMPLETT CLEAN (OHNE RAHMEN) */
    .kfz-meta { margin-bottom: 30px; display: flex; flex-direction: column; gap: 15px; }
    .kfz-meta-row { display: flex; flex-direction: column; gap: 4px; } /* Gestapelt wie im Mockup */
    .kfz-meta-k { font-size: 13px; font-weight: 600; color: #65707f; letter-spacing: .01em; }
    .kfz-meta-v { font-size: 16.5px; color: #151a21; font-weight: 500; }

    /* SPALTMAßE DER UNTEREN KARTEN */
    .kfz-stack { display: flex; flex-direction: column; gap: 28px; }

    /* Preis-Pflichtangabe */
    .kfz-price-note { font-size: 14px; color: #65707f; margin-top: -18px; margin-bottom: 25px; }
    .kfz-price-note a { color: #0053a0; }

    /* Vertrauens-Punkte am Kaufbutton */
    .kfz-assurance { list-style: none; margin: 22px 0 0; padding: 0; }
    .kfz-assurance li {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: 15.5px; color: #303a46; line-height: 1.55; padding: 8px 0;
      border-bottom: 1px solid #f2f2f2;
    }
    .kfz-assurance li:last-child { border-bottom: 0; }
    .kfz-assurance i { color: #3665f3; width: 18px; text-align: center; margin-top: 3px; flex: 0 0 auto; }
    .kfz-assurance a { color: #0053a0; }

    /* Service-Karte */
    .kfz-service { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .kfz-service__item h3 { font-size: 17px; font-weight: 600; margin: 0 0 9px; color: #151a21; }
    .kfz-service__item p { font-size: 16px; line-height: 1.68; color: #303a46; margin: 0 0 9px; }
    .kfz-service__hint { color: #65707f !important; font-size: 14px !important; }
    .kfz-service a { color: #0053a0; }

    /* Beschreibungstext aus dem eBay-Import.
       Der bringt eigene <font face="Georgia" size="5" color="#ff0010">-Tags
       mit: Serifenschrift, sprunghafte Groessen und grelles Rot mitten im
       Satzbild. Der Text bleibt wie er ist, nur die Formatierung wird auf
       die Schrift des Shops gezogen. */
    .kfz-content { font-size: 16.5px; line-height: 1.72; color: #303a46; overflow-wrap: break-word; }
    .kfz-content *,
    .kfz-content *[style] { font-family: var(--font-ui) !important; }
    .kfz-content font[size],
    .kfz-content *[style*="font-size"] { font-size: inherit !important; }
    .kfz-content font[size="5"],
    .kfz-content font[size="6"],
    .kfz-content font[size="7"] { font-size: 18px !important; font-weight: 600; }
    .kfz-content font[color="#ff0010"],
    .kfz-content font[color="#FF0010"],
    .kfz-content font[color="red"] { color: #b8452e !important; }
    .kfz-content p { margin: 0 0 12px; }
    .kfz-content a { color: #0053a0; }
    .kfz-content img { max-width: 100%; height: auto; }
    /* eBay-Beschreibungen bringen Layout-Tabellen mit festen Breiten mit, oft
       verschachtelt und als Inline-Stil (style="width: 1454.8px"). Auf dem
       Handy schob das die ganze Seite zur Seite. Alles in der Beschreibung
       bleibt deshalb in Kastenbreite; table-layout: fixed laesst den Text in
       den Zellen umbrechen, statt die Tabelle aufzublaehen. */
    .kfz-content * { max-width: 100% !important; }
    .kfz-content table { width: 100% !important; table-layout: fixed; }
    .kfz-content td,
    .kfz-content th { width: auto !important; }

    /* Kaeuferstimmen */
    .kfz-reviews__lead { font-size: 16px; color: #303a46; margin: -6px 0 18px; }
    .kfz-reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .kfz-review {
      margin: 0; padding: 16px 18px; background: #fafafa;
      border: 1px solid #eee; border-radius: 10px;
    }
    .kfz-review__stars { color: var(--kfz-star); font-size: 15px; letter-spacing: 1px; }
    .kfz-review__text { margin: 7px 0 9px; font-size: 15.5px; line-height: 1.6; color: #151a21; }
    .kfz-review__meta { font-size: 13px; color: #65707f; font-style: normal; }
    .kfz-reviews__note { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: #65707f; }

    @media (max-width: 991px) {
      /* Galerie und Kaufbox standen auf dem Handy nebeneinander: der
         Produkttitel brach auf sieben Zeilen, das Bild blieb daumengross. */
      .kfz-pdp__top {
        flex-direction: column;
        gap: 26px;
        /* stretch statt start: sonst nimmt die Galerie die Breite ihrer
           Vorschaubilder an und schiebt die Seite seitlich raus */
        align-items: stretch;
      }
      .kfz-pdp__top > * { min-width: 0; max-width: 100%; }
      .kfz-summary { padding-top: 0; }
    }

    @media (max-width: 767px) {
      .kfz-service, .kfz-reviews { grid-template-columns: 1fr; }
      .kfz-panel { padding: 20px 18px; border-radius: 14px; }
      .kfz-panel--top { padding: 20px 18px; }
      .kfz-panel__title { font-size: 19px; }
      /* Titel auf drei Zeilen begrenzen. Die eBay-Titel sind lang und
         liefen ueber vier Zeilen -- 201px, der groesste Posten ueber dem
         Kaufknopf. Zwei Zeilen schnitten zu frueh ab ("BMW Z3 Roadster
         Beifahrer Sitz..."), drei zeigen die Fahrzeugangaben mit. Der volle Titel bleibt im Quelltext stehen (also fuer
         Suchmaschinen und Vorleseprogramme lesbar) und steht im Browser-
         Tab; hier wird er nur optisch gekuerzt.
         Nur mobil: auf dem Desktop ist der Platz da, und der Titel traegt
         bei Gebrauchtteilen die Fahrzeugmodelle, nach denen gesucht wird. */
      .kfz-summary__title {
        font-size: 23px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .kfz-summary__price { font-size: 30px; }
    }

    /* Abschnitte der Produktseite.
       Hiessen frueher .kfz-card -- genauso wie die Produktkarte im Raster.
       Deren Regeln (padding:0, display:flex, beide !important) trafen damit
       auch diese Abschnitte und nahmen ihnen Innenabstand und Rahmen. */
    .kfz-panel {
      background: #fff;
      border: 1px solid #ececec;
      border-radius: 16px;
      padding: 28px 30px;
    }
    .kfz-panel--top {
      padding: 30px;
      margin-bottom: 40px;
    }
    .kfz-panel__title {
      font-size: 21px;
      font-weight: 700;
      letter-spacing: -.012em;
      color: #151a21;
      margin: 0 0 20px;
      padding-bottom: 13px;
      border-bottom: 1px solid #ececec;
    }

    /* FAHRZEUGLISTE */
    .kfz-compat-container { max-height: 450px; overflow-y: auto; border: 1px solid #ddd; border-radius: 8px; width: 100%; }
    .kfz-compat-table { width: 100% !important; border-collapse: collapse !important; display: table !important; }
    .kfz-compat-table thead th { position: sticky; top: 0; background: #f3f5f8 !important; color: #151a21 !important; border-bottom: 2px solid #dbe2ea !important; padding: 12px !important; text-align: left !important; z-index: 10; }
    .kfz-compat-table td { padding: 10px 12px !important; border-bottom: 1px solid #eee !important; color: #303a46 !important; }
    .kfz-compat-table tr:nth-child(even) { background: #f9f9f9 !important; }

    /* ARTIKELMERKMALE */
    .kfz-table { width: 100%; border-collapse: collapse; }
    .kfz-table th { text-align: left; background: #f4f4f4; width: 35%; padding: 12px; border: 1px solid #eee; color: #555; }
    .kfz-table td { padding: 12px; border: 1px solid #eee; }
    
    /* MODAL STYLING */
    .modal-content { border-radius: 10px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
    .modal-header { border-bottom: 1px solid #eee; background-color: #f8f9fa; border-top-left-radius: 10px; border-top-right-radius: 10px; }
    .modal-title { font-weight: 700; color: #28a745; }
    .modal-footer { border-top: 1px solid #eee; }
    .btn-checkout { background-color: var(--ink); color: #fff; font-weight: 600; border: none; }
    .btn-checkout:hover { background-color: var(--ink-soft); color: #fff; }


/* Galeriespalte. min-width:0 ist noetig, weil Flex-Kinder von sich aus nicht
   unter ihre Inhaltsbreite gehen -- ohne das waechst die Galerie ueber den
   Kasten hinaus. */
.kfz-pdp__media{
  flex: 1.2;
  min-width: 0;
}

/* Kaufknopf */
/* .kfz-buy (Hauptknopf) steht zentral in custom.css */

/* ==========================================================================
   Tabellen auf dem Handy

   Die Fahrzeugliste kommt als fertiges HTML aus dem eBay-Import, ihr Markup
   laesst sich hier nicht umbauen -- sie wird deshalb wischbar. Die
   Artikelmerkmale rendert das Template selbst, die duerfen umbrechen.
   ========================================================================== */

.kfz-compat-container{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.kfz-compat-table td p,
.kfz-compat-table td div{ margin: 0 !important; }
.kfz-compat-table td,
.kfz-compat-table th{ vertical-align: middle !important; }

@media (max-width: 767px){
  .kfz-compat-table{
    /* schmaler als das hier passt keine vierspaltige Liste */
    min-width: 480px;
    font-size: var(--kfz-fs-xs);
  }
  .kfz-compat-table thead th{ padding: 9px 10px !important; font-size: var(--kfz-fs-xs) !important; }
  .kfz-compat-table td{ padding: 8px 10px !important; }

  /* Artikelmerkmale: Bezeichnung ueber den Wert statt zwei enge Spalten */
  .kfz-table,
  .kfz-table tbody,
  .kfz-table tr,
  .kfz-table th,
  .kfz-table td{
    display: block;
    width: auto !important;
  }
  .kfz-table tr{
    border: 1px solid var(--kfz-line);
    border-radius: var(--kfz-r-sm);
    padding: 10px 12px;
    margin-bottom: var(--kfz-sp-2);
  }
  .kfz-table th{
    background: transparent;
    border: 0;
    padding: 0 0 2px;
    font-size: var(--kfz-fs-xs);
    font-weight: var(--kfz-fw-semi);
    color: var(--kfz-muted);
  }
  .kfz-table td{
    border: 0;
    padding: 0;
    font-size: var(--kfz-fs-body);
    color: var(--kfz-text);
  }
}

/* Schattenkante am scrollbaren Rand der Fahrzeugliste: zeigt an, dass rechts
   noch die Motorangaben stehen, und verschwindet am Ende des Weges.
   Rein ueber Hintergruende geloest -- das Markup kommt aus dem eBay-Import
   und laesst sich nicht erweitern. */
.kfz-compat-container{
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,   rgba(21,26,33,.16), rgba(21,26,33,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(21,26,33,.16), rgba(21,26,33,0)) right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}


/* Knopf "Einbauanleitung anfordern" unter dem Kaufkasten. Er traegt die
   Klassen des Warenkorb-Knopfs (.kfz-buy) -- Groesse, Farbe und Schrift
   kommen von dort, hier stehen nur Abstand und Hinweiszeile. */
.kfz-anl-cta{ margin: var(--kfz-sp-4) 0 0; }
.kfz-anl-cta__sub{
  margin: 6px 0 0;
  text-align: center;
  font-size: var(--kfz-fs-xs);
  color: var(--kfz-muted);
}

/* ==========================================================================
   Kaufbereich (15.09.2026)

   - "Im Warenkorb · zur Kasse": liegt der Artikel schon im Korb, fuehrt der
     Knopf zur Kasse. Gleiche Groesse wie .kfz-buy, nur mit Haken.
   - Vertrauenszeile direkt am Knopf.
   - Kaufleiste auf dem Handy: fest am unteren Rand, solange der Kaufbereich
     oben nicht im Bild ist (Skript in detail.html setzt .is-sichtbar).
   ========================================================================== */
.kfz-warenkorb-link{
  display: block;
  margin-top: var(--kfz-sp-2);
  text-align: center;
  font-size: var(--kfz-fs-sm);
  color: var(--kfz-link);
}
.kfz-kauf-hinweis{
  margin: var(--kfz-sp-2) 0 0;
  padding: var(--kfz-sp-2) var(--kfz-sp-3);
  border-radius: var(--kfz-r-sm);
  background: var(--kfz-hinweis-bg);
  border: 1px solid var(--kfz-hinweis-line);
  font-size: var(--kfz-fs-sm);
  color: var(--kfz-text);
}
.kfz-vertrauen{
  display: flex;
  align-items: flex-start;
  gap: var(--kfz-sp-2);
  margin: var(--kfz-sp-3) 0 0;
  font-size: var(--kfz-fs-sm);
  line-height: var(--kfz-lh-body);
  color: var(--kfz-text);
}
.kfz-vertrauen i{ color: var(--kfz-star); margin-top: 3px; }

.kfz-kaufleiste{ display: none; }

@media (max-width: 767px){
  .kfz-kaufleiste.is-sichtbar{
    display: flex;
    align-items: center;
    gap: var(--kfz-sp-3);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;              /* ueber dem Inhalt, unter Cookie-Banner (99998) und Modal */
    padding: var(--kfz-sp-2) var(--kfz-sp-4);
    padding-bottom: calc(var(--kfz-sp-2) + env(safe-area-inset-bottom));
    background: var(--kfz-paper);
    border-top: 1px solid var(--kfz-line);
    box-shadow: 0 -4px 16px rgba(21, 26, 33, .08);
  }
  .kfz-kaufleiste__preis{
    flex: 0 0 auto;
    font-size: var(--kfz-fs-lg);
    font-weight: var(--kfz-fw-bold);
    color: var(--kfz-text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  .kfz-kaufleiste__preis small{
    display: block;
    font-size: var(--kfz-fs-2xs);
    font-weight: var(--kfz-fw-normal);
    color: var(--kfz-muted);
  }
  .btn.kfz-buy.kfz-kaufleiste__knopf{
    flex: 1 1 auto;
    min-height: 48px;
    font-size: var(--kfz-fs-body);
  }
  /* Platz unten, damit die Leiste den Seitenfuss nicht verdeckt */
  body.kfz-kaufleiste-an{ padding-bottom: 76px; }
}