/* ==========================================================================
   transformis® · Card-Slider Component (Rebranding 2026)
   --------------------------------------------------------------------------
   EIN Slider fuer Referenzen, Beitraege, und zukuenftige Einsaetze.
   JS: assets/js/tm-slider.js (initialisiert alle .tm-slider auf der Seite)

   Verwendung:
     Referenzen → <section class="tm-slider">
     Beitraege  → <section class="tm-slider tm-slider--white-nav">

   Variablen (ueberschreibbar pro Instanz via inline style oder Modifier):
     --tm-slider-card-w   Kartenbreite    (default 422px)
     --tm-slider-img-h    Bildhoehe       (default 295px)
     --tm-slider-text-h   Textbox-Hoehe   (default 280px)
     --tm-slider-gap      Luecke          (default 16px)
     --tm-slider-arrow-gap Pfeil-Abstand  (default 100px)
   ========================================================================== */

/* ── Basis-Variablen ── */
.tm-slider {
  --_card-w:   var(--tm-slider-card-w, 422px);
  --_img-h:    var(--tm-slider-img-h, 220px);
  --_text-h:   var(--tm-slider-text-h, 310px);
  --_card-h:   calc(var(--_img-h) + var(--_text-h));
  --_gap:      var(--tm-slider-gap, 16px);
  --_arrow-gap:var(--tm-slider-arrow-gap, 100px);
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* ── Stage: 3 Karten Desktop ── */
.tm-slider__stage {
  position: relative;
  width: calc(3 * var(--_card-w) + 2 * var(--_gap));
  height: var(--_card-h);
  margin: 0 auto;
}

/* ── Viewport (Overflow-Clip) ── */
.tm-slider__viewport {
  width: 100%;
  height: var(--_card-h);
  overflow: hidden;
  touch-action: pan-y;
}

/* ── Track (Flex-Container, wird per JS verschoben) ── */
.tm-slider__track {
  display: flex;
  gap: var(--_gap);
  transition: transform var(--tm-transition-slow);
}

/* ── Dragging State ── */
.tm-slider.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.tm-slider.is-dragging .tm-slider__track {
  transition: none !important;
}

/* ==========================================================================
   Karten
   ========================================================================== */

.tm-slider__card {
  flex: 0 0 var(--_card-w);
  width: var(--_card-w);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
  border-radius: 0;
  overflow: hidden;
}

/* ── Bild ── */
.tm-slider__img {
  display: block;
  width: var(--_card-w);
  height: var(--_img-h);
  overflow: hidden;
  text-decoration: none;
}

.tm-slider__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Bild mit weissem Hintergrund ── */
.tm-slider__img {
  background: var(--tm-white);
}

/* ── Logo-Variante: Bild mit Abstand, nicht beschnitten ── */
.tm-slider__img--contain,
.tm-slider__img--contain-sm {
  padding: 10px 30px;
}

.tm-slider__img--contain img,
.tm-slider__img--contain-sm img {
  object-fit: contain;
}

/* ── Logo etwas kleiner darstellen ── */
.tm-slider__img--contain-sm {
  padding: 25px 50px;
}

/* ── Textbox ── */
.tm-slider__body {
  width: var(--_card-w);
  height: var(--_text-h);
  background: var(--tm-white);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ── Titel: head-m (28px, ExtraBold, 130%) ── */
.tm-slider__title {
  margin: 0 0 14px;
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-extrabold);
  font-size: 28px;
  line-height: 1.3;
  color: var(--tm-blue);
  min-height: 73px;
}

.tm-slider__title a {
  color: inherit;
  text-decoration: none;
}

.tm-slider__title a:hover {
  text-decoration: underline;
}

/* ── Copy: body-m (18px, Regular, 160%) ── */
.tm-slider__copy {
  margin: 0 0 25px;
  font-family: var(--tm-font-body);
  font-weight: var(--tm-fw-regular);
  font-size: 18px;
  line-height: 1.6;
  color: var(--tm-black);
}

/* ── "Mehr lesen" Link (Legacy, inline im Copy-Text) ── */
.tm-slider__link {
  color: var(--tm-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.tm-slider__link:hover {
  border-color: var(--tm-blue);
}

/* ── Datum (Beitraege-Variante) ── */
.tm-slider__date {
  display: block;
  margin: 6px 0 16px;
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-regular);
  font-size: 14px;
  line-height: 1.4;
  color: var(--tm-black);
}

/* ── Button in Textbox: immer am unteren Rand ── */
.tm-slider__body .tm-btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
   Pfeile: Weisse Kreise (54×54) mit dunkelblauem Pfeil
   ========================================================================== */

.tm-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  background: var(--tm-white);
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  display: grid;
  place-items: center;
  box-shadow: none;
  transition: opacity var(--tm-transition);
}

.tm-slider__arrow:hover {
  background: var(--tm-green);
}

.tm-slider__arrow--prev {
  left: calc(-1 * var(--_arrow-gap));
}

.tm-slider__arrow--next {
  right: calc(-1 * var(--_arrow-gap));
}

/* Pfeil-SVG: dunkelblau, 17×20px */
.tm-slider__arrow svg {
  width: 17px;
  height: 20px;
}

.tm-slider__arrow svg path {
  fill: var(--tm-blue);
}

/* ==========================================================================
   Dots / Bullets: blau default, gruen aktiv
   ========================================================================== */

.tm-slider__dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 54px;
}

.tm-slider__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--tm-blue);
  background: var(--tm-blue);
  cursor: pointer;
  padding: 0;
  transition: background var(--tm-transition), border-color var(--tm-transition);
}

.tm-slider__dot.is-active {
  background: var(--tm-green);
  border-color: var(--tm-green);
}

/* ==========================================================================
   Modifier: --white-nav (weisse Pfeile & Dots, z.B. auf Bild-BG)
   ========================================================================== */

/* Karten auf dunklem Hintergrund: staerkerer Shadow */
.tm-slider--white-nav .tm-slider__card {
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.3);
}

.tm-slider--white-nav .tm-slider__arrow {
  background: rgba(255, 255, 255, 0.9);
}

.tm-slider--white-nav .tm-slider__arrow:hover {
  background: var(--tm-green);
}

.tm-slider--white-nav .tm-slider__arrow svg path {
  fill: var(--tm-blue);
}

.tm-slider--white-nav .tm-slider__dot {
  border-color: var(--tm-white);
  background: var(--tm-white);
}

.tm-slider--white-nav .tm-slider__dot.is-active {
  background: var(--tm-green);
  border-color: var(--tm-green);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* ── Tablet: 2 Karten ── */
@media (max-width: 1199px) {
  .tm-slider__stage {
    width: calc(2 * var(--_card-w) + 1 * var(--_gap));
  }
  .tm-slider {
    --_arrow-gap: 80px;
  }
}

/* ── Kleine Tablets: 1 Karte, Pfeile noch sichtbar ── */
@media (max-width: 864px) {
  .tm-slider__stage {
    width: var(--_card-w);
  }
  .tm-slider {
    --_arrow-gap: 60px;
  }
}

/* ── Mobil: 1 Karte, keine Pfeile ── */
@media (max-width: 699px) {
  .tm-slider__stage {
    width: var(--_card-w);
  }
  .tm-slider {
    --_arrow-gap: 40px;
  }
  .tm-slider__arrow {
    display: none !important;
  }
}

/* ── Mobil: kleinere Karten (optional per Modifier) ── */
@media (max-width: 900px) {
  .tm-slider--compact-mobile {
    --_card-w: 322px;
  }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .tm-slider__track {
    transition: none;
  }
}