/*************************************/
/*allg. Styles für alle Seitenbreiten*/

html{
margin: 0px;
padding: 0px;
}

body {
background-image: linear-gradient(42deg, #006600, #66cc33); 
margin: 0px;
padding: 0px;
}

body, table, tr, td, div, span {
font-family: verdana, helvetica, arial;
font-size: 11pt;
color: #000000;
}

.seiteninhalt{
width: 80%;
max-width: 1014px;
text-align: left;
background: #ffffff;
padding-left: 5%;
padding-right:5%;
border: dotted 5px #66cc33;
border-radius: 15px;
}

.greenBox {
background-color:greenyellow; 
padding:20px; 
border-bottom-left-radius: 10px; 
border-bottom-right-radius: 10px;
border-top-left-radius: 10px; 
border-top-right-radius: 10px;	
}

.titelLogo{
position: relative;
max-width: 350px;
min-width: 220px;
width:50%;
height:auto;
}

.lageplan{
position: relative;
max-width:500px;
width:99.4%;
height:auto;
border-radius:15px;
border: solid 2px;
}

.faltblatt{
position: relative;
border-radius:15px;
border: solid 2px;
height: 439px; 
margin-left:0px;
margin-right:0px;
margin-top:5px;
margin-bottom:5px;
}


.einzelfotoGross{
position: relative;
max-width:800px;
width:100%;
height:auto;
border-radius:15px;
border: solid 2px;
}

.fotoalbum{
border-radius:15px;
border: solid 2px;
}

.textmarker {
background-color:yellow;	
}

.nobrtext {
white-space:nowrap;	
}

.text-blau {
color:#407bb6;
}

.ueberschrift-blau {
font-size: 13pt;
color: #0066CC;
}

.ueberschrift-orange {
font-size: 13pt;
color: #ff6600;
}

.ueberschrift-weiss {
font-size: 13pt;
color: #ffffff;
padding:3px;
background-image: linear-gradient(90deg, #66cc00, transparent); 
}


A.nav:link, 
A.nav:active, 
A.nav:visited {
/* font-size: 11pt;	*/
white-space:nowrap;	
color: #f36100;         
font-weight: bold; 	
text-decoration: none; 
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
line-height: 20pt;
}  

A.nav:hover  { 	
/* font-size: 11pt; */
white-space:nowrap;	
color: #000000;         
font-weight:  bold; 	
text-decoration: underline;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #66cc00;
border-radius: 5px;
line-height: 20pt;
}   

/* Link zur Streckenübersicht */
A.navZaun:link, 
A.navZaun:active, 
A.navZaun:visited {
/* font-size: 11pt; */
white-space:nowrap;	
color: #ffffff;         
font-weight: bold; 	
text-decoration: none; 
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
background-color: forestgreen; 
border-radius: 5px;
line-height: 20pt;
}  

A.navZaun:hover  { 
/* font-size: 11pt; */
white-space:nowrap;	
color: #000000;         
font-weight: bold; 	
text-decoration: underline;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #66cc00;
border-radius: 5px;
line-height: 20pt;
}   


/* Links zu Datenschutz, Impressum, Disclaimer */
A.navLegal:link, 
A.navLegal:active, 
A.navLegal:visited {
color : #888888;         
font-weight : normal; 	
text-decoration : none; 
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
line-height:2em;
font-size:10pt;
}  

A.navLegal:hover  { 
color : #000000;         
font-weight : normal; 	
text-decoration : underline;
padding-left: 5px;
padding-right: 5px;
padding-top:5px;
padding-bottom:5px;
line-height:2em;
font-size:10pt;
}  


/* Backlinks */
A.backlink:link, 
A.backlink:active, 
A.backlink:visited {
white-space:nowrap;		
font-size: 14pt;
font-weight: bold;
color: #f36100;         
text-decoration: none; 
}  

A.backlink:hover  { 	
white-space:nowrap;	
font-size: 14pt;
font-weight: bold;
color: #339900;         
text-decoration: underline;
}   


/* Standard-Links */
A.link:link, 
A.link:active, 
A.link:visited {
color: #f36100;         
text-decoration: none; 
}  

A.link:hover  { 	
color: #339900;         
text-decoration: underline;
}   



/********************************************************************/
/* Wackelnd animiertes Div mit "navZaun"-Link zur Streckenübersicht */
/* .a_anim_shake { ... AAnimShake 10s <-  Gesamt-Dauer der Animation inkl. Pause vor Wiederholung*/
/* Damit eine Pause von 5 s entstehen kann, wurde die Gesamtdauer von ursprünglich 5s verdoppelt auf 10s und  bei den Keyframes alle Prozentangaben halbiert, sodass die eigentliche Animation nach 50% endet */

/* display: flow-root; ist erforderlich für Darstellung in richtiger Größe auf Handy */

.my_anim_shake {
	/* display: inline-block; */
	display: flow-root; 
	-webkit-animation: MyAnimShake 10s ease-in-out 2s infinite;
    -moz-animation: MyAnimShake 10s ease-in-out 2s infinite;
    animation: MyAnimShake 10s ease-in-out 2s infinite;
	border: 0px;
	border-radius: 5px;
	}



@-webkit-keyframes MyAnimShake {
    0%,50%,7.5%,20% {
        -webkit-transform: none
    }

    10%,12% {
        -webkit-transform: translateX(3px) rotate(2deg)
    }

    11%,13% {
        -webkit-transform: translateX(-3px) rotate(-2deg)
    }

    14%,16% {
        -webkit-transform: translateX(2px) rotate(1deg)
    }

    15%,17% {
        -webkit-transform: translateX(-2px) rotate(-1deg)
    }

    18% {
        -webkit-transform: translateX(1px) rotate(1deg)
    }

    19% {
        -webkit-transform: translateX(-1px) rotate(-1deg)
    }
}

@-moz-keyframes MyAnimShake {
    0%,50%,7.5%,20% {
        -moz-transform: none
    }

    10%,12% {
        -moz-transform: translateX(3px) rotate(2deg)
    }

    11%,13% {
        -moz-transform: translateX(-3px) rotate(-2deg)
    }

    14%,16% {
        -moz-transform: translateX(2px) rotate(1deg)
    }

    15%,17% {
        -moz-transform: translateX(-2px) rotate(-1deg)
    }

    18% {
        -moz-transform: translateX(1px) rotate(1deg)
    }

    19% {
        -moz-transform: translateX(-1px) rotate(-1deg)
    }
}

@keyframes MyAnimShake {
    0%,50%,7.5%,20% {
        transform: none
    }

    10%,12% {
        transform: translateX(3px) rotate(2deg)
    }

    11%,13% {
        transform: translateX(-3px) rotate(-2deg)
    }

    14%,16% {
        transform: translateX(2px) rotate(1deg)
    }

    15%,17% {
        transform: translateX(-2px) rotate(-1deg)
    }

    18% {
        transform: translateX(1px) rotate(1deg)
    }

    19% {
        transform: translateX(-1px) rotate(-1deg)
    }
}


/*Scrollbutton unten rechts*/
#w2b-StoTop {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; 
width:30px;
height:50px;
/* filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE'); */
text-align:center;
padding:5px;
position:fixed;
bottom:30px;
right:0px;
cursor:pointer;
color:#444;
text-decoration:none;
background-color:#ff6600;
color: #ffffff;
font-size:22pt;
}





/**********************/
/* Tablet und größer */
@media screen and (min-width:837px) 
{

.titelfoto{
position: relative;
max-width:180px;
width:30%;
height:auto;
border-radius:15px;
border: solid 2px;
margin-bottom:10px;
}

.streckenfoto320{
position: relative;
/* max-width: 320px; */
/* width:100%; */
/* width: 40%; */
/* min-width:300px; */
width:320px;
height:auto;
border-radius:15px;
border: solid 2px;
margin-bottom:5px;
}

.imgBox{
white-space: nowrap; /* nowrap = kein Umbruch (erlaubt überlappen von Inhalt), normal = Umbruch wenn Zeile voll */	
display:block;
/* text-align:center; */
/*align-content: center; */
border: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
padding: 0px;	
}	

.einzelfotoInBox{
position: relative;
max-width: 400px;
width:49%;
height:auto;
border-radius:15px;
border: solid 2px;
margin-left:0px;
margin-right:50%;
margin-top:2px;
margin-bottom:2px;
}

.fotosInBox{
position: relative;
max-width: 400px;
width:49%;
height:auto;
border-radius:15px;
border: solid 2px;
margin-left:0px;
margin-right:0px;
margin-top:2px;
margin-bottom:2px;
}

.flyer{
position: relative;
max-width: 300px;
width: 100%;
height: auto;
border-radius: 15px;
border: solid 2px;
margin-bottom: 5px;
margin-top: 5px;
}

}




/********************************/
/* Handy Querformat bis Tablet */
@media screen and (min-width:480px) and (max-width:836px)
{

.titelfoto{
position: relative;
max-width:180px;
width:30%;
height:auto;
border-radius:15px;
border: solid 2px;
margin-bottom:10px;
}

.streckenfoto320{
position: relative;
max-width: 380px;
/* width:100%; */
width: 80%;
min-width:340px;
height:auto;
border-radius:15px;
border: solid 2px;
margin-bottom:5px;
}

.imgBox{
white-space: nowrap; /* nowrap = kein Umbruch (erlaubt überlappen von Inhalt), normal = Umbruch wenn Zeile voll */	
display: block;
text-align: center;
align-content: center;
border: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
padding: 0px;	
}

.einzelfotoInBox{
position: relative;
width:48.2%;
height:auto;
border-radius:15px;
border: solid 2px;
margin-left:0px;
margin-right:50%;
margin-top:2px;
margin-bottom:2px;
}

.fotosInBox{
position: relative;
width:48.2%;
height:auto;
border-radius:15px;
border: solid 2px;
margin-left:0px;
margin-right:0px;
margin-top:2px;
margin-bottom:2px;
}

.flyer{
position: relative;
max-width: 300px;
width:100%;
height:auto;
border-radius:15px;
border: solid 2px;
margin-bottom:5px;
margin-top:5px;
}

}


/********************/
/* Handy Hochformat */
@media screen and (max-width:479px)
{

.titelfoto{
position: relative;
max-width:150px;
width:31%;
height:auto;
border-radius:15px;
border: solid 2px;
margin-bottom:0px;
}

.streckenfoto320{
position: relative;
width:99.4%;
height:auto;
border-radius:15px;
border: solid 2px;
margin-bottom:5px;
}

.imgBox{
white-space: normal; /* nowrap = kein Umbruch (erlaubt überlappen von Inhalt), normal = Umbruch wenn Zeile voll */	
display:block;
text-align:center;
align-content: center;
border: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
padding: 0px;	
}

.einzelfotoInBox{
position: relative;
width:99%;
height:auto;
border-radius:15px;
border: solid 2px;
margin-left:0px;
margin-right:0px;
margin-top:2px;
margin-bottom:2px;
}

.fotosInBox{
position: relative;
width:99%;
height:auto;
border-radius:15px;
border: solid 2px;
margin-left:0px;
margin-right:0px;
margin-top:2px;
margin-bottom:2px;
}

.flyer{
position: relative;
width:99.4%;
height:auto;
border-radius:15px;
border: solid 2px;
margin-bottom:5px;
margin-top:5px;
}

}