/* Changes to ti_joboffers through diewerberei */

@media all {

  .ti-joboffers {
    --box-shadow-interaction: 0 0 0 .125rem var(--color-primary);

    .job-filterbox {
      margin-bottom: var(--size-x8);

      .form-legend {
        display: none;
      }

      .job-filter {
        margin: 0;
        gap: 1.25rem;

        .job-filter-item {
          padding: 0;

        }

      }

      .job-filter-select {
        grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));

        .form-select {
          border: none;
          background-color: rgb(var(--rgb-primary) ,.05);
          font-size: inherit;

          &:is(:focus, :hover) {
            box-shadow: var(--box-shadow-interaction);
          }

        }

      }

    }

    .job-list {
      max-width: unset;
      display: grid;
      gap: var(--size-x4);

      .job-list-item {
        box-shadow: var(--box-shadow);
        border-radius: var(--border-radius);
        background-color: #fff;
        padding: var(--size-x4);
        padding-bottom: 0;

        &:is(:focus, :hover) {
          box-shadow: var(--box-shadow-interaction);
        }

        .ce-header, 
        dl {
          margin-bottom: var(--size-x4);
        }

        .link-icon-set i {
          position: relative;
        }

      }

      .job-list-item:not([hidden]) ~ .job-list-item:not([hidden]) {
        border: unset;
      }

    }

    .job-list-short  .job-list-item {
      padding: var(--size-x8);

      dt {
        float: left;
        margin-right: var(--size-x1);
      }

      dd {
        margin: 0;
      }

    }

    .job-facts-box {
      padding: var(--size-x4);
      margin-bottom: var(--size-x4);
      background-color: rgb(var(--rgb-primary) ,.05);
      border-radius: var(--border-radius);

      .job-facts {
        margin: 0;
      }

    }

    dl {
      padding: 0;    
    }

    .job-show .ce-bodytext {
      h2 , 
      h3 ,
      h4 {
        margin-bottom: var(--size-x4);
      }

  }

}

@media all and (min-width: 47.5em), print {
}

@media all and (min-width: 62.5em) {

  .ti-joboffers {

    .job-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .job-show .ce-gallery {
      float: right;
      padding-left: var(--size-x12);
      width: calc((100% - 5rem) / 3 + 5rem);
      margin-bottom: var(--size-x8);
    }

    .job-show .job-facts-box {
      float: right;
      clear: both;
      margin-left: var(--size-x12);
      width: calc(((100% - 5rem) / 3 + 5rem) - var(--size-x12));
      margin-bottom: var(--size-x8);
    }

  }

}

@media all and (min-width: 82.5em) {

  .ti-joboffers {

    .job-list  .job-list-item {
      padding: var(--size-x8);
      padding-bottom: 0;
    }

    .job-list-short .job-list-item {
      padding-bottom: var(--size-x8);
    }

    .job-facts-box {
      padding: var(--size-x8);
      margin-bottom: var(--size-x8);
    }

    .job-show .ce-bodytext {
      h2 , 
      h3 ,
      h4 {
        margin-bottom: var(--size-x8);
      }

    }

  }

}