:root {
  --cassiopeia-color-primary: #3A4927;
  --cassiopeia-color-link: #943215;
  --cassiopeia-color-hover: #D23B0E; /*#943215;*/
}

/* Absatz und h1 ohne bottom margin */
.p, p, .h1, h1 {
	margin-bottom: 0;
}

.h1, h1 {
	letter-spacing: 5px;
}

/* neue Farbpalette */

/* Standardfarbe primary buttons */
.btn-primary {
	color: #FFFFCB;
}

/* Hintergrundfarbe meiner Menus: mittelgrün*/
.myMenu {
  background-color: #5C753E;
}

body {
  /* Hintergrund unterer Bereich */
  background-color: white;
  /*background-color: #3A4927; */
  background-image: none;
  overflow: scroll;
}

.container-header .grid-child {
  padding: 0;
}

/* Navigationsmenu ohne top margin */
.container-header nav {
	margin-top: 0;
}

.grid-child {
  /* Hintergrund des Containers, der das Main Menu beihaltet */
  background-color: #5C753E; 
  background-image: none;
}

.container-header {
  /* Hintergrund Kopfbereich */
  /*background-color: #FFFFCB;*/
  background-color: #3A4927;
  background-image: none;
  padding: 0px;
}

.site-grid {
  /* Hintergund mittlere Bereich */
  /*background-color: #FFFFCB;*/
  background-color: #3A4927;
  background-image: none;
  grid-gap: 0 0 !important ;
}

.container-sidebar-right {
  background-color: #FFFFCB;
  background-image: none;
  padding-bottom: 0px;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  /*border-right: 60px solid #3A4927; */
}
@media (max-width: 992px) { /* wenn die Breite kleiner als 992 Pixel wird, dann wird die Ähre bzw. die Position komplett ausgeblendet */
	.container-sidebar-right {
		display: none;
	}
}

@media (min-width: 576px) { /* wenn die Breite größer als 576 Pixel wird, dann wird die obere Grenze dicker */
	.container-sidebar-right { 
        border-right: 60px solid #3A4927;
	}
}

.sidebar-right {
  background-color: #FFFFCB;
  background-image: none;
  padding-bottom: 0px;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  border: 1px solid #FFFFCB;
}

/* Hier liegt der Brotkorb */	
.container-below-top {
  background-color: #D5EDB3;
  background-image: none;
  border-top: 10px solid #3A4927;
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: space-between;
  /*border-left: 60px solid #3A4927; 
  border-right: 60px solid #3A4927; */  
} 

@media (min-width: 576px) { /* wenn die Breite größer als 576 Pixel wird, dann wird die obere Grenze dicker */
	.container-below-top {
		border-top: 30px solid #3A4927;
		border-left: 60px solid #3A4927; 
        border-right: 60px solid #3A4927;
	}
}

/* Brotkorb-Banner */
.mybanner {
  /* original Bildgröße */
  min-width: 395px; 
  /*min-height: 118px;*/
  /* max. angezeigte Bildgröße */
  width: 520px;
  background-color: #D5EDB3;
  border-radius: 0px 0px 0px 0px;
}
@media (max-width: 992px) { /* wenn die Breite kleiner als 992 Pixel wird, dann wird das mybanner ausgeblendet */
	.mybanner {
		display: none;
	}
}

/* Schriftzug */
.mySchriftzug {
  background-color: #D5EDB3; 
  /*min-width: 600px;  */
  min-width: 395px;
  border: 0px;
  border-radius: 0px 0px 0px 0px;
  align-self: flex-end;
}

@media (max-width: 992px) { /* wenn die Breite kleiner als 992 Pixel wird, dann wird mySchriftzug zentriert */
	.container-below-top {
		justify-content: center;
	}
}

/* Hier ist das Layout des eigentlichen Inhalts definiert */
.container-component {
  background-color: #FFFFCB;
  background-image: none;
  padding-bottom: 15px;
  padding-top: 15px;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  border; 0px;
}

@media (min-width: 576px) { /* wenn die Breite größer als 576 Pixel wird, dann erscheint die linke Grenze */
	.container-component {
		border-left: 60px solid #3A4927; 
	}
}

@media (min-width: 576px) and (max-width: 992px) { /* wenn die Breite kleiner als 992 Pixel wird, dann wird die Ähre bzw. die Position komplett ausgeblendet und die rechte Grenze erscheint */
	.container-component {
		border-right: 60px solid #3A4927;
	}
}

.main-top {
  background-color: #FFFFCB;
  background-image: none;
  padding-bottom: 0px;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  border: 0;
}

.main-bottom {
  background-color: #FFFFCB;
  background-image: none;
  padding-bottom: 0px;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  border: 0;
}

/* Hier sitzen Copyright und Impressum */
.container-bottom-b {
  background-color: #99CC67;
  background-image: none;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  border-bottom: 30px solid #3A4927;
}
@media (min-width: 576px) { /* wenn die Breite größer als 576 Pixel wird, dann wird die untere Grenze dicker */
	.container-bottom-b {
		border-left: 60px solid #3A4927; 
        border-right: 60px solid #3A4927;
		border-bottom: 60px solid #3A4927;
	}
}

.bottom-b {
  background-color: #99CC67;
  background-image: none;
  border-radius: 0px 0px 0px 0px;
  padding-bottom: 0px;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  border: 1px solid #99CC67;
}



/* Horizontale Main Menu in menu
-------------------------------------------------------------------------*/
/* Text should now be hellgrün auf mittelgrün */
.container-header .mod-menu {
  color: #D5EDB3;
  background-color: #5C753E;
  padding-left: 50px;
}
/* We add padding and radius so that on hover there is a nice background */
.container-header .mod-menu a {
  -webkit-border-radius: 6px 6px 6px 6px;
  -moz-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
  padding: 3px 15px;
} 
/* On hover there should be a different background rot auf hellgrün*/
.container-header .mod-menu a:hover {
  background-color: #D5EDB3;
  color: #943215;
} 
/* Menu unerstreichen */
.metismenu.mod-menu .metismenu-item a:hover {
  text-decoration: underline;
  text-decoration: solid;
  text-decoration-color: #943215;
}
/* We need to change the color of the Hamburger Menu hellgrüne Streifen auf mittelgrün, hellgrüner Rand */
.container-header .navbar-toggler {
  color: #D5EDB3;
  background-color: #3A4927;
  border: 1px solid #D5EDB3;
}