@font-face {
    font-family: 'Open Sans';
    src: url('../font/opensans-bold-webfont.woff2') format('woff2'),
         url('../font/opensans-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/opensans-bolditalic-webfont.woff2') format('woff2'),
         url('../font/opensans-bolditalic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/opensans-italic-webfont.woff2') format('woff2'),
         url('../font/opensans-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/opensans-regular-webfont.woff2') format('woff2'),
         url('../font/opensans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ------------------------------------------------------ */
/* GENERAL                                                 */
/* ------------------------------------------------------ */

html {
    overflow-y: scroll;
}

body {
    background: #eeeeee;
    font-size: 18px;
    font-family: "Open Sans", Arial, sans-serif;
    color: #111111;
}

h1, h2, h3, h4, h5, h6 {
    color: #222222;
    font-weight: normal;
    line-height: 1.3;
    margin: 0.5rem 0;
}

h1 { font-size: 1.7rem;   color:#222222; }
h2 { font-size: 1.6rem; color:#333333; }
h3 { font-size: 1.5rem; color:#444444; }
h4 { font-size: 1.4rem; color:#555555; }
h5 { font-size: 1.1rem; color:#666666; }
h6 { font-size: 0.7rem; color:#777777; }

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

/* Anchor offset */
:target {
  display: block;
  position: relative;
  top: -120px;
  visibility: hidden;
}

p, li, dl, blockquote, table, kbd {
    font-size: 1rem;
    line-height: 1.6;
}

hr {
    border: 0;
    border-top: 1px solid #e5e5e5;
    clear: both;
    height: 0;
    margin: 0.5rem auto;
}

/* ------------------------------------------------------ */
/* TOP NAV                                                 */
/* ------------------------------------------------------ */

nav { background: #222222; }

.top-nav ul ul { background-color: #222222; }
.top-nav li a { padding:0.5rem 1rem; color: #ffffff; }
.top-nav li ul li a { background-color: #222222; }
.top-nav li a:hover { background-color: #444444; }
.top-nav .active-item a { background: #333333; }

@media screen and (max-width:768px) {
    .top-nav li a { background: #1c1c1c; color: #ffffff; }
    .top-nav li a:hover { background: #222222; color: #ffffff; }
    .top-nav li ul li a { background: #2b2b2b; }
    .top-nav li ul li ul li a { background: #3a3a3a; }
    .nav-text { color: #ffffff; }
}

/* ------------------------------------------------------ */
/* ASIDE NAV                                               */
/* ------------------------------------------------------ */

.aside-nav-noresponsee ul {
    margin:0;
    padding:0;
}

.aside-nav-noresponsee li {
    list-style-type:none;
}

.aside-nav-noresponsee li a:link,
.aside-nav-noresponsee li a:visited {
    display:block;
    padding:0.3rem 0.5rem;
    background-color:#eeeeee;
    color:#222222;
}

.aside-nav-noresponsee li ul li a:link {
    padding-left:2.5rem;
}

.aside-nav-noresponsee li a:hover,
.aside-nav-noresponsee li ul li.menu-current a {
    background-color:#dddddd;
    color:#444444;
}

/* ------------------------------------------------------ */
/* PAGE SECTIONS                                           */
/* ------------------------------------------------------ */

.headerpic img {
    display:block;
}

/* Transparenter Header/Content/Footer – ohne Animationen */
header .line,
section .line,
footer .line {
    background-color: rgba(255, 255, 255, 0.0) !important;
    padding:0 !important;
}



.logo {
    padding:2rem;
}

.wbcesuche {
    padding:0.5rem 1.5rem;
}

.wbcesuche input[type=text] {
    background-color:transparent;
    border:0;
    border-bottom:1px solid #ffffff;
    color:#ffffff;
}

.wbcesuche input[type=submit] {
    font-family:sli;
    border:0;
    background-color:transparent;
    color:#ffffff;
}

::placeholder {color:#ffffff;}

h1#contentstart {
    margin-top:-0.5rem;
}

.maincontent p, .maincontent li {
    padding-bottom:0.5em;
}

/* ------------------------------------------------------ */
/* IMG CLASSES                                             */
/* ------------------------------------------------------ */

img.picfull {width:100%; height:auto;}

@media screen and (min-width:640px) {
    img.pic2left, img.pic3left, img.pic4left { margin: 0 1em 1em 0; height:auto; }
    img.pic2right, img.pic3right,  img.pic4right { margin: 0 0 1em 1em; height:auto; }

    img.pic2left {float:left; max-width:49%;}
    img.pic2right {float:right; max-width:49%;}

    img.pic3left {float:left; max-width:32%;}
    img.pic3right {float:right; max-width:32%;}

    img.pic4left {float:left; max-width:24%;}
    img.pic4right {float:right; max-width:24%;}
}

@media screen and (max-width:640px) {
    img.pic2left, img.pic3left, img.pic4left,
    img.pic2right, img.pic3right,  img.pic4right {
        margin: 1em 0;
        width:100%;
        float:none;
        height:auto;
    }
}

/* ------------------------------------------------------ */
/* DESKTOP FULL-WIDTH HEADER                               */
/* ------------------------------------------------------ */

@media (min-width: 960px) {
  .size-960  header .line,
  .size-1140 header .line,
  .size-1280 header .line,
  .size-1520 header .line {
    max-width: none;
  }

  header .line {
    width: 100%;
    margin: 0;
  }

  #main-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  #main-nav .hide-s,
  #main-nav .top-nav {
    width: auto !important;
  }

  #main-nav .top-nav > ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  #main-nav .top-nav > ul > li {
    float: none;
  }

  #main-nav .nav-text {
    display: none;
  }
}

/* ------------------------------------------------------ */
/* BBOX                                                    */
/* ------------------------------------------------------ */

.bbox {
  --bg: #eeeeee;
  --radius: 0px;
  --pad: 16px;
  --border: 1px solid #e0e0e0;
  --shadow: 0 2px 8px rgba(0,0,0,0.06);

  background: var(--bg);
  border-radius: var(--radius);
  padding: var(--pad);
  border: var(--border);
  box-shadow: var(--shadow);
}

.bbox + .bbox { margin-top: 12px; }

/* ------------------------------------------------------ */
/* RESPONSIVE: Submenü/ASIDE auf kleinen Bildschirmen ausblenden */
/* Smartphones + Tablets (Hochformat und generell <960px)  */
/* ------------------------------------------------------ */

@media (max-width: 959px) {
  .im-aside-col {
    display: none !important;
  }
}