:root {
  --dark-color: #0d284e;
  --muted-color: #6C778A;
  --medium-color: #1b709d ;
  --secondary-medium-color: #b8c9db;
  --light-color: #dfe5ed;
  --secondary-light-color: #f2f5f7;
  --alert-color: #a0270a;
  --white-color: #ffffff;
  --focus-color: #0d2fc4;

  --body-text: var(--dark-color);

  --scrollbar-thumb: var(--secondary-medium-color);
  --scrollbar-track: var(--secondary-light-color);

  --tooltip-bg: var(--dark-color);
  --tooltip-text: var(--secondary-light-color);
  --tooltip-border: var(--secondary-medium-color);

  --topbar-bg-1: var(--dark-color); /*landing*/
  --topbar-bg-2: var(--dark-color);
  --topbar-text-1: var(--white-color); /*landing*/
  --topbar-text-2: var(--white-color);

  --headerbar-bg-1: var(--white-color); /*landing*/
  --headerbar-bg-2: var(--white-color);
  --headerbar-text: var(--dark-color);

  --search-autocomplete-result-link: var(--medium-color);
  --search-border: var(--light-color);
  --search-keyboard-nav-border: var(--dark-color);
  --search-button-bg: var(--dark-color);
  --search-button-text: var(--white-color);
  --search-dropdown-bg: var(--secondary-light-color);
  --search-dropdown-selected-bg: var(--dark-color);
  --search-dropdown-hover-bg: var(--dark-color);
  --search-dropdown-hover-text: var(--white-color);
  --search-dropdown-selected-text: var(--white-color);
  --search-field-bg: var(--white-color);
  --search-hover-bg: var(--light-color);
  --global-search-vocab-selector-check: var(--white-color);


  --main-bg-1: var(--white-color); /*landing*/
  --main-bg-2: var(--light-color); /*vocab, concept, search, error*/
  --main-bg-3: var(--secondary-light-color); /*about, feedback*/

  --landing-vocabulary-list-bg: var(--light-color);
  --landing-vocabulary-list-text: var(--dark-color);
  --landing-vocabulary-list-heading: var(--dark-color);
  --landing-vocabulary-list-link: var(--medium-color);
  --landing-vocabulary-list-link-underline: var(--secondary-medium-color);

  --sidebar-tab-inactive-bg: var(--secondary-light-color);
  --sidebar-tab-inactive-text: var(--dark-color);
  --sidebar-tab-active-bg: var(--dark-color);
  --sidebar-tab-active-text: var(--white-color);
  --sidebar-scrollbar-thumb: var(--secondary-medium-color);
  --sidebar-scrollbar-track: var(--secondary-light-color);
  --sidebar-bg: var(--white-color);
  --sidebar-text: var(--dark-color);
  --sidebar-link: var(--medium-color);
  --sidebar-selected: var(--dark-color);
  --sidebar-alphabetical-entry-term: var(--dark-color);
  --sidebar-hierarchy-line: var(--dark-color);
  --sidebar-notation: var(--dark-color);

  --main-content-bg: var(--white-color);
  --main-content-text: var(--dark-color);
  --main-content-disabled: var(--muted-color);
  --main-content-link: var(--medium-color);
  --main-content-border: var(--light-color);

  --about-text: var(--dark-color);
  --about-link: var(--medium-color);

  --feedback-bg: var(--white-color);
  --feedback-text: var(--dark-color);
  --feedback-field-bg: var(--secondary-light-color);
  --feedback-submit-bg: var(--dark-color);

  --alert-bg: var(--alert-color);
  --alert-text: var(--white-color);

  --footer-bg: var(--white-color);
  --footer-text: var(--dark-color);

  /* Font definitions */
  --font-size: 1em; /* same as the browser default font size, often 16px */
  --font-family: 'Public Sans', sans-serif;
  --font-family-heading: 'EB Garamond', serif;
}

body {
  color: var(--body-text);
  font-family: var(--font-family);
  font-size: var(--font-size);
}

:focus-visible {
  outline: 3px solid var(--focus-color) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

/* Font awesome
====================================== */

.fa-magnifying-glass {
  color: var(--search-button-text);
  font-size: 1.6rem;
  margin: calc((38px - 22px) / 2 ) 0; /* (button height - font height) / 2 */
}

.fa-download {
  color: var(--main-content-text);
}

.vocab-home .fa-arrow-right, .concept .fa-arrow-right, .error .fa-arrow-right {
  color: var(--sidebar-alphabetical-entry-term);
  font-size: .75rem;
  margin: 0 5px;
}

#search-results .list-group .fa-solid, #search-results .list-group .fa-regular {
  color: var(--main-content-text);
  font-size: 1.15rem;
  width: 1.5rem;
  text-align: center;
}

#search-results .fa-arrow-right {
  color: var(--main-content-text);
  font-size: .85rem;
}

/* Header
====================================== */

header .container-fluid .row {
  max-width: 1460px;
  margin: 0 auto;
}

/* Topbar
-------------------------------------- */

.frontpage-logo #topbar {
  color: var(--topbar-text-1);
  background-color: var(--topbar-bg-1);
}

