/* Theming */
:root{
  --sf-ts-card-bg:#fff;
  --sf-ts-text:#222;
  --sf-ts-muted:#667085;
  /* Subtler shadow with visible spread so it shows around all sides */
  --sf-ts-shadow: 0 6px 14px 3px rgba(17,24,39,.06);
  --sf-ts-radius:16px;
  --sf-ts-gap:20px;
  --sf-ts-container-pad:32px;  /* outer padding around whole component */
  --sf-ts-wrapper-mt:24px;
  --sf-ts-wrapper-mb:24px;
  --sf-ts-card-border:#e6e6e6;
  --sf-ts-gutter-x:24px;       /* inner left/right gutter inside track to avoid clipping */
  --sf-ts-gutter-y:16px;       /* inner top/bottom gutter inside track to avoid clipping */
}

.sf-ts-wrapper{
  position:relative; width:100%;
  padding: var(--sf-ts-container-pad);
  margin-top: var(--sf-ts-wrapper-mt);
  margin-bottom: var(--sf-ts-wrapper-mb);
  overflow: visible; /* never clip card shadows at wrapper */
}
.sf-ts-wrapper, .sf-ts-wrapper * { box-sizing: border-box; }

/* Grid (static) */
.sf-ts-grid{ display:grid; gap:var(--sf-ts-gap); }
.sf-ts-grid.sf-ts-cols-1{ grid-template-columns: 1fr; }
.sf-ts-grid.sf-ts-cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.sf-ts-grid.sf-ts-cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }

@media (max-width: 1024px){
  .sf-ts-grid.sf-ts-cols-3{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px){
  .sf-ts-grid.sf-ts-cols-3, .sf-ts-grid.sf-ts-cols-2{ grid-template-columns: 1fr; }
  :root{ --sf-ts-container-pad:20px; --sf-ts-gap:16px; --sf-ts-gutter-x:16px; }
}

/* Slider */
.sf-ts-wrapper{ --sf-ts-visible:3; }
.sf-ts-wrapper[data-visible="2"]{ --sf-ts-visible:2; }
.sf-ts-wrapper[data-visible="1"]{ --sf-ts-visible:1; }

/* The track needs horizontal overflow hidden for scroll, but we add inner padding (=gutters)
   so card shadows aren't clipped on any side. Allow vertical overflow visible. */
.sf-ts-track{
  display:flex;
  gap:var(--sf-ts-gap);
  overflow-x:hidden;
  overflow-y:visible;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding: var(--sf-ts-gutter-y) var(--sf-ts-gutter-x);
  margin-bottom:20px; /* space above dots */
}
.sf-ts-slide{
  flex: 0 0 calc((100% - (var(--sf-ts-gap) * (var(--sf-ts-visible) - 1))) / var(--sf-ts-visible));
  scroll-snap-align:start;
}

.sf-ts-controls{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:4px; /* small, main spacing done by track margin-bottom */
}
.sf-ts-prev, .sf-ts-next{
  background:#f7f7f7; border:1px solid #e5e7eb; color:#444; padding:6px 10px; border-radius:10px; cursor:pointer;
}

/* Dots – robust gegen Theme-Stile */
.sf-ts-dots{ display:flex; gap:10px; align-items:center; justify-content:center; }
.sf-ts-dots button{
  appearance:none; -webkit-appearance:none; border:0; width:10px; height:10px;
  aspect-ratio:1 / 1; border-radius:50%;
  background:#d1d5db; padding:0; display:block; box-shadow:none;
}
.sf-ts-dots button[aria-current="true"]{ background:#666; }

/* Card */
.sf-ts-card{
  height:100%; background:var(--sf-ts-card-bg); color:var(--sf-ts-text);
  border-radius:var(--sf-ts-radius);
  box-shadow:var(--sf-ts-shadow);
  border:1px solid var(--sf-ts-card-border);
  padding:22px; display:flex; flex-direction:column; gap:12px;
}
.sf-ts-title{ margin:0; font-size:1.06rem; }
.sf-ts-quote{ margin:0; line-height:1.6; font-style: italic; color:#0f3b3b; }
.sf-ts-meta{ margin-top:auto; display:flex; flex-direction:column; gap:2px; }
.sf-ts-name{ font-weight:600; }
.sf-ts-company a, .sf-ts-company span{ color:var(--sf-ts-muted); font-size:.95rem; text-decoration:none; }
.sf-ts-avatar{ width:56px; height:56px; border-radius:50%; overflow:hidden; }
.sf-ts-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.sf-ts-rating{ display:flex; gap:2px; margin-top:6px; }
.sf-ts-star{ display:block; }

/* Focus */
.sf-ts-controls button, .sf-ts-dots button{ line-height:1; }
.sf-ts-controls button:focus, .sf-ts-dots button:focus{ outline:2px solid #666; outline-offset:2px; }

/* Visible=1 special */
.sf-ts-wrapper[data-visible="1"] .sf-ts-slide{ flex-basis:100%; }