.maea-sjb-content {
  width: 100%;
}

.maea-sjb-content p:empty,
.sjb-page p:empty {
  display: none !important;
}

.maea-sjb-content .sjb-page {
  width: 100% !important;
  max-width: none;
  margin: 0;
  color: var(--color-text);
}

.sjb-page .sjb-archive-page > h2,
.sjb-page .sjb-archive-page > .job-title {
  display: none;
}

.sjb-page .sjb-filters,
.sjb-page .sjb-filters-v1,
.sjb-page .sjb-filters-v2 {
  margin: 0 0 14px;
  border: 1px solid var(--glass-border);
  border-radius: 30px;
  background:
    linear-gradient(135deg, var(--glass-bg-strong), var(--glass-bg-soft)),
    rgba(255, 255, 255, 0.28);
  box-shadow:
    var(--glass-inner-light),
    var(--glass-inner-shade),
    var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  padding: 22px 30px 23px !important;
}

.sjb-page .sjb-filters-v1:not(:has(.row > *)),
.sjb-page .sjb-filters-v2:not(:has(.row > *)) {
  display: none;
}

/* SJB's `filters_background_color` setting paints this panel from an inline
   <style> that lands after our stylesheet at equal specificity, so re-assert
   the glass panel from our own wrapper class to outrank it. */
.maea-sjb-content .sjb-page .sjb-filters,
.maea-sjb-content .sjb-page .sjb-filters-v1,
.maea-sjb-content .sjb-page .sjb-filters-v2 {
  background:
    linear-gradient(135deg, var(--glass-bg-strong), var(--glass-bg-soft)),
    rgba(255, 255, 255, 0.28);
}

.sjb-page .filters-form .row {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(220px, 0.85fr) minmax(180px, 0.7fr) 124px;
  gap: 10px;
  align-items: end;
  margin: 0;
}

.sjb-page .filters-form .row > p,
.sjb-page .filters-form br {
  display: none !important;
}

.sjb-page .filters-form .row::before,
.sjb-page .filters-form .row::after,
.sjb-page .sjb-listing .row::before,
.sjb-page .sjb-listing .row::after {
  display: none;
}

.sjb-page .filters-form [class*="col-"] {
  display: grid;
  align-items: end;
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
}

.sjb-page .filters-form .form-group {
  margin: 0;
}

.sjb-page .sjb-search-button {
  justify-content: stretch;
}

.sjb-page .filters-form input,
.sjb-page .filters-form select,
.sjb-page .filters-form button,
.sjb-page .filters-form .btn {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 999px !important;
  outline: 0;
  color: var(--color-text);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.24));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 5px 14px rgba(22, 90, 76, 0.08);
  padding: 0 14px;
}

.sjb-page .filters-form button,
.sjb-page .filters-form .btn,
.sjb-page .sjb-filters.sjb-filters-v1 .sjb-search-button .btn-search,
.sjb-page .sjb-filters.sjb-filters-v2 .sjb-search-button .btn-search {
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--color-brand-green), #0F4238);
  font-weight: 900;
}

/* Live filter form actually renders as `.sjb-filters-v2` (not v1) on this
   site, and SJB's own CSS has a same-specificity `.sjb-filters-v2 .btn-search`
   rule that sets `font-family: "Font Awesome 5 Free" !important` (meant for
   the icon-only variant of this button); our v1-only selector never matched
   it, so that plugin rule won by default. Covering both filter versions here
   closes the gap. "Inter" is added as a named fallback in case it's locally
   installed; it does not require any network fetch. */
.sjb-page .sjb-filters.sjb-filters-v1 .sjb-search-button .btn-search,
.sjb-page .sjb-filters.sjb-filters-v2 .sjb-search-button .btn-search {
  width: 100%;
  min-width: 0;
  border-radius: 999px !important;
  padding-right: 18px;
  padding-left: 18px;
  font-family: Aptos, Inter, Arial, Helvetica, sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 900 !important;
}

/* SJB's `job_submit_button_background_color` setting uses `!important` from its
   late inline <style>, so matching it needs both `!important` and a higher
   specificity than its `.sjb-page .btn-primary`. */
