/**
 * Vitalis-Card-Design für das Modul mod_vitalisjobs.
 *
 * Version 0.1.9:
 * - Modul-CSS ist konsequent unter .vk-jobs/.vk-jobs-module gekapselt.
 * - Die Spaltenlogik nutzt Klassen plus Container Query: im Artikel sind zwei
 *   Cards möglich, in schmalen Sidebars wird zuverlässig auf eine Spalte reduziert.
 * - Bildrundungen, Buttonabstände und Card-Abstände greifen direkt am Modulwrapper
 *   über serverseitig begrenzte CSS-Variablen.
 * - Keine Abhängigkeit von artikelinternem CSS oder globaler custom.css.
 */
.vk-jobs,
.vk-jobs-module {
  --vk-jobs-green: var(--vitalis-green, #47a54f);
  --vk-jobs-green-dark: var(--vitalis-green-dark, #2f7d36);
  --vk-jobs-text: #243034;
  --vk-jobs-heading: #0b3d2a;
  --vk-jobs-muted: #596367;
  --vk-jobs-border: rgba(71, 165, 79, .22);
  --vk-jobs-surface: #fff;
  --vk-jobs-soft: #f4faf5;
  --vk-jobs-radius: .75rem;
  --vk-jobs-image-radius: .8rem;
  --vk-jobs-card-gap-x: 24px;
  --vk-jobs-card-gap-y: 28px;
  --vk-jobs-filter-gap: 12px;
  --vk-jobs-button-gap-x: 10px;
  --vk-jobs-button-gap-y: 12px;
  --vk-jobs-actions-top-gap: 12px;
  --vk-jobs-portal-footer-gap: 20px;
  --vk-jobs-shadow: 0 .55rem 1.35rem rgba(31, 55, 36, .08);
  container-name: vk-jobs-module;
  container-type: inline-size;
  color: var(--vk-jobs-text);
}

/* Optionaler Frontend-Modultitel, unabhängig vom Joomla-Modul-Chrome. */
.vk-jobs .vk-jobs__module-title {
  margin: 0 0 1rem !important;
  color: var(--vk-jobs-heading) !important;
  line-height: 1.25 !important;
}
.vk-jobs--title-align-left .vk-jobs__module-title { text-align: left !important; }
.vk-jobs--title-align-center .vk-jobs__module-title { text-align: center !important; }
.vk-jobs--title-align-right .vk-jobs__module-title { text-align: right !important; }

/* Bei einspaltiger Darstellung keine erzwungene Gleichhöhe, damit Cards nicht unnötig Luft ziehen. */
.vk-jobs-module--cols-1 .vk-jobs__grid--equal .vk-job-card,
.vk-jobs-module--cols-1 .vk-jobs__grid--equal .vk-job-card__body {
  height: auto !important;
}
.vk-jobs-module--cols-1 .vk-job-card__body {
  flex: 0 1 auto !important;
}

/* Radiuswerte aus der Adminauswahl. */
.vk-jobs--image-radius-none { --vk-jobs-image-radius: 0; }
.vk-jobs--image-radius-small { --vk-jobs-image-radius: .35rem; }
.vk-jobs--image-radius-vitalis { --vk-jobs-image-radius: .8rem; }
.vk-jobs--image-radius-large { --vk-jobs-image-radius: 1.15rem; }

/* Bildmodus: proportional ist Standard und vermeidet Beschnitt. Cover bleibt optional. */
.vk-jobs--image-fit-proportional .vk-job-card__media img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
.vk-jobs--image-fit-original .vk-job-card__media img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  object-fit: contain !important;
}
.vk-jobs--image-fit-cover .vk-job-card__media { aspect-ratio: 16 / 9; }
.vk-jobs--image-fit-cover .vk-job-card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.vk-jobs__notice {
  margin: 0 0 1.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--vk-jobs-border);
  border-radius: var(--vk-jobs-radius);
  background: var(--vk-jobs-soft);
}

.vk-jobs__notice--warning { border-left: .3rem solid #b58400; }
.vk-jobs__notice--error { border-left: .3rem solid #b3261e; }
.vk-jobs__notice--info { border-left: .3rem solid var(--vk-jobs-green); }
.vk-jobs__notice-text { margin: 0 0 .75rem; }
.vk-jobs__notice-text:last-child { margin-bottom: 0; }
.vk-jobs__notice-link { margin-top: .25rem; }

.vk-jobs__filters {
  margin: 0 0 var(--vk-jobs-filter-gap) !important;
  padding: 1rem;
  border: 1px solid var(--vk-jobs-border);
  border-radius: var(--vk-jobs-radius);
  background: var(--vk-jobs-soft);
}

.vk-jobs__filters-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--vk-jobs-filter-gap) !important;
  align-items: start;
}

