@charset "utf-8";
/* @charset "utf-8" ist der Zeichencode. Dieser darf nicht verändert werden und muss absolut ganz oben stehen! */
/* CSS Document */
/* body = allumfassend  */
body {
	color: #634C5C;
	font: 100% sans-serif;
  	background-color: #9CCEFF;
	background-image:	url(../assets/hindegrund/hindergrund1_2.png);
	background-repeat:	repeat-y;
	background-repeat:	repeat;	
}
/* header = Kopfzeile. Die Formatierungen, sind in diesen Bereich so eingestellt, dass der Text immer in der Mitte ist. */
#header {
	font: 100% sans-serif;
	background-color: #FFF;
	text-align: center;
/* padding = header Außenrand! */
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}
/* header h1 = Textfarbe!  */
#header h1 {
	color: #634C5C;
	background-color: #EDECEC;
}
	/* 
Der Textinhalt, sollte ab 02.2015 an den (@media screen and (min-width: 3800px), gleichermaßen (beachte Wichtige Bildschirm-Größen: 5120 5K Monitor, 3840 4K Monitor, 2560 2K Monitor , 1920 und mit klapp Navi für Handy 800px)angepasst werden. Der Textinhalt wirkt für diese 4K Monitore als sehr klein, dass eine vergrößerung notwendig wird. Es ist sinvoll, für die 4K Monitore Textgrößen in em bzw. in Prozent anzugeben. Dies sollte für Navi Content gleicher maßen gelten! Es ist außerdem sehr wichtig, dass die Hintergrundeinstellung bzw. Farbeinstellungen, Pseudoformate zuerst integriert werden. Dazu gehören auch die Farbeinstellungen in der Navigation, sowie Fußleiste. Die Größen und Positionsangaben sollten innerhalb der (@media screen and (min-width: 3800px) {}) Angaben erfolgen, weil damit eine bessere Verschachtelung in den Höhen und Positionen gewährleistet werden kann. Bei den Mediaangaben ist darauf zu achten, dass die Minimalgröße bzw. maximal Größe in der richtigen Reihenfolge angeordnet sind.
 */
 /* #content = der Textinhalt! */
#content {
	color: #634C5C;
	background-color: #EDECEC;
}
/* content = Ende content-Grund-Einstellungen! */

/* navigation = Navi-Grund-Einstellungen! */
#navigation {
/* background-color: = allumfassend in der Navigation!  */
	background-image: url(../assets/hindegrund/hindergrund1_2.gif);
	background-repeat:	repeat-y;
	background-repeat:	repeat;
/* padding = Navigation Außenrand! */
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}
/* #navigation ul = das ist eingerückter Text. */
	#navigation ul, .nav { list-style-type: none; /* Lässt unten die Unterstreichung Verschwinden. */ margin: 0; padding: 0;}
/*navigation li = das ist eingerückter Text, mit Aufzählunspunkte.  */
/* #navigation ul = das ist eingerückter Text. */
	#navigation ul, .nav { list-style-type: none; /* Lässt unten die Unterstreichung Verschwinden. */ margin: 0; padding: 0;}
/* #navigation li = mit dieser Einstellung, wird die Navigation zu ein Blockelement umgestaltet. */
	#navigation li, .nav { display:block; padding: 5px 15px; /* das ist der Außenrand, in einem jeden Kasten, wo der Link vorhanden ist. */ border-bottom: 1px solid #666; border-left: 1px solid #666; border-right: 1px solid #666; 		
		border-top: 1px solid #666; /* border-bottom = wird die Umrandung deutlich gemacht bzw. die Stärke von der Umrandung mit einem Pixel festgelegt. Gleichzeitig erhält der Rand eine Randfarbe. */}
/*navigation li = das ist eingerückter Text, mit Aufzählunspunkte.  */
	#navigation a, .nav {	text-decoration: none; /* Lässt die Aufzählunspunkte Verschwinden. */ color: #000;}
/* #navigation a = Textfarbe!  */
	#navigation a { color: #FFF;	background-color: #334C64;	}
/* Die nächst folgende Punkte,sind für die Links gedacht. Zum Beispiel wenn du mit der Maus über die Links gehst verändert sich die Farbe. */
	#navigation a:hover, #navigation a:focus { background-color: #CC0000; color: #010101;}
	#navigation a:active {background-color: #093; color: #CCC;}
	#navigation a:visited { color: #CCC;}
/* navigation = Ende alle Navi-Grund-Einstellungen! */

/* fuss = das ist die untere Fußzeile einer HTML Webseite. In diesem Bereich wird das Impressum, der Kontakt und das Copyright dargestellt. */
#footer {
	color: #634C5C;
	background-color: #EDECEC;
	text-align: center;
	width: auto;
	margin-right: 10px;
	margin-top: 10px;
/* padding = footer Außenrand! */
	padding-top:  18px;
	padding-bottom:  1px;
	padding-left: 10px;
	padding-right: 10px;
}

/* fuss = das ist die untere Fußzeile einer HTML Webseite. In diesem Bereich wird das Impressum, der Kontakt und das Copyright dargestellt. */
#footer { margin-right: 10px;}
#footer p {	text-align: left;	padding-top: 9px;	padding-bottom: 0;	font-size: 12px;}
#footer ul {	list-style-type: none;	margin: 0;	padding: 0;}
#footer li {	display: inline;	padding: 2px 15px;	border-bottom: 1px solid #666;	border-left: 1px solid #666;	border-right: 1px solid #666;	border-top: 1px solid #666;}
/* footer a = Textfarbe und Anordnung!  */
#footer a {	text-decoration: none;}
#footer a:hover, #navigation a:focus, #navigation a:active {	background-color: #CC0000;	color: #010101;}
#footer a:visited {	color: #000;}
/* Durch Entfernen des oberen Randes wird ein Problem vermieden, bei dem Ränder aus dem umgebenden Block entweichen. Der verbleibende untere Rand sorgt für den Abstand von allen folgenden Elementen. */
/* Ende der footer-fomatirung */

