/* =====================================================================
   wbcezon.css - Komplettdatei (Basis + Layout + Navigation über Variablen)
   Hinweis: Deine Basis-Styles bleiben erhalten.
   Die Navigation ist komplett auf variables.css umgestellt.
   ===================================================================== */

.border{
  border: 1px solid #d0d0d0;
  background: #f7f7f7;
  padding: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  text-align: center;
}

@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: 700;
  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: 700;
  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: 400;
  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: 400;
  font-style: normal;
}

/* -----------------------------------------------------------------------------
   Breadcrumbs
----------------------------------------------------------------------------- */
.im-breadcrumbs h6{
  margin: 0;
  font-weight: 400 !important;
}
.im-breadcrumbs a{
  font-weight: 400 !important;
}
.im-breadcrumbs .current{
  font-weight: 700 !important;
}

.im-breadcrumbs{
  background: transparent;
  padding: 0;
  margin: 2px 0 12px 0;
  box-shadow: none;
}
.im-breadcrumbs a{
  text-decoration: none;
}
.im-breadcrumbs .sep{
  opacity: .6;
  padding: 0 4px;
}

html{
  overflow-y: scroll;
}

body{
  background: var(--page-bg);
  font-size: 20px;
  font-family: "Open Sans", Arial, sans-serif;
  color: var(--text-color);
}

h1, h2, h3, h4, h5, h6{
  color: var(--heading-color);
  font-weight: normal;
  line-height: 1.3;
  margin: 0.5rem 0;
}

h1{ font-size: 1.4rem; }
h2{ font-size: 1.3rem; font-weight: 500; }
h3{ font-size: 1.2rem; }
h4{ font-size: 1.1rem; font-weight: 500; }
h5{ font-size: 1.0rem; }
h6{ font-size: 0.8rem; }

a, a:link, a:visited, a:hover, a:active{
  text-decoration: none;
  color: #2b2b2b;
  transition: color 0.20s linear 0s;
  -o-transition: color 0.20s linear 0s;
  -ms-transition: color 0.20s linear 0s;
  -moz-transition: color 0.20s linear 0s;
  -webkit-transition: color 0.20s linear 0s;
}

a:hover{
  color: #0f0f0f;
}

:target{
  display: block;
  position: relative;
  top: -120px;
  visibility: hidden;
}

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

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

/* -----------------------------------------------------------------------------
   Navigation - komplett über Variablen
----------------------------------------------------------------------------- */

/* Nav-Container */
nav{
  background: var(--nav0-bg);
}

/* Ebene 0 Links */
.top-nav li a{
  padding: 0.5rem 1rem;
  color: var(--nav0-link);
  background: transparent;
}

/* Hover Ebene 0 */
.top-nav li a:hover{
  background-color: var(--nav0-hover-bg);
  color: var(--nav0-link-hover);
}

/* Aktiv Ebene 0 */
.top-nav .active-item > a{
  background-color: var(--nav0-active-bg);
  color: var(--nav0-link-active);
}

/* Dropdown Ebene 1 Container */
.top-nav ul ul{
  background-color: var(--nav1-bg);
}

/* Ebene 1 Links */
.top-nav li ul li a{
  background-color: var(--nav1-bg);
  color: var(--nav1-link);
}

/* Hover Ebene 1 */
.top-nav li ul li a:hover{
  background-color: var(--nav1-hover-bg);
  color: var(--nav1-link-hover);
}

/* Aktiv Ebene 1 */
.top-nav li ul li.active-item > a,
.top-nav li ul li.menu-current > a{
  background-color: var(--nav1-active-bg);
  color: var(--nav1-link-active);
}

/* Dropdown Ebene 2 Container */
.top-nav li ul li ul{
  background-color: var(--nav2-bg);
}

/* Ebene 2 Links */
.top-nav li ul li ul li a{
  background-color: var(--nav2-bg);
  color: var(--nav2-link);
}

/* Hover Ebene 2 */
.top-nav li ul li ul li a:hover{
  background-color: var(--nav2-hover-bg);
  color: var(--nav2-link-hover);
}

/* Aktiv Ebene 2 */
.top-nav li ul li ul li.active-item > a,
.top-nav li ul li ul li.menu-current > a{
  background-color: var(--nav2-active-bg);
  color: var(--nav2-link-active);
}

/* Dropdown Ebene 3 Container (falls vorhanden) */
.top-nav li ul li ul li ul{
  background-color: var(--nav3-bg);
}

/* Ebene 3 Links */
.top-nav li ul li ul li ul li a{
  background-color: var(--nav3-bg);
  color: var(--nav3-link);
}

