/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

html {
    font-family: sans-serif;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}
body {
    margin: 0;
    font-family: Fira Sans,sans-serif;
}

.col-2{
  max-width: 1200px !important;
}

article {
    display: block
}
.text--teaser{
  max-width: 640px;
  margin: 0 auto;
}
/*  ------ Text-Section ------ */

.dachzeile{
  margin: 2px 0 2px 0;
}

.headline{
  margin-bottom: 10rem;
}

.home-lead{
  font-weight: 400 !important;
  font-size: 2.7rem !important;
  line-height: 1.4 !important;
  color: #3f3f42 !important;
  text-align: left !important;
  margin-bottom: 50px !important;
}

.dropcap {
  float:left;
  font-size: 6.2rem;
  line-height: 57px;
  padding-right: 10px;
  margin-bottom: -1px;
}
@media (max-width: 640px){
  .dachzeile{
    font-size: 1.5rem !important;
  }
  .headline{
    margin-bottom: 5rem !important;
  }
  .home-lead{
    font-size: 2.2rem !important;
    line-height: 1.4 !important;
  }
  .dropcap{
    font-size: 6.6rem;
    line-height: 60px;
  }
}
/*  ------ End-Text-Section ------ */
h2, h3, h4 {
    font-weight: 500;
    font-family: Fira Sans,sans-serif;
}

p {
    font-family: Georgia, serif;
}
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    margin-bottom: 50px;
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}
a:active,
a:hover {
    outline-width: 0
}
strong {
    font-weight: inherit
}
strong {
    font-weight: bolder
}
button {
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}
button {
    overflow: visible
}
button {
    text-transform: none
}
button {
    -webkit-appearance: button
}
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}
button:-moz-focusring {
    outline: 1px dotted ButtonText
}
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}
* {
    box-sizing: border-box
}

h1, h2, h3, h4, p {
    color: #3f3f42
}

h2 {
    color: #9B9B9B !important;
    font-size: 1.7rem !important;
    font-weight: 400 !important;
    text-align: center !important;
    margin: 8px auto 10px auto !important;

}

h3 {
    font-size: 2.7rem !important;
    font-weight: 700 !important;
    line-height: 3.6rem !important;
}
@media (max-width: 760px)  {
  h3 {
      font-size: 2.2rem !important;
      font-weight: 700 !important;
      line-height: 2.8rem !important;
  }
}


p {
    line-height: 1.3
}
a {
    text-decoration: none;
    color: #ffbe00
}
a:hover {
    text-decoration: underline
}
.container {
    max-width: 996px;
    margin-left: auto;
    margin-right: auto
}
.you-draw-it {
    margin: 30px 0 20px 0;
    position: relative;
    overflow: hidden
}
.you-draw-it #gradient-black .start {
    stop-color: #9B9B9B;
    stop-opacity: 0.8;
}
.you-draw-it #gradient-black .end {
    stop-color: #006FED;
    stop-opacity: 0;
}
.you-draw-it #gradient-red .start {
    stop-color: #E4593E;;
    stop-opacity: 0.3
}
.you-draw-it #gradient-red .end {
    stop-color: #ffbe00;;
    stop-opacity: 0.1
}
.you-draw-it .axis {
    opacity: 1;
}
.you-draw-it .axis text {
    font-size: 15px;
    font-family: Fira Sans,sans-serif;
    color: #9B9B9B;
}
.you-draw-it .line {
    fill: none;
    stroke-width: 3;
}
.you-draw-it .line.black {
    stroke: #3F3F42
}
.you-draw-it .line.red {
    stroke: #E4593E;
}
.you-draw-it .dots circle {
    transition: opacity .3s
}
.you-draw-it .dots circle.median {
    cursor: pointer
}
.you-draw-it .dots circle.black {
    fill: #000
}
.you-draw-it .dots circle.red {
    fill: #E4593E;
}
.you-draw-it .labels {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none
}
.you-draw-it .labels .data-label {
    position: absolute;
    transition: opacity .3s;
    z-index: 2
}
.you-draw-it .labels .data-label span {
    position: relative;
    margin-top: -43px;
    left: -50%;
    padding: 5px 15px;
    color: #fff;
    display: block;
    text-align: center;
    line-height: 16px;
    white-space: nowrap;
    font-weight: bold;
    font-family: inherit;
}
.you-draw-it .labels .data-label.edge-left span {
    left: -10px
}
.you-draw-it .labels .data-label.edge-right span {
    left: auto;
    right: 86%
}
.you-draw-it .labels .data-label:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-width: 12px 6px;
    margin-left: -6px
}
.you-draw-it .labels .data-label.black span {
    background-color: #3F3F42
}
.you-draw-it .labels .data-label.black:after {
    border-top-color: #3F3F42
}
.you-draw-it .labels .data-label.red span {
    background-color: #E4593E;
}
.you-draw-it .labels .data-label.red:after {
    border-top-color: #E4593E;
}
.you-draw-it .labels .data-label.your-result {
    position: absolute;
    z-index: 1
}
.you-draw-it .labels .data-label.your-result span {
    background-color: #ffbe00
}
.you-draw-it .labels .data-label.your-result:after {
    border-top-color: #ffbe00
}
.you-draw-it .titles {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
    padding-top: 20px
}
.you-draw-it .titles span {
    display: block;
    position: absolute;
    text-align: center;
    white-space: pre-line;
    line-height: 1.5;
    font-size: 14px
}
.you-draw-it .controls {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
    text-align: center;
    color: #E4593E
}
.you-draw-it .controls .box {
    margin-top: 230px;
    display: inline-block;
    border: 2px solid #E4593E;
    padding: 10px
}
.you-draw-it .grid .domain {
    stroke-dasharray: 3,3;
    opacity: .2
}
.you-draw-it .grid .tick line {
    stroke-dasharray: 3,3;
    opacity: .2
}
.you-draw-it .grid .tick line.highlight {
    opacity: .7
}
.you-draw-it .draggable {
    cursor: pointer
}
.you-draw-it .preview-line,
.you-draw-it .your-line {
    stroke-width: 4;
    stroke-dasharray: 1 7;
    stroke-linecap: round;
    fill: none
}
.you-draw-it .your-line {
    stroke: #ffbe00
}
.you-draw-it .preview-line {
    opacity: 0;
    stroke: #ffbe00
}
.you-draw-it:hover .preview-line {
    opacity: 1
}
.drawn .controls {
    display: none
}
.drawn:hover .preview-line {
    opacity: 0
}
#preview-arrow path {
    fill: #aaa
}


