/*
@font-face { 
    font-family: "Lucida Handwriting";
    src: local("Lucida Handwriting"), local("Lucida Handwriting Italic"),
    	 url('../fonts/LucidaHandwriting-Italic.eot');
    src: local("Lucida Handwriting"), local("Lucida Handwriting Italic"),
    	 url('../fonts/LucidaHandwriting-Italic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/LucidaHandwriting-Italic.woff2') format('woff2'),
         url('../fonts/LucidaHandwriting-Italic.woff') format('woff'),
         url('../fonts/LucidaHandwriting-Italic.ttf') format('truetype'),
         url('../fonts/LucidaHandwriting-Italic.svg#LucidaHandwriting-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
}
*/

@font-face { 
	font-family: "SCRIPTBL"; 
	src: local("SCRIPTBL"),
		 url('../fonts/SCRIPTBL.eot'); /* IE9 Compat Modes */
	src: local("SCRIPTBL"),
		 url('../fonts/SCRIPTBL.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fonts/SCRIPTBL.woff') format('woff'), /* Pretty Modern Browsers */
		 url('../fonts/SCRIPTBL.TTF')  format('truetype'), /* Safari, Android, iOS */
		 url('../fonts/SCRIPTBL.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/*
@font-face { 
	font-family: "Amaranth"; 
	src: local("Amaranth"),
		 url('../fonts/Amaranth-Regular.eot');
	src: local("Amaranth"),
		 url('../fonts/Amaranth-Regular.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Amaranth-Regular.woff') format('woff'),
		 url('../fonts/Amaranth-Regular.ttf')  format('truetype'),
		 url('../fonts/Amaranth-Regular.svg#svgFontName') format('svg');
}
*/

@font-face { 
	font-family: "Amaranth-Italic"; 
	src: local("Amaranth-Italic"),
		 url('../fonts/Amaranth-Italic.eot'); /* IE9 Compat Modes */
	src: local("Amaranth-Italic"),
		 url('../fonts/Amaranth-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fonts/Amaranth-Italic.woff') format('woff'), /* Pretty Modern Browsers */
		 url('../fonts/Amaranth-Italic.ttf')  format('truetype'), /* Safari, Android, iOS */
		 url('../fonts/Amaranth-Italic.svg#svgFontName') format('svg'); /* Legacy iOS */
}
/* ************************************* */
/* ************************************* */

@media screen and (min-width:1024px) {
	html{ /*Bei großen Bildschirmen die Seitenbreite begrenzen und zentrieren*/
		margin: 0 auto;
		max-width: 900px;
	    border: solid #4C4C4C;
	    border-width: medium;
	    display:block;
	    box-sizing: border-box;
		box-shadow: 9px 9px 7px black,
					-9px -9px 7px black;
	}
}

body
{
 	background: rgb(60,60,60); /*48*/
/*	background-image: linear-gradient(45deg, dimgray 0%, rgb(28, 28,23) 50%);
	background-image: linear-gradient(to top, dimgray 0%, rgb(28, 28,23) 50%);
*/
	color: white;
	text-shadow: 3px 3px 3px black;
	text-align: center;
	margin: 0 10 3 10;
	padding: 0;
/*	font-family: Calibri, sans-serif;*/
	font-size: 13pt;
	font-family: Amaranth-Italic;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
	}

H1
{
	font-family: Amaranth-Italic;/*Lucida Handwriting;*/
	font-size : 20pt;
	color: yellow;
	text-shadow: 3px 3px 8px black;
	text-align: center;
	margin-top: 14px;
	margin-bottom: -10px;
	line-height: 34pt;
}

H2
{
	font-size: 18pt;
	color: LawnGreen;
	text-shadow: 3px 3px 6px black;
	text-align: center;
	margin-bottom: 4px;
	margin-top:4px;
}

H3
{
	font-size: 16pt;
	color:orange;
	text-shadow: 3px 3px 6px black;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 5px;
}

H4
{
	font-size: 14pt;
	color: peachpuff;
	text-shadow: 3px 3px 6px black;
	text-align: center;
	margin:0px 0 0px 0;
}

h5
{
	font-size: 14pt;
	color: GoldenRod;
	text-shadow: 3px 3px 6px black ;
	text-align: center;
	margin-top: -5px;
	margin-bottom: -3px;
}

A:link
{
	font-size: 13pt;
	color: deepskyblue;/* cornflowerblue;*/
}

A:hover
{
	font-size: 13pt;
	color: fuchsia;
}

A:visited
{
	font-size : 13pt;
	color: lime;
}

A:active
{
	font-size : 13pt;
	color : violet;
}

P
{
	font-size : 13pt;
	line-height : 16pt;
	text-align: center; /*center;*/
	margin-bottom: 5px;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
}

div
{
	font-size: 13pt;
	text-align: center;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
}

hr{
	width: 98%;
	align: center;
	box-shadow: 2px 2px 1px black,
				-1px -1px 1px grey;
	height: 3px;
	background-color:darkturquoise;
	margin-top:16px;
	margin-bottom: 16px;
}

/* -------------------------------------*/

div.sitename{
	position:fixed;
	right:8px;
	top: -4px;
}

p.siteframe{
	line-height: 12pt;
	padding: 0px 1px 0px 1px;
	text-decoration: none;
	border: 2px silver double;
	border-radius: 6px;
	box-shadow: 3px 3px 3px black,
				-2px -2px 3px grey;
	margin-top: 16px;
}

p.sitevertical{
	line-height: 12pt;
	padding: 0px 1px 0px 1px;
	text-decoration: none;
	border: 2px silver double;
	border-radius: 6px;
	box-shadow: 3px 3px 3px black,
				-2px -2px 3px grey;
	transform: rotate(-90deg);
	margin: 48px -30px 0px 0px}

a.sitedescr{
	color: Yellow;
	font-size: 11pt;
	line-height: 12pt;
	text-decoration: none;
	text-shadow: 3px 3px 6px black;
}

/* -------------------------------------*/

body.start
{
	color: Yellow;
	font-family: SCRIPTBL;
	text-align: center;
}
h1.start
{
	font-family: SCRIPTBL;
	font-size : 28pt;
	color: yellow;
	margin-top: 0px;
	margin-bottom: 2px;
	text-shadow: 7px 7px 5px black;
}

h2.start{
	font-size : 22pt;
	color: yellow;
	text-shadow: 4px 4px 3px black;
	margin-top: -6px;
	line-height: 22pt;
}

hr.start{
	width: 55%;
	align: center;
	border-bottom: solid #202020 0px;
	box-shadow: 4px 4px 3px black,
				-2px -2px 2px grey;
	height: 3px;
	background-color: yellow;
} 

img.start
{
	text-align: center;
	width: 95%;
   	max-width: 800px;
   	height: auto;
}

/* -------------------------------------*/

p.angeln
{
	font-size: 13pt;
	line-height: 13pt;
	margin-top: 0px;
}

p.star
{
	margin: -6px 0 -4px 0;
	color:thistle;
}

a.angeln
{
	font-size: 12pt;
	text-decoration: underline;
}

h2.angeln
{
	font-size: 18pt;
	color: LawnGreen;
	text-shadow: 3px 3px 6px black;
	text-align: center;
	margin: 3px 0px 10px 0px;
 }

h4.angeln
{
	font-size: 16pt;
	margin: -6px 0 0px 0;
	color: gold;
	text-shadow: 3px 3px 6px black;
	margin:4px 0 8px 0;
}

h4.angeln1
{
	font-size: 16pt;
	margin: -6px 0 0px 0;
	color: orange;
	text-shadow: 3px 3px 6px black;
	margin:4px 0 8px 0;
}

span.reise{
	color: coral;
}


tr.gepaeck{
	text-align:center;
	font-size:15pt;
	color:yellow;
}

tr.tasche{
	text-align:center;
	font-size:14pt;
	background-color:#0f4200;
	color:chartreuse;
}

tr.fach1{
	background-color:#4b3400;
	width:100%;
}

tr.fach2{
	background-color:#342400;
	width:100%;
}

td.fach{
	padding: 2px 6px 2px 6px;
	text-align:left;
	width:100%
}

/*---------------*/

span.kamera{
	color: yellow;
}

span.kamera-alt{
	color: Navajowhite;
}

hr.kamera
{
	width:50%; 
	background-color:white; 
	height:0.5px; 
	margin-top:10px;
	margin-bottom:10px;
}

a.h2kamera{
	font-size: 18pt;
	color: LawnGreen;
	text-shadow: 3px 3px 6px black;
}

a.wandern
{
	font-size: 13pt;
	text-decoration: underline;
	color: deepskyblue;
}

hr.wandern
{
	width:80%; 
	background-color:white; 
	height:1px; 
	margin-top:-2px;
	margin-bottom:8px;
}

/* -------------------------------------*/

.justify
{
	text-align: justify;
	font-size: 13pt;
	margin-top:3px;
	padding: 0 4px 0 4px;
}

ul.justify li
{
	text-align: justify;
	list-style: disc outside none;
	display: list-item;
	margin-bottom:20px;
	margin-left: 1em;
	line-height: 22px;
	font-size: 13pt;
	margin-bottom: 4px;
}

ul.justify li.line
{
	border-bottom: 1px solid white;
	width:90%;
	text-align:left;
	padding:2px 0 8px 0;
	line-height:28px;
}	
	
ul ul.square li{
  list-style-type: square;
}

.justify a{
	font-size: 13pt;
}

.left
{
	text-align: left;
	font-size: 13pt;
}

.silver
{
	text-align: left;
	font-size: 10pt;
	color:silver;
}

/* -------------------------------------*/

.kursiv
{
	text-align: justify;
/*	font-style: italic;*/
	font-size: 12pt;
	line-height: 18px;
	color: #FFFFCC;
}
.kursiv a
{
	font-size: 12pt;
}

/* -------------------------------------*/

hr.dashed{
	border-style: dashed;
	width: 75%;
	align: center;
	box-shadow: 2px 2px 1px black,
				-1px -1px 1px grey;
	height: 1px;
	background-color: Yellow;
}

tr.dg{
	background-color:dimgray;
}

td.bisq{
	color:bisque;
	text-align:left;
	padding:4px 4px 4px 4px;
}

td.y{
	color:yellow;
	text-align:left;
	padding:4px 4px 4px 4px;
}

td.ym{
	color:yellow;
	text-align:center;
	padding:4px 4px 4px 4px;
}


td.s{
	color:white;
	text-align:center;
	padding:4px 4px 4px 4px;
}


p.copyright
{
	font-family: Amaranth-Italic;
	text-align: center;
	font-size: small;
	color: gray;
	text-shadow: 3px 3px 4px black;
	margin-top: -2px;
	margin-bottom: -2px;
}
/* ************************************* */

a.buttonlink
{
	font-size: 16pt;
	font-weight: bold;
	color: gold;
	text-decoration: none;
	text-shadow: 3px 3px 2px black;
	margin-left: -8px;
}

.glow-on-hover {
    border:medium;
    outline:aliceblue;
    background: dimgray;
	box-shadow: 0 0 2em black;
	cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
     background-color:dimgray;
   z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: dimgray;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/* ************************************* */

img.portrait
{
	text-align: center;
	font-style: italic;
	color: #FFFFCC;
	box-shadow: 9px 9px 7px black,
				-3px -3px 5px grey;
   height: 95%;
   width: auto;
}

img.shadow
{
	text-align: center;
	font-style: italic;
	color: #FFFFCC;
	box-shadow: 9px 9px 7px black,
				-3px -3px 5px grey;
   width: 95%;
   max-width: 800px;
   height: auto;
}


video.shadow
{
	text-align:center;
	box-shadow: 9px 9px 7px black,
				-3px -3px 5px grey;
	object-fit:cover;
	width: 90%;
    height: auto;
}

video.portrait
{
	text-align:center;
	box-shadow: 9px 9px 7px black,
				-3px -3px 5px grey;
	object-fit:cover;
	width: 90%;
    height: auto;
}

@media only screen and (max-device-height: 1200px) { /*PC*/
    img.portrait, video.portrait {
   		max-height: 600px;
   		max-width:400px;
    }
}
@media only screen and (max-width:768px) { /*entspricht dem gezoomten viewport bei Smartphones*/
    img.portrait, video.portrait {
   		max-height: 420px;
    }
}
@media only screen and ((min-device-width:800px) and (max-device-width:1200px)) { /*Mein Tablet - funktioniert nicht*/
    img.portrait, video.portrait {
   		max-height: 720px;
    }
}

/* -------------------------------------*/

/*Eigener Style für Bildunterschriften:*/
p.imagedescr
{
	text-align: center;
	color: #FFFFCC;
/*	font-family: Calibri, sans-serif;
	font-style: italic;
	font-size: 13pt;*/
	line-height: 18pt;
}

/* ************************************* */
/* ************************************* */

nav
{
/*	font-family: monospace;*/
}

ul
{
	margin: 0;
	padding-left: 0;
}

li
{
	line-height: 2.2; /*2.6 Abstand der Einträge im Menü untereinander*/
/*	font-family: Calibri, sans-serif;*/
	font-size : 15pt;
	color: white;
	display: block;
	position: relative;
	text-decoration: none;
	transition-duration: 0.5s;
}

li a
{
	color: #fff;
}

/* ************************************* */

li:hover,
li:focus-within {
	cursor: pointer;
}

li:focus-within a {
	outline: none;
}

/* ************************************* */
/* ************************************* */

#menuToggle
{
	display: block;
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 1;
	text-align: left;
	-webkit-user-select: none;
	user-select: none;
	font-family: Amaranth-Italic;
	color: Yellow; /*Für das Wort "Menü".*/
	text-shadow: 2px 2px 2px black;
}

#menuToggle input
{
	display: block;
	width: 40px;
	height: 42px;
	position: absolute;
	top: -7px; 
	left: -5px;
	cursor: pointer;
	opacity: 0;
	z-index: 2;
	-webkit-touch-callout: none;
}

#menuToggle span
{
	line-height: 30px; 	/*Setzt den Abstand zum Wort "Menü".*/
	font-size: 11.5pt; 	/*Für das Wort "Menü".*/
	font-weight: bold;	/*Für das Wort "Menü".*/
	opacity: 0.7;
	display: block;
	width: 38px;
	height: 4px;
	margin-bottom: 5px;
	position: relative;
	background: gold; /*silver; /*Farbe der drei Balken*/
	outline-style: outset; /*3D*/
	outline-color: black;
	outline-width: thin;
	border-radius: 3px; /*Abrundung der Balken*/
	z-index:1;
	box-shadow: 1px 5px 3px black,
				-0px -0px 0px grey;
	transform-origin: 4px 0px;
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
	  			background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
	  			opacity 0.55s ease;
}

#menuToggle span:first-child
{
	transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
	transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
	opacity: 1;
	transform: rotate(45deg) translate(10px, 0px); /* l.o.>r.u.*/
	background: red;
	color: transparent; /*Versteckt das Wort "Menü" nach dem Aufklappen des Menüs.*/
    text-shadow: none;
	outline-style: none;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
	transform: rotate(-45deg) translate(-4px, 12px); /*l.u.>r.o.*/
}

#menuToggle input:checked ~ ul
{
	transform: none;
	margin-left: -4px; /*Linker Rand des Menüs, wenn sichtbar.*/
}

a.nolink
{
/*	font-family: Calibri, sans-serif;*/
	color: orange;
	text-decoration: none;
	font-family: Amaranth-Italic;
	font-size: 15pt;
	text-shadow: 3px 3px 3px black;
}

a.menulink
{
	font-family: Amaranth-Italic;
	font-size: 14pt;
	color: Yellow;
	text-decoration: none;
	text-shadow: 3px 3px 2px black;
}

a.combolink
{
	font-family: Amaranth-Italic;
	font-size: 13pt;
	color: white;
	text-decoration: none;
	text-shadow: 3px 3px 2px black;
	outline-style: inset;
	outline-width: 1px;
	outline-color: rgba(70, 70, 70, 0.80);
	background-color: rgba(130, 130, 130, 0.50);
	margin-right: 4px;
}

a.sublink
{
	font-family: Amaranth-Italic;
	font-size: 12pt;
	color: Yellow;
	text-decoration:none;
	text-shadow: 3px 3px 2px black;
	margin-left: 20px;
}

a.submenulink
{
	font-family: Amaranth-Italic;
	font-size: 14pt;
	color: Yellow;
	text-decoration:none;
	text-shadow: 3px 3px 2px black;
}

a.hplink
{
	margin: 0px 0px -10px 30px; /* top right bottom left */
	color: yellow;
	font-family: SCRIPTBL;
	font-size: 19pt;
	text-decoration: none;
	text-shadow: 3px 3px 2px black;
}

.divline{
	margin-right: 20px;
	margin-left: -4px;
	box-shadow: 2px 2px 1px black,
				-1px -1px 1px grey;
	height: 2px;
	background-color: Yellow;
}

#menu li.Bilder{
 margin:-28px 0px -20px 0px;
 text-align:center;
 }

a.BilderBilder{
	font-family: Amaranth-Italic;/*Lucida Handwriting;*/
	font-size: 13pt;/*11pt;*/
	color: Orange;
	text-decoration:none;
}

div.section1{
	text-align:center;
	border: 2px solid lawngreen;
	border-radius: 20px;
	box-shadow: 4px 4px 2px black;
	margin:5px auto 15px auto;
	padding: 4px 4px 4px 4px;
}

div.section2{
	text-align:center;
	border: 2px solid gold;
	border-radius: 20px;
	box-shadow: 4px 4px 2px black;
	max-width:97%;
	margin:8px auto 16px auto;
	padding: 0px 3px 4px 3px;
	padding:
}

div.tool{
	display:table; 
	border:Gainsboro 1px solid;
	border-radius: 20px;
	box-shadow: 4px 4px 2px black; 
	margin: 4px auto 8px auto;
	padding:4px 6px 4px 6px;
	background-color:#252525;
}

div.info{
	display:table; 
	margin: 4px auto 8px auto;
	border:white 2px solid; 
	box-shadow: 4px 4px 2px black; 
	padding:4px 6px 4px 6px;">
}

span.ma{
	border:silver 1.5px solid; 
	box-shadow: 4px 4px 2px black; 
	padding:2px 4px 4px 4px;
}

div.section2or{
	text-align:center;
	border: 2px solid orange;
	border-radius: 20px;
	box-shadow: 4px 4px 2px black;
	max-width:97%;
	margin:12px auto 12px auto;
	padding: 8px 4px 4px 4px;
	padding:
}

/* ************************************* */
/* ************************************* */
#menu
{
	position: absolute;
	width: 190px;
	height: 200px; /*240*/
	margin: -30px 0 0 -12px; /* top -40 right bottom left -13 */
	padding-left: 20px;
	padding-top: -10px;
	background-color: rgba(70, 70, 70, 0.85); /* 0.85 = Transparenz des Hintergrundes des Menüs */
	box-shadow: 2px 3px 2px dimgray,
				-2px -3px 2px #101010;
	list-style-type: none;
	-webkit-font-smoothing: antialiased;
	transform-origin: 0% 0%;
	transform: translate(-100%, 0);
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	border-radius: 20px; /* Abgerundete Ecken*/
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
#menu
{
	height: 460px;
}
}

#menu li
{
	text-size-adjust: auto; /*Alle Browser stellen sie sich selbst ein.*/
	margin: -6px;
}

#menu li ul{
	display: none; /*Untermenü zugeklappt*/
}

/*--------------------------*/
/*Macht das Hauptmenü langsam länger:*/
#menu:hover {
   	-webkit-animation: move .5s;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes "move" {
	 0% {}
	 100% {height:410px;} / 480; bei 5 items: 420*/
 }
/*--------------------------*/

#menu li:hover ul, 
#menu li.sfhover ul,
#menu li:focus ul
{
	display: block; /*Untermenü aufgeklappt*/
}

/* ************************************* */
/* ************************************* */

#submenu1{
    display: none; /* Sub menues are hidden by default */
	position: relative;
	width: 180px;
	height: 290px; /*260px;*/
	margin: -0px 0 0 184px; /* top right bottom left */ 
	padding-left: 10px; /*Position Text*/
	background-color: rgba(80, 80, 80, 0.40); /*100 = Farbe, * 0.40 = Transparenz des Hintergrundes des Menüs */
	box-shadow: 2px 3px 4px gray,
				-2px -3px 4px #282828;
	list-style-type: none;
	-webkit-font-smoothing: antialiased;
	transform-origin: 0% 0%;
	transform: translate(-100%, 0);
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	border-radius: 20px; /* Abgerundete Ecken*/
	-moz-border-radius: 20px;
	-webkit-border-radius: 10px;
}	

