@charset "UTF-8";
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 10, 2015 */
@font-face {
  font-family: 'Roboto Condensed';
  src: url("../fonts/robotocondensed-bold-webfont.eot");
  src: url("../fonts/robotocondensed-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/robotocondensed-bold-webfont.woff2") format("woff2"), url("../fonts/robotocondensed-bold-webfont.woff") format("woff"), url("../fonts/robotocondensed-bold-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: normal; }
@font-face {
  font-family: 'Roboto Condensed';
  src: url("../fonts/robotocondensed-italic-webfont.eot");
  src: url("../fonts/robotocondensed-italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/robotocondensed-italic-webfont.woff2") format("woff2"), url("../fonts/robotocondensed-italic-webfont.woff") format("woff"), url("../fonts/robotocondensed-italic-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: italic; }
@font-face {
  font-family: 'Roboto Condensed';
  src: url("../fonts/robotocondensed-regular-webfont.eot");
  src: url("../fonts/robotocondensed-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/robotocondensed-regular-webfont.woff2") format("woff2"), url("../fonts/robotocondensed-regular-webfont.woff") format("woff"), url("../fonts/robotocondensed-regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
h1,
h2 {
  font-weight: normal; }

h1 {
  font-size: 1.4em; }

h2 {
  font-size: 1em; }

hgroup > * {
  margin-top: 0;
  margin-bottom: 0.66667rem;
  padding-bottom: 0.66667rem; }
hgroup > :last-child {
  padding-bottom: 0; }
hgroup > :first-child {
  border-bottom: 1px solid currentcolor; }

.question-number {
  white-space: nowrap;
  opacity: .6; }
  .question-number:before {
    content: " · "; }

a {
  color: #646464; }
  a:hover {
    color: #737373; }
  a:active {
    color: #838383; }

a {
  text-decoration: none; }
  a[rel=help]:after {
    content: "›";
    margin-left: .3em; }

.tooltip-body {
  position: absolute;
  background-color: #006A85;
  color: #fdf7ea;
  display: inline-block;
  padding: 1rem;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  white-space: nowrap; }
  .tooltip-body h2 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.2em; }
  .tooltip-body h2 + p {
    border-top: 1px solid currentcolor;
    padding-top: 0.5rem; }
  .tooltip-body p {
    margin-top: 0.5rem;
    margin-bottom: 0; }
  .tooltip-body:after {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    background: url(../images/tooltip-arrow.svg) 0% 0% no-repeat;
    background-size: contain; }

.tooltip {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none; }
  .tooltip.top .tooltip-body {
    top: auto;
    bottom: 20px; }
  .tooltip.bottom .tooltip-body {
    bottom: auto;
    top: 20px; }
  .tooltip.left .tooltip-body {
    left: auto;
    right: 0; }
  .tooltip.right .tooltip-body {
    right: auto;
    left: 0; }
  .tooltip.top .tooltip-body:after {
    top: auto;
    bottom: -20px; }
  .tooltip.bottom .tooltip-body:after {
    bottom: auto;
    top: -20px; }
  .tooltip.left .tooltip-body:after {
    left: auto;
    right: 0px; }
  .tooltip.right .tooltip-body:after {
    right: auto;
    left: 0px; }
  .tooltip.bottom.left .tooltip-body:after {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg); }
  .tooltip.bottom.right .tooltip-body:after {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg); }
  .tooltip.top.right .tooltip-body:after {
    -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
            transform: rotate(270deg); }

.input-set {
  margin: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }
  .input-set input {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1; }

input[type=range] {
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 1rem; }
  input[type=range]:after, input[type=range]:before {
    position: absolute;
    top: 0;
    margin-top: -.9em;
    font: 14px "Roboto Condensed", Roboto, sans-serif;
    color: inherit; }
  input[type=range]:before {
    content: attr(min);
    left: 0; }
  input[type=range]:after {
    content: attr(max);
    right: 0; }

.min-label,
.max-label {
  padding-top: 1.5rem; }

.min-label {
  float: left;
  padding-right: 0.5rem; }

.max-label {
  text-align: right;
  float: right;
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
  padding-left: 0.45455rem; }

button, .answer aside nav a, .index nav a {
  background-color: #006A85;
  color: #fdf7ea;
  text-decoration: none;
  text-align: left;
  padding: 1rem;
  border: none;
  cursor: pointer;
  font: inherit; }
  button:hover, .answer aside nav a:hover, .index nav a:hover {
    background-color: #00647e; }
  button:active, .answer aside nav a:active, .index nav a:active {
    background-color: #005f77;
    color: #cac5bb; }
  button:focus, .answer aside nav a:focus, .index nav a:focus {
    outline: 5px solid rgba(0, 0, 0, 0.2); }
  button:active, .answer aside nav a:active, .index nav a:active {
    outline: none; }

.button-set {
  margin: 0; }
  .button-set.vertical button, .button-set.vertical .answer aside nav a, .answer aside nav .button-set.vertical a, .button-set.vertical .index nav a, .index nav .button-set.vertical a {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem; }
    .button-set.vertical button:last-of-type, .button-set.vertical .answer aside nav a:last-of-type, .answer aside nav .button-set.vertical a:last-of-type, .button-set.vertical .index nav a:last-of-type, .index nav .button-set.vertical a:last-of-type {
      margin-bottom: 0; }
  .button-set.mixing {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .button-set.mixing button, .button-set.mixing .answer aside nav a, .answer aside nav .button-set.mixing a, .button-set.mixing .index nav a, .index nav .button-set.mixing a {
      background: white;
      color: black;
      display: block;
      width: 49%;
      margin-bottom: 0.25rem;
      margin-right: 0.25rem;
      padding: 0.5rem;
      font-size: 1.4em; }
      .button-set.mixing button.active, .button-set.mixing .answer aside nav a.active, .answer aside nav .button-set.mixing a.active, .button-set.mixing .index nav a.active, .index nav .button-set.mixing a.active {
        background-color: #86BD4A; }
  .button-set.horizontal {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -0.25rem; }
    .button-set.horizontal button, .button-set.horizontal .answer aside nav a, .answer aside nav .button-set.horizontal a, .button-set.horizontal .index nav a, .index nav .button-set.horizontal a {
      -webkit-box-flex: 1;
      -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      margin: 0 0.25rem; }

.rangeslider,
.rangeslider__fill {
  background: #fdf7ea;
  display: block;
  height: 2px;
  width: 2px;
  border-radius: 1px; }

.rangeslider {
  position: relative;
  width: 100%;
  margin: 2rem 0; }

.rangeslider--disabled {
  opacity: 0.4; }

.rangeslider__fill {
  background: transparent;
  position: absolute;
  top: 0; }

.rangeslider__handle {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDgiPjxwYXRoIG9wYWNpdHk9Ii41IiBkPSJNMyA4SDJWMGgxdjh6bTItOEg0djhoMVYwek0xIDBIMHY4aDFWMHoiLz48L3N2Zz4=) no-repeat center center #fff;
  background-size: 5px 8px;
  border: 1px solid #ccc;
  cursor: pointer;
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: -12px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  border-radius: 12px; }

.rangeslider__handle:active {
  background-color: #ccc; }

input[type="range"]:focus + .rangeslider .rangeslider__handle {
  box-shadow: 0 0 8px rgba(255, 0, 255, 0.9); }

.question-wrapper {
  z-index: 2;
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; }

.wrapper {
  position: relative;
  height: 70%;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

main {
  position: relative;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; }
  main.question-visible .answer,
  main.question-visible header,
  main.question-visible footer {
    -webkit-filter: blur(20px);
            filter: blur(20px); }
  main.question-visible .question-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
  main .answer {
    z-index: 1;
    height: 100%;
    -webkit-transition: -webkit-filter .5s ease, filter .5s ease;
            transition: filter .5s ease; }

.msie .question-visible .question-wrapper {
  background: url(../images/question-blurred.png) no-repeat center center;
  background-size: 100% 100%; }

footer {
  text-align: right;
  opacity: .4; }
  footer p {
    margin: 10px 0px 0px 0px; }

header h1 {
  color: #006A85;
  font-weight: bold;
  font-size: 1.2em; }

.question {
  box-sizing: border-box;
  max-width: 30em;
  background-color: #006A85;
  color: #fdf7ea;
  padding: 1rem; }
  .question h2 {
    color: rgba(253, 247, 234, 0.6); }
  .question hgroup {
    margin-bottom: 1.5rem; }
  .question button, .question .answer aside nav a, .answer aside nav .question a, .question .index nav a, .index nav .question a {
    background-color: #fdf7ea;
    color: #222;
    font-size: 1.5em; }
    .question button:hover, .question .answer aside nav a:hover, .answer aside nav .question a:hover, .question .index nav a:hover, .index nav .question a:hover {
      background-color: #f0eade; }
    .question button:active, .question .answer aside nav a:active, .answer aside nav .question a:active, .question .index nav a:active, .index nav .question a:active {
      background-color: #e3ded2;
      color: #1b1b1b; }
    .question button:focus, .question .answer aside nav a:focus, .answer aside nav .question a:focus, .question .index nav a:focus, .index nav .question a:focus {
      outline: 5px solid rgba(0, 0, 0, 0.2); }
  .question input[type=range] {
    color: #fdf7ea; }

.answer aside,
.answer figure {
  position: absolute;
  top: 0;
  box-sizing: border-box; }
.answer aside {
  width: 30%;
  left: 0;
  background-color: #006A85;
  color: #fdf7ea;
  padding: 1rem; }
  .answer aside a {
    color: #fdf7ea; }
    .answer aside a:hover {
      color: #e3ded2; }
    .answer aside a:active {
      color: #cac5bb; }
  .answer aside a[rel=help] {
    display: block;
    margin-top: 1rem; }
  .answer aside nav {
    border-top: 0.5rem solid #fdf7ea;
    border-bottom: 0.5rem solid #fdf7ea;
    margin: -1rem;
    margin-top: 0;
    font-size: 1.1em; }
    .answer aside nav a {
      display: block; }
.answer figure {
  width: calc(70% - 1rem);
  height: 100%;
  margin: 0;
  right: 0; }
  .answer figure .tooltip {
    -webkit-transition: opacity .2s ease;
            transition: opacity .2s ease; }
  .answer figure.tooltips-can-hide:hover .tooltip {
    opacity: 0; }

[rel=next]:after {
  content: " 〉";
  margin-left: .5em;
  float: right; }

[rel=back]:before {
  content: "〈 ";
  margin-left: .5em;
  margin-right: 1em;
  float: left; }

.megatrend {
  font-size: 15px; }
  .megatrend aside,
  .megatrend figure {
    position: absolute;
    top: 0;
    box-sizing: border-box; }
  .megatrend aside {
    width: 30%;
    left: 0;
    padding: 0.7rem; }
    .megatrend aside .navigation_mt {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin: 0 -0.25rem; }
      .megatrend aside .navigation_mt a {
        margin: 0 0.25rem;
        background: #006A85;
        color: #fdf7ea;
        padding: 0.5rem;
        cursor: pointer; }
      .megatrend aside .navigation_mt #next {
        width: 90%;
        padding-left: 1rem; }
  .megatrend figure {
    background: #fdf7ea;
    width: calc(70% - 0.7rem);
    height: 100%;
    margin: 0;
    right: 0; }

.megatrend-full {
  background: #FDF7EA;
  font-size: 15px;
  max-width: 700px;
  max-height: 425px; }
  .megatrend-full #map {
    height: 100%;
    font-size: 20px; }
    .megatrend-full #map svg {
      background: #FDF7EA; }
  .megatrend-full #grid-parity {
    height: 100%;
    font-size: 20px; }
    .megatrend-full #grid-parity svg {
      background: #fff; }
      .megatrend-full #grid-parity svg .axis {
        stroke: #FDF7EA;
        stroke-width: 1px; }
      .megatrend-full #grid-parity svg .axis-txt {
        fill: #D1D0C7; }
      .megatrend-full #grid-parity svg .x.axis {
        stroke-width: 3px; }
      .megatrend-full #grid-parity svg .x.axis-txt {
        text-anchor: middle; }
      .megatrend-full #grid-parity svg path {
        fill: none; }
      .megatrend-full #grid-parity svg .konv {
        stroke: #B7B9BB; }
      .megatrend-full #grid-parity svg .ern {
        stroke: #86BD4A; }
      .megatrend-full #grid-parity svg .highlight {
        stroke-width: 2.5px;
        stroke: #006A83;
        fill: #006A83;
        fill-opacity: 0.3; }

.question2 figure {
  background: transparent; }
.question2 .tooltip-body {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); }
.question2 #ans_erneuer .tooltip-body {
  background-color: #86BD4A; }
  .question2 #ans_erneuer .tooltip-body:after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iIzg2QkQ0QSIgZD0iTTAgMGwyMCAyMFYwIi8+PC9zdmc+Cg==); }
.question2 #ans_konv .tooltip-body {
  background-color: #B7B9BB; }
  .question2 #ans_konv .tooltip-body:after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iI0I3QjlCQiIgZD0iTTAgMGwyMCAyMFYwIi8+PC9zdmc+Cg==); }
.question2 #linechart {
  height: 100%; }
.question2 .wrapper {
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
      -ms-flex-positive: 0;
          flex-grow: 0; }

.question3 .hover {
  fill: #ffca3a !important;
  cursor: pointer; }

.question5 text {
  opacity: .7; }
.question5 svg,
.question5 .log {
  position: absolute;
  top: 0;
  height: 100%;
  box-sizing: border-box; }
.question5 svg {
  right: 0;
  width: 70%; }
.question5 .log {
  left: 0;
  width: 40%;
  min-width: 15em;
  overflow: hidden;
  padding: 1.5rem; }
.question5 .switch-on {
  color: #dc6a02; }
.question5 .switch-off {
  color: #95c11f; }
.question5 .switch-on:before {
  content: "Ans Netz: "; }
.question5 .switch-off:before {
  content: "Vom Netz: "; }
.question5 .log h1 {
  color: #666;
  margin: 0;
  white-space: nowrap; }
  .question5 .log h1 span {
    font-size: .8em;
    font-weight: normal;
    margin-left: .5em;
    display: none; }
    .question5 .log h1 span:after {
      content: ' AKWs'; }
.question5 .log .hidden + section h1,
.question5 .log section:first-of-type h1 {
  font-size: 2em; }
  .question5 .log .hidden + section h1 span,
  .question5 .log section:first-of-type h1 span {
    display: inline;
    opacity: .8; }
.question5 .log section {
  margin-bottom: 3em; }
  .question5 .log section.hidden {
    display: none; }
.question5 .log p {
  font-size: .8em;
  margin-right: 5em; }
.question5 .country {
  fill: #fff;
  opacity: .4;
  stroke: #f0eade;
  -webkit-transition: opacity .2s ease;
          transition: opacity .2s ease; }
  .question5 .country.eu {
    opacity: 1; }
.question5 .reactor {
  fill: #95c11f;
  -webkit-transition: fill .2s ease;
          transition: fill .2s ease; }
  .question5 .reactor.hidden {
    display: none; }
  .question5 .reactor.active {
    fill: #dc6a02;
    stroke: none; }

.question7 .tooltip.bottom.left .tooltip-body {
  top: auto;
  left: auto;
  bottom: 0;
  right: 20px; }
  .question7 .tooltip.bottom.left .tooltip-body:after {
    top: auto;
    left: auto;
    bottom: 0;
    right: -20px;
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg); }

.question4 figure,
.question5 figure,
.question8 figure {
  overflow: hidden; }

.msie svg text {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important; }

.question5 .question .count {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 1rem;
  font-size: 1.5em; }
  .question5 .question .count abbr {
    font-size: .8em; }

.msie.question5 .rangeslider {
  width: 85%; }
.msie.question5 .count {
  display: inline-block; }

.index main,
.results main {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; }

.index nav a, .results section {
  text-align: center;
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 80vm;
  height: 80vm;
  width: 80vmin;
  height: 80vmin;
  border-radius: 50%; }

.index nav a {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: bold;
  font-size: 5vmin; }
  .index nav a:after {
    display: none; }
  .index nav a:active, .index nav a:focus {
    outline: none; }
  .index nav a strong {
    font-weight: normal;
    display: block;
    font-size: 1.6em;
    text-transform: none;
    margin: .1em 0 .2em;
    letter-spacing: 0; }

.results {
  background-color: #006A85; }
  .results section {
    background-color: #fdf7ea; }
    .results section > * {
      width: 50vmin; }

.msie9 {
  height: 100vh; }
  .msie9 main.question-visible .question-wrapper {
    display: block;
    width: 100vw;
    height: 100vh; }
  .msie9 .question {
    margin: 0 auto; }
  .msie9 .tooltip-body:before, .msie9 .tooltip-body:after {
    display: none; }

body {
  margin: 0;
  font: 14px "Roboto Condensed", Roboto, sans-serif;
  background: #fdf7ea; }

figure,
svg {
  background: #edebdc; }

[rel=next]:after {
  content: " 〉";
  margin-left: .5em;
  float: right; }