/* Anfang Textfomatirung im content */
/*Das ghört zu div class="section1" Textfomation!*/
/*Sie können für Absätze mit längerem Fließtext für die erste Zeile des Absatzes ein separates Erscheinungsbild erzwingen.
Ferner können Sie für das erste Zeichen der ersten Zeile ein separates Erscheinungsbild erzwingen. Und schließlich können Sie sogar bestimmen, dass ein erstes Kindelement eines Elements ein besonderes Aussehen erhält. Dies sind typografische Effekte, die von Druckschriften her bekannt sind.*/
/*Beispiel findest Du unter: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm!*/
.section1 { margin-top: 5px; margin-bottom: 5px; max-width: 99%;}
.section1 p:first-line { font-weight:bold }
.section1 p:first-letter { font-size:110%; color:red }
.section1 div { background-color:#E0E0E0 }
.section1 div p:first-child { background-color:#C0C0C0; }
/*Eine erweiterte Syntax der Pseudoelemente nach oben :before, :after erlaubt auch die automatische Einfügung von Anführungszeichen, z.B. für Zitate.*/
/*Beispiel findest Du unter: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm!*/
.section2 :lang(de)    { quotes:"\201E" "\201C" "\201A" "\2018"; }
.section2 :lang(de-DE) { quotes:"\00BB" "\00AB" "\203A" "\2039"; }
.section2 :lang(de-CH) { quotes:"\00AB" "\00BB" "\2039" "\203A"; }
.section2 :lang(en)    { quotes:"\201C" "\201D" "\2018" "\2019"; }
.section2 :lang(fr)    { quotes:"\00AB\00A0" "\00A0\00BB" "\2039\00A0" "\00A0\203A"; }

/* Gehört alles zum Anführungszeichen, z.B. für Zitate.*/
/* Die Zitate sind farblich veränderbar. */
.section2 { margin-top: 5px; margin-bottom: 5px; max-width: 99%;}
.section2 q:before { content:open-quote; color:#a00; }
.section2 q:after { content:close-quote; color:#a00; }
.section2 q q:before { content:open-quote; color:#0a0; }
.section2 q q:after { content:close-quote; color:#0a0; }

/* Gehört alles zum Anführungszeichen, z.B. für Zitate.*/
/* Die Zitate sind farblich und Anführungszeichen-Größe veränderbar. */
.section2 q { font-size:20px; }
.section2 q q { color:#888; }
.section2 code { font-weight:bold; }

/*Automatische Nummerierung
Eine erweiterte Syntax der Pseudoelemente nach oben :before, :after erlaubt auch die automatische Nummerierung von Elementen, z.B. für Kapitelüberschriften.*/
.section3 { margin-top: 5px; margin-bottom: 5px; max-width: 99%;}
.section3 {
counter-reset: Ebene01;
}
.section3 h1:before {
content: counter(Ebene01) " ";
counter-increment: Ebene01;
}
.section3 h1 {
counter-reset: Ebene02;
}
.section3 h2:before {
content: counter(Ebene01) "." counter(Ebene02) " ";
counter-increment: Ebene02;
}
/* h1:hover im Bereich section4, macht die Überschriften zu hover-Elementen. Das füht dazu, dass mit der Maus, bei einer Überschrift oder Textbereichen einen leichen Schaten erhalten. */
.section4 { margin-top: 5px; margin-bottom: 5px; max-width: 99%;}
.section4 h1:hover { background-color:silver ; color: #000000; }
.section4 h2:hover { background-color:silver ; color: #000000; }
.section4 p:hover { background-color:silver ; color: #000000; }
.section4 p:focus { background-color:red; font-size:24px; }
.section4 p:active { background-color:green; }
/* .section5 Fast alle beiten Komponenten, wie Absätze mit längerem Fließtext für die erste Zeile des Absatzes ein separates Erscheinungsbild erzwingen. Und erlaubt auch die automatische Einfügung von Anführungszeichen, z.B. für Zitate.*/
.section5 { margin-top: 5px; margin-bottom: 5px; max-width: 99%;}
.section5 p:first-line { font-weight:bold }
.section5 p:first-letter { font-size:110%; color:red }
.section5 div { background-color:#E0E0E0 }
.section5 div p:first-child { background-color:#C0C0C0; }
/*Eine erweiterte Syntax der Pseudoelemente nach oben :before, :after erlaubt auch die automatische Einfügung von Anführungszeichen, z.B. für Zitate.*/
/*Beispiel findest Du unter: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm!*/
.section5  :lang(de)    { quotes:"\201E" "\201C" "\201A" "\2018"; }
.section5  :lang(de-DE) { quotes:"\00BB" "\00AB" "\203A" "\2039"; }
.section5  :lang(de-CH) { quotes:"\00AB" "\00BB" "\2039" "\203A"; }
.section5  :lang(en)    { quotes:"\201C" "\201D" "\2018" "\2019"; }
.section5  :lang(fr)    { quotes:"\00AB\00A0" "\00A0\00BB" "\2039\00A0" "\00A0\203A"; }

/* Gehört alles zum Anführungszeichen, z.B. für Zitate.*/
/* Die Zitate sind farblich veränderbar. */
.section5  { margin-top: 5px; margin-bottom: 5px; max-width: 99%;}
.section5  q:before { content:open-quote; color:#a00; }
.section5  q:after { content:close-quote; color:#a00; }
.section5 q q:before { content:open-quote; color:#0a0; }
.section5 q q:after { content:close-quote; color:#0a0; }

/* Gehört alles zum Anführungszeichen, z.B. für Zitate.*/
/* Die Zitate sind farblich und Anführungszeichen-Größe veränderbar. */
.section5  q { font-size:20px; }
.section5  q q { color:#888; }
.section5  code { font-weight:bold; }
/* section = Ende Text-Grund-Einstellungen! */

/* Der nächste Abschnitt sind Überschriften von h1 bis h6 und bis zum p-Tag = narmaler Absatz-Text in px vorgegeben. */
/* Hinzufügen von Auffüllungswerten für beide Seiten jeweils enthaltener Blockelemente statt für die Blöcke macht Box-Modell-Berechnungen unnötig. Alternativ kann auch ein untergeordneter Block mit Auffüllung an den Seiten verwendet werden. */
	h1, h2, h3, h4, h5, h6, p, address, article, aside, blockquote, strong, a, li, em{ font-family: Verdana, Geneva, sans-serif; margin-top: 0px;
/* Der obere Rand verschwindet durch margin-top: 0px. */
/* Der Text hat mit dieser Einstellung ein bischen Abstand und siht nicht so angetrückt aus. */
padding-right: 15px; padding-left: 15px;}
/* Dieser Selektor entfernt den standardmäßigen blauen Rahmen, der in einigen Browsern um ein Bild angezeigt wird, wenn es von einem Hyperlink umschlossen ist. */ a img { border: none;}
/* Durch Entfernen des oberen Randes (text-decoration:none;) wird ein Problem vermieden, bei dem Ränder aus dem umgebenden Block entweichen. Der verbleibende untere Rand sorgt für den Abstand von allen folgenden Elementen. */
/*Sie können das Erscheinungsbild von Verweisen zu noch nicht besuchten Seiten, zu bereits besuchten Seiten und zu Elementen, die per Tastatur selektiert, gerade mit der Maus überfahren oder angeklickt werden, bestimmen.*/
a:link { font-weight:bold; color: #000000; font-style: normal;	/* Link-Farbe */ text-decoration:none; }
a:visited { font-weight:bold; color:#5F5F5F; font-variant: small-caps; text-decoration:none; }
a:focus { font-weight:bold; color:red; text-decoration:underline; }
a:hover { font-weight:bold; color:green; text-decoration:none; }
a:active { font-weight:bold; color:lime; text-decoration:underline; }
/* Ende Textfomatirung im algemeinem content */

/* figcaption = der Textinhalt am unteren Bildrand!  */
	.figcaption { text-align: center;}
/*tebel1 = Formgebung für Tabelle 1!*/
#content .tebel1 { text-align: center}
/* Tabellenformatierung */
#content table { border-collapse: collapse; }
@media (min-width: 3901px) and (max-width: 5210px) {
#navigation {
/* position: fixed; =
Legt die scrollende Navigation fest (ist beweglich). Beim scrollen der Webseite, verfolgt die Webseitennavigation immer die gleiche Position. Hier ist dabei auch zu beachten, dass der Abstand zwischen der Navigation und zu lesenden Text (im Content) der Bildschirmbreite angepasst wird. Dies geschieht durch die Unterteilung der Fenstergrößen, die weiter unten festgelegt werden müssen. */
	position: fixed; /* Das top: 0; setzt die Navigation nach gnz oben! */ top: 0; left: 2px;
}
/* .navfigure: = Bild in der Navigation!  */
#navigation .navfigure img {	text-align:center; margin: 0% 0% 0% 9%; min-width: 51%;	max-width: 52%;}
/* navigation = Ende alle Navi-Grund-Einstellungen! */

/* Mit diesen Elementen können Video, Audio und Objekte in die richtige Form gebracht werden. */
/* Bitte einhalten und nicht verändern! */
/* Bei Video max-width:50%; height:50% funktinier! */
#content video, audio, object{ max-width:50%; max-height:50%;}
/* Der videocontainer lässt sich hier nicht anders einstellen! */
/* Bitte das videocontainer, Element, einzeln Auflisten und so beibehalten! */
.videocontainer{ width:70%; height: auto;}
/* Bitte das .videorahmen bzw. .audiorahmen Element, zusammen Auflisten, weil hier nicht weiter verstellt werden muss! */
/* Mit diesen Element .videorahmen bzw. .audiorahmen erhalten Videos, Audio den richtigen Ramen. */
.videorahmen, .audiorahmen { text-align:center; padding-top: 0.1em; padding-bottom: 0.1em; padding-left: 0.1em; padding-right: 0.1em;}
/* Mit diesen Element können Bilder, sowie auch Bilder in einer Blockform in die richtige Form zugewiesen werden. */
#content .figure {	margin-top: 5px; margin-bottom: 5px; margin-left: 10%;}
/* Hier wird die Bild größe text-align:center; und Position 	width: 60%; besimmt!*/
#content .figure, img {text-align:center; width: 60%;}
#content .paypalfigure {width: 30%; height: auto;}
#content td { padding: 10px; text-align:left; }

/* Das ist der Button zum Anzeigen des Menüs. Das muss hier ausgeblendet sein und darf nicht verändert werden! */
.menu-toggle {
    display: none;
}

/* Der oberste teil ist immer der Größte Bildschirm. Dieser Teil benötigt @media (min-width: 3840px) and (max-width: 8840px) { }! Alle haben ein @media (min-width: 3840px) and (max-width: 8840px) { } Die font-size: 30%; sind nicht überall Ratsam!!! */
#navigation, #footer a, form { font-size: 170%;	}
	/* Achtung! Bitte hier keine , li= Listeneilement, ul= Ungeordnete Liste, ol= Geordnete Liste eintragen, weil sonst die Navi in der Größe nicht veränderbar ist! */
#container #content p, #container #content address, #container #content article, #container #content aside, #container #content blockquote, #container #content strong, #container #content li {	font-size: 200%;}
#container #header h1	{	font-size: 260%;	text-align:center;}
#container #content h1	{	font-size: 250%;}
#container #content h2	{	font-size: 240%;}
#container #content h3	{	font-size: 230%;}
#container #content h4	{	font-size: 220%;}
#container #content h5	{	font-size: 210%;}
#container #content h6	{	font-size: 200%;}
#container #content footer { margin-left: 2%; padding-bottom: 1%;}
/* Die #navigation { width: 340px; } ist die weite der Navi und darf nicht mit header, #content, footer zusammengelegt werden. */
#navigation {/* width = Navigation Breite! */ width: 16%;}
#header, #footer {
	/* width = #header, #footer Breite! */ 
	margin-left: 19%;
	min-width: 35%;
	max-width: 77%;	
}
#content {
	margin-left: 19%;
	min-width: 36%;
	max-width: 77%;	
	}
form { 
/*formular ausreichten! */
/*margin = Rand-Breite oben, rechts, links zentrieren bzw. ausrichten!*/
/* Es ist auch margin: 0% 0% 0% 5%; möglich jedoch ist margin: auto 5%; besser, weil automatisch alle anderen Ränder zentriert werden. */
	margin: 1.5% 0% 0% 23%; }
	/* .textfeld, .submitbutton, .namensfeld brauchen je nach Bidschirm eine Breite. Das ist der Außenrand. input=submitbutton text der Vergößert werden muss wenn es zu 4K Monitoren über geht! */
.textfeld, .submitbutton, .namensfeld, input  { font-size: 30px; min-width: 35%;	max-width: 75%;}
/* An dieser Stelle werden die einzelnen Felder in der Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld input, .textfeld textarea, select {  font-size: 90%; padding: 0% 0% 0% 0%;}
/* An dieser Stelle wid die (select Auswahlfeld) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
select {  width: 75%;}
/* An dieser Stelle wid die (.textfeld textarea) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld textarea {  width: 75%; max-height: 150px}
/* An dieser Stelle wid die (.textfeld input) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld input {  width: 90%;}
}
@media (min-width: 2601px) and (max-width: 3900px){
#navigation {
/* position: fixed; =
Legt die scrollende Navigation fest (ist beweglich). Beim scrollen der Webseite, verfolgt die Webseitennavigation immer die gleiche Position. Hier ist dabei auch zu beachten, dass der Abstand zwischen der Navigation und zu lesenden Text (im Content) der Bildschirmbreite angepasst wird. Dies geschieht durch die Unterteilung der Fenstergrößen, die weiter unten festgelegt werden müssen. */
	position: fixed; /* Das top: 0; setzt die Navigation nach gnz oben! */ top: 0; left: 2px;
}
/* .navfigure: = Bild in der Navigation!  */
#navigation .navfigure img {	text-align:center; margin: 0% 0% 0% 9%; min-width: 31%;	max-width: 40%;}
/* navigation = Ende alle Navi-Grund-Einstellungen! */

/* Mit diesen Elementen können Video, Audio und Objekte in die richtige Form gebracht werden. */
/* Bitte einhalten und nicht verändern! */
/* Bei Video max-width:50%; height:50% funktinier! */
#content video, audio, object{ max-width:50%; max-height:50%;}
/* Der videocontainer lässt sich hier nicht anders einstellen! */
/* Bitte das videocontainer, Element, einzeln Auflisten und so beibehalten! */
.videocontainer{ width:70%; height: auto;}
/* Bitte das .videorahmen bzw. .audiorahmen Element, zusammen Auflisten, weil hier nicht weiter verstellt werden muss! */
/* Mit diesen Element .videorahmen bzw. .audiorahmen erhalten Videos, Audio den richtigen Ramen. */
.videorahmen, .audiorahmen { text-align:center; padding-top: 0.1em; padding-bottom: 0.1em; padding-left: 0.1em; padding-right: 0.1em;}
/* Mit diesen Element können Bilder, sowie auch Bilder in einer Blockform in die richtige Form zugewiesen werden. */
#content .figure {	margin-top: 5px; margin-bottom: 5px; margin-left: 18%;}
/* Hier wird die Bild größe text-align:center; und Position 	width: 60%; besimmt!*/
#content .figure, img {text-align:center;	width: 55%;}
#content .paypalfigure {width: 30%; height: auto;}
#content td { padding: 10px; text-align:left; }

/* Das ist der Button zum Anzeigen des Menüs. Das muss hier ausgeblendet sein und darf nicht verändert werden! */
.menu-toggle {
    display: none;
}

/* Der oberste teil ist immer der Größte Bildschirm. Dieser Teil benötigt @media (min-width: 3840px) and (max-width: 8840px) { }! Alle haben ein @media (min-width: 3840px) and (max-width: 8840px) { } Die font-size: 30%; sind nicht überall Ratsam!!! */
#navigation, #footer a, form { font-size: 150%;	}
	/* Achtung! Bitte hier keine , li= Listeneilement, ul= Ungeordnete Liste, ol= Geordnete Liste eintragen, weil sonst die Navi in der Größe nicht veränderbar ist! */
#container #content p, #container #content address, #container #content article, #container #content aside, #container #content blockquote, #container #content strong, #container #content li {	font-size: 180%;}
#container #header h1	{	font-size: 230%;	text-align:center;}
#container #content h1	{	font-size: 230%;}
#container #content h2	{	font-size: 220%;}
#container #content h3	{	font-size: 210%;}
#container #content h4	{	font-size: 200%;}
#container #content h5	{	font-size: 190%;}
#container #content h6	{	font-size: 180%;}
#container #content footer { margin-left: 2%; padding-bottom: 1%;}
/* Die #navigation { width: 340px; } ist die weite der Navi und darf nicht mit header, #content, footer zusammengelegt werden. */
#navigation {/* width = Navigation Breite! */ width: 15%;}
#header, #footer {
	/* width = #header, #footer Breite! */ 
	margin-left: 17%;
	min-width: 35%;
	max-width: 80%;	
}
#content {
	margin-left: 17%;
	min-width: 36%;
	max-width: 80.4%;	
	}
form { 
/*formular ausreichten! */
/*margin = Rand-Breite oben, rechts, links zentrieren bzw. ausrichten!*/
/* Es ist auch margin: 0% 0% 0% 5%; möglich jedoch ist margin: auto 5%; besser, weil automatisch alle anderen Ränder zentriert werden. */
	margin: 1.5% 0% 0% 23%; }
	/* .textfeld, .submitbutton, .namensfeld brauchen je nach Bidschirm eine Breite. Das ist der Außenrand. input=submitbutton text der Vergößert werden muss wenn es zu 4K Monitoren über geht! */
.textfeld, .submitbutton, .namensfeld, input  { font-size: 30px; min-width: 35%;	max-width: 75%;}
/* An dieser Stelle werden die einzelnen Felder in der Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld input, .textfeld textarea, select {  font-size: 90%; padding: 0% 0% 0% 0%;}
/* An dieser Stelle wid die (select Auswahlfeld) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
select {  width: 75%;}
/* An dieser Stelle wid die (.textfeld textarea) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld textarea {  width: 75%; max-height: 150px}
/* An dieser Stelle wid die (.textfeld input) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld input {  width: 90%;}
}
@media (min-width: 2000px) and (max-width: 2600px){
#navigation {
/* position: fixed; =
Legt die scrollende Navigation fest (ist beweglich). Beim scrollen der Webseite, verfolgt die Webseitennavigation immer die gleiche Position. Hier ist dabei auch zu beachten, dass der Abstand zwischen der Navigation und zu lesenden Text (im Content) der Bildschirmbreite angepasst wird. Dies geschieht durch die Unterteilung der Fenstergrößen, die weiter unten festgelegt werden müssen. */
	position: fixed; /* Das top: 0; setzt die Navigation nach gnz oben! */ top: 0; left: 2px;
}
/* .navfigure: = Bild in der Navigation!  */
#navigation .navfigure img {	text-align:center; margin: 0% 0% 0% 9%; min-width: 31%;	max-width: 40%;}
/* navigation = Ende alle Navi-Grund-Einstellungen! */

/* Mit diesen Elementen können Video, Audio und Objekte in die richtige Form gebracht werden. */
/* Bitte einhalten und nicht verändern! */
/* Bei Video max-width:50%; height:50% funktinier! */
#content video, audio, object{ max-width:50%; max-height:50%;}
/* Der videocontainer lässt sich hier nicht anders einstellen! */
/* Bitte das videocontainer, Element, einzeln Auflisten und so beibehalten! */
.videocontainer{ width:70%; height: auto;}
/* Bitte das .videorahmen bzw. .audiorahmen Element, zusammen Auflisten, weil hier nicht weiter verstellt werden muss! */
/* Mit diesen Element .videorahmen bzw. .audiorahmen erhalten Videos, Audio den richtigen Ramen. */
.videorahmen, .audiorahmen { text-align:center; padding-top: 0.1em; padding-bottom: 0.1em; padding-left: 0.1em; padding-right: 0.1em;}
/* Mit diesen Element können Bilder, sowie auch Bilder in einer Blockform in die richtige Form zugewiesen werden. */
#content .figure {	margin-top: 5px; margin-bottom: 5px; margin-left: 18%;}
/* Hier wird die Bild größe text-align:center; und Position 	width: 60%; besimmt!*/
#content .figure, img {text-align:center;	width: 55%;}
#content .paypalfigure {width: 30%; height: auto;}
#content td { padding: 10px; text-align:left; }

/* Das ist der Button zum Anzeigen des Menüs. Das muss hier ausgeblendet sein und darf nicht verändert werden! */
.menu-toggle {
    display: none;
}

/* Der oberste teil ist immer der Größte Bildschirm. Dieser Teil benötigt @media (min-width: 3840px) and (max-width: 8840px) { }! Alle haben ein @media (min-width: 3840px) and (max-width: 8840px) { } Die font-size: 30%; sind nicht überall Ratsam!!! */
#navigation, #footer a, form { font-size: 20px;	}
	/* Achtung! Bitte hier keine , li= Listeneilement, ul= Ungeordnete Liste, ol= Geordnete Liste eintragen, weil sonst die Navi in der Größe nicht veränderbar ist! */
#container #content p, #container #content address, #container #content article, #container #content aside, #container #content blockquote, #container #content strong, #container #content li {	font-size: 27px;}
#container #header h1	{	font-size: 27px;	text-align:center;}
#container #content h1	{	font-size: 27px;}
#container #content h2	{	font-size: 25px;}
#container #content h3	{	font-size: 23px;}
#container #content h4	{	font-size: 22px;}
#container #content h5	{	font-size: 21px;}
#container #content h6	{	font-size: 20px;}
#container #content footer { margin-left: 2%; padding-bottom: 1%;}
/* Die #navigation { width: 340px; } ist die weite der Navi und darf nicht mit header, #content, footer zusammengelegt werden. */
#navigation {/* width = Navigation Breite! */ width: 17%;}
#header, #footer {
	/* width = #header, #footer Breite! */ 
	margin-left: 19%;
	min-width: 35%;
	max-width: 80%;	
}
#content {
	margin-left: 19%;
	min-width: 36%;
	max-width: 80.4%;	
	}
form { 
/*formular ausreichten! */
/*margin = Rand-Breite oben, rechts, links zentrieren bzw. ausrichten!*/
/* Es ist auch margin: 0% 0% 0% 5%; möglich jedoch ist margin: auto 5%; besser, weil automatisch alle anderen Ränder zentriert werden. */
	margin: 1.5% 0% 0% 23%; }
	/* .textfeld, .submitbutton, .namensfeld brauchen je nach Bidschirm eine Breite. Das ist der Außenrand. input=submitbutton text der Vergößert werden muss wenn es zu 4K Monitoren über geht! */
.textfeld, .submitbutton, .namensfeld, input  { font-size: 30px; min-width: 35%;	max-width: 75%;}
/* An dieser Stelle werden die einzelnen Felder in der Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld input, .textfeld textarea, select {  font-size: 90%; padding: 0% 0% 0% 0%;}
/* An dieser Stelle wid die (select Auswahlfeld) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
select {  width: 75%;}
/* An dieser Stelle wid die (.textfeld textarea) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld textarea {  width: 75%; max-height: 150px}
/* An dieser Stelle wid die (.textfeld input) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld input {  width: 90%;}
}
@media (min-width: 1610px) and (max-width: 2000px){
#navigation {
/* position: fixed; =
Legt die scrollende Navigation fest (ist beweglich). Beim scrollen der Webseite, verfolgt die Webseitennavigation immer die gleiche Position. Hier ist dabei auch zu beachten, dass der Abstand zwischen der Navigation und zu lesenden Text (im Content) der Bildschirmbreite angepasst wird. Dies geschieht durch die Unterteilung der Fenstergrößen, die weiter unten festgelegt werden müssen. */
	position: fixed; /* Das top: 0; setzt die Navigation nach gnz oben! */ top: 0; left: 2px;
}
/* .navfigure: = Bild in der Navigation!  */
#navigation .navfigure img {	text-align:center; margin: 0% 0% 0% 9%; min-width: 31%;	max-width: 40%;}
/* navigation = Ende alle Navi-Grund-Einstellungen! */

/* Mit diesen Elementen können Video, Audio und Objekte in die richtige Form gebracht werden. */
/* Bitte einhalten und nicht verändern! */
/* Bei Video max-width:50%; height:50% funktinier! */
#content video, audio, object{ max-width:50%; max-height:50%;}
/* Der videocontainer lässt sich hier nicht anders einstellen! */
/* Bitte das videocontainer, Element, einzeln Auflisten und so beibehalten! */
.videocontainer{ width:70%; height: auto;}
/* Bitte das .videorahmen bzw. .audiorahmen Element, zusammen Auflisten, weil hier nicht weiter verstellt werden muss! */
/* Mit diesen Element .videorahmen bzw. .audiorahmen erhalten Videos, Audio den richtigen Ramen. */
.videorahmen, .audiorahmen { text-align:center; padding-top: 0.1em; padding-bottom: 0.1em; padding-left: 0.1em; padding-right: 0.1em;}
/* Mit diesen Element können Bilder, sowie auch Bilder in einer Blockform in die richtige Form zugewiesen werden. */
#content .figure {	margin-top: 5px; margin-bottom: 5px; margin-left: 18%;}
/* Hier wird die Bild größe text-align:center; und Position 	width: 60%; besimmt!*/
#content .figure, img {text-align:center;	width: 55%;}
#content .paypalfigure {width: 30%; height: auto;}
#content td { padding: 10px; text-align:left; }

/* Das ist der Button zum Anzeigen des Menüs. Das muss hier ausgeblendet sein und darf nicht verändert werden! */
.menu-toggle {
    display: none;
}

/* Der oberste teil ist immer der Größte Bildschirm. Dieser Teil benötigt @media (min-width: 3840px) and (max-width: 8840px) { }! Alle haben ein @media (min-width: 3840px) and (max-width: 8840px) { } Die font-size: 30%; sind nicht überall Ratsam!!! */
#navigation, #footer a, form { font-size: 14px;	}
	/* Achtung! Bitte hier keine , li= Listeneilement, ul= Ungeordnete Liste, ol= Geordnete Liste eintragen, weil sonst die Navi in der Größe nicht veränderbar ist! */
#container #content p, #container #content address, #container #content article, #container #content aside, #container #content blockquote, #container #content strong, #container #content li {	font-size: 18px;}
#container #header h1	{	font-size: 24px;	text-align:center;}
#container #content h1	{	font-size: 23px;}
#container #content h2	{	font-size: 22px;}
#container #content h3	{	font-size: 21px;}
#container #content h4	{	font-size: 20px;}
#container #content h5	{	font-size: 19px;}
#container #content h6	{	font-size: 18px;}
#container #content footer { margin-left: 2%; padding-bottom: 1%;}
/* Die #navigation { width: 340px; } ist die weite der Navi und darf nicht mit header, #content, footer zusammengelegt werden. */
#navigation {/* width = Navigation Breite! */ width: 15%;}
#header, #footer {
	/* width = #header, #footer Breite! */ 
	margin-left: 17%;
	min-width: 35%;
	max-width: 80%;	
}
#content {
	margin-left: 17%;
	min-width: 36%;
	max-width: 80.4%;	
	}
form { 
/*formular ausreichten! */
/*margin = Rand-Breite oben, rechts, links zentrieren bzw. ausrichten!*/
/* Es ist auch margin: 0% 0% 0% 5%; möglich jedoch ist margin: auto 5%; besser, weil automatisch alle anderen Ränder zentriert werden. */
	margin: 1.5% 0% 0% 23%; }
	/* .textfeld, .submitbutton, .namensfeld brauchen je nach Bidschirm eine Breite. Das ist der Außenrand. input=submitbutton text der Vergößert werden muss wenn es zu 4K Monitoren über geht! */
.textfeld, .submitbutton, .namensfeld, input  { font-size: 30px; min-width: 35%;	max-width: 75%;}
/* An dieser Stelle werden die einzelnen Felder in der Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld input, .textfeld textarea, select {  font-size: 90%; padding: 0% 0% 0% 0%;}
/* An dieser Stelle wid die (select Auswahlfeld) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
select {  width: 75%;}
/* An dieser Stelle wid die (.textfeld textarea) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld textarea {  width: 75%; max-height: 150px}
/* An dieser Stelle wid die (.textfeld input) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld input {  width: 90%;}
}
@media (min-width: 1031px) and (max-width: 1610px){
#navigation {
/* position: fixed; =
Legt die scrollende Navigation fest (ist beweglich). Beim scrollen der Webseite, verfolgt die Webseitennavigation immer die gleiche Position. Hier ist dabei auch zu beachten, dass der Abstand zwischen der Navigation und zu lesenden Text (im Content) der Bildschirmbreite angepasst wird. Dies geschieht durch die Unterteilung der Fenstergrößen, die weiter unten festgelegt werden müssen. */
	position: fixed; /* Das top: 0; setzt die Navigation nach gnz oben! */ top: 0; left: 2px;
}
/* .navfigure: = Bild in der Navigation!  */
#navigation .navfigure img {	text-align:center; margin: 0% 0% 0% 9%; min-width: 31%;	max-width: 40%;}
/* navigation = Ende alle Navi-Grund-Einstellungen! */

/* Mit diesen Elementen können Video, Audio und Objekte in die richtige Form gebracht werden. */
/* Bitte einhalten und nicht verändern! */
/* Bei Video max-width:50%; height:50% funktinier! */
#content video, audio, object{ max-width:50%; max-height:50%;}
/* Der videocontainer lässt sich hier nicht anders einstellen! */
/* Bitte das videocontainer, Element, einzeln Auflisten und so beibehalten! */
.videocontainer{ width:70%; height: auto;}
/* Bitte das .videorahmen bzw. .audiorahmen Element, zusammen Auflisten, weil hier nicht weiter verstellt werden muss! */
/* Mit diesen Element .videorahmen bzw. .audiorahmen erhalten Videos, Audio den richtigen Ramen. */
.videorahmen, .audiorahmen { text-align:center; padding-top: 0.1em; padding-bottom: 0.1em; padding-left: 0.1em; padding-right: 0.1em;}
/* Mit diesen Element können Bilder, sowie auch Bilder in einer Blockform in die richtige Form zugewiesen werden. */
#content .figure {	margin-top: 5px; margin-bottom: 5px; margin-left: 21%; text-align:center;}
/* Hier wird die Bild größe text-align:center; und Position 	width: 60%; besimmt!*/
#content .figure, img {text-align:center;	width: 55%;}
#content .paypalfigure {width: 20%; height: auto;}
#content td { padding: 10px; text-align:left; }

/* Das ist der Button zum Anzeigen des Menüs. Das muss hier ausgeblendet sein und darf nicht verändert werden! */
.menu-toggle {
    display: none;
}

/* Der oberste teil ist immer der Größte Bildschirm. Dieser Teil benötigt @media (min-width: 3840px) and (max-width: 8840px) { }! Alle haben ein @media (min-width: 3840px) and (max-width: 8840px) { } Die font-size: 30%; sind nicht überall Ratsam!!! */
#navigation, #footer a, form { font-size: 12px;	}
	/* Achtung! Bitte hier keine , li= Listeneilement, ul= Ungeordnete Liste, ol= Geordnete Liste eintragen, weil sonst die Navi in der Größe nicht veränderbar ist! */
#container #content p, #container #content address, #container #content article, #container #content aside, #container #content blockquote, #container #content strong, #container #content li {	font-size: 16px;}
#container #header h1	{	font-size: 23px;	text-align:center;}
#container #content h1	{	font-size: 22px;}
#container #content h2	{	font-size: 21px;}
#container #content h3	{	font-size: 20px;}
#container #content h4	{	font-size: 14px;}
#container #content h5	{	font-size: 13px;}
#container #content h6	{	font-size: 12px;}
#container #content footer { margin-left: 2%; padding-bottom: 1%;}
/* Die #navigation { width: 340px; } ist die weite der Navi und darf nicht mit header, #content, footer zusammengelegt werden. */
#navigation {/* width = Navigation Breite! */ width: 16%;}
#header, #footer {
	/* width = #header, #footer Breite! */ 
	margin-left: 19%;
	min-width: 35%;
	max-width: 80%;	
}
#content {
	margin-left: 19%;
	min-width: 36%;
	max-width: 80.4%;	
	}
form { 
/*formular ausreichten! */
/*margin = Rand-Breite oben, rechts, links zentrieren bzw. ausrichten!*/
/* Es ist auch margin: 0% 0% 0% 5%; möglich jedoch ist margin: auto 5%; besser, weil automatisch alle anderen Ränder zentriert werden. */
	margin: 1.5% 0% 0% 23%; }
	/* .textfeld, .submitbutton, .namensfeld brauchen je nach Bidschirm eine Breite. Das ist der Außenrand. input=submitbutton text der Vergößert werden muss wenn es zu 4K Monitoren über geht! */
.textfeld, .submitbutton, .namensfeld, input  { font-size: 25px; min-width: 35%;	max-width: 75%;}
/* An dieser Stelle werden die einzelnen Felder in der Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld input, .textfeld textarea, select {  font-size: 80%; padding: 0% 0% 0% 0%;}
/* An dieser Stelle wid die (select Auswahlfeld) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
select {  width: 75%;}
/* An dieser Stelle wid die (.textfeld textarea) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld textarea {  width: 75%; max-height: 150px}
/* An dieser Stelle wid die (.textfeld input) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld input {  width: 90%;}
}
@media (min-width: 881px) and (max-width: 1030px){
#navigation {
/* position: fixed; =
Legt die scrollende Navigation fest (ist beweglich). Beim scrollen der Webseite, verfolgt die Webseitennavigation immer die gleiche Position. Hier ist dabei auch zu beachten, dass der Abstand zwischen der Navigation und zu lesenden Text (im Content) der Bildschirmbreite angepasst wird. Dies geschieht durch die Unterteilung der Fenstergrößen, die weiter unten festgelegt werden müssen. */
	position: fixed; /* Das top: 0; setzt die Navigation nach gnz oben! */ top: 0; left: 2px;
}
/* .navfigure: = Bild in der Navigation!  */
#navigation .navfigure, img {	text-align:center; margin: 0% 0% 0% 9%; min-width: 51%;	max-width: 68%;}
/* navigation = Ende alle Navi-Grund-Einstellungen! */

/* Mit diesen Elementen können Video, Audio und Objekte in die richtige Form gebracht werden. */
/* Bitte einhalten und nicht verändern! */
/* Bei Video max-width:50%; height:50% funktinier! */
#content video, audio, object{ max-width:50%; max-height:50%;}
/* Der videocontainer lässt sich hier nicht anders einstellen! */
/* Bitte das videocontainer, Element, einzeln Auflisten und so beibehalten! */
.videocontainer{ width:70%; height: auto;}
/* Bitte das .videorahmen bzw. .audiorahmen Element, zusammen Auflisten, weil hier nicht weiter verstellt werden muss! */
/* Mit diesen Element .videorahmen bzw. .audiorahmen erhalten Videos, Audio den richtigen Ramen. */
.videorahmen, .audiorahmen { text-align:center; padding-top: 0.1em; padding-bottom: 0.1em; padding-left: 0.1em; padding-right: 0.1em;}
/* Mit diesen Element können Bilder, sowie auch Bilder in einer Blockform in die richtige Form zugewiesen werden. */
#content .figure {	margin-top: 5px; margin-bottom: 5px; margin-left: 20%;}
/* Hier wird die Bild größe text-align:center; und Position 	width: 60%; besimmt!*/
#content .figure, img {text-align:center;	width: 60%;}
#content .paypalfigure {width: 30%; height: auto;}
#content td { padding: 10px; text-align:left; }

/* Das ist der Button zum Anzeigen des Menüs. Das muss hier ausgeblendet sein und darf nicht verändert werden! */
.menu-toggle {
    display: none;
}

/* Außerdem werden die Größen von header, Navi und footer festgelegt. Ab hier werden au die @media screen and (max-width: 1900px) { } verwendet. */
/* Der oberste teil ist immer der Größte Bildschirm. Dieser Teil benötigt nicht unbedingt @media screen and (max-width: 5500px) { }! */
/* Alle haben ein @media screen and (max-width: 5500px) { } Die font-size: 30%; sind nicht Ratsam!!! */
#navigation, #footer a, form { font-size: 12px;	}
/* Achtung! Bitte hier keine , li= Listeneilement, ul= Ungeordnete Liste, ol= Geordnete Liste eintragen, weil sonst die Navi in der Größe nicht veränderbar ist! */
#container #content p, #container #content address, #container #content article, #container #content aside, #container #content blockquote, #container #content strong, #container #content li {	font-size: 14px;}
#container #header h1	{	font-size: 19px;	text-align:center;}
#container #content h1	{	font-size: 18px;}
#container #content h2	{	font-size: 17px;}
#container #content h3	{	font-size: 16px;}
#container #content h4	{	font-size: 15px;}
#container #content h5	{	font-size: 14px;}
#container #content h6	{	font-size: 12px;}
#container #content footer { margin-left: 2%; padding-bottom: 1%;}
/* Die #navigation { width: 340px; } ist die weite der Navi und darf nicht mit header, #content, footer zusammengelegt werden. */
#navigation {/* width = Navigation Breite! */ width: 18%;}
#header, #footer {
	/* width = #header, #footer Breite! */ 
	margin-left: 21%;
	min-width: 15%;
	max-width: 76%;	
}
#content {
	margin-left: 21%;
	min-width: 36%;
	max-width: 78%;	
	}
form { 
/*formular ausreichten! */
/*margin = Rand-Breite oben, rechts, links zentrieren bzw. ausrichten!*/
/* Es ist auch margin: 0% 0% 0% 5%; möglich jedoch ist margin: auto 5%; besser, weil automatisch alle anderen Ränder zentriert werden. */
	margin: 1.5% 0% 0% 23%; }
	/* .textfeld, .submitbutton, .namensfeld brauchen je nach Bidschirm eine Breite. Das ist der Außenrand. input=submitbutton text der Vergößert werden muss wenn es zu 4K Monitoren über geht! */
.textfeld, .submitbutton, .namensfeld, input  { font-size: 20px; min-width: 35%;	max-width: 75%;}
/* An dieser Stelle werden die einzelnen Felder in der Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld input, .textfeld textarea, select {  font-size: 80%; padding: 0% 0% 0% 0%;}
/* An dieser Stelle wid die (select Auswahlfeld) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
select {  width: 75%;}
/* An dieser Stelle wid die (.textfeld textarea) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld textarea {  width: 75%; max-height: 150px}
/* An dieser Stelle wid die (.textfeld input) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld input {  width: 90%;}
}
@media (max-width: 880px){
   
  /* Button zum Anzeigen des Menüs */
  .js .menu-toggle {
    display: block;
    cursor: pointer;
    color: #fff;
    border-radius: 50%;
    background-color: #B04801;
    width: 2.5em;
    height: 2.5em;
	/* die Menüe ausblendung kann mit margin: 30px redunziert werden. */
    margin: 30px auto;
	/* Die Einstellung margin-bottom: 35px; macht Menü besser Sichtbar*/
	margin-bottom: 35px auto auto auto;
    text-align: center;
    line-height: 2.5em;
    border: 1px solid #010101;
    font-weight: normal; 
  }
  #navigation li {
/* In diesem Abschnitt sind dann Schatten bzw. Hintergrundeinstellungen möglich. Sie unterstützen den Anwender für kleine Gerätebetreiber sich zu Orientieren, weil etwas Schatten mit vorhanden ist. */
    -webkit-box-shadow: 0 5px 5px rgba(245, 245, 245, 0.75) inset;
    box-shadow: 0 5px 5px rgba(245, 245, 245, 0.75) inset;
	padding-top: 10px; padding-bottom: 5px;
  }
  .js  #navigation ul {
/* An dieser Stelle wird die Navigation ausgeblendet, wenn auf den Button geklickt wird. */
	display: none;
	text-align: center;
  }
  #navigation ul.toggled-on {
