/* 20250410 HOCH TopJobPosting Style */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans');

body {
  margin: 0;
  padding: 0;
  font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
  font-size: 18px;
  line-height: 32.4px;
  color: #15141a;
}

/* Mobile First */
body > header,
body > footer {
  position: fixed;
  width: 100vw;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  transition: top 0.25s ease-in-out;
}

body > header,
body > footer,
.header.spacer,
.footer.spacer {
  /* width: 100vw; */
  min-height: 2rem;
  font-size: min(2vh, 1.2rem);
}

body > header,
.header.spacer {
  height: min(11vh, 5rem);
}

body > footer,
.footer.spacer {
  height: min(6.5vh, 5rem);
  padding-bottom: 0.25em;
}

body > header {
  top: 0;
  background-color: white;
  z-index: 1;
}

body > footer {
  bottom: 0;
  background-color: #f4f5f5;
  z-index: 1;
}

body > header > *,
body > footer > * {
  align-self: center;
}

article {
  display: block;
}

h1,
h2 {
  font-weight: normal;
  margin-block-start: 0.7em;
  margin-block-end: 0.5em;
  hyphens: auto;
}

h1 {
  font-size: 1.7em;
  font-weight: 800;
}

h2 {
  font-size: 1.2em;
}

svg.svgsymbols {
  display: none;
}

.Company.logo {
  align-self: auto;
  height: min(11vh, 5rem);
  min-height: 2rem;
}

.Company.logo img {
  box-sizing: border-box;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: 0 0;
}

.Job.media {
  max-height: 300px;
  margin-bottom: 1em;
}

/* responsive video embed */
.Job.video {
  position: relative;
  padding-bottom: 56.25%;
  /* enforce 9:16 aspect ratio */
  height: 0;
  overflow: hidden;
}

.Job.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.Job.image {
  position: relative;
}

.Job.image img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 900px;
  height: 40vw;
  max-height: 300px;
  object-fit: cover;
  object-position: 50% 58%;
}

.Job.imageClaim {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: auto 0 2vw auto;
  box-sizing: border-box;
  max-width: 900px;
  padding: 0 4vw 0 0;
  font-size: min(1.5em, 4.3vw);
  font-weight: 500;
  color: #ee7a00;
  text-align: right;
}

.Job.department {
  font-size: 1.25em;
}

.Job.description ul {
  padding-left: 1em;
}

section.Job,
section.Company {
  padding: 0 0.5em 0 min(2.3vh, 1.6em);
}

section.Job {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.Job.about {
  border-bottom: none;
}

.Company.social {
  display: flex;
  align-items: center;
}

.Company.social div {
  max-width: 66%;
}

ul.Job.share,
ul.Company.follow {
  display: flex;
  gap: 0.1em;
  align-items: center;
  list-style: none;
  margin: 0 0 0 0.5em;
  padding: 0;
}

ul.Job.share a,
ul.Company.follow a {
  display: flex;
  width: 1.8em;
  height: 1.8em;
  border: 2px #adcb2d solid;
  border-radius: 1.5em;
}

ul.Job.share a:hover,
ul.Company.follow a:hover {
  background-color: lightgray;
}

ul.Job.share svg,
ul.Company.follow svg {
  width: max(2vh, 1.2em);
  max-width: 5vw;
  height: max(2vh, 1.2em);
  max-height: 5vw;
  fill: #777;
  margin: auto;
}

.Job.large_image,
.Job.disclaimer,
li.printer,
.Job.apply.print {
  display: none;
}

.Company.benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1em;
}

.Company.benefits [title] span {
  display: none;
}

.Company.benefits a {
  position: relative;
}

.Company.benefits a:hover {
  filter: brightness(0.9);
}

.Company.benefits [title] {
  display: inline-block;
  width: 2.5em;
  height: 2.5em;
  border-radius: 15%;
  margin: 0.1em;
  background-color: #adcb2d;
  background-position: center;
  background-repeat: no-repeat;
}

.Company.benefits [title='Cafeteria'] {
  background-image: url('https://hoch.jobs/images/icons/cafeteria.svg');
}

.Company.benefits [title='Kindertagesstätte'] {
  background-image: url('https://hoch.jobs/images/icons/kita.svg');
}

.Company.benefits [title='Mitarbeiterrestaurant'] {
  background-image: url('https://hoch.jobs/images/icons/mitarbeiterrestaurant.svg');
}

.Company.benefits [title='Flexible Arbeitszeiten'] {
  background-image: url('https://hoch.jobs/images/icons/uhr.svg');
}

