/* = = = = = = = = = = = = = = = = = datei format.css = = = = = = = = = = = = = = = = = = = = = = = = = */



/* ############################################################ */
/* allgemein */
/* ############################################################ */

*, *:before, *:after {

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: width .75s ease-out;
-webkit-transition: width .75s ease-out;
transition: width .75s ease-out;
}

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}


.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

.section { clear: both;
margin: 0rem;
background:transparent;
}

html {
font-family: "trebuchet ms",tahoma,georgia,"times new roman",georgia, "Open Sans",helvetica, arial,roboto, serif;
font-size:62.5%;
line-height:1.5;

font-weight: 400;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}


body {
font-size:1.9rem;
margin: 0 auto;
background-color:#DFDFDF;
color:#000;
margin:0rem;
}

.container_haupt {
margin:0rem;
background-color:#000;
width: 100%;
}

/* überschriften */
h1, h2, h3, h4, h5 {
font-weight:normal;
}

h1 {
font-size:2.9rem;
line-height: 3.2rem;
margin-top: 0rem;
margin-bottom: 3.5rem;

}

h2 {
font-size:2.4rem;
line-height: 2.8rem;
margin-top: 0rem;
margin-bottom: 3rem;
}

h3 {
font-size:2rem;
line-height: 2.3rem;
margin-top: 1.5rem;
margin-bottom:1rem;
}



img {max-width: 100%;
height: auto;
padding:0rem;
margin:0rem;
}

pre {
margin-bottom:2rem;
}




/* ############################################################ */
/* allgemein - speziell*/
/* ############################################################ */


.hpname1 {display:none;
font-size: 3rem;
line-height:4rem;
padding-left:0rem;
padding-right:0rem;
color:#fff;
margin:0 auto;
}



.bild-im-text {
display:block;
max-width:100%;
margin:4rem auto;
border:solid  0.5rem;
box-shadow: 0rem 0rem 0.4rem #000;
border-color: #fff;
}

.bild-im-text-re {
display:block;
max-width:100%;
margin:4rem auto;
border:solid  0.5rem;
box-shadow: 0rem 0rem 0.4rem #000;
border-color: #fff;
}





/* ############################################################ */
/* bereich TOP */
/* ############################################################ */

