:root {
    --inhpad: 40px;
    --spagap: 20px;
    --spaanz: 7;
    --zeigap: 40px;
    --zeianz: 5;
	
	--fonsma: 24px;
	--fonmid: 32px;
	--fonbig: 48px;
	--fongia: 64px;

	--linhoe: 6px;

	/*Dynamische Neubelegung der Werte*/
	--spagap: 1.042vw;
	--inhpad: calc(var(--spagap) * 2);
	--zeigap: calc(var(--spagap) * 2);
	--linhoe: 0.3125vw;
	--fonsma: 1.25vw;
	--fonmid: 1.675vw;
	--fonbig: 2.5vw;
	--fongia: 3.75vw;
	
	/*HeroIcons*/
	--imgtic: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z' /%3E%3C/svg%3E");
	/*Die Breite einer Spalte unter Berücksichtigung des äußeren paddings sowie der gaps zwischen den Spalten*/
    --spabre: calc((100vw - calc((2 * var(--inhpad)) + ((var(--spaanz) - 1) * var(--spagap)))) / var(--spaanz));
    
	/*Die Höhe einer Zeile unter Berücksichtigung des äußeren paddings sowie der gaps zwischen den Zeilen*/
    --zeihoe: calc((100vh - calc((2 * var(--inhpad)) + ((var(--zeianz) - 1) * var(--zeigap)))) / var(--zeianz));
    
	/*-=FARBEN=-*/
    --colbei: #f3eddf;
    --coltur: #3d7e8d;
    --colros: #c56275;
	--collil: #534483;
	--colheb: #8cb7e3;
	--colge1: #edcc4f;
	--colge2: #f5e878;
	--colpag: #90bdb0;
	--colrot: #de6465;
	--colgru: #75c98b;
	--colblb: #86c2b5;
	--colvio: #c29dd4;
	--colerd: #d6b676;
	
	/*-=Farbabstraktion=-*/
	--baccol: var(--colbei);
	--maicol: var(--colros);
	--borcol: var(--coltur);
	--mencol: var(--coltur);
	
}

body {
    margin: 0;
}

.gridcontainerclass {
    padding: var(--inhpad);
    height: 100vh;
}

.klappmenueclass {
    background-color: var(--baccol);
    border: 2px solid var(--borcol);
    color: var(--mencol);
    border-radius: 0.25em;
	width:  calc(var(--spabre) - var(--inhpad));
	height: calc(calc(var(--zeihoe) * 3) + (var(--inhpad) * 2));
	position: fixed;
	top: var(--inhpad);
    
    padding-top: calc(var(--inhpad) / 4);
    padding-left: calc(var(--inhpad) / 2);
    padding-right: calc(var(--inhpad) / 2);
    
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-size: var(--fonmid); 
    line-height: 125%;
	z-index: 30;
}

.klappmenueclass p>a {
    color: var(--mencol);
    text-decoration: none;
}

.geschlossen {
	display: none;
}

.klappmenueclass a:hover {
    text-decoration: underline;
}

.kmbutton {
	position: absolute;
	top: var(--spagap);
	right: var(--spagap); 

	width: var(--inhpad);
	height: var(--inhpad);
}

.mzbutton {
	width: calc(var(--spagap) * 4);
	height: calc((var(--linhoe) * 3) + (var(--spagap) * 2));
	margin-top: var(--spagap);
}

.kmbutton:hover, .mzbutton:hover {
	cursor: pointer;
}

.kmknopf, .mzburgerknopf {
	height: var(--linhoe);
    background-color: var(--maicol);
	border-radius: 3px;
}
.kmknopf {
	position: absolute;
    width: calc(var(--spagap) * 2);
	/* top muss halbe Linienhoehe einberechnen, da transform-origin center */
	top: calc(var(--spagap) - (var(--linhoe) / 2));
	right: 0;
}
.knopflinks {
	transform-origin: center center;
    transform: rotate(45deg);
}
.knopfrechts {
	transform-origin: center center;
    transform: rotate(-45deg);
}
.mzburgerknopf {
	width: calc(var(--spagap) * 4);
	margin-bottom: calc(var(--spagap) / 2);
}


