/* Import font from Google - Go to fonts.google.com, select a font and look for the import command */

@import url('https://fonts.googleapis.com/css2?family=Georama:wght@100&display=swap');

/* Change some root colors and settings of the document */

:root {

    --cassiopeia-color-primary: #00ff00;
    --cassiopeia-color-link: #0000ff;
    --cassiopeia-color-hover: #ff0000;

    --cassiopeia-font-family-body: "Arial", sans-serif;
    --cassiopeia-font-family-headings: "Arial", sans-serif;
    --cassiopeia-font-weight-headings: 700;
    --cassiopeia-font-weight-normal: 400;
    
    --blue: #0d6efd;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #198754;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --primary: #0d6efd;
    --secondary: #6c757d;
    --success: #198754;
    --info: #0dcaf0;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #212529;
    --primary-rgb: 13, 110, 253;
    --secondary-rgb: 108, 117, 125;
    --success-rgb: 25, 135, 84;
    --info-rgb: 13, 202, 240;
    --warning-rgb: 255, 193, 7;
    --danger-rgb: 220, 53, 69;
    --light-rgb: 248, 249, 250;
    --dark-rgb: 33, 37, 41;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --body-color-rgb: 33, 37, 41;
    --body-bg-rgb: 255, 255, 255;
    --font-sans-serif: Arial, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --body-font-family: var(--cassiopeia-font-family-body);
    --body-font-size: 2rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-color: #383838;
    --body-bg: #FAFAFA; /* Anpassung AH 2025/10/06 von efefef auf FAFAFA geändert (heller)*/ 
     
}
:root {
    --cassiopeia-color-primary: #912b3b;
    --cassiopeia-color-link: #30638d;
    --link-color: black;
    --link-color-rgb: 48, 99, 141;
    --cassiopeia-color-hover: #954b56;
    --link-hover-color: #954b56;
    --link-hover-color-rgb: 149, 75, 86;
}
.container-header .navbar-brand {
    color: #fff;
    margin-inline-end: auto;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    font-size: 2rem;
    display: inline-block;
    position: relative;
    margin-left: 27px;
    top: 10px;
}
/* Use the importeed font (See first lines of the document) on the page: On Google you can also find the CSS instruction for using the font. If you put this in the body element then the font will be used on the whole website. */

/*Anpassungen AH für body{} 2025/10/01: 
Keine Vorgabe für die Breite
Fester Rand links und rechts 50px
*/
body {
    
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    margin-left: 50px;
    margin-right: 50px;
    padding: 0;
    text-align: left;
    font-size: 0.8em;
    box-shadow: 0px 20px 10px #555555;
    line-height: 1.5em;
 
  
}
body h3 {
    margin-bottom: 0.75em;
    font-size: 1.5em;
    line-height: 1.2;
    padding: 0px 0;
    color: #4f5050;
}

