kern/superx/style/sx_common.css

/*Hell-/Dunkel-Modus*/
:root {
	color-scheme: light;
	background-color: white;
	color: black;
}

@media (prefers-color-scheme: dark) {
:root {
	color-scheme: dark; /*light;*/
	background-color: white;
	color: black;	}
	 
.navigation, .navbar, .button, .card  {				
	background-color: white; 	
	border: inherit; }
	
.field {
	background-color: inherit;
	}
	
.field.has-addons .control:not(:last-child) {
  	margin-inline-end: unset; }

.input, .select select, field has-addons {
	background-color: white; 
	color: darkgrey; 
	border: thin solid hsl(0, 0%, 71%); /*hellgrau*/}

.card-footer-item:not(:last-child) { 
	   border: none; 
   }
}

@media (prefers-color-scheme: dark) {
   img {
     filter:brightness(.8) contrast(1.2);  
  }
}
/*:root {
    /* CSS Variables */
/*}

[data-theme=light],
.theme-light {
  /* CSS Variables */
/*}

[data-theme=dark],
.theme-dark {
  /* CSS Variables */
/*}

/*Weitere allgemeine Basics*/

div.columns { 		/*für Abstand zum Seitenrand*/
margin-top: 1px;
margin-right:5px; }	

body {			/*für Seiteninhalt*/
  display: flex;
  flex-flow: column;
  min-height: 100vh; 
  margin: 0.1rem; 
} 
  
body.dark-theme img {	/*filter für theme dark*/
  filter:brightness(.80) contrast(1.2); }  
  
.hero-body { 
  margin-left: 1.5em;		
  margin-right: 1.5em; }

.title, .subtitle {		/*für Seitentitel*/
   margin-top: 0.4em;
   padding-bottom: 0.1em;  	/*für Padding: ob re un li*/
   white-space: normal;         /* für Zeilenumbrüche nach Standard-Regeln*/
   word-wrap: normal;           /* veraltet: für Umbrüche nach Standard-Regeln*/
   overflow-wrap: break-word;   /* aktuell: für Umbrüche nach Standard-Regeln*/ 
   hyphens: auto; }	 	/*für Padding: ob re un li*/
   
.title, .subtitle, .label, .labelNormal, .labelPflicht, .subdir-button, .stb-button, .supplement, .menu-list a,
.navbar-item, .navbar-dropdown, .bottom-nav, .button, .breadcrumb, p.legende, .dontprint, .panel-block, .panel-tabs, .resultcount {
   color: hsl(0, 0%, 21%);	/*für Schrift in diversen Elementen*/
   font-family: sans-serif;
   font-weight: normal; 
   font-size: 12px; }

/*Card, Box, Article*/   
.box, .card {		 	/*Box für Pfad, Buttonleiste bzw. Menü-Kacheln; Card für Formulare, Ergebnistabellen*/
   /*background: var(--bulma-card-background-color); /* wird weiß dargestellt, wenn nix anderes festgelegt ist; 20240918 BF entfernt wg Darstellung im dark-mode*/ 
   box-shadow: none; }
   
.card, .article {		/*für Cardposition, -style*/
   display: flex;
   flex-flow: column;
   margin: 1%; 			/*171024 BF geändert von 0em*/
   white-space: normal;         /* für Zeilenumbrüche nach Standard-Regeln*/
   word-wrap: normal;           /* veraltet: für Umbrüche nach Standard-Regeln*/
   overflow-wrap: break-word;   /* aktuell: für Umbrüche nach Standard-Regeln*/ 
   hyphens: auto; 
   text-align: left;            /* für linksbündigen und umgebrochenen Text*/
   cursor: pointer;
   font-size: 12px; 
   width: 100%; } 
   
.card {margin-top: 0.5rem !important;}   /*20240907BF ergänzt*/

.card-content {
   padding-left: 1.3rem;}
	
.card-footer, .card-footer-item {/*für submit-buttons*/
   display: flex;
   flex-flow: row; 		/*für horizontale Ausrichtung*/
   background: inherit; 
   border: none;
   margin-top: 1rem; }

.card-footer-item:not(:last-child) { 
   border: none; }

