.karte
{
	width: 880px;
	height: 610px;
	position: relative;
}

.karte_leer
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	line-height: 100%;
	background-color: rgba(255, 255, 255, 0.7);
}

.karte_leer div
{
	position: absolute;
	left: 0px;
	top: 45%;
	width: 100%;
	height: auto;
	line-height: 40px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	background-color: rgba(255, 255, 255, 1);
	color: red;
	border: 3px solid red;
}

.karte img
{
	position: absolute;
	left: 0px;
	top: 0px;
}

.auswahl
{
	position: relative;
	width:  880px;
	height: auto;
	line-height: 40px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	background-color: rgba(255, 255, 255, 1);
	color: red;
	border: 3px solid red;
	top: 10px;
	z-index: 1;
}
.auswahl::before
{
	content: "";
	width: 0px;
	height: 0px;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 15px solid red;
	position: absolute;
	top: -20px;
	left: 50%;
}

.tabelle
{
	width: 880px;
	position: relative;
}

.tabelle table
{
	width: 880px;
}

.tabelle table, .tabelle th, .tabelle td
{
	font-size: 12px;
	color: inherit;
	border: 1px solid black;
	text-align: center;
	border-collapse: collapse;
}

.container
{
	width: 1px;
	height: 1px;
	position: absolute;
}

.punkt
{
	position: absolute;
	top: -6px;
	left: -6px;
	width: 13px;
	height: 13px;
	font-size: 0px;
	font-family: Arial, sans-serif;
	font-weight: bold;
	color: #000000;
	text-align: center;
	cursor: pointer;
	transition-delay: 0s;
	line-height: 13px;
}

.punkt:hover
{
	position: absolute;
	top: -20px;
	left: -20px;
	width: 41px;
	height: 41px;
	font-size: 12px;
	z-index: 101;
	transition: top .2s 0.7s, left .2s 0.7s, bottom .2s 0.7s, right .2s 0.7s, width .2s 0.7s, height .2s 0.7s, font-size 0s 0.9s, line-height 0s 0.9s;
	line-height: 41px;
}

.punkt svg
{
	stroke: rgba(0, 0, 0, 0.5);
	stroke-width: 2px;
}

.punkt span
{
	position: absolute;
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
	text-align: center;
	left: 0px;
	width: 100%;
	bottom: 0px;
}

.punkt span::selection
{
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
	color: #000000;
	background: transparent;
}

.dreieck span
{
	position: absolute;
	bottom: 4px;
	line-height: 10px;
}

.selected
{
	position: absolute;
	top: -20px;
	left: -20px;
	width: 41px;
	height: 41px;
	font-size: 12px;
	z-index: 100;
	line-height: 41px;
}

.selected svg
{
	stroke: rgba(255, 0, 0, 1);
	stroke-width: 2px;
}

.legende
{
	position: absolute;
	left: 10px;
	top: 10px;
	border: 1px;
	border-color: rgba(0, 0, 0, 0.3);
	border-style: solid;
}

.legende table
{
	font-size: 12px;
	color: inherit;
}

.legende table caption
{
	font-weight: 900;
}

.legfarbe
{
	width: 15px;
	height: 15px;
	border: 1px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 0.5);
}

.legsymbol
{
	width: 15px;
	height: 15px;
	stroke: rgba(0, 0, 0, 0.5);
	stroke-width: 2px;
	fill: #dddddd;
}