#submenu1 li{
	text-size-adjust: auto; /*Alle Browser stellen sie sich selbst ein.*/
	padding: -16px -2px 16px -2px; /*Text nach oben verschieben, weil es in submenu1 mit padding-top nicht funktioniert: -16px -2px 16px -2px;*/
	line-height: 2.1; /*3.0*/
}

#submenu1 li.natur
{
	line-height: 1.9;
}

#menu li a:hover {
 color: white;
 background-color:dimgray;
}

/* ************************************* */


#submenu1 li ul{
	display: none; /*Sub2-Untermenü zugeklappt ?*/
	margin-left: -200px;
	height: 0px;
}


#submenu1 li:hover ul, 
#submenu1 li.sfhover ul,
#submenu1 li:focus ul 
{
	display: block; /*Sub-Untermenü aufgeklappt - funktioniert nicht? Also wird es reingeschoben:*/
	margin-left: 175px;
	height: 160px; /*110*/
}

/* ************************************* */
/* ************************************* */

#submenu2{
    display: none;
	position: relative;
	width: 160px;
	margin-top: 8px;
	margin-left: 160px; /*funktioniert nicht?*/
	padding-left: 10px; /*Position Text*/
	padding-top: -10px;
	background-color: rgba(100, 100, 100, 0.30); /*100 = Farbe, * 0.30 = Transparenz des Hintergrundes des Menüs */
	box-shadow: 2px 3px 4px gray,
				-2px -3px 4px #282828;
	list-style-type: none;
	-webkit-font-smoothing: antialiased;
	transform-origin: 0% 0%;
	transform: translate(-100%, 0);
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	border-radius: 20px; /* Abgerundete Ecken*/
	-moz-border-radius: 20px;
	-webkit-border-radius: 10px;
}	

