/* ############ ############ ############ ############ ############ ############ ############ ##
   JOBEXCHANGE CSS v2.3.21 / 2023-07-13
   Copyright Infoniqa Holding GmbH
   Created by Hartwig Waltle
## ############ ############ ############ ############ ############ ############ ############ */



/* ############ ############ ############ ############ ############ ############ ############ ##
   DEFAULT

## ############ ############ ############ ############ ############ ############ ############ */

:root {
   /* colors */
   --inf-color-dark: #0B0B0B;
   --inf-color-dark-rgb: 11,11,11;
   --inf-color-light: #F8F8F7;
   --inf-color-light-rgb: 248,248,247;
   --inf-color-primary: #875C38;
   --inf-color-primary-rgb: 135,92,56;
   --inf-color-secondary: #F4B81D;
   --inf-color-secondary-rgb: 244,184,29;
   --inf-color-border: #875C38;
   --inf-color-border-rgb: 135,92,56;

   /* fonts */
   --inf-font-family: "Interstate",system-ui,-apple-system,"Segoe UI","Roboto","Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
   --inf-font-size: 1rem;
   --inf-font-weight: 400;
   --inf-line-height: 1.5;
   --inf-text-align: left;

   /* headings */
   --inf-heading-color: var(--inf-color-primary);
   --inf-heading-font-family: "Matrix II", serif; 
   --inf-heading-font-weight: 400;
   --inf-heading-line-height: 1.25;

   --inf-heading-font-size-h1: 3rem;
   --inf-heading-font-size-h2: 1.5rem;
   --inf-heading-font-size-h3: 1.25rem;

   /* links */
   --inf-link-color: var(--inf-color-primary);
   --inf-link-text-decoration: none;

   --inf-link-hover-color: var(--inf-color-primary);
   --inf-link-hover-text-decoration: underline;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   DEFAULT | FORM

## ############ ############ ############ ############ ############ ############ ############ */

:root {
   --inf-form-bgcolor: var(--inf-color-light);
   --inf-form-border: 1px solid var(--inf-color-primary);
   --inf-form-border-radius: 0; /*0.375rem*/
   --inf-form-color: var(--inf-color-dark);
   --inf-form-font-size: var(--inf-font-size);
   --inf-form-font-weight: var(--inf-font-weight);
   --inf-form-line-height: var(--inf-line-height);

   --inf-form-focus-border: 2px solid var(--inf-color-primary);
   --inf-form-focus-shadow: 0 0 0 0.25rem rgba(var(--inf-color-primary-rgb), 0.25);
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   DEFAULT | FORM | CHECK
   <input type="checkbox"> // <input type="radio">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
      /* checkbox / radio */
      --inf-form-check-border-radius: 0.25rem;
      --inf-form-checked-bgcolor: var(--inf-color-primary);
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   DEFAULT | BUTTON
   <input type="button">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   --inf-button-bgcolor: var(--inf-color-light);
   --inf-button-border: 1px solid var(--inf-color-primary);
   --inf-button-border-radius: 0;
   --inf-button-color: var(--inf-color-primary);
   --inf-button-font-family: "Matrix II", serif;
   --inf-button-font-size: 1.125rem;
   --inf-button-font-weight: 400;
   --inf-button-line-height: var(--inf-line-height);
   --inf-button-padding: 0.375rem 1.5rem;
   --inf-button-text-transform: uppercase;

   --inf-button-hover-bgcolor: var(--inf-color-primary);
   --inf-button-hover-border: 1px solid var(--inf-color-primary);
   --inf-button-hover-color: var(--inf-color-light);

   --inf-button-focus-shadow: 0 0 0 0.25rem rgba(var(--inf-color-border-rgb),0.5);
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   DEFAULT | ERROR MESSAGE
   <div class="jexResponsive"> ... <div class="errorMessage">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   --inf-error-bgcolor: var(--bs-danger);
   --inf-error-border-radius: 0; /*0.375rem*/
   --inf-error-color: var(--inf-color-light);
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   DEFAULT | PLEASE WAIT
   <div class="jexResponsive"> ... <div class="blockUI">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   /* overlay */
   --inf-wait-overlay-bgcolor: rgba(var(--inf-color-dark-rgb),0.9);

   /* message */
   --inf-wait-message-bgcolor: var(--inf-color-light);
   --inf-wait-message-border: 2px solid var(--inf-color-border);
   --inf-wait-message-border-radius: 0; /*0.375rem*/
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   HEADER | NAVBAR
   <div class="jexResponsive"> <div id="headerDiv"> <div class="header-menu">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   --inf-navbar-bgcolor: var(--inf-color-primary);
   --inf-navbar-shadow: none;
   --inf-navbar-color: var(--inf-color-light);
   --inf-navbar-color-hover: var(--inf-color-secondary);
   --inf-navbar-font-size: 1.125rem;
   --inf-navbar-font-size-mobile: 1rem;
   --inf-navbar-font-weight: 400;

   /* FIXED TOP set "fixed" // SCROLL set "relative" */
   --inf-navbar-position: fixed;
   /* FIXED TOP set "0" // SCROLL set "inherit" */
   --inf-navbar-position-value: 0;
   /* FIXED TOP set "calc(var(--inf-navbar-logo-height) + 1.5rem)" // SCROLL set "0" */
   --inf-navbar-margin-banner: calc(var(--inf-navbar-logo-height) + 1.5rem);

   /* logo */
   --inf-navbar-logo-height: 32px;
   --inf-navbar-logo-margin-right: 1rem;

   /* mobile menu toggler */
   --inf-navbar-toggler-bgcolor: var(--inf-color-light);
   --inf-navbar-toggler-border: 1px solid var(--inf-color-border);
   --inf-navbar-toggler-border-radius: 0; /*0.375rem*/
   --inf-navbar-toggler-font-size: 1rem;
   --inf-navbar-toggler-padding: 0.25rem 0.75rem;

   --inf-navbar-toggler-focus-shadow: 0 0 0 0.25rem rgba(var(--inf-color-light-rgb), .5);
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   HEADER | BANNER
   <div class="jexResponsive"> <div id="headerDiv"> <div class="header-banner">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   --inf-banner-height: 480px;
   --inf-banner-height-mobile: 240px;
   --inf-banner-position: 50% 50%;
   --inf-banner-position-mobile: 50% 50%;

   /* set --inf-banner-img-display "none" if --inf-banner-vid-display is set to "block" */
   --inf-banner-img-display: none;
   --inf-banner-vid-display: block;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | TOP | COOKIE
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="top"> <div class="topCookie">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   /* overlay */
   --inf-cookie-overlay-bgcolor: rgba(var(--inf-color-dark-rgb),0.9);

   /* message */
   --inf-cookie-message-bgcolor: var(--inf-color-light);
   --inf-cookie-message-border: 2px solid var(--inf-color-border);
   --inf-cookie-message-border-radius: 0; /*0.375rem*/
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | TOP | LOGIN
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="top"> <div class="topLogin">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   --inf-login-width: calc(320px - 2rem);
}




/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | HEADER
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <h1 class="caption">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   --inf-joblist-header-bgcolor: transparent;
   --inf-joblist-header-color: var(--inf-color-primary);
   --inf-joblist-header-padding: 0;
   --inf-joblist-header-text-align: left;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBLIST | LAYOUT
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form id="jobOfferSearch">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   --inf-joblist-filter-width: 320px;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBLIST | FILTER
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form id="jobOfferSearch"> <aside class="jobOfferSearchFilter">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   --inf-joblist-filter-bg: transparent;
   --inf-joblist-filter-border: 1px solid var(--inf-color-primary);
   --inf-joblist-filter-gutter: 0.25rem;

   --inf-joblist-filter-caption-color: var(--inf-color-dark);
   --inf-joblist-filter-caption-font-size: 0.875rem;
   --inf-joblist-filter-caption-font-weight: 400;
   --inf-joblist-filter-caption-text-transform: uppercase;

   --inf-joblist-filter-caption-icon-bgcolor: var(--inf-color-dark);
   --inf-joblist-filter-caption-icon-margin: calc((var(--inf-joblist-filter-caption-icon-size) - var(--inf-joblist-filter-caption-font-size)) / 2 * -1);
   --inf-joblist-filter-caption-icon-size: 1rem;

   --inf-joblist-filter-block-bgcolor: var(--inf-color-light);
   --inf-joblist-filter-block-border-radius: 0.25rem;
   --inf-joblist-filter-block-font-size: 0.875rem;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBLIST | SEARCH
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form id="jobOfferSearch"> <section class="mainSection"> <div class="jobOfferFreeTextSearch">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   --inf-joblist-search-icon-size: 1.5rem;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBLIST | SEARCH TAGS
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form id="jobOfferSearch"> <section class="mainSection"> <div class="filterIconContainer"> <section id="jobOfferListResult"> <ul class="searchTags">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   --inf-joblist-searchtag-bgcolor: var(--inf-color-light);
   --inf-joblist-searchtag-border: 1px solid var(--inf-color-border);
   --inf-joblist-searchtag-color: var(--inf-color-dark);
   --inf-joblist-searchtag-font-size: 0.875rem;
   --inf-joblist-searchtag-font-weight: 400;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBLIST | SEARCH INFO
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form id="jobOfferSearch"> <section class="mainSection"> <div class="filterIconContainer"> <section id="jobOfferListResult"> <p class="searchResultInfo">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   --inf-joblist-searchinfo-bgcolor: var(--inf-color-primary);
   --inf-joblist-searchinfo-border: 2px solid var(--inf-color-primary);
   --inf-joblist-searchinfo-color: var(--inf-color-light);
   --inf-joblist-searchinfo-font-size: 0.875rem;
   --inf-joblist-searchinfo-font-weight: 400;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBLIST | GOOGLE MAPS
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form id="jobOfferSearch"> <section class="mainSection"> <div class="filterIconContainer"> <section id="jobOfferListResult"> <p class="geoLocInfo">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   --inf-joblist-gmap-bgcolor: var(--inf-color-primary);
   --inf-joblist-gmap-border: 1px solid var(--inf-color-border);
   --inf-joblist-gmap-color: var(--inf-color-light);
   --inf-joblist-gmap-font-size: 0.875rem;
   --inf-joblist-gmap-font-weight: 400;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBLIST | PORTFOLIO
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form id="jobOfferSearch"> <section class="mainSection"> <div class="filterIconContainer"> <section id="jobOfferListResult"> <ul class="jobOffers">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   --inf-joblist-offer-bg: transparent;
   --inf-joblist-offer-bg-hover: var(--inf-color-primary);
   --inf-joblist-offer-border: 1px solid var(--inf-color-primary);
   --inf-joblist-offer-border-hover: 1px solid var(--inf-color-primary);
   --inf-joblist-offer-border-radius: 0;
   --inf-joblist-offer-box-shadow: 0;
   --inf-joblist-offer-box-shadow-hover: none;
   --inf-joblist-offer-color: var(--inf-color-dark);
   --inf-joblist-offer-color-hover: var(--inf-color-light);

   /* company logo */
   --inf-joblist-offer-company-logo-height: 1.25rem;

   /* company text */
   --inf-joblist-offer-compnay-text-font-size: 0.875rem;

   /* jobtitle */
   --inf-joblist-offer-title-color: var(--inf-color-primary);
   --inf-joblist-offer-title-color-hover: var(--inf-color-light);
   --inf-joblist-offer-title-font-size: var(--inf-heading-font-size-h2);
   --inf-joblist-offer-title-font-weight: 600;

   /* application area  */
   --inf-joblist-offer-application-font-size: 0.875rem;
   --inf-joblist-offer-application-font-weight: 400; 

   /* jobinfo */
   --inf-joblist-offer-info-font-size: 1rem;

   --inf-joblist-offer-info-icon-bgcolor: var(--inf-color-primary);
   --inf-joblist-offer-info-icon-bgcolor-hover: var(--inf-color-light);
   --inf-joblist-offer-info-icon-size: 1.5rem;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBOFFER | DETAIL
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <section class="contentWidth"> <div class="jobOffer"> <div class="jobOfferDataTable"> . . . <div class="jobOfferDetailView">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   --inf-joboffer-detail-h2-font-size: 1rem;
   --inf-joboffer-detail-h2-font-weight: 700;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBOFFER | IMAGE
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <section class="contentWidth"> <div class="jobOffer"> <div class="jobOfferDataTable"> . . . <div class="jobOfferImage">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   --inf-joboffer-image-height: 360px;
   --inf-joboffer-image-height-mobile: 240px;
   --inf-joboffer-image-position: 50% 50%;
   --inf-joboffer-image-position-mobile: 50% 50%;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | APPLYBY
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="contentWidth"> <div id="applyByContent">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   --inf-applyby-border: 2px solid var(--inf-color-border);
   --inf-applyby-height: 40px;
   /* set width to "Auswählen" button width */
   --inf-applyby-button-width: 160px;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | APPLICATION | HEADER
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="applicationForm"> <div class="contentWidth"> <form> <div id="tablecontent"> <div class="jobOfferData">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   --inf-form-jobcapt-color: var(--inf-color-dark);
   --inf-form-jobcapt-font-size: 1rem;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | APPLICATION | BLOCK
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="applicationForm"> <div class="contentWidth"> <form> <div id="tablecontent"> <div class="applicationBlock_">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
    /* caption*/
    --inf-form-blockcapt-color: var(--inf-heading-color);
    --inf-form-blockcapt-font-size: var(--inf-heading-font-size-h2);
    --inf-form-blockcapt-font-weight: var(--inf-heading-font-weight);

    /* field label */
    --inf-form-label-color: var(--inf-color-dark);
    --inf-form-label-font-size: 0.875rem;
    --inf-form-label-font-weight: var(--inf-font-weight);

    /* field value - file wrapper */
    --inf-form-wrapper-height: var(--inf-applyby-height);
    --inf-form-wrapper-button-border: var(--inf-applyby-border);
    --inf-form-wrapper-button-width: var(--inf-applyby-button-width);
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   FOOTER
   <div class="jexResponsive"> <div id="footerDiv">
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   --inf-footer-bgcolor: var(--inf-color-secondary);
   --inf-footer-color: var(--inf-color-light);
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   DEFAULT | ICON SET
   
## ############ ############ ############ ############ ############ ############ ############ */

:root {
   /* DEFAULT | FORM */
   
      --info-icon-form-select: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
      /* set color to fill="%23xxxxxx" (xxxxxx = hex color code) */
      --info-icon-form-checkbox: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FFFFFF" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/></svg>');
      /* set color to fill="%23xxxxxx" (xxxxxx = hex color code) */
      --info-icon-form-radio: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FFFFFF" viewBox="-4 -4 8 8"><circle r="2" /></svg>');
   
   /* HEADER | NAVBAR */
   
      /* set color to fill="%23xxxxxx" (xxxxxx = hex color code) */
      --inf-icon-navbar-toggler: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%231681FB" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/></svg>');
   
   /* CONTENT | JOBLIST | FILTER */
   
      --inf-icon-joblist-filter-caption-close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="rgb(0, 0, 0)" class="bi bi-caret-up-fill" viewBox="0 0 16 16"><path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/></svg>');
      --inf-icon-joblist-filter-caption-open: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="rgb(0, 0, 0)" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');
   
   /* CONTENT | JOBLIST | SEARCH */
   
      /* set color to fill="%23xxxxxx" (xxxxxx = hex color code) */
      --inf-icon-joblist-search: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%231681FB" class="bi bi-search" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>');
   
   /* CONTENT | JOBLIST | RSS FEED */
   
      --inf-icon-joblist-rss: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-rss" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M5.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-3-8.5a1 1 0 0 1 1-1c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0 8 8 0 0 0-8-8 1 1 0 0 1-1-1zm0 4a1 1 0 0 1 1-1 6 6 0 0 1 6 6 1 1 0 1 1-2 0 4 4 0 0 0-4-4 1 1 0 0 1-1-1z"/></svg>');
   
   /* CONTENT | JOBLIST | SEARCH TAGS */
   
      /* set color to fill="%23xxxxxx" (xxxxxx = hex color code) */
      --inf-icon-joblist-searchtag: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23875C38" class="bi bi-x-square-fill" viewBox="0 0 16 16"><path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm3.354 4.646L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708z"/></svg>');
      /* set color to fill="%23xxxxxx" (xxxxxx = hex color code) */
      --inf-icon-joblist-searchtag-hover: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23875C38" class="bi bi-x-square" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>');
   
   /* CONTENT | JOBLIST | PORTFOLIO */
   
      /* default */
      --inf-icon-default: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-bug-fill" viewBox="0 0 16 16"><path d="M4.978.855a.5.5 0 1 0-.956.29l.41 1.352A4.985 4.985 0 0 0 3 6h10a4.985 4.985 0 0 0-1.432-3.503l.41-1.352a.5.5 0 1 0-.956-.29l-.291.956A4.978 4.978 0 0 0 8 1a4.979 4.979 0 0 0-2.731.811l-.29-.956z"/><path d="M13 6v1H8.5v8.975A5 5 0 0 0 13 11h.5a.5.5 0 0 1 .5.5v.5a.5.5 0 1 0 1 0v-.5a1.5 1.5 0 0 0-1.5-1.5H13V9h1.5a.5.5 0 0 0 0-1H13V7h.5A1.5 1.5 0 0 0 15 5.5V5a.5.5 0 0 0-1 0v.5a.5.5 0 0 1-.5.5H13zm-5.5 9.975V7H3V6h-.5a.5.5 0 0 1-.5-.5V5a.5.5 0 0 0-1 0v.5A1.5 1.5 0 0 0 2.5 7H3v1H1.5a.5.5 0 0 0 0 1H3v1h-.5A1.5 1.5 0 0 0 1 11.5v.5a.5.5 0 1 0 1 0v-.5a.5.5 0 0 1 .5-.5H3a5 5 0 0 0 4.5 4.975z"/></svg>');
      
      /* arbeitszeit (employementDimension) */
      --inf-icon-arbeitszeit: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-clock-history" viewBox="0 0 16 16"><path d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.933zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744 1.352a7.08 7.08 0 0 0-.214-.468l.893-.45a7.976 7.976 0 0 1 .45 1.088l-.95.313a7.023 7.023 0 0 0-.179-.483zm.53 2.507a6.991 6.991 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17l-1 .025zm-.131 1.538c.033-.17.06-.339.081-.51l.993.123a7.957 7.957 0 0 1-.23 1.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952 2.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555 1.038l-.845-.535zm-.964 1.205c.122-.122.239-.248.35-.378l.758.653a8.073 8.073 0 0 1-.401.432l-.707-.707z"/><path d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0v1z"/><path d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z"/></svg>');
      /* berfusgruppe (shortDescription) */
      --inf-icon-berfusgruppe: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-people" viewBox="0 0 16 16"><path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/></svg>');
      /* einsatzadresse (exertionPlaceAddress) */
      --inf-icon-einsatzadresse: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-buildings" viewBox="0 0 16 16"><path d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022ZM6 8.694 1 10.36V15h5V8.694ZM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5V15Z"/><path d="M2 11h1v1H2v-1Zm2 0h1v1H4v-1Zm-2 2h1v1H2v-1Zm2 0h1v1H4v-1Zm4-4h1v1H8V9Zm2 0h1v1h-1V9Zm-2 2h1v1H8v-1Zm2 0h1v1h-1v-1Zm2-2h1v1h-1V9Zm0 2h1v1h-1v-1ZM8 7h1v1H8V7Zm2 0h1v1h-1V7Zm2 0h1v1h-1V7ZM8 5h1v1H8V5Zm2 0h1v1h-1V5Zm2 0h1v1h-1V5Zm0-2h1v1h-1V3Z"/></svg>');
      /* einsatzland (exertionCountry) */
      --inf-icon-einsatzland: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-globe" viewBox="0 0 16 16"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/></svg>');
      /* einsatzort (exertionPlace) */
      --inf-icon-einsatzort: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-geo-alt" viewBox="0 0 16 16"><path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/><path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg>');
      /* eintrittsdatum (engagementDateText) */
      --inf-icon-eintrittsdatum: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-calendar-week" viewBox="0 0 16 16"><path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg>');
      /* karrierelevel (careerLevel) */
      --inf-icon-karrierelevel: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-person" viewBox="0 0 16 16"><path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z"/></svg>');
   
   /* CONTENT | JOBOFFER | BUTTONS */
      --inf-icon-print: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-printer" viewBox="0 0 16 16"><path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/><path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"/></svg>');
   
   /* CONTENT | APPLICATION | BLOCK */
   
      /* set color to fill="%23xxxxxx" (xxxxxx = hex color code) */
      --inf-icon-add: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23875C38" class="bi bi-plus-lg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/></svg>');
      /* set color to fill="%23xxxxxx" (xxxxxx = hex color code) */
      --inf-icon-add-hover: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FFF" class="bi bi-plus-lg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/></svg>');
      
      /* set color to fill="%23xxxxxx" (xxxxxx = hex color code) */
      --inf-icon-delete: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23875C38" class="bi bi-x-lg" viewBox="0 0 16 16"><path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/></svg>');
      /* set color to fill="%23xxxxxx" (xxxxxx = hex color code) */
      --inf-icon-delete-hover: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FFF" class="bi bi-x-lg" viewBox="0 0 16 16"><path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/></svg>');
   
   /* SOCIAL MEDIA */
   
      --inf-icon-facebook: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"/></svg>');
      --inf-icon-instagram: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M224,202.66A53.34,53.34,0,1,0,277.36,256,53.38,53.38,0,0,0,224,202.66Zm124.71-41a54,54,0,0,0-30.41-30.41c-21-8.29-71-6.43-94.3-6.43s-73.25-1.93-94.31,6.43a54,54,0,0,0-30.41,30.41c-8.28,21-6.43,71.05-6.43,94.33S91,329.26,99.32,350.33a54,54,0,0,0,30.41,30.41c21,8.29,71,6.43,94.31,6.43s73.24,1.93,94.3-6.43a54,54,0,0,0,30.41-30.41c8.35-21,6.43-71.05,6.43-94.33S357.1,182.74,348.75,161.67ZM224,338a82,82,0,1,1,82-82A81.9,81.9,0,0,1,224,338Zm85.38-148.3a19.14,19.14,0,1,1,19.13-19.14A19.1,19.1,0,0,1,309.42,189.74ZM400,32H48A48,48,0,0,0,0,80V432a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V80A48,48,0,0,0,400,32ZM382.88,322c-1.29,25.63-7.14,48.34-25.85,67s-41.4,24.63-67,25.85c-26.41,1.49-105.59,1.49-132,0-25.63-1.29-48.26-7.15-67-25.85s-24.63-41.42-25.85-67c-1.49-26.42-1.49-105.61,0-132,1.29-25.63,7.07-48.34,25.85-67s41.47-24.56,67-25.78c26.41-1.49,105.59-1.49,132,0,25.63,1.29,48.33,7.15,67,25.85s24.63,41.42,25.85,67.05C384.37,216.44,384.37,295.56,382.88,322Z"/></svg>');
      --inf-icon-linkedin: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>');
      --inf-icon-xing: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM140.4 320.2H93.8c-5.5 0-8.7-5.3-6-10.3l49.3-86.7c.1 0 .1-.1 0-.2l-31.4-54c-3-5.6.2-10.1 6-10.1h46.6c5.2 0 9.5 2.9 12.9 8.7l31.9 55.3c-1.3 2.3-18 31.7-50.1 88.2-3.5 6.2-7.7 9.1-12.6 9.1zm219.7-214.1L257.3 286.8v.2l65.5 119c2.8 5.1.1 10.1-6 10.1h-46.6c-5.5 0-9.7-2.9-12.9-8.7l-66-120.3c2.3-4.1 36.8-64.9 103.4-182.3 3.3-5.8 7.4-8.7 12.5-8.7h46.9c5.7-.1 8.8 4.7 6 10z"/></svg>');
   }