@font-face {
  font-family: "OpenSans";
  font-style: oblique -15 15;
  font-weight: 300 800;
  src: url("/78609089d3dad36318ae0190321e6f3e.ttf");
  font-display: swap;
}

:root {
  /* styleguide colors */
  --itpr-blue-1: #003b5c;
  --itpr-blue-1-rgb: 0, 59, 92;
  --itpr-blue-2: #1a658f;
  --itpr-blue-2-rgb: 26, 101, 143;
  --itpr-blue-6: #d5edf9;
  --itpr-blue-6-rgb: 213, 237, 249;

  /* custom colors */
  --fim-light: #e6ebef;
  --fim-light-rgb: 230, 235, 239;

  --bs-light: var(--fim-light);
  --bs-light-rgb: var(--fim-light-rgb);

  --bs-font-sans-serif: "OpenSans", sans-serif;
  --bs-primary: var(--itpr-blue-2);
  --bs-primary-rgb: var(--itpr-blue-2-rgb);
  --bs-link-color: var(--itpr-blue-2);
  --bs-link-color-rgb: var(--itpr-blue-2-rgb);
  --bs-link-hover-color: var(--itpr-blue-2);
  --bs-link-hover-color-rgb: var(--itpr-blue-2-rgb);

  --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E");

  --focus-ring: 0 0 0 2px white, 0 0 0 4px var(--itpr-blue-2);

  /* Leistungen */
  --leistungen-200: #e4e9ef;
  --leistungen-400: #bcc1d4;
  --leistungen-600: #8697b1;
  --leistungen-800: #4f7397;

  /* Datenfelder */
  --datenfelder-200: #ece4e2;
  --datenfelder-400: #cbbdb4;
  --datenfelder-600: #ab9182;
  --datenfelder-800: #8b6a59;

  /* Prozesse */
  --prozesse-200: #eff1e3;
  --prozesse-400: #d4ddae;
  --prozesse-600: #adc46a;
  --prozesse-800: #83ad27;
}

/* Add global focus styles */
*:focus-visible,
.page-link:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

a {
  text-decoration-color: rgba(var(--itpr-blue-2-rgb), 0.5);
}

a:hover {
  text-decoration-color: var(--itpr-blue-2);
}

.fs-7 {
  font-size: 0.875rem;
}

.fs-8 {
  font-size: 0.75rem;
}

/* custom badges */
.badge {
  --bs-badge-font-weight: 600;
}

.badge-success {
  color: var(--bs-success-text-emphasis);
  background-color: var(--bs-success-bg-subtle);
  border: 0.5px solid rgba(var(--bs-success-rgb));
}

.badge-warning {
  color: var(--bs-warning-text-emphasis);
  background-color: var(--bs-warning-bg-subtle);
  border: 0.5px solid rgba(var(--bs-warning-rgb));
}

.badge-danger {
  color: var(--bs-danger-text-emphasis);
  background-color: var(--bs-danger-bg-subtle);
  border: 0.5px solid rgba(var(--bs-danger-rgb));
}

.badge-info {
  color: var(--bs-info-text-emphasis);
  background-color: var(--bs-info-bg-subtle);
  border: 0.5px solid rgba(var(--bs-info-rgb));
}

.badge-light {
  color: #000;
  background-color: var(--bs-light);
  border: 0.5px solid var(--bs-gray-400);
}

.badge-dark {
  color: #000;
  background-color: var(--bs-gray-400);
  border: 0.5px solid var(--bs-gray-600);
}

.bg-itpr-blue-2 {
  background-color: var(--itpr-blue-2);
}

.bg-itpr-blue-6 {
  background-color: var(--itpr-blue-6);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex-grow: 1;
}

.list-group-item {
  --bs-list-group-active-bg: var(--bs-primary);
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: lch(from var(--bs-primary) calc(l - 10) c h);
  --bs-btn-hover-border-color: lch(from var(--bs-primary) calc(l - 10) c h);
  --bs-btn-active-bg: lch(from var(--bs-primary) calc(l - 15) c h);
  --bs-btn-active-border-color: lch(from var(--bs-primary) calc(l - 15) c h);

  --bs-btn-focus-box-shadow: var(--focus-ring);
}

.btn-light {
  --bs-btn-color: var(--itpr-blue-1);
  --bs-btn-bg: var(--bs-light);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-hover-color: var(--itpr-blue-1);
  --bs-btn-hover-bg: lch(from var(--bs-light) calc(l - 10) c h);
  --bs-btn-hover-border-color: lch(from var(--bs-light) calc(l - 10) c h);
  --bs-btn-active-color: var(--itpr-blue-1);
  --bs-btn-active-bg: lch(from var(--bs-light) calc(l - 15) c h);
  --bs-btn-active-border-color: lch(from var(--bs-light) calc(l - 15) c h);

  --bs-btn-focus-box-shadow: 0 0 0 2px var(--itpr-blue-2), 0 0 0 4px white;
}