.maea-sjb-content .sjb-page .filters-form button,
.maea-sjb-content .sjb-page .filters-form .btn,
.maea-sjb-content .sjb-page .sjb-search-button .btn-search {
  background: linear-gradient(135deg, var(--color-brand-green), #0F4238) !important;
}

.sjb-page .sjb-listing .list-view {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.sjb-page .sjb-listing .list-view > .row {
  display: contents;
}

.sjb-page .sjb-listing .list-view > .clearfix {
  display: none !important;
}

.sjb-page .sjb-listing .company-logo,
.sjb-page .sjb-listing .list-data .job-date,
.sjb-page .sjb-listing #quick-apply-btn,
.sjb-page .sjb-listing .sjb-view-less-btn {
  display: none !important;
}

.sjb-page .sjb-listing .list-data > .v1 > p,
.sjb-page .sjb-listing .list-data > .v2 > p {
  display: none !important;
}

.sjb-page .sjb-listing .grid-item {
  float: none !important;
  width: auto !important;
  max-width: none;
  min-width: 0;
  padding: 0 !important;
}

.sjb-page .grid-item .list-data,
.sjb-page .sjb-listing .list-data,
.sjb-page .grid-item .v1,
.sjb-page .grid-item .v2,
.sjb-page .sjb-listing .list-data > .v1,
.sjb-page .sjb-listing .list-data > .v2 {
  height: 100%;
}

.sjb-page .grid-item .v1,
.sjb-page .grid-item .v2,
.sjb-page .sjb-listing .list-data > .v1,
.sjb-page .sjb-listing .list-data > .v2 {
  --accent: var(--color-brand-green);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: 276px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background:
    linear-gradient(135deg, var(--glass-bg-strong), var(--glass-bg-soft)),
    rgba(255, 255, 255, 0.28);
  box-shadow:
    var(--glass-inner-light),
    var(--glass-inner-shade),
    var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  padding: 18px;
}

.sjb-page .grid-item .v1::before,
.sjb-page .grid-item .v2::before,
.sjb-page .sjb-listing .list-data > .v1::before,
.sjb-page .sjb-listing .list-data > .v2::before {
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  content: "";
  background: linear-gradient(90deg, var(--accent), rgba(255, 255, 255, 0.2));
}

.sjb-page .grid-item .v1 > header,
.sjb-page .grid-item .v2 > header,
.sjb-page .sjb-listing .list-data > .v1 > header,
.sjb-page .sjb-listing .list-data > .v2 > header {
  margin: 0;
}

.sjb-page .grid-item .v1 > header .row,
.sjb-page .grid-item .v2 > header .row,
.sjb-page .sjb-listing .list-data > .v1 > header .row,
.sjb-page .sjb-listing .list-data > .v2 > header .row {
  display: block;
  margin: 0;
}

.sjb-page .grid-item .v1 > header [class*="col-"],
.sjb-page .grid-item .v2 > header [class*="col-"],
.sjb-page .sjb-listing .list-data > .v1 > header [class*="col-"],
.sjb-page .sjb-listing .list-data > .v2 > header [class*="col-"] {
  width: auto;
  max-width: none;
  padding: 0;
}

/* Bootstrap gives these intermediate header wrappers `position: relative`, so
   one of them — not the card — becomes the containing block for the absolutely
   positioned apply button further down, pinning "Stelle ansehen" next to the
   title instead of the card's bottom-right. Neutralise them, but exclude the
   button's own wrapper so its own `position: absolute` survives. */
.sjb-page .sjb-listing .list-data > .v1 > header [class*="col-"]:not(.sjb-apply-now-btn),
.sjb-page .sjb-listing .list-data > .v2 > header [class*="col-"]:not(.sjb-apply-now-btn) {
  position: static;
}

/* The title's float wrapper shrinks to its own text width like every other
   `[class*="col-"]` above; for short titles that leaves room on the same
   line for the next float, so job-type/job-location can float up right next
   to a short title instead of dropping to their own row underneath it. Force
   the title wrapper to take the full row so everything after it always
   starts fresh on the next line. */
.sjb-page .sjb-listing .list-data [class*="col-"]:has(.job-info) {
  float: none;
  width: 100%;
}

.sjb-page .sjb-listing .list-data .sjb-list-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.sjb-page .sjb-listing .list-data .sjb-list-row > [class*="col-"] {
  float: none !important;
}

.sjb-page .sjb-listing .list-data .sjb-list-row > :has(.job-info) {
  flex-basis: 100%;
}

.sjb-page .sjb-listing .list-data .job-info {
  margin-bottom: 12px;
}

.sjb-page .sjb-listing .list-data .job-type,
.sjb-page .sjb-listing .list-data .job-location,
.sjb-page .sjb-listing .list-data .job-arbeitsmodell {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Simple Job Board's own "Appearance" colour settings are emitted as an inline
   <style> in wp_head *after* our stylesheet link, so its
   `.sjb-page .list-data .v2 .job-type { color: ... }` (same specificity as our
   rule above) wins on source order and repaints every pill in whatever colour
   that setting holds — on an instance carrying legacy settings that silently
   overrides the per-category accent colours. Adding `.v1`/`.v2` outranks it.
   Same reason for the filter panel and search button rules further up. */
.sjb-page .sjb-listing .list-data .v1 .job-type,
.sjb-page .sjb-listing .list-data .v2 .job-type {
  color: var(--accent);
}

.sjb-page .sjb-listing .list-data .v1 .job-location,
.sjb-page .sjb-listing .list-data .v2 .job-location {
  color: var(--color-brand-green);
}

.sjb-page .sjb-listing .list-data .v1 .job-arbeitsmodell,
.sjb-page .sjb-listing .list-data .v2 .job-arbeitsmodell {
  color: var(--color-brand-pink);
}

/* Border + accent color already distinguish job-type from job-location;
   the briefcase/pin/clock icons are redundant noise on top of that. */
.sjb-page .sjb-listing .list-data .job-type i,
.sjb-page .sjb-listing .list-data .job-location i,
.sjb-page .sjb-listing .list-data .job-arbeitsmodell i {
  display: none;
}

.sjb-page .sjb-listing .list-data .job-type {
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.48));
  padding: 4px 9px;
}

.sjb-page .sjb-listing .list-data .job-location {
  border: 1px solid color-mix(in srgb, var(--color-brand-green) 28%, transparent);
  border-radius: 999px;
  color: var(--color-brand-green);
  background: color-mix(in srgb, var(--color-brand-green) 12%, rgba(255, 255, 255, 0.48));
  padding: 4px 9px;
}

.sjb-page .sjb-listing .list-data .job-arbeitsmodell {
  border: 1px solid color-mix(in srgb, var(--color-brand-pink) 28%, transparent);
  border-radius: 999px;
  color: var(--color-brand-pink);
  background: color-mix(in srgb, var(--color-brand-pink) 12%, rgba(255, 255, 255, 0.48));
  padding: 4px 9px;
}

/* `/current-jobs` renders job-type/location as separately floated `.col-sm-12`
   siblings (no shared flex row), each with 0 horizontal margin, so the pills
   sit flush against each other with no gap at all — the old, larger padding
   just made that less obvious. Add the missing gap directly on the pills. */
.sjb-page .sjb-listing .list-data .col-sm-12 > .job-type,
.sjb-page .sjb-listing .list-data .col-sm-12 > .job-location,
.sjb-page .sjb-listing .list-data .col-sm-12 > .job-arbeitsmodell {
  margin-right: 8px;
}

/* SJB's list-view markup (homepage featured cards) wraps job-type/location in
   `.sjb-job-type-location-date > .row` with Bootstrap col-md-* children; the
   `.v2 > header .row { display:block }` rule above (needed to de-Bootstrap the
   company/apply-button row) also flattens this row, stacking the two pills.
   `/current-jobs` doesn't nest them the same way, so it never hit that rule.
   Force this specific row back into the same side-by-side pill layout. */
.sjb-page .sjb-listing .list-data .sjb-job-type-location-date .row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.sjb-page .grid-item h3,
.sjb-page .grid-item h4,
.sjb-page .grid-item .job-title,
.sjb-page .sjb-listing .list-data h3,
.sjb-page .sjb-listing .list-data h4,
.sjb-page .sjb-listing .list-data .job-title {
  margin: 0;
  color: var(--color-text);
  font-size: 1.22rem;
  line-height: 1.25;
}

.sjb-page .grid-item a,
.sjb-page .sjb-listing .list-data a {
  color: inherit;
  text-decoration: none;
}

.sjb-page .grid-item .job-info a:hover .job-title {
  color: var(--color-brand-pink);
}

.sjb-page .grid-item .job-date,
.sjb-page .grid-item .job-company,
.sjb-page .grid-item .job-description,
.sjb-page .grid-item .sjb_more_content,
.sjb-page .sjb-listing .list-data .job-date,
.sjb-page .sjb-listing .list-data .job-company,
.sjb-page .sjb-listing .list-data .job-description,
.sjb-page .sjb-listing .list-data .sjb_more_content {
  color: var(--color-muted);
  line-height: 1.55;
}

.sjb-page .grid-item .sjb_more_content,
.sjb-page .sjb-listing .list-data .sjb_more_content {
  max-height: 8.8em;
  overflow: hidden;
}

.sjb-page .sjb-listing .list-data .sjb_more_content {
  display: none;
}

.sjb-page .sjb-listing .list-data .job-description {
  display: grid;
  gap: 10px;
  align-content: stretch;
  margin-top: 0;
}

.sjb-page .grid-item .job-description p,
.sjb-page .grid-item .sjb_more_content p,
.sjb-page .sjb-listing .list-data .job-description p,
.sjb-page .sjb-listing .list-data .sjb_more_content p {
  margin-bottom: 0.65rem;
}

.sjb-page .grid-item .sjb-apply-now-btn,
.sjb-page .grid-item .sjb-apply-button,
.sjb-page .grid-item .sjb-apply-btn,
.sjb-page .sjb-listing .list-data .sjb-apply-now-btn,
.sjb-page .sjb-listing .list-data .sjb-apply-button,
.sjb-page .sjb-listing .list-data .sjb-apply-btn {
  align-self: end;
  margin-top: auto;
}

.sjb-page .sjb-listing .list-data .sjb-apply-now-btn,
.sjb-page .sjb-listing .list-data .sjb-apply-button,
.sjb-page .sjb-listing .list-data .sjb-apply-btn {
  display: flex;
  justify-content: flex-start;
}

.sjb-page .grid-item .btn,
.sjb-page .grid-item .button,
.sjb-page .grid-item .sjb-apply-now-btn a,
.sjb-page .grid-item .sjb-apply-button a,
.sjb-page .sjb-listing .list-data .btn,
.sjb-page .sjb-listing .list-data .button,
.sjb-page .sjb-listing .list-data .sjb-apply-now-btn a,
.sjb-page .sjb-listing .list-data .sjb-apply-button a,
.sjb-page .grid-item a.sjb_view_more_btn,
.sjb-page .grid-item a.sjb_view_less_btn,
.sjb-page .sjb-listing .list-data a.sjb_view_more_btn,
.sjb-page .sjb-listing .list-data a.sjb_view_less_btn,
.sjb-page .sjb-detail .btn,
.sjb-page .sjb-detail input[type="submit"],
.sjb-page .sjb-detail button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 999px;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, var(--color-brand-green), #0F4238) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 8px 20px rgba(22, 90, 76, 0.18);
  padding: 0 14px;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.sjb-page .grid-item .btn:hover,
.sjb-page .grid-item .button:hover,
.sjb-page .grid-item .sjb-apply-now-btn a:hover,
.sjb-page .grid-item .sjb-apply-button a:hover,
.sjb-page .sjb-listing .list-data .btn:hover,
.sjb-page .sjb-listing .list-data .button:hover,
.sjb-page .sjb-listing .list-data .sjb-apply-now-btn a:hover,
.sjb-page .sjb-listing .list-data .sjb-apply-button a:hover,
.sjb-page .sjb-detail input[type="submit"]:hover,
.sjb-page .sjb-detail button[type="submit"]:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 12px 24px rgba(22, 90, 76, 0.24);
  transform: translateY(-1px);
}