#content {
    overflow: hidden
}
#content.container {
    padding: 30px;
    margin: 0 auto;
    background: #fff
}
.category {
    overflow: hidden;
    background: url(../images/wahlkreuz.png) no-repeat 60% center;
    background-size: auto 80%
}
.category a {
    display: block;
    text-decoration: none;
    padding: 10px 0;
    margin: 30px 0 20px 0;
    color: #fff;
    font-weight: 700;
    font-size: 22px
}
.category a:hover {
    text-decoration: underline
}
.intro {
    max-width: 498px;
    text-align: center;
    margin: 0 auto 80px auto
}
.intro p {
    line-height: 1.6
}
.question h2,
.question h3 {
    max-width: 796.8px;
    margin: 20px auto;
    text-align: center
}
.question .result {
    position: relative;
    margin-top: 30px;
    margin-bottom: 70px
}
.question .result .actionContainer button {
    display: block;
    margin: 20px auto;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    background: #ffbe00;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    outline: 0;
    font-weight: bolder;
}
.question .result .actionContainer button[disabled] {
    background: #ccc;
    cursor: not-allowed
}
.question .result .actionContainer .tooltipcontainer {
    display: none;
    left: 50%;
    position: absolute;
    opacity: 0;
    padding-top: 7px
}
.question .result .actionContainer .tooltipcontainer .tooltiptext {
    position: relative;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 12px;
    z-index: 1;
    left: -50%;
    transition: opacity 1s;
    white-space: nowrap
}
.question .result .text {
    max-width: 405px;
    margin: 10px auto;
    display: none;
    text-align: left;
}
.question .result .text p {
    line-height: 1.7
}
.question .result .text a {
    display: block;
    text-align: left;
    padding: .3em 0;
    border-bottom: 1px solid #606365;
    color: #1d2124;
    position: relative;
    left: 0;
    right: 0
}
.question .result .text a:first-of-type {
    border-top: 1px solid #606365;
    margin-top: 30px
}
.question .result .text a:hover {
    background-color: #f0f0f0
}
.question .result.finished .tooltipcontainer {
    display: block
}
.question .result.shown .actionContainer {
    display: none
}
.question .result.shown .text {
    display: block
}
.question .tooltiptext::after {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #555;
    border-width: 15px;
    margin-left: -15px
}
.question .showAction:hover+.tooltipcontainer {
    opacity: 1
}
.credits {
    text-align: center;
}
.credits h3,
.credits h4 {
    margin: 30px 0 10px 0
}
.credits p {
    margin: 0 0 20px 0
}

@media (max-width: 996px) {
    .container {
        padding-left: 10px;
        padding-right: 10px
    }
}
@media (max-width: 760px) {
    .you-draw-it {
        margin: 0 -30px
    }
    .question .result.finished .tooltipcontainer {
        display: none
    }
}