#topbar {
  color: var(--topbar-text-2);
  background-color: var(--topbar-bg-2);
}

.frontpage-logo #topbar :focus-visible {
  outline-color: var(--topbar-text-1) !important;
}

#topbar :focus-visible {
  outline-color: var(--topbar-text-2) !important;
}

.frontpage-logo #topbar-nav .nav-item a {
  color: var(--topbar-text-1);
}

#topbar-nav .nav-item a {
  color: var(--topbar-text-2);
}

#skosmos-logo-top {
  display: inline-block;
}

/* DZIF (31.08.2026): Das MDR-Logo ist dunkelblau auf transparentem Grund und
   ginge in der dunklen Kopfleiste unter - daher eine weisse Flaeche dahinter,
   so wie zuvor beim DZIF-Logo, das sie im Bild mitbrachte.
   Verwendet wird mdr-logo-header.png: dieselbe Grafik wie auf der Startseite,
   aber vom transparenten Rand befreit (CoMetaR_Logo.png ist 500x319 px gross,
   das Logo darin nur 363x218 - 46 % der Flaeche war leer und liess den
   weissen Kasten viel zu gross wirken).
   Das Padding ist deshalb knapp gehalten. */
#skosmos-logo-top img {
  background-color: #fff;
  padding: 5px 8px;
  border-radius: 4px;
  display: block;
}

#skosmos-logo-top h2 {
  text-indent: -100%;
}

#global-search-toggle {
  transition: none;
  color: var(--topbar-text-1);
  background-color: var(--topbar-bg-1);
  border-style: none;
  white-space: nowrap;
}

#global-search-toggle.collapsed::after {
  background-image: none;
  transform: none;
  padding-left: 0.5rem;
  content: "\f078"; /* fa-chevron-down */
  color: var(--topbar-text-1);
  font: var(--fa-font-solid);
  display: inline-block;
}

#global-search-toggle::after {
  background-image: none;
  transform: none;
  padding-left: 0.5rem;
  content: "\f077"; /* fa-chevron-up */
  color: var(--topbar-text-1);
  font: var(--fa-font-solid);
  display: inline-block;
}

/* Adding a border between last nav link and first language */
#topbar-nav .language {
  margin-left: 1rem;
  border-left: 1px solid var(--topbar-text-2);
}

.frontpage-logo #topbar-nav .language {
  margin-left: 1rem;
  border-left: 1px solid var(--topbar-text-1);
}

#topbar-nav .language ~ .language {
  margin-left: 0;
  border-left: none;
}

/* Headerbar
-------------------------------------- */

.frontpage-logo #headerbar {
  color: var(--headerbar-text-1);
  background-color: var(--headerbar-bg-1);
}

#headerbar {
  color: var(--headerbar-text-2);
  background-color: var(--headerbar-bg-2);
}

/* DZIF (31.08.2026): Das kleine DZIF-Logo auf der Startseite entfaellt - seit
   der RPS-Header des DZIF-Portals ganz oben steht, war es doppelt. Es wirkte
   ausserdem angeschnitten, weil es per background-position: -8px -15px
   verschoben dargestellt wurde.
   Das <div> selbst bleibt bestehen: Es enthaelt die <h1> der Seite
   (visually-hidden). Wuerde man es mit display:none ausblenden, verschwaende
   die Ueberschrift auch fuer Screenreader. */
#skosmos-logo {
  background-image: none;
  width: auto;
  height: auto;
}

#vocab-title {
  font-size: 2.5rem;
}

#vocab-title a {
  color: var(--headerbar-text);
  font-family: var(--font-family-heading);
}

/* --- Search bar --- */

#search-wrapper input, #search-wrapper button {
  height: 100%;
}

/* Dropdowns */

#language-list, #vocab-list {
  inset: -2px auto auto 0 !important;
  background-color: var(--search-dropdown-bg);
  color: var(--headerbar-text);
  border: 0 !important;
  width: max-content;
  list-style: none;
}

#search-wrapper ul {
  padding-top: 0rem;
  padding-bottom: 0rem;
  max-height: 50vh;
  overflow-y: auto;
}

#search-wrapper .dropdown-menu {
  transform: translateY(-1px);
  background-color: var(--search-dropdown-bg);
  color: var(--headerbar-text);
  border: 1px solid var(--search-border);
  border-radius: 0;
  overflow-x: hidden; /* prevent horizontal scrollbar in chrome */
}

#search-wrapper .dropdown-menu label {
  color: var(--headerbar-text);
}

#search-wrapper .dropdown-menu li label:hover, #search-wrapper .dropdown-menu li:hover {
  color: var(--search-dropdown-hover-text);
}

#search-wrapper .dropdown-menu li:focus-visible {
  outline-offset: -3px !important;
}

#search-wrapper .dropdown-toggle {
  color: var(--headerbar-text);
  background-color: var(--search-field-bg);
  border: 1px solid var(--search-border);
  border-radius: 0;
  padding-left: 1rem;
  padding-right: 2.5rem;
}

#search-wrapper .dropdown-toggle:hover, #search-wrapper .dropdown-toggle.show {
  background-color: var(--search-hover-bg);
}

#search-wrapper .dropdown-toggle::after {
  display: none;
}