#submenu2 li{
	tpadding: 0px 0;
	text-size-adjust: auto; /*Alle Browser stellen sie sich selbst ein.*/
	margin-top: -12px;
	line-height: 2.0;
}

/* ************************************* */
/* ************************************* */
/* Inhaltsverzeichnis - Menü*/

#contentToggle
{
	display: block;
	position: fixed;
	top: 10px;
	right:10px;
	z-index: 1;
	text-align: left;
	-webkit-user-select: none;
	user-select: none;
	color: LawnGreen; /*Für das Wort "Inhalt".*/
	font-family: Amaranth-Italic;
	text-shadow: 2px 2px 2px black;
}

#contentToggle input
{
	display: block;
	width: 40px;
	height: 42px;
	position: absolute;
	top: -7px; 
	left: -5px;
	cursor: pointer;
	opacity: 0;
	z-index: 2;
	-webkit-touch-callout: none;
}

#contentToggle span
{
	line-height: 30px; 	/*Setzt den Abstand zum Wort "Inhalt".*/
	font-size: 11pt; 	/*Für das Wort "Inhalt".*/
	font-weight: bold;	/*Für das Wort "Inhalt".*/
	opacity: 0.7;
	display: block;
	width: 38px;
	height: 4px;
	margin-bottom: 5px;
	position: relative;
	background: yellowgreen; /*silver; /*Farbe der drei Balken*/
	outline-style: outset; /*3D*/
	outline-color: black;
	outline-width: thin;
	border-radius: 3px; /*Abrundung der Balken*/
	z-index:1;
	box-shadow: 1px 5px 3px black,
				-0px -0px 0px grey;
	transform-origin: 4px 0px;
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
	  			background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
	  			opacity 0.55s ease;
}