.vk-jobs__field--action { padding-top: 0; }
.vk-jobs__field { min-width: 0; }

.vk-jobs__field label {
  display: block;
  margin: 0 0 .35rem;
  color: var(--vk-jobs-text);
  font-weight: 700;
}

.vk-jobs :where(input.form-control, select.form-select) {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 2.65rem;
  border-color: var(--vk-jobs-border);
  border-radius: .55rem;
}

.vk-jobs .vk-jobs__grid {
  display: grid !important;
  width: 100%;
  min-width: 0;
  grid-template-columns: 1fr;
  column-gap: var(--vk-jobs-card-gap-x) !important;
  row-gap: var(--vk-jobs-card-gap-y) !important;
  gap: var(--vk-jobs-card-gap-y) var(--vk-jobs-card-gap-x) !important;
  align-items: stretch;
}

.vk-jobs .vk-jobs__grid--columns-1 { grid-template-columns: 1fr !important; }

@media (min-width: 768px) {
  .vk-jobs .vk-jobs__grid--columns-2,
  .vk-jobs .vk-jobs__grid--columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (min-width: 1200px) {
  .vk-jobs .vk-jobs__grid--columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

.vk-jobs__grid--equal .vk-job-card,
.vk-jobs__grid--equal .vk-job-card__body { height: 100%; }

.vk-jobs .vk-job-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--vk-jobs-border) !important;
  border-radius: var(--vk-jobs-radius) !important;
  background: var(--vk-jobs-surface);
  box-shadow: var(--vk-jobs-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.vk-jobs .vk-job-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--vk-jobs-green) 45%, var(--vk-jobs-border));
  box-shadow: 0 .7rem 1.6rem rgba(31, 55, 36, .13);
}

.vk-jobs .vk-job-card[hidden] { display: none !important; }

.vk-jobs .vk-job-card__media {
  overflow: hidden !important;
  margin: 1rem 1rem 0;
  border-radius: var(--vk-jobs-image-radius) !important;
  background: var(--vk-jobs-soft);
  text-align: center;
}

.vk-jobs .vk-job-card__media img,
.vk-jobs img.vk-job-card__image {
  display: block;
  max-width: 100% !important;
  height: auto !important;
  border-radius: inherit !important;
}

.vk-jobs.vk-jobs--image-radius-none .vk-job-card__media,
.vk-jobs.vk-jobs--image-radius-none .vk-job-card__media img { border-radius: 0 !important; }
.vk-jobs.vk-jobs--image-radius-small .vk-job-card__media,
.vk-jobs.vk-jobs--image-radius-small .vk-job-card__media img { border-radius: .35rem !important; }
.vk-jobs.vk-jobs--image-radius-vitalis .vk-job-card__media,
.vk-jobs.vk-jobs--image-radius-vitalis .vk-job-card__media img { border-radius: .8rem !important; }
.vk-jobs.vk-jobs--image-radius-large .vk-job-card__media,
.vk-jobs.vk-jobs--image-radius-large .vk-job-card__media img { border-radius: 1.15rem !important; }

.vk-jobs .vk-job-card__body {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1.15rem;
}

.vk-jobs .vk-job-card__eyebrow {
  margin: 0 0 .45rem;
  color: var(--vk-jobs-green-dark);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.vk-jobs .vk-job-card__title {
  margin: 0 0 .75rem;
  color: var(--vk-jobs-heading);
  font-size: clamp(1.18rem, 2vw, 1.5rem);
  line-height: 1.25;
}

.vk-jobs .vk-job-card__teaser {
  margin: 0 0 1rem;
  color: var(--vk-jobs-muted);
  line-height: 1.6;
}

.vk-jobs .vk-job-card__meta {
  display: grid;
  gap: .55rem;
  margin: 0 0 1rem;
}

.vk-jobs .vk-job-card__meta-item {
  display: grid;
  grid-template-columns: minmax(7.5rem, .8fr) 1.2fr;
  gap: .65rem;
  padding-top: .55rem;
  border-top: 1px solid var(--vk-jobs-border);
}

.vk-jobs .vk-job-card__meta dt { font-weight: 700; }
.vk-jobs .vk-job-card__meta dd { margin: 0; }
.vk-jobs .vk-job-card__meta-item--salary dd { color: var(--vk-jobs-green-dark); font-weight: 700; }

.vk-jobs .vk-job-card__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  column-gap: var(--vk-jobs-button-gap-x) !important;
  row-gap: var(--vk-jobs-button-gap-y) !important;
  gap: var(--vk-jobs-button-gap-y) var(--vk-jobs-button-gap-x) !important;
  margin-top: var(--vk-jobs-actions-top-gap);
  margin-bottom: 0 !important;
  padding-top: 0;
}

