@import "/css/hamburger.css";
@import "/css/header.css";
@import "/css/input-text.css";
@import "/css/drei-boxen-nebeneinander.css";
@import "/css/toggle.css";
@import "/css/submitbutton.css";
/************************ toggle ************************/

:root {
 --schriftart: Arial;
 --farbehell1: color-mix(in srgb, var(--farbemittel) 1%, white); /****** sehr hell ********/
 --farbehell2: color-mix(in srgb, var(--farbemittel) 45%, white);/******  hell ********/
 --farbemittel: #228B22; /* Grundfarbe */
 --farbedunkel1: color-mix(in srgb, var(--farbemittel) 75%, black);/****** dunkel ********/
 --farbedunkel2: color-mix(in srgb, var(--farbemittel) 55%, black);/****** sehr dunkel ********/
 --komplementaerfarbe: #00000e;
 --contentbreite: 768px;
 --mehrereboxen: calc(var(--contentbreite) + 20px);
 --schriftgroesse: 16px;
 --textfarbe: #333;
 --komplementaerfarbeheller: color-mix(in srgb, var(--komplementaerfarbe) 40%, white);
 --komplementaerfarbeganzhell: color-mix(in srgb, var(--komplementaerfarbe) 10%, white);
 --komplementaerfarbedunkler: color-mix(in srgb, var(--komplementaerfarbe) 40%, black);
 --lineheight: 160%;
 --lineheight-h: calc(var(--lineheight) / 100 * 85);
 --abstandmittel: 10px;
 --rundungen: 2px;
 --rundungenKlein: 2px;
 --headerbild: url("/img/headergr.gif");
 --headerhoehe: 120px;
 --headerbildmobil: url("/img/headerkl.gif");
 --headerhoehemobil: 52px;
 --linkstandard: var(--farbedunkel1);
 --linkvisited: var(--farbedunkel1);
 --linkhover: var(--farbedunkel1);
 --linkactive: var(--farbedunkel1);
 /****************** invertieren ***********************/
 --linkstandard-i: color-mix(in srgb, var(--farbedunkel1), white 100%);
 --linkvisited-i: color-mix(in srgb, var(--farbedunkel1), white 100%);
 --linkhover-i: color-mix(in srgb, var(--farbedunkel1), white 100%);
 --linkactive-i: color-mix(in srgb, var(--farbedunkel1), white 100%);
}
.only-mobile {
	display: none;
}
 @media (max-width: 768px) {
.only-mobile {
	display: block;
}
}
.only-desktop {
	display: none;
}
@media (min-width: 769px) {
.only-desktop {
	display: block;
}
}
html, body {
	margin: 0;
	padding: 0;
	font-family: Arial;
	font-size: var(--schriftgroesse);
}
nav {
	color: var(--farbedunkel1);
}
.box {
	line-height: var(--lineheight);
	max-width: 100%;
	padding: var(--abstandmittel);
	background-color: var(--farbehell1);
	border: 1px dotted var(--farbedunkel1);
	margin-bottom: var(--abstandmittel);
}
@media only screen and (min-width: 769px) {
.box {
	margin-right: auto;
	margin-left: auto;
	max-width: var(--contentbreite);
	border-radius: var(--rundungen);
}
}
.trenner {
	width: 95%;
	border-top: 1px dotted var(--farbedunkel1);
	margin: 15px auto 15px auto;
	text-align: center;
}
.centered {
	text-align: center;
}
.hgwhite {
	background-color: #fff;
}
.noborder {
	border: none;
}
h1 {
	font-size: 1.5em;
	line-height: var(--lineheight-h);
	color: var(--farbedunkel1);
}
h2 {
	font-size: 1.3em;
	line-height: var(--lineheight-h);
	color: var(--farbedunkel1);
}
h3 {
	font-size: 1.1em;
	line-height: var(--lineheight-h);
	color: var(--farbedunkel1);
}
a:link, a:visited, a:hover, a:active {
	color: var(--linkstandard);
	line-height: var(--lineheight);
}
.bodyhg {
	background-color: color-mix(in srgb, var(--farbedunkel1) 10%, white);
}
.img-left {
	float: left;
	margin-right: 20px;
}
.img-right {
	float: right;
	margin-left: 20px;
}
.img-skal {
	max-width: 100%;
	height: auto;
}
.img-skal-50 {
	width: 50%;
	height: auto;
}
/************************ Button nach oben ************************/
.back-to-top {
	position: fixed;
	bottom: 20px;
	right: 15px;
	width: 54px;
	height: 46px;
	background: linear-gradient(to bottom, var(--farbemittel) 5%, var(--farbemittel) 100%);
	background-color: var(--farbedunkel1);
	border: 1px solid #fff;
	box-sizing: border-box;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	text-align: center;
	vertical-align: central;
	border-radius: var(--rundungenKlein);
	padding-top: 10px;
}
a:link.btt, a:visited.btt, a:hover.btt, a:active.btt {
	color: white;
	line-height: 1.0em;
	text-decoration: none;
	font-family: "Lucida Console", Monaco, monospace;
	font-size: 13px;
}
/************************ Text neben bild rechts ************************/
.tnbr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	padding: 15px;
	border-radius: var(--rundungenKlein);
	text-align: center;
}
.tnbr img {
	max-width: 120px;
	height: auto;
	display: block;
}
.tnbr p {
	margin: 0;
}
.tnbr a {
	color: var(--farbedunkel1);
	text-decoration: underline;
}
 @media (min-width: 769px) {
.tnbr {
	flex-direction: row;
	align-items: flex-start;
	text-align: left;
}
.tnbr img {
	max-width: 150px;
}
}
.nodec {
	text-decoration: none;
}