/* ── LUDWIGSLUST ARBEITSMARKT & JOBS WIDGET (+10 KM) ──
   Farben abgestimmt auf das Portal Ludwigslust:
   Hauptgrün: #0D3C26 / Akzentgrün: #1e4d38 / Sand-Beige: #faf5ed / Rahmen: #ded3c4 / Text: #2b221b / Terracotta: #8a4b24
── */

.lwl-jobs-widget {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 6px 8px 6px !important;
  background: #faf5ed !important;
  border: 1px solid #ded3c4 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(43, 34, 27, 0.05) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  justify-content: flex-start !important;
  position: relative !important;
  font-family: inherit !important;
  overflow: hidden !important;
  container-type: inline-size !important;
  container-name: lwljobs !important;
}

/* Head */
.lwl-jobs-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.lwl-jobs-head-title {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.lwl-jobs-icon {
  color: #0D3C26 !important;
  flex-shrink: 0 !important;
}

.lwl-jobs-head-title strong {
  font-size: 12px !important;
  font-weight: 750 !important;
  color: #2b221b !important;
  margin: 0 !important;
  letter-spacing: -0.15px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}

.lwl-jobs-radius-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #ffffff !important;
  border: 1px solid #ded5c7 !important;
  color: #0D3C26 !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

.lwl-pulse-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #0D3C26 !important;
  box-shadow: 0 0 0 0 rgba(13, 60, 38, 0.6) !important;
  animation: lwlPulse 2.2s infinite !important;
}

@keyframes lwlPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(13, 60, 38, 0.6); }
  70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(13, 60, 38, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(13, 60, 38, 0); }
}

/* 4-Item Mini Statistics Grid */
.lwl-jobs-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
}

.lwl-stat-item {
  background: #ffffff !important;
  border: 1px solid #ded5c7 !important;
  border-radius: 7px !important;
  padding: 3px 2px 2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  min-width: 0 !important;
}

.lwl-stat-num {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #2b221b !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.lwl-stat-green {
  color: #0D3C26 !important;
}

.lwl-stat-accent {
  color: #8a4b24 !important;
}

.lwl-stat-lbl {
  font-size: 8px !important;
  font-weight: 650 !important;
  color: #6e6054 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  margin-top: 1px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: 100% !important;
  line-height: 1.15 !important;
}

/* Stack holding TWO jobs simultaneously */
.lwl-jobs-cards-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
}

