@charset "iso-8859-1";

* {
	margin: 0;
	box-sizing: border-box;
}

body { 			
	font-family:sans-serif;
	font-size:.85em;
	color:#383838;
	background-image:url(back.gif);
	background-repeat:repeat;
	text-align:center;
}

#wrapper {
	margin: 0 auto;
	width: 760px;
}
#wrapper > div {
	background-color:#ffffff;
	border: 5px solid #e5e6df;
}

/** Seitenlayout mit zwei sichtbaren Spalten */
div.content_bild_zwei_spalten {
	display: grid;
	grid-template-columns: 13% 60% 27%;
	grid-template-areas:
		'logo logo logo'
		'navi navi navi'
		'. bigimage bigimage'
		'. main klein'
		'. footer footer';
}

/** Seitenlayout mit einer sichtbaren breiten Spalte */
div.content_eine_spalte {
	display: grid;
	grid-template-columns: 13% 87%;
	grid-template-areas:
		'logo logo'
		'navi navi'
		'. bigimage'
		'. main'
		'. footer';
}

/* Logo */
div.logo {
	grid-area: logo;
}
div.logo > img {
	height: 100px;
	padding: 10px 0 10px 0;
}

div.navi {
	grid-area: navi;
	line-height: 190%;
	background-color:#fafaf9;
	font-size:1em;
	font-weight:bold;
	font-family:sans-serif;
	color:#003a78;
	letter-spacing:1px;
	border-top: 1px solid #b9bbab;
	border-bottom: 1px solid #b9bbab;
	vertical-align:bottom;
	margin-bottom:27px;
	padding: 4px 5px 4px 5px;
	width: 100%;
}

div.navi a {
	padding-right:13px;
}

div.navi a.leading {
	padding-left: 13px;
}

div.navi a.following {
	background-image:url(spot_orange.gif); 
	background-repeat:no-repeat; 
	background-position:left;
	padding-left:25px;
}

/* *******************************************
 Grosses Foto
********************************************/

div.bigimage {
	grid-area: bigimage;
	text-align:left;
	margin-bottom:20px;
	padding-right: 30px;
}

div.bigimage img {
	width: 100%;
}

.bigimage p {
	text-align:right;
	margin:0;
	padding:0;
	font-size:80%;
	color:#aaa;
}

/* *******************************************
 * Breite Textspalte
 ********************************************/
div.main {
	grid-area: main;
	text-align:left;
	float:left;
	line-height: 145%; 
	padding-right: 10%;
}

/* Zusaetzlicher Abstand nach unten wenn in div */
div.main div {
	margin-bottom:30px;
}
/********************************************
 * Rechte Randspalte
 ********************************************/
div.right {
	grid-area: klein;
	text-align: left;
	float:left;
  	font-size:0.9em;
	line-height: 120%;
	padding-right: 30px;
}

div.right h1 {
	text-align:left;
	font-size: 1em;
	font-weight: bold;
	height:20px;
	font-family:sans-serif;
	color:#003a78;
	margin-bottom:10px;
	border-bottom: 1px solid #aaa;
}
div.right h2 {
	font-weight: bold;
	color: #383838;
	font-size:0.9em;
	line-height: 120%;
	margin-bottom:0;
}

div.right p {
	margin-top:3px;
	margin-bottom:10px;
}

div.right ul {
	margin-top: 10px;
	margin-bottom:5px;
}

div.right li {
	margin-bottom: 5px;
}

/* Zusaetzlicher Abstand nach unten wenn in div */
div.right div {
	margin-bottom:30px;
}

/* *******************************************
 * Footer bzw. Abspann
 ********************************************/
div.footer {
	grid-area: footer;
	padding-top: 30px;
	padding-bottom: 7px;
	text-align: left;
	font-size:75%;
	clear:both;
}


/* *******************************************
 *    allgemein
 *********************************************/

h1 {
	font-family:sans-serif;
	font-size:150%;
	font-weight:lighter;
	letter-spacing:1px;
	color:#003a78;
	margin-bottom:6px;
	line-height: normal;
}
h2 {
	font-family:sans-serif;
	font-size:130%;
	font-weight:bold;
	margin-bottom:3px;
	color:#003a78;
}
h3 {
	font-family:sans-serif;
	font-size:100%;
	font-weight:bold;
	margin-bottom:3px;
	color:#003a78;
}

p {
	margin: 8px 0 3px 0;
}

p.intro {
	font-style: italic;
}

ul {
	margin: 3px 0 3px 20px;
	padding:0;
}

ol {
	margin: 3px 0 3px 20px;
	padding:0;
}

img { 	border:0;  }

a 	{ color:#003a78; text-decoration:none; }
a:link	{ color:#003a78; text-decoration:none; }
a:visited { color:#003a78; text-decoration:none; }
a:hover { 	color:#336dab; text-decoration:underline;	}

a.beispiel {
	background-image:url(spot_blue.gif);
	background-repeat:no-repeat;
	background-position:left;
	padding-left:15px;
}

table.projektauswahl {
	font-size:11px;
}

.projektauswahl > .tabellenkopf {
	width:200px;
	text-align:left;
	vertical-align:top;
}

table.projektauswahl tr {
	text-align:left;
	vertical-align:top;
}

table.projektauswahl tr td {
	padding-top:15px;
	padding-bottom:7px;
	border-bottom: 1px solid #ccc;
}


/* **********************************
 *               Media              *
 ************************************/

@media only screen and (max-width: 700px) {
	/** wrapper hat keine feste Breite mehr */
	#wrapper {
		width: 100%;
	}

	#wrapper > div {
		border: 0;
	}

	div.content_bild_zwei_spalten {
		grid-template-columns: 100%;
		grid-template-areas:
		'logo'
		'navi'
		'bigimage'
		'main'
		'klein'
		'footer';
	}
	div.content_eine_spalte {
		grid-template-columns: 100%;
		grid-template-areas:
		'logo'
		'navi'
		'bigimage'
		'main'
		'klein'
		'footer';
	}

	/** padding rechts entfällt */
	div.main {
		padding-right: 5%;
		padding-left: 5%;
	}
	div.bigimage {
		padding-right: 5%;
		padding-left: 5%;
	}
	/* kleine Texte Abstand nach oben einfügen */
	div.right {
		padding-top: 20px;
		padding-right: 5%;
		padding-left: 5%;
		font-size: 100%;
	}
	div.footer {
		padding-right: 5%;
		padding-left: 5%;
		font-size: 1em;
	}

}


/** ganz extrem schmal  */
@media only screen and (max-width: 230px) {
	/** wrapper wird nicht mehr schmaeler */
	#wrapper {
		width: 230px;
	}
}