/* Setzt für alle Browser, alle Stylesheetvorgaben auf Null */
*, ::before, ::after { 
	box-sizing:		border-box; 
	padding:		0;
	margin:			0;
	border:			0;
}

:root {
	--vhmax:	700vh;
	/* --hbreite:	100%; */
	/*	Hier werden die Mindest- und die Maximalbreite des Zentralen Bereichs definiert
		diese Variablen werden für die gesamte Scalierung benutzt und
		können hier zentral geaendert werden	*/
	--minMoniBreit:		18rem;
	--maxMoniBreit:		75rem;
	--mediaumbruch:		860px;		}

body {
	hyphens:				auto;
	overflow-y:				scroll;
	/* height:					var(--vhoehe); */
}

	/* Einbindung von komplett eigen formatierten Untermenue-Seiten */
iframe{
		border:			none;
		width:			100%;
		height:			calc(100vh * 0.85);		}
		
.view-button-section	{	display:	none;	}
		
.bgkachel01 {
	background:				url("../grafik/bgkachel01.png") repeat;	}



	
	



	/* Hier das RASTER, dass alle Inhalte mittig macht wenn Browser breiter als 75rem */
	/* Zuerst schumpfen die beiden Autoränder, bis zum Gap von 0,5, ehe der Inhalt geschrumpft wird */
.masterraster {
	display:				grid;
	gap:					0.5em 0.5em;
	grid-template-columns:	auto minmax(var(--minMoniBreit), var(--maxMoniBreit)) auto;	}

	/* Hier wird der gesamte Inhalt im Masterraster in die Mittlere Spalte gepackt */
	/* Dies wrappt den gesammten Content, Aussnahmen, alle Dinge die über dem Sticky Header stehen */
	/* Dinge die über dem Sticky Header stehen muessen extra gewrappt werden */
.indiemitte {	grid-column:			2 / span 1;	}


.flx {	display:			flex;
		flex-direction:		row;
		flex-wrap:			wrap;
		/* justify-content:	space-between; */	}
		
.flx article {
	flex-basis:			calc(var(--minMoniBreit) / 0.75);
	flex-grow:			1;
	flex-shrink:		3;		}

.nowrap {
		flex-wrap:			nowrap;		}
		
.wrapreverse {	flex-wrap:	wrap-reverse; 		}

.senkrecht {	flex-direction:	column;	}

	/* Hier das Raster, dass das Elternelement in 1/3, 2/3, 3/3 unterteilt	*/
.einspaltig {
	min-width:			calc(var(--minMoniBreit) - 0.33);
	flex-basis:			33%;
	flex-grow:			1;	}

.zweispaltig {
	flex-basis:			51%;
	flex-grow:			2;		}

.ganzspaltig {
	flex-basis:			100%;
	flex-grow:			0;
	flex-shrink:		0;
	min-height:			0.5rem;	}
	
.halbehoehe {
	height:				50vh	;
	overflow:			scroll	;	}

.oben	{	align-items:	flex-start;	}
.vmitte	{	align-items:	center;		}
.unten	{	align-items:	flex-end;	}

.links	{	justify-content:	flex-start;		}
.hmitte	{	justify-content:	center;			}
.rechts	{	justify-content:	flex-end;		}

.viertelspalte {
	min-width:			calc(var(--minMoniBreit) / 4);
	flex-basis:			calc(var(--minMoniBreit) / 3);
	flex-grow:			0;
	flex-shrink:		1;	}

.elementtrenner {
	padding-bottom:		0.75em;
	margin-top:			0.75em;
	margin-bottom:		0.75em;
	border-bottom:		1px solid var(--violettopak);		}
	
.dotty { border:		dotted;	}




/* Hier wird der globale Teil im Stickyheader-Menue erzeugt.
	Alle Elemente gelten solange Global, bis sie im Mediaquery
	ueberschrieben werden */

	/* Hier wird ein Sticky-Header erzeugt */
#klebkopf {
	position:			sticky; 
	top:				0;
	left:				0;
	width:				100%;
	background-color:	var(--violett);		}

	/* Dies erzeugt einen Versatz für die Sprungmarken,
	nach unten,	damit die Sprungmarken nicht
	unter dem Sticky-Header verschwinden */
