/*
**************************************************************************
https://cassiopeia.joomla.com/help/cassiopeia-user-css-generator
**************************************************************************
*/

:root {
	--dark-color: #050406;
	--light-color: #FFFFFF;
	--main-background: white;
    --main-color:#2F4F4F;
	--primary-background: #009973;
	--primary-textColor: #2F4F4F;
	--secondary-background: silver;
	--secondary-textColor: 6495ED;
	--secondary-color:  #faf9fb;
	--accent-background: #b5f53d;
	--accent-textColor: #000000;
	--primary-gradient: linear-gradient(180deg, #2a1452, #110821);
	--secondary-gradient: linear-gradient(180deg, #331452, #140821);
}
 body {
	background: var(--main-background); 		/* background of your website */
	color: var(--main-color); 		/* color of your website */
}

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

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


.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(--primary-background); /* background of your primary buttons */
	border-color: var(--primary-background); /* border color of your primary buttons */
	color: var(--primary-textColor); /* text color of your primary buttons */
}

.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(--secondary-background); /* background of your secondary buttons */
	border-color: var(--secondary-background); /* border color of your secondary buttons */
	color: var(--secondary-textColor); /* 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: 3; /* border radius of your cards */
	background-color: none; /* background color of your cards */
}

.card-header {
	background-color: var(--primary-background); /* background color of your card headers */
	border-bottom: none; /* border color of your card headers */
	color: var(--light-color); /* text color of your card headers */
}

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

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

.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: none; /* background color of your secondary cards */
}

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

.card-body.secondary {
	background-color: none; /* background color of your secondary card bodies (Joomla Modules) */
	border-bottom: none; /* 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(--primary-color); /* color of your webauthn login button icon */
}

.footer {
	background-color: var(--secondary-background); 
	background-image: none;  
	color: var(--secondary-color); 
}

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

.metismenu.mod-menu .metismenu-item > ul {
	background-color: var(--primary-background); /* background color of your dropdown menu */
	border: 1px solid var(--primary-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 */
}

.article-info {
	background-color: var(--main-background); /* background color of your article info */
	padding: 15px 20px; /* padding of your article info */
}

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

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

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

.btn-secondary .icon-white:before {
	color: var(--secondary-textColor); /* 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-textColor); /* text color of your form controls */
	border-radius: 3; /* border radius of your form controls */
}

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);
}

 
/* 
**************************************************************************
eigene Ergänzungen
**************************************************************************
*/
/*
body.wrapper-fluid .site-grid {
  grid-template-columns: [full-start] minmax(0,1fr) [main-start] minmax(0,20%) minmax(0,30%) minmax(0,30%) minmax(0,20%) [main-end] 100px [full-end]
}
*/
/* wirkt zwar, aber navbar bleibt weiter unten
.grid-child.container-nav{
 height:1em;  
}
*/


div.container-topbar {
  background-color:white;
}
.grid-child.container-nav {
  padding:0;
}

.search {
  padding:0;
}

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

.card-header.light {
	background-color: var(--secondary-background); /* background color of your secondary card headers */
	border-bottom: none; /* border color of your  secondary card headers */
	color: var(--main-color); /* text color of your card headers */
}

.card-body.light {
	background-color: none; /* background color of your secondary card bodies (Joomla Modules) */
	border-bottom: none; /* border color of your secondary card bodies */
	color: var(--main-color); /* text color of your secondary card bodies */
}

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

.card.light button {
	background-color:var(--secondary-background);
}
.card.light button:hover {
	background-color:var(--primary-background); color:white;
}

.mod-languages{
  background-color:white; float:right; vertical-align:bottom;
}

footer .grid-child  {
  height:3em; padding:0;
}