/* The page header of Cassiopeia has the class "header" so you control it with .header */
/*on peut aussi appeler HEADER comme ca: .container-header*/
.header {
    
    font-size: 14px;
    background: #FFFFFF; /* Old browsers */
    background: -moz-linear-gradient(left, #FFFFFF -2%, #F29400 60%); /* Firefox 3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(-2%,#FFFFFF), color-stop(60%,#F29400)); /* Chrome, Safari 4+ */
    background: -webkit-linear-gradient(left, #FFFFFF -2%, #F29400 60%); /* Chrome 10+, Safari 5.1+ */
    background: -o-linear-gradient(left, #FFFFFF -2%, #F29400 60%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #FFFFFF -2%, #F29400 60%); /* IE10+ */
    background: linear-gradient(to right, #FFFFFF -2%, #F29400 60%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F29400',GradientType=1 ); /* IE6-9 */
    color: #444;
    
  /*background: #FFFFFF; /* Old browsers */
}
/*entete des sidebar recht*/
.card-header {
    border-bottom: solid 1px #ddd;
    background-color: transparent;
}
body > div > div.grid-child.container-sidebar-right > div:nth-child(2){
    border-bottom: solid 1px #ddd;
    background-color: transparent;
  
}
.breadcrumb-item+.breadcrumb-item:before {
    content: var(--breadcrumb-divider,">");
}
/* le contenu de la partie qui contient le inhalt de la page/la partie du milieu*/
.item-page{
   /*max-width: 660px;*/
   padding-top: 20px; 
   color: #444; 
   vertical-align: baseline;
   background: transparent;
   text-align: left;
   font-size: 1em;
}
/*Labarre grise du menu horizontal*/
.container-header .mod-menu {
    /*height: 40px; */
    width: 1100px; 
    font-weight: bold;
    text-decoration: none;
    padding: 0px 10px;
    margin: 0;
    bottom: 0;
    right: 0;
    top: 0px;
    padding: 0px 15px; 
    position: relative;
    border-right: 1px solid #ddd;
    box-shadow: 1px 0px 0px #f5f5f5;
    background-image: linear-gradient(#eeeeee, #ADAEAE); 
    align-items: center; /* Centre les éléments verticalement */
}

#navbar1 > ul > li.metismenu-item.item-101.level-1.default.current.active.deeper.parent > a{

    border-radius: 4px 0 0 0;
    margin-left: -1px;
}
/* Smaller banner */
.container-banner .banner-overlay {
    height: 4vh;
}
.metismenu.mod-menu .metismenu-item.active>a {
    text-decoration: none;
}
/* Anpassung AH 2025/10/07
Hintergrundvorgaben deaktiviert und durch #d2d2d2 ergänzt
*/
/* Color the dropdown menu in the menu with the class .metismenu.mod-menu .mm-collapse */
/*le background couleur quand le menu est deroule*/
.metismenu.mod-menu .mm-collapse {
  
   /* background-color: #d2d2d2; */ 
    background: #868889;
    background-color: #ddd;
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eeeeee", endColorstr="#ADAEAE");
    background-image: -khtml-gradient(linear, left top, left bottom, from(#ADAEAE), to(#ADAEAE));
    background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
    background-image: -ms-linear-gradient(top, #eeeeee, #dddddd);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #ADAEAE));
    background-image: -webkit-linear-gradient(top, #eeeeee, #ADAEAE);
    background-image: -o-linear-gradient(top, #eeeeee, #ADAEAE);
    background-image: linear-gradient(#eeeeee, #ADAEAE);
    
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.49);
    -webkit-font-smoothing: antialiased;
  
    color: #095197;
}
/*les ecritutres des # menu sans le bouton collapse*/
.container-header .mod-menu>li>a, .container-header .mod-menu>li>span {
   
    text-decoration: none;
    position: relative;
    #4f5050;
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    padding: 0px 10px;
    margin: 0;
    display: inline-block;
    margin: 0 0 0;
    padding: 8px 13px;
    position: relative;
    color: #6d757e;
   font-family: 'Arial', sans-serif;
    
}
/*le bouton deroulable devant chaque menu*/

/* Anpassung AH 2025/10/06
höhe von 100% auf auto geändert
*/
.metismenu.mod-menu .mm-toggler {
      
    color: #6d757e;
    user-select: none;
    background: 0 0;
    border: none;
    align-items: center;
    height: auto;
    padding: 0;
    display: flex;
    position: relative;
    
}
.nachricht{
    background: blue;
}
/* Les ecritures que tu obtiens en deroulant le menu(le submenu) */
/*Anpassungen AH 2025/10/07
Hintergrund Farbe hinzugefügt
Breite auf 284px festgelegt
*/


.metismenu.mod-menu .mm-collapse .metismenu-item a {
    color: #6d757e;
    font-family: 'Arial', sans-serif;
    width: 284px;
   /* background-color: #d2d2d2;*/
  
}

/*ecriture + bouton deroulant*/
/* Anpassung AH 2025/10/06 
Diplay: von flex auf inline-flex
*/
.metismenu.mod-menu .metismenu-item {
  
    font-family: 'Arial', sans-serif;
    flex-wrap: wrap;
    align-items: center;
    padding: .5em 1em;
    font-size: 1rem;
    line-height: 1.5;
    display: inline-flex;
    border-right: 1px solid #ddd;
    box-shadow: 1px 0px 0px #f5f5f5;
}

/*Anpassung AH 2025/10/06
Farbe deaktiviert beim Überfahren
*/
.metismenu.mod-menu .metismenu-item:hover{
 /* background: #f8ae23;*/
}

/*Anpassung AH 2025/10/07
ergänzung Code 
*/
.metismenu.mod-menu .mm-collapse>li.parent>ul {
    box-shadow: none;
    /* background-color:#00000008; */
    flex-basis: calc(100% + 1em);
    margin-top: .5em;
    margin-bottom: -.5em;
    position: relative;
    top: 0;
}



/* Anpassung AH 2025/10/06
coding ergänzt für level 2
Anpassung AH 2025/10/07
Hintergrund hinzugefügt mit d2d2d2
*/
.metismenu.mod-menu .metismenu-item:not(.level-2)>ul {
      margin-inline-end: 0em;
      max-width: 300px;
      background: #d2d2d2;
}

/* Anpassung AH 2025/10/07
coding ergänzt für level 3
Hintergrund hinzugefügt mit d2d2d2
*/
.metismenu.mod-menu .metismenu-item:not(.level-3)>ul {
      margin-inline-end: 0em;
      max-width: 300px;
      background: #d2d2d2;
}
body.wrapper-fluid header>.grid-child, body.wrapper-fluid footer>.grid-child {
     padding-left: 0em; 
     padding-right: 0em; 
}
.container-header .grid-child {
      padding: .5em;
}

/* Modules have the class card, so you control them with .card - if you want to control only a specific module, you can give the module its own CSS class in the settings and then control it with that */

/*.card {
  card-spacer-y: 0rem;
    box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
}
*/
/*Anpassungen navbar{} AH 2025/10/01: 
Keine Rand, somit ausnutzen der vollen breite vom body
*/
.navbar {
    padding: 0;
    float: left;
    margin: 0px 0% 0px 0;
    width: 100vw;
    position: relative;
}
.navbar-collapse {
    flex-grow: 1;
    /* flex-basis: 100%; */
    align-items: center;
    width: 60px;
}
/*Anpassungen AH 2025/10/02:
pending von .25em auf 0 gesetzt
*/
.mod-list {
   /* padding-inline-start: 0;
    list-style: none;
    list-style: disc;*/
    margin: 0 0 1.5em 12px;
    padding: 0 0 .25em 12px;
    display: grid;
  
}

.mod-list .sidebar-left{
   background: #e5e5e5;
    margin-bottom: 1px;
    /*box-shadow: 0 1px 0 #fff;*/
    border-bottom: solid 1px #ddd;
    text-shadow: 0 1px 0 #fff;
  display: block;
    margin: 0;
    text-decoration: none;
    padding: 5px 0px 0px 20px;
    border-bottom: solid 1px #ddd;
}
body > div > div.grid-child.container-sidebar-left > div
.metismenu.mod-menu li.active a,{

    font-weight: bold;
    text-shadow: none;
    background: #f8ae23;

}
body > div > div.grid-child.container-sidebar-right > div:nth-child(1) > div > ul{
  list-style: disc;
}
body > div > div.grid-child.container-sidebar-right > div:nth-child(1) > div > ul > li > a{
 color: #555;
 text-decoration: none;
 cursor: pointer; 
 margin-bottom: 1.5em;
 font-size: 1.0em;
 line-height: 1.5em;
}
body > div > div.grid-child.container-sidebar-right > div:nth-child(1) > div > ul > li > a:hover {
    background-color: orange; /* Arrière-plan orange au survol */
    color: white; /* Changer la couleur du texte pour plus de contraste */
}

/*ul*/
/*Anpassungen AH für metismenu.mod-menu{} 2025/10/01: 
Keine Vorgabe für den Rand Links und Rechts
Anpassung AH 2025/10/06
Breite von 200px auf auto geändert
Anpassung AH 2025/10/07
Hintergrundfarbe hinzugefügt
*/
.metismenu.mod-menu {
   
  list-style-type: none;
  padding: 0;
  width: auto;
  /*background-color: #ced4da;*/
  background-color: #e5e5e5;
  position: relative;
  bottom: 100px;
   /* left: 15px; */
   /* right: 100px; */
  top: 17px; 
  background-color: #d2d2d2;
    
}
/*Anpassung AH 2025/10/06
nicht unterstreichen beim Überfahren
*/
.mod-list li a:hover{
    font-weight: bold;
    text-shadow: none;
    background: #f8ae23;
    display: block; 
    text-decoration: none
} 
/*Anpassung AH 2025/10/06
activ a und current a getrennt
*/
.mod-list li.active a {
    font-weight: bold;
    text-shadow: none;
    background: #A2A5A6;
    display: block;       /* Important : prend toute la largeur */
}
/*Anpassung AH 2025/10/01 
Hintergrund für aktiven Punkt grau (#A2A5A6)
Anpassung AH 2025/10/06
Text Unterstrichen 
*/
.mod-list li.current a {
    font-weight: bold;
    text-shadow: none;
    background: #A2A5A6;
    display: block;       /* Important : prend toute la largeur */
    text-decoration: underline;
}

/*Anpassungen AH 2025/10/02:
Breite hinzugefügt und mit auto vorgegeben
Höhe hinzugefügt und mit 27px vorgegeben
Anpassung AH 2025/10/06
padding von 5px 0px 0px 20px; auf 5px 0px 0px 0px; geändert
Anpassung AH 2025/10/07
Hintergrung von #e5e5e5 auf #d2d2d2 geändert
*/
body > div > div.grid-child.container-sidebar-left> div > div > ul > li > a {
/*.mod-list .container-sidebar-left li a{*/
    background: ##d2d2d2;
    margin-bottom: 1px;
    box-shadow: 0 1px 0 #fff;
    border-bottom: solid 1px #ddd;
    text-shadow: 0 1px 0 #fff;
    display: block;
    margin: 0;
    text-decoration: none;
    padding: 5px 0px 0px 0px;
    border-bottom: solid 1px #ddd; 
    border-top: solid 1px #ddd; 
    width: auto; 
    height: 27px;
}
body > div > div.grid-child.container-sidebar-left> div > div > ul > li: hover {
  background: #f8ae23;
}

/*Anpassungen AH 2025/10/02:
Höhe hinzugefügt und mit auto vorbelegt
Anpassung AH 2025/10/07
hintergrung auf 
*/
/*body > div > div.grid-child.container-sidebar-left > div > div > ul > li > ul{*/
  .mod-list li .mod-menu__sub {
    padding-left: 3em;
    background: #e5e5e5;
    margin-bottom: 1px;
   /* box-shadow: 0 1px 0 #fff;
    border-bottom: solid 1px #ddd;*/
    text-shadow: 0 1px 0 #fff;
    display: block;
    margin: 0;
    text-decoration: none;
    height: auto;
   /* border-bottom: solid 1px #ddd; */

}
/*Anpassungen AH 2025/10/06:
Färbung gesamte Untermenü Zeile, somit auch die Funktionalität für Current Menüpunkte ersichtlich
*/
 .mod-list li .mod-menu__sub:hover {
  /* background: #f8ae23;*/
   
 } 

 .mod-list li .mod-menu__sub li:hover {
  /* background: #f8ae23;*/
   
 } 
/*Anpassungen AH 2025/10/02:
Hover für Top Level
*/
body > div > div.grid-child.container-sidebar-left> div > div > ul > li > a:hover {
   /*background: #f8ae23;*/
   
 }
.mod-list.menu li.active a{
    font-weight: bold;
    text-shadow: none;
    background: #blue;
}
.mod-list.menu a:visited {
    color: #444;
}
/*Anpassungen AH 2025/10/02:
Breite auf auto festgelegt
*/
.container-sidebar-left .sidebar-left:last-child {
    margin-top: 1em;
    border: transparent;
    width: auto;
}

.container-sidebar-right .sidebar-right:last-child {
    margin-bottom: 1em;
    border: transparent;
}
#navbar123 > ul > li.metismenu-item.item-101.level-1.deeper.parent{
  
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
/*Anpassungen AH 2025/10/06:
hinzugefügt width: 284px;
Anpassung AH 2025/10/07
    max-width: 275px;
    min-width: 250px;
	background-color:#d2d2d2;
*/
.sidebar-left .metismenu .metismenu-item>a {
    white-space: inherit;
    color: #495057;
    max-width: 275px;
    min-width: 250px;
	background-color:#d2d2d2;
}
/*Anpassungen AH 2025/10/02:
Modifizierung .mod-list li hinzugefügt
*/
.mod-list li {
    padding: 0em 0;
}

/*.metismenu.mod-menu :hover,a:active,a:focus {
  
	background: #f8ae23;
	
}*/
/*.metismenu.mod-menu .mm-collapse .metismenu-item a:hover {
    background: red;
}*/



/* Modules are on different module positions in the Cassiopeia template then the modules get in addition to card also the position as class name, for example main-top - so if you want to change all modules to main top you take .main-top.card */

.main-top.card {
    background: #e1e9f5;
}


/* Headings are html elements, the main heading is an h1, then comes h2, h3, h4 and so on. You control an html element by simply writing the name in front of it */

h1 {

    font-size: 1.5em;
    color: #4f5050;
    position: relative;
    /*bottom: 50px;*/

}
/*body h1,body h2,body h3,body h4,body h5,body h6 {

	margin: 0;
	font-family: inherit;
	font-weight: normal;
	color: #858585;
	text-rendering: optimizelegibility;
} */
h2{
  position: relative;
  /*bottom: 50px;*/
  
}
h3 {
    /*display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate; */
    margin-bottom: 0.75em;
    font-size: 1.5em;
    line-height: 1.2;
    padding: 0px 0;
    color: #4f5050;
}
h4{
  margin-bottom: 0.75em;
    font-size: 1.5em;
    line-height: 1.2;
    padding: 0px 0;
    color: #4f5050;
}
/* In Joomla most buttons have the class btn-primary - in the element inspector you can check if the button you want to color really has this color.
*/

.btn-primary {
    background: rgba(119, 9, 121, 1);
}

/* If you want to color something, only if you move the mouse over it then write :hover after it
*/

.btn-primary:hover {
    background: rgba(0, 212, 255, 1);
}

/* In Joomla all article images have the class item-image, if you want to control only a specific image, then you have to give the image inside the article its own CSS class.
*/

.item-image {
    border: 2px solid #ff0000;
}


/*If you run into icons on the website, you can color them individually*/

.icon-user {
    color: #403678;

}
/*Anpassungen AH 2025/10/01:
Abstand oben auf 5 Px geändert
*/
.breadcrumb {
    background-color: transparent;
    margin-top: 5px;
}
/*menu orange droit*/
.container-sidebar-right .sidebar-right:first-child {
    margin-top:1em;
    border: none;
}
/* or you color all icons with this special statement*/

.fa, .fas, [class*=" icon-"], [class^="icon-"] {
    color: #403678;
}

/* The page footer of Cassiopeia has the class "footer" so you control it with .footer */

.footer {
    /*background: #868889;
     height: 50px;background: #868889;
    max-width: 1025px;
    margin: 0 auto;
    box-shadow: 0px 0px 10px #555555; */
    color: #fff;
    background: #868889;
    font-size: 0.8em;
    display: block;
    height: 30px;
}   

.footer a:not(.btn), .footer .btn-link {
    color: currentColor;
    margin-left: 10em;
    margin-right: 10em;
    position: relative;
    bottom: 35px;
    font-size: 11px;
  }
.mod-menu {
    flex-direction: row;
}  

small, .small
Specificity: (0,0,1)
 {
     font-size: 0rem; 
}

.mod-list li a {
    text-decoration: none;
    font-size: 13px;
}

/*nav.navbar {
   width: 100%;
   background: #ced4da;;
}*/

/*Anpassungen AH 2025/10/02:
Seitenaufteilung
*/
body.wrapper-fluid .site-grid {
    grid-gap: 0 2em;
    grid-template-columns: [full-start]minmax(0,0fr)[main-start]400px auto 310px[main-end]minmax(0,0fr)[full-end]minmax(0,0fr);
}