.kmtextoben {
	margin-top: calc((var(--zeihoe) / 2) - (var(--inhpad) / 4));
}

.kmtextunten {
	position: absolute;
	font-weight: normal;
	bottom: 0;
}

.menuezeileclass {
    background-color: var(--colbei);
	left: calc(var(--inhpad) + var(--spagap) + var(--spabre));
    height: var(--zeihoe);
	width: calc(100vw - var(--inhpad) - var(--spagap) - var(--spabre));
	position: fixed;
	top:0;
	padding-top: var(--inhpad);
    
	font-family: 'Lato', sans-serif;
    font-weight: normal;
    font-size: var(--fonsma); 
    line-height: 100%;
	
	background-color: var(--baccol);
}

.spielorteclass {
	height: calc(100vh - var(--zeihoe) - (var(--inhpad) * 2));
	width: calc(100vw - (var(--inhpad) * 2));
	position: fixed;
	top: calc(var(--zeihoe) + var(--inhpad));
}

.mzkmge {
	left: calc(var(--inhpad));
	width: calc(100vw - var(--inhpad));
}

.linkszelle {
	width: var(--spabre);
	height: var(--zeihoe);
	float: left;
	display: flex;
	align-items: stretch;
	font-weight: bold;
}

.halspa {
	width: calc(var(--spabre) / 2);
}

.halzei {
	width: calc(var(--zeihoe) / 2);
}

.hallingap {
	margin-top: calc(var(--linhoe) / 2);
}

.mittezelle {
	width: var(--spabre);
	height: var(--zeihoe);
	float: left;
	margin-left: calc((var(--spabre) * 1) + (var(--spagap) * 2));
	display: flex;
	justify-content: center;
}

.mmzzkmge {
	margin-left: calc((var(--spabre) * 2) + (var(--spagap) * 3));
}

.rechtzelle {
	width: var(--spabre);
	height: var(--zeihoe);	
	float: left;
	margin-left: calc((var(--spabre) * 2) + (var(--spagap) * 3));
}

.inhaltclass {
	margin-left: calc(var(--spagap) + var(--spabre));
	font-family: 'Lato', sans-serif;
    font-weight: normal;
    line-height: 50%;
	font-size: var(--fongia);
}

.lltbac {
	margin-top: calc(var(--zeigap) + var(--zeihoe));
}

.llthed {
	font-size: var(--fongia);
	margin-left: calc(var(--spagap) + var(--spabre));
	margin-top: calc((var(--zeigap) * 2) + (var(--zeihoe) * 2));
	color: var(--coltur);
}

.finstacl {
	margin-left: 0;
}

.w100-ar1 {
	width: 100%;
	/*aspect-ratio: 1/1;*/
}

.color-body {
	background-color: var(--baccol);
	color: var(--maicol);
}

/* -=Farbkombis=- */
.color-main, .color-main a{
	--baccol: var(--colbei);
	--maicol: var(--colros);
}

.color-lngl, .color-lngl a{
    background-color: var(--collil);
    color: var(--colheb);
}

.color-lnla, .color-lnla a{
    background-color: var(--collil);
    color: var(--colge1);
}

.color-lnly, .color-lnly a{
    background-color: var(--collil);
    color: var(--colpag);
}

.color-lnsp, .color-lnsp a{
    background-color: var(--collil);
    color: var(--colrot);
}

.color-extra {
	background-color: var(--colgru);
	color: var(--collil);
}

.color-lilm, color-lilm a{
	background-color: var(--colge2);
	color: var(--coltur);
}

.color-erfi, .color-erfi a{
	--baccol: var(--colros);
	--maicol: var(--colbei);
}

.color-rele, .color-rele a{
	background-color: var(--colbei);
	color: var(--coltur);
}