.lwl-job-card {
  color: inherit !important;
  text-decoration: none !important;
  background: #ffffff !important;
  border: 1px solid #ded5c7 !important;
  border-radius: 9px !important;
  padding: 5px 7px !important;
  box-shadow: 0 2px 6px rgba(43, 34, 27, 0.03) !important;
  transition: opacity 0.22s ease, transform 0.22s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.lwl-job-card:hover {
  border-color: #0D3C26 !important;
  box-shadow: 0 4px 14px rgba(13, 60, 38, 0.1) !important;
  transform: translateY(-1px) !important;
}

.lwl-job-topline {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;
}

.lwl-job-dist-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3.5px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  color: #0D3C26 !important;
  background: rgba(13, 60, 38, 0.07) !important;
  border: 1px solid rgba(13, 60, 38, 0.16) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

.lwl-job-dist-tag span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.lwl-job-fresh-badge {
  font-size: 8.5px !important;
  font-weight: 750 !important;
  color: #8a4b24 !important;
  background: rgba(138, 75, 36, 0.08) !important;
  border: 1px solid rgba(138, 75, 36, 0.18) !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.lwl-job-title {
  margin: 1px 0 0 !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  color: #2b221b !important;
  line-height: 1.2 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  min-height: 1.2em !important;
}

.lwl-job-employer {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #6e6054 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 0 1 auto !important;
  min-height: 0 !important;
}

.lwl-job-details {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 1px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  min-width: 0 !important;
}

.lwl-job-pill {
  background: #f5f0e8 !important;
  color: #443a32 !important;
  font-size: 8.5px !important;
  font-weight: 650 !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  border: 1px solid #ded5c7 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

.lwl-job-pill-brand {
  background: rgba(13, 60, 38, 0.07) !important;
  color: #0D3C26 !important;
  border-color: rgba(13, 60, 38, 0.18) !important;
}

/* Footer & Controls */
.lwl-jobs-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
  margin-top: auto !important;
}

.lwl-jobs-nav-dots {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.lwl-job-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #d6cbba !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.lwl-job-dot.is-active {
  width: 15px !important;
  border-radius: 999px !important;
  background: #0D3C26 !important;
}

.lwl-jobs-nav-btns {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

.lwl-job-nav-btn {
  background: #ffffff !important;
  border: 1px solid #ded5c7 !important;
  color: #2b221b !important;
  border-radius: 4px !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
}

.lwl-job-nav-btn:hover {
  background: #0D3C26 !important;
  border-color: #0D3C26 !important;
  color: #ffffff !important;
}

.lwl-job-apply-link {
  font-size: 10.5px !important;
  font-weight: 750 !important;
  color: #0D3C26 !important;
  text-decoration: none !important;
  background: #ffffff !important;
  border: 1px solid #ded5c7 !important;
  padding: 2.5px 8px !important;
  border-radius: 4px !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.lwl-job-apply-link:hover {
  background: #0D3C26 !important;
  color: #ffffff !important;
  border-color: #0D3C26 !important;
}
/* Jobs sit on the same 5-column track as the tiles: column 1 under
   Gesundheit. News fills Sport through Mobilität, gutters included. */
@media (min-width: 1025px) {
  .v2-discover-primary:has(#cardJobsWidget) {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .v2-discover-primary > .v2-bottom-left-stack:has(#cardJobsWidget) {
    grid-column: 1 / 2 !important; /* compact: 1 tile col */
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .v2-discover-primary > .v2-city-today {
    grid-column: 2 / -1 !important;
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
  }
}

@container lwljobs (max-width: 220px) {
  .lwl-stat-num {
    font-size: 11px !important;
  }

  .lwl-stat-lbl {
    font-size: 7px !important;
    line-height: 1.05 !important;
  }

  .lwl-jobs-nav-dots {
    display: none !important;
  }

  .lwl-jobs-footer {
    flex-wrap: nowrap !important;
  }

  .lwl-job-card {
    padding: 3px 6px !important;
    gap: 1px !important;
  }

  .lwl-job-topline {
    min-height: 0 !important;
  }

  .lwl-job-fresh-badge {
    font-size: 7.5px !important;
    padding: 0 3px !important;
  }

  .lwl-job-title {
    font-size: 11px !important;
    line-height: 1.15 !important;
    min-height: 0 !important;
    -webkit-line-clamp: 1 !important;
  }

  .lwl-job-employer {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }
}

/* Dense list mode 20261005 */
.lwl-jobs-widget--dense {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: Arial, Helvetica, sans-serif;
}
.lwl-jobs-meta {
  margin: 0;
  font-size: 10px;
  line-height: 1.35;
  color: #5c5348;
  font-weight: 600;
}
.lwl-jobs-dense-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}
.lwl-job-row-link {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 7px;
  border-radius: 8px;
  border: 1px solid #e6dccf;
  background: #fffdf8;
  text-decoration: none;
  color: inherit;
}
.lwl-job-row-title {
  font-weight: 750;
  font-size: 11.5px;
  line-height: 1.25;
  color: #17130f;
}
.lwl-job-row-sub {
  font-size: 10px;
  color: #6e6054;
  font-weight: 600;
}
.lwl-job-row-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.lwl-job-row-date { font-size: 9.5px; color: #8a7a6c; font-weight: 600; }
.lwl-job-row-chip {
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #1e4d38;
  background: #e8efe9;
  border: 1px solid #c9d9cf;
  border-radius: 999px;
  padding: 2px 5px;
}
.lwl-jobs-dense-foot { flex: 0 0 auto; }
.lwl-jobs-more {
  font-size: 11.5px;
  font-weight: 750;
  color: #1e4d38;
  text-decoration: none;
}
@media (min-width: 1025px) {
  .v2-discover-primary > .v2-bottom-left-stack:has(#cardJobsWidget) {
    grid-column: 1 / 2 !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 340px !important;
  }
  .v2-discover-primary > .v2-city-today {
    grid-column: 2 / -1 !important;
  }
}

/* Rotate counter + carousel transition 20261005 */
.lwl-jobs-dense-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.lwl-jobs-rotate-counter {
  font-size: 10.5px;
  font-weight: 700;
  color: #1e4d38;
}
.lwl-jobs-dense-list {
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.lwl-jobs-dense-list.is-out {
  opacity: 0;
  transform: translateY(4px);
}
.lwl-jobs-dense-list.is-in {
  opacity: 1;
  transform: translateY(0);
}