/* ---- Farbdefinitionen ----
Hintergrund hell-grau   		#aaaebc
Hintergrund hell-grau-sprache 	#d6dde6
Blau-schwarz 					#263953
Orange (navi, h1)  				#ff8300


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

* {
	border: none;
	padding: 0;
	margin: 0;
}

html { height: 100%; padding-bottom: 1px; margin-bottom: 1px; }  /* erzwingt einen scrollbalken */

a:link { color: #ff8300; text-decoration: underline; }
a:link.dossier { 
   color: #ff8300; 
   text-decoration: underline; 
   font-weight:normal;
   margin-top: 0em;
   margin-left: 20px;
   margin-bottom: 10px;
}
		
a:visited { color: #ff8300; text-decoration: underline; }
a:hover { color: #ff8300; text-decoration: none; }
a:active { color: #ff8300; text-decoration: none; }

body {
	background: #aaaebc url(_grafik/hg-kachel.png) repeat;
	text-align: center;
}
body.aktion {
	background: #aaaebc url(_grafik/Weihnachten_2013.gif) no-repeat;
	text-align: center;
}

body, td, input, textarea {
	font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.3;
	color: #263953;
}

form div.zeile {
	padding: 10px 0 10px 0;
	border-bottom: 1px solid #d6dde6;
}

form div.zeile input {
		margin: -4px 0 0 0;
}
	
form div.zeile input[type="checkbox"] {
		margin: 0;
}

form div.zeile label {
	display: block;
	float: left;
	width: 295px;
	margin-right: 10px;
	font-weight: bolder;
	}
	form div.zeile1 label {
	display: block;
	float: left;
	width: 295px;
	margin-right: 10px;
	font-weight:400;
	}
input, textarea {
	width: 210px;
	padding: 3px;
	margin: 5px 0 15px 0;
	vertical-align: top;
	border-right: 1px solid #263953;
	border-bottom: 1px solid #263953;
	border-left: 1px dotted #263953;
	border-top: 1px dotted #263953;
	color: #ff8300;
}
	input[type="checkbox"] {
		width: auto;
		padding: 0;
		border: none;
	}
	input.sendebutton {
		width: 147px;
		background-color: #ff8300;
		color: #263953;
		font-weight: bold;
		border-top: 1px solid #d6dde6;
		border-left: 1px solid #d6dde6;
	}
	input.sendebutton-bib {
		width: 100px;
		background-color: #ff8300;
		color: #263953;
		font-weight: bold;
		border-top: 1px solid #d6dde6;
		border-left: 1px solid #d6dde6;
	}
	input.sendebutton-breit {
		width: 210px;
		margin: 5px 5px 5px 5px;
		background-color: #ff8300;
		color: #263953;
		font-weight: bold;
		border-top: 1px solid #d6dde6;
		border-left: 1px solid #d6dde6;
	}
	input.kurz {
		width: 70px;
	}
	input.mittel {
		width: 200px;
		margin: 5px 0px 5px 0px;
	}
	.nektarpott { /* honigtopf zur spamabwehr */
		position:absolute;
		left:480000px;
	}
/* ---- Suchformular breite Spalte ----	
-------------------------- */ 

input, textarea-breit {
	width: 210px;
	padding: 3px;
	margin: 0px 0 0px 0;
	vertical-align: top;
	border-right: 1px solid #263953;
	border-bottom: 1px solid #263953;
	border-left: 1px dotted #263953;
	border-top: 1px dotted #263953;
	color: #ff8300;
}
	input.sendebutton-breit {
		width: 210px;
		background-color: #ff8300;
		color: #263953;
		font-weight: bold;
		border-top: 1px solid #d6dde6;
		border-left: 1px solid #d6dde6;
	}

	input.mittel {
		width: 210px;
	}
/* ---- Ende Suchformular breite Spalte ----	
-------------------------- */ 	

h1 {
	font-size: 16px;
	font-weight: normal;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	color: #ff8300;
}

#spalte-links h1:first-of-type, #spalte-rechts h1:first-of-type {
	margin-top:0;
}
h1.blau {
	font-size: 16px;
	font-weight: normal;
	margin-bottom: 0.5em;
	color: #263953;
}
h2 {
	font-size: 12px;
	font-weight: bold;
	color: #263953;
	margin-top: 1em;
	font-family: sans-serif;
}
h2.ohne-margin {
		margin: 0;
		}
h2.link {
		margin: 0;
		color: #ff8300;
		margin-left: 20px;
		}
h2.mittel {
		text-align: center;
		}
h3 {
	font-size: 12px;	
	font-weight: bold;
	color: #263953;
	margin-top: 1em;
	margin-bottom: 1.0em;
}
h4 {
	font-size: 12px;	
	font-weight: bold;
	color: #263953;
	margin-top: 1em;
}
h5 {
	font-size: 12px;	
	font-weight: bold;
	color: #263953;
	margin-top: 1em;
}
h6 {
	font-size: 12px;	
	color: #263953;
	margin-top: 1em;
	margin-right: 45px;
}
h6.nicht-fett {
		margin-top: 1em;
		font-weight:normal;
		}
h6.dossier {
		font-weight:normal;
		margin-top: 0em;
		margin-left: 20px;
		}
h6.unterschrift {
	font-size: 7px;	
	font-weight:normal;}
h7 {
	font-size: 14px;	
	color: #263953;
	margin-top: 1em;
	margin-right: 45px;
}
hr {
	border-top: 1px solid #cccccc;
	margin: 1em 0 0.5em 0;
}
strong {
	font-weight: bold;
}
table {
	border-collapse: collapse;
	}
td {
	vertical-align: top;
	padding-right: 10vx
}
td.middle {
	vertical-align: middle;
	padding-right: 10vx
}
td.schmal {
	width: 30%;
	vertical-align: top;
	padding-right: 10px
	}
td.breit {
	width: 70%;
	vertical-align: top;
	padding-right: 10px
	}
th {
	text-align: left;
	font-weight: bold;
	color: #ff8300;
	}

/* ---------- klassen ------- */
.clear {
	clear: both;
	}
.float-left {
	float: left;
	}


/* -------------------- layout ------------------- */

#wrap {
	width: 1200px;
	margin: 0 auto;
	text-align: left;
	background-color: #ffffff;
}
#header1 {
	width: 1200px;
	height: 208px;
	}
	
	#sprache {
		height: 28px;
		padding-left: 315px;
		line-height: 28px;
		font-size: 13px;
		background-color: #d6dde6;
		}
		#sprache a:link { color: #263953; text-decoration: none; }
		#sprache a:visited { color: #263953; text-decoration: none; }
		#sprache a:hover { color: #ff8300; text-decoration: none; }
		#sprache a:active { color: #ff8300; text-decoration: none; }
	#logo {
		float: left;
		}
	#linie-mitte {
		float: left;
		}
	#biblio {
		float: right;
		}
		