/* An dieser Stelle wird die Navigation wieder eingeblendet, wenn auf den Button das 1. mal geklickt wird. */
    display: block;
  }
   #navigation ul.toggled-on li,  .no-js  #navi  li { 
    display: block;
  }
  [data-icon]:before { 
    content: attr(data-icon); 
    speak: none; 
    display: inline-block;
    font-size: 200%;
  }
  .screen-reader-text { 
/*position: absolute; top: -9999px; left: -9999px; Sorgen die Menüe ausblendung.*/
/*    position: absolute; 
    top: -9999px; 
    left: -9999px; 
*/
   }
  /* Ende Button zum Anzeigen des Menüs */
/* .navfigure: = Bild in der Navigation!  */
#navigation .navfigure, img {	text-align:center; margin: 0% 0% 0% 19%; min-width: 11%;	max-width: 48%;}
/* navigation = Ende alle Navi-Grund-Einstellungen! */

/* Mit diesen Elementen können Video, Audio und Objekte in die richtige Form gebracht werden. */
/* Bitte einhalten und nicht verändern! */
/* Bei Video max-width:50%; height:50% funktinier! */
#content video, audio, object{ max-width:50%; max-height:50%;}
/* Der videocontainer lässt sich hier nicht anders einstellen! */
/* Bitte das videocontainer, Element, einzeln Auflisten und so beibehalten! */
.videocontainer{ width:70%; height: auto; text-align: center;}
/* Bitte das .videorahmen bzw. .audiorahmen Element, zusammen Auflisten, weil hier nicht weiter verstellt werden muss! */
/* Mit diesen Element .videorahmen bzw. .audiorahmen erhalten Videos, Audio den richtigen Ramen. */
.videorahmen, .audiorahmen { text-align:center; padding-top: 0.1em; padding-bottom: 0.1em; padding-left: 0.1em; padding-right: 0.1em;}
/* Mit diesen Element können Bilder, sowie auch Bilder in einer Blockform in die richtige Form zugewiesen werden. */
#content .figure {	margin-top: 5px; margin-bottom: 5px; margin-left: 10%;}
/* Hier wird die Bild größe text-align:center; und Position 	width: 60%; besimmt!*/
#content .figure, img {text-align:center;	width: 30%;}
#content .paypalfigure {width: 30%; height: auto;}
#navigation, #footer a, form { font-size: 12px;	}
/* macht den Fuß (li) zu einem Block-Elment. */
	#footer li {display: block;}