#contentToggle span:first-child
{
	transform-origin: 0% 0%;
}

#contentToggle span:nth-last-child(2)
{
	transform-origin: 0% 100%;
}

#contentToggle input:checked ~ span
{
	opacity: 1;
	transform: rotate(45deg) translate(10px, 0px); /* l.o.>r.u.*/
	background: coral;
	color: transparent; /*Versteckt das Wort "Inhalt" nach dem Aufklappen des Menüs.*/
    text-shadow: none;
	outline-style: none;
}

#contentToggle input:checked ~ span:nth-last-child(3)
{
	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2);
}

#contentToggle input:checked ~ span:nth-last-child(2)
{
	transform: rotate(-45deg) translate(-4px, 12px); /*l.u.>r.o.*/
}

#contentToggle input:checked ~ ul
{
	transform: none;
	margin-left: -170px; /*Rechter Rand des Menüs, wenn sichtbar. !!!!! */
}

/* ************************************* */
#content
{
	position: absolute;
	width: 190px;
	height: 410px;
	margin-top: -30px;
	margin-right: -10px; /* !!!!! */
	padding-left: 20px;
	padding-top: -10px;
	background-color: rgba(70, 70, 70, 0.92); /* 0.90 = Transparenz des Hintergrundes des Menüs */
	box-shadow: 2px 3px 2px dimgray,
				-2px -3px 2px #101010;
	list-style-type: none;
	-webkit-font-smoothing: antialiased;
	transform-origin: 0% 0%;
	transform: translate(100%, 0);
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	border-radius: 20px; /* Abgerundete Ecken*/
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}