.versatz {
	visibility:			hidden;
	height:				0px !important;
	position:			absolute;
	margin-top:			-3rem;	}


	/* Erzeugt eine neue Flexbox mit gleich
	grossem Abstand zwischen den einzelnen Boxen
	und Abstand an den Aussenraendern */
.verteiler {
	display:			flex;
	flex-flow:			row wrap;
	justify-content:	space-between;
	line-height:		2rem;	/*	bestimmt die Höhe der Zeilen ohne Einfluss auf die Schriftgroesse	*/
	padding-left:		0.5em;
	padding-right:		0.5em;		}

	/*	Hier wird das Label-Element im Klebkopf und der Checkburger unsichtbar	*/
#klebkopf label, #checkburger {
	display:			none;
	font-size:			1.5rem;
	text-align:			right;
	margin-right:		0.5rem;
	height:				2rem;
	line-height:		2rem;	}

#menueinhalt { display:	flex; }
#menueinhalt a {
	text-decoration:	none;
	text-align:			right;
	padding:			0 0.33rem 0 0.33rem;
	height:				2rem;
	line-height:		2rem;		}
	
label.hamburg { 
	display:			block;
	width:				3.5rem;
	position:			relative; 
	border-radius:		4px; 
}

.line { 
	position:			absolute; 
	left:				0.5rem;
	height:				4px;
	width:				2.5rem; 
	background:			var(--antharzit);
	border-radius:		2px;
	display:			block; 
	transition:			0.5s; 
	transform-origin:	center; 
}

.line:nth-child(1) { top: 0.4rem; }
.line:nth-child(2) { top: 0.9rem; }
.line:nth-child(3) { top: 1.4rem; }

	/* Breite wurde experimentell und nach Gusto ermittelt */
	/* reverse denken dieser Abschnitt gilt, wenn der Moni schmaler als 880px ist */
@media screen and (max-width:	880px) {
	
	.verteiler { padding-right:	0; }
	
	#klebkopf label {
		display:		block;	}
		
	#menueinhalt a {
		box-sizing:			box-content;
		width:				100%;
		background-color:	var(--violett);
		padding:			0 0.5rem 0 0.5rem;		}
		
	#menueinhalt {	
		height:				auto; 
		max-height:			0; 
		overflow:			hidden; 
		transition:			all 0.5s;
	}
	
	#klebkopf input:checked ~ #menueinhalt {	max-height:	25rem;	}
	
	#checkburger:checked + .hamburg .line:nth-child(1)	{
		transform:	translateY(0.5rem) rotate(-45deg);	}

	#checkburger:checked + .hamburg .line:nth-child(2)	{
		opacity:	0;		}

	#checkburger:checked + .hamburg .line:nth-child(3)	{
		transform:	translateY(-0.5rem) rotate(45deg);	}
	
	/* Vergroessert den Abstand nach oben weil
		im schmaleren Viewport ein Zeilenumbruch stattfindet,
		der neue Zeilen erzeugt, die den Viewport verbreitern */
	.versatz { margin-top:		-7rem;	}
	
	a h4		{	font-size:		75%;	}
	
}
	
	
	
	
	
	
	
	
	
	
	










	/* SPOILER-CONTAINER von Florian Zier modifiziert von Matthias Zoellner, ProViCo */
.checkspoiler {	}

	/*	bringt alle Checkboxen in die linke obere Ecke des Elements und macht sie unsichtbar */
.checkspoiler > input[type=checkbox] {
		position:	absolute;
		opacity:	0.0;	}

	/*	Grafik und Hintergrund der Label-Menuepunkte */
.checkspoiler > input[type=checkbox] + label {
		background:				url(../grafik/knopfmachgross.svg) no-repeat;
		background-size:		1.25em;	/* Groesse der svg Grafik */
		background-position:	left 1em center;
		margin-bottom:			0.1em;	}
		
.checkspoiler > input[type=checkbox]:checked + label {
		background:				url(../grafik/knopfmachklein.svg) no-repeat;
		background-size:		1.25em;	/* Groesse der svg Grafik */
		background-position:	left 1em center;
		margin-bottom:			0.1em;	}
		
	/* Ein-/Ausfahren des Inhalts mit Animation */
	/* dieses div oeffnet unchecked */