#search-wrapper .dropdown-toggle i {
  padding-left: 0.5rem;
  font-size: 0.75rem;
}

#search-wrapper .chevron {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translate(0, -50%);

  z-index: 2;
}

/* Language selector  */

#language-list li:hover, #language-list li:active {
  background-color: var(--search-dropdown-hover-bg);
}

/* Search field */

#headerbar-search {
  width: 25rem;
  z-index: 4;
}

#search-field {
  background-color: var(--search-field-bg);
  border-color: var(--search-border);
  border-radius: 0;
}

#search-field:focus-visible {
  position: relative;
  z-index: 1001;
}

#clear-button {
  position: absolute;
  color: var(--headerbar-text);
  background: none;
  border: none;
  top: 0;
  right: 50px;
  height: 40px;
  width: 40px;
  padding: 0;
  font-size: 1.4rem;
  z-index: 5;
}

#search-wrapper .autocomplete {
  position: relative;
}

#search-wrapper .autocomplete-result {
  border-top: 1px solid var(--search-border);
  margin: auto;
}

#search-wrapper .autocomplete-result * {
  text-decoration: none;
  color: var(--headerbar-text);
}

#search-wrapper .autocomplete-result .result {
  color: var(--search-autocomplete-result-link);
}

#search-button {
  background-color: var(--search-button-bg);
  border: 1px solid var(--search-border);
  border-radius: 0;
  padding: 0;
  width: 44px;
}

/* --- Global search bar --- */

#global-search-text {
  overflow: auto;
}

#global-search-text h2 {
  font-family: var(--font-family-heading);
  font-weight: bold;
  font-size: 2rem;
}

#global-search-bar .dropdown {
  display: inline-block;
}

@media (max-width: 992px) { /* lg breakpoint */
  #global-search-wrapper #headerbar-search {
    width: 15rem;
  }
}

/* Vocabulary selector */

#search-wrapper .vocab-dropdown-btn {
  width: 15rem;
  position: relative;
}

#search-wrapper .vocab-dropdown-btn span {
  display: block;
  overflow: hidden;
  z-index: 0;
}

#search-wrapper .vocab-select {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 0.25rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#vocab-list li:hover label {
  color: var(--headerbar-text) !important;
}

#vocab-list {
  padding-top: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Language selector & Vocabulary selector */

#search-wrapper #vocab-list, #search-wrapper #language-list {
  --bs-dropdown-link-hover-bg: transparent;
}

#search-wrapper #vocab-selector input, #search-wrapper #language-selector input {
  position: absolute;
  opacity: 0;
}

#search-wrapper #language-selector .dropdown-menu {
  --bs-dropdown-link-active-bg: var(--search-dropdown-selected-bg);
}

#search-wrapper #language-selector .dropdown-item:active {
  color: var(--search-dropdown-selected-text);
}

/* Custom checkbox */

#search-wrapper .checkmark {
  position: absolute;
  border: 1px solid var(--search-dropdown-selected-bg);
  left: 0;
  height: 1.5rem;
  width: 1.5rem;
  background-color: var(--global-search-vocab-selector-check);
}

#search-wrapper .checkmark::after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid var(--global-search-vocab-selector-check);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
  position: absolute;
  display: none;
}

#search-wrapper .vocab-select:hover input ~ .checkmark {
  background-color: var(--search-dropdown-selected-bg);
}

#search-wrapper .vocab-select input:checked ~ .checkmark {
  background-color: var(--search-dropdown-selected-bg);
}

#search-wrapper .vocab-select input:checked ~ .checkmark::after {
  display: block;
}

/* Show a visible focus ring when focus is moved with keyboard navigation */

#search-wrapper #vocab-list .vocab-select:focus-within {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
}

/* Search field */

#search-form {
  width: auto;
}

#search-form span, #search-form button {
  flex-wrap: nowrap;
}

/* --- Browser specific rules --- */

/* Setting scrollbar style separately in Firefox */
@-moz-document url-prefix() {
  #search-wrapper ul {
    scrollbar-color: var(--scrollbar-thumb) var(--search-dropdown-bg);
  }
} 

/* Setting scrollbar style for Webkit based browsers (Chrome, Safari, Edge, etc) */
#search-wrapper ul::-webkit-scrollbar {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#search-wrapper ul::-webkit-scrollbar:vertical {
    width: 15px;
}

#search-wrapper ul::-webkit-scrollbar-thumb {
    border-radius: 0;
    border: 1px solid var(--scrollbar-thumb);
    background-color: var(--scrollbar-thumb);
}

#search-wrapper ul::-webkit-scrollbar-track { 
    background-color: var(--search-dropdown-bg); 
    border-radius: 0;
}

/* Remove built-in x button from Internet Explorer */
#search-wrapper input[type="search"]::-ms-clear { display: none; width : 0; height: 0; }
#search-wrapper input[type="search"]::-ms-reveal { display: none; width : 0; height: 0; }

/* Remove built-in x button from Chrome */
#search-wrapper input[type="search"]::-webkit-search-decoration,
#search-wrapper input[type="search"]::-webkit-search-cancel-button,
#search-wrapper input[type="search"]::-webkit-search-results-button,
#search-wrapper input[type="search"]::-webkit-search-results-decoration { display: none; }

