/* = = = = = = = = = = = = = = = = = 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 { 
	overflow: auto;
	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:#f2f2f2; /*und was ist das hier?*/
color:#f2f2f2; /*was ist das hier?*/
}

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

.tabellefarbe1 { background-color:#FFD700;border-bottom:solid 1px transparent} /*keinen Strich im oberen Gelb bitte*/

.tabellefarbe2 {background-color:#f2f2f2;border-bottom:solid 1px black} /*Text der Webseite, Hintergrund*/

.tabellefarbe3 {background-color:#FFD700 ;border-bottom:solid 1px black} /*hintergrund fußzeile mit webadresse als text*/

.tabellefarbe4 { background-color:#006400; /*lo and behold die Menüzeile....war BLACK*/
/*background-image:url(images/bg.jpg);*/
background-repeat:repeat-y;
background-position:50% 50%;
border-bottom:solid 1px black;
}


.tabellefarbe6 { background-color:#006400; /*wo auch immer diese Tabelle ist*/
/*background-image:url(images/bg.jpg);*/
background-repeat:repeat;
background-position:50% 50%;
border-bottom:solid 1px #006400;
}

.tabellefarbe7 { background-color:#006400; /*das feld mit den FB und YT Links*/
/*background-image:url(images/back4.png);*/
background-repeat:repeat;
background-position:50% 50%;
border-bottom:solid 1px #006400;
}

.text1  {color:#006400;/*text-shadow: 1px 1px 1px ##FFD700*/}
.text2  {color:#FFD700;/*text-shadow: 1px 1px 1px #006400;*/}
.text3  {color:#006400;/*text-shadow: 1px 1px 1px black;*/} /*FFD700*/


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


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

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

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

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

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

/* -- ueberschriften extra --  */
h1.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;
text-align:left;
}

h2.extra {
font-size: 3.0rem;
line-height: 3.9rem;
letter-spacing :0.2rem;
font-variant:small-caps;
font-style:italic;
margin-bottom: 0rem;
font-weight:normal;
text-align:left;
}

h3.extra {
font-size:2.2rem;
line-height: 2.5rem;
margin-top: 1rem;
margin-bottom:1.5rem;
font-variant:small-caps;
text-align:left;
}
/* --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#006400;
-moz-box-shadow:  0rem 0rem 1.2rem #006400;
box-shadow:  0rem 0rem 1.2rem #006400;
}

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

/*neu*/
.bild-klein {display:block;max-width:50%;border:solid 0.1rem black;
margin-top:1rem;margin-left:1.5rem;margin-bottom:1rem;
}

.bild-gif {display:block;max-width:100%;border:none;
margin-top:1rem;margin-left:1.5rem;margin-bottom:1rem;
}

.logoback {background-color:#FFD700;
background-image:url(images/Logo2010PelleNeckar.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
background-size:initial;
height: 50rem;
}





.fussname {
font-size: 1.7rem;
line-height: 1.9rem;
letter-spacing :0rem;
font-style:italic;
color:#006400; /*Schriftfarbe von www.teckel-on-tour.de ganz unten in Grün geändert*/
}

.adresse {padding:0.5rem;text-align:center;
/*background-image:url(images/back3.png);*/
background-repeat:repeat;
background-position:50% 50%;
color:#FFD700; /*Schriftfarbe Adresse*/
border:solid 0.1rem #FFD700;
-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 #FFD700;
-moz-box-shadow:  0rem 0rem 1.2rem #000 , inset 0rem 0rem 0.1rem #FFD700;
box-shadow:  0rem 0rem 1.2rem #000 , inset 0rem 0rem 0.1rem #FFD700;
}


.zitat {
font-size: 2.0rem;
padding:1.5rem;
color:#618B2C;
text-shadow: 0rem 0rem 0.2rem #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;
}

/* neu */
.bild-klein {max-width:50%;
float:left;margin-top:1rem;margin-right:2rem;margin-bottom:0rem;
}

.bild-gif {max-width:100%;border:none;
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;
}

/* neu */
.bild-klein {max-width:50%;
float:left;margin-top:1rem;margin-right:2rem;margin-bottom:0rem;
}

.bild-gif {
float:left;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;
}

/* neu */
.bild-klein {max-width:50%;
float:left;margin-top:1rem;margin-right:2rem;margin-bottom:0rem;
}

.bild-gif {max-width:23rem;border:none;
margin-top:1rem;margin-left:1.5rem;margin-bottom:1rem;
}

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

/* neu */
.bild-klein {max-width:50%;
float:left;margin-top:1rem;margin-right:2rem;margin-bottom:0rem;
}

.bild-gif {max-width:27rem;border:none;
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;
}
/* neu */
.bild-klein {max-width:50%;
float:left;margin-top:1rem;margin-right:2rem;margin-bottom:0rem;
}

.bild-gif {max-width:100%;border:none;
margin-top:1rem;margin-left:2rem;margin-bottom:0rem;
}

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

}

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