body {
  margin:0;
  padding:0;
  font-family: Helvetica,Arial;
  font-weight:300;
  color: #505050;
}
.bgpic { background: url(/img/page/header.jpg) transparent top no-repeat; }
b, strong { font-weight: bold; }

form, fieldset { border:0; margin:0; padding:0; }
img { border:0; }

.visDiv { display:block; }
.invDiv { display:block; visibility:hidden; }
.hidDiv { display:none; }

.cll { visibility: hidden; height: 0; width:0; line-height: 0; font-size:0; clear: left;  }
.clr { visibility: hidden; height: 0; width:0; line-height: 0; font-size:0; clear: right; }
.clb { visibility: hidden; height: 0; width:0; line-height: 0; font-size:0; clear: both;  }

#top { padding:0; }
#headr { text-align: center; min-height: 123px; margin: 0 auto; font-family:Serif; color: #FFFFFF; color: rgba(255,255,255,0.9); text-shadow: 0 -1px #999999, 1px 0 #999999, 0 1px #999999, -1px 0 #999999; }
#headr h1 { text-transform:uppercase; padding: 150px 0 5px 0; margin:0; font-weight: 400; font-size: 3.5em; }
#headr p { font-style: italic; margin:0; padding:0; line-height: 150%; font-size: 1.4em; font-weight: 500; }