.Company.benefits [title='Säuglingsbetreuung'] {
  background-image: url('https://hoch.jobs/images/icons/baby.svg');
}

.Company.benefits [title='Personalärztlicher Dienst'] {
  background-image: url('https://hoch.jobs/images/icons/stethoskop.svg');
}

.Company.benefits [title='Gesundheitsmanagement'] {
  background-image: url('https://hoch.jobs/images/icons/herzhand.svg');
}

.Company.benefits [title='Fitness'] {
  background-image: url('https://hoch.jobs/images/icons/gewichte.svg');
}

.Company.benefits [title='Personalunterkunft'] {
  background-image: url('https://hoch.jobs/images/icons/bett.svg');
}

.Company.benefits [title='Fort- und Weiterbildung'] {
  background-image: url('https://hoch.jobs/images/icons/zertifikat.svg');
}

.Company.benefits [title='Vegan'] {
  background-image: url('https://hoch.jobs/images/icons/vegan.svg');
}

.Company.benefits [title='Gute Verkehrsanbindung'] {
  background-image: url('https://hoch.jobs/images/icons/bus.svg');
}

.Company.benefits [title='Mitternachtstaxi'] {
  background-image: url('https://hoch.jobs/images/icons/taxi.svg');
}

.Company.benefits [title='Altersvorsorge'] {
  background-image: url('https://hoch.jobs/images/icons/schwein.svg');
}

.Company.benefits [title='Bibliothek'] {
  background-image: url('https://hoch.jobs/images/icons/bücher.svg');
}

.Company.benefits [title='Spital-Flohmarkt'] {
  background-image: url('https://hoch.jobs/images/icons/flohmarkt.svg');
}

.Company.benefits [title='Arbeitskleidung'] {
  background-image: url('https://hoch.jobs/images/icons/tshirt.svg');
}

.Company.benefits [title='Rabatt'] {
  background-image: url('https://hoch.jobs/images/icons/rabattschild.svg');
}

.Company.benefits [title='Mitarbeiteranlässe'] {
  background-image: url('https://hoch.jobs/images/icons/cüpli.svg');
}

a {
  color: #2b3840;
  text-decoration: none;
}

a:hover,
a:active,
a:focus {
  text-decoration: underline;
}

a.Job.apply {
  display: block;
  text-decoration: none;
  padding: 0.3em 0.5em;
  border: 2px #adcb2d solid;
  border-radius: 1.5em;
  margin: 0.1em 0.5em 0.1em 0.1em;
}

a.Job.apply:hover {
  background-color: lightgray;
}

.task div,
.profile div,
.offer div,
.application div {
  margin-bottom: 1em;
}

/* Ausblenden des Videos, SoMe, Benefits und einblenden der Aufforderung zur online Bewerbung*/
@media print {
  body > header,
  body > footer {
    position: relative;
  }

  .header.spacer,
  .footer.spacer,
  .Job.video,
  ul.Job.share,
  a.Job.apply,
  .Company.social,
  .Company.benefits {
    display: none;
  }

  .Job.image img {
    max-height: 10em;
  }

  .Job.apply.print {
    display: block;
  }
}

/* Kleine Handys */
@media screen and (max-width: 320px) {
  h1 {
    font-size: 1.2em;
  }

  h2 {
    font-size: 1.1em;
  }

  .Job.department {
    font-size: 1em;
  }
}

/* Media wird nicht mehr grösser und zentriert*/
@media screen and (min-width: 570px) {
  .Job.video {
    max-width: 570px;
    margin: 0 auto;
  }

  .Job.video iframe {
    max-height: 320px;
  }
}

/* Ganzer Inhalt wird horizontal zentriert
   Option zum Drucken und Agenturdisclaimer kommt dazu */
@media screen and (min-width: 741px) {
  body > header,
  body > footer {
    max-width: 1024px;
    left: 50%;
    transform: translate(-50%, 0);
  }

  main {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
  }

  .Job.disclaimer,
  li.printer {
    display: inherit;
  }
}

/* Wrapper wird mehrspaltig */
@media (min-width: 1024px), (orientation: landscape) and (min-width: 741px) {
  .Job.description .wrapper {
    display: flex;
    flex-wrap: wrap;
  }

  .wrapper section.Job {
    flex: 1 1 33%;
  }
}

/* Höhenbeschränkung Kopf-/Fusszeilen */
@media screen and (min-height: 1080px) {
  body > header,
  body > footer,
  .header.spacer,
  .footer.spacer {
    height: 5rem;
    font-size: 1.5rem;
  }

  ul.Job.share svg,
  ul.Company.follow svg {
    width: 1.2em;
    height: 1.2em;
  }
}