.form-submit {
  display: flex;
  justify-content: center;
  column-gap: 0.5rem;
  background: inherit;
  border: none;
  margin-top: 1rem;
  margin-left: 2rem; }
  
.form-submit-item {
   display: flex;
}

/*Cell*/  
.container {
    display: flex; 
    flex-wrap: wrap; /* Damit die Zellen umgebrochen werden, wenn nicht genug Platz ist */
    justify-content: flex-start; /* Inhalte links */
    align-items: flex-start; /* Inhalte vertikal ausrichten */
    margin-left: 0rem;
}

.cell {
    flex: 1 1 auto; 		/*flex-grow, flex-shrink, flex-basis = ; /*für flexibles Verhalten der Zeile*/
    display: flex; 		/*flexibles Wachstum ohne feste Breite */
    padding: 0rem 0.25rem; 	/*padding oben+unten, rechts+links*/
    margin-bottom: 0.1rem;
    box-sizing: border-box;
    /*width: calc(100% - 0.5rem);*/ 
    /*max-width: 100%;*/
    border: thin solid hsl(0, 0%, 71%); /*hellgrau*/
    border-radius: 0.3em; 
}

/*Modal und Breadcrumb*/   
.modal-background { background-color: white; }

.breadcrumb {
   padding: 0.3rem;
   border: thin solid hsl(0, 0%, 71%); /*hellgrau*/
   border-radius: 0.3em; } /*für Padding: ob re un li*/
   
.breadcrumb.has-path-separator li + li::before { /*für Breadcumb-Separator*/
   content: " >"; 
   color: grey; }
   
.breadcrumb, .breadcrumb a {
   user-select: auto; } 		/*für Markierung des Inhalts */

/*Buttonleiste, div. Buttons*/
.buttonbar {				/*für resposive	 Buttonleiste*/
   display: flex; 
   flex-flow: row wrap;
   justify-content: flex-start;
   align-items: normal; }
   
.buttonbar img { 			/*für Icongröße in Buttonleiste*/
    height: 1.5rem; 
    width: 1.7rem; 			/*ursprgl. 1.5*/
    margin: 8px 0px 0px 0px;		/*neu 20240828 BF*/
    padding: 0rem 0.1rem 0rem 0.1rem; } /*für Padding: ob re un li*/
    
.buttonbar_text { 
    font-size: 10px; }

.button {		/*für Button-Bezeichner-Ausrichtung*/
   display: flex;
   justify-content: left !important; }
   
.submit_button {	/* zum Abschicken, Übernehmen*/   
   border: thin solid hsl(141, 71%, 48%); /*grün*/
   border-radius: 0.3em; }
   
.reset_button {		/* zum Zurücksetzen, Leeren*/ 
   border: thin solid hsl(48, 100%, 67%); /*gelb-orange*/
   border-radius: 0.3em; }
   
.close_button {		/* zum Schließen*/ 
   border: thin solid hsl(0, 0%, 71%); /*hellgrau*/
   border-radius: 0.3em; }
   
.menubutton, .orgunitbutton, .closebutton {  /*für Button-Style*/
   display: flex;
   justify-content: center;
   background: inherit; 
   padding: 0.4rem 0rem 0.4rem 0rem;	/*für Padding: ob re un li*/
   border: thin solid white /*hsl(48, 100%, 67%)*/;
   border-radius: 0.3em; 
   box-shadow: rgb(0 0 0 /0.1) 0.1em 1.1px; 
   width: 1.8rem;	/*1.7rem*/
   height: 1.8rem;}	/*1.7rem*/ 
   
