/*
.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;
}

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

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

/* Pfeile auf Desktop ausblenden */
@media (min-width: 1000px) {
    .container-header .metismenu.mod-menu .mm-toggler,
    .container-header .metismenu.mod-menu button.mm-toggler {
        display: none !important;
    }
}

/*-----------------------------------------------------------------*/
/* 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;
}
@media (min-width: 1000px) {

    /* Bezugspunkt für alle Untermenüs */
    .container-header .metismenu.mod-menu li.deeper {
        position: relative;
    }

    /* Alle Untermenüs zunächst ausblenden */
    .container-header .metismenu.mod-menu li.deeper > ul {
        display: none;
        position: absolute;
        z-index: 1000;
        background-color: #E8E3E3;
        min-width: 220px;
    }

    /* Untermenü 1. Ordnung:
       direkt unter dem Hauptmenü */
    .container-header .metismenu.mod-menu > li.deeper > ul {
        top: 100%;
        left: 0;
    }

    /* Untermenü 2. Ordnung:
       rechts neben dem Eintrag des 1. Untermenüs */
    .container-header .metismenu.mod-menu > li.deeper > ul > li.deeper > ul {
        top: 0;
        left: 100%;
    }

    /* Untermenüs bei Mouse-over öffnen */
    .container-header .metismenu.mod-menu li.deeper:hover > ul {
        display: block !important;
    }
}


.breadcrumb {
    background-color: rgba(24, 26, 27, 0.03);color:green;
}
@media (min-width: 1000px) {

    /* Bearbeiten-Symbol bei eingeloggten Benutzern */
    .container-header .mod-menu .jmenuedit {
        position: absolute;
        top: -18px;
        right: 5px;
        z-index: 1100;
    }

} 
/*---------------------*/

/* Darmstadt: Header nach dem Böblinger Prinzip */
@media (min-width: 992px) {

    .container-header {
        display: grid !important;
        width: 988px !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "banner"
            "nav";
        grid-template-rows: 190px auto !important;
        align-content: start !important;
        background-color: white !important;
        background-image: none !important;
    }

    /* Headerbild als CSS-Hintergrund */
    .container-header::before {
        content: "";
        grid-area: banner;
        display: block;
        width: 100%;
        height: 190px;
        background-image: url("/darmstadt/images/headers/Header-Da-5.jpg");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 1300px 190px;
        pointer-events: none;
    }

    /* Bisheriges Banner-Modul und SVG-Logo ausblenden */
    .container-header > .container-below-top,
    .container-header > .grid-child:not(.container-nav):not(.container-below-top) {
        display: none !important;
    }

    /* Menü und Suche unter dem Headerbild */
    .container-header > .container-nav {
        grid-area: nav;
        position: relative;
        top: 0 !important;
        margin: 0 !important;
        padding-top: 0 !important;
        z-index: 10;
    }

    .container-header .mod-menu {
        position: relative;
       top: -1.3em !important;
    }
}
@media (min-width: 992px) {
    .site-grid {
        width: 1200px !important;
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
@media (min-width: 992px) {
    header.container-header {
        width: 1200px !important;
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}