#content a {
  display: block;
}

#content li
{
	text-size-adjust: auto; /*Alle Browser stellen sie sich selbst ein.*/
	margin: -4px;
	line-height: 32pt;
}

#content li a:hover {
	color: white;
	/*background-color:dimgray;*/
	box-shadow: inset 160px 0 0 0 dimgrey; /*???????????????????????????????*/
}


#content li ul{
	display: none; /*Untermenü zugeklappt - funktioniert nicht*/
}

#content li:hover ul, 
#content li.sfhover ul,
#content li:focus ul 
{
	display: block; /*Untermenü aufgeklappt*/
}

a.contentlink
{
	font-family: Amaranth-Italic;
	font-size: 14pt;
	color: LawnGreen;
	text-decoration: none;
	text-shadow: 3px 3px 2px black;
	margin-left: -8px;
 	transition: color .5s ease-in-out, box-shadow .5s ease-in-out; /*????????????????????????????????????????*/
 }

a.subcontentlink
{
	font-family: Amaranth-Italic;
	font-size: 14pt;
	color: coral;
	text-decoration: none;
	text-shadow: 3px 3px 2px black;
	margin-left: -8px;
 	transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
 }

a.reflink
{
	font-family: Amaranth-Italic;
	font-size: 14pt;
	color: Yellow;
	text-decoration: none;
	text-shadow: 3px 3px 2px black;
	margin-left: -8px;
}

