:root {
  --color-primary-100: #CED7E4;
  --color-primary-200: #8894A5;
  --color-primary-300: #727F8F;
  --color-primary-400: #495667;
  --color-primary-500: #2B333E;
  --color-primary-600: #030C18;
  --color-primary-700: #000306;

  --color-accent-100: #FFD3D3;
  --color-accent-200: #FDA8A8;
  --color-accent-300: #EF7763;
  --color-accent-400: #EE3D1F;
  --color-accent-500: #AD0F28;
  --color-accent-600: #750106;
  --color-accent-700: #570105;

  --color-action-100: #FFDBA9;
  --color-action-200: #FFC481;
  --color-action-300: #FFBA4A;
  --color-action-400: #FFA029;
  --color-action-500: #F99F38;
  --color-action-600: #FD8E0F;
  --color-action-700: #D67402;

  --color-secondary-100: #E3EBFF;
  --color-secondary-200: #BDCEFB;
  --color-secondary-300: #86A8E3;
  --color-secondary-400: #5C91EE;
  --color-secondary-500: #2753A0;
  --color-secondary-600: #284983;
  --color-secondary-700: #13397C;

  --color-surface-01: #FFFFFF;
  --color-surface-02: #F5F9FF;
  --color-surface-03: #EEF2F9;
  --color-border-01: #EEF2F9;
  --color-border-02: #D1D7E4;
  --color-text-01: #2B333E;
  --color-text-02: #5C6573;
  --color-text-03: #ADADB5;
  --color-focus: #86A8E3;
  --shadow-surface-1x: 4px 8px 16px 0 rgba(28, 48, 75, 0.08);
}