.bereich-top {background:transparent;color:#fff;}

.zelle-top {display: table-cell;
width:100%;
padding:0rem;
}


/* ############################################################ */
/* bereich logo */
/* ############################################################ */

.bereich-logo {
color:#fff;
text-shadow:0.1rem 0.1rem 0.1rem #000;
background-image:url(images/logo0.jpg);
background-repeat:repeat;
background-position:50% 100%;
background-color:forestgreen;
background-size:cover;

}

.bereich-logo hr {margin:0 auto;margin-top:1rem;margin-bottom:1rem;
border:none;width:50%;
border-bottom: solid 0.1rem #DCEBF1;box-shadow:0.1rem 0.1rem 0.1rem #000;
height:0.1rem;}

.bereich-logo .zelle {display:table-cell;
width:100%;
vertical-align:top;
border-collapse:separate;
}

.bereich-logo .tabelle {display: table;
width:100%;
table-layout:fixed;
border-spacing: 0rem 0rem;
}

.zelle-logo {display: table-cell;
width: 100%;
height:60vh;
text-align:center;
vertical-align:middle;
padding-right:2rem;
}

.bereich-logo .zelle-back {display: block;
width: 100%;
height:10vh;
background:forestgreen;
text-align:right;
vertical-align:bottom;
background: linear-gradient(to right bottom, transparent 50%,forestgreen 50%);
}

.bereich-logo .fa {
color:#44DF44;
background:rgba(0,0,0,0.6);
font-size:4.5rem;
margin:1rem;
border-radius:36rem;
border:solid 0.2rem white;
height:10rem;
line-height:10rem;
width:10rem;
}



/* ========== links bereich-logo ========== */

.bereich-logo a:link, .bereich-logo a:visited, .bereich-logo a:active{
color:white;text-decoration: underline;
}

.bereich-logo a:hover  {
color:white;
text-decoration: overline;
}

.bereich-logo .fa:hover {background-color:#1DA51D;color:white;
}

.bereich-logo a.tooltip span{
display: none;
}

.bereich-logo a.tooltip:hover span {
display:block;
position:absolute;
top:22rem;
left:2rem;
width:20rem;
border:0.1rem solid #000;
background-color:maroon;
color:#fff;
text-align: center;
padding: 0.5rem;
font-size:1.6rem;
text-shadow:none;
}


/* ############################################################ */
/* bereich info 1 */
/* ############################################################ */

.bereich-info1  {background-color:forestgreen;
background:  linear-gradient( forestgreen,darkgreen,forestgreen);
color:#88D786;
text-shadow:0.1rem 0.1rem 0.1rem #113E11;
letter-spacing:1px;
padding:0rem 0rem 0rem 0rem;
}

.bereich-info1 h2 {color:white;text-align:right;}

.bereich-info1 hr {margin:0 auto;margin-top:2rem;margin-bottom:2rem;
border:none;width:100%;
border-bottom: solid 0.1rem #DCEBF1;
height:0.1rem;}

.bereich-info1 .zelle {display:table-cell;
width:100%;
vertical-align:top;
border-collapse:separate;
}

.bereich-info1 .tabelle {display: table;
width:100%;
table-layout:fixed;
border-spacing: 2rem 1rem;
margin:0 auto;
}

.zelle-info1a {display: block;
width: 100%;
margin-bottom:2rem;
vertical-align:middle;
text-align:right;
padding:0rem 0rem 0rem 8rem;
}

.zelle-info1b {display: block;
width: 100%;
margin-bottom:2rem;
vertical-align:middle;
text-align:left;
padding:0rem 0rem 0rem 2rem;
}

.bereich-info1 .text {
}

.bereich-info1 .foto {
width:100%;
}

.bereich-info1 img {max-width: 70%;
border-radius:36rem;
height: auto;
padding:0rem;
margin:0rem;
box-shadow: 0rem 0rem 0.4rem #113E11;
border:solid 0.6rem #2C982C;
}

.bereich-info1 .fa {color:limegreen;
padding:1rem;
}




/* ========== links bereich-info1 ========== */

.bereich-info1 a:link, .bereich-info1 a:visited, .bereich-info1 a:active{
display:inline-block;
background-color:#116411;
color:#B5F9B5;
box-shadow: 0rem 0rem 0.1rem #5CE25C ;
border:solid 0.1rem #072707;
text-shadow:none;
text-decoration: none;
padding-right:1rem;
padding-left:2rem;
border-radius:36rem;
}

.bereich-info1 a:hover  {
color:#064A06;
background-color:#0EA90E;
text-decoration: none;
}


/* ############################################################ */
/* bereich info 2 */
/* ############################################################ */

.bereich-info2  {background-color:#fff;
background-image:url(images/back1.jpg);
background-repeat:repeat;
background-position:50% 0%;
font-style:normal;
color:#E0F8E0;
text-shadow:0.1rem 0.1rem 0.1rem #113E11;
letter-spacing:1px;
}

.bereich-info2 h2 {color:#fff;margin-bottom:0;text-align:left;}

.bereich-info2 hr {margin:0 auto;margin-top:2rem;margin-bottom:2rem;
border:none;width:100%;
border-bottom: solid 0.1rem #DCEBF1;
height:0.1rem;
}

.bereich-info2 .zelle {display:table-cell;
width:100%;
vertical-align:top;
border-collapse:separate;
}

.bereich-info2 .tabelle {display: table;
width:100%;
table-layout:fixed;
border-spacing: 2rem 1rem;
margin:0 auto;
}
.zelle-info2a {display: block;
width: 100%;
margin-bottom:2rem;
vertical-align:middle;
border-radius:2rem;
text-align:right;
padding:0rem 2rem 0rem 0rem;
}

.zelle-info2b {display: block;
width: 100%;
margin-bottom:2rem;
vertical-align:middle;
border-radius:2rem;
text-align:left;
padding:0rem 8rem 0rem 0rem;
}

.bereich-info2 .text {
}

.bereich-info2 .foto {
margin:0;
padding:0rem 0rem 0rem 0rem;
}

.bereich-info2 .fa {
color:limegreen;
padding:1rem;
}

.bereich-info2 .zelle-back {display: block;
width: 100%;
height:10vh;
background:forestgreen;
background: linear-gradient(to right bottom, transparent 50%, forestgreen 50%);
}

.bereich-info2 .zelle-back-ob {display: block;background-image:url(images/back1.jpg);
background-repeat:repeat;
background-position:50% 0%;
width: 100%;
height:10vh;
background:forestgreen;
background: linear-gradient(to right top, transparent 50%, forestgreen 50%);
}

.bereich-info2 img {max-width: 70%;border-radius:36rem;
height: auto;
padding:0rem;
margin:0rem;
box-shadow: 0rem 0rem 0.4rem #113E11;
border:solid 0.6rem #2C982C;
}

/* ========== links bereich-info2 ========== */

.bereich-info2 a:link, .bereich-info2 a:visited, .bereich-info2 a:active{
display:inline-block;
background-color:#167E16;
color:#B5F9B5;

box-shadow: 0rem 0rem 0.1rem #89EB89 ;
border:solid 0.1rem #0C450C;
text-shadow:none;
text-decoration: none;
padding-right:2rem;
padding-left:1rem;
border-radius:36rem;
}

.bereich-info2 a:hover  {
color:#064A06;
background-color:#0EA90E;
text-decoration: none;
}

/* ############################################################ */
/* bereich info 3 */
/* ############################################################ */

.bereich-info3  {background-color:forestgreen;
background:    linear-gradient( forestgreen,darkgreen,forestgreen);
color:#88D786;
text-shadow:0.1rem 0.1rem 0.1rem #113E11;
letter-spacing:1px;
}

.bereich-info3 h2 {color:#fff;margin-bottom:0;text-align:right;}

.bereich-info3 hr {margin:0 auto;margin-top:2rem;margin-bottom:2rem;
border:none;width:100%;
border-bottom: solid 0.1rem #DCEBF1;
height:0.1rem; }


.bereich-info3 .zelle {display:table-cell;
width:100%;
vertical-align:top;
border-collapse:separate;
}

.bereich-info3 .tabelle {display: table;
width:100%;
table-layout:fixed;
border-spacing: 2rem 1rem;
margin:0 auto;
}

.zelle-info3a {display: block;
width: 100%;
margin-bottom:2rem;
vertical-align:middle;
border-radius:2rem;
text-align:right;
padding:0rem 0rem 0rem 8rem;
}

.zelle-info3b {display: block;
width: 100%;
margin-bottom:2rem;
vertical-align:middle;
border-radius:2rem;
text-align:left;
padding:0rem 0rem 0rem 2rem;
}

.bereich-info3 .text {
}

.bereich-info3 .foto {
margin:0;
padding:0rem 0rem 0rem 0rem;
}


.bereich-info3 .zelle-back {display: block;
width: 100%;
height:10vh;
background:forestgreen;
background: linear-gradient(to left bottom, transparent 50%,darkgreen 50%);
}

.bereich-info3 img {max-width: 70%;border-radius:36rem;
height: auto;
padding:0rem;
margin:0rem;
box-shadow: 0rem 0rem 0.4rem #113E11;
border:solid 0.6rem #2C982C;
}

.bereich-info3 .fa {
color:limegreen;
padding:1rem; 
}

/* ========== links bereich-info3 ========== */

.bereich-info3 a:link, .bereich-info3 a:visited, .bereich-info3 a:active{
display:inline-block;
background-color:#116411;
color:#B5F9B5;
box-shadow: 0rem 0rem 0.1rem #5CE25C ;
border:solid 0.1rem #072707;
text-shadow:none;
text-decoration: none;
padding-right:1rem;
padding-left:2rem;
border-radius:36rem;
}

.bereich-info3 a:hover  {
color:#064A06;
background-color:#0EA90E;
text-decoration: none;
}





/* ############################################################ */
/* bereich fuss */
/* ############################################################ */

.bereich-fuss {background-color:darkgreen;
color:#EFEFEF;
padding-top:2rem;
padding-bottom:0rem;
text-shadow:0.1rem 0.1rem 0.1rem #000;
background:    linear-gradient( darkgreen,forestgreen,forestgreen);
}

.bereich-fuss .tabelle {display: table;
width:100%;
table-layout:fixed;
border-spacing: 0rem 0rem;
}

.zelle-fuss {display:block;
width: 100%;
text-align:center;
padding:0rem;
}

.bereich-fuss .fa {
color:black;
text-shadow:0rem 0rem 0.1rem white;
}

.fussname {
color:#fff;
font-size:1.6rem;
padding:1rem 0rem 1rem 0rem;
text-transform:uppercase;
}

.totop {
display:inline-block;vertical-align:middle;text-align:center;
padding:1rem;
}

.totop .fa {color:#5FD03E;text-shadow:0.1rem 0.1rem 0.1rem black;
}


/* ========== links bereich-fuss ========== */

.fussmenu  {width:100%;
margin:0;
}

.fussmenu ul {
padding: 0rem;
margin:0;
}

.fussmenu  li { display: inline}

.fussmenu a:link, .fussmenu a:visited, .fussmenu:active{display:inline-block;
background:transparent;
color:#5FD03E;
margin:0.5rem 0.5rem 0.5rem 0.5rem;
text-shadow:0.1rem 0.1rem 0.1rem #000;
text-decoration:underline;

}

.fussmenu a:hover{ text-decoration:overline;
color:white;background:transparent;

}

.bereich-fuss i.fa:hover  {
color:#C5F5E2;
-webkit-transition: 1.4s ease-in-out;
transition:  1.4s ease-in-out;
}


/* ############################################################ */
/* bereich inhalt - auf den unterseiten */
/* ############################################################ */

.bereich-inhalt {
width: 100%;
background-color:forestgreen;
background:  linear-gradient( forestgreen,darkgreen,forestgreen);
color:#88D786;
text-shadow:0.1rem 0.1rem 0.1rem #113E11;
}

.bereich-inhalt h1, .bereich-inhalt h2,  .bereich-inhalt h3  {color:#D1F0D0;}

.bereich-inhalt .tabelle {display: table;
width:100%;
table-layout:fixed;
border-spacing: 0rem 0rem;
}

.zelle-inhalt{display:block;
width: 100%;
padding:5rem 2rem 5rem 2rem;
min-height:20rem;
}



/* links im bereich inhalt */

.bereich-inhalt a:link, .bereich-inhalt a:visited, .bereich-inhalt a:active{
color:#fff;
text-decoration:underline;
}

.bereich-inhalt a:hover{ text-decoration:overline;
color:#fff;
}


/* ############################################################ */
/* R  E  S  P  O  N  S  I  V  E */
/* ############################################################ */

/* ==================================== ab 360 pixel ================================== */
@media (min-width: 360px) {

.zelle-logo-a {
height:60vh;
}

}


/* ==================================== ab 480 pixel ================================== */
@media (min-width: 480px) {

.zelle-logo-a {
height:90vh;
}



}

/* ==================================== ab 600 pixel ================================== */
@media (min-width: 600px) {




.zelle-info1a {display: table-cell;
padding:0rem 0rem 0rem 2rem;
}

.zelle-info1b {display: table-cell;
padding:0rem 0rem 0rem 0rem;
}


.zelle-info2a {display: table-cell;
padding:0rem 0rem 0rem 0rem;
}

.zelle-info2b {display: table-cell;
padding:0rem 2rem 0rem 0rem;
}

.zelle-info3a {display: table-cell;
padding:0rem 0rem 0rem 2rem;
}

.zelle-info3b {display: table-cell;
padding:0rem 0rem 0rem 0rem;
}


zelle-fuss {display:table-cell;
}

.bild-im-text {
max-width:80%;
}

.bild-im-text-re {
max-width:80%;
}

}

/* ==================================== ab 640 pixel ================================== */
@media (min-width: 640px) {





.zelle-inhalt {
padding:5rem 5rem 5rem 5rem;
}

}


/* ==================================== ab 680 pixel ================================== */
@media (min-width: 680px) {

html {
font-size:64%;
}


}

/* ==================================== ab 768 pixel ================================== */
@media (min-width: 768px) {

html {
font-size:66.5%;}

.zelle-logo-a {
height:50vh;
}

.hpname1 {display:block;
}

.zelle-inhalt {text-align:justify;}




}

/* ===================================== ab 800 pixel ================================= */

@media (min-width: 800px) {


.bild-im-text {float:left;max-width:30%;
margin-top:1rem;margin-right:1.5rem;margin-bottom:0rem;
margin-left:0rem;
}

.bild-im-text-re {float:right;max-width:30%;
margin-top:1rem;margin-left:1.5rem;margin-bottom:0rem;
margin-right:0rem;
}

}

/* ===================================== ab 1024 pixel ================================= */

@media (min-width: 1024px) {

html {
font-size:69%;}

.zelle-logo-a {
height:60vh;
}



.bereich-info1  {
background: radial-gradient( farthest-side,forestgreen,darkgreen,forestgreen) ;
}

.bereich-info3  {
background: radial-gradient( farthest-side,forestgreen,darkgreen,forestgreen) ;
}

.bild-im-text {
margin-top:1rem;margin-right:2rem;margin-bottom:0.5rem;
margin-left:0rem;
}

.bild-im-text-re {
margin-top:1rem;margin-left:2rem;margin-bottom:0.5rem;
margin-right:0rem;
}



}

/* ===================================== ab 1280 pixel ================================= */

@media (min-width: 1280px) {

html {
font-size:72%;}


.hpname1 {
font-size: 5rem;
line-height:6rem;
}


.zelle-info1a {
padding:0rem 0rem 0rem 8rem;
}

.zelle-info1b {
padding:0rem 0rem 0rem 2rem;
}


.zelle-info2a {
padding:0rem 2rem 0rem 0rem;
}

.zelle-info2b {
padding:0rem 8rem 0rem 0rem;
}

.zelle-info3a {
padding:0rem 0rem 0rem 8rem;
}

.zelle-info3b {
padding:0rem 0rem 0rem 2rem;
}

.zelle-inhalt {
padding:5rem 8rem 5rem 8rem;
}

}

/* ===================================== ab 1420 pixel ================================= */

@media (min-width: 1420px) {

html {
font-size:82%;
}



}





/* +  +  +  +  + +  +  +  +  +  C O D E ENDE  +  +  +  +  +  +  +  +  +  + */