/* List-view (homepage featured) cards nest the apply button deep inside the
   header (header > .row > .col-md-12 > .sjb-company-wrapper-details-list >
   .row > .col-md-4.sjb-apply-now-btn), as a sibling of the title column, not
   a simple last child — so the flex/margin-top:auto trick used for the
   grid-view `.sjb-apply-button` above never reaches it. Take it out of flow
   and anchor it to the bottom-right of the card (`.v1`/`.v2` are already
   `position:relative`), and reserve room at the bottom of the card so it
   doesn't overlap the description text. Scoped via `:has()` / the
   `.sjb-apply-now-btn` class, which only exists in this list-view layout. */
.sjb-page .sjb-listing .list-data > .v1:has(.sjb-apply-now-btn),
.sjb-page .sjb-listing .list-data > .v2:has(.sjb-apply-now-btn) {
  padding-bottom: 68px;
}

.sjb-page .sjb-listing .list-data > .v1 .sjb-apply-now-btn,
.sjb-page .sjb-listing .list-data > .v2 .sjb-apply-now-btn {
  position: absolute;
  right: auto;
  bottom: 18px;
  left: 18px;
  width: auto;
  max-width: none;
  margin: 0;
  align-self: auto;
}

/* SJB wraps the apply link in a bare <p>; its default browser margin adds
   unwanted space around the button in both card layouts. */
