@charset "utf-8"; 							/* Dateiname: sc.css - emil-jenne@verlag-mensch-und-gedanke.de*/

@-ms-viewport	{ width: extend-to-zoom; zoom: 1.0; }	/* Viewport für Microsoft IE10 setzen */

/* ########################## DOM Übersicht ############################################################### */
/*
html
	body
		#view
			header
				nav
					ul
						li
							li a
								h1 .headfoot
			main
				#section
					article
						h1
						h2
						(img)
						(h3)
						p
						p .absende



--------------------FLEXBOX---------------------------------

display: -webkit-flex;							(Container-Elternelement)
display: -ms-flex;
display: flex;

flex-flow:									(= flex-direction und flex-wrap)
			row				nowrap;		(Zeile von links nach rechts und kein Umbrechen bei zuvielen Kindelementen)
			column			wrap;		(Spalte von oben nach unten und Umbrechen, falls Kinder nicht ganz in eine Zeile passen)
			row-reverse		wrap-reverse;	(Zeile von rechts nach links und Umbruch von hinten)
			column-reverse					(Spalte von unten nach oben)

flex: 1 1 auto; 								(flex-grow = Ausdehnung und
										flex-shrink = Schrumpfung und
										flex-basis = feste Größe an Raum % em px)

align-content:	strech						(ob-unt: Kinder gleichmäßig verteilen)
			center						(ob-unt: Kinder mittig anordnen mit möglichem Rand oben und unten)
			flex-start						(ob-unt: Kinder am Startpunkt der Querachse, column/oben, column-reverse/unten anordnen)
			flex-end						(ob-unt: Kinder am Endpunkt der Querachse, column/unten, column-reverse/oben anordnen)
			space-between					(ob-unt: Kinder gleichmäßig verteilen 1.+letztes am Rand des Elternelements klebend)
			space-around					(ob-unt: Kinder gleichmäßig verteilen mit Rand zum Elternelement)

justify-content:	center						(li-re: Kinder mittig anordnen mit möglichem Rand links und rechts)
			flex-start						(li-re: Kinder linksbündig anordnen)
			flex-end						(li-re: Kinder rechtsbündig anordnen)
			space-between					(li-re: Kinder gleichmäßig verteilen 1.+letztes am Rand des Elternelements klebend)
			space-around					(li-re: Kinder gleichmäßig verteilen mit Rand zum Elternelement)

align-items:	strech						(Kinder strecken, damit sie in den Elterncontainer passen)
			center						(Kinder mittig im Elterncontainer anordnen)
			flex-start						(Kinder am Anfang des Elterncontainers anordnen)
			flex-end						(Kinder am Ende des Elterncontainers anordnen)
			baseline						(Kinder an der Grundlinie des Elterncontainers anordnen)

align-self:		. . . 							(selbe Werte wie bei align-items, nur für ein einzelnes Kindelement)

order: 1;									(Reihenfolge der Kinder festlegen)

*/
/* ########################## Allgemein / Body ############################################################# */

*							{
							font-size: 12pt;						/* 1em=12pt, 100%=12em, 1%=0.12em, Druck 12pt */
							line-height: normal;								/* Zeilenhöhenbasis */
							font-family: geneva,sans-serif,times,"times new roman";	/* Schriftart */
							-moz-box-sizing: border-box;						/* Neues Boxmodell Mozilla */
							-webkit-box-sizing: border-box;						/* Neues Boxmodell Webkit */
							box-sizing: border-box;							/* Neues Boxmodell css3 */
							}

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

body							{
							display: block;
							background-color: #ffffff; 
							vertical-align: top; text-align: center; 
							padding: 0em; 
							border: 0em; 
							margin: 0em;
							}

#view						{
							display: block;
							width: auto;
							background-color: inherit;
							padding: 0.625em 0.625em 0.625em 3.425em;
							border: 0em; 
							margin: 0em auto 0em auto;
							}

header						{
							display: block;
							clear: both;
							width: auto;
							background-color: inherit;
							padding: 0em;
							border: 0em; 
							margin: 0em auto 1.25em auto;
							}

main							{
							display: block;
							clear: both;
							width: auto;
							background-color: #ffffff;
							padding: 0em;
							border: 0em; 
							margin: 0em 0em 1.25em 0em;
							}

.clearbox::before, .clearbox::after	{ content: " "; display: table; }
.clearbox::after					{ clear: both; }
.clearbox						{ *zoom: 1; }							/* clear both für IE6 und IE7 */

/* ########################## Link/a ##################################################################### */
a							{
							display: inline; 
							text-decoration: underline;
							}