/* Main container
====================================== */

.vocab-home .container, .concept .container, .vocab-search .container, .error .container {
  max-width: 1460px;
}

.vocab-home, .concept, .vocab-search, .global-search, .error {
  background-color: var(--main-bg-2);
}

.vocab-home a, .concept a, .vocab-search a, .global-search a, .error a {
  color: var(--main-content-link);
  text-decoration: none;
  font-weight: bold;
}

#main-container {
  padding-top: 2.4rem;
}

#main-container h1, #main-container h2  {
  font-family: var(--font-family-heading);
  font-weight: bold;
}

#main-container-row {
  --bs-gutter-x: 2rem;
}

/* Landing page 
-------------------------------------- */

#background.landing { /* unused */
  background-color: var(--main-bg-1);
  background-image: var(--landing-stripes-1);
  background-repeat: no-repeat;
  background-size: 650px;
  background-position: calc(100% + 41px) -55px;
}

#main-container.landing {
  background-image: var(--landing-stripes-2);
  background-repeat: no-repeat;
  background-size: 650px;
  background-position: -41px calc(100% + 55px);
  padding-top: 0;
}

#vocabulary-list {
  background-color: var(--landing-vocabulary-list-bg);
}

#vocabulary-list h2 {
  color: var(--landing-vocabulary-list-heading);
}

#vocabulary-list .vocab-category {
  color: var(--landing-vocabulary-list-text);
}

#vocabulary-list .vocab-category.border-top {
  border-top: 2px var(--landing-vocabulary-list-text) solid !important;
}

#vocabulary-list .vocab-category h3 {
  color: var(--landing-vocabulary-list-text);
}

#vocabulary-list .list-group-item {
  background-color: var(--landing-vocabulary-list-bg);
  border: none;
}

#vocabulary-list .list-group-item a {
  color: var(--landing-vocabulary-list-link);
  font-weight: bold;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--landing-vocabulary-list-link-underline);
  text-underline-offset: 0.3rem;
}

#vocabulary-list .list-group-item a:focus-visible {
  text-decoration: none;
}

/* Sidebar vocab and concept pages
-------------------------------------- */

/* Button for collapsing sidebar on mobile */
#sidebar-collapse-btn {
  width: 100%;
  margin: 1rem 0;
  padding: 1rem;
  font-weight: bold;
  background-color: var(--main-content-bg);
  border: none;
  border-radius: 0;
  color: var(--main-content-text);
  font-size: 1rem;
  position: relative;
}

#sidebar-collapse-btn i {
  margin-right: 0.5rem;
}

@media only screen and (max-width: 768px) {
  .vocab-home #sidebar-col {
    min-height: 0 !important;
    height: 700px;
  }
}

.vocab-home #sidebar-col, .concept #sidebar-col, .error #sidebar-col {
  background-color: var(--sidebar-bg);
  background-clip: content-box, padding-box;
  min-height: 1000px;
}

.vocab-home #sidebar, .concept #sidebar, .error #sidebar-col {
  background-color: var(--sidebar-bg);
}

/* Sidebar tabs */

#sidebar-tabs {
  position: relative;
  background-color: var(--sidebar-tab-inactive-bg);
}

#sidebar-tabs :focus-visible {
  z-index: 1000;
  position: relative;
}

#sidebar .nav-link {
  color: var(--sidebar-tab-inactive-text);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: none;
}

#sidebar .nav-link.active {
  background-color: var(--sidebar-tab-active-bg);
  color: var(--sidebar-tab-active-text);
}

#sidebar .nav-link.disabled {
  opacity: 0.65;
}

/* In smaller screen sizes, the last sidebar tab overflows to the right */
@media only screen and (min-width: 768px) and (max-width: 1070px) {
  #sidebar-tabs.wide {
    flex-wrap: nowrap;
  }

  #sidebar-tabs.wide #alphabetical {
    max-width: 40px;
  }

  #sidebar-tabs.wide .nav-link {
    padding: 0.5rem 0.25rem;
  }

  #sidebar-tabs.wide .nav-item:last-of-type {
    overflow: hidden;
  }

  #sidebar-tabs.wide .nav-item:last-of-type .nav-link {
    justify-content: start;
    white-space: nowrap;
    position: relative;
  }

  #sidebar-tabs.wide .nav-item:last-of-type::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1rem;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--sidebar-tab-inactive-bg));
  }

  #sidebar-tabs.wide .nav-item:last-of-type:has(.nav-link.active)::after {
    background: linear-gradient(to right, transparent, var(--sidebar-tab-active-bg));
  }
}

@media only screen and (max-width: 900px) {
  #sidebar .nav-link {
    padding: 0.5rem 0.1rem !important;
  }
}

/* Sidebar tooltip */

#sidebar .nav-item.disabled::before {
  position: absolute;
  content: ' ';
  background-color: var(--tooltip-border);
  border: 3px solid var(--tooltip-border);
  width: 15px;
  height: 15px;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0) rotate(45deg);
  bottom: -20px;
}

#sidebar .nav-item.disabled:hover::before {
  opacity: 1;
}