.btn-icon {
  color: var(--bs-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 2rem;
  height: 2rem;
  justify-content: center;
  background-color: transparent;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.btn-icon:hover {
  background-color: var(--bs-tertiary-bg);
}

.hover-gray-tertiary:hover {
  background-color: var(--bs-tertiary-bg);
}

.btn-input-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--bs-primary);
  background-color: var(--bs-white);
  text-decoration: none;
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--bs-border-color);
}

.btn-input-group:hover {
  background-color: var(--bs-secondary-bg);
}

.btn-dropdown {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0rem 0.75rem;
  color: var(--bs-body-color);
  background-color: var(--bs-white);
  border-radius: 0 6px 6px 0;
  border: none;
  border-left: 1px solid var(--bs-border-color);
}

.btn-dropdown:hover {
  background-color: var(--bs-tertiary-bg);
}

.chip {
  cursor: pointer;
  background-color: var(--bs-light);
  color: var(--bs-body);
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  border: none;
  border-radius: 50px;
  padding: 0.25rem 0.5rem;
  max-width: 275px;
}

.chip:hover {
  opacity: 0.8;
}

.hover-bg-tertiary:hover {
  cursor: pointer;
  background-color: var(--bs-tertiary-bg);
}

.hover-bg-secondary:hover {
  cursor: pointer;
  background-color: var(--bs-secondary-bg);
}

/* Transition to a fixed-width sidebar on the lg breakpoint.
 * At this point, the layout will also switch from flex-column to flex-row.
 * */
@media (min-width: 992px) {
  .sidebar {
    width: 34px;
    min-width: 350px;
    border-right: var(--bs-border-width) var(--bs-border-style)
      var(--bs-border-color);
  }

  .sidebar > .container {
    max-height: 100dvh;
    overflow-y: auto;
  }
}

@media (min-width: 992px) {
  .table-of-contents {
    width: 34px;
    min-width: 270px;
    border-right: var(--bs-border-width) var(--bs-border-style)
      var(--bs-border-color);
  }
}

.sidebar-content {
  position: sticky;
  top: 0;
  overflow-y: auto;
  height: 100vh;
}

ul::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.multi-select-filter {
  list-style: none;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 8px;
}

.multi-select-filter-item {
  border: none;
}

.sidebar-dropdown-sizing {
  width: 325px;
  max-height: 40vh;
  overflow-y: auto;
}

select {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' 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>") !important;
}

select option {
  color: var(--bs-body-color);
}

/* a search-result on the search page */
.search-result {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.search-result > header > a {
  text-decoration: none;
}

.search-result + .search-result {
  border-top: solid 1px var(--bs-secondary-bg);
}

.line-clamp {
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* customizd nav styles in the search side-bar */
.nav-pills {
  --bs-nav-link-color: var(--bs-body-color);
  --bs-nav-link-hover-color: var(--bs-body-color);
  --bs-nav-pills-link-active-color: var(--bs-body-color);
  --bs-nav-pills-link-active-bg: var(--bs-secondary-bg);
}

.nav-pills a.nav-link {
  transition: none;
}

.nav-pills a.nav-link:hover {
  background-color: var(--bs-secondary-bg);
}

.nav-pills a.nav-link.active {
  font-weight: 700;
}

/* toned-down version of the default pagination element */
.pagination {
  --bs-pagination-color: var(--bs-body-color);
  --bs-pagination-hover-color: var(--bs-body-color);
  --bs-pagination-active-color: var(--bs-primary-text-emphasis);
  --bs-pagination-active-bg: var(--bs-primary-bg-subtle);
  --bs-pagination-active-border-color: var(--bs-primary-bg-subtle);
}

/* toned-down version of the default accordion element */
.accordion {
  --bs-accordion-active-color: var(--bs-body-color);
  --bs-accordion-active-bg: var(--bs-body-bg);
  --bs-accordion-btn-focus-box-shadow: 0;
}

/* customized nav-styles for the main tabs in the detail views */
.nav-underline {
  --bs-link-color: var(--bs-body-color);
  --bs-link-hover-color: var(--bs-body-color);
  --bs-nav-underline-gap: 0rem;
  --bs-nav-underline-link-active-color: var(--bs-emphasis-color);
}

.nav-underline .nav-link:hover {
  border-bottom-color: var(--bs-primary);
}

.nav-underline .nav-link.active {
  color: var(--bs-primary);
  border-bottom-color: var(--bs-primary);
}

/* Space the element as if the text were already bold, so that the size
 * does not change when the link is active.
 * This is copied from how both github and gitlab are doing this.
 * */
.nav-link [data-content]::before {
  content: attr(data-content);
  display: block;
  font-weight: 700;
  height: 0;
  visibility: hidden;
}

/*
 * xdf-tree
 *
 * The styles are defined here instead of using bootstrap classes to reduce the amount
 * of generated HTML.
 */

.tree-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.2rem;
}

.tree-child-container {
  display: none;
  position: relative;
  padding-inline-start: 1.75rem;
}

/* the grey hierachical line next to the children of the schema/a group */
.tree-child-container::before {
  content: "";
  width: 0.125rem;
  inset-inline-start: 0.75rem;
  margin-inline-start: -1px;
  background-color: var(--bs-secondary-bg);
  height: 100%;
  position: absolute;
  top: 0px;
}

/* Add horizontal line connecting to each tree item */
.tree-child-container > .tree-item::before {
  content: "";
  width: 0.75rem;
  height: 0.125rem;
  background-color: var(--bs-secondary-bg);
  position: absolute;
  left: 0.75rem;
  top: 1.25rem;
}

/* Only show the child container, if the parent .tree-item class is open */
.tree-item.open > .tree-child-container {
  display: block;
}

.tree-header > i {
  width: 1.5rem;
  text-align: center;
}

.tree-toggle {
  width: 1.5rem;
  background-color: var(--bs-primary-bg);
  border: none;
  border-radius: var(--bs-border-radius);
  color: var(--bs-secondary-color);
  text-decoration: none;
  text-align: center;
  display: flex;
  justify-content: center;
}

.tree-toggle:hover {
  background-color: var(--bs-tertiary-bg);
}

.tree-item.open .bi-tree-toggle::before {
  content: "\F229";
}

.tree-item:not(.open) .bi-tree-toggle::before {
  content: "\F231";
}

.tree-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-direction: row;
  flex-grow: 1;

  border-radius: var(--bs-border-radius);
  padding: 0.25rem;
}

