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



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

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

*:before {

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

* {

-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:after {
content: " ";
display: table;
}

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

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

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

html {
font: 62.5%/1.4  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:fff;
color:#000;
}


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


h5 {
font-weight: 600;
margin: 0;
color:gold;
}


h4 {
font-weight: 600;
margin: 0;
color:gold;
}


h3 {
font-weight: 600;
margin: 0;
color:gold;
}


h2 {
font-weight: 600;
margin: 0;
color:gold;
}


h1 {
font-weight: 600;
margin: 0;
color:silver;
}

h1 {
font-size:2.5rem;
line-height: 2.7rem;
margin-top: 3rem;
margin-bottom: 3rem;
}

h2 {color:#8f8f8f;
font-size:2.3rem;
line-height: 2.1rem;
margin-top: 2rem;
margin-bottom: 2rem;
}

h3 {color:#8F8F8F;
font-size:1.9rem;
line-height: 2.0rem;
margin-top: 2rem;
margin-bottom: 0.7rem;
}

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


#top4b_inhalt {
background-color:#2c2c2c;
color:#7f7f7f;
text-align: justify;
vertical-align:top;
padding-top: 20px; padding-bottom: 60px;
padding-left: 30px;padding-right:30px;
letter-spacing:0px;
width:100%;
height: auto:
font-size: 16px;line-height: 22px;
font-family: tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
background-image:url('http://www.digital-photo-24.de/web_digital-photo/images/fv2.jpg');
background-repeat:repeat-x;
background-position:50% 0%;
}


ul {
margin: 0;
text-align: left;
}

.tabellefarbe1 { display:table;width: 100%;background-color:#666666;}
.zellefarbe1  {background-color:#666666;}

.tabellefarbe2 { display:table;width: 100%;background-color:gray}
.zellefarbe2  {background-color:gray}

.tabellefarbe3 { display:table;width: 100%;background-color:firebrick;}
.zellefarbe3  {background-color:firebrick;}

.tabellefarbe4 { display:table;width: 100%;background-color:black;}
.zellefarbe4  {background-color:black;}

.tabellefarbe5 { display:table;width: 100%;background-color:lightgrey;}
.zellefarbe5  {background-color:lightgrey;}

.tabellefarbe6 { display:table;width: 100%;background-color:white;}
.zellefarbe6  {background-color:black;}

.tabellefarbe7 { display:table;width: 100%;background-color:#66B3FF;}
.zellefarbe7  {background-color:#0482FF;}

.tabellefarbe8 { display:table;width: 100%;background-color:#191919;}
.zellefarbe8  {background-color:#191919;}


.text1  {color:#000;}
.text2  {color:#CEE7FF;}
.text3  {color:#6F6F6F;}
.text4  {color:silver;}
.text5  {color:dodgerblue;}
.text6  {color:gold;}

.hpname {font-family:georgia,trebuchet ms,comic sans serif;helvetica, sans-serif;
font-size: 2.4rem;
line-height: 2.5rem;
color:#004488;
text-shadow: 1px 1px 1px #fff;
letter-spacing :3px;
font-style:italic;
font-variant:small-caps
}

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

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



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


.eingerueckt {width: 100%;margin:0 auto;}




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


body {
font-size:2.0rem;
}

h1 {
font-size:3.4rem;
line-height: 3.5rem;
margin-top: 3.5rem;
margin-bottom: 3.5rem;
}

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

h3 {
font-size:2.0rem;
line-height: 2.1rem;
margin-top: 3rem;
margin-bottom: 1rem;
}


.col {
float: left;
}

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


.eingerueckt { width: 85%;margin:0 auto;}

.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: 50%;}



}

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


.col {
float: left;
}

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


.eingerueckt { width: 90%;margin:0 auto;}

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


}

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

body {
font-size:2.0rem;
}

.hpname {
font-size: 3.4rem;
line-height: 3.5rem;
letter-spacing :0px;
}

h1 {
font-size:3.0rem;
line-height: 3.1rem;
margin-top: 4rem;
margin-bottom: 4rem;
}

h2 {
font-size:2.5rem;
line-height: 2.6rem;
margin-top: 5rem;
margin-bottom: 3.5rem;
}

h3 {
font-size:2.1rem;
line-height: 2.2rem;
margin-top: 4rem;
margin-bottom: 2rem;
}
.col {
float: left;
}

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

.eingerueckt { width: 85%;margin:0 auto;}

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


}



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

@media (min-width: 1024px) {


body {
font-size:2.1rem;
}




.hpname {
font-size: 3.5rem;
line-height: 3.6rem;
letter-spacing :5px;
}

.fussname {
font-size: 1.3rem;
line-height: 1.4rem;
letter-spacing :6px;
font-style:italic;
}

.col {
float: left;
}

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

.eingerueckt {width: 85%;margin:0 auto;}

.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: 16.66%;}

}


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

@media (min-width: 1280px) {

.hpname {
font-size: 6rem;
line-height: 6.1rem;
letter-spacing :3px;
}