#sidebar .nav-item.disabled::after {
  content: attr(data-title);
  white-space: pre-line;
  max-width: 400px;
  width: max-content;
  display: inline-block;
  color: var(--tooltip-text);
  background-color: var(--tooltip-bg);
  border: 3px solid var(--tooltip-border);
  position: absolute;
  z-index: 9002;
  opacity: 0;
  transform: translate(calc(-50% - 10px), 0);
  pointer-events: none;
  margin: 12px 0 0 9px;
  padding: 0.25rem 0.5rem;
  font-size: 0.95em;
}

#sidebar .nav-item.disabled:hover::after {
  opacity: 1;
}

/* --- Sidebar concept list --- */

#sidebar .sidebar-list {
  color: var(--sidebar-text);
  padding: 2rem 1rem 0;
  overflow-y: scroll;
  position: absolute;
}

#sidebar .list-group-item {
  border: none;
  border-radius: 0;
  background-color: var(--sidebar-bg);
}

#sidebar .sidebar-list a {
  color: var(--sidebar-link);
  font-weight: normal;
}

#sidebar .sidebar-list a.selected {
  color: var(--sidebar-selected);
  font-weight: bold;
}

#sidebar .sidebar-list :focus-visible {
  outline-offset: 0 !important;
}

/* --- Sidebar alphabetical tab --- */

#alphabetical .nav-link {
  white-space: nowrap;
}

#sidebar .letters {
  background-color: var(--sidebar-tab-active-bg);
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
}

#sidebar .form-check, #sidebar .form-check-label {
  background-color: var(--sidebar-tab-active-bg);
  color: var(--sidebar-tab-active-text);
  margin: 0;
  width: 35px;
  cursor: pointer;
}

#sidebar .form-check {
  padding: 0;
}

#sidebar .form-check-label {
  display: flex;
  justify-content: center;
  padding: 0.375rem 0.75rem;
}

#sidebar .form-check-label.selected, #sidebar .form-check-label:hover, #sidebar .form-check-label:active {
  text-decoration: underline;
}

.form-check-input:focus-visible + .form-check-label {
  outline: 3px solid var(--sidebar-tab-active-text);
  outline-offset: -3px;
}

#sidebar .form-check-label.wide {
  width: 50px;
}

#sidebar .list-group-item span {
  color: var(--sidebar-alphabetical-entry-term);
}

/* --- Sidebar hierarchy and groups tabs --- */

#tab-hierarchy .list-group-item,
#tab-groups .list-group-item {
  border-left: 1px dashed var(--sidebar-text);
  border-radius: 0;
  white-space: nowrap;
}

#tab-hierarchy .list-group-item.top-concept,
#tab-groups .list-group-item.top-concept {
  border: none;
}

#sidebar .concept-label {
  display: inline-block;
  border-left: 1px dashed var(--sidebar-text);
  margin-left: 16px;
  padding-left: 14px;
  padding-right: 14px;
  white-space: wrap;
}

/* horizontal line before concept */
#sidebar .concept-label::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 0;
  width: 10px;
  height: 13px;
  border-bottom: 1px dashed var(--sidebar-text);
}

/* hiding bottom of vertical line on last concept of list */
#sidebar .concept-label.last::before {
  top: auto;
  bottom: 0;
  height: calc(100% - 13px);
  border-left: 1px solid var(--sidebar-bg);
  border-top: 1px dashed var(--sidebar-text);
  border-bottom: none;
}

/* no border for children of the last concept */
#sidebar .concept-label.last + ul > li  {
  border: none;
  margin-left: 1px; /* add a 1px margin to offset missing border */
}

#tab-groups a.group {
  font-weight: bold;
}

#sidebar .concept-notation {
  color: var(--sidebar-notation) !important;
  font-weight: bold;
}

#sidebar .hierarchy-button {
  border: none;
  padding: 0;
}

#sidebar .hierarchy-button:hover, #sidebar .hierarchy-button:active {
  background-color: transparent;
  color: var(--sidebar-text);
}

#sidebar .hierarchy-button i {
  position: absolute;
  left: 10px;
  top: 5px;
  z-index: 1;
  color: var(--sidebar-text);
  font-size: .85rem;
}

#sidebar .hierarchy-button img {
  transform: rotate(-45deg);
  position: absolute;
  top: 2.5px;
  left: 3.5px;
  width: 20px;
  z-index: 1;
}

#sidebar .hierarchy-button.open img {
  transform: rotate(0deg);
  left: 5px;
  top: 2px;
}

/* --- Sidebar changes tab --- */

#tab-changes h2 {
  color: var(--sidebar-text);
  font-size: 1.4rem;
  margin: 0;
}

/* All headings except first */
#tab-changes li + li h2 {
  margin-top: 1.5rem;
}

#tab-changes s {
  text-decoration: 1px var(--sidebar-text) line-through;
}

#tab-changes .selected s {
  text-decoration: 1px var(--sidebar-selected) line-through;
}

/* --- Browser specific rules --- */

/* Setting scrollbar style separately in Firefox */
@-moz-document url-prefix() {
  #sidebar .sidebar-list {
    scrollbar-color: var(--sidebar-scrollbar-thumb) var(--sidebar-scrollbar-track);
  }
} 