.tree-header-content:hover {
  background-color: var(--bs-tertiary-bg);
}

.tree-header-content > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-direction: row;
}

.tree-title-link {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  gap: 0.5rem;

  color: var(--bs-body-color);
  text-decoration: none;
}

.tree-title-link:hover {
  text-decoration: underline;
}

.bezug-container {
  display: none;
  padding: 0.5rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: var(--bs-border-radius);
  flex-direction: column;
  gap: 0.5rem;
  max-width: 600px;
  margin: 0.5rem 0;
}

.bezug-toggle {
  color: var(--bs-primary);
  background-color: white;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: var(--bs-border-radius);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.15rem 0.5rem;
}

.bezug-toggle:hover {
  background-color: var(--bs-secondary-bg);
}

.bezug-container.open {
  display: flex;
}

.bezug-container ul {
  margin-bottom: 0;
}

.bezug-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* end: xdf-tree */

/* start: hierarchy tree*/

button[aria-expanded="true"] .bi-chevron-down::before {
  content: "\F286";
}
.bi-chevron-down::before {
  transition: content 0.2s ease-in-out;
}

.hierarchy-lov-item,
.hierarchy-lovd-item {
  position: relative;
  padding-inline-start: 2rem;
  padding-top: 0.5rem;
}

/* the grey hierachical line next to the children of the lov group */
.hierarchy-lov-item::before,
.hierarchy-lovd-item::before {
  content: "";
  width: 0.075rem;
  height: 100%;
  inset-inline-start: 1rem;
  margin-inline-start: -1px;
  background-color: var(--bs-border-color-translucent);
  position: absolute;
  top: 0px;
}

/* Add horizontal line connecting to each hierarchy item */
.hierarchy-lov-item::after,
.hierarchy-lovd-item::after {
  content: "";
  width: 1rem;
  height: 0.075rem;
  background-color: var(--bs-border-color-translucent);
  position: absolute;
  left: 1rem;
  top: 1.75rem;
}

/* Make the last item have an L-shape instead of T-shape */
.hierarchy-lov-item:last-child::before,
.hierarchy-lovd-item:last-child::before {
  height: 1.82rem;
}

/* end: hierarchy tree*/

.link-dark {
  text-decoration: none;
}

.link-dark:hover {
  text-decoration: underline;
}

.check-list li {
  display: flex;
  align-items: top;
  gap: 1rem;
  margin-bottom: 1rem;
}

.check-list li::marker {
  content: "";
}

.check-list li::before {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: "Bootstrap-icons";
  font-size: 1.2rem;
  content: "\F633";
  width: 1.8rem;
  height: 1.8rem;
  background-color: var(--itpr-blue-6);
  border-radius: 5px;
}

.bg-header {
  background-repeat: repeat-y;
  background-size: cover;
  background-color: rgba(var(--itpr-blue-1-rgb), 1);
  background-blend-mode: multiply;
}

