html {height:100%; background: #444;}

body {
        margin: 0; padding: 0;
        height:100%;
}
body, h1, h2, h3,h4,h5, p, a {color: rgb(243, 231, 198);}

.div_block_1 a {background: url('img/lupe.png') no-repeat 0 center; padding-left:20px; transition: transform 1s;}
.div_block_1 a:hover {background: url('img/lupe_hover.png') no-repeat 0 center; color:lightgreen;  }
.div_block_1 a.mailto, .div_block_1 a.mailto:hover {
background: url("img/mail_icon.png") no-repeat scroll 0px center transparent;
padding-left: 25px;
transition: transform 1s ease 0s; color:#31cb63;
}
h1, h2, h3,h4,h5, p {clear:both}

.text_neben_ikone {line-height:1,8em; margin:15px 0; text-align:center}
.clearer {background-color: rgba(42, 112, 36, 0.0); height:1px; overflow:hidden; margin: 20px 0}
/*  magnifier */
* {box-sizing: border-box;}
.img-magnifier-container {
  position:relative;
  margin-right:20px;
  text-align:center;
}
.img-magnifier-container img {  max-width:100%}
.img-magnifier-glass {
  position: absolute;
  border: 3px solid #333;
  border-radius: 50%;
  cursor: none;
  /*Set the size of the magnifier glass:*/
  width: 200px;
  height: 200px;
}
.opaque {
  opacity:0
}
/*  end of magnifier */

.wrapper, .fuss, .max_width, #topmenubar2container, #topmenubar2, a#mobilemenu  {max-width:1200px; width:100%; margin: 0px auto;}
.wrapper, .fuss, .topmenubar, a#mobilemenu, #topmenubar2 {box-shadow:  0px 5px 10px 0px rgba(10, 10, 10, 0.7);}

.wrapper, .fuss {
        clear:both;
        position:relative;
        background: #33412d;
}
.clearfix {clear:both;}

.nach_oben {
    bottom: 10px;
    right:0px;;
    position:fixed;
    padding:5px;
    font-size:9pt;
    background:#33412d;
    color:white;
}
.nach_oben a, .nach_oben a:hover {color:white; font-weight:bold}

.topmenubar, a#mobilemenu {  background:#33412d;}
.topmenubar a, a#mobilemenu { font-size: 20px ! important; font-family: sans-serif; color:#fff }

#topmenubar2container  {position:fixed; top:-60px;}
#topmenubar2container.isvisible {top:0;  transition:0.5s top;}

.head {background: transparent url(img/haefke.jpg) no-repeat; background-size: 100% auto;}
.head-inner h1 {margin:20px auto 0px auto; padding:0; padding-left:25px; text-align:right}

.content {background: #151515; min-height:300px; }
.content_inner {max-width:95%; padding-top:30px; margin:0 auto; background: #151515;}
.content_1, .content_2, content_3 {clear:both}
.container_inner {padding-top:60px}

/***********************************
        Die Blöcke
************************************/*
.themenblock {padding-top:60px}
.block_0 {clear:both; text-align:center}
.block_1 {clear:both; }
.div_block_1 {width:48%; float:left; margin-right:2%}
.subpage_content {display:none; transition: transform 1s;}

/***********************************
       EOF Die Blöcke
************************************/*

/***********************************
        Eingabefelder
************************************/*
input[type="submit"] {display:inline-block; width:auto; margin-top:16px; font-size:14pt; background: transparent url('img/submit.png') no-repeat center left;
                      color:#182f6c; border-width:0px; padding:8px 8px 8px 50px; cursor:pointer;}

div.table {display: table; border-collapse:collapse; max-width:100%;width:100%; }
div.tr {display:table-row;}
div.td {display:table-cell;padding:5px;vertical-align: top;}
div.td1 {text-align:right; width:35%}
div.td input, div.td textarea {width:100%;}

.topmenubar { clear: both; min-height:45px; }

.tn_anmeldung #tn_plz {width:70px}

/***********************************
        menu
************************************/

a#mobilemenu  {
    display:  none;   
}
a#mobilemenu span {display:block; padding: 10px 15px ; font-weight: bold;}
.search_box {float:right;  width:160px; text-align:right; margin-top:9px; }
.search_box .searchstring {
        width:90px;
        font-size:14px;
        padding: 5px 2px 3px 2px;
        border:  #fff 2px solid;
        background: rgba(255, 255, 255, 0.7);
}

.search_box .submitbutton {
        vertical-align: top; margin:0 9px 0 2px;  background: none; border: none;
}

/* Link Formatting */

ul.nav, ul.extramenu, ul.nav_unten {
        list-style-type: none;
        /* *zoom: 1; */
        margin: 0; padding: 0;
        position: relative;
}

ul.nav li, ul.nav_unten li  {
        float: left; 
        list-style-type: none;
        list-style-image: none;
        position: relative;          
        margin: 0; padding: 0;
}
ul.nav_unten li {
        float:none;
        display:inline-block;
        width:auto;
}

.nav li a, ul.nav_unten li a {
        display: block;         
        text-decoration: none;
        line-height:120%;
        padding: 10px 10px;
        color:#fff;
}

 ul.nav {text-transform: uppercase;}
 #topmenubar2 ul.nav li.menu-first { min-width:160px; background: url(img/logo_kl.png) no-repeat center center; background-size:auto 100%; text-transform: uppercase;}
 #topmenubar2 ul.nav li a.menu-first {background:transparent; color:transparent}
 ul.nav li ul li, #topmenubar2 ul.nav li li.menu-first { border-top: 1px solid #cdc2b6; background: #2a7024 url(none); color: #fff;  }
 ul.nav li a:hover, ul.nav li a:focus, ul.nav li ul li a, .nav a.menu-current, ul.nav a.menu-parent,
 #topmenubar2 ul.nav li ul li a.menu-first { background: #2a7024; color: #fff; }

                   
/* Hover Formatting */
.nav  li a:hover, .nav li a:focus, .nav li a:active, .nav li a.active, .nav a.menu-current, .nav a.menu-parent {
         XXbackground: #9e8d7b;  color: #fff;
}

/* 2 level */
.nav li ul {
    display: none;
    width: 15em; 
    margin: 0; padding:0;
    position: absolute;
        box-shadow: 0 10px 40px #666;
}

.nav li ul li {
        width: 15em; 
        text-align: left; 
        margin: 0; 
        padding: 0;
        /* border-top: 1px solid #cdc2b6; */
        border-right: none;
        /* background-color:#9e8d7b; */
}
.nav li ul li a {        
    color: #fff;
        padding: 6px 10px;
    
}
ul.nav li ul li.menu-first {background: none repeat scroll 0% 0% rgb(42, 112, 36);}
ul.nav li ul a.menu-first {color:#fff}

/* 2 level hover */
.nav li ul a:hover,  .nav li ul a.menu-current { background-color: #2a7024;  color: #fff;}

/* Show and hide */
.nav li:hover ul, .nav li a:focus ul {display: block; }
.nav li ul ul { display: none;}
.nav li:hover ul ul {display: none;}
.nav li:hover>ul, .nav  li li:hover>ul {display: block;  z-index: 1000;}


/* 3 Ebene  */
.nav li ul li ul        { 
        margin: -20px 0 0 70%; 
        padding:0;
        z-index: 9999;  
        display: none;
        width: 11em; 
}
.nav li ul li ul li        {width: 11em;}

/* Positioning hover */
.nav li {position: relative;}

.nav li:hover {
        z-index: 10000;        
        white-space: normal;
                                                        
}
/*==================================================================================================*/

.mobiles_only {display: none;}
.desktops_only {}

.mod_topic_commentbox {
        background: transparent;
}

/* ================================================================================================= */
/* Smaller Screens */

@media screen and (max-width: 1024px) {
        .wrapper { background:#33412d}
        .mobiles_only {display: block;}
        .desktops_only {display: none;}
        
        .search_box {margin-top:-30px;}

        #topmenubar1 { height:30px; display: none;}

        #topmenubar2container {display:none;}

        a#mobilemenu { 
                display:  block;    
                color: #fff;
                width:100%;
                clear: both;
                font-size:16px;
                padding-left:27px;
                background: url('img/menu.png') no-repeat center left;
        }
        .head-inner img {max-width:25%;}
        .head-inner h1 {padding-left:20px}
        .content_inner { padding: 30px;}

        ul.nav {max-width:260px; position:absolute; left:0; z-index:2000;}
        ul.nav ul, u.nav ul ul {width:100% ! important; position: static; margin: 0 0 0 0 ! important; }
        
        ul.nav ul {}
        ul.nav li ul {display: block ! important;}
        ul.nav li, ul.nav li li, ul.nav li li li {
                width:100% ! important;
                float: left;
                border-right: none;         
                display: block;
                border-bottom: 1px solid #fff;
                background-color: #081d56;
        }
        
        ul.nav li li a, ul.nav li li li a {
                padding-left:15px;
        }

        ul.nav li.menu-parent > ul, ul.nav li.menu-current > ul {display: block}        
        
        ul.nav a {padding: 10px 5px; color:#fff;}
        ul.nav a.menu-current {text-transform:uppercase;}
}

@media screen and (max-width: 768px) {
        .tp_picture  {max-width:40%;}
        .tp_picture .tp_pic {max-width:100%;}
        .head-inner img {max-width: 50%;}
        .head-inner h1 {text-align:left}
        /***********************************
                Die Blöcke
        ************************************/*
        .div_block_1 {width:100%; float:none; margin-right:0}
        .img-magnifier-container img { width:100%; height:auto;}
        .clearer {display:none}
}

/* ================================================================================================= */
/* Smaller Screens */
@media screen and (max-width: 500px) {
        .wrapper { width: 100%; }
        .content_inner {padding-top:10px;}
        .themenblock {padding-top:10px}
        .block_2, .block_3, .block_4, .block_6, .block_45_1, .block_45_2 {width:90%; float:none; margin-left:5%; margin-right:5%}
        .head-inner img {max-width: 100%;}
        .head {background: url("img/haefke.jpg") repeat scroll 0% 0% / 100% auto #33412d;position:relative; margin-top:100px; margin-bottom:-60px}
        .head h1 {position:relative; margin-top:-100px; }
}