/* für IE */
main {display:block;}


/* allgemeine Angaben für Farben, Abstände und Größen*/
body {background-color:#ece0e6; /*f6f1ee*/
	  margin:0 auto;
	  max-width:85em;
	  font-family:Helvetica, Geneva, Arial, sans-serif;
	  color:#33071e;											/* tiefweinrot Textfarbe */
	  display:-webkit-flex;
	  -webkit-flex-flow: row wrap;
	  display:flex;
	  flex-flow: row wrap;
	  -ms-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto;
	  }
	  
article			  {padding:0 0.5em;}
aside.rechteseite {padding:0 0.8em;}

header,aside      {background:#5e1b3f;} /*neu*/
aside.rechteseite {background:#e0aac7;} /*neu*/


/* Textfarbe, Trennlinie Fließtext --> tiefweinrot */
#linie_tiefweinrot_duenn{background-color:#33071e; height:1px;   margin-top:0em; margin-bottom:-0em;}

/* Textfarbe, Linie aside rechts --> tiefweinrot */
#linie_tiefweinrot_aside{background-color:#33071e; height:1.5px; margin-top:-1em;  margin-bottom:-0.5em;} 

/* Textfarbe, Trennlinie unten --> tiefweinrot */
#linie_tiefweinrot_unten{background-color:#33071e; height:3px; margin-top:0em;}     


img {border:0px;}

  
	  
/* header = Kopfzeile */
header img {width:100%; height:auto; max-width:2000px; max-height:auto; margin:0em; border:0px;}    /* max-height:max-content;   <-- testen*/

p.slogan_gross {font-size:1.6em;
		 color:#f7d2be;  /*#e9d5c9*/
		 font-weight:bold;
		 line-height:1em;
		 margin-top:0.8em;
		 margin-left:1em;
		 }
		 
p.slogan_klein {font-size:1.4em;
		 color:#f7d2be; /*#e9d5c9*/
		 line-height:1em;
		 margin-top:-0.7em;
		 margin-left:1.15em;
		 margin-bottom:1em;
		 }
		 


/* nav = Navigation/Verlinkung */
a.navi:link {font-size:0.95em;
	color:#f6f1ee;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:none;
	font-weight:bold;
	}

a.navi:visited {font-size:0.95em;
	color:#f6f1ee;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:none;
	font-weight:bold;
	}

a.navi:active {font-size:0.95em;
    color:#f6f1ee;
    font-family: Helvetica, Geneva, Arial, sans-serif;
    text-decoration: none;
    font-weight: bold;
}

a.navi:hover {font-size:0.95em;
	color:#f7d2be;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:none;
	font-weight:bold;
	}
	
ul {text-indent:-0.2em;}	
	
li.navi {padding-bottom:0.6em;
		 margin-left:-0.3em;
		 list-style-type:none;}
		 
li.navi_aktiv {padding-bottom:0.6em;
		 	   margin-left:-0.3em;
			   list-style-image:url(bilder/icon_navi.png);}
			   
.navi_aktiv {color:#f7d2be; font-weight:bold;} /*#b8d7d8*/


/* Navigation 2. Ebene */
li.unternavi1 {margin-top:-0.3em;
			   margin-bottom:0.6em;
			   margin-left:0.8em;
		       list-style-type:none;}
			  
li.unternavi1_aktiv {margin-top:-0.3em;
			 		 margin-bottom:0.6em;
			  		 margin-left:0.8em;
			   		 list-style-image:url(bilder/icon_navi.png);}

li.unternavi2 {margin-top:-0.3em;
			   margin-bottom:0.9em;
			   margin-left:0.8em;
		       list-style-type:none;}
			  
li.unternavi2_aktiv {margin-top:-0.3em;
			 		 margin-bottom:0.9em;
			  		 margin-left:0.8em;
			   		 list-style-image:url(bilder/icon_navi.png);}
					 

/* Navigation 3. Ebene */					 
li.unternavi3 {margin-top:-0.3em;
			   margin-bottom:0.6em;
			   margin-left:1.9em;
		       list-style-type:none;}
			  
li.unternavi3_aktiv {margin-top:-0.3em;
			 		 margin-bottom:0.6em;
			  		 margin-left:1.9em;
			   		 list-style-image:url(bilder/icon_navi.png);}
					 
li.unternavi4 {margin-top:-0.3em;
			   margin-bottom:0.9em;
			   margin-left:1.9em;
		       list-style-type:none;}
			  
li.unternavi4_aktiv {margin-top:-0.3em;
			 		 margin-bottom:0.9em;
			  		 margin-left:1.9em;
			   		 list-style-image:url(bilder/icon_navi.png);}
					 



a.text:link {font-size:1em;		
	color:#e35c02;  
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:none;
	font-weight:bold;
	}

a.text:visited {font-size:1em;
	color:#e35c02;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:none;
	font-weight:bold;
	}

a.text:active {font-size:1em;
    color:#e35c02;  
    font-family:Helvetica, Geneva, Arial, sans-serif;
    text-decoration:none;
	font-weight:bold;
	}

a.text:hover {font-size:1em;		/* tiefweinrot = Textfarbe*/
	color:#33071e;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:none;
	font-weight:bold;
	}
	
	

a.tabelle:link {font-size:1em;		
	color:#e35c02;  
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:none;
	}

a.tabelle:visited {font-size:1em;
	color:#e35c02;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:none;
	}

a.tabelle:active {font-size:1em;
    color:#e35c02;  
    font-family:Helvetica, Geneva, Arial, sans-serif;
    text-decoration:none;
	}

a.tabelle:hover {font-size:1em;		/* tiefweinrot = Textfarbe*/
	color:#33071e;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:none;
	}	
	
	
	
a.telefon_text:link {font-size:1em;		/* tiefweinrot = Textfarbe*/
	color:#33071e;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:none;
	}

a.telefon_text:visited {font-size:1em;
	color:#33071e;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:none;
	}

a.telefon_text:active {font-size:1em;
    color:#33071e;
    font-family: Helvetica, Geneva, Arial, sans-serif;
    text-decoration:none;
	}

a.telefon_text:hover {font-size:1em;
	color:#33071e;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:none;
	}
	

	
a.footer_text:link {font-size:1em;  	/* tiefweinrot = Textfarbe*/
	color:#33071e;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:underline;
	}

a.footer_text:visited {font-size:1em;
	color:#33071e;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:underline;
	}

a.footer_text:active {font-size:1em;
    color:#33071e;
    font-family: Helvetica, Geneva, Arial, sans-serif;
    text-decoration:underline;
	}

a.footer_text:hover {font-size:1em;
	color:#33071e;
	font-family:Helvetica, Geneva, Arial, sans-serif;
	text-decoration:underline;
	}
	
	
a.button:link {padding:0.9em 0.8em 0.7em 0.8em;  /* e35c02 orange = Textlink, f6f1ee sand = Navitext*/
			   border:1px solid #e35c02; border-radius:0.25em; background-color:#e35c02;	 
			   font-size:0.95em; color:#f6f1ee; font-weight:bold;
			   font-family:Helvetica, Geneva, Arial, sans-serif;
			   text-decoration:none;
	           }

a.button:visited {padding:0.9em 0.8em 0.7em 0.8em;  
			   border:1px solid #e35c02; border-radius:0.25em; background-color:#e35c02;	 
			   font-size:0.95em; color:#f6f1ee; font-weight:bold;
			   font-family:Helvetica, Geneva, Arial, sans-serif;
			   text-decoration:none;
	           }

a.button:active {padding:0.9em 0.8em 0.7em 0.8em;  
			   border:1px solid #e35c02; border-radius:0.25em; background-color:#e35c02;	 
			   font-size:0.95em; color:#f6f1ee; font-weight:bold;
			   font-family:Helvetica, Geneva, Arial, sans-serif;
			   text-decoration:none;
	           }

a.button:hover {padding:0.9em 0.8em 0.7em 0.8em;  /* 33071e tiefweinrot = Hover-Textlink*/
			   border:1px solid #33071e; border-radius:0.25em; background-color:#33071e;	 
			   font-size:0.95em; color:#f6f1ee; font-weight:bold;
			   font-family:Helvetica, Geneva, Arial, sans-serif;
			   text-decoration:none;
	           }
			   
p.button 	   {margin:2em 0 1.6em 0em;}



/* article = Inhalt */
.zartrosa      {color:#ece0e6;}				/* Hintergrund */
.weinrot       {color:#5e1b3f;}				/* Header, aside links, Rahmen Fotos */
.hellweinrot   {color:#e0aac7;}				/* aside rechts  */
.mittelweinrot {color:#cb7ba6;}				/* Überschrift Datenschutz (h5)  */
.tiefweinrot   {color:#33071e;} 			/* Textfarbe, Zitat, h1 - h4, alle Linien, Hover-Textlink, Telefon-Textlink 
											   Hover-Formularfeld, Rahmenlinie Formular, Formulartext, Absendebutton */
.zartrosa2	   {color:#e5d8df;} 			/* Formularfeld-Hintergrund */

.sand	       {color:#f6f1ee;}				/* Navitext */														   
.orangebeige   {color:#f7d2be;} 			/* Hover-Navitext, Navi aktiv, Slogan, Hover-Formulartext*/ 
.orange		   {color:#e35c02;} 			/* Textlink, Verlinkungs-Button, Tabellenlinie dünn */
.rot		   {color:#ce0329;} 			/* WICHTIG */

.lachs		   {color:#fca76f;}				/* td dunkel - wechselnde Tabellenzeilen I, Zitat bgcolor*/
.helllachs	   {color:#fbe5d6;}				/* td hell - wechselnde Tabellenzeilen II*/

.hellorange	   {color:#fca102;}				/* AKTUELL NICHT VERWENDET */



h1 {font-size:1.45em; margin-bottom:-0.3em;}									/* für Hauptüberschrift */
h2 {font-size:1em; margin-bottom:-0.8em; margin-top:1.5em; line-height:1.6em;}	/* für Teilüberschrift */
h3 {font-size:1.05em;}							 								/* für aside-Box */
h4 {font-size:0.95em; margin-bottom:-1.2em; margin-top:1.5em;}					/* für Teilüberschrift Anmeldung (Formular) */
h5 {font-size:1.05em; margin-bottom:-0.8em; margin-top:1.5em; color:#cb7ba6;}	/* für Überschrift Datenschutz */

	 
p {font-size:0.9em; line-height:1.6em;}
.abstand_nach_unten {margin-bottom:2em;}										/* aside rechts - Abstand zwischen Absätzen*/

	
.italic  		    {font-style:italic;}
.zentriert		    {text-align:center;}
.hinweis 		    {font-size:0.8em;}
.hinweis_formular   {font-size:0.85em; margin-top:0em;}
.ueberschrift_index {font-size:1.5em; font-weight:bold; margin-top:0em;}


.zitat			    {padding:1.5em; margin-left:1.5em; background-color:#fca76f; color:#33071e; 
				     border-left-style:solid; border-color:#33071e; border-left-width:0.4em;} 
				   
#zitat			    {margin-top:1.2em; margin-bottom:2.5em;}



ul.text, ol.text	{margin-top:-0.8em; margin-bottom:-0.3em;}									
ul.text_aside		{margin-top:-0.8em; margin-bottom:1em;} 								/*Aufzählung aside rechte Seite*/
ul.text_aside_abstand_nach_unten {margin-top:-0.8em; margin-bottom:2em;} 					/*Aufzählung aside rechte Seite*/

li.text 	 		{font-size:0.9em; line-height:1.45em; text-indent:0em; margin-left:-0.8em;}	/*für alle Aufzählungen verwenden*/
li.text_lang 		{font-size:0.9em; line-height:1.45em; text-indent:0em; margin-left:-0.8em;  /*Aufzählung mit langem Text*/
					 margin-bottom:0.5em;} 

li.text_aside		{font-size:0.9em; line-height:1.45em; text-indent:0em; margin-left:-0.8em;  /*Aufzählungen aside mit Herz*/
					 list-style-image:url(bilder/icon_aside_herz.png);}
					 

/*nur für Aufzählung im Datenschutz*/
ul.text_datenschutz	{margin-top:-0.5em; margin-bottom:0em;}
li.text_datenschutz {font-size:0.9em; line-height:1.45em; text-indent:0em; margin-left:-0.8em;}



/*Formulare*/
input:hover,
select:hover 			  {background-color:#33071e; color:#f6f1ee;}		   /* tiefweinrot Tabellenhintergrund + sand*/
input.absendebutton:hover {border:1px solid #33071e;
					       background-color:#33071e; color:#f6f1ee;}		   /* tiefweinrot + sand*/

input:focus 			  {background-color:#33071e; color:#f6f1ee;}		   /* tiefweinrot + sand*/


input, select, textarea {border-radius:0.25em;
						 border:1px solid #33071e; background-color:#e5d8df;   /* tiefweinrot Linie, Hintergrund zartrosa2*/
						 font-size:0.9em; color:#33071e;
						 margin-top:1em;
						 }


input.formularfeld        {height:2em;   width:20em;   padding-top:5px; padding-left:5px;}
input.formularfeld_backend {height:2em;   width:40em;   padding-top:5px; padding-left:5px;}

input.formularfeld_text   {height:2em;   width:32em;   padding-top:5px; padding-left:5px; max-width:350px; margin-bottom:0.5em;}

input.absendebutton 	  {height:2.9em; width:17.5em;
                           font-weight:bold;
						   border:1px solid #e35c02;
						   background-color:#e35c02; color:#f6f1ee;}

	input.absendebutton_lang {
		height: 2.9em;
		width:60em;
		font-weight: bold;
		border: 1px solid #e35c02;
		background-color: #e35c02;
		color: #f6f1ee;
	}


select.formularliste      {height:2.6em; width:20.6em; padding-top:5px; padding-left:5px;}

select.formularliste_lang {height:2.6em; width:43.5em; padding-top:5px; padding-left:5px;}

textarea.formulartextfeld {padding-top:5px; padding-left:5px; font-size:1.2em; margin:1em 0 0.5em 0;}
textarea.formulartextfeld_backend {padding-top:5px; padding-left:5px; font-size:1.2em; margin:1em 0 0.5em 0; width:37em; height:5em;}
			  
section.anmeldeformular {display:flex;
					flex-wrap: wrap;
					padding:0;
					margin-top:1em; margin-bottom:2em;
					border:0px solid;
					}
				
p.formularfelder {margin:0; padding-right:2em; max-width:20em;}
p.abstand_zum_formularfeld {margin-bottom:-1.5em;}
p.absendebutton  {margin-top:-1em; margin-bottom:3em;}
p.absendebutton_backend { margin-top: -1em; margin-bottom: 3em; text-align:center;}

p.radiobutton01  {margin: 1.1em 0 -1.5em 0;}
p.checkbox01	 {margin-top:-2.2em; margin-bottom:0.6em;}




/* wechselnde zweifarbige Tabellenzellen - Termine*/
  
table 				{border-spacing:0px; margin-top:1.3em;}
table.hochruecken 	{border-spacing:0px; margin-top:-1.5em;}
				   
th,
td {padding:0.45em; font-size:0.95em; vertical-align:top; line-height:1.3em; border:0px none;
	border-top-style:solid; border-top-width:1px; border-top-color:#e35c02;} 		

th {text-align:left; font-weight:bold; background-color:#fca76f;} 		/* lachs Tabellenhintergrund */


th.termine_datum  			{min-width:11em; padding-left:1.5em;}
th.termine_veranstaltung 	{min-width:20em;}
th.termine_infos    	 	{min-width:7.6em;}

th.tabelle_2spaltig01  		{min-width:8.5em; visibility:hidden;}
th.tabelle_2spaltig02 		{min-width:18.2em; visibility:hidden;}


td.zeile_hell1 	  {background-color:#fbe5d6; padding-left:1.5em; font-weight:bold;}		/* helllachs */
td.zeile_hell2 	  {background-color:#fbe5d6;}

					
td.zeile_dunkel1  {background-color:#fca76f; padding-left:1.5em; font-weight:bold;} 	/* lachs */
td.zeile_dunkel2  {background-color:#fca76f;}


td.zeile_hell1_unten   {background-color:#fbe5d6; padding-left:1.5em; font-weight:bold;
					    border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#e35c02;}
						   
td.zeile_hell2_unten   {background-color:#fbe5d6;
					    border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#e35c02;}
					   
					   
td.zeile_dunkel1_unten {background-color:#fca76f; padding-left:1.5em; font-weight:bold;
						border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#e35c02;}						   
	
td.zeile_dunkel2_unten {background-color:#fca76f;
						border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#e35c02;}

td.backend_vert_zentriert { vertical-align: bottom; padding-bottom: 1.1em; }

td.backend_vert_oben { vertical-align: top; padding-top: 1.5em; }	


/*Fotos*/
img.foto_quer 					{width:210px; height:140px;}		/*Original: 900×600  oder  800x533   oder  600x400 */
img.foto_hoch 					{width:140px; height:210px;}		/*Original: 600×900  oder  400x600 */
img.foto_quadrat				{width:210px; height:210px;}		/*Original: 300×300  */

img.foto_hoch_portraet			{width:165px; height:220px;}		/*Original: 600×800  oder  450x600 */



			 
#foto_rechts_quer{float:right;
	   width:210px;
	   height:140px;
	   margin-left:0.8em; margin-bottom:0.8em;
	   border:solid; border-width:0.1em; border-color:#5e1b3f;
	   }

#foto_rechts_hoch{float:right;
	   width:140px;
	   height:210px;
	   margin-left:0.8em; margin-bottom:0.8em;
	   border:solid; border-width:0.1em; border-color:#5e1b3f;
	   }
	   
#foto_rechts_quadrat{float:right;
	   width:210px;
	   height:210px;
	   margin-left:0.8em; margin-bottom:0.8em;
	   border:solid; border-width:0.1em; border-color:#5e1b3f;
	   }
	   
#foto_links_quer{float:left;
	   width:210px;
	   height:140px;
	   margin-right:0.8em; margin-bottom:0.8em; margin-top:2em;
	   border:solid; border-width:0.1em; border-color:#5e1b3f;
	   }
	   
#foto_links_hoch{float:left;
	   width:140px;
	   height:210px;
	   margin-right:0.8em; margin-bottom:0.8em;
	   border:solid; border-width:0.1em; border-color:#5e1b3f;
	   }
	   
	   
	   
#foto_hoch_portraet_rechts{float:right;
	   width:165px;
	   height:220px;
	   margin-left:0.8em;
	   border:solid; border-width:0.1em; border-color:#5e1b3f;
	   }
	   
#foto_hoch_portraet{float:left;
	   width:165px;
	   height:220px;
	   margin-right:0.8em;
	   border:solid; border-width:0.1em; border-color:#5e1b3f;
	   }
	   
#foto_rechts_quer_logo{float:right;
	   width:350px;
	   height:68px;
	   margin-right:0.8em; margin-top:1em;
	   }
	   
#foto_hoch_png{float:left;
	   width:180px;
	   height:240px;
	   margin-right:0.8em; margin-top:2em;
	   }
	   
	   
  
	   
	   
/* footer = Fußzeile */
footer section {display:flex;
			    flex-wrap: wrap;
				padding:0 0.5em;
				margin-top:-0.3em;
				}
				
footer p {font-size:0.8em; line-height:1.2em; padding-right:5em;
		 -ms-hyphens:none; -webkit-hyphens:none; hyphens:none;
		 }

#impressum {float:right; padding:0 0.5em 0 0; margin-top:0.5em; text-align:right;}



/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
header {
	border-radius: 0em 0em 1em 1em;
	border: 0px solid;
	margin: 10px;
	flex: 1 100%;}

article,
aside,
footer {
	border: 0px solid;
	margin: 10px;
	flex: 1 100%;}
	
article,
aside {border-radius: 1em 1em 1em 0em;}
	
aside.rechteseite{border-radius: 1em 1em 0em 1em;}
	
#impressum {max-width:73px;}

textarea.formulartextfeld {min-height:8em; min-width:18.5em;}


/* Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (min-width: 35em) {
	article {order: 2;}
	
	aside {/*  durch auto werden die beiden asides in eine Zeile gesetzt 
	       --> funktioniert hier nicht - außer man läßt das Wort "auto" weg*/
		   flex: 1 1;
		   order: 3;}
	
	footer {order: 4;}
	
	#impressum {min-width:148px;}
	
	textarea.formulartextfeld {min-height:8em; min-width:26em;}
}


/* Large screens */
@media all and (min-width: 50em) {
	article {order: 3;
			 /* Der Article wird 2.5x so breit wie die beiden asides! */
			 flex: 5 1 0%;}
	
	aside {flex: 2 1 0%;}
	aside.linkeseite {order: 2;}
	
	#impressum {min-width:148px;}
	
	textarea.formulartextfeld {min-height:8em; min-width:26em;}
}