a:link 						{ font-weight: normal; font-style: normal; color: #eeeeee; }			/* Text-Link */
a:visited 						{ font-weight: normal; font-style: italic; color: #eeeeee; }			/* besuchter Link */
a:focus 						{ font-weight: normal; font-style: normal; color: #eeeeee; }			/* mit TabTaste gefunden */
a:hover 						{ font-weight: normal; font-style: normal; color: #eeeeee; }			/* Mouse darüber */
a:active 						{ font-weight: normal; font-style: normal; color: #eeeeee; 
							background-color: #ffffff; }								/* beim Draufklicken */

/* ########################## Navigation und Liste ########################################################### */
nav							{
							display: block;
							width: auto;
							vertical-align: top; text-align: center;
							background-color: #ababab;
							padding: 0em;
							border: 0.1em solid #ababab;
							border-radius: 0.3em;					/* runde Ecken */
							box-shadow: 5px 5px 5px #000000;			/* außen: AbstVonLi AbstVonOb . . .
																. . . RadiusWeichz Hinauswachsen Farbe */
							margin: 0em auto 0em auto; 
							}

ul							{
							display: flex;
							flex-flow: row wrap;
							flex: 0 0 auto;
							align-content: space-between;
							justify-content:	space-between;
							align-items: strech;
							width: auto;
							vertical-align: top; text-align: center;
							list-style-type: none;										/* Listensymbole */
							background-color: #ababab; 
							padding: 0em;
							border: 0em solid #ababab;
							margin: 0em auto 0em auto;
							}

li							{ 													/* Linkrahmen */
							display: block;
							float: none;
							width: auto;
							background-color: #ababab; 
							padding: 0.3em;
							border: 0.1em solid #dddddd;
							border-radius: 0.2em;
							margin: 0em auto 0em auto;
							}

li a							{													/* Innerster Link */
							display: block;
							text-decoration: none;
							color: #ffffff;
							background-color: #ababab;
							padding: 0.2em;
							border: 0.1em solid #dddddd;
							border-radius: 0.2em;
							margin: 0em auto 0em auto;
							}

li a:visited						{ 													/* Innerster Link */
							font-style: italic;
							color: #ffffff;
							background-color: #ababab; 
							}

li a:hover						{ 													/* Innerster Link */
							color: #ffffff;
							background-image: linear-gradient(#ffffff, #ababab);				/* Farbverlauf */
							}

li a:active						{ 													/* Innerster Link */
							color: #ffffff;
							background-image: linear-gradient(#ababab, #000000);			/* Farbverlauf */
							}

.abegin						{ margin: 0em auto 0em auto; }
.aend						{ margin: 0em auto 0em auto; }

/* ##################################################################################################### */

#test							{ 
							position: fixed;
							top: 48%;
							left: 0em;

display: block;
							vertical-align: top; text-align: center;
							background-image: linear-gradient(#996633, #000000, #996633);	/* Farbverlauf */
							padding: 0.625em;
							border: 0em;
							border-radius: 0.625em;					/* runde Ecken */
							box-shadow: 5px 5px 5px #000000;			/* außen: AbstVonLi AbstVonOb . . .
																. . . RadiusWeichz Hinauswachsen Farbe */
							margin: 0em auto 2.5em auto;
							}

/* ##################################################################################################### */
#zrknavi						{
							position: fixed;
							top: 48%;
							left: 0em;
							display: block;
							width: 2.8em;
							vertical-align: top; text-align: center;
							background-color: #ababab;
							padding: 0em;
							border: 0.1em solid #ababab;
							border-radius: 0.3em;					/* runde Ecken */
							box-shadow: 5px 5px 5px #000000;			/* außen: AbstVonLi AbstVonOb . . .
																. . . RadiusWeichz Hinauswachsen Farbe */
							margin: 0em;
							}

#zrkul						{
							display: block;
							width: auto;
							vertical-align: top; text-align: center;
							background-color: #ababab; 
							padding: 0em;
							border: 0em solid #ababab;
							margin: 0em auto 0em auto;
							}

#zrkli						{ 													/* Linkrahmen */
							display: inline-block;
							width: auto;
							font-size: 1em;
							font-weight: 600;
							background-color: #ababab; 
							padding: 0.3em;
							border: 0.1em solid #ffffff;
							border-radius: 0.2em;
							margin: 0em auto 0em auto;
							}

#zrkli a						{													/* Innerster Link */
							display: block;
							text-decoration: none;
							color: #ffffff;
							background-color: #ababab;
							padding: 0.2em;
							border: 0.1em solid #ffffff;
							border-radius: 0.2em;
							margin: 0em auto 0em auto;
							}

#zrkli a:visited					{ 													/* Innerster Link */
							font-style: italic;
							color: #eeeeee;
							background-color: #ababab; 
							}

#zrkli a:hover					{ 													/* Innerster Link */
							color: #eeeeee;
							background-image: linear-gradient(#ffffff, #ababab);				/* Farbverlauf */
							}

#zrkli a:active					{ 													/* Innerster Link */
							color: #eeeeee;
							background-image: linear-gradient(#ababab, #000000);			/* Farbverlauf */
							}

/* ##################################################################################################### */
hr							{ display: block; 
							text-align: center;							
							color: transparent;
							border-style: 1px solid transparent;
							visability: none;
							border-width: 0.1em;
							margin-top: 0em; margin-bottom: 0em;
							margin-left: auto; margin-right: auto;
							} 						

h1							{
							display: block;
							font-size: 1.7em;
							font-weight: 800;
							vertical-align: top; text-align: center;
							color: #000000; 
							background-color: #ffffff;
							padding: 0.625em;
							border: 0.1em solid #000000;
							border-radius: 0.3em;					/* runde Ecken */
							box-shadow: 5px 5px 5px #000000;			/* außen: AbstVonLi AbstVonOb . . .
																. . . RadiusWeichz Hinauswachsen Farbe */
							margin: 0em 0em 1.25em 0em;
							}

h2							{ font-size: 1.45em; 
							font-weight: 600; }

h3							{ font-size: 1.25em; 
							font-weight: 600; }


p, li, a						{ font-size: 1em; }

h2, h3						{
							display: block;
							vertical-align: top; text-align: left;
							color: #000000;
							padding: 0em;
							border: 0em;
							margin: 0em auto 0.625em auto;
							}

.headfoot						{
							clear: both;
							vertical-align: top; text-align: center;
							color: #000000; 
							background-color: #ffffff;
							padding: 0.625em;
							border-radius: 0.3em;							/* runde Ecken */
							box-shadow: 5px 5px 5px #000000;					/* außen: AbstVonLi AbstVonOb . . .
																		. . . RadiusWeichz Hinauswachsen Farbe */
							margin: 1.25em 0em 1.25em 0em;
							}

.tabtxt						{ color: #000000; }

p							{
							display: block;
							vertical-align: top; text-align: left;
							padding: 0em;
							border: 0em;
							margin: 0em auto 0.625em auto;
							color: #000000;
							}

q							{ "»" "«" "›" "‹"; }

img							{ 
							display: block;
							background-color: #dddddd; 
							padding: 0em;
							border: 0em solid #000000;
							border-radius: 0.5em;							/* runde Ecken */ 
							box-shadow: 5px 5px 5px #000000;					/* außen: AbstVonLi AbstVonOb . . .
																		. . . RadiusWeichz Hinauswachsen Farbe */
							}

.bildplogo						{ float: left;
							transform: rotate(-5deg);							/* Rotation (..deg) */
							margin: 1.25em 1.25em 1.25em 1.25em;
							}

.bildpliport						{ float: left;
							padding: 0em;
							border: 0em solid #000000;
							border-radius: 0.3em;							/* runde Ecken */
							box-shadow: 5px 5px 5px #000000;					/* außen: AbstVonLi AbstVonOb . . .
																		. . . RadiusWeichz Hinauswachsen Farbe */
							margin: 0.625 0.625em 0.625em 0em;	
							}



.bildpliland						{ float: left; margin: 0em 1.25em 1.25em 0.625em; }
.bildpli1x1						{ float: left; margin: 0em 1.25em 1.25em 0.625em; }
.bildpceport					{ clear: both; margin: 1.25em 1.25em 1.25em 1.25em; }

.bildpceland					{ clear: both;
							width: 100%;
							padding: 0em;
							border: 0em solid #000000;
							border-radius: 0.3em;							/* runde Ecken */
							box-shadow: 5px 5px 5px #000000;					/* außen: AbstVonLi AbstVonOb . . .
																		. . . RadiusWeichz Hinauswachsen Farbe */
							margin: 0.625 0em 0.625em 0em;	
							}

.bildpce1x1					{ clear: both; margin: 1.25em 1.25em 1.25em 1.25em; }

.bildpreport					{ float: right;
							padding: 0em;
							border: 0em solid #000000;
							border-radius: 0.3em;							/* runde Ecken */
							box-shadow: 5px 5px 5px #000000;					/* außen: AbstVonLi AbstVonOb . . .
																		. . . RadiusWeichz Hinauswachsen Farbe */
							margin: 0.625 0em 0.625em 0.625em;	
							}

.bildpreland					{ float: right; margin: 0em 0.625em 1.25em 1.25em; }
.bildpre1x1					{ float: right; margin: 0em 0.625em 1.25em 1.25em; }

.bildimrahmen					{ width: 100%;
							padding: 0em;
							border: 0em solid #000000;
							border-radius: 0.3em;							/* runde Ecken */
							box-shadow: 5px 5px 5px #000000;					/* außen: AbstVonLi AbstVonOb . . .
																		. . . RadiusWeichz Hinauswachsen Farbe */
							margin: 0em 0em 0em 0em;	
							}

.bildtextfeld					{ padding: 0.625em 0.625em 0.15em 0.625em; }
.bildtext						{ font-size: 0.8em; }

#section						{ display: block; clear: both; margin: 0em auto 0.625em auto; }

article						{ display: block;
							vertical-align: top; text-align: center;
							background-image: linear-gradient(#996633, #000000, #996633);	/* Farbverlauf */
							padding: 0.625em;
							border: 0em;
							border-radius: 0.625em;							/* runde Ecken */
							box-shadow: 5px 5px 5px #000000;					/* außen: AbstVonLi AbstVonOb . . .
																		. . . RadiusWeichz Hinauswachsen Farbe */
							margin: 0em auto 2.5em auto;
							}

footer						{
							display: block;
							clear: both;
							background-color: #ffffff;
							margin: 0em 0em 0.625em 0em;
							}

#impressum, #datenschutz			{
							display: block;
							background-color: #ffffff;
							}

.absende						{ margin: 0em 0em 2em 0em; }
.clrboth						{ clear: both; }
.clrnone						{ clear: none; }

#vmug		{ clear: both; }
#pepw		{ clear: both; }
#kfej			{ clear: both; }
#dnew		{ clear: both; }
#gegw		{ clear: both; }
#btt			{ clear: both; }
#ej			{ clear: both; }

/* ######################### Table ####################################################################### */

figure						{
							display: block;
							vertical-align: top; text-align: center;
							border-radius: 0.3em;					/* runde Ecken */
							box-shadow: 5px 5px 5px #000000;			/* außen: AbstVonLi AbstVonOb . . .
																. . . RadiusWeichz Hinauswachsen Farbe */
							margin: 0em auto 0.625em auto;
							}

table							{
							display: table;
							border-collapse: collapse; 				 /* Zus.fallende Zellenrahmen oder Einzelrahnen je Zelle */
							color: #000000;
							background-color: #ffffff;
							border: 0em solid #000000; 
							margin: 0em auto 0em auto; 							
							}

figcaption						{
							display: block;
							margin: 0em auto 0em auto;
							}

tbody						{
							display: table-row-group;
							border-top: 0.1em solid #000000;
							border-bottom: 0.1em solid #000000;
							margin: 0em auto 0em auto;
							}

tfoot							{
							display: table-footer-group;
							border-bottom: 0.1em solid #000000;
							margin: 0em auto 0em auto;
							}

tr							{ display: table-row; }

th, td						{
							display: table-cell;
							vertical-align: top; text-align: left; 
							padding: 0.625em;
							border: 0em;
							margin: 0em auto 0em auto; 
							}

/* ######################### Version ab 1201px bis 1440px #################################################### */
@media only screen and (min-device-width: 1201px)									{ /* Version ab 961px Anfang */
#view						{ max-width: 1440px; }
.bildplogo						{ width: 18%; }
.bildpliport, .bildpreport			{ clear: both; width: 30%; }
.bildpceland					{ width: 100%; }
																		} /* Version ab 961px Ende */
/* ######################### Version ab 961px bis 1200px ##################################################### */
@media only screen and (min-device-width: 961px) and (max-device-width: 1200px)			{ /* Version ab 961px Anfang */
.bildplogo						{ width: 20%; }
.bildpliport, .bildpreport			{ clear: both; width: 40%; }
.bildpceland					{ width: 100%; }
																		} /* Version ab 961px Ende */
/* ######################### Version 481px bis 960px ######################################################## */
@media only screen and (min-device-width: 481px) and (max-device-width: 960px)			{ /* Version 481px bis 960px Anfang */
.bildplogo						{ width: 25%; }
.bildpliport, .bildpreport			{ clear: both; width: 40%; }
.bildpceland					{ width: 100%; }
																		} /* Version 481px bis 960px Ende */
/* ######################### Version 0px bis 480px ########################################################## */
@media only screen and (max-device-width: 480px)									{ /* Version 0px bis 480px Anfang */
.bildplogo						{ width: 50%; }
.bildpliport, .bildpreport			{ clear: both; width: 60%; }
.bildpceland					{ width: 100%; }
ul							{ display: flex; flex-direction: column; justify-content: space-between; }
																		} /* Version 0px bis 480px Ende */
/* ##################################################################################################### */