/* Hover Ebene 3 */
.top-nav li ul li ul li ul li a:hover{
  background-color: var(--nav3-hover-bg);
  color: var(--nav3-link-hover);
}

/* Aktiv Ebene 3 */
.top-nav li ul li ul li ul li.active-item > a,
.top-nav li ul li ul li ul li.menu-current > a{
  background-color: var(--nav3-active-bg);
  color: var(--nav3-link-active);
}

/* Mobile Anpassungen */
@media screen and (max-width: 768px){
  .top-nav li a{
    padding: 0.5rem 1rem;
    color: var(--nav0-link);
  }
  .top-nav li a:hover{
    background-color: var(--nav0-hover-bg);
    color: var(--nav0-link-hover);
  }
  .top-nav li ul li a{
    background-color: var(--nav1-bg);
    color: var(--nav1-link);
  }
  .top-nav li ul li ul li a{
    background-color: var(--nav2-bg);
    color: var(--nav2-link);
  }
  .nav-text{
    color: var(--nav0-link);
  }
}

/* -----------------------------------------------------------------------------
   Sidebar Navigation (rechte Spalte)
----------------------------------------------------------------------------- */
.aside-nav-noresponsee ul{
  margin: 0;
  padding: 0;
}
.aside-nav-noresponsee li{
  list-style-type: none;
}

/* Ebene 0 */
.aside-nav-noresponsee li a:link,
.aside-nav-noresponsee li a:visited{
  display: block;
  padding: 0.3rem 0.5rem;
  background-color: var(--asnav-bg);
  color: var(--asnav-link);
}

/* Hover + current */
.aside-nav-noresponsee li a:hover,
.aside-nav-noresponsee li ul li.menu-current a{
  background-color: var(--asnav-hover-bg);
  color: var(--asnav-link-hover);
}

/* Ebene 1 (indent) */
.aside-nav-noresponsee li ul li a:link{
  padding-left: 2.5rem;
  background-color: var(--asnav1-bg);
  color: var(--asnav1-link);
}
.aside-nav-noresponsee li ul li a:hover,
.aside-nav-noresponsee li ul li.menu-current a{
  background-color: var(--asnav1-hover-bg);
  color: var(--asnav1-link-hover);
}

/* Optional: weitere Ebenen, falls dein Markup tiefer geht */
.aside-nav-noresponsee li ul li ul li a:link{
  padding-left: 3.5rem;
  background-color: var(--asnav2-bg);
  color: var(--asnav2-link);
}
.aside-nav-noresponsee li ul li ul li a:hover{
  background-color: var(--asnav2-hover-bg);
  color: var(--asnav2-link-hover);
}

.aside-nav-noresponsee li ul li ul li ul li a:link{
  padding-left: 4.5rem;
  background-color: var(--asnav3-bg);
  color: var(--asnav3-link);
}
.aside-nav-noresponsee li ul li ul li ul li a:hover{
  background-color: var(--asnav3-hover-bg);
  color: var(--asnav3-link-hover);
}

/* -----------------------------------------------------------------------------
   Header, Suche, Content, Bilder, Layout-Regeln (dein Bestand)
----------------------------------------------------------------------------- */
.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 rgba(242, 242, 239, 1);
  color: var(--nav-text-light);
}

.wbcesuche input[type=submit]{
  font-family: sli;
  border: 0;
  background-color: transparent;
  color: var(--nav-text-light);
}

::placeholder{ color: var(--nav-text-light); }
:-ms-input-placeholder{ color: var(--nav-text-light); }
::-ms-input-placeholder{ color: var(--nav-text-light); }

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

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

.maincontent li ul, .maincontent li ol{
  padding-top: 0.5em;
}

.back-to-top{
  position: fixed;
  bottom: 20px;
  right: 20px;
}

a.back-to-top, footer a:link, footer a:visited{
  border: 0;
  padding: 0 1em;
}

@media screen and (max-width: 768px){
  .wbcesuche{
    text-align: center;
  }
}

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;
  }
}

/* === Breitere Inhaltsseite auf sehr großen Monitoren === */
@media screen and (min-width: 1600px){
  .size-1140 section .line{
    max-width: 62%;
  }
  .size-1140 section .box{
    background-color: var(--box-bg);
  }
}

/* Submenü/Sidebar auf kleinen Bildschirmen ausblenden */
@media (max-width: 959px){
  section .box .margin > .hide-s.m-12.l-3{
    display: none !important;
  }
}

/* Footer leicht transparent darstellen */
footer .line,
footer .box{
  background-color: var(--box-bg);
}