/* Setting scrollbar style for Webkit based browsers (Chrome, Safari, Edge, etc) */
#sidebar .sidebar-list::-webkit-scrollbar {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#sidebar .sidebar-list::-webkit-scrollbar:vertical {
    width: 15px;
}

#sidebar .sidebar-list::-webkit-scrollbar-thumb {
    border-radius: 0;
    border: 1px solid var(--sidebar-scrollbar-thumb);
    background-color: var(--sidebar-scrollbar-thumb);
}

#sidebar .sidebar-list::-webkit-scrollbar-track { 
    background-color: var(--sidebar-scrollbar-track);
    border-radius: 0; 
}

/*  Vocab-home & concept pages
-------------------------------------- */

#main-content h1 {
  font-size: 1.7rem;
}

.main-content-section {
  background-color: var(--main-content-bg);
  margin-bottom: .2rem;
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}

#concept-heading, #vocab-heading {
  margin-top: 2rem;
  padding-bottom: 2.5rem;
}

h1#vocab-heading {
  font-size: 2.5rem;
}

#vocab-heading, .vocab-statistics, #vocab-download-links {
  margin-left: -.75rem;
  margin-right: -.75rem;
}

.property {
  border-top: 1px solid var(--main-content-border);
  padding: .5rem 0;
}

.property ul, .property li {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
  margin-bottom: 0;
}

/* DZIF (04.09.2026): Vanilla setzt hier "border-top: none", weil die
   Mapping-Zeilen urspruenglich in einem eigenen Abschnitt am Seitenende
   standen und dort keinen Trennstrich brauchten. Seit sie zwischen den
   uebrigen Eigenschaften stehen (direkt unter "In anderen Studien"), fehlte
   die Trennlinie zur Zeile darueber. Sie erben jetzt wieder die Linie von
   .property. */
.property.prop-mapping {
  border-top: 1px solid var(--main-content-border);
}

#main-container .property-label h2 {
  font-family: var(--font-family);
  font-size: 1.2rem;
  display: inline-block;
}

.property-value {
  color: var(--main-content-text);
  border: none;
}

/* --- Vocab statistics --- */

.vocab-statistics h3 {
  font-size: 1.2rem;
}

.vocab-statistics .table {
  table-layout: fixed;
}

.vocab-statistics th, .vocab-statistics td {
  color: var(--main-content-text);
  padding: 0.25rem;
}

.vocab-statistics th {
  font-weight: bold;
  border-bottom: 1px solid var(--main-content-text);
}

.vocab-statistics td {
  border: none;
}

/* --- Concept page --- */

#concept-deprecated-alert {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  margin-bottom: 0;
}

#concept-deprecated-alert i {
  font-size: 1.4rem;
}

#concept-deprecated-alert .list-inline-item:not(:last-child)::after {
  content: ", ";
}

#concept-deprecated-alert a {
  color: var(--alert-text);
  text-decoration: underline;
}

.concept-deprecated #concept-breadcrumbs .breadcrumb-current,
.concept-deprecated h1,
.concept-deprecated #copy-preflabel,
.concept-deprecated .property-value,
.concept-deprecated #concept-other-languages .altlabel,
.concept-deprecated .concept-other-languages-language,
.concept-deprecated #copy-uri{
  color: var(--main-content-disabled);
}

#concept-property-label {
  align-self: start;
  padding-top: 0.4rem;
  font-weight: bold;
  font-size: 1.2rem;
}

#concept-preflabel {
  display: inline;
}

/* breadcrumbs */

#concept-breadcrumbs ol {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0.5rem;
}

#concept-breadcrumbs li, #concept-breadcrumbs li.collapse.show {
  display: inline;
}

#concept-breadcrumbs li.collapse, #concept-breadcrumbs li:has(a[aria-expanded="true"]) {
  display: none;
}

#concept-breadcrumbs li.breadcrumb + li::before {
  content: "> ";
}

#concept-breadcrumbs .breadcrumb-current {
  color: var(--main-content-text);
  font-weight: normal;
}

/* Copy buttons */

#copy-preflabel, #copy-notation {
  color: var(--main-content-text);
  font-size: 1.4rem;
  position: relative;
  bottom: 6px;
  left: 3px;
}

#copy-uri {
  color: var(--main-content-text);
  position: relative;
  bottom: 4px;
}

.copy-clipboard {
  border-radius: 0;
}

.copy-clipboard:focus-visible {
  outline-offset: -3px !important;
}

/* Properties */

.property-value .property-value-notation {
  color: var(--main-content-text);
}

.property-value .property-value-submembers {
  margin-left: 1rem;
}

.property-value .property-value-hidden, #concept-other-languages .property-value-hidden {
  display: none;
}

.property-value .property-value-expand .property-value-hidden,
#concept-other-languages .property-value-expand .property-value-hidden {
  display: list-item;
}

.property-value .rdf-list li {
  list-style-type: decimal;
}