.sjb-page .sjb-apply-now-btn p,
.sjb-page .sjb-apply-button p {
  margin: 0;
}

/* SJB's own CSS has `.sjb-page .sjb-listing .grid-item .list-data .v2 .btn`
   (6 classes) setting `border-radius: 0`, which out-specifies our 3-class
   `.grid-item .btn` rule above regardless of load order. Match/exceed that
   specificity to restore the pill shape on the /current-jobs/ grid cards. */
.sjb-page .sjb-listing .grid-item .list-data .v2 .btn {
  border-radius: 999px !important;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, var(--color-brand-green), #0F4238) !important;
  padding: 0 14px !important;
  margin-right: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  font-weight: 900;
  font-size: 0.9rem;
  text-decoration: none;
}

/* The pagination <nav> is a direct child of `.list-view`, which the rule
   above turns into a 2-column CSS grid (with `.row` set to display:contents
   so cards become direct grid items). Without this, `nav` becomes just one
   more auto-placed grid cell next to the last card instead of dropping to
   its own full-width row below all of them. */
.sjb-page .sjb-listing .list-view > nav[aria-label="Page navigation"] {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 24px 0 0;
}

.jobs-load-more {
  cursor: pointer;
  font-family: inherit;
}

.jobs-load-more:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Application form phone country dropdown: confirmed via live inspection
   that SJB's own `.iti__hide { display: none; }` IS present on the list at
   page load, but our own `.detail-section ul { display: grid; }` rule
   (maea-base.css) also matches it (the phone widget's <ul> lives inside
   `.detail-section .maea-entry-content`) and out-specifies it, since a
   class+type selector beats a single class selector even though neither is
   !important. Restore the intended collapsed state explicitly. */
