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


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

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}


html, body {
font-family:'open_sanslight',georgia, tahoma, arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
font-size:62.5%;
line-height:1.4;
font-weight:normal;
height:100%;
}

body {
font-size:1.6rem;
margin: 0 auto;
}

/* zusätzliche zeilenabstände, absatz */
.content br {
line-height:.6;
}

p.break  {
line-height:7rem;margin:0;
}


/* überschriften */

h1, h2, h3, h4, h5 {
font-family:'robotolight';
font-weight:normal;
}

h1 {
font-size:3.3rem;
line-height: 3.5rem;
margin-top: 0rem;
margin-bottom: 4.2rem;
letter-spacing:.0rem;
}

h2 {
font-size:2.4rem;
line-height: 2.6rem;
margin-top: 0rem;
margin-bottom: 3.5rem;
letter-spacing:0rem;
}

h3 {
font-size:1.9rem;
line-height: 2.1rem;
margin-top: 2.1rem;
margin-bottom:1.4rem;
letter-spacing:0rem;
}



/* allgemeine links  */

a {background-color:transparent;
color:#283200;
text-decoration: underline;
}

a:hover  {color:#283200;
background-color:transparent;
text-decoration:none;
}


/* quelltext-erklärungen - wenn vorhanden */
pre {white-space:pre-wrap;
font-size:1.5rem;
padding:1rem 0.5rem 1rem 0.5rem;
margin-bottom:2rem;
text-align:center;
border:solid .1rem #80976F;
font-family:'open_sanslight';

}


/* ############################################################ */
/*  speziell*/
/* ############################################################ */

.container_haupt {
margin:0 auto;
width:100%;padding:0rem;
background:#2f2f2f;
}

/* bilder allgemein standard - anpassen der grösse  */
img {width: 100%;
height: auto;
margin:0 auto;

}

.dreieck {position:absolute;display:block;
left:50%;
bottom:0;
margin-left:-2rem;
border-top: 2rem solid transparent;
border-right: 2rem solid transparent;
border-bottom: 2rem solid #596B4D;;
border-left: 2rem solid transparent;
}

.name {display:block;
font-family:'robotolight';
font-size:2rem;
line-height:2.2rem;
letter-spacing:0rem;
color:white;
text-transform:uppercase;
text-shadow: 0 -1px 1px #666666, 0 1px 1px #000;
}



/* ############################################################ */
/*  - - - - - - - - bereich header  - - - - - - - -  */

.header-wrapper {
padding:0rem;
margin:0 auto;background-image:url(../images/logo03.jpg);
background-position:50% 50%;
background-repeat:no-repeat;
background-size:cover;
}

.header {display:table;width:100%;
height:30rem;
border: solid 0rem white;
background:rgba(0,0,0,.3);
padding:0rem 0rem;
margin:0 auto;
padding:0rem;
}

.headerbox-1a {display:table-cell;margin:0rem 0 0 0;
text-align:center;
padding:0rem 0;
}


/* ############################################################ */
/* bereich kopf */
/* ############################################################ */

.kopf-main {
padding:0;
margin:0 auto;
}

.kopf {display:table;
width:100%;
margin: 0 auto;
padding:0rem 0 0rem 0;
}

.kopfbox-1a  {
vertical-align:top;
padding:0rem ;
display:block;
text-align:center;
}



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

.logo-main {
padding:0;
margin:0 auto;
color:#fff;background:xxred;
}

.logo {display:table;width:100%;
margin: 0 auto;text-align:center;
padding:2rem 0;
}

.logobox-1a  {
vertical-align:top;
padding:1rem .5rem ;
display:block;
text-align:center;
}

.logobox-1b  {display:block;
padding:1rem 1rem ;
text-align:center;
vertical-align:middle;
font-size:1.2rem;
}


/*  liste info */

.logo .info  {display:inline-block;
background:rgba(255,255,255,.3);
text-align:center;
margin:0;padding:0 .5rem;
box-shadow:0px 0px 4px #4F4F4F;
border-radius:1rem;
}

.logo .info h3  {
margin:0;
padding:.5rem;
}

.logo .info ul  {display:inline-block;
margin:0;
padding:1rem .5rem 0 .5rem;
}

.logo .info li  {
list-style-type: none;
margin:0;padding:0;
padding-bottom:1rem ;
padding-left:0rem;
text-transform:uppercase;
}