.property-value li:has(.rdf-list):not(:last-child):not(:has(li.property-value-hidden)) {
  border-bottom: 1px solid var(--vocab-table-border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.property-value li:has(+ li .rdf-list) {
  border-bottom: 1px solid var(--vocab-table-border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.property-value li.rdf-list-truncated {
  list-style: "… ";
  font-size: 0.85rem;
}

.prop-skos_altLabel .property-value li, .altlabel {
  font-style: italic;
}

.prop-foreignlabels h3 {
  font-size: 1rem;
  margin-bottom: 0;
}

.prop-foreignlabels .preflabel {
  font-weight: bold;
}

#download-links li {
  display: inline-block;
}

#date-info {
  font-size: 0.85rem;
}

/* Inline tooltips (using data-title attribute) */

.tooltip-inline {
  position: relative;
  width: fit-content;
  text-decoration: var(--secondary-medium-color) underline dotted 2px;
  text-underline-offset: 5px;
}

.tooltip-inline::before {
  position: absolute;
  content: ' ';
  background-color: var(--tooltip-border);
  border: 3px solid var(--tooltip-border);
  width: 15px;
  height: 15px;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
}

.tooltip-inline::after {
  content: attr(data-title);
  white-space: pre-line;
  max-width: 400px;
  width: max-content;
  display: inline-block;
  border-radius: 0;
  font-size: var(--font-size);
  font-weight: 400;
  color: var(--tooltip-text);
  background-color: var(--tooltip-bg);
  border: 3px solid var(--tooltip-border);
  position: absolute;
  z-index: 9002;
  opacity: 0;
  pointer-events: none;
  margin: 12px 0 0 9px;
  padding: 0.25rem 0.5rem;
  text-transform: none;
}

.tooltip-inline:focus-visible {
  z-index: 9002 !important;
}

.tooltip-inline:hover::before, .tooltip-inline:hover::after {
  opacity: 1;
}

.tooltip-inline.t-top::before {
  top: 0;
  left: 50%;
  transform: translate(0, 0) rotate(45deg);
}

.tooltip-inline.t-top::after {
  top: 0;
  left: 0;
  transform: translate(0, 0);
}

.tooltip-inline.t-top:hover::before {
  transform: translate(0, calc(-50% - 5px)) rotate(45deg);
}

.tooltip-inline.t-top:hover::after {
  transform: translate(0, calc(-100% - 15px));
}

/* Tooltips with HTML content */

.tooltip-html {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

#concept-label .tooltip-html {
  bottom: 4px;
}

.tooltip-html button {
  line-height: 1.0;
  padding: 3px;
  margin: -3px;
  color: var(--tooltip-bg);
}

.tooltip-html button:focus-visible {
  outline-offset: -3px !important;
  border-radius: 0;
}

.tooltip-html:hover .tooltip-html-content, .tooltip-html:focus-within .tooltip-html-content {
  visibility: visible;
  opacity: 1;
}

.tooltip-html-content {
  box-sizing: border-box;
  position: absolute;
  top: 20px;
  left: -2px;
  display: block;
  cursor: text;
  width: 400px;
  color: var(--tooltip-text);
  background-color: var(--tooltip-bg);
  border: 3px solid var(--tooltip-border);
  z-index: 9001;
  visibility: hidden;
  opacity: 0;
  padding: 0.25rem 0.5rem;
}

/* The triangle that appears near the element that triggered it. */
.tooltip-html-content::after {
  position: absolute;
  content: '';
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  top: -7px;
  left: 0;
  margin-left: 2px;
  color: var(--tooltip-text);
  border-top: 6px solid var(--tooltip-border);
  border-right: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid var(--tooltip-border);
  z-index: 9002;
}

/* Definition lists used in tooltips. */
.tooltip-html-content dt {
  display: block;
  float: left;
  font-weight: bold;
  margin-right: 0.4em;
}

.tooltip-html-content dt::after {
  content: ":";
}

.tooltip-html-content dd {
  display: block;
}

/* Vocab-search & global-search pages
-------------------------------------- */

#search-results {
  background-color: var(--main-content-bg);
}

#search-results h1 {
  font-size: 1.1rem;
  font-family: var(--font-family);
}

#search-loading-spinner, #search-count {
  margin-top: 2.5rem;
  margin-bottom: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--main-content-border);
}

#search-count {
  font-weight: bold;
}

.search-result {
  border-top: 1px solid var(--main-content-border);
  margin-top: 2.5rem;
}

.search-result-term a {
  font-family: var(--font-family-heading);
  text-decoration: none;
  font-size: 1.5rem;

}

.search-result .list-group-item { /* bug in truncate-search-results.js (.list-group-item class is overwritten) */
  color: var(--main-content-text);
  border: none;
  cursor: default;
}

.search-result .list-group-item a { /* unused (remove?) */ /* bug in truncate-search-results.js (.list-group-item class is overwritten) */
  cursor: pointer;
}

.search-result-list { /* bug in truncate-search-results.js (.list-group-item class is overwritten) */
  display: block;
  white-space: nowrap;
  position: relative;
}

.search-result-hide {
  position: absolute;
  right: 0;
  background: linear-gradient(
                90deg,
                transparent,
                var(--main-content-bg) 35%,
                var(--main-content-bg) 0%);
}

