@font-face { font-family: 'OpenSans';
             src: url('../fonts/OpenSans-Regular.ttf') format('truetype'); }
@font-face { font-family: 'OpenSans';
             src: url('../fonts/OpenSans-Italic.ttf') format('truetype');
             font-style: italic; }
@font-face { font-family: 'OpenSans';
             src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
             font-weight: bold; }
@font-face { font-family: 'OpenSans';
             src: url('../fonts/OpenSans-BoldItalic.ttf') format('truetype');
             font-weight: bold;
             font-style: italic; }
@font-face { font-family: 'OpenSans';
             src: url('../fonts/OpenSans-ExtraBold.ttf') format('truetype');
             font-weight: 900; }
@font-face { font-family: 'OpenSans';
             src: url('../fonts/OpenSans-ExtraBoldItalic.ttf') format('truetype');
             font-weight: 900;
             font-style: italic; }
@font-face { font-family: 'OpenSans';
             src: url('../fonts/OpenSans-Semibold.ttf') format('truetype');
             font-weight: 500; }
@font-face { font-family: 'OpenSans';
             src: url('../fonts/OpenSans-SemiboldItalic.ttf') format('truetype');
             font-weight: 500;
             font-style: italic; }
@font-face { font-family: 'OpenSans';
             src: url('../fonts/OpenSans-Light.ttf') format('truetype');
             font-weight: 200; }
@font-face { font-family: 'OpenSans';
             src: url('../fonts/OpenSans-LightItalic.ttf') format('truetype');
             font-weight: 200;
             font-style: italic; }

body {
    font-family: "OpenSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    background-position: top center;
    background-repeat: repeat-y;
}
p, li {
    font-family: "OpenSans";
}
p {
    margin-bottom: 0.75rem;
}

h1, .h1 {
    font-size: 1.3rem;
}
h2, .h2 {
    font-size: 1.1rem;
}
h3, .h3 {
    font-size: 1.0rem;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 500;
}

em {
	font-weight: 400;
	color: rgba(50, 50, 124, 1);
}
	
nav {
    font-size: 1.1rem;
}
.mb-5, .my-5 {
    margin-bottom: 6rem !important;
}

.navbar-light .navbar-nav .nav-link {
    color: rgba(0, 0, 0, 0.8);
}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
    color: rgba(0, 0, 0, 1);
}
.navbar-light .navbar-nav .nav-link:active {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.8);
}
#footer p {
    color: #32327c;
    font-size: 0.9rem;
    font-weight: 500;
}
#footer a.nav-link {
    color: rgba(0, 0, 0, 0.8);
    font-style: italic;
    font-size: 0.9rem;
}
#footer a.nav-link:hover {
    color: rgba(0, 0, 0, 1);
}
#footer a.nav-link:active {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.8);
}

/*------------------------------------*\
    NAV
\*------------------------------------*/
@media screen and (min-width: 992px) {
    #navbar4 {
        background-image: url(../media/hg-nav-strich.png);
        background-repeat: repeat-x;
        background-position: 0px 1px;
    }
    .cssnav {
        list-style: none;
        float: right; /* Clear floats */
        /* Bring the nav above everything else--uncomment if needed. */
        z-index: 5;
    }
    .cssnav li {
        position: relative;
    }
    .cssnav a {
        color: #666;
        font-weight: 400;
        display: block;
    }
    .cssnav a:hover {
        text-decoration: none;
        color: #000;
    }

    /*--- DROPDOWN ---*/
    .cssnav ul {
        list-style: none;
        position: absolute;
        left: -9999px; /* Hide off-screen when not needed (this is more accessible than display: none;) */
    }
    .cssnav ul li {
        padding-top: 1px; /* Introducing a padding between the li and the a give the illusion spaced items */
        float: none;
    }
    .cssnav ul a {
        white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    }
    .cssnav li:hover ul { /* Display the dropdown on hover */
        left: 0; /* Bring back on-screen when needed */
    }
    .cssnav li:hover a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
        background-color: transparent;
        text-decoration: none;
    }
    .cssnav li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
        text-decoration: none;
    }
    .cssnav li ul {
        background-color: transparent;
        border: 0px solid #F0F0F0;
    }
    .cssnav li ul li {
        margin-left: -35px;
    }
    .cssnav li ul li a {
        color: #666;
    }
    li.current ul li a, li ul li a {
        font-weight: 400;
    }
    li ul li a:hover {
        font-weight: 400;
    }
}

@media screen and (max-width: 991px) {
  /*Formatierung Mobiles Menue*/
    .cssnav li, .cssnav > ul, .cssnav > ul > li  {
      float: none;
      list-style: none;
      font-size: 20px;
      line-height: 48px;
      border-bottom: #FFFFFF 1px dotted;
      z-index: 5;
    }
    .cssnav a {
        display: block;
        color: #fff;
        font-weight: 500;
    }
    .cssnav li ul li {
      border-top: #FFFFFF 1px dotted;
    }
    .cssnav li ul li:last-child {
        border-bottom: none;
    }

    .cssnav > ul > li > ul, nav > ul > li:hover > ul {
      position: relative;
    }
    p, li {
        font-weight: 400;
    }
    .cssnav li {
        background-color: rgba(102, 102, 102, 1);
    }

}

.cssnav li.current a {
    font-weight: 700;
}
.cssnav li.current ul li a {
    font-weight: 400;
}
.cssnav li.current ul li.current a {
    font-weight: 700;
}

.navbar-dark .navbar-toggler {
    color: rgba(255, 255, 255, 1.0);
}
button.navbar-toggler {
            z-index: 5;
}