/* generelle Formatierungen (am Beginn, damit sich nicht später spezielle Formatierungen wieder überschreiben */
/*---------------------------- generell verwendbar ----------------------------- */
body {
	margin: 0; 	background-color: #FFF;
	font-family: Tahoma, Verdana, Arial;	font-size: 1em;  
	}

/* Format für div. Elemente, vor allem Text oder tabellen-zellen */
.ueb1 {			background-color: #66F;    	font-size: 1.1em;   font-weight: bolder; color: #FFF; }
.ueb2 {			background-color: #66F;   	font-size: 1em;      font-weight: bolder; color: #FFF;}
.ueb2reverse {background-color: #FFF;  	font-size: 1em;     font-weight: bolder; color: #66F;}
.ueb3 {			background-color: #66F;   	font-size: .9em;     font-weight: bolder; color: #CCF;}
.ueb3reverse {background-color: #FFF;  	font-size: .9em;     font-weight: bolder; color: #66F;}
.ue0 { 			background-color: #2B55B0; font-size: 1.5em; font-weight: bolder; color: #FFF;}
.ue1 { 			background-color: #2B55B0; font-size: 1.3em; font-weight: bolder; color: #FFF;}
.ue2 { 			 background-color: #2B55B0; font-size: 1.1em;  font-weight: bolder; color: #FFF;}
.ue3 {			 background-color: #2B55B0; font-size: .9em;  font-weight: bolder; color: #CEF;}
.ue3reverse {	 background-color: #CEF; font-size: .9em; font-weight: bolder; color: #2B55B0;}
.small {			font-size: 0.8em;}
.ntextrot {		color: red;}
.rotbold { 	font-weight:bolder; color: red; }
.blaubold { 	font-weight:bolder; color: #00F; }
.seagreenbold { 	font-weight:bolder; color: seagreen; }
.rotfett {		background-color: #CCF; 	     	          			    font-weight: bolder; color: #F00;}
.blackbold { 	background-color: #CCF; 									font-weight: bolder; color: #000;}


/*- --  generell verwendbar - ende ----- */
/* --- --- --- Start Grid Design --- --- --- */

body.g_gridlayout {
	display: grid;	grid-template-columns: 13em auto ; gap:0;
	height:100%;	 margin: 0;
	border-top:1em solid #2B55B0; /* dunkelblaue Leiste oben */
	color: #000000;
}
body.g_gridlayoutzwei {
	display: grid;	grid-template-columns: 15em auto ; gap:0;
	height:100%;	 margin: 0;
	border-top:1em solid #2B55B0; /* dunkelblaue Leiste oben */
	color: #000000;
}
body.g_gridlayoutbreit{
	display: grid;	grid-template-columns: 15em auto ; gap:0;
	height:100%;	 margin: 0;
	border-top:1em solid #2B55B0; /* dunkelblaue Leiste oben */
	color: #000000;
}

/* nur für Frontseite */
body.gridfront {
	display: grid;	grid-template-columns: 8em auto ; gap:0;
	margin: 0;
	border-top:1em solid #2B55B0; border-left:1em solid #2B55B0;/* dunkelblaue Leiste oben */
	font-family: Tahoma, Verdana, Arial; font-size: 1em; 	color: #000000;
}
div.frontpage {width:auto; height:auto;	background-color: #FFF;		padding:.25em 0.5em;	border-top:4em solid #2B55B0;}
div.frontpage img{	margin: 0 .25em;	border:0;	vertical-align:middle;}
div.frontpage a{	font-weight: bold;	color: #2B55B0;	text-decoration: none;		}
span.frontpage:hover{	background-color: #CEF;	font-size:125%; text-decoration: underline overline;	}
footer.frontpage{
	position: absolute;	right:10em;	bottom:.5em;
	background-color:  transparent;	
	padding:.25em; border-left:.25em solid transparent;
	color:white;
}
/* nur für Frontseite */


main {	
	border: 0 solid; margin:.3em 3em ; padding: 25px 5px 5px; max-width:65em;
	background: #FFF;} /* passend für fd_seiten */
	
#main  /* style für dreamweaver - lokale tests  als div id=main // auch für grundregeln verwendet !!!!*/{
		display: flex;	flex-direction: column;
	box-sizing: border-box;	max-width:65em;	
	border: 0 solid; margin:.3em 3em ; padding: 25px 5px 5px;
	background: #FFF;} 

aside, footer {	border: 0 solid;	margin: 0px;} /* noch nirgendwo verwendet */

article {
	margin: 0px;
	border-left: 1px solid blue;	border-right: 1px solid blue;
	padding: 1px 5px;
	}

header.g_header {
	width:150px;	height:auto;
	background: #2B55B0;	border-color: #d5d5d5;	color:white;
}

/* navigation linke seite im grid layout - Variante Liste*/
nav.linkeseite{
	/*Linke Navigation FD-Seiten neu*/
	width:11em; grid-column: 1 / 1;	grid-row: 1 / -1;  min-height:98vh;	background: #2B55B0; 
	border-left: 1em solid transparent;	border-right: 1em solid transparent; border-bottom-color:#FFF; 
	color:#FFF; /*blauer hintergrund, weiße schrift und rahmen-bottom-farbe (wg. vererbung auf die folgelelemente)*/}
nav.linksrev {
	width: 11em;	grid-column: 1 / 1;	grid-row: 1 / -1;	min-height: 98vh;	background: #2B55B0;
	border-left: 1em solid transparent;	border-right: 1em solid transparent;border-bottom-color: #2b55b0;
	color: #2B55B0;	  /*blauer hintergrund, blaue schrift und rahmen-bottom-farbe (wg. vererbung auf die folgelelemente) */}
nav.linksrevB{
	width: 13em;	grid-column: 1 / 1;	grid-row: 1 / -1;	min-height: 98vh;	background: #2B55B0;
	border-left: 1em solid transparent;	border-right: 1em solid transparent;border-bottom-color: #2b55b0;
	color: #2B55B0;	  /*blauer hintergrund, blaue schrift und rahmen-bottom-farbe (wg. vererbung auf die folgelelemente) */}
	
nav ul, nav li { 			margin-top:0; 									padding-left:0.5em;	text-decoration:none;	list-style-type:none;  border-bottom-color:inherit;	}
nav ul.reverse {	    margin-top:0; margin-bottom:0;	padding-left:0.5em;	text-decoration:none; 	background:#FFF;	  border-bottom-color:inherit; }
nav div.navbild { text-align:center; } /* um ein bild innerhalb eines nav-Bereiches, aber außerhalb von ul, zu zentrieren */

nav li 					{		width:11.5em; border:0; padding-left:0; padding-bottom:0; }
nav.linksrevB li {		width:13em; 	 }
nav li.spacer { border-bottom: 1em solid transparent;}
nav li.spacerklein { border-bottom: 0.5em solid transparent;}
nav li.linie {	border-top: 0.25em solid transparent; border-bottom: 0.25em solid; border-bottom-color: inherit;	margin-bottom: 0.5em;}
nav li.liniedick {	border-top: 0.25em solid transparent; border-bottom: 0.5em solid; border-bottom-color: inherit;	margin-bottom: 0.5em;}
/*reine Überschschriften in der Navi, die keine Links sind*/
nav li.ueberschrift 				{border-bottom:2px solid ; border-bottom-color:inherit; padding-left:0.2em; font-weight:inherit;}
nav li.ueberschrift_reverse {					width:11.3em; background-color:#2B55B0; border-bottom:2px solid; border-bottom-color:inherit; padding-left:0.2em; color:#FFF; font-weight:inherit;}
nav.linksrevB li.ueberschrift_reverse {width:13.3em; /*background-color:#2B55B0; border-bottom:2px solid; border-bottom-color:inherit; padding-left:0.2em; color:#FFF; font-weight:inherit;*/}
nav li.ueberschriftbold {border-bottom:2px solid; border-bottom-color:inherit; font-weight:bolder;}

/*betrifft nur Überschriften die gleichzeitig auch Links sind (Home), stehen dann als DIV im UL*, aber nicht im LI; da in beiden Layouts hier der Hintergrund blau ist, kann die Farbe auf weiß fixiert werden */
nav ul div 					{width:11.3em;  padding-left: 0.2em; border-bottom: 2px solid;	border-bottom-color: inherit;	font-weight: bolder;}
nav.linksrevB ul div {width:13.3em;  background: #2B55B0; }
nav a 						{  	color: #FFF;  padding-left:0.2em;	text-decoration:none; }
nav a:visited				{  	color: #FFF;  }
nav a:hover				{  color: #0FF;  text-decoration:none; } /* hover muss nach visited stehen, sonst können besuchte links nicht mehr hovern */

/* Links die innerhalb einer in <nav> enthaltenen Liste (li) stehen (fast alle): */
nav li a 						{ 	color: inherit; 		text-decoration:none; }
nav li a:visited 			{	color: #6CF; }

nav li a::before 							{  color:#2B55B0; content:"▶"; display:inline-block; } 
nav.linksrev li a::before 				{  color:#FFF;  content:"▶"; display:inline-block; }/*font-size: 1em; */  
nav.linksrevB li a::before 			{  color:#FFF;  content:"▶"; display:inline-block; }  

nav li a:hover 							{  color: #2B55B0; background-color: #FFF; padding-right:.2em; }
nav.linksrev li a:hover 			{  /*  color: #2B55B0;*/ background-color: #CEF;/* padding-right:.2em;*/ }
nav.linksrevB li a:hover 			{ /*  color: #2B55B0;*/  background-color: #CEF;/* padding-right:.2em;*/  }

nav li a:hover::before					 {  color:#2B55B0;content:"▶";} /*font-size: 1em; */ 
/*nav.linksrev li a:hover::before  {  color:#2B55B0; content:"▶";}font-size: 1em;  
nav.linksrevB li a:hover::before {  color:#2B55B0; content:"▶";}font-size: 1em; */ 

nav h3				 {padding-left:0.4em; margin:1em auto 0;}
nav h4 				{padding-left:0.5em; margin:1em auto 0;}
nav.linksrev h4 {color:white; background-color: #2b55b0; border-left: 0.5em solid white; padding-left: 0.1em;}
nav.linksrevB h4 {color:white; background-color: #2b55b0; border-left: 0.5em solid white; padding-left: 0.1em;}

/*   für Flexinhalte innerhalb eines grids*/
/*   FD Seiten*/
.fdflex-row {
	display: flex;	flex-direction: row;	
  	box-sizing: border-box;	max-width:60em;
	}
.fdflex-col {
	display: flex;	flex-direction: column;
	box-sizing: border-box;	max-width:60em;	
  	}
header.fd_header {
/* header für TLL-Logo im main-bereich */
	max-width: 40em;	padding-left:20em;	padding-right:5%;
	background: #FFF;	text-align:right;	color:black;
	}
header.pro_header {
/* header für TLL-Logo im main-bereich */
	max-width: 62em;	padding-left:5em;	padding-right:5%;
	background: #FFF;	text-align:right;	color:black;
	}

/* logos in der linken navi-leiste auf FD-Seiten */
img.g_logoleftfd { border:7px solid white;  background-color:white} 
/*   Ende Grid Design*/

/* ---- ---------------   Formate für Links -------------------------- */

a.textlink:link  { font-weight: bold; color: #2B55B0;}
a.textlink:visited  { font-weight: bold; color: #2B55B0;}
a.textlink:hover { background-color: #CEF;	text-decoration: underline ; }

/* kommt in fd-seiten nicht vor nur in project (TABELLENLAYOUT) :*/
a.leftnav { font-size: 0.9em; font-weight: bold; color: #2B55B0; text-decoration: none;}
a.leftnav:visited { color: #2B55B0;	text-decoration: none;}
a.leftnav:hover { color: #000000; text-decoration: none; background-color: #CCF;}
a.archnav { font-size: .9em; font-weight: bold;	color: #2B55B0;	text-decoration: none;}
a.archnav:hover {	background-color: #CCF;	color: #000000;}

/* a.archnav:visited {	color: #2B55B0;}*/
/* a.textlinkbig {	border: none;	font-size: 1.8em;	font-weight: bold;	color: #2B55B0;	text-decoration: underline;*/
	
/* Navigation auf FD-Seiten im TABELLENLAYOUT */
/* links auf FD-Seiten, die noch im Tabellenlayout sind, xx1 verlinkte überschriften, xx2 normale navi-links*/

a.fdnav1 {	padding-left: .2em;	font-weight: bold;	color: #CEF;	text-decoration:none;}
a.fdnav1:visited {	color: #CEF;}
a.fdnav1:hover { color: #00FFFF;}

a.fdnav2 {	padding-left: .2em;	font-weight: bold;	color: #2B55B0;	text-decoration:none;}
a.fdnav2:visited {	color: #ABC3F5;}
a.fdnav2:hover { background-color: #CEF;}
a.fdnav2::before {	display: inline-block;	font-size: 0.8em; color:#FFF;	content:"▶ ";}
a.fdnav2:hover::before {display: inline-block; font-size: 0.8em; color: #2B55B0; content:"▶ ";}
/*		background: url("images/arrow.gif") no-repeat left;*/

/* ---- -----------   Formate für Tabellen --------------------- */

table {
	border-collapse: separate;	padding: 2px;	border-spacing:1px;
	 /* collapse: zwischenraum zwichen Zellen, wenn collapse, liegen die borders übereinanden (gitternetz)
	    padding: Absttand zwischen "innenrand" der Tabelle und den Zellen,
		borderspacing wird im Dreamweaver nicht angezeigt */	
	background-color: white; 
	text-align: left;
	} 
	
/* Tabellen mit DIV erzeugen  (Scheintabelle) */	
div.table {	display: table; border-collapse: collapse; margin:0.5em auto auto; }
div.td {	display: table-cell; 	padding: 0.5em;  text-align:center; vertical-align:top;}
/* divs ohne weitere Angabe innerhalb eines div.table verhalten sich ohnehin wie eine tr - extra also nicht nötig 
div.tr {	display: table-row; text-align:center;}*/

/* TABELLENLAYOUT */
/* linke seite für die Tabellenzelle, in der die Navigation(eigene, ausgelagerte Tabelle) steht.
   Muss nach der allgemeinen Table stehen, sonst wird die formatierung durch die table wieder überschrieben */
table.blindtabelle  {	border-collapse: collapse;	padding: 0px;}
.bodynav { background-color:#2B55B0;	font-size:0.9em;} 
table.notenschrift{border:thin solid #66F; border-collapse:collapse; width:40em; margin:.5em auto;}
table.notenschrift td{border:thin solid #66F;}

/* --------------------- tabellenformatierung für FDSeiten ----------------------------------*/
table.fdtable {	border-spacing:2px; margin:1em auto auto; border:1px;} 
.fdtable td {border: 1px solid transparent;}
.fdtable tr:hover td{border-bottom: 1px dashed blue; border-top: 1px dashed blue;}

/* teams */
td.fer {		padding-left:0.2em; background-color: #FF2F11;	color: #FF0;}
td.jag { 		padding-left:0.2em; background-color: #393;		color: #FF0;}
td.mcl { 	padding-left:0.2em; background-color: #CCC;		color: #000;}
td.jor { 		padding-left:0.2em; background-color: #FF0;		color: #000;	border: thin dotted #000;}
td.sch { 	padding-left:0.2em; background-color: #1E6500;	color: #81FF14;}
td.wil { 		padding-left:0.2em; background-color: #00F;		color: #FFF;} /* eigentlich tyr */
td.wil1 { 	padding-left:0.2em; background-color: #FFF; 		color: #00F; border: thin dotted #000;}
td.vrb {		padding-left:0.2em; background-color: #CCC;		color: #339;}
/* sonderformate FD */
td.pit {	color: #000000;	border: 1px dotted #000;	text-align: center;}
td.pitj {	color: #009900;	border: 1px dotted #009900;	text-align: center;}
td.pitn {	color: #FF0000;	border: 1px dotted #F00;	text-align: center;}
td.bestlap {	font-size: 0.9em;	white-space: nowrap;}
.mitrand { border-right: thin dotted black;	border-bottom: thin solid blue;} /* tabellenzellen mit rand unten und rechts */

td.chev {	padding-left:0.2em; background-color: #666;		color: #FFF;}
td.hond {	padding-left:0.2em; background-color: #FFF;		color: #DD332B;	border: 1px solid #DD332B;}
td.ike {		padding-left:0.2em; background-color: #FC0;		color: #00F;}
td.mas {	padding-left:0.2em; background-color: #FFF;		color: #F33;}
td.mas1 {	padding-left:0.2em; color: #FFF;	background-image: url(fd/images/masbg.gif);}
td.mas05 {	padding-left:0.2em; background-color: #C03;		color: #FFF;}
td.ora {		padding-left:0.2em; background-color: #FFC000;	color: #000;}
td.vio {		padding-left:0.2em; background-color: #8a33CE;	color: #FFF;}
td.wan {	padding-left:0.2em; background-color: #01046B;	color: #F00;}


td.bildtext {
	background-color: #CEF;
	font-family: Tahoma, Verdana, Arial;
	font-size: 8pt;	font-weight: normal; color: #000000;
	}

/* ------------ Spezialfälle -------------------- */
ol.first {
	list-style-type: decimal;
}
img.fd08kurspic {float: right; box-shadow: 5px 4px 10px 1px #65729a; margin:5px 0 0 5px;}

/* Bildergalerie */
/* Mobile first - für schmale Viewports */

ul.gallery, li.gallery { margin:3px; padding:0px;}

li.gallery { display:inline-block; width:110px; list-style-type:none;} 

/*img.gallery { width: 100%; margin: 0; padding:0; }*/
img.gallery { width: 100%; margin: 0;  }

/* Bild passt sich an verfügbaren Raum im li ann */

/* button { padding: 1px;} */
button { padding: 0px;}

@media all and (min-width: 35em) {
 
	button { position: relative;	/*	width: 100px;*/}

	button img.gallery {
		position: absolute; left: 0%; top: 0%; z-index: 1; transition: all 0.075s;
		border: 0;
		}
	
	button:focus img,
	button:hover img {	
		position: absolute;	left: -200px;	top: -375px; z-index: 5; transition: all .55s; 
		width: 500%; height:500%;
		border-radius: 0;
		box-shadow: 5px 5px 10px #550;
		}
}

	/* @media all and (max-width: 60em) {
 div.fd_page{
	margin:.3em 15em .3em 4em;
}
  
 .fdflex-container {
	flex-direction: column;
}
*/