a, a:link, a:active, a:visited { text-decoration: none; color: #538095; }
a:hover { text-decoration: underline; color: #505050; }

#metanav-wrapper { background-color: #AFCABB; }
#metanav { margin:0; padding:10px 5px; line-height: 125%; color: #FFFFFF;  font-size: 0.9em; }
#metanav p { margin:0; padding:0; font-size: 1em; }
#metanav ul { list-style-type: none; margin:0 1em 0 0; text-transform: uppercase; white-space:nowrap; }
#metanav ul li { float: left; margin:0 0 0 10px; padding:0; color: #FFFFFF; }
#metanav ul li.sel { color: #FFFFFF; }

#metanav ul li a, #metanav ul li a:link, #metanav ul li a:active, #metanav ul li a:visited { text-decoration: none; color: #FFFFFF;}
#metanav ul li.sel a, #metanav ul li.sel a:link, #metanav ul li.sel a:active, #metanav ul li.sel a:visited, #metanav ul li.sel a:hover, #metanav ul li a:hover { text-decoration: underline;  color: #FFFFFF; }

#inner { padding: 0; margin:0; background-color: #FFFFFF; min-height: 460px; }

.content { background: url(/img/page/bg.png) repeat-x top left; }

#content h1.ac { text-align:center; padding-bottom: 15px; background: url(/img/page/hr.gif) bottom center no-repeat; font-size: 180%; font-weight: 300; margin-bottom: 10px; }

#content .article { padding-bottom: 15px; }

p.cp { display: block; font-size: 0.8em; line-height: 2em; padding:4px 0; margin: 0 auto 50px auto; color: #C0C0C0; text-align: center; }
p.cp span { vertical-align: top; margin: 0 5px; }

.cp a, .cp a:link, .cp a:active, .cp a:visited { text-decoration: none; color: #C0C0C0; }
.cp a:hover { text-decoration: underline; color: #000000; }

#content h1 { font-weight: normal; font-size: 125%; color: #538095; line-height: 120%; margin:0; padding:20px 0 5px 0; }
#content h2 { font-weight: normal; font-size: 100%; color: #538095; line-height: 120%; margin:0; padding:0; }
#content p { line-height: 125%; margin-top: 8px; padding:0; }

#content li { line-height: 150%; }

.medl { float:left; margin: 15px 15px 10px 0; }
.medl p { line-height: 110%; margin:0; padding:0; text-align:right; color: #5E5E5E; }

.medr { float:right; margin: 15px 0 10px 15px; }
.medr p { line-height: 110%; margin:0; padding:0; text-align:left; color: #5E5E5E; }

.teal { float:left; margin: 15px 10px 8px 0; }
.teal p { line-height: 110%; margin:0; padding:0; text-align:right; color: #5E5E5E; }

.tear { float:right; margin: 15px 0 8px 10px; }
.tear p { line-height: 110%; margin:0; padding:0; text-align:left; color: #5E5E5E; }

.smll { float:left; margin: 0 5px 5px 0; }
.smlr { float:right; margin: 0 0 5px 5px; }

table { font-size: 100%; }

.S1, .M1, .L1 { display:inline-block; padding:5px; border: 1px solid #C0C0C0; margin: 0 7px 10px 6px; line-height:0; }

#kontakt { padding-left: 5px;  }
#kontakt label { font-size: 1em; font-weight:bold; }
#kontakt p { margin: 10px 0 0 0; }
#kontakt input.txt, #kontakt textarea.txt { width: 240px; font-family: Arial, Helvetica; font-size: 1em; }
#kontakt select { width: 240px; font-family: Arial, Helvetica; font-size: 1em; }

.req { padding-right: 8px; background-image: url(/img/page/req.gif); background-position: top right; background-repeat: no-repeat; }

.cookiehinweis { position: fixed; bottom: 0px; left:0; background-color: #FFFFCC;  margin:0; padding:0; width:100%; }
.cookiehinweis p { padding: 10px 5px; text-align:center; line-height: 2em; margin:0; }
.cookiehinweis a { color: #5A5A5A; text-decoration: underline; }




/* =========================================
   Grundfarben und Proportionen
   ========================================= */

:root {
  --nav-green: #afcbbd;
  --nav-active: rgba(158, 190, 177, .48);
  --nav-submenu: rgba(112, 151, 151, .82);
  --nav-text: #606060;
}

/* =========================================
   Metanavigation
   ========================================= */

#metanav {
  background: var(--nav-green);
  color: #fff;
  padding: .65em 0;
  line-height: 1.35em;
}

#metanav strong {
  font-weight: 700;
}

.meta-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 1em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.meta-links a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

.meta-links a:hover,
.meta-links a:focus {
  text-decoration: underline;
}

/* =========================================
   Hauptnavigation
   ========================================= */

.main-navbar {
  background: #fff;
  padding: 0;
  position: relative;
  z-index: 100;
}

.main-navbar .navbar-brand {
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.main-navbar .navbar-brand .img-fluid {
  display: block;
  height: 60px;
  width: auto;
}

.main-navbar .nav-item.active, .main-navbar .nav-item:hover {
    background: linear-gradient(
        to bottom,
        #ebf0ec 0%,
        #ecf0ef 20%,
        #f3f5f4 40%,
        #f9fbfa 60%,
        #fdfdfd 70%,
        #ffffff 85%,
        #ffffff 100%
    );
    border-bottom: .5em solid #afcabb;
}

/* Navigationspunkte */

.main-navbar .navbar-nav {
  align-items: stretch;
}

.main-navbar .nav-item {
  position: relative;
  border-bottom: .5em solid transparent;
}

.main-navbar .nav-link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 2.35em 1.2em 0.4em 1.2em;
  color: var(--nav-text);
  white-space: nowrap;
  line-height: 1.25;
  text-decoration: none;
}

.main-navbar .nav-link:hover,
.main-navbar .nav-link:focus {
  color: var(--nav-text);
}

@media (min-width: 992px) {

    .main-navbar > .container {
        display: flex;
        align-items: stretch;
    }

    .main-navbar .navbar-collapse {
        align-self: stretch;
    }

    .main-navbar .navbar-nav {
        height: 100%;
        align-items: stretch;
    }

    .main-navbar .nav-item {
        display: flex;
        align-items: stretch;
    }

    .main-navbar .nav-link {
        display: flex;
        align-items: center;
    }

}

/* =========================================
   Aktiver Menüpunkt / Hover
   ========================================= */

/*
   Hintergrund mit Pseudoelement.
   Die Verlängerung nach oben ist proportional
   zur aktuellen Schriftgröße.
*/

@media (min-width: 992px) {

  .main-navbar .nav-item::before {
    content: "";
    position: absolute;
    top: -1.35em;
    right: 0;
    bottom: 0;
    left: 0;
    /* background: var(--nav-active); */
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  .main-navbar .nav-item.active::before,
  .main-navbar .nav-item:hover::before,
  .main-navbar .nav-item:focus-within::before,
  .main-navbar .nav-item.show::before {
    opacity: 1;
  }

  .main-navbar .dropdown-menu {
     top: calc(100% + .5em);
    margin-top: 0;
  }
}

/* =========================================
   Dropdown
   ========================================= */

.main-navbar .dropdown-menu {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--nav-submenu);
  min-width: 100%;
}

.main-navbar .dropdown-item {
  padding: .35em .3em;
  color: #fff;
  line-height: 1.25;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.5);
}

.main-navbar .dropdown-item:last-child {
  border-bottom: 0;
}

.main-navbar .dropdown-item:hover,
.main-navbar .dropdown-item:focus,
.main-navbar .dropdown-item.active {
  color: #fff;
  background: rgba(255,255,255,.16);
}

/* Desktop: Dropdown auch per Hover */
@media (min-width: 992px) {

  .main-navbar .dropdown:hover > .dropdown-menu,
  .main-navbar .dropdown:focus-within > .dropdown-menu {
    display: block;
  }

}

/* =========================================
   Burger
   ========================================= */

.main-navbar .navbar-toggler {
  padding: .6em;
  border: 0;
  border-radius: 0;
  outline-offset: .15em;
}

.navbar-toggler-icon-custom {
  display: block;
  width: 1.5em;
  height: .14em;
  margin: .28em 0;
  background: #607e78;
}

/* =========================================
   Mobile / Tablet bis einschließlich MD
   ========================================= */

@media (max-width: 991.98px) {

  #metanav {
    text-align: center;
  }

  .meta-links {
    justify-content: center;
    margin-top: .4em;
  }

  .main-navbar .navbar-collapse {
    padding-bottom: .6em;
  }

  .main-navbar .navbar-nav {
    align-items: stretch;
  }

  .main-navbar .nav-link {
    padding: .8em 1em;
    white-space: normal;
  }

  .main-navbar .nav-item.active > .nav-link,
  .main-navbar .nav-item.show > .nav-link {
    background: var(--nav-active);
  }

  .main-navbar .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    background: var(--nav-submenu);
  }

  .main-navbar .dropdown-item {
    padding: .6em 1.5em;
    white-space: normal;
  }

}