/* Globale Variablen */

:root {
	/* Größen */
	--MaxWidthBody: 1058px;
	--ScrollbarWidth: 20px; /* Default; genauer Wert wird durch JavaScript ermittelt und zugewiesen. */
	--ScrollTop: 0px; /* Default; genauer Wert wird durch JavaScript ermittelt und zugewiesen. */
	--BodyMarginVertical: clamp(0px, calc((100% - var(--MaxWidthBody)) / 2), 40px);
	--BodyPaddingHorizontal: clamp(20px, calc((100% - 800px) / 10 + 20px), 40px);
	--BodyBorderRadius: clamp(0px, calc((100vw - var(--ScrollbarWidth) - var(--MaxWidthBody)) / 2), 20px);
	--MenuTopPosition: calc(clamp(0px, calc(40px - var(--ScrollTop)), clamp(0px, calc((100vw - var(--ScrollbarWidth) - var(--MaxWidthBody)) / 2), 40px)) + var(--BodyBorderRadius) / 2);
	--MenuLeftPosition: max(5px, calc(5px + (100% - var(--MaxWidthBody)) / 2) + var(--BodyBorderRadius) / 2);
	--MenuRightPosition: max(0px, calc(0px + (100% - var(--MaxWidthBody)) / 2) + var(--BodyBorderRadius) / 2);

	/* Standard-Schriftart */
	--DefaultFontSize: 1em;
	--DefaultLineHeight: 1.5em;
	--DefaultFont: Tahoma, Arial, sans-serif;

	/* Standard-Text */
	--MarginBgColor: #81756F;
	--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: #00000020;
	--ShadowColorDark: #B6A97A;
	--ShadowSmall: 1px 1px 2px;
	--ShadowLarge: 2px 2px 4px;
	--HoverShadow: 0px 0px 6px var(--ShadowColorDark);

	/* 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 6px var(--ShadowColorLight);
	--BoxBorderColorLight: #EEDC9C #CCC29E #CCC29E #EEDC9C;
	--BoxBorderColorDark: #B6A97A #785C50 #785C50 #B6A97A;

	/* Menü */
	--MenuBgColor: #FCF2D8;
	--MenuBgImage: url(list-bg.jpg);
	--MenuBorderColor: #FEF4CD #DBD4B6 #DBD4B6 #FEF4CD;

	/* Tabellen */
	--TableCellBorderColor: #FEF4CD #DBD4B6 #DBD4B6 #FEF4CD;

	/* Steuerelemente */
	--ButtonFont: Arial, sans-serif;
	--ButtonBorderColor: #B6A97A #785C50 #785C50 #B6A97A;
	--ButtonBrightnessHover1: 0.96;
	--ButtonBrightnessHover: 1.03;
	--EditBgColor: white;

	/* Fotos */
	--FotoBgColor: #FFFFFF;
	--FotoBorderColor: #CCCCCC #666666 #666666 #CCCCCC;
	--ThinFrameColor: #CCCCCC;

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

	/* Audio-Player*/
	--AudioBgColor: var(--HeaderBgColor);
	--AudioBgImage: var(--HeaderBgImage);

	/* Verschiedenes */
	--BorderColorLight: #DAD2B8; /* für untere Seite Formular-Header */
	--CodeColor: #303030;
	--CodeBgImage: url(computerpapier.png);
	--CodeBorderColorDark: var(--BoxBorderColorDark);
	--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 */
}

/* Dark Mode */

