/*  Typo
----------------------------------------------- */

a:link, a:visited
{
    text-decoration: none !important;
    color:#0867b1;
}
a:active { 	text-decoration: underline;}
a:hover { text-decoration:none; color:#0867b1;}


h1 { font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; font-size:25px !important; }
h2 { font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; font-size:21px !important; }

p { font-family: 'Open Sans', sans-serif !important; font-weight: 400 !important; font-size:14px !important; line-height:140%; }

/*  Layout
----------------------------------------------- */

.btn {
text-align:center;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  font-family: 'Open Sans', sans-serif !important; font-weight: 800 !important; font-size:14px !important; line-height:140%;

  color: #7f7f7f;

  padding: 7px 20px 8px 20px;
  border: solid #e3e3e3 1px;
  text-decoration: none;
display: block;
    margin-left: auto;
    margin-right: auto;
}

.btn:hover {
  text-decoration: none;
  color: #0867b1;
}


table, th, td {
    font-family: 'Open Sans', sans-serif !important; font-weight: 400 !important; font-size:14px !important; line-height:140%;
}

body {
    background: #fff;

    padding:35px 0 0 0;
    margin:0;
    font-family: 'Open Sans', sans-serif !important; font-weight: 400 !important; font-size:14px !important; line-height:140%;
}

#wide {
width:100%;
}

#wide2 {
float:left;
width:100%;
}

#content1 {
    margin:0 auto;
    width:1140px;
    

}

#content3 {
    margin:0 auto;
    width:1140px;

}


#trenner
{
float:left;
height: 180px;
width:100%;
background-color:#f8f9f9;
border-top: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
}

#trenner-footer {
background-color: #171717;
height:400px;
padding-top:25px;
}

#connection {
    float:right;
    width:700px;
    height:60px;
}

#bread {

}

#container
{
    margin:0 auto;
    width:1140px;

}

#test
{
   width:1200px;
   height:420px;
   margin-left:-40px;
}

#header
{
    float:left;
    width:250px;
}

#header h1,
#header a
{
    padding:0;
    font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
    font-size:30px;
    font-weight:normal;
    text-decoration:none;
    line-height:1.3em;
    color:#666666;
    text-align:right;
}

#header a:hover { text-decoration:none;  }


#navigation
{
    float:right;
    width:950px;
    height:75px;
    margin-top:30px;
}

#sidebar{
    width:1140px;
float:left;
padding-top:25px;
padding-bottom:40px;
}

#content
{
    float:left;
    width:1140px;
    margin-top:40px;
    margin-bottom:50px;
}

#footer
{

    clear:both;
    margin-top:25px;
    height:65px;
}

#footer .gutter 
{
    height:30px;
    padding:10px 0px 0 0px;
}


/*  Navigation
----------------------------------------------- */

#mainnavigation {    
    float:right;
    text-align:right;
    width:800px;
    height:40px;
    margin-top:15px;
}

#subnavigation
{
    position:absolute;
    margin-top:490px;
    width:200px;
    float:left;
    z-index:1;
}

#mainnavigation #mainNav1 ul,    /* system variable */
#mainnavigation .level_3 {       /* system variable */
    display: none;               /* hide 2nd and 3rd level in mainnavi */
}

#subnavigation #mainNav2 ul,    /* system variable */
#subnavigation .level_1 {       /* system variable */
    display: none;               /* hide 2nd and 3rd level in mainnavi */
}

ul.mainNav1,
ul.mainNav2
{
    margin:0;
    padding: 0;
}


ul.mainNav1 li,
ul.mainNav2 li
{
    display: inline;
    margin: 0;	
    padding: 0;
}


ul.mainNav1 li a
{
    font-family: 'Open Sans', sans-serif !important; font-weight: 800 !important; font-size:14px !important; line-height:140%;
    text-decoration: none;

    display: inline;
    color:#212121;
    margin-left:50px;
}

ul.mainNav2 li a
{
    font-family: 'Source Sans Pro', sans-serif !important; font-weight: 400 !important; font-size:14px !important; line-height:140%;
    text-decoration: none;
    display: block;
    margin-bottom:10px;
    color:#666666;
}