.vk-jobs--actions-position-end .vk-jobs__grid--equal .vk-job-card__actions {
  margin-top: auto !important;
  padding-top: var(--vk-jobs-actions-top-gap) !important;
}
.vk-jobs--actions-position-content .vk-job-card__actions {
  margin-top: var(--vk-jobs-actions-top-gap) !important;
}
.vk-jobs--job-buttons-align-left .vk-job-card__actions { justify-content: flex-start !important; }
.vk-jobs--job-buttons-align-center .vk-job-card__actions { justify-content: center !important; }
.vk-jobs--job-buttons-align-right .vk-job-card__actions { justify-content: flex-end !important; }
.vk-jobs .vk-job-card__actions > .vk-job-card__button {
  margin: 0 !important;
}

.vk-jobs .vk-job-card__button,
.vk-jobs .vk-jobs__reset,
.vk-jobs .vk-jobs__notice-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  border-radius: .55rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none !important;
  white-space: normal;
}

.vk-jobs--button-size-small :where(.vk-job-card__button,.vk-jobs__reset,.vk-jobs__notice-link,.vk-jobs__portal-link--button) { min-height: 2.25rem !important; padding: .45rem .9rem !important; font-size: .92rem !important; }
.vk-jobs--button-size-medium :where(.vk-job-card__button,.vk-jobs__reset,.vk-jobs__notice-link,.vk-jobs__portal-link--button) { min-height: 2.55rem !important; padding: .58rem 1.15rem !important; }
.vk-jobs--button-size-large :where(.vk-job-card__button,.vk-jobs__reset,.vk-jobs__notice-link,.vk-jobs__portal-link--button) { min-height: 2.9rem !important; padding: .72rem 1.35rem !important; font-size: 1.04rem !important; }

.vk-jobs .vk-job-card__button { flex: 0 1 auto; }

.vk-jobs .btn-primary,
.vk-jobs .vk-job-card__button.btn-primary {
  border-color: var(--vk-jobs-green) !important;
  background-color: var(--vk-jobs-green) !important;
  color: #fff !important;
}

.vk-jobs .btn-primary:hover,
.vk-jobs .btn-primary:focus-visible,
.vk-jobs .vk-job-card__button.btn-primary:hover,
.vk-jobs .vk-job-card__button.btn-primary:focus-visible {
  border-color: var(--vk-jobs-green-dark) !important;
  background-color: var(--vk-jobs-green-dark) !important;
  color: #fff !important;
}

.vk-jobs .btn-outline-primary,
.vk-jobs .vk-job-card__button.btn-outline-primary,
.vk-jobs .vk-jobs__reset,
.vk-jobs .vk-jobs__notice-link {
  border: 1px solid var(--vk-jobs-green) !important;
  background-color: #fff !important;
  color: var(--vk-jobs-green-dark) !important;
}

.vk-jobs .btn-outline-primary:hover,
.vk-jobs .btn-outline-primary:focus-visible,
.vk-jobs .vk-job-card__button.btn-outline-primary:hover,
.vk-jobs .vk-job-card__button.btn-outline-primary:focus-visible,
.vk-jobs .vk-jobs__reset:hover,
.vk-jobs .vk-jobs__reset:focus-visible,
.vk-jobs .vk-jobs__notice-link:hover,
.vk-jobs .vk-jobs__notice-link:focus-visible {
  border-color: var(--vk-jobs-green-dark) !important;
  background-color: var(--vk-jobs-green-dark) !important;
  color: #fff !important;
}