@media (prefers-color-scheme: dark) {
:root {
	/* Standard-Text */
	--MarginBgColor: #333333;
	--DefaultTextColor: #C0C0C0;
	--DefaultBgColor: #202020;
	--DefaultBgImage: url(kiefer_gr_h-134_k-60.png);

	--BoldTextColor: #E0E0E0;
	--HighlightTextColor: var(--LinkColorHover);

	/* Hyperlinks */
	--LinkColorNormal: #C8A500;
	--LinkColorHover: #FFD100;
	--LinkColorVisited: #A28500;

	--LinkIconImageAnchor: url(down_dark.png);
	--LinkIconImageExtern: url(www_dark.png);

	/* Schatten */
	--ShadowColorLight: #00000040;
	--ShadowColorDark: #000000;

	/* Kopfzeilen und Überschriften */
	--HeaderTextColor: #FFD100;
	--HeaderBgColor: #333333;
	--HeaderBgImage: url(kiefer_gr_h-115_k-60.png);

	/* Textboxen */
	--BoxBgColor: rgba(0, 0, 0, 0.2);
	--BoxBgColorHover: rgba(0, 0, 0, 0.1);
	--BoxBgColorLight: #262626; /* für Shoutbox etc. */
	--BoxBorderColorLight: #484848 #383838 #404040 #404040;
	--BoxBorderColorDark: #404040 #383838 #404040 #404040;

	/* Menü */
	--MenuBgColor: #262626;
	--MenuBgImage: url(kiefer_h-102_k-82_gr.png);
	--MenuBorderColor: #303030 #000000 #000000 #303030;

	/* Tabellen */
	--TableCellBorderColor: #303030 #000000 #000000 #303030;

	/* Steuerelemente */
	--ButtonBorderColor: #404040 #383838 #383838 #404040;
	--ButtonBrightnessHover: 1.2;
	--EditBgColor: black;

	/* Fotos */
	--FotoBgColor: #202020;
	--FotoBorderColor: #404040 #404040 #404040 #404040;

	/* Tooptips */
	--TooltipTextColor: #909090;
	--TooltipLinkColor: #FFFFFF;
	--TooltipBgColor: #000000;
	--TooltipBorderColor: #303030;

	/* Audio-Player*/
	--AudioBgColor: #CCCCCC;
	--AudioBgImage: url(kiefer_gr_h-115_k-60_inv.png);

	/* Verschiedenes */
	--BorderColorLight: #000000; /* für untere Seite Formular-Header */
	--CodeColor: #FFFFFF;
	--CodeBgImage: url(computerpapier_dark.png);
	--CodeBorderColorDark: #909090;
	--ThemeColor: #202020; /* für Mobil-Browser, um die Titelleiste einzufärben */
	--PanelBorderColor: #606060; /* Farbe für Rahmen um Gruppen von Bedienelementen */
}
	/* Audio-Player*/
	audio::-webkit-media-controls {
		filter: invert(100%);
	}

	/* Scrollbars */
	*::-webkit-scrollbar {
		width: 15px;
		height: 15px;
		background-color: #000000;
		border-radius: 8px;
	}
	*::-webkit-scrollbar-thumb {
		background-color: #606060;
		border-radius: 8px;
		border: 2px solid #000000;
	}
}

/* Globale Stile */

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

	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 */

html {
	background-color: var(--MarginBgColor);
}

body {
	font-family: var(--DefaultFont);
	font-size: var(--DefaultFontSize);
	color: var(--DefaultTextColor);
	line-height: var(--DefaultLineHeight);
	background-color: var(--DefaultBgColor);
	background-image: var(--DefaultBgImage);

	max-width: var(--MaxWidthBody);
	margin: var(--BodyMarginVertical) auto;
 	padding-top: 10px;
 	padding-bottom: 20px;
 	padding-left: var(--BodyPaddingHorizontal);
 	padding-right: var(--BodyPaddingHorizontal);
	border-radius: var(--BodyBorderRadius);
}
/*
@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%;
}
div.spalte-rechts img {
	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;
	}
	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;
}
p.small {
	font-size:0.9em;
}
a.icon {
	color: var(--DefaultTextColor);
	font-weight:normal;
	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;
}

a.button-link {
	background-color: var(--HeaderBgColor);
	background-image: var(--HeaderBgImage);
	color: var(--ButtonLinkFgColor);
	text-decoration: none;
	line-height: 1em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;

	border-radius: 9999px;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	font-size: 1.125em;

	cursor: pointer;
	display: inline-block;



/*
	border-width: 1px;
	border-style: solid;
	border-color: var(--ButtonBorderColor);
	font-family: var(--ButtonFont);
*/
}

a.button-link:hover {
	_background-color: var(--AccentColor);
	filter: brightness(var(--ButtonBrightnessHover));
	box-shadow: var(--HoverShadow);
}