.search-result-hidden {
  display: block;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.search-result-showall {
  display: block;
  white-space: normal;
  overflow: visible;
}

.uri-icon {
  display: inline-block;
  width: 20px;
  font-size: 0.75rem;
  text-align: center;
}

.prefLabel.proplabel {
  font-weight: bold;
  color: var(--main-content-link);
}

.altLabel.proplabel {
  font-style: italic;  
}

/* About & feedback pages
-------------------------------------- */

.about, .feedback {
  background-color: var(--main-bg-3);
  padding: 4rem 0;
}

.about .container, .feedback .container {
  padding: 0 8rem;
}

/* --- About page --- */

.about {
  color: var(--about-text);
  background-image: var(--about-stripes); /* unused */
  background-repeat: no-repeat;
  background-size: 650px;
  background-position: calc(100% + 41px) calc(100% + 55px);
}

.about a {
  color: var(--about-link);
  font-weight: bold;
}

/* --- Feedback page -- */

.feedback { /* unused */
  background-image: var(--feedback-stripes);
  background-repeat: no-repeat;
  background-size: 650px;
  background-position: var(--feedback-stripes-pos);
}

#feedback-form {
  color: var(--feedback-text);
  background-color: var(--feedback-bg);
  padding: 2.5rem 2rem 5rem;
}

#feedback-form label {
  font-weight: bold;
}

#feedback-form select, #feedback-form input, #feedback-form textarea {
  background-color: var(--feedback-field-bg);
  border: none;
  border-radius: 0;
}

#feedback-form .select-wrapper {
  position: relative;
}

#feedback-form .select-wrapper::after {
  color: var(--feedback-text);
  content: '﹀';
  font-size: 1.4rem;
  position: absolute;
  top: 10px;
  right: 10px;
}

#feedback-form select {
  background-image: none;
}

#feedback-form select:valid, #feedback-form select:valid:focus-visible, #feedback-form input::placeholder {
  color: var(--feedback-text);
}

#feedback-form textarea {
  margin-bottom: 4rem;
}

#feedback-form button {
  background-color: var(--feedback-submit-bg);
  border: none;
  border-radius: 0;
  font-weight: bold;
  float: right;
}

/* Error page
-------------------------------------- */
.alert {
  background-color: var(--alert-bg);
  color: var(--alert-text);
  border-radius: 0;
}

/* Footer
====================================== */

footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
}

/* Change history collapsible */

#change-history-icon {
  display: inline-block;
  transition: transform 0.2s ease;
}

[aria-expanded="true"] #change-history-icon {
  transform: rotate(90deg);
}

.prop-change-history .btn-link {
  color: var(--main-content-text);
  text-decoration: none;
  font-size: inherit;
}

.prop-change-history .btn-link:hover {
  text-decoration: underline;
}

/* ── Concept export: hierarchy checkboxes ─────────────────────────────────── */

.export-cb {
  cursor: pointer;
  vertical-align: middle;
  margin-right: 5px;
  position: relative;
  top: -1px;
  flex-shrink: 0;
  accent-color: #0d6efd;
  width: 14px;
  height: 14px;
}

/* ── Concept export: floating download bar ────────────────────────────────── */

#export-bar {
  position: fixed;
  bottom: -56px;
  left: 0;
  right: 0;
  background: #2c3e50;
  color: #fff;
  padding: 0.7rem 1.5rem;
  z-index: 1100;
  transition: bottom 0.22s ease;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.35);
}

#export-bar.export-bar-visible {
  bottom: 0;
}

#export-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

#export-bar-count {
  font-size: 0.9rem;
  font-weight: 500;
}

#export-bar-dl {
  white-space: nowrap;
}



.change-category-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
  background-color: #0d6efd;
  color: #fff;
  white-space: nowrap;
}

/* ------------------------------------------------------------------------ */
/* DZIF: Herkunftsdatensatz in den Suchergebnissen                          */
/*                                                                          */
/* Im MDR teilen sich alle Datensaetze einen Namespace, deshalb koennen die */
/* Treffer einer Vokabularsuche auch aus anderen Datensaetzen stammen. Die  */
/* Herkunft steht jetzt als ruhiges Etikett vor dem Treffer (Ergebnisliste) */
/* bzw. rechts neben ihm (Vorschlagsliste) - deutlich lesbarer als die URI. */
/* ------------------------------------------------------------------------ */

.search-result-vocab {
  display: inline-block;
  font-size: 1rem;          /* so gross wie der Treffer daneben */
  line-height: 1.3;
  color: #14505c;
  background: #eef7f9;
  border: 1px solid #cfe6eb;
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  margin-right: 0.6rem;
  vertical-align: middle;
  white-space: nowrap;
}

/* In der Vorschlagsliste steht das Etikett in einer eigenen Spalte rechts und
   ersetzt dort die fruehere Typangabe ("Begriff"). Etwas kleiner als in der
   Ergebnisliste, damit die Zeile nicht zu hoch wird, und mit Breitenbegrenzung
   fuer lange Titel wie "Allgemeine Medizinische Daten". */
#search-autocomplete-results .search-result-vocab {
  margin-right: 0;
  font-size: 0.85rem;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
}