a.headlink
{
	font-family: Amaranth-Italic;/*Lucida Handwriting;*/
	font-size: 15pt;
	/*letter-spacing: -0.7pt;*/
	margin-left: -12px;
	color: Yellow;
	text-decoration: none;
	text-shadow: 3px 3px 2px black;
}

hr.contenthr{
	border-style: dashed;
	margin-right: 8px;
	margin-left: -12px;
	box-shadow: 2px 2px 1px black,
				-1px -1px 1px grey;
	height: 2px;
	background-color: Yellow;
}
hr.contentcoral{
	border-style: dashed;
	margin-right: 8px;
	margin-left: -12px;
	box-shadow: 2px 2px 1px black,
				-1px -1px 1px grey;
	height: 2px;
	background-color: coral;
}

p.contenttip{
	font-family: Amaranth-Italic;
	font-size: 13pt;
	font-weight: lighter;
	color: LawnGreen;
}

p.navtip{
	font-family: Amaranth-Italic;
	font-size: 13pt;
	font-weight: lighter;
	color: LawnGreen;
	display:table;
	border-spacing:6px;
	border:lawngreen 2px solid; 
	box-shadow: 4px 4px 2px black; 
	margin: 12px auto 14px auto;
}}

/* ************************************* */
/* ************************************* */
/*Mehr oder Weniger lesen*/