.vk-jobs :is(a, button, input, select):focus-visible {
  outline: .2rem solid color-mix(in srgb, var(--vk-jobs-green) 55%, #fff);
  outline-offset: .15rem;
}

.vk-jobs__empty {
  margin: 1.25rem 0 0;
  padding: 1rem;
  border-radius: var(--vk-jobs-radius);
  background: var(--vk-jobs-soft);
  text-align: center;
}

.vk-jobs__portal-footer {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.vk-jobs--portal-divider-box .vk-jobs__portal-footer {
  padding: .95rem 1.05rem;
  border: 1px solid var(--vk-jobs-border);
  border-radius: var(--vk-jobs-radius);
  background: var(--vk-jobs-soft);
}
.vk-jobs--portal-divider-line .vk-jobs__portal-footer {
  padding: 1rem 0 0;
  border-top: 1px solid var(--vk-jobs-border);
  background: transparent;
}
.vk-jobs--portal-divider-none .vk-jobs__portal-footer { padding: 0; border: 0; background: transparent; }
.vk-jobs--portal-align-left .vk-jobs__portal-footer { text-align: left; }
.vk-jobs--portal-align-center .vk-jobs__portal-footer { text-align: center; }
.vk-jobs--portal-align-right .vk-jobs__portal-footer { text-align: right; }

.vk-jobs__portal-footer--top { margin: 0 0 var(--vk-jobs-portal-footer-gap) !important; }
.vk-jobs__portal-footer--bottom { margin: var(--vk-jobs-portal-footer-gap) 0 0 !important; }

.vk-jobs__portal-footer-text {
  margin: 0 0 .75rem;
  color: var(--vk-jobs-muted);
}

.vk-jobs__portal-link--button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  border-radius: .55rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none !important;
  white-space: normal;
}

.vk-jobs__portal-link--text {
  color: var(--vk-jobs-green-dark) !important;
  font-weight: 700;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

.vk-jobs__portal-link--text:hover,
.vk-jobs__portal-link--text:focus-visible {
  color: var(--vk-jobs-green-dark) !important;
  text-decoration-thickness: .12em;
}

/* In schmalen Modulcontainern nur das Layout vereinfachen, nicht die Card-Optik entfernen. */
@container vk-jobs-module (max-width: 639px) {
  .vk-jobs .vk-jobs__grid {
    grid-template-columns: 1fr !important;
  }

  .vk-jobs .vk-job-card__actions {
    flex-direction: column !important;
    align-items: flex-start;
    column-gap: var(--vk-jobs-button-gap-x) !important;
    row-gap: var(--vk-jobs-button-gap-y) !important;
  }

  .vk-jobs--job-buttons-align-center .vk-job-card__actions { align-items: center; }
  .vk-jobs--job-buttons-align-right .vk-job-card__actions { align-items: flex-end; }

  .vk-jobs .vk-job-card__meta-item {
    grid-template-columns: 1fr;
    gap: .2rem;
  }

  .vk-jobs--buttons-full-width-narrow .vk-job-card__actions,
  .vk-jobs--buttons-full-width-narrow .vk-jobs__filters-grid {
    align-items: stretch;
  }

  .vk-jobs--buttons-full-width-narrow .vk-job-card__button,
  .vk-jobs--buttons-full-width-narrow .vk-jobs__reset,
  .vk-jobs--buttons-full-width-narrow .vk-jobs__portal-link--button,
  .vk-jobs--buttons-full-width-narrow .vk-jobs__notice-link {
    width: 100%;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 767.98px) {
    .vk-jobs .vk-jobs__grid { grid-template-columns: 1fr !important; }
    .vk-jobs .vk-job-card__actions {
      flex-direction: column !important;
      align-items: flex-start;
      row-gap: var(--vk-jobs-button-gap-y) !important;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .vk-jobs .vk-job-card { transition: none; }
  .vk-jobs .vk-job-card:hover { transform: none; }
}

/* Version 0.1.9: zusätzliche Kompatibilität zu den Vitalis-Modulbuttons. */
.vk-jobs .vk-module__actions.vk-job-card__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--vk-jobs-button-gap-y) var(--vk-jobs-button-gap-x) !important;
}
.vk-jobs .vk-module__btn.vk-job-card__button,
.vk-jobs .vk-module__btn.vk-jobs__portal-link--button,
.vk-jobs .vk-module__btn.vk-jobs__reset {
  margin: 0 !important;
  text-decoration: none !important;
}
.vk-jobs .vk-module__btn--primary-green {
  border-color: var(--vk-jobs-green) !important;
  background-color: var(--vk-jobs-green) !important;
  color: #fff !important;
}
.vk-jobs .vk-module__btn--secondary-green {
  border-color: var(--vk-jobs-green) !important;
  background-color: #fff !important;
  color: var(--vk-jobs-green-dark) !important;
}
.vk-jobs .vk-module__btn--primary-green:hover,
.vk-jobs .vk-module__btn--primary-green:focus-visible,
.vk-jobs .vk-module__btn--secondary-green:hover,
.vk-jobs .vk-module__btn--secondary-green:focus-visible {
  border-color: var(--vk-jobs-green-dark) !important;
  background-color: var(--vk-jobs-green-dark) !important;
  color: #fff !important;
}