.sjb-page .iti__hide {
  display: none !important;
}

.sjb-page .pagination,
.sjb-page .sjb-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 24px 0 0;
}

.sjb-page .pagination a,
.sjb-page .pagination span,
.sjb-page .sjb-pagination a,
.sjb-page .sjb-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.22));
  color: var(--color-brand-green);
  padding: 0 12px;
  font-weight: 850;
  text-decoration: none;
}

.sjb-page .sjb-detail,
.sjb-page .sjb-detail .list-data,
.sjb-page .sjb-detail .v1,
.sjb-page .sjb-detail .v2 {
  color: var(--color-text);
}

.sjb-page .sjb-detail h1,
.sjb-page .sjb-detail h2,
.sjb-page .sjb-detail h3,
.sjb-page .sjb-detail h4 {
  color: var(--color-brand-green);
}

.single-jobpost .sjb-page .sjb-detail .sjb-job-detail {
  display: none;
}

.sjb-page .sjb-detail .job-description,
.sjb-page .sjb-detail .job-detail {
  color: var(--color-muted);
  line-height: 1.65;
}

.sjb-page .sjb-detail .job-features ul,
.sjb-page .sjb-detail .job-description ul {
  display: grid;
  gap: 10px;
  margin: 0 0 1.2rem;
  padding-left: 20px;
}

