/*** User cassiopeia CSS 07.04.2024 ***/
/****************************************/
:root {
  --body-text-align: justify;
}

body {
  background: url('/images/headers/bgbody.jpg') no-repeat fixed left top;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  color: var(--heading-color);
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 700;
  line-height: 1.2;
}

h1, .h1 {
  font-size: calc(1.0rem + 0.8vw);
}
/* @media (width >= 1200px) {
  h1, .h1 {
    font-size: 2.0rem;
  }
} */

h2, .h2 {
  font-size: calc(1.0rem + .6vw);
}
/*
@media (width >= 1200px) {
  h2, .h2 {
    font-size: 2rem;
  }
}
*/
h3, .h3 {
  font-size: calc(1.0rem + .4vw);
}
/*
@media (width >= 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}
*/
h4, .h4 {
  font-size: calc(1.0rem + .2vw);
}
/*
@media (width >= 1200px) {
  h4, .h4 {
    font-size: 1.5rem;
  }
}
*/
h5, .h5 {
  font-size: 1.0rem;
}

h6, .h6 {
  font-size: 1rem;
}


.metismenu.mod-menu .metismenu-item {
  font-size: 1.0rem;
  line-height: 1.0;
}

/*aside .mod-menu a {
  font-size: 0.5rem;
}*/
.site-grid {
   max-width: 960px;
   grid-gap: 0 .6rem;
   border-radius: var(--border-radius);
   margin: auto;
   background-color: var(--body-bg);
}

.card {
  --card-bg: var(--secondary-bg);
  --card-spacer-y: .2rem;
  --card-spacer-x: .2rem;
}

.div.card-body {
   padding: 0;
}

  .card-header {
  background-color: var(--secondary-bg);
}

/* Banner Image */
.mybanner {
  min-width: 100%;
}

.container-component {
  padding: 0em 1em;
}

.footer {
   background-color: transparent;
   background-image: none;
   padding: .5em;
   margin: auto;
   font-size: 0.7rem;
}
.footer .grid-child {
   padding: .5em;
}

/* Bild Rahmen und Abstand */
.float-start {
  border: 1px solid grey;
  padding: 0.2em;
  margin-right: 1em;
}

.float-end {
  border: 1px solid grey;
  padding: 5px;
  margin-left: 1em;
}

.float-none {
  border: 1px solid grey;
  padding: 5px;
  margin: 0 1em;
}

/* Override the lila background with white */
.container-header {
  background-color: transparent;
  background-image: none;
  height: 2rem;
}

/*** Suchfeld ***/
.container-header .container-nav .container-search {
  margin: 3rem;
}
.form-control {
  line-height: 1em;
  padding: .2rem 1rem;
}
.awesomplete {
  display: block;
}


/*** Menu ***/
/* Menübreite im Platzhalter 100% */
.vertical-menu {
  width: 100%;
}

/* Abstände der Listen überschreiben */
.vertical-menu li {
  padding: 0;
}

/* Alle Links im Menü als Balken */
.vertical-menu a {
    padding: 0.2em 1em; /* Abstand zwischen den Untermenüpunkten */
    display: inline-block;
    width: 100%; /* Setzen Sie die Breite auf 100% */
    text-decoration: none;
}

/* Stil für die Hauptmenüpunkte der ersten Ebene */

/* Aktiven Menüeintrag der 1.Ebene umfärben */
.vertical-menu li.current.active > a {
  background-color: rgb(1, 53, 210); 
  color: white;
  text-decoration: none;
}

/* ON HOVER */

/* On hover there should be a gray background in 1.Ebene*/
.vertical-menu>li:hover {
  background-color: var(--gray-400);
}

/* 2te Ebene: */
.vertical-menu>li>ul>li:hover {
   background-color: var(--gray-200);
}

/* On hover there should be no underlining */
.vertical-menu>li>a:hover {
    text-decoration: none;
}

/*** Speziell für niedrige Auflösungen ***/

/* We need to change the color of the Hamburger Menu (mobile) because white on white is not good */
.container-header .navbar-toggler {
  color: #0088cc;
  border: 1px solid #4488cc;
}

/* Mobil soll das Menü oben stehen */
  @media (width < 992px) {
    .site-grid {
      grid-template-areas: ". banner banner banner banner ."
                           ". top-a top-a top-a top-a ."
                           ". top-b top-b top-b top-b ."
                           ". side-l side-l side-l side-l ."        
                           ". comp comp comp comp ."
                           ". bot-a bot-a bot-a bot-a ."
                           ". bot-b bot-b bot-b bot-b .";
    }
  }

/*** End Menue ***/
.breadcrumb-item.active {
  color:var(--breadcrumb-item-active-color);
  padding: 0.2em;
}