/* Ü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 {
	box-shadow: var(--BoxShadow);
	border-radius: var(--BorderRadius);
}

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:first-child th:first-child {
	border-top-left-radius: var(--BorderRadius);
}

table.list tr:first-child th:last-child {
	border-top-right-radius: var(--BorderRadius);
}

table.list tr:last-child td:first-child {
	border-bottom-left-radius: var(--BorderRadius);
}

table.list tr:last-child td:last-child {
	border-bottom-right-radius: var(--BorderRadius);
}

table.list tr td {
	/* padding:0.4em; */
	padding: 0.2em 0.4em 0.2em 0.4em;
	background-color: var(--BoxBgColor);
	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: 6000px) {
	div.table-scroll,
	div.iframe-scroll {
		overflow-x: auto;
	}
/* Problem: Text erscheint immer. TODO: js-Lösung, die den Text nur dann zeigt, wenn Tabelle/IFrame tatsächlich overflowt.
	div.table-scroll:before,
	div.iframe-scroll:before {
		content: "Nach rechts scrollen";
		font-style: italic;
	}
*/
	div.table-scroll {
		padding: 16px; /* Abstand zum Schatten der Tabelle */
		margin: -16px; /* Abstand zum Schatten der Tabelle */
	}
	div.table-scroll table {
		margin-left: 0;
		margin-right: 0;
	}
/* Scrollbar oben statt unten:
	div.table-scroll,
	div.iframe-scroll,
	div.table-scroll table,
	div.iframe-scroll iframe {
		transform:rotateX(180deg);
		-ms-transform:rotateX(180deg);
		-webkit-transform:rotateX(180deg);
	}
*/
}

/* Artikeldatum */

p.date {
	margin-top: 1.6em;
	color: var(--HeaderTextColor);
	text-shadow: var(--ShadowSmall) var(--ShadowColorLight);
	text-align: center;
}

/* 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;
}
.code {
	color: var(--CodeColor);
	background-image: var(--CodeBgImage);
	border-color: var(--CodeBorderColorDark);
}

/* Gästebuch, Kontaktformular */

div.card {
	width: 700px;
	max-width: 100%;
	background-color: var(--BoxBgColor);

	margin: 2em auto;
	padding: 5px 20px;

	border-width: 1px;
	border-style: solid;
	border-color: var(--BoxBorderColorDark);
	border-radius: var(--BorderRadius);

	box-shadow: var(--BoxShadow);
}
div.card > p:first-child {
	text-align: center;
	font-size: 1.1em;
	line-height: 1.5em;
	color: var(--HeaderTextColor);
	font-weight: bold;
	text-shadow: var(--ShadowSmall) var(--ShadowColorDark);

	background-color: var(--HeaderBgColor);
	background-image: var(--HeaderBgImage);

	margin: -5px -20px;
	padding: 8px 20px;

	border-bottom-style: solid;
	border-width: 1px;
	border-color: var(--BorderColorLight);
	border-radius: var(--BorderRadius) var(--BorderRadius) 0 0;
}

div.card.new {
	border: 1px solid var(--LinkColorHover);
	outline: 3px solid var(--LinkColorHover);
}

.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);
}

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

#menuWindow {
	position: fixed;
	top: var(--MenuTopPosition);
	right: var(--MenuRightPosition);
}
#menuExpanded {
	padding: 0.2em 0.5em 0.2em 0.5em;
	background-color: var(--MenuBgColor);
	background-image: var(--MenuBgImage);
	border: 1px solid var(--MenuBorderColor);
	box-shadow: var(--BoxShadow);
	border-radius: var(--BodyBorderRadius);
}
#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);
	font-weight:bold;
	text-shadow: var(--ShadowSmall) var(--ShadowColorDark);
	margin-top:0;
	margin-bottom:0;
}
p.menuItem {
	margin-top:1.5em;
	margin-bottom:0.5em;
}
p.menuItem a {
	color: var(--LinkColorNormal);
	text-decoration:none;
}
p.menuItem a:hover {
	color: var(--LinkColorHover);
}

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

#langMenu {
	position: fixed;
	top: var(--MenuTopPosition);
	left: var(--MenuLeftPosition);
	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 */

