/* ****************** STYLING ********************* */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
@font-face { font-family: 'curaMED ICO'; src: url('../fonts/curamed_icofont.woff') format('woff') }
.cmICO { font-family: 'curaMED ICO', sans-serif; }




/* Deine CSS-Datei in Drupal */
:root {
  /* Eigene neue Akzentfarben */

  --color-base: #001155;
  --color-base-light: hsla(228, 100%, 17%, 0.1);
  --color-base-dark: #007194;

  /* --color-base: #00abdf;
  --color-base-light: #d6f5ff;
  --color-base-dark: #007194; */

  --color-txt: #040d33;
  --color-txt-light: #666666;
  --color-txt-inv: #ffffff;

  --color-bg: #eeeeee;
  --color-bg-light: #ffffff;
  --color-bg-lighta: #ffffff00;
  --color-bg-dark: #cccccc;
  --color-bg-darker: #999999;

  --color-bg-sidebar-left: var(--color-bg-light);
  --color-bg-main: var(--color-bg-light);
  --color-bg-sidebar-right: var(--color-bg-light);
  
  --callout:#b7b6bc;
  --callout-info: #4c93ff;
  --callout-warning: #f1bf00;
  --callout-danger: #892c01;

  
  /* Bootstrap-Standardfarben überschreiben (optional) */
  --bs-primary: var(--color-base);
}


.td-highlight { 
  background-color: var(--color-base-light) !important;
  font-weight: 400;
}


.custom-highlight-marker-standardmarker { background-color: var(--color-base-light);  }
.custom-highlight-pen-standardpen { background-color: transparent; color:var(--color-txt); text-decoration-line: underline; text-decoration-color:var(--color-base); text-decoration-thickness: 1px; text-decoration-style: wavy; }

u {
	text-decoration-line: underline; text-decoration-color:var(--color-base); text-decoration-style: double;
}


.custom-button {
  background-color: var(--color-base);
  border: 2px solid var(--color-base-dark);
}



.is-active { 
  font-weight: bold; 
  /* background-color: #ffffff;  */
  color:#000000;
}

a { 
  color:var(--color-base); 
  text-decoration: none;
}

#main-content a:not(.btn) {
  color: var(--color-base);
  text-decoration: underline;
}

.placeholder {
  background-color: unset;
  vertical-align: unset;
}




/* BOOK NAVIGATION TREE */



ul.book-navigation__menu ul, ul.book-navigation__menu {
  list-style-type: none;
  padding-left: 1.2rem;
}

ul.book-navigation__menu {
  padding-left: 0;
  margin:0;
}

a.book-navigation__link:hover {
  color: var(--color-base);

}

a.book-navigation__link {
  display: flex;
  align-items: flex-start; 
  text-decoration: none;
  color: inherit;
}

a.book-navigation__link:hover {
  text-decoration: underline;
}

a.book-navigation__link::before {
  flex-shrink: 0;
  margin-right: 0.5rem;
  content: "\F392";
  font-family: "bootstrap-icons"; 
  line-height: inherit; 
  padding-top: 0.1rem; 
 
}


a.book-navigation__link.is-active::before {
	content: "\F35D";
}

a.menu__link--level-1::before, a.menu__link--level-1.is-active::before {
  margin-right: 0.5rem;
	content: "\F194";
}

.menu__item--level-4 a {
  font-size:smaller; 
}






.sidebar-left {
    background-color: var(--color-bg-sidebar-left) !important;
}

.sidebar-right {
  background: var(--color-bg-sidebar-right);
    }

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






.page_content_header {
  background: var(--color-bg-light);
  background: linear-gradient(0deg, var(--color-bg-lighta) 0%, var(--color-bg-light) 40%);
}


.nav-link.page-content-tree {
  border-radius: 0 !important;
}

.nav-link.page-content-tree.active {
  border-left:1px solid var(--color-base);
}

.active {
  color: var(--color-base);
}

a.nav-link { 
  padding: 0;
}

em {
  color: var(--color-txt-light);
}

.field__label {
	padding-top:20px;
	font-size:smaller;
	font-weight: bold;
}



#search-block-form input {
  font-size: xx-large;
}

#search-block-form .form-type-search {
  width: 80%;
}

#search-block-form .form-actions {
  width: 15%;
}







/* CALLOUT ------------------------------------------------------------------------------------------------------------------------------- */
.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    /* border-top: .25rem solid; */
    border-left: .5rem solid;
}

.callout-title {
  font-weight: 600;
}    
	

.bd-callout p {
  margin-bottom: 0;
}

.bd-callout h4 {
	color: var(--color-txt);
}



.bd-callout {
    border-color: var(--callout); 
    background-color: rgb(from var(--callout) r g b / 0.2);
}

.bd-callout-information {
    border-color: var(--callout-info); 
    background-color: rgb(from var(--callout-info) r g b / 0.2);
}

.bd-callout-warning {
    border-color: var(--callout-warning); 
    background-color: rgb(from var(--callout-warning) r g b / 0.2);
}

.bd-callout-danger {
    border-color: var(--callout-danger); 
    background-color: rgb(from var(--callout-danger) r g b / 0.2);
}




.bd-callout h4 {
    margin-top: 0;
    margin-bottom: .25rem;
}





ol.steps {
  counter-reset: custom;
  list-style-type: none;
  padding: 0;
  padding-top: 30px;
}


ol.steps li {
  counter-increment: custom;
  position: relative;
  padding-left: 45px; 
  padding-bottom: 30px;
  min-height: 30px;
  line-height: 1.5;
  display: block; 
}

ol.steps li:before {
  content: counters(custom,".") " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  background: var(--color-base);
  color: var(--color-bg-light);
  border-radius: 15px;
  display: flex; 
  align-items: center;
  justify-content: center;
  z-index: 2;
}

ol.steps li:not(:last-child):after {
  content: "";
  position: absolute;
  left: 15px;
  top: 30px;
  bottom: 0;
  width: 2px;
  background: var(--color-base);
  z-index: 1;
}


/* Zähler von Titel entfernen */
.no-counter:before {
  content: none !important;
}


/*  ************** TOOLTIP ************************   */
abbr { 
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-base-dark);
  text-decoration-thickness: 2px; 
  cursor: help;
}

.tooltip-inner {
    text-align: left;
    max-width: 480px; /* Breite anpassen */
    padding: 10px;    /* Innenabstand anpassen */
}

.tooltip-inner * { color:#fff !important; }