/* Globale Variablen */

:root {
	/* Standard-Text */
	--DefaultFontSize: 1em;
	--DefaultLineHeight: 1.5em;
	--DefaultFont: Tahoma, Arial, sans-serif;
	--DefaultTextColor: #473129;
	--DefaultBgColor: #FFFBEB;
	--DefaultBgImage: url(kiefer_gamma5.png);

	--BoldTextColor: var(--LinkColorVisited);
	--HighlightTextColor: var(--LinkColorHover);

	/* Hyperlinks */
	--LinkColorNormal: #CC9208;
	--LinkColorHover: #FC5F00;
	--LinkColorVisited: #8A764A;

	--LinkIconImageAnchor: url(down.png);
	--LinkIconOffsetAnchor: 13px;
	--LinkIconImageExtern: url(www.png);
	--LinkIconOffsetExtern: 20px;

	/* Schatten */
	--ShadowColorLight: #BFB48D;
	--ShadowColorDark: #B6A97A;
	--ShadowSmall: 1px 1px 2px;
	--ShadowLarge: 2px 2px 4px;

	/* Kopfzeilen und Überschriften */
	--HeaderTextColor: #644C42;
	--HeaderBgColor: #FCE9A8;
	--HeaderBgImage: url(kiefer.jpg);

	/* Textboxen */
	--BoxBgColor: rgba(252, 233, 168, 0.2);
	--BoxBgColorHover: rgba(252, 233, 168, 0.4);
	--BoxBgColorLight: #FFFBF1; /* für Shoutbox etc. */
	--BoxShadow: 3px 3px 9px var(--ShadowColorLight);
	--BoxBorderColorLight: #FDDC6B #B6A97A #B6A97A #FDDC6B;
	--BoxBorderColorDark: #B6A97A #644C42 #644C42 #B6A97A;

	/* Tabellen */
	--TableCellBgColor: #FCF2D8;
	--TableCellBgImage: url(list-bg.jpg);
	--TableCellBorderColor: #FEF4CD #DBD4B6 #DBD4B6 #FEF4CD;
	--TableGridColor: #FFFFFF;

	/* Buttons */
	--ButtonFont: Arial, sans-serif;
	--ButtonBorderColorLight: #DAD2B8 #B6A97A #B6A97A #DAD2B8;
	--ButtonBorderColorDark: #B6A97A #644C42 #644C42 #B6A97A;

	/* Unterschrift */
	--SignatureFont: Segoe Script, Segoe Print, MV Boli, Ink Free, Comic Sans, Comic Sans MS, Brush Script MT, cursive;
	--SignatureSize: 1.9em;
	--SignatureColor: #000080;

	/* Tooptips */
	--TooltipTextColor: #000000;
	--TooltipLinkColor: #0000ff;
	--TooltipBgColor: #FFFFE0;
	--TooltipBorderColor: #000000;

	/* Verschiedenes */
	--BorderColorLight: #DAD2B8; /* für untere Seite Formular-Header */
	--CodeBgImage: url(computerpapier.png);
	--BorderRadius: 6px;
	--ThemeColor: #FCE9A8; /* für Mobil-Browser, um die Titelleiste einzufärben */
	--QuoteFont: Times New Roman, serif; /* Zitate */
	--IconFont: Tahoma, MS Sans Serif, sans-serif;
	--PanelBorderColor: #B6A97A; /* Farbe für Rahmen um Gruppen von Bedienelementen */
}

/* Globale Stile */