.checkspoiler > input[type=checkbox]:first-child:checked ~ div {
		overflow:		hidden;
		max-height:		0px;
		transition: 	all 0.8s ease 0.0s;
}
.checkspoiler > input[type=checkbox]:first-child ~ div {
		overflow:		auto;
		overflow-y:		hidden;
		max-height:		var(--vhmax);
		transition: 	all 4.0s ease 0.0s;
}
	/* diese section schliesst unchecked */
.checkspoiler > input[type=checkbox]:first-child ~ article {
		overflow:		hidden;
		max-height:		0px;
		transition: 	all 0.8s ease 0.0s;
}
.checkspoiler > input[type=checkbox]:first-child:checked ~ article {
		overflow:		auto;
		overflow-y:		hidden;
		max-height:		var(--vhmax);
		transition: 	all 4.0s ease 0.0s;
}

	/*	Formatiert das Label. Verschiebt die Beschriftung der Label-Menuepunkte um
		Platz fuer die Grafik-Knoepfe zu machen  */
.checkbox {
        display: 			block;
        cursor:				pointer;
		padding-left:		3.5em;
		width:				calc(var(--maxMoniBreit) / 3);
/* 		padding-top:		0.66em;
		padding-bottom:		0.5em; */
}


.agbspoiler {	}

	/*	bringt alle Checkboxen in die linke obere Ecke des Elements und macht sie unsichtbar */
.agbspoiler > input[type=checkbox]:first-child {
		position:	absolute;
		opacity:	0.0;	}

	/*	Grafik und Hintergrund der Label-Menuepunkte */
.agbspoiler > input[type=checkbox]:first-child + label {
		background:				url(../grafik/auswahlleer.svg) no-repeat;
		background-size:		2em;	/* Groesse der svg Grafik */
		background-position:	left 2em center;
		padding-top:		0.66em;
		padding-bottom:		0.5em;
		background-color:	var(--lichtgrau);
		border-radius:		6px;
}
.agbspoiler > input[type=checkbox]:first-child:checked + label {
		background:				url(../grafik/auswahlgruenerhaken.svg) no-repeat;
		background-size:		2em;	/* Groesse der svg Grafik */
		background-position:	left 2em center;
		padding-top:		0.66em;
		padding-bottom:		0.5em;
		background-color:	var(--lichtgrau);
		border-radius:		6px;
}
	/*	Formatiert das Label. Verschiebt die Beschriftung der Label-Menuepunkte um
		Platz fuer die Grafik-Knoepfe zu machen  */
.agbbox {
		margin:				0.5em;
		cursor:				pointer;
		padding-left:		5em;
		float:				right;
}
.elementAnAus
	{	pointer-events:		none;
		opacity:			0.5;
		background-color:	var(--violettopak);
		border-radius:		6px;}
	/*	SPOILER-CONTAINER von Florian Zier modifiziert von Matthias Zoellner, ProViCo */


.radiospoiler {}

	/*	bringt Checkbox in die linke obere Ecke des Elements und macht sie unsichtbar*/
input[type=radio] {
	position:	absolute;
	opacity:	0.0;
}

	/*	Formatiert das Label. Verschiebt die Beschriftung der Label-Menuepunkte um
		Platz fuer die Grafik-Knoepfe zu machen  */

.schliesser,	/*	schliesser zum schliessen der Radiobuttons	*/
.radiobox {
			display: 		block;
			cursor:			pointer;
			width:			calc(var(--maxMoniBreit) / 3);
			padding-top:	0.66em;
			padding-bottom:	0.5em;	}
.radiobox {	padding-left:	5em;	}
.schliesser {
		background:				url(../grafik/knopfmachklein.svg) no-repeat;
		background-size:		1.25em;	/* Groesse der svg Grafik */
		background-position:	left 1em center;
		padding-left:			3em;	}
/*On Hover Color Change*/
.schliesser:hover {
        background-color: #7dbbf1;
	}


	/*	Grafik und Hintergrund der Label-Menuepunkte */
.radiospoiler > input[type=radio]:first-child + label {
		background:				url(../grafik/radiobuttonleer.svg) no-repeat;
		background-size:		1.25em;	/* Groesse der svg Grafik */
		background-position:	left 1em center;
}
.radiospoiler > input[type=radio]:first-child:checked + label {
		background:				url(../grafik/radiobuttonvoll.svg) no-repeat;
		background-size:		1.25em;	/* Groesse der svg Grafik */
		background-position:	left 1em center;

}