.sjb-page .sjb-detail .jobpost-form {
  display: grid;
  gap: 16px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.detail-application .sjb-page,
.detail-application .sjb-detail,
.detail-application .list-data,
.detail-application .list-data > .v1,
.detail-application .list-data > .v2 {
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.detail-application .sjb-page {
  padding: 0 !important;
}

.detail-application .jobpost-form > h3 {
  margin: 0 0 4px;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
}

.detail-application .jobpost-form > .row {
  margin-right: -7px;
  margin-left: -7px;
}

.detail-application .jobpost-form > .row > [class*="col-"] {
  padding-right: 7px;
  padding-left: 7px;
}

.detail-application .jobpost-form label {
  margin-bottom: 7px;
  color: var(--color-brand-green);
  font-weight: 800;
}

.sjb-page .sjb-detail input,
.sjb-page .sjb-detail select,
.sjb-page .sjb-detail textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 21px;
  outline: 0;
  color: var(--color-text);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.24));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 5px 14px rgba(22, 90, 76, 0.08);
  padding: 0 14px;
}

.sjb-page .sjb-detail textarea {
  min-height: 120px;
  padding-top: 12px;
}

.sjb-page .sjb-detail input[type="file"] {
  min-height: 50px;
  padding: 6px 8px 6px 14px;
}

.sjb-page .sjb-detail input[type="file"]::file-selector-button,
.sjb-page .sjb-detail input[type="file"]::-webkit-file-upload-button {
  -webkit-appearance: none;
  appearance: none;
  min-height: 36px;
  margin-right: 12px;
  border: 0;
  border-radius: 999px;
  color: var(--color-brand-green);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
  padding: 0 14px;
  font-weight: 800;
  cursor: pointer;
}

.sjb-page .sjb-detail .iti input.sjb-phone-number {
  padding-left: 58px !important;
}

.detail-application .jobpost-form .form-group:has(.sjb-pp),
.detail-application .jobpost-form .form-group:has(#jobapp-tc) {
  display: grid;
  grid-template-columns: minmax(150px, 0.32fr) minmax(0, 1fr);
  gap: 8px 18px;
  clear: both;
  margin: 12px 7px 6px -10px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  padding: 16px;
}

.detail-application .jobpost-form .form-group:has(.sjb-pp) > .sjb-pp,
.detail-application .jobpost-form .form-group:has(#jobapp-tc) > [class*="col-"] {
  float: none;
  width: auto;
  padding: 0;
}

.detail-application .jobpost-form .form-group:has(.sjb-pp) > .sjb-pp.col-md-12,
.detail-application .jobpost-form .form-group:has(#jobapp-tc) > .col-md-12 {
  grid-column: 1 / -1;
}

.detail-application #jobapp-pp,
.detail-application #jobapp-tc {
  min-width: 0;
}

.detail-application #jobapp-pp br,
.detail-application #jobapp-tc br,
.detail-application .form-group:has(.sjb-pp) > p:empty,
.detail-application .form-group:has(#jobapp-tc) > p:empty {
  display: none;
}

.detail-application #jobapp-pp label.small,
.detail-application #jobapp-tc label.small {
  display: block;
  margin: 0;
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.55;
}

.detail-application #jobapp-pp label.small:has(input[type="checkbox"]),
.detail-application #jobapp-tc label.small:has(input[type="checkbox"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  cursor: pointer;
}

