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

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);		}
		
.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;	}
		
.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;	}
	/* justify-content = waagerechte Ausrichtung, align-items = senkrechte Ausrichtung */	
.mittemitte {
    justify-content:	center;
	align-items:		center;	}

.mitteoben {
    justify-content:	center;
    align-items:		flex-start;		}

.mitterechts {
	display:			flex;
    align-items:		center;
    justify-content:	flex-end;		}
.mittelinks {
	display:			flex;
    align-items:		center;
    justify-content:	flex-start;		}

.obenlinks {
	/* display:			flex; */
    align-items:		flex-start;
    justify-content:	flex-start;		}


	/* Erzeugt einen Flexkontainer im Flexkontainer, bzw. im übergeordneten Element
	Hier um die Elemente umgekehrt umzubrechen, d.h. die Elemente (Grafiken) die im Browser,
	bei genügend Breite neben dem Artikel stehen (row) brechen bei schmaleren Monitoren nach oben um (wrap-reverse)
	und stehen in einer Spalte über dem Artikel */
.unterraster {
	display:			flex;
	flex-direction:		row;	}

.unterraster article {
	flex-basis:			calc(var(--minMoniBreit) / 0.75);
	flex-grow:			1;
	flex-shrink:		3;		}

.unterraster h2, h3 {
	min-width:			var(--minMoniBreit);
	flex-basis:			100%;
	flex-grow:			1;		}

.kleinesbild {
	min-width:			calc(var(--minMoniBreit) / 3);
	flex-basis:			calc(var(--minMoniBreit) / 2);
	flex-grow:			0;		}
.ganzkleinesbild {
	min-width:			calc(var(--minMoniBreit) / 4);
	flex-basis:			calc(var(--minMoniBreit) / 3);
	flex-grow:			0;		}


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

.container {
	container-type:		inline-size;		}


/* 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 experimentell 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]:first-child {
		position:	absolute;
		opacity:	0.0;	}

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

	/* 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 ~ section {
		overflow:		hidden;
		max-height:		0px;
		transition: 	all 0.8s ease 0.0s;
}
.checkspoiler > input[type=checkbox]:first-child:checked ~ section {
		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:		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 top 1em;
		padding-left:			3em;	}


	/*	Grafik und Hintergrund der Label-Menuepunkte */
.radiospoiler > input[type=radio]:first-child + label {
		background:				url(../grafik/knopfmachgross.svg) no-repeat;
		background-size:		1.25em;	/* Groesse der svg Grafik */
		background-position:	left 1em top 0.8em;
}
.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 top 0.8em;

}

/* 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 ~ section {
	overflow:		hidden;
	max-height:		0px;
	transition: 	all 0.8s ease 0.0s;
}
.radiospoiler > input[type=radio]:first-child:checked ~ section {
	overflow:		auto;
	overflow-y:		hidden;
	max-height:		var(--vhmax);
	transition: 	all 4.0s ease 0.0s;
}

















.toggle label {
	position: relative;
	display: inline-block;
	width: 10em;
	height: 3.5em;
}

.toggle input {
	display: none;
}

.toggle .slider {
	/* Grundfläche */
	
	position: absolute;
	cursor: pointer;
	top: 1.5em;
	left: 3em;
	width: 4em;
	height: 2em;
	background-color: #c32e04;
	/* red */
	
	transition: all .3s ease-in-out;
	border-radius: 1em;
}

.toggle .slider:before {
	/* verschiebbarer Button */
	
	position: absolute;
	content: "";
	height: 1.6em;
	width: 1.6em;
	left: 0.2em;
	bottom: 0.2em;
	background-color: white;
	border-radius: 50%;
	transition: all .3s ease-in-out;
}

.toggle input:checked + .slider {
	background-color: #5a9900;
	/* green */
}

.toggle input:focus + .slider {
	background-color: pink;
	box-shadow: 0 0 1px #5a9900;
}

.toggle input:checked + .slider:before {
	transform: translateX(1.9em);
}

.text .slider:after {
	/* Text vor dem FlipFlop-Schalter */
	
	position: absolute;
	content: "AUS";
	color: #c32e04;
	font-weight: bold;
	height: 1.6em;
	left: -2.5em;
	bottom: 0.2em;
}

.text input:checked + .slider:after {
	/* Text hinter dem FlipFlop-Schalter */
	
	position: absolute;
	content: "AN";
	color: #5a9900;
	left: 4.5em;
}

@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, h4		{	font-family:		nunito-normal;	}
h5			{	font-family:		nunito-xlight;	}

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

h1			{	font-size:			clamp(2em, 8cqw, 10em);		}
h2			{	font-size:			1.75rem;
				padding-left:		0.75em;
				padding-top:		0.5em;		}				

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

.keinstrich	{	text-decoration:	none;		}

.links		{	text-align:			left;		}
.rechts		{	text-align:			right;		}
.mittel		{	text-align:			center;		}

.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 {
	--schwarz:			#000000;
	--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(--schwarz);	}

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


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

.hoch4 {
	height:			4em;	}
	
.hochpass {
	height:			100%;
	object-fit:		contain;
	/* object-position:	0%; */
}
	

.element66 {
	width:			66%;
	height:			auto;
}
.element58 {
	width:			58%;
	height:			auto;
}

.element50 {
	width:			50%;
	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:			4em;
	padding-left:			4em;
	padding-right:			4em;
	padding-bottom:			2em;
	/* border:				dotted; */
}

.innenabstandklein {
	padding-top:			0.5em;
	padding-left:			1em;
	padding-right:			1em;
	padding-bottom:			0.5em;
	/* border:				dotted; */
}

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

.schwuppsweg {}

@media screen and (max-width:	620px) {
	.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%;
} /* Muss ins Hauptdokument bzw. in die Styles.php includiert werden */

@font-face	{	font-family:	nunito-extrabold;
				font-display:	swap;
				src:			url('../php/wortwolke/nunito-extrabold.woff2') format('woff2');	}
.neb		{	font-family:	nunito-extrabold;		}


p.cloud {
	hyphens:			none;
	font-family:		nunito-extrabold;
	display:			flex;
	flex-wrap:			wrap;
	align-items:		center;
	justify-content:	center;
	line-height:		2rem;
}