@font-face {
  font-family: 'regular_font';
  src: url('/static/fonts/open-sans-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'regular_font';
  src: url('/static/fonts/open-sans-600.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'regular_font';
  src: url('/static/fonts/open-sans-500.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'regular_font';
  src: url('/static/fonts/open-sans-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'regular_font';
  src: url('/static/fonts/open-sans-300.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'title_font';
  src: url('/static/fonts/open-sans-600.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'title_font';
  src: url('/static/fonts/open-sans-500.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'title_font';
  src: url('/static/fonts/open-sans-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'title_font';
  src: url('/static/fonts/open-sans-300.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

html,
body {
  font-family: 'regular_font', 'Open Sans', Arial, sans-serif;
}

body {
  color: var(--color-text-01);
  background-color: var(--color-surface-02);
}

.font-title,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-accent-500);
  font-family: 'title_font', 'Roboto Condensed', 'Arial Narrow', 'Open Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 0;
}

.text-primary-500,
.text-primary-600,
.text-primary-700 {
  color: var(--color-primary-500);
}

.text-neutral-800,
.text-neutrals-800 {
  color: var(--color-text-01);
}

.text-gray-600,
.text-neutrals-600 {
  color: var(--color-text-02);
}

.bg-neutrals-100,
.bg-neutrals-200,
.bg-gray-50 {
  background-color: var(--color-surface-02);
}

.bg-neutrals-300 {
  background-color: var(--color-surface-03);
}

.bg-secondary-100 {
  background-color: var(--color-secondary-100);
}

.text-secondary-500 {
  color: var(--color-secondary-500);
}

.text-secondary-600 {
  color: var(--color-secondary-600);
}

.text-secondary-700 {
  color: var(--color-secondary-700);
}

.border-neutrals-300,
.border-gray-200 {
  border-color: var(--color-border-01);
}

.border-neutrals-400,
.border-primary-500,
.border-gray-300 {
  border-color: var(--color-border-02);
}

.shadow,
.shadow-md,
.shadow-lg,
.shadow-xl {
  box-shadow: var(--shadow-surface-1x);
}

.rounded,
.rounded-md,
.rounded-lg {
  border-radius: 2px;
}

.rounded-t-lg {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.rounded-r-lg {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.rounded-l-lg {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

.rounded-t-2xl {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

@media (min-width: 640px) {
  .sm\:rounded-lg {
    border-radius: 2px;
  }
}

@media (min-width: 768px) {
  .md\:rounded-lg {
    border-radius: 2px;
  }
}

.bg-primary-500 {
  background-color: var(--color-primary-500);
}

.hover\:bg-primary-600:hover,
.bg-primary-600 {
  background-color: var(--color-primary-600);
}

button.bg-primary-500:not(.rounded-full),
a.bg-primary-500:not(.rounded-full),
button.bg-primary-600:not(.rounded-full),
a.bg-primary-600:not(.rounded-full) {
  background-color: var(--color-action-500);
}

button.hover\:bg-primary-600:not(.rounded-full):hover,
a.hover\:bg-primary-600:not(.rounded-full):hover {
  background-color: var(--color-action-600);
}

button.bg-primary-500:not(.rounded-full) .text-white,
a.bg-primary-500:not(.rounded-full) .text-white,
button.bg-primary-600:not(.rounded-full) .text-white,
a.bg-primary-600:not(.rounded-full) .text-white {
  color: var(--color-primary-700);
}

a.rounded-full.bg-primary-500 {
  background-color: var(--color-primary-500);
}

a.rounded-full.hover\:bg-action-500:hover {
  background-color: var(--color-primary-600);
}

.text-action-400,
.text-action-500,
.text-action-700,
p a {
  color: var(--color-secondary-500);
}

.hover\:text-action-500:hover,
.hover\:text-action-700:hover,
p a:hover {
  color: var(--color-secondary-600);
}

.bg-action-400,
.bg-action-500,
.checked\:bg-action-400:checked {
  background-color: var(--color-action-500);
}

.hover\:bg-action-500:hover {
  background-color: var(--color-action-600);
}

.border-action-500,
.hover\:border-action-500:hover,
.focus\:border-action-500:focus {
  border-color: var(--color-secondary-400);
}

.focus\:ring-action-400:focus,
.focus\:ring-action-500:focus {
  --tw-ring-color: var(--color-focus);
}

input[type="range"]::-webkit-slider-thumb {
  border-color: var(--color-secondary-500);
}

input[type="range"]::-moz-range-thumb {
  border-color: var(--color-secondary-500);
}

header nav > section.inline-flex.bg-gradient-to-b {
  background: var(--color-accent-500);
  background-image: none;
  color: var(--color-surface-01);
  border-bottom: 1px solid var(--color-accent-600);
}

#list a.bg-white.rounded-lg.shadow,
.rounded-lg.shadow.bg-white,
.rounded-lg.shadow-md.bg-white,
.rounded-lg.shadow-lg.bg-white,
article[role="article"].bg-white {
  background-color: var(--color-surface-01);
  border: 1px solid var(--color-border-01);
  border-radius: 2px;
  box-shadow: var(--shadow-surface-1x);
}

#list a.bg-white.rounded-lg.shadow.border-action-500 {
  border-color: var(--color-accent-500);
}

article[role="article"].bg-white {
  border-color: var(--color-accent-500);
}

#list a.bg-white.rounded-lg.shadow .border-neutrals-400,
article[role="article"] .border-neutrals-300,
article[role="article"] .border-neutrals-400 {
  border-color: var(--color-border-02);
}

#list a.bg-white.rounded-lg.shadow .text-body_large,
.rounded-lg.shadow.bg-white .text-body_large,
.rounded-lg.shadow-md.bg-white .text-body_large,
.rounded-lg.shadow-lg.bg-white .text-body_large {
  color: var(--color-accent-500);
  font-family: 'title_font', 'Roboto Condensed', 'Arial Narrow', 'Open Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 0;
}

[aria-labelledby="share-heading"] #copyToClipboard,
[aria-labelledby="bs-share-heading"] #copyToClipboard {
  color: var(--color-secondary-500);
  fill: currentColor;
  border-color: var(--color-border-02);
}

[aria-labelledby="share-heading"] #copyToClipboard:hover,
[aria-labelledby="bs-share-heading"] #copyToClipboard:hover {
  color: var(--color-secondary-600);
}

@media (max-width: 1023px) {
  header nav > section.inline-flex.bg-gradient-to-b {
    border-bottom-color: var(--color-accent-600);
  }

  header nav button[aria-label="Menü öffnen"] {
    border-radius: 2px;
  }

  header nav button[aria-label="Menü öffnen"]:focus-visible {
    outline: 2px solid var(--color-surface-01);
    outline-offset: 2px;
  }

  header nav [role="dialog"] .bg-neutral-300,
  [aria-labelledby="slide-over-filter"] .bg-neutral-300 {
    background-color: rgba(43, 51, 62, 0.72);
  }

  header nav [role="dialog"] .overflow-y-scroll.bg-white.shadow-xl,
  [aria-labelledby="slide-over-filter"] .overflow-y-scroll.bg-white.shadow-xl {
    background-color: var(--color-surface-01);
    border-left: 4px solid var(--color-accent-500);
    box-shadow: -8px 0 24px rgba(43, 51, 62, 0.16);
  }

  header nav [role="search-mobile"] {
    color: var(--color-text-01);
  }

  header nav [role="search-mobile"] + div,
  header nav [role="search-mobile"] input,
  header nav [role="search-mobile"] .text-primary-500 {
    color: var(--color-primary-500);
  }

  #headerSearchMobile {
    background-color: var(--color-surface-01);
    border-color: var(--color-border-02);
    border-radius: 2px;
    color: var(--color-text-01);
  }

  header nav [aria-label="navigation mobile"] {
    background-color: var(--color-surface-01);
    color: var(--color-primary-500);
  }

  header nav [aria-label="navigation mobile"] ul {
    color: var(--color-primary-500);
    font-family: 'title_font', 'Roboto Condensed', 'Arial Narrow', 'Open Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0;
  }

  header nav [aria-label="navigation mobile"] li,
  header nav [aria-label="navigation mobile"].divide-y > :not([hidden]) ~ :not([hidden]),
  header nav [aria-label="navigation mobile"] .divide-y > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--color-border-02);
  }

  header nav [aria-label="navigation mobile"] a,
  header nav [aria-label="navigation mobile"] button {
    color: var(--color-primary-500);
  }

  header nav [aria-label="navigation mobile"] a:hover,
  header nav [aria-label="navigation mobile"] button:hover {
    color: var(--color-accent-500);
  }

  header nav [aria-label="navigation mobile"] svg {
    color: var(--color-accent-500);
    fill: currentColor;
  }

  div[aria-label="search"] {
    background-color: var(--color-surface-01);
    border-color: var(--color-border-01);
  }

  div[aria-label="search"] label {
    color: var(--color-text-02);
    font-family: 'title_font', 'Roboto Condensed', 'Arial Narrow', 'Open Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0;
  }

  div[aria-label="search"] input,
  div[aria-label="search"] select {
    background-color: var(--color-surface-01);
    border-color: var(--color-border-02);
    border-radius: 2px;
    color: var(--color-text-01);
    box-shadow: none;
  }

  div[aria-label="search"] input:focus,
  div[aria-label="search"] select:focus {
    border-color: var(--color-secondary-400);
    --tw-ring-color: var(--color-focus);
  }

  div[aria-label="search"] button[type="button"] {
    color: var(--color-primary-500);
  }

  div[aria-label="search"] button[type="button"] span {
    color: var(--color-primary-500);
    font-family: 'title_font', 'Roboto Condensed', 'Arial Narrow', 'Open Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0;
  }

  div[aria-label="search"] button[type="button"]:hover,
  div[aria-label="search"] button[type="button"]:hover span {
    color: var(--color-accent-500);
  }

  [aria-labelledby="slide-over-filter"] #slide-over-title {
    color: var(--color-accent-500);
    font-family: 'title_font', 'Roboto Condensed', 'Arial Narrow', 'Open Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0;
  }

  [aria-labelledby="slide-over-filter"] .border-b,
  [aria-labelledby="slide-over-filter"] .border-neutrals-300 {
    border-color: var(--color-border-02);
  }

  [aria-labelledby="slide-over-filter"] button.bg-white {
    color: var(--color-primary-500);
    border-radius: 2px;
  }

  [aria-labelledby="slide-over-filter"] button.bg-white:hover {
    color: var(--color-accent-500);
  }

  #list a.bg-white.rounded-lg.shadow,
  .rounded-lg.shadow.bg-white,
  .rounded-lg.shadow-lg.bg-white,
  article[role="article"] {
    background-color: var(--color-surface-01);
    border: 1px solid var(--color-border-01);
    border-radius: 2px;
    box-shadow: var(--shadow-surface-1x);
  }

  #list a.bg-white.rounded-lg.shadow.border-action-500 {
    border-color: var(--color-accent-500);
  }

  #list a.bg-white.rounded-lg.shadow .border-neutrals-400 {
    border-color: var(--color-border-02);
  }

  #list a.bg-white.rounded-lg.shadow svg {
    color: var(--color-primary-500);
  }

  #list a.bg-white.rounded-lg.shadow .text-body_large,
  .rounded-lg.shadow.bg-white .text-body_large,
  .rounded-lg.shadow-lg.bg-white .text-body_large {
    color: var(--color-accent-500);
    font-family: 'title_font', 'Roboto Condensed', 'Arial Narrow', 'Open Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0;
  }

  article[role="article"] .rounded-full {
    border-radius: 2px;
    background-color: var(--color-surface-03);
    color: var(--color-primary-500);
  }

  article[role="article"] .border-neutrals-300,
  article[role="article"] .border-neutrals-400 {
    border-color: var(--color-border-02);
  }

  article[role="article"] svg {
    color: var(--color-accent-500);
  }
}

@media (min-width: 1024px) {
  header nav > section.hidden.desktop\:inline-flex {
    max-width: 1440px;
  }

  header nav > section > .desktop\:max-w-desktop {
    max-width: 1440px;
  }
}

/* DIS relaunch styling overrides */
*,
::before,
::after,
button,
input,
select,
textarea {
  font-family: 'regular_font', 'Open Sans', Arial, sans-serif;
  letter-spacing: 0;
}

.font-title,
h1,
h2,
h3,
h4,
h5,
h6,
header nav [aria-label="navigation mobile"] ul,
div[aria-label="search"] label,
section[aria-label="search"] label,
div[aria-label="search"] button[type="button"] span,
section[aria-label="search"] button[type="button"] span,
[aria-labelledby="slide-over-filter"] #slide-over-title,
#list a.bg-white.rounded-lg.shadow .text-body_large,
.rounded-lg.shadow.bg-white .text-body_large,
.rounded-lg.shadow-md.bg-white .text-body_large,
.rounded-lg.shadow-lg.bg-white .text-body_large {
  font-family: 'regular_font', 'Open Sans', Arial, sans-serif;
}

div[aria-label="search"] button[type="button"],
section[aria-label="search"] button[type="button"],
div[aria-label="search"] button[type="button"] span,
section[aria-label="search"] button[type="button"] span,
div[aria-label="search"] button[type="button"] svg,
section[aria-label="search"] button[type="button"] svg {
  color: var(--color-secondary-500);
}

div[aria-label="search"] button[type="button"]:hover,
section[aria-label="search"] button[type="button"]:hover,
div[aria-label="search"] button[type="button"]:hover span,
section[aria-label="search"] button[type="button"]:hover span,
div[aria-label="search"] button[type="button"]:hover svg,
section[aria-label="search"] button[type="button"]:hover svg {
  color: var(--color-secondary-600);
}

article[role="article"] [aria-labelledby="locations-heading"] svg {
  color: var(--color-primary-500);
  fill: currentColor;
}

[aria-labelledby="share-heading"] span.text-primary-500,
[aria-labelledby="bs-share-heading"] span.text-primary-500 {
  color: var(--color-secondary-500);
  fill: currentColor;
}

[aria-labelledby="share-heading"] span.hover\:text-action-500:hover,
[aria-labelledby="bs-share-heading"] span.hover\:text-action-500:hover {
  color: var(--color-secondary-600);
}

[aria-labelledby="share-heading"] a.rounded-full.bg-primary-500,
[aria-labelledby="bs-share-heading"] a.rounded-full.bg-primary-500 {
  background-color: var(--color-secondary-500);
}

[aria-labelledby="share-heading"] a.rounded-full.hover\:bg-action-500:hover,
[aria-labelledby="bs-share-heading"] a.rounded-full.hover\:bg-action-500:hover {
  background-color: var(--color-secondary-600);
}

#list a.bg-white.rounded-lg.shadow.border-action-500 {
  border-color: var(--color-primary-500);
}

main button[title="Job merken"],
main button[title="Job merken"] p,
main button[title="Job merken"] svg,
[aria-labelledby="share-heading"] #copyToClipboard,
[aria-labelledby="share-heading"] #copyToClipboard svg,
[aria-labelledby="bs-share-heading"] #copyToClipboard,
[aria-labelledby="bs-share-heading"] #copyToClipboard svg {
  color: var(--color-secondary-500);
}

