/*
.h2, h2 {
    font-size: calc(0.65rem + .9vw);
*/
@media (max-width: 991px) {
    .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   ."
            ". side-r side-r side-r side-r ."
            ". bot-a  bot-a  bot-a  bot-a  ."
            ". bot-b  bot-b  bot-b  bot-b  ."
    }
}


h1 {font-size:1.5rem;color:rgb(100,50,50);}

h2 {font-size:1.3rem;color:rgb(100,50,50);}
}

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

/* Menu */
/* Override the lila background with white */
.container-header {  background-color: white;  background-image: none;}
/* Text should now be blue */
.container-header .mod-menu { color: #0088cc;}


/* We add padding and radius so that on hover there is a nice background */
.container-header .mod-menu a {
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  padding: 3px 15px; 
  color: #0088cc;
}

/*-----------------------------------------------------------------------------*/
.metismenu.mod-menu .mm-toggler {
    color: #0088cc; } /* Pfeilfarbe anpassen */

/* Regel für Bildschirme breiter als 1000px */
@media (min-width: 1000px) {
    .container-header .mod-menu {
        margin-top: -60px;
    }
}

/*------------------------------------------------------------------------*/

/*-----------------------------------------------------------------*/
/* On hover there should be a gray background*/
.container-header .mod-menu a:hover { background-color: #ddd;}

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

.site-grid {
  background-color: #f4f6f7;
}
.header {
  background-color: #f4f6f7;
}
.grid-child {
  padding: 3px 15px;
  background-color: white;
}
.footer {
  background-color: #f4f6f7;
  background-image: none;
}

.header .mod-menu > li {
  position: relative;
}

/*gegen Überlagerung von read more auf kleineren Bildschirmen*/
@media (max-width: 992px) {
  .image-left .blog-item .item-image, .image-right .blog-item .item-image {
    flex: 1 1 40%;
  }
}
/*dotted underline by mouse over text-decoration: underline dotted blue 2px; farbiger Hintergrund*/
.container-header .metismenu.mod-menu .metismenu-item>a:hover {
background-color: #D8D8D8;  
}


/* weiterlesen  
.btn,.btn-secondary {
    background-color:rgb(240, 240, 240);
    border-color: rgb(107, 116, 121);
    color:rgb(030, 030, 030);
  }
*/

/* Box aktuelles   */

.alert-info {
    background-color: #EFF8FB;
    border: 2px solid #0088cc;
}


/*Untermenüs hoverable */
li.metismenu-item.level-1.deeper.parent:hover > ul {display:block; !important;background-color:#E8E3E3;}

.metismenu.mod-menu .metismenu-item {line-height: 0.7;}

.breadcrumb {
    background-color: rgba(24, 26, 27, 0.03);color:green;
}