/* Ein-/Ausfahren des Inhalts mit Animation */
.radiospoiler > input[type=radio]:first-child:checked ~ div {
	overflow:		hidden;
	max-height:		0px;
	transition: 	all 0.8s ease 0.0s;
}
.radiospoiler > input[type=radio]:first-child~ div {
	overflow:		auto;
	overflow-y:		hidden;
	max-height:		var(--vhmax);
	transition: 	all 4.0s ease 0.0s;
}
.radiospoiler > input[type=radio]:first-child ~ article {
	overflow:		hidden;
	max-height:		0px;
	transition: 	all 0.8s ease 0.0s;
}
.radiospoiler > input[type=radio]:first-child:checked ~ article {
	overflow:		auto;
	overflow-y:		hidden;
	max-height:		var(--vhmax);
	transition: 	all 4.0s ease 0.0s;
}


















@font-face	{	font-family:	nunito-normal;
				font-display:	swap;
				src:			url('../fonts/nunito-normal.woff2') format('woff2');	}
.nn			{	font-family:	nunito-normal, arial, sans-serif;			}

@font-face	{	font-family:	nunito-italic;
				font-display:	swap;
				src:			url('../fonts/nunito-normal-italic.woff2') format('woff2');	}
.ni			{	font-family:	nunito-italic, arial, sans-serif;			}

@font-face	{	font-family:	nunito-bold;
				font-display:	swap;
				src:			url('../fonts/nunito-bold.woff2') format('woff2');	}
.nb			{	font-family:	nunito-bold, arial, sans-serif;		}
				
@font-face	{	font-family:	nunito-semibold;
				font-display:	swap;
				src:			url('../fonts/nunito-semibold.woff2') format('woff2');	}
u,
.nsb		{	font-family:	nunito-semibold, arial, sans-serif;		}

@font-face	{	font-family:	nunito-semibold-italic;
				font-display:	swap;
				src:			url('../fonts/nunito-semibold-italic.woff2') format('woff2');	}
.nsbi		{	font-family:	nunito-semibold-italic, arial, sans-serif;	}

@font-face	{	font-family:	nunito-xlight;
				font-display:	swap;
				src:			url('../fonts/nunito-xlight.woff2') format('woff2');	}
.nxl		{	font-family:	nunito-xlight, arial, sans-serif;			}

@font-face	{	font-family:	nunito-light;
				font-display:	swap;
				src:			url('../fonts/nunito-light.woff2') format('woff2');	}
.nl			{	font-family:	nunito-light, arial, sans-serif;			}

@font-face	{	font-family:	znikomitno25;
				font-display:	swap;
				src:			url('../fonts/znikomitno25.woff2') format('woff2');	}
.zni		{	font-family:	znikomitno25, 'Times New Roman', serif;			}
			 
body		{	font:				1rem arial, helvetica, verdana, sans-serif;
				font-family:		nunito-light;	}


h1, h2, h3	{	font-family:		znikomitno25;	}
h4			{	font-family:		nunito-normal;	}
h5			{	font-family:		nunito-xlight;	}

h1, h2,
h3, h4		{	letter-spacing: 	0.175em;	}

h1, h2		{	font-size:			1.75rem;	}				

h3, h4		{	font-size:			1.25rem;	}

.keinstrich	{	text-decoration:	none;		}

.lr-abstand	{	padding-left:		0.75em;
				padding-right:		0.75em;		}


.stichpunkt	{	font-family:			nunito-semibold;
				text-align:				left;
				padding-left:			2.25em;
				background:				url(../grafik/bullet.svg) no-repeat;
				background-position:	0.5em 0.33em;
				background-size:		0.66em;
				line-height:			135%;	}

ul	{			list-style-type:		none;
				margin:					0;
				padding:				0;		}

span + li,
.fettpunkt {	font-family:			nunito-semibold;
				text-align:				left;
				line-height:			135%;	}

.absatz,
.fliesstext {	font:				1rem arial, helvetica, verdana, sans-serif;
				font-family:		nunito-light;
				text-align:			left;
				padding-left:		4.5em;
				padding-right:		1.5em;	}
.absatz		{	padding-bottom:		1.5em;	}

	/* BULLETS Hier die Styles fuer alle Textblöcke */
.bullet {
	padding-right:		1em;
	padding-left:		0.5em;
}
.bullet p {
	line-height:		135%;
	letter-spacing: 0.075em;
}
.bullet p, table {
	padding-left:		2.25em;
	margin-bottom:		0.5em;
	background:			url(../grafik/bullet.svg) no-repeat;
	background-position:0 0.33em;
	background-size:	0.66em;
}