#visual {
	float: right;
	width: 600px;
	margin-top: 46px;
	margin-right: 43px;
	margin-bottom: 40px;
	}
	#visual.naeher {
	float: right;
	width: 600px;
	margin-top: 46px;
	margin-right: 43px;
	margin-bottom: 25px;
	}
	#visual .bild-rechts {
		margin-left: 10px;
		font-size: 9px;
	line-height: 1.1;}

#content {
	width: 960px;
	float: left;
	padding: 0;
}
	#content p {
		margin-bottom: 0.5em;
	}
	#content table {
		width: 100%;
		margin-bottom: 0.5em;
		}
	#content td, #content th {
		padding: 3px 15px 3px 0;
		border-bottom: 1px solid #cccccc;
		}
	#content tr:hover {
		background-color: #e7eaee;
		}
	#content ol {
		margin: 0;	
		padding-left: 1.7em;
	}
	#content ul {
		margin: 0;	
		padding-left: 1.4em;
		list-style-type: disc;
	}	
	#content .linker-block {
		float: left;
		width: 295px;
		margin-right: 10px;
		}
	#content .linker-block input {
			width: 275px;
			}
	#content .rechter-block {
		float: left;
		width: 295px;
		}
	#spalte-breit {
		width: 540px;
		float: right;
		padding: 0 60px 30px 0;
		margin-right: 45px;
		}
	#spalte-breit.quer {
			width: 600px;
			padding: 0;
			}
	#spalte-breit.galerie {
			width: 600px;
			padding: 0;
			margin-top: 40px;
			}
			
	#spalte-breit li {
			margin-top: 0.5em;
			}
	#spalte-breit ol {
			padding-left: 1.7em;
			}
	#spalte-breit ul {
			padding-left: 16px;		
			}
			
	#spalte-links {
		width: 280px;
		float: left;
		padding-right: 15px;
		margin-bottom: 30px;
		}
	#spalte-links-ohne-bottom {
		width: 280px;
		float: left;
		padding-right: 15px;
		margin-bottom: 0px;
		}
	#spalte-rechts {
		width: 280px;
		margin-right: 45px;
		margin-bottom: 30px;
		float: right;
		padding-right: 15px;
		}
	#spalte-rechts-ohne-bottom {
		width: 280px;
		margin-right: 45px;
		margin-bottom: 0px;
		float: right;
		padding-right: 15px;
		}	
			
	#startseite {
		float: left;
		padding: 0 0 30px 0;
		}
	#startseite .start-links, #startseite .start-rechts {
			float: left;
			width: 295px;
			/*min-height: 150px;*/
			border-top: 1px solid #aaaebc;
			padding: 0.8em 0 2.0em 0;
			}
	#startseite .start-links {
			margin-right: 10px;
			}
		#startseite .erste-zeile {
			border-top: none;
			padding-top: 0;
			}
		#startseite a {
			text-decoration: none;
			font-weight: bold;
			color: #263953;
			}
			#startseite a:hover {
			text-decoration: underline;
			font-weight: bold;
			color: #ff8300;
			}
		#startseite .clear {
			clear: both;
			}