.header-grid {
  display: grid;
  grid-template-rows: auto 100px auto;
  word-break: break-word;
}

.header-grid .background {
  grid-column: 1 /2;
  grid-row: 1 / 3;
}

.header-grid .title {
  grid-column: 1 /2;
  grid-row: 1 / 1;
}

.header-grid .cards {
  grid-column: 1 /2;
  grid-row: 2 / 4;
}

.overlap-section {
  display: grid;
  grid-template-rows: 1fr 1fr;
  word-break: break-word;
}

.overlap-section .bg-upper {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.overlap-section .bg-lower {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.overlap-section section {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.card.img-bg-card {
  color: var(--bs-white);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(var(--itpr-blue-1-rgb), 1);
  background-position: center;
  background-blend-mode: multiply;
}

ul.user-journey {
  --line-width: 0.15rem;
  --icon-size: 2.5rem;

  list-style-type: none;
  padding-inline-start: 0;
  position: relative;
}

/* line */
ul.user-journey::before {
  z-index: -1;
  position: absolute;
  top: 0.1rem;
  left: calc((var(--icon-size) - var(--line-width)) / 2);
  bottom: 0.1rem;
  width: var(--line-width);
  content: "";
  background-color: var(--bs-primary);
}

ul.user-journey li::before {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: "Bootstrap-icons";
  font-size: 1.4rem;
  content: attr(data-icon);
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--bs-primary);
  background-color: var(--itpr-blue-6);
  border-radius: 5px;
}

ul.user-journey li {
  color: var(--bs-secondary-color);
  display: flex;
  align-items: top;
  gap: 1rem;
  margin-bottom: 1rem;
}

ul.user-journey li strong {
  color: var(--bs-body-color);
}

.between-3 > * {
  margin-bottom: 1rem;
}

.between-3 > *:last-child {
  margin-bottom: 0;
}

.inline-logo {
  height: 1em;
  width: 1em;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--bs-primary);
  padding: 8px;
  z-index: 1100;
  text-decoration: none;
}

.legal-page h2 {
  margin-top: 60px;
  margin-bottom: 20px;
}

.legal-page h3 {
  margin-top: 20px;
  margin-bottom: 16px;
}

/* Baustein utility classes */
.bg-leistungen-200 {
  background-color: var(--leistungen-200) !important;
}
.bg-leistungen-400 {
  background-color: var(--leistungen-400) !important;
}
.bg-leistungen-600 {
  background-color: var(--leistungen-600) !important;
}
.bg-leistungen-800 {
  background-color: var(--leistungen-800) !important;
}

.text-leistungen-200 {
  color: var(--leistungen-200) !important;
}
.text-leistungen-400 {
  color: var(--leistungen-400) !important;
}
.text-leistungen-600 {
  color: var(--leistungen-600) !important;
}
.text-leistungen-800 {
  color: var(--leistungen-800) !important;
}

.border-leistungen-400 {
  border-color: var(--leistungen-400) !important;
}

.bg-datenfelder-200 {
  background-color: var(--datenfelder-200) !important;
}
.bg-datenfelder-400 {
  background-color: var(--datenfelder-400) !important;
}
.bg-datenfelder-600 {
  background-color: var(--datenfelder-600) !important;
}
.bg-datenfelder-800 {
  background-color: var(--datenfelder-800) !important;
}

.text-datenfelder-200 {
  color: var(--datenfelder-200) !important;
}
.text-datenfelder-400 {
  color: var(--datenfelder-400) !important;
}
.text-datenfelder-600 {
  color: var(--datenfelder-600) !important;
}
.text-datenfelder-800 {
  color: var(--datenfelder-800) !important;
}

.border-datenfelder-400 {
  border-color: var(--datenfelder-400) !important;
}

.bg-prozesse-200 {
  background-color: var(--prozesse-200) !important;
}
.bg-prozesse-400 {
  background-color: var(--prozesse-400) !important;
}
.bg-prozesse-600 {
  background-color: var(--prozesse-600) !important;
}
.bg-prozesse-800 {
  background-color: var(--prozesse-800) !important;
}

.text-prozesse-200 {
  color: var(--prozesse-200) !important;
}
.text-prozesse-400 {
  color: var(--prozesse-400) !important;
}
.text-prozesse-600 {
  color: var(--prozesse-600) !important;
}
.text-prozesse-800 {
  color: var(--prozesse-800) !important;
}

.border-prozesse-400 {
  border-color: var(--prozesse-400) !important;
}

.width-sm {
  width: 24px !important;
}
.height-sm {
  height: 24px !important;
}
.width-md {
  width: 32px !important;
}
.height-md {
  height: 32px !important;
}
.width-lg {
  width: 40px !important;
}
.height-lg {
  height: 40px !important;
}
.width-xl {
  width: 48px !important;
}
.height-xl {
  height: 48px !important;
}