body   { color: #036; font-size: 1.5em; font-family: Calibri, Verdana, Arial, Helvetica, sans-serif, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 1.6em; background-color: #9cf; background-image: url("../illustrationen/12c.gif"); width: 98%; height: 100% }
/* general settings */
acronym, abbr  /*  technical terms             */   { margin-right: 1ex; margin-left: 1ex; border-bottom: 1px dashed }
.unsichtbar, dfn  /*  invisible for screen, but necessary for audio             */   { display: inline; position: absolute; top: -1000px; left: -1000px; width: 0; height: 0; overflow: hidden }

blockquote  /*  fuer Zitate  */                     { color: gray; font-size: 0.9em; font-style: italic; line-height: 1.1em; background-color: #fff; margin: 1em; padding: 1ex; width: 50%; clear: both; border: solid thin #069; }
cite   { color: #069; background-color: #fff }



/*all my links*/
/*all my links - end -*/
a:link, a:visited, a:hover, a:focus, a:active { font-size: 0.9em; font-weight: bold; text-decoration: none; width: auto }
/*general settings - end*/
/*special font settings*/
.sub {
	font-size:      0.8em;
	text-decoration: none;
	vertical-align:  bottom }

.sup {
	font-size:      0.8em;
	text-decoration: none;
	vertical-align:  top }

.mini {
	font-size:      0.8em;
	text-decoration: none }

.italic {
	font-style:     italic;
	text-decoration: none }

.bolditalic {
	font-style:     italic;
	font-weight:     bold;
	text-decoration: none }

.bold {
	font-weight:    bold;
	text-decoration: none }

.firstletter {
	font-size:      2em;
	font-weight:     bold;
	line-height:     2em;
	text-decoration: none;
	margin-top:      1%;
	margin-bottom:   1%;
	padding:         1%;
	border:          outset thin }
/*special font settings - end -*/



h1 /*  haupt?berschrift  */  { font-size: 2em; font-weight: bold; line-height: 2.2em; margin-right: auto; margin-left: auto; padding: 1ex; width: 50% }
h2   /* ?berschrift Inhalt und Navigation */ { font-size: 1.2em; font-weight: bold; line-height: 1.4em; margin: 0.83em 0 }
h3   /* ?berschrift Infobox */ { font-size: 1.1em; font-weight: bold; line-height: 1.3em; margin: 1em 0 }
h4   /* ?berschrift in Listen Infobox */  { font-size: 1.1em; font-weight: bold; line-height: 1.2em; margin: 1em 0; float: none }
#kopfzeile      { background-image: url("(EmptyReference!)"); width: 95%; height: auto; overflow: auto }

#navigation     { margin: 2em 1em 1em; padding: 1ex; width: 95%; height: auto; float: left; clear: both; overflow: auto; border-style: dotted dotted groove groove; border-width: thin; border-color: #069 }

/*links at navigation*/
#navigation ul {
	list-style-type: none }

#navigation ul ul {
	margin-left:   5%;
	padding-top:    3%;
	padding-bottom: 2%;
	padding-left:   0 }

#navigation ul li {
	list-style-type: none;
	display:          inline;
	padding-top:      1%;
	padding-bottom:   1% }

* html #navigation ul li {
	list-style-type: none;
	display:          block;
	d\\isplay:         inline       }

#aktiv   { color: #dc143c; font-size: 1em; font-weight: normal; line-height: 1.5em; background: transparent;  display: block; margin-bottom: 1%; padding: 1% 1% 1% 3%; border-left: 10px solid #dc143c }

#navigation a:link  { color: #039; line-height: 1.5em; background: transparent; list-style-type: circle; list-style-position: inside; display: list-item; margin-bottom: 1%; padding: 1% }

#navigation a:visited {
	color:              #609;
	line-height:         1.5em;
	background:          transparent;
	list-style-type:     square;
	list-style-position: inside;
	display:             list-item;
	margin-bottom:       1%;
	padding:             1% }

#navigation a:hover {
	color:              #f5fffa;
	line-height:         1.5em;
	background:          #036;
	list-style-type:     disc;
	list-style-position: inside;
	display:             list-item;
	margin-bottom:       1%;
	padding:             1% }

#navigation a:focus  { color: #f5fffa; line-height: 1.5em; background: #66f; list-style-type: disc; list-style-position: inside; display: list-item; margin-bottom: 1%; padding: 1% }

#navigation a:active  { color: #f5fffa; line-height: 1.5em; background: #dc143c; list-style-type: disc; list-style-position: inside; display: list-item; margin-bottom: 1%; padding: 1% }