.color-sple, .color-sple a{
	color: var(--coltur);
}

.color-quote {
    color: var(--coltur);
}

.prg-erfi, .prg-erfi a {
	color: var(--colros);
	text-decoration: none;
}

.prg-erfi a:hover {
	background-color: var(--colros);
	color: var(--colbei);
	transition: 0.2s;
}

.prg-lana, .prg-lana a {
	color: var(--collil);
	text-decoration: none;
}

.prg-lana a:hover {
	background-color: var(--collil);
	color: var(--colbei);
	transition: 0.2s;
}

.prg-extr, .prg-extr a {
	color: var(--colgru);
	text-decoration: none;
}

.prg-extr a:hover {
	background-color: var(colgru);
	color: var(--collil);
	transition: 0.2s;
}

.prg-lilm, .prg-lilm a {
	color: var(--colge2);
	text-decoration: none;
}

.prg-lilm a:hover {
	background-color:var(--colge2);
	color: var(--coltur);
	transition: 0.2s;
}

.prg-rele, .prg-rele a {
	color: var(--coltur);
	text-decoration: none;
}

.prg-rele a:hover {
	background-color: var(--coltur);
	color: var(--colbei);
	transition: 0.2s;
}

.prg-slaf, .prg-slaf a {
	color: var(--colblb);
	text-decoration: none;
}

.prg-slaf a:hover {
	background-color: var(--colblb);
	color: var(--coltur);
	transition: 0.2s;
}

.prg-szwe, .prg-szwe a {
	color: var(--colvio);
	text-decoration: none;
}

.prg-szwe a:hover {
	background-color: var(--colvio);
	color: var(--coltur);
	transition: 0.2s;
}

.prg-sldv, .prg-sldv a {
	color: var(--colgru);
	text-decoration: none;
}

.prg-sldv a:hover {
	background-color: var(--colgru);
	colo: var(--coltur);
	transition: 0.2s;
}

.prg-slew, .prg-slew a {
	color: var(--colerd);
	text-decoration: none;
}

.prg-slew a:hover {
	background-color: var(--colerd);
	color: var(--coltur);
	transition: 0.2s;
}

.prgitm{
	margin-top: var(--zeigap);
	overflow: hidden;
}
.itmli1{
	
}
.itmli2{

}
.itmli3{

}
.itmdat{
	font-size: var(--fonbig);
	float: left;
	width: var(--spabre);
}
.itmday{
	font-size: var(--fonbig);
	float: left;
	width: var(--spabre);
	margin-left: var(--spagap);
}
.itmtyp{
	font-size: var(--fonbig);
	font-weight: bold;
	float: left;
	width: calc((var(--spabre) * 3) + (var(--spagap) * 2));
	margin-left: var(--spagap);
}
.itmbtn{
	float: left;
	font-size: var(--fonsma);
	width: var(--spabre);
	margin-left: var(--spagap);
	display: flex;
	justify-content: right;
}
.btnitm{
	border: 2px solid;
	border-radius: 0.25em;
	padding-left: 1em;
	padding-right: 1em;
	visibility: hidden;
}
.itmtim{
	font-size: var(--fonmid);
	float: left;
	width: var(--spabre);
	margin-left: calc(var(--spabre) + var(--spagap));
}
.itmloc{
	font-size: var(--fonmid);
	float: left;
	width: calc((var(--spabre) * 3) + (var(--spagap) * 2));
	margin-left: var(--spagap);
}
.itmtic{
	font-size: var(--fonmid);
	float: left;
	width: var(--spabre);
	margin-left: var(--spagap);
	display: flex;
	justify-content: right;
}
.ticitm{
	width: calc(var(--spagap) * 2);
	/*background-image: var(--imgtic);*/
}
.itmthe{
	font-size: var(--fonmid);
	float: left;
	margin-left: calc((var(--spabre) * 2) + (var(--spagap) * 2));
	width: calc((var(--spabre) * 3) + (var(--spagap) * 2));
}