/* Leistungs-Slider "Unsere Dienstleistungen" — Original-CSS des Kunden,
   ausgelagert aus den Inline-<style>-Bloecken (ein Fakt, ein Ort). */
.lk-widget-container {
  --lk-accent: #FADF1E;
  --lk-yellow: #FADF1E;
  --lk-rounding: 16px;
  --lk-font-title: 'Bebas Neue', cursive;
  --lk-font-body: 'Roboto', sans-serif;
  --lk-speed: 0.4s;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.lk-slider-viewport { overflow: hidden; width: 100%; cursor: grab; }
.lk-slider-viewport:active { cursor: grabbing; }

.lk-card-wrapper {
  display: flex;
  gap: 20px;
  transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
  user-select: none;
}

.lk-card {
  flex: 0 0 calc(25% - 15px);
  height: 480px;
  position: relative;
  border-radius: var(--lk-rounding);
  overflow: hidden;
  text-decoration: none;
  background-color: #000;
}

.lk-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform var(--lk-speed) ease, opacity var(--lk-speed) ease;
  opacity: 0.85;
  display: block;
}

.lk-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 10%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: left;
  transition: background var(--lk-speed) ease;
  box-sizing: border-box;
  z-index: 2;
}

.lk-card h2 {
  font-family: var(--lk-font-title);
  font-size: 2.2rem;
  color: #FADF1E;
  margin: 0 0 8px 0;
  line-height: 1;
  transition: color var(--lk-speed) ease;
}

.lk-card p {
  font-family: var(--lk-font-body);
  font-size: 0.95rem;
  color: #fff;
  margin: 0 0 15px 0;
  opacity: 0.85;
}

.lk-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--lk-font-body);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--lk-yellow);
}

.lk-card li { display: flex; align-items: flex-start; line-height: 1.2; }
.lk-card li::before { content: "\2022"; margin-right: 8px; color: var(--lk-yellow); flex-shrink: 0; }

.lk-card:hover img { transform: scale(1.1); opacity: 0.6; }
.lk-card:hover .lk-overlay { background: linear-gradient(to top, rgba(250, 223, 30, 0.9) 0%, rgba(0, 0, 0, 0.4) 100%); }
.lk-card:hover h2 { color: #000; }
.lk-card:hover p, .lk-card:hover ul { color: #000; }
.lk-card:hover li::before { color: #fff; }

.lk-nav-bar { display: flex; justify-content: flex-start; align-items: center; margin-top: 30px; gap: 20px; }
.lk-progress-track { width: 150px; height: 2px; background: #e0e0e0; position: relative; }
.lk-progress-fill { position: absolute; height: 100%; background: var(--lk-accent); left: 0; transition: left 0.8s cubic-bezier(0.2, 1, 0.3, 1), width 0.4s ease; }
.lk-numbers { display: flex; gap: 15px; font-family: var(--lk-font-title); font-size: 1.8rem; color: #ccc; }
.lk-num { cursor: pointer; transition: color 0.3s ease; background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.lk-num.active { color: #333; }
.lk-num:focus-visible { outline: 2px solid var(--lk-accent); outline-offset: 3px; }

@media (max-width: 1024px) { .lk-card { flex: 0 0 calc(50% - 10px); } }

@media (max-width: 600px) {
  .lk-card { flex: 0 0 100%; }
  /* Bei einer Karte pro Seite werden aus 11 Seiten 11 Ziffern — dort fuehrt
     die Fortschrittsleiste, bedient wird per Wischen. */
  .lk-numbers { display: none; }
  .lk-progress-track { width: 100%; }
}

@media (min-width: 1024px) {
  .lk-card ul { flex-direction: row; flex-wrap: wrap; gap: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .lk-card-wrapper, .lk-progress-fill, .lk-card img, .lk-overlay { transition: none; }
}