.logo .info h4 {display:inline;
color:#FFFFFF;
text-shadow: 0 -1px 1px #666, 0 1px 1px #000;
font-size:1.6rem;
line-height: 1.9rem;
margin:0rem;
letter-spacing:0rem;
}

.logo .info h4:before {
position:relative;
font-family:'FontAwesome';
top:0rem;
left:0rem;
padding-right:.5rem;
content:"\f006";
color:gold;
font-size:1.8rem;
}

/*  - - - - - - - - ENDE bereich header  - - - - - - - -  */



/* ############################################################ */
/* bereich content */
/* ############################################################ */


.content-main {background:#fff;
padding: 0;
margin:0;
min-height:40rem;
border-top:solid .4rem #6C7E5F;
}

.content-top h3 {
background:#2f2f2f;
color:#fff;
padding:1rem 1rem;
margin:0;
text-align:center;
text-transform:uppercase;
}

.content {
margin: 0 auto;
padding:4rem 3rem ;
}

.contentbox-1a {
color:#283200;
display:block;
text-align:left;
}

.content h1,.content h2, .content h3 {
color:#283200;
}

/* - - - - - bilder im inhaltsbereich -responsive anpassen der grösse - - - - - */

.content .bild-container {
display:block;
margin:0 -2rem 0 -2rem;
}

.boxformat {position:relative;
background:#596B4D ;/* IE9*/
background:linear-gradient(to right top,#363636, #596B4D , #363636);
margin-bottom:.5rem;
}

.boxformat2 {
background:#596B4D ;/* IE9*/
background:radial-gradient(circle,#596B4D,#363636 );
margin-bottom:.5rem;
}

.boxformat3 {border:dashed .1rem #596B4D;
margin-bottom:.5rem;
}

.content .less-margin {margin-bottom:0rem; }

.content .text {display:block;
color:#fff;
padding:3rem 2rem;
text-align:left;
min-height:15rem;
}

.content .text2 {display:block;
color:#283200;
padding:3rem 2rem;
text-align:left;
min-height:15rem;
}

.content .text:first-line {color:yellowgreen;
text-transform:uppercase;
}

.content .text2:first-line {color:#579A25;
text-transform:uppercase;
}

.pic {
position:relative;
}

.icon { display:block;color:yellowgreen;
}

.icon .fa { font-size:12rem;
text-shadow:.1rem .1rem .3rem #2F2F2F;
text-shadow: 0 -1px 1px #666, 0 1px 1px #000;
}

.content .span_1_of_2 {display:block; }

.content .span_1_of_2b {display:block;
border:dashed .1rem #596B4D;
text-align:center; }

.content .span_1_of_3 {display:block; }

.content  .span_1_of_4 {display:block; }

.content .bild-container a {text-decoration:none;padding:.2rem .5rem;
text-transform:uppercase;color:#fff;
}

.content .bild-container a:hover {text-decoration:none;padding:.2rem .5rem;
text-transform:uppercase;color:yellowgreen;
}

.content .bild-container a:before {position:relative;
font-family:'FontAwesome';
top:0rem;
left:0rem;
padding-right:.5rem;
content:"\f178";
color:yellowgreen ;
}

.content .span_1_of_3  .news {position:absolute;
background:rgba(0,0,0,.5);
font-size:1.3rem;
color:yellowgreen;font-weight:bold;
text-transform:uppercase;
top:0rem;left:0;
width:13rem;
height:auto;text-align:left;
padding:1rem;
}

.content .span_1_of_3 .news span {
font-size:1.5rem;
color:gold;
}

.content .span_1_of_3 .news i {
font-style:normal;
color:orange;
}


/* ############################################################ */
/* bereich fusstop */
/* ############################################################ */


.fusstop-main {text-align:center;
padding:0;
margin:0 auto;
color:#fff;
border-top:solid .4rem #6C7E5F;
background:#596B4D;
background:linear-gradient(to  bottom,#3a3a3a, #596B4D );
}

.fusstop-main h3 {margin:1rem 0;text-align:left;
color:yellowgreen;
font-size:1.6rem;
border-bottom:dotted .1rem gold;
}



.fusstop {display:table;width:100%;
vertical-align:top;
height:20rem;
margin: 0 auto;
padding:2rem 0;font-size:1.4rem;
}

.fusstopbox-1a  {display:block;
padding:1rem ;
text-align:left;

}

.fusstopbox-1b  {display:block;
padding:1rem ;
text-align:left;
}

/*  contact  */

.fusstopbox-1a .contact .fa {
width:2rem;
color:yellowgreen ;
}

.fusstopbox-1a .contact   {width:26rem;
padding:0rem;
margin:0 auto;
}

.fusstopbox-1a .contact  ul {text-align:left;
padding:0rem;
margin:0;
}

.fusstopbox-1a .contact  li {list-style:none;
padding:0rem;
margin:0;
}


/* ############################################################ */
/*  fusstop-menu */
/* ############################################################ */

.fusstop-menu {width:26rem;
margin:0 auto;
padding:0;
}

.fusstop-menu ul {
text-align:left;
margin:0;
padding:0;
}

.fusstop-menu li {list-style-type: none;
margin:0;
padding:0 ;
}

.fusstop-menu li a {text-align:left;
text-decoration : none;
font-size:1.4rem;
letter-spacing:0rem;
padding:.1rem ;
margin:.1rem 0;
color:#fff  ;
}

.fusstop-menu li a:hover {
color:white;
background:transparent;
}


/* die font-icons  im menü */

.fusstop-menu li a:before {
position:relative;
font-family:'FontAwesome';
top:.2rem;
left:0rem;
content:"\f178";
padding-right:1rem;
color:yellowgreen ;
font-size:1.3rem
}

.fusstop-menu li a:hover:before {
color:#fff;
}

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


.fuss-main {color:#fff;
margin:0 auto;
}

.fuss {display:table;width:100%;
margin: 0rem auto;
padding:0;
}

.fuss-main a {
text-decoration:none;
}

.fussbox-1a  {display:block;background:#2f2f2f;
text-align:center;
padding:0rem .5rem;
}

.fussbox-1b  {display:block;background:#3a3a3a;
text-align:center;
padding:1rem .5rem;
}

.fussname {display:block;
font-family:'robotolight';
text-align:center;
padding:.5rem;
font-size:1.2rem;
line-height:1.5rem;
letter-spacing:0.2rem;
color:#fff;
}



/* ############################################################ */
/* bereich fussmenu */
/* ############################################################ */


.fussmenu  {width:100%;margin:0 auto;padding-bottom:.5rem;padding-top:.5rem;
}

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

.fussmenu li { display:inline;list-style: none;
width:100%;
line-height:2rem;
margin-left:0rem;
padding-left:.5rem;
padding-right:.5rem;
}

.fussmenu a {font-size:1.1rem;
line-height:1.4rem;
width : 100%;
text-align:left;
color:#fff;
text-decoration:none;
padding:0rem;
letter-spacing:.2rem;
}

.fussmenu a:hover {
color:#000;
text-shadow:none;
background:transparent;
text-decoration: underline;
}



/* ############################################################ */
/* M E D I A   Q U E R I E S - BILDSCHIRMABFRAGEN*/
/* ############################################################ */


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

/* keine angabe */

}


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

html {
font-size:80%;
}


}


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

/* keine angabe */


}


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