.read-more-state{
	display: none;
}

.read-more-target,.read-more-target-imagedescr{
	opacity: 0;
	max-height: 0;
	font-size: 0;
	transition: .25s ease;
	margin-bottom:-200px;
}

table.read-more-target{	
	border: Gainsboro 2px solid; 
	border-radius: 10px;
	box-shadow: 4px 4px 2px black; 
	background-color:black;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target{
	opacity: 1;
	text-align: left;
	line-height: 22px;
	font-size: 13pt;
	max-height: 999em; /*Sonst ragt der darüber eingeblendete Text in den Button.*/
	display:inherit;
	border: 2px solid yellow;
	border-radius: 20px;
	box-shadow: 4px 4px 2px black;
	margin:30px auto -40px auto;
	padding: 12px 10px 6px 12px;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target-imagedescr{
	opacity: 1;
	text-align:center;
	display:inherit;
	color: #FFFFCC;
	line-height: 18pt;
	font-size: 13pt;
	max-height: 999em; /*Sonst ragt der darüber eingeblendete Text in den Button.*/
	display:inherit;
	border: 2px solid yellow;
	border-radius: 20px;
	box-shadow: 4px 4px 2px black;
	margin:30px auto -40px auto;
	padding: 12px 10px 6px 12px;
}

.read-more-state ~ .read-more-trigger:before{
	content: 'Mehr lesen';
}

.read-more-state:checked ~ .read-more-trigger:before{
	content: 'Weniger lesen';
}

.read-more-trigger{
	cursor: pointer;
	display: inline; /* statt inline-block, bei dem der Text im Button auf dem Smartphone umbricht*/
	color: silver;
	font-size: 13pt;
	padding: 4px 4px 2px 4px;
	border: 2px solid LightSteelBlue;
	background-color: DimGray;
	border-radius: .25em;
}

/* ************************************* */
/* ************************************* */
/*Alert Message für Bilder - Datenvolumen*/

#alert {
	display: none;
	background-color: rgba(60, 60, 60, 0.80); /* 0.90 = Transparenz des Hintergrundes */
	box-shadow: 2px 3px 2px dimgray,
				-2px -3px 2px #101010;
	border-radius: 20px; /* Abgerundete Ecken*/
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	position: fixed;
	width: 345px;
	left: 50%;
	margin-left: -170px;
	margin-top: 150px;
	box-sizing: border-box;
	text-align: center;
	padding:10px 18px 10px 18px;
}

#alert .message {
	font-family: Amaranth-Italic;
	text-align:center;
	text-shadow: 2px 2px 2px black;
	color: Orange;
	line-height: 15pt;
	margin: 0px 2px 2px 2px;
}