/*Top-, Bottom-Navigation*/
.navbar { 
   display: flex; 
   align-items: center;	
   flex-flow: row wrap;
   background: #ECF0F3; }  /*Memtext-Blaugrau*/

.navbar-end { 
   display: flex; }

.navbar-item {
   margin-bottom: 0.1rem; } 
 
/*Webanwendungsmanager*/  
/* Box-Sizing auf Border-Box setzen */
*,
*::before,
*::after {
  box-sizing: border-box;
}
.nd_navi_wam {
   display: flex;
   max-width: 2.0rem; } /*1.7rem*/
  
.navi_wam {
   position: static   		/*damit NavPanel in kl. Viewport nicht am oberen BS-Rand klebt*/
   padding: 0; }

.navi_wam ul {			/*für sichtbaren Webanwendungsmanager*/
   display: flex;
   flex-flow: column;
   flex: 1;
   list-style: none;
   padding: 0; margin: 0;
   background: inherit; } 

.navi_wam a  {			/*für WAM-Elemente*/
   display: flex; /*block*/
   text-decoration: none;
   background: #ECF0F3; /*whitesmoke;*/
   border: thin solid white /*hsl(48, 100%, 67%)*/;
   border-radius: 0.3em; 
   box-shadow: rgb(0 0 0 /0.1) 0.1em 2.1px;
   width: auto;
   padding: 0.3rem 0.3rem;	/*für Innenraumplatzum Text ob/un + re/li*/
   margin: 0rem; }		/*für Außenabstand*/

.navi_wam a:hover, .navi_wam a:focus {		/*für angetipptes/steuertes Element*/
   background: hsl(219, 70%, 76%); 		/*inherit*/ 
   color: white; } 				/*inherit*/

.navi_wam ul {			/*für versteckten Webanwendungsmanager*/
   max-height: 0;
   overflow: hidden;
   padding: 0; }
   
.showwam + ul { 			
   display: flex;
   flex-flow: column;
   max-height: -600rem;
   transition: 500ms;
   overflow: initial; }
   
/*Profil*/  
.nd_navi_profil {
   display: flex;
   max-width: 2.0rem; }
  
.navi_profil {
   position: static   		/*damit NavPanel in kl. Viewport nicht am oberen BS-Rand klebt*/
   padding: 0; }

.navi_profil ul {		/*für sichtbaren Profil*/
   display: flex;
   flex-flow: column;
   flex: 1;
   list-style: none;
   padding: 0; margin: 0;
   background: inherit; } 

.navi_profil a  {		/*für Profil-Elemente*/
   display: flex; 
   text-decoration: none;
   background: #ECF0F3; 	/*Memtext-Blaugrau*/
   border: thin solid white 	/*hsl(48, 100%, 67%)*/;
   border-radius: 0.3em; 
   box-shadow: rgb(0 0 0 /0.1) 0.1em 2.1px;
   width: auto;
   padding: 0.3rem 0.3rem;	/*für Innenraumplatzum Text ob/un + re/li*/
   margin: 0rem; }		/*für Außenabstand*/

.navi_profil a:hover, .navi_profil a:focus {	/*für angetipptes Element*/
   background: hsl(219, 70%, 76%); 		/*inherit*/ 
   color: white; } 

.navi_profil ul {		/*für verstecktes Profil*/
   max-height: 0;
   overflow: hidden;
   padding: 0; }
   
.showprofil + ul { 			
   display: flex;
   flex-flow: column;
   max-height: -600rem;
   transition: 500ms;
   overflow: initial; }
   
/*Bottom-Navi*/
.bottom-nav {			/*für Bottomnavi-Zeile*/
   display: flex; 
   flex-flow: row nowrap;
   justify-content: center; 
   background: #ECF0F3; 	/*Memtext-Blaugrau*/
   height: 45px; }		/*20240911BF ergänzt*/
   
.bottom-nav li {		/*für Bottomnav-Liste*/
   display: flex; 
   flex: 1;
   align-items: center;
   justify-content: space-evenly; }
   
.poweredby_sxbi {		
   display: flex;
   content: url(../images/poweredby_sxbi.svg);	
   width: 10rem; } 
 
/***NaviPanel-/Themenbaum-Style***/ 
.navpanel {
   position: static   	/*damit NavPanel in kl. Viewport nicht am oberen BS-Rand klebt*/
   padding: 0; }

.navpanelFrame /*, .navpanelFrame_ou*/ { /*für gesamtes NavPanel*/
   display: flex;
   flex-flow: column;
   list-style: none;
   margin-top: 2em; }

.navpanelFrame /*.navpanelFrame_ou*/  {	/*zum Ausblenden gesamten NavPanels*/ 
   display: none; }

.navpanel a  {		/*20240209 BF Eigenschaften deaktiviert da überlagert mit themenbaumStatic/.Nested a und li; sh. Z480+Z486*/	/*für Nav-Elemente*/
  /* display: flex;
   flex:1;
   text-decoration: none;
   align-content: center;
/* background: white; */		
   /*width: auto;
   padding: 0rem 0rem;			/*für Innenraumplatz um Text ob/un + re/li*/
   /*margin-left: 0rem; */}			/*für Außenabstand*/

.level-center { 
  display: flex;
  align-items: center;
  flex-grow: 1;
  width: 100%;  /* Optional: vollständige Breite des Containers */
  height: 100%; /* Optional: vollständige Höhe des Containers */
}

.panel-block {
   display: flex; }
   
.panel-block-search {		
   margin-left: 10px; }

.menu-label { 
   margin-left: 5.0%;
   text-transform: unset; }  	/*20240812 BF geändert von uppercase*/
   
.panel-block-ebene1 {
   display: flex;
   flex: 1;
   width: auto;
   margin-left: 0%; }
   
.panel-block-ebene2 {
   display: flex;
   flex: 1;
   width: auto;
   margin-left: 10.0%; }
   
.panel-block-ebene3 {
   display: flex;
   flex: 1;
   width: auto;
   margin-left: 15.0%; }
   
.panel-block-ebene4 {
   display: flex;
   flex: 1;
   width: auto;
   margin-left: 20.0%; }
   
.panel-block-ebene5 {
   display: flex;
   flex: 1;
   width: auto;
   margin-left: 25.0%; }
   
.panel-block-ebene6 {
   display: flex;
   flex: 1;
   width: auto;
   margin-left: 30.0%; }
   
.panel-block-ebene7 {
   display: flex;
   flex: 1;
   width: auto;
   margin-left: 35.0%; }
   
.panel-block-ebene8 {
   display: flex;
   flex: 1;
   width: auto;
   margin-left: 40.0%; }
   
.panel-block-ebene9 {
   display: flex;
   flex: 1;
   width: auto;
   margin-left: 45.0%; }
   
.panel-icon {
   margin: 2%; }*/
   
/***Auf-/Zuklappen von Themenbaum/ThemenbaumNested***/
.themenbaumStatic li, themenbaumNested li { 	
/* margin: 0.1rem; */
}

.themenbaumNested {  		/*zum Auf-/Zuklappen*/
  display: none;
  margin-right: 0px;
}

.themenbaumActive {
  display: block;
  margin-right: 0px;
}

.themenbaumStatic li.themenbaumEintrag { /*für ListElemente*/  
  margin-left: 23px; 	
  width: 310px; 	
  border-bottom: 0.3px solid #ccccccff;
  box-sizing: border-box;  /* Beinhaltet Padding und Border in der Breitenberechnung */
  margin-top: 0;       /* 20240910 Verhindert zusätzlichen Freiraum oberhalb */
  margin-bottom: 0;    /* 20240910 Verhindert zusätzlichen Freiraum unterhalb */
}

.themenbaumNested li.themenbaumEintrag { /*für ListElemente*/ 
  width: 95%; 		
  border-bottom: 0.3px dotted lightgrey /*#ccccccff*/;
  box-sizing: border-box;  /* Verhindert überschüssige Breitenänderungen */
  margin-top: 0;       /* 20240910 Kein zusätzlicher Freiraum oberhalb */
  margin-bottom: 0;    /* 20240910 Kein zusätzlicher Freiraum unterhalb */
}

.themenbaumStatic a, themenbaumNested a  { /*für BaumElemente*/
  font-family: sans-serif;  
  font-weight: normal;
  font-size: 12px; 
  margin-left: 5px; 
}

/*.themenbaumEintrag:hover, .themenbaumEintrag:focus { /*für Hervorhebung bei Anwahl*/
/*  background: white; }*/
	
a.themenbaumLink:hover, a.themenbaumLink:focus { /*für Hervorhebung bei Anwahl*/
  font-weight:normal;
  color: black;
  background-color: transparent;} 
  
.themenbaumEintrag {
    display: block; /* Zeigt jedes Thema als Blockelement, sodass es vertikal gestapelt wird */
}

.themenbaumLink {
    display: inline-flex; /* Flexbox sorgt dafür, dass die Icons und der Text korrekt ausgerichtet sind */
    align-items: baseline;  /* Vertikale Zentrierung von Icon und Text */
}

.themenbaumLinkName {
    white-space: normal; 	/* Erlaubt Zeilenumbruch */
    overflow-wrap: break-word; 	/* Ermöglicht Umbruch bei langen Wörtern */
    padding-left: 0.2em; 	/* Abstand nach links vom Icon */
    display: block; 		/* Block, um Zeilenumbrüche zu unterstützen */
}

.themenbaumSpacer {  		/*???*/
  /*padding-left: 10px;*/ }

.themenbaumLinkWithSpace {
  text-decoration: none; 	/*keine Unterstreichung für Links */
  box-decoration-break: clone;
 -webkit-box-decoration-break: clone;}

.themenbaumPlaceholder {
   padding-left: 5px;}   	/*für Abstand zu linkem Rand u. Linktext*/ 

.themenbaumCaret {
  cursor: pointer;		/* Zeigt an, dass das Caret klickbar ist */
  -webkit-user-select: none; 	/* Safari 3.1+ */
  -moz-user-select: none; 	/* Firefox 2+ */
  -ms-user-select: none; 	/* IE 10+ */
  user-select: none; 
  display: inline-block; /* Caret bleibt in der gleichen Zeile wie der Text */
  vertical-align: text-bottom; /* Vertikale Ausrichtung des Carets mit dem Text */
}

.themenbaumCaret-down::before {
  -ms-transform: rotate(270deg); 	/* IE 9 */
  -webkit-transform: rotate(270deg); 	/* Safari */'
  transform: rotate(270deg); }

.themenbaumCaret::before {
  content: ">";
  color: grey; 
  display: inline-block; /* Caret bleibt in der gleichen Zeile wie der Text */
}

ol.themenbaumSearchResults { 	/*für Suchergebnisse*/
  padding-left:20px; }
  
/***Auf-/Zuklappen von NaviPanel-Auswertungen***/ 
.menubutton::before {		/*für Button-Grafik*/ 
   display: flex;
   justify-content: center;
   content: url(../images/burger.svg);
   width: 1.0rem; 	
   height: 0.8rem; }	       
   
.closebutton::before {		/*für Button-Grafik*/
   display: flex;
   justify-content: center;
   content: url(../images/close_grey.svg);
   width: 1.0rem; 
   height: 0.8rem; }
   
.hidenavpanel + ul { 			/*//zum Ausblenden des NavPanels alterntiv zu display: none*/ 
   display: none; }

.closenavpanel.closebutton::before {    /*für Buttonanzeige bei geschlossenem NavPanel*/
   display: flex;
   content: url(../images/burger.svg); }
   
/***Auf-/Zuklappen von NaviPanel-OrgUnits***/
/*Angaben zu closebutton::before; closebutton-Style; closebutton-Grafik s.o. bei Nav-Panel-Auswertungen*/
.orgunitbutton::before {	/*für Button-Grafik*/
   display: flex;
   justify-content: center;
   content: url(../images/sitemap_blue_dark.svg); 
   width: 1.0rem;			
   height: 0.8; }

.shownavpanel_ou + ul { /*nur relevant, wenn NavPanel beim Dialogöffnen ausgeblendet ist*/ 					
   display: flex;	/*bitte auch Hinweis zur Code(de)aktivierung im template nd_navi_panel/nd_navi_panel_ou beachten*/	
   flex-flow: column;
   max-height: 600rem;
   transition: 500ms;
   overflow: initial; }
   
.shownavpanel_ou.orgunitbutton::before  { /*für Buttonanzeige bei geöffnetem NavPanel*/
   display: flex;
   content: url(../images/close_grey.svg); 
   padding-right: 0.9rem;
   width: 0.7rem;	
   height: 0.7rem; }  

.closenavpanel_ou + ul { /*darf nur AKTIV sein, wenn NavPanel beim Dialogöffnen eingeblendet sein soll*/ 
   display: none; } 	 /*bitte auch Hinweis zur Codeaktivierung in templates nd_navi_panel/nd_navi_panel_orgunits beachten*/

.closenavpanel_ou.closebutton::before  { /*für Buttonanzeige bei geschlossenem navpanel*/
   display: flex;
   content: url(../images/sitemap_blue_dark.svg); }
   
/*Selektionsfelder-Formular*/
.selectionbox {
   display: flex; 
   width: 80%;
   justify-content: left;
   padding: 0rem; } 	

.label-container, .button-label { /*für einh.responsive Feldbezeichner; vgl. dazu auch: sx_menu.css*/
   display: flex;
   /*justify-content: right;	/*20240619BF geändert*/
   background: inherit;	
   min-width: 7.5rem; 		/*für kleine Viewports*/
   width: 100%;	}		 		
 
.button-label button {
    white-space: normal;        /* für Zeilenumbrüche nach Standard-Regeln*/
    word-wrap: normal;          /* veraltet: für Umbrüche nach Standard-Regeln*/
    overflow-wrap: break-word;  /* aktuell: für Umbrüche nach Standard-Regeln*/ 
    line-height: 1.0;
    padding-left: 0rem !important;
    text-align: center; 	/*für zentrierten Text*/
    width: 100%; }  	        
   
.labelSichtorComboButton, .labelPflicht, .labelNormal {
   white-space: normal;        /* für Zeilenumbrüche nach Standard-Regeln*/
   word-wrap: normal;          /* veraltet: für Umbrüche nach Standard-Regeln*/
   overflow-wrap: break-word;  /* aktuell: für Umbrüche nach Standard-Regeln*/ 
   hyphens: auto;
   text-align: right;          /* für rechtsbündigen und umgebrochenen Text*/
   cursor: pointer;
   font-size: 12px; 
   width: 100%; } 	      

.labelSichtorComboButton {
   color: var(--bulma-link-text); } /*#3273dc*/	/*für Linkfarbe; !important entfernt  für CD-HS*/
	   
.label-container-dialog { 	/*für Dialogfelder*/
   display: flex;
   justify-content: left;	
   background: inherit;	
   min-width: 10rem; }		/*für kleine Viewports*/
 
.labelNormal-dialog {
   white-space: normal;        /* für Zeilenumbrüche nach Standard-Regeln*/
   word-wrap: normal;          /* veraltet: für Umbrüche nach Standard-Regeln*/
   overflow-wrap: break-word;  /* aktuell: für Umbrüche nach Standard-Regeln*/ 
   text-align: left;           /* für linksbündigen und umgebrochenen Text*/
   width: 100%; }

.control-new {   		/*für einheitl. Controlbreite in Masken u. Themenbaum*/
   min-width: 12.0rem;		/*für kleine Viewports*/
   width: 100%;			/*für große Viewports*/
   height: 1.6rem;}		

.control-new-narrow {   	/*für einheitl. Controlbreite in Masken u. Themenbaum*/
   min-width: 8.0rem; 		/*für kleine Viewports*/
   width: 20%;  		/*für große Viewports*/
   margin: 0rem 0.2rem 0.1rem 0.2rem; } /*für Margin: ob re un li*/
   
.field {
   margin-left: 1%;
   align-items: center; 	/*für horizontale Label-Ausrichtung*/
   /*width: 250px;*/ }		/*Labelbreite=Abstand zum Eingabefeld; 28082024 deaktiviert*/
   
.field-body { 			/*für Feldhöhe/-abstand*/
   height: 1.2rem }
   
.input, .select select {
   padding-left: 10px;
   border-radius: 0.2em; }

input.schluesselfeld {
   font-size:0.9em;
   background-color:#ffffcc;
   color:blue
}

.input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder {
   color: darkgrey /*rgba(54, 54, 54, 0.3)*/; }
     	
.input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder {
   color: darkgrey /*(54, 54, 54, 0.3);*/; }
      
.trennung {
  -webkit-hyphens: auto;
  hyphens: auto; }
  
.required:before { content: "* ";} /*Kennz. für obligatorische Eingabefelder*/ 

/*.comboDiv {	/*20241102 BF: deaktivert, da hier unnötig, weil in sx_sichtauswahl definiert*/
 /*  background-color: white; 
   border-radius: 0.5em; 
   padding-left: 0.5em;*/ 
   /*legt max. sichtbare Höhe u. vertikalen Scrollbalken fest, wir wollen aber keinen Scrollbalken:
   max-height: 700px;		  
   overflow-y: auto;*/ 		  /*fixiert an position*/
/*}*/

.field-container {
    display: flex;
    flex-direction: column; /* Ordnet alle Felder vertikal */
    gap: 1px; 		/* Fügt Abstand zwischen den Feldern hinzu */
    width: 100%; }	/* Passt sich der verfügbaren Breite an */

.resizable-textarea {
    resize: vertical; 	/* Erlaubt vertikales Vergrößern */
    overflow: auto; 	/* Scrollt den Inhalt, wenn er zu groß wird */
    min-height: 7em;	/* Ausgangshöhe */
    max-height: 300px; 	/* Maximale Höhe */
    margin-left: 12px; }
    
/* Tooltip-Stil und Positionen */
[data-tooltip]:not(.is-disabled).has-tooltip-bottom::before, 
[data-tooltip]:not(.is-loading).has-tooltip-bottom::before, 
[data-tooltip]:not([disabled]).has-tooltip-bottom::before {
  display: flex;
  margin: 0.5em;
  position: absolute;
  z-index: 1000;
  padding: 1.0em;
  background-color: royalblue /*#333*/;
  color: white;
  border-radius: 0.3em;
  white-space: wrap;
  text-align: left;  
  width: 250px;
  height: fit-content;
  white-space: wrap;         /* für Zeilenumbrüche nach Standard-Regeln*/
  overflow-wrap: break-word;   /* aktuell: für Umbrüche nach Standard-Regeln*/ 
  hyphens: auto; }
   
/*Listen*/
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-position: inside;
list-style-image: none; }