/* Achtung! Bitte hier keine , li= Listeneilement, ul= Ungeordnete Liste, ol= Geordnete Liste eintragen, weil sonst die Navi in der Größe nicht veränderbar ist! */
#container #content p, #container #content address, #container #content article, #container #content aside, #container #content blockquote, #container #content strong, #container #content li {	font-size: 14px;}
#container #header h1	{	font-size: 19px;	text-align:center;}
#container #content h1	{	font-size: 18px;}
#container #content h2	{	font-size: 17px;}
#container #content h3	{	font-size: 16px;}
#container #content h4	{	font-size: 15px;}
#container #content h5	{	font-size: 14px;}
#container #content h6	{	font-size: 12px;}
#container #content footer { margin-left: 2%; padding-bottom: 1%;}
/* Tabellenformatierung geändert in senktrecht!
Beachtet dass dieser Art von Tabellen nicht dafür geeignet sind, mehr als 15 Zeichen zu verwenden!
Wenn mehr als 15 Zeichen verwendet werden, so wird es dann unlesbar! */
table, td, tr {
 display: block;
}
th {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
tr { 
  border: 1px solid #ddd;
}
td {         
  /* border: none; = Tabellenrand wird Unsichtbar. */
  border: none;
  /* position: relative; = Ermöglicht eine senktrecht positionierung. */
  position: relative;
  /* top: -8px; = An dieser Stelle kann das Produkt bzw. Tabellencelle richtig posizioniert werden. */
  top: 5px;
}
td:before {  
  position: absolute;
  /* top: -8px; = An dieser Stelle kann before Produkt bzw. Beschreibung richtig posizioniert werden. */
  top: -8px;
  /* left: 1px; = An dieser Stelle kann das Produkt bzw. Tabellenbesreibung nach rechts posizioniert werden. */
  left: 10px;
  width: 10%;
  /*  text-decoration: underline; = An dieser Stelle bekommt das Produkt bzw. Tabellenbesreibung eine Unterlienie. */
  text-decoration: none;
} 
  td:nth-of-type(1):before { content: "Produkt"; }
  td:nth-of-type(2):before { content: "Beschreibung"; }
  td:nth-of-type(3):before { content: "Preis"; }  
/* An dieser Stelle wird eine Einstellung im Formular gemacht. */
form { 
/*formular ausreichten! */
/*margin = Rand-Breite oben, rechts, links zentrieren bzw. ausrichten!*/
/* Es ist auch margin: 0% 0% 0% 5%; möglich jedoch ist margin: auto 5%; besser, weil automatisch alle anderen Ränder zentriert werden. */
	margin: 1.5% 0% 0% 23%; }
	/* .textfeld, .submitbutton, .namensfeld brauchen je nach Bidschirm eine Breite. Das ist der Außenrand. input=submitbutton text der Vergößert werden muss wenn es zu 4K Monitoren über geht! */
.textfeld, .submitbutton, .namensfeld, input  { font-size: 20px; min-width: 35%;	max-width: 75%;}
/* An dieser Stelle werden die einzelnen Felder in der Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld input, .textfeld textarea, select {  font-size: 90%; padding: 0% 0% 0% 0%;}
/* An dieser Stelle wid die (select Auswahlfeld) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
select {  width: 75%;}
/* An dieser Stelle wid die (.textfeld textarea) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld textarea {  width: 75%; max-height: 150px}
/* An dieser Stelle wid die (.textfeld input) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld input {  width: 90%;}
}
@media screen and (max-width: 770px) {
/* Mit diesen Element können Bilder, sowie auch Bilder in einer Blockform in die richtige Form zugewiesen werden. */
#content .figure {	margin-top: 5px; margin-bottom: 5px; margin-left: 15%;}
/* Hier wird die Bild größe text-align:center; und Position 	width: 60%; besimmt!*/
#content .figure, img {text-align:center;	width: 70%;}
#content .paypalfigure {width: 40%; height: auto;}
#navigation, #footer a, form { font-size: 12px;	}

	#navigation, footer a, form { font-size: 12px;}
	#container {	max-width: 100%;}
	/* Achtung! Bitte hier keine , li= Listeneilement, ul= Ungeordnete Liste, ol= Geordnete Liste eintragen, weil sonst die Navi in der Größe nicht veränderbar ist! */
	#container #content p, #container #content address, #container #content article, #container #content aside, #container #content blockquote, #container #content strong, #container #content li {	font-size: 16px;}
#container header h1	{	font-size: 17px;}
#container #content h1	{	font-size:17px;}
#container #content h2	{	font-size:16px;}
#container #content h3	{	font-size:15px;}
#container #content h4	{	font-size:14px;}
#container #content h5	{	font-size:13px;}
#container #content h6	{	font-size:12px;}
#container #content footer { margin-left: 2%; padding-bottom: 1%;}
/* Hier wird Navigation, header, #content und footer, für die kleinen Bildformate, Rahmen-Größen bereitgestellt. */
	header {
	/* Mit width: 83%; kann die Navigation in die richtige Position gebracht werden. */
	/* Mit max-width: 800px; min-width: 700px; kann die Navigation auch in die richtige Position gebracht werden. */
	max-width: 100%;
	margin-left: 1%;
	margin-right: 1%;	
	}
	#navigation {
	/* Mit width: 83%; kann die Navigation in die richtige Position gebracht werden. */
	/* Mit max-width: 800px; min-width: 700px; kann die Navigation auch in die richtige Position gebracht werden. */
	width: 95.4%;
	margin-left: 0.5%;
	margin-right: 1%;
	}
	#content {
	/* Mit width: 83%; kann die Navigation in die richtige Position gebracht werden. */
	/* Mit max-width: 800px; min-width: 700px; kann die Navigation auch in die richtige Position gebracht werden. */
	max-width: 100%;
	margin-left: 1%;
	margin-right: 1%;	
	}
	footer {
				max-width: 100%;
				margin-left: 1%;
				margin-right: 1%;	
	}