* {
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing: border-box;

	/* Silbentrennung */
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

/* Bildschirmgrößenabhängige Stile */

div.normalscreen {
	display: block;
}
div.smallscreen {
	display: none;
}
img.normalscreen {
	width: 100%;
	height: 100%;
}
img.smallscreen {
	width: 0;
	height: 0;
}

@media only screen and (max-width: 600px) {
	div.normalscreen {
		display: none;
	}
	div.smallscreen {
		display: block;
	}
	img.normalscreen {
		width: 0;
		height: 0;
	}
	img.smallscreen {
		width: 100%;
		height: 100%;
	}
}

/* Default-Stile */

body {
	font-family: var(--DefaultFont);
	font-size: var(--DefaultFontSize);
	color: var(--DefaultTextColor);
	line-height: var(--DefaultLineHeight);
	background-color: var(--DefaultBgColor);
	background-image: var(--DefaultBgImage);
	margin-left:2em;
	margin-top:2em;
	margin-right:2em;
	margin-bottom:2em;
}
/*
@media only screen and (max-width: 600px) {
	body p {
		text-align: justify;
	}
}
*/

td {
	line-height: var(--DefaultLineHeight);
}

td p {
	/* margin-top:0; */
	/* margin-bottom:1em; */
}

/* Spaltenlayout für Übersichtsseiten */

div.spalten-container {
	box-sizing: border-box;
	width: 100%;
	position: relative;
	clear: both;
	display: inline-block;
	margin-bottom: 2em;
	background-color: var(--BoxBgColor);
	box-shadow: var(--BoxShadow);
	padding: 1em;
	border-radius: var(--BorderRadius);
	border-width:1px;
	border-style:solid;
	border-color: var(--BoxBorderColorDark);
}
div.spalten-container.hover:hover {
	background-color: var(--BoxBgColorHover);
}
div.spalte-links {
	box-sizing: border-box;
	float: left;
	max-width: 40%;
	/*border: 1px solid green;*/
}
div.spalte-rechts {
	box-sizing: border-box;
	overflow: hidden;
	padding-left: 1em;
	/*border: 1px solid red;*/
}
div.spalte-links img {
	display:block;
	max-width: 100%;
}
td p:first-child,
td h1:first-child,
td h2:first-child,
td h3:first-child,
td h4:first-child,
td h5:first-child,
td h6:first-child,
div.spalte-rechts p:first-child,
div.spalte-rechts h1:first-child,
div.spalte-rechts h2:first-child,
div.spalte-rechts h3:first-child,
div.spalte-rechts h4:first-child,
div.spalte-rechts h5:first-child,
div.spalte-rechts h6:first-child {
	margin-top:0;
}

@media only screen and (max-width: 600px) {
	div.spalte-links {
		float: none;
		width: 100%;
		max-width: 100%;
		padding-bottom: 1em;
	}
	div.spalte-rechts {
		float: left;
		overflow: visible;
		padding-left: 0;
	}
	div.spalte-links img {
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
	}
	div.spalte-rechts h3,
	div.spalte-rechts h4 {
		text-align: center;
	}
	div.spalte-rechts {
		text-align: justify;
	}
}

/* Universelles Spaltenlayout für Bilder und Tabellen, die sich "responsive" verhalten sollen */

/* 2-spaltige Anordnung (Beispiel siehe thermometer.htm) */
td.spalte1von2 {
	padding-right: 1em;
	/* border: 1px solid green; */
}
td.spalte2von2 {
	padding-left: 1em;
	/* border: 1px solid red; */
}
td.spalte1von2 img,
td.spalte2von2 img {
	/* display:block; */
	max-width: 100%;
}
@media only screen and (max-width: 600px) {
	td.spalte1von2 {
		display: block;
		text-align: center;
		padding-right: 0;
		padding-bottom: 1em;
	}
	td.spalte2von2 {
		display: block;
		text-align: center;
		padding-left: 0;
		padding-top: 1em;
	}
}

/* Alternative (vereinfachte) Form eines universellen Spaltenlayouts */

div.spalten > * {
	display: inline-block;
}
div.spalten > img {
	max-width: 100%;
}
div.spalten > * {
	margin: 1em;
}
@media only screen and (max-width: 600px) {
	div.spalten > * {
		margin-left: 0;
		margin-right: 0;
	}
}

/* Hyperlinks */

a {
	outline: 0;
}
a:link {
	color: var(--LinkColorNormal);
	font-weight:bold;
}
a:active {
	color: var(--LinkColorHover);
	font-weight:bold;
	text-decoration:underline;
}
a:visited {
	color: var(--LinkColorVisited);
	font-weight:bold;
}
a:hover {
	color: var(--LinkColorHover);
	font-weight:bold;
	text-decoration:underline;
}
a.none {
	font-weight: normal;
	text-decoration: none;
	color: inherit;
}
p.icon {
	font-family: var(--IconFont);
	font-size:0.9em;
	line-height:1.5;
}
a.icon {
	color: var(--DefaultTextColor);
	font-weight:normal;
	text-decoration:none;
}
a.button {
	color:var(--DefaultTextColor);
	text-decoration: none;
}

/* Icons für Hyperlinks */
/* Hinweis: Wenn ein Link doch nicht mit einem Icon dargestellt werden soll, dann diesem die Klasse "normal" zuweisen! */

/*
a:not(.normal)[href^="#"] {
	background: transparent var(--LinkIconImageAnchor) bottom left no-repeat;
	padding-left: var(--LinkIconOffsetAnchor);
}
*/
a:not(.normal)[href^="#"]::after {
	content: var(--LinkIconImageAnchor);
	padding-left: 0.2em;
	vertical-align: -0.1em;
}

/*
a:not(.normal)[href^="http"] {
	background: transparent var(--LinkIconImageExtern) bottom left no-repeat;
	padding-left: var(--LinkIconOffsetExtern);
}
*/
a:not(.normal)[href^="http"]::after {
	content: var(--LinkIconImageExtern);
	padding-left: 0.2em;
	vertical-align: -0.1em;
}

/* Überschriften */
h1 {
	font-size:2.8em;
	line-height:normal;
	margin-bottom: 0;
	color: var(--HeaderTextColor);
	font-weight:normal;
	text-shadow: var(--ShadowLarge) var(--ShadowColorLight);
}
h2 {
	font-size:2.2em;
	line-height:normal;
	margin-bottom: 0;
	color: var(--HeaderTextColor);
	font-weight:normal;
	text-shadow: var(--ShadowLarge) var(--ShadowColorLight);
}
h3 {
	font-size:1.7em;
	line-height:normal;
	margin-bottom: 0;
	color: var(--HeaderTextColor);
	font-weight:normal;
	text-shadow: var(--ShadowLarge) var(--ShadowColorLight);
}
h4 {
	font-size:1.4em;
	line-height:normal;
	margin-bottom: 0;
	color: var(--HeaderTextColor);
	font-weight:normal;
	text-shadow: var(--ShadowSmall) var(--ShadowColorLight);
}
h5 {
	font-size:1.1em;
	line-height:normal;
	margin-bottom: 0;
	color: var(--HeaderTextColor);
	text-shadow: var(--ShadowSmall) var(--ShadowColorLight);
}
h6 {
	font-size:1em;
	line-height:normal;
	margin-bottom: 0;
	color: var(--HeaderTextColor);
	text-shadow: var(--ShadowSmall) var(--ShadowColorLight);
}

/* Überschriften, die auf einen Text-Absatz folgen */
p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 {
	margin-top: 1em;
}

/* Text-Absätze, die auf eine Überschrift folgen */
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
	margin-top: 1em;
}