/* ----------------------------- zusaetzliche Marginalspalte ab 2018 -------------------- */
#marginal {
	width:200px;
	float:left;
	margin:43px 40px 0 0;
	}
	#marginal h2:first-of-type {
		margin-top: 0;
		}
	#marginal li {
		margin-top: 0.5em;
		}
	#marginal ol {
		padding-left: 1.7em;
		margin-bottom: 0.5em;
		}
	#marginal ul {
		padding-left: 16px;	
		margin-bottom: 0.5em;	
		}
	
/* ----------------------------- ende marginalspalte ------------------------------------ */
#navi {
	float: left;
	width: 315px;
	margin: 35px 0 45px 0;
	}
#sponsoring {
	float: left;
	margin-left: 45px;
	width: 225px;
	/*border-bottom: 1px solid #aaaebc;*/
	}
	#sponsoring h2 {
		color: #ff8300;
		/*margin: 2em 0 1em 0; variante mit linien */
		margin: 2.5em 0 0 0;
	}
	#sponsoring p {
		/*border-top: 1px solid #aaaebc;*/
		/*margin: 1em 0 0 0; wurde in der variante mit linien gebraucht */
		padding: 1em 0;
	}
	
#footer {
	clear: both;
	width: 1200px;
	height: 28px;
	padding-top: 20px;
	padding-bottom: 30px;
}
	#footer-navi {
		float: left;
		width: 570px;
		height: 28px;
		margin-left: 45px;
		color: #ffffff;
		background-color: #263953;
		line-height: 26px;
		padding-left: 8px;
	}
		#footer-navi a {
			text-decoration: none;
			padding: 0 5px;
			}
		#footer-navi a:hover {
			text-decoration: underline;
			}
	#copyright {
		float: right;
		width: 524px;
		height: 28px;
		margin-right: 45px;
		color: #ffffff;
		background-color: #263953;
		line-height: 26px;
		padding-right: 8px;
		text-align: right;
	  }
		#copyright a {
			color: #ffffff;
			text-decoration: none;
			padding: 0 5px 0 20px;
		}
		#copyright a:hover {
			color: #ff8300;
			text-decoration: none;
		}

/* ------------------------- navigation ------------- */

/*navi oben*/
#navi-oben {
	float: left;
	width: 270px;
	padding: 0 0 18px 0;
	font-size: 13px;
}
	#navi-oben ul, #navi-oben ul li {
		list-style: none;
		list-style-image: none;
	}
	#navi-oben ul {
		padding: 0;
	}
		#navi-oben ul li {
			height: 32px;
			border-bottom: 1px solid #aaaebc;
			margin-left: 45px;
			font-weight: normal;
			}
		#navi-oben ul li.aktuelle-seite {
			border-bottom: 2px solid #ff8300;
			font-weight: normal;
		}
		#navi-oben ul li a {
			display: inline-block;
			height: 20px;
			text-decoration: none;
			color: #263953;
			line-height: 31px;
			padding: 0;
		}	
			#navi-oben ul li a:hover {
				color: #ff8300;
			}
			#navi-oben ul li.aktuelle-seite a:hover {
				color: #263953;
			}
			#navi-oben ul li.aktuelle-seite a {
				color: #ff8300;
			}


