/* Schriftfarben anpassen */
:root {
--cassiopeia-color-primary: #618d00;
--cassiopeia-color-link:  #508320;
--cassiopeia-color-hover: #618d90;
--body-color: 383838;
--body-bg: #fffeed;
}


/* Änderung der Hintergrundfarbe für die gesamte Website
body {
background-color: #f8ffeb!important;
}  */

/* Farbe Hintergrund des horizontalen Menüs */
.header {
	background: rgba(29,83,0,0.8);
   /* background: rgb(2,0,36);
	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 100%); */
}

/* Module werden transparent  */
.card {
  background: transparent;
  border:none;
}

/* Das Dropdown-Menu im Menu färbst du mit der Klasse 
   .metismenu.mod-menu .mm-collapse ein */

.metismenu.mod-menu .mm-collapse {
  background: #f1f5e5;
}

/* Die Links im Dropdown Menu musst du dann auch einzeln ansteuern */
.metismenu.mod-menu .mm-collapse .metismenu-item a {
    color: #000;
}

/* Überschriften, die normale Schrift wird über --body-color: #383838; gesteuert  */
h1 {
  text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
  color: rgba(50,83,20,0.8);
}

h2 {
  text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
  color: rgba(50,83,20,0.8);
}

h3 {
  text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
  color: rgba(50,83,20,0.8);
}

h4 {
  text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
  color: rgba(50,83,20,0.8);
}

 
 
/* Footer ändern */
.footer {
	margin-left: auto;
    margin-right: auto;
	background: #fffeed!important;
    /* background: linear-gradient(0deg, #808080, #f8ffeb); */
}




.own {
  --cassiopeia-color-primary: #f00;
  --cassiopeia-color-hover: #0f0;
  --cassiopeia-color-link: #00f;
}

.bw {
  --cassiopeia-color-primary: #000;
  --cassiopeia-color-hover: #999;
  --cassiopeia-color-link: #666;
}
.bw .container-banner .banner-overlay {
	height: 40vh;
}


/*  Change the style for article titles
h2 a {
    color: green;
}
h2 a:hover {
    color: red;
}
*/


/*
Dann sitzt das Menü in der Mitte oder rechts.

.container-header .container-nav {
    background-color: #fff;
    justify-content: center; /*right;*/
}*/

/* modify the position of the image, float-start, float-end, float-center go to Content -> Options -> Editing Layout and enter the class you want in the field "Full Text Image Class" or "Image Class without a point.

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

/* Rundes Bild 
.circle.item-image {
    border-radius: 50%;
}
*/


/*
.header {
   background: transparent;
}
*/

/* Schrift von Menüoption oder Link wird grün #2a6409 
a {
  color: red;
}

a:focus, a:hover {
  color: red;
}
*/


/*  */

/* Grid-Übung */

.grid-container {
  display: grid;
  grid-template-rows: 100px [Line1] 100px [Line2] 100px [Line3] 100px [Line4];
  grid-template-columns: 100px 100px 100px 100px;
  grid-gap: 5px;
}

.grid-item1 {
  background: blue;
  text-align: center;
  border: black 5px solid;
  grid-column: 1 / span 4;
  grid-row: 1 / Line2; 
}

.grid-item3 {
  background: #ffffff;
  text-align: center;
  border: blue 1px solid;
  grid-column: 1 / span 2;
  grid-row: 2 / Line3;
}

.grid-item4 {
  background: lightgrey;
  text-align: center;
  border: black 2px solid;
}

.grid-item5 {
  background: yellow;
  text-align: center;
  border: black 2px solid;
}