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

body {					/*für Seiteninhalt*/
  display: flex;
  flex-flow: column;
  min-hight: 100vh; min-hight: -webkit-fill-available;	
  margin: 0.1rem; }
  
.title, .subtitle, .label, .subdir-button, .stb-button, .supplement, .navbar-item, .navbar-dropdown, .bottom-nav, .button, .breadcrumb, .legende, .dontprint, .panel-block, .panel-tabs {
   color: hsl(0, 0%, 21%);		/*für Schrift in diversen Elementen*/
   font-family: sans-serif;
   font-weight: normal; 
   font-size: 0.9rem; }
   
.breadcrumb.has-path-separator li + li::before {	/*für Breadcumb-Separator*/
   content: ">"; }
    
.box, .card {		 	/*Box für Pfad, Buttonleiste bzw. Menü-Kacheln; Card für Formulare, Ergebnistabellen*/
   background: ; 		/*wird weiß dargestellt, wenn nix anderes festgelegt ist*/; 
   box-shadow: none; }
    
.input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder {
   color: grey /*rgba(54, 54, 54, 0.3)*/; }
     	
.input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder {
   color: grey /*(54, 54, 54, 0.3);*/; }
    
/*NavPanel*/ 
.navpanel {
   position: static   		/* damit NavPanel in kl. Viewport nicht am oberen BS-Rand klebt*/
   padding: 0; }

.navpanel ul {			/*für gesamtes NavPanel*/
   display: flex;
   flex-flow: column;
   list-style: none;
   padding: 0;
   background: inherit; }

.navpanel ul {			/*zum Ausblenden gesamten NavPanels*/ 
   display: none; }

.navpanel a {			/*für Nav-Element*/
   display: flex;
   text-decoration: none;
   background: white; 		
   width: auto;
   padding: 0rem 0rem;		/*für Innenraumplatz um Text ob/un + re/li*/
   margin-left: 0rem; }		/*für Außenabstand*/

.navpanel a:hover, .navpanel a:focus {		/*für angetipptes Element*/
   background: inherit; 
   color: inherit; }

.current a { background: inherit; color: black; } /*für current-Element*/
.active { background: inherit; color: black; } 	  /*für panel-item-active"*/

.panel-block {
   display: flex;
   width: auto;
   margin-left: 5.0%; }
	
.panel-tabs {			/*für PanelTab-Zeile (= Funktionsfeldzeile)*/
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-evenly;
   margin-left: 0.5%;
   padding: 1rem 0rem 1rem 1.3rem; }  /*für Padding: ob re un li*/  
   
.panel-tabs a {			/*für PanelTab-Element (= Funktionsfelde)*/
   display: flex;
   flex-flow: row nowrap;
   /*padding: 0.3rem;*/ 
   background-color: whitesmoke; }
   
.panel-item {			/*für rechtsbündige Icons*/
   display: flex;
   flex: 1; }			/*für gleichgroße Icons*/

.shownavpanel + ul {
   display: flex;
   flex-flow: column;
   max-height: 600rem;
   transition: 500ms;
   overflow: initial; }

.shownavpanel.menubutton::before { /*für Close-Buttonanzeige*/
   display: flex;
   content: url(../images/close.svg);
   width: 1.0rem;		/*funkt, da menubutton=flex-container statt inlineBox (wg. Pseudoelent ::before/afer)*/
   height: 1.0rem; }		/*funkt, da menubutton=flex-container statt inlineBox (wg. Pseudoelent ::before/afer)*/
   
.menubutton {
   display: flex;
   background: inherit; 
   padding: 0.3rem 0.5rem 0rem 0.8rem; 	/*für Padding: ob re un li*/
   border: 0;
   margin: 0rem 0.8rem 0.8rem 0.8rem; }	/*für Randabstand: ob re un li*/
    
.menubutton::before {		/*für Burger-Buttonanzeige*/
   display: flex;
   content: url(../images/burger.svg);	
   width: 1rem;			/*funkt, weil menubutton=flex-container statt inlineBox, wg. Pseudoelent ::before)*/
   height: 1rem; }		/*funkt, weil menubutton=flex-container statt inlineBox, wg. Pseudoelent ::before)*/

/*Top-, BottomNav*/
.navbar { 
   display: flex; 
   flex-flow: row wrap; }

.navbar-end { 
   display: flex; }
   
.bottom-nav {			/*für Bottomnav*/
   display: flex; 
   padding: 7px; 
   height: 2em;
   flex-flow: row nowrap;
   justify-content: center; }
   
.bottom-nav li {		/*für Bottomnav-Liste*/
   display: flex; 
   flex: 1;
   align-items: center;
   justify-content: space-evenly; }