body
{
margin: 0;
padding: 0;
font-size: 12px;
font-family: 'Roboto', sans-serif;
line-height: 1.5em;
width: 95vw;
margin: 0 auto 0 auto;
}

svg
{
overflow: hidden;
}

svg text
{
font-size: 10px;
fill: #221e1d;
stroke: none;
}

svg path
{
shape-rendering: geometricPrecision;
stroke: #221e1d;
}

a:link, a:visited, a:hover, a:active
{
color: #6d80b0;
text-decoration: underline;
}

#teaser
{
margin: 4vw 0;
max-width: 550px;
text-align: left;
}

#headline
{
font-family: 'Roboto Slab', serif;
font-size: 24px;
line-height: 1.5em;
margin-bottom: 2vw;
}

#container
{
position: relative;
}

#sections
{
width: auto;
position: relative;
margin: 0px auto;
padding-top: 400px;
}

#sections div
{
background: #ffffff;
padding: 10px;
border-top: 1px solid #221E1D;
border-bottom: 1px solid #221E1D;
margin-bottom: 90vh;
opacity: 0.1;
line-height: 1.5em;
}

#sections > div:first-child
{
margin-top: 0%;
}

#sections > div:last-child
{
opacity: 1;
margin-bottom: 30px;
}

#sections > div.graph-scroll-active
{
opacity: 1;
}

.pl
{
fill: #ffffff;
font-weight: bold;
display: none;
}

.intext
{
display: inline-block;
line-height: 1em;
border-bottom: 2px solid;
}

.intext.abs
{
border-bottom-color: #BFC4C4;
}

.gridtext
{
font-size: 10px;
}

.marker
{
stroke: none;
fill: none;
stroke-width: 2px;
}

.units
{
stroke: none;
stroke-opacity: 0.2;
}

.bezirke
{
fill: none;
stroke: #595C5C;
stroke-width: 2px;
display: none;
}

.units, .wahlkarten, .legend, .wkt
{
display: none;
}

.cubetext.circle
{
text-anchor: end;
}

.bg.no
{
fill: #edf1f1;
}

.bg.abs
{
fill: #ccd0d0;
}

.grid, .hgrid
{
stroke: #1F2D3D;
stroke-opacity: 0.1;
}

.gridtxt
{
text-anchor: middle;
fill-opacity: 0.5;
display: none;
font-size: 10px;
}

.overlay
{
stroke-width: 3px;
stroke: #DC304B;
fill: none;
pointer-events: none;
}

.redraw
{
cursor: pointer;
border-bottom: 1px dotted #d3d3d3;
}

.button
{
margin: 0 0.5em;
cursor: pointer;
border-bottom: 1px dotted;
}

.buttons
{
display: block;
margin-top: 1vw;
text-align: center;
}

.button:hover, .button.pressed, .redraw:hover
{
border-bottom: 3px solid;
}

.button.disabled
{
color: #d3d3d3;
border-bottom: 0px;
pointer-events: none;
}

.dates
{
font-size: 10px;
text-anchor: middle;
}

.caption, .caption.x
{
text-anchor: start;
}

.nums
{
text-anchor: end;
font-size: 10px;
}

.single_line
{
stroke-width: 2px;
fill: none;
}

.dots
{
stroke-width: 2px;
fill: #ffffff;
}

.gemdotlabel
{
text-anchor: middle;
pointer-events: none;
}

.gemdotlabel.bg
{
fill: none;
stroke-width: 5px;
}

.highlighted, .high2
{
stroke: #ffffff !important;
stroke-width: 2px;
}

.legend_circle
{
stroke-width: 2px;
}

.axis
{
display: none;
}

.axis path
{
stroke-opacity: 0;
}

.borders, .axis.y g.tick:nth-child(2) text
{
fill: none;
} 

.axisline
{
stroke: #221e1d;
stroke-opacity: 0.3;
}

#graph
{
position: -webkit-sticky;
position: sticky;
width: 95vw;
margin: 0px auto;
top: 30px;
}

#tool
{
position: absolute;
display: none;
pointer-events: none;
border: 1px solid #221e1d;
background-color: #ffffff;
max-width: 200px;
padding: 3px;
}

#toolhead
{
text-align: center;
font-size: 14px;
padding: 3px;
}

.years
{
font-size: 12px;
}

.startscroll
{
font-size: 1vw;
text-anchor: end;
}

.legend.circles
{
visibility: hidden;
}

/*

.dates, .nums, .caption, .gridtxt, .cubetext, .wkt
{
font-size: 10px;
}*/


@media screen and (min-width: 600px)
{
.gridtxt
{
display: block;
}

.legend.circles
{
visibility: visible;
}
}


@media screen and (min-width: 900px)
{
#headline
{
font-size: 36px;
line-height: 1.5em;
text-align: center;
}

#teaser
{
margin: 2vw auto 4vw auto;
}

#graph
{
width: auto;
margin: 0;
position: -webkit-sticky;
position: sticky;
top: 15px;
float: right;
}

#sections
{
margin: 0;
width: 260px;
padding-top: 150px;
}

#sections > div
{
border: none;
margin-bottom: 50vh; /*mehr*/
}

#sections > div:last-child
{
margin-bottom: 5px; /*mehr*/
}

svg text
{
font-size: 12px;
}

.years
{
font-size: 14px;
}
}


@media screen and (min-width: 1024px)
{
body
{
font-size: 16px;
}

#teaser
{
margin: 20 auto 0 auto;
}

#headline
{
font-size: 44px;
line-height: 1.5em;
}

#sections
{
width: 340px;
}
}