/* 
DBfK Dunkelblau:	#142855
DBfK Mittelblau:	#194182
DBfK Hellblau:		#00a5e1
DBfK Zartblau:		#96c8ef
DBfK Lindgrün:		#96be1e

Alle Farben dürfen auch in ihren Abstufungen 20%, 40%, 60% und 80% verwendet werden.
*/
        :root {
          --warning: #96be1e;
          --badge-color: #96be1e;
          --download-color: #00a5e1;
          --download-hover: #96be1e;
          --dark-color: #EEEEEE;
            --light-color:#FFFFFF;
            --main-background: #FFFFFF;
            --main-color: #142855;
            --button-color1: #142855;
            --button-color2: #194182;
            --button-text: #FFFFFF;     
            --link-color: #194182;
            --link-hover: #FFFFFF;
            --link-background: #194182;
            --footer-background: #194182;
            --footer-text: #ffffff;
            --breadcrumb-text-activ: #FFFFFF;
            --breadcrumb-background: #142855;
            --breadcrumb-color: #FFFFFF;
            --menu-background: #142855;
            --menu-text: #ffffff;
            --menu-hover: #142855;
            --primary-color: #142855;
            --primary-background: #f8f8f8;
	        --primary-textColor: #142855;
            --secondary-background: #142855;
            --secondary-textColor: #194182;
            --secondary-color: #EEEEEE;
            --accent-background: #EEEEEE;
            --accent-textColor: #142855;
            --selection-background: #142855;
          	--selection-textcolor: #FFFFFF;
            --primary-gradient: linear-gradient(180deg, #ffffff, #ffffff);
            --secondary-gradient: linear-gradient(180deg, #142855, #142855);
           --cassiopeia-color-hover: #FFFFFF;
        }
        
        body {
            background: var(--main-background); 		/* background of your website */
            color: var(--main-color); 		/* color of your website */
        }

        a {
            color: var(--link-color); /* color of your links */
          
        }

a:hover {
  background-color: var(--link-background);
     color: var(--link-hover);
}

        .container-header {
            background-color: var(--primary-background); /* Solid background of your header */
            background-image: var(--primary-gradient); /* Set to none if you want to disable the gradient */
        }

.container-header .mod-menu {

  padding: 3px 15px;
   background-color: var(--menu-background);
  
 color: var(--menu-text);


  

}

.container-header .mod-menu a:hover {
    background-color: var(--menu-hover);
}


.container-header .container-nav {
   /* background-color: var(--menu-background);*/

}
  .menu .card-body {
            background-color: var(--menu-background); 
    border-bottom: 0px;   
 

}

  .menu .card-header {
            background-color: var(--menu-background); /* background color of your card headers */
            border-bottom: 0px solid var(--menu-background); /* border color of your card headers */
            color: var(--primary-textColor); /* text color of your card headers */
    border: 0px;
        }

        .mod-articlesnews-horizontal li, .no-card .newsflash-horiz li {
            background-color: var(--primary-background); /* Solid background of your articlesnews or newsflash modules */
            color: var(--primary-color);  /* Color of your articlesnews or newsflash modules */
			border: 1px solid var(--primary-background); /* Border of your articlesnews or newsflash modules */
        }

        .btn.btn-primary {
            background-color: var(--button-color1); /* background of your primary buttons */
            border-color: var(--button-color1); /* border color of your primary buttons */
            color: var(--button-text); /* text color of your primary buttons */
          font-weight: bold; 
        }

        .mod-articlesnews-horizontal li .btn.btn-secondary, .no-card .newsflash-horiz li .btn.btn-secondary {
            background-color: var(--accent-background); /* background of your primary buttons */
            border-color: var(--accent-background); /* border color of your primary buttons */
            color: var(--dark-color); /* text color of your primary buttons */
          
        }

        .btn.btn-secondary {
            background-color: var(--button-color1); /* background of your secondary buttons */
            border-color: var(--button-color1); /* border color of your secondary buttons */
            color: var(--button-text); /* text color of your secondary buttons */
        }

        .bg-info {
            color: var(--accent-textColor);
            background-color: var(--accent-background) !important;
        }

        .card {
            border: 1px solid var(--primary-background); /* border color of your cards */
	        border-radius: 0; /* border radius of your cards */
	        background-color: var(--primary-background); /* background color of your cards */
        }

        .card-header {
            background-color: var(--primary-background); /* background color of your card headers */
            border-bottom: 1px solid var(--primary-background); /* border color of your card headers */
            color: var(--primary-textColor); /* text color of your card headers */
        }

        .card-body {
            background-color: var(--primary-background); /* background color of your card bodies (Joomla 			Modules) */
            border-bottom: 3px solid var(--accent-background); /* border color of your card bodies */
            color: var(--primary-textColor); /* text color of your card bodies */
        }

        .card-body a {
            color: var(--link-color); /* text color of your card body links */
        }

		.card-body a:hover {
  			background-color: var(--link-background);
     		color: var(--link-hover);
		}

        .card.secondary {
            border: 1px solid var(--secondary-background); /* border color of your secondary cards */
            border-radius: 0; /* border radius of your secondary cards */
            background-color: var(--secondary-background); /* background color of your secondary cards */
        }

        .card-header.secondary {
            background-color: var(--secondary-background); /* background color of your secondary card headers */
            border-bottom: 1px solid var(--secondary-background); /* border color of your  secondary card headers */
            color: var(--secondary-textColor); /* text color of your card headers */
        }

        .card-body.secondary {
            background-color: var(--secondary-background); /* background color of your secondary card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--secondary-background); /* border color of your secondary card bodies */
            color: var(--secondary-textColor); /* text color of your secondary card bodies */
        }

        .card-body.secondary a {
            color: var(--secondary-textColor); /* text color of your secondary card body links */
        }

        .plg_system_webauthn_login_button svg {
            fill: var(--dark-color); /* color of your webauthn login button icon */
        }

        .footer {
            background-color: var(--footer-background); /* background color of your footer */
             background-image: var(--secondary-gradient);  /* Set to none if you want to disable the gradient */
            color: var(--footer-text); /* text color of your footer */
          
        }

   .breadcrumb {
            background-color: var(--breadcrumb-background); /* background color of your footer */  
     color: var(--breadcrumb-color); /* text color of your footer */
        }

 .breadcrumb a {
            color: var(--breadcrumb-color); /* text color of your card body links */
        }

.breadcrumb-item.active {
        color: var(--breadcrumb-text-activ);
        }

        ::selection {
	        background-color: var(--selection-background); /* background color of your text selection */
			color: var(--selection-textcolor); /* text color of your text selection */
        }

        .metismenu.mod-menu .metismenu-item > ul {
			background-color: var(--secondary-background); /* background color of your dropdown menu */
			border: 1px solid var(--secondary-background); /* border color of your dropdown menu */
	        color: var(--secondary-color); /* text color of your dropdown menu */
		}

        .metismenu.mod-menu .metismenu-item > ul a {
	        color: var(--secondary-color); /* text color of your dropdown menu links */
        }

        .main-top.card.colorpicker-module {
	        background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
	        color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            border: none;
        }

        .colorpicker-module .card-header, .colorpicker-module .card-body  {
            background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
        }

        
.item-title {
	        background-color: var(--button-color1); /* background color of your article info */
	         border: 1px solid var(--button-color1);
  color: var(--button-text);
          
        }
    .item-title a {
            color: var(--breadcrumb-color); /* text color of your card body links */
        }

		.item-title a:hover {
  			background-color: var(--link-background);
     		color: var(--breadcrumb-color);
		}

.article-info {
	       /* background-color: var(--button-text);*/ /* background color of your article info */
	       /*  border: 1px solid var(--button-text);*/
          /* BGN: padding: 15px 20px; */ /* padding of your article info */
          font-size: 14px;
        }

     .article-info dd {
	        color: var(--button-color1);}  /* text color of your article info */


        .btn.btn-info {
	        background-color: var(--button-color1); /* background color of your info buttons */
            border: 1px solid var(--button-color1); /* border width, style and color of your info buttons */
	        color: var(--button-text); /* text color of your info buttons */
        }

        .btn-primary .icon-white:before {
	        color: var(--button-color1); /* text color of your info buttons in primary */
        }

        .btn-secondary .icon-white:before {
            color: var(--button-text); /* text color of your info buttons in primary */
        }


        .form-control {
	        background-color: var(--main-background); /* background color of your form controls */
	        border: 1px solid var(--main-color); /* border color of your form controls */
	        color: var(--primary-color); /* text color of your form controls */
	        border-radius: 0; /* border radius of your form controls */
        }

.categories-list {
	        font-size: 22px;        }


label {
	        font-weight: bold; /* font weight of your labels */
        }

        /* generate a clamp font size for h1, in small viewports it should have 18px in large viewports 28px */
		h1, .h1 {
			font-size: clamp(18px, 5vw, 28px);
		}

		/* generate a clamp font size for h2, in small viewports it should have 16px in large viewports 26px */
		h2, .h2 {
			font-size: clamp(16px, 5vw, 26px);
		}

		/* generate a clamp font size for h3, in small viewports it should have 14px in large viewports 24px */
		h3, .h3 {
			font-size: clamp(14px, 5vw, 24px);
		}

		/* generate a clamp font size for h4, in small viewports it should have 12px in large viewports 22px */
		h4, .h4 {
			font-size: clamp(12px, 5vw, 22px);
		}

/*.float-new.item-image {
  text-align: start;
}*/

.input-group-text {
background-color: var(--button-color1);
border-color: var(--button-color1);
color: var(--button-text); 
}

dl.article-info {
display: inline-flex;  
}

dl.article-info .published:after {
padding: 0.25em;
content:"|"    
}

/* PhocaDownload */
.col-md-6 {
width: 100%;
}

.pd-float {
font-weight: bold; 
}

.pd-subcategory {
font-weight: bold; 
  
}

.btn {
background-color: var(--download-color);
border: 1px solid var(--download-color);
  font-weight: bold;

}
.btn:hover {
 background-color: var(--download-hover);
border: 1px solid var(--download-hover);
  font-weight: bold;
  }
  
  /* PhocaDownload */