@import "header-full.css";
@import "zwei-boxen-nebeneinander.css";
:root {
 --schriftart: Arial;
 --contentbreite: 768px;
 --schriftgroesse: 16px;
 --hauptfarbe: #e5d7b4; /****** hell ********/
 --textfarbe: #333;
 --signalfarbe: #ffae00;
 --signalfarbeheller: color-mix(in srgb, var(--signalfarbe) 40%, white);
 --signalfarbeganzhell: color-mix(in srgb, var(--signalfarbe) 10%, white);
 --signalfarbedunkler: color-mix(in srgb, var(--signalfarbe) 40%, black);
 --lineheight: 160%;
  --lineheight-h: calc(var(--lineheight) / 100 * 85);
 --abstandmittel: 10px;
 --borderfarbe: #6f3004; /****** dunkel ********/
 --mehrereboxen: calc(var(--contentbreite) + 20px);
 --rundungen: 16px;
 --rundungenKlein: 2px;
 --headerbild: url("/assets/img/bg_sax.jpg");
 --headerhoehefull: 75px;
 --headerbildmobil: url("/assets/img/headerkl.jpg");
 --headerhoehemobil: 52px;
 --linkstandard: var(--borderfarbe);
 --linkvisited: var(--borderfarbe);
 --linkhover: var(--borderfarbe);
 --linkactive: var(--borderfarbe);
 /****************** invertieren ***********************/
 --linkstandard-i: color-mix(in srgb, var(--borderfarbe), white 100%);
 --linkvisited-i: color-mix(in srgb, var(--borderfarbe), white 100%);
 --linkhover-i: color-mix(in srgb, var(--borderfarbe), white 100%);
 --linkactive-i: color-mix(in srgb, var(--borderfarbe), 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);
}
.box {
	line-height: var(--lineheight);
	max-width: 100%;
	padding: var(--abstandmittel);
	background-color: var(--hauptfarbe);
	border: 1px dotted var(--borderfarbe);
	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);
}
}
.img-left {
	float: left;
	margin-right: 20px;
}
.img-right {
	float: right;
	margin-left: 20px;
}
.trenner {
	width: 95%;
	border-top: 1px dotted var(--borderfarbe);
	margin: 15px auto 15px auto;
	text-align: center;
}
.centered {
	text-align: center;
}
.hgwhite {
	background-color: white;
	border:none;
}
.noborder {
	border: none;
}
h1 {
	font-size: 1.5em;	line-height:var(--lineheight-h);
}
h2 {
	font-size: 1.3em;	line-height:var(--lineheight-h);
}
h3 {
	font-size: 1.1em;	line-height:var(--lineheight-h);
}
a:link {
	color: var(--linkstandard);
}
a:visited {
	color: var(--linkvisited);
}
a:hover {
	color: var(--linkhover);
}
a:active {
	color: var(--linkactive);
}
a:link.invers {
	color: var(--linkstandard-i);
	text-decoration: none;
}
a:visited.invers {
	color: var(--linkvisited-i);
	text-decoration: none;
}
a:hover.invers {
	color: var(--linkhover-i);
	text-decoration: none;
}
a:active.invers {
	color: var(--linkactive-i);
	text-decoration: none;
}
.linkfarbe{
	color: var(--linkactive);
}
.submit {
	box-shadow: 0px 1px 0px 0px var(--signalfarbeganzhell);
	background: linear-gradient(to bottom, var(--signalfarbe) 5%, var(--signalfarbeheller) 100%);
	background-color: var(--signalfarbe);
	border-radius: 6px;
	border: 1px solid var(--signalfarbedunkler);
	display: inline-block;
	cursor: pointer;
	color: var(--textfarbe);
	font-family: var(--schriftart);
	font-size: var(--schriftgroesse);
	padding: 6px 24px;
	text-decoration: none;
	margin:5px 5px 5px 5px;
}
.submit:hover {
	background: linear-gradient(to bottom, var(--signalfarbeheller) 5%, var(--signalfarbe) 100%);
	background-color: var(--signalfarbeheller);
}
.submit:active {
	position: relative;
	top: 1px;
}
.bodyhg {
	background-color: color-mix(in srgb, white 10%, white);
}
.img-left {
	float: left;
	margin-right: 20px;
}
.img-right {
	float: right;
	margin-left: 20px;
}

.img-skal {
  max-width: 100%;
  height: auto;
}

/************************ Button nach oben ************************/
.back-to-top {
	width: 32px;
	position: fixed;
	bottom: 20px;
	right: 14px;
	background: var(--borderfarbe);     /* Hintergrundfarbe */
	padding: 5px 10px 5px 10px;
	border-radius: var(--rundungenKlein);
	text-decoration: none;
	font-size: var(--schriftgroesse);
	z-index: 2000;
	transition: background 0.3s ease, transform 0.2s ease;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	border: 1px solid var(--hauptfarbe);
}
/************************ toggle ************************/
#toggle {
  display: none;
}

#loesung {
  display: none;
}

#toggle:checked + label + #loesung {
  display: block;
}

.label {
  color: var(--borderfarbe);  
  text-decoration: underline;
  cursor: pointer;
}