ul.mainNav1 li a { padding:4px 4px 4px 4px; }
ul.mainNav2 li a { padding:4px 4px 4px 14px; }
ul.mainNav3 li a { padding:4px 4px 4px 24px; }


ul.mainNav1 a:hover
{
    color:#0867b1;
}

ul.mainNav1 a.current 
{ 
    
    color:#0867b1;
}


/*
 * jQuery Nivo Slider v2.4
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */
 
 
/* The Nivo Slider styles */
.nivoSlider {
        position:relative;
}
.nivoSlider img {
        position:absolute;
        top:0px;
        left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        border:0;
        padding:0;
        margin:0;
        z-index:60;
        display:none;
}
/* The slices in the Slider */
.nivo-slice {
        display:block;
        position:absolute;
        z-index:50;
        height:100%;
}
/* Caption styles */
.nivo-caption {
        position:absolute;
        left:0px;
        bottom:0px;
        background:#000;
        color:#fff;
        opacity:0.8; /* Overridden by captionOpacity setting */
        width:100%;
        z-index:89;
}
.nivo-caption p {
        padding:5px;
        margin:0;
}
.nivo-caption a {
        display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
        position:absolute;
        top:45%;
        z-index:99;
        cursor:pointer;
}
.nivo-prevNav {
        left:0px;
}
.nivo-nextNav {
        right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
        position:relative;
        z-index:99;
        cursor:pointer;
}
.nivo-controlNav a.active {
        font-weight:bold;
}
#slider {
        
    width:697px;
    height:400px;
    background:url(http://www.vollmer-kd.de/jimdo/loading.gif) no-repeat 50% 50%;
}
#slider img {
        position:absolute;
        top:0px;
        left:0px;
        display:none;
}
#slider a {
        border:0;
        display:block;
}

.nivo-controlNav {
        position:absolute;
        left:500px;
        bottom:-32px;
}
.nivo-controlNav a {
        display:block;
        width:22px;
        height:22px;
        background:url(http://www.vollmer-kd.de/jimdo/bullets.png) no-repeat;
        text-indent:-9999px;
        border:0;
        margin-right:3px;
        float:left;
}
.nivo-controlNav a.active {
        background-position:0 -22px;
}

.nivo-directionNav a {
        display:block;
        width:30px;
        height:30px;
        background:url(http://www.vollmer-kd.de/jimdo/arrows.png) no-repeat;
        text-indent:-9999px;
        border:0;
}
a.nivo-nextNav {
        background-position:-30px 0;
        right:15px;
}
a.nivo-prevNav {
        left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a { 
    color:#efe9d1;
    text-decoration:underline;
}



/* =====================================================
   RESPONSIVE AKTIVIEREN – OHNE DESKTOP ZU ÄNDERN
===================================================== */

/* 1) Ab Tablet-Breite */
@media (max-width: 1160px) {

  /* Zentrale Container flexibel machen */
  #content1,
  #content3,
  #container,
  #content,
  #sidebar {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Header-Bereiche */
  #header,
  #connection,
  #mainnavigation {
    width: 100% !important;
    float: none !important;
    height: auto !important;
  }

}

/* 2) Ab kleinerem Tablet / Mobile */
@media (max-width: 980px) {

  /* Floats auflösen */
  #header,
  #connection,
  #mainnavigation,
  #content,
  #sidebar {
    float: none !important;
  }

  /* Navigation untereinander */
  ul.mainNav1 li {
    display: block;
  }

  ul.mainNav1 li a {
    display: block;
    margin-left: 0;
    padding: 10px 0;
  }

  /* Subnavigation aus absoluter Position lösen */
  #subnavigation {
    position: static !important;
    width: 100% !important;
    margin-top: 20px;
  }

}

/* 3) Smartphones */
@media (max-width: 600px) {

  /* Kontaktboxen stapeln */
  #connection > div {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }

  /* Buttons volle Breite */
  .btn {
    width: 100%;
    max-width: 320px;
  }

}