.sjb-page .sjb-detail #jobapp-pp input[type="checkbox"],
.sjb-page .sjb-detail #jobapp-tc input[type="checkbox"] {
  width: 20px !important;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  flex: 0 0 20px;
  margin: 2px 10px 0 0;
  border-radius: 5px;
  box-shadow: none;
  padding: 0;
  accent-color: var(--color-brand-green);
}

.detail-application #jobapp-pp label.small > .required,
.detail-application #jobapp-tc label.small > .required {
  margin-left: 3px;
}

.detail-application #jobapp-pp a,
.detail-application #jobapp-tc a {
  color: var(--color-brand-green);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.detail-application #jobapp-pp h4,
.detail-application #jobapp-tc h4 {
  margin: 18px 0 6px;
  color: var(--color-brand-green);
  font-size: 1rem;
}

.detail-application #jobapp-pp h4:first-child,
.detail-application #jobapp-tc h4:first-child {
  margin-top: 0;
}

.detail-application #jobapp-pp p,
.detail-application #jobapp-tc p {
  margin: 0 0 10px;
}

.detail-application #jobapp-pp p:last-child,
.detail-application #jobapp-tc p:last-child {
  margin-bottom: 0;
}

/* Single detail: the surrounding .detail-section is already a glass card, so
   neutralise Simple Job Board's own white .v2 card and default header chrome,
   drop the empty company-name block, and restyle the meta as MAEA pills.
   Selectors include ".list-data .v2" to out-specify SJB's own rules. */
.single-jobpost .sjb-detail .list-data > .v1,
.single-jobpost .sjb-detail .list-data > .v2,
.single-jobpost .sjb-detail [class*="sjb-job-popup"] {
  float: none;
  width: 100%;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.single-jobpost .sjb-detail .list-data .v2 header,
.single-jobpost .sjb-detail .list-data .v2 .sjb-job-info,
.single-jobpost .sjb-detail .list-data .v2 .header-margin-top,
.single-jobpost .sjb-detail .list-data .v2 .sjb-job-characteristics,
.single-jobpost .sjb-detail .list-data .v2 .sjb-job-type-location-date {
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.single-jobpost .sjb-detail .sjb-company-wrapper-details:has(.job-without-company),
.single-jobpost .sjb-detail .job-without-company {
  display: none;
}

.single-jobpost .sjb-detail .sjb-job-type-location-date .row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 14px;
}

.single-jobpost .sjb-detail .sjb-job-type-location-date .row::before,
.single-jobpost .sjb-detail .sjb-job-type-location-date .row::after {
  display: none;
}

.single-jobpost .sjb-detail .sjb-job-type-location-date [class*="col-"] {
  float: none;
  width: auto;
  max-width: none;
  padding: 0;
}

.single-jobpost .sjb-detail .list-data .v2 .job-type,
.single-jobpost .sjb-detail .list-data .v2 .job-location,
.single-jobpost .sjb-detail .list-data .v2 .job-arbeitsmodell,
.single-jobpost .sjb-detail .list-data .v2 .job-date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
  padding: 0 12px;
  color: var(--color-brand-green);
  font-size: 0.86rem;
  font-weight: 850;
}

.single-jobpost .sjb-detail .list-data .v2 .job-description {
  float: none;
  width: 100%;
  padding: 0;
}

@media (max-width: 980px) {
  .sjb-page .filters-form .row,
  .sjb-page .sjb-listing .list-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .sjb-page .filters-form .row,
  .sjb-page .sjb-listing .list-view {
    grid-template-columns: 1fr;
  }

  .sjb-page .grid-item .v1,
  .sjb-page .grid-item .v2,
  .sjb-page .sjb-listing .list-data > .v1,
  .sjb-page .sjb-listing .list-data > .v2 {
    border-radius: 22px;
    padding: 18px;
  }

  .detail-application .jobpost-form .form-group:has(.sjb-pp),
  .detail-application .jobpost-form .form-group:has(#jobapp-tc) {
    grid-template-columns: 1fr;
    margin-right: 7px;
    margin-left: -8px;
    padding: 14px;
  }
}