/* An dieser Stelle wird eine Einstellung im Formular gemacht. */
form { 
/*formular ausreichten! */
/*margin = Rand-Breite oben, rechts, links zentrieren bzw. ausrichten!*/
/* Es ist auch margin: 0% 0% 0% 5%; möglich jedoch ist margin: auto 5%; besser, weil automatisch alle anderen Ränder zentriert werden. */
	margin: 1.5% 0% 0% 23%; }
	/* .textfeld, .submitbutton, .namensfeld brauchen je nach Bidschirm eine Breite. Das ist der Außenrand. input=submitbutton text der Vergößert werden muss wenn es zu 4K Monitoren über geht! */
.textfeld, .submitbutton, .namensfeld, input  { font-size: 17px; min-width: 35%;	max-width: 75%;}
/* An dieser Stelle werden die einzelnen Felder in der Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld input, .textfeld textarea, select {  font-size: 90%; padding: 0% 0% 0% 0%;}
/* An dieser Stelle wid die (select Auswahlfeld) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
select {  width: 75%;}
/* An dieser Stelle wid die (.textfeld textarea) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld textarea {  width: 75%; max-height: 150px}
/* An dieser Stelle wid die (.textfeld input) Größe, (von width: 10%; bis width: 100%;) Höhe und Breite bestimmt. */
.textfeld input {  width: 90%;}
}
@media screen and (max-width: 350px) {
/* Mit diesen Element können Bilder, sowie auch Bilder in einer Blockform in die richtige Form zugewiesen werden. */
#content .figure {	margin-top: 5px; margin-bottom: 5px; margin-left: 8%;}
/* Hier wird die Bild größe text-align:center; und Position 	width: 60%; besimmt!*/
#content .figure, img {text-align:center;	width: 70%;}
#content .paypalfigure {width: 40%; height: auto;}
#navigation, #footer a, form { font-size: 12px;	}

	#navigation, footer a, form { font-size: 11px;}
	#container {	max-width: 100%;}
	/* Achtung! Bitte hier keine , li= Listeneilement, ul= Ungeordnete Liste, ol= Geordnete Liste eintragen, weil sonst die Navi in der Größe nicht veränderbar ist! */
	#container #content p, #container #content address, #container #content article, #container #content aside, #container #content blockquote, #container #content strong, #container #content li {	font-size: 15px;}
#container header h1	{	font-size: 16px;}
#container #content h1	{	font-size:16px;}
#container #content h2	{	font-size:15px;}
#container #content h3	{	font-size:14px;}
#container #content h4	{	font-size:13px;}
#container #content h5	{	font-size:12px;}
#container #content h6	{	font-size:11px;}
#container #content footer { margin-left: 2%; padding-bottom: 1%;}
	#navigation {
	/* Mit width: 83%; kann die Navigation in die richtige Position gebracht werden. */
	/* Mit max-width: 800px; min-width: 700px; kann die Navigation auch in die richtige Position gebracht werden. */
	width: 91.4%;
	margin-left: 0.5%;
	margin-right: 1%;
	}
	}
