/* =========================================================
   MOBILE-AKKORDEON – Produktseiten
   Klappt markierte Abschnitte NUR am Handy (<=767px) ein.
   Desktop/Tablet bleiben unveraendert (Inhalt immer offen).
   Nutzt das vorhandene Bootstrap-Collapse (kein neues JS).
   Ans Ende von products.css einfuegen.
   ========================================================= */

/* Toggle-Leiste: standardmaessig aus (Desktop) */
.prod-mtoggle {
  display: none;
}

/* ---------------------------------------------------------
   Desktop / Tablet: Inhalte immer offen, Toggle aus
   --------------------------------------------------------- */
@media (min-width: 768px) {

  .prod-mtoggle {
    display: none !important;
  }

  .prod-mcollapse {
    display: block !important;
    height: auto !important;
  }

}

/* ---------------------------------------------------------
   Mobile: Abschnitt zugeklappt, Ueberschrift + Toggle sichtbar
   --------------------------------------------------------- */
@media (max-width: 767px) {

  .prod-mtoggle {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin: 4px 0 0 0;
    padding: 11px 14px;

    background: var(--soft, #f5f6f7);
    border: 1px solid var(--line, #e6e9ec);
    border-radius: 6px;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink, #1f2933);

    text-decoration: none;
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
  }

  .prod-mtoggle:hover,
  .prod-mtoggle:focus {
    color: var(--ink, #1f2933);
    text-decoration: none;
  }

  /* +/- Indikator rechts */
  .prod-mtoggle::after {
    content: "+";

    margin-left: 12px;

    font-size: 20px;
    line-height: 1;
    font-weight: 400;

    color: var(--orange, #ec9345);
  }

  .prod-mtoggle[aria-expanded="true"]::after {
    content: "\2013"; /* en dash = "offen" */
  }

  /* kleiner Abstand zwischen Toggle und aufgeklapptem Inhalt */
  .prod-mcollapse {
    margin-top: 6px;
  }

}
/* ---------------------------------------------------------
   Anwendungs-Kacheln: Slider nur am Handy (<=767px)
   Karte voll breit (eine pro Ansicht) + Punkte/Dots darunter.
   Desktop/Tablet bleiben das Raster.
   --------------------------------------------------------- */

/* Dots standardmaessig aus (Desktop/Tablet) */
.product-applications-section .application-dots {
  display: none;
}

@media (max-width: 767px) {

  .product-applications-section .application-grid {
    display: flex !important;
    grid-template-columns: none !important;   /* altes Raster aufheben */
    flex-wrap: nowrap !important;

    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;

    gap: 0;
    margin: 0;
    padding: 0;

    scrollbar-width: none;               /* Firefox: Scrollbar aus */
  }

  .product-applications-section .application-grid::-webkit-scrollbar {
    display: none;                        /* iOS / Chrome: Scrollbar aus */
  }

  .product-applications-section .application-card {
    flex: 0 0 100% !important;            /* eine Karte pro Ansicht, kein Anschnitt */
    width: 100% !important;
    min-width: 100% !important;

    scroll-snap-align: start;
  }

  /* Punkte / Dots unter dem Slider */
  .product-applications-section .application-dots {
    display: flex;
    justify-content: center;
    gap: 8px;

    margin-top: 14px;
  }

  .product-applications-section .application-dot {
    width: 8px;
    height: 8px;

    padding: 0;
    border: 0;
    border-radius: 50%;

    background: rgba(31, 41, 51, .22);    /* inaktiv */

    cursor: pointer;
    transition: background .2s ease, transform .2s ease;

    -webkit-tap-highlight-color: transparent;
  }

  .product-applications-section .application-dot.is-active {
    background: var(--orange, #ec9345);
    transform: scale(1.25);
  }

}

/* ---------------------------------------------------------
   Vergleichstabelle als Maschinen-Slider (Handy)
   Linke Spalte (Zeilennamen) fix, Maschinen-Spalten wischbar,
   Punkte darunter. Klasse am .table-container: .table-slider
   --------------------------------------------------------- */
.table-dots { display: none; }

@media (max-width: 767px) {

  .table-slider {
    padding: 10px 0 !important;          /* kein Seiten-Padding -> fixe Spalte buendig */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-left: 150px;
    scrollbar-width: none;
  }
  .table-slider::-webkit-scrollbar { display: none; }

  .table-slider .tech-table {
    min-width: 540px !important;
  }

  /* fixe linke Spalte = Zeilennamen */
  .table-slider .tech-table th:first-child,
  .table-slider .tech-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;

    width: 150px;
    min-width: 150px;
    max-width: 150px;

    box-shadow: 2px 0 5px rgba(0, 0, 0, .05);
  }
  .table-slider .tech-table td:first-child { background: #ffffff; }
  .table-slider .tech-table th:first-child { background: #f5f6f7; }

  /* Maschinen-Spalten: feste Breite + Einrasten */
  .table-slider .tech-table th:nth-child(n+2),
  .table-slider .tech-table td:nth-child(n+2) {
    min-width: 130px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  /* Punkte */
  .table-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
  }
  .table-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(31, 41, 51, .22);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .table-dot.is-active {
    background: var(--orange, #ec9345);
    transform: scale(1.25);
  }
}