/* ------------- subnavigation ---------------- */

#sub-nav {
	margin-top: 28px;
	float: left;
	width: 270px;
}
	#sub-nav ul {
		line-height: 15px;
		font-size: 12px;
		list-style-image: none;
		padding-left: 0;
	}
		#sub-nav ul li {
			list-style: none;
			list-style-image: none;
			display: block;
			margin-bottom: 0.5em;
		}
			#sub-nav ul li a {
				padding-left: 45px;
				padding-bottom: 6px;
				color: #263953;
				background-color: #ffffff;
				text-decoration: none;
				display: block;
				border-bottom: none;
			}
			#sub-nav ul li a:hover {
				color: #ff8300;
				text-decoration: none;
				display: block;
			}
			#sub-nav ul li a.aktuelle-seite {
				color: #ff8300;
				text-decoration: none;
				background: url(_grafik/sub-navi-hg.gif) bottom left no-repeat;
				border-bottom: none;
			}
	#sub-nav h2 {	/* startseite linke spalte */
		color: #ff8300;
		margin: 0 0 1.0em 45px;
	}
	
/* -------------- bestellformular ----------------- */

.linker-block label, .rechter-block label {
	display: block;
	}

/* -------------------- stile für webyep ---------- */

/* z.B. für die bildergalerie, die mit webyep gemacht werden soll */
#webyep-login {
	margin-top: -20px;
	/*margin-bottom: 4px;*/
	float: left;
}
#content .WebYepGalleryContainer td, #content .GalleryContainer td {
	padding: 5px 0 10px 30px;
	}
	#content .WebYepGalleryContainer td.WebYepGalleryFirstColumn, #content .GalleryContainer td.GalleryFirstColumn {
		padding-left: 0;
		padding-right: 10px;
		}
	#content .WebYepGalleryContainer tr:hover, #content .GalleryContainer tr:hover {
		background-color: transparent;
		}
.WebYepGalleryText, .GalleryText {
	margin-top: 10px;
	}

/* -------------------- Ende Stile für webyep ---------- */

/* -------------------- Neue Projektübersicht - soll wie eine Wolke sein  ---------- */

p.Projekt-uebersicht {
	font-size:16px;
}

.Projekt-uebersicht a:link { 
	color: #ff8300; 
	text-decoration: none;
	font-size: 16px;
}
/* -------------------- Tooltip  für die neue Projekt-Übersicht ---------- */

.tooltip {                             /* ------der eigentliche Tip ----- */
	color: #ff8300;
	text-decoration: none;
	cursor: help;
	font-style: normal;
	font-variant: normal;
	font-size: 12px;
	text-align: left;
	border:outset;
	border-width:thin;
	border-color: #ff8300;
}
 
[data-tooltip] {
    position: relative;                      /* ------war relativ positioniert ----- */
	cursor: pointer;
}
 
[data-tooltip]::after {
    content: attr(data-tooltip);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
  	display: block;  
  	position: absolute; 
  	bottom: 3em;
  	left: -4em;                                 /* ------war -6em ----- */
	width: 20em;                                /* ------war 15 em ----- */
  	padding: 0.5em;
  	z-index: 100;
  	color: #000; 
  	background-color: #ffebe6;
  	border: solid 1px #ff8300;
	border-radius: 8%; 
}
 
/* erzeugt ein Dreieck */
[data-tooltip]::before {
	content:"";
	position:absolute;
	display:block;	
	opacity: 0;
	transition: opacity 0.5s;
	bottom: 1.2em; 
	left:2em;                                                      /* --------- Position des Dreiecks : war right:0; ----- */
	right:auto;                                                     /* --------- Position des Dreiecks : war right:0; ------ */
    border-width: 2em 1em 0;
	border-style:solid;
    border-color: #ff8300 transparent;                                    /* --------- Das Dreieck ------ */
}
 
[data-tooltip]:hover::after, [data-tooltip]:hover::before{              /* --------- Der Begriff ------ */
    opacity: 1;
	font-size:12px;
}

/* -------------------- Ende Tooltip  ---------- */

#Themen-Bereiche table,                                                 /* --------- Linien + Background-color von der Tabelle in Projekt-Übersicht raus  ------ */
#Themen-Bereiche td, #Themen-Bereiche th {
		padding: 3px 15px 3px 0;
		border: 0px;
}

#Themen-Bereiche #content tr:hover {
		background-color: #ffffff;
}