/* Rubrik-Titel */

p.rubrik {
	font-size:2em;
	line-height:1.2em;
	padding: 0.16em 1em 0.16em 1em;
	color: var(--HeaderTextColor);
	font-weight:bold;
	text-align:center;
	text-shadow: var(--ShadowLarge) var(--ShadowColorDark);
	background-color: var(--HeaderBgColor);
	background-image: var(--HeaderBgImage);
	margin-top:1em;
	border-width:1px;
	border-style:solid;
	border-color: var(--BoxBorderColorLight);
	box-shadow: var(--BoxShadow);
	border-radius: var(--BorderRadius);
}

/* Unterrubrik-Titel */

p.unterrubrik {
	font-size:1.4em;
	line-height:1.2em;
	padding: 0.16em 1em 0.16em 1em;
	color: var(--HeaderTextColor);
	font-weight:bold;
	text-align:center;
	text-shadow: var(--ShadowLarge) var(--ShadowColorDark);
	background-color: var(--HeaderBgColor);
	background-image: var(--HeaderBgImage);
	margin-top:2em;
	border-width:1px;
	border-style:solid;
	border-color: var(--BoxBorderColorLight);
	box-shadow: var(--BoxShadow);
	border-radius: var(--BorderRadius);
}

/* Unterrubrik-Titel als Tabelle (für Galerie, da mehrspaltig) */

table.unterrubrik {
	width:100%;
	border-spacing:0; /* entspricht cellspacing="0" */
}
table.unterrubrik tr {
	background-color: var(--HeaderBgColor);
	background-image: var(--HeaderBgImage);
	box-shadow: var(--BoxShadow);
	border-radius: calc(2 * var(--BorderRadius)); /* hack */
}
table.unterrubrik tr td {
	font-size:1.4em;
	line-height:1.5em;
	color: var(--HeaderTextColor);
	font-weight:bold;
	text-shadow: var(--ShadowSmall) var(--ShadowColorDark);
	border-width:1px;
	border-style:solid;
	border-color: var(--BoxBorderColorLight);
}
table.unterrubrik tr td:first-child {
	border-radius: var(--BorderRadius) 0 0 var(--BorderRadius);
}
table.unterrubrik tr td:last-child {
	border-radius: 0 var(--BorderRadius) var(--BorderRadius) 0;
}