button,
input[type=button],
input[type=submit] {
	background-color: var(--HeaderBgColor);
	background-image: var(--HeaderBgImage);
	border-width: 1px;
	border-style: solid;
	border-color: var(--ButtonBorderColor);
	font-family: var(--ButtonFont);
	font-size: 1em;
	font-weight: bold;
	margin: 0.5em;
	padding: 0.5em 1em;
	color: var(--DefaultTextColor);
	box-shadow: var(--BoxShadow);
	border-radius: var(--BorderRadius);
}
button.small,
input[type=button].small,
input[type=submit].small {
	margin: 4px 2px;
	padding: 0.25em 0.5em;
	border-color: var(--ButtonBorderColor);
	font-size: 0.9em;
	border-radius: calc(var(--BorderRadius) / 2);
}
button:enabled:hover,
input[type=button]:enabled:hover,
input[type=submit]:enabled:hover {
	filter: brightness(var(--ButtonBrightnessHover));
}
button:disabled,
input[type=button]:disabled,
input[type=submit]:disabled {
	opacity: 0.5;
}

/* Eingabefelder */

input[type=text],
input[type=password],
textarea,
select {
	font-family: var(--DefaultFont);
	font-size: var(--DefaultFontSize);
	color: var(--DefaultTextColor);
	font-size: 1em;
	background-color: var(--EditBgColor);
	border: 1px solid var(--PanelBorderColor);
	border-radius: var(--BorderRadius);
	padding: 4px 4px;
}
input[type=text].small,
input[type=password].small,
textarea.small,
select.small {
	padding: 1px 2px;
	border-radius: calc(var(--BorderRadius) / 2);
}
input[type=text]:disabled,
input[type=password]:disabled,
textarea:disabled,
select:disabled {
	opacity: 0.5;
}

input[type="checkbox"] {
	accent-color: var(--HeaderBgColor);
	transform: scale(1.5);
}
input[type="checkbox"].small {
	transform: none;
}

/* 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: var(--FotoBgColor);
	border-width:1px;
	border-style:solid;
	border-color: var(--FotoBorderColor);
	box-shadow: var(--BoxShadow);
}

.header-image img {
	width:100%;
	box-shadow: var(--BoxShadow);
	border-radius: var(--BorderRadius);
}

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

figure {
	display: table;
	margin: 10px auto 30px auto;
}

figure figcaption {
	display: table-caption;
	caption-side: bottom;
	text-align: center;
	font-size: 0.9em;
	line-height: 1.5em;
	_margin-top: 0.5em;
}

/* Image-Karussell */
div.image-carousel img {
	max-width: 100%;
	max-height: 800px;
}
.thinframe img {
	border: 1px solid var(--ThinFrameColor);
}

div.image-carousel {
	display: flex;
	overflow-x: auto;
	gap: 20px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
div.image-carousel::-webkit-scrollbar {
	display: none;
}
div.image-carousel.top {
	align-items: start;
}
div.image-carousel.middle {
	align-items: center;
}
div.image-carousel.bottom {
	align-items: end;
}
div.image-carousel > * {
	flex-shrink: 0;
	flex-basis: 100%;
	scroll-snap-align: center;
}
div.image-carousel figure {
	margin-top: 0;
	margin-bottom: 10px;
}
div.image-carousel + div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1em;
}
div.image-carousel + div button {
	margin: 0;
	width: 50px;
	height: 50px;
	padding: 0;
	border: none;
	border-radius: 50%;
	font-size: 1.5em;
	font-weight: normal;
	box-shadow: none;
}
div.image-carousel + div button:hover {
	filter: brightness(var(--ButtonBrightnessHover));
	box-shadow: var(--HoverShadow);
}

/* 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;
*/
	border-radius: 20px; /* für Firefox */
	height: 40px; /* für Chrome */
}
/* siehe hier: https://pointclearmedia.com/2020/08/27/css-styling-the-audio-element/ */
audio::-webkit-media-controls-panel {
	background-color: var(--AudioBgColor);
	background-image: var(--AudioBgImage);
}

/* Verschiedenes */

ul {
	padding-left: 1.5em;
}

ul li {
	margin:0.5em 0em 0.5em 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;
}

.navlinks {
	text-align: center;
}
.navlinks * {
	hyphens: none; 
}

/* Fettschrift */

b {
	_color: var(--BoldTextColor);
}

/* Hervorgehobener Text */

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

.attention {
	font-weight: bold;
	color: var(--LinkColorHover);
}

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;
}

.right {
	text-align: right;
}

/* 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;
}

/* Element ausblenden */
.hidden {
	display: none;
}

/* Elemente nebeneinander anordnen */
.nowrap {
	display: inline-block;
}