:root {
  --header-background-color: rgb( 204, 204, 204 );
  --global-background-color: rgb( 255, 255, 255 );
  --global-foreground-color: black;
  --global-menu-hover-color: rgb( 255, 255, 0 );
  --global-menu-active-color: rgb( 255, 255, 0 );
  --global-background-image-opacity: 0.8;
}

body {
  background-image: url(/images/MainBackground.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: 50% 50%;
}


/* HEADER */
.header {
  position: sticky; 
  top: 0;
  z-index: 1000; /* Stellt sicher, dass es über Inhalten liegt */
  width: 100%;
  background-color: var(--header-background-color); 
}

.container-header .site-description {
  color: var(--global-foreground-color);
}

.container-header .container-nav {
  padding-bottom: 0.5em;
}

.container-header .mod-list li.active>a{
  color: var( --global-menu-active-color );
}
.container-header .mod-list li.active>a:after {
  display: none !important;
}
.container-header .mod-list li.active>a:hover {
  text-decoration: none !important;
  color: var( --global-menu-active-color );
}
.container-header .mod-menu>li.active:after {
  display: none !important; 
}

.container-header .mod-list li a:hover {
  text-decoration: none !important;;
  color: var( --global-menu-active-color );
}

@media (width >= 992px) {
  .container-header .mod-menu>li:after {
    display: none !important; 
  }
}

/* FOOTER */
.container-footer {
  background-color: var(--header-background-color); 
/*  opacity: var(--global-background-image-opacity);*/
}

.footer a:not(.btn) {
  color: var(--global-foreground-color);
}
.footer a:not(.btn):hover {
  text-decoration: none !important;
  color: var( --global-menu-hover-color );
}
.footer .grid-child {
  padding: 0.5em;
}

.metismenu.mod-menu .metismenu-item.active>a {
  text-decoration: none !important;
  color: var( --global-menu-active-color );
}

.blog-items.items-leading.FuehrenderBeitrag {
  background-color: rgba(0, 0, 0, 0);
  color: white;
}


/* MainPage Article */
@supports (display:grid) {
  .blog-items .blog-item {
    padding: 1em;
    border-radius: 0.5em;
  }

  .blog-items {
    grid-gap: 4em;
    margin: 0 0 3em;
  }
}

.Beitrag .blog-item {
  background-color: var(--global-background-color); 
  opacity: var(--global-background-image-opacity);
}


/* Article */
.com-content-article {
  background-color: var(--global-background-color); 
  opacity: var(--global-background-image-opacity);
  padding: 1em;
  border-radius: 0.5em;
  margin: 3em 0 3em;

}