/* Normale Tabellen */

table.list {
	background-color: var(--TableGridColor);
	box-shadow: var(--BoxShadow);
}

table.list tr th {
	padding:0.4em;
	font-weight:bold;
	color: var(--HeaderTextColor);
	text-align:left;
	vertical-align:top;
	background-color: var(--HeaderBgColor);
	background-image: var(--HeaderBgImage);
	text-shadow: var(--ShadowSmall) var(--ShadowColorDark);
	border-width:1px;
	border-style:solid;
	border-color: var(--BoxBorderColorLight);
}

table.list tr td {
	/* padding:0.4em; */
	padding:0.2em 0.4em 0.2em 0.4em;
	background-color: var(--TableCellBgColor);
	background-image: var(--TableCellBgImage);
	vertical-align:top;
	border-width:1px;
	border-style:solid;
	border-color: var(--TableCellBorderColor);
}

/* Überbreite Tabellen und Iframes horizontal scrollen (diese dazu in ein div mit der folgenden Klasse stecken) */
@media only screen and (max-width: 600px) {
	div.table-scroll,
	div.iframe-scroll {
		overflow-x: auto;
	}
	div.table-scroll:before {
		content: "(Tabelle ggf. horizontal scrollen)";
	}
	div.iframe-scroll:before {
		content: "(Anwendung ggf. horizontal scrollen)";
	}
	div.table-scroll table {
		margin-left:0;
		margin-right:0;
	}

}

/* Textboxen (z.B. Wetter, Newsticker, Shoutbox) */

div.box, fieldset {
	background-color: var(--BoxBgColorLight);
	border-width:1px;
	border-style:solid;
	border-color: var(--BoxBorderColorDark);
	box-shadow: var(--BoxShadow);
}

div.box table tr th,
table.box tr th {
	font-weight:bold;
	color: var(--HeaderTextColor);
	font-size:1em;
	line-height:1.4em;
	background-color: var(--HeaderBgColor);
	background-image: var(--HeaderBgImage);
	text-shadow: var(--ShadowSmall) var(--ShadowColorDark);
	border-width:1px;
	border-style:solid;
	border-color: var(--BoxBorderColorLight);
}

div.box table tr td p {
	font-size:0.9em;
	line-height:1.5em;
}

p.box {
	font-size:0.9em;
	line-height:1.5em;
	margin-top:0;
	margin-bottom:0.4em;
}

/* Textboxen (z.B. für Code) */

.kasten, .code {
	padding:0.5em 1em 0.5em 1em;
	border-width:1px;
	border-style:solid;
	border-color: var(--BoxBorderColorDark);
	box-shadow: var(--BoxShadow);
	max-width: 100%;
	position: relative;
	display: inline-block;
	text-align: left;
	overflow-wrap: break-word;
}
/* .kasten::after { */
	/* content: ""; */
	/* background-color: white; */
	/* background-image: var(--CodeBgImage); */
	/* opacity: 0.2; */
	/* top: 0; */
	/* left: 0; */
	/* bottom: 0; */
	/* right: 0; */
	/* position: absolute; */
	/* z-index: -1; */
/* } */
.code {
	background-image: var(--CodeBgImage);
}

/* Gästebuch */

table.gb,
table.gbentry {
	width: 67%;
	margin-top: 2em;
	margin-bottom: 2em;
	box-shadow: var(--BoxShadow);
	border-collapse: collapse;
	border-radius: var(--BorderRadius);
}

table.gblogin {
	width: auto;
}

table.gbnewentry {
	border-width:2px;
	border-color: var(--LinkColorHover);
}

table.gb tr th,
table.gbentry tr th {
	font-size:1.1em;
	line-height: 1.5em;
	padding: 0.3em 1em 0.3em 1em;
	color: var(--HeaderTextColor);
	font-weight:bold;
	border-width:1px;
	border-bottom-style:solid;
	border-color: var(--BorderColorLight);
	background-color: var(--HeaderBgColor);
	background-image: var(--HeaderBgImage);
	text-shadow: var(--ShadowSmall) var(--ShadowColorDark);
	border-radius: var(--BorderRadius) var(--BorderRadius) 0 0;
}

table.gb tr td {
	background-color: var(--BoxBgColor);
	padding:0.5em 1em 0.5em 1em;
	vertical-align:top;
}

