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



/* ====================================  allgemein mobile-first ====================================   */

*, *: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: 62.5%/1.5   /* 62.5% entspricht ca. 10px */   georgia,"trebuchet ms","Open Sans",helvetica, arial, serif;
font-weight: 400;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}


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

/* --- die  HINTERGRUND UND TEXTFARBEN- hier ändern sie oder fügen sie hinzu ---  */

.tabellefarbe1 { background-color:#5f882a;border-bottom:solid 1px black}

.tabellefarbe2 {background-color:url(images/back3.png);border-bottom:solid 1px black}

.tabellefarbe3 {background-color:black;border-bottom:solid 1px black}

.tabellefarbe4 { background-color:black;
background-image:url(images/back.png);
background-repeat:repeat-y;
background-position:50% 50%;
border-bottom:solid 1px black;
}


.tabellefarbe6 { background-color:black;
background-image:url(images/back3.png);
background-repeat:repeat;
background-position:50% 50%;
border-bottom:solid 1px black;
}

.tabellefarbe7 { background-color:black;
background-image:url(images/back4.png);
background-repeat:repeat;
background-position:50% 50%;
border-bottom:solid 1px black;
}

.text1  {color:#5F882A;text-shadow: 1px 1px 1px black}
.text2  {color:white;text-shadow: 1px 1px 1px black;}
.text3  {color:black;text-shadow: 1px 1px 1px white}


/* ---  die Farben ...Ende ---  */


.container_haupt {
margin-bottom:0rem;
width: 100%;
}

h1, h2, h3, h4, h5 {
font-weight: 600;
margin: 0;
color:#000;font-weight:bold;
}

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

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

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

/* -- ueberschriften extra --  */
h2.extra {
font-size: 3.6rem;
line-height: 3.9rem;
letter-spacing :0.2rem;
font-variant:small-caps;
font-style:italic;
margin-bottom: 0rem;
font-weight:normal;
}

h3.extra {
font-size:2.2rem;
line-height: 2.5rem;
margin-top: 1rem;
margin-bottom:1.5rem;
font-variant:small-caps;
}
/* --uebschr extra ende -- */

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

.rund {
-moz-border-radius:36rem;
-webkit-border-radius:36rem;
border-radius:36rem;
}

.box-shad {
-webkit-box-shadow:  0rem 0rem 1.2rem #000;
-moz-box-shadow:  0rem 0rem 1.2rem #000;
box-shadow:  0rem 0rem 1.2rem #000;
}

.lft {
text-align: left;
}

.rgt {
text-align: right;
}

.cntr {
text-align: center;
}

.col {
margin: 0 auto;
padding: 1.5rem;}

.col.flow-opposite { text-align:right;
}

.eingerueckt {padding:1rem;}
.eingerueckt2 {padding:1rem;}

.bild-ueber-container {max-width:17rem;
position:absolute;top:1.1rem;left:2rem;
}


.bild-im-text {display:block; max-width:100%;border:solid 0.1rem black;
margin-top:1rem;margin-right:1.5rem;margin-bottom:1rem;
}

.bild-im-text-re {display:block;max-width:100%;border:solid 0.1rem black;
margin-top:1rem;margin-left:1.5rem;margin-bottom:1rem;
}

.logoback {background-color:black;
background-image:url(images/logo_large.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
height:50rem;
}





.fussname {
font-size: 1.7rem;
line-height: 1.9rem;
letter-spacing :0rem;
font-style:italic;
}

.adresse {padding:0.5rem;text-align:center;
background-image:url(images/back3.png);
background-repeat:repeat;
background-position:50% 50%;
border:solid 0.1rem black;
-moz-border-radius:1.2rem;
-webkit-border-radius:1.2rem;
border-radius:1.2rem;
-webkit-box-shadow:  0rem 0rem 1.2rem #000 , inset 0rem 0rem 0.1rem #fff;
-moz-box-shadow:  0rem 0rem 1.2rem #000 , inset 0rem 0rem 0.1rem #fff;
box-shadow:  0rem 0rem 1.2rem #000 , inset 0rem 0rem 0.1rem #fff;
}


.zitat {
font-size: 4rem;
padding:1.5rem;
color:#618B2C;
text-shadow: 0rem 0rem 1rem #000;
letter-spacing :0.2rem;
font-style:italic;
}



/* ==================================== ab 360 pixel ================================== */

@media (min-width: 360px) {
#menu-button {display:none;
}

}



/* ==================================== ab 480 pixel ================================== */

@media (min-width: 480px) {



.col.span_1_of_1 { width: 100%;}
.col.span_1_of_2 { width: 100%;}
.col.span_1_of_3 { width: 100%;}
.col.span_1_of_4 { width: 100%;}
.col.span_1_of_6 { width: 100%;}


#menu-button {display:inline-block;}


.bild-ueber-container {max-width:18rem;
position:absolute;top:1.1rem;left:2rem;
}



}


/* ==================================== ab 600 pixel ================================== */

@media (min-width: 600px) {

#menu-button {display:none;}

.col {float: left;}
.col.span_1_of_4 { width: 50%;}

}

/* ==================================== ab 640 pixel ================================== */

@media (min-width: 640px) {

html {
font: 64%/1.5 georgia,"trebuchet ms","Open Sans",helvetica, arial, serif;
}


.col.span_1_of_1 { width: 100%;}
.col.span_1_of_2 { width: 50%;}
.col.span_1_of_3 { width: 100%;}
.col.span_1_of_4 { width: 50%;}
.col.span_1_of_6 { width: 50%;}

.col.flow-opposite { text-align:right;}

.eingerueckt {padding:2rem;}
.eingerueckt2 {padding:1rem;}

.bild-ueber-container {max-width:20rem;
position:absolute;top:1.1rem;left:2rem;
}

.bild-im-text { max-width:18.5rem;border:solid 0.1rem black;
float:left;margin-top:1rem;margin-right:1.5rem;margin-bottom:0rem;
}

.bild-im-text-re {max-width:18.5rem;border:solid 0.1rem black;
float:right;margin-top:1rem;margin-left:1.5rem;margin-bottom:0rem;
}


.logoback {
height:42rem;}
}


/* ==================================== ab 768 pixel ================================== */

@media (min-width: 768px) {

html {
font: 66.5%/1.5 georgia,"trebuchet ms","Open Sans",helvetica, arial, serif;
}

.col.span_1_of_1 { width: 100%;}
.col.span_1_of_2 { width: 50%;}
.col.span_1_of_3 { width: 33.33%;}
.col.span_1_of_4 { width: 50%;}
.col.span_1_of_6 { width: 33.33%;}


.col.flow-opposite { text-align:right;}

.eingerueckt {padding:2rem;}
.eingerueckt2 {padding:1.5rem;}

.absatz-stil {text-align:justify;}

.bild-ueber-container {max-width:22rem;
position:absolute;top:1rem;left:2rem;
}

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

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


}

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

@media (min-width: 1024px) {

html {
font: 68%/1.5 georgia,"trebuchet ms","Open Sans",helvetica, arial, serif;
}

.col.span_1_of_1 { width: 100%;}
.col.span_1_of_2 { width: 50%;}
.col.span_1_of_3 { width: 33.33%;}
.col.span_1_of_4 { width: 25%; padding-left: 5px;}
.col.span_1_of_6 { width: 33.33%;}

.col.flow-opposite { text-align:right;}

.eingerueckt {padding:3rem;}
.eingerueckt2 {padding:2rem;}




.bild-ueber-container {max-width:23rem;
position:absolute;top:1rem;left:2rem;
}

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

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

.zitat {
padding-left:10rem;
padding-right:10rem;
}

}


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

@media (min-width: 1280px) {

html {
font: 72%/1.5 georgia,"trebuchet ms","Open Sans",helvetica, arial, serif;
}


.col.flow-opposite { text-align:right;
}

.eingerueckt {padding:4rem;}
.eingerueckt2 {padding:3rem;}

.bild-ueber-container {max-width:100%;
position:absolute;top:1rem;left:5rem;
}

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

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

.zitat {
padding-left:20rem;
padding-right:20rem;
}

}

/* ===================================== ab 1500 pixel ================================= */

@media (min-width: 1500px) {

html {
font: 82%/1.5 georgia,"trebuchet ms","Open Sans",helvetica, arial, serif ;
}

.eingerueckt {padding:5rem;}
.eingerueckt2 {padding:4rem;}

.bild-ueber-container {max-width:100%;
position:absolute;top:7rem;left:10rem;
}
.bild-im-text {max-width:100%;
float:left;margin-top:1rem;margin-right:2rem;margin-bottom:0rem;
}

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

.zitat {
padding-left:25rem;
padding-right:25rem;
}

}

/* ============================ C O D E ENDE ========================================== */