table.spalterechtsbuendig td:nth-child(1) {
  text-align: 			right;
}

.keinumbruch { white-space:		nowrap;	}

.einzug		{margin-left:	1em;	}

.auszug		{margin-left:	-1em	}




























:root {
	--gruen:			#11aa00;
	--antharzit:		#303030;
	--lichtgrau:		#dfdfdf;
	--violett:			rgba(240, 150, 180, 1);
	--violettopak:		rgba(240, 150, 180, 0.65);
	--linkblau:			#0044CC;
}




body
	{	background-color:	var(--lichtgrau);
		color:				var(--antharzit);
}

h1, h2, h3
	{	color:				var(--gruen);	}

a	{	color:				black;		}
u	{	color:				var(--gruen);	}

.stichpunkt, 
.absatz
	{	color:				var(--antharzit);	}

.violett
	{	background-color:	var(--violett);	}

.violettopak
	{	background-color:	var(--violettopak);	}
	
.fontviolett
	{	color:				var(--violett);	}
	
.linkblau
	{	color:				var(--linkblau);	}
	
.gruen
	{	color:				var(--gruen);	}




	/* Hier alles Styling, das mit Element-Größen zu tun hat */

img {	
	width:			100%;	}
	
.minhai	{
	height:			4em;
	width:			auto;
	max-height:		inherit;
	max-width:		5em;
	min-width:		2.5em	}
	
.hoch2 {
	height:			2em;
	width:			auto;		}

.hoch4 {
	height:			4em;
	width:			auto;		}
	
.hoch6 {
	height:			6em;
	width:			auto;		}
	
.hochpass {
	height:			100%;
	object-fit:		contain;	}
	

.element66 {
	width:			66%;
	height:			auto;		}
.element58 {
	width:			58%;
	height:			auto;		}
.element50 {
	width:			50%;
	height:			auto;		}
.element42 {
	width:			42%;
	height:			auto;		}
.element33 {
	width:			33%;
	height:			auto;		}
.element25 {
	width:			25%;
	height:			auto;		}
.element20 {
	width:			20%;
	height:			auto;		}
.element15 {
	width:			15%;
	height:			auto;		}
.element10 {
	width:			10%;
	height:			auto;		}

.rund {
	border-radius:	50%;
	width:			calc(var(--minMoniBreit) * 0.75);
	height:			calc(var(--minMoniBreit) * 0.75);
}

.elementtrenner {
	padding-bottom:		0.75em;
	margin-top:			0.75em;
	border-bottom:		1px solid var(--violettopak);		}
	
.innenabstandgross {
	padding-top:			1em;
	padding-left:			4em;
	padding-right:			4em;
	padding-bottom:			2em;
}

.innenabstandklein {
	padding-top:			0.5em;
	padding-left:			2.5em;
	padding-right:			1.5em;
	padding-bottom:			0.5em;
}

.negativabstand {
	margin-left:			-0.75em;
	margin-bottom:			-0.5em;
}

.schwuppsweg {}

@media screen and (max-width:	860px) {
	.schwuppsweg {
		display:		none;
	}
}
	/* Hier wird das Videolayout gestaltet */

video {
    width:				100%;
    height: 			auto;
}

.knopfWrapper {
    display:		inline-block;
    position:		relative;
}

	/* Bestimmt die Höhe der Buttons in Bezug auf die Gesamthoehe des Videos */
.video-overlay {
	height:			50%;
	position:		absolute;
    left:			0.5em;
    bottom:			0;
}

	/* Bestimmt die Hoehe der Buttons in Bezug auf die im Overlay Festgelegte Höhe, */
	/* 90% damit das Ding nicht am Rand klebt */
.video-overlay img {
	opacity:		0.7;
    left:			0px;
    top:			0px;
	height:			90%;
} .fee {}

.fee {
	animation-name:				fee;
	animation-duration:			9s;
	animation-iteration-count:	infinite;
	animation-timing-function:	ease-in-out;
	width:						33%;
	}
	
@keyframes fee {
	from {transform:		translate(140%,	-465%);}
	50% {transform:			translate(150%,	-250%);}
	to {transform:			translate(140%,	-465%);}
	}