/*links at navigation - end -*/
#inhalt    { margin: 1ex; padding: 1ex; width: 95%; height: auto; overflow: auto }
.float-left { margin: 1em; float: left }
.sprung-sa { margin-right: auto; margin-left: auto; width: 50% }
.info /*  Kästchen für Aktuelles  */   { background-color: #fff; margin: 1ex; padding: 1ex; width: 25%; height: auto; float: right; clear: both; overflow: auto; border: solid thin #f08080 }
/*lists at content*/
#inhalt ul {
	list-style-image: none;
	margin-top:        2%;
	margin-bottom:     2%;
	margin-left:       2% }

#inhalt ul li   { }

#inhalt ul li.listar, #inhalt ul li ul li.listar           { background-image: none; list-style: none url("../icons/button_az_bla27.png"); display: list-item; padding-left: 2% }

/*lists at content - end -*/
	
/*settings footer*/
div#footer           { color: #fff; font-size: 0.85em; font-weight: bold; background-color: #069; background-image: none; text-align: center; margin-top: 2%; padding: 1%; width: 95%; height: auto; float: none; clear: both; border-top: 2px dotted #808080 }

.padfoot {
	font-size:    1em;
	line-height:   1em;
	padding-right: 1%;
	padding-left:  1% }
	
#footer a:link   { color: #cff; text-decoration: underline }

#footer a:visited   { color: #96f; text-decoration: underline; background-color: #fff }

#footer a:hover  { color: #cff; text-decoration: underline; background-color: #66f }

#footer a:focus  { color: #cff; text-decoration: underline; background-color: #306 }

#footer a:active  { color: #f5fffa; text-decoration: underline; background-color: #f00 }

/*settings footer - end -*/

#inhalt a:link   { color: #039; text-decoration: underline }

#inhalt a:visited   { color: #609; text-decoration: underline; background-color: #fff }

#inhalt a:hover  { color: #f5fffa; text-decoration: underline; background:          #036; }

#inhalt a:focus  { color: #f5fffa; text-decoration: underline; background-color: #66f }

#inhalt a:active  { color: #f5fffa; text-decoration: underline; background-color: #dc143c }



/* ========================= */
/*   Responsive Erweiterung  */
/* ========================= */

/* Basis: Body nicht härten, damit er flexibel ist */
html {
	box-sizing: border-box;
}

*, *::before, *::after {
	box-sizing: inherit;
}

/* Kleine Geräte: max 600px */
@media only screen and (max-width: 600px) {

	body {
		font-size: 1em;
		width: 100%;
		margin: 0;
		padding: 0.5em;
		background-image: none; /* optional: Hintergrundbild auf Handy entfernen */
	}

	h1 {
		width: 100%;
		font-size: 1.5em;
		line-height: 1.4em;
		padding: 0.5em 0;
	}

	#kopfzeile {
		width: 100%;
		background-position: center top;
		background-size: contain;
	}

	#navigation {
		float: none;
		width: 100%;
		margin: 1em 0;
	}

	#navigation ul li {
		display: block;
	}

	#navigation a:link,
	#navigation a:visited,
	#navigation a:hover,
	#navigation a:focus,
	#navigation a:active,
	#aktiv {
		display: block;
		margin-bottom: 0.3em;
	}

	#inhalt {
		width: 100%;
		margin: 0;
		padding: 0.5em 0;
	}

	.info {
		width: 100%;
		float: none;
		clear: both;
	}

	blockquote {
		width: 100%;
		margin: 0.5em 0;
	}

	.sprung-sa {
		width: 100%;
	}

	div#footer {
		width: 100%;
		margin-top: 1em;
	}
}

/* Tablets: 600px bis 900px */
@media only screen and (min-width: 600px) and (max-width: 900px) {

	body {
		font-size: 1.2em;
		width: 100%;
		margin: 0;
		padding: 1em;
	}

	h1 {
		width: 80%;
	}

	#navigation {
		width: 100%;
	}

	#inhalt {
		width: 100%;
	}

	.info {
		width: 35%;
	}

	div#footer {
		width: 100%;
	}
}

/* Große Bildschirme: Begrenzung der Maximalbreite */
@media only screen and (min-width: 1200px) {

	body {
		max-width: 1200px;
		margin: 0 auto;
	}

	#navigation,
	#inhalt,
	div#footer,
	#kopfzeile {
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
}
/* Bilder generell responsiv */
img {
	max-width: 100%;
	height: auto;
	display: block;   /* optional, vermeidet kleine Lücken unter dem Bild */
}

/* Wenn Bilder im Inhaltsbereich sind, kannst du es auch einschränken: */
/*
#inhalt img {
	max-width: 100%;
	height: auto;
}
*/