main button[title="Job merken"]:hover,
main button[title="Job merken"]:hover p,
main button[title="Job merken"]:hover svg,
[aria-labelledby="share-heading"] #copyToClipboard:hover,
[aria-labelledby="share-heading"] #copyToClipboard:hover svg,
[aria-labelledby="bs-share-heading"] #copyToClipboard:hover,
[aria-labelledby="bs-share-heading"] #copyToClipboard:hover svg {
  color: var(--color-secondary-600);
}

[aria-labelledby="share-heading"] #copyToClipboard,
[aria-labelledby="share-heading"] #copyToClipboard svg,
[aria-labelledby="bs-share-heading"] #copyToClipboard,
[aria-labelledby="bs-share-heading"] #copyToClipboard svg {
  fill: currentColor;
}

@media (max-width: 1023px) {
  div[aria-label="search"] > div,
  section[aria-label="search"] > div {
    padding-bottom: 0.75rem;
    gap: 0.75rem;
  }

  main[x-data="cdxSearch"] {
    padding-top: 0.5rem;
  }

  aside[aria-label="result-list"] > div {
    padding-right: 0;
  }

  aside[aria-label="result-list"] > div > div:first-child {
    align-items: flex-start;
    gap: 0.125rem;
    margin-bottom: 0.75rem;
    width: 100%;
  }

  aside[aria-label="result-list"] h1 {
    width: 100%;
    margin: 0;
    line-height: 1.2;
  }

  aside[aria-label="result-list"] h1 + p {
    margin: 0;
  }

  #list {
    gap: 0.75rem;
  }
}