/* keine angabe */


}


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

.content {
padding:4rem;
}


}


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


.fusstopbox-1a {width:50%;
display:table-cell;vertical-align:top;
border-right:dotted .1rem gold;
}

.fusstopbox-1b   {width:50%;
display:table-cell;vertical-align:top;
}

.fusstop {height:20rem; }


}


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


/* keine angabe */

}


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


.content .bild-container {width:100%;
display:table;
margin:0 auto;
border-collapse: separate;
border-spacing: .5rem .25rem;
font-size:1.2rem;
}

.content .span_1_of_2 {width: 50%;display:table-cell;vertical-align:top;}
.content .span_1_of_2b {width: 50%;display:table-cell;vertical-align:middle;}
.content .span_1_of_3 {width: 33.33%;display:table-cell;vertical-align:top; }
.content .span_1_of_4 {width: 25%;display:table-cell;vertical-align:top; }


}


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

@media (min-width: 1024px) {

.dreieck {
display:none;
}

.name {
font-size:3.2rem;
line-height:3.6rem;
}

.logo {padding:0 0 2rem 0;
}

.content {
padding:5rem 5rem 7rem 5rem;
}



}

/* ===================================== ab 1200 pixel ================================= */

@media (min-width: 1200px) {

html {
font-size:90%;
}


}


/* ===================================== ab 1300 pixel ================================= */

@media (min-width: 1300px) {

/* keine angabe */


}

/* ===================================== ab 1400 pixel ================================= */

@media (min-width: 1400px) {

html {
font-size:95%;}

.content {
padding:5rem 7rem 7rem 7rem;
}



}







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