@media screen and (max-width: 250px) {
/* Mit diesen Element können Bilder, sowie auch Bilder in einer Blockform in die richtige Form zugewiesen werden. */
#content .figure {	margin-top: 5px; margin-bottom: 5px; margin-left: 10%;}
/* Hier wird die Bild größe text-align:center; und Position 	width: 60%; besimmt!*/
#content .figure, img {text-align:center;	width: 30%;}
#content .paypalfigure {width: 60%; height: auto;}
#navigation, #footer a, form { font-size: 12px;	}

	#navigation, footer a, form { font-size: 10px;}
	#container {	max-width: 95%;}
	/* Achtung! Bitte hier keine , li= Listeneilement, ul= Ungeordnete Liste, ol= Geordnete Liste eintragen, weil sonst die Navi in der Größe nicht veränderbar ist! */
	#container #content p, #container #content address, #container #content article, #container #content aside, #container #content blockquote, #container #content strong, #container #content li {	font-size: 15px;}
	#container header h1	{	font-size: 15px;}
	#container #content h1	{	font-size:15px;}
	#container #content h2	{	font-size:14px;}
	#container #content h3	{	font-size:13px;}
	#container #content h4	{	font-size:12px;}
	#container #content h5	{	font-size:11px;}
	#container #content h6	{	font-size:10px;}
	#container #content footer { margin-left: 2%; padding-bottom: 1%;}
	header {
	/* Mit width: 83%; kann die Navigation in die richtige Position gebracht werden. */
	/* Mit max-width: 800px; min-width: 700px; kann die Navigation auch in die richtige Position gebracht werden. */
	max-width: 91%;
	margin-left: 1%;
	margin-right: 1%;	
	}
	#navigation {
	/* Mit width: 83%; kann die Navigation in die richtige Position gebracht werden. */
	/* Mit max-width: 800px; min-width: 700px; kann die Navigation auch in die richtige Position gebracht werden. */
	width: 88.4%;
	margin-left: 0.5%;
	margin-right: 1%;
	}
	#content {
	/* Mit width: 83%; kann die Navigation in die richtige Position gebracht werden. */
	/* Mit max-width: 800px; min-width: 700px; kann die Navigation auch in die richtige Position gebracht werden. */
	max-width: 91%;
	margin-left: 1%;
	margin-right: 1%;	
	}
	footer {
				max-width: 90%;
				margin-left: 1%;
				margin-right: 1%;	
	}
	}
@media [media query logic here] {
  /* Die CSS ist kein Fehler, sondern die Prüfung ist noch nicht acktuell! */
  @-ms-viewport {
    [viewport size here]
  }
  [CSS for this layout combination goes here.]
}
@media screen and (max-width: 400px) {
  @-ms-viewport { width: 320px; }
  /* CSS für 320px Layout geht hier */
}

@media screen and (min-width: 400px) and (max-width: 640px) {
  @-ms-viewport { width: 400px; }
  /* CSS für 400px Layout geht hier */
}

@media screen and (min-width: 640px) and (max-width: 1024px) {
  @-ms-viewport { width: 640px; }
  /* CSS für 640px Layout geht hier */
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
  @-ms-viewport { width: 1024px; }
  /* CSS für 1024px Layout geht hier */
}

@media print {
	  body {    font-family: serif;	color: #000;	background-color: #fff;}
	  #navigation {    display: none;}
	#footer {    display: none;}
}