table.gb tr td:last-child {
	border-radius: 0 0 var(--BorderRadius) var(--BorderRadius);
}

table.gb tr td textarea {
	font-family: var(--DefaultFont);
	font-size:1em;
}

table.gb tr td input,
input.gb {
	font-size:1em;
}

table.gbentry tr td {
	background-color: var(--BoxBgColor);
	padding:1em;
}

table.gbentry tr td:last-child {
	border-radius: 0 0 var(--BorderRadius) var(--BorderRadius);
}

.gbinfo {
}

.gberror {
	color: var(--LinkColorHover);
}

.gbwarning {
}

.gbsignature {
	font-family: var(--SignatureFont);
	font-size: var(--SignatureSize);
	color: var(--SignatureColor);
	/* font-style: italic; */
}

.gbcommentheader {
	line-height:1.5em;
	color: var(--HeaderTextColor);
	font-weight:bold;
	text-align:center;
	text-shadow: var(--ShadowSmall) var(--ShadowColorDark);
	background-color: var(--HeaderBgColor);
	background-image: var(--HeaderBgImage);
	margin-top:2em;
	border-width:1px;
	border-style:solid;
	border-color: var(--BoxBorderColorLight);
	box-shadow: var(--BoxShadow);
	border-radius: var(--BorderRadius);
}

@media only screen and (max-width: 600px) {
	table.gb,
	table.gbentry {
		width: 100%;
	}
}

/* Menü (rechts oben über der Seite schwebend) */

#menuWindow {
	position: fixed;
	top: 0;
	right: 0;
}
#menuExpanded {
	padding: 0.2em 0.5em 0.2em 0.5em;
	background-color: var(--TableCellBgColor);
	background-image: var(--TableCellBgImage);
	border-width:1px;
	border-style:solid;
	border-color: var(--TableCellBorderColor);
	box-shadow: var(--BoxShadow);
}
#menuCollapsed {
}
p.menuTitleSmall {
	font-size:1.5em;
	color: var(--HeaderTextColor);
	text-shadow: var(--ShadowSmall) var(--ShadowColorDark);
	margin-top:0;
	margin-bottom:0;
	padding: 0.2em;
}
p.menuTitle {
	font-size:1.1em;
	color: var(--HeaderTextColor);
	text-shadow: var(--ShadowSmall) var(--ShadowColorDark);
	margin-top:0;
	margin-bottom:0;
}
p.menuItem {
	margin-top:0.4em;
	margin-bottom:0.4em;
}
p.menuItem a {
	color: var(--LinkColorNormal);
	text-decoration:none;
}
p.menuItem a:hover {
	color: var(--LinkColorHover);
}
/*
@media only screen and (max-width: 600px) {
	div.menuWindow {
		top: auto;
		bottom: 0.5em;
	}
}
*/

/* Button (über der Seite schwebend) */

/*
div.btnWindow {
	position: fixed;
	bottom: 0.5em;
	right: 0.5em;
	padding: 0.2em 0.5em 0.2em 0.5em;
	background-color: var(--TableCellBgColor);
	background-image: var(--TableCellBgImage);
	border-width:1px;
	border-style:solid;
	border-color: var(--TableCellBorderColor);
	box-shadow: var(--BoxShadow);
	border-radius: var(--BorderRadius);
	cursor: pointer;
}
p.btnCaption {
	font-size:1.1em;
	color: var(--HeaderTextColor);
	text-shadow: var(--ShadowSmall) var(--ShadowColorDark);
	margin-top:0;
	margin-bottom:0;
}
*/

/* Sprachen-Menü (links oben über der Seite schwebend) */

#langMenu {
	position: fixed;
	top: 0;
	left: 0.3em;
	cursor: pointer;
}
#langMenu img {
	box-shadow: var(--BoxShadow);
	vertical-align: middle;
	margin-right: 0.5em;
}
span.langMenuLabel {
}

/* Zitate */

div.zitat {
/*
	font-family: var(--QuoteFont);
	font-size:1.1em;
*/
	background-color: var(--BoxBgColor);
	box-shadow: var(--BoxShadow);
	padding:0.5em 1.5em 0.5em 1.5em;
	margin-left:10%;
	margin-right:10%;
	margin-top:2em;
	margin-bottom:2em;
	border-radius: var(--BorderRadius);
	border-width:1px;
	border-style:solid;
	border-color: var(--BoxBorderColorDark);
}
@media only screen and (max-width: 600px) {
	div.zitat {
		margin-left:0;
		margin-right:0;
	}
}

