.job-overview{position:relative;hyphens:auto;overflow-wrap:anywhere; :where(ol, ul) { padding: 0px; margin: 0px; list-style-type: none; } & > .display-view { width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; padding: 0px; position: absolute; right: 0px; top: 0px; cursor: pointer; border: none; background-color: var(--white-100); color: var(--button-color); &:disabled { pointer-events: none; color: var(--copyright-color); } &:focus-visible { outline: 3px solid var(--hover-color-dark); outline-offset: -6px; } @media (hover: hover) { &:hover { color: var(--hover-color-dark); outline: 1px solid var(--hover-color-dark); outline-offset: -3px; } } } & > fieldset { margin: 0px 0px 50px 0px; & > .filter-entries { display: grid; &.row-1 { grid-template-columns: repeat(2, minmax(0px, 1fr)); align-items: end; column-gap: 50px; padding-bottom: 20px; } &.row-2 { grid-template-columns: auto auto 1fr; align-items: end; & > .col-wrapper { display: flex; & > .filter { min-width: 184px; } } } & .filter { position: relative; &:has(> select:disabled, > input[type="search"]:disabled) label.default { color: var(--copyright-color); pointer-events: none; } &:has(> input[type="checkbox"]:disabled) > label.checkbox { color: var(--copyright-color); pointer-events: none; & > .checkbox { border-color: var(--copyright-color); } } &:has(> input[type="checkbox"]) { display: grid; grid-template-columns: 44px auto 1fr; grid-template-rows: 44px; margin-top: 5px; & > input { grid-column: 1 / 2; grid-row: 1 / 2; } & > label { grid-column: 1 / 3; grid-row: 1 / 2; } } & > label.default { min-height: 25px; display: flex; align-items: center; margin-bottom: 5px; cursor: pointer; text-transform: uppercase; color: var(--fsu-blue); } & > :where(input[type="search"], select) { width: 100%; height: 44px; padding-right: 44px; box-sizing: border-box; background-color: var(--white-100); border: 1px solid var(--fsu-blue); cursor: pointer; color: var(--fsu-blue); font-variation-settings: var(--fsu-font-variation-text-italic); font-size: 1.188rem; line-height: 1.563rem; &:disabled { pointer-events: none; border-color: var(--copyright-color); } &.invalid { border-color: var(--error-color); } &:focus-visible { outline: 3px solid var(--hover-color-dark); outline-offset: 3px; } @media (hover: hover) { &:hover { border-color: var(--hover-color-dark); outline: 1px solid var(--hover-color-dark); outline-offset: 3px; & + .select-icon { color: var(--hover-color-dark); } } } } & > label.checkbox { height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--fsu-blue); font-variation-settings: var(--fsu-font-variation-text-condensed); font-size: 1.125rem; line-height: 1.500rem; & > .checkbox { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin-right: 15px; box-sizing: border-box; flex-shrink: 0; background-color: var(--white-100); border: 1px solid var(--fsu-blue); & > .icon { display: none; } } & > .count { color: var(--copyright-color); } } & > input[type="checkbox"] { width: 40px; height: 40px; margin: 2px; display: block; &:disabled { pointer-events: none; } &:checked + label.checkbox > .checkbox > .icon { display: block; } &:focus-visible { outline: none; & + label.checkbox { outline: 3px solid var(--hover-color-dark); outline-offset: 3px; } } @media (hover: hover) { &:hover + label.checkbox { color: var(--hover-color-dark); outline: 1px solid var(--hover-color-dark); outline-offset: 3px; & > .checkbox { border: 1px solid var(--hover-color-dark); } } } } } } } & > .all-entry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px; & > .entry { display: flex; flex-direction: column; position: relative; background-color: var(--block-background); &.hidden { display: none; } &.biopha { --color: var(--color-biopha); } &.chege { --color: var(--color-chege); } &.fsv { --color: var(--color-fsv); } &.m_ehealth { --color: var(--color-m_ehealth); } &.mirz { --color: var(--color-mirz); } &.paf { --color: var(--color-paf); } &.phifak { --color: var(--color-phifak); } &.rewi { --color: var(--color-rewi); } &.thefak_fe { --color: var(--color-thefak_fe); } &.wiwi { --color: var(--color-wiwi); } & > article { display: flex; flex-direction: column; flex: 1 0 auto; & > a { flex: 1 0 auto; order: 3; padding: 15px 20px 20px 20px; outline: none; text-decoration: none; text-wrap: balance; color: var(--fsu-blue); font-weight: 500; font-variation-settings: var(--fsu-font-variation-headline-block); font-size: 1.375rem; line-height: 1.813rem; &::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } &:focus-visible::after { outline: 3px solid var(--hover-color-dark); outline-offset: 0px; } @media (hover: hover) { &:hover::after { outline: 1px solid var(--hover-color-dark); outline-offset: 0px; } } & > .title { display: inline; margin: 0px; font-weight: inherit; font-size: inherit; } } & > .category { order: 0; display: flex; align-items: center; padding: 12px 20px 17px 20px; background: linear-gradient(270deg, transparent 0%, var(--color, var(--fsu-gold)) 80%) no-repeat bottom / 100% 5px var(--fsu-blue); text-transform: uppercase; color: var(--white-100); @media (prefers-reduced-motion: no-preference) { transition: padding 1s, font-size 1s; } } & > :where(.date-number, .institution) { text-transform: uppercase; color: var(--text-color); font-size: 1.000rem; line-height: 1.313rem; } & > .date-number { order: 1; padding: 20px 20px 0px 20px; } & > .institution { order: 2; padding: 0px 20px; } & > .additional { order: 4; display: flex; justify-content: flex-end; gap: 20px; padding: 0px 20px 20px 20px; & > .properties { display: flex; align-items: center; gap: 10px; & > li { padding: 4px 5px 3px 5px; background-color: var(--white-100); color: var(--copyright-color); font-variation-settings: var(--fsu-font-variation-text-condensed); font-size: 0.750rem; line-height: 1.000rem; } } & > .share-wrapper { position: relative; & > button { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0px; margin: 0px; cursor: pointer; border: none; background: none; color: var(--button-color); text-decoration: none; &[aria-expanded="true"] { border: 1px solid var(--button-color); color: var(--button-color); @media (hover: hover) { &:hover { border-color: var(--hover-color-dark); } } & + ul { display: flex; } } &:disabled { pointer-events: none; color: var(--copyright-color); } &:focus-visible { outline: 3px solid var(--hover-color-dark); outline-offset: -6px; } @media (hover: hover) { &:hover { color: var(--hover-color-dark); outline: 1px solid var(--hover-color-dark); outline-offset: -4px; } } } & > ul { display: none; gap: 5px; position: absolute; top: 0px; right: 49px; z-index: 2; background-color: var(--block-background); & > li > a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0px; margin: 0px; position: relative; z-index: 2; box-sizing: border-box; border: 1px solid var(--button-color); cursor: pointer; text-decoration: none; color: var(--button-color); &:focus-visible { outline: 3px solid var(--hover-color-dark); outline-offset: -6px; } @media (hover: hover) { &:hover { border-color: var(--hover-color-dark); color: var(--hover-color-dark); outline: 1px solid var(--hover-color-dark); outline-offset: -4px; } } &.bg { &::after { content: ""; width: 100%; height: 100%; mask-repeat: no-repeat; mask-position: center; background-color: var(--button-color); @media (forced-colors: active) { background-color: LinkText; } } @media (hover: hover) { &:hover:after { background-color: var(--hover-color-dark); @media (forced-colors: active) { background-color: LinkText; } } } } &.xing::after { mask-size: 21px 25px; mask-image: url("/skin/_global/_images/blocks/job_overview_share_xing.svg"); } &.linkedin::after { mask-image: url("/pub/theme/vorlage_fe/skin/_images/social_linkedin.svg"); } } } } } } } } & > .status > .hidden { display: none; }}@media(min-width:75.0000em){.job-overview>.all-entry.list{grid-template-columns:minmax(0,1fr);& > .entry{&::after{content:"";height:5px;background:linear-gradient(270deg,transparent 0%,var(--color,var(--fsu-gold)) 80%)no-repeat bottom/100% 5px var(--block-background)}& > article{display:grid;grid-template-columns:50% 1fr min-content;grid-template-rows:auto auto auto auto;grid-column-gap:10px;& > a{grid-column:1/2;grid-row:2/5;padding:15px 0 10px 10px}& > .category{grid-column:1/2;grid-row:1/2;justify-self:start;padding:5px 10px;background:var(--fsu-blue);font-variation-settings:var(--fsu-font-variation-text-condensed);font-size:.75rem;line-height:1rem}& > .date-number{grid-column:2/3;grid-row:2/3;padding:15px 0 0;text-align:right}& > .institution{grid-column:2/3;grid-row:3/4;padding:unset;text-align:right}&:not(:has(> .additional > .properties)) > .institution{padding-bottom:20px}& > .additional{grid-column:1/4;grid-row:1/5;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;gap:unset;padding:unset;& > .properties{grid-column:2/3;grid-row:4/5;justify-self:end;padding:10px 0}& > .share-wrapper{grid-column:3/4;grid-row:1/5;align-self:center;padding-right:10px;& > ul{right:59px}}}}}}}@media(min-width:48.0000em) and (max-width:74.9375em){.job-overview>fieldset>.filter-entries{&.row-1{column-gap:24px}&.row-2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:20px}}}@media(max-width:74.9375em){.job-overview{& > .display-view{display:none}& > .all-entry{grid-template-columns:minmax(0,1fr);& > .entry > article > a{font-size:clamp(var(--fsu-block-font-size-scale-min),var(--fsu-block-font-size-scale),var(--fsu-block-font-size-scale-max));line-height:clamp(var(--fsu-block-line-height-scale-min),var(--fsu-block-line-height-scale),var(--fsu-block-line-height-scale-max))}}}}@media(max-width:47.9375em){.job-overview{& > fieldset{margin-bottom:20px;& > .filter-entries{&.row-1{grid-template-columns:1fr;row-gap:10px;padding-bottom:10px}&.row-2{grid-template-columns:1fr;row-gap:10px;& > .col-wrapper{flex-wrap:wrap;justify-content:space-between;row-gap:10px}}& .filter{& > :where(input[type=search], select){font-size:1rem;line-height:1.313rem}}}}& > .all-entry{row-gap:35px}}}.teaser-job{position:relative;hyphens:auto;overflow-wrap:anywhere; :where(ol, ul) { padding: 0px; margin: 0px; list-style-type: none; } & > .button-view { width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; padding: 0px; position: absolute; right: 0px; top: 0px; cursor: pointer; border: none; background-color: var(--white-100); color: var(--button-color); &:disabled { pointer-events: none; color: var(--copyright-color); } &:focus-visible { outline: 3px solid var(--hover-color-dark); outline-offset: -6px; } @media (hover: hover) { &:hover { color: var(--hover-color-dark); outline: 1px solid var(--hover-color-dark); outline-offset: -3px; } } } & > .all-entry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px; & > .entry { display: flex; flex-direction: column; position: relative; background-color: var(--block-background); &.hidden { display: none; } &.biopha { --color: var(--color-biopha); } &.chege { --color: var(--color-chege); } &.fsv { --color: var(--color-fsv); } &.m_ehealth { --color: var(--color-m_ehealth); } &.mirz { --color: var(--color-mirz); } &.paf { --color: var(--color-paf); } &.phifak { --color: var(--color-phifak); } &.rewi { --color: var(--color-rewi); } &.thefak_fe { --color: var(--color-thefak_fe); } &.wiwi { --color: var(--color-wiwi); } & > article { display: flex; flex-direction: column; flex: 1 0 auto; & > a { flex: 1 0 auto; order: 3; padding: 15px 20px 20px 20px; outline: none; text-decoration: none; text-wrap: balance; color: var(--fsu-blue); font-weight: 500; font-variation-settings: var(--fsu-font-variation-headline-block); font-size: 1.375rem; line-height: 1.813rem; &::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } &:focus-visible::after { outline: 3px solid var(--hover-color-dark); outline-offset: 0px; } @media (hover: hover) { &:hover::after { outline: 1px solid var(--hover-color-dark); outline-offset: 0px; } } & > .title { display: inline; margin: 0px; font-weight: inherit; font-size: inherit; } } & > .category { order: 0; display: flex; align-items: center; padding: 12px 20px 17px 20px; background: linear-gradient(270deg, transparent 0%, var(--color, var(--fsu-gold)) 80%) no-repeat bottom / 100% 5px var(--fsu-blue); text-transform: uppercase; color: var(--white-100); @media (prefers-reduced-motion: no-preference) { transition: padding 1s, font-size 1s; } } & > :where(.date-number, .institution) { text-transform: uppercase; color: var(--text-color); font-size: 1.000rem; line-height: 1.313rem; } & > .date-number { order: 1; padding: 20px 20px 0px 20px; } & > .institution { order: 2; padding: 0px 20px; } & > .additional { order: 4; display: flex; justify-content: flex-end; gap: 20px; padding: 0px 20px 20px 20px; & > .properties { display: flex; align-items: center; gap: 10px; & > li { padding: 4px 5px 3px 5px; background-color: var(--white-100); color: var(--copyright-color); font-variation-settings: var(--fsu-font-variation-text-condensed); font-size: 0.750rem; line-height: 1.000rem; } } & > .share-wrapper { position: relative; & > button { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0px; margin: 0px; cursor: pointer; border: none; background: none; color: var(--button-color); text-decoration: none; &[aria-expanded="true"] { border: 1px solid var(--button-color); color: var(--button-color); @media (hover: hover) { &:hover { border-color: var(--hover-color-dark); } } & + ul { display: flex; } } &:disabled { pointer-events: none; color: var(--copyright-color); } &:focus-visible { outline: 3px solid var(--hover-color-dark); outline-offset: -6px; } @media (hover: hover) { &:hover { color: var(--hover-color-dark); outline: 1px solid var(--hover-color-dark); outline-offset: -4px; } } } & > ul { display: none; gap: 5px; position: absolute; top: 0px; right: 49px; z-index: 2; background-color: var(--block-background); & > li > a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0px; margin: 0px; position: relative; z-index: 2; box-sizing: border-box; border: 1px solid var(--button-color); cursor: pointer; text-decoration: none; color: var(--button-color); &:focus-visible { outline: 3px solid var(--hover-color-dark); outline-offset: -6px; } @media (hover: hover) { &:hover { border-color: var(--hover-color-dark); color: var(--hover-color-dark); outline: 1px solid var(--hover-color-dark); outline-offset: -4px; } } &.bg { &::after { content: ""; width: 100%; height: 100%; mask-repeat: no-repeat; mask-position: center; background-color: var(--button-color); @media (forced-colors: active) { background-color: LinkText; } } @media (hover: hover) { &:hover:after { background-color: var(--hover-color-dark); @media (forced-colors: active) { background-color: LinkText; } } } } &.xing::after { mask-size: 21px 25px; mask-image: url("/skin/_global/_images/blocks/job_overview_share_xing.svg"); } &.linkedin::after { mask-image: url("/pub/theme/vorlage_fe/skin/_images/social_linkedin.svg"); } } } } } } } } & :where(ol + a, .block_info + a) { width: fit-content; display: block; padding: var(--link-block-padding) 0px var(--link-block-padding) 0px; margin: 0px 0px 0px auto; text-decoration: underline 1px; text-underline-offset: 3px; color: var(--text-color); &:focus-visible { outline: 3px solid var(--hover-color-dark); outline-offset: 0px; } @media (hover: hover) { &:hover { text-decoration-thickness: 2px; } } }}@media(min-width:75.0000em){.teaser-job{& .block-headline{margin-right:44px}&.list > .all-entry{grid-template-columns:minmax(0,1fr);& > .entry{&::after{content:"";height:5px;background:linear-gradient(270deg,transparent 0%,var(--color,var(--fsu-gold)) 80%)no-repeat bottom/100% 5px var(--block-background)}& > article{display:grid;grid-template-columns:50% 1fr min-content;grid-template-rows:auto auto auto auto;grid-column-gap:10px;& > a{grid-column:1/2;grid-row:2/5;padding:15px 0 10px 10px}& > .category{grid-column:1/2;grid-row:1/2;justify-self:start;padding:5px 10px;background:var(--fsu-blue);font-variation-settings:var(--fsu-font-variation-text-condensed);font-size:.75rem;line-height:1rem}& > .date-number{grid-column:2/3;grid-row:2/3;padding:15px 0 0;text-align:right}& > .institution{grid-column:2/3;grid-row:3/4;padding:unset;text-align:right}&:not(:has(> .additional > .properties)) > .institution{padding-bottom:20px}& > .additional{grid-column:1/4;grid-row:1/5;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;gap:unset;padding:unset;& > .properties{grid-column:2/3;grid-row:4/5;justify-self:end;padding:10px 0}& > .share-wrapper{grid-column:3/4;grid-row:1/5;align-self:center;padding-right:10px;& > ul{right:59px}}}}}}}}@media(max-width:74.9375em){.teaser-job{& > .button-view{display:none}& > .all-entry{grid-template-columns:minmax(0,1fr);& > .entry > article > a{font-size:clamp(var(--fsu-block-font-size-scale-min),var(--fsu-block-font-size-scale),var(--fsu-block-font-size-scale-max));line-height:clamp(var(--fsu-block-line-height-scale-min),var(--fsu-block-line-height-scale),var(--fsu-block-line-height-scale-max))}}}}@media(max-width:47.9375em){.teaser-job>.all-entry{row-gap:35px}}