/* Styles of the original what.at /jobs/ page (www.what.at/jobs/style/style.css), unchanged except
   that the Google Fonts @import is gone (fonts come from /assets/css/fonts.css). The additions
   for the static site are at the end. */


:root, :host {
    --main-width: 1390px;

    --wa-font-family-body:  "Besley", serif;
    --wa-font-family-heading: var(--wa-font-family-body);

    --what-primary: #fdc717;
    --what-secondary: #e20e18;
    --what-text-color: #2d2d2d;
    --what-dark-primary: #1e1e1e;

    --wa-border-radius-xl: 2.25rem;

    --what-details-width: 100%;
  }


  body {
    font-family: var(--wa-font-family-body);
    color: var(--what-text-color);
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    font-style: normal;
    padding: 0;
  }

  .what_button {
    font-family: "Kanit", sans-serif;
    font-size: 18px;
    line-height: 1.28 !important;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 2em;
    border-width: 1px;
    padding: 0.6em 1.8em;
    background-color: var(--what-primary);
    border-color: var(--what-text-color) !important;
    color: var(--what-text-color) !important;
    box-shadow: 3px 3px 0px 1px var(--what-text-color);
    cursor: pointer;

    
    vertical-align: top;
    text-align: center;
    transition-property: background-color, border, box-shadow, color, opacity, transform;
    transition-duration: 0.3s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  form .what_button {
    margin-top: -8px;
    margin-bottom: 20px;
    margin-right: 12px;
  }

  .what_search_input {
    
    --border-width: var(--wa-form-control-border-width);
    --box-shadow: initial;
    border-color: var(--border-color, var(--wa-form-control-resting-color));
    border-radius: var(--wa-form-control-border-radius);
    border-style: var(--wa-form-control-border-style);
    cursor: text;
    color: var(--wa-form-control-value-color);
    font-size: var(--wa-size);
    font-family: inherit;
    line-height: 1.28rem;
    vertical-align: middle;
    padding: 0.6em 0.3em;
    width: 90%;
    transition: background-color var(--wa-transition-normal), border var(--wa-transition-normal), outline var(--wa-transition-fast);
    transition-timing-function: var(--wa-transition-easing);


  }

  .what_button_light {
    font-family: "Kanit", sans-serif;
    font-size: 18px;
    line-height: 1.28 !important;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 2em;
    padding: 0.6em 1.8em;
    background: #FFFFFF !important;
    border-color: var(--what-text-color) !important;
    color: var(--what-text-color) !important;
    box-shadow: 3px 3px 0px 1px var(--what-text-color);
    cursor: pointer;
    
    text-decoration: none;
    text-align: center;
    transition-property: background-color, border, box-shadow, color, opacity, transform;
    transition-duration: 0.3s;
    -webkit-tap-highlight-color: var(--what-text-color);
  }


  .what_link {
    text-decoration: none;
    color: var(--what-text-color) !important;
  } 

  .what_link:hover {
    text-decoration: underline;
  } 
  

  .what_button:hover, .what_button_light:hover {
      box-shadow: 0px 0px 0px 0px var(--what-text-color);
  }




  /* HEADER */
    header {
      display: block;
      height: var(--header-height);
      width: 100vw;
      margin: 0;
      padding: 0;
      position: fixed;
      left: 0;
      top:0;
      z-index: 99;
    }

    header .header_content {
      width: var(--main-width);
      height: var(--header-height);
      margin: auto;

      background: white;
    }


    header .what_logo {
      float:left;
      height: var(--header-logo-height);
      margin: var(--header-logo-margin);
    }

    header .what_menu {
      height: 100%;
      width: auto;
      float: right;
      text-align: right;
      line-height: 80px;
    }

    header .what_menu button {
      margin-top: 15px;
      margin-left: 15px;
    }

    header .what_menu a {
      padding-left: 10px;
      padding-right: 10px;
      color: var(--what-text-color);
      letter-spacing: 0.05em !important;
      font-family: "Kanit", sans-serif;
      font-size: 18px;
      font-weight: 600;
      text-decoration: none;
      text-transform: uppercase !important;
      transition-property: color, opacity, transform;
      transition-duration: 0.3s;
    }


    header .what_menu a:hover, header .what_menu a.active {
      color: var(--what-primary);
    }

    .what_menu_mobile {
      display: none;
    }

    .what_menu_mobile_toggle {
      display: none;
    }
  /* END HEADER */


  /* MAIN PART */
    main {
      width: var(--main-width);
      margin: auto;
      margin-top: calc(var(--header-height) + 25px);
      padding: 0;
    }

    main .what_title_box {
      background: var(--wa-color-yellow-95);
      padding: 2.8rem;

      border: 1px solid transparent;
      border-radius: var(--wa-border-radius-xl);
    }


    main .what_title_box h1 {
      line-height: 2.8rem;
    }

  /* END MAIN PART */

  /* CONTAINER */
    .what_job_container_long {
      padding: 2.5rem 0;
      max-width: 100%;
    }

    .what_job_box_long {
      max-width: 100%;
      border: 1px solid var(--what-dark-primary);
      border-radius: var(--wa-border-radius-xl);
      display: grid;
      align-items: center;
      grid-template-columns: 200px auto 90px;
      margin-bottom: 1rem;
      overflow: hidden;

      background-color: #ffffff;
    
    }

    .what_job_box_long .what_job_logo {
      height: auto;
      padding: 1rem 0.8rem;
      border-right: 1px solid var(--what-text-color);

    }

    .what_job_box_long .what_job_logo img {
      max-width: calc(200px - 1.6rem);
      max-height: 120px;
    }

    .what_job_box_long .what_job_box_content {
      padding: 0 1rem;
    }

    .what_job_box_long .what_job_box_content h2 {
      font-size: 1.4rem;
      font-weight: bold;
      line-height: 1.8rem;
      margin-bottom: 0.3rem;

      inline-size: auto;
      overflow-wrap: break-word;
    }

    .what_job_box_long .what_job_box_info {
      padding-bottom: 0.3rem;
      height: auto;
    }
    
    wa-details {
      width: var(--what-details-width);
    }
    wa-details wa-icon {
      display: none;
    }
    
    wa-details.custom-icons::part(header), wa-details.custom-icons::part(content) {
      padding: 0;
    }

    wa-details.custom-icons::part(summary) {
      padding: 0;
      font-weight: bold;
    }


    wa-details.custom-icons::part(base) {
      padding: 0;
      border-style: none;
      border: none !important;
    }

    wa-details.custom-icons::part(summary-icon) {
      rotate: none;
      float: right;
      display: none;

    }

    .what_job_box_long .what_job_box_actions {
      margin: 0.5rem 0;
      height: 2.4rem;
    }  


    .what_job_box_long .what_job_box_actions wa-button::part(base) {
      color: #30323f;
      transition: all var(--wa-transition-slow) var(--wa-transition-easing);
    
    }

    .what_job_box_long .what_job_box_actions wa-button::part(base):hover {
      background: #30323f;
      color: #FFFFFF;
    }

  

    .what_job_button {
      background-color: var(--what-primary);
      transition: all var(--wa-transition-slow) var(--wa-transition-easing);

      border-start-start-radius: var(/* top left */ --wa-border-block-start-radius, var(--wa-border-inline-start-radius, var(--wa-form-control-border-radius)));
      border-start-end-radius: var(/* top right */ --wa-border-block-start-radius, var(--wa-border-inline-end-radius, var(--wa-form-control-border-radius)));
      border-end-start-radius: var(/* bottom left */ --wa-border-block-end-radius, var(--wa-border-inline-start-radius, var(--wa-form-control-border-radius)));
      border-end-end-radius: var(/* bottom right */ --wa-border-block-end-radius, var(--wa-border-inline-end-radius, var(--wa-form-control-border-radius)));

      border-style: none;
      justify-content: center;
      text-decoration: none;
      user-select: none;
      -webkit-user-select: none;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      padding: 0 var(--wa-space, var(--wa-space-m));
      padding: 0.3rem 0.75rem;
      font-family: inherit;
      font-size: 0.9rem;
      color: var(--what-text-color);

      line-height: 2.4rem;

      transition: all var(--wa-transition-slow) var(--wa-transition-easing);
    }
    
    .what_job_button wa-icon {
      vertical-align: -2px;
    }

    .what_job_button.bewerben {
      background-color: var(--what-primary);
    }

    .what_job_button.jobkrone {
      background-color: var(--wa-color-green-70);
    }

    .what_job_button.teilen {
      background-color: var(--wa-color-violet-70);
    }


    wa-dropdown wa-menu {
      background-color: var(--wa-color-violet-95);
    }

    wa-dropdown wa-menu-item a {
      color: var(--wa-color-violet-10);
      text-decoration: none;
    }

    .what_copy_button::part(button) {
      margin-left: 18px;
      color: var(--wa-color-violet-10);
      background-color: none;
      
    
      transition: all var(--wa-transition-slow) var(--wa-transition-easing);
  }

  .what_copy_button::part(button)::after {
      margin-left: 5px;
      color: var(--wa-color-violet-10);
      content: "Kopieren";
      font-family: var(--wa-font-family-body);
      font-weight: 500;
  }

    .pagination {
      list-style-type: none;
      padding: 10px 0;
      display: inline-flex;
      justify-content: space-between;
      box-sizing: border-box;
    }
    .pagination li {
      box-sizing: border-box;
      padding-right: 10px;
    }

    .pagination a {
      border: 0px solid var(--wa-color-gray-20);
      border-radius: calc(0.375* 1rem);;
      background-color: var(--wa-color-gray-20);

      text-decoration: none;
      font-size: var(--wa-size, var(--wa-font-size-m));
      height: var(--wa-form-control-height);
      line-height: calc(var(--wa-form-control-height) - var(--border-width)* 2);
      color: white;
      cursor: pointer;
      padding: 0.2em var(--wa-space-s, var(--wa-space-m));

      transition-property: background, border, box-shadow, color;
      transition-duration: var(--wa-transition-fast);
      transition-timing-function: var(--wa-transition-easing);
    }

    .pagination a.current_page {
      background-color: var(--wa-color-gray-80);
      color: var(--wa-color-gray-20);
    }


    form {
        max-width: auto;
        margin: 0;
        padding: 0px;
        border: none;
        background-color: transparent;
        border-radius: none;
    }

    form .what_link {
      margin-left: 20px;
      line-height: 2.28 !important;
    }


    form wa-input {
      background-color: #FFFFFF;
    }

    .wa-cluster a {
      margin-right: 0.6rem;
      font-weight: 800;
    }
  /* END CONTAINER */


  /* FOOTER */

    .bottom_frame_box {
      width: 100%;
      margin-top: 2.5rem;
      background: var(--what-dark-primary);
    }
    .bottom_frame_box .bottom_frame {
      border-top: solid var(--wa-border-radius-xl) white;
      border-radius:  0 0 var(--wa-border-radius-xl) var(--wa-border-radius-xl);
    }

    footer {
      width: 100%;
      
      height: 40px;
      background: var(--what-dark-primary);
      color: #FFFFFF;
      text-align: center;
      font-size: 0.8rem;
    }


  /* END FOOTER */

  /* MOBILE MEDIA */
    @media (min-width: 1391px) {
    :root {
          --header-height: 80px;
          --header-logo-height:44px;
          --header-logo-margin: 23px 0;
      }
    }
    @media (min-width: 1025px) and (max-width: 1390px) {
      :root {
        --main-width: 1090px;
          --header-height: 80px;
          --header-logo-height:30px;
          --header-logo-margin: 25px 0;
      }
    }
    @media (min-width: 601px) and (max-width: 1024px) {
      :root {
        --main-width: 690px;
          --header-height: 80px;
          --header-logo-height:30px;
          --header-logo-margin: 25px 10px;
      }

      main {
        padding: 0 15px;
      }
    }
    @media (max-width: 600px) {
      :root {
        --main-width: auto;
          --header-height: 60px;
          --header-logo-height:40px;
          --header-logo-margin: 20px 10px;

        --what-details-width: 100%;
      }



      /* HEADER */
      header {
        display: block;
        height: var(--header-height);
        width: 100vw;
        margin: 0;
        padding: 0;
        position: fixed;
        left: 0;
        top:0;
        z-index: 99;
      }

      header .header_content {
        width: var(--main-width);
        height: var(--header-height);
        margin: auto;

        background: white;
      }


      header .what_logo {
        float:left;
        height: var(--header-logo-height);
        margin: var(--header-logo-margin);
      }

      header .what_menu {
        display: none;
      }

      .what_menu_mobile_toggle {
        display: block;
        float: right;
        position: fixed;
        z-index: 9999;
        top: 0px;
        right: 15px;
        height: var(--header-logo-height);
        font-size: var(--header-logo-height);
        margin: var(--header-logo-margin);
      }

      .drawer-light-dismiss {
        backdrop-filter: blur(9px) saturate(150%);
        -webkit-backdrop-filter: blur(9px) saturate(150%);
        background-color: rgba(255, 255, 255, 0.62);
        border-radius: 12px;
        border: 1px solid rgba(209, 213, 219, 0.3);
      }
      .what_menu_mobile {
       display: block;
        
        text-align: right;
        line-height: 3rem;
        padding-right: 0px;

       
      }

      .what_menu_mobile li {
        display: block;
        list-style: none;
      }

      .what_menu_mobile .what_logo {
        float:right;
        height: var(--header-logo-height);
        margin: var(--header-logo-margin);
      }

      .what_menu_mobile button {
        margin-top: 15px;
        margin-left: 15px;
      }

      .what_menu_mobile a {
        padding-left: 10px;
        padding-right: 10px;
        color: var(--what-text-color);
        letter-spacing: 0.05em !important;
        font-family: "Kanit", sans-serif;
        font-size: 18px;
        font-weight: 600;
        text-decoration: none;
        text-transform: uppercase !important;
        transition-property: color, opacity, transform;
        transition-duration: 0.3s;
      }


      .what_menu_mobile a:hover, .what_menu_mobile a.active {
        color: var(--what-primary);
      }

      .what_menu_mobile .normal_link a {
        letter-spacing: 0 !important;
        font-family: var(--wa-font-family-body);
        font-size: 16px;
        text-decoration: none;
        text-transform: none !important;
      }
    /* END HEADER */


      main {
        padding: 0 10px;
      }
      main .what_title_box {
        padding: 1.8rem;
      }


      .what_job_container_long {
        padding: 1.5rem 0;
      }

      .what_job_box_long {
        display: grid;
        align-items: center;
        grid-template-columns: 200px auto 120px;
        grid-template-columns: repeat(1, 1fr);

        background-image: none !important;
      
      }

      .what_job_box_long .what_job_logo {
        height: auto;
        padding: 1rem 0.8rem;
        border-right: none;
      }

      .what_job_box_long .what_job_box_content h2 {
 
        inline-size: 83vw;
        overflow-wrap: break-word;
      }
  

      .what_job_box_long .what_job_box_actions {
        margin: 0.5rem 0;
        height: 4.8rem;
      }

      .what_job_box_long .what_job_box_actions wa-button, .what_job_box_long .what_job_box_actions .what_job_button {
        margin-bottom: 0.3rem;
      }

      .hideOnMobile {
        display: none;
      }
      

      .what_search_input {
        width: 80%;
      }

    }

  /* END MOBILE MEDIA */


/* ---- static site additions */

/* Besley is a variable font: declare its whole weight range here so weight 800 (the
   Bundesland links) renders as on the original page, which loaded Besley 400..900. */
@font-face {
  font-family: 'Besley';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/PlI8FlO1MaNwaNG8UgeHyH0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Besley';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/PlI8FlO1MaNwaNG8XAeH.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.what_search_input {
  background: white url(/assets/jobs/search.png) no-repeat scroll;
  background-size: 1.6rem auto;
  background-position: calc(100% - 0.7rem);
}

/* The mobile menu was a Web Awesome <wa-drawer> opened by a <wa-icon>; here it is a native
   <dialog> sliding in from the right, opened by a button with the same bars icon. */
.what_menu_mobile_toggle {
  border: 0;
  padding: 0;
  background: none;
  color: var(--what-text-color);
  cursor: pointer;
  width: var(--header-logo-height);
}
.what_menu_mobile_toggle svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
dialog.what_drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(25rem, 100vw);
  max-width: 100vw;
  height: 100%;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: var(--wa-shadow-l);
  color: var(--wa-color-text-normal);
  background: white;
  overflow: auto;
  translate: 100% 0;
  transition: translate var(--wa-transition-slow) var(--wa-transition-easing), display var(--wa-transition-slow) allow-discrete, overlay var(--wa-transition-slow) allow-discrete;
}
dialog.what_drawer[open] {
  translate: 0 0;
}
@starting-style {
  dialog.what_drawer[open] {
    translate: 100% 0;
  }
}
dialog.what_drawer::backdrop {
  background: rgb(0 0 0 / 0.25);
}
.what_drawer_body {
  min-height: 100%;
  box-sizing: border-box;
  padding: var(--wa-space-l);
}
.what_drawer_close {
  float: right;
  border: 0;
  padding: 0;
  width: 1.75rem;
  height: 1.75rem;
  background: none;
  color: var(--what-text-color);
  cursor: pointer;
}
.what_drawer_close svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Job list (assets/js/jobs.js): native elements in place of the original's Web Awesome
   components, with their look. <wa-icon> -> inline SVG, 1em high. */
.what_icon {
  fill: currentColor;
  vertical-align: -2px;
}
.what_job_details summary {
  font-weight: bold;
  cursor: pointer;
  list-style: none;
}
.what_job_details summary::-webkit-details-marker {
  display: none;
}
.what_job_description:empty + br {
  display: none;
}
/* The share button is a <button> (it opens a popover); the original's was an inline <a>. With
   line-height normal it is as tall as the inline links next to it. */
button.what_job_button {
  font-weight: inherit;
  line-height: normal;
}
/* <wa-dropdown> menu: a popover in the top layer, placed by jobs.js. */
.what_share_menu {
  inset: auto;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-violet-95);
  color: var(--wa-color-violet-10);
  font-size: 18px;
  line-height: 1.2;
}
.what_share_menu a, .what_share_menu button {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 28px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.what_share_menu a:hover, .what_share_menu button:hover,
.what_share_menu a:focus-visible, .what_share_menu button:focus-visible {
  background: var(--wa-color-violet-90);
}
/* The heading shows the number of jobs found: hidden (space kept) until jobs.js has it, so the
   static text does not flash up. Without JS the static text stays. */
@media (scripting: enabled) {
  .what_title_box h1[data-pending] {
    visibility: hidden;
  }
}