body, svg
{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}

svg
{
overflow: hidden;
}

svg line
{
stroke: #e6e6e6;
stroke-width: 1px;
}

#container
{
width: 95vw;
margin: 0 auto 0 auto;
position: relative;
}

#desc
{
display: block;
padding: 10px;
background-color: #333333;
color: #ffffff;
width: 95%;
margin: 0 auto 0 auto;
text-align: center;
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
line-height: 1.5em;
}

#texts
{
text-align: left;
line-height: 1.7em;
margin-bottom: 10px;
}

#button, #button2
{
padding: 4px 30px 4px 30px;
margin-bottom: 10px;
background-color: #000000;
color: #ffffff;
display: block;
cursor: pointer;
text-align: center;
}

#button:hover, #button2:hover
{
color: #333333;
background-color: #ffffff;
}

#button.dis
{
color: #333333;
}

#chart
{
display: block;
width: 100%;
margin-top: 10px;
position: relative;
}

#tool
{
position: absolute;
background-color: #ffffff;
padding: 5px;
font-size: 14px;
pointer-events: none;
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
background-color: #333;
color: #ffffff;
border-style: solid;
border-width: 2px;
border-color: #ffffff;
line-height: 1.5em;
}

#toolhead
{
width: 100%;
margin: 5px 0 15px 0;
font-size: 16px;
text-align: center;
}

#toolsvg
{
text-align: center;
vertical-align: middle;
margin: 15px 0 5px 0;
}

table
{
width: 100%;
borders: collapse;
}

td.nums
{
text-align: right;
}

td.sh
{
font-style: italic;
height: 2em;
}

.tostay, .hofers 
{
fill-opacity: 0.3;
stroke-width: 1px;
visibility: hidden;
}

#vdb_stamm, #hofer_stamm
{
fill-opacity: 0.3;
stroke-width: 1px;
}

.hofers, .vdbs
{
fill-opacity: 1;
stroke-width: 0;
visibility: hidden;
}

.lines_slope
{
stroke-width: 2px;
stroke-opacity: 0.7;
}

.mappath1, .mappath2
{
stroke-opacity: 0;
}

.result_text
{
text-anchor: middle;
font-size: 16px;
}

.names
{
text-anchor: middle;
font-size: 14px;
}

.grid_text
{
font-size: 12px;
text-anchor: end;
fill: #8c8c8c;
fill-opacity: 0;
}

.grid, .gerade
{
stroke-width: 1px;
stroke: #e6e6e6;
}

.gerade
{
stroke: #333;
stroke-opacity: 0.5;
}

.values
{
text-anchor: middle;
font-size: 12px;
display: none;
fill: #8c8c8c;
}

.values_v
{
text-anchor: start;
font-size: 12px;
display: none;
fill: #8c8c8c;
}

.label
{
font-size: 12px;
text-anchor: end;
display: none;
fill: #8c8c8c;
pointer-events: none;
}

.label2
{
font-size: 12px;
text-anchor: middle;
display: block;
fill: #8c8c8c;
pointer-events: none;
}

.gridlines
{
stroke-dasharray: 3, 3;
}

#ts text
{
fill: #ffffff;
text-anchor: middle;
font-size: 10px;
}

#desc_txt
{
text-align: center;
}

.quellen
{
margin-top: 25px;
font-size: 12px;
text-align: left;
line-height: 1.7em;
}

a:link 
{
color: #ffffff;
text-decoration: none;
padding-top: 3px;
padding-bottom: 3px;
}

a:visited 
{
color: #ffffff
}

a:hover 
{
color: #333333;
background-color: #ffffff;
}

a:active 
{
color: #333333;
background-color: #ffffff;
}

.result
{
font-size: 24px;
text-anchor: middle;
}

.circle_val
{
font-size: 12px;
fill: #333333;
fill-opacity: 0.8;
stroke: none;
text-anchor: middle;
}

@media screen and (min-aspect-ratio: 1/1)
{
#desc
{
position: absolute;
left: 10px;
top: 10px;
width: 25%;
vertical-align: top;
}

#chart
{
width: 65%;
margin-left: 30%;
position: relative;
}
}

@media screen and (min-width: 640px)
{
.names
{
font-size: 16px;
}

.result_text
{
font-size: 20px;
}
}

@media screen and (min-width: 800px)
{
.names
{
font-size: 20px;
}

.result_text
{
font-size: 24px;
}
}