/* Buttons und Eingabefelder */

.smalledit {
	border-width:1px;
	border-style:solid;
	border-color: var(--HeaderTextColor);
	font-size:1em;
}
.smallbutton {
	background-color: var(--HeaderBgColor);
	background-image: var(--HeaderBgImage);
	margin:4px 2px;
	border-width:1px;
	border-style:solid;
	border-color: var(--ButtonBorderColorDark);
	font-size:1em;
	color: var(--DefaultTextColor);
	box-shadow: var(--BoxShadow);
	border-radius: var(--BorderRadius);
}
.button {
	background-color: var(--HeaderBgColor);
	background-image: var(--HeaderBgImage);
	border-width:1px;
	border-style:solid;
	border-color: var(--ButtonBorderColorLight);
	font-family: var(--ButtonFont);
	font-size:1.1em;
	font-weight:bold;
	margin: 0.5em;
	padding: 0.5em 1em 0.5em 1em;
	color: var(--HeaderTextColor);
	box-shadow: var(--BoxShadow);
	border-radius: var(--BorderRadius);
}

/* Tooltips */

div.tooltip {
	background-color: var(--TooltipBgColor);
	border-width:1px;
	border-style:solid;
	border-color: var(--TooltipBorderColor);
	padding:0.5em;
	box-shadow: var(--BoxShadow);
}
div.tooltip p {
	font-size:0.9em;
	line-height:1em;
	margin:0;
	color: var(--TooltipTextColor);
}
a.tooltip:link, a.tooltip:active, a.tooltip:visited, a.tooltip:hover  {
	color: var(--TooltipLinkColor);
	font-weight:normal;
	text-decoration:underline;
}

/* Bilduntertitel */

p.image {
	font-size:0.9em;
}

/* Bilder */

img.bild {
	box-shadow: var(--BoxShadow);
}

.foto, .nistkasten-foto {
	padding:5px;
	background-color:#FFFFFF;
	border-width:1px;
	border-style:solid;
	border-color:#CCCCCC #666666 #666666 #CCCCCC;
	box-shadow: var(--BoxShadow);
}

body > p > img,
body > p > a > img,
body > div > p > img,
div.thumbnail img,
div.yourimage img {
	max-width: 100%;
}

/* YouTube-Video (4:3) */
iframe.youtube43 {
	max-width: 100%;
	max-height: calc((100vw - 2*2em) / (4/3));
}

/* Video-Player */

video.videoplayer {
	max-width: 100%;
	height: auto;
	outline: 0;
}

/* Audio-Player*/

.audioplayer {
	width: 400px;
	min-width: 200px;
	max-width: 100%;
	outline: 0;
	vertical-align: middle;
	/*margin-top: 0.5em;
	margin-bottom: 0.5em;*/
}
/* siehe hier: https://pointclearmedia.com/2020/08/27/css-styling-the-audio-element/*/
audio::-webkit-media-controls-panel {
	background-color: var(--HeaderBgColor);
	background-image: var(--HeaderBgImage);
}

/* Verschiedenes */

#aufzaehlung {
	padding-left:1em;
}

#aufzaehlung li {
	margin:0.3em 0em 0.3em 0em;
}

sub, sup { 
	line-height:0;
}

textarea, pre {
	-moz-tab-size:4;
	-o-tab-size:4;
	tab-size:4;
}

select {
	font-size:1em;
}

pre {
	white-space: pre-wrap;
	overflow-wrap: break-word;
	/* word-wrap: break-word; */
	hyphens: manual;
}

/* Fettschrift */

b {
	/* color: var(--HeaderTextColor); */
	color: var(--BoldTextColor);
}

/* Hervorgehobener Text */

h {
	font-weight:bold;
	color: var(--HighlightTextColor);
}

span.subtitle,
div.yourimage {
	font-size:0.8em;
}

img.email-impressum {
	vertical-align:bottom;
	height: 1.2em;
}

/* OSD-Text für Nistkasten-Kamera */

.osd {
	font-family:Arial, sans-serif;
	font-size:1.8em;
	color:#00ff00;
	font-weight:bold;
}

/* Ersatz für align="center" -> class="center" */

.center {
	text-align: center;
}

/* Ersatz für <center> -> <div class="center"> */

div.center {
	text-align: center;
	display: inline-block;
	width: 100%;
}

/* Erforderlich für Ersatz für <center>: */

td {
	text-align:left;
}