/* Rahmen um die Seite */
.site-grid {
  background-color: #FFFFFF;
}

.header {
  background-color: #FFFFFF;
}

.grid-child {
  padding: 3px 15px;
  background-color: white;
}
.footer {
  background-color: #f4f6f7;
  background-image: none;
  color: var(--dark-color); /* text color of your footer */
        }

.footer .grid-child {
  background-color: #f4f6f7;
  background-image: none;
 color: var(--dark-color); /* text color of your footer */}
 
.footer .grid-child
a:hover {
    color: black;
  }
.footer-menu 
a:link    { color: var(--dark-color) }
/*noch nicht besuchter Link*/
.footer-menu 
a:visited { color: #92373b; }
/*schon besuchter Link*/
.footer-menu 
a:hover   { color: #92373b; }
/*Benutzer 'hovert'*/
.footer-menu 
a:active  { color: #92373b; }
/*Link wird ausgewählt*/
.footer a:not(.btn):hover, .footer a:not(.btn):focus, .footer .btn-link:hover, .footer .btn-link:focus {
    color: var(--gray-600);
    text-decoration: underline}
/* new color variables */
        :root {
            --dark-color: #333;
            --light-color:#333;
            --main-background: #FFFFFF;
            --primary-background: #FFFFFF;
            --secondary-background: #F8CC08;
            --accent-background: #FFCC08;
            --primary-gradient: linear-gradient(180deg, #FFDF00, #FAC814);
            --secondary-gradient: linear-gradient(180deg, #E6E6E6, #A6A6A6);
        }

        body {
            background: var(--main-background); 		/* background of your website */
            color: var(--main-color); 		/* color of your website */
        }

        a {
            color: #92373b; /* color of your links */
        }

blockquote {
    margin: 12px 0 24px;
    padding: 16px;
    font-style: normal;
    background-color: #fffccc;
  color: #333;
    border-radius: 16px;
}

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

/* Text should now be black */
.container-header .mod-menu {
    background-color: #E6E6E6;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
color: #333;}

  /* We add padding and radius so that on hover there is a nice background */
.container-header .mod-menu a {
 -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
  padding: 0;
  color: #333;
}

 
        .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: 1px solid #A6A6A6; /* border color of your primary buttons */
            color: var(--dark-color); /* 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: 1px solid #A6A6A6; /* 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: #A6A6A6; /* border color of your secondary buttons */
            color: var(--dark-color); /* text color of your secondary buttons */
        }

        .card {
            border: 1px solid #A6A6A6; /* 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: #FEDD59; /* background color of your card headers */
            border-bottom: 1px solid var(--primary-background); /* border color of your card headers */
            color: var(--primary-color); /* 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-color); /* text color of your card bodies */
        }

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

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

        ::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: #FFFFFF; /* background color of your dropdown menu */
			border: 1px solid var(--secondary-background); /* border color of your dropdown menu */
	        color: var(--dark-color); /* text color of your dropdown menu */
		}

        .metismenu.mod-menu .metismenu-item > ul a {
	        color: color: var(--dark-color); /* text color of your dropdown menu links */
        }
/* Die Raute in Meistgelesen u a Nav */
#nav .current.active::before, #mobilenav .current.active::before, .mostread > li::before, .latestnews > li::before {
  position: outside;
  display: inline-block;
  content: "";
  width: 10px;
  height: 10px;
  left: 8px;
  margin-top: 11px;
  transform: rotate(45deg);
  background-color: gold;
}
.mostread .mod-list {
  list-style: outside;
}

        .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: 10px 15px; /* 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(--dark-color); /* text color of your info buttons */
        }

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

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

        label {
	        font-weight: bold; /* font weight of your labels */
        }
/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_latoonts/lato-v23-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-italic.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-900 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-900.woff') format('woff'), /* Modern Browsers */
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/media/templates/site/cassiopeia_dhs_cassio/fonts_lato/lato-v23-latin-900.svg#Lato') format('svg'); /* Legacy iOS */
}
/* Überschriften */
h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
}
*Override TOP news*
div.rectangle_12 > h6 {
	margin-top:25px; 
	color:#0066b2;
}
div.rectangle_12 > h3 > a.mod-articles-category-title {
	color:#000; 
	font-weight:600;
}
img.rectangle_12 {
	width: 100%;
	height: 450px;
	object-fit: cover;
}
.rectangle_12 .mod-articles-category-introtext {
	height: 70px;
	overflow: hidden; 
	width: 80%;
	line-height: 1.5 !important;
	word-break: break-word;
}
.col-md-12.actualites-title-0, div.col-md-12.actualites-title-3 > hr {
	display: none;
}
h4.actualites-title > a {
	color: #92373b;	
	line-height:28px;
}

span.mod-articles-category-category.date {
	color: #050505;
}
.col-md-8.rectangle_12 hr {
	display:none;
}
.actualities-side {
	padding-left:30px;
}