/* =====================================================
   FIX: HORIZONTAL SCROLL & ZERBROCHENES LAYOUT
===================================================== */

/* 1) GLOBAL: Kein horizontales Überlaufen mehr */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 2) Alle Hauptcontainer dürfen nie breiter als Viewport sein */
#wide,
#wide2,
#content1,
#content3,
#container,
#content,
#sidebar,
#navigation,
#mainnavigation {
  max-width: 100%;
}

/* 3) Problem-Element #test entschärfen */
@media (max-width: 1200px) {
  #test {
    width: 100% !important;
    margin-left: 0 !important;
    height: auto;
  }
}

/* 4) Navigation: Abstände auf Mobile reduzieren */
@media (max-width: 980px) {

  ul.mainNav1 li {
    display: block;
  }

  ul.mainNav1 li a {
    margin-left: 0 !important;
    padding: 12px 0 !important;
  }

  #mainnavigation {
    float: none !important;
    width: 100% !important;
    text-align: left;
  }
}

/* 5) Subnavigation: vertikale Textzerstörung verhindern */
@media (max-width: 980px) {
  #subnavigation {
    position: static !important;
    width: 100% !important;
    margin-top: 20px;
    writing-mode: horizontal-tb !important;
    transform: none !important;
  }
}

/* 6) Slider darf nie breiter als Viewport sein */
@media (max-width: 760px) {
  #slider {
    width: 100% !important;
    height: auto;
    aspect-ratio: 697 / 400;
  }

  .nivo-controlNav {
    left: 50% !important;
    transform: translateX(-50%);
  }
}

/* =====================================================
   FIX: TEXT RECHTS ABGESCHNITTEN / KEIN ABSTAND
===================================================== */

/* 1) Alle typischen Jimdo-Textcontainer absichern */
@media (max-width: 1160px) {

  /* Häufige Jimdo-Text-Wrapper */
  .cc-m-textcontent,
  .j-text,
  .content,
  #content,
  #container p,
  #container h1,
  #container h2,
  #container h3 {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }

}

/* 2) Auf Smartphones etwas mehr Luft */
@media (max-width: 600px) {

  .cc-m-textcontent,
  .j-text,
  .content,
  #content,
  #container p,
  #container h1,
  #container h2,
  #container h3 {
    padding-left: 18px;
    padding-right: 18px;
  }

}

/* =====================================================
   RESPONSIVE FEINSCHLIFF: NAVIGATION & KONTAKT
===================================================== */

/* ===============================
   1) KONTAKT (MAIL + TELEFON)
   zentrieren im Responsive
================================ */

@media (max-width: 980px) {

  #connection {
    text-align: center;
  }

  #connection > div {
    float: none !important;
    width: 100% !important;
    margin: 10px auto !important;
    display: inline-block;
  }

  #connection > div > div {
    float: none !important;
    display: inline-block;
    vertical-align: middle;
  }
}

/* ===============================
   2) HAUPTNAVIGATION (oben)
   sauber, mittig, klickfreundlich
================================ */

@media (max-width: 980px) {

  #mainnavigation {
    text-align: center !important;
    margin-top: 20px;
  }

  ul.mainNav1 {
    width: 100%;
  }

  ul.mainNav1 li {
    display: block;
  }

  ul.mainNav1 li a {
    display: block;
    margin: 0;
    padding: 14px 0;
    font-size: 18px;
    font-weight: 700;
  }
}

/* ===============================
   3) UNTERNAVIGATION
   optisch getrennt & ruhiger
================================ */

@media (max-width: 980px) {

  #subnavigation {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e3e3e3;
    text-align: center;
  }

  ul.mainNav2 li {
    display: block;
  }

  ul.mainNav2 li a {
    display: block;
    padding: 10px 0;
    font-size: 16px;
  }
}

/* ===============================
   4) AKTIVER NAV-PUNKT
   klar sichtbar
================================ */

@media (max-width: 980px) {

  ul.mainNav1 a.current,
  ul.mainNav2 a.current {
    color: #0867b1;
    font-weight: 800;
  }
}