ol {
margin:0px;
padding:0px;
list-style-type: decimal;
list-style-position:inside; }

.menu-list { padding-left: 0.6rem !important;}

li.submenu_listelem {
   list-style:none;
   margin:10px;
   padding:0;
   border-bottom:thin solid silver;
}

.submenu_listelem:hover, .submenu_listelem:focus {
  background-color: white; } /*#eaeaea;*/
  
/*Modal Cards*/
.box-new {			/*für Kopfzeile mit Close-Button*/
   display: flex;
   justify-content: space-between;
   font-weight: bold;
}	

.modalValues {
  background-color: #ECF0F3; /*whitesmoke;*/ /*für Abschnitthintergrund, Schrift*/ 
  font-size: 0.8em;
}
 
.modalDl_title {			/*für Texthervorhebungen*/ 
   display: flex;
   justify-content: center;
   background: inherit;	
   font-size: 1.2em;
   font-weight: 400;   
}
 
span.feldname {font-weight:medium; }
span.feldwert {font-weight:bolder; }

/*Logobuttons und Icons*/
.icon_themenbaum_admin_small{content:url(../images/logobutton_kern.svg);height:20px;width:20px;display:inline;} 
.icon_themenbaum_admin_normal{content:url(../images/logobutton_kern.svg);height:100px;width:100px;display:inline;} 
.icon_themenbaum_neutral_small{content:url(../images/icon_neutral_mini.svg);height:21px;width:20px;padding-top:5px;display:inline;}
.icon_themenbaum_neutral_normal{content:url(../images/icon_neutral_mini.svg);height:70px;width:60px;padding-top:15px;display:inline;}
.icon_themenbaum_kern_small{content:url(../images/icon_kern_mini.svg);height:20px;width:20px;padding-top:3px;display:inline;}
.icon_themenbaum_kern_normal{content:url(../images/logobutton_kern.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_rpta_small{content:url(../images/icon_rpta_mini.svg);height:20px;width:20px;padding-top:3px;display:inline;}
.icon_themenbaum_rpta_normal{content:url(../images/logobutton_rpta.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_zul_small{content:url(../images/icon_zul_mini.svg);height:20px;width:20px;padding-top:3px;display:inline;}
.icon_themenbaum_zul_normal{content:url(../images/logobutton_zul.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_fin_small{content:url(../images/icon_fin_mini.svg);height:20px;width:20px;padding-top:3px;display:inline;}
.icon_themenbaum_fin_normal{content:url(../images/logobutton_fin.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_bau_small{content:url(../images/icon_bau_mini.svg);height:20px;width:20px;padding-top:3px;display:inline;}
.icon_themenbaum_bau_normal{content:url(../images/logobutton_bau.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_kenn_small{content:url(../images/icon_kenn_mini.svg);height:20px;width:20px;padding-top:3px;display:inline;}
.icon_themenbaum_kenn_normal{content:url(../images/logobutton_kenn.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_sx_connect_small{content:url(../images/icon_sx_connect.png);height:20px;width:20px;display:inline;}
.icon_themenbaum_sx_connect_normal{content:url(../images/logobutton_sx_connect.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_ivs_small{content:url(../images/icon_ivs_mini.svg);height:20px;width:20px;padding-top:3px;display:inline;}
.icon_themenbaum_ivs_normal{content:url(../images/logobutton_ivs.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_cob_small{content:url(../images/icon_cob_mini.svg);height:20px;width:20px;padding-top:3px;display:inline;}
.icon_themenbaum_cob_normal{content:url(../images/logobutton_cob.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_etl_small{content:url(../images/icon_etl_mini.svg);height:20px;width:20px;padding-top:3px;display:inline;}
.icon_themenbaum_etl_normal{content:url(../images/logobutton_etl.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_leistungsmonitor_small{content:url(../images/icon_leistungsmonitor_mini.svg);height:20px;width:20px;padding-top:3px;display:inline;}
.icon_themenbaum_leistungsmonitor_normal{content:url(../images/logobutton_leistungsmonitor.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_man_small{content:url(../images/icon_man_mini.svg);height:20px;width:20px;padding-top:3px;display:inline;}
.icon_themenbaum_man_medium {content:url(../images/icon_man_mini.svg);height:30px;width:30px;display:inline;}
.icon_themenbaum_man_normal{content:url(../images/logobutton_man.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_sva_small{content:url(../images/icon_sva_mini.svg);height:20px;width:20px;padding-top:3px;display:inline;}
.icon_themenbaum_sva_normal{content:url(../images/logobutton_sva.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_prom_small{content:url(../images/icon_prom_mini.svg);height:20px;width:20px;padding-top:3px;display:inline;}
.icon_themenbaum_prom_normal{content:url(../images/logobutton_prom.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_qa_small{content:url(../images/icon_qa_mini.svg);height:20px;width:20px;padding-top:3px;display:inline;}
.icon_themenbaum_qa_normal{content:url(../images/logobutton_qa.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_gang_small{content:url(../images/icon_gang_mini.svg);height:20px;width:20px;padding-top:3px;display:inline;}
.icon_themenbaum_gang_normal{content:url(../images/logobutton_gang.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_sos_small{content:url(../images/icon_sos_mini.svg);height:20px;width:20px;padding-top:3px;display:inline;}
.icon_themenbaum_sos_normal{content:url(../images/logobutton_sos.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_erfolg_small{content:url(../images/icon_erfolg_mini.svg);height:20px;width:20px;padding-top:3px;display:inline;}
.icon_themenbaum_erfolg_normal{content:url(../images/logobutton_erfolg.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_viz_small{content:url(../images/icon_viz_mini.svg);height:20px;width:20px;padding-top:8px;display:inline;}
.icon_themenbaum_viz_normal{content:url(../images/logobutton_viz.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_xcube_small{content:url(../images/icon_xcube_mini.svg);height:20px;width:20px;padding-top:4px;display:inline;}
.icon_themenbaum_xcube_medium{content:url(../images/icon_xcube_mini.svg);height:30px;width:30px;display:inline;}
.icon_themenbaum_xcube_normal{content:url(../images/logobutton_xcube.svg);height:100px;width:100px;display:inline;}
.icon_themenbaum_datenblatt_normal {content: url(../images/th.svg);height:25px;width:25px;display:inline-block;} 
.icon_themenbaum_datenblatt_small {content: url(../images/th.png);height:20px;width:20px;display:inline-block;}
.icon_themenbaum_zeitreihe_normal {content: url(../images/chart-line.svg);height:25px;width:25px;display:inline-block;}  	 
.icon_themenbaum_zeitreihe_small {content: url(../images/chart-line.png);height:20px;width:20px;display:inline-block;} 	 
.icon_themenbaum_list_normal {content: url(../images/list.svg);height:25px;width:25px;display:inline-block;}          
.icon_themenbaum